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

static/js/app.js

@@ -197,12 +197,25 @@ function apiRequest(endpoint, method = 'GET', data = null, maxRetries = 3) {
 
 // 数字格式化函数
 function formatNumber(num) {
+    // 显示完整数字的最大长度阈值
+    const MAX_FULL_LENGTH = 5;
+    
+    // 先获取完整数字字符串
+    const fullNumStr = num.toString();
+    
+    // 如果数字长度小于等于阈值，直接返回完整数字
+    if (fullNumStr.length <= MAX_FULL_LENGTH) {
+        return fullNumStr;
+    }
+    
+    // 否则使用缩写格式
     if (num >= 1000000) {
         return (num / 1000000).toFixed(1) + 'M';
     } else if (num >= 1000) {
         return (num / 1000).toFixed(1) + 'K';
     }
-    return num.toString();
+    
+    return fullNumStr;
 }
 
 // 确认对话框函数

static/js/dashboard.js

@@ -27,8 +27,7 @@ async function initDashboard() {
         // 初始化图表
         initCharts();
         
-        // 初始化统计卡片折线图
-        initStatCardCharts();
+
         
         // 初始化时间范围切换
         initTimeRangeToggle();
@@ -135,8 +134,7 @@ function processRealTimeData(stats) {
         // 更新图表数据
         updateCharts(stats, queryTypeStats);
         
-        // 更新卡片图表
-        updateStatCardCharts(stats);
+
         
         // 尝试从stats中获取总查询数等信息
         if (stats.dns) {
@@ -363,8 +361,7 @@ async function loadDashboardData() {
         updateTopBlockedTable(topBlockedDomains);
         updateRecentBlockedTable(recentBlockedDomains);
         
-        // 更新卡片图表
-        updateStatCardCharts(stats);
+
         
         // 尝试从stats中获取总查询数等信息
         if (stats.dns) {
@@ -521,8 +518,7 @@ async function loadDashboardData() {
         // 更新图表
         updateCharts({totalQueries, blockedQueries, allowedQueries, errorQueries});
         
-        // 更新统计卡片折线图
-        updateStatCardCharts(stats);
+
         
         // 确保响应时间图表使用API实时数据
         if (document.getElementById('avg-response-time')) {
@@ -558,6 +554,7 @@ 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) {
@@ -570,6 +567,12 @@ 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) {
@@ -774,6 +777,27 @@ function updateStatsCards(stats) {
         updatePercentage('allowed-percent', '---');
         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屏蔽域名表格
@@ -2292,12 +2316,25 @@ function generateTimeLabels(count) {
 
 // 格式化数字显示（使用K/M后缀）
 function formatNumber(num) {
+    // 显示完整数字的最大长度阈值
+    const MAX_FULL_LENGTH = 5;
+    
+    // 先获取完整数字字符串
+    const fullNumStr = num.toString();
+    
+    // 如果数字长度小于等于阈值，直接返回完整数字
+    if (fullNumStr.length <= MAX_FULL_LENGTH) {
+        return fullNumStr;
+    }
+    
+    // 否则使用缩写格式
     if (num >= 1000000) {
         return (num / 1000000).toFixed(1) + 'M';
     } else if (num >= 1000) {
         return (num / 1000).toFixed(1) + 'K';
     }
-    return num.toString();
+    
+    return fullNumStr;
 }
 
 // 更新运行状态

static/js/server-status.js

@@ -263,12 +263,25 @@ function addGlowEffect() {
 
 // 格式化数字
 function formatNumber(num) {
+  // 显示完整数字的最大长度阈值
+  const MAX_FULL_LENGTH = 5;
+  
+  // 先获取完整数字字符串
+  const fullNumStr = num.toString();
+  
+  // 如果数字长度小于等于阈值，直接返回完整数字
+  if (fullNumStr.length <= MAX_FULL_LENGTH) {
+    return fullNumStr;
+  }
+  
+  // 否则使用缩写格式
   if (num >= 1000000) {
     return (num / 1000000).toFixed(1) + 'M';
   } else if (num >= 1000) {
     return (num / 1000).toFixed(1) + 'K';
   }
-  return num.toString();
+  
+  return fullNumStr;
 }
 
 // 在DOM加载完成后初始化