不显示围栏弹窗

web/src/api/gas/handdetector/index.ts

@@ -40,7 +40,7 @@ export interface HandDetectorData extends HandDetector {
   statusStr?: string // 状态字符串 (normal, offline, gas_1,gas_2, battery_1, fence_1)
   statusLabel?: string // 状态字符串 (正常, 离线, 气体报警, 电池报警, 围栏报警)
   statusColor?: string // 状态颜色 
-
+  statusPriority?: number // 状态优先级, 越小优先级越高
 }
 
 // GAS手持探测器 API

web/src/views/HandDevice/Home/components/OpenLayerMap.vue

@@ -143,7 +143,7 @@ const toggleTrajectories = () => {
   showTrajectoriesStatus.value = !showTrajectoriesStatus.value
   // console.log(showTrajectoriesStatus.value, props.markers);
   if (showTrajectoriesStatus.value) {
-    setTrajectoriesVisible(showTrajectoriesStatus.value, props.markers)
+    setTrajectoriesVisible(showTrajectoriesStatus.value,[])
   }
 }
 
@@ -208,7 +208,7 @@ const init = () => {
       }
     )
     // 设置轨迹监听器
-    setupTrajectoryWatcher(services.trajectoryService as any, showTrajectoriesStatus)
+    setupTrajectoryWatcher(services.trajectoryService, showTrajectoriesStatus)
 
     // 设置状态监听器
     const { setupAllWatchers } = useMapWatchers({

web/src/views/HandDevice/Home/components/composables/useMapEvents.ts

@@ -112,8 +112,12 @@ export const useMapEvents = () => {
       const feature = map.forEachFeatureAtPixel(event.pixel, (feature: FeatureLike) => feature)
 
       if (feature) {
-        map.getTargetElement().style.cursor = 'pointer'
-        showPopup(event, feature, popupOverlay, popupGenerator)
+        const isPopupShown = showPopup(event, feature, popupOverlay, popupGenerator)
+        if (isPopupShown) {
+          map.getTargetElement().style.cursor = 'pointer'
+        } else {
+          hidePopup(popupOverlay)
+        }
       } else {
         map.getTargetElement().style.cursor = ''
         hidePopup(popupOverlay)
@@ -167,11 +171,11 @@ export const useMapEvents = () => {
     feature: FeatureLike,
     popupOverlay: Overlay | null,
     popupGenerator: PopupContentGenerator
-  ) => {
-    if (!popupOverlay) return
+  ): Boolean => {
+    if (!popupOverlay) return false
 
     const popupElement = popupOverlay.getElement()
-    if (!popupElement) return
+    if (!popupElement) return false
 
     const featureType = feature.get('type')
     let popupContent = ''
@@ -185,7 +189,8 @@ export const useMapEvents = () => {
         break
       case 'fence':
       case 'fence-label':
-        popupContent = popupGenerator.handleFence(feature)
+        // popupContent = popupGenerator.handleFence(feature)
+        return false
         break
       default:
         popupContent = popupGenerator.handleMarker(feature)
@@ -194,6 +199,7 @@ export const useMapEvents = () => {
     // if (!popupContent) return
     popupElement.innerHTML = popupContent
     popupOverlay.setPosition(event.coordinate)
+    return true
   }
 
   /**

web/src/views/HandDevice/Home/components/composables/useTrajectoryControls.ts

@@ -1,7 +1,7 @@
 /**
  * 轨迹控制相关的 composable
  */
-import { ref, watch } from 'vue'
+import { ref, watch, onBeforeMount, onActivated, onDeactivated } from 'vue'
 import dayjs from 'dayjs'
 import type { TrajectoryPlayState } from '../types/map.types'
 import { TrajectoryService } from '../services/trajectory.service'
@@ -152,7 +152,14 @@ export const useTrajectoryControls = () => {
       () => trajectoryPlayState.value,
       (newState) => {
         if (trajectoryService && showTrajectories.value) {
+          // 打印计时
+          // console.time('updateByPlayState')
+
           trajectoryService.updateByPlayState(newState)
+
+          // console.timeEnd('updateByPlayState')
+        } else {
+          cleanup()
         }
       },
       { deep: true }
@@ -167,15 +174,26 @@ export const useTrajectoryControls = () => {
    * 清理轨迹控制器
    */
   const cleanup = () => {
-    // if (trajectoryPlayTimer.value) {
-    //   window.clearInterval(trajectoryPlayTimer.value)
-    // }
-    // trajectoryPlayTimer.value = null
+    trajectoryPlayState.value.isPlaying = false
     if (animationId) {
       window.cancelAnimationFrame(animationId)
     }
   }
+  onDeactivated(() => {
+    console.log('onDeactivated')
 
+    cleanup()
+  })
+  onBeforeMount(() => {
+    cleanup()
+  })
+  if (import.meta.hot) {
+    import.meta.hot.accept((newModule) => {
+      // 热更新时的自定义清理逻辑
+      console.log('热更新发生，执行清理')
+      cleanup()
+    })
+  }
   return {
     // 状态
     trajectoryPlayState,

web/src/views/HandDevice/Home/components/services/marker.service.ts

@@ -104,7 +104,7 @@ export class MarkerService {
           if (features.length === 1) {
             // 单个marker
             const markerData: MarkerData = features[0].get('markerData')
-             const statusStr = getHighestPriorityStatus(markerData)
+            const statusStr = getHighestPriorityStatus(markerData)
             return markerData ? createMarkerStyle(statusStr) : new Style()
           } else {
             // 聚合marker
@@ -126,7 +126,7 @@ export class MarkerService {
           // console.log('renderOrder',a,b.get('markerData').time);
 
           // 按xxx属性降序排列
-          return b.get('markerData').time - a.get('markerData').time
+          return a.get('markerData').statusPriority - b.get('markerData').statusPriority
         }
       })
     }

web/src/views/HandDevice/Home/components/services/trajectory.service.ts

@@ -21,7 +21,7 @@ export class TrajectoryService {
   private trajectoryLayer: VectorLayer<VectorSource> | null = null
   private trajectoryData: TrajectoryData[] = []
   private map: Map | null = null
-  private animationTimer: number | null = null
+  // private animationTimer: number | null = null
 
   // 当前移动的 marker 图层
   private movingMarkerLayer: VectorLayer<VectorSource> | null = null
@@ -115,6 +115,7 @@ export class TrajectoryService {
     // 创建移动中的 marker 图层
     this.movingMarkerLayer = new VectorLayer({
       source: new VectorSource(),
+      zIndex: 2, // 确保移动中的 marker 在轨迹之上
       style: (feature) => {
         const color = feature.get('color') || '#ff4757'
         return new Style({
@@ -272,16 +273,16 @@ export class TrajectoryService {
 
       if (point.data) {
         // 将点数据构造为MarkerData格式以使用现有的状态计算函数
-        const markerData = {
-          id: -1,
-          coordinates: [0, 0] as [number, number],
-          name: '',
+        const markerStatusData = {
+          // id: -1,
+          // coordinates: [0, 0] as [number, number],
+          // name: '',
           gasStatus: point.data.gasStatus || '0',
           batteryStatus: point.data.batteryStatus || '0',
           fenceStatus: point.data.fenceStatus || '0',
           onlineStatus: point.data.onlineStatus || '1'
         }
-        const status = getHighestPriorityStatus(markerData)
+        const status = getHighestPriorityStatus(markerStatusData)
         color = getStatusColor(status)
       }
 
@@ -459,6 +460,7 @@ export class TrajectoryService {
    * 隐藏轨迹
    */
   hide(): void {
+
     if (this.trajectoryLayer) {
       this.trajectoryLayer.setVisible(false)
     }
@@ -499,10 +501,10 @@ export class TrajectoryService {
    * 销毁轨迹服务
    */
   destroy(): void {
-    if (this.animationTimer) {
-      clearTimeout(this.animationTimer)
-      this.animationTimer = null
-    }
+    // if (this.animationTimer) {
+    //   clearTimeout(this.animationTimer)
+    //   this.animationTimer = null
+    // }
 
     this.trajectoryLayer = null
     this.movingMarkerLayer = null

web/src/views/HandDevice/Home/components/utils/map.utils.ts

@@ -23,7 +23,10 @@ export const getStatusMapping = (type: keyof typeof STATUS_DICT, value: string):
   const info = findStatusInfo(STATUS_DICT[type], value)
   return info ? `${type}_${value}` : ''
 }
-
+// 获取状态优先级，越小优先级越高
+export const getStatusPriority = (statusStr: string | keyof typeof STATUS_PRIORITY): number => {
+  return STATUS_PRIORITY[statusStr] || 0
+}
 /**
  * 根据字典数据获取设备最高优先级状态
  */
@@ -69,7 +72,7 @@ export const getHighestPriorityStatus = (markerData: {
 /**
  * 根据字典数据获取状态颜色
  */
-export const getStatusColor = (status: string|keyof typeof STATUS_PRIORITY): string => {
+export const getStatusColor = (status: string | keyof typeof STATUS_PRIORITY): string => {
   if (status === 'normal') return '#67c23a'
   if (status === 'offline') return STATUS_DICT.onlineStatus[0].cssClass
 
@@ -81,7 +84,7 @@ export const getStatusColor = (status: string|keyof typeof STATUS_PRIORITY): str
 /**
  * 根据字典数据获取状态标签
  */
-export const getStatusLabel = (status:string| keyof typeof STATUS_PRIORITY): string => {
+export const getStatusLabel = (status: string | keyof typeof STATUS_PRIORITY): string => {
   if (status === 'normal') return '正常'
   if (status === 'offline') return STATUS_DICT.onlineStatus[0].label
 

web/src/views/HandDevice/Home/index.vue

@@ -48,8 +48,6 @@
                 >{{ getLabelWithTypeValue('batteryStatus', item.batteryStatus) }}</div
               >
  
-              <!-- <div><span>启用状态：</span>{{ item.enableStatus === 1 ? '启用' : '备用' }}</div> -->
-              <!-- <hr /> -->
               <div><span>电量：</span>{{ item.battery }}</div>
               <div><span>数值：</span>{{ item.value }} {{ item.unit }}</div>
               <div><span>时间：</span>{{ item.timeStr }}</div>
@@ -67,14 +65,11 @@
                 >
               </div>
 
-              <!-- {{ item }} -->
             </div>
           </el-collapse-item>
         </el-collapse>
       </el-scrollbar>
-      <!-- <div v-for="item in filterMarkers" :key="item.id" class="marker-item">
-        <div>{{ item.name }}：{{ item.onlineStatus === 1 ? '在线' : '离线' }}</div>
-      </div> -->
+
     </div>
   </div>
 </template>
@@ -84,9 +79,9 @@ import TopPanel from './components/TopPanel.vue'
 
 import { getLastDetectorData } from '@/api/gas'
 import { HandDetectorData } from '@/api/gas/handdetector'
-import { tdengineApi, tdStruct, tdQuery } from '@/api/gas/tdengine/index'
+import { tdengineApi } from '@/api/gas/tdengine/index'
 
-import { getLabelWithTypeValue, getHighestPriorityStatus,getStatusLabel,getStatusColor } from './components/utils/map.utils'
+import { getLabelWithTypeValue, getHighestPriorityStatus,getStatusLabel,getStatusColor,getStatusPriority } from './components/utils/map.utils'
 
 import { MarkerData, FenceData } from './components/types/map.types'
 
@@ -94,6 +89,7 @@ import { useHandDetectorStore } from '@/store/modules/handDetector'
 import { ElMessage } from 'element-plus'
 import dayjs from 'dayjs'
 import { getDistance } from 'ol/sphere'
+const componentsIsActive = ref(false)
 
 const handDetectorStore = useHandDetectorStore() // 手持探测器 store
 
@@ -156,6 +152,7 @@ const getMarkers = async () => {
         statusStr:statusStr, //状态字符串
         statusColor: getStatusColor(statusStr), //状态颜色
         statusLabel: getStatusLabel(statusStr), //状态标签
+        statusPriority: getStatusPriority(statusStr), //状态优先级,
       }
     })
     markers.value = res2
@@ -182,7 +179,7 @@ function setCenter(item: MarkerData) {
     mapRef.value?.setCenter([item.longitude || 0, item.latitude || 0])
   }
 }
-
+// 记录当前选中的手持设备，主要用于重新获取轨迹
 let currentMarker: MarkerData | null = null
 var trajectoryTimeRange = ref([dayjs().subtract(1, 'hour').valueOf(), dayjs().valueOf()])
 // 时间范围改变
@@ -232,7 +229,7 @@ async function showTrajectory(item: MarkerData) {
         if (index === 0) {
           return true
         }
-        if (index == arr.length - 2) {
+        if (index == arr.length - 1) {
           return true
         }
 
@@ -300,10 +297,20 @@ onMounted(() => {
   console.log('定时器，暂时关掉，太烦了')
 
   getDataTimer.value = setInterval(() => {
+    if (!componentsIsActive.value) {
+      return
+    }
     getMarkers()
     getFences()
   }, 5000)
 })
+
+onActivated(() => {
+  componentsIsActive.value = true
+})
+onDeactivated(() => {
+  componentsIsActive.value = false
+})
 onUnmounted(() => {
   clearInterval(getDataTimer.value as NodeJS.Timeout)
 })