图斑清单联调

src/api/ghss/jctb.js

@@ -20,3 +20,10 @@ export function JscQueryList(params) {
         params
     })
 }
+export function JctbList(params) {
+    return request({
+        url: '/apply/gdbh/jctb/list',
+        method: 'get',
+        params
+    })
+}

src/views/farmlandProtection/components/tbqd.vue

@@ -2,11 +2,11 @@
   <div class="tbqd">
     <div>
       <div class="headerInput">
-        <el-input v-model="input" placeholder="请输入内容"></el-input>
-        <span>共5条</span>
+        <el-input v-model="input" placeholder="请输入监测编号搜索"></el-input>
+        <span>共{{total}}条</span>
       </div>
       <div class="pagination">
-        <el-table :data="tableData" style="width: 100%" height="560">
+        <!-- <el-table :data="tableData" style="width: 100%" height="560">
           <el-table-column
             prop="index"
             label="序号"
@@ -55,63 +55,160 @@
           layout="total, prev, pager, next, jumper"
           :total="total"
         >
-        </el-pagination>
+        </el-pagination> -->
+        <el-table
+          :row-class-name="tableRowClassName"
+          ref="singleTable"
+          :data="active_dableData"
+          style="width: 100%"
+          height="64vh"
+          :header-cell-style="{
+            background: 'rgba(10, 25, 38, 0.6)',
+            color: '#66b1ff',
+            fontSize: '14px',
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: '400',
+          }"
+        >
+          <el-table-column
+            prop="index"
+            label="序号"
+            width="50"
+            align="center"
+            show-overflow-tooltip
+          >
+          </el-table-column>
+          <el-table-column
+            prop="jcbh"
+            label="监测编号"
+            align="center"
+            width="220"
+            show-overflow-tooltip
+          >
+          </el-table-column>
+          <el-table-column
+            prop="jcmj"
+            label="监测面积（亩）"
+            align="center"
+            show-overflow-tooltip
+          >
+          </el-table-column>
+          <el-table-column
+            prop="regioncode"
+            label="地区编号"
+            align="center"
+            show-overflow-tooltip
+          >
+          </el-table-column>
+          <el-table-column
+            prop="xmc"
+            label="所属区县"
+            align="center"
+            show-overflow-tooltip
+          >
+          </el-table-column>
+          <el-table-column fixed="right" label="操作" width="90" align="center">
+            <template slot-scope="scope">
+              <el-button
+                @click="handleClick(scope.row)"
+                type="text"
+                size="small"
+                >定位</el-button
+              >
+              <el-button
+                type="text"
+                size="small"
+                @click="handleDetails(scope.row)"
+                >详情</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
       </div>
     </div>
-
-
   </div>
 </template>
 
 <script>
-import { tempData } from "./tbqdJson";
-
+import * as wellknown from "wellknown";
+import * as turf from "@turf/turf";
+import { QueryOne, QueryList } from "@/api/cockpitNew";
+import { loadGeoJSON } from "@/utils/MapHelper/help.js";
+import { JctbList } from "@/api/ghss/jctb.js";
+let layerSources = {};
 export default {
-  components: {
-
+  props: {
+    updateObj: {
+      type: Object,
+    },
   },
+  components: {},
   data() {
     return {
-      pageSize: 10,
+      pageSize: 999999999,
       pageNum: 1,
-      total: 10,
+      total: 0,
       input: "",
       tableData: [
         {
           index: 1,
-          smID: "6401812024070108270002",
-          area: 14.86,
-        },
-        {
-          index: 1,
-          smID: "6401812024070108270002",
-          area: 14.86,
-        },
-        {
-          index: 1,
-          smID: "6401812024070108270002",
-          area: 14.86,
-        },
-        {
-          index: 1,
-          smID: "6401812024070108270002",
-          area: 14.86,
+          xzq: "吉阳区",
+          area: 15.77,
+          geom: "SRID=4326;POLYGON((109.59869777823978 18.30754004864167,109.59866020503804 18.3075287242227,109.59805922591379 18.308163716187515,109.5981136311953 18.308221137831783,109.59836268259254 18.308421464100224,109.59894446155542 18.308778942080387,109.59912358030529 18.308513018998276,109.59926833822395 18.307686075648466,109.59922999813244 18.307677742560827,109.59919163135127 18.307669210727592,109.59915331165077 18.307660471043558,109.59911504661704 18.307651541570884,109.59907683244775 18.307642404243868,109.59903866346767 18.30763305906792,109.59900055293832 18.30762352409984,109.59896250651627 18.307613781264823,109.5989245090863 18.307603848646753,109.59888656819861 18.307593709976004,109.5988486857508 18.30758337067161,109.59881086743154 18.30757284337675,109.59877310754295 18.307562106413606,109.59873541366552 18.307551172423587,109.59869777823978 18.30754004864167))",
+          id: "4602",
+          create_time: "2024-01-01",
         },
       ],
+      active_dableData: [],
       isShowTb: false,
       detailObj: null,
+      tempdataLayerId: null,
     };
   },
   computed: {},
   mounted() {
-    console.log(tempData,'tempData');
+    // this.init();
+    // this.initNew()
   },
   methods: {
-    handleClick(row) {
-      console.log(row, "---");
+    initNew() {
+      let obj = {
+        hlx: this.updateObj.val2,
+        regioncode: this.updateObj.region,
+        startTime: this.updateObj.val0,
+        endTime: this.updateObj.val1,
+        pageNum: this.pageNum,
+        pageSize: this.pageSize,
+        jcbh: this.input,
+      };
+      JctbList(obj).then((res) => {
+        console.log(res,'>>>>>');
+        this.active_dableData = res.rows;
+        this.total = res.total
+      });
+    },
+    handleClick(item) {
+      console.log(item, "---");
+      if (!item.geom) {
+        this.$message.warning("缺少定位图斑");
+      } else {
+        this.tempdataLayerId = "h_" + item.index;
+        loadGeoJSON(
+          item.geom,
+          "#ff0000",
+          { isfly: true, sw: 5 },
+          (data) => {
+            layerSources["h_" + item.index] = data;
+            data.entities.values.forEach((entity) => {
+              entity.properties = item;
+            });
+          }
+          // item.geom.type == "MultiPolygon" ? 5 : 100
+        );
+      }
     },
     handleDetails(row) {
-        this.$emit("updateParent", "isShowTb", true);
+      this.$emit("updateParent", "isShowTb", true);
     },
     handleSizeChange(val) {
       this.pageSize = val;
@@ -121,16 +218,88 @@ export default {
       this.pageNum = val;
       //   this.getList();
     },
+    getMapList(newVal) {
+      newVal.forEach((item, index) => {
+        item.type = "图斑上图";
+        if (item.geom)
+          loadGeoJSON(item.geom, "#55A1E3", { isfly: false }, (data) => {
+            layerSources[item.id] = data;
+            data.entities.values.forEach((entity) => {
+              entity.properties = item;
+            });
+          });
+      });
+    },
+    async init(params) {
+      const that = this;
+      let obj = {
+        jscType: "jsc_bjxm_csbj_zbmx",
+        beginTime: "2024-01-01",
+        endTime: "2024-12-04",
+        id: "4602",
+        ...params,
+      };
+      let data = await QueryList(obj);
+      console.log(data);
+      data.data.map((res) => {
+        if (res.geom) {
+          res.geom = wellknown.parse(res.geom.split(";")[1]);
+        }
+      });
+      this.active_dableData = data.data;
+    },
+  },
+  watch: {
+    updateObj: {
+      handler(newVal, oldVal) {
+        this.initNew();
+      },
+      deep: true,
+      immediate: true,
+    },
+    input(newVal, oldVal){
+      this.initNew();
+    },
+    active_dableData(newVal, oldVal) {
+      newVal.forEach((res, index) => {
+        res.type = "图斑上图";
+        res.index = index;
+        if (res.geom)
+          loadGeoJSON(res.geom, "#55A1E3", {}, (data) => {
+            layerSources[index] = data;
+            data.entities.values.forEach((entity) => {
+              entity.properties = res;
+            });
+          });
+      });
+    },
+    tempdataLayerId(newVal, oldVal) {
+      // if (oldVal && tdsy.layersObj[oldVal]) {
+      //   tdsy.layersObj[oldVal].show = false;
+      // } else if (tdsy.layersObj[newVal]) {
+      //   // tdsy.layersObj[newVal].show = true;
+      // }
+      if (oldVal && layerSources[oldVal]) {
+        try {
+          viewer.dataSources.remove(layerSources[oldVal]);
+        } catch (error) {
+          console.log(error);
+        }
+
+        layerSources[oldVal] = null;
+      }
+    },
+  },
+  beforeDestroy() {
+    viewer.dataSources.removeAll();
+    viewer.entities.removeAll();
   },
-  watch: {},
-  watch: {},
-  beforeDestroy() {},
 };
 </script>
 
 <style lang="less" scoped>
 .tbqd {
-    position: relative;
+  position: relative;
   .headerInput {
     display: flex;
     justify-content: space-between;