feat(*): 代码仓库初始化
This commit is contained in:
268
Server/tests/test1/index.html
Normal file
268
Server/tests/test1/index.html
Normal file
@@ -0,0 +1,268 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user