JiangYunPhotosCargoOwner_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 df aic jcsb">
    <div>船舶信息</div>
    <el-button
      style="width: 220px; margin-right: 20px"
      type="primary"
      @click="downloadExcel"
      :loading="isLoadingExcel"
    >
      下载船舶跟踪表
    </el-button>
  </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-date-picker
          class="info-line-text"
          v-model="voyage.arrivalLoadPortTime"
          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-input
          class="info-line-text"
          v-model="voyage.actualDischargeTons"
          :disabled="disabledStatus"
          placeholder="实装吨位"
        ></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.setSailTime"
          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.expectedArrivalTime"
          type="datetime"
          format="YYYY/MM/DD"
          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.actualArrivalTime"
          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.arrivalPortTime"
          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-text"
          placeholder="实际卸货吨位"
          v-model="voyage.actualDischargeTons"
          :disabled="disabledStatus"
        ></el-input>
      </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>
  <div class="container-title df aic jcsb">
    <div>卸货记录</div>
    <el-button
      @click="exportDischargeExcel"
      style="width: 220px; margin-right: 20px"
      type="primary"
      :loading="isDischargeLoadingExcel"
      >下载卸货信息</el-button
    >
  </div>
  <div class="line-container-p24">
    <el-card
      style="
        width: 800px;
        margin-left: 40px;
        margin-top: 50px;
        margin-bottom: 40px;
      "
    >
      <el-table :data="dischargeList" stripe>
        <el-table-column
          type="index"
          label="序号"
          min-width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="dischargeTons"
          label="卸货吨位"
          min-width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="dischargeTime"
          label="卸货时间"
          min-width="120"
          align="center"
        ></el-table-column>
        <el-table-column label="磅单" min-width="150" align="center">
          <template v-slot="scope">
            <el-image
              v-if="scope.row.viewUrl"
              style="width: 50px; height: 50px"
              :src="scope.row.viewUrl"
              fit="contain"
              :preview-src-list="previewPoundList"
            ></el-image>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog v-model="dialogVisible" title="图片预览" width="30%">
        <el-image
          :src="dialogImageUrl"
          style="height: 100%; width: 100%"
        ></el-image>
      </el-dialog>
      <div style="width: 100%; text-align: right; margin-top: 43px">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="pageChange"
        ></el-pagination>
      </div>
    </el-card>
  </div>
  <div class="container-title">保险单列表</div>
  <div class="line-container-p24" style="padding-left: 60px">
    <el-image
      style="width: 200px; height: 200px; margin-right: 20px"
      :src="item.viewUrl"
      v-for="item in policyList"
      :key="item"
      @click="openMediaModal(item.viewUrl, 1, '保险单查看')"
    ></el-image>
  </div>
  <div class="container-title">运单列表</div>
  <div class="line-container-p24" style="padding-left: 60px">
    <el-image
      style="width: 200px; height: 200px; margin-right: 20px"
      :src="item.viewUrl"
      v-for="item in voyageBill"
      :key="item"
      @click="openMediaModal(item.viewUrl, 1, '运单查看')"
    ></el-image>
  </div>
  <div class="container-title">航次图片</div>
  <div class="line-container-p24">
    <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',
              item.status == 1 ? 'now-box' : '',
            ]"
          >
            <div class="card-note">
              {{ item.shipName }} 拍摄于
              <br />
              {{ item.createTime }}
            </div>
            <div class="medias-box" style="position: relative">
              <el-image
                v-if="item.mediaType == 1"
                style="width: 100%; height: 100%"
                fit="contain"
                :src="item.downloadUrl"
                :preview-src-list="modalPreview"
                @click="openMediaModal(item.downloadUrl, 1, '图片审核')"
              ></el-image>
              <video
                style="width: 100%; height: 100%"
                v-else
                :src="item.downloadUrl"
              ></video>
              <img
                @click="openMediaModal(item.downloadUrl, 2, '视频审核')"
                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>
          <div
            :class="[
              's-line',
              index % 2 == 0 ? '' : 'top210px',
              item.status == 1 ? 'now-s-line' : '',
            ]"
          ></div>
          <div :class="['point', item.status == 1 ? '' : 'now-point']"></div>
          <div
            :class="['l-line', item.status == 1 ? 'now-l-line' : '']"
            v-if="index + 1 != medias.length"
          ></div>
        </div>
      </div>
    </div>
    <el-dialog v-model="mediaModal" :title="modalTitle" width="20%">
      <el-image
        v-if="modalType == 1"
        style="width: 100%; height: 100%"
        fit="contain"
        :src="currentUrl"
        :preview-src-list="modalPreview"
      ></el-image>
      <video
        v-else
        autoplay
        controls
        style="width: 100%; height: 100%"
        :src="currentUrl"
      ></video>
    </el-dialog>
  </div>
</template>
<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import api from "../../apis/fetch";
import { useRoute } from "vue-router";
import _ from "lodash";
import router from "../../router";
import store from "../../store";
import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
import downloadBlobFile from "../../utils/downloadBlobFile";
import url from "../../apis/config";

export default {
  setup() {
    const route = useRoute();
    let map = ref();
    let voyage = ref({});
    let medias = ref([]);
    let coordinates = ref();
    let previewSrcList = ref([]);
    let policyList = ref([]);
    let previewPoundList = ref([]);

    async function getVoyageDetail(type) {
      let res = await api.getVoyageDetail({
        type: localStorage.userType,
        voyageId: route.query.id,
      });
      if (res.data.status == 0) {
        if (type) {
          ElNotification({
            type: "success",
            title: res.data.msg,
          });
        }

        coordinates.value = res.data.result.coordinates;
        voyage.value = res.data.result.voyage;
        medias.value = res.data.result.medias;
        for (let i of res.data.result.policys || []) {
          policyList.value.push({
            ...i,
            url: i.viewUrl,
          });
        }
        for (let i of res.data.result.waybills) {
          voyageBill.value.push({
            ...i,
            url: i.viewUrl,
          });
        }
        for (let i of medias.value) {
          previewSrcList.value.push(i.downloadUrl);
        }
        initMap();
      } else {
        console.log(res);
        ElNotification({
          type: "error",
          title: res.data.msg,
        });
      }
    }
    let total = ref(0);
    function pageChange(e) {
      dischargeCurrentPage.value = e;
      getDischargeList();
    }
    async function addDischarge() {
      if (!formInline.value.dischargeTime || !formInline.value.dischargeTons)
        return;
      let res = await api.addDischarge({
        ...formInline.value,
        voyageId: route.query.id,
      });
      if (res.data.status == 0) {
        getDischargeList(1);
        formInline.value = {};
      } else {
        console.log(res);
      }
    }
    async function deleteDischarge(id, index) {
      let res = await api.deleteDischarge({
        id,
      });
      if (res.data.status == 0) {
        dischargeList.value.splice(index, 1);
        ElNotification({
          type: "success",
          title: res.data.msg,
        });
      } else {
        console.log(res);
        ElNotification({
          type: "error",
          title: res.data.msg,
        });
      }
    }
    async function exportExcel() {}
    let dischargeCurrentPage = ref(1);
    let dischargeList = ref();
    let formInline = ref({});
    async function getDischargeList(type) {
      let res = await api.getDischargeList({
        voyageId: route.query.id,
        currentPage: dischargeCurrentPage.value,
        size: 10,
      });
      if (res.data.status == 0) {
        dischargeList.value = res.data.result;
        for (let i of dischargeList.value) {
          if (i.viewUrl) {
            previewPoundList.value.push(i.viewUrl);
          }
        }
        total.value = res.data.total;
      } else {
        console.log(res);
      }
    }
    let updateForm = ref({});
    let updateDischargeDialog = ref(false);
    let currentUpdateIndex = ref(-1);
    async function updateDischarge() {
      let res = await api.updateDischarge({
        ...updateForm.value,
      });

      if (res.data.status == 0) {
        dischargeList.value[currentUpdateIndex.value] = res.data.result;
        cancelUpdateDischarge();
        ElNotification({
          type: "success",
          title: res.data.msg,
        });
      } else {
        console.log(res);
        ElNotification({
          type: "error",
          title: res.data.msg,
        });
      }
    }
    function showUpdateDischarge(item, index) {
      updateDischargeDialog.value = true;
      updateForm.value = {
        ...item,
      };
      delete updateForm.value.createTime;
      delete updateForm.value.voyageId;
      currentUpdateIndex.value = index;
    }
    function cancelUpdateDischarge() {
      updateDischargeDialog.value = false;
      updateForm.value = {};
      currentUpdateIndex.value = -1;
    }
    function initMap() {
      map.value = new AMap.Map("map-container", {
        zoom: 11, //级别
        center: [120.563757, 31.891174], //中心点坐标
        mapStyle: "amap://styles/f48d96805f5fa7f5aada657c5ee37017",
      });
      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);
      return;
      let markers = [];
      for (let i of medias.value) {
        let content = `<div style='width:160px'>
        ${
          i.audit == -1
            ? `<img id='img${i.id}' style='width:160px;height:160px;object-fit:contain;' src='${i.viewUrl}'/>`
            : ``
        }
        <img src='https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/ship-red-icon.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(-75, i.audit == 1 ? -195 : -30),
        });
        if (i.audit == 1) {
          marker.on("click", () => {
            openMediaModal(i.viewUrl, 1, "航次图片", i);
          });
        }

        markers.push(marker);
      }

      let overlayGroups = new AMap.OverlayGroup(markers);
      map.value.on("complete", function () {
        let t = setTimeout(() => {
          map.value.add(overlayGroups);
          map.value.setFitView(markers, true, [200, 50, 0, 0], 18);
          clearTimeout(t);
        }, 2000);
      });
    }

    function setShipMarker(longitude = 121.524761, latitude = 31.228721) {
      map.value.setCenter([longitude, latitude]);
      var marker = new AMap.Marker({
        position: new AMap.LngLat(longitude, latitude),
        offset: new AMap.Pixel(-20, -20),
        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 mediaModal = ref(false);
    let modalType = ref(1);
    let modalTitle = ref();
    let modalPreview = ref([]);
    function openMediaModal(url, type, title) {
      console.log(url, type, title);
      modalPreview.value = [url];
      modalTitle.value = title;
      modalType.value = type;
      currentUrl.value = url;
      mediaModal.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) {
        medias.value[index].audit = a;
        ElNotification({
          type: "success",
          title: res.data.msg,
        });
      } else {
        console.log(res);
      }
    }
    let dialogImageUrl = ref();
    let dialogVisible = ref(false);
    function handlePictureCardPreview(file) {
      dialogVisible.value = true;
      dialogImageUrl.value = file.url;
    }

    async function handleRemoveBill(file, list) {
      let cache = _.cloneDeep(voyageBill.value);
      console.log(cache);
      ElMessageBox.confirm("确认删除运单?", "Warning", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let { id } = file;
          let res = await api.deleteWaybill({
            id,
          });
          if (res.data.status == 0) {
            ElMessage({
              message: "删除成功!",
              type: "success",
            });
            voyageBill.value = list;
          }
        })
        .catch(() => {
          voyageBill.value = cache;
          ElMessage({
            type: "info",
            message: "取消删除",
          });
        });
    }
    let voyageBill = ref([]);

    function billUploadSuccess(response, file, list) {
      list[list.length - 1] = {
        ...response.result,
        url: response.result.viewUrl,
      };
      console.log(list);
      voyageBill.value = list;
    }

    let billParams = ref({
      voyageId: route.query.id,
    });

    async function calExpectedArrivalTime() {
      let res = await api.calExpectedArrivalTime({
        voyageId: route.query.id,
        setSailTime: voyage.value.setSailTime,
      });
      if (res.data.status == 0) {
        voyage.value.expectedArrivalTime = res.data.result;
      }
    }
    let isLoadingExcel = ref(false);
    async function downloadExcel() {
      isLoadingExcel.value = true;
      let res = await downloadBlobFile(
        `${url.baseurl}/voyage/exportExcel`,
        { voyageId: route.query.id },
        "船舶跟踪表",
        "post"
      );
      if (res) {
        isLoadingExcel.value = false;
      }
    }
    let isDischargeLoadingExcel = ref(false);
    async function exportDischargeExcel() {
      isDischargeLoadingExcel.value = true;
      let res = await downloadBlobFile(
        `${url.baseurl}/voyage/exportDischargeExcel`,
        { voyageId: route.query.id },
        "卸货记录表",
        "post"
      );
      if (res) {
        isDischargeLoadingExcel.value = false;
      }
    }
    onMounted(() => {
      getVoyageDetail(1);
      getDischargeList(1);
    });
    return {
      downloadExcel,
      isLoadingExcel,
      options,
      voyage,
      coordinates,
      medias,
      disabledStatus,
      changeVoyageInfo,
      cancelVoyageChange,
      submitVoyageChange,
      finishVoyage,
      openMediaModal,
      previewSrcList,
      router,
      auditMedia,
      modalType,
      modalTitle,
      currentUrl,
      mediaModal,
      modalPreview,
      addDischarge,
      deleteDischarge,
      exportExcel,
      dischargeCurrentPage,
      dischargeList,
      getDischargeList,
      updateDischarge,
      total,
      pageChange,
      formInline,
      updateDischargeDialog,
      showUpdateDischarge,
      cancelUpdateDischarge,
      updateForm,
      dialogImageUrl,
      dialogVisible,
      handlePictureCardPreview,
      handleRemoveBill,
      voyageBill,
      billUploadSuccess,
      billParams,
      calExpectedArrivalTime,
      policyList,
      previewPoundList,
      isDischargeLoadingExcel,
      exportDischargeExcel,
    };
  },
};
</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;
}

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

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

.medias-content {
  width: 100%;
  height: 600px;
  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: 240px;
  width: var(--box-width);
  border: 5px solid #dddddd;
  transition: all 0.5s;
  background: #fff;
  z-index: 10;
}

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

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

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

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

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

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

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

.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);
}
</style>