From ae2d855c89ca722ac7309fdf1aa6ceed370e3b95 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期一, 11 十月 2021 20:22:30 +0800
Subject: [PATCH] 监控ui
---
src/pages/systemMonitor/index/App.vue | 124 ++++++++++++++++++++++++----------------
1 files changed, 74 insertions(+), 50 deletions(-)
diff --git a/src/pages/systemMonitor/index/App.vue b/src/pages/systemMonitor/index/App.vue
index 3da55ad..5dffb21 100644
--- a/src/pages/systemMonitor/index/App.vue
+++ b/src/pages/systemMonitor/index/App.vue
@@ -16,7 +16,11 @@
<div class="subtitle">
姝ｅ湪杩涜{{ algoProcessData.length }}涓畻娉曞崟鍏�
</div>
- <span class="iconfont icon" :style="activeTab == 0 ? {} :{color:'#fff'} "></span>
+ <span
+ class="iconfont icon"
+ :style="activeTab == 0 ? {} : { color: '#fff' }"
+ ></span
+ >
</div>
<div
class="tab-item"
@@ -25,7 +29,11 @@
>
<div class="title">搴旂敤鍗曞厓</div>
<div class="subtitle">姝ｅ湪杩涜{{ 1 }}涓簲鐢ㄥ崟鍏�</div>
- <span class="iconfont icon" :style="activeTab == 1 ? {} :{color:'#fff'} "></span>
+ <span
+ class="iconfont icon"
+ :style="activeTab == 1 ? {} : { color: '#fff' }"
+ ></span
+ >
</div>
</div>
<div class="form-title" v-if="activeTab == 0">
@@ -37,16 +45,16 @@
<el-table
:data="algoProcessData"
style="width: 100%"
-
:header-cell-style="'background: #F2F2F7;color: #333333;height: 40px;font-size: 16px;'"
stripe
class="tableBox"
>
- <el-table-column
- prop="desc"
- label="鍚嶇О"
- width="180"
- ></el-table-column>
+ <el-table-column label="鍚嶇О" width="180">
+ <template slot-scope="scope">
+ <span class="iconfont icon"></span>
+ <span>{{ scope.row.desc }} </span>
+ </template>
+ </el-table-column>
<el-table-column label="CPU" width="180">
<template slot-scope="scope">
<span>{{ scope.row.cpu.toFixed(2) }} %</span>
@@ -102,7 +110,7 @@
</div>
</el-tab-pane>
- <el-tab-pane name="top">
+ <el-tab-pane name="top">
<span slot="label">
<span class="iconfont icon"></span>
鎬ц兘</span
@@ -119,7 +127,7 @@
<div class="ax_default_pic color-cpu"></div>
<div>
<div class="ax_default_text">CPU</div>
- <div class="ax_default_subtext">{{ cpuUsedPercent }}%</div>
+ <div class="ax_default_subtext">{{ cpuUsedPercent }}%</div>
</div>
</div>
@@ -131,8 +139,10 @@
@click="setActiveChartItem('mem')"
>
<div class="ax_default_pic color-mem"></div>
- <div><div class="ax_default_text">鍐呭瓨</div>
- <div class="ax_default_subtext">{{ memUsedPercent }}%</div></div>
+ <div>
+ <div class="ax_default_text">鍐呭瓨</div>
+ <div class="ax_default_subtext">{{ memUsedPercent }}%</div>
+ </div>
</div>
<div
@@ -143,8 +153,10 @@
@click="setActiveChartItem('gpu')"
>
<div class="ax_default_pic color-gpu"></div>
- <div> <div class="ax_default_text">绠楀姏</div>
- <div class="ax_default_subtext">{{ gpuUsedPercent }}%</div></div>
+ <div>
+ <div class="ax_default_text">绠楀姏</div>
+ <div class="ax_default_subtext">{{ gpuUsedPercent }}%</div>
+ </div>
</div>
<div
@@ -155,10 +167,12 @@
@click="setActiveChartItem('net')"
>
<div class="ax_default_pic color-net"></div>
- <div> <div class="ax_default_text">缃戠粶</div>
- <div class="ax_default_subtext">
- {{ netSend | byteConver }} / {{ netRecive | byteConver }}
- </div></div>
+ <div>
+ <div class="ax_default_text">缃戠粶</div>
+ <div class="ax_default_subtext">
+ {{ netSend | byteConver }} / {{ netRecive | byteConver }}
+ </div>
+ </div>
</div>
<div
@@ -171,10 +185,12 @@
@click="setActiveChartItem('disk|' + k)"
>
<div class="ax_default_pic color-disk"></div>
- <div><div class="ax_default_text">纾佺洏 {{ k }}</div>
- <div class="ax_default_subtext">
- {{ v.info.total | byteConver }}
- </div></div>
+ <div>
+ <div class="ax_default_text">纾佺洏 {{ k }}</div>
+ <div class="ax_default_subtext">
+ {{ v.info.total | byteConver }}
+ </div>
+ </div>
</div>
</div>
@@ -268,7 +284,10 @@
<span class="iconfont icon"></span>
鏈嶅姟</span
>
- <el-table :data="vasystemServicesData">
+ <el-table :data="vasystemServicesData"
+
+ class="tableBox"
+ >
<el-table-column label="鍚嶇О" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
@@ -357,6 +376,7 @@
left: "1%",
right: "4%",
bottom: "3%",
+
containLabel: true,
borderWidth: 2,
borderColor: "#000",
@@ -470,8 +490,7 @@
showProcesses()
.then((rsp) => {
if (rsp && rsp.success) {
- if (rsp.data.algos)
- this.algoProcessData = [...rsp.data.algos, ...rsp.data.algos];
+ if (rsp.data.algos) this.algoProcessData = rsp.data.algos;
if (rsp.data.apps) this.appProcessData = rsp.data.apps;
}
@@ -708,7 +727,6 @@
color: #fff;
}
.el-table th.el-table__cell > .cell {
-
text-align: center;
}
.tableBox {
@@ -732,6 +750,7 @@
padding: 0 !important;
height: 40px;
line-height: 40px;
+ text-align: center;
}
}
.el-tabs--top {
@@ -812,17 +831,17 @@
margin-bottom: 4px;
}
.subtitle {
- font-size: 12px;
- line-height: 17px;
- z-index: 99;
- position: absolute;
+ font-size: 12px;
+ line-height: 17px;
+ z-index: 99;
+ position: absolute;
}
- .icon{
- color: #6da3f3;
- font-size: 60px;
- position: absolute;
- bottom: 4px;
- right: 4px;
+ .icon {
+ color: #6da3f3;
+ font-size: 60px;
+ position: absolute;
+ bottom: 4px;
+ right: 4px;
}
}
.tab-item-active {
@@ -894,8 +913,7 @@
}
.column-right {
- //overflow: hidden;
- overflow-y: hidden;
+ overflow-y: auto;
overflow-x: auto;
}
@@ -906,8 +924,8 @@
}
.resize-bar {
- width: 285px;
-height: 600px;
+ width: 285px;
+ // height: 600px;
}
/* 鎷栨嫿绾� */
@@ -922,7 +940,7 @@
}
.ax_default {
- width: 270px;
+ width: 270px;
height: 70px;
padding: 10px;
font-size: 14px;
@@ -932,15 +950,19 @@
box-sizing: border-box;
display: flex;
justify-content: space-between;
+ color: #333333;
}
-
+ .ax_default:hover {
+ color: #333333;
+ background: #f8f8ff;
+ }
.selected {
// background: inherit;
// background-color: #cde8ff;
// border: none;
// border-radius: 8px;
- background: inherit;
- background-color: #4E94FF;
+ background: inherit;
+ background-color: #4e94ff;
border: none;
border-radius: 8px;
color: #fff;
@@ -950,7 +972,7 @@
// position: absolute;
border-width: 0px;
width: 66px;
- height: 50px;
+ height: 50px;
box-sizing: border-box;
border: 1px solid rgba(255, 153, 0, 1);
background-color: #fff;
@@ -985,15 +1007,17 @@
.ax_default_text {
position: relative;
- text-align: left;
- font-size: 16px;
+ text-align: right;
+ font-size: 16px;
+ line-height: 22px;
+ font-weight: bold;
}
.ax_default_subtext {
- font-size: 13px;
- line-height: 35px;
- text-align: left;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: right;
}
.ax_default_label {
--
Gitblit v1.8.0