【类 型】：feat

【原  因】：地图组件显示飞机图标 实时根据在线状态 重量状态 实时更新图标
【过  程】：mapbox加一个更新updatePlaneIcon函数  概况 飞机操作界面 监测飞机状态 调用更图标函数
【影  响】：

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动

src/components/MapBox.vue

@@ -8,7 +8,8 @@
 import mapboxgl from 'mapbox-gl'
 import { MapboxStyleSwitcherControl, FollowControl, CustomFullscreenControl, NoFlyControl, RestrictflyControl, SaveToFileControl, PolygonToggleControl } from '@/utils/mapboxgl_plugs'
 import planeIcon from '@/assets/svg/plane.svg'
-// import unlineIcon from '@/assets/svg/plane_unline.svg'
+import planeRunIcon from '@/assets/svg/plane_run.svg'
+import unlineIcon from '@/assets/svg/plane_unline.svg'
 import civilIcon from '@/assets/svg/civil.svg'
 
 export default {
@@ -87,22 +88,6 @@ export default {
     }
   },
   watch: {
-    /** 动态开关地图样式切换控件 */
-    enableSwitch (val) {
-      if (!this.map) return
-      if (val) {
-        if (!this.styleSwitcherControlRef) {
-          const control = new MapboxStyleSwitcherControl(this.mapStyleList, 'iconfont icon-duozhang f-s-20', this.currentStyleIndex)
-          this.map.addControl(control, 'top-right')
-          this.styleSwitcherControlRef = control
-        }
-      } else {
-        if (this.styleSwitcherControlRef) {
-          try { this.map.removeControl(this.styleSwitcherControlRef) } catch (e) { /* noop */ }
-          this.styleSwitcherControlRef = null
-        }
-      }
-    },
     /** 动态开关全屏控件（enableZoom） */
     enableZoom (val) {
       if (!this.map) return
@@ -118,6 +103,22 @@ export default {
           this.fullscreenControlRef = null
         }
       }
+    },
+    /** 动态开关地图样式切换控件 */
+    enableSwitch (val) {
+      if (!this.map) return
+      if (val) {
+        if (!this.styleSwitcherControlRef) {
+          const control = new MapboxStyleSwitcherControl(this.mapStyleList, 'iconfont icon-duozhang f-s-20', this.currentStyleIndex)
+          this.map.addControl(control, 'top-right')
+          this.styleSwitcherControlRef = control
+        }
+      } else {
+        if (this.styleSwitcherControlRef) {
+          try { this.map.removeControl(this.styleSwitcherControlRef) } catch (e) { /* noop */ }
+          this.styleSwitcherControlRef = null
+        }
+      }
     }
   },
   async mounted () {
@@ -253,13 +254,6 @@ export default {
         this.map.addControl(this.fullscreenControlRef, 'top-right')
       }
 
-      // 地图样式选择控件
-      // 自定义地图样式列表
-      if (this.enableSwitch) {
-        this.styleSwitcherControlRef = new MapboxStyleSwitcherControl(this.mapStyleList, 'iconfont icon-duozhang f-s-20', this.currentStyleIndex)
-        this.map.addControl(this.styleSwitcherControlRef, 'top-right')
-      }
-
       // 飞机跟随
       if (this.enableFollow) {
         this.map.addControl(new FollowControl({
@@ -349,6 +343,13 @@ export default {
           }
         }), 'top-right')
       }
+
+      // 地图样式选择控件
+      // 自定义地图样式列表
+      if (this.enableSwitch) {
+        this.styleSwitcherControlRef = new MapboxStyleSwitcherControl(this.mapStyleList, 'iconfont icon-duozhang f-s-20', this.currentStyleIndex)
+        this.map.addControl(this.styleSwitcherControlRef, 'top-right')
+      }
     },
     /**
      * @description 通用地图图层和数据源清除方法
@@ -917,7 +918,17 @@ export default {
     makePlane (plane, index = 0) {
       const customIcon = document.createElement('div')
       customIcon.className = 'custom-marker'
-      customIcon.style.backgroundImage = `url(${planeIcon})`
+      // 根据在线状态与载重显示不同图标，空值安全处理
+      // 约定: online === false 才判定为离线；其他(包括 undefined/null) 默认为在线
+      const isOnline = !((plane && plane.planeState && plane.planeState.online) === false)
+      const lwRaw0 = plane && plane.planeState ? plane.planeState.loadweight : 0
+      const lwNum0 = Number(lwRaw0)
+      const loadWeight = Number.isFinite(lwNum0) ? lwNum0 : 0
+      const iconToUse = !isOnline ? unlineIcon : (loadWeight > 300 ? planeRunIcon : planeIcon)
+      // 使用 important 确保覆盖样式表中的背景图设置
+      customIcon.style.setProperty('background-image', `url(${iconToUse})`, 'important')
+      customIcon.style.setProperty('background-repeat', 'no-repeat', 'important')
+      customIcon.style.setProperty('background-size', 'contain', 'important')
       customIcon.style.width = '64px'
       customIcon.style.height = '64px'
 
@@ -1088,6 +1099,32 @@ export default {
         popup.setHTML(popupContent)
       }
     },
+    /**
+     * @description 实时根据在线状态与载重更新指定飞机的图标
+     * @param {Object} stateObj 飞机状态对象（需包含 online, loadweight）
+     * @param {number} index 对应的飞机索引
+     */
+    updatePlaneIcon (stateObj, index = 0) {
+      const marker = this.planes[index]
+      if (!marker) return
+      const el = marker.getElement()
+      if (!el) return
+      // 约定: online === false 才判定为离线；其他(包括 undefined/null) 默认为在线
+      const isOnline = !((stateObj && stateObj.online) === false)
+      const lwRaw = stateObj ? stateObj.loadweight : 0
+      const lwNum = Number(lwRaw)
+      const loadWeight = Number.isFinite(lwNum) ? lwNum : 0
+      const iconToUse = !isOnline ? unlineIcon : (loadWeight > 300 ? planeRunIcon : planeIcon)
+      // 使用 important 确保覆盖样式表中的背景图设置
+      el.style.setProperty('background-image', `url(${iconToUse})`, 'important')
+      el.style.setProperty('background-repeat', 'no-repeat', 'important')
+      el.style.setProperty('background-size', 'contain', 'important')
+      // 调试信息，观察状态与最终图标选择
+      try {
+        el.dataset.icon = !isOnline ? 'unline' : (loadWeight > 300 ? 'run' : 'normal')
+        console.debug('[updatePlaneIcon]', { index, online: stateObj && stateObj.online, loadweight: lwRaw, parsedLoad: loadWeight, chosen: el.dataset.icon })
+      } catch (e) { /* noop */ }
+    },
     /**
      * @description: 镜头跳转
      * @param {obj} lonLat {lon:lon,lat:lat} 经纬度

src/views/layout/components/main/home/index.vue

@@ -43,6 +43,20 @@ export default {
         return Array.isArray(posArr) ? posArr : []
       })
     },
+    /**
+     * @description: 派生出与“图标选择”强相关的轻量状态，供独立 watcher 监控
+     * offline: 是否离线；run: 载重是否超过阈值（>300）
+     */
+    planeIconStates () {
+      return this.planeList.map(plane => {
+        const s = plane.planeState || {}
+        const n = Number(s.loadweight)
+        return {
+          offline: s.online === false,
+          run: Number.isFinite(n) && n > 300
+        }
+      })
+    },
     /**
      * @description: 侧边栏显隐
      */
@@ -129,6 +143,21 @@ export default {
       },
       deep: true
     },
+    // 专门监听轻量图标状态，必要时才更新图标，避免不必要的 DOM 操作
+    planeIconStates: {
+      handler (val, oldVal) {
+        val.forEach((iconState, index) => {
+          const prev = Array.isArray(oldVal) ? oldVal[index] : undefined
+          const changed = !prev || prev.offline !== iconState.offline || prev.run !== iconState.run
+          if (changed) {
+            // 使用原始 planeState 作为数据源更新图标
+            const stateObj = this.planeList[index].planeState || {}
+            this.$refs.mapbox.updatePlaneIcon(stateObj, index)
+          }
+        })
+      },
+      deep: true
+    },
     /**
      * @description: 侧边栏缩进有变化时 地图重新自适应
      */

src/views/layout/components/main/planes/index.vue

@@ -175,8 +175,20 @@ export default {
      */
     isCollapse () {
       return this.$store.state.app.isCollapse
+    },
+    /**
+     * @description: 与图标选择强相关的轻量状态（仅当前选中飞机）
+     */
+    planeIconState () {
+      const s = this.planeState || {}
+      const n = Number(s.loadweight)
+      return {
+        offline: s.online === false,
+        run: Number.isFinite(n) && n > 300
+      }
     }
   },
+
   methods: {
     /** 切换主视图 */
     toggleMainView () {
@@ -336,6 +348,18 @@ export default {
       },
       deep: true
     },
+    // 仅当离线/载重跨阈值状态发生变化时更新图标（当前选中飞机）
+    planeIconState: {
+      handler (val, oldVal) {
+        const changed = !oldVal || oldVal.offline !== val.offline || oldVal.run !== val.run
+        if (changed) {
+          const stateObj = this.planeState || {}
+          // 当前视图只有一架选中飞机，对应 MapBox 数组索引为 0
+          this.$refs.mapbox.updatePlaneIcon(stateObj, 0)
+        }
+      },
+      deep: false
+    },
     /**
      * @description: 更新飞机位置 并画出轨迹 跟随飞机
      */