181 lines
4.9 KiB
Markdown
181 lines
4.9 KiB
Markdown
# 🔧 QB303设备数据被清空问题修复指南
|
||
|
||
## 🎯 问题分析
|
||
|
||
从最新的测试日志可以看出：
|
||
```
|
||
当前QB303设备数据: {}
|
||
QB303设备数据: {}
|
||
图层中图形数量: 0
|
||
找到的QB303图形: 0 个
|
||
```
|
||
|
||
**问题：** QB303设备数据在某个时刻被清空了，导致设备无法显示。
|
||
|
||
## 🔍 问题根因
|
||
|
||
### **可能的原因：**
|
||
1. **`forceRefreshQB303Devices`方法缺陷** - 只清理图标，没有重新加载数据
|
||
2. **数据生命周期问题** - 数据在某些操作后被意外清空
|
||
3. **时序问题** - 数据加载和显示的时机不对
|
||
|
||
### **确认的问题：**
|
||
`forceRefreshQB303Devices`方法的逻辑有问题：
|
||
```javascript
|
||
// 只清理图标，但数据可能为空
|
||
this.loadrQB303DeviceData(); // 如果qb303DeviceData是空的，什么都不会创建
|
||
```
|
||
|
||
## ✅ 修复方案
|
||
|
||
### **1. 新增一键重载方法**
|
||
```javascript
|
||
reloadAndShowQB303()
|
||
```
|
||
**功能：**
|
||
- ✅ 清空现有数据
|
||
- ✅ 从localStorage重新加载数据
|
||
- ✅ 调用渲染方法
|
||
- ✅ 自动飞行到设备位置
|
||
- ✅ 显示详细的执行日志
|
||
|
||
### **2. 改进坐标修复测试**
|
||
```javascript
|
||
testCoordinateFix()
|
||
```
|
||
**新增逻辑：**
|
||
- ✅ 检测数据是否为空
|
||
- ✅ 如果为空，先强制加载数据
|
||
- ✅ 然后再进行刷新显示
|
||
|
||
## 🚀 推荐解决方案
|
||
|
||
### **方案1：一键重载（推荐）**
|
||
```javascript
|
||
reloadAndShowQB303()
|
||
```
|
||
这是最直接的解决方案，会完整重新加载和显示QB303设备。
|
||
|
||
### **方案2：改进的坐标修复测试**
|
||
```javascript
|
||
testCoordinateFix()
|
||
```
|
||
现在会智能检测数据状态并自动处理。
|
||
|
||
### **方案3：分步手动处理**
|
||
```javascript
|
||
// 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数据**
|
||
```javascript
|
||
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}]`);
|
||
});
|
||
}
|
||
```
|
||
|
||
### **检查地图实例数据**
|
||
```javascript
|
||
console.log('地图QB303数据:', window.m3Data?.qb303DeviceData);
|
||
console.log('数据条目数:', Object.keys(window.m3Data?.qb303DeviceData || {}).length);
|
||
```
|
||
|
||
## 🚨 故障排除
|
||
|
||
### **如果localStorage中没有数据**
|
||
```javascript
|
||
// 先发送测试数据
|
||
testQB303Data()
|
||
|
||
// 等待2秒后重新加载
|
||
setTimeout(() => {
|
||
reloadAndShowQB303()
|
||
}, 2000)
|
||
```
|
||
|
||
### **如果地图实例有问题**
|
||
```javascript
|
||
// 检查地图实例状态
|
||
console.log('地图实例:', window.m3Data);
|
||
console.log('图形图层:', window.m3Data?.graphicLayer);
|
||
console.log('渲染方法:', typeof window.m3Data?.loadrQB303DeviceData);
|
||
```
|
||
|
||
### **如果坐标仍然undefined**
|
||
```javascript
|
||
// 检查数据结构
|
||
Object.entries(window.m3Data.qb303DeviceData).forEach(([key, value]) => {
|
||
console.log(`设备 ${key}:`, value);
|
||
if (value.info) {
|
||
console.log(` 坐标: [${value.info.longitude}, ${value.info.latitude}]`);
|
||
}
|
||
});
|
||
```
|
||
|
||
## 📋 快速命令参考
|
||
|
||
```javascript
|
||
// === 推荐解决方案 ===
|
||
reloadAndShowQB303() // 一键重载和显示（推荐）
|
||
testCoordinateFix() // 改进的坐标修复测试
|
||
|
||
// === 基础调试 ===
|
||
debugQB303Rendering() // 检查渲染状态
|
||
forceLoadQB303Data() // 强制加载数据
|
||
|
||
// === 数据检查 ===
|
||
// 检查localStorage
|
||
console.log('localStorage:', JSON.parse(localStorage.getItem("index-otherEquipmentList") || "[]"));
|
||
|
||
// 检查地图数据
|
||
console.log('地图数据:', window.m3Data?.qb303DeviceData);
|
||
```
|
||
|
||
## 🎯 解决步骤
|
||
|
||
1. **立即执行** `reloadAndShowQB303()`
|
||
2. **观察日志** 确认数据加载和渲染过程
|
||
3. **检查地图** 应该能看到QB303设备显示在湖南省
|
||
4. **验证交互** 点击设备图标测试功能
|
||
|
||
现在数据清空问题已经有了完整的解决方案，请执行 `reloadAndShowQB303()` 来重新加载和显示QB303设备！🚁🔧✨
|