From 0fc23d1828a3248070cad0941aa49485f4a60740 Mon Sep 17 00:00:00 2001 From: root <295172551@qq.com> Date: Sun, 22 Jun 2025 07:28:25 +0800 Subject: [PATCH] 1 --- LTEMvcApp/Views/Home/Logs.cshtml | 90 ++++++++++++++++++++++++++++++-- 1 file changed, 87 insertions(+), 3 deletions(-) diff --git a/LTEMvcApp/Views/Home/Logs.cshtml b/LTEMvcApp/Views/Home/Logs.cshtml index 78a7b5e..64fb14f 100644 --- a/LTEMvcApp/Views/Home/Logs.cshtml +++ b/LTEMvcApp/Views/Home/Logs.cshtml @@ -263,6 +263,30 @@ margin-bottom: 10px; display: none; } + + /* Layer过滤器样式 */ + .layer-filter-dropdown { + margin-left: 8px; + padding: 2px 6px; + font-size: 0.8em; + border: 1px solid #ced4da; + border-radius: 3px; + background-color: #fff; + cursor: pointer; + min-width: 80px; + } + + .layer-filter-dropdown:focus { + outline: none; + border-color: #007bff; + box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); + } + + .log-layer { + display: flex; + align-items: center; + flex: 0 0 100px; + }
@@ -273,7 +297,12 @@
Timestamp - Layer + + Layer + + Direction Message Info @@ -333,8 +362,10 @@ const reconnectBtn = document.getElementById('reconnect-btn'); const logListPanel = document.querySelector('.log-list-panel'); const resizer = document.getElementById('drag-resizer'); + const layerFilter = document.getElementById('layer-filter'); let allLogsData = []; + let availableLayers = new Set(); // 用于跟踪可用的日志层 let eventSource = null; let reconnectAttempts = 0; const maxReconnectAttempts = 5; @@ -350,6 +381,39 @@ no_data_text: "正在等待日志..." }); + // 更新Layer过滤器选项 + function updateLayerFilter() { + const currentValue = layerFilter.value; + const options = ['']; + + // 按字母顺序排序 + const sortedLayers = Array.from(availableLayers).sort(); + + sortedLayers.forEach(layer => { + const selected = layer === currentValue ? ' selected' : ''; + options.push(``); + }); + + layerFilter.innerHTML = options.join(''); + } + + // 根据当前过滤器重新渲染日志列表 + function refreshLogList() { + const selectedLayer = layerFilter.value; + let filteredLogs = allLogsData; + + if (selectedLayer) { + filteredLogs = allLogsData.filter(log => log.Layer === selectedLayer); + } + + const rows = filteredLogs.map((log, i) => formatLogItem(log, i)); + clusterize.clear(); + clusterize.append(rows); + + // 更新总数显示 + totalLogsEl.textContent = filteredLogs.length; + } + // 更新连接状态 function updateConnectionStatus(status, text) { statusIndicator.className = 'status-indicator status-' + status; @@ -377,11 +441,13 @@ // 清空日志显示 function clearLogsDisplay() { allLogsData = []; + availableLayers.clear(); clusterize.clear(); totalLogsEl.textContent = '0'; newLogsCountEl.textContent = ''; detailPlaceholder.classList.remove('d-none'); detailContent.classList.add('d-none'); + updateLayerFilter(); } // 美化方向 @@ -443,6 +509,16 @@ function updateLogList(logs, prepend = false) { if (!logs || logs.length === 0) return; + // 收集新的日志层 + logs.forEach(log => { + if (log.Layer) { + availableLayers.add(log.Layer); + } + }); + + // 更新过滤器选项 + updateLayerFilter(); + const newRows = logs.map((log, i) => formatLogItem(log, allLogsData.length + i)); if (prepend) { @@ -451,7 +527,9 @@ clusterize.append(newRows); } allLogsData.push(...logs); - totalLogsEl.textContent = allLogsData.length; + + // 根据当前过滤器更新显示 + refreshLogList(); // 显示新日志数量 if (!prepend) { @@ -590,6 +668,11 @@ }; } + // Layer过滤器变化事件 + layerFilter.addEventListener('change', function() { + refreshLogList(); + }); + // 事件委托处理点击事件 contentArea.addEventListener('click', function(e) { const item = e.target.closest('.log-item'); @@ -704,4 +787,5 @@ connectSSE(); }); -} \ No newline at end of file +} + \ No newline at end of file