Merge remote-tracking branch 'origin/dev' into dev

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

@@ -20,7 +20,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';
 
@@ -29,7 +29,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();
@@ -256,6 +256,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);
     }
   });
 };
@@ -314,6 +316,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

@@ -22,18 +22,23 @@ import {
   getEmergencyTransportResourcesDetails,
   getEmergencyDisasterInfoOfficerDetails,
   getMidmapDzzhDetails,
+  getVehicleDetails,
   getMDPUnitDetails,
   getWaterList,
   getVideoDrowning,
   getVideoForestFire,
   getVideoDisasterPrevention,
+  getVideoTraffic,
+  getPointInfoTransportationVideo,
   getVehicleInfo,
   getChildWelfareInstitutionsInfo,
-  getElderlyCareInstitutionsInfo
+  getElderlyCareInstitutionsInfo,
+  getVideoInfo
 } from '@/api/globalMap/spatialAnalysis';
-import { getPointInfoTransportationVideo, getRescueTeamsInfo } from '@/api/globalMap/rescueTeam';
+import { getRescueTeamsInfo } from '@/api/globalMap/rescueTeam';
 
 export const methodList = {
+  'video': getVideoInfo,
   '1': getEmergencyExpertDetails,
   '2': getWarehouseDetails,
   '3': getEmergencyShelterTypeDetails,
@@ -67,6 +72,7 @@ export const methodList = {
   '32': getVideoDrowning,
   '33': getVideoForestFire,
   '34': getVideoDisasterPrevention,
+  '35': getVideoTraffic,
   '41': getRescueTeamsInfo,
   '42': getPointInfoTransportationVideo,
   '43': getVehicleInfo,
@@ -74,6 +80,7 @@ export const methodList = {
   '45': getElderlyCareInstitutionsInfo
 };
 export const titleList = {
+  'video': '视频',
   '1': '专家信息',
   '2': '物资与装备仓库信息',
   '3': '避难所信息',
@@ -108,6 +115,7 @@ export const titleList = {
   '32': '防溺水',
   '33': '森防视频',
   '34': '防灾救援',
+  '35': '交通视频',
   '41': '救援队伍',
   '42': '交通局视频',
   '43': '重点车辆',

src/components/Map/index.vue

@@ -14,6 +14,7 @@ import { pointDetailTemplate } from '@/views/globalMap/data/mapData';
 import useAppStore from '@/store/modules/app';
 import useMapStore from '@/store/modules/map';
 import mmJson from '@/assets/json/mm2.json';
+import { deepClone } from '@/utils';
 
 const containerScale = inject('containerScale');
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -21,15 +22,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%');
@@ -108,7 +101,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);
         });
@@ -215,6 +212,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);
     }
   });
 };
@@ -298,6 +297,9 @@ const handleResize = () => {
   width.value = containerWidth + 'px';
   height.value = containerHeight + 'px';
   map.resize();
+  nextTick(() => {
+    emits('resize');
+  });
 };
 watch(
   () => appStore.showLeftSection,

src/views/globalMap/RightMenu/RoadNetworkVideo.vue

@@ -49,11 +49,14 @@
         </div>
       </div>
     </div>
-    <Dialog v-if="showDialog" v-model="showDialog" type="md" title="路网视频" height="720px" draggable hide-footer>
-      <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
-        <HKVideo :dot_data="videoMonitorData" />
-      </div>
-    </Dialog>
+    <pagination
+      v-show="total > 0"
+      v-model:page="queryParams.current"
+      v-model:limit="queryParams.size"
+      :total="total"
+      layout="total, prev, pager, next"
+      @pagination="initData"
+    />
   </div>
 </template>
 
@@ -63,6 +66,7 @@ import { getRoadVideoList } from '@/api/globalMap/roadNetworkVideo';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { district_type } = toRefs<any>(proxy?.useDict('district_type'));
+const handleShowVideo2 = inject('handleShowVideo2');
 const queryParams = reactive({
   current: 1,
   size: 10,
@@ -84,14 +88,8 @@ const options = reactive([
 ]);
 const listData = ref([]);
 
-let showDialog = ref(false);
-let videoMonitorData = ref({});
 const handleShowDialog = (row) => {
-  showDialog.value = false;
-  nextTick(() => {
-    videoMonitorData.value = row;
-    showDialog.value = true;
-  });
+  handleShowVideo2(row);
 };
 const initData = () => {
   getRoadVideoList(queryParams).then((res) => {
@@ -131,7 +129,7 @@ initData();
 .custom-table {
   width: 550px;
   .table-content {
-    height: 290px;
+    height: 250px;
     overflow-y: auto;
     overflow-x: hidden;
   }
@@ -247,4 +245,42 @@ initData();
   display: flex;
   align-items: center;
 }
+
+.pagination-container {
+  height: 64px;
+  margin: 8px 0 0 0;
+}
+
+:deep(.el-pagination__total) {
+  color: #a7ccdf !important;
+}
+:deep(.el-pagination) {
+  .btn-next,
+  .btn-prev {
+    background-color: transparent !important;
+    border: none !important;
+    .el-icon {
+      color: #a7ccdf !important;
+    }
+  }
+  .btn-prev:disabled,
+  .btn-next:disabled {
+    background-color: transparent !important;
+    border: none !important;
+  }
+  .el-pager li {
+    text-align: center;
+    color: #a7ccdf !important;
+    background-color: #0e3064 !important;
+    border: 1px solid #0c57a7 !important;
+    &:hover {
+      background-color: #038dff !important;
+      border: 1px solid #038dff !important;
+    }
+  }
+  .el-pager li.is-active {
+    background-color: #038dff !important;
+    border: 1px solid #038dff !important;
+  }
+}
 </style>

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" v-model="showPeople" :id="teamId" />
+      <!--视频详情-->
+      <VideoDialog v-if="showVideoDetail" v-model="showVideoDetail" :videoMonitorData="videoDetail" />
     </div>
   </div>
 </template>
@@ -181,10 +187,17 @@ 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) {
             item.isHover = true;
+          } else if (showVideoDetail.value && videoDetail.value) {
+            data.forEach((item) => {
+              if (item.id === videoDetail.value.id) {
+                item.isHover = true;
+              }
+            });
           }
         });
         detailsData.value = {
@@ -311,6 +324,7 @@ let detailsData = ref({
   id: '',
   dataType: ''
 });
+//  显示打点详情
 const showDetail = (data, dataType) => {
   const domRef = mapStore.isAMap ? mapRef.value : map2Ref.value;
   if (!!domRef) {
@@ -376,6 +390,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];
@@ -488,7 +513,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],
@@ -554,6 +579,7 @@ provide('showDetail', showDetail);
 provide('getDrawTool', getDrawTool);
 provide('getPlaceSearch', getPlaceSearch);
 provide('initDataToPlay', initDataToPlay);
+provide('handleShowVideo2', handleShowVideo2);
 </script>
 
 <style lang="scss" scoped>