list

src/views/LandConsolidation/components/list.vue

@@ -0,0 +1,275 @@
+<template>
+  <div class="xzlist">
+    <div class="tdTitle">整治项目</div>
+    <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"
+      :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" @click="handle(row)"> 对比 </span>
+      </template>
+    </tablePage>
+    <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 { xzForm, TableHeader, 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: xzForm,
+      cloumn: TableHeader,
+      reasonList: reasonList,
+      table: {
+        data: [],
+        total: 20,
+      },
+      now: "",
+      tempdataLayerId: "",
+    };
+  },
+  mounted() {
+    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;
+      }
+    }
+  }
+  .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>