140 lines
5.4 KiB
HTML
140 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>控制台</title>
|
||
<link rel="stylesheet" href="/static/layui/css/layui.css">
|
||
<style>
|
||
.stat-card {
|
||
padding: 20px;
|
||
text-align: center;
|
||
background-color: #fff;
|
||
border-radius: 4px;
|
||
box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
|
||
margin-bottom: 15px;
|
||
}
|
||
.stat-title {
|
||
color: #666;
|
||
font-size: 14px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.stat-number {
|
||
color: #009688;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
}
|
||
.stat-icon {
|
||
font-size: 30px;
|
||
margin-bottom: 10px;
|
||
color: #009688;
|
||
}
|
||
.stat-trend {
|
||
margin-top: 10px;
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
.trend-up {
|
||
color: #5FB878;
|
||
}
|
||
.trend-down {
|
||
color: #FF5722;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="layui-fluid">
|
||
<div class="layui-row layui-col-space15">
|
||
<!-- 统计卡片 -->
|
||
<div class="layui-col-md3">
|
||
<div class="stat-card">
|
||
<i class="layui-icon layui-icon-component stat-icon"></i>
|
||
<div class="stat-title">设备总数</div>
|
||
<div class="stat-number" id="total-devices">0</div>
|
||
<div class="stat-trend">
|
||
今日新增: <span id="today-new">0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md3">
|
||
<div class="stat-card">
|
||
<i class="layui-icon layui-icon-vercode stat-icon"></i>
|
||
<div class="stat-title">授权码总数</div>
|
||
<div class="stat-number" id="total-licenses">0</div>
|
||
<div class="stat-trend">
|
||
未使用: <span id="unused-licenses">0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md3">
|
||
<div class="stat-card">
|
||
<i class="layui-icon layui-icon-circle-dot stat-icon"></i>
|
||
<div class="stat-title">在线设备</div>
|
||
<div class="stat-number" id="online-devices">0</div>
|
||
<div class="stat-trend">
|
||
活跃率: <span id="active-rate">0%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md3">
|
||
<div class="stat-card">
|
||
<i class="layui-icon layui-icon-chart stat-icon"></i>
|
||
<div class="stat-title">过期设备</div>
|
||
<div class="stat-number" id="expired-devices">0</div>
|
||
<div class="stat-trend">
|
||
占比: <span id="expired-rate">0%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图表区域 -->
|
||
<div class="layui-col-md8">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">设备注册趋势</div>
|
||
<div class="layui-card-body">
|
||
<div id="register-trend" style="height: 300px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md4">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">设备类型分布</div>
|
||
<div class="layui-card-body">
|
||
<div id="device-types" style="height: 300px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 系统状态 -->
|
||
<div class="layui-col-md12">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">系统状态</div>
|
||
<div class="layui-card-body">
|
||
<div class="layui-row layui-col-space10">
|
||
<div class="layui-col-md3">
|
||
<div>CPU使用率：<span id="cpu-usage">0%</span></div>
|
||
<div>内存使用率：<span id="memory-usage">0%</span></div>
|
||
</div>
|
||
<div class="layui-col-md3">
|
||
<div>系统运行时间：<span id="uptime">0天</span></div>
|
||
<div>磁盘使用率：<span id="disk-usage">0%</span></div>
|
||
</div>
|
||
<div class="layui-col-md3">
|
||
<div>系统负载：<span id="load-avg">0</span></div>
|
||
<div>网络流量：<span id="network-traffic">0 KB/s</span></div>
|
||
</div>
|
||
<div class="layui-col-md3">
|
||
<div>当前在线用户：<span id="online-users">0</span></div>
|
||
<div>最后更新时间：<span id="last-update">-</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/static/layui/layui.js"></script>
|
||
<script src="/static/lib/echarts.min.js"></script>
|
||
<script src="/static/js/dashboard.js"></script>
|
||
</body>
|
||
</html> |