ShippingService_WebApp/src/views/shipManage/shipDetail.vue

<template>
  <div class="line-container-p24">
    <div
      class="df aic dib go-back ml8 pointer"
      @click="router.replace('/shipManage/shipList')"
    >
      <el-icon class="mr10"><ArrowLeftBold /></el-icon>
      <div>返回船舶列表</div>
    </div>
  </div>
  <div id="map-container" class="map-container"></div>
  <ShipInfo :shipInfos="shipInfos"></ShipInfo>
  <div class="df aic jcsb pr20" v-if="shipInfos.length">
    <div class="container-title">船员信息</div>
    <CrewInfo
      :shipCode="route.query.shipCode"
      :shipname="shipInfos[0].shipname"
      @onSubmit="getCrewList"
    ></CrewInfo>
  </div>
  <el-table border :data="crewList" stripe style="width: 1000px">
    <el-table-column align="center" type="index" label="序号" width="80" />
    <el-table-column
      align="center"
      prop="crewName"
      label="船员姓名"
      min-width="120"
    />
    <el-table-column
      align="center"
      prop="crewCertExpiryDate"
      label="有效期"
      min-width="120"
    >
      <template v-slot="scope">
        {{ subTimeStr(scope.row.crewCertExpiryDate) }}
      </template>
    </el-table-column>
    <el-table-column align="center" label="详情" min-width="120">
      <template #default="scope">
        <div class="df aic jcc">
          <el-button
            class="mr10"
            type="primary"
            @click="goToCrewDetail(scope.row)"
          >
            详情
          </el-button>
          <CrewInfo
            class="mr10"
            :shipCode="route.query.shipCode"
            :shipname="shipInfos[0].shipname"
            :crewId="scope.row.id"
            :crewInfo="scope.row"
            @onSubmit="getCrewList"
          ></CrewInfo>
          <el-button type="danger" @click="deleteCrew(scope.row)">
            删除
          </el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <div class="df aic jcfe mt40 mr20">
    <el-pagination
      :current-page="crewCurrentPage"
      @current-change="crewPageChange"
      background
      layout="prev, pager, next"
      :total="crewTotal"
    />
  </div>
  <div class="container-title">船舶图片</div>
  <div v-if="medias.length" class="medias-content df ffw">
    <div class="pic-container">
      <div v-for="(item, index) in medias" :key="item" class="pic-main">
        <div :class="['box', index % 2 == 0 ? '' : 'bottom-box']">
          <div class="card-note">
            {{ item.shipName }} 拍摄于
            <br />
            {{ item.createTime }}
            <br />
            天气 : {{ item.weather?.weather }} - 气温 :
            {{ item.weather?.temperature }}℃
          </div>
          <div class="medias-box mb10" style="position: relative">
            <el-image
              v-if="item.mediaType == 1"
              style="width: 100%; height: 100%"
              fit="contain"
              :src="item.downloadUrl"
              @click="openMediaModal(item.downloadUrl, 1, '图片查看')"
            ></el-image>
          </div>
          <el-button
            v-if="item.audit == 0"
            style="display: block; margin: 0 auto"
            size="small"
            type="primary"
            @click="auditAbnormalShip(item.id)"
          >
            审核通过
          </el-button>
        </div>
        <div :class="['s-line', index % 2 == 0 ? '' : 'top210px']"></div>
        <div class="point"></div>
        <div class="l-line" v-if="index + 1 != medias.length"></div>
      </div>
    </div>
    <el-dialog v-model="mediaModal" :title="modalTitle">
      <el-image
        v-if="modalType == 1"
        style="height: 60vh; display: flex"
        fit="contain"
        :src="currentUrl"
        :preview-src-list="modalPreview"
      ></el-image>
      <video
        v-else
        autoplay
        controls
        style="width: 100%; height: 60vh"
        :src="currentUrl"
      ></video>
    </el-dialog>
  </div>
