新增 船舶安检审核

src/views/shipSecurityManage/checkShipExamine.vue

@@ -1,8 +1,55 @@
 <template>
-  <el-empty :image-size="300" description=" " />
-  <div style="text-align: center; font-size: 40px; color: #666">
-    船舶安检正在建设中
-  </div>
+  <el-card class="pl30 pt20 mt30" style="width: 1000px">
+    <div v-if="templateDetail.id">
+      <div class="df aic">
+        <div class="c6 mr30">安检名称:</div>
+        <div class="c6 mr30">{{ templateDetail.securityCheckName }}</div>
+      </div>
+    </div>
+    <el-divider />
+    <div>
+      <div class="c6 mb20">船舶信息</div>
+      <div class="df aic mb20">
+        <div class="ship-label">船名</div>
+        <div class="ship-text">{{ shipDetail.shipname }}</div>
+        <div class="ship-label">船东姓名</div>
+        <div class="ship-text">{{ shipDetail.shipOwnerName }}</div>
+        <div class="ship-label">船东手机号</div>
+        <div class="ship-text">{{ shipDetail.shipOwnerPhone }}</div>
+        <div class="ship-label">MMSI</div>
+        <div class="ship-text">{{ shipDetail.mmsi }}</div>
+        <div class="ship-label">IMO</div>
+        <div class="ship-text">{{ shipDetail.imo }}</div>
+      </div>
+      <div class="df aic mb20">
+        <div class="ship-label">船龄</div>
+        <div class="ship-text">
+          {{ shipDetail.age }}
+          <span class="unit">年</span>
+        </div>
+        <div class="ship-label">船长</div>
+        <div class="ship-text">
+          {{ shipDetail.length }}
+          <span class="unit">米</span>
+        </div>
+        <div class="ship-label">船宽</div>
+        <div class="ship-text">
+          {{ shipDetail.breadth }}
+          <span class="unit">米</span>
+        </div>
+        <div class="ship-label">吨位</div>
+        <div class="ship-text">
+          {{ shipDetail.loadTons }}
+          <span class="unit">吨</span>
+        </div>
+        <div class="ship-label">满载吃水</div>
+        <div class="ship-text">
+          {{ shipDetail.draught }}
+          <span class="unit">米</span>
+        </div>
+      </div>
+    </div>
+  </el-card>
 </template>
 <script setup>
 import { ref, h, reactive, toRefs, onMounted } from "vue";
@@ -16,10 +63,20 @@ import _ from "lodash";
 import { subTimeStr } from "../../utils/utils";
 
 const route = useRoute();
+let status = ref(0);
+let templateDetail = ref({
+  items: [],
+});
+let shipDetail = ref({});
 async function getSecurityCheckDetail(shipSecurityCheckId) {
   let { data } = await api.getSecurityCheckDetail({
     shipSecurityCheckId,
   });
+  if (data.status == 0) {
+    status.value = data.result.status;
+    templateDetail.value = data.result;
+    shipDetail.value = data.result.ship;
+  }
   console.log(data);
 }
 onMounted(() => {
@@ -27,4 +84,18 @@ onMounted(() => {
 });
 </script>
 
-<style scoped></style>
+<style scoped>
+.ship-label {
+  width: 80px;
+  color: #666;
+  font-size: 14px;
+  text-align: right;
+  margin-right: 10px;
+}
+
+.ship-text {
+  width: 100px;
+  color: #333;
+  font-size: 14px;
+}
+</style>