新增 航次图片时间轴

src/views/shipManage/shipDetail.vue

@@ -9,6 +9,51 @@
     </div>
   </div>
   <ShipInfo :shipInfos="shipInfos"></ShipInfo>
+  <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>
+        </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";
@@ -21,6 +66,9 @@ import { useRoute } from "vue-router";
 import _ from "lodash";
 const route = useRoute();
 let shipInfos = ref([{}]);
+let medias = ref([]);
+let mediaCoors = ref([]);
+let shipCoors = ref([]);
 async function getShipDetail(shipCode) {
   let { data } = await api.getShipDetail({ shipCode });
   for (const i of data.result.shipCerts) {
@@ -30,11 +78,164 @@ async function getShipDetail(shipCode) {
     }
   }
   data.result.disabled = true;
-
+  medias.value = data.result.medias;
+  mediaCoors.value = data.result.mediaCoors;
+  shipCoors.value = data.result.shipCoors;
   shipInfos.value = [data.result];
 }
+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;
+}
 onMounted(() => {
   getShipDetail(route.query.shipCode);
 });
 </script>
-<style scoped></style>
+<style scoped>
+.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);
+}
+
+.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;
+}
+</style>