视频接口对接

src/api/videoMonitor/index.ts

@@ -9,6 +9,14 @@ export function getEmergencyVideoCata(data) {
   });
 }
 
+// 获取视频监控列表 新
+export function getVideoListNew(params) {
+  return request({
+    url: '/api/videoResource/videoinfo/get_video_list_new',
+    method: 'get',
+    params: params
+  });
+}
 // 获取视频地址
 export function getVideoUrlById(id: string) {
   return request({

src/components/HKVideo/index2.vue

@@ -22,7 +22,7 @@
       <div class="video-header">
         <div class="label" :title="dot_data.name">{{ dot_data.name }}</div>
         <div class="video-header-right">
-          <i v-if="hiddenCollect" :class="tags && tags.length > 0 ? 'collectFill' : 'collect'" @click.stop="handleCollect" />
+          <i v-if="hiddenCollect" :class="dot_data.isTag ? 'collectFill' : 'collect'" @click.stop="handleCollect" />
           <img class="video-enlarge" src="@/assets/images/video/enlarge.png" alt="" @click.stop="handleFullScreen" />
         </div>
       </div>
@@ -40,9 +40,7 @@
       <div class="video-footer">
         <div class="label">{{ props.isIndex ? '首页' : '' }}</div>
         <div class="tags">
-          <div v-for="(item, index) in tags" :key="item.dict_value" class="tag">
-            {{ item.dict_label }}<template v-if="index < tags.length - 1">、</template>
-          </div>
+          {{ dot_data.tagLabels }}
         </div>
       </div>
     </div>
@@ -72,11 +70,13 @@ interface Tag {
 interface DotData {
   id: string;
   video_code: string;
-  tags?: Tag[];
+  tag?: Tag[];
   name?: string;
   status?: string;
   poster?: string;
   collect?: boolean;
+  isTag?: boolean;
+  tagLabels?: string;
 }
 interface Props {
   dot_data: DotData;
@@ -111,9 +111,6 @@ watch(
     posterVisible.value = true;
     errBKVisible.value = false;
     isPlaying.value = false;
-    if (props.dot_data.tags) {
-      tags.value = props.dot_data.tags;
-    }
     nextTick(() => {
       if (props.autoplay) {
         play_now(true);
@@ -147,9 +144,6 @@ let showFullScreenDialog = ref(false);
 const handleFullScreen = () => {
   showFullScreenDialog.value = true;
 };
-const changeTagsData = () => {
-  emits('change');
-};
 // 开始播放
 const play_now = async (check?: boolean) => {
   if (!props.dot_data || (props.dot_data && !props.dot_data.video_code)) {

src/views/emergencyCommandMap/LeftSection/VideoMonitor.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts" setup name="VideoMonitor">
-import { getVideoListByUser } from '@/api/videoMonitor';
+import { getVideoListNew } from '@/api/videoMonitor';
 import VideoMonitorEdit from './VideoMonitorEdit.vue';
 import HKVideo from '@/components/HKVideo/index2.vue';
 
@@ -29,13 +29,13 @@ let lngLat = reactive({
 const initData = () => {
   lngLat.longitude = props.longitude ? props.longitude : 110.925176;
   lngLat.latitude = props.latitude ? props.latitude : 21.678993;
-  getVideoListByUser({
+  getVideoListNew({
     longitude: lngLat.longitude,
     latitude: lngLat.latitude,
     page: 1,
     pageSize: 4
   }).then((res) => {
-    listData.value = res.rows;
+    listData.value = res.data;
   });
 };
 const updateData = (data, index) => {

src/views/emergencyCommandMap/LeftSection/VideoMonitorEdit.vue

@@ -3,41 +3,32 @@
     <div class="search-box">
       <div class="box-left">
         <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-position="left">
-          <el-form-item label="区划" prop="area" label-width="30px">
+          <el-form-item label="区划" prop="area_code" label-width="30px">
             <el-select
-              v-model="treeData.area"
+              v-model="queryParams.area_code"
               class="custom-select"
               popper-class="custom-select-popper"
               :teleported="false"
               style="width: 150px; margin-left: 10px"
-              @change="handleAreaChange"
             >
-              <el-option v-for="item in treeData.areaList" :key="item.id" :label="item.label" :value="item.id" />
-            </el-select>
-            <el-select
-              v-model="treeData.town"
-              class="custom-select"
-              popper-class="custom-select-popper"
-              :teleported="false"
-              style="width: 150px; margin-left: 10px"
-              @change="handleTownChange"
-            >
-              <el-option v-for="item in treeData.townList" :key="item.id" :label="item.label" :value="item.id" />
+              <el-option label="茂名市" value="" />
+              <el-option v-for="item in district_type2" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
+          </el-form-item>
+          <el-form-item label="视频来源" prop="video_from" label-width="70px">
             <el-select
-              v-model="treeData.village"
+              v-model="queryParams.video_from"
               class="custom-select"
               popper-class="custom-select-popper"
               :teleported="false"
               style="width: 150px; margin-left: 10px"
-              @change="handleVillageChange"
             >
-              <el-option v-for="item in treeData.villageList" :key="item.id" :label="item.label" :value="item.id" />
+<!--              <el-option v-for="item in district_type2" :key="item.value" :label="item.label" :value="item.value" />-->
             </el-select>
           </el-form-item>
-          <el-form-item label="实景视频" prop="dict_value" label-width="70px">
+          <el-form-item label="实景视频" prop="video_tag" label-width="70px">
             <el-select
-              v-model="queryParams.dict_value"
+              v-model="queryParams.video_tag"
               class="custom-select"
               popper-class="custom-select-popper"
               :teleported="false"
@@ -46,8 +37,8 @@
               <el-option v-for="item in video_type" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
-          <el-form-item prop="name">
-            <el-input v-model="queryParams.name" class="custom-input2" placeholder="请输入摄像头名称" style="width: 313px" />
+          <el-form-item prop="video_name">
+            <el-input v-model="queryParams.video_name" class="custom-input2" placeholder="请输入摄像头名称" style="width: 313px" />
           </el-form-item>
           <el-form-item style="margin-right: 0">
             <div class="common-btn-primary" @click="handleQuery">搜索</div>
@@ -78,27 +69,27 @@
       <div v-for="(item, index) in dialogListData" :key="index" class="video-box" @click="selectItem(item)">
         <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center">
           <div v-if="editVideo">
-            <div v-if="getCheckStatus(item.video_code)" class="active-tag"></div>
-            <div :class="getCheckStatus(item.video_code) ? 'common-checked-active' : 'common-checked'"></div>
-            <div class="img"></div>
+            <div v-if="item.isUserVideos" class="active-tag" />
+            <div :class="item.isUserVideos ? 'common-checked-active' : 'common-checked'" />
+            <div class="img" />
             <div class="video-label">
               <span class="label">{{ item.name }}</span>
             </div>
           </div>
-          <HKVideo v-else :dot_data="item" autoplay :is-index="item.sort" />
+          <HKVideo v-else :dot_data="item" autoplay :is-index="item.isUserVideos" />
         </div>
       </div>
     </div>
     <div class="footer">
       <pagination
-        v-show="total > queryParams.size"
-        v-model:page="queryParams.current"
-        v-model:limit="queryParams.size"
+        v-show="total > queryParams.pageSize"
+        v-model:page="queryParams.page"
+        v-model:limit="queryParams.pageSize"
         :total="total"
         layout="total, prev, pager, next"
         @pagination="getList"
       />
-      <div v-if="total === 0" style="width: 100%; text-align: center; font-size: 38px; font-weight: bold">暂无数据</div>
+      <div v-if="total === 0" style="width: 100%; text-align: center; font-size: 16px; font-weight: bold">暂无数据</div>
     </div>
     <div id="container" style="display: none"></div>
   </Dialog>
@@ -106,12 +97,11 @@
 </template>
 
 <script lang="ts" setup>
-import { getEmergencyVideoCata, getUserVideoPoints, getVideoList, updateUserVideoPoints } from '@/api/videoMonitor';
+import { getUserVideoPoints, getVideoListNew, updateUserVideoPoints } from '@/api/videoMonitor';
 import { deepClone } from '@/utils';
 import useAppStore from '@/store/modules/app';
 import useMapStore from '@/store/modules/map';
 import HKVideo from '@/components/HKVideo/index2.vue';
-import { getRegionalTree } from '@/api/PreventionResponsible';
 
 interface LngLat {
   longitude: number;
@@ -131,24 +121,18 @@ const props = defineProps({
 const mapStore = useMapStore();
 const emits = defineEmits(['update:modelValue']);
 const proxy = getCurrentInstance()?.proxy;
-const { video_type } = toRefs<any>(proxy?.useDict('video_type'));
+const { district_type2, video_type } = toRefs<any>(proxy?.useDict('district_type2', 'video_type'));
 
 //查看更多数据
 const queryFormRef = ref();
-const treeData = reactive({
-  area: '',
-  town: '',
-  village: '',
-  areaList: [],
-  townList: [],
-  villageList: []
-});
+
 const queryParams = reactive({
-  current: 1,
-  size: 8,
-  dict_value: '',
-  name: '',
-  area: ''
+  area_code: '',
+  video_from: '',
+  video_tag: '573204ca-e814-11ef-a825-fa163e4bf12e',
+  video_name: '',
+  page: 1,
+  pageSize: 8
 });
 let total = ref(0);
 let editVideo = ref(false);
@@ -173,32 +157,18 @@ const getList = (flag?: boolean) => {
   let newParams = {
     latitude: props.lngLat.latitude,
     longitude: props.lngLat.longitude,
-    current: queryParams.current,
-    size: queryParams.size,
-    query: {
-      name: queryParams.name
-    }
+    ...queryParams
   };
-  if (!!queryParams.dict_value) {
-    newParams.query.dict_value = queryParams.dict_value;
-  }
-  getEmergencyVideoCata(newParams).then((res) => {
-    dialogListData.value = res.rows;
+  getVideoListNew(newParams).then((res) => {
+    dialogListData.value = res.data;
     total.value = res.total;
     getUserVideoPoints().then((res2) => {
-      filterData(res2.data.videoInfos);
       editData.value = deepClone(res2.data.videoInfos);
     });
   });
 };
 const getVideoInfoList = () => {
-  mapStore.setVideoPointParams({
-    flag: true,
-    dict_value: queryParams.dict_value
-  });
-  getVideoList(queryParams).then((res) => {
-    mapStore.setTrackState(res.data);
-  });
+  // mapStore.setPointParams(queryParams.video_tag);
 };
 const selectItem = (item) => {
   if (editVideo.value) {
@@ -222,20 +192,15 @@ const reset = () => {
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
-  queryParams.current = 1;
+  queryParams.page = 1;
   getList();
-  // getVideoInfoList();
+  getVideoInfoList();
 };
 
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value?.resetFields();
-  treeData.area = '';
-  treeData.townList = [];
-  treeData.town = '';
-  treeData.villageList = [];
-  treeData.village = '';
-  queryParams.current = 1;
+  queryParams.page = 1;
   handleQuery();
 };
 
@@ -243,16 +208,6 @@ const resetQuery = () => {
 const activeEdit = () => {
   editVideo.value = true;
 };
-const filterData = (data) => {
-  data.forEach((item) => {
-    for (let i = 0; i < dialogListData.value.length; i++) {
-      if (item.video_code_int === dialogListData.value[i].video_code) {
-        dialogListData.value[i].sort = true;
-        break;
-      }
-    }
-  });
-};
 // 关闭编辑
 const handleCancel = () => {
   editVideo.value = false;
@@ -268,43 +223,10 @@ const handleSave = () => {
     handleCancel();
   });
 };
-// 区变化
-const handleAreaChange = () => {
-  getAreaTreeList('townList', treeData.area);
-  treeData.town = '';
-  treeData.village = '';
-  queryParams.area = treeData.area;
-};
-// 镇变化
-const handleTownChange = () => {
-  getAreaTreeList('villageList', treeData.town);
-  treeData.village = '';
-  queryParams.area = treeData.town;
-};
-// 村变化
-const handleVillageChange = () => {
-  queryParams.area = treeData.village;
-};
-// 获取区划树
-const getAreaTreeList = (datasource, id) => {
-  getRegionalTree(id).then((res) => {
-    treeData[datasource] = res.data;
-  });
-};
-const getCheckStatus = (id) => {
-  let flag = false;
-  for (let i = 0; i < editData.value.length; i++) {
-    if (editData.value[i].video_code_int === id) {
-      flag = true;
-      break;
-    }
-  }
-  return flag;
-};
+
 onMounted(() => {
   getList();
-  getAreaTreeList('areaList', 2);
-  // getVideoInfoList();
+  getVideoInfoList();
 });
 </script>