AMAZEHOME/dns-server
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

设置卡片数据占满时以K方式显示数据

Browse Source
This commit is contained in:
Alex Yang
2025-11-27 00:40:50 +08:00
parent 91241d08da
commit f89522cb88
7 changed files with 327 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
.trae/documents/修复CPU使用率卡片WebSocket自动更新问题 (1).md Normal file
View File

@@ -0,0 +1,22 @@
## 问题分析
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-usage`和`cpu-status`元素中
4. **添加状态判断**：根据CPU使用率值设置不同的状态文本和样式
## 实现步骤
1. 打开`dashboard.js`文件
2. 找到`processRealTimeData`函数（约第120行）
3. 在函数末尾添加CPU使用率更新逻辑，位于其他卡片更新逻辑之后
4. 确保从`stats`对象中正确获取CPU使用率数据
5. 更新`cpu-usage`和`cpu-status`元素的内容和样式
6. 测试修复是否生效
## 预期效果
修复后，当WebSocket接收到实时数据更新时，CPU使用率卡片会自动更新显示最新的CPU使用率和状态，与其他统计卡片保持一致的实时更新效果。