ShippingService_WebApp/src/views/shipSecurityManage/checkShipExamine.vue

<template>
  <el-card class="pl30 pt20 mt30" style="width: 1000px">
    <div class="df aic jcsb" v-if="templateDetail.id">
      <div class="df aic">
        <div class="c6 mr30">安检名称:</div>
        <div class="c6 mr30">{{ templateDetail.securityCheckName }}</div>
      </div>
      <div class="c6 mr30">
        <span class="mr20">通过项目:</span>
        {{ templateDetail.finishCheckItem }} /
        {{ templateDetail.totalCheckItem }}
      </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-divider />
    <div class="mt40 fs16 c6">安检项目</div>
    <div class="mb20 mt30 fs14 c6" v-for="item in templateDetail.items">
      <div class="df aic">
        <div class="ml20 mr10 item-title">检查项目名称:</div>
        <div class="mr30 item-text">{{ item.checkItemName }}</div>
        <div class="mr10 item-title">检查项目类型:</div>
        <div class="mr30 item-text">{{ item.checkItemTypeName }}</div>
        <div class="mr10 item-title">检查项目备注:</div>
        <div class="mr10 item-text">{{ item.checkItemRemark }}</div>
      </div>
      <div v-if="item.viewUrl">
        <el-image
          style="width: 200px; height: 200px"
          class="ml20 mt10"
          :src="item.viewUrl"
          :preview-src-list="[item.viewUrl]"
          fit="cover"
        ></el-image>
        <div
          class="df aic jcsa ml20 mt10"
          style="width: 200px"
          v-if="item.auditStatus == 0"
        >
          <el-button
            @click="checkSecurityItem(item.id, 1)"
            class="mr30"
            size="small"
            type="primary"
          >
            通过
          </el-button>
          <el-button
            @click="checkSecurityItem(item.id, 2)"
            size="small"
            type="danger"
          >
            不通过
          </el-button>
        </div>
      </div>
    </div>
  </el-card>
</template>
<script setup>
import { ref, h, reactive, toRefs, onMounted } from "vue";
import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
import store from "../../store";
import router from "../../router";
import md5 from "md5";
import api from "../../apis/fetch";
import { useRoute } from "vue-router";
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;
  }
}

async function checkSecurityItem(shipSecurityCheckItemId, auditStatus) {
  let shipSecurityCheckId = route.query.id;
  let { data } = await api.checkSecurityItem({
    shipSecurityCheckId,
    shipSecurityCheckItemId,
    auditStatus,
  });
  if (data.status == 0) {
    ElNotification({
      title: "成功",
      message: data.msg,
      type: "success",
      duration: 1500,
    });
    getSecurityCheckDetail(shipSecurityCheckId);
  }
}
onMounted(() => {
  getSecurityCheckDetail(route.query.id);
});
</script>

<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;
}

.item-title {
  width: 100px;
}

.item-text {
  width: 100px;
}
</style>