调整状态的内容

admin/dashboard/templates/index.html

@@ -106,26 +106,26 @@
         </el-col>
     </el-row>
     
-    <el-row :gutter="20">
+    <el-row :gutter="20" style="margin-top: 20px;">
         <el-col :span="12">
             <div class="chart-container">
                 <h3>插件使用排行</h3>
-                <canvas id="pluginChart" width="400" height="200"></canvas>
+                <canvas id="pluginChart" width="400" height="150"></canvas>
             </div>
         </el-col>
         <el-col :span="12">
             <div class="chart-container">
                 <h3>成功率分析</h3>
-                <canvas id="successRateChart" width="400" height="200"></canvas>
+                <canvas id="successRateChart" width="400" height="150"></canvas>
             </div>
         </el-col>
     </el-row>
     
-    <el-row :gutter="20">
+    <el-row :gutter="20" style="margin-top: 20px;">
         <el-col :span="24">
             <div class="chart-container">
                 <h3>使用趋势</h3>
-                <canvas id="trendChart" width="800" height="200"></canvas>
+                <canvas id="trendChart" width="800" height="150"></canvas>
             </div>
         </el-col>
     </el-row>
@@ -133,9 +133,6 @@
 <!-- 在适当位置添加系统信息卡片 -->
 <div class="col-lg-4">
     <div class="card">
-        <div class="card-header">
-            <h5 class="card-title">系统状态</h5>
-        </div>
         <div class="card-body">
             <!-- 将原来的系统状态卡片替换为以下内容 -->
             <el-row :gutter="20" style="margin-top: 20px;">
@@ -146,50 +143,56 @@
                         </div>
                         <el-row :gutter="20">
                             <el-col :span="8">
-                                <div class="mb-3">
+                                <div class="system-info-item">
-                                    <div class="d-flex justify-content-between mb-1">
+                                    <div class="system-info-row">
                                         <span>操作系统:</span>
-                                        <span id="system-os">加载中...</span>
+                                        <span>{% raw %}{{ systemInfo.os }} {{ systemInfo.os_version }}{% endraw %}</span>
                                     </div>
-                                    <div class="d-flex justify-content-between mb-1">
+                                    <div class="system-info-row">
                                         <span>Python版本:</span>
-                                        <span id="system-python">加载中...</span>
+                                        <span>{% raw %}{{ systemInfo.python_version }}{% endraw %}</span>
                                     </div>
-                                    <div class="d-flex justify-content-between mb-1">
+                                    <div class="system-info-row">
                                         <span>运行时间:</span>
-                                        <span id="system-uptime">加载中...</span>
+                                        <span>{% raw %}{{ formattedUptime }}{% endraw %}</span>
                                     </div>
                                 </div>
                             </el-col>
                             <el-col :span="16">
-                                <div class="mb-3">
+                                <div class="system-info-item">
-                                    <div class="d-flex justify-content-between mb-1">
+                                    <div class="system-info-row">
                                         <span>CPU使用率:</span>
-                                        <span id="system-cpu">0%</span>
+                                        <span>{% raw %}{{ systemInfo.cpu_usage }}{% endraw %}%</span>
-                                    </div>
-                                    <div class="progress mb-2" style="height: 8px;">
-                                        <div id="cpu-progress" class="progress-bar bg-success" role="progressbar" style="width: 0%"></div>
                                     </div>
+                                    <el-progress 
+                                        :percentage="systemInfo.cpu_usage" 
+                                        :status="getProgressStatus(systemInfo.cpu_usage)"
+                                        :stroke-width="8">
+                                    </el-progress>
                                     
-                                    <div class="d-flex justify-content-between mb-1">
+                                    <div class="system-info-row">
                                         <span>内存使用率:</span>
-                                        <span id="system-memory">0%</span>
+                                        <span>{% raw %}{{ systemInfo.memory_usage }}{% endraw %}%</span>
-                                    </div>
-                                    <div class="progress mb-2" style="height: 8px;">
-                                        <div id="memory-progress" class="progress-bar bg-success" role="progressbar" style="width: 0%"></div>
                                     </div>
+                                    <el-progress 
+                                        :percentage="systemInfo.memory_usage" 
+                                        :status="getProgressStatus(systemInfo.memory_usage)"
+                                        :stroke-width="8">
+                                    </el-progress>
                                     
-                                    <div class="d-flex justify-content-between mb-1">
+                                    <div class="system-info-row">
                                         <span>磁盘使用率:</span>
-                                        <span id="system-disk">0%</span>
+                                        <span>{% raw %}{{ systemInfo.disk_usage }}{% endraw %}%</span>
-                                    </div>
-                                    <div class="progress mb-2" style="height: 8px;">
-                                        <div id="disk-progress" class="progress-bar bg-success" role="progressbar" style="width: 0%"></div>
                                     </div>
+                                    <el-progress 
+                                        :percentage="systemInfo.disk_usage" 
+                                        :status="getProgressStatus(systemInfo.disk_usage)"
+                                        :stroke-width="8">
+                                    </el-progress>
                                 </div>
                             </el-col>
                         </el-row>
-                        <div class="text-muted small text-end" id="system-update-time">最后更新: -</div>
+                        <div class="system-update-time">最后更新: {% raw %}{{ systemInfo.timestamp }}{% endraw %}</div>
                     </el-card>
                 </el-col>
             </el-row>
@@ -228,10 +231,26 @@
                 }
             }
         },
+        computed: {
+            // 计算属性：格式化的运行时间
+            formattedUptime() {
+                const seconds = this.systemInfo.uptime;
+                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;
+            }
+        },
         mounted() {
             this.currentView = '1';
             this.loadData();
-            // 添加加载系统信息
+            // 加载系统信息
             this.loadSystemInfo();
             // 设置定时刷新系统信息（每30秒）
             this.systemInfoTimer = setInterval(this.loadSystemInfo, 30000);
@@ -255,7 +274,6 @@
                     .then(response => {
                         if (response.data.success) {
                             this.systemInfo = response.data.data;
-                            this.updateSystemInfoUI();
                         }
                     })
                     .catch(error => {
@@ -543,5 +561,28 @@
         font-size: 16px;
         color: #606266;
     }
+    
+    /* 系统状态卡片样式 */
+    .system-info-item {
+        margin-bottom: 15px;
+    }
+    
+    .system-info-row {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 8px;
+    }
+    
+    .system-update-time {
+        text-align: right;
+        font-size: 12px;
+        color: #909399;
+        margin-top: 10px;
+    }
+    
+    /* 进度条样式调整 */
+    .el-progress {
+        margin-bottom: 15px;
+    }
 </style>
 {% endblock %}