zyp/xiaomubiao-master

Fork 0

Files

zyp b3089a254e Initial commit

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

4.9 KiB

Raw Blame History

🔧 QB303设备数据被清空问题修复指南

🎯 问题分析

从最新的测试日志可以看出：

当前QB303设备数据: {}
QB303设备数据: {}
图层中图形数量: 0
找到的QB303图形: 0 个

问题： QB303设备数据在某个时刻被清空了，导致设备无法显示。

🔍 问题根因

可能的原因：

forceRefreshQB303Devices方法缺陷 - 只清理图标，没有重新加载数据
数据生命周期问题 - 数据在某些操作后被意外清空
时序问题 - 数据加载和显示的时机不对

确认的问题：

forceRefreshQB303Devices方法的逻辑有问题：

// 只清理图标，但数据可能为空
this.loadrQB303DeviceData(); // 如果qb303DeviceData是空的，什么都不会创建

✅ 修复方案

1. 新增一键重载方法

reloadAndShowQB303()

功能：

✅ 清空现有数据
✅ 从localStorage重新加载数据
✅ 调用渲染方法
✅ 自动飞行到设备位置
✅ 显示详细的执行日志

2. 改进坐标修复测试

testCoordinateFix()

新增逻辑：

✅ 检测数据是否为空
✅ 如果为空，先强制加载数据
✅ 然后再进行刷新显示

🚀 推荐解决方案

方案1：一键重载（推荐）

reloadAndShowQB303()

这是最直接的解决方案，会完整重新加载和显示QB303设备。

方案2：改进的坐标修复测试

testCoordinateFix()

现在会智能检测数据状态并自动处理。

方案3：分步手动处理

// 1. 检查localStorage数据
const localData = localStorage.getItem("index-otherEquipmentList");
console.log('localStorage数据:', JSON.parse(localData));

// 2. 强制加载数据
forceLoadQB303Data();

// 3. 检查加载结果
console.log('加载后数据:', window.m3Data.qb303DeviceData);

// 4. 渲染显示
window.m3Data.loadrQB303DeviceData();

📊 预期修复结果

使用`reloadAndShowQB303()`应该看到：

=== 一键重新加载和显示QB303设备 ===
步骤1：清空现有数据
步骤2：从localStorage重新加载数据
找到在线QB303设备: 1 个
✅ 加载设备 dy04: [112.8945530952381, 28.20648476190476]
步骤3：调用渲染方法
加载QB303设备到地图: dy04 {info: {...}}
设备信息: {equipmentId: 'dy04', ...}
设备坐标: [112.8945530952381, 28.20648476190476, 200]
✅ QB303设备 dy04 已添加到地图
步骤4：检查结果
QB303设备数据: {dy04: {...}}
图层中图形数量: 1
找到的QB303图形: 1 个

🔍 数据状态检查

检查localStorage数据

const localData = localStorage.getItem("index-otherEquipmentList");
if (localData) {
  const devices = JSON.parse(localData);
  const qb303 = devices.filter(d => d.equipmentType === 'QB303设备');
  console.log('localStorage中QB303设备:', qb303.length);
  qb303.forEach(d => {
    console.log(`${d.equipmentId}: 在线=${d.online_status}, 坐标=[${d.longitude}, ${d.latitude}]`);
  });
}

检查地图实例数据

console.log('地图QB303数据:', window.m3Data?.qb303DeviceData);
console.log('数据条目数:', Object.keys(window.m3Data?.qb303DeviceData || {}).length);

🚨 故障排除

如果localStorage中没有数据

// 先发送测试数据
testQB303Data()

// 等待2秒后重新加载
setTimeout(() => {
    reloadAndShowQB303()
}, 2000)

如果地图实例有问题

// 检查地图实例状态
console.log('地图实例:', window.m3Data);
console.log('图形图层:', window.m3Data?.graphicLayer);
console.log('渲染方法:', typeof window.m3Data?.loadrQB303DeviceData);

如果坐标仍然undefined

// 检查数据结构
Object.entries(window.m3Data.qb303DeviceData).forEach(([key, value]) => {
  console.log(`设备 ${key}:`, value);
  if (value.info) {
    console.log(`  坐标: [${value.info.longitude}, ${value.info.latitude}]`);
  }
});

📋 快速命令参考

// === 推荐解决方案 ===
reloadAndShowQB303()            // 一键重载和显示（推荐）
testCoordinateFix()             // 改进的坐标修复测试

// === 基础调试 ===
debugQB303Rendering()           // 检查渲染状态
forceLoadQB303Data()            // 强制加载数据

// === 数据检查 ===
// 检查localStorage
console.log('localStorage:', JSON.parse(localStorage.getItem("index-otherEquipmentList") || "[]"));

// 检查地图数据
console.log('地图数据:', window.m3Data?.qb303DeviceData);

🎯 解决步骤

立即执行 reloadAndShowQB303()
观察日志 确认数据加载和渲染过程
检查地图 应该能看到QB303设备显示在湖南省
验证交互 点击设备图标测试功能

现在数据清空问题已经有了完整的解决方案，请执行 reloadAndShowQB303() 来重新加载和显示QB303设备！🚁🔧✨

4.9 KiB Raw Blame History Unescape Escape