路网视频打点2

src/api/globalMap/spatialAnalysis.ts

@@ -466,3 +466,11 @@ export const getElderlyCareInstitutionsInfo = (id: string) => {
     }
   });
 };
+
+// 视频详情
+export const getVideoInfo = (video_code: string) => {
+  return request({
+    url: '/api/videoResource/location/video/' + video_code,
+    method: 'get'
+  });
+};

src/components/Map/YztMap/index.vue

@@ -31,7 +31,7 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { point_type } = toRefs<any>(proxy?.useDict('point_type'));
 const appStore = useAppStore();
 const mapStore = useMapStore();
-const emits = defineEmits(['selectGraphics', 'handleShowWarehouse', 'handleShowVideo', 'handleShowPeople']);
+const emits = defineEmits(['handleShowWarehouse', 'handleShowVideo', 'handleShowPeople', 'resize']);
 
 const mapRef = ref(null);
 const containerRef = ref();
@@ -258,6 +258,8 @@ const handlePointDetails = (data) => {
       closeBtn.onclick = () => mapUtils.hideInfo(true);
       div.appendChild(closeBtn);
       mapUtils.showInfo(div, [data.longitude, data.latitude], -data.scale * data.size[1], true);
+    } else if (data.dataType === 'video') {
+      emits('handleShowVideoDetail', res.data, true);
     }
   });
 };
@@ -323,6 +325,9 @@ const handleResize = () => {
   width.value = containerWidth + 'px';
   height.value = containerHeight + 'px';
   map.updateSize();
+  nextTick(() => {
+    emits('resize');
+  });
 };
 const getMap = () => {
   return map;

src/components/Map/data.ts

@@ -32,11 +32,13 @@ import {
   getPointInfoTransportationVideo,
   getVehicleInfo,
   getChildWelfareInstitutionsInfo,
-  getElderlyCareInstitutionsInfo
+  getElderlyCareInstitutionsInfo,
+  getVideoInfo
 } from '@/api/globalMap/spatialAnalysis';
 import { getRescueTeamsInfo } from '@/api/globalMap/rescueTeam';
 
 export const methodList = {
+  'video': getVideoInfo,
   '1': getEmergencyExpertDetails,
   '2': getWarehouseDetails,
   '3': getEmergencyShelterTypeDetails,
@@ -78,6 +80,7 @@ export const methodList = {
   '45': getElderlyCareInstitutionsInfo
 };
 export const titleList = {
+  'video': '视频',
   '1': '专家信息',
   '2': '物资与装备仓库信息',
   '3': '避难所信息',

src/components/Map/index.vue

@@ -24,6 +24,7 @@ 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';
+import { deepClone } from '@/utils';
 
 const containerScale = inject('containerScale');
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -31,15 +32,7 @@ const { point_type } = toRefs<any>(proxy?.useDict('point_type'));
 const appStore = useAppStore();
 const mapStore = useMapStore();
 
-const emits = defineEmits([
-  'selectGraphics',
-  'unSelectGraphics',
-  'showTextEditBox',
-  'onDrawCompleted',
-  'handleShowVideo',
-  'handleShowWarehouse',
-  'handleShowPeople'
-]);
+const emits = defineEmits(['handleShowVideo', 'handleShowWarehouse', 'handleShowPeople', 'handleShowVideoDetail', 'resize']);
 const containerRef = ref();
 const width = ref('100%');
 const height = ref('100%');
@@ -118,7 +111,11 @@ const mapUtils = useAMap({
           div.innerHTML =
             '<div class="td4">' + getDictLabel(point_type.value, item.dataType.toString()) + '</div><div class="td4">' + item.name + '</div>';
           div.addEventListener('click', () => {
-            handlePointDetails(item);
+            const newItem = deepClone(item);
+            if (newItem.dataType === 'video') {
+              newItem.id = newItem.gbIndexCode;
+            }
+            handlePointDetails(newItem);
           });
           table.appendChild(div);
         });
@@ -222,6 +219,8 @@ const handlePointDetails = (data) => {
       closeBtn.onclick = hideInfo;
       div.appendChild(closeBtn);
       showInfo(div, [data.longitude, data.latitude], -data.size[1], true);
+    } else if (data.dataType === 'video') {
+      emits('handleShowVideoDetail', res.data, true);
     }
   });
 };
