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

src/api/videoMonitor/index.ts

@@ -108,7 +108,7 @@ export function getVideoList(params) {
 }
 
 // 视频打点
-export function getLocationVideos(params: LocationVideosParams) {
+export function getLocationVideos(params: PointParams) {
   return request({
     url: '/api/videoResource/location/videos',
     method: 'get',
@@ -134,10 +134,19 @@ export function getTagList(params) {
 }
 
 // 视频标签打点
-export function setVideoTag(data: PointParams) {
+export function setVideoTag(data) {
   return request({
     url: '/api/videoResource/tag/labeling_video_tag',
     method: 'post',
     data: data
   });
 }
+
+
+// 视频来源列表
+export function getVideoFromList() {
+  return request({
+    url: '/api/videoResource/videoinfo/video_from',
+    method: 'get'
+  });
+}

src/components/Dialog/index.vue

@@ -247,13 +247,16 @@ onMounted(() => {
     display: flex;
     .dialog-title {
       width: auto;
+      max-width: 450px;
+      margin-bottom: 10px;
     }
     .header-left {
       position: relative;
+      max-width: 915px;
       &::before {
         content: '';
         position: absolute;
-        bottom: 6px;
+        bottom: -9px;
         left: 0;
         width: 47px;
         height: 20px;
@@ -263,7 +266,7 @@ onMounted(() => {
       &::after {
         content: '';
         position: absolute;
-        bottom: 15px;
+        bottom: 0;
         left: 52px;
         width: calc(100% - 47px);
         height: 2px;
@@ -274,7 +277,7 @@ onMounted(() => {
     .tags {
       display: flex;
       align-items: center;
-      margin-top: -18px;
+      margin-bottom: 10px;
       .tag {
         width: 126px;
         height: 26px;

src/components/HKVideo/index2.vue

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

src/components/HKVideo/video-dialog.vue

@@ -6,6 +6,7 @@
     :title="videoMonitorData.name ? videoMonitorData.name : '视频'"
     :get-tag-id="isNoLive ? '' : videoMonitorData.video_code"
     hide-footer
+    height="500px"
     draggable
     @changeTagsData="changeTagsData"
   >

src/types/components.d.ts

@@ -51,6 +51,7 @@ declare module 'vue' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']

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,9 +38,14 @@ 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();
 
 const showVideoMonitorList = () => {

src/views/emergencyCommandMap/LeftSection/VideoMonitorEdit.vue

@@ -23,7 +23,8 @@
               :teleported="false"
               style="width: 150px; margin-left: 10px"
             >
-<!--              <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="70px">
@@ -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([]);
@@ -222,10 +224,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>