sky/simple-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

更新 simpleadmin/www/index.html

Browse Source 
add system status card.
This commit is contained in:
sky 2024-12-08 19:06:50 +08:00
parent 86025e0d17
commit 6cd09c0f10
1 changed files with 99 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
simpleadmin/www/index.html
View File

@ -278,6 +278,76 @@
</div>
<div class="col">
<div class="card mb-3">
<div class="card-header">系统状态</div>
<div class="card-body">
<div class="card-text table-responsive-sm">
<table class="table">
<tbody>
<tr>
<th scope="row">CPU使用率</th>
<td class="gap-4 align-items-center"
x-data="{ getProgressBarClass: function() {
var percentage = parseInt(this.cpuUsage);
if (percentage >= 80) {
return 'progress-bar bg-danger is-medium';
} else if (percentage >= 60) {
return 'progress-bar bg-warning is-warning is-medium';
} else {
return 'progress-bar bg-success is-medium';
}
}}"
>
<div class="progress w-100" role="progressbar"
aria-label="CPU Usage"
:aria-valuenow="cpuUsage"
aria-valuemin="0"
aria-valuemax="100"
style="height: 18px"
>
<div :class="getProgressBarClass()"
:style="'width: ' + cpuUsage + '%'"
>
<span x-text="cpuUsage + '%'"></span>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">内存使用率</th>
<td class="gap-4 align-items-center"
x-data="{ getProgressBarClass: function() {
var percentage = parseInt(this.memoryUsage);
if (percentage >= 80) {
return 'progress-bar bg-danger is-medium';
} else if (percentage >= 60) {
return 'progress-bar bg-warning is-warning is-medium';
} else {
return 'progress-bar bg-success is-medium';
}
}}"
>
<div class="progress w-100" role="progressbar"
aria-label="Memory Usage"
:aria-valuenow="memoryUsage"
aria-valuemin="0"
aria-valuemax="100"
style="height: 18px"
>
<div :class="getProgressBarClass()"
:style="'width: ' + memoryUsage + '%'"
>
<span x-text="memoryUsage + '% (' + formatBytes(memoryUsed) + ' / ' + formatBytes(memoryTotal) + ')'"></span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="card">
<div class="card-header">信号</div>
<div class="card-body">
@ -649,6 +719,12 @@
nonNrUpload: "0",
downloadStat: "0",
uploadStat: "0",
cpuUsage: "0",
memoryUsage: "0",
cacheUsage: "0",
memoryTotal: "0",
memoryUsed: "0",
cacheUsed: "0",
fetchAllInfo() {
this.atcmd =
@ -1952,6 +2028,29 @@
console.log("Refreshed");
}, this.refreshRate * 1000);
},
fetchSystemStats() {
fetch("/cgi-bin/get_system_stats")
.then(response => response.text())
.then(data => {
const lines = data.split("\n");
// 跳过空行和Content-Type行
const validLines = lines.filter(line => line.trim() !== '' && line.includes(": ")).map(line => line.trim());
this.cpuUsage = parseFloat(validLines[0].split(": ")[1]).toFixed(1);
this.memoryUsage = parseFloat(validLines[1].split(": ")[1]).toFixed(1);
this.memoryTotal = parseInt(validLines[2].split(": ")[1]);
this.memoryUsed = parseInt(validLines[3].split(": ")[1]);
});
},
formatBytes(bytes) {
if (bytes === 0) return '0 B';
const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
},
};
}
</script>