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>
|
||||
@@ -72,7 +72,7 @@
|
||||
<a class="layui-btn layui-btn-xs" lay-event="view">查看</a>
|
||||
<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="bind">绑定授权</a>
|
||||
<a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="logs">日志</a>
|
||||
{{# if(d.status !== 'expired'){ }}
|
||||
{{# if(d.status !== 'expired' && d.license_code){ }}
|
||||
<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="revoke">撤销</a>
|
||||
{{# } }}
|
||||
</script>
|
||||
@@ -94,13 +94,33 @@
|
||||
<td>设备型号</td>
|
||||
<td>{{ d.device_model }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>设备类型</td>
|
||||
<td>{{ d.device_type }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>所属公司</td>
|
||||
<td>{{ d.company || '-' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>授权码</td>
|
||||
<td>{{ d.license_code || '-' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>授权类型</td>
|
||||
<td>{{ d.license_type || '-' }}</td>
|
||||
<td>{{ {
|
||||
'time': '时间授权',
|
||||
'count': '次数授权',
|
||||
'permanent': '永久授权'
|
||||
}[d.license_type] || '-' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>授权状态</td>
|
||||
<td>{{ {
|
||||
'active': '<span class="layui-badge layui-bg-green">正常</span>',
|
||||
'expired': '<span class="layui-badge layui-bg-orange">已过期</span>',
|
||||
'inactive': '<span class="layui-badge layui-bg-gray">未激活</span>'
|
||||
}[d.status] || '-' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>过期时间</td>
|
||||
@@ -108,16 +128,16 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>启动次数</td>
|
||||
<td>{{ d.start_count }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>最后活跃</td>
|
||||
<td>{{ d.last_active_at ? new Date(d.last_active_at).toLocaleString() : '-' }}</td>
|
||||
<td>{{ d.start_count || 0 }}{{ d.max_uses ? ' / ' + d.max_uses : '' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>注册时间</td>
|
||||
<td>{{ new Date(d.register_time).toLocaleString() }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>最后活跃</td>
|
||||
<td>{{ d.last_active_at ? new Date(d.last_active_at).toLocaleString() : '-' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -119,16 +119,12 @@
|
||||
<script type="text/html" id="tableRowBar">
|
||||
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
|
||||
|
||||
<a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="files"
|
||||
>文件</a
|
||||
>
|
||||
|
||||
<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"
|
||||
>删除</a
|
||||
>
|
||||
</script>
|
||||
|
||||
<!-- 设备表单模板 -->
|
||||
<!-- 设备型号表单模板 -->
|
||||
|
||||
<script type="text/html" id="deviceFormTpl">
|
||||
<form class="layui-form" style="padding: 20px;" lay-filter="deviceForm">
|
||||
@@ -180,6 +176,15 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">状态</label>
|
||||
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="status" value="active" title="启用" checked>
|
||||
<input type="radio" name="status" value="disabled" title="禁用">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">备注说明</label>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user