更新 首页

src/views/index/Index.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="df">
     <div id="map-container" class="map-container">
-      <div class="safety-time">安全航行 {{ 100 }} 天</div>
+      <div class="safety-time">
+        安全航行 {{ indexData.safeNavigationDays || " - " }} 天
+      </div>
       <div class="ship-info" v-if="ship.code">
         <img
           class="close"
@@ -77,7 +79,7 @@
           <div class="data-text">
             <div class="data-title">所有船舶数量</div>
             <div class="df aib">
-              <div class="num">{{ shipNum }}</div>
+              <div class="num">{{ indexData.shipNum }}</div>
               <div class="unit">艘</div>
             </div>
           </div>
@@ -87,7 +89,7 @@
           <div class="data-text">
             <div class="data-title">所有船舶吨位（总吨）</div>
             <div class="df aib">
-              <div class="num">{{ shipTons }}</div>
+              <div class="num">{{ indexData.shipTons }}</div>
               <div class="unit">吨</div>
             </div>
           </div>
@@ -97,7 +99,7 @@
           <div class="data-text">
             <div class="data-title">所有船舶载重吨位</div>
             <div class="df aib">
-              <div class="num">{{ shipLoadTons }}</div>
+              <div class="num">{{ indexData.shipLoadTons }}</div>
               <div class="unit">吨</div>
             </div>
           </div>
@@ -129,7 +131,7 @@ function initMap() {
   map.value = new AMap.Map("map-container", {
     zoom: 9, //级别
     zooms: [4, 9],
-    center: [120.563757, 31.891174], //中心点坐标
+    center: [indexData.value.lng, indexData.value.lat], //中心点坐标
     mapStyle: "amap://styles/f48d96805f5fa7f5aada657c5ee37017",
     zoomEnable: true,
     dragEnable: true,
@@ -150,47 +152,60 @@ function initMap() {
 }
 
 function drawMarkers() {
-  let markers = [];
-  for (let i of ships.value) {
-    if (i.latitude && i.longitude) {
-      let content = `<div style='width:160px'>
-        <img src='https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/ship-orange-icon.png' style='display:block;width:20px;height:20px;margin:6px auto'/
+  let content1 = `<div style='width:160px'>
+        <img src='https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/company.png' style='display:block;width:20px;height:20px;margin:6px auto'/
+      </div>`;
+  let marker1 = new AMap.Marker({
+    content: content1,
+    position: new AMap.LngLat(indexData.value.lng, indexData.value.lat),
+    offset: new AMap.Pixel(-80, -20),
+  });
+  map.value.add(marker1);
+  if (indexData.value.ships.length) {
+    let markers = [];
+    for (let i of indexData.value.ships) {
+      if (i.latitude && i.longitude) {
+        let content = `<div style='width:160px'>
+        <img src='https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/ship-${
+          i.status ? "red" : "green"
+        }.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(-80, -20),
-      });
-      let infoWindowContent = `<div class='window-title pointer' style='font-size:12px'>${i.shipName}</div>
+        let marker = new AMap.Marker({
+          content,
+          position: new AMap.LngLat(i.longitude, i.latitude),
+          offset: new AMap.Pixel(-80, -20),
+        });
+        let infoWindowContent = `<div class='window-title pointer' style='font-size:12px'>${i.shipName}</div>
       <div style='font-size:12px;margin-top:5px'>查看详情</div>
       `;
-      let infoWindow = new AMap.InfoWindow({
-        position: new AMap.LngLat(i.longitude, i.latitude),
-        offset: new AMap.Pixel(0, -10),
-        content: infoWindowContent,
-      });
-
-      // marker.on("mouseover", function () {
-      //   infoWindow.open(map.value);
-      // });
-      marker.setLabel({
-        direction: "top",
-        offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
-        content: `${i.shipname}`, //设置文本标注内容
-        style: "",
-      });
-
-      marker.on("click", () => {
-        getShipDetail(i.code);
-      });
-
-      markers.push(marker);
+        let infoWindow = new AMap.InfoWindow({
+          position: new AMap.LngLat(i.longitude, i.latitude),
+          offset: new AMap.Pixel(0, -10),
+          content: infoWindowContent,
+        });
+
+        // marker.on("mouseover", function () {
+        //   infoWindow.open(map.value);
+        // });
+        marker.setLabel({
+          direction: "top",
+          offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
+          content: `${i.shipname}`, //设置文本标注内容
+          style: "",
+        });
+
+        marker.on("click", () => {
+          getShipDetail(i.code);
+        });
+
+        markers.push(marker);
+      }
     }
+    let overlayGroups = new AMap.OverlayGroup(markers);
+    map.value.add(overlayGroups);
+    map.value.setFitView(markers, true, [200, 50, 50, 50], 18);
   }
-  let overlayGroups = new AMap.OverlayGroup(markers);
-  map.value.add(overlayGroups);
-  map.value.setFitView(markers, true, [200, 50, 50, 50], 18);
 }
 let ship = ref({});
 async function getShipDetail(shipCode) {
@@ -216,37 +231,20 @@ async function getShipDetail(shipCode) {
     ship.value = {};
   }
 }
-
-let shipNum = ref("");
-let shipLoadTons = ref("");
-let shipTons = ref("");
-let ships = ref([]);
+let indexData = ref({});
 let certs = ref([]);
 let insurance = ref([]);
 async function getIndexData() {
   let { data } = await api.getIndexData({});
-  shipNum.value = data.result.shipNum;
-  shipLoadTons.value = data.result.shipLoadTons;
-  shipTons.value = data.result.shipTons;
-  ships.value = data.result.ships;
+  indexData.value = data.result;
   initMap();
 }
 
-function goTo(type) {
-  currentType.value = type;
-  // document.querySelector(`#${type}`).scrollIntoView({
-  //   behavior: "smooth",
-  //   block: "center",
-  //   inline: "nearest",
-  // });
-}
-
 let voyageStatus = ref(true);
 let certsStatus = ref(false);
 let insuranceStatus = ref(false);
 
 onMounted(() => {
-  // getShipDetail("1536A9C15076F89BB01FCF28EAD7C2CC");
   getIndexData();
 });
 </script>