设置卡片数据占满时以K方式显示数据
This commit is contained in:
Alex Yang
22
.trae/documents/修复CPU使用率卡片WebSocket自动更新问题 (1).md
Normal file
22
.trae/documents/修复CPU使用率卡片WebSocket自动更新问题 (1).md
Normal 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使用率和状态，与其他统计卡片保持一致的实时更新效果。
|
||||||
18
.trae/documents/修复CPU使用率卡片WebSocket自动更新问题.md
Normal file
18
.trae/documents/修复CPU使用率卡片WebSocket自动更新问题.md
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
## 问题分析
|
||||||
|
CPU使用率卡片数据不会跟随WebSocket自动更新的原因是`updateStatsCards`函数中缺少了CPU使用率的更新逻辑。该函数负责处理WebSocket实时数据并更新统计卡片，但只更新了7个统计卡片，遗漏了CPU使用率卡片。
|
||||||
|
|
||||||
|
## 修复方案
|
||||||
|
1. **修改`updateStatsCards`函数**：在`dashboard.js`文件中添加CPU使用率和状态的更新逻辑
|
||||||
|
2. **添加数据获取逻辑**：从不同可能的数据结构中获取CPU使用率数据
|
||||||
|
3. **更新DOM元素**：将获取到的CPU使用率数据更新到`cpu-usage`和`cpu-status`元素中
|
||||||
|
4. **添加状态判断**：根据CPU使用率值设置不同的状态文本和样式
|
||||||
|
|
||||||
|
## 实现步骤
|
||||||
|
1. 打开`dashboard.js`文件
|
||||||
|
2. 找到`updateStatsCards`函数（约第550行）
|
||||||
|
3. 在函数末尾添加CPU使用率更新逻辑
|
||||||
|
4. 确保从`stats`对象中正确获取CPU使用率数据
|
||||||
|
5. 更新`cpu-usage`和`cpu-status`元素的内容和样式
|
||||||
|
|
||||||
|
## 预期效果
|
||||||
|
修复后，当WebSocket接收到实时数据更新时，CPU使用率卡片会自动更新显示最新的CPU使用率和状态，与其他统计卡片保持一致的实时更新效果。
|
||||||
40
.trae/documents/减小统计卡片大小并移除统计图.md
Normal file
40
.trae/documents/减小统计卡片大小并移除统计图.md
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
# 减小统计卡片大小并移除统计图
|
||||||
|
|
||||||
|
## 需求分析
|
||||||
|
用户希望减小统计卡片的大小并移除卡片中的统计图，只保留数值和基本信息。
|
||||||
|
|
||||||
|
## 实现方案
|
||||||
|
|
||||||
|
### 1. 修改统计卡片HTML结构
|
||||||
|
- 移除每个统计卡片中包含canvas元素的div（高度为16px的图表区域）
|
||||||
|
- 减小卡片的内边距（从p-6改为p-4）
|
||||||
|
- 调整卡片内部元素的间距，确保布局紧凑美观
|
||||||
|
|
||||||
|
### 2. 移除图表相关JavaScript代码
|
||||||
|
- 移除dashboard.js中对`initStatCardCharts()`和`updateStatCardCharts()`函数的调用
|
||||||
|
- 这些函数负责初始化和更新统计卡片中的折线图
|
||||||
|
- 移除后不会影响其他图表功能（如主图表区域的图表）
|
||||||
|
|
||||||
|
### 3. 具体修改点
|
||||||
|
|
||||||
|
#### HTML文件修改（index.html）
|
||||||
|
- 对于每个统计卡片（共8个），移除包含canvas的div元素
|
||||||
|
- 减小卡片内边距：将`p-6`改为`p-4`
|
||||||
|
- 调整卡片内部元素的margin和padding，确保布局紧凑
|
||||||
|
|
||||||
|
#### JavaScript文件修改（dashboard.js）
|
||||||
|
- 移除第31行的`initStatCardCharts()`调用
|
||||||
|
- 移除第139行的`updateStatCardCharts(stats)`调用
|
||||||
|
- 移除第367行的`updateStatCardCharts(stats)`调用
|
||||||
|
- 移除第525行的`updateStatCardCharts(stats)`调用
|
||||||
|
|
||||||
|
## 预期效果
|
||||||
|
- 统计卡片大小减小，布局更紧凑
|
||||||
|
- 卡片中只显示标题、数值和百分比信息
|
||||||
|
- 移除了不必要的图表，减少了页面加载时间和资源消耗
|
||||||
|
- 整体界面更简洁，重点突出数值信息
|
||||||
|
|
||||||
|
## 注意事项
|
||||||
|
- 确保移除图表后不会导致其他功能错误
|
||||||
|
- 保持卡片之间的一致性和美观性
|
||||||
|
- 确保数值和百分比信息清晰可见
|
||||||
@@ -305,209 +305,188 @@
|
|||||||
<div id="dashboard-content" class="space-y-6">
|
<div id="dashboard-content" class="space-y-6">
|
||||||
<!-- 统计卡片 -->
|
<!-- 统计卡片 -->
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
<!-- 查询总量卡片 -->
|
<!-- 查询总量卡片 -->
|
||||||
<div class="bg-blue-50 rounded-lg p-6 card-shadow relative overflow-hidden">
|
<div class="bg-blue-50 rounded-lg p-4 card-shadow relative overflow-hidden">
|
||||||
<!-- 颜色蒙版 -->
|
<!-- 颜色蒙版 -->
|
||||||
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-primary opacity-10"></div>
|
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-primary opacity-10"></div>
|
||||||
<div class="relative z-10">
|
<div class="relative z-10">
|
||||||
<div class="flex items-center justify-between mb-4">
|
<div class="flex items-center justify-between mb-4">
|
||||||
<h3 class="text-gray-500 font-medium">查询总量</h3>
|
<h3 class="text-gray-500 font-medium">查询总量</h3>
|
||||||
<div class="p-2 rounded-full bg-primary/10 text-primary">
|
<div class="p-2 rounded-full bg-primary/10 text-primary">
|
||||||
<i class="fa fa-refresh"></i>
|
<i class="fa fa-refresh"></i>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<div class="flex items-end justify-between">
|
|
||||||
<p class="text-3xl font-bold" id="total-queries">0</p>
|
|
||||||
<span class="text-success text-sm flex items-center">
|
|
||||||
<i class="fa fa-arrow-up mr-1"></i>
|
|
||||||
<span id="queries-percent">0%</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="h-16 mt-2">
|
|
||||||
<canvas id="query-chart"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<!-- 屏蔽数量卡片 -->
|
<div class="mb-2">
|
||||||
<div class="bg-red-50 rounded-lg p-6 card-shadow relative overflow-hidden">
|
<div class="flex items-end justify-between">
|
||||||
<!-- 颜色蒙版 -->
|
<p class="text-3xl font-bold" id="total-queries">0</p>
|
||||||
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-danger opacity-10"></div>
|
<span class="text-success text-sm flex items-center">
|
||||||
<div class="relative z-10">
|
<i class="fa fa-arrow-up mr-1"></i>
|
||||||
<div class="flex items-center justify-between mb-4">
|
<span id="queries-percent">0%</span>
|
||||||
<h3 class="text-gray-500 font-medium">屏蔽数量</h3>
|
</span>
|
||||||
<div class="p-2 rounded-full bg-danger/10 text-danger">
|
|
||||||
<i class="fa fa-ban"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<div class="flex items-end justify-between">
|
|
||||||
<p class="text-3xl font-bold" id="blocked-queries">0</p>
|
|
||||||
<span class="text-danger text-sm flex items-center">
|
|
||||||
<i class="fa fa-arrow-up mr-1"></i>
|
|
||||||
<span id="blocked-percent">0%</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="h-16 mt-2">
|
|
||||||
<canvas id="blocked-chart"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<!-- 正常解析卡片 -->
|
</div>
|
||||||
<div class="bg-green-50 rounded-lg p-6 card-shadow relative overflow-hidden">
|
</div>
|
||||||
<!-- 颜色蒙版 -->
|
|
||||||
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-success opacity-10"></div>
|
<!-- 屏蔽数量卡片 -->
|
||||||
<div class="relative z-10">
|
<div class="bg-red-50 rounded-lg p-4 card-shadow relative overflow-hidden">
|
||||||
<div class="flex items-center justify-between mb-4">
|
<!-- 颜色蒙版 -->
|
||||||
<h3 class="text-gray-500 font-medium">正常解析</h3>
|
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-danger opacity-10"></div>
|
||||||
<div class="p-2 rounded-full bg-success/10 text-success">
|
<div class="relative z-10">
|
||||||
<i class="fa fa-check"></i>
|
<div class="flex items-center justify-between mb-4">
|
||||||
</div>
|
<h3 class="text-gray-500 font-medium">屏蔽数量</h3>
|
||||||
</div>
|
<div class="p-2 rounded-full bg-danger/10 text-danger">
|
||||||
<div class="mb-2">
|
<i class="fa fa-ban"></i>
|
||||||
<div class="flex items-end justify-between">
|
|
||||||
<p class="text-3xl font-bold" id="allowed-queries">0</p>
|
|
||||||
<span class="text-success text-sm flex items-center">
|
|
||||||
<i class="fa fa-arrow-up mr-1"></i>
|
|
||||||
<span id="allowed-percent">0%</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="h-16 mt-2">
|
|
||||||
<canvas id="allowed-chart"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<!-- 错误数量卡片 -->
|
<div class="mb-2">
|
||||||
<div class="bg-yellow-50 rounded-lg p-6 card-shadow relative overflow-hidden">
|
<div class="flex items-end justify-between">
|
||||||
<!-- 颜色蒙版 -->
|
<p class="text-3xl font-bold" id="blocked-queries">0</p>
|
||||||
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-warning opacity-10"></div>
|
<span class="text-danger text-sm flex items-center">
|
||||||
<div class="relative z-10">
|
<i class="fa fa-arrow-up mr-1"></i>
|
||||||
<div class="flex items-center justify-between mb-4">
|
<span id="blocked-percent">0%</span>
|
||||||
<h3 class="text-gray-500 font-medium">错误数量</h3>
|
</span>
|
||||||
<div class="p-2 rounded-full bg-warning/10 text-warning">
|
|
||||||
<i class="fa fa-exclamation-triangle"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<div class="flex items-end justify-between">
|
|
||||||
<p class="text-3xl font-bold" id="error-queries">0</p>
|
|
||||||
<span class="text-warning text-sm flex items-center">
|
|
||||||
<i class="fa fa-arrow-up mr-1"></i>
|
|
||||||
<span id="error-percent">0%</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="h-16 mt-2">
|
|
||||||
<canvas id="error-chart"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<!-- 平均响应时间卡片 -->
|
</div>
|
||||||
<div class="bg-white rounded-lg p-6 card-shadow relative overflow-hidden">
|
</div>
|
||||||
<!-- 颜色蒙版 -->
|
|
||||||
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-info opacity-10"></div>
|
<!-- 正常解析卡片 -->
|
||||||
<div class="relative z-10">
|
<div class="bg-green-50 rounded-lg p-4 card-shadow relative overflow-hidden">
|
||||||
<div class="flex items-center justify-between mb-4">
|
<!-- 颜色蒙版 -->
|
||||||
<h3 class="text-gray-500 font-medium">平均响应时间</h3>
|
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-success opacity-10"></div>
|
||||||
<div class="p-2 rounded-full bg-info/10 text-info">
|
<div class="relative z-10">
|
||||||
<i class="fa fa-clock-o"></i>
|
<div class="flex items-center justify-between mb-4">
|
||||||
</div>
|
<h3 class="text-gray-500 font-medium">正常解析</h3>
|
||||||
</div>
|
<div class="p-2 rounded-full bg-success/10 text-success">
|
||||||
<div class="mb-2">
|
<i class="fa fa-check"></i>
|
||||||
<div class="flex items-end justify-between">
|
|
||||||
<p class="text-3xl font-bold" id="avg-response-time">0ms</p>
|
|
||||||
<span class="text-success text-sm flex items-center">
|
|
||||||
<i class="fa fa-arrow-down mr-1"></i>
|
|
||||||
<span id="response-time-percent">0%</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="h-16 mt-2">
|
|
||||||
<canvas id="response-time-chart"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<!-- 最常用查询类型卡片 -->
|
<div class="mb-2">
|
||||||
<div class="bg-white rounded-lg p-6 card-shadow relative overflow-hidden">
|
<div class="flex items-end justify-between">
|
||||||
<!-- 颜色蒙版 -->
|
<p class="text-3xl font-bold" id="allowed-queries">0</p>
|
||||||
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-secondary opacity-10"></div>
|
<span class="text-success text-sm flex items-center">
|
||||||
<div class="relative z-10">
|
<i class="fa fa-arrow-up mr-1"></i>
|
||||||
<div class="flex items-center justify-between mb-4">
|
<span id="allowed-percent">0%</span>
|
||||||
<h3 class="text-gray-500 font-medium">最常用查询类型</h3>
|
</span>
|
||||||
<div class="p-2 rounded-full bg-secondary/10 text-secondary">
|
|
||||||
<i class="fa fa-database"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-end justify-between">
|
|
||||||
<p class="text-3xl font-bold" id="top-query-type">A</p>
|
|
||||||
<span class="text-primary text-sm flex items-center">
|
|
||||||
<i class="fa fa-circle text-xs mr-1"></i>
|
|
||||||
<span id="query-type-percentage">0%</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<!-- 活跃来源IP数卡片 -->
|
</div>
|
||||||
<div class="bg-white rounded-lg p-6 card-shadow relative overflow-hidden">
|
</div>
|
||||||
<!-- 颜色蒙版 -->
|
|
||||||
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-success opacity-10"></div>
|
<!-- 错误数量卡片 -->
|
||||||
<div class="relative z-10">
|
<div class="bg-yellow-50 rounded-lg p-4 card-shadow relative overflow-hidden">
|
||||||
<div class="flex items-center justify-between mb-4">
|
<!-- 颜色蒙版 -->
|
||||||
<h3 class="text-gray-500 font-medium">活跃来源IP</h3>
|
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-warning opacity-10"></div>
|
||||||
<div class="p-2 rounded-full bg-success/10 text-success">
|
<div class="relative z-10">
|
||||||
<i class="fa fa-globe"></i>
|
<div class="flex items-center justify-between mb-4">
|
||||||
</div>
|
<h3 class="text-gray-500 font-medium">错误数量</h3>
|
||||||
</div>
|
<div class="p-2 rounded-full bg-warning/10 text-warning">
|
||||||
<div class="mb-2">
|
<i class="fa fa-exclamation-triangle"></i>
|
||||||
<div class="flex items-end justify-between">
|
|
||||||
<p class="text-3xl font-bold" id="active-ips">0</p>
|
|
||||||
<span class="text-success text-sm flex items-center">
|
|
||||||
<i class="fa fa-arrow-up mr-1"></i>
|
|
||||||
<span id="active-ips-percent">0%</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="h-16 mt-2">
|
|
||||||
<canvas id="ips-chart"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<!-- CPU使用率卡片 -->
|
<div class="mb-2">
|
||||||
<div class="bg-white rounded-lg p-6 card-shadow relative overflow-hidden">
|
<div class="flex items-end justify-between">
|
||||||
<!-- 颜色蒙版 -->
|
<p class="text-3xl font-bold" id="error-queries">0</p>
|
||||||
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-warning opacity-10"></div>
|
<span class="text-warning text-sm flex items-center">
|
||||||
<div class="relative z-10">
|
<i class="fa fa-arrow-up mr-1"></i>
|
||||||
<div class="flex items-center justify-between mb-4">
|
<span id="error-percent">0%</span>
|
||||||
<h3 class="text-gray-500 font-medium">CPU使用率</h3>
|
</span>
|
||||||
<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 class="h-16 mt-2">
|
|
||||||
<canvas id="cpu-chart"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 平均响应时间卡片 -->
|
||||||
|
<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-info opacity-10"></div>
|
||||||
|
<div class="relative z-10">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h3 class="text-gray-500 font-medium">平均响应时间</h3>
|
||||||
|
<div class="p-2 rounded-full bg-info/10 text-info">
|
||||||
|
<i class="fa fa-clock-o"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<div class="flex items-end justify-between">
|
||||||
|
<p class="text-3xl font-bold" id="avg-response-time">0ms</p>
|
||||||
|
<span class="text-success text-sm flex items-center">
|
||||||
|
<i class="fa fa-arrow-down mr-1"></i>
|
||||||
|
<span id="response-time-percent">0%</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 最常用查询类型卡片 -->
|
||||||
|
<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-secondary opacity-10"></div>
|
||||||
|
<div class="relative z-10">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h3 class="text-gray-500 font-medium">最常用查询类型</h3>
|
||||||
|
<div class="p-2 rounded-full bg-secondary/10 text-secondary">
|
||||||
|
<i class="fa fa-database"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-end justify-between">
|
||||||
|
<p class="text-3xl font-bold" id="top-query-type">A</p>
|
||||||
|
<span class="text-primary text-sm flex items-center">
|
||||||
|
<i class="fa fa-circle text-xs mr-1"></i>
|
||||||
|
<span id="query-type-percentage">0%</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 活跃来源IP数卡片 -->
|
||||||
|
<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-success opacity-10"></div>
|
||||||
|
<div class="relative z-10">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h3 class="text-gray-500 font-medium">活跃来源IP</h3>
|
||||||
|
<div class="p-2 rounded-full bg-success/10 text-success">
|
||||||
|
<i class="fa fa-globe"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<div class="flex items-end justify-between">
|
||||||
|
<p class="text-3xl font-bold" id="active-ips">0</p>
|
||||||
|
<span class="text-success text-sm flex items-center">
|
||||||
|
<i class="fa fa-arrow-up mr-1"></i>
|
||||||
|
<span id="active-ips-percent">0%</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
|
||||||
<!-- 图表和数据表格 -->
|
<!-- 图表和数据表格 -->
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
|
|||||||
@@ -197,12 +197,25 @@ function apiRequest(endpoint, method = 'GET', data = null, maxRetries = 3) {
|
|||||||
|
|
||||||
// 数字格式化函数
|
// 数字格式化函数
|
||||||
function formatNumber(num) {
|
function formatNumber(num) {
|
||||||
|
// 显示完整数字的最大长度阈值
|
||||||
|
const MAX_FULL_LENGTH = 5;
|
||||||
|
|
||||||
|
// 先获取完整数字字符串
|
||||||
|
const fullNumStr = num.toString();
|
||||||
|
|
||||||
|
// 如果数字长度小于等于阈值，直接返回完整数字
|
||||||
|
if (fullNumStr.length <= MAX_FULL_LENGTH) {
|
||||||
|
return fullNumStr;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 否则使用缩写格式
|
||||||
if (num >= 1000000) {
|
if (num >= 1000000) {
|
||||||
return (num / 1000000).toFixed(1) + 'M';
|
return (num / 1000000).toFixed(1) + 'M';
|
||||||
} else if (num >= 1000) {
|
} else if (num >= 1000) {
|
||||||
return (num / 1000).toFixed(1) + 'K';
|
return (num / 1000).toFixed(1) + 'K';
|
||||||
}
|
}
|
||||||
return num.toString();
|
|
||||||
|
return fullNumStr;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 确认对话框函数
|
// 确认对话框函数
|
||||||
|
|||||||
@@ -27,8 +27,7 @@ async function initDashboard() {
|
|||||||
// 初始化图表
|
// 初始化图表
|
||||||
initCharts();
|
initCharts();
|
||||||
|
|
||||||
// 初始化统计卡片折线图
|
|
||||||
initStatCardCharts();
|
|
||||||
|
|
||||||
// 初始化时间范围切换
|
// 初始化时间范围切换
|
||||||
initTimeRangeToggle();
|
initTimeRangeToggle();
|
||||||
@@ -135,8 +134,7 @@ function processRealTimeData(stats) {
|
|||||||
// 更新图表数据
|
// 更新图表数据
|
||||||
updateCharts(stats, queryTypeStats);
|
updateCharts(stats, queryTypeStats);
|
||||||
|
|
||||||
// 更新卡片图表
|
|
||||||
updateStatCardCharts(stats);
|
|
||||||
|
|
||||||
// 尝试从stats中获取总查询数等信息
|
// 尝试从stats中获取总查询数等信息
|
||||||
if (stats.dns) {
|
if (stats.dns) {
|
||||||
@@ -363,8 +361,7 @@ async function loadDashboardData() {
|
|||||||
updateTopBlockedTable(topBlockedDomains);
|
updateTopBlockedTable(topBlockedDomains);
|
||||||
updateRecentBlockedTable(recentBlockedDomains);
|
updateRecentBlockedTable(recentBlockedDomains);
|
||||||
|
|
||||||
// 更新卡片图表
|
|
||||||
updateStatCardCharts(stats);
|
|
||||||
|
|
||||||
// 尝试从stats中获取总查询数等信息
|
// 尝试从stats中获取总查询数等信息
|
||||||
if (stats.dns) {
|
if (stats.dns) {
|
||||||
@@ -521,8 +518,7 @@ async function loadDashboardData() {
|
|||||||
// 更新图表
|
// 更新图表
|
||||||
updateCharts({totalQueries, blockedQueries, allowedQueries, errorQueries});
|
updateCharts({totalQueries, blockedQueries, allowedQueries, errorQueries});
|
||||||
|
|
||||||
// 更新统计卡片折线图
|
|
||||||
updateStatCardCharts(stats);
|
|
||||||
|
|
||||||
// 确保响应时间图表使用API实时数据
|
// 确保响应时间图表使用API实时数据
|
||||||
if (document.getElementById('avg-response-time')) {
|
if (document.getElementById('avg-response-time')) {
|
||||||
@@ -558,6 +554,7 @@ function updateStatsCards(stats) {
|
|||||||
let totalQueries = 0, blockedQueries = 0, allowedQueries = 0, errorQueries = 0;
|
let totalQueries = 0, blockedQueries = 0, allowedQueries = 0, errorQueries = 0;
|
||||||
let topQueryType = 'A', queryTypePercentage = 0;
|
let topQueryType = 'A', queryTypePercentage = 0;
|
||||||
let activeIPs = 0, activeIPsPercentage = 0;
|
let activeIPs = 0, activeIPsPercentage = 0;
|
||||||
|
let cpuUsageValue = 0;
|
||||||
|
|
||||||
// 检查数据结构，兼容可能的不同格式
|
// 检查数据结构，兼容可能的不同格式
|
||||||
if (stats) {
|
if (stats) {
|
||||||
@@ -570,6 +567,12 @@ function updateStatsCards(stats) {
|
|||||||
queryTypePercentage = stats.queryTypePercentage || 0;
|
queryTypePercentage = stats.queryTypePercentage || 0;
|
||||||
activeIPs = stats.activeIPs || 0;
|
activeIPs = stats.activeIPs || 0;
|
||||||
activeIPsPercentage = stats.activeIPsPercentage || 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对象存在，优先使用其中的数据
|
// 如果dns对象存在，优先使用其中的数据
|
||||||
if (stats.dns) {
|
if (stats.dns) {
|
||||||
@@ -774,6 +777,27 @@ function updateStatsCards(stats) {
|
|||||||
updatePercentage('allowed-percent', '---');
|
updatePercentage('allowed-percent', '---');
|
||||||
updatePercentage('error-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屏蔽域名表格
|
// 更新Top屏蔽域名表格
|
||||||
@@ -2292,12 +2316,25 @@ function generateTimeLabels(count) {
|
|||||||
|
|
||||||
// 格式化数字显示（使用K/M后缀）
|
// 格式化数字显示（使用K/M后缀）
|
||||||
function formatNumber(num) {
|
function formatNumber(num) {
|
||||||
|
// 显示完整数字的最大长度阈值
|
||||||
|
const MAX_FULL_LENGTH = 5;
|
||||||
|
|
||||||
|
// 先获取完整数字字符串
|
||||||
|
const fullNumStr = num.toString();
|
||||||
|
|
||||||
|
// 如果数字长度小于等于阈值，直接返回完整数字
|
||||||
|
if (fullNumStr.length <= MAX_FULL_LENGTH) {
|
||||||
|
return fullNumStr;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 否则使用缩写格式
|
||||||
if (num >= 1000000) {
|
if (num >= 1000000) {
|
||||||
return (num / 1000000).toFixed(1) + 'M';
|
return (num / 1000000).toFixed(1) + 'M';
|
||||||
} else if (num >= 1000) {
|
} else if (num >= 1000) {
|
||||||
return (num / 1000).toFixed(1) + 'K';
|
return (num / 1000).toFixed(1) + 'K';
|
||||||
}
|
}
|
||||||
return num.toString();
|
|
||||||
|
return fullNumStr;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 更新运行状态
|
// 更新运行状态
|
||||||
|
|||||||
@@ -263,12 +263,25 @@ function addGlowEffect() {
|
|||||||
|
|
||||||
// 格式化数字
|
// 格式化数字
|
||||||
function formatNumber(num) {
|
function formatNumber(num) {
|
||||||
|
// 显示完整数字的最大长度阈值
|
||||||
|
const MAX_FULL_LENGTH = 5;
|
||||||
|
|
||||||
|
// 先获取完整数字字符串
|
||||||
|
const fullNumStr = num.toString();
|
||||||
|
|
||||||
|
// 如果数字长度小于等于阈值，直接返回完整数字
|
||||||
|
if (fullNumStr.length <= MAX_FULL_LENGTH) {
|
||||||
|
return fullNumStr;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 否则使用缩写格式
|
||||||
if (num >= 1000000) {
|
if (num >= 1000000) {
|
||||||
return (num / 1000000).toFixed(1) + 'M';
|
return (num / 1000000).toFixed(1) + 'M';
|
||||||
} else if (num >= 1000) {
|
} else if (num >= 1000) {
|
||||||
return (num / 1000).toFixed(1) + 'K';
|
return (num / 1000).toFixed(1) + 'K';
|
||||||
}
|
}
|
||||||
return num.toString();
|
|
||||||
|
return fullNumStr;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 在DOM加载完成后初始化
|
// 在DOM加载完成后初始化
|
||||||
|
|||||||
Reference in New Issue
Block a user