161 lines
4.6 KiB
Markdown
161 lines
4.6 KiB
Markdown
# QB303 数据调试指南
|
||
|
||
## 🔍 问题分析
|
||
|
||
您的QB303测试数据能够发送，但在面板中没有显示。我已经添加了详细的调试信息来帮助排查问题。
|
||
|
||
## 🛠️ 调试步骤
|
||
|
||
### 1. 在浏览器控制台运行增强版测试函数
|
||
|
||
```javascript
|
||
testQB303Data()
|
||
```
|
||
|
||
这个函数现在会输出详细的调试信息：
|
||
- ✅ 处理前的设备列表状态
|
||
- ✅ 发送的测试数据
|
||
- ✅ 处理后的设备列表状态
|
||
- ✅ localStorage中的数据
|
||
|
||
### 2. 检查关键变量
|
||
|
||
运行以下命令检查关键变量的状态：
|
||
|
||
```javascript
|
||
// 检查其他装备列表
|
||
console.log('otherEquipmentList:', window.otherEquipmentList || 'undefined')
|
||
|
||
// 检查设备总数
|
||
console.log('otherEquipmentCount:', window.otherEquipmentCount || 'undefined')
|
||
|
||
// 检查当前激活的设备选项卡
|
||
console.log('activeDeviceTab:', window.activeDeviceTab || 'undefined')
|
||
|
||
// 检查本地存储
|
||
console.log('localStorage data:', localStorage.getItem("index-otherEquipmentList"))
|
||
```
|
||
|
||
### 3. 检查UI显示状态
|
||
|
||
```javascript
|
||
// 检查其他装备选项卡是否激活
|
||
const activeTab = document.querySelector('.device-tab.active');
|
||
console.log('激活的选项卡:', activeTab?.textContent || 'none');
|
||
|
||
// 检查其他装备面板是否可见
|
||
const otherPanel = document.querySelector('[v-if="activeDeviceTab === \'otherEquipment\'"]');
|
||
console.log('其他装备面板:', otherPanel ? '存在' : '不存在');
|
||
|
||
// 检查设备列表容器
|
||
const deviceList = document.querySelector('.device-list-scroll');
|
||
console.log('设备列表容器:', deviceList ? '存在' : '不存在');
|
||
```
|
||
|
||
## 🐛 可能的问题原因
|
||
|
||
### 1. Vue 响应式问题
|
||
如果数据更新了但UI没有反应，可能是Vue响应式的问题：
|
||
|
||
```javascript
|
||
// 强制触发响应式更新
|
||
if (window.vue3ForceUpdate) {
|
||
window.vue3ForceUpdate();
|
||
}
|
||
```
|
||
|
||
### 2. 选项卡切换问题
|
||
确保您在"其他装备"选项卡上：
|
||
|
||
```javascript
|
||
// 切换到其他装备选项卡
|
||
const otherTab = document.querySelector('[onclick*="otherEquipment"]');
|
||
if (otherTab) {
|
||
otherTab.click();
|
||
console.log('已切换到其他装备选项卡');
|
||
}
|
||
```
|
||
|
||
### 3. 数据格式问题
|
||
检查数据是否符合预期格式：
|
||
|
||
```javascript
|
||
// 检查最后一个添加的设备
|
||
const devices = JSON.parse(localStorage.getItem("index-otherEquipmentList") || '[]');
|
||
const lastDevice = devices[devices.length - 1];
|
||
console.log('最后添加的设备:', lastDevice);
|
||
|
||
// 验证必要字段
|
||
if (lastDevice) {
|
||
console.log('设备ID:', lastDevice.equipmentId);
|
||
console.log('设备类型:', lastDevice.equipmentType);
|
||
console.log('在线状态:', lastDevice.online_status);
|
||
console.log('位置信息:', lastDevice.latitude, lastDevice.longitude);
|
||
}
|
||
```
|
||
|
||
## 🔧 修复建议
|
||
|
||
### 如果数据正确但UI不显示：
|
||
|
||
1. **检查Vue组件绑定**：
|
||
```javascript
|
||
// 在Vue DevTools中检查组件状态
|
||
// 或者在控制台检查
|
||
console.log('Vue组件实例:', document.querySelector('#app').__vue__);
|
||
```
|
||
|
||
2. **手动触发重新渲染**：
|
||
```javascript
|
||
// 如果有Vue实例引用
|
||
if (window.vueInstance) {
|
||
window.vueInstance.$forceUpdate();
|
||
}
|
||
```
|
||
|
||
3. **清除缓存重新加载**：
|
||
```javascript
|
||
// 清除localStorage并重新初始化
|
||
localStorage.removeItem("index-otherEquipmentList");
|
||
location.reload();
|
||
```
|
||
|
||
## 📋 预期输出示例
|
||
|
||
当`testQB303Data()`正常工作时，您应该看到类似以下的输出：
|
||
|
||
```
|
||
==== 测试QB303设备数据 ====
|
||
当前其他装备列表长度: 0
|
||
当前其他装备列表内容: []
|
||
接收到消息
|
||
{version: '1.0', timestamp: 1757294937210, data: {…}, biz_code: 'qb303_device_status'}
|
||
收到QB303设备状态数据: {version: '1.0', timestamp: 1757294937210, data: {…}, biz_code: 'qb303_device_status'}
|
||
解析的QB303设备数据: {equipmentId: '2', equipmentType: 'QB303设备', category: '平台设备', ...}
|
||
新的QB303设备 2 已添加
|
||
发送QB303测试数据: {version: '1.0', timestamp: 1757294937210, data: {…}, biz_code: 'qb303_device_status'}
|
||
QB303设备数据已发送，请检查其他装备列表
|
||
处理后其他装备列表长度: 1
|
||
处理后其他装备列表内容: [{equipmentId: '2', equipmentType: 'QB303设备', ...}]
|
||
其他装备设备总数: 1
|
||
localStorage数据: [{"equipmentId":"2","equipmentType":"QB303设备",...}]
|
||
```
|
||
|
||
## ⚡ 快速修复命令
|
||
|
||
如果遇到问题，请依次运行这些命令：
|
||
|
||
```javascript
|
||
// 1. 清理并重新测试
|
||
localStorage.removeItem("index-otherEquipmentList");
|
||
testQB303Data();
|
||
|
||
// 2. 检查选项卡
|
||
document.querySelector('[data-tab="otherEquipment"]')?.click();
|
||
|
||
// 3. 强制刷新数据
|
||
setTimeout(() => location.reload(), 1000);
|
||
```
|
||
|
||
请运行这些调试命令并告诉我输出结果，这样我就能确定具体的问题所在。
|