|
|
@ -185,6 +185,36 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- RF CPU时间图表 --> |
|
|
|
<div class="row mb-4"> |
|
|
|
<div class="col-md-6"> |
|
|
|
<div class="card"> |
|
|
|
<div class="card-header"> |
|
|
|
<h5 class="card-title">RF CPU时间</h5> |
|
|
|
</div> |
|
|
|
<div class="card-body"> |
|
|
|
<div class="chart-container"> |
|
|
|
<canvas id="rfCpuChart"></canvas> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- RXTX延迟图表 --> |
|
|
|
<div class="col-md-6"> |
|
|
|
<div class="card"> |
|
|
|
<div class="card-header"> |
|
|
|
<h5 class="card-title">RXTX延迟统计</h5> |
|
|
|
</div> |
|
|
|
<div class="card-body"> |
|
|
|
<div class="chart-container"> |
|
|
|
<canvas id="rxtxDelayChart"></canvas> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 小区性能图表 --> |
|
|
|
<div class="row mb-4"> |
|
|
|
<div class="col-md-12"> |
|
|
@ -304,6 +334,8 @@ |
|
|
|
// 图表实例 |
|
|
|
let cpuChart = null; |
|
|
|
let rfChart = null; |
|
|
|
let rfCpuChart = null; |
|
|
|
let rxtxDelayChart = null; |
|
|
|
let cellPerformanceChart = null; |
|
|
|
let txSamplesChart = null; |
|
|
|
let rxSamplesChart = null; |
|
|
@ -365,6 +397,56 @@ |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
// RF CPU时间图表 |
|
|
|
const rfCpuCtx = document.getElementById('rfCpuChart').getContext('2d'); |
|
|
|
rfCpuChart = new Chart(rfCpuCtx, { |
|
|
|
type: 'bar', |
|
|
|
data: { |
|
|
|
labels: ['RX CPU时间', 'TX CPU时间'], |
|
|
|
datasets: [{ |
|
|
|
label: 'CPU时间 (%)', |
|
|
|
data: [0, 0], |
|
|
|
backgroundColor: ['#ff6384', '#36a2eb'], |
|
|
|
borderWidth: 1 |
|
|
|
}] |
|
|
|
}, |
|
|
|
options: { |
|
|
|
responsive: true, |
|
|
|
maintainAspectRatio: false, |
|
|
|
scales: { |
|
|
|
y: { |
|
|
|
beginAtZero: true |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
// RXTX延迟图表 |
|
|
|
const rxtxDelayCtx = document.getElementById('rxtxDelayChart').getContext('2d'); |
|
|
|
rxtxDelayChart = new Chart(rxtxDelayCtx, { |
|
|
|
type: 'line', |
|
|
|
data: { |
|
|
|
labels: ['最小值', '平均值', '最大值'], |
|
|
|
datasets: [{ |
|
|
|
label: '延迟 (ms)', |
|
|
|
data: [0, 0, 0], |
|
|
|
borderColor: '#4bc0c0', |
|
|
|
backgroundColor: 'rgba(75, 192, 192, 0.1)', |
|
|
|
tension: 0.1, |
|
|
|
fill: true |
|
|
|
}] |
|
|
|
}, |
|
|
|
options: { |
|
|
|
responsive: true, |
|
|
|
maintainAspectRatio: false, |
|
|
|
scales: { |
|
|
|
y: { |
|
|
|
beginAtZero: true |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
// 小区性能图表 |
|
|
|
const cellCtx = document.getElementById('cellPerformanceChart').getContext('2d'); |
|
|
|
cellPerformanceChart = new Chart(cellCtx, { |
|
|
@ -479,11 +561,27 @@ |
|
|
|
|
|
|
|
// 更新RF图表 |
|
|
|
if (firstClient.rf) { |
|
|
|
// 更新RF采样率图表 |
|
|
|
rfChart.data.datasets[0].data = [ |
|
|
|
firstClient.rf.rxSampleRate || 0, |
|
|
|
firstClient.rf.txSampleRate || 0 |
|
|
|
]; |
|
|
|
rfChart.update(); |
|
|
|
|
|
|
|
// 更新RF CPU时间图表 |
|
|
|
rfCpuChart.data.datasets[0].data = [ |
|
|
|
firstClient.rf.rxCpuTime || 0, |
|
|
|
firstClient.rf.txCpuTime || 0 |
|
|
|
]; |
|
|
|
rfCpuChart.update(); |
|
|
|
|
|
|
|
// 更新RXTX延迟图表 |
|
|
|
rxtxDelayChart.data.datasets[0].data = [ |
|
|
|
firstClient.rf.rxtxDelayMin || 0, |
|
|
|
firstClient.rf.rxtxDelayAvg || 0, |
|
|
|
firstClient.rf.rxtxDelayMax || 0 |
|
|
|
]; |
|
|
|
rxtxDelayChart.update(); |
|
|
|
} |
|
|
|
|
|
|
|
// 更新小区性能图表 |
|
|
|