新增 船舶轨迹

src/apis/fetch.js

@@ -44,6 +44,11 @@ export default {
     return $http("/ship/delete/cert", data);
   },
 
+  // 首页船舶详情
+  getIndexShipDetail(data) {
+    return $http("/index/detail", data);
+  },
+
   // 船舶详情
   getShipDetail(data) {
     return $http("/ship/detail", data);

src/views/index/Index.vue

@@ -7,9 +7,9 @@
       <div v-if="ship.code" class="ship-card">
         <div class="df aic">
           <img
-            v-if="ship.medias[0]?.viewUrl"
+            v-if="ship.media.viewUrl"
             style="height: 100%; width: 120px"
-            :src="ship.medias[0]?.viewUrl"
+            :src="ship.media.viewUrl"
             alt=""
           />
           <div class="ship-info">
@@ -21,43 +21,46 @@
             />
             <div class="df aic">
               <div class="c3 mr20">船名</div>
-              <div class="c7 fs14">{{ ship.shipname }}</div>
+              <div class="c7 fs14">{{ ship.media.shipname }}</div>
             </div>
             <div class="df aic">
               <div class="c3 mr20">MMSI</div>
-              <div class="c7 fs14">{{ ship.mmsi }}</div>
+              <div class="c7 fs14">{{ ship.media.mmsi }}</div>
             </div>
             <div class="df aic">
               <div class="c3 mr20">IMO</div>
-              <div class="c7 fs14">{{ ship.imo }}</div>
+              <div class="c7 fs14">{{ ship.media.imo }}</div>
             </div>
             <div class="df aic">
               <div class="c3 mr20">船长</div>
-              <div class="c7 fs14">{{ ship.length }}</div>
+              <div class="c7 fs14">{{ ship.media.length }}</div>
               <div class="unit c7">米</div>
             </div>
             <div class="df aic">
               <div class="c3 mr20">船宽</div>
-              <div class="c7 fs14">{{ ship.breadth }}</div>
+              <div class="c7 fs14">{{ ship.media.breadth }}</div>
               <div class="unit c7">米</div>
             </div>
             <div class="df aic">
               <div class="c3 mr20">吨位</div>
-              <div class="c7 fs14">{{ ship.loadTons }}</div>
+              <div class="c7 fs14">{{ ship.media.loadTons }}</div>
               <div class="unit c7">吨</div>
             </div>
             <div class="df aic">
               <div class="c3 mr20">满载吃水</div>
-              <div class="c7 fs14">{{ ship.draught }}</div>
+              <div class="c7 fs14">{{ ship.media.draught }}</div>
               <div class="unit c7">米</div>
             </div>
             <div class="df aic c5">
               <div class="c3 mr20">船龄</div>
-              <div class="c7 fs14">{{ ship.age }}</div>
+              <div class="c7 fs14">{{ ship.media.age }}</div>
               <div class="unit c7">年</div>
             </div>
           </div>
         </div>
+        <div class="mt20" v-if="ship.lastSecurityCheckTime">
+          最后安检时间: {{ ship.lastSecurityCheckTime }}
+        </div>
         <div class="df jcc mt20">
           <el-button
             style="width: 120px"
@@ -205,7 +208,7 @@ function drawMarkers() {
         });
 
         marker.on("click", () => {
-          getShipDetail(i.code);
+          getIndexShipDetail(i.code);
         });
 
         markers.push(marker);
@@ -217,13 +220,28 @@ function drawMarkers() {
   }
 }
 let ship = ref({});
-let lineMarker = ref([]);
-async function getShipDetail(shipCode) {
-  let { data } = await api.getShipDetail({
+let polyline = ref([]);
+async function getIndexShipDetail(shipCode) {
+  map.value.remove(polyline.value);
+  let { data } = await api.getIndexShipDetail({
     shipCode,
   });
   if (data.status == 0) {
     ship.value = data.result;
+    let { coors } = ship.value;
+    if (coors.length) {
+      let path = [];
+      for (let i of coors) {
+        path.push(new AMap.LngLat(Number(i.longitude), Number(i.latitude)));
+      }
+      polyline.value = new AMap.Polyline({
+        path: path,
+        borderWeight: 2, // 线条宽度，默认为 1
+        strokeColor: "red", // 线条颜色
+        lineJoin: "round", // 折线拐点连接处样式
+      });
+      map.value.add(polyline.value);
+    }
   } else {
     ship.value = {};
   }