性能优化

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

@@ -10,7 +10,7 @@ import { Point } from 'ol/geom'
 import { Style, Circle, Fill, Stroke } from 'ol/style'
 import { fromLonLat } from 'ol/proj'
 import type { MarkerData } from '../types/map.types'
-import { getHighestPriorityStatus, getStatusColor } from '../utils/map.utils'
+
 import { ANIMATION_CONFIG } from '../constants/map.constants'
 
 export class AnimationService {
@@ -33,13 +33,11 @@ export class AnimationService {
           geometry: new Point(fromLonLat(marker.coordinates)),
           markerData: marker
         })
-
-        const status = getHighestPriorityStatus(marker)
-        const color = getStatusColor(status)
+ 
 
         // 设置动画开始时间
         feature.set('animationStart', Date.now())
-        feature.set('rippleColor', color)
+        feature.set('rippleColor', marker.statusColor )
 
         source?.addFeature(feature)
         // this.rippleLayer?.setSource(source)
@@ -62,23 +60,6 @@ export class AnimationService {
     this.enableCluster = enableCluster
     const source = new VectorSource()
 
-    // // 为每个标记添加波纹效果
-    // markers.forEach((marker) => {
-    //   const feature = new Feature({
-    //     geometry: new Point(fromLonLat(marker.coordinates)),
-    //     markerData: marker
-    //   })
-
-    //   const status = getHighestPriorityStatus(marker)
-    //   const color = getStatusColor(status)
-
-    //   // 设置动画开始时间
-    //   feature.set('animationStart', Date.now())
-    //   feature.set('rippleColor', color)
-
-    //   source.addFeature(feature)
-    // })
-
     this.rippleLayer = new VectorLayer({
       source: source,
       zIndex: 1,

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

@@ -12,8 +12,8 @@ import { fromLonLat } from 'ol/proj'
 import type { MarkerData, MapProps } from '../types/map.types'
 import {
   createMarkerStyle,
-  getHighestPriorityStatus,
-  getClusterMarkerData
+  getClusterMarkerData,
+  getStatusColor
 } from '../utils/map.utils'
 import { ANIMATION_CONFIG } from '../constants/map.constants'
 export class MarkerService {
@@ -56,8 +56,9 @@ export class MarkerService {
         geometry: new Point(fromLonLat(marker.coordinates)),
         markerData: marker
       })
-      const statusStr = getHighestPriorityStatus(marker)
-      feature.setStyle(createMarkerStyle(statusStr))
+      const statusColor = marker.statusColor || ''
+
+      feature.setStyle(createMarkerStyle(statusColor))
       this.vectorSource.addFeature(feature)
     })
   }
@@ -104,12 +105,14 @@ export class MarkerService {
           if (features.length === 1) {
             // 单个marker
             const markerData: MarkerData = features[0].get('markerData')
-            const statusStr = getHighestPriorityStatus(markerData)
-            return markerData ? createMarkerStyle(statusStr) : new Style()
+
+            return markerData ? createMarkerStyle(markerData.statusColor || '') : new Style()
           } else {
             // 聚合marker
             const highestStatus = getClusterMarkerData(features)
-            return createMarkerStyle(highestStatus, true, features.length)
+
+            const color = getStatusColor(highestStatus)
+            return createMarkerStyle(color, true, features.length)
           }
         }
       })

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

@@ -3,9 +3,6 @@
  */
 import type { MarkerData, DetectorInfo } from '../types/map.types'
 import {
-  getHighestPriorityStatus,
-  getStatusLabel,
-  getStatusColor,
   createClusterPopupHTML,
   sortDetectorsByPriority,
   getLabelWithTypeValue
@@ -19,12 +16,12 @@ export class PopupService {
     // 收集所有探测器信息
     const detectorList: DetectorInfo[] = features.map((f) => {
       const markerData = f.get('markerData') as MarkerData
-      const status = getHighestPriorityStatus(markerData)
+
       return {
         name: markerData?.name || '-',
-        status,
-        statusLabel: getStatusLabel(status),
-        statusColor: getStatusColor(status)
+        status:markerData.statusStr||"",
+        statusLabel: markerData.statusLabel || "",
+        statusColor:  markerData.statusColor || "",
       }
     })
 
@@ -56,9 +53,10 @@ export class PopupService {
       <div>数值：${markerData.value} ${markerData.unit ? markerData.unit : ''}</div>
       <div>时间：${markerData.timeStr ? markerData.timeStr : '-'} </div>
       <div>
-        坐标：${markerData.coordinates[0].toFixed(6)}, ${markerData.coordinates[1].toFixed(6)}
+        坐标：${markerData.coordinates[0].toFixed(6)}, ${markerData.coordinates[1].toFixed(6)}/${markerData.gpsType===0?"GPS":"基站"}
       </div>
     `
+    // gpsType:0表示GPS，550表示基站（或者非0就判定为基站）
   }
 
   /**

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

@@ -118,18 +118,10 @@ export const createLocationIconSVG = (color: string, size: number = 24) => {
  * 创建标记样式
  */
 export const createMarkerStyle = (
-  statusStr: keyof typeof STATUS_PRIORITY,
+  color: string,
   isCluster: boolean = false,
   clusterSize?: number
 ) => {
-  // 如果是字符串，说明是状态值
-  // const statusStr:string =
-  //   typeof markerData === 'string'
-  //     ? (markerData as keyof typeof STATUS_PRIORITY)
-  //     : getHighestPriorityStatus(markerData)
-
-  const color = getStatusColor(statusStr)
-
   if (isCluster && clusterSize) {
     // 聚合标记样式
     return new Style({
@@ -254,7 +246,7 @@ export const getClusterMarkerData = (features: Feature[]): keyof typeof STATUS_P
   features.forEach((feature) => {
     const markerData = feature.get('markerData') as MarkerData
     if (markerData) {
-      const status = getHighestPriorityStatus(markerData)
+      const status = markerData.statusStr || ''
       allStatuses.push(status)
     }
   })