加入了LOGO，

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")
         }
 

admin/dashboard/templates/index.html

@@ -5,7 +5,60 @@
 {% block content %}
 <!-- 首页概览 -->
 <div>
+    <!-- 系统状态卡片移到顶部 -->
     <el-row :gutter="20">
+        <el-col :span="24">
+            <el-card shadow="hover">
+                <div slot="header">
+                    <span>系统状态</span>
+                </div>
+                <el-row :gutter="20">
+                    <el-col :span="8">
+                        <div class="system-info-item">
+                            <div class="system-info-row">
+                                <span>操作系统:</span>
+                                <span>{% raw %}{{ systemInfo.os }} {{ systemInfo.os_version }}{% endraw %}</span>
+                            </div>
+                            <div class="system-info-row">
+                                <span>Python版本:</span>
+                                <span>{% raw %}{{ systemInfo.python_version }}{% endraw %}</span>
+                            </div>
+                            <div class="system-info-row">
+                                <span>运行时间:</span>
+                                <span>{% raw %}{{ formattedUptime }}{% endraw %}</span>
+                            </div>
+                        </div>
+                    </el-col>
+                    <el-col :span="16">
+                        <el-row :gutter="20">
+                            <el-col :span="8">
+                                <div class="chart-container pie-chart-container">
+                                    <h4>CPU使用率: {% raw %}{{ systemInfo.cpu_usage }}{% endraw %}%</h4>
+                                    <canvas id="cpuChart" width="100" height="100"></canvas>
+                                </div>
+                            </el-col>
+                            <el-col :span="8">
+                                <div class="chart-container pie-chart-container">
+                                    <h4>内存使用率: {% raw %}{{ systemInfo.memory_usage }}{% endraw %}%</h4>
+                                    <canvas id="memoryChart" width="100" height="100"></canvas>
+                                </div>
+                            </el-col>
+                            <el-col :span="8">
+                                <div class="chart-container pie-chart-container">
+                                    <h4>磁盘使用率: {% raw %}{{ systemInfo.disk_usage }}{% endraw %}%</h4>
+                                    <canvas id="diskChart" width="100" height="100"></canvas>
+                                </div>
+                            </el-col>
+                        </el-row>
+                    </el-col>
+                </el-row>
+                <div class="system-update-time">最后更新: {% raw %}{{ systemInfo.timestamp }}{% endraw %}</div>
+            </el-card>
+        </el-col>
+    </el-row>
+
+    <!-- 用户信息和统计数据 -->
+    <el-row :gutter="20" style="margin-top: 20px;">
         <el-col :span="4">
             <el-card shadow="hover" class="stats-card">
                 <div slot="header">
@@ -150,75 +203,6 @@
         </el-col>
     </el-row>
 </div>
-<!-- 在适当位置添加系统信息卡片 -->
-<div class="col-lg-4">
-    <div class="card">
-        <div class="card-body">
-            <!-- 将原来的系统状态卡片替换为以下内容 -->
-            <el-row :gutter="20" style="margin-top: 20px;">
-                <el-col :span="24">
-                    <el-card shadow="hover">
-                        <div slot="header">
-                            <span>系统状态</span>
-                        </div>
-                        <el-row :gutter="20">
-                            <el-col :span="8">
-                                <div class="system-info-item">
-                                    <div class="system-info-row">
-                                        <span>操作系统:</span>
-                                        <span>{% raw %}{{ systemInfo.os }} {{ systemInfo.os_version }}{% endraw %}</span>
-                                    </div>
-                                    <div class="system-info-row">
-                                        <span>Python版本:</span>
-                                        <span>{% raw %}{{ systemInfo.python_version }}{% endraw %}</span>
-                                    </div>
-                                    <div class="system-info-row">
-                                        <span>运行时间:</span>
-                                        <span>{% raw %}{{ formattedUptime }}{% endraw %}</span>
-                                    </div>
-                                </div>
-                            </el-col>
-                            <el-col :span="16">
-                                <div class="system-info-item">
-                                    <div class="system-info-row">
-                                        <span>CPU使用率:</span>
-                                        <span>{% raw %}{{ systemInfo.cpu_usage }}{% endraw %}%</span>
-                                    </div>
-                                    <el-progress 
-                                        :percentage="systemInfo.cpu_usage" 
-                                        :status="getProgressStatus(systemInfo.cpu_usage)"
-                                        :stroke-width="8">
-                                    </el-progress>
-                                    
-                                    <div class="system-info-row">
-                                        <span>内存使用率:</span>
-                                        <span>{% raw %}{{ systemInfo.memory_usage }}{% endraw %}%</span>
-                                    </div>
-                                    <el-progress 
-                                        :percentage="systemInfo.memory_usage" 
-                                        :status="getProgressStatus(systemInfo.memory_usage)"
-                                        :stroke-width="8">
-                                    </el-progress>
-                                    
-                                    <div class="system-info-row">
-                                        <span>磁盘使用率:</span>
-                                        <span>{% raw %}{{ systemInfo.disk_usage }}{% endraw %}%</span>
-                                    </div>
-                                    <el-progress 
-                                        :percentage="systemInfo.disk_usage" 
-                                        :status="getProgressStatus(systemInfo.disk_usage)"
-                                        :stroke-width="8">
-                                    </el-progress>
-                                </div>
-                            </el-col>
-                        </el-row>
-                        <div class="system-update-time">最后更新: {% raw %}{{ systemInfo.timestamp }}{% endraw %}</div>
-                    </el-card>
-                </el-col>
-            </el-row>
-        </div>
-    </div>
-</div>
 {% 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;
-    }
 </style>
 {% endblock %}