多项优化

backend/static/js/app.js

@@ -7,7 +7,8 @@ let state = {
     customStartTime: '',
     customEndTime: '',
     currentInterval: '10m', // 固定10分钟区间
-    historyMetrics: {} // 存储历史指标数据
+    historyMetrics: {}, // 存储历史指标数据
+    autoRefreshEnabled: false // 自动刷新开关状态，默认关闭
 }
 
 // WebSocket连接
@@ -31,6 +32,9 @@ function initApp() {
     // 设置定时刷新
     setInterval(loadMetrics, 30000);
     setInterval(loadServerCount, 30000);
+    
+    // 初始化网卡列表
+    loadNetworkInterfaces();
 }
 
 // 初始化自定义时间范围
@@ -1173,7 +1177,8 @@ async function loadServerInfo(deviceId) {
         if (!response.ok) {
             throw new Error('Failed to fetch server info');
         }
-        const deviceData = await response.json();
+        const data = await response.json();
+        const deviceData = data.device;
         
         // 更新服务器信息显示
         const serverInfoDisplay = document.getElementById('serverInfoDisplay');
@@ -1193,10 +1198,13 @@ async function loadServerInfo(deviceId) {
 // 处理指标更新
 function handleMetricsUpdate(message) {
     const { device_id, metrics } = message;
-    // 直接更新，不再检查device_id
+    // 直接更新统计卡片，始终实时更新
     updateStatusCards(metrics);
-    // 立即刷新数据以确保图表也更新
-    setTimeout(() => loadMetrics(), 500);
+    // 根据自动刷新开关状态决定是否刷新图表
+    if (state.autoRefreshEnabled) {
+        // 立即刷新数据以确保图表也更新
+        setTimeout(() => loadMetrics(), 500);
+    }
 }
 
 // 更新状态卡片
@@ -2080,10 +2088,87 @@ function bindEvents() {
     if (zoomOutBtn && zoomInBtn && currentTimeRangeDisplay) {
         // 时间范围选项列表，用于缩放
         const timeRanges = ['30m', '1h', '2h', '6h', '12h', '24h'];
+    }
+    
+    // 网卡选择和刷新按钮事件
+    const networkInterfaceSelect = document.getElementById('networkInterface');
+    const refreshInterfacesBtn = document.getElementById('refreshInterfacesBtn');
+    
+    if (networkInterfaceSelect) {
+        networkInterfaceSelect.addEventListener('change', (e) => {
+            state.currentInterface = e.target.value;
+            loadMetrics(); // 切换网卡后重新加载数据
+        });
+    }
+    
+    if (refreshInterfacesBtn) {
+        refreshInterfacesBtn.addEventListener('click', loadNetworkInterfaces);
+    }
+    
+    // 自动刷新开关事件
+    const autoRefreshToggle = document.getElementById('autoRefreshToggle');
+    if (autoRefreshToggle) {
+        autoRefreshToggle.addEventListener('change', (e) => {
+            state.autoRefreshEnabled = e.target.checked;
+            // 如果开启了自动刷新，立即刷新一次数据
+            if (state.autoRefreshEnabled) {
+                loadMetrics();
+            }
+        });
+    }
+}
+
+// 加载网卡列表
+async function loadNetworkInterfaces() {
+    try {
+        // 获取设备ID
+        const hash = window.location.hash;
+        let deviceId = '';
+        if (hash.startsWith('#serverMonitor/')) {
+            deviceId = hash.split('/')[1];
+        }
         
-        // 更新当前时间范围显示
-        const updateTimeRangeDisplay = () => {
-            switch(state.currentTimeRange) {
+        // 从网络指标API获取网卡列表
+        const response = await fetch(`${API_BASE_URL}/metrics/network?device_id=${deviceId}`);
+        const data = await response.json();
+        
+        // 从返回的数据中提取网卡列表
+        const interfaces = Object.keys(data.data || {});
+        
+        // 更新下拉选择框
+        const selectElement = document.getElementById('networkInterface');
+        if (selectElement) {
+            // 清空现有选项
+            selectElement.innerHTML = '<option value="all">所有网卡</option>';
+            
+            // 添加新选项
+            interfaces.forEach(iface => {
+                if (iface !== 'all') {
+                    const option = document.createElement('option');
+                    option.value = iface;
+                    option.textContent = iface;
+                    selectElement.appendChild(option);
+                }
+            });
+            
+            // 如果当前选中的网卡不存在，重置为'all'
+            if (!interfaces.includes(state.currentInterface) && state.currentInterface !== 'all') {
+                state.currentInterface = 'all';
+            }
+            
+            // 设置当前选中的值
+            selectElement.value = state.currentInterface;
+        }
+    } catch (error) {
+        console.error('加载网卡列表失败:', error);
+        // 显示友好的错误提示
+        showToast('加载网卡列表失败，请稍后重试', 'error');
+    }
+}
+
+// 更新当前时间范围显示
+const updateTimeRangeDisplay = () => {
+    switch(state.currentTimeRange) {
                 case '30m':
                     currentTimeRangeDisplay.textContent = '过去30分钟';
                     break;
@@ -2155,7 +2240,7 @@ function bindEvents() {
             // 重新加载数据
             loadMetrics();
         });
-    }
+    
     
     // 重置缩放按钮事件处理
     if (resetZoomBtn) {
@@ -2168,7 +2253,7 @@ function bindEvents() {
             });
         });
     }
-}
+
 
 // 工具函数
 function showContent(contentId) {
@@ -2231,6 +2316,18 @@ function initChartTabs() {
             }
         });
     });
+    
+    // 初始状态：根据当前选中的选项卡显示/隐藏网卡选择下拉框
+    const activeTab = document.querySelector('.chart-tab.active');
+    const interfaceContainer = document.getElementById('interfaceSelectorContainer');
+    if (activeTab && interfaceContainer) {
+        const tabId = activeTab.dataset.tab;
+        if (tabId === 'network' || tabId === 'speed') {
+            interfaceContainer.classList.remove('hidden');
+        } else {
+            interfaceContainer.classList.add('hidden');
+        }
+    }
 }
 
 // 页面加载完成后初始化