用户信息显示
This commit is contained in:
@@ -13,7 +13,25 @@
|
|||||||
<span>系统状态</span>
|
<span>系统状态</span>
|
||||||
</div>
|
</div>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="8">
|
<!-- 左侧用户信息 -->
|
||||||
|
<el-col :span="6">
|
||||||
|
<div v-if="currentUser.success" style="display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div v-if="currentUser.data.avatar" style="margin-bottom: 10px;">
|
||||||
|
<img :src="'/static/images/' + currentUser.data.avatar" style="width: 80px; height: 80px; border-radius: 50%;" />
|
||||||
|
</div>
|
||||||
|
<div style="text-align: center;">
|
||||||
|
<div style="font-size: 18px; font-weight: bold;">{% raw %}{{ currentUser.data.nickname }}{% endraw %}</div>
|
||||||
|
<div style="font-size: 14px; color: #666; margin-top: 5px;">{% raw %}{{ currentUser.data.wx_id }}{% endraw %}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else style="text-align: center; color: #999; padding: 20px 0;">
|
||||||
|
<i class="el-icon-warning" style="font-size: 24px;"></i>
|
||||||
|
<div>{% raw %}{{ currentUser.message || '未获取到用户信息' }}{% endraw %}</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<!-- 中间系统信息 -->
|
||||||
|
<el-col :span="6">
|
||||||
<div class="system-info-item">
|
<div class="system-info-item">
|
||||||
<div class="system-info-row">
|
<div class="system-info-row">
|
||||||
<span>操作系统:</span>
|
<span>操作系统:</span>
|
||||||
@@ -29,24 +47,24 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="16">
|
<el-col :span="12">
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<div class="chart-container pie-chart-container">
|
<div class="chart-container pie-chart-container">
|
||||||
<h4>CPU使用率: {% raw %}{{ systemInfo.cpu_usage }}{% endraw %}%</h4>
|
<h4>CPU使用率: {% raw %}{{ systemInfo.cpu_usage }}{% endraw %}%</h4>
|
||||||
<canvas id="cpuChart" width="100" height="100"></canvas>
|
<canvas id="cpuChart" width="80" height="80"></canvas>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<div class="chart-container pie-chart-container">
|
<div class="chart-container pie-chart-container">
|
||||||
<h4>内存使用率: {% raw %}{{ systemInfo.memory_usage }}{% endraw %}%</h4>
|
<h4>内存使用率: {% raw %}{{ systemInfo.memory_usage }}{% endraw %}%</h4>
|
||||||
<canvas id="memoryChart" width="100" height="100"></canvas>
|
<canvas id="memoryChart" width="80" height="80"></canvas>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<div class="chart-container pie-chart-container">
|
<div class="chart-container pie-chart-container">
|
||||||
<h4>磁盘使用率: {% raw %}{{ systemInfo.disk_usage }}{% endraw %}%</h4>
|
<h4>磁盘使用率: {% raw %}{{ systemInfo.disk_usage }}{% endraw %}%</h4>
|
||||||
<canvas id="diskChart" width="100" height="100"></canvas>
|
<canvas id="diskChart" width="80" height="80"></canvas>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@@ -59,26 +77,6 @@
|
|||||||
|
|
||||||
<!-- 用户信息和统计数据 -->
|
<!-- 用户信息和统计数据 -->
|
||||||
<el-row :gutter="20" style="margin-top: 20px;">
|
<el-row :gutter="20" style="margin-top: 20px;">
|
||||||
<el-col :span="4">
|
|
||||||
<el-card shadow="hover" class="stats-card">
|
|
||||||
<div slot="header">
|
|
||||||
<span>{% raw %}{{ currentUser.data.nickname }}{% endraw %}</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="currentUser.success" style="display: flex; align-items: center;">
|
|
||||||
<div v-if="currentUser.data.avatar" style="margin-right: 15px;">
|
|
||||||
<img :src="'/static/images/' + currentUser.data.avatar" style="width: 60px; height: 60px; border-radius: 50%;" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div style="font-size: 24px; color: #666;">{% raw %}{{ currentUser.data.wx_id }}{% endraw %}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-else style="text-align: center; color: #999;">
|
|
||||||
<i class="el-icon-warning" style="font-size: 24px;"></i>
|
|
||||||
<div>{% raw %}{{ currentUser.message || '未获取到用户信息' }}{% endraw %}</div>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
<el-col :span="4">
|
<el-col :span="4">
|
||||||
<el-card shadow="hover" class="stats-card">
|
<el-card shadow="hover" class="stats-card">
|
||||||
<div slot="header">
|
<div slot="header">
|
||||||
@@ -605,7 +603,7 @@
|
|||||||
|
|
||||||
/* 饼图容器样式 */
|
/* 饼图容器样式 */
|
||||||
.pie-chart-container {
|
.pie-chart-container {
|
||||||
padding: 10px;
|
padding: 5px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
@@ -613,8 +611,8 @@
|
|||||||
|
|
||||||
.pie-chart-container h4 {
|
.pie-chart-container h4 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 5px;
|
||||||
font-size: 14px;
|
font-size: 12px;
|
||||||
color: #606266;
|
color: #606266;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user