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

优化布局

Browse Source
This commit is contained in:
CN-JS-HuiBai
2026-04-05 20:22:46 +08:00
parent d5b70edd11
commit 73807eaaaf
2 changed files with 3 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
public/js/app.js
View File

@@ -948,7 +948,7 @@
</svg>
</div>
<div class="metric-item-content" id="metrics-content-${m.key}">
<div class="chart-controls" ${m.key === 'networkTrend' ? 'style="display:none;"' : ''}>
<div class="chart-controls">
<div class="time-range-group">
<div class="time-range-selector">
<button class="time-range-btn ${m.key !== 'networkTrend' ? 'active' : ''}" onclick="loadMetricHistory('${m.key}', '1h', event)">1h</button>
@@ -967,8 +967,7 @@
</div>
</div>
</div>
<div id="summary-${m.key}" style="display:none;"></div>
<div class="detail-chart-wrapper" id="wrapper-${m.key}" style="${m.key === 'cpuBusy' ? 'height: 260px;' : ''}">
<div class="detail-chart-wrapper" style="${m.key === 'cpuBusy' ? 'height: 260px;' : ''}">
<canvas id="chart-${m.key}"></canvas>
</div>
</div>
@@ -1074,93 +1073,12 @@
data.series = null; // This tells MetricChart to draw a single line instead of stacked area
}
if (metricKey === 'networkTrend') {
const stats = calculateHistoryStats(data);
const summaryDiv = document.getElementById(`summary-${metricKey}`);
const wrapperDiv = document.getElementById(`wrapper-${metricKey}`);
if (summaryDiv && wrapperDiv) {
summaryDiv.style.display = 'block';
wrapperDiv.style.display = 'none'; // Hide the chart canvas
summaryDiv.innerHTML = `
<div class="network-summary-grid">
<div class="summary-stat-item stat-rx">
<div class="stat-icon-wrapper">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10l5 5 5-5M12 15V3"></path><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"></path></svg>
</div>
<div class="stat-info">
<span class="summary-stat-label">24h 接收总量</span>
<span class="summary-stat-value">${formatBytes(stats.rxTotal)}</span>
</div>
</div>
<div class="summary-stat-item stat-tx">
<div class="stat-icon-wrapper">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 14l-5-5-5 5M12 9v12"></path><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"></path></svg>
</div>
<div class="stat-info">
<span class="summary-stat-label">24h 发送总量</span>
<span class="summary-stat-value">${formatBytes(stats.txTotal)}</span>
</div>
</div>
<div class="summary-stat-item stat-p95">
<div class="stat-icon-wrapper">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M16 8l-8 8M12 7v10M7 12h10"></path></svg>
</div>
<div class="stat-info">
<span class="summary-stat-label">95计费 (上行)</span>
<span class="summary-stat-value">${formatBandwidth(stats.p95)}</span>
</div>
</div>
<div class="summary-stat-item stat-total">
<div class="stat-icon-wrapper">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</div>
<div class="stat-info">
<span class="summary-stat-label">24h 网络总流量</span>
<span class="summary-stat-value">${formatBytes(stats.total)}</span>
</div>
</div>
</div>
`;
}
} else {
chart.setData(data);
}
chart.setData(data);
} catch (err) {
console.error(`Error loading history for ${metricKey}:`, err);
}
};
function calculateHistoryStats(data) {
if (!data.timestamps || data.timestamps.length < 2) {
return { rxTotal: 0, txTotal: 0, p95: 0, total: 0 };
}
const tx = data.tx || [];
const rx = data.rx || [];
const ts = data.timestamps;
let rxTotal = 0;
let txTotal = 0;
for (let i = 0; i < ts.length - 1; i++) {
const duration = (ts[i+1] - ts[i]) / 1000; // in seconds
rxTotal += (rx[i] || 0) * duration;
txTotal += (tx[i] || 0) * duration;
}
// P95 calculation for TX
const sortedTx = [...tx].sort((a, b) => a - b);
const p95Idx = Math.floor(sortedTx.length * 0.95);
const p95 = sortedTx.length > 0 ? sortedTx[p95Idx] : 0;
return {
rxTotal,
txTotal,
p95,
total: rxTotal + txTotal
};
}
window.loadCustomMetricHistory = async function (metricKey, event) {
if (event) event.stopPropagation();