zyp/xiaomubiao-master

Fork 0

Files

zyp b3089a254e Initial commit

2026-05-22 16:13:20 +08:00

8.2 KiB

Raw Permalink Blame History

🔧 QB303实时WebSocket数据显示修复指南

🎯 问题根因分析

您的关键发现：

✅ 测试数据 (testQB303Data()) - 可以正常显示在地图上 ❌ 实时WebSocket数据 - 无法在地图上显示

问题根因：

实时WebSocket数据处理后缺少地图更新调用！

🔍 详细对比分析

✅ 测试数据处理流程（正常）

// 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数据处理流程（有问题）

// 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数据处理后添加了地图更新逻辑：

// 保存到本地存储
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更新完成

🚀 新增测试工具

实时数据测试工具

testRealTimeQB303() // 专门测试实时WebSocket数据处理和显示

功能：

📡 使用您提供的真实实时数据格式
🔄 模拟完整的WebSocket数据接收和处理流程
📍 验证数据从接收到地图显示的完整链路
✈️ 自动飞行到设备位置进行验证

实时数据格式

{
    "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数据处理缺少这一关键调用：

window.m3Data.loadrQB303DeviceData(); // 地图渲染方法

修复方案：

在实时数据处理完成后，添加与测试数据相同的地图更新逻辑。

🎯 测试验证

故障排除

如果仍有问题，检查：

// 检查地图实例
console.log('地图实例:', window.m3Data);

// 检查渲染方法
console.log('渲染方法:', typeof window.m3Data?.loadrQB303DeviceData);

// 检查数据结构
console.log('QB303数据:', window.m3Data?.qb303DeviceData);

📋 快速命令参考

// === 推荐测试命令 ===
testRealTimeQB303()             // 测试实时数据处理（推荐）
testQB303Data()                 // 测试数据处理（对比）

// === 基础调试命令 ===
debugQB303Rendering()           // 检查渲染状态
reloadAndShowQB303()            // 一键重载显示

// === 数据检查命令 ===
console.log('localStorage:', JSON.parse(localStorage.getItem("index-otherEquipmentList") || "[]"));
console.log('地图数据:', window.m3Data?.qb303DeviceData);

🎉 修复完成

现在实时WebSocket数据应该能够正常显示在地图上了！

关键修复： 在实时数据处理后添加了与测试数据相同的地图更新调用逻辑。

请执行 testRealTimeQB303() 来验证实时WebSocket数据的完整处理和显示流程！🚁📡✨

8.2 KiB Raw Permalink Blame History Unescape Escape