real3d-portalsite/src/views/LandConsolidation/components/list.vue

<template>
  <div class="xzlist">
    <div class="tdTitle">整治项目</div>
    <span class="clearBtn" @click="cockpit">
      <i class="el-icon-thumb"></i>
      图斑详情查询
    </span>
    <custom-form ref="formRef" :model="pageObj" :config="formConfig">
      <template #type>
        <el-select v-model="pageObj.idleReason" placeholder="项目类型">
          <el-option
            v-for="item in reasonList"
            :key="item.code"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </template>
      <template #action>
        <el-button
          size="mini"
          type="primary"
          icon="el-icon-search"
          @click="searchFun"
        >
        </el-button>
      </template>
    </custom-form>
    <tablePage
      class="tablePage"
      :cloumn="cloumn"
      :table="table"
      :indexed="false"
      layout="prev, pager,next"
      ref="tableDialogRef"
      @currentChange="searchFun"
    >
      <template #mj="{ row }">
        {{ Number(row.crmj).toFixed(2) }}
      </template>
      <template #action="{ row }">
        <span class="usable" @click="detail(row)">详情</span>
        <span class="usable" @click="handle(row)"> 对比 </span>
      </template>
    </tablePage>
  </div>
</template>

<script>
import tablePage from "@/components/mapView/tablePage.vue";
import customForm from "@/components/mapView/custom-form.vue";

import { GetList } from "@/api/Idleland.js";
import { xzForm, TableHeader, reasonList } from "./config";
import { loadGeoJSON } from "@/utils/MapHelper/help.js";
let geoSources = {};
export default {
  components: {
    tablePage,
    customForm,
  },
  props: {
    type: {
      type: String,
    },
    recordBsm: {
      type: String,
    },
  },
  data() {
    return {
      pageObj: {
        key: "",
        xzqh: "",
        idleReason: "",
        isConfirm: true,
        pageNum: 1,
        pageSize: 10,
        isDisposal: false,
        startTime: "",
        endTime: "",
      },
      datalist: [{}],
      formConfig: xzForm,
      cloumn: TableHeader,
      reasonList: reasonList,
      table: {
        data: [{}],
        total: 20,
      },
      now: "",
      tempdataLayerId: "",
    };
  },
  mounted() {
    this.reset();
  },
  methods: {
    cockpit() {
      this.$emit("cockpit");
    },
    searchFun(page = {}) {
      this.getTableData({
        ...this.pageObj,
        pageNum: page.pageIndex || 1,
        pageSize: page.size || 10,
      });
    },
    getTableData() {
      this.$emit("updateParent", "loading", true);
      this.removeGeoJSON();
      GetList(this.pageObj).then((res) => {
        this.$emit("updateParent", "loading", false);
        this.table = {
          ...res.data,
          total: res.data.count,
          data: res.data.list,
        };
        this.active_tableData(res.data.list);
      });
    },
    tableRowClassName({ row, rowIndex }) {
      // if (rowIndex === this.scrollTop_index) {
      //   return "warning-row";
      // }
      // return "";
    },
    active_tableData(newVal) {
      newVal.forEach((res, index) => {
        if (res.geom || res.st_asewkt)
          loadGeoJSON(
            res.geom || res.st_asewkt,
            "#55A1E3",
            { isfly: false },
            (data) => {
              geoSources[res.id] = data;
              data.name = "Idleland";
              data.entities.values.forEach((entity) => {
                entity.properties = { type: "图斑上图", id: res.id };
              });
            }
          );
      });
    },
    flyTo(item) {
      let id = "h_" + item.id;
      this.tempdataLayerId = id;
      if (geoSources[id]) return;
      loadGeoJSON(
        item.geom || item.st_asewkt,
        "#ff0000",
        { isfly: true },
        (data) => {
          data.name = "Idleland";
          geoSources[id] = data;
          data.entities.values.forEach((entity) => {
            entity.properties = { type: "图斑上图", id: item.id };
          });
        }
      );
    },
    removeGeoJSON() {
      if (!window.viewer) return;
      viewer.entities.removeAll();
      viewer.dataSources.removeAll();
      // viewer.dataSources._dataSources.forEach((das) => {
      //   if (das.name == "Idleland") {viewer.dataSources.remove(das);}
      // });
    },

    reset(xzqh) {
      this.pageObj = {
        key: "",
        xzqh,
        idleReason: "",
        isConfirm: this.$props.type != 0,
        pageNum: 1,
        pageSize: 10,
        isDisposal: this.$props.type == 2,
        // startTime: store.state.cockpit_date[0],
        // endTime: store.state.cockpit_date[1],
      };
    },
    detail(row) {
      this.flyTo(row);
      this.bus.$emit("handleView", row);
    },
    handle(row) {
      this.$emit('contrast', row);
    },
    changerdxz() {
      this.pageObj.isConfirm = !this.pageObj.isConfirm;
      this.searchFun();
    },
  },
  watch: {
    tempdataLayerId(newVal, oldVal) {
      if (oldVal && geoSources[oldVal]) {
        viewer.dataSources.remove(geoSources[oldVal]);
        geoSources[oldVal] = null;
      }
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.xzlist {
  width: 100%;
  height: 100%;

  .content {
    width: 100%;
    height: 50px;
    margin: 10px 0;
    background: #2e5a70;
    border-radius: 5px;
    padding-top: 5px;
    .item {
      width: 48%;
      height: 100%;
      display: inline-block;
      position: relative;

      text-align: center;
      span {
        font-family: "Arial Negreta", "Arial Normal", "Arial";
        font-weight: 700;
        font-style: normal;
        color: #68f4fb;
      }
    }
  }
  .tablePage {
    height: calc(100% - 120px);
  }
  .tip {
    color: #f56c6c;
  }
  .xztype {
    display: flex;
    margin: 5px 0;
    align-items: center;
    justify-content: space-between;
    span {
      display: inline-block;
      border: 1px solid #3f93f5;
      border-radius: 5px;
      padding: 0 10px;
      line-height: 30px;
    }
  }
}
</style>

<style lang="scss">
.xzlist {
  .el-col {
    padding-right: 0 !important;
  }
}
</style>