CN-JS-HuiBai/PromdataPanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

美化CPU显示

Browse Source
This commit is contained in:
CN-JS-HuiBai
2026-04-05 01:06:08 +08:00
parent b3580c15cc
commit e50f95c325
1 changed files with 39 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
public/js/app.js
View File

@@ -548,16 +548,14 @@
// Define metrics to show // Define metrics to show
const cpuValueHtml = ` const cpuValueHtml = `
<div style="display: flex; flex-direction: column; align-items: flex-end; gap: 2px;"> <div style="display: flex; align-items: baseline; gap: 8px;">
<span style="font-weight: 700;">${formatPercent(data.cpuBusy)}</span> <span style="font-weight: 700; font-size: 1.1rem;">${formatPercent(data.cpuBusy)}</span>
<div style="font-size: 0.65rem; color: var(--text-secondary); display: flex; gap: 6px; font-weight: normal;"> <span style="font-size: 0.7rem; color: var(--text-secondary); font-weight: normal;">(IO Wait: ${data.cpuIowait.toFixed(1)}%)</span>
<span>I/O Wait: ${data.cpuIowait.toFixed(1)}%</span>
</div>
</div> </div>
`; `;
const metrics = [ const metrics = [
{ key: 'cpuBusy', label: 'CPU 使用率 (Busy / IO Wait)', value: cpuValueHtml }, { key: 'cpuBusy', label: 'CPU 使用率', value: cpuValueHtml },
{ key: 'sysLoad', label: '系统负载 (Load)', value: data.sysLoad.toFixed(1) + '%' }, { key: 'sysLoad', label: '系统负载 (Load)', value: data.sysLoad.toFixed(1) + '%' },
{ key: 'memUsedPct', label: '内存使用率 (RAM)', value: formatPercent(data.memUsedPct) }, { key: 'memUsedPct', label: '内存使用率 (RAM)', value: formatPercent(data.memUsedPct) },
{ key: 'swapUsedPct', label: 'SWAP 使用率', value: formatPercent(data.swapUsedPct) }, { key: 'swapUsedPct', label: 'SWAP 使用率', value: formatPercent(data.swapUsedPct) },
@@ -660,6 +658,14 @@
const res = await fetch(url); const res = await fetch(url);
if (!res.ok) throw new Error('Query failed'); if (!res.ok) throw new Error('Query failed');
const data = await res.json(); const data = await res.json();
if (metricKey === 'cpuBusy' && data.series) {
// Simplify: ONLY show total busy CPU usage (everything except idle)
// Since it's a percentage, 100 - idle is the total busy percentage
data.values = data.series.idle.map(idleVal => Math.max(0, 100 - idleVal));
data.series = null; // This tells MetricChart to draw a single line instead of stacked area
}
chart.setData(data); chart.setData(data);
} catch (err) { } catch (err) {
console.error(`Error loading history for ${metricKey}:`, err); console.error(`Error loading history for ${metricKey}:`, err);