fix：增加巡查任务查看点位

src/views/xj/inspection/task-management/components/task-map.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2025-01-02 11:56:20
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2025-01-02 15:54:11
+ * @LastEditTime: 2025-01-02 17:26:35
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\task-map.vue
  * @Description: 巡检任务-地图弹窗
 -->
@@ -25,7 +25,50 @@
         clearable
       ></el-cascader>
     </div>
-    <fssm-map ref="taskMap"></fssm-map>
+    <fssm-map ref="taskMap" @feature-select="featureSelect"></fssm-map>
+
+    <!-- 查看点位图片弹窗 -->
+    <el-dialog
+      title="查看点位"
+      :visible.sync="showImageDialog"
+      width="85rem"
+      append-to-body
+      destroy-on-close
+      @close="screenImgCancel"
+    >
+      <div class="image-container" ref="imageContainer">
+        <img
+          :src="screenImage.imageUrl"
+          alt="Main Image"
+          ref="mainImage"
+          @load="updateScreenRects"
+        />
+        <div
+          v-for="(rect, index) in screenRects"
+          :key="index"
+          class="rect-overlay"
+          :style="getScreenRectStyle(rect)"
+        ></div>
+        <div class="rect-image">
+          采集时间:
+          {{ screenImage.createTime }} 起始桩号：
+          {{ screenImage.stakeStart || "暂无数据" }} 终止桩号：
+          {{ screenImage.stakeEnd || "暂无数据" }}
+          病害类型
+          {{ screenImage.iconTypeName || "暂无数据" }}
+          病害面积：{{
+            screenImage.targetArea
+              ? `${screenImage.targetArea}平方米`
+              : "暂无数据"
+          }}
+          病害长度：{{
+            screenImage.targetLen * 1 <= 0
+              ? "暂无数据"
+              : `${screenImage.targetLen}米`
+          }}
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -65,6 +108,12 @@ export default {
       centerPiont: [],
       // 中心点集合（所有点位）
       drawPointList: [],
+      // 查看大图点位图片数据
+      screenImage: {},
+      // 查看大图点位图片弹窗显隐控制
+      showImageDialog: false,
+      // 查看大图点位图片弹窗红框数据
+      screenRects: [],
     };
   },
   mounted() {
@@ -111,9 +160,6 @@ export default {
             }
             return [];
           });
-          // 如果不是病害巡检，则绘制点位
-          // 如果图片弹窗打开，则绘制点位
-          // if (!this.shouldLoadClusters) {
           // 修改地图中心点位
           const pointArray = data.map((item) => {
             if (item.geometry) {
@@ -123,7 +169,6 @@ export default {
           });
           this.fitMapToPoints(pointArray);
           this.drawPoint();
-          // }
         }
       });
     },
@@ -206,6 +251,92 @@ export default {
         this.markLayerPoints.setSource(pointSource);
       }
     },
+
+    /**
+     * @description: 图标点击事件
+     * @return {void}
+     */
+    featureSelect(e) {
+      const map = this.$refs.taskMap.instance.get("map");
+      const selectedFeatures = e.selected;
+      let feature = selectedFeatures[0];
+      if (selectedFeatures.length > 0) {
+        console.log(feature.getProperties(), "feature");
+        // 获取点位数据
+        const selectFeature = feature.getProperties().data;
+        this.screenImage = selectFeature;
+        this.showImageDialog = true;
+      } else {
+        // 聚合点
+        // 放大地图层级
+        map.getView().animate({
+          center: feature.getGeometry().getCoordinates(),
+          zoom: map.getView().getZoom() + 1,
+        });
+      }
+    },
+
+    /**
+     * @description: 图片位置信息获取
+     * @return {void}
+     */
+    updateScreenRects() {
+      1;
+      this.screenRects = [];
+      const image = this.$refs.mainImage;
+      const rects = this.screenImage?.rect?.split(",").map(Number) || [];
+      this.screenRects = [
+        {
+          left: rects[0],
+          top: rects[1],
+          width: rects[2],
+          height: rects[3],
+        },
+      ];
+    },
+
+    /**
+     * @description: 图片红框位置
+     * @param {object} left
+     * @param {object} top
+     * @param {object} width
+     * @param {object} height
+     * @return {object}
+     */
+    getScreenRectStyle({ left, top, width, height }) {
+      const image = this.$refs.mainImage;
+      const container = this.$refs.imageContainer;
+      if (!image || !container) return {};
+
+      const scaleX = container.clientWidth / image.naturalWidth;
+      const scaleY = container.clientHeight / image.naturalHeight;
+      const scale = Math.min(scaleX, scaleY);
+
+      const renderedWidth = image.naturalWidth * scale;
+      const renderedHeight = image.naturalHeight * scale;
+
+      const offsetX = (container.clientWidth - renderedWidth) / 2;
+      const offsetY = (container.clientHeight - renderedHeight) / 2;
+
+      return {
+        position: "absolute",
+        left: `${left * scale + offsetX}px`,
+        top: `${top * scale + offsetY}px`,
+        width: `${width * scale}px`,
+        height: `${height * scale}px`,
+        border: "2px solid #FF0000",
+        boxSizing: "border-box",
+      };
+    },
+
+    /**
+     * @description: 关闭查看点位大图弹窗
+     * @return {void}
+     */
+    screenImgCancel() {
+      this.$refs.taskMap.removeSelectClick();
+      this.showImageDialog = false;
+    },
   },
 };
 </script>
@@ -221,4 +352,38 @@ export default {
     z-index: 1;
   }
 }
+
+/* 查看大图弹窗 */
+.image-container {
+  position: relative;
+  width: 100%;
+  height: 80%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.image-container img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.rect-overlay {
+  position: absolute;
+  pointer-events: none;
+  border: 2px solid red;
+}
+
+// 图片信息
+.rect-image {
+  width: 90%;
+  position: absolute;
+  top: 0;
+  font-size: 1.2rem;
+  color: #ffffff;
+  background-color: rgba(0, 0, 0, 0.5);
+}
 </style>