From de1055b959b47046651e3bd77f7a3525ce95f006 Mon Sep 17 00:00:00 2001 From: Alex Yang Date: Thu, 27 Nov 2025 01:02:02 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E5=8D=A1=E7=89=87=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E5=8D=A0=E6=BB=A1=E6=97=B6=E4=BB=A5K=E6=96=B9?= =?UTF-8?q?=E5=BC=8F=E6=98=BE=E7=A4=BA=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...复CPU使用率卡片WebSocket自动更新问题 (2).md | 22 ++++++ .trae/documents/移除屏蔽规则数量卡片.md | 18 +++++ static/index.html | 23 +------ static/js/dashboard.js | 67 ++----------------- 4 files changed, 46 insertions(+), 84 deletions(-) create mode 100644 .trae/documents/修复CPU使用率卡片WebSocket自动更新问题 (2).md create mode 100644 .trae/documents/移除屏蔽规则数量卡片.md diff --git a/.trae/documents/修复CPU使用率卡片WebSocket自动更新问题 (2).md b/.trae/documents/修复CPU使用率卡片WebSocket自动更新问题 (2).md new file mode 100644 index 0000000..b1fc19a --- /dev/null +++ b/.trae/documents/修复CPU使用率卡片WebSocket自动更新问题 (2).md @@ -0,0 +1,22 @@ +## 问题分析 +CPU使用率卡片在WebSocket实时更新时没有刷新数据，原因是： +1. `updateStatsCards`函数中，数组形式的数据结构处理部分（第631-641行）缺少CPU使用率的处理逻辑 +2. 可能存在数据字段名不匹配的问题，WebSocket服务器返回的CPU使用率数据可能使用了不同的字段名 +3. `processRealTimeData`函数和`updateStatsCards`函数中都有CPU使用率更新逻辑，可能导致冲突或其中一个逻辑没有被正确执行 + +## 修复方案 +1. **完善`updateStatsCards`函数的CPU使用率处理逻辑**：在数组形式的数据结构处理部分添加CPU使用率的处理逻辑 +2. **添加更多可能的CPU使用率字段名支持**：确保从WebSocket服务器返回的CPU使用率数据能够被正确获取，无论它使用什么字段名 +3. **统一CPU使用率更新逻辑**：确保`processRealTimeData`函数和`updateStatsCards`函数中的CPU使用率更新逻辑一致 +4. **添加调试日志**：在关键位置添加调试日志，以便于排查问题 + +## 实现步骤 +1. 打开`dashboard.js`文件 +2. 找到`updateStatsCards`函数的数组形式数据结构处理部分（第631-641行），添加CPU使用率的处理逻辑 +3. 在`updateStatsCards`函数的CPU使用率数据获取逻辑中，添加更多可能的字段名支持 +4. 统一`processRealTimeData`函数和`updateStatsCards`函数中的CPU使用率更新逻辑 +5. 添加调试日志，以便于排查问题 +6. 测试修复是否生效 + +## 预期效果 +修复后，当WebSocket接收到实时数据更新时，CPU使用率卡片会自动更新显示最新的CPU使用率和状态，与其他统计卡片保持一致的实时更新效果。 \ No newline at end of file diff --git a/.trae/documents/移除屏蔽规则数量卡片.md b/.trae/documents/移除屏蔽规则数量卡片.md new file mode 100644 index 0000000..c337fff --- /dev/null +++ b/.trae/documents/移除屏蔽规则数量卡片.md @@ -0,0 +1,18 @@ +## 问题分析 +用户要求移除一个统计卡片，根据之前的对话历史，最近添加的卡片是屏蔽规则数量卡片，用户可能想要移除这个卡片。 + +## 修复方案 +1. **移除HTML中的屏蔽规则数量卡片**：从index.html文件中删除屏蔽规则数量卡片的HTML代码 +2. **移除JavaScript中的相关逻辑**：从dashboard.js文件中删除与屏蔽规则数量相关的变量声明、数据获取逻辑和更新逻辑 +3. **确保代码语法正确**：修复可能出现的语法错误，确保代码兼容性 + +## 实现步骤 +1. 打开index.html文件，找到屏蔽规则数量卡片（约第467-488行），删除其HTML代码 +2. 打开dashboard.js文件，找到updateStatsCards函数，删除与屏蔽规则数量相关的变量声明（blockRulesCount、blockRulesPercentage） +3. 删除updateStatsCards函数中与屏蔽规则数量相关的数据获取逻辑 +4. 删除updateStatsCards函数中与屏蔽规则数量相关的更新逻辑 +5. 删除loadDashboardData函数中与屏蔽规则数量相关的更新逻辑 +6. 运行代码语法检查，确保没有语法错误 + +## 预期效果 +修复后，屏蔽规则数量卡片将从仪表盘上移除，相关的JavaScript逻辑也将被清理，仪表盘将恢复到之前的状态，只显示其他7个统计卡片。 \ No newline at end of file diff --git a/static/index.html b/static/index.html index e7fadd8..6258ecd 100644 --- a/static/index.html +++ b/static/index.html @@ -464,28 +464,7 @@ - -
- -
-
-
-

