From ccee5f79043769c13d304343a40c46a3de4e9d17 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期五, 28 一月 2022 15:19:30 +0800
Subject: [PATCH] Merge branch 'bhomebus' of http://192.168.5.5:10010/r/web/vue-smart-ai into bhomebus
---
src/pages/systemMonitor/index/App.vue | 208 +++++++++++++++++++++++++++++++--------------------
1 files changed, 127 insertions(+), 81 deletions(-)
diff --git a/src/pages/systemMonitor/index/App.vue b/src/pages/systemMonitor/index/App.vue
index 3da55ad..297d8ec 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,14 @@
@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 +47,41 @@
<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,33 +94,29 @@
<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"
>
- <el-table-column
- prop="desc"
- label="鍚嶇О"
- width="180"
- ></el-table-column>
- <el-table-column
- prop="cpu"
- label="CPU"
- width="180"
- ></el-table-column>
- <el-table-column prop="mem" label="鍐呭瓨"></el-table-column>
- <el-table-column prop="disk" label="纭洏"></el-table-column>
+ <el-table-column prop="desc" label="鍚嶇О"></el-table-column>
+ <el-table-column prop="cpu" label="CPU">
+ <template slot-scope="scope">
+ <span>{{ scope.row.cpu.toFixed(2) }} %</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="mem" label="鍐呭瓨">
+ <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 prop="gpu" label="绠楀姏"></el-table-column>
- <el-table-column prop="net" label="缃戠粶"></el-table-column>
+ <el-table-column prop="net" label="缃戠粶"></el-table-column> -->
</el-table>
</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 +133,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 +145,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 +159,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 +173,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 +191,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 +290,18 @@
<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">
- <span>{{ scope.row.name }}</span>
+ <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 +387,7 @@
left: "1%",
right: "4%",
bottom: "3%",
+
containLabel: true,
borderWidth: 2,
borderColor: "#000",
@@ -378,6 +409,7 @@
lineStyle: {
width: 1,
type: "solid",
+ color: "rgb(242,242,242)",
},
},
},
@@ -392,6 +424,11 @@
},
axisTick: {
show: false,
+ },
+ splitLine: {
+ lineStyle: {
+ color: "rgb(242,242,242)",
+ },
},
},
series: [
@@ -470,8 +507,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;
}
@@ -543,13 +579,11 @@
rsp.data.disk.forEach((d) => {
if (d.name in this.disks) {
- this.disks[d.name].readBytes = this.disks[d.name].readBytes.slice(
- 1
- );
+ this.disks[d.name].readBytes =
+ this.disks[d.name].readBytes.slice(1);
this.disks[d.name].readBytes.push(d.readBytes);
- this.disks[d.name].writeBytes = this.disks[
- d.name
- ].writeBytes.slice(1);
+ this.disks[d.name].writeBytes =
+ this.disks[d.name].writeBytes.slice(1);
this.disks[d.name].writeBytes.push(d.writeBytes);
} else {
this.disks[d.name] = {};
@@ -699,6 +733,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 +748,6 @@
color: #fff;
}
.el-table th.el-table__cell > .cell {
-
text-align: center;
}
.tableBox {
@@ -732,6 +771,7 @@
padding: 0 !important;
height: 40px;
line-height: 40px;
+ text-align: center;
}
}
.el-tabs--top {
@@ -812,17 +852,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 +934,8 @@
}
.column-right {
- //overflow: hidden;
- overflow-y: hidden;
+ background-color: #fff;
+ overflow-y: auto;
overflow-x: auto;
}
@@ -906,8 +946,8 @@
}
.resize-bar {
- width: 285px;
-height: 600px;
+ width: 285px;
+ // height: 600px;
}
/* 鎷栨嫿绾� */
@@ -922,7 +962,7 @@
}
.ax_default {
- width: 270px;
+ width: 270px;
height: 70px;
padding: 10px;
font-size: 14px;
@@ -932,15 +972,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 +994,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 +1029,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