轨迹优化

src/components/Map/YztMap/index.vue

@@ -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(['handleShowWarehouse', 'handleShowVideo', 'handleShowPeople', 'resize']);
+const emits = defineEmits(['handleShowWarehouse', 'handleShowVideo', 'handleShowPeople', 'closeDetailDialog', 'resize']);
 
 const mapRef = ref(null);
 const containerRef = ref();
@@ -116,7 +116,12 @@ const init = () => {
       // let drawTool = new DrawTool({ mapUtils, map });
       handleResize();
     },
-    onMarkerClick: (data) => {
+    onMarkerClick: (data, flag) => {
+      let title = titleList[data.dataType];
+      if (flag && !!title) {
+        data.title = title;
+        emits('closeDetailDialog', data);
+      }
       // 多点位
       if (data.type === '1') {
         getPointInfoList2({
@@ -160,7 +165,10 @@ const init = () => {
           content.appendChild(tableBox);
           let closeBtn = document.createElement('div');
           closeBtn.className = 'close';
-          closeBtn.onclick = () => mapUtils.hideInfo(true);
+          closeBtn.onclick = () => {
+            mapUtils.hideInfo(true);
+            emits('closeDetailDialog', data);
+          };
           content.appendChild(closeBtn);
           mapUtils.showInfo(content, [data.longitude, data.latitude], -data.scale * data.size[1], true);
         });
@@ -253,7 +261,10 @@ const handlePointDetails = (data) => {
       div.appendChild(table);
       let closeBtn = document.createElement('div');
       closeBtn.className = 'close';
-      closeBtn.onclick = () => mapUtils.hideInfo(true);
+      closeBtn.onclick = () => {
+        mapUtils.hideInfo(true);
+        emits('closeDetailDialog', data);
+      };
       div.appendChild(closeBtn);
       mapUtils.showInfo(div, [data.longitude, data.latitude], -data.scale * data.size[1], true);
     } else if (data.dataType === 'video') {

src/components/Map/index.vue

@@ -22,7 +22,7 @@ const { point_type } = toRefs<any>(proxy?.useDict('point_type'));
 const appStore = useAppStore();
 const mapStore = useMapStore();
 
-const emits = defineEmits(['handleShowVideo', 'handleShowWarehouse', 'handleShowPeople', 'handleShowVideoDetail', 'resize']);
+const emits = defineEmits(['handleShowVideo', 'handleShowWarehouse', 'handleShowPeople', 'handleShowVideoDetail', 'closeDetailDialog', 'resize']);
 const containerRef = ref();
 const width = ref('100%');
 const height = ref('100%');
@@ -60,7 +60,12 @@ const mapUtils = useAMap({
     drawTool.initMouseTool({ container: 'aMap', map, AMap });
     handleResize();
   },
-  onMarkerClick: (data) => {
+  onMarkerClick: (data, flag) => {
+    let title = titleList[data.dataType];
+    if (flag && !!title) {
+      data.title = title;
+      emits('closeDetailDialog', data);
+    }
     // 多点位
     if (data.type === '1') {
       getPointInfoList2({
@@ -107,7 +112,10 @@ const mapUtils = useAMap({
         content.appendChild(tableBox);
         let closeBtn = document.createElement('div');
         closeBtn.className = 'close';
-        closeBtn.onclick = hideInfo;
+        closeBtn.onclick = () => {
+          hideInfo(true);
+          emits('closeDetailDialog', data);
+        };
         content.appendChild(closeBtn);
         showInfo(content, [data.longitude, data.latitude], -data.size[1], true);
       });
@@ -202,7 +210,10 @@ const handlePointDetails = (data) => {
       div.appendChild(table);
       let closeBtn = document.createElement('div');
       closeBtn.className = 'close';
-      closeBtn.onclick = hideInfo;
+      closeBtn.onclick = () => {
+        hideInfo(true);
+        emits('closeDetailDialog', data);
+      };
       div.appendChild(closeBtn);
       showInfo(div, [data.longitude, data.latitude], -data.size[1], true);
     } else if (data.dataType === 'video') {

src/components/TimeAxis/index.vue

@@ -67,6 +67,7 @@ let isNewMarkerPause = false;
 let trackPathArr = [];
 const timelineItems = ref([]);
 const timeAxisState = reactive({
+  id: '',
   expand: false,
   type: '',
   format: 'YYYY-MM-DD HH:mm',
@@ -134,12 +135,15 @@ const changeSpeed = () => {
   timeAxisState.speed = timeAxisState.speed === 1 ? 2 : 1;
 };
 let activeName = ref('');
+let isDetail = ref(false);
 // 外部数据传入，开始播放
-const initDataToPlay = (obj) => {
+const initDataToPlay = (obj, flag) => {
   activeName.value = obj.name;
+  timeAxisState.id = obj.id;
   timeAxisState.type = obj.type;
   originalData = obj.data;
   timeAxisState.data = obj.data;
+  isDetail.value = !!flag;
   trackPathArr = [];
   timeAxisState.data.forEach((item) => {
     trackPathArr.push(item.lnglat);
@@ -539,13 +543,27 @@ const clearObj = () => {
   }
 };
 
-const clearData = () => {
-  if (activeName.value !== name) return;
+const clearData = (name, flag) => {
+  if ((!flag && activeName.value !== name) || (flag && flag != isDetail.value)) return;
   activeName.value = '';
+  isDetail.value = false;
+  timeAxisState.id = '';
   timeAxisState.playing = false;
   timeAxisState.data = [];
   clearObj();
 };
+// 切换地图，清空
+watch(
+  () => mapStore.isAMap,
+  () => {
+    activeName.value = '';
+    isDetail.value = false;
+    timeAxisState.id = '';
+    timeAxisState.playing = false;
+    timeAxisState.data = [];
+    clearObj();
+  }
+);
 
 onMounted(() => {
   getInitTime();

src/hooks/AMap/useAMap.ts

@@ -143,7 +143,7 @@ export function useAMap(options) {
     }
     addMarker([item], true);
     clickMarker = item;
-    options.onMarkerClick(item);
+    options.onMarkerClick(item, true);
   };
   // 添加多个点
   const addMarker = (points, notClean?: boolean) => {
@@ -324,7 +324,7 @@ export function useAMap(options) {
             }
           }
           clickMarker = e.target;
-          options.onMarkerClick(extData);
+          options.onMarkerClick(extData, true);
         });
         plotLayers['points2'].addOverlay(marker);
         addPoints.push(data);
@@ -411,11 +411,11 @@ export function useAMap(options) {
     infoWindow.on('mouseout', () => map.setStatus({ zoomEnable: true }));
   };
 
-  const hideInfo = (e?: any) => {
+  const hideInfo = (flag?: any) => {
     map.setStatus({ zoomEnable: true });
     if (!!infoWindow) {
       infoWindow.close();
-      if (!!clickMarker && e) {
+      if (!!clickMarker && flag) {
         const extData = clickMarker.getExtData ? clickMarker.getExtData() : clickMarker;
         for (let i = 0; i < addPoints.length; i++) {
           if (addPoints[i].id === extData.id) {

src/types/components.d.ts

@@ -27,12 +27,15 @@ declare module 'vue' {
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -50,18 +53,23 @@ declare module 'vue' {
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
+    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     ExcelEditor: typeof import('./../components/ExcelEditor/index.vue')['default']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']

src/utils/olMap/olMap.ts

@@ -188,7 +188,7 @@ export class olMap {
                 })
               })
             );
-            options.onMarkerClick(extData);
+            options.onMarkerClick(extData, true);
           }
         } else if (extData.type === '3') {
           // 聚合要素
@@ -781,7 +781,7 @@ export class olMap {
     }
     this.addMarker2({ 'search': item });
     this.clickMarker = item;
-    this.options.onMarkerClick(item);
+    this.options.onMarkerClick(item, true);
   }
   addMarker(points) {
     this.clearMarker();

src/views/globalMap/index.vue

@@ -9,6 +9,7 @@
         @handle-show-warehouse="handleShowWarehouse"
         @handle-show-people="handleShowPeople"
         @handle-show-track="handleShowTrack"
+        @close-detail-dialog="handleCloseDetailDialog"
         @resize="mapMoveEnd"
       />
       <YztMap
@@ -19,6 +20,7 @@
         @handle-show-warehouse="handleShowWarehouse"
         @handle-show-people="handleShowPeople"
         @handle-show-track="handleShowTrack"
+        @close-detail-dialog="handleCloseDetailDialog"
         @resize="mapMoveEnd"
       />
       <!--左侧菜单-->
@@ -211,7 +213,7 @@ const addMarkersMethod = debounce(
       }
       mapUtils.addMarker2(data);
     });
-    if (!mapStore.pointParams.option.includes('43') && addMarkersTimer) {
+    if (addMarkersTimer) {
       clearInterval(addMarkersTimer);
       addMarkersTimer = null;
     }
@@ -281,6 +283,10 @@ const clickMenu = (item, dataList) => {
   if (['手机工作台', '重点车辆', '移动指挥车', '机动无人机', '卫星电话'].includes(item.name) && !item.checked) {
     timeAxisRef.value.clearData(item.name);
   }
+  if (item.component == '43' && !item.checked && !mapStore.pointParams.option.includes('43') && addMarkersTimer) {
+    clearInterval(addMarkersTimer);
+    addMarkersTimer = null;
+  }
 };
 const handleHideCommunicationSupport = () => {
   communicationSupport.show = false;
@@ -469,17 +475,20 @@ const handleShowTrack = (data) => {
           lnglat: [item.lng, item.lat]
         });
       });
-      initDataToPlay({ type: 'track', data: trajectory });
+      initDataToPlay({ id: data.id, type: 'track', data: trajectory, name: data.title }, true);
     }
   });
 };
 // 传递数据给时间轴
-const initDataToPlay = (data) => {
+const initDataToPlay = (data, isDetail?: boolean) => {
   if (!!timeAxisRef.value) {
-    timeAxisRef.value.initDataToPlay(data);
+    timeAxisRef.value.initDataToPlay(data, isDetail);
   }
 };
-
+// 点位详情弹窗关闭后
+const handleCloseDetailDialog = (data) => {
+  timeAxisRef.value.clearData(data.title, true);
+};
 const mapMoveEnd = () => {
   if (!mapStore.pointParams.dict_value && !mapStore.pointParams.option) return;
   addMarkersMethod();