326 lines
6.7 KiB
HTML
326 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
||
|
||
<html>
|
||
|
||
<head>
|
||
|
||
<meta charset="utf-8">
|
||
|
||
<title>系统监控</title>
|
||
|
||
<link rel="stylesheet" href="/static/layui/css/layui.css">
|
||
|
||
<link rel="stylesheet" href="/static/css/style.css">
|
||
|
||
</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="uptime">
|
||
|
||
0天0小时0分钟
|
||
|
||
</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="active-users">
|
||
|
||
0
|
||
|
||
</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-devices">
|
||
|
||
0
|
||
|
||
</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="load-avg">
|
||
|
||
0.00
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<!-- 资源监控 -->
|
||
|
||
<div class="layui-row layui-col-space15">
|
||
|
||
<div class="layui-col-md6">
|
||
|
||
<div class="layui-card">
|
||
|
||
<div class="layui-card-header">CPU使用率</div>
|
||
|
||
<div class="layui-card-body">
|
||
|
||
<div id="cpu-chart" style="height: 300px;"></div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="layui-col-md6">
|
||
|
||
<div class="layui-card">
|
||
|
||
<div class="layui-card-header">内存使用情况</div>
|
||
|
||
<div class="layui-card-body">
|
||
|
||
<div id="memory-chart" style="height: 300px;"></div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<!-- 磁盘和网络 -->
|
||
|
||
<div class="layui-row layui-col-space15">
|
||
|
||
<div class="layui-col-md6">
|
||
|
||
<div class="layui-card">
|
||
|
||
<div class="layui-card-header">磁盘使用情况</div>
|
||
|
||
<div class="layui-card-body">
|
||
|
||
<div id="disk-chart" style="height: 300px;"></div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="layui-col-md6">
|
||
|
||
<div class="layui-card">
|
||
|
||
<div class="layui-card-header">网络流量</div>
|
||
|
||
<div class="layui-card-body">
|
||
|
||
<div id="network-chart" style="height: 300px;"></div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<!-- 进程和系统信息 -->
|
||
|
||
<div class="layui-row layui-col-space15">
|
||
|
||
<div class="layui-col-md6">
|
||
|
||
<div class="layui-card">
|
||
|
||
<div class="layui-card-header">
|
||
|
||
<span>进程列表（Top 10）</span>
|
||
|
||
<span class="layui-badge layui-bg-blue" id="total-processes">0</span>
|
||
|
||
</div>
|
||
|
||
<div class="layui-card-body">
|
||
|
||
<table class="layui-table" lay-skin="line">
|
||
|
||
<thead>
|
||
|
||
<tr>
|
||
|
||
<th>PID</th>
|
||
|
||
<th>名称</th>
|
||
|
||
<th>CPU使用率</th>
|
||
|
||
<th>内存使用率</th>
|
||
|
||
<th>运行时间</th>
|
||
|
||
</tr>
|
||
|
||
</thead>
|
||
|
||
<tbody id="process-list"></tbody>
|
||
|
||
</table>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="layui-col-md6">
|
||
|
||
<div class="layui-card">
|
||
|
||
<div class="layui-card-header">系统信息</div>
|
||
|
||
<div class="layui-card-body">
|
||
|
||
<table class="layui-table" lay-skin="nob">
|
||
|
||
<tbody>
|
||
|
||
<tr>
|
||
|
||
<td>主机名</td>
|
||
|
||
<td id="hostname"></td>
|
||
|
||
</tr>
|
||
|
||
<tr>
|
||
|
||
<td>操作系统</td>
|
||
|
||
<td id="os"></td>
|
||
|
||
</tr>
|
||
|
||
<tr>
|
||
|
||
<td>平台</td>
|
||
|
||
<td id="platform"></td>
|
||
|
||
</tr>
|
||
|
||
<tr>
|
||
|
||
<td>内核版本</td>
|
||
|
||
<td id="kernel"></td>
|
||
|
||
</tr>
|
||
|
||
<tr>
|
||
|
||
<td>CPU型号</td>
|
||
|
||
<td id="cpu-model"></td>
|
||
|
||
</tr>
|
||
|
||
<tr>
|
||
|
||
<td>CPU核心数</td>
|
||
|
||
<td id="cpu-cores"></td>
|
||
|
||
</tr>
|
||
|
||
<tr>
|
||
|
||
<td>启动时间</td>
|
||
|
||
<td id="boot-time"></td>
|
||
|
||
</tr>
|
||
|
||
</tbody>
|
||
|
||
</table>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<script src="/static/layui/layui.js"></script>
|
||
|
||
<script src="/static/lib/echarts.min.js"></script>
|
||
|
||
<script src="/static/js/monitor.js"></script>
|
||
|
||
<script type="text/html" id="processListTpl">
|
||
{{# layui.each(d, function(index, item){ }}
|
||
<tr>
|
||
<td>{{item.pid}}</td>
|
||
<td>{{item.name}}</td>
|
||
<td>{{item.cpu.toFixed(1)}}%</td>
|
||
<td>{{item.memory.toFixed(1)}}%</td>
|
||
<td>{{formatDuration(Math.floor((Date.now() - item.created) / 1000))}}</td>
|
||
</tr>
|
||
{{# }); }}
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html>
|