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 18:13:37 +08:00
parent aed9147074
commit 464c3193d1
6 changed files with 111 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
public/js/app.js
View File

@@ -21,7 +21,6 @@
diskDetail: document.getElementById('diskDetail'),
totalBandwidthTx: document.getElementById('totalBandwidthTx'),
totalBandwidthRx: document.getElementById('totalBandwidthRx'),
bandwidthDetail: document.getElementById('bandwidthDetail'),
traffic24hRx: document.getElementById('traffic24hRx'),
traffic24hTx: document.getElementById('traffic24hTx'),
traffic24hTotal: document.getElementById('traffic24hTotal'),
@@ -62,6 +61,10 @@
loginError: document.getElementById('loginError'),
footerTime: document.getElementById('footerTime'),
legendP95: document.getElementById('legendP95'),
legendRx: document.getElementById('legendRx'),
legendTx: document.getElementById('legendTx'),
p95LabelText: document.getElementById('p95LabelText'),
p95TypeSelect: document.getElementById('p95TypeSelect'),
// Server Details Modal
serverDetailModal: document.getElementById('serverDetailModal'),
serverDetailClose: document.getElementById('serverDetailClose'),
@@ -225,6 +228,23 @@
});
}
// RX/TX Legend Toggle
if (dom.legendRx) {
dom.legendRx.addEventListener('click', () => {
networkChart.showRx = !networkChart.showRx;
dom.legendRx.classList.toggle('disabled', !networkChart.showRx);
networkChart.draw();
});
}
if (dom.legendTx) {
dom.legendTx.addEventListener('click', () => {
networkChart.showTx = !networkChart.showTx;
dom.legendTx.classList.toggle('disabled', !networkChart.showTx);
networkChart.draw();
});
}
// Source filter listener
if (dom.sourceFilter) {
dom.sourceFilter.addEventListener('change', () => {
@@ -269,6 +289,7 @@
dom.logoUrlInput.value = window.SITE_SETTINGS.logo_url || '';
dom.defaultThemeInput.value = window.SITE_SETTINGS.default_theme || 'dark';
dom.show95BandwidthInput.value = window.SITE_SETTINGS.show_95_bandwidth ? "1" : "0";
dom.p95TypeSelect.value = window.SITE_SETTINGS.p95_type || 'tx';
}
loadSiteSettings();
@@ -571,9 +592,8 @@
dom.diskDetail.textContent = `${formatBytes(data.disk.used)}/${formatBytes(data.disk.total)}`;
// Bandwidth
dom.totalBandwidthTx.textContent = formatBandwidth(data.network.tx || 0);
dom.totalBandwidthRx.textContent = formatBandwidth(data.network.rx || 0);
dom.bandwidthDetail.textContent = `当前实时数据聚合`;
dom.totalBandwidthTx.textContent = toMBps(data.network.tx || 0);
dom.totalBandwidthRx.textContent = toMBps(data.network.rx || 0);
// 24h traffic
dom.traffic24hRx.textContent = formatBytes(data.traffic24h.rx);
@@ -1111,9 +1131,15 @@
dom.show95BandwidthInput.value = settings.show_95_bandwidth ? "1" : "0";
if (networkChart) {
networkChart.showP95 = !!settings.show_95_bandwidth;
networkChart.p95Type = settings.p95_type || 'tx';
if (dom.legendP95) {
dom.legendP95.classList.toggle('disabled', !networkChart.showP95);
}
if (dom.p95LabelText) {
const types = { tx: '上行', rx: '下行', both: '上行+下行' };
dom.p95LabelText.textContent = types[networkChart.p95Type] || '上行';
}
networkChart.draw();
}
}
@@ -1170,11 +1196,20 @@
}
// P95 setting
if (settings.show_95_bandwidth !== undefined) {
if (settings.show_95_bandwidth !== undefined || settings.p95_type !== undefined) {
if (networkChart) {
networkChart.showP95 = !!settings.show_95_bandwidth;
if (dom.legendP95) {
dom.legendP95.classList.toggle('disabled', !networkChart.showP95);
if (settings.show_95_bandwidth !== undefined) {
networkChart.showP95 = !!settings.show_95_bandwidth;
if (dom.legendP95) {
dom.legendP95.classList.toggle('disabled', !networkChart.showP95);
}
}
if (settings.p95_type !== undefined) {
networkChart.p95Type = settings.p95_type;
if (dom.p95LabelText) {
const types = { tx: '上行', rx: '下行', both: '上行+下行' };
dom.p95LabelText.textContent = types[settings.p95_type] || '上行';
}
}
networkChart.draw();
}
@@ -1193,7 +1228,8 @@
title: dom.siteTitleInput.value.trim(),
logo_url: dom.logoUrlInput.value.trim(),
default_theme: dom.defaultThemeInput.value,
show_95_bandwidth: dom.show95BandwidthInput.value === "1" ? 1 : 0
show_95_bandwidth: dom.show95BandwidthInput.value === "1" ? 1 : 0,
p95_type: dom.p95TypeSelect.value
};
dom.btnSaveSiteSettings.disabled = true;

35
public/js/chart.js
View File

@@ -10,6 +10,9 @@ class AreaChart {
this.animProgress = 0;
this.animFrame = null;
this.showP95 = false;
this.showRx = true;
this.showTx = true;
this.p95Type = 'tx'; // 'tx', 'rx', 'both'
this.dpr = window.devicePixelRatio || 1;
this.padding = { top: 20, right: 16, bottom: 32, left: 56 };
@@ -49,8 +52,15 @@ class AreaChart {
}
// Calculate P95 (95th percentile)
// Updated: Only count Upstream (TX) as requested
const combined = data.tx.map(t => t || 0);
let combined = [];
if (this.p95Type === 'tx') {
combined = data.tx.map(t => t || 0);
} else if (this.p95Type === 'rx') {
combined = data.rx.map(r => r || 0);
} else {
combined = data.tx.map((t, i) => (t || 0) + (data.rx[i] || 0));
}
if (combined.length > 0) {
const sorted = [...combined].sort((a, b) => a - b);
const p95Idx = Math.floor(sorted.length * 0.95);
@@ -103,9 +113,10 @@ class AreaChart {
}
// Find max raw value
let maxDataVal = 0;
let maxDataVal = 1024; // Minimum 1KB/s scale
for (let i = 0; i < rx.length; i++) {
maxDataVal = Math.max(maxDataVal, rx[i] || 0, tx[i] || 0);
if (this.showRx) maxDataVal = Math.max(maxDataVal, rx[i] || 0);
if (this.showTx) maxDataVal = Math.max(maxDataVal, tx[i] || 0);
}
// Determine consistent unit based on max data value
@@ -177,14 +188,18 @@ class AreaChart {
ctx.fillText(formatTime(timestamps[len - 1]), getX(len - 1), h - 8);
// Draw TX area
this.drawArea(ctx, tx, getX, getY, chartH, p,
'rgba(99, 102, 241, 0.25)', 'rgba(99, 102, 241, 0.02)',
'#6366f1', len);
if (this.showTx) {
this.drawArea(ctx, tx, getX, getY, chartH, p,
'rgba(99, 102, 241, 0.25)', 'rgba(99, 102, 241, 0.02)',
'#6366f1', len);
}
// Draw RX area (on top)
this.drawArea(ctx, rx, getX, getY, chartH, p,
'rgba(6, 182, 212, 0.25)', 'rgba(6, 182, 212, 0.02)',
'#06b6d4', len);
if (this.showRx) {
this.drawArea(ctx, rx, getX, getY, chartH, p,
'rgba(6, 182, 212, 0.25)', 'rgba(6, 182, 212, 0.02)',
'#06b6d4', len);
}
// Draw P95 line
if (this.showP95 && this.p95 && this.animProgress === 1) {

9
public/js/utils.js
View File

@@ -28,6 +28,15 @@ function formatBandwidth(bytesPerSec, decimals = 2) {
return value.toFixed(decimals) + ' ' + sizes[i];
}
/**
* Convert bytes per second to MB/s (numeric string)
*/
function toMBps(bytesPerSec, decimals = 2) {
if (!bytesPerSec || bytesPerSec === 0) return '0.00';
const mbps = bytesPerSec / (1024 * 1024);
return mbps.toFixed(decimals);
}
/**
* Format percentage
*/