diff --git a/src/components/MapBox.vue b/src/components/MapBox.vue index 13bb900..791fd19 100644 --- a/src/components/MapBox.vue +++ b/src/components/MapBox.vue @@ -918,13 +918,11 @@ export default { makePlane (plane, index = 0) { const customIcon = document.createElement('div') customIcon.className = 'custom-marker' - // 根据在线状态与载重显示不同图标,空值安全处理 + // 根据在线状态与是否有货显示不同图标,空值安全处理 // 约定: 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) + const hasGoods = !!(plane && plane.planeState && plane.planeState.hasGoods) + const iconToUse = !isOnline ? unlineIcon : (hasGoods ? planeRunIcon : planeIcon) // 使用 important 确保覆盖样式表中的背景图设置 customIcon.style.setProperty('background-image', `url(${iconToUse})`, 'important') customIcon.style.setProperty('background-repeat', 'no-repeat', 'important') @@ -1111,18 +1109,16 @@ export default { 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) + const hasGoods = !!(stateObj && stateObj.hasGoods) + const iconToUse = !isOnline ? unlineIcon : (hasGoods ? 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 }) + el.dataset.icon = !isOnline ? 'unline' : (hasGoods ? 'run' : 'normal') + console.debug('[updatePlaneIcon]', { index, online: stateObj && stateObj.online, hasGoods, chosen: el.dataset.icon }) } catch (e) { /* noop */ } }, /** diff --git a/src/store/index.js b/src/store/index.js index d0395b0..7eea0c6 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -394,6 +394,7 @@ const store = new Vuex.Store({ acceState: null, // 加速度计校准状态 getPlaneMode: null, // 飞机模式 loadweight: null, // 重量 + hasGoods: false, // 是否有货 hookstatus: null, // 钩子状态 position: [], // [[经度,维度,相对高度]]累计数组 battCapacity: null, // 电池容量 diff --git a/src/views/layout/components/main/home/index.vue b/src/views/layout/components/main/home/index.vue index d88254c..68b71f7 100644 --- a/src/views/layout/components/main/home/index.vue +++ b/src/views/layout/components/main/home/index.vue @@ -50,10 +50,9 @@ export default { 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 + run: !!s.hasGoods } }) }, diff --git a/src/views/layout/components/main/planes/index.vue b/src/views/layout/components/main/planes/index.vue index c0495fb..60bd1ed 100644 --- a/src/views/layout/components/main/planes/index.vue +++ b/src/views/layout/components/main/planes/index.vue @@ -181,10 +181,9 @@ export default { */ planeIconState () { const s = this.planeState || {} - const n = Number(s.loadweight) return { offline: s.online === false, - run: Number.isFinite(n) && n > 300 + run: !!s.hasGoods } } }, diff --git a/src/views/layout/components/main/planes/swarm.vue b/src/views/layout/components/main/planes/swarm.vue index db13648..b0b18e1 100644 --- a/src/views/layout/components/main/planes/swarm.vue +++ b/src/views/layout/components/main/planes/swarm.vue @@ -79,6 +79,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: 侧边栏显隐 */ @@ -293,6 +307,20 @@ 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) { + const stateObj = this.planeList[index].planeState || {} + this.$refs.mapbox.updatePlaneIcon(stateObj, index) + } + }) + }, + deep: true + }, // 实时更新所有飞机位置 和轨迹 planePositions: { handler (allPositions) { diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue index 049d3b7..722b454 100644 --- a/src/views/layout/index.vue +++ b/src/views/layout/index.vue @@ -223,6 +223,11 @@ export default { this.$store.dispatch('fetchLog', { content: `${plane.name}--${jsonData[key]}`, color: '#f57c00' }) } else { plane.planeState[key] = jsonData[key] // 按订阅信息 刷新飞机状态 + // 重量更新时,派生更新是否有货标记 + if (key === 'loadweight') { + const n = Number(jsonData[key]) + plane.planeState.hasGoods = Number.isFinite(n) && n > 300 + } } } } catch (error) {