更新 首页布局

src/views/index/Index.vue

@@ -13,6 +13,75 @@
     </div>
   </div>
   <div id="map-container" class="map-container"></div>
+  <div v-if="ship.code" class="p20 bgf">
+    <div class="container-title">船舶信息</div>
+    <div style="max-width: 1200px">
+      <div class="df aic jcsb pl20">
+        <div class="df aic">
+          <div class="c5 mr10">船名:</div>
+          <div class="c5">{{ ship.shipname }}</div>
+        </div>
+
+        <div class="df aic">
+          <div class="c5 mr10">MMSI:</div>
+          <div class="c5">{{ ship.mmsi }}</div>
+        </div>
+
+        <div class="df aic">
+          <div class="c5 mr10">IMO:</div>
+          <div class="c5">{{ ship.imo }}</div>
+        </div>
+
+        <div class="df aic">
+          <div class="c5 mr10">icon</div>
+          <div class="c5">汇很多科技认证</div>
+        </div>
+      </div>
+      <div class="df aic jcsa">
+        <div class="df aic card">
+          <div>航行</div>
+          <div>√</div>
+        </div>
+        <div class="df aic card">
+          <div>证书</div>
+          <div>√</div>
+        </div>
+        <div class="df aic card">
+          <div>保险</div>
+          <div>√</div>
+        </div>
+      </div>
+      <div class="df aic jcsb pl20">
+        <div class="df aic">
+          <div class="c5 mr10">船长:</div>
+          <div class="c5">{{ ship.length }}</div>
+          <div class="unit c5">米</div>
+        </div>
+
+        <div class="df aic">
+          <div class="c5 mr10">船宽:</div>
+          <div class="c5">{{ ship.breadth }}</div>
+          <div class="unit c5">米</div>
+        </div>
+
+        <div class="df aic">
+          <div class="c5 mr10">吨位:</div>
+          <div class="c5">{{ ship.loadTons }}</div>
+          <div class="unit c5">吨</div>
+        </div>
+        <div class="df aic">
+          <div class="c5 mr10">吃水</div>
+          <div class="c5">{{ ship.draught }}</div>
+          <div class="unit c5">米</div>
+        </div>
+        <div class="df aic c5">
+          <div class="c5 mr10">船龄</div>
+          <div class="c5">{{ ship.age }}</div>
+          <div class="unit c5">年</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script setup>
 import moment from "moment";
@@ -89,12 +158,16 @@ function drawMarkers() {
   map.value.add(overlayGroups);
   map.value.setFitView(markers, true, [200, 50, 50, 50], 18);
 }
-
+let ship = ref({});
 async function getShipDetail(shipCode) {
   let { data } = await api.getShipDetail({
     shipCode,
   });
-  console.log(data);
+  if (data.status == 0) {
+    ship.value = data.result;
+  } else {
+    ship.value = {};
+  }
 }
 
 let shipNum = ref("");
@@ -125,4 +198,8 @@ onMounted(() => {
   width: 100%;
   height: calc(100% - 81px);
 }
+
+.unit {
+  margin-left: 5px;
+}
 </style>