zyp/xiaomubiao-master

Fork 0

Files

zyp b3089a254e Initial commit

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

4.6 KiB

Raw Permalink Blame History

QB303 数据调试指南

🔍 问题分析

您的QB303测试数据能够发送，但在面板中没有显示。我已经添加了详细的调试信息来帮助排查问题。

🛠️ 调试步骤

1. 在浏览器控制台运行增强版测试函数

testQB303Data()

这个函数现在会输出详细的调试信息：

✅ 处理前的设备列表状态
✅ 发送的测试数据
✅ 处理后的设备列表状态
✅ localStorage中的数据

2. 检查关键变量

运行以下命令检查关键变量的状态：

// 检查其他装备列表
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显示状态

// 检查其他装备选项卡是否激活
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响应式的问题：

// 强制触发响应式更新
if (window.vue3ForceUpdate) {
    window.vue3ForceUpdate();
}

2. 选项卡切换问题

确保您在"其他装备"选项卡上：

// 切换到其他装备选项卡
const otherTab = document.querySelector('[onclick*="otherEquipment"]');
if (otherTab) {
    otherTab.click();
    console.log('已切换到其他装备选项卡');
}

3. 数据格式问题

检查数据是否符合预期格式：

// 检查最后一个添加的设备
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不显示：

检查Vue组件绑定：

// 在Vue DevTools中检查组件状态
// 或者在控制台检查
console.log('Vue组件实例:', document.querySelector('#app').__vue__);

手动触发重新渲染：

// 如果有Vue实例引用
if (window.vueInstance) {
    window.vueInstance.$forceUpdate();
}

清除缓存重新加载：

// 清除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设备",...}]

⚡ 快速修复命令

如果遇到问题，请依次运行这些命令：

// 1. 清理并重新测试
localStorage.removeItem("index-otherEquipmentList");
testQB303Data();

// 2. 检查选项卡
document.querySelector('[data-tab="otherEquipment"]')?.click();

// 3. 强制刷新数据
setTimeout(() => location.reload(), 1000);

请运行这些调试命令并告诉我输出结果，这样我就能确定具体的问题所在。

4.6 KiB Raw Permalink Blame History Unescape Escape