核查图斑列表操作，详情

src/components/tablePage.vue

@@ -43,8 +43,8 @@
     <pagination
       v-show="table.data.length && table.total > 0"
       :total="table.total"
-      :page="pageNum"
-      :limit="pageSize"
+      v-model:page="pageNum"
+      v-model:limit="pageSize"
       :layout="layout"
       @pagination="searchFun"
     />

src/views/remote/MapView.vue

@@ -252,7 +252,7 @@ export default {
 <style lang="scss" scoped>
 .map {
   // width: calc(100% - 520px);
-  width: 70%;
+  width: 68%;
   height: 91vh;
   position: relative;
 }

src/views/remote/farmland/details.vue

@@ -100,7 +100,7 @@
               used to;
             </div>
             <div>
-             <Hcxx></Hcxx>
+              <Hcxx @updateParent="changeData" :jcbh="11"></Hcxx>
             </div>
           </el-collapse-item>
         </el-collapse>
@@ -126,7 +126,7 @@
 </template>
   
   <script setup name="details">
-  import Hcxx from "./hcxx.vue";
+import Hcxx from "./hcxx.vue";
 import { listDkdb, adddb } from "@/api/rsmonitoring/dataEntry";
 import {
   jbxx,

src/views/remote/farmland/hcxx.vue

@@ -0,0 +1,304 @@
+<template>
+  <div>
+    <div class="imgCon">
+      <div class="echartTitle">
+        <div class="block-title">监测类型情况</div>
+      </div>
+      <div class="imgList">
+        <div
+          class="imgDiv"
+          v-for="(item, i) in monitorList"
+          :key="i"
+          @click="clickImg(i)"
+          @mouseenter="handleMouseEnter(item, i)"
+          @mouseleave="handleMouseLeave(item, i)"
+        >
+          <span>{{ i + 1 }}</span>
+          <img :src="item.imagerPath" />
+          <p>{{ item.imagerSj }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { getJctbhcInfo, getTiffPath } from "@/api/ghss/jctb.js";
+export default {
+  props: {
+    detailObj: {
+      type: Object,
+    },
+    jcbh: {
+      type: String,
+    },
+  },
+  components: {},
+  data() {
+    return {
+      imgUrl: "",
+      monitorList: [
+        {
+          name: "11swm",
+          imagerPath:
+            "/analyse/全域土地整治/jctb/0/HN4602022023022004080074/1b9a9da4a23d426cab363ed369150b4f.jpg",
+        },
+      ],
+      primitive: null,
+      selectId: null,
+      primitivesArray: [],
+      hcObj: null,
+      // jtArr:[],//箭头id数组
+      // dwArr:[],//
+      idArr: [], //id数组
+      handler: {},
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    inputAction() {
+      this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+      // 鼠标移动事件
+      this.handler.setInputAction(function (movement) {
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    },
+    handleMouseEnter(a, b) {
+      this.ceshi(a.id, "yr");
+    },
+    handleMouseLeave(a, b) {
+      this.ceshi(a.id, "yc");
+    },
+    changeData(name, updata) {
+      this[name] = updata;
+    },
+    clickImg(val) {
+      this.$emit("updateParent", "emitImgList", this.monitorList);
+      this.$emit("updateParent", "emitImgIndex", val);
+    },
+
+    // 加载图片
+    ddd(obj) {
+      // 将经纬度转换为 Cartesian3 坐标,起始点
+      //起始点
+      var startPosition = Cesium.Cartesian3.fromDegrees(
+        Number(obj.imagerLzb),
+        Number(obj.imagerBzb)
+      );
+      let poi = this.getLonAndLat(
+        Number(obj.imagerLzb),
+        Number(obj.imagerBzb),
+        Number(obj.imagerAngle),
+        20
+      );
+      //结束点
+      var targetPosition = Cesium.Cartesian3.fromDegrees(poi.lng, poi.lat);
+      // 创建一个实体来表示点
+      var pointEntity = viewer.entities.add({
+        id: "dw" + obj.id,
+        position: startPosition, // 点的位置
+        point: {
+          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 设置为贴地
+          pixelSize: 10, // 点的大小
+          color: Cesium.Color.RED, // 点的颜色
+          outlineColor: Cesium.Color.BLACK, // 点的轮廓颜色
+          outlineWidth: 2, // 点的轮廓宽度
+        },
+      });
+      // 创建一个实体来放置箭头
+      var arrowEntity = viewer.entities.add({
+        id: "jt" + obj.id,
+        position: startPosition, // 设置箭头位置
+        billboard: {
+          // image: "http://192.168.176.1:8001/长箭头.png", // 设置箭头图标
+          image: "/static/images/路径@3x-2.png", // 设置箭头图标
+          width: 37, // 设置图标宽度
+          height: 69, // 设置图标高度
+          scale: 0.7, // 设置图标缩放
+          rotation: Cesium.Math.toRadians(360 - Number(obj.imagerAngle)), // 可选，默认为0
+          // rotation: Number(obj.imagerAngle), // 可选，默认为0
+          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 设置贴地
+        },
+      });
+
+      // 聚焦视角到箭头位置
+      viewer.zoomTo(arrowEntity);
+    },
+    ceshi(id, evtName) {
+      let aaa = viewer.entities.getById("jt" + id);
+      if (evtName == "yr") {
+        aaa.billboard.image = "/static/images/路径@3x.png";
+      } else {
+        aaa.billboard.image = "/static/images/路径@3x-2.png";
+      }
+    },
+
+    /**
+     * 根据一个经纬度及距离角度，算出另外一个经纬度
+     * @param {*} lng 经度 113.3960698
+     * @param {*} lat 纬度 22.941386
+     * @param {*} brng 方位角 45 ---- 正北方：000°或360° 正东方：090° 正南方：180° 正西方：270°
+     * @param {*} dist 90000距离(米)
+     * 1、角度转换为弧度公式：弧度=角度×(π ÷度180 )
+     * 2、弧度转换为角度公式： 角度=弧度×（180÷π）
+     */
+    getLonAndLat(lng, lat, brng, dist) {
+      //大地坐标系资料WGS-84 长半径a=6378137 短半径b=6356752.3142 扁率f=1/298.2572236
+      var a = 6378137;
+      var b = 6356752.3142;
+      var f = 1 / 298.257223563;
+
+      var lon1 = lng * 1;
+      var lat1 = lat * 1;
+      var s = dist;
+      var alpha1 = brng * (Math.PI / 180); //mapNumberUtil.rad(brng);
+      var sinAlpha1 = Math.sin(alpha1);
+      var cosAlpha1 = Math.cos(alpha1);
+
+      //var tanU1 = (1 - f) * Math.tan(mapNumberUtil.rad(lat1));
+      var tanU1 = (1 - f) * Math.tan(lat1 * (Math.PI / 180));
+      var cosU1 = 1 / Math.sqrt(1 + tanU1 * tanU1),
+        sinU1 = tanU1 * cosU1;
+      var sigma1 = Math.atan2(tanU1, cosAlpha1);
+      var sinAlpha = cosU1 * sinAlpha1;
+      var cosSqAlpha = 1 - sinAlpha * sinAlpha;
+      var uSq = (cosSqAlpha * (a * a - b * b)) / (b * b);
+      var A =
+        1 + (uSq / 16384) * (4096 + uSq * (-768 + uSq * (320 - 175 * uSq)));
+      var B = (uSq / 1024) * (256 + uSq * (-128 + uSq * (74 - 47 * uSq)));
+
+      var sigma = s / (b * A),
+        sigmaP = 2 * Math.PI;
+      while (Math.abs(sigma - sigmaP) > 1e-12) {
+        var cos2SigmaM = Math.cos(2 * sigma1 + sigma);
+        var sinSigma = Math.sin(sigma);
+        var cosSigma = Math.cos(sigma);
+        var deltaSigma =
+          B *
+          sinSigma *
+          (cos2SigmaM +
+            (B / 4) *
+              (cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM) -
+                (B / 6) *
+                  cos2SigmaM *
+                  (-3 + 4 * sinSigma * sinSigma) *
+                  (-3 + 4 * cos2SigmaM * cos2SigmaM)));
+        sigmaP = sigma;
+        sigma = s / (b * A) + deltaSigma;
+      }
+
+      var tmp = sinU1 * sinSigma - cosU1 * cosSigma * cosAlpha1;
+      var lat2 = Math.atan2(
+        sinU1 * cosSigma + cosU1 * sinSigma * cosAlpha1,
+        (1 - f) * Math.sqrt(sinAlpha * sinAlpha + tmp * tmp)
+      );
+      var lambda = Math.atan2(
+        sinSigma * sinAlpha1,
+        cosU1 * cosSigma - sinU1 * sinSigma * cosAlpha1
+      );
+      var C = (f / 16) * cosSqAlpha * (4 + f * (4 - 3 * cosSqAlpha));
+      var L =
+        lambda -
+        (1 - C) *
+          f *
+          sinAlpha *
+          (sigma +
+            C *
+              sinSigma *
+              (cos2SigmaM + C * cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM)));
+
+      var revAz = Math.atan2(sinAlpha, -tmp); // final bearing
+
+      var lngLatObj = {
+        lng: lon1 + L * (180 / Math.PI),
+        lat: lat2 * (180 / Math.PI),
+      };
+      return lngLatObj;
+    },
+
+    delatePoi(type) {
+      if (this.idArr.length != 0) {
+        this.idArr.forEach((item) => {
+          viewer.entities.removeById(type + item);
+        });
+        // this.idArr = [];
+      }
+    },
+    init() {
+      // getJctbhcInfo(newVal).then((res) => {
+      this.idArr = [];
+      // if (res.code == 200) {
+      // this.monitorList = res.data.images;
+      // this.hcObj = res.data;
+      this.monitorList.forEach((item, i) => {
+        // item.name = res.data.dcry;
+        // window.axiosURI +/file/upload/attachment
+        item.imagerPath =
+          "http://192.168.60.2:8080/file/upload/attachment" + item.imagerPath;
+        // this.ddd(item);
+        this.idArr.push(item.id);
+      });
+      // }
+      // });
+    },
+  },
+  watch: {
+    jcbh: {
+      handler(newVal, oldVal) {},
+      // deep: true,
+      // immediate: true,
+    },
+  },
+  beforeDestroy() {
+    this.delatePoi("jt");
+    this.delatePoi("dw");
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.imgCon {
+  .imgList {
+    width: 100%;
+    // height: 300px;
+    max-height: 400px;
+    display: flex;
+    flex-wrap: wrap;
+    // background-color: rgba(255, 192, 203, 0.372);
+    .imgDiv {
+      width: 126px;
+      height: 83px;
+      margin-right: 10px;
+      // background-color: rgba(0, 255, 255, 0.413);
+      position: relative;
+      margin: 4px 4px;
+      img {
+        width: 126px;
+        height: 83px;
+      }
+      span {
+        width: 26px;
+        height: 26px;
+        display: inline-block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: #dbad70;
+        text-align: center;
+        line-height: 26px;
+      }
+      p {
+        position: absolute;
+        bottom: 0;
+        font-size: 10px;
+        color: #33ccff;
+        text-align: center;
+        width: 100%;
+        height: 30px;
+        line-height: 30px;
+      }
+    }
+  }
+}
+</style>

src/views/remote/farmland/index.vue

@@ -1,10 +1,5 @@
 <template>
   <div id="mapApp">
-    <el-button @click="dialogVisible = false">返回列表</el-button>
-    图斑编号：6401812024070108270002
-    <el-button @click="dialogVisible = false">上一个</el-button>
-    <el-button @click="dialogVisible = false">下一个</el-button>
-
     <div class="btn" v-if="nowObj['前时相']">
       <!-- <el-button @click="drawer = true">打开抽屉</el-button> -->
       <span class="sx qsx">前时相:{{ nowObj["前时相"] }}</span>
@@ -49,14 +44,14 @@
         @selectChange="handleSelectionChange"
         @currentChange="getTemplate"
       >
-        <template slot-scope="scope">
+        <template #action="{ row, index }">
+          <el-button size="mini" type="text" @click.stop="flyto(row)"
+            >定位</el-button
+          >
           <el-button
             size="mini"
             type="text"
-            @click.stop="handleDetails(scope.row)"
-            >定位</el-button
-          >
-          <el-button size="mini" type="text" @click.stop="tableClick(scope.row)"
+            @click.stop="tableClick(row, index)"
             >对比</el-button
           >
         </template>
@@ -65,6 +60,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>
       <Details></Details>
     </div>
     <!-- <CustomDetails :model="infoObj" :config="detailInfos"></CustomDetails> -->
@@ -154,7 +153,7 @@ export default {
       vectorLayer: {},
       nowObj: {},
       itemObj: {}, //用于存储分屏高亮的实体
-      dialogVisible: true,
+      dialogVisible: false,
 
       TableHeader: TableHeader,
 
@@ -201,7 +200,8 @@ export default {
       console.log(this.queryParams, ";this.queryParams", this.domains);
     },
     //动态获取设置的模版字段
-    getTemplate() {
+    getTemplate(query) {
+      if (query) this.queryParams.pageNum = query.pageNum;
       this.handleDelete();
 
       getDkdbList(this.queryParams).then((res) => {
@@ -223,21 +223,20 @@ export default {
       const zipfile = this.newObj.proxypath + ".zip";
       window.open(`${zipfile}`);
     },
-    tableClick(row) {
+    tableClick(row, index) {
       removeWebGLTile("mapCon1");
       removeWebGLTile("mapCon2");
-      let urlQsx = this.newObj.proxypath + row["前时相对应影像数据"];
-      let urlHsx = this.newObj.proxypath + row["后时相对应影像数据"];
       if (this.nowObj.id != row.id) {
         this.maptype = "split";
-        this.nowObj = row;
-        addTiff("mapCon1", urlQsx);
-        addTiff("mapCon2", urlHsx);
+        this.nowObj = { ...row, index };
+        addTiff("mapCon1", row["qsxtif"]);
+        addTiff("mapCon2", row["hsxtif"]);
         this.test(row);
       } else {
         this.maptype = "normal";
         this.nowObj = {};
       }
+      this.handleDetails(row);
     },
 
     getList() {
@@ -259,7 +258,7 @@ export default {
       // getXqIdKey({ pcsjid: this.$route.query.id }).then((res) => {
       //   this.descriptionsList = res.data;
       // });
-      // this.dialogVisible = true;
+      this.dialogVisible = true;
     },
 
     test(item) {
@@ -267,7 +266,7 @@ export default {
       window.map["mapCon2"].removeLayer(this.itemObj);
       if (item.geom && item.geom != "") {
         if (typeof item.geom === "string") {
-          let geom = this.tableData[i].geom;
+          let geom = item.geom; // this.tableData[i].geom;
           item.geom = parse(geom);
         }
         let features = new GeoJSON().readFeatures(item.geom);
@@ -287,14 +286,22 @@ export default {
           zIndex: 9999,
         });
         window.map["mapCon1"].getView().animate({
-          center: [item["中心点经度"], item["中心点纬度"]],
+          center: [item["lzb"], item["bzb"]],
           zoom: 16.5,
           duration: 2000, // 动画持续时间，单位毫秒
         });
+
         window.map["mapCon1"].addLayer(this.itemObj);
         window.map["mapCon2"].addLayer(this.itemObj);
       }
     },
+    flyto(item) {
+      window.map["mapDiv"].getView().animate({
+        center: [item.lzb, item.bzb],
+        zoom: 16.5,
+        duration: 2000, // 动画持续时间，单位毫秒
+      });
+    },
     //创建监测图斑列表实体
     addGeoJson(name, isfly) {
       this.tableData.forEach((titem, i) => {
@@ -325,7 +332,7 @@ export default {
       });
       if (isfly) {
         let fullExtent = this.curPageResultLayer[
-          name + (this.tableData.length - 1)
+          name + 0 //(this.tableData.length - 1)
         ]
           .getSource()
           .getExtent();