优化布局
This commit is contained in:
CN-JS-HuiBai
@@ -1983,101 +1983,3 @@ input:checked+.slider:before {
|
|||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---- Network Summary Stats Premium Layout ---- */
|
|
||||||
.network-summary-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 16px;
|
|
||||||
padding: 8px 0;
|
|
||||||
margin: 12px 0;
|
|
||||||
animation: slideInDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-stat-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 16px;
|
|
||||||
padding: 20px;
|
|
||||||
background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-stat-item::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: radial-gradient(circle at top left, rgba(99, 102, 241, 0.05), transparent 70%);
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-stat-item:hover {
|
|
||||||
background: rgba(99, 102, 241, 0.08);
|
|
||||||
border-color: rgba(99, 102, 241, 0.3);
|
|
||||||
transform: translateY(-3px) scale(1.01);
|
|
||||||
box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.5), 0 0 15px rgba(99, 102, 241, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-stat-item:hover::after {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-icon-wrapper {
|
|
||||||
width: 44px;
|
|
||||||
height: 44px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
background: rgba(99, 102, 241, 0.15);
|
|
||||||
color: var(--accent-indigo);
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-rx .stat-icon-wrapper { background: rgba(34, 211, 238, 0.12); color: #22d3ee; }
|
|
||||||
.stat-tx .stat-icon-wrapper { background: rgba(99, 102, 241, 0.12); color: #818cf8; }
|
|
||||||
.stat-p95 .stat-icon-wrapper { background: rgba(244, 63, 94, 0.12); color: #fb7185; }
|
|
||||||
.stat-total .stat-icon-wrapper { background: rgba(16, 185, 129, 0.12); color: #34d399; }
|
|
||||||
|
|
||||||
.stat-info {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-stat-label {
|
|
||||||
font-size: 0.72rem;
|
|
||||||
color: var(--text-muted);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.08em;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-stat-value {
|
|
||||||
font-size: 1.3rem;
|
|
||||||
font-weight: 800;
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
letter-spacing: -0.01em;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideInDown {
|
|
||||||
from { opacity: 0; transform: translateY(-10px); }
|
|
||||||
to { opacity: 1; transform: translateY(0); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.network-summary-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -948,7 +948,7 @@
|
|||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div class="metric-item-content" id="metrics-content-${m.key}">
|
<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-group">
|
||||||
<div class="time-range-selector">
|
<div class="time-range-selector">
|
||||||
<button class="time-range-btn ${m.key !== 'networkTrend' ? 'active' : ''}" onclick="loadMetricHistory('${m.key}', '1h', event)">1h</button>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<div id="summary-${m.key}" style="display:none;"></div>
|
<div class="detail-chart-wrapper" style="${m.key === 'cpuBusy' ? 'height: 260px;' : ''}">
|
||||||
<div class="detail-chart-wrapper" id="wrapper-${m.key}" style="${m.key === 'cpuBusy' ? 'height: 260px;' : ''}">
|
|
||||||
<canvas id="chart-${m.key}"></canvas>
|
<canvas id="chart-${m.key}"></canvas>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1074,93 +1073,12 @@
|
|||||||
data.series = null; // This tells MetricChart to draw a single line instead of stacked area
|
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) {
|
} catch (err) {
|
||||||
console.error(`Error loading history for ${metricKey}:`, 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) {
|
window.loadCustomMetricHistory = async function (metricKey, event) {
|
||||||
if (event) event.stopPropagation();
|
if (event) event.stopPropagation();
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user