TestLogs/LTEMvcApp/Views/Statistics/Index.cshtml

@{
    ViewData["Title"] = "统计数据";
}

<div class="container-fluid">
    <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">
                    <!-- 统计摘要 -->
                    <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="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 class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">统计配置管理</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h6>全局统计配置</h6>
                                </div>
                                <div class="card-body">
                                    <div class="form-group">
                                        <label>默认Samples:</label>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="globalSamples">
                                            <label class="form-check-label" for="globalSamples">启用Samples</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>默认RF:</label>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="globalRf">
                                            <label class="form-check-label" for="globalRf">启用RF</label>
                                        </div>
                                    </div>
                                    <button class="btn btn-primary btn-sm" onclick="loadGlobalConfig()">加载配置</button>
                                    <button class="btn btn-success btn-sm" onclick="saveGlobalConfig()">保存配置</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h6>客户端特定配置</h6>
                                </div>
                                <div class="card-body">
                                    <div class="form-group">
                                        <label>客户端名称:</label>
                                        <input type="text" class="form-control" id="clientName" placeholder="输入客户端名称">
                                    </div>
                                    <div class="form-group">
                                        <label>IP地址:</label>
                                        <input type="text" class="form-control" id="clientIp" placeholder="输入IP地址">
                                    </div>
                                    <div class="form-group">
                                        <label>配置选项:</label>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="clientSamples">
                                            <label class="form-check-label" for="clientSamples">启用Samples</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="clientRf">
                                            <label class="form-check-label" for="clientRf">启用RF</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="clientEnabled" checked>
                                            <label class="form-check-label" for="clientEnabled">启用配置</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>描述:</label>
                                        <input type="text" class="form-control" id="clientDescription" placeholder="配置描述">
                                    </div>
                                    <button class="btn btn-primary btn-sm" onclick="loadClientConfig()">加载配置</button>
                                    <button class="btn btn-success btn-sm" onclick="saveClientConfig()">保存配置</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row mt-3">
                        <div class="col-12">
                            <h6>配置列表</h6>
                            <button class="btn btn-info btn-sm mb-2" onclick="loadAllClientConfigs()">刷新配置列表</button>
                            <div id="configList" class="table-responsive">
                                <table class="table table-striped table-sm">
                                    <thead>
                                        <tr>
                                            <th>客户端名称</th>
                                            <th>IP地址</th>
                                            <th>Samples</th>
                                            <th>RF</th>
                                            <th>启用</th>
                                            <th>描述</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="configTableBody">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        let sseConnection = null;
        let refreshTimer = null;
        let currentStats = {};

        // 页面加载完成后初始化
        $(document).ready(function() {
            loadSummary();
            loadAllStats();
            startRefreshTimer();
            
            // 新增的配置管理初始化
            loadGlobalConfig();
            loadAllClientConfigs();
        });

        // 加载统计摘要
        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();
                }
            });
        }

        // 更新统计表格
        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();
                }
            });
        }

        // 刷新统计数据
        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();
                        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);
            }
        });

        // 统计配置管理相关函数
        function loadGlobalConfig() {
            console.log('加载全局统计配置...');
            $.get('/Statistics/GetGlobalStatisticsConfig', function(response) {
                if (response.success) {
                    const config = response.data;
                    document.getElementById('globalSamples').checked = config.defaultSamples;
                    document.getElementById('globalRf').checked = config.defaultRf;
                    console.log('全局配置已加载:', config);
                } else {
                    console.error('加载全局配置失败:', response.message);
                }
            }).fail(function(xhr, status, error) {
                console.error('加载全局配置错误:', error);
            });
        }

        function saveGlobalConfig() {
            const config = {
                defaultSamples: document.getElementById('globalSamples').checked,
                defaultRf: document.getElementById('globalRf').checked,
                clientConfigs: []
            };
            
            console.log('保存全局统计配置...');
            $.ajax({
                url: '/Statistics/SetGlobalStatisticsConfig',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(config),
                success: function(response) {
                    console.log('全局配置保存响应:', response);
                    if (response.success) {
                        alert('全局配置已保存');
                    } else {
                        alert('保存失败: ' + response.message);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('保存全局配置错误:', error);
                    alert('保存失败: ' + error);
                }
            });
        }

        function loadClientConfig() {
            const clientName = document.getElementById('clientName').value;
            if (!clientName) {
                alert('请输入客户端名称');
                return;
            }
            
            console.log('加载客户端统计配置:', clientName);
            $.get('/Statistics/GetClientStatisticsConfig', { clientName: clientName }, function(response) {
                if (response.success && response.data) {
                    const config = response.data;
                    document.getElementById('clientName').value = config.clientName;
                    document.getElementById('clientIp').value = config.ipAddress;
                    document.getElementById('clientSamples').checked = config.enableSamples;
                    document.getElementById('clientRf').checked = config.enableRf;
                    document.getElementById('clientEnabled').checked = config.isEnabled;
                    document.getElementById('clientDescription').value = config.description;
                    console.log('客户端配置已加载:', config);
                } else {
                    console.log('客户端配置未找到或加载失败');
                }
            }).fail(function(xhr, status, error) {
                console.error('加载客户端配置错误:', error);
            });
        }

        function saveClientConfig() {
            const config = {
                clientName: document.getElementById('clientName').value,
                ipAddress: document.getElementById('clientIp').value,
                enableSamples: document.getElementById('clientSamples').checked,
                enableRf: document.getElementById('clientRf').checked,
                isEnabled: document.getElementById('clientEnabled').checked,
                description: document.getElementById('clientDescription').value
            };
            
            if (!config.clientName) {
                alert('请输入客户端名称');
                return;
            }
            
            console.log('保存客户端统计配置...');
            $.ajax({
                url: '/Statistics/SetClientStatisticsConfig',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(config),
                success: function(response) {
                    console.log('客户端配置保存响应:', response);
                    if (response.success) {
                        alert('客户端配置已保存');
                        loadAllClientConfigs(); // 刷新配置列表
                    } else {
                        alert('保存失败: ' + response.message);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('保存客户端配置错误:', error);
                    alert('保存失败: ' + error);
                }
            });
        }

        function loadAllClientConfigs() {
            console.log('加载所有客户端配置...');
            $.get('/Statistics/GetAllClientStatisticsConfigs', function(response) {
                if (response.success) {
                    const configs = response.data;
                    const tbody = document.getElementById('configTableBody');
                    tbody.innerHTML = '';
                    
                    configs.forEach(function(config) {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                            <td>${config.clientName}</td>
                            <td>${config.ipAddress}</td>
                            <td>${config.enableSamples ? '是' : '否'}</td>
                            <td>${config.enableRf ? '是' : '否'}</td>
                            <td>${config.isEnabled ? '是' : '否'}</td>
                            <td>${config.description}</td>
                            <td>
                                <button class="btn btn-sm btn-primary" onclick="editConfig('${config.clientName}')">编辑</button>
                            </td>
                        `;
                        tbody.appendChild(row);
                    });
                    
                    console.log('配置列表已更新，共', configs.length, '个配置');
                } else {
                    console.error('加载配置列表失败:', response.message);
                }
            }).fail(function(xhr, status, error) {
                console.error('加载配置列表错误:', error);
            });
        }

        function editConfig(clientName) {
            document.getElementById('clientName').value = clientName;
            loadClientConfig();
        }
    </script>
}