xiaomubiao-master/VUEX_MUTATIONS_FIX.md

Vuex Mutations 修复说明

🚨 问题描述

[vuex] unknown mutation type: SET_QB303_DEVICE_INFO

🔧 解决方案

1. 添加了缺失的 Vuex Mutations

在 src/pages/dataGovernanceDashboard/store/index.ts 中添加了以下mutations：

SET_OTHER_EQUIPMENT_INFO

SET_OTHER_EQUIPMENT_INFO(state, info) {
  if (!state.positionData.otherEquipment[info.equipment_id || info.sn]) {
    state.positionData.otherEquipment[info.equipment_id || info.sn] = {
      longitude: info.longitude || info.position?.lng || 0,
      latitude: info.latitude || info.position?.lat || 0,
      dock_sn: info.equipment_id || info.sn
    }
  } else {
    // 更新现有设备位置信息
    ...
  }
}

SET_QB303_DEVICE_INFO

SET_QB303_DEVICE_INFO(state, info) {
  let equipmentId = info.sn || info.host?.sid || 'QB303_' + Date.now();
  if (!state.positionData.qb303Device[equipmentId]) {
    state.positionData.qb303Device[equipmentId] = {
      longitude: info.host?.longitude || 0,
      latitude: info.host?.latitude || 0,
      altitude: info.host?.altitude || 0,
      dock_sn: equipmentId,
      // QB303特有字段
      velocity: info.host?.velocity || 0,
      velocity_x: info.host?.velocity_x || 0,
      velocity_y: info.host?.velocity_y || 0,
      velocity_z: info.host?.velocity_z || 0,
      roll: info.host?.roll || 0,
      pitch: info.host?.pitch || 0,
      yaw: info.host?.yaw || 0,
      platform_type: info.host?.platform_type || 1,
      health_status: info.host?.health_status || 1,
      battle_unit_code: info.host?.battle_unit_code || '',
      report_time: info.host?.report_time || Date.now()
    }
  } else {
    // 更新现有设备数据
    ...
  }
}

2. 更新了 State 接口定义

添加了新的数据结构：

positionData: {
  // ... 现有字段 ...
  
  otherEquipment:{
    [key:string]:{
      longitude: string | number;
      latitude: string | number;
      dock_sn: string;
    }
  }

  qb303Device:{
    [key:string]:{
      longitude: string | number;
      latitude: string | number;
      altitude: number;
      dock_sn: string;
      velocity: number;
      velocity_x: number;
      velocity_y: number;
      velocity_z: number;
      roll: number;
      pitch: number;
      yaw: number;
      platform_type: number;
      health_status: number;
      battle_unit_code: string;
      report_time: number;
    }
  }
}

3. 初始化了 Store State

在 createStoreData.state 中添加了初始化数据：

positionData: {
  // ... 现有字段 ...
  
  //其他装备
  otherEquipment:{},

  //QB303设备
  qb303Device:{}
}

✅ 验证修复

检查 Mutations 是否正常工作

// 在浏览器控制台测试
testQB303Data()

检查 Store 状态

// 查看 store 中的数据
console.log(store.state.positionData.qb303Device)
console.log(store.state.positionData.otherEquipment)

📋 数据流程

1. WebSocket 接收: 接收到 qb303_device_status 消息
2. DualWebSocketManager: 调用 this.store.commit('SET_QB303_DEVICE_INFO', payload.data)
3. Vuex Mutation: 执行 SET_QB303_DEVICE_INFO 更新 store 状态
4. EventBus: 触发 QB303Device-Update 事件
5. 组件更新: 主页面接收事件并更新其他装备列表

🎯 支持的设备类型

QB303设备数据格式

{
  "biz_code": "qb303_device_status",
  "data": {
    "host": {
      "altitude": 200,
      "latitude": 28.20648476190476,
      "longitude": 112.8945530952381,
      "platform_type": 1,
      "health_status": 1,
      "battle_unit_code": "dy04",
      "velocity": 0,
      "velocity_x": 0.10144216567277908,
      "velocity_y": -0.0755225121974945,
      "velocity_z": 0.050013765692710876,
      "roll": -1.02637914332358,
      "pitch": 2.0691601321652815,
      "yaw": 0,
      "report_time": 1757150761138
    },
    "sn": "2"
  }
}

通用其他装备数据格式

{
  "biz_code": "other_equipment",
  "data": {
    "equipment_id": "DEVICE_001",
    "equipment_type": "雷达系统",
    "latitude": 39.9042,
    "longitude": 116.4074,
    "online_status": true
  }
}

现在WebSocket消息处理应该正常工作，不会再出现 unknown mutation type 错误。