up
This commit is contained in:
JiXieShi
@@ -4,51 +4,137 @@
|
||||
<meta charset="utf-8">
|
||||
<title>控制台</title>
|
||||
<link rel="stylesheet" href="/static/layui/css/layui.css">
|
||||
<link rel="stylesheet" href="/static/css/style.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="layui-card">
|
||||
<div class="layui-card-header">设备总数</div>
|
||||
<div class="layui-card-body big-font" id="total-devices">0</div>
|
||||
<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="layui-card">
|
||||
<div class="layui-card-header">授权码总数</div>
|
||||
<div class="layui-card-body big-font" id="total-licenses">0</div>
|
||||
<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="layui-card">
|
||||
<div class="layui-card-header">今日新增</div>
|
||||
<div class="layui-card-body big-font" id="today-new">0</div>
|
||||
<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="layui-card">
|
||||
<div class="layui-card-header">在线设备</div>
|
||||
<div class="layui-card-body big-font" id="online-devices">0</div>
|
||||
<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-md3">
|
||||
|
||||
<!-- 图表区域 -->
|
||||
<div class="layui-col-md8">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">激活设备</div>
|
||||
<div class="layui-card-body big-font" id="active-devices">0</div>
|
||||
<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-md3">
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">过期设备</div>
|
||||
<div class="layui-card-body big-font" id="expired-devices">0</div>
|
||||
<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>
|
||||
Reference in New Issue
Block a user