@@ -315,6 +314,9 @@ const handleResize = () => {
   width.value = containerWidth + 'px';
   height.value = containerHeight + 'px';
   map.resize();
+  nextTick(() => {
+    emits('resize');
+  });
 };
 
 watch(

src/views/globalMap/RightMenu/RoadNetworkVideo.vue

@@ -66,7 +66,7 @@ import { getRoadVideoList } from '@/api/globalMap/roadNetworkVideo';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { district_type } = toRefs<any>(proxy?.useDict('district_type'));
-const showDetail = inject('showDetail');
+const handleShowVideo2 = inject('handleShowVideo2');
 const queryParams = reactive({
   current: 1,
   size: 10,
@@ -89,14 +89,7 @@ const options = reactive([
 const listData = ref([]);
 
 const handleShowDialog = (row) => {
-  showDetail(
-    {
-      id: row.video_code,
-      lng: row.longitude,
-      lat: row.latitude
-    },
-    'video'
-  );
+  handleShowVideo2(row);
 };
 const initData = () => {
   getRoadVideoList(queryParams).then((res) => {

src/views/globalMap/index.vue

@@ -5,17 +5,21 @@
         v-if="mapStore.isAMap"
         ref="mapRef"
         @handle-show-video="handleShowVideo"
+        @handle-show-video-detail="handleShowVideo2"
         @handle-show-warehouse="handleShowWarehouse"
         @handle-show-people="handleShowPeople"
         @handle-show-track="handleShowTrack"
+        @resize="mapMoveEnd"
       />
       <YztMap
         v-else-if="!!mapStore.activeMap"
         ref="map2Ref"
         @handle-show-video="handleShowVideo"
+        @handle-show-video-detail="handleShowVideo2"
         @handle-show-warehouse="handleShowWarehouse"
         @handle-show-people="handleShowPeople"
         @handle-show-track="handleShowTrack"
+        @resize="mapMoveEnd"
       />
       <!--左侧菜单-->
       <LeftMenu
@@ -44,6 +48,8 @@
       <CommunicationSupport v-if="communicationSupport.show" @close="handleHideCommunicationSupport" />
       <!--应急人员详情-->
       <EmergencyCrew v-if="showPeople" :id="teamId" v-model="showPeople" />
+      <!--视频详情-->
+      <VideoDialog v-if="showVideoDetail" v-model="showVideoDetail" :videoMonitorData="videoDetail" />
     </div>
   </div>
 </template>
@@ -180,6 +186,7 @@ const addMarkersMethod = debounce(
     }
     getPointInfo2(queryParams).then((res) => {
       const data = res.data ? res.data : [];
+      // 通用详情
       if (!!detailsData.value.id) {
         data.forEach((item) => {
           if (item.id === detailsData.value.id) {
@@ -190,6 +197,12 @@ const addMarkersMethod = debounce(
           id: '',
           dataType: ''
         };
+      } else if (showVideoDetail.value && videoDetail.value) {
+        data.forEach((item) => {
+          if (item.id === videoDetail.value.id) {
+            item.isHover = true;
+          }
+        });
       }
       mapUtils.addMarker2(data);
     });
@@ -375,6 +388,17 @@ const handleShowVideo = (data) => {
   location.value = [data.longitude, data.latitude];
   showNearbyVideos.value = true;
 };
+const showVideoDetail = ref(false);
+const videoDetail = ref({});
+const handleShowVideo2 = (data, flag) => {
+  const newMap = mapStore.isAMap ? map : map.getView();
+  if (!flag) {
+    newMap.setCenter([data.longitude, data.latitude]);
+    newMap.setZoom(18);
+  }
+  videoDetail.value = data;
+  showVideoDetail.value = true;
+};
 const handleClickMap = (e) => {
   if (mapStore.isAMap) {
     location.value = [e.lnglat.lng, e.lnglat.lat];
@@ -486,7 +510,7 @@ watch(
   (lnglat) => {
     if (lnglat && lnglat.length == 2) {
       const newMap = mapStore.isAMap ? map : map.getView();
-      debugger
+      newMap.setCenter(lnglat);
       mapUtils.setAddress({
         longitude: lnglat[0],
         latitude: lnglat[1],
@@ -553,6 +577,7 @@ provide('showDetail', showDetail);
 provide('getDrawTool', getDrawTool);
 provide('getPlaceSearch', getPlaceSearch);
 provide('initDataToPlay', initDataToPlay);
+provide('handleShowVideo2', handleShowVideo2);
 </script>
 
 <style lang="scss" scoped>