268 lines
10 KiB
HTML
268 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>系统指标详情</title>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
margin: 20px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
h1 {
|
||
text-align: center;
|
||
color: #2c3e50;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.section {
|
||
margin-bottom: 40px;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
h2 {
|
||
color: #34495e;
|
||
border-left: 4px solid #3498db;
|
||
padding-left: 10px;
|
||
margin-top: 0;
|
||
}
|
||
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
th,
|
||
td {
|
||
padding: 12px 15px;
|
||
text-align: left;
|
||
border-bottom: 1px solid #ecf0f1;
|
||
}
|
||
|
||
th {
|
||
background-color: #f8f9fa;
|
||
color: #2c3e50;
|
||
font-weight: 600;
|
||
}
|
||
|
||
tr:hover {
|
||
background-color: #f8f9fa;
|
||
}
|
||
|
||
.network-item {
|
||
margin-bottom: 15px;
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
background-color: #f8f9fa;
|
||
}
|
||
|
||
.update-time {
|
||
text-align: right;
|
||
color: #7f8c8d;
|
||
font-size: 0.9em;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
|
||
table,
|
||
th,
|
||
td {
|
||
display: block;
|
||
}
|
||
|
||
th {
|
||
position: absolute;
|
||
top: -9999px;
|
||
left: -9999px;
|
||
}
|
||
|
||
tr {
|
||
margin-bottom: 15px;
|
||
border: 1px solid #ecf0f1;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
td {
|
||
position: relative;
|
||
padding-left: 50%;
|
||
border-bottom: none;
|
||
}
|
||
|
||
td:before {
|
||
position: absolute;
|
||
left: 15px;
|
||
content: attr(data-label);
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container">
|
||
<h1>系统指标详情</h1>
|
||
<div class="update-time" id="updateTime"></div>
|
||
<div id="content"></div>
|
||
</div>
|
||
|
||
</body>
|
||
|
||
<script>
|
||
let data = `@@@`;
|
||
|
||
// 解析数据并渲染页面
|
||
function renderData() {
|
||
const systemData = JSON.parse(data);
|
||
const content = document.getElementById('content');
|
||
let html = '';
|
||
|
||
// 更新时间
|
||
document.getElementById('updateTime').textContent = `最后更新: ${new Date().toLocaleString()}`;
|
||
|
||
// 1. 系统信息
|
||
html += `
|
||
<div class="section">
|
||
<h2>1. 系统基础信息</h2>
|
||
<table>
|
||
<tr><th>指标名称</th><th>数值</th></tr>
|
||
<tr><td data-label="指标名称">操作系统类型</td><td data-label="数值">${systemData.SystemInfo.osType}</td></tr>
|
||
<tr><td data-label="指标名称">系统平台</td><td data-label="数值">${systemData.SystemInfo.osPlatform}</td></tr>
|
||
<tr><td data-label="指标名称">系统版本</td><td data-label="数值">${systemData.SystemInfo.osVersion}</td></tr>
|
||
<tr><td data-label="指标名称">系统名称</td><td data-label="数值">${systemData.SystemInfo.osName}</td></tr>
|
||
<tr><td data-label="指标名称">系统架构</td><td data-label="数值">${systemData.SystemInfo.arch}</td></tr>
|
||
<tr><td data-label="指标名称">主机名</td><td data-label="数值">${systemData.SystemInfo.hostname}</td></tr>
|
||
<tr><td data-label="指标名称">系统启动时间</td><td data-label="数值">${systemData.SystemInfo.systemStartTime} ${systemData.SystemInfo.systemStartTime === '1970/1/1' ? '(可能为数据异常)' : ''}</td></tr>
|
||
<tr><td data-label="指标名称">系统运行时长</td><td data-label="数值">${systemData.SystemInfo.systemRunningTime}</td></tr>
|
||
</table>
|
||
</div>`;
|
||
|
||
// 2. CPU信息
|
||
html += `
|
||
<div class="section">
|
||
<h2>2. CPU信息</h2>
|
||
<table>
|
||
<tr><th>指标名称</th><th>数值</th></tr>
|
||
<tr><td data-label="指标名称">CPU核心数</td><td data-label="数值">${systemData.CPUInfo.number}</td></tr>
|
||
<tr><td data-label="指标名称">CPU型号</td><td data-label="数值">${systemData.CPUInfo.model}</td></tr>
|
||
<tr><td data-label="指标名称">CPU基础频率</td><td data-label="数值">${systemData.CPUInfo.speed}</td></tr>
|
||
</table>
|
||
</div>`;
|
||
|
||
// 3. 内存信息
|
||
html += `
|
||
<div class="section">
|
||
<h2>3. 内存信息</h2>
|
||
<table>
|
||
<tr><th>指标名称</th><th>数值</th></tr>
|
||
<tr><td data-label="指标名称">总内存</td><td data-label="数值">${systemData.MemoryInfo.total}</td></tr>
|
||
<tr><td data-label="指标名称">空闲内存</td><td data-label="数值">${systemData.MemoryInfo.freeMemory}</td></tr>
|
||
<tr><td data-label="指标名称">已使用内存</td><td data-label="数值">${systemData.MemoryInfo.useMemory}</td></tr>
|
||
<tr><td data-label="指标名称">内存使用率</td><td data-label="数值">${systemData.MemoryInfo.useRate}</td></tr>
|
||
</table>
|
||
</div>`;
|
||
|
||
// 4. 用户信息
|
||
html += `
|
||
<div class="section">
|
||
<h2>4. 用户信息</h2>
|
||
<table>
|
||
<tr><th>指标名称</th><th>数值</th></tr>
|
||
<tr><td data-label="指标名称">用户名</td><td data-label="数值">${systemData.UserInfo.userName}</td></tr>
|
||
<tr><td data-label="指标名称">用户ID（uid）</td><td data-label="数值">${systemData.UserInfo.uid} (Windows系统默认值)</td></tr>
|
||
<tr><td data-label="指标名称">用户组ID（gid）</td><td data-label="数值">${systemData.UserInfo.gid} (Windows系统默认值)</td></tr>
|
||
<tr><td data-label="指标名称">用户主目录</td><td data-label="数值">${systemData.UserInfo.homeDir}</td></tr>
|
||
<tr><td data-label="指标名称">默认shell</td><td data-label="数值">${systemData.UserInfo.shell}</td></tr>
|
||
</table>
|
||
</div>`;
|
||
|
||
// 5. 目录信息
|
||
html += `
|
||
<div class="section">
|
||
<h2>5. 目录信息</h2>
|
||
<table>
|
||
<tr><th>指标名称</th><th>数值</th></tr>
|
||
<tr><td data-label="指标名称">用户主目录</td><td data-label="数值">${systemData.DirInfo.homeDir}</td></tr>
|
||
<tr><td data-label="指标名称">临时目录</td><td data-label="数值">${systemData.DirInfo.tmpDir}</td></tr>
|
||
</table>
|
||
</div>`;
|
||
|
||
// 6. 负载信息
|
||
html += `
|
||
<div class="section">
|
||
<h2>6. 系统负载信息</h2>
|
||
<table>
|
||
<tr><th>指标名称</th><th>数值</th></tr>
|
||
<tr><td data-label="指标名称">1分钟负载</td><td data-label="数值">${systemData.DutyInfo.min1}</td></tr>
|
||
<tr><td data-label="指标名称">5分钟负载</td><td data-label="数值">${systemData.DutyInfo.min5}</td></tr>
|
||
<tr><td data-label="指标名称">15分钟负载</td><td data-label="数值">${systemData.DutyInfo.min15}</td></tr>
|
||
</table>
|
||
</div>`;
|
||
|
||
// 7. 网络接口信息
|
||
html += `<div class="section"><h2>7. 网络接口信息</h2><div id="networkList">`;
|
||
systemData.NetworkInterfaceInfo.forEach(iface => {
|
||
html += `
|
||
<div class="network-item">
|
||
<h3>网络接口：${iface.name} ${iface.localAddress ? '(本地回环)' : ''}</h3>
|
||
<table>
|
||
<tr><td data-label="指标名称">网络协议</td><td data-label="数值">${iface.family}</td></tr>
|
||
<tr><td data-label="指标名称">IP地址</td><td data-label="数值">${iface.ip}</td></tr>
|
||
<tr><td data-label="指标名称">MAC地址</td><td data-label="数值">${iface.mac}</td></tr>
|
||
<tr><td data-label="指标名称">是否本地地址</td><td data-label="数值">${iface.localAddress ? '是' : '否'}</td></tr>
|
||
<tr><td data-label="指标名称">子网掩码</td><td data-label="数值">${iface.netmask}</td></tr>
|
||
</table>
|
||
</div>`;
|
||
});
|
||
html += `</div></div>`;
|
||
console.log(html);
|
||
|
||
content.innerHTML = html;
|
||
}
|
||
|
||
// 初始渲染
|
||
renderData();
|
||
|
||
// 模拟数据更新（每5秒更新一次运行时间）
|
||
setInterval(() => {
|
||
const systemData = JSON.parse(data);
|
||
// 解析当前运行时间并增加1分钟
|
||
const timeMatch = systemData.SystemInfo.systemRunningTime.match(/(\d+)小时 (\d+\.\d+)分钟/);
|
||
if (timeMatch) {
|
||
const hours = parseInt(timeMatch[1]);
|
||
let minutes = parseFloat(timeMatch[2]) + 1;
|
||
|
||
// 处理分钟进位
|
||
if (minutes >= 60) {
|
||
minutes -= 60;
|
||
systemData.SystemInfo.systemRunningTime = `${hours + 1}小时 ${minutes.toFixed(15)}分钟`;
|
||
} else {
|
||
systemData.SystemInfo.systemRunningTime = `${hours}小时 ${minutes.toFixed(15)}分钟`;
|
||
}
|
||
|
||
// 更新内存使用率（随机波动1-2%）
|
||
const currentRate = parseInt(systemData.MemoryInfo.useRate);
|
||
const newRate = Math.max(10, Math.min(90, currentRate + (Math.random() > 0.5 ? 1 : -1)));
|
||
systemData.MemoryInfo.useRate = `${newRate}%`;
|
||
|
||
// 重新序列化数据
|
||
data = JSON.stringify(systemData);
|
||
// 重新渲染页面
|
||
renderData();
|
||
}
|
||
}, 5000); // 5秒更新一次
|
||
</script>
|
||
|
||
</html> |