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

<template>
  <div class="xzlist">
    <div v-if="type == 1" class="xztype">
      <span :class="{ usable: pageObj.isConfirm }" @click="changerdxz">
        认定为闲置未处置情况
      </span>
      <span :class="{ usable: !pageObj.isConfirm }" @click="changerdxz">
        认定为未非闲置情况
      </span>
    </div>
    <custom-form ref="formRef" :model="pageObj" :config="formConfig">
      <template #region>
        <!-- clearable -->
        <el-cascader
          v-model="pageObj.xzqh"
          :show-all-levels="false"
          :options="store.state.region_tree"
          placeholder="行政区"
          :props="{
            checkStrictly: true,
            expandTrigger: 'hover',
            emitPath: false,
          }"
        ></el-cascader>
      </template>
      <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>
    <div class="content">
      <div class="item">
        <p>项目数（个）</p>
        <span>{{ table.total || 0 }} </span>
      </div>
      <div class="item">
        <p>土地面积（亩）</p>
        <span>{{ table.area || 0 }} </span>
      </div>
    </div>
    <tablePage
      :class="'tablePage' + type"
      :cloumn="cloumn"
      :table="table"
      :indexed="false"
      :showTotal="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" v-if="type == 0" @click="judge(row)"> 判定 </span>
        <span class="usable" v-if="type == 1" @click="handle(row)"> 处置 </span>
      </template>
    </tablePage>
    <div class="tip" v-if="type == 0">
      说明:系统判断疑似闲置的条件(合同约定开工之日起仍未开工的项目)
    </div>
    <handleModal ref="handleRef" @close="searchFun()"></handleModal>
  </div>
</template>

<script>
import tablePage from "@/components/mapView/tablePage.vue";
import customForm from "@/components/mapView/custom-form.vue";
import handleModal from "./handleModal.vue";
import { GetList, idleLandList } from "@/api/Idleland.js";
import {
  ysForm,
  xzForm,
  TableHeader,
  TableHeader2,
  reasonList,
} from "./config";
import { loadGeoJSON } from "@/utils/MapHelper/help.js";
let geoSources = {};
export default {
  components: {
    tablePage,
    customForm,
    handleModal,
  },
  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: ysForm,
      cloumn: TableHeader,
      reasonList: reasonList,
      table: {
        data: [],
        total: 20,
      },
      now: "",
      tempdataLayerId: "",
    };
  },
  mounted() {
    this.formConfig = this.$props.type == 0 ? ysForm : xzForm;
    this.cloumn = this.$props.type == 0 ? TableHeader : TableHeader2;
    this.reset();
  },
  methods: {
    searchFun(page = {}) {
      this.getTableData({
        ...this.pageObj,
        pageNum: page.pageIndex || 1,
        pageSize: page.size || 10,
      });
    },
    getTableData() {
      this.$emit("updateParent", "loading", true);
      this.removeGeoJSON();
      if (this.$props.type == 0) {
        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);
        });
      } else {
        idleLandList(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, this.$props.type);
    },
    judge(row) {
      this.$refs.handleRef.Init(row, "judge");
    },
    handle(row) {
      this.$refs.handleRef.Init(row, "deal");
    },
    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;
      }
    }
  }
  .tablePage0,
  .tablePage1 {
    height: calc(100% - 160px);
  }
  .tablePage2 {
    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>