定位 和前后对比

src/views/pageCode/checkLand/index.vue

@@ -82,8 +82,11 @@
         align="center"
         class-name="small-padding fixed-width"
       >
-        <template #default="scope">
-          <el-button
+        <template #default="{ row }">
+          <el-button link type="primary" @click="handleBrowse(row)"
+            >查看
+          </el-button>
+          <!-- <el-button
             link
             type="primary"
             icon="Edit"
@@ -98,7 +101,7 @@
             @click="handleDelete(scope.row)"
             v-hasPermi="['rsmonitoring:dkjbxx:remove']"
             >删除</el-button
-          >
+          > -->
         </template>
       </el-table-column>
     </el-table>
@@ -143,6 +146,7 @@ import {
 } from "@/api/rsmonitoring/dkjbxx";
 import numCard from "@/components/numCard";
 const { proxy } = getCurrentInstance();
+const router = useRouter();
 
 const dkjbxxList = ref([]);
 const open = ref(false);
@@ -314,6 +318,9 @@ function handleExport() {
     `dkjbxx_${new Date().getTime()}.xlsx`
   );
 }
+function handleBrowse(row) {
+  router.push({ path: "/remote/gdjc", query: { id: row.id } });
+}
 getcount();
 getList();
 </script>

src/views/remote/farmland/index.vue

@@ -1,9 +1,19 @@
 <template>
   <div id="mapApp">
-    <div class="btn" v-if="nowObj['前时相']">
+    <div class="btn" v-if="nowObj.qsx">
       <!-- <el-button @click="drawer = true">打开抽屉</el-button> -->
-      <span class="sx qsx">前时相:{{ nowObj["前时相"] }}</span>
-      <span class="sx hsx">后时相:{{ nowObj["后时相"] }}</span>
+      <span class="sx qsx">前时相:{{ nowObj.qsx }}</span>
+      <span class="sx hsx">后时相:{{ nowObj.hsx }}</span>
+    </div>
+    <div class="bottons" v-if="dialogVisible">
+      <div class="divbtn" @click="flyto(nowObj)">
+        <div class="divicon point"></div>
+        图斑定位
+      </div>
+      <div class="divbtn" @click="contrast(nowObj)">
+        <div class="divicon qh"></div>
+        前后对比
+      </div>
     </div>
     <MapView :maptype="maptype" ref="MapView" />
 
@@ -52,7 +62,7 @@
             size="mini"
             type="text"
             @click.stop="tableClick(row, index)"
-            >对比</el-button
+            >详情</el-button
           >
         </template>
       </tablePage>
@@ -60,10 +70,10 @@
       <el-button @click="handleDownload">下载</el-button>
     </div>
     <div class="jctbCon" v-if="dialogVisible">
-      <el-button @click="dialogVisible = false">返回列表</el-button>
-      图斑编号:{{ 6401812024070108270002 }}
-      <el-button @click="dialogVisible = false">上一个</el-button>
-      <el-button @click="dialogVisible = false">下一个</el-button>
+      <el-button @click="returnlist()">返回列表</el-button>
+      图斑编号:{{ newObj.id }}
+      <el-button @click="next(false)">上一个</el-button>
+      <el-button @click="next(true)">下一个</el-button>
       <Details></Details>
     </div>
     <!-- <CustomDetails :model="infoObj" :config="detailInfos"></CustomDetails> -->
@@ -144,11 +154,7 @@ export default {
       direction: "rtl",
 
       tableData: [],
-      newObj: {
-        name: "f52d8b03a7214d9098ca44a7ea641d9b",
-        spotsnumber: 0,
-        spotsarea: 0,
-      },
+      newObj: {},
       curPageResultLayer: {},
       vectorLayer: {},
       nowObj: {},
@@ -165,6 +171,7 @@ export default {
   mounted() {
     // 绑定事件，编写回调函数
     this.$nextTick(() => {
+      this.newObj = { id: this.$route.query.id };
       // getPcsj(this.$route.query.id).then((response) => {
       //   this.newObj = response.data;
       // });
@@ -238,6 +245,22 @@ export default {
       }
       this.handleDetails(row);
     },
+    contrast() {
+      if (this.maptype == "normal") {
+        this.maptype = "split";
+      } else {
+        this.maptype = "normal";
+      }
+    },
+    next(add) {
+      let index = this.nowObj.index + add ? 1 : -1;
+      if (index == -1 || index == this.tableData.length) {
+        proxy.$modal.msgError(`当前为${add ? "最后" : "第"}一个`);
+      } else {
+        let row = this.tableData[index];
+        this.tableClick(row, index);
+      }
+    },
 
     getList() {
       // listPcsjXQList(this.queryParams).then((response) => {
@@ -379,15 +402,15 @@ export default {
         window.map[name].addLayer(this.curPageResultLayer[name]);
       }
     },
+    returnlist() {
+      this.dialogVisible = false;
+      this.$router.back();
+    },
   },
 };
 </script>
 <style lang="scss" scoped>
 .btn {
-  // position: absolute;
-  // top: 0;
-  // left: 60px;
-  // z-index: 40;
   .sx {
     background: rgb(151, 250, 222);
     padding: 5px 10px;
@@ -403,6 +426,41 @@ export default {
     left: calc(50% - 220px);
   }
 }
+.bottons {
+  position: absolute;
+  top: 0;
+  left: 60px;
+  z-index: 40;
+
+  .divbtn {
+    width: 65px;
+    height: 65px;
+    border: 1px solid rgba(73, 73, 73, 0.168627451);
+    border-radius: 5px;
+    margin: 10px;
+    border-color: #409eff;
+    color: #409eff;
+    text-align: center;
+    font-size: 14px;
+    cursor: pointer;
+    .divicon {
+      width: 28px;
+      height: 28px;
+      margin: 5px auto;
+    }
+    .point {
+      background: url("@/assets/images/point.png") no-repeat;
+      background-size: 100% 100%;
+    }
+    .qh {
+      background: url("@/assets/images/qh.png") no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  .divbtn:hover {
+    border-color: #409eff;
+  }
+}
 
 .jctbCon {
   position: absolute;