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

367
static/index.html
View File

@@ -305,209 +305,188 @@
<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="bg-blue-50 rounded-lg p-6 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="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-primary/10 text-primary">
<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 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="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-primary/10 text-primary">
<i class="fa fa-refresh"></i>
</div>
<!-- 屏蔽数量卡片 -->
<div class="bg-red-50 rounded-lg p-6 card-shadow relative overflow-hidden">
<!-- 颜色蒙版 -->
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-danger 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-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 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="bg-green-50 rounded-lg p-6 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">正常解析</h3>
<div class="p-2 rounded-full bg-success/10 text-success">
<i class="fa fa-check"></i>
</div>
</div>
<div class="mb-2">
<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="bg-red-50 rounded-lg p-4 card-shadow relative overflow-hidden">
<!-- 颜色蒙版 -->
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-danger 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-danger/10 text-danger">
<i class="fa fa-ban"></i>
</div>
<!-- 错误数量卡片 -->
<div class="bg-yellow-50 rounded-lg p-6 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">错误数量</h3>
<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 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="bg-white rounded-lg p-6 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 class="h-16 mt-2">
<canvas id="response-time-chart"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 正常解析卡片 -->
<div class="bg-green-50 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">正常解析</h3>
<div class="p-2 rounded-full bg-success/10 text-success">
<i class="fa fa-check"></i>
</div>
<!-- 最常用查询类型卡片 -->
<div class="bg-white rounded-lg p-6 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>
<div class="mb-2">
<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>
<!-- 活跃来源IP数卡片 -->
<div class="bg-white rounded-lg p-6 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 class="h-16 mt-2">
<canvas id="ips-chart"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 错误数量卡片 -->
<div class="bg-yellow-50 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">错误数量</h3>
<div class="p-2 rounded-full bg-warning/10 text-warning">
<i class="fa fa-exclamation-triangle"></i>
</div>
<!-- CPU使用率卡片 -->
<div class="bg-white rounded-lg p-6 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 class="h-16 mt-2">
<canvas id="cpu-chart"></canvas>
</div>
</div>
</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>
</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">