删除历史项目
This commit is contained in:
liuwei
@@ -137,48 +137,62 @@
|
||||
<h5 class="card-title">系统状态</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<div class="d-flex justify-content-between mb-1">
|
||||
<span>操作系统:</span>
|
||||
<span id="system-os">加载中...</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-1">
|
||||
<span>Python版本:</span>
|
||||
<span id="system-python">加载中...</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-1">
|
||||
<span>运行时间:</span>
|
||||
<span id="system-uptime">加载中...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="d-flex justify-content-between mb-1">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between mb-1">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between mb-1">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-muted small text-end" id="system-update-time">最后更新: -</div>
|
||||
<!-- 将原来的系统状态卡片替换为以下内容 -->
|
||||
<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="mb-3">
|
||||
<div class="d-flex justify-content-between mb-1">
|
||||
<span>操作系统:</span>
|
||||
<span id="system-os">加载中...</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-1">
|
||||
<span>Python版本:</span>
|
||||
<span id="system-python">加载中...</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-1">
|
||||
<span>运行时间:</span>
|
||||
<span id="system-uptime">加载中...</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div class="mb-3">
|
||||
<div class="d-flex justify-content-between mb-1">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between mb-1">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between mb-1">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="text-muted small text-end" id="system-update-time">最后更新: -</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -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 => {
|
||||
|
||||
Reference in New Issue
Block a user