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 01:02:02 +08:00
parent f89522cb88
commit de1055b959
4 changed files with 46 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
static/index.html
View File

@@ -464,28 +464,7 @@
</div>
</div>
<!-- CPU使用率卡片 -->
<div class="bg-white rounded-lg p-4 card-shadow relative overflow-hidden">
<!-- 颜色蒙版 -->
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-warning opacity-10"></div>
<div class="relative z-10">
<div class="flex items-center justify-between mb-4">
<h3 class="text-gray-500 font-medium">CPU使用率</h3>
<div class="p-2 rounded-full bg-warning/10 text-warning">
<i class="fa fa-microchip"></i>
</div>
</div>
<div class="mb-2">
<div class="flex items-end justify-between">
<p class="text-3xl font-bold" id="cpu-usage">0%</p>
<span class="text-warning text-sm flex items-center">
<i class="fa fa-bolt mr-1"></i>
<span id="cpu-status">正常</span>
</span>
</div>
</div>
</div>
</div>
</div>
<!-- 图表和数据表格 -->

67
static/js/dashboard.js
View File

@@ -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屏蔽域名表格