Browse Source

ddds

feature/MultiClientLog
root 1 month ago
parent
commit
b3088c14ad
  1. 239
      LTEMvcApp/Views/Statistics/Index.cshtml

239
LTEMvcApp/Views/Statistics/Index.cshtml

@ -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>
}
Loading…
Cancel
Save