liuwei_x_x/abot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整状态的内容

Browse Source
This commit is contained in:
liuwei
2025-04-02 14:30:43 +08:00
parent f85b1fd06b
commit 870621e7ec
1 changed files with 75 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
admin/dashboard/templates/index.html
View File

@@ -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="d-flex justify-content-between mb-1">
<div class="system-info-item">
<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="d-flex justify-content-between mb-1">
<div class="system-info-item">
<div class="system-info-row">
<span>CPU使用率:</span>
<span id="system-cpu">0%</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>
<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="d-flex justify-content-between mb-1">
<div class="system-info-row">
<span>内存使用率:</span>
<span id="system-memory">0%</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>
<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="d-flex justify-content-between mb-1">
<div class="system-info-row">
<span>磁盘使用率:</span>
<span id="system-disk">0%</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>
<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="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 %}