视频监控优化

src/api/globalMap/KeyVehicles.ts

@@ -12,12 +12,10 @@ export const getVehicleList = (data) => {
 // 轨迹信息
 export const getVehicleTrajectory = (vehicle_no) => {
   return request({
-    url: '/api/gateway/v2/get_vehicle_trajectory',
+    url: '/api/gateway/v1/get_vehicle_trajectory',
     method: 'post',
     data: {
-      query: {
-        vehicle_no: vehicle_no
-      }
+      vehicle_no: vehicle_no
     }
   });
 };

src/components/Map/index.vue

@@ -183,36 +183,33 @@ const handlePointDetails = (data) => {
       titleDom.className = 'title-box';
       titleDom.innerHTML = '<div class="gradient-text">' + title + '</div></div>';
       div.appendChild(titleDom);
-      if (data.dataType === 2) {
-        let btnBox = document.createElement('div');
-        let btn = document.createElement('div');
-        btnBox.className = 'flex';
-        btn.className = 'btn';
-        btn.innerHTML = '<div class="video-icon"></div><div>物资详情</div>';
-        btn.onclick = () => {
-          emits('handleShowWarehouse', data);
-        };
-        btnBox.appendChild(btn);
-        div.appendChild(btnBox);
-      } else if (data.dataType === 4) {
-        let btnBox = document.createElement('div');
-        let btn = document.createElement('div');
-        btnBox.className = 'flex';
-        btn.className = 'btn';
-        btn.innerHTML = '<div class="video-icon"></div><div>附近视频</div>';
-        btn.onclick = () => {
-          emits('handleShowVideo', data);
+      if ([2, 4, 41, 43].includes(data.dataType)) {
+        const objs = {
+          '2': {
+            title: '物资详情',
+            method: 'handleShowWarehouse'
+          },
+          '4': {
+            title: '附近视频',
+            method: 'handleShowVideo'
+          },
+          '41': {
+            title: '人员列表',
+            method: 'handleShowPeople'
+          },
+          '43': {
+            title: '历史轨迹',
+            method: 'handleShowTrack'
+          }
         };
-        btnBox.appendChild(btn);
-        div.appendChild(btnBox);
-      } else if (data.dataType === 41) {
+        const obj = objs[data.dataType];
         let btnBox = document.createElement('div');
         let btn = document.createElement('div');
         btnBox.className = 'flex';
         btn.className = 'btn';
-        btn.innerHTML = '<div class="video-icon"></div><div>人员列表</div>';
+        btn.innerHTML = '<div class="video-icon"></div>' + obj.title + '<div></div>';
         btn.onclick = () => {
-          emits('handleShowPeople', data);
+          emits(obj.method, data);
         };
         btnBox.appendChild(btn);
         div.appendChild(btnBox);
@@ -261,6 +258,9 @@ const handlePointDetails = (data) => {
   });
 };
 const filterTd = (obj, dataType) => {
+  if (!obj) {
+    return [];
+  }
   let data = [];
   let tempData = {};
   let i = 0;

src/directive/common/drag.ts

@@ -8,7 +8,7 @@ export default {
       return;
     }
     let scaleMethod = scale;
-    if (dragHandle) {
+    if (!scaleMethod) {
       scaleMethod = () => {
         return { scaleX: 1, scaleY: 1 };
       };

src/store/modules/map.ts

@@ -0,0 +1,20 @@
+export const useMapStore = defineStore('map', () => {
+  const map = ref(null);
+  const mapUtils = ref();
+
+  const trackState = reactive({
+    show: false,
+    data: []
+  });
+  // 轨迹
+  const setTrackState = (data: any) => {
+    trackState.data = data;
+    trackState.show = true;
+  };
+  return {
+    trackState,
+    setTrackState
+  };
+});
+
+export default useMapStore;

src/views/emergencyCommandMap/LeftSection/VideoMonitorEdit.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog customShow type="xl" title="视频监控" class="dialog" hide-footer @close="reset">
+  <Dialog custom-show type="xl" title="视频监控" class="dialog" hide-footer draggable @close="reset">
     <div class="search-box">
       <div class="box-left">
         <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="180px" label-position="left">
@@ -13,7 +13,6 @@
               popper-class="custom-select-popper"
               :teleported="false"
               placeholder="全部"
-              @change="handleQuery"
               style="width: 450px"
             >
               <el-option label="全部" value="" />
@@ -78,6 +77,7 @@
 import { getEmergencyVideoCata, getUserVideoPoints, updateUserVideoPoints } from '@/api/videoMonitor';
 import { deepClone } from '@/utils';
 import useAppStore from '@/store/modules/app';
+import useMapStore from '@/store/modules/map';
 interface LngLat {
   longitude: number;
   latitude: number;
@@ -93,6 +93,7 @@ const props = defineProps({
     type: Object as () => LngLat
   }
 });
+const mapStore = useMapStore();
 const emits = defineEmits(['update:modelValue']);
 const proxy = getCurrentInstance()?.proxy;
 const { video_type } = toRefs<any>(proxy?.useDict('video_type'));
@@ -108,7 +109,6 @@ const queryParams = reactive({
 let total = ref(0);
 let editVideo = ref(false);
 // 选中的视频
-let selectData = ref([]);
 let editData = ref([]);
 let dialogListData = ref([]);
 let showTip = ref(false);
@@ -124,11 +124,7 @@ watch(
   },
   { immediate: true }
 );
-
-const getList = async () => {
-  await getUserVideoPoints().then((res) => {
-    selectData.value = res.data.videoInfos;
-  });
+const getList = () => {
   let newParams = {
     latitude: props.lngLat.latitude,
     longitude: props.lngLat.longitude,
@@ -142,17 +138,26 @@ const getList = async () => {
     newParams.query.dict_value = queryParams.dict_value;
   }
   getEmergencyVideoCata(newParams).then((res) => {
-    selectData.value.forEach((item) => {
-      for (let i = 0; i < res.rows.length; i++) {
-        if (item.video_code_int === res.rows[i].video_code) {
-          res.rows[i].sort = true;
-          break;
-        }
-      }
-    });
     dialogListData.value = res.rows;
     total.value = res.total;
+    if (editVideo.value && editData.value) {
+      filterData(editData.value);
+    }
   });
+  // 模拟分类数据
+  if (!!queryParams.dict_value) {
+    const data = [
+      {
+        "name": "桂NC0227",
+        "id": "桂NC0227",
+        "dataType": 43,
+        "longitude": "110.35366599999999",
+        "latitude": "22.030815999999998",
+        "type": "2"
+      }
+    ];
+    mapStore.setTrackState(data);
+  }
 };
 const selectItem = (item) => {
   if (editVideo.value) {
@@ -188,11 +193,23 @@ const resetQuery = () => {
   queryFormRef.value?.resetFields();
   handleQuery();
 };
-
 // 开启编辑视频
 const activeEdit = () => {
-  editData.value = deepClone(selectData.value);
-  editVideo.value = true;
+  getUserVideoPoints().then((res) => {
+    filterData(res.data.videoInfos);
+    editData.value = deepClone(res.data.videoInfos);
+    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 = () => {

src/views/globalMap/RightMenu/KeyVehicles.vue

@@ -103,7 +103,6 @@ const handleTrack = (item) => {
       });
     });
     initDataToPlay({ type: 'track', data: trajectory });
-    // handleShowDialog(trajectory);
   });
 };
 //调用函数

src/views/globalMap/index.vue

@@ -11,6 +11,7 @@
         @handle-show-video="handleShowVideo"
         @handle-show-warehouse="handleShowWarehouse"
         @handle-show-people="handleShowPeople"
+        @handle-show-track="handleShowTrack"
       />
       <Map
         v-else
@@ -21,6 +22,7 @@
         @handle-show-video="handleShowVideo"
         @handle-show-warehouse="handleShowWarehouse"
         @handle-show-people="handleShowPeople"
+        @handle-show-track="handleShowTrack"
       />
       <!--左侧菜单-->
       <LeftMenu
@@ -62,11 +64,15 @@ import DrawTools from '@/views/globalMap/RightMenu/DrawTools.vue';
 import CommunicationSupport from '@/views/globalMap/RightMenu/CommunicationSupport.vue';
 import GridPointRainfall from '@/views/globalMap/RightMenu/GridPointRainfall.vue';
 import EmergencyCrew from '@/views/globalMap/RightMenu/EmergencyCrew.vue';
+import { getVehicleTrajectory } from '@/api/globalMap/KeyVehicles';
+import { parseTime } from '@/utils/ruoyi';
+import useMapStore from '@/store/modules/map';
 
 const AMapType = ['vectorgraph', 'satellite'];
 const YMapType = ['satellite2', 'satellite3', 'imageMap', 'imageMap2'];
 const rightMenuRef = ref(null);
 const mapData = reactive(logicalData);
+const mapStore = useMapStore();
 let map;
 let mapRef = ref(null);
 let map2Ref = ref(null);
@@ -119,36 +125,40 @@ const addMarkers = (item) => {
     addMarkersMethod();
   }
 };
+const adjustPoint = (data) => {
+  data.forEach((item2) => {
+    // 获取图标
+    if (iconList[item2.dataType]) {
+      item2.icon = iconList[item2.dataType].image;
+      item2.image = iconList[item2.dataType].image;
+      item2.imageHover = iconList[item2.dataType].imageHover;
+      item2.size = iconList[item2.dataType].size;
+    } else {
+      item2.icon = iconList['common'].image;
+      item2.image = iconList['common'].image;
+      item2.imageHover = iconList['common'].imageHover;
+      item2.size = iconList['common'].size;
+    }
+    if (item2.materia_name) {
+      item2.name = item2.materia_name;
+    }
+    if (item2.dataType === 43) {
+      item2.showName = true;
+    }
+    item2.lnglat = [item2.longitude, item2.latitude];
+  });
+  return data;
+};
+
 const addMarkersMethod = () => {
-  const dom = ['satellite2', 'satellite3', 'imageMap', 'imageMap2'].includes(activeMap.value) ? map2Ref.value : mapRef.value;
+  const dom = YMapType.includes(activeMap.value) ? map2Ref.value : mapRef.value;
   const path = [];
   pointType.value.forEach((item) => {
     path.push(item.component);
   });
   getPointInfo(path.toString()).then((res) => {
     const data = res.data && res.data.list ? res.data?.list : [];
-    markerList.value = data;
-    data.forEach((item2) => {
-      // 获取图标
-      if (iconList[item2.dataType]) {
-        item2.icon = iconList[item2.dataType].image;
-        item2.image = iconList[item2.dataType].image;
-        item2.imageHover = iconList[item2.dataType].imageHover;
-        item2.size = iconList[item2.dataType].size;
-      } else {
-        item2.icon = iconList['common'].image;
-        item2.image = iconList['common'].image;
-        item2.imageHover = iconList['common'].imageHover;
-        item2.size = iconList['common'].size;
-      }
-      if (item2.materia_name) {
-        item2.name = item2.materia_name;
-      }
-      if (item2.dataType === 43) {
-        item2.showName = true;
-      }
-      item2.lnglat = [item2.longitude, item2.latitude];
-    });
+    markerList.value = adjustPoint(data);
     dom?.addMarker(data);
   });
   if (addMarkersTimer) {
@@ -156,7 +166,7 @@ const addMarkersMethod = () => {
     addMarkersTimer = null;
   }
   if (path.includes('43')) {
-    addMarkersTimer = setInterval(addMarkersMethod, 10 * 1000);
+    addMarkersTimer = setInterval(addMarkersMethod, 60 * 1000);
   }
 };
 // 跳转指定地点
@@ -388,9 +398,35 @@ const handleShowPeople = (data) => {
   showPeople.value = true;
 };
 
+watch(
+  () => mapStore.trackState.show,
+  (show) => {
+    if (!!show) {
+      const dom = YMapType.includes(activeMap.value) ? map2Ref.value : mapRef.value;
+      dom?.addMarker(adjustPoint(mapStore.trackState.data));
+      mapStore.trackState.data = [];
+      mapStore.trackState.show = false;
+    }
+  }
+);
+const handleShowTrack = (data) => {
+  getVehicleTrajectory(data.id).then((res) => {
+    const trajectory = [];
+    if (res.data && res.data.list) {
+      res.data.list.forEach((item) => {
+        trajectory.push({
+          time: !!item.gpsDate ? parseTime(item.gpsDate, '{h}:{i}') : '',
+          lnglat: [item.lng, item.lat]
+        });
+      });
+      // console.log(data, res.data.list);
+      initDataToPlay({ type: 'track', data: trajectory });
+    }
+  });
+};
 // 传递数据给时间轴
 const initDataToPlay = (data) => {
-  if (!!tempMenu.value) {
+  if (!!timeAxisRef.value) {
     timeAxisRef.value.initDataToPlay(data);
   }
 };
@@ -406,6 +442,10 @@ onBeforeUnmount(() => {
       map.un('click', handleClickMap);
     }
   }
+  if (!!addMarkersTimer) {
+    clearInterval(addMarkersTimer);
+    addMarkersTimer = null;
+  }
 });
 
 provide('getMapUtils', getMapUtils);