|
|
@@ -1,5 +1,16 @@
|
|
|
<template>
|
|
|
- <Dialog custom-show type="xl" title="视频监控" class="dialog" hide-footer draggable showFull @changeFull="handleFull" @close="reset">
|
|
|
+ <Dialog
|
|
|
+ v-if="!showVideos"
|
|
|
+ custom-show
|
|
|
+ type="xl"
|
|
|
+ title="视频监控"
|
|
|
+ class="dialog"
|
|
|
+ hide-footer
|
|
|
+ draggable
|
|
|
+ showFull
|
|
|
+ @changeFull="handleFull"
|
|
|
+ @close="reset"
|
|
|
+ >
|
|
|
<div class="flex-box">
|
|
|
<div class="search-box">
|
|
|
<div class="box-left">
|
|
|
@@ -50,6 +61,9 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="display: flex; justify-content: flex-end; margin-bottom: 12px; margin-top: -20px">
|
|
|
+ <div v-show="!editVideo && selectVideos.length > 0" class="common-btn-primary2 edit-icon" style="margin-right: 10px" @click="handleShowFull">
|
|
|
+ 播放选择视频
|
|
|
+ </div>
|
|
|
<div v-show="!editVideo" class="common-btn-primary2 edit-icon" @click="activeEdit">编辑首页视频</div>
|
|
|
<div v-show="editVideo" class="edit-box">
|
|
|
<div class="flex">
|
|
|
@@ -84,7 +98,17 @@
|
|
|
<span class="label">{{ item.name }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <HKVideo v-else :dot_data="item" autoplay fullScreen :is-index="item.isUserVideos" @change="(data) => handleUpdateTags(item, data)" />
|
|
|
+ <HKVideo
|
|
|
+ v-else
|
|
|
+ :dot_data="item"
|
|
|
+ autoplay
|
|
|
+ fullScreen
|
|
|
+ :add="!getSelectStatus(item)"
|
|
|
+ :remove="getSelectStatus(item)"
|
|
|
+ :is-index="item.isUserVideos"
|
|
|
+ @change="(data) => handleUpdateTags(item, data)"
|
|
|
+ @change-select="handleSelect"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -101,7 +125,9 @@
|
|
|
</div>
|
|
|
<div id="container" style="display: none"></div>
|
|
|
</div>
|
|
|
+ <SelectVideoDialog v-if="showSelectVideoDialog && !showVideos" v-model:data="selectVideos" @close="showSelectVideoDialog = false" />
|
|
|
</Dialog>
|
|
|
+ <FullVideos v-if="showVideos" :data="selectVideos" @close="showVideos = false" />
|
|
|
<div v-if="showTip" class="danger-tip" :style="{ zIndex: zIndex }">首页视频数量已达6个上限，如需继续操作请先取消已选择视频。</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -110,6 +136,8 @@ import { getUserVideoPoints, getVideoFromList, getVideoListNew, updateUserVideoP
|
|
|
import useAppStore from '@/store/modules/app';
|
|
|
import useMapStore from '@/store/modules/map';
|
|
|
import HKVideo from '@/components/HKVideo/index2.vue';
|
|
|
+import FullVideos from './FullVideos.vue';
|
|
|
+import SelectVideoDialog from './SelectVideoDialog.vue';
|
|
|
|
|
|
interface LngLat {
|
|
|
longitude: number;
|
|
|
@@ -255,11 +283,44 @@ const handleUpdateTags = (item, data) => {
|
|
|
item.tagLabels = labels.toString();
|
|
|
emits('change');
|
|
|
};
|
|
|
+// 选择的视频
|
|
|
+const showSelectVideoDialog = ref(false);
|
|
|
+const selectVideos = ref([]);
|
|
|
+const showVideos = ref(false);
|
|
|
+const getSelectStatus = (obj) => {
|
|
|
+ const index = selectVideos.value.findIndex((item) => item.video_code === obj.video_code);
|
|
|
+ return index > -1;
|
|
|
+};
|
|
|
+const handleSelect = (obj) => {
|
|
|
+ if (obj.type === 'add') {
|
|
|
+ if (selectVideos.value.length >= 8) {
|
|
|
+ proxy?.$modal.msgError('选择视频数量已达8个上限，如需继续操作请先取消已选择视频。');
|
|
|
+ } else {
|
|
|
+ selectVideos.value.push(obj.data);
|
|
|
+ }
|
|
|
+ if (!showSelectVideoDialog.value) {
|
|
|
+ showSelectVideoDialog.value = true;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ const index = selectVideos.value.findIndex((item) => item.video_code === obj.data.video_code);
|
|
|
+ if (index > -1) {
|
|
|
+ selectVideos.value.splice(index, 1);
|
|
|
+ }
|
|
|
+ if (selectVideos.value.length === 0) {
|
|
|
+ showSelectVideoDialog.value = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
const getUserPoint = () => {
|
|
|
getUserVideoPoints().then((res) => {
|
|
|
editData.value = res.data.videoInfos;
|
|
|
});
|
|
|
};
|
|
|
+
|
|
|
+//
|
|
|
+const handleShowFull = () => {
|
|
|
+ showVideos.value = true;
|
|
|
+};
|
|
|
const videoParams = ref({
|
|
|
width: '288px',
|
|
|
height: '200px',
|
