|
|
@ -41,8 +41,8 @@ |
|
|
|
/* 图表容器样式 */ |
|
|
|
.chart-container { |
|
|
|
position: relative; |
|
|
|
height: 300px; |
|
|
|
margin-bottom: 1rem; |
|
|
|
height: 200px; |
|
|
|
margin-bottom: 0.5rem; |
|
|
|
} |
|
|
|
|
|
|
|
/* 响应式调整 */ |
|
|
@ -56,7 +56,7 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.chart-container { |
|
|
|
height: 250px; |
|
|
|
height: 180px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
@ -70,7 +70,7 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.chart-container { |
|
|
|
height: 200px; |
|
|
|
height: 160px; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
@ -155,14 +155,14 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 图表区域 --> |
|
|
|
<div class="row mb-4"> |
|
|
|
<div class="row mb-3"> |
|
|
|
<!-- CPU使用率图表 --> |
|
|
|
<div class="col-md-6"> |
|
|
|
<div class="col-md-3"> |
|
|
|
<div class="card"> |
|
|
|
<div class="card-header"> |
|
|
|
<h5 class="card-title">CPU使用率</h5> |
|
|
|
<h6 class="card-title mb-0">CPU使用率</h6> |
|
|
|
</div> |
|
|
|
<div class="card-body"> |
|
|
|
<div class="card-body p-2"> |
|
|
|
<div class="chart-container"> |
|
|
|
<canvas id="cpuChart"></canvas> |
|
|
|
</div> |
|
|
@ -171,28 +171,26 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- RF采样率图表 --> |
|
|
|
<div class="col-md-6"> |
|
|
|
<div class="col-md-3"> |
|
|
|
<div class="card"> |
|
|
|
<div class="card-header"> |
|
|
|
<h5 class="card-title">RF采样率</h5> |
|
|
|
<h6 class="card-title mb-0">RF采样率</h6> |
|
|
|
</div> |
|
|
|
<div class="card-body"> |
|
|
|
<div class="card-body p-2"> |
|
|
|
<div class="chart-container"> |
|
|
|
<canvas id="rfChart"></canvas> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- RF CPU时间图表 --> |
|
|
|
<div class="row mb-4"> |
|
|
|
<div class="col-md-6"> |
|
|
|
<!-- RF CPU时间图表 --> |
|
|
|
<div class="col-md-3"> |
|
|
|
<div class="card"> |
|
|
|
<div class="card-header"> |
|
|
|
<h5 class="card-title">RF CPU时间</h5> |
|
|
|
<h6 class="card-title mb-0">RF CPU时间</h6> |
|
|
|
</div> |
|
|
|
<div class="card-body"> |
|
|
|
<div class="card-body p-2"> |
|
|
|
<div class="chart-container"> |
|
|
|
<canvas id="rfCpuChart"></canvas> |
|
|
|
</div> |
|
|
@ -201,12 +199,12 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- RXTX延迟图表 --> |
|
|
|
<div class="col-md-6"> |
|
|
|
<div class="col-md-3"> |
|
|
|
<div class="card"> |
|
|
|
<div class="card-header"> |
|
|
|
<h5 class="card-title">RXTX延迟统计</h5> |
|
|
|
<h6 class="card-title mb-0">RXTX延迟</h6> |
|
|
|
</div> |
|
|
|
<div class="card-body"> |
|
|
|
<div class="card-body p-2"> |
|
|
|
<div class="chart-container"> |
|
|
|
<canvas id="rxtxDelayChart"></canvas> |
|
|
|
</div> |
|
|
@ -215,45 +213,45 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 小区性能图表 --> |
|
|
|
<div class="row mb-4"> |
|
|
|
<div class="col-md-12"> |
|
|
|
<!-- 样本数据图表 --> |
|
|
|
<div class="row mb-3"> |
|
|
|
<div class="col-md-6"> |
|
|
|
<div class="card"> |
|
|
|
<div class="card-header"> |
|
|
|
<h5 class="card-title">小区性能指标</h5> |
|
|
|
<h6 class="card-title mb-0">TX样本数据</h6> |
|
|
|
</div> |
|
|
|
<div class="card-body"> |
|
|
|
<div class="card-body p-2"> |
|
|
|
<div class="chart-container"> |
|
|
|
<canvas id="cellPerformanceChart"></canvas> |
|
|
|
<canvas id="txSamplesChart"></canvas> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 样本数据图表 --> |
|
|
|
<div class="row mb-4"> |
|
|
|
|
|
|
|
<div class="col-md-6"> |
|
|
|
<div class="card"> |
|
|
|
<div class="card-header"> |
|
|
|
<h5 class="card-title">TX样本数据</h5> |
|
|
|
<h6 class="card-title mb-0">RX样本数据</h6> |
|
|
|
</div> |
|
|
|
<div class="card-body"> |
|
|
|
<div class="card-body p-2"> |
|
|
|
<div class="chart-container"> |
|
|
|
<canvas id="txSamplesChart"></canvas> |
|
|
|
<canvas id="rxSamplesChart"></canvas> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="col-md-6"> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 小区性能图表 --> |
|
|
|
<div class="row mb-3"> |
|
|
|
<div class="col-md-12"> |
|
|
|
<div class="card"> |
|
|
|
<div class="card-header"> |
|
|
|
<h5 class="card-title">RX样本数据</h5> |
|
|
|
<h6 class="card-title mb-0">小区性能指标</h6> |
|
|
|
</div> |
|
|
|
<div class="card-body"> |
|
|
|
<div class="card-body p-2"> |
|
|
|
<div class="chart-container"> |
|
|
|
<canvas id="rxSamplesChart"></canvas> |
|
|
|
<canvas id="cellPerformanceChart"></canvas> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -367,7 +365,14 @@ |
|
|
|
maintainAspectRatio: false, |
|
|
|
plugins: { |
|
|
|
legend: { |
|
|
|
position: 'bottom' |
|
|
|
position: 'bottom', |
|
|
|
labels: { |
|
|
|
boxWidth: 10, |
|
|
|
padding: 5, |
|
|
|
font: { |
|
|
|
size: 10 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
@ -378,7 +383,7 @@ |
|
|
|
rfChart = new Chart(rfCtx, { |
|
|
|
type: 'bar', |
|
|
|
data: { |
|
|
|
labels: ['RX采样率', 'TX采样率'], |
|
|
|
labels: ['RX', 'TX'], |
|
|
|
datasets: [{ |
|
|
|
label: '采样率 (MHz)', |
|
|
|
data: [0, 0], |
|
|
@ -389,9 +394,26 @@ |
|
|
|
options: { |
|
|
|
responsive: true, |
|
|
|
maintainAspectRatio: false, |
|
|
|
plugins: { |
|
|
|
legend: { |
|
|
|
display: false |
|
|
|
} |
|
|
|
}, |
|
|
|
scales: { |
|
|
|
y: { |
|
|
|
beginAtZero: true |
|
|
|
beginAtZero: true, |
|
|
|
ticks: { |
|
|
|
font: { |
|
|
|
size: 10 |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
x: { |
|
|
|
ticks: { |
|
|
|
font: { |
|
|
|
size: 10 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
@ -402,7 +424,7 @@ |
|
|
|
rfCpuChart = new Chart(rfCpuCtx, { |
|
|
|
type: 'bar', |
|
|
|
data: { |
|
|
|
labels: ['RX CPU时间', 'TX CPU时间'], |
|
|
|
labels: ['RX', 'TX'], |
|
|
|
datasets: [{ |
|
|
|
label: 'CPU时间 (%)', |
|
|
|
data: [0, 0], |
|
|
@ -413,9 +435,26 @@ |
|
|
|
options: { |
|
|
|
responsive: true, |
|
|
|
maintainAspectRatio: false, |
|
|
|
plugins: { |
|
|
|
legend: { |
|
|
|
display: false |
|
|
|
} |
|
|
|
}, |
|
|
|
scales: { |
|
|
|
y: { |
|
|
|
beginAtZero: true |
|
|
|
beginAtZero: true, |
|
|
|
ticks: { |
|
|
|
font: { |
|
|
|
size: 10 |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
x: { |
|
|
|
ticks: { |
|
|
|
font: { |
|
|
|
size: 10 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
@ -426,7 +465,7 @@ |
|
|
|
rxtxDelayChart = new Chart(rxtxDelayCtx, { |
|
|
|
type: 'line', |
|
|
|
data: { |
|
|
|
labels: ['最小值', '平均值', '最大值'], |
|
|
|
labels: ['最小', '平均', '最大'], |
|
|
|
datasets: [{ |
|
|
|
label: '延迟 (ms)', |
|
|
|
data: [0, 0, 0], |
|
|
@ -439,9 +478,26 @@ |
|
|
|
options: { |
|
|
|
responsive: true, |
|
|
|
maintainAspectRatio: false, |
|
|
|
plugins: { |
|
|
|
legend: { |
|
|
|
display: false |
|
|
|
} |
|
|
|
}, |
|
|
|
scales: { |
|
|
|
y: { |
|
|
|
beginAtZero: true |
|
|
|
beginAtZero: true, |
|
|
|
ticks: { |
|
|
|
font: { |
|
|
|
size: 10 |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
x: { |
|
|
|
ticks: { |
|
|
|
font: { |
|
|
|
size: 10 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
@ -470,10 +526,34 @@ |
|
|
|
options: { |
|
|
|
responsive: true, |
|
|
|
maintainAspectRatio: false, |
|
|
|
plugins: { |
|
|
|
legend: { |
|
|
|
position: 'top', |
|
|
|
labels: { |
|
|
|
boxWidth: 10, |
|
|
|
padding: 5, |
|
|
|
font: { |
|
|
|
size: 10 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
scales: { |
|
|
|
y: { |
|
|
|
beginAtZero: true, |
|
|
|
max: 100 |
|
|
|
max: 100, |
|
|
|
ticks: { |
|
|
|
font: { |
|
|
|
size: 10 |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
x: { |
|
|
|
ticks: { |
|
|
|
font: { |
|
|
|
size: 10 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
@ -488,23 +568,44 @@ |
|
|
|
label: 'TX样本', |
|
|
|
data: [], |
|
|
|
backgroundColor: '#ff6384', |
|
|
|
pointRadius: 4 |
|
|
|
pointRadius: 3 |
|
|
|
}] |
|
|
|
}, |
|
|
|
options: { |
|
|
|
responsive: true, |
|
|
|
maintainAspectRatio: false, |
|
|
|
plugins: { |
|
|
|
legend: { |
|
|
|
display: false |
|
|
|
} |
|
|
|
}, |
|
|
|
scales: { |
|
|
|
x: { |
|
|
|
title: { |
|
|
|
display: true, |
|
|
|
text: 'RMS (dB)' |
|
|
|
text: 'RMS (dB)', |
|
|
|
font: { |
|
|
|
size: 10 |
|
|
|
} |
|
|
|
}, |
|
|
|
ticks: { |
|
|
|
font: { |
|
|
|
size: 10 |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
y: { |
|
|
|
title: { |
|
|
|
display: true, |
|
|
|
text: 'Max (dB)' |
|
|
|
text: 'Max (dB)', |
|
|
|
font: { |
|
|
|
size: 10 |
|
|
|
} |
|
|
|
}, |
|
|
|
ticks: { |
|
|
|
font: { |
|
|
|
size: 10 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
@ -520,23 +621,44 @@ |
|
|
|
label: 'RX样本', |
|
|
|
data: [], |
|
|
|
backgroundColor: '#36a2eb', |
|
|
|
pointRadius: 4 |
|
|
|
pointRadius: 3 |
|
|
|
}] |
|
|
|
}, |
|
|
|
options: { |
|
|
|
responsive: true, |
|
|
|
maintainAspectRatio: false, |
|
|
|
plugins: { |
|
|
|
legend: { |
|
|
|
display: false |
|
|
|
} |
|
|
|
}, |
|
|
|
scales: { |
|
|
|
x: { |
|
|
|
title: { |
|
|
|
display: true, |
|
|
|
text: 'RMS (dB)' |
|
|
|
text: 'RMS (dB)', |
|
|
|
font: { |
|
|
|
size: 10 |
|
|
|
} |
|
|
|
}, |
|
|
|
ticks: { |
|
|
|
font: { |
|
|
|
size: 10 |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
y: { |
|
|
|
title: { |
|
|
|
display: true, |
|
|
|
text: 'Max (dB)' |
|
|
|
text: 'Max (dB)', |
|
|
|
font: { |
|
|
|
size: 10 |
|
|
|
} |
|
|
|
}, |
|
|
|
ticks: { |
|
|
|
font: { |
|
|
|
size: 10 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
@ -823,5 +945,18 @@ |
|
|
|
clearInterval(refreshTimer); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
// 动态调整内容区高度,避免被footer遮挡 |
|
|
|
function adjustContentHeight() { |
|
|
|
var footer = document.querySelector('footer'); |
|
|
|
var footerHeight = footer ? footer.offsetHeight : 0; |
|
|
|
var header = document.querySelector('.card-header'); |
|
|
|
var headerHeight = header ? header.offsetHeight : 0; |
|
|
|
var maxH = window.innerHeight - footerHeight - headerHeight - 60; |
|
|
|
var statsContent = document.querySelector('.stats-content'); |
|
|
|
if (statsContent) statsContent.style.maxHeight = maxH + 'px'; |
|
|
|
} |
|
|
|
window.addEventListener('resize', adjustContentHeight); |
|
|
|
window.addEventListener('DOMContentLoaded', adjustContentHeight); |
|
|
|
</script> |
|
|
|
} |