You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
827 lines
33 KiB
827 lines
33 KiB
@{
|
|
ViewData["Title"] = "统计数据";
|
|
}
|
|
|
|
<style>
|
|
/* 页面整体布局 */
|
|
.config-container {
|
|
max-height: calc(100vh - 280px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 内容区域 */
|
|
.stats-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
/* 自定义滚动条 */
|
|
.stats-content::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.stats-content::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.stats-content::-webkit-scrollbar-thumb {
|
|
background: #c1c1c1;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.stats-content::-webkit-scrollbar-thumb:hover {
|
|
background: #a8a8a8;
|
|
}
|
|
|
|
/* 图表容器样式 */
|
|
.chart-container {
|
|
position: relative;
|
|
height: 300px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* 响应式调整 */
|
|
@@media (max-width: 768px) {
|
|
.config-container {
|
|
max-height: calc(100vh - 240px);
|
|
}
|
|
|
|
.stats-content {
|
|
padding: 0.6rem;
|
|
}
|
|
|
|
.chart-container {
|
|
height: 250px;
|
|
}
|
|
}
|
|
|
|
@@media (max-width: 576px) {
|
|
.config-container {
|
|
max-height: calc(100vh - 220px);
|
|
}
|
|
|
|
.stats-content {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.chart-container {
|
|
height: 200px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">LTE统计数据监控</h3>
|
|
<div class="card-tools">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="refreshStats()">
|
|
<i class="fas fa-sync-alt"></i> 刷新
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-outline-danger" onclick="clearStats()">
|
|
<i class="fas fa-trash"></i> 清空
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-outline-info" onclick="toggleSSE()">
|
|
<i class="fas fa-broadcast-tower"></i> <span id="sseToggleText">启动SSE</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="config-container">
|
|
<div class="stats-content">
|
|
<!-- 统计摘要 -->
|
|
<div class="row mb-3">
|
|
<div class="col-md-3">
|
|
<div class="info-box">
|
|
<span class="info-box-icon bg-info"><i class="fas fa-server"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">客户端数量</span>
|
|
<span class="info-box-number" id="clientCount">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="info-box">
|
|
<span class="info-box-icon bg-success"><i class="fas fa-database"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">队列大小</span>
|
|
<span class="info-box-number" id="queueCount">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="info-box">
|
|
<span class="info-box-icon bg-warning"><i class="fas fa-clock"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">最后更新</span>
|
|
<span class="info-box-number" id="lastUpdate">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="info-box">
|
|
<span class="info-box-icon bg-primary"><i class="fas fa-signal"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">SSE状态</span>
|
|
<span class="info-box-number" id="sseStatus">未连接</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 客户端选择 -->
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="clientSelect">选择客户端:</label>
|
|
<select class="form-control" id="clientSelect" onchange="loadClientStats()">
|
|
<option value="">所有客户端</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="refreshInterval">刷新间隔 (秒):</label>
|
|
<input type="number" class="form-control" id="refreshInterval" value="5" min="1" max="60" onchange="updateRefreshInterval()">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 图表区域 -->
|
|
<div class="row mb-4">
|
|
<!-- CPU使用率图表 -->
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">CPU使用率</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart-container">
|
|
<canvas id="cpuChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RF采样率图表 -->
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">RF采样率</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<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">
|
|
<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">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">小区性能指标</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart-container">
|
|
<canvas id="cellPerformanceChart"></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>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart-container">
|
|
<canvas id="txSamplesChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">RX样本数据</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart-container">
|
|
<canvas id="rxSamplesChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 统计数据表格 -->
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-striped" id="statsTable">
|
|
<thead>
|
|
<tr>
|
|
<th>客户端</th>
|
|
<th>实例ID</th>
|
|
<th>CPU使用率</th>
|
|
<th>小区数量</th>
|
|
<th>RF端口</th>
|
|
<th>消息ID</th>
|
|
<th>持续时间</th>
|
|
<th>接收时间</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="statsTableBody">
|
|
<!-- 数据将通过JavaScript动态填充 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 小区详细信息 -->
|
|
<div class="row mt-4" id="cellDetails" style="display: none;">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">小区详细信息 - <span id="selectedClientName"></span></h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-striped" id="cellTable">
|
|
<thead>
|
|
<tr>
|
|
<th>小区ID</th>
|
|
<th>下行比特率</th>
|
|
<th>上行比特率</th>
|
|
<th>下行使用率(平均)</th>
|
|
<th>上行使用率(平均)</th>
|
|
<th>UE数量(平均)</th>
|
|
<th>ERAB数量(平均)</th>
|
|
<th>调度用户(下行)</th>
|
|
<th>调度用户(上行)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="cellTableBody">
|
|
<!-- 小区数据将通过JavaScript动态填充 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
<!-- Chart.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<script>
|
|
let sseConnection = null;
|
|
let refreshTimer = null;
|
|
let currentStats = {};
|
|
|
|
// 图表实例
|
|
let cpuChart = null;
|
|
let rfChart = null;
|
|
let rfCpuChart = null;
|
|
let rxtxDelayChart = null;
|
|
let cellPerformanceChart = null;
|
|
let txSamplesChart = null;
|
|
let rxSamplesChart = null;
|
|
|
|
// 页面加载完成后初始化
|
|
$(document).ready(function() {
|
|
initializeCharts();
|
|
loadSummary();
|
|
loadAllStats();
|
|
startRefreshTimer();
|
|
});
|
|
|
|
// 初始化图表
|
|
function initializeCharts() {
|
|
// CPU使用率图表
|
|
const cpuCtx = document.getElementById('cpuChart').getContext('2d');
|
|
cpuChart = new Chart(cpuCtx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['CPU使用率', '空闲'],
|
|
datasets: [{
|
|
data: [0, 100],
|
|
backgroundColor: ['#ff6384', '#36a2eb'],
|
|
borderWidth: 0
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// RF采样率图表
|
|
const rfCtx = document.getElementById('rfChart').getContext('2d');
|
|
rfChart = new Chart(rfCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['RX采样率', 'TX采样率'],
|
|
datasets: [{
|
|
label: '采样率 (MHz)',
|
|
data: [0, 0],
|
|
backgroundColor: ['#4bc0c0', '#ff9f40'],
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// 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, {
|
|
type: 'line',
|
|
data: {
|
|
labels: [],
|
|
datasets: [{
|
|
label: '下行使用率 (%)',
|
|
data: [],
|
|
borderColor: '#ff6384',
|
|
backgroundColor: 'rgba(255, 99, 132, 0.1)',
|
|
tension: 0.1
|
|
}, {
|
|
label: '上行使用率 (%)',
|
|
data: [],
|
|
borderColor: '#36a2eb',
|
|
backgroundColor: 'rgba(54, 162, 235, 0.1)',
|
|
tension: 0.1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
max: 100
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// TX样本图表
|
|
const txCtx = document.getElementById('txSamplesChart').getContext('2d');
|
|
txSamplesChart = new Chart(txCtx, {
|
|
type: 'scatter',
|
|
data: {
|
|
datasets: [{
|
|
label: 'TX样本',
|
|
data: [],
|
|
backgroundColor: '#ff6384',
|
|
pointRadius: 4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: 'RMS (dB)'
|
|
}
|
|
},
|
|
y: {
|
|
title: {
|
|
display: true,
|
|
text: 'Max (dB)'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// RX样本图表
|
|
const rxCtx = document.getElementById('rxSamplesChart').getContext('2d');
|
|
rxSamplesChart = new Chart(rxCtx, {
|
|
type: 'scatter',
|
|
data: {
|
|
datasets: [{
|
|
label: 'RX样本',
|
|
data: [],
|
|
backgroundColor: '#36a2eb',
|
|
pointRadius: 4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: 'RMS (dB)'
|
|
}
|
|
},
|
|
y: {
|
|
title: {
|
|
display: true,
|
|
text: 'Max (dB)'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// 更新图表数据
|
|
function updateCharts() {
|
|
const clients = Object.keys(currentStats);
|
|
if (clients.length === 0) return;
|
|
|
|
// 获取第一个客户端的数据作为示例
|
|
const firstClient = currentStats[clients[0]];
|
|
|
|
// 更新CPU图表
|
|
if (firstClient.cpu) {
|
|
const cpuUsage = firstClient.cpu.global || 0;
|
|
cpuChart.data.datasets[0].data = [cpuUsage, 100 - cpuUsage];
|
|
cpuChart.update();
|
|
}
|
|
|
|
// 更新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();
|
|
}
|
|
|
|
// 更新小区性能图表
|
|
if (firstClient.cells) {
|
|
const cellIds = Object.keys(firstClient.cells);
|
|
const dlUsage = [];
|
|
const ulUsage = [];
|
|
|
|
cellIds.forEach(cellId => {
|
|
const cell = firstClient.cells[cellId];
|
|
dlUsage.push(cell.dlUseAvg || 0);
|
|
ulUsage.push(cell.ulUseAvg || 0);
|
|
});
|
|
|
|
cellPerformanceChart.data.labels = cellIds;
|
|
cellPerformanceChart.data.datasets[0].data = dlUsage;
|
|
cellPerformanceChart.data.datasets[1].data = ulUsage;
|
|
cellPerformanceChart.update();
|
|
}
|
|
|
|
// 更新样本图表
|
|
if (firstClient.samples) {
|
|
// TX样本
|
|
const txData = [];
|
|
if (firstClient.samples.txSamples) {
|
|
firstClient.samples.txSamples.forEach(sample => {
|
|
txData.push({
|
|
x: sample.rms,
|
|
y: sample.max
|
|
});
|
|
});
|
|
}
|
|
txSamplesChart.data.datasets[0].data = txData;
|
|
txSamplesChart.update();
|
|
|
|
// RX样本
|
|
const rxData = [];
|
|
if (firstClient.samples.rxSamples) {
|
|
firstClient.samples.rxSamples.forEach(sample => {
|
|
rxData.push({
|
|
x: sample.rms,
|
|
y: sample.max
|
|
});
|
|
});
|
|
}
|
|
rxSamplesChart.data.datasets[0].data = rxData;
|
|
rxSamplesChart.update();
|
|
}
|
|
}
|
|
|
|
// 加载统计摘要
|
|
function loadSummary() {
|
|
$.get('/Statistics/GetSummary', function(response) {
|
|
if (response.success) {
|
|
$('#clientCount').text(response.data.clientCount || 0);
|
|
$('#queueCount').text(response.data.totalStatsCount || 0);
|
|
if (response.data.lastUpdateTime) {
|
|
$('#lastUpdate').text(new Date(response.data.lastUpdateTime).toLocaleString());
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// 加载所有统计数据
|
|
function loadAllStats() {
|
|
$.get('/Statistics/GetAllClientStats', function(response) {
|
|
if (response.success) {
|
|
currentStats = response.data;
|
|
updateStatsTable();
|
|
updateClientSelect();
|
|
updateCharts();
|
|
}
|
|
});
|
|
}
|
|
|
|
// 更新统计表格
|
|
function updateStatsTable() {
|
|
const tbody = $('#statsTableBody');
|
|
tbody.empty();
|
|
|
|
Object.keys(currentStats).forEach(clientName => {
|
|
const stats = currentStats[clientName];
|
|
const row = `
|
|
<tr>
|
|
<td>${clientName}</td>
|
|
<td>${stats.instanceId || '-'}</td>
|
|
<td>${(stats.cpu?.global || 0).toFixed(2)}%</td>
|
|
<td>${Object.keys(stats.cells || {}).length}</td>
|
|
<td>${Object.keys(stats.rfPorts || {}).length}</td>
|
|
<td>${stats.messageId || '-'}</td>
|
|
<td>${(stats.duration || 0).toFixed(2)}s</td>
|
|
<td>${new Date(stats.receivedAt).toLocaleString()}</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-info" onclick="showCellDetails('${clientName}')">
|
|
<i class="fas fa-eye"></i> 查看小区
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
tbody.append(row);
|
|
});
|
|
}
|
|
|
|
// 更新客户端选择下拉框
|
|
function updateClientSelect() {
|
|
const select = $('#clientSelect');
|
|
select.find('option:not(:first)').remove();
|
|
|
|
Object.keys(currentStats).forEach(clientName => {
|
|
select.append(`<option value="${clientName}">${clientName}</option>`);
|
|
});
|
|
}
|
|
|
|
// 显示小区详细信息
|
|
function showCellDetails(clientName) {
|
|
const stats = currentStats[clientName];
|
|
if (!stats || !stats.cells) return;
|
|
|
|
$('#selectedClientName').text(clientName);
|
|
const tbody = $('#cellTableBody');
|
|
tbody.empty();
|
|
|
|
Object.keys(stats.cells).forEach(cellId => {
|
|
const cell = stats.cells[cellId];
|
|
const row = `
|
|
<tr>
|
|
<td>${cellId}</td>
|
|
<td>${(cell.dlBitrate || 0).toFixed(2)}</td>
|
|
<td>${(cell.ulBitrate || 0).toFixed(2)}</td>
|
|
<td>${(cell.dlUseAvg || 0).toFixed(2)}%</td>
|
|
<td>${(cell.ulUseAvg || 0).toFixed(2)}%</td>
|
|
<td>${(cell.ueCountAvg || 0).toFixed(0)}</td>
|
|
<td>${(cell.erabCountAvg || 0).toFixed(0)}</td>
|
|
<td>${(cell.dlSchedUsersAvg || 0).toFixed(0)}</td>
|
|
<td>${(cell.ulSchedUsersAvg || 0).toFixed(0)}</td>
|
|
</tr>
|
|
`;
|
|
tbody.append(row);
|
|
});
|
|
|
|
$('#cellDetails').show();
|
|
}
|
|
|
|
// 加载指定客户端的统计数据
|
|
function loadClientStats() {
|
|
const clientName = $('#clientSelect').val();
|
|
if (!clientName) {
|
|
loadAllStats();
|
|
return;
|
|
}
|
|
|
|
$.get(`/Statistics/GetClientStats?clientName=${encodeURIComponent(clientName)}`, function(response) {
|
|
if (response.success) {
|
|
currentStats = { [clientName]: response.data };
|
|
updateStatsTable();
|
|
updateCharts();
|
|
}
|
|
});
|
|
}
|
|
|
|
// 刷新统计数据
|
|
function refreshStats() {
|
|
loadSummary();
|
|
loadAllStats();
|
|
}
|
|
|
|
// 清空统计数据
|
|
function clearStats() {
|
|
if (confirm('确定要清空所有统计数据吗？')) {
|
|
$.post('/Statistics/ClearStats', function(response) {
|
|
if (response.success) {
|
|
alert('统计数据已清空');
|
|
refreshStats();
|
|
} else {
|
|
alert('清空失败: ' + response.message);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// 切换SSE连接
|
|
function toggleSSE() {
|
|
if (sseConnection) {
|
|
sseConnection.close();
|
|
sseConnection = null;
|
|
$('#sseToggleText').text('启动SSE');
|
|
$('#sseStatus').text('未连接').removeClass('text-success').addClass('text-danger');
|
|
} else {
|
|
startSSE();
|
|
$('#sseToggleText').text('停止SSE');
|
|
$('#sseStatus').text('已连接').removeClass('text-danger').addClass('text-success');
|
|
}
|
|
}
|
|
|
|
// 启动SSE连接
|
|
function startSSE() {
|
|
sseConnection = new EventSource('/Statistics/SSEStats');
|
|
|
|
sseConnection.onmessage = function(event) {
|
|
try {
|
|
const data = JSON.parse(event.data);
|
|
if (data.type === 'stats_update') {
|
|
currentStats = data.data;
|
|
updateStatsTable();
|
|
updateCharts();
|
|
loadSummary();
|
|
}
|
|
} catch (e) {
|
|
console.error('解析SSE数据失败:', e);
|
|
}
|
|
};
|
|
|
|
sseConnection.onerror = function(event) {
|
|
console.error('SSE连接错误:', event);
|
|
$('#sseStatus').text('连接错误').removeClass('text-success').addClass('text-danger');
|
|
};
|
|
}
|
|
|
|
// 启动刷新定时器
|
|
function startRefreshTimer() {
|
|
const interval = $('#refreshInterval').val() * 1000;
|
|
if (refreshTimer) {
|
|
clearInterval(refreshTimer);
|
|
}
|
|
refreshTimer = setInterval(refreshStats, interval);
|
|
}
|
|
|
|
// 更新刷新间隔
|
|
function updateRefreshInterval() {
|
|
startRefreshTimer();
|
|
}
|
|
|
|
// 页面卸载时清理资源
|
|
$(window).on('beforeunload', function() {
|
|
if (sseConnection) {
|
|
sseConnection.close();
|
|
}
|
|
if (refreshTimer) {
|
|
clearInterval(refreshTimer);
|
|
}
|
|
});
|
|
</script>
|
|
}
|