优化系统布局
This commit is contained in:
不做码农
@@ -140,7 +140,6 @@
|
||||
</el-card> -->
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -244,7 +244,6 @@ function onOpenGitee() {}
|
||||
}
|
||||
}
|
||||
.dashboard-editor-container {
|
||||
padding: 18px;
|
||||
background-color: var(--base-bg-main);
|
||||
position: relative;
|
||||
|
||||
|
||||
+1
-5
@@ -57,7 +57,7 @@
|
||||
|
||||
<!-- 底部 -->
|
||||
<div class="el-login-footer">
|
||||
<span>{{ defaultSettings.copyright }}</span>
|
||||
<div v-html="defaultSettings.copyright"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -231,9 +231,5 @@ getCookie()
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 10px;
|
||||
|
||||
.svg-icon {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Vendored
+21
-10
@@ -22,7 +22,7 @@
|
||||
<div class="cell">运行模式</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell" v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div>
|
||||
<div class="cell" v-if="cache.info">{{ cache.info.redis_mode == 'standalone' ? '单机' : '集群' }}</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell">端口</div>
|
||||
@@ -68,7 +68,7 @@
|
||||
<div class="cell">AOF是否开启</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div>
|
||||
<div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == '0' ? '否' : '是' }}</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell">RDB是否成功</div>
|
||||
@@ -80,13 +80,15 @@
|
||||
<div class="cell">Key数量</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell" v-if="cache.dbSize">{{ cache.dbSize }} </div>
|
||||
<div class="cell" v-if="cache.dbSize">{{ cache.dbSize }}</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell">网络入口/出口</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell" v-if="cache.info">{{ cache.info.instantaneous_input_kbps }}kps/{{cache.info.instantaneous_output_kbps}}kps</div>
|
||||
<div class="cell" v-if="cache.info">
|
||||
{{ cache.info.instantaneous_input_kbps }}kps/{{ cache.info.instantaneous_output_kbps }}kps
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -116,8 +118,15 @@
|
||||
</div>
|
||||
</template>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<gauge name="内存消耗" :max="100"
|
||||
:data="[{ value: (parseFloat(cache.info.used_memory_human) / parseFloat(cache.info.total_system_memory_human)).toFixed(2), name: '内存消耗'}]" />
|
||||
<gauge
|
||||
name="内存消耗"
|
||||
:max="100"
|
||||
:data="[
|
||||
{
|
||||
value: (parseFloat(cache.info.used_memory_human) / parseFloat(cache.info.total_system_memory_human)).toFixed(2),
|
||||
name: '内存消耗',
|
||||
},
|
||||
]" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
@@ -129,7 +138,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<gauge name="CPU" :max="100" :data="[{ value: parseFloat(cache.info.used_cpu_user_children * 100).toFixed(0), name: 'CPU消耗'}]" />
|
||||
<gauge name="CPU" :max="100" :data="[{ value: parseFloat(cache.info.used_cpu_user_children * 100).toFixed(0), name: 'CPU消耗' }]" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
@@ -140,7 +149,7 @@
|
||||
<script setup name="cache">
|
||||
import { getCache } from '@/api/monitor/cache'
|
||||
import * as echarts from 'echarts'
|
||||
// import Gauge from '@/components/Echarts/Gauge.vue'
|
||||
import Gauge from '@/components/Echarts/Gauge.vue'
|
||||
|
||||
// 统计命令信息
|
||||
const commandstats = ref(null)
|
||||
@@ -180,5 +189,7 @@ function getList() {
|
||||
})
|
||||
}
|
||||
|
||||
getList()
|
||||
</script>
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -4,65 +4,61 @@
|
||||
<el-col :lg="24" class="card-box">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header clearfix">
|
||||
<span style="font-weight: bold;color: #666;font-size: 15px">状态</span>
|
||||
</div>
|
||||
<span>状态</span>
|
||||
</template>
|
||||
<div>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
|
||||
<div class="title">CPU使用率</div>
|
||||
<el-tooltip placement="top-end">
|
||||
<div class="content" v-if="server.cpu">
|
||||
<el-progress type="dashboard" :percentage="parseFloat(server.cpu.cpuRate)" />
|
||||
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
|
||||
<div class="title">CPU使用率</div>
|
||||
<el-tooltip placement="top-end">
|
||||
<div class="content" v-if="server.cpu">
|
||||
<el-progress type="dashboard" :percentage="parseFloat(server.cpu.cpuRate)" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<div class="footer" v-if="server.sys">{{ server.sys.cpuNum }} 核心</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" v-if="server.cpu">
|
||||
<div class="title">内存使用率</div>
|
||||
<el-tooltip placement="top-end">
|
||||
<template #content>
|
||||
<div style="font-size: 12px">
|
||||
<div style="padding: 3px">总量：{{ server.cpu.totalRAM }}</div>
|
||||
<div style="padding: 3px">已使用：{{ server.cpu.usedRam }}</div>
|
||||
<div style="padding: 3px">空闲：{{ server.cpu.freeRam }}</div>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<div class="footer" v-if="server.sys">{{ server.sys.cpuNum }} 核心</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px" v-if="server.cpu">
|
||||
<div class="title">内存使用率</div>
|
||||
</template>
|
||||
|
||||
<div class="content">
|
||||
<el-progress type="dashboard" :percentage="parseFloat(server.cpu.ramRate)" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<div class="footer">{{ server.cpu.usedRam }} / {{ server.cpu.totalRAM }}</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="24" class="card-box">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<span>磁盘状态</span>
|
||||
</template>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" v-for="sysFile in server.disk" :key="sysFile.diskName">
|
||||
<div class="title">{{ sysFile.diskName }}盘使用率</div>
|
||||
<div class="content">
|
||||
<el-tooltip placement="top-end">
|
||||
<template #content>
|
||||
<div style="font-size: 12px;">
|
||||
<div style="padding: 3px;">
|
||||
总量：{{ server.cpu.totalRAM }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
已使用：{{ server.cpu.usedRam }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
空闲：{{ server.cpu.freeRam }}
|
||||
</div>
|
||||
<div style="font-size: 12px">
|
||||
<div style="padding: 3px">总量：{{ sysFile.totalSize }}GB</div>
|
||||
<div style="padding: 3px">空闲：{{ sysFile.availableFreeSpace }}GB</div>
|
||||
<div style="padding: 3px">已用：{{ sysFile.used }}GB</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="content">
|
||||
<el-progress type="dashboard" :percentage="parseFloat( server.cpu.ramRate)" />
|
||||
<el-progress type="dashboard" :percentage="parseFloat(sysFile.availablePercent)" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<div class="footer"> {{server.cpu.usedRam}} / {{ server.cpu.totalRAM }}</div>
|
||||
</el-col>
|
||||
<!--
|
||||
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
|
||||
<div class="title">磁盘使用率</div>
|
||||
<div class="content">
|
||||
<el-tooltip placement="top-end">
|
||||
<div slot="content" style="font-size: 12px;">
|
||||
<div style="padding: 3px">
|
||||
总量：{{ 1 }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
空闲：{{ 1 }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-progress type="dashboard" :percentage="parseFloat(3)" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="footer">{{ 1 }} / {{ 100 }}</div>
|
||||
</el-col> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">{{ sysFile.availableFreeSpace }}GB可用，共{{ sysFile.totalSize }}GB</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
@@ -74,7 +70,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<table cellspacing="0" style="width: 100%;" v-if="server.sys">
|
||||
<table cellspacing="0" style="width: 100%" v-if="server.sys">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
@@ -124,49 +120,13 @@
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" class="card-box">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>磁盘状态</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" v-for="sysFile in server.disk" :key="sysFile.diskName" style="margin-bottom: 10px">
|
||||
<div class="title">{{sysFile.diskName }}盘使用率</div>
|
||||
<div class="content">
|
||||
<el-tooltip placement="top-end">
|
||||
<template #content>
|
||||
<div style="font-size: 12px;">
|
||||
<div style="padding: 3px">
|
||||
总量：{{ sysFile.totalSize }}GB
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
空闲：{{ sysFile.availableFreeSpace }}GB
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
已用：{{ sysFile.used }}GB
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="content">
|
||||
<el-progress type="dashboard" :percentage="parseFloat(sysFile.availablePercent)" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="footer">{{ sysFile.availableFreeSpace }}GB可用，共{{ sysFile.totalSize }}GB</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="24" class="card-box">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div>
|
||||
<span>.NET Core信息</span>
|
||||
</div>
|
||||
<span>.NET Core信息</span>
|
||||
</template>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<table cellspacing="0" style="width: 100%;">
|
||||
<table cellspacing="0" style="width: 100%">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
@@ -207,7 +167,7 @@
|
||||
<div class="cell">启动地址</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell" v-if="server.app">{{server.app.host}}</div>
|
||||
<div class="cell" v-if="server.app">{{ server.app.host }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -229,7 +189,6 @@
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
@@ -323,4 +282,4 @@ table tr {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
<svg-icon :name="scope.row.icon" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="menuId" label="菜单id" :show-overflow-tooltip="true" width="60" align="center"></el-table-column>
|
||||
<el-table-column prop="menuId" label="菜单id" :show-overflow-tooltip="true" width="80" align="center"></el-table-column>
|
||||
<el-table-column prop="menuType" label="类型" align="center" width="80">
|
||||
<template #default="scope">
|
||||
<el-tag type="danger" v-if="scope.row.menuType == 'M' && scope.row.isFrame == 1">链接</el-tag>
|
||||
|
||||
Reference in New Issue
Block a user