From fb002eaf5ec00f7854e4bd9c360eb1bb78b76d3f Mon Sep 17 00:00:00 2001 From: liuwei Date: Thu, 27 Mar 2025 12:27:16 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4=E5=8E=86=E5=8F=B2=E9=A1=B9?= =?UTF-8?q?=E7=9B=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- admin/dashboard/templates/index.html | 195 +++++++++++++++++++++------ 1 file changed, 152 insertions(+), 43 deletions(-) diff --git a/admin/dashboard/templates/index.html b/admin/dashboard/templates/index.html index 716fdb1..4ca1fe1 100644 --- a/admin/dashboard/templates/index.html +++ b/admin/dashboard/templates/index.html @@ -137,48 +137,62 @@
系统状态
-
-
- 操作系统: - 加载中... -
-
- Python版本: - 加载中... -
-
- 运行时间: - 加载中... -
-
- -
-
- CPU使用率: - 0% -
-
-
-
- -
- 内存使用率: - 0% -
-
-
-
- -
- 磁盘使用率: - 0% -
-
-
-
-
- -
最后更新: -
+ + + + +
+ 系统状态 +
+ + +
+
+ 操作系统: + 加载中... +
+
+ Python版本: + 加载中... +
+
+ 运行时间: + 加载中... +
+
+ + +
+
+ CPU使用率: + 0% +
+
+
+
+ +
+ 内存使用率: + 0% +
+
+
+
+ +
+ 磁盘使用率: + 0% +
+
+
+
+
+ + +
最后更新: -
+ + +
@@ -200,12 +214,33 @@ topGroups: [], topPlugins: [], pluginStats: [], - charts: {} // 添加charts对象 + charts: {}, // 添加charts对象 + // 添加系统信息相关数据 + systemInfo: { + os: '加载中...', + os_version: '', + python_version: '加载中...', + cpu_usage: 0, + memory_usage: 0, + disk_usage: 0, + uptime: 0, + timestamp: '-' + } } }, mounted() { this.currentView = '1'; this.loadData(); + // 添加加载系统信息 + this.loadSystemInfo(); + // 设置定时刷新系统信息（每30秒） + this.systemInfoTimer = setInterval(this.loadSystemInfo, 30000); + }, + beforeDestroy() { + // 组件销毁前清除定时器 + if (this.systemInfoTimer) { + clearInterval(this.systemInfoTimer); + } }, methods: { loadData() { @@ -214,6 +249,80 @@ this.loadPluginStats(days); this.loadPluginTrend(days); }, + // 添加加载系统信息的方法 + loadSystemInfo() { + axios.get('/api/system_info') + .then(response => { + if (response.data.success) { + this.systemInfo = response.data.data; + this.updateSystemInfoUI(); + } + }) + .catch(error => { + console.error('加载系统信息出错:', error); + }); + }, + // 更新系统信息UI + updateSystemInfoUI() { + // 更新系统信息显示 + document.getElementById('system-os').textContent = + `${this.systemInfo.os} ${this.systemInfo.os_version}`; + document.getElementById('system-python').textContent = + this.systemInfo.python_version; + document.getElementById('system-uptime').textContent = + this.formatUptime(this.systemInfo.uptime); + + // 更新资源使用率 + document.getElementById('system-cpu').textContent = + `${this.systemInfo.cpu_usage}%`; + document.getElementById('system-memory').textContent = + `${this.systemInfo.memory_usage}%`; + document.getElementById('system-disk').textContent = + `${this.systemInfo.disk_usage}%`; + + // 更新进度条 + document.getElementById('cpu-progress').style.width = + `${this.systemInfo.cpu_usage}%`; + document.getElementById('memory-progress').style.width = + `${this.systemInfo.memory_usage}%`; + document.getElementById('disk-progress').style.width = + `${this.systemInfo.disk_usage}%`; + + // 设置进度条颜色 + this.setProgressColor('cpu-progress', this.systemInfo.cpu_usage); + this.setProgressColor('memory-progress', this.systemInfo.memory_usage); + this.setProgressColor('disk-progress', this.systemInfo.disk_usage); + + // 更新时间戳 + document.getElementById('system-update-time').textContent = + `最后更新: ${this.systemInfo.timestamp}`; + }, + // 设置进度条颜色 + setProgressColor(elementId, value) { + const element = document.getElementById(elementId); + element.classList.remove('bg-success', 'bg-warning', 'bg-danger'); + + if (value > 70) { + element.classList.add('bg-danger'); // 红色 (高负载) + } else if (value > 50) { + element.classList.add('bg-warning'); // 黄色 (中等负载) + } else { + element.classList.add('bg-success'); // 绿色 (低负载) + } + }, + // 格式化运行时间 + formatUptime(seconds) { + const days = Math.floor(seconds / 86400); + const hours = Math.floor((seconds % 86400) / 3600); + const minutes = Math.floor((seconds % 3600) / 60); + + let result = ''; + if (days > 0) result += days + '天 '; + if (hours > 0 || days > 0) result += hours + '小时 '; + result += minutes + '分钟'; + + return result; + }, loadDashboardSummary(days) { axios.get(`/api/dashboard_summary?days=${days}`) .then(response => {