# Vuex Mutations 修复说明 ## 🚨 问题描述 ``` [vuex] unknown mutation type: SET_QB303_DEVICE_INFO ``` ## 🔧 解决方案 ### 1. 添加了缺失的 Vuex Mutations 在 `src/pages/dataGovernanceDashboard/store/index.ts` 中添加了以下mutations: #### **SET_OTHER_EQUIPMENT_INFO** ```typescript 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** ```typescript 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 接口定义 添加了新的数据结构: ```typescript 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` 中添加了初始化数据: ```typescript positionData: { // ... 现有字段 ... //其他装备 otherEquipment:{}, //QB303设备 qb303Device:{} } ``` ## ✅ 验证修复 ### 检查 Mutations 是否正常工作 ```javascript // 在浏览器控制台测试 testQB303Data() ``` ### 检查 Store 状态 ```javascript // 查看 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设备数据格式 ```json { "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" } } ``` ### 通用其他装备数据格式 ```json { "biz_code": "other_equipment", "data": { "equipment_id": "DEVICE_001", "equipment_type": "雷达系统", "latitude": 39.9042, "longitude": 116.4074, "online_status": true } } ``` 现在WebSocket消息处理应该正常工作,不会再出现 `unknown mutation type` 错误。