JiangYunPhotosManage_WebApp/src/views/voyage/voyageDetail.vue

<template>
  <div class="line-container-p24">
    <i class="el-icon-arrow-left"></i>
    <div
      class="dib go-back ml8 pointer"
      @click="router.replace('/voyage/voyageList')"
    >
      返回航次列表
    </div>
  </div>

  <div class="container-title">航次信息</div>
  <div class="line-container-p24">
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">航次名称</div>
        <el-input
          class="info-line-text"
          v-model="voyage.voyageName"
          disabled
        ></el-input>
      </div>
      <div class="info-line">
        <div class="info-line-title">货主</div>
        <el-input
          class="info-line-text"
          v-model="voyage.cargoOwnerName"
          disabled
        ></el-input>
      </div>
    </div>
    <!-- <div class="line">
      <div class="info-line">
        <div class="info-line-title">船东</div>
        <el-input
          class="info-line-text"
          v-model="voyage.shipOwnerName"
          disabled
        ></el-input>
      </div>
      <div class="info-line">
        <div class="info-line-title">船东手机号</div>
        <el-input
          class="info-line-text"
          v-model="voyage.shipOwnerPhone"
          disabled
        ></el-input>
      </div>
    </div> -->
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">船舶</div>
        <el-input
          class="info-line-text"
          v-model="voyage.shipName"
          disabled
        ></el-input>
      </div>
      <div class="info-line">
        <div class="info-line-title">MMSI</div>
        <el-input
          class="info-line-text"
          v-model="voyage.shipMmsi"
          disabled
        ></el-input>
      </div>
    </div>
    <div id="map-container" class="map-container"></div>
    <div class="line" style="margin-top: 30px">
      <div class="info-line">
        <div class="info-line-title">开始时间</div>
        <el-input
          class="info-line-text"
          v-model="voyage.startTime"
          disabled
        ></el-input>
      </div>
      <div class="info-line">
        <div class="info-line-title">结束时间</div>
        <el-input
          class="info-line-text"
          v-model="voyage.endTime"
          disabled
        ></el-input>
      </div>
    </div>
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">装货港</div>
        <el-input
          class="info-line-text"
          v-model="voyage.loadPort"
          disabled
        ></el-input>
      </div>
      <div class="info-line">
        <div class="info-line-title">卸货港</div>
        <el-input
          class="info-line-text"
          v-model="voyage.dischargeProt"
          disabled
        ></el-input>
      </div>
    </div>
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">货种</div>
        <el-input
          class="info-line-text"
          v-model="voyage.cargo"
          disabled
        ></el-input>
      </div>
      <div class="info-line">
        <div class="info-line-title">吨位</div>
        <el-input
          class="info-line-text"
          v-model="voyage.tons"
          disabled
        ></el-input>
      </div>
    </div>
  </div>
  <div class="container-title">航次信息</div>
  <div class="line-container-p24">
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">运输状态</div>
        <el-select
          v-model="voyage.transStatus"
          placeholder="Select"
          class="info-line-text"
          :disabled="disabledStatus"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="info-line">
        <div class="info-line-title">实际卸货吨位</div>
        <el-input
          class="info-line-text"
          v-model="voyage.actualDischargeTons"
          :disabled="disabledStatus"
        ></el-input>
      </div>
    </div>
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">装货开始时间</div>
        <el-date-picker
          class="info-line-text"
          v-model="voyage.loadStartTime"
          type="datetime"
          format="YYYY/MM/DD HH:mm:ss"
          value-format="YYYY/MM/DD HH:mm:ss"
          placeholder="装货开始时间"
          :disabled="disabledStatus"
        ></el-date-picker>
      </div>
      <div class="info-line">
        <div class="info-line-title">装货结束时间</div>
        <el-date-picker
          class="info-line-text"
          v-model="voyage.loadEndTime"
          type="datetime"
          format="YYYY/MM/DD HH:mm:ss"
          value-format="YYYY/MM/DD HH:mm:ss"
          placeholder="装货开始时间"
          :disabled="disabledStatus"
        ></el-date-picker>
      </div>
    </div>
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">卸货开始时间</div>
        <el-date-picker
          class="info-line-text"
          v-model="voyage.dischargeStartTime"
          type="datetime"
          format="YYYY/MM/DD HH:mm:ss"
          value-format="YYYY/MM/DD HH:mm:ss"
          placeholder="装货开始时间"
          :disabled="disabledStatus"
        ></el-date-picker>
      </div>
      <div class="info-line">
        <div class="info-line-title">卸货结束时间</div>
        <el-date-picker
          class="info-line-text"
          v-model="voyage.dischargeEndTime"
          type="datetime"
          format="YYYY/MM/DD HH:mm:ss"
          value-format="YYYY/MM/DD HH:mm:ss"
          placeholder="装货开始时间"
          :disabled="disabledStatus"
        ></el-date-picker>
      </div>
    </div>
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">备注</div>
        <el-input
          class="info-line-textarea"
          v-model="voyage.remark"
          autosize
          type="textarea"
          :disabled="disabledStatus"
        ></el-input>
      </div>
    </div>
    <div class="media-content df ffw">
      <div class="pic-container">
        <div v-for="(item, index) in media" :key="item" class="pic-main">
          <div :class="index % 2 == 0 ? 'box' : 'box bottom-box'">
            <div class="card-note">
              {{ item.shipName }} 拍摄于
              <br />
              {{ item.createTime }}
            </div>
            <div class="media-box" style="position: relative">
              <el-image
                v-if="item.mediaType == 1"
                style="width: 100%; height: 100%"
                fit="contain"
                :src="item.downloadUrl"
                :preview-src-list="previewSrcList"
              ></el-image>
              <video
                style="width: 100%; height: 100%"
                v-else
                :src="item.downloadUrl"
              ></video>
              <img
                @click="openVideoModal(item.downloadUrl)"
                v-if="item.mediaType == 2"
                src="../../assets/icon-player.png"
                style="
                  object-fit: contain;
                  width: 40px;
                  height: 40px;
                  position: absolute;
                  top: calc(50% - 20px);
                  left: calc(50% - 20px);
                  background: #fff;
                  border-radius: 50%;
                "
                alt=""
              />
            </div>
            <div class="checkbox-group df aic jcsa">
              <el-checkbox
                @change="auditMedia(item.id, 1, index, item.mediaType)"
                :model-value="item.audit == 1"
                label="通过"
              ></el-checkbox>
              <el-checkbox
                @change="auditMedia(item.id, 2, index, item.mediaType)"
                :model-value="item.audit == 2"
                label="未通过"
              ></el-checkbox>
            </div>
          </div>
          <div :class="index % 2 == 0 ? 's-line' : 's-line top210px'"></div>
          <div class="point"></div>
          <div class="l-line" v-if="index + 1 != media.length"></div>
        </div>
        <el-dialog
          v-model="videoModal"
          title="视频审核"
          width="20%"
          :before-close="videoClose"
        >
          <video
            autoplay
            controls
            style="width: 100%; height: 100%"
            :src="currentUrl"
          ></video>
        </el-dialog>
      </div>
    </div>
    <div class="df aic jcfe mt20" v-if="voyage.voyageStatus == 1">
      <el-button v-if="disabledStatus" type="primary" @click="changeVoyageInfo">
        修改航次
      </el-button>
      <div v-else>
        <div>
          <el-button @click="cancelVoyageChange">取消修改</el-button>
          <el-button type="primary" @click="submitVoyageChange">
            提交修改
          </el-button>
        </div>
      </div>
      <el-button
        v-if="voyage.dischargeEndTime && disabledStatus"
        type="primary"
        @click="finishVoyage"
      >
        完成航次
      </el-button>
    </div>
  </div>
</template>
<script>
import { onMounted, reactive, ref, toRefs } from "_vue@3.2.20@vue";
import api from "../../apis/fetch";
import { useRoute } from "vue-router";
import _ from "lodash";
import router from "../../router";
import store from "../../store";
import { ElNotification } from "element-plus";
import PicTimelineVue from "../../components/PicTimeline.vue";

export default {
  components: {
    PicTimelineVue,
  },
  setup() {
    const route = useRoute();
    let map = ref();
    let voyage = ref({});
    let media = ref();
    let coordinates = ref();
    let previewSrcList = ref([]);

    async function getVoyageDetail() {
      let res = await api.getVoyageDetail({
        type: 2,
        voyageId: route.query.id,
      });

      coordinates.value = res.data.result.coordinates;
      voyage.value = res.data.result.voyage;
      media.value = [
        ...res.data.result.medias,
        ...res.data.result.medias,
        ...res.data.result.medias,
        ...res.data.result.medias,
        ...res.data.result.medias,
      ];

      for (let i of media.value) {
        previewSrcList.value.push(i.downloadUrl);
      }
      setShipMarker();
    }

    function initMap() {
      map.value = new AMap.Map("map-container", {
        zoom: 11, //级别
        center: [121.524761, 31.228721], //中心点坐标
      });
    }

    function setShipMarker(longitude = 121.524761, latitude = 31.228721) {
      var marker = new AMap.Marker({
        position: new AMap.LngLat(longitude, latitude),
        // offset: new AMap.Pixel(-10, -10),
        size: new AMap.Size(80, 80),
        icon: "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/ship-red-icon.png", // 添加 Icon 图标 URL
        title: "北京",
      });
      map.value.add(marker);
    }

    let disabledStatus = ref(true);
    let updateCache = {};
    function changeVoyageInfo() {
      updateCache = _.cloneDeep(voyage.value);
      disabledStatus.value = false;
    }
    function cancelVoyageChange() {
      voyage.value = updateCache;
      disabledStatus.value = true;
    }
    async function submitVoyageChange() {
      let {
        id,
        transStatus,
        loadStartTime,
        loadEndTime,
        dischargeStartTime,
        dischargeEndTime,
        actualDischargeTons,
        remark,
      } = voyage.value;
      let res = await api.updateVoyage({
        id,
        transStatus,
        loadStartTime,
        loadEndTime,
        dischargeStartTime,
        dischargeEndTime,
        actualDischargeTons,
        remark,
      });
      if (res.data.status == 0) {
        ElNotification({
          type: "success",
          title: res.data.msg,
        });
        disabledStatus.value = true;
      } else {
        ElNotification({
          type: "error",
          title: res.data.msg,
        });
        console.log(res);
      }
    }
    let options = ref([
      { value: 0, label: "请选择" },
      {
        value: 1,
        label: "航行",
      },
      {
        value: 2,
        label: "停泊",
      },
      {
        value: 3,
        label: "装货",
      },
      {
        value: 4,
        label: "运输中",
      },
      {
        value: 5,
        label: "卸货",
      },
    ]);

    async function finishVoyage() {
      if (!voyage.value.dischargeEndTime) return;
      let res = await api.finishVoyage({
        voyageId: route.query.id,
      });

      if (res.data.status == 0) {
        voyage.value.voyageStatus = 2;
        ElNotification({
          type: "success",
          title: res.data.msg,
        });
      } else {
        ElNotification({
          type: "error",
          title: res.data.msg,
        });
        console.log(res);
      }
    }
    let currentUrl = ref("");
    let videoModal = ref(false);
    function openVideoModal(url) {
      currentUrl.value = url;
      videoModal.value = true;
    }

    async function auditMedia(mediaId, a, index, mediaType) {
      console.log(mediaId, a, index, mediaType);
      let res = await api.auditMedia({
        mediaId,
        audit: a,
      });
      if (res.data.status == 0) {
        media.value[index].audit = a;
      }
      console.log(res);
    }

    onMounted(() => {
      initMap();
      getVoyageDetail();
    });
    return {
      options,
      voyage,
      coordinates,
      media,
      disabledStatus,
      changeVoyageInfo,
      cancelVoyageChange,
      submitVoyageChange,
      finishVoyage,
      openVideoModal,
      previewSrcList,
      router,
      auditMedia,
      currentUrl,
      videoModal,
    };
  },
};
</script>
<style scoped>
.map-container {
  width: 100%;
  height: 500px;
}

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

.media-box {
  width: 200px;
  height: 200px;
  margin-top: 20px;
}

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

.media-content {
  width: 100%;
  height: 600px;
  background: #f7f7f7;
  border-radius: 2px;
}

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

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

.s-line {
  position: absolute;
  left: 100px;
  top: 242px;
  height: 20px;
  border-left: 2px dashed;
  box-sizing: border-box;
  border-color: #97caf6;
}
.point {
  position: relative;
  left: 93px;
  top: 258px;
  width: 16px;
  height: 16px;
  background-image: url(../../images/blue-circle.png);
}

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

.bottom-box {
  top: 290px;
}
.top210px {
  top: 270px;
}

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

.media-box {
  width: 80px;
  height: 80px;
  margin-top: 10px;
}

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

.media-box {
  width: 100%;
  height: 100px;
  margin-top: 20px;
}

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

.el-checkbox {
  margin: 0;
}
</style>