视频监控 对接来源接口、样式调整

src/api/videoMonitor/index.ts

@@ -150,3 +150,11 @@ export function setVideoTag(data: PointParams) {
     data: data
   });
 }
+
+// 视频来源列表
+export function getVideoFromList() {
+  return request({
+    url: '/api/videoResource/videoinfo/video_from',
+    method: 'get'
+  });
+}

src/components/Dialog/index.vue

@@ -1,7 +1,12 @@
 <template>
   <div
     v-if="modelValue || customShow"
-    v-drag="{ draggable: draggable, position: 'fixed', scale: containerScale, handle: headerType === 'header2' ? '.dialog-header2' : '.dialog-header' }"
+    v-drag="{
+      draggable: draggable,
+      position: 'fixed',
+      scale: containerScale,
+      handle: headerType === 'header2' ? '.dialog-header2' : '.dialog-header'
+    }"
     class="common-dialog"
     :style="{ width: computedWidth, height: computedHeight, zIndex: zIndex }"
   >
@@ -239,10 +244,12 @@ onMounted(() => {
     .dialog-title {
       width: auto;
       max-width: 1900px;
+      margin-bottom: 20px;
     }
     .tags {
       display: flex;
       align-items: center;
+      margin-bottom: 20px;
       .tag {
         width: 345px;
         height: 71px;
@@ -294,7 +301,6 @@ onMounted(() => {
         background-size: 100% 100%;
       }
     }
-
   }
   .el-form-item__label {
     font-size: 38px;

src/components/HKVideo/index2.vue

@@ -362,5 +362,16 @@ defineExpose({
   color: #ffffffb3;
   font-size: 36px;
   background-color: rgba(0, 0, 0, 0.4);
+  .label {
+    width: 100px;
+    flex-shrink: 0;
+  }
+  .tags {
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    text-align: right;
+  }
 }
 </style>

src/components/Map/YztMap/index.vue

@@ -22,7 +22,7 @@ import { olMap } from '@/utils/olMap/olMap';
 import { getPointInfoList2 } from '@/api/globalMap';
 import { getDictLabel } from '@/utils/dict';
 import { methodList, titleList } from '../data';
-import { iconList, pointDetailTemplate } from '@/views/globalMap/data/mapData';
+import { pointDetailTemplate } from '@/views/globalMap/data/mapData';
 import useAppStore from '@/store/modules/app';
 import useMapStore from '@/store/modules/map';
 

src/components/Map/index.vue

@@ -20,7 +20,7 @@ import { useDrawTool } from '@/hooks/AMap/useDrawTool';
 import { getPointInfoList2 } from '@/api/globalMap';
 import { getDictLabel } from '@/utils/dict';
 import { methodList, titleList } from './data';
-import { iconList, pointDetailTemplate } from '@/views/globalMap/data/mapData';
+import { pointDetailTemplate } from '@/views/globalMap/data/mapData';
 import useAppStore from '@/store/modules/app';
 import mmJson from '@/assets/json/mm2.json';
 import useMapStore from '@/store/modules/map';

src/components/VideoTagEdit/index.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts" setup name="VideoTagEdit">
-import { addVideoTag, setVideoTag } from '@/api/videoMonitor';
+import { setVideoTag } from '@/api/videoMonitor';
 import { showSuccessMsg } from '@/utils/notification';
 import { getDicts } from '@/api/system/dict/data';
 

src/views/emergencyCommandMap/LeftSection/VideoMonitor.vue

@@ -4,11 +4,11 @@
     <div class="more-btn" @click="showVideoMonitorList">查看更多</div>
     <div class="card-content video-list">
       <div v-for="(item, index) in listData" :key="index" class="video-box">
-        <HKVideo :dot_data="item" autoplay @change="(data, index2) => updateData(data, index2)" />
+        <HKVideo :dot_data="item" autoplay @change="(data) => updateData(item, data)" />
       </div>
     </div>
   </div>
-  <VideoMonitorEdit v-if="showListDialog" v-model="showListDialog" :lngLat="lngLat" />
+  <VideoMonitorEdit v-if="showListDialog" v-model="showListDialog" :lngLat="lngLat" @change="initData" />
 </template>
 
 <script lang="ts" setup name="VideoMonitor">
@@ -38,8 +38,13 @@ const initData = () => {
     listData.value = res.data;
   });
 };
-const updateData = (data, index) => {
-  console.log(data, index, 'sdakfhasdkjfhskjdfhdskjh');
+const updateData = (item, data) => {
+  let labels = [];
+  data.forEach((item) => {
+    labels.push(item.dict_label);
+  });
+  item.tag = data;
+  item.tagLabels = labels.toString();
 };
 initData();
 

src/views/emergencyCommandMap/LeftSection/VideoMonitorEdit.vue

@@ -23,7 +23,8 @@
               :teleported="false"
               style="width: 450px; margin-left: 20px"
             >
-<!--              <el-option v-for="item in district_type2" :key="item.value" :label="item.label" :value="item.value" />-->
+              <el-option label="全部" value="" />
+              <el-option v-for="item in videoFromList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
             </el-select>
           </el-form-item>
           <el-form-item label="实景视频" prop="video_tag" label-width="180px">
@@ -76,7 +77,7 @@
               <span class="label">{{ item.name }}</span>
             </div>
           </div>
-          <HKVideo v-else :dot_data="item" autoplay :is-index="item.isUserVideos" />
+          <HKVideo v-else :dot_data="item" autoplay :is-index="item.isUserVideos" @change="(data) => handleUpdateTags(item, data)" />
         </div>
       </div>
     </div>
@@ -97,7 +98,7 @@
 </template>
 
 <script lang="ts" setup>
-import { getUserVideoPoints, getVideoListNew, updateUserVideoPoints } from '@/api/videoMonitor';
+import { getUserVideoPoints, getVideoFromList, getVideoListNew, updateUserVideoPoints } from '@/api/videoMonitor';
 import { deepClone } from '@/utils';
 import useAppStore from '@/store/modules/app';
 import useMapStore from '@/store/modules/map';
@@ -119,7 +120,7 @@ const props = defineProps({
   }
 });
 const mapStore = useMapStore();
-const emits = defineEmits(['update:modelValue']);
+const emits = defineEmits(['update:modelValue', 'change']);
 const proxy = getCurrentInstance()?.proxy;
 const { district_type2, video_type } = toRefs<any>(proxy?.useDict('district_type2', 'video_type'));
 //查看更多数据
@@ -135,6 +136,7 @@ const queryParams = reactive({
 });
 let total = ref(0);
 let editVideo = ref(false);
+let videoFromList = ref([]);
 // 选中的视频
 let editData = ref([]);
 let dialogListData = ref([]);
@@ -220,10 +222,22 @@ const handleSave = () => {
     handleCancel();
   });
 };
-
+// 更新tag
+const handleUpdateTags = (item, data) => {
+  let labels = [];
+  data.forEach((item) => {
+    labels.push(item.dict_label);
+  });
+  item.tag = data;
+  item.tagLabels = labels.toString();
+  emits('change');
+};
 onMounted(() => {
   getList();
   getVideoInfoList();
+  getVideoFromList().then((res) => {
+    videoFromList.value = res.rows;
+  });
 });
 </script>