diff --git a/admin/dashboard/blueprints/system.py b/admin/dashboard/blueprints/system.py index b592fe3..01cffe2 100644 --- a/admin/dashboard/blueprints/system.py +++ b/admin/dashboard/blueprints/system.py @@ -11,6 +11,8 @@ from collections import deque # 创建系统信息蓝图 system_bp = Blueprint('system', __name__) logger = logging.getLogger("SystemBlueprint") +# 记录应用启动时间 +APP_START_TIME = time.time() # 页面路由 @system_bp.route('/wx_logs') @@ -31,7 +33,7 @@ def api_system_info(): "cpu_usage": psutil.cpu_percent(), "memory_usage": psutil.virtual_memory().percent, "disk_usage": psutil.disk_usage('/').percent, - "uptime": time.time() - psutil.boot_time(), + "uptime": time.time() - APP_START_TIME, # 使用应用启动时间计算运行时长 "timestamp": datetime.now().strftime("%Y-%m-%d %H:%M:%S") } diff --git a/admin/dashboard/templates/index.html b/admin/dashboard/templates/index.html index 1f20402..248e47b 100644 --- a/admin/dashboard/templates/index.html +++ b/admin/dashboard/templates/index.html @@ -5,7 +5,60 @@ {% block content %}
+ + + +
+ 系统状态 +
+ + +
+
+ 操作系统: + {% raw %}{{ systemInfo.os }} {{ systemInfo.os_version }}{% endraw %} +
+
+ Python版本: + {% raw %}{{ systemInfo.python_version }}{% endraw %} +
+
+ 运行时间: + {% raw %}{{ formattedUptime }}{% endraw %} +
+
+
+ + + +
+

CPU使用率: {% raw %}{{ systemInfo.cpu_usage }}{% endraw %}%

+ +
+
+ +
+

内存使用率: {% raw %}{{ systemInfo.memory_usage }}{% endraw %}%

+ +
+
+ +
+

磁盘使用率: {% raw %}{{ systemInfo.disk_usage }}{% endraw %}%

+ +
+
+
+
+
+
最后更新: {% raw %}{{ systemInfo.timestamp }}{% endraw %}
+
+
+
+ + +
@@ -150,75 +203,6 @@
- -
-
-
- - - - -
- 系统状态 -
- - -
-
- 操作系统: - {% raw %}{{ systemInfo.os }} {{ systemInfo.os_version }}{% endraw %} -
-
- Python版本: - {% raw %}{{ systemInfo.python_version }}{% endraw %} -
-
- 运行时间: - {% raw %}{{ formattedUptime }}{% endraw %} -
-
-
- -
-
- CPU使用率: - {% raw %}{{ systemInfo.cpu_usage }}{% endraw %}% -
- - - -
- 内存使用率: - {% raw %}{{ systemInfo.memory_usage }}{% endraw %}% -
- - - -
- 磁盘使用率: - {% raw %}{{ systemInfo.disk_usage }}{% endraw %}% -
- - -
-
-
-
最后更新: {% raw %}{{ systemInfo.timestamp }}{% endraw %}
-
-
-
-
-
-
{% endblock %} {% block scripts %} @@ -302,14 +286,78 @@ .then(response => { if (response.data.success) { this.systemInfo = response.data.data; + this.$nextTick(() => { + this.renderSystemCharts(); + }); } }) .catch(error => { console.error('加载系统信息出错:', error); }); }, - // 添加获取当前用户信息的方法 - loadCurrentUserInfo() { + // 渲染系统状态饼图 + renderSystemCharts() { + // 渲染CPU使用率饼图 + this.renderPieChart('cpuChart', this.systemInfo.cpu_usage, 'CPU使用率'); + + // 渲染内存使用率饼图 + this.renderPieChart('memoryChart', this.systemInfo.memory_usage, '内存使用率'); + + // 渲染磁盘使用率饼图 + this.renderPieChart('diskChart', this.systemInfo.disk_usage, '磁盘使用率'); + }, + // 通用饼图渲染方法 + renderPieChart(chartId, usageValue, label) { + const ctx = document.getElementById(chartId).getContext('2d'); + + // 销毁旧图表 + if (this.charts[chartId]) { + this.charts[chartId].destroy(); + } + + // 设置颜色 + let color = 'rgba(75, 192, 192, 1)'; // 绿色 (低负载) + if (usageValue > 70) { + color = 'rgba(255, 99, 132, 1)'; // 红色 (高负载) + } else if (usageValue > 50) { + color = 'rgba(255, 205, 86, 1)'; // 黄色 (中等负载) + } + + // 创建新图表 + this.charts[chartId] = new Chart(ctx, { + type: 'doughnut', + data: { + labels: ['已使用', '可用'], + datasets: [{ + data: [usageValue, 100 - usageValue], + backgroundColor: [ + color, + 'rgba(220, 220, 220, 0.6)' + ], + borderWidth: 0 + }] + }, + options: { + responsive: true, + maintainAspectRatio: true, + cutout: '70%', + plugins: { + legend: { + display: false + }, + tooltip: { + callbacks: { + label: function(context) { + return context.label + ': ' + context.raw + '%'; + } + } + } + } + } + }); + }, + // 添加获取当前用户信息的方法 + loadCurrentUserInfo() { axios.get('/api/current_user_info') .then(response => { this.currentUser = response.data; @@ -333,10 +381,6 @@ return 'success'; // 绿色 (低负载) } }, - // 删除不再使用的方法 - // updateSystemInfoUI() { ... }, - // setProgressColor() { ... }, - // formatUptime() { ... }, loadDashboardSummary(days) { axios.get(`/api/dashboard_summary?days=${days}`) @@ -559,6 +603,21 @@ color: #606266; } + /* 饼图容器样式 */ + .pie-chart-container { + padding: 10px; + text-align: center; + margin-bottom: 0; + box-shadow: none; + } + + .pie-chart-container h4 { + margin-top: 0; + margin-bottom: 10px; + font-size: 14px; + color: #606266; + } + /* 系统状态卡片样式 */ .system-info-item { margin-bottom: 15px; @@ -576,10 +635,5 @@ color: #909399; margin-top: 10px; } - - /* 进度条样式调整 */ - .el-progress { - margin-bottom: 15px; - } {% endblock %} \ No newline at end of file