分页接口修改,列表上图逻辑需改,分页实体删除修改

src/views/remote/farmland/index.vue

@@ -22,7 +22,7 @@
             placeholder="请输入监测编号查询"
             prefix-icon="el-icon-search"
             v-model="queryParams.jcbh"
-            @change="getList()"
+            @change="getTemplate()"
           >
           </el-input>
           <el-button @click="handleDownload">下载</el-button>
@@ -43,28 +43,14 @@
           style="width: 100%"
           @row-click="tableClick"
         >
-          <!-- @cell-click="tableClick" -->
-          <!-- <el-table-column prop="jcbh" label="监测编号" width="220">
-            <template slot-scope="scope">
-              <span style="cursor: pointer" @click="tableClick(scope.row)">{{
-                scope.row.jcbh
-              }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="xmc" label="区县名称" show-overflow-tooltip>
-          </el-table-column>
-          <el-table-column
-            prop="jcmj"
-            label="监测面积(亩)"
-            show-overflow-tooltip
-          >
-          </el-table-column> -->
           <el-table-column
             :prop="templateList[i]"
             :label="templateList[i]"
             show-overflow-tooltip
             v-for="(item, i) in templateList"
             :key="i"
+            :width="templateList[i] == '监测编号' ? 200 : ''"
+            align="center"
           >
           </el-table-column>
           <el-table-column label="操作" align="center">
@@ -83,14 +69,19 @@
           :total="total"
           :page.sync="queryParams.pageNum"
           :limit.sync="queryParams.pageSize"
-          @pagination="getList"
+          @pagination="getTemplate"
         />
       </div>
     </el-drawer>
     <el-dialog title="详细信息" :visible.sync="dialogVisible" width="30%">
       <!-- <CustomDetails :model="infoObj" :config="detailInfos"></CustomDetails> -->
       <el-descriptions class="margin-top" :column="1">
-        <el-descriptions-item :label="item" v-for="(item,i) in descriptionsList" :key="i">{{ infoObj[item] }}</el-descriptions-item>
+        <el-descriptions-item
+          :label="item"
+          v-for="(item, i) in descriptionsList"
+          :key="i"
+          >{{ infoObj[item] }}</el-descriptions-item
+        >
       </el-descriptions>
     </el-dialog>
   </div>
@@ -169,6 +160,7 @@ export default {
       detailInfos: detailInfos,
       templateList: [],
       descriptionsList: [], //详情描述列表存储字段
+      envelopegeomObj: {}, //用于存储进入页面飞入视角的对象
     };
   },
   mounted() {
@@ -176,15 +168,49 @@ export default {
     this.$nextTick(() => {
       getPcsj(this.$route.query.id).then((response) => {
         this.newObj = response.data;
+
+        // if (this.newObj.envelopegeom && this.newObj.envelopegeom != "") {
+        //   if (typeof this.newObj.envelopegeom === "string") {
+        //     let geom = this.newObj.envelopegeom;
+        //     this.newObj.envelopegeom = parse(geom);
+        //   }
+        //   let features = new GeoJSON().readFeatures(this.newObj.envelopegeom);
+        //   this.envelopegeomObj = new VectorLayer({
+        //     source: new VectorSource({
+        //       features: features,
+        //     }),
+        //     style: function (feature) {
+        //       return new Style({
+        //         stroke: new Stroke({
+        //           //边界样式
+        //           color: "rgba(255, 0, 0, 1)",
+        //           width: 2,
+        //         }),
+        //       });
+        //     },
+        //     zIndex: 9999,
+        //   });
+        //   let fullExtent = this.envelopegeomObj.getSource().getExtent();
+
+        //   window.map["mapDiv"]
+        //     .getView()
+        //     .fit(fullExtent, window.map["mapDiv"].getSize());
+        //   window.map["mapDiv"].addLayer(this.envelopegeomObj);
+        // }
       });
       this.getTemplate();
-      // this.getList();
     });
   },
 
   methods: {
+    handleDelete(row) {
+      this.tableData.forEach((item, i) => {
+        window.map["mapDiv"].removeLayer(this.curPageResultLayer["mapDiv" + i]);
+      });
+    },
     //动态获取设置的模版字段
     getTemplate() {
+      this.handleDelete();
       let arr = [
         "中心点经度",
         "中心点纬度",
@@ -193,7 +219,8 @@ export default {
         "空间信息",
         "geom",
       ];
-      getXqListKey({ pcsjid: this.$route.query.id }).then((res) => {
+      this.templateList = [];
+      getXqListKey(this.queryParams).then((res) => {
         res.data.forEach((i) => {
           if (!arr.includes(i)) {
             this.templateList.push(i);
@@ -201,7 +228,7 @@ export default {
         });
       });
 
-      getXqListMap({ pcsjid: this.$route.query.id }).then((res) => {
+      getXqListMap(this.queryParams).then((res) => {
         this.tableData = res.rows;
         this.total = res.total;
         this.initVectorLayer("mapDiv");
@@ -219,8 +246,6 @@ export default {
     tableClick(row) {
       removeWebGLTile("mapCon1");
       removeWebGLTile("mapCon2");
-      // let urlQsx = this.newObj.proxypath + row.qsxtif;
-      // let urlHsx = this.newObj.proxypath + row.hsxtif;
       let urlQsx = this.newObj.proxypath + row["前时相对应影像数据"];
       let urlHsx = this.newObj.proxypath + row["后时相对应影像数据"];
       if (this.nowObj.id != row.id) {
@@ -248,16 +273,10 @@ export default {
       });
     },
     handleDetails(row) {
-      // getPcsjXQ(row.id).then((res) => {
-      //   this.infoObj = res.data;
-      //   this.dialogVisible = true;
-      // });
       getXqIdMap({ pcsjid: this.$route.query.id, id: row.id }).then((res) => {
-        console.log(res, "---------");
         this.infoObj = res.data;
       });
       getXqIdKey({ pcsjid: this.$route.query.id }).then((res) => {
-        console.log(res, "+++++++++++");
         this.descriptionsList = res.data;
       });
       this.dialogVisible = true;
@@ -268,7 +287,6 @@ export default {
     test(item) {
       window.map["mapCon1"].removeLayer(this.itemObj);
       window.map["mapCon2"].removeLayer(this.itemObj);
-
       if (item.geom && item.geom != "") {
         if (typeof item.geom === "string") {
           let geom = this.tableData[i].geom;
@@ -290,11 +308,6 @@ export default {
           },
           zIndex: 9999,
         });
-        let fullExtent = this.itemObj.getSource().getExtent();
-        // window.map["mapCon1"].getView().fit(fullExtent, {
-        //   duration: 3, //动画的持续时间,
-        //   callback: null,
-        // });
         window.map["mapCon1"].getView().animate({
           center: [item["中心点经度"], item["中心点纬度"]],
           zoom: 17,
@@ -304,18 +317,17 @@ export default {
         window.map["mapCon2"].addLayer(this.itemObj);
       }
     },
-    addGeoJson2(name) {
-      window.map[name].removeLayer(this.vectorLayer[name]);
+    //创建监测图斑列表实体
+    addGeoJson(name) {
       this.tableData.forEach((titem, i) => {
         if (titem.geom && titem.geom != "") {
           if (typeof titem.geom === "string") {
-            // let geom = transform(this.tableData[i].geom);
             let geom = this.tableData[i].geom;
             titem.geom = parse(geom);
           }
           let features = new GeoJSON().readFeatures(titem.geom);
-
-          this.vectorLayer[name] = new VectorLayer({
+          var tempName = name + i;
+          this.curPageResultLayer[tempName] = new VectorLayer({
             source: new VectorSource({
               features: features,
             }),
@@ -323,36 +335,21 @@ export default {
               return new Style({
                 stroke: new Stroke({
                   //边界样式
-                  color: "#1f1cd3",
+                  color: "rgba(0, 0, 255, 1)",
                   width: 2,
                 }),
               });
             },
             zIndex: 9999,
           });
-          window.map[name].addLayer(this.vectorLayer[name]);
-        }
-      });
-      let fullExtent = this.vectorLayer[name].getSource().getExtent();
-      window.map[name].getView().fit(fullExtent, {
-        duration: 3, //动画的持续时间,
-        callback: null,
-      });
-    },
-
-    addGeoJson(name) {
-      this.tableData.forEach((titem, i) => {
-        if (titem.geom && titem.geom != "") {
-          if (typeof titem.geom === "string") {
-            // let geom = transform(this.tableData[i].geom);
-            let geom = this.tableData[i].geom;
-            titem.geom = parse(geom);
-          }
-          let features = new GeoJSON().readFeatures(titem.geom);
-          this.curPageResultLayer[name].getSource().addFeatures(features);
+          window.map[name].addLayer(this.curPageResultLayer[tempName]);
         }
       });
-      let fullExtent = this.curPageResultLayer[name].getSource().getExtent();
+      let fullExtent = this.curPageResultLayer[
+        name + (this.tableData.length - 1)
+      ]
+        .getSource()
+        .getExtent();
       window.map[name].getView().fit(fullExtent, {
         duration: 3, //动画的持续时间,
         callback: null,