地图联动

src/views/remote/farmland/hcxx.vue

@@ -7,9 +7,9 @@
       <div class="imgList">
         <div
           class="imgDiv"
+          :class="i == imgIndex ? 'higImg' : ''"
           v-for="(item, i) in monitorList"
           :key="i"
-          :class="i == imgIndex ? 'higImg' : ''"
           @click="clickImg(i)"
           @mouseenter="handleMouseEnter(item, i)"
           @mouseleave="handleMouseLeave(item, i)"
@@ -20,7 +20,7 @@
         </div>
       </div>
     </div>
-    <el-dialog
+    <!-- <el-dialog
       v-model="dialogVisible"
       title="图片查看"
       width="30%"
@@ -29,42 +29,43 @@
       draggable
       class="imgdialog"
       :append-to-body="true"
-    >
-      <div class="">
-        <el-carousel
-          v-if="dialogVisible"
-          trigger="click"
-          height="332px"
-          indicator-position="none"
-          :autoplay="false"
-          :initial-index="imgIndex"
-          v-model="imgIndex"
-          ref="carousel"
-          @change="(v) => (imgIndex = v)"
+    > -->
+    <div class="imgdialog" v-if="dialogVisible">
+      <div class="tbTitle">
+        <span>图斑列表 </span>
+        <el-icon @click="dialogVisible = false"><CloseBold /></el-icon>
+      </div>
+      <el-carousel
+        trigger="click"
+        height="332px"
+        indicator-position="none"
+        :autoplay="false"
+        :initial-index="imgIndex"
+        v-model="imgIndex"
+        ref="carousel"
+        @change="(v) => (imgIndex = v)"
+      >
+        <el-carousel-item
+          v-for="(item, i) in monitorList"
+          :key="i"
+          class="carouImg"
+          @mouseenter="handleMouseEnter(item, i)"
+          @mouseleave="handleMouseLeave(item, i)"
         >
-          <el-carousel-item
-            v-for="(item, i) in monitorList"
-            :key="i"
-            class="carouImg"
-            @mouseenter="handleMouseEnter(item, i)"
-            @mouseleave="handleMouseLeave(item, i)"
-          >
-            <img :src="item.fjPreview" />
-            <span class="imgindexspan">{{ i + 1 }}</span>
-            <div class="text">
-              <div>
-                拍摄时间:{{ item.fjDatetime }} 拍摄人:{{ item.createBy }}
-              </div>
-              <div>
-                拍摄坐标:{{ Number(item.fjLongitude).toFixed(6) }},
-                {{ Number(item.fjLatitude).toFixed(6) }}
-                拍摄方位:{{ item.fjDirection }}
-              </div>
+          <img :src="item.fjPreview" />
+          <span class="imgindexspan">{{ i + 1 }}</span>
+          <div class="text">
+            <div>拍摄时间:{{ item.fjDatetime }} 拍摄人:{{ item.createBy }}</div>
+            <div>
+              拍摄坐标:{{ Number(item.fjLongitude).toFixed(6) }},
+              {{ Number(item.fjLatitude).toFixed(6) }}
+              拍摄方位:{{ item.fjDirection }}
             </div>
-          </el-carousel-item>
-        </el-carousel>
-      </div>
-    </el-dialog>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+    <!-- </el-dialog> -->
   </div>
 </template>
 
@@ -134,10 +135,9 @@ export default {
               if (higFeature) _this.updateStyle(higFeature, null, "-2");
               // 进入新的feature
               _this.updateStyle(feature, null, "");
-              _this.imgIndex = _this.monitorList.findIndex(
-                (m) => "jt" + m.id == feature.id_
+              _this.clickImg(
+                _this.monitorList.findIndex((m) => "jt" + m.id == feature.id_)
               );
-              _this.dialogVisible = true;
               higFeature = feature;
             }
           }
@@ -148,6 +148,7 @@ export default {
         if (higFeature) {
           // 如果存在高亮的特征，则恢复其样式。
           _this.updateStyle(higFeature, null, "-2");
+          _this.dialogVisible = false;
           higFeature = null; // 重置高亮特征。
         }
       });
@@ -160,8 +161,12 @@ export default {
     },
 
     clickImg(val) {
-      this.imgIndex == val;
-      this.dialogVisible = true;
+      this.imgIndex = val;
+      console.log(this.imgIndex, "----");
+      this.dialogVisible = false;
+      this.$nextTick(() => {
+        this.dialogVisible = true;
+      });
     },
 
     // 加载图片
@@ -204,7 +209,6 @@ export default {
     },
     getFeatureById(id) {
       var features = vectorLayer.getSource().getFeatures();
-      console.log(features);
       return features.find((fi) => fi.getId() === id);
     },
     updateStyle(feature, obj, evtName = "") {
@@ -318,6 +322,23 @@ export default {
     color: #33ccff;
   }
 }
+.imgdialog {
+  position: fixed; /* 或者使用 absolute */
+  top: 5%;
+  left: 30%;
+  width: 30%; /* 或者具体的大小 */
+  height: 400px; /* 或者具体的大小 */
+  padding: 10px;
+  background: #fff;
+  z-index: 2000;
+  font-size: 18px;
+
+  .el-icon {
+    position: absolute;
+    right: 20px;
+    cursor: pointer;
+  }
+}
 .el-overlay-dialog {
   z-index: 2000; /* 根据需要调整 */
 }