Files
dns-server/dns/.trae/documents/修复CPU使用率卡片WebSocket自动更新问题 (1).md
T
Alex Yang cdac4fcf43 update
2026-01-16 11:09:11 +08:00

1.5 KiB

问题分析

CPU使用率卡片在WebSocket实时更新时没有刷新数据,原因是:

  1. processRealTimeData函数调用了updateStatsCards(stats),但该函数的CPU使用率更新逻辑可能没有被正确执行
  2. processRealTimeData函数对其他卡片(如平均响应时间、最常用查询类型、活跃IP数)有单独的更新逻辑,但缺少了CPU使用率卡片的更新逻辑
  3. loadDashboardData函数中有完整的CPU使用率更新逻辑,这就是为什么页面初始加载时CPU使用率能显示,但后续WebSocket更新时不能显示的原因

修复方案

  1. processRealTimeData函数中添加CPU使用率卡片的更新逻辑:类似于loadDashboardData函数中的实现
  2. 确保从stats对象中正确获取CPU使用率数据:支持从不同的数据结构中获取CPU使用率
  3. 更新DOM元素:将获取到的CPU使用率数据更新到cpu-usagecpu-status元素中
  4. 添加状态判断:根据CPU使用率值设置不同的状态文本和样式

实现步骤

  1. 打开dashboard.js文件
  2. 找到processRealTimeData函数(约第120行)
  3. 在函数末尾添加CPU使用率更新逻辑,位于其他卡片更新逻辑之后
  4. 确保从stats对象中正确获取CPU使用率数据
  5. 更新cpu-usagecpu-status元素的内容和样式
  6. 测试修复是否生效

预期效果

修复后,当WebSocket接收到实时数据更新时,CPU使用率卡片会自动更新显示最新的CPU使用率和状态,与其他统计卡片保持一致的实时更新效果。