监测类型情况”改成“现场照片”点击地图上的箭头，展示当前方向的照片；浏览图片时联动箭头

src/views/farmlandProtection/components/hcxx.vue

@@ -33,7 +33,29 @@
     </div>
     <div class="imgCon">
       <div class="echartTitle">
-        <div class="block-title">监测类型情况</div>
+        <div class="block-title">现场照片</div>
+      </div>
+      <div class="imgList">
+        <div
+          class="imgDiv"
+          :class="{ hiimg: hiindex === i }"
+          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="imgUrl" /> -->
+          <img :src="item.imagerPath" />
+          <!-- <img :src="imgUrl + item.imagerPath" /> -->
+          <p>{{ item.imagerSj }}</p>
+        </div>
+      </div>
+    </div>
+    <div class="imgCon">
+      <div class="echartTitle">
+        <div class="block-title">无人机取证</div>
       </div>
       <div class="imgList">
         <div
@@ -74,16 +96,20 @@ export default {
       primitive: null,
       selectId: null,
       primitivesArray: [],
-      hcObj: null,
+      hcObj: {},
       // jtArr:[],//箭头id数组
       // dwArr:[],//
       idArr: [], //id数组
       handler: {},
+      hiindex: "",
+      hiid: "",
     };
   },
   computed: {},
   mounted() {
-    // this.inputAction();
+    this.$nextTick(() => {
+      this.inputAction();
+    });
   },
   methods: {
     inputAction() {
@@ -99,18 +125,21 @@ export default {
       //   // that[queryName](movement);
       // },  Cesium.ScreenSpaceEventType.MOUSE_MOVE);
       // 鼠标移动事件
-      this.handler.setInputAction(function (movement) {
-        console.log(movement, "movement");
-        // 通过pick方法获取鼠标下的实体
-        // var pickedObject = viewer.scene.pick(movement.endPosition);
-        // if (
-        //   Cesium.defined(pickedObject) &&
-        //   scene.pickPositionSupported &&
-        //   pickedObject != null
-        // ) {
-        //   console.log(pickedObject,'pickedObject'); // 打印实体的ID
-        // }
-      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+      this.handler.setInputAction((event) => {
+        if (this.hiid) {
+          this.handleMouseLeave({ id: this.hiid });
+        }
+
+        let pickObj = viewer.scene.pick(event.endPosition);
+        if (Cesium.defined(pickObj)) {
+          if (pickObj.id && pickObj.id.id.includes("jt")) {
+            this.hiid = pickObj.id.id.replace("jt", "");
+            this.handleMouseEnter({ id: this.hiid });
+            this.hiindex = this.idArr.indexOf(this.hiid);
+            this.clickImg(this.hiindex);
+          }
+        }
+      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); 
     },
     handleMouseEnter(a, b) {
       this.ceshi(a.id, "yr");
@@ -347,6 +376,8 @@ export default {
   beforeDestroy() {
     this.delatePoi("jt");
     this.delatePoi("dw");
+    this.handler.destroy();
+    this.handler = null;
   },
 };
 </script>
@@ -401,6 +432,9 @@ export default {
         line-height: 30px;
       }
     }
+    .hiimg {
+      border: 1px solid red;
+    }
   }
 }
 .detailList {

src/views/farmlandProtection/components/tbDetails.vue

@@ -26,6 +26,7 @@
           </el-tab-pane>
           <el-tab-pane label="核查信息" name="hcxx">
             <Hcxx
+              ref="hcxx"
               @updateParent="changeData"
               :jcbh="detailObj.jcbh"
               v-if="activeTabs == 'hcxx'"

src/views/farmlandProtection/jctb/index.vue

@@ -119,7 +119,11 @@
           ref="carousel"
         >
           <el-carousel-item v-for="(item, i) in imgList" :key="i">
-            <img :src="item.imagerPath" />
+            <img
+              :src="item.imagerPath"
+              @mouseenter="handleMouseEnter(item, i)"
+              @mouseleave="handleMouseLeave(item, i)"
+            />
             {{ item }}
             <div class="imgInfo">
               <p>
@@ -216,6 +220,14 @@ export default {
         // this.$refs.tbqd.initNew();
       }
     },
+    handleMouseEnter(a, b) {
+      if (this.$refs.tbDetails && this.$refs.tbDetails.$refs.hcxx)
+        this.$refs.tbDetails.$refs.hcxx.handleMouseEnter(a, b);
+    },
+    handleMouseLeave(a, b) {
+      if (this.$refs.tbDetails && this.$refs.tbDetails.$refs.hcxx)
+        this.$refs.tbDetails.$refs.hcxx.handleMouseEnter(a, b);
+    },
     exportFile() {
       this.dialogVisible = true;
     },
@@ -326,7 +338,9 @@ export default {
   },
   watch: {
     imgIndex(val) {
-      this.$refs.carousel.setActiveItem(val);
+      this.$nextTick(() => {
+        this.$refs.carousel.setActiveItem(val);
+      });
     },
     allShow(val) {
       console.log(val, "====");