更新 首页船舶信息

src/views/index/Index.vue

@@ -4,51 +4,60 @@
       <div class="safety-time">
         安全航行 {{ indexData.safeNavigationDays || " - " }} 天
       </div>
-      <div class="ship-info" v-if="ship.code">
-        <img
-          class="close"
-          @click="ship = {}"
-          src="../../assets/close.png"
-          alt=""
-        />
+      <div v-if="ship.code" class="ship-card">
         <div class="df aic">
-          <div class="c3 mr20">船名</div>
-          <div class="c7 fs14">{{ ship.shipname }}</div>
-        </div>
-        <div class="df aic">
-          <div class="c3 mr20">MMSI</div>
-          <div class="c7 fs14">{{ ship.mmsi }}</div>
-        </div>
-        <div class="df aic">
-          <div class="c3 mr20">IMO</div>
-          <div class="c7 fs14">{{ ship.imo }}</div>
-        </div>
-        <div class="df aic">
-          <div class="c3 mr20">船长</div>
-          <div class="c7 fs14">{{ ship.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="unit c7">米</div>
-        </div>
-        <div class="df aic">
-          <div class="c3 mr20">吨位</div>
-          <div class="c7 fs14">{{ ship.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="unit c7">米</div>
-        </div>
-        <div class="df aic c5">
-          <div class="c3 mr20">船龄</div>
-          <div class="c7 fs14">{{ ship.age }}</div>
-          <div class="unit c7">年</div>
+          <img
+            v-if="ship.medias[0]?.viewUrl"
+            style="height: 100%; width: 120px"
+            :src="ship.medias[0]?.viewUrl"
+            alt=""
+          />
+          <div class="ship-info">
+            <img
+              class="close"
+              @click="ship = {}"
+              src="../../assets/close.png"
+              alt=""
+            />
+            <div class="df aic">
+              <div class="c3 mr20">船名</div>
+              <div class="c7 fs14">{{ ship.shipname }}</div>
+            </div>
+            <div class="df aic">
+              <div class="c3 mr20">MMSI</div>
+              <div class="c7 fs14">{{ ship.mmsi }}</div>
+            </div>
+            <div class="df aic">
+              <div class="c3 mr20">IMO</div>
+              <div class="c7 fs14">{{ ship.imo }}</div>
+            </div>
+            <div class="df aic">
+              <div class="c3 mr20">船长</div>
+              <div class="c7 fs14">{{ ship.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="unit c7">米</div>
+            </div>
+            <div class="df aic">
+              <div class="c3 mr20">吨位</div>
+              <div class="c7 fs14">{{ ship.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="unit c7">米</div>
+            </div>
+            <div class="df aic c5">
+              <div class="c3 mr20">船龄</div>
+              <div class="c7 fs14">{{ ship.age }}</div>
+              <div class="unit c7">年</div>
+            </div>
+          </div>
         </div>
-
         <div class="df jcc mt20">
           <el-button
             style="width: 120px"
@@ -143,11 +152,11 @@ function initMap() {
       right: "40px",
     },
   });
-  // let hawkEye = new AMap.HawkEye({
-  //   opened: false,
-  // });
+  let hawkEye = new AMap.HawkEye({
+    opened: false,
+  });
   map.value.addControl(toolBar);
-  // map.value.addControl(hawkEye);
+  map.value.addControl(hawkEye);
   drawMarkers();
 }
 
@@ -208,42 +217,24 @@ function drawMarkers() {
   }
 }
 let ship = ref({});
+let lineMarker = ref([]);
 async function getShipDetail(shipCode) {
   let { data } = await api.getShipDetail({
     shipCode,
   });
   if (data.status == 0) {
     ship.value = data.result;
-    certs.value = [];
-    insurance.value = [];
-    for (let i of ship.value.shipCerts) {
-      if (i.type == 5) {
-        insurance.value.push(i);
-        if (i.certs.length != 0) insuranceStatus.value = true;
-      } else {
-        certs.value.push(i);
-      }
-    }
-    certsStatus.value = certs.value.some((item) => {
-      return item.certs.length != 0;
-    });
   } else {
     ship.value = {};
   }
 }
 let indexData = ref({});
-let certs = ref([]);
-let insurance = ref([]);
 async function getIndexData() {
   let { data } = await api.getIndexData({});
   indexData.value = data.result;
   initMap();
 }
 
-let voyageStatus = ref(true);
-let certsStatus = ref(false);
-let insuranceStatus = ref(false);
-
 onMounted(() => {
   getIndexData();
 });
@@ -369,7 +360,7 @@ onMounted(() => {
   margin-left: 10px;
 }
 
-.ship-info {
+.ship-card {
   position: absolute;
   bottom: 20px;
   right: 20px;
@@ -381,6 +372,14 @@ onMounted(() => {
   padding-top: 30px;
 }
 
+.ship-info {
+  background: #fff;
+  padding: 20px;
+  border-radius: 10px;
+  min-width: 220px;
+  padding-top: 30px;
+}
+
 .ship-info > div {
   margin-top: 6px;
 }