|
|
@@ -213,88 +213,76 @@
|
|
|
></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="media-content df ffw"
|
|
|
- style="
|
|
|
- width: 100%;
|
|
|
- background: #f7f7f7;
|
|
|
- border-radius: 2px;
|
|
|
- padding-top: 20px;
|
|
|
- "
|
|
|
- >
|
|
|
- <el-card
|
|
|
- style="
|
|
|
- width: 240px;
|
|
|
- height: 360px;
|
|
|
- margin-left: 20px;
|
|
|
- margin-bottom: 15px;
|
|
|
- "
|
|
|
- v-for="(item, index) in media"
|
|
|
- :key="item"
|
|
|
- shadow="hover"
|
|
|
- >
|
|
|
- <div class="card-note">
|
|
|
- {{ item.userName }} 拍摄于
|
|
|
- <br />
|
|
|
- {{ item.createTime }}
|
|
|
+ <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.userName }} 拍摄于
|
|
|
+ <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>
|
|
|
- <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>
|
|
|
+ <el-dialog
|
|
|
+ v-model="videoModal"
|
|
|
+ title="视频审核"
|
|
|
+ width="20%"
|
|
|
+ :before-close="videoClose"
|
|
|
+ >
|
|
|
<video
|
|
|
+ autoplay
|
|
|
+ controls
|
|
|
style="width: 100%; height: 100%"
|
|
|
- v-else
|
|
|
- :src="item.downloadUrl"
|
|
|
+ :src="currentUrl"
|
|
|
></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>
|
|
|
- </el-card>
|
|
|
-
|
|
|
- <el-dialog
|
|
|
- v-model="videoModal"
|
|
|
- title="视频审核"
|
|
|
- width="30%"
|
|
|
- :before-close="videoClose"
|
|
|
- >
|
|
|
- <video
|
|
|
- autoplay
|
|
|
- controls
|
|
|
- style="width: 100%; height: 100%"
|
|
|
- :src="currentUrl"
|
|
|
- ></video>
|
|
|
- </el-dialog>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="df aic jcfe mt20" v-if="voyage.voyageStatus == 1">
|
|
|
<el-button v-if="disabledStatus" type="primary" @click="changeVoyageInfo">
|
|
|
@@ -324,9 +312,14 @@ 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();
|
|
|
@@ -344,6 +337,7 @@ export default {
|
|
|
coordinates.value = res.data.result.coordinates;
|
|
|
voyage.value = res.data.result.voyage;
|
|
|
media.value = res.data.result.medias;
|
|
|
+
|
|
|
for (let i of media.value) {
|
|
|
previewSrcList.value.push(i.downloadUrl);
|
|
|
}
|
|
|
@@ -520,6 +514,104 @@ export default {
|
|
|
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: 200px;
|
|
|
height: 50px;
|