</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 shipInfos = ref([{}]);
let medias = ref([]);
let mediaCoors = ref([]);
let shipCoors = ref([]);
let shipCoorsPolyline = ref([]);
let mediaCoorsPolyline = ref([]);
async function getShipDetail(shipCode) {
  let { data } = await api.getShipDetail({ shipCode });
  for (const i of data.result.shipCerts) {
    i.date = [i.startValidTime, i.endValidTime];
    for (let j of i.certs) {
      j.url = j.viewUrl;
    }
  }
  data.result.disabled = true;
  medias.value = data.result.medias;
  mediaCoors.value = data.result.mediaCoors;
  shipCoors.value = data.result.shipCoors;
  shipInfos.value = [data.result];
  initMap();
  getCrewList();
}
let crewCurrentPage = ref(1);
let crewTotal = ref(0);
let crewList = ref([]);
async function getCrewList() {
  let { data } = await api.getCrewList({
    shipCode: route.query.shipCode,
    currentPage: crewCurrentPage.value,
    size: 10,
  });
  if (data.status === 0) {
    crewList.value = data.result;
    crewTotal.value = data.total;
  } else {
    crewList.value = [];
    crewTotal.value = 0;
  }
}
function crewPageChange(e) {
  crewCurrentPage.value = e;
  getCrewList();
}

function goToCrewDetail(item) {
  router.push({
    path: "/crewManage/crewDetail",
    query: {
      shipCode: route.query.shipCode,
      shipCrewId: item ? item.id : "",
    },
  });
}

let currentUrl = ref("");
let mediaModal = ref(false);
let modalType = ref(1);
let modalTitle = ref();
let modalPreview = ref([]);
function openMediaModal(url, type, title) {
  modalPreview.value = [url];
  modalTitle.value = title;
  modalType.value = type;
  currentUrl.value = url;
  mediaModal.value = true;
}

const map = ref({});
function initMap() {
  map.value = new AMap.Map("map-container", {
    zoom: 9, //级别
    zooms: [4, 9],
    center: [120.557894, 31.887504], //中心点坐标
    mapStyle: "amap://styles/f48d96805f5fa7f5aada657c5ee37017",
    zoomEnable: true,
    dragEnable: true,
    scrollWheel: false,
  });
  let toolBar = new AMap.ToolBar({
    position: {
      top: "40px",
      right: "40px",
    },
  });
  let hawkEye = new AMap.HawkEye({
    opened: false,
  });
  map.value.addControl(toolBar);
  map.value.addControl(hawkEye);
  let markers = [];
  if (shipCoors.value.length) {
    for (let i of shipCoors.value) {
      let content = `<div style='width:160px'>
        <img src='https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/ship-green.png' style='display:block;width:20px;height:20px;margin:6px auto'/
      </div>`;

      let marker = new AMap.Marker({
        content,
        position: new AMap.LngLat(i.longitude, i.latitude),
        offset: new AMap.Pixel(-80, -20),
      });
      marker.setLabel({
        direction: "top",
        offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
        content: `${i.createTime.substring(0, 10)}`, //设置文本标注内容
        style: "",
      });
      markers.push(marker);
    }
  }
  if (mediaCoors.value.length) {
    for (let i of mediaCoors.value) {
      let content = `<div style='width:160px'>
        <img src='https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/ship-red.png' style='display:block;width:20px;height:20px;margin:6px auto'/
      </div>`;

      let marker = new AMap.Marker({
        content,
        position: new AMap.LngLat(i.longitude, i.latitude),
        offset: new AMap.Pixel(-80, -20),
      });
      marker.setLabel({
        direction: "top",
        offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
        content: `${i.createTime.substring(0, 10)}`, //设置文本标注内容
        style: "",
      });
      markers.push(marker);
    }
  }
  let overlayGroups = new AMap.OverlayGroup(markers);
  map.value.add(overlayGroups);
  map.value.setFitView(markers, true, [200, 50, 50, 50], 18);
  // if (shipCoors.value.length) {
  //   let path = [];
  //   for (let i of shipCoors.value) {
  //     path.push(new AMap.LngLat(Number(i.longitude), Number(i.latitude)));
  //   }
  //   shipCoorsPolyline.value = new AMap.Polyline({
  //     path: path,
  //     borderWeight: 2, // 线条宽度，默认为 1
  //     strokeColor: "green", // 线条颜色
  //     lineJoin: "round", // 折线拐点连接处样式
  //   });
  // }
  // if (mediaCoors.value.length) {
  //   let path = [];
  //   for (let i of mediaCoors.value) {
  //     path.push(new AMap.LngLat(Number(i.longitude), Number(i.latitude)));
  //   }
  //   mediaCoorsPolyline.value = new AMap.Polyline({
  //     path: path,
  //     borderWeight: 2, // 线条宽度，默认为 1
  //     strokeColor: "red", // 线条颜色
  //     lineJoin: "round", // 折线拐点连接处样式
  //   });
  // }
  // map.value.add([shipCoorsPolyline.value, mediaCoorsPolyline.value]);
  // map.value.setFitView();
}
async function auditAbnormalShip(mediaId) {
  let { data } = await api.auditAbnormalShip({
    mediaId,
    shipCode: route.query.shipCode,
  });
  if (data.status == 0) {
    ElMessage({
      message: data.msg,
      type: "success",
    });
    getShipDetail(route.query.shipCode);
  } else {
    ElMessage({
      message: data.msg,
      type: "error",
    });
  }
}
onMounted(() => {
  getShipDetail(route.query.shipCode);
});
</script>
<style scoped>
.medias-content {
  width: 100%;
  height: 620px;
  background: #f7f7f7;
  border-radius: 2px;
}

