From bb914b0cbf1f151eebc70e806df7e825786ab495 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期五, 10 十二月 2021 18:47:39 +0800
Subject: [PATCH] 改
---
src/pages/systemMonitor/index/App.vue | 159 ++++++++++++++++++++++++++++++++--------------------
1 files changed, 98 insertions(+), 61 deletions(-)
diff --git a/src/pages/systemMonitor/index/App.vue b/src/pages/systemMonitor/index/App.vue
index 3da55ad..a15face 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"
@@ -24,8 +28,12 @@
@click="activeTab = 1"
>
<div class="title">搴旂敤鍗曞厓</div>
- <div class="subtitle">姝ｅ湪杩涜{{ 1 }}涓簲鐢ㄥ崟鍏�</div>
- <span class="iconfont icon" :style="activeTab == 1 ? {} :{color:'#fff'} "></span>
+ <div class="subtitle">姝ｅ湪杩涜{{ appProcessData.length }}涓簲鐢ㄥ崟鍏�</div>
+ <span
+ class="iconfont icon"
+ :style="activeTab == 1 ? {} : { color: '#fff' }"
+ ></span
+ >
</div>
</div>
<div class="form-title" v-if="activeTab == 0">
@@ -37,33 +45,33 @@
<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="CPU" width="180">
+ <el-table-column label="鍚嶇О" width="231">
+ <template slot-scope="scope">
+ <span class="iconfont icon"></span>
+ <span>{{ scope.row.desc }} </span>
+ </template>
+ </el-table-column>
+ <el-table-column label="CPU" width="150">
<template slot-scope="scope">
<span>{{ scope.row.cpu.toFixed(2) }} %</span>
</template>
</el-table-column>
- <el-table-column label="鍐呭瓨">
+ <el-table-column label="鍐呭瓨" width="150">
<template slot-scope="scope">
<span>{{ scope.row.mem.toFixed(2) }} %</span>
</template>
</el-table-column>
- <el-table-column prop="disk" label="纭洏"></el-table-column>
- <el-table-column label="绠楀姏">
+ <el-table-column prop="disk" label="纭洏" width="150"></el-table-column>
+ <el-table-column label="绠楀姏" width="150">
<template slot-scope="scope">
<span>{{ scope.row.gpu }} M</span>
</template>
</el-table-column>
- <el-table-column prop="net" label="缃戠粶"></el-table-column>
+ <el-table-column prop="net" label="缃戠粶" width="150"></el-table-column>
</el-table>
</div>
@@ -76,11 +84,7 @@
<el-table
:data="appProcessData"
style="width: 100%"
- :header-cell-style="{
- background: '#F2F2F7',
- color: '#333333',
- height: '40px',
- }"
+ :header-cell-style="'background: #F2F2F7;color: #333333;height: 40px;font-size: 16px;'"
stripe
class="tableBox"
>
@@ -102,7 +106,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 +123,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 +135,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 +149,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 +163,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 +181,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,10 +280,17 @@
<span class="iconfont icon"></span>
鏈嶅姟</span
>
- <el-table :data="vasystemServicesData">
+ <el-table :data="vasystemServicesData"
+ :header-cell-style="'color: #333333;height: 40px;font-size: 16px;'"
+ stripe
+ class="tableBox"
+ >
<el-table-column label="鍚嶇О" show-overflow-tooltip>
<template slot-scope="scope">
+ <div class="name_container">
+ <span class="iconfont icon"></span>
<span>{{ scope.row.name }}</span>
+ </div>
</template>
</el-table-column>
<el-table-column label="鐘舵��" prop="status">
@@ -357,6 +376,7 @@
left: "1%",
right: "4%",
bottom: "3%",
+
containLabel: true,
borderWidth: 2,
borderColor: "#000",
@@ -378,6 +398,7 @@
lineStyle: {
width: 1,
type: "solid",
+ color:"rgb(242,242,242)"
},
},
},
@@ -393,6 +414,11 @@
axisTick: {
show: false,
},
+ splitLine: {
+ lineStyle: {
+ color:"rgb(242,242,242)"
+ }
+ }
},
series: [
{
@@ -470,8 +496,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;
}
@@ -699,6 +724,12 @@
box-sizing: border-box;
background-color: #fff;
height: 100%;
+
+ .name_container {
+ text-align: left;
+ margin-left: 38%;
+ }
+
.el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
border-bottom: none;
@@ -708,7 +739,6 @@
color: #fff;
}
.el-table th.el-table__cell > .cell {
-
text-align: center;
}
.tableBox {
@@ -732,6 +762,7 @@
padding: 0 !important;
height: 40px;
line-height: 40px;
+ text-align: center;
}
}
.el-tabs--top {
@@ -812,17 +843,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 +925,8 @@
}
.column-right {
- //overflow: hidden;
- overflow-y: hidden;
+ background-color: #fff;
+ overflow-y: auto;
overflow-x: auto;
}
@@ -906,8 +937,8 @@
}
.resize-bar {
- width: 285px;
-height: 600px;
+ width: 285px;
+ // height: 600px;
}
/* 鎷栨嫿绾� */
@@ -922,7 +953,7 @@
}
.ax_default {
- width: 270px;
+ width: 270px;
height: 70px;
padding: 10px;
font-size: 14px;
@@ -932,15 +963,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 +985,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 +1020,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