Initial commit

2026-05-22 16:13:20 +08:00
commit b3089a254e
1444 changed files with 372077 additions and 0 deletions
--- a/QB303_REALTIME_WEBSOCKET_FIX_GUIDE.md
+++ b/QB303_REALTIME_WEBSOCKET_FIX_GUIDE.md
@@ -0,0 +1,259 @@
+# 🔧 QB303实时WebSocket数据显示修复指南
+
+## 🎯 问题根因分析
+
+### **您的关键发现：**
+✅ **测试数据** (`testQB303Data()`) - **可以正常显示在地图上**
+❌ **实时WebSocket数据** - **无法在地图上显示**
+
+### **问题根因：**
+**实时WebSocket数据处理后缺少地图更新调用！**
+
+## 🔍 详细对比分析
+
+### **✅ 测试数据处理流程（正常）**
+```javascript
+// testQB303Data() 函数
+handlerSocketMessage(testQB303Message); // 1. 处理数据
+
+setTimeout(() => {
+    // 2. ⭐ 关键：调用地图更新
+    if (window.m3Data && window.m3Data.qb303DeviceData) {
+        console.log('通知地图更新QB303设备显示...');
+        
+        // 从localStorage获取数据并加载到地图
+        const localData = localStorage.getItem("index-otherEquipmentList");
+        const qb303Devices = JSON.parse(localData).filter(...);
+        
+        // 更新地图数据结构
+        qb303Devices.forEach(device => {
+            const key = device.equipmentId || device.battleUnitCode;
+            window.m3Data.qb303DeviceData[key].info = {...device}
+        });
+        
+        // ⭐ 关键：调用地图渲染
+        window.m3Data.loadrQB303DeviceData();
+    }
+}, 2000);
+```
+
+### **❌ 实时WebSocket数据处理流程（有问题）**
+```javascript
+// handlerSocketMessage() 中的 qb303_device_status 处理
+if (message.biz_code == "qb303_device_status") {
+    // 1. 处理数据并保存到localStorage ✅
+    let qbEquipmentInfo = { /* ... 解析数据 ... */ };
+    otherEquipmentList.value.push(qbEquipmentInfo);
+    localStorage.setItem("index-otherEquipmentList", JSON.stringify(otherEquipmentList.value));
+    
+    // 2. ❌ 问题：没有调用地图更新！
+    // 缺失：window.m3Data.loadrQB303DeviceData()
+}
+```
+
+## ✅ 修复方案
+
+### **已完成的修复：**
+在实时WebSocket数据处理后添加了地图更新逻辑：
+
+```javascript
+// 保存到本地存储
+localStorage.setItem("index-otherEquipmentList", JSON.stringify(otherEquipmentList.value));
+
+// ⭐ 关键修复：实时数据处理后立即更新地图显示
+console.log('🗺️ 实时QB303数据处理完成，更新地图显示...');
+setTimeout(() => {
+    if (window.m3Data && window.m3Data.qb303DeviceData) {
+        // 从localStorage获取最新的QB303设备数据并加载到地图
+        const localData = localStorage.getItem("index-otherEquipmentList");
+        if (localData) {
+            const qb303Devices = JSON.parse(localData).filter(item => 
+                item.equipmentType === 'QB303设备' && item.online_status
+            );
+            
+            console.log(`📍 找到 ${qb303Devices.length} 个在线QB303设备，准备更新地图...`);
+            
+            qb303Devices.forEach(device => {
+                const key = device.equipmentId || device.battleUnitCode;
+                if (key && device.online_status) {
+                    if (!window.m3Data.qb303DeviceData[key]) {
+                        window.m3Data.qb303DeviceData[key] = {}
+                    }
+                    window.m3Data.qb303DeviceData[key].info = {...device}
+                    console.log(`✅ 设备 ${key} 数据已更新: [${device.longitude}, ${device.latitude}]`);
+                }
+            });
+            
+            // 调用地图渲染方法
+            if (window.m3Data.loadrQB303DeviceData) {
+                window.m3Data.loadrQB303DeviceData();
+                console.log('🎯 地图渲染方法已调用');
+            }
+            
+            // 强制刷新地图显示
+            if (window.m3Data.forceRefreshQB303Devices) {
+                console.log('🔄 强制刷新QB303设备显示');
+                window.m3Data.forceRefreshQB303Devices();
+            }
+        }
+    } else {
+        console.warn('⚠️ 地图实例或QB303数据结构未初始化');
+    }
+}, 100); // 短暂延迟确保localStorage更新完成
+```
+
+## 🚀 新增测试工具
+
+### **实时数据测试工具**
+```javascript
+testRealTimeQB303() // 专门测试实时WebSocket数据处理和显示
+```
+
+**功能：**
+- 📡 使用您提供的真实实时数据格式
+- 🔄 模拟完整的WebSocket数据接收和处理流程
+- 📍 验证数据从接收到地图显示的完整链路
+- ✈️ 自动飞行到设备位置进行验证
+
+### **实时数据格式**
+```javascript
+{
+    "version": "1.0",
+    "timestamp": 1757760579570,
+    "data": {
+        "host": {
+            "altitude": 200,
+            "latitude": 28.206474523809526,
+            "sid": "2",
+            "platform_type": 1,
+            "database_id": 19,
+            "report_time": 1757760659169,
+            "battle_unit_code": "dy04",
+            "tm": 1757760659169,
+            "longitude": 112.89433833333334
+        },
+        "sn": "2"
+    },
+    "biz_code": "qb303_device_status"
+}
+```
+
+## 📊 修复后的预期结果
+
+### **使用 `testRealTimeQB303()` 应该看到：**
+
+#### **1. 数据处理阶段**
+```
+=== 测试实时WebSocket QB303数据处理 ===
+📡 发送实时QB303数据: {...}
+📍 设备位置: [112.89433833333334, 28.206474523809526]
+收到QB303设备状态数据: {...}
+QB303设备 [dy04] 数据已更新
+🗺️ 实时QB303数据处理完成，更新地图显示...
+📍 找到 1 个在线QB303设备，准备更新地图...
+✅ 设备 dy04 数据已更新: [112.89433833333334, 28.206474523809526]
+🎯 地图渲染方法已调用
+🔄 强制刷新QB303设备显示
+```
+
+#### **2. 地图渲染阶段**
+```
+加载QB303设备到地图: dy04 {info: {...}}
+设备信息: {equipmentId: 'dy04', ...}
+设备坐标: [112.89433833333334, 28.206474523809526, 200]
+✅ QB303设备 dy04 已添加到地图
+```
+
+#### **3. 结果验证阶段**
+```
+=== 实时数据处理结果检查 ===
+✅ localStorage中QB303设备数量: 1
+   设备 dy04: [112.89433833333334, 28.206474523809526], 在线=true
+✅ 地图中QB303设备数量: 1
+   地图设备 dy04: [112.89433833333334, 28.206474523809526]
+QB303设备数据: {dy04: {...}}
+图层中图形数量: 1
+找到的QB303图形: 1 个
+✈️ 相机已飞行到实时设备位置
+```
+
+## 🔧 修复前后对比
+
+### **修复前**
+- ❌ 实时数据只保存到localStorage
+- ❌ 没有调用地图渲染方法
+- ❌ 设备不会显示在地图上
+- ❌ 测试数据能显示，实时数据不能显示
+
+### **修复后**
+- ✅ 实时数据保存到localStorage
+- ✅ **自动调用地图渲染方法**
+- ✅ **设备实时显示在地图上**
+- ✅ **测试数据和实时数据都能正常显示**
+
+## 🚨 关键修复点
+
+### **核心问题：**
+实时WebSocket数据处理缺少这一关键调用：
+```javascript
+window.m3Data.loadrQB303DeviceData(); // 地图渲染方法
+```
+
+### **修复方案：**
+在实时数据处理完成后，添加与测试数据相同的地图更新逻辑。
+
+## 🎯 测试验证
+
+### **推荐测试步骤：**
+
+1. **测试实时数据处理**
+   ```javascript
+   testRealTimeQB303()
+   ```
+
+2. **对比测试数据处理**
+   ```javascript
+   testQB303Data()
+   ```
+
+3. **验证地图显示**
+   - 检查设备图标是否显示在湖南省
+   - 验证设备位置坐标是否正确
+   - 测试点击设备图标的交互功能
+
+### **故障排除**
+如果仍有问题，检查：
+```javascript
+// 检查地图实例
+console.log('地图实例:', window.m3Data);
+
+// 检查渲染方法
+console.log('渲染方法:', typeof window.m3Data?.loadrQB303DeviceData);
+
+// 检查数据结构
+console.log('QB303数据:', window.m3Data?.qb303DeviceData);
+```
+
+## 📋 快速命令参考
+
+```javascript
+// === 推荐测试命令 ===
+testRealTimeQB303()             // 测试实时数据处理（推荐）
+testQB303Data()                 // 测试数据处理（对比）
+
+// === 基础调试命令 ===
+debugQB303Rendering()           // 检查渲染状态
+reloadAndShowQB303()            // 一键重载显示
+
+// === 数据检查命令 ===
+console.log('localStorage:', JSON.parse(localStorage.getItem("index-otherEquipmentList") || "[]"));
+console.log('地图数据:', window.m3Data?.qb303DeviceData);
+```
+
+## 🎉 修复完成
+
+现在实时WebSocket数据应该能够正常显示在地图上了！
+
+**关键修复：** 在实时数据处理后添加了与测试数据相同的地图更新调用逻辑。
+
+请执行 `testRealTimeQB303()` 来验证实时WebSocket数据的完整处理和显示流程！🚁📡✨