新增 地图显示已审核图片

src/views/voyage/voyageDetail.vue

@@ -405,12 +405,7 @@
         </div>
       </div>
     </div>
-    <el-dialog
-      v-model="mediaModal"
-      :title="modalTitle"
-      width="20%"
-      :before-close="videoClose"
-    >
+    <el-dialog v-model="mediaModal" :title="modalTitle" width="20%">
       <el-image
         v-if="modalType == 1"
         style="width: 100%; height: 100%"
@@ -482,7 +477,7 @@ export default {
         });
       }
     }
-    let total = ref();
+    let total = ref(0);
     function pageChange(e) {
       dischargeCurrentPage.value = e;
       getDischargeList();
@@ -590,11 +585,39 @@ export default {
       });
       map.value.addControl(toolBar);
       map.value.addControl(hawkEye);
-      if (coordinates.value.length) {
-        let { longitude, latitude } =
-          coordinates.value[coordinates.value.length - 1];
-        setShipMarker(longitude, latitude);
+      let markers = [];
+      for (let i of medias.value) {
+        let content = `<div style='width:160px'>
+        ${
+          i.audit == 1
+            ? `<img id='img${i.id}' style='width:160px;height:160px;object-fit:contain;' src='${i.viewUrl}'/>`
+            : ``
+        }
+        <img src='https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/ship-red-icon.png' style='display:block;width:20px;height:20px;margin:6px auto'/
+      </div>`;
+
+        let marker = new AMap.Marker({
+          content,
+          position: new AMap.LngLat(i.longitude, i.latitude),
+          offset: new AMap.Pixel(-75, i.audit == 1 ? -195 : -30),
+        });
+        if (i.audit == 1) {
+          marker.on("click", () => {
+            openMediaModal(i.viewUrl, 1, "航次图片", i);
+          });
+        }
+
+        markers.push(marker);
       }
+
+      let overlayGroups = new AMap.OverlayGroup(markers);
+      map.value.on("complete", function () {
+        let t = setTimeout(() => {
+          map.value.add(overlayGroups);
+          map.value.setFitView(markers, true, [200, 50, 0, 0], 18);
+          clearTimeout(t);
+        }, 2000);
+      });
     }
 
     function setShipMarker(longitude = 121.524761, latitude = 31.228721) {
@@ -604,7 +627,7 @@ export default {
         offset: new AMap.Pixel(-20, -20),
         size: new AMap.Size(80, 80),
         icon: "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/ship-red-icon.png", // 添加 Icon 图标 URL
-        title: "北京",
+        title: "",
       });
       map.value.add(marker);
     }
@@ -729,7 +752,7 @@ export default {
       }
     }
     let dialogImageUrl = ref();
-    let dialogVisible = ref();
+    let dialogVisible = ref(false);
     function handlePictureCardPreview(file) {
       dialogVisible.value = true;
       dialogImageUrl.value = file.url;