地图优化

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,[])
+    setTrajectoriesVisible(showTrajectoriesStatus.value, [])
   }
 }
 
@@ -253,10 +253,11 @@ const handleFenceDrawComplete = (coordinates: [number, number][]) => {
 // 缩放到合适范围
 const fitToMarkers = () => {
   if (isMapInitialized && props.markers && props.markers.length > 0) {
-    const markerCoords = props.markers.map((marker) => [
-      marker.longitude || 0,
-      marker.latitude || 0
-    ])
+    const markerCoords = props.markers
+      .filter((marker) => {
+        return marker.longitude && marker.latitude
+      })
+      .map((marker) => [marker.longitude||0, marker.latitude||0])
     services.mapService?.fitToMarkers(markerCoords)
   }
 }

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

@@ -76,7 +76,7 @@ export class FenceService {
    */
   private createFenceStyle(fence: FenceData): Style {
     let strokeColor = '#1890ff'
-    let fillColor = 'rgba(24, 144, 255, 0.1)'
+    // let fillColor = 'rgba(24, 144, 255, 0.1)'
     let strokeWidth = 2
 
     // 根据围栏状态设置样式
@@ -84,16 +84,16 @@ export class FenceService {
     switch (fence.status) {
       case FENCE_STATUS.DISABLED:
         strokeColor = '#67c23a'
-        fillColor = 'rgba(103, 194, 58, 0.1)'
+        // fillColor = 'rgba(103, 194, 58, 0.1)'
         break
       case FENCE_STATUS.ENABLED:
         strokeColor = '#e6a23c'
-        fillColor = 'rgba(230, 162, 60, 0.15)'
+        // fillColor = 'rgba(230, 162, 60, 0.15)'
         strokeWidth = 3
         break
       case FENCE_STATUS.ALARM: // 告警状态
         strokeColor = '#f56c6c'
-        fillColor = 'rgba(245, 108, 108, 0.2)'
+        // fillColor = 'rgba(245, 108, 108, 0.2)'
         strokeWidth = 4
         break
     }
@@ -108,11 +108,11 @@ export class FenceService {
         width: strokeWidth,
         lineDash: lineDash
       }),
-      fill: new Fill({
-        color: fillColor,
-        // opacity: 0.5
+      // fill: new Fill({
+      //   color: fillColor,
+      //   // opacity: 0.5
 
-      })
+      // })
     })
   }
 

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

@@ -13,7 +13,7 @@ export const findStatusInfo = (
   dict: (typeof STATUS_DICT)[keyof typeof STATUS_DICT],
   value: string
 ) => {
-  return dict.find((item) => item.value === value)
+  return dict?.find((item) => item.value === value)
 }
 
 /**
@@ -39,22 +39,22 @@ export const getHighestPriorityStatus = (markerData: {
   const statuses: string[] = []
 
   // 收集非正常状态
-  if (markerData.gasStatus !== 0) {
+  if (markerData.gasStatus === 1) {
     const gasStatusStr = getStatusMapping('gasStatus', String(markerData.gasStatus))
     gasStatusStr && statuses.push(gasStatusStr)
   }
 
-  if (markerData.batteryStatus !== 0) {
+  if (markerData.batteryStatus === 1) {
     const batteryStatusStr = getStatusMapping('batteryStatus', String(markerData.batteryStatus))
     statuses.push(batteryStatusStr)
   }
 
-  if (markerData.fenceStatus !== 0) {
+  if (markerData.fenceStatus === 1) {
     const fenceStatusStr = getStatusMapping('fenceStatus', String(markerData.fenceStatus))
     fenceStatusStr && statuses.push(fenceStatusStr)
   }
   // 检查各种状态
-  const onlineStatus = String(markerData.onlineStatus) === '0' ? 'offline' : null
+  const onlineStatus = String(markerData.onlineStatus) !== '1' ? 'offline' : null
   if (onlineStatus) {
     statuses.push(onlineStatus)
   }
@@ -75,6 +75,8 @@ export const getHighestPriorityStatus = (markerData: {
 export const getStatusColor = (status: string | keyof typeof STATUS_PRIORITY): string => {
   if (status === 'normal') return '#67c23a'
   if (status === 'offline') return STATUS_DICT.onlineStatus[0].cssClass
+  // 安全校验，确保状态字符串格式正确
+  if (!status.includes('_')) return ''
   
   const [type, value] = status.split('_') as [keyof typeof STATUS_DICT, string]
   const info = findStatusInfo(STATUS_DICT[type], value)
@@ -87,6 +89,8 @@ export const getStatusColor = (status: string | keyof typeof STATUS_PRIORITY): s
 export const getStatusLabel = (status: string | keyof typeof STATUS_PRIORITY): string => {
   if (status === 'normal') return '正常'
   if (status === 'offline') return STATUS_DICT.onlineStatus[0].label
+  // 安全校验，确保状态字符串格式正确
+  if (!status.includes('_')) return ''
 
   const [type, value] = status.split('_') as [keyof typeof STATUS_DICT, string]
   const info = findStatusInfo(STATUS_DICT[type], value)

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

@@ -56,11 +56,11 @@
                 <el-button
                   type="success"
                   size="small"
-                  v-if="item.latitude && item.longitude"
+                  v-show="item.latitude && item.longitude"
                   @click="setCenter(item)"
                   >定位</el-button
                 >
-                <el-button  v-hasPermi="['gas:hand-td:HistoricalSn']" type="success" size="small" @click="onClickTrajectory(item)"
+                <el-button  v-show="item.latitude && item.longitude"  v-hasPermi="['gas:hand-td:HistoricalSn']" type="success" size="small" @click="onClickTrajectory(item)"
                   >轨迹</el-button
                 >
               </div>