.pic-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  padding: 30px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

.pic-main {
  position: relative;
  width: 120px;
}
.box {
  position: absolute;
  height: 260px;
  width: var(--box-width);
  border: 5px solid #dddddd;
  transition: all 0.5s;
  background: #fff;
  z-index: 10;
}

.point {
  position: relative;
  left: 93px;
  top: 268px;
  width: 16px;
  height: 16px;
  background-image: url(../../assets/blue-circle.png);
}

.s-line {
  position: absolute;
  left: 100px;
  top: 262px;
  height: 20px;
  border-left: 2px dashed;
  box-sizing: border-box;
  border-color: #ddd;
}

.l-line {
  position: relative;
  bottom: 30px;
  left: 111px;
  top: 259px;
  height: 3px;
  width: 100px;
  background-color: #dddddd;
}

.bottom-box {
  top: 300px;
}
.top210px {
  top: 280px;
}

.box:hover {
  transform: scale(1.1);
}

.card-note {
  height: 30px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #777777;
  padding: 10px 20px;
}

.medias-box {
  width: 100%;
  height: 140px;
  margin-top: 40px;
}

.checkbox-group {
  width: 180px;
  height: 50px;
  margin-top: 20px;
}

.el-checkbox {
  margin: 0;
}

.now-box {
  border: 5px solid #0094fe;
}

.now-l-line {
  background-color: #0094fe;
}

.now-s-line {
  border-color: #97caf6;
}

.now-point {
  filter: grayscale(1);
}

.info-line-text-table {
  width: 180px !important;
}

.upload-plus-icon {
  height: 15%;
  color: rgb(139, 147, 156);
  line-height: 100px;
  font-size: 40px;
  font-weight: 200;
}

.upload-text {
  height: 25%;
  color: rgb(139, 147, 156);
}

.info-gap {
  width: 40px;
  font-size: 14px;
  overflow: visible;
  white-space: nowrap;
  color: #006ebc;
  cursor: pointer;
}

.map-container {
  width: 98%;
  max-width: 1200px;
  height: 500px;
}
</style>