更新 地图组件;航次详情;总台

src/components/AMapContainer.vue

@@ -1,5 +1,23 @@
 <template>
-  <div :id="mapId"></div>
+  <div>
+    <div :id="mapId" class="container"></div>
+    <el-dialog v-model="mediaModal" :title="modalTitle" destroy-on-close>
+      <el-image
+        v-if="modalType == 1"
+        style="height: 60vh; display: flex"
+        fit="contain"
+        :src="currentUrl"
+        :preview-src-list="modalPreview"
+      ></el-image>
+      <video
+        v-else
+        autoplay
+        controls
+        style="width: 100%; height: 60vh"
+        :src="currentUrl"
+      ></video>
+    </el-dialog>
+  </div>
 </template>
 <script setup>
 import { onMounted, onUnmounted, ref } from "vue";
@@ -20,6 +38,14 @@ const props = defineProps({
     type: Array,
     default: [],
   },
+  medias: {
+    type: Array,
+    default: [],
+  },
+  coordinates: {
+    type: Array,
+    default: [],
+  },
   showLabel: {
     type: Boolean,
     default: false,
@@ -93,13 +119,6 @@ function initMap() {
           }
         });
       }
-      let markers = [
-        ...generateMarkers(props.ships, "ships"),
-        ...generateMarkers(props.loadPorts, "loadPorts"),
-        ...generateMarkers(props.dischargePorts, "dischargePorts"),
-      ];
-      drawMarkers(markers);
-      setFitView(markers);
     })
     .catch((e) => {
       console.log(e);
@@ -110,19 +129,19 @@ function generateMarker({
   id = 0,
   longitude = 120.498409,
   latitude = 32.039665,
-  iconSrc = "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/ship-red-icon.png",
-  offsetX = -80,
+  offsetX = -15,
   offsetY = -25,
+  zIndex = 1,
   label = "",
-  iconWidth = 30,
-  iconHeight = 30,
   handleType = "",
+  viewUrl = "",
+  content = `<div>
+          <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: `<div style='width:160px'>
-          <img src='${iconSrc}' style='display:block;width:${iconWidth}px;height:${iconHeight}px;margin:6px auto'/
-        </div>`,
-    zIndex: 5,
+    content,
+    zIndex,
     position: new AMap.LngLat(longitude, latitude),
     offset: new AMap.Pixel(offsetX, offsetY),
   });
@@ -142,6 +161,12 @@ function generateMarker({
     });
   }
 
+  if (handleType === "media") {
+    marker.on("click", () => {
+      openMediaModal(viewUrl, 1, "航次图片");
+    });
+  }
+
   return marker;
 }
 //ship-orange-icon
@@ -158,32 +183,68 @@ function generateMarkers(points, type) {
         config.id = i.voyageId;
         config.handleType = "route";
         if (route.path === "/index") {
-          config.iconSrc =
-            "https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/ship-orange-icon.png";
+          config.content = `<div>
+          <img src='https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/ship-orange-icon.png' style='display:block;width:30px;height:30px;margin:6px auto'/
+        </div>`;
         }
         break;
       }
       case "loadPorts": {
-        config.iconSrc =
-          "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/port-green.png";
+        config.content = `<div>
+          <img src='https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/port-green.png' style='display:block;width:30px;height:30px;margin:6px auto'/
+        </div>`;
         config.label = "装货港";
         break;
       }
       case "dischargePorts": {
-        config.iconSrc =
-          "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/port-red.png";
+        config.content = `<div>
+          <img src='https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/port-red.png' style='display:block;width:30px;height:30px;margin:6px auto'/
+        </div>`;
         config.label = "卸货港";
         break;
       }
+      case "medias": {
+        config.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>`;
+        config.offsetX = -80;
+        config.offsetY = i.audit == 1 ? -185 : -20;
+        config.zIndex = 15;
+        config.handleType = "media";
+        config.viewUrl = i.viewUrl;
+        break;
+      }
+      case "coordinates": {
+        config.content = `<div>
+          <img src='https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/green-circle.png' style='display:block;width:20px;height:20px;margin:6px auto'/
+        </div>`;
+        config.offsetX = -10;
+        config.offsetY = -17;
+        break;
+      }
     }
     markers.push(generateMarker(config));
   }
   return markers;
 }
 
-function drawMarkers(markers) {
+function drawMarkers() {
+  let markers = [
+    ...generateMarkers(props.ships, "ships"),
+    ...generateMarkers(props.loadPorts, "loadPorts"),
+    ...generateMarkers(props.dischargePorts, "dischargePorts"),
+    ...generateMarkers(props.medias, "medias"),
+    ...generateMarkers(props.coordinates, "coordinates"),
+  ];
+
   let overlayGroups = new AMap.OverlayGroup(markers);
   map.value.add(overlayGroups);
+  setFitView(markers);
 }
 
 function setFitView(markers = [], zoom = 9) {
@@ -233,4 +294,9 @@ onUnmounted(() => {
 #container {
   width: 100%;
 }
+
+.container {
+  width: 100%;
+  height: 100%;
+}
 </style>

src/views/index/Index.vue

@@ -2,12 +2,10 @@
   <div v-loading="isLoading" style="height: 100%">
     <div class="df main">
       <div class="left">
-        <!-- <div id="map-container" class="map-container"></div> -->
         <AMapContainer
-          v-if="indexData.mapPoints.length"
           ref="mapRef"
           class="map-container"
-          :ships="indexData.mapPoints"
+          :ships="ships"
           :showLabel="true"
           :handleAble="true"
         ></AMapContainer>
@@ -282,7 +280,16 @@
   </div>
 </template>
 <script setup>
-import { ref, reactive, toRefs, computed, onMounted, inject } from "vue";
+import {
+  ref,
+  reactive,
+  toRefs,
+  computed,
+  onMounted,
+  inject,
+  nextTick,
+  onUnmounted,
+} from "vue";
 import { ElNotification } from "element-plus";
 import store from "../../store";
 import router from "../../router";
@@ -306,6 +313,7 @@ function changeVoyageType(s) {
     abnormalStatus: "",
     cargoId: "",
   };
+  mapRef.value.clearMap();
   getIndexSelect();
   getIndexData();
 }
@@ -326,6 +334,7 @@ let indexData = ref({
   unfinshDiscTons: "",
 });
 let isLoading = ref(false);
+const ships = ref([]);
 async function getIndexData(type) {
   isLoading.value = true;
   postData.value.status = status.value;
@@ -336,12 +345,14 @@ async function getIndexData(type) {
     isLoading.value = false;
     if (res.data.status == 0) {
       indexData.value = res.data.result;
+      ships.value = indexData.value.mapPoints;
       if (type == "init") {
         drawPie("init");
       } else {
         drawPie();
-        mapRef.value.initMap();
       }
+      await nextTick();
+      mapRef.value.drawMarkers();
     } else {
       indexData.value = {
         finshDiscTons: 0,
@@ -354,7 +365,7 @@ async function getIndexData(type) {
         drawPie("init");
       } else {
         drawPie();
-        mapRef.value.initMap();
+        mapRef.value.drawMarkers();
       }
     }
   } catch (error) {
@@ -564,10 +575,14 @@ async function getIndexSelect() {
   }
 }
 
-router.beforeEach(() => {
-  try {
-    myChart.value.dispose();
-  } catch (error) {}
+// router.beforeEach(() => {
+//   try {
+//     myChart.value.dispose();
+//   } catch (error) {}
+// });
+
+onUnmounted(() => {
+  echarts.dispose(myChart.value); // 在组件销毁前销毁 ECharts 实例
 });
 onMounted(() => {
   getIndexData("init");

src/views/voyage/voyageDetail.vue

@@ -96,8 +96,18 @@
         ></el-input>
       </div>
     </div>
-    <!-- <div :id="mapId" class="map-container"></div> -->
-    <AMapContainer ref="mapRef" class="map-container"></AMapContainer>
+    <AMapContainer
+      ref="mapRef"
+      class="map-container"
+      :medias="medias"
+      :longitude="
+        Number(medias[Math.floor(medias.length / 2)]?.longitude || 120.498409)
+      "
+      :latitude="
+        Number(medias[Math.floor(medias.length / 2)]?.latitude || 32.039665)
+      "
+      :coordinates="coordinates"
+    ></AMapContainer>
     <div class="line" style="margin-top: 30px">
       <div class="info-line">
         <div class="info-line-title">开始时间</div>
@@ -1987,7 +1997,7 @@
   </div>
 </template>
 <script setup>
-import { onMounted, reactive, ref, toRefs } from "vue";
+import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
 import api from "../../apis/fetch";
 import { useRoute } from "vue-router";
 import _ from "lodash";
@@ -2028,13 +2038,13 @@ async function getVoyageDetail(isInit) {
     spinner: "el-icon-loading",
     background: "rgba(0, 0, 0, 0.7)",
   });
-  // let res = await api.getVoyageDetail({
-  //   type: localStorage.userType,
-  //   voyageId: route.query.id,
-  // });
-  let res = {
-    data,
-  };
+  let res = await api.getVoyageDetail({
+    type: localStorage.userType,
+    voyageId: route.query.id,
+  });
+  // let res = {
+  //   data,
+  // };
   loading.close();
   if (res.data.status == 0) {
     ElNotification({
@@ -2090,10 +2100,10 @@ async function getVoyageDetail(isInit) {
       getLabList();
       getPortWeatherList();
       getAccidentList();
-      try {
-        initMap();
-      } catch (error) {}
     }
+    await nextTick();
+
+    mapRef.value.drawMarkers();
   } else {
     console.log(res);
     ElNotification({
@@ -2230,88 +2240,6 @@ function cancelUpdateDischarge() {
   updateForm.value = {};
   updatePoundBillList.value = [];
 }
-let mapId = ref(`map${route.query.id}`);
-function initMap() {
-  let c;
-  let longitude = 121.524761;
-  let latitude = 31.228721;
-  if (medias.value.length) {
-    c = Math.floor(medias.value.length / 2);
-    longitude = medias.value[c].longitude;
-    latitude = medias.value[c].latitude;
-  }
-  map.value = new AMap.Map(mapId.value, {
-    zoom: 16, //级别
-    center: [longitude, latitude], //中心点坐标
-    mapStyle: "amap://styles/f48d96805f5fa7f5aada657c5ee37017",
-    zoomEnable: true,
-    dragEnable: true,
-  });
-  let toolBar = new AMap.ToolBar({
-    position: {
-      top: "40px",
-      right: "40px",
-    },
-  });
-  let hawkEye = new AMap.HawkEye({
-    opened: false,
-  });
-  map.value.addControl(toolBar);
-  map.value.addControl(hawkEye);
-  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,
-      zIndex: 10,
-      position: new AMap.LngLat(i.longitude, i.latitude),
-      offset: new AMap.Pixel(-80, i.audit == 1 ? -185 : -20),
-    });
-    if (i.audit == 1) {
-      marker.on("click", () => {
-        openMediaModal(i.viewUrl, 1, "航次图片", i);
-      });
-    }
-
-    markers.push(marker);
-  }
-  for (let i of coordinates.value) {
-    let content = `<div style='width:160px'>
-        <img src='https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/green-circle.png' style='display:block;width:20px;height:20px;margin:6px auto'/
-      </div>`;
-
-    let marker = new AMap.Marker({
-      content,
-      zIndex: 5,
-      position: new AMap.LngLat(i.longitude, i.latitude),
-      offset: new AMap.Pixel(-80, -20),
-    });
-    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);
-  });
-}
 
 let disabledStatus = ref(true);
 let updateCache = {};