fix: 修改系统监控页面

This commit is contained in:
Orange 2020-12-15 20:31:12 +08:00 committed by Jiangjie.Bai
parent 4d95461b5c
commit 64d610e282
4 changed files with 27 additions and 13 deletions

View File

@ -1041,10 +1041,11 @@
"License": "许可证", "License": "许可证",
"SystemMonitor": "系统监控", "SystemMonitor": "系统监控",
"ServiceRatio": "组件负载统计", "ServiceRatio": "组件负载统计",
"LoadStatus":"组件负载状态", "LoadStatus":"组件状态",
"NormalLoad":"负载正常", "NormalLoad":"正常",
"HighLoad":"负载较高", "HighLoad":"较高",
"CriticalLoad":"负载严重", "CriticalLoad":"严重",
"Offline": "离线",
"LicenseDetail": "许可证详情", "LicenseDetail": "许可证详情",
"LicenseFile": "许可证文件", "LicenseFile": "许可证文件",
"NoLicense": "暂无许可证", "NoLicense": "暂无许可证",

View File

@ -1030,10 +1030,11 @@
"LicenseDetail": "License detail", "LicenseDetail": "License detail",
"SystemMonitor": "System Monitor", "SystemMonitor": "System Monitor",
"ServiceRatio": "Service ratio", "ServiceRatio": "Service ratio",
"LoadStatus":"Load status", "LoadStatus":"Status",
"NormalLoad":"Normal load", "NormalLoad":"Normal",
"HighLoad":"High load", "HighLoad":"High",
"CriticalLoad":"Critical load", "Offline": "Offline",
"CriticalLoad":"Critical",
"LicenseFile": "License file", "LicenseFile": "License file",
"NoLicense": "No License", "NoLicense": "No License",
"Node": "Node", "Node": "Node",

View File

@ -26,6 +26,11 @@
role="progressbar" role="progressbar"
:style="{'width':toPercent(serviceData.critical) }" :style="{'width':toPercent(serviceData.critical) }"
/> />
<div
class="progress-bar progress-bar-offline"
role="progressbar"
:style="{'width':toPercent(serviceData.offline) }"
/>
</div> </div>
<div style="display: flex;justify-content: space-around;font-size: 14px;"> <div style="display: flex;justify-content: space-around;font-size: 14px;">
<span> <span>
@ -33,13 +38,17 @@
{{ $t('xpack.NormalLoad') }}: {{ serviceData.normal }} {{ $t('xpack.NormalLoad') }}: {{ serviceData.normal }}
</span> </span>
<span> <span>
<i class="el-icon-warning" style="color: #E6A23C;" /> <i class="el-icon-bell" style="color: #E6A23C;" />
{{ $t('xpack.HighLoad') }}: {{ serviceData.high }} {{ $t('xpack.HighLoad') }}: {{ serviceData.high }}
</span> </span>
<span> <span>
<i class="el-icon-circle-close" style="color: #FF4949;" /> <i class="el-icon-message-solid" style="color: #FF4949;" />
{{ $t('xpack.CriticalLoad') }}: {{ serviceData.critical }} {{ $t('xpack.CriticalLoad') }}: {{ serviceData.critical }}
</span> </span>
<span>
<i class="el-icon-circle-close" style="color: #bfbaba;" />
{{ $t('xpack.Offline') }}: {{ serviceData.offline }}
</span>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -123,6 +132,9 @@ export default {
.progress-bar-danger{ .progress-bar-danger{
background-color: #FF4949 !important; background-color: #FF4949 !important;
} }
.progress-bar-offline{
background-color: #bfbaba !important;
}
.progress-bar { .progress-bar {
float: left; float: left;
width: 0; width: 0;

View File

@ -1,13 +1,13 @@
<template> <template>
<Page> <Page>
<el-row :gutter="40"> <el-row :gutter="40">
<el-col :lg="{span:8,offset:4 }" :md="24" class="monitorCard"> <el-col :lg="{span:10,offset:2 }" :md="24" class="monitorCard">
<MonitorCard type="koko" /> <MonitorCard type="koko" />
</el-col> </el-col>
<el-col :lg="8" :md="24" class="monitorCard"> <el-col :lg="10" :md="24" class="monitorCard">
<MonitorCard type="guacamole" /> <MonitorCard type="guacamole" />
</el-col> </el-col>
<el-col :lg="{span:8,offset:4 }" :md="24" class="monitorCard"> <el-col :lg="{span:10,offset:2 }" :md="24" class="monitorCard">
<MonitorCard type="omnidb" /> <MonitorCard type="omnidb" />
</el-col> </el-col>
</el-row> </el-row>