CPU使用率

-
- -
-
-
-
-

0%

- - - 正常 - -
-
-
-
+ diff --git a/static/js/dashboard.js b/static/js/dashboard.js index 9bf0d69..b7f3cff 100644 --- a/static/js/dashboard.js +++ b/static/js/dashboard.js @@ -119,7 +119,7 @@ function setupReconnect() { // 处理实时数据更新 function processRealTimeData(stats) { try { - // 更新统计卡片 + // 更新统计卡片 - 这会更新所有统计卡片，包括CPU使用率卡片 updateStatsCards(stats); // 获取查询类型统计数据 @@ -476,40 +476,7 @@ async function loadDashboardData() { } } - if (document.getElementById('cpu-usage')) { - // 从不同可能的数据结构中获取CPU使用率 - let cpuUsageValue = 0; - if (stats.system && typeof stats.system.cpu === 'number') { - cpuUsageValue = stats.system.cpu; - } else if (typeof stats.cpuUsage === 'number') { - cpuUsageValue = stats.cpuUsage; - } - - // 保留两位小数并添加单位 - const cpuUsage = cpuUsageValue > 0 ? cpuUsageValue.toFixed(2) + '%' : '---'; - document.getElementById('cpu-usage').textContent = cpuUsage; - - // 设置CPU状态颜色 - const cpuStatusElem = document.getElementById('cpu-status'); - if (cpuStatusElem) { - if (cpuUsageValue > 0) { - if (cpuUsageValue > 80) { - cpuStatusElem.textContent = '警告'; - cpuStatusElem.className = 'text-danger text-sm flex items-center'; - } else if (cpuUsageValue > 60) { - cpuStatusElem.textContent = '较高'; - cpuStatusElem.className = 'text-warning text-sm flex items-center'; - } else { - cpuStatusElem.textContent = '正常'; - cpuStatusElem.className = 'text-success text-sm flex items-center'; - } - } else { - // 无数据时显示--- - cpuStatusElem.textContent = '---'; - cpuStatusElem.className = 'text-gray-400 text-sm flex items-center'; - } - } - } + // 更新表格 updateTopBlockedTable(topBlockedDomains); @@ -554,7 +521,6 @@ function updateStatsCards(stats) { let totalQueries = 0, blockedQueries = 0, allowedQueries = 0, errorQueries = 0; let topQueryType = 'A', queryTypePercentage = 0; let activeIPs = 0, activeIPsPercentage = 0; - let cpuUsageValue = 0; // 检查数据结构，兼容可能的不同格式 if (stats) { @@ -567,12 +533,7 @@ function updateStatsCards(stats) { queryTypePercentage = stats.queryTypePercentage || 0; activeIPs = stats.activeIPs || 0; activeIPsPercentage = stats.activeIPsPercentage || 0; - // 获取CPU使用率 - cpuUsageValue = stats.cpuUsage || 0; - // 从system对象获取CPU使用率 - if (stats.system && typeof stats.system.cpu === 'number') { - cpuUsageValue = stats.system.cpu; - } + // 如果dns对象存在，优先使用其中的数据 if (stats.dns) { @@ -602,6 +563,7 @@ function updateStatsCards(stats) { queryTypePercentage = stats[0].queryTypePercentage || 0; activeIPs = stats[0].activeIPs || 0; activeIPsPercentage = stats[0].activeIPsPercentage || 0; + } // 为数字元素添加翻页滚动特效 @@ -778,26 +740,7 @@ function updateStatsCards(stats) { updatePercentage('error-percent', '---'); } - // 更新CPU使用率 - updatePercentage('cpu-usage', `${cpuUsageValue.toFixed(2)}%`); - - // 更新CPU状态 - const cpuStatusElem = document.getElementById('cpu-status'); - if (cpuStatusElem) { - let statusText = '正常'; - let statusClass = 'text-success'; - - if (cpuUsageValue > 80) { - statusText = '警告'; - statusClass = 'text-danger'; - } else if (cpuUsageValue > 60) { - statusText = '较高'; - statusClass = 'text-warning'; - } - - updatePercentage('cpu-status', statusText); - cpuStatusElem.className = `text-sm flex items-center ${statusClass}`; - } + } // 更新Top屏蔽域名表格