管线巡线打卡图片及图片必传标识

huaxin-system/src/main/resources/mapper/system/TPipeTaskInspectMapper.xml

@@ -39,6 +39,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             point.title as point_title,
             point.longitude as pointLongitude,
             point.latitude as pointLatitude,
+            point.has_img as hasImg,
             us.nick_name as inspector,
             point.pipe_id
         FROM
@@ -81,6 +82,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         point.title AS point_title,
         point.longitude AS pointLongitude,
         point.latitude AS pointLatitude,
+        point.has_img as hasImg,
         us.nick_name AS inspector,
         point.pipe_id
         FROM

huaxin-web/src/views/pipetask/task/taskDetail/components/DetailInfo.vue

@@ -90,11 +90,17 @@
         </el-form>
 
         <el-table v-loading="loading" :data="pipeInspectList" height="380">
+          <el-table-column label="" width="20" align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.hasImg == '1'" style="color: #f56c6c;">*</span>
+              <span v-else></span>
+            </template>
+          </el-table-column>
+
           <el-table-column
             label="打卡点"
             align="center"
             prop="pointTitle"
-            width="150"
             :show-overflow-tooltip="true"
           />
           <el-table-column
@@ -348,6 +354,15 @@
       <!-- 隐患信息 -->
       <DangerDetailInfo ref="dangerDetail" />
     </el-dialog>
+
+    <!-- 隐藏的图片预览组件 -->
+    <el-image
+      ref="previewImage"
+      style="display: none"
+      :z-index="3000"
+      :preview-src-list="previewList"
+    ></el-image>
+
   </el-dialog>
 </template>
 
@@ -395,6 +410,7 @@ export default {
       dangerDetailOpen: false,
       pipeAndPointInfo: {},
       taskInfo: {},
+      previewList: []
     };
   },
   methods: {
@@ -454,16 +470,21 @@ export default {
       }
       if (this.pipeAndPointInfo.pointInfo) {
         this.pipeAndPointInfo.pointInfo.forEach((item) => {
-          if (item.status != 1) {
+          if (item.status < 1) {
             this.addMarker(
               require("@/assets/firstimage/no-click-point.png"),
               item
             );
           } else {
-            this.addMarker(
-              require("@/assets/firstimage/click-point.png"),
-              item
-            );
+            if(item.imgurl){
+              //带图片打卡点
+              this.addHasImgMarker(require("@/assets/firstimage/click-point.png"),item);
+            }else{
+              this.addMarker(
+                require("@/assets/firstimage/click-point.png"),
+                item
+              );
+            }
           }
         });
       }
@@ -501,6 +522,49 @@ export default {
       });
       return marker;
     },
+    //添加带图片标点
+    addHasImgMarker(icon,data){
+      const contentHTML = `<div style="text-align: center">
+          <img class="marker-photo" src="${data.imgurl.split(',')[0]}" style="width: 40px; height: 34px; display: block;border: 2px white solid;margin-bottom: 2px;">
+          <img class="marker-icon" src="${icon}">
+      </div>`;
+
+      let marker = new AMap.Marker({
+        map: this.gaoMap.map,
+        anchor: "bottom-center",
+        content: contentHTML,
+        position: [data.pointLongitude, data.pointLatitude],
+        extData: data,
+      });
+
+      marker.on("mouseover", (e) => {
+        const target = e.target;
+          target.setLabel({
+          content: target.getExtData().pointTitle,
+          direction: "top",
+        });
+      });
+
+      marker.on("mouseout", (e) => {
+        const target = e.target;
+        target.setLabel({ content: "" });
+      });
+
+      marker.on('click', (e) => {
+        const originTarget = e.originEvent?.target;
+        const photo = originTarget?.closest?.('.marker-photo')
+        if (!photo) {
+          return // 点的是定位图标，不预览
+        }
+        this.previewList = [...e.target.getExtData().imgurl.split(',')];
+        this.$nextTick(() => {
+            this.$refs.previewImage.clickHandler()
+        })
+      })
+
+      return marker;
+
+    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
@@ -623,4 +687,5 @@ export default {
   height: 50px;
   // background: red;
 }
+
 </style>