From 0892efe5131551631fe287cfda29e59e4f2f6707 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期六, 09 十月 2021 10:34:17 +0800
Subject: [PATCH] 系统监控
---
src/pages/systemMonitor/index/App.vue | 633 ++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 463 insertions(+), 170 deletions(-)
diff --git a/src/pages/systemMonitor/index/App.vue b/src/pages/systemMonitor/index/App.vue
index 88437be..3da55ad 100644
--- a/src/pages/systemMonitor/index/App.vue
+++ b/src/pages/systemMonitor/index/App.vue
@@ -1,38 +1,99 @@
<template>
<div class="s-system-monitor">
<el-tabs id="systemMonitor" v-model="activeName">
- <el-tab-pane label="鍗曞厓" name="proc">
- <div class="form-title">
- <b>绠楁硶鍗曞厓</b>
- (姝ｅ湪杩涜{{algoProcessData.length}}涓畻娉曞崟鍏�)
- <el-table :data="algoProcessData" style="width: 100%">
- <el-table-column prop="desc" label="鍚嶇О" width="180"></el-table-column>
+ <el-tab-pane name="proc">
+ <span slot="label">
+ <span class="iconfont icon"></span>
+ 鍗曞厓</span
+ >
+ <div class="left-tab">
+ <div
+ class="tab-item"
+ :class="activeTab == 0 ? 'tab-item-active' : ''"
+ @click="activeTab = 0"
+ >
+ <div class="title">绠楁硶鍗曞厓</div>
+ <div class="subtitle">
+ 姝ｅ湪杩涜{{ algoProcessData.length }}涓畻娉曞崟鍏�
+ </div>
+ <span class="iconfont icon" :style="activeTab == 0 ? {} :{color:'#fff'} "></span>
+ </div>
+ <div
+ class="tab-item"
+ :class="activeTab == 1 ? 'tab-item-active' : ''"
+ @click="activeTab = 1"
+ >
+ <div class="title">搴旂敤鍗曞厓</div>
+ <div class="subtitle">姝ｅ湪杩涜{{ 1 }}涓簲鐢ㄥ崟鍏�</div>
+ <span class="iconfont icon" :style="activeTab == 1 ? {} :{color:'#fff'} "></span>
+ </div>
+ </div>
+ <div class="form-title" v-if="activeTab == 0">
+ <div class="desc">
+ <b>绠楁硶鍗曞厓</b>
+ (姝ｅ湪杩涜{{ algoProcessData.length }}涓畻娉曞崟鍏�)
+ </div>
+
+ <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">
<template slot-scope="scope">
- <span>{{ scope.row.cpu.toFixed(2)}} %</span>
+ <span>{{ scope.row.cpu.toFixed(2) }} %</span>
</template>
</el-table-column>
<el-table-column label="鍐呭瓨">
<template slot-scope="scope">
- <span>{{ scope.row.mem.toFixed(2)}} %</span>
+ <span>{{ scope.row.mem.toFixed(2) }} %</span>
</template>
</el-table-column>
<el-table-column prop="disk" label="纭洏"></el-table-column>
<el-table-column label="绠楀姏">
<template slot-scope="scope">
- <span>{{ scope.row.gpu}} M</span>
+ <span>{{ scope.row.gpu }} M</span>
</template>
</el-table-column>
<el-table-column prop="net" label="缃戠粶"></el-table-column>
</el-table>
</div>
- <div class="form-title" style="margin-top:20px">
- <b>搴旂敤鍗曞厓</b>
- (姝ｅ湪杩涜{{appProcessData.length}}涓簲鐢ㄥ崟鍏�)
- <el-table :data="appProcessData" style="width: 100%">
- <el-table-column prop="desc" label="鍚嶇О" width="180"></el-table-column>
- <el-table-column prop="cpu" label="CPU" width="180"></el-table-column>
+ <div class="form-title" v-if="activeTab == 1">
+ <div class="desc">
+ <b>搴旂敤鍗曞厓</b>
+ (姝ｅ湪杩涜{{ appProcessData.length }}涓畻娉曞崟鍏�)
+ </div>
+
+ <el-table
+ :data="appProcessData"
+ style="width: 100%"
+ :header-cell-style="{
+ background: '#F2F2F7',
+ color: '#333333',
+ height: '40px',
+ }"
+ 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="gpu" label="绠楀姏"></el-table-column>
@@ -41,54 +102,79 @@
</div>
</el-tab-pane>
- <el-tab-pane label="鎬ц兘" name="top">
+ <el-tab-pane name="top">
+ <span slot="label">
+ <span class="iconfont icon"></span>
+ 鎬ц兘</span
+ >
<div class="column-left" ref="left">
<div class="resize-bar">
<div
- :class="['ax_default', activeChartItem == 'cpu' ?'selected': '']"
+ :class="[
+ 'ax_default',
+ activeChartItem == 'cpu' ? 'selected' : '',
+ ]"
@click="setActiveChartItem('cpu')"
>
<div class="ax_default_pic color-cpu"></div>
- <div class="ax_default_text">CPU</div>
- <div class="ax_default_subtext">{{cpuUsedPercent}}%</div>
+ <div>
+ <div class="ax_default_text">CPU</div>
+ <div class="ax_default_subtext">{{ cpuUsedPercent }}%</div>
+ </div>
</div>
<div
- :class="['ax_default', activeChartItem == 'mem' ?'selected': '']"
+ :class="[
+ 'ax_default',
+ activeChartItem == 'mem' ? 'selected' : '',
+ ]"
@click="setActiveChartItem('mem')"
>
<div class="ax_default_pic color-mem"></div>
- <div class="ax_default_text">鍐呭瓨</div>
- <div class="ax_default_subtext">{{memUsedPercent}}%</div>
+ <div><div class="ax_default_text">鍐呭瓨</div>
+ <div class="ax_default_subtext">{{ memUsedPercent }}%</div></div>
</div>
<div
- :class="['ax_default', activeChartItem == 'gpu' ?'selected': '']"
+ :class="[
+ 'ax_default',
+ activeChartItem == 'gpu' ? 'selected' : '',
+ ]"
@click="setActiveChartItem('gpu')"
>
<div class="ax_default_pic color-gpu"></div>
- <div class="ax_default_text">绠楀姏</div>
- <div class="ax_default_subtext">{{gpuUsedPercent}}%</div>
+ <div> <div class="ax_default_text">绠楀姏</div>
+ <div class="ax_default_subtext">{{ gpuUsedPercent }}%</div></div>
</div>
<div
- :class="['ax_default', activeChartItem == 'net' ?'selected': '']"
+ :class="[
+ 'ax_default',
+ activeChartItem == 'net' ? 'selected' : '',
+ ]"
@click="setActiveChartItem('net')"
>
<div class="ax_default_pic color-net"></div>
- <div class="ax_default_text">缃戠粶</div>
- <div class="ax_default_subtext">{{netSend | byteConver}} / {{netRecive | byteConver}}</div>
+ <div> <div class="ax_default_text">缃戠粶</div>
+ <div class="ax_default_subtext">
+ {{ netSend | byteConver }} / {{ netRecive | byteConver }}
+ </div></div>
</div>
<div
v-for="(v, k) in disks"
:key="k"
- :class="['ax_default', activeChartItem == ('disk|' + k) ?'selected': '']"
- @click="setActiveChartItem('disk|'+k)"
+ :class="[
+ 'ax_default',
+ activeChartItem == 'disk|' + k ? 'selected' : '',
+ ]"
+ @click="setActiveChartItem('disk|' + k)"
>
<div class="ax_default_pic color-disk"></div>
- <div class="ax_default_text">纾佺洏 {{k}}</div>
- <div class="ax_default_subtext">{{v.info.total | byteConver}}</div>
+ <div><div class="ax_default_text">纾佺洏 {{ k }}</div>
+ <div class="ax_default_subtext">
+ {{ v.info.total | byteConver }}
+ </div></div>
</div>
</div>
@@ -96,92 +182,96 @@
</div>
<div class="column-right">
- <div class="max-val">{{yAxisMaxVal}}</div>
+ <div class="max-val">{{ yAxisMaxVal }}</div>
<div ref="graphs" class="graphs-chart"></div>
<div v-show="activeChartItem == 'cpu'">
<div class="ax_default_label">
<b>鍗犵敤鐜�</b>
- <p>{{cpuUsedPercent}}%</p>
+ <p>{{ cpuUsedPercent }}%</p>
</div>
<div class="ax_default_label">
<b>涓婚</b>
- <p>{{cpuMaxRate}}Ghz</p>
+ <p>{{ cpuMaxRate }}Ghz</p>
</div>
<div class="ax_default_label">
<b>鎻掓Ы</b>
- <p>{{cpuCount}}</p>
+ <p>{{ cpuCount }}</p>
</div>
<div class="ax_default_label">
<b>鍐呮牳</b>
- <p>{{cpuCore}}</p>
+ <p>{{ cpuCore }}</p>
</div>
</div>
<div v-show="activeChartItem == 'mem'">
<div class="ax_default_label">
<b>浣跨敤涓�</b>
- <p>{{memUsed}}G</p>
+ <p>{{ memUsed }}G</p>
</div>
<div class="ax_default_label">
<b>宸茬紦瀛�</b>
- <p>{{memCache}}G</p>
+ <p>{{ memCache }}G</p>
</div>
<div class="ax_default_label">
<b>鍙敤</b>
- <p>{{memFree}}G</p>
+ <p>{{ memFree }}G</p>
</div>
</div>
<div v-show="activeChartItem == 'net'">
<div class="ax_default_label">
<b>鎺ユ敹</b>
- <p>{{netRecive |byteConver}}</p>
+ <p>{{ netRecive | byteConver }}</p>
</div>
<div class="ax_default_label">
<b>鍙戦��</b>
- <p>{{netSend |byteConver}}</p>
+ <p>{{ netSend | byteConver }}</p>
</div>
<div class="ax_default_label">
<b>IP鍦板潃</b>
- <p>{{ipAddr}}</p>
+ <p>{{ ipAddr }}</p>
</div>
- <div class="ax_default_label" style="margin-left: 19px;">
+ <div class="ax_default_label" style="margin-left: 19px">
<b>MAC鍦板潃</b>
- <p>{{macAddr}}</p>
+ <p>{{ macAddr }}</p>
</div>
</div>
<div v-show="isDisk">
<div class="ax_default_label">
<b>瀹归噺</b>
- <p>{{activeDisk.total |byteConver}}</p>
+ <p>{{ activeDisk.total | byteConver }}</p>
</div>
<div class="ax_default_label">
<b>宸茬敤</b>
- <p>{{activeDisk.used |byteConver}}</p>
+ <p>{{ activeDisk.used | byteConver }}</p>
</div>
<div class="ax_default_label">
<b>鍙敤</b>
- <p>{{activeDisk.free |byteConver}}</p>
+ <p>{{ activeDisk.free | byteConver }}</p>
</div>
<div class="ax_default_label">
<b>璇诲彇閫熷害</b>
- <p>{{ioRead | byteConver}}</p>
+ <p>{{ ioRead | byteConver }}</p>
</div>
<div class="ax_default_label">
<b>鍐欏叆閫熷害</b>
- <p>{{ioWrite | byteConver}}</p>
+ <p>{{ ioWrite | byteConver }}</p>
</div>
</div>
</div>
</el-tab-pane>
- <el-tab-pane label="鏈嶅姟" name="service">
+ <el-tab-pane name="service">
+ <span slot="label">
+ <span class="iconfont icon"></span>
+ 鏈嶅姟</span
+ >
<el-table :data="vasystemServicesData">
<el-table-column label="鍚嶇О" show-overflow-tooltip>
<template slot-scope="scope">
- <span>{{ scope.row.name}}</span>
+ <span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column label="鐘舵��" prop="status">
@@ -198,52 +288,54 @@
<script>
import echarts from "echarts";
-import { showSystemStates, showService, showProcesses } from "../api/api"
+import { showSystemStates, showService, showProcesses } from "../api/api";
export default {
- components: {
- },
+ components: {},
computed: {
isDisk() {
- return this.activeChartItem.indexOf("disk") == 0
+ return this.activeChartItem.indexOf("disk") == 0;
},
isAdmin() {
if (
- sessionStorage.getItem('userInfo') &&
- sessionStorage.getItem('userInfo') !== ''
+ sessionStorage.getItem("userInfo") &&
+ sessionStorage.getItem("userInfo") !== ""
) {
- let loginName = JSON.parse(sessionStorage.getItem('userInfo')).username
- return (
- loginName === 'superadmin' || loginName === 'basic'
- )
+ let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
+ return loginName === "superadmin" || loginName === "basic";
}
return false;
- }
+ },
},
filters: {
byteConver(limit) {
var size = "";
- if (limit < 1024) { //濡傛灉灏忎簬0.1KB杞寲鎴怋
+ if (limit < 1024) {
+ //濡傛灉灏忎簬0.1KB杞寲鎴怋
size = limit + "B";
- } else if (limit < 1024 * 1024) {//濡傛灉灏忎簬0.1MB杞寲鎴怟B
+ } else if (limit < 1024 * 1024) {
+ //濡傛灉灏忎簬0.1MB杞寲鎴怟B
size = (limit / 1024).toFixed(2) + "KB";
- } else if (limit < 1024 * 1024 * 1024) { //濡傛灉灏忎簬0.1GB杞寲鎴怣B
+ } else if (limit < 1024 * 1024 * 1024) {
+ //濡傛灉灏忎簬0.1GB杞寲鎴怣B
size = (limit / (1024 * 1024)).toFixed(2) + "MB";
- } else if (limit < 1024 * 1024 * 1024 * 1024) { //鍏朵粬杞寲鎴怗B
+ } else if (limit < 1024 * 1024 * 1024 * 1024) {
+ //鍏朵粬杞寲鎴怗B
size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB";
} else {
size = (limit / (1024 * 1024 * 1024 * 1024)).toFixed(2) + "TB";
}
var sizestr = size + "";
- var len = sizestr.indexOf("\.");
+ var len = sizestr.indexOf(".");
var dec = sizestr.substr(len + 1, 2);
- if (dec == "00") {//褰撳皬鏁扮偣鍚庝负00鏃� 鍘绘帀灏忔暟閮ㄥ垎
+ if (dec == "00") {
+ //褰撳皬鏁扮偣鍚庝负00鏃� 鍘绘帀灏忔暟閮ㄥ垎
return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
}
return sizestr;
- }
+ },
},
data() {
return {
@@ -254,6 +346,7 @@
appProcessData: [],
vasystemServicesData: [],
eChartsObj: {},
+ activeTab: 0,
eChartsBaseOpt: {
title: {
top: 10,
@@ -261,12 +354,12 @@
animation: false,
grid: {
show: true,
- left: '1%',
- right: '4%',
- bottom: '3%',
+ left: "1%",
+ right: "4%",
+ bottom: "3%",
containLabel: true,
borderWidth: 2,
- borderColor: '#000'
+ borderColor: "#000",
},
xAxis: {
type: "category",
@@ -274,43 +367,43 @@
data: Array.from({ length: 60 }, () => 0),
// show: false,
axisLabel: {
- show: false
+ show: false,
},
axisTick: {
- show: false
+ show: false,
},
splitLine: {
show: true,
interval: 5,
lineStyle: {
width: 1,
- type: 'solid'
- }
- }
+ type: "solid",
+ },
+ },
},
yAxis: {
- type: 'value',
+ type: "value",
// show: false,
axisLine: {
- show: false
+ show: false,
},
axisLabel: {
- show: false
+ show: false,
},
axisTick: {
- show: false
- }
+ show: false,
+ },
},
series: [
{
- type: 'line',
- symbol: 'none',
+ type: "line",
+ symbol: "none",
data: Array.from({ length: 60 }, () => 0),
// smooth: true,
itemStyle: {},
- areaStyle: {}
- }
- ]
+ areaStyle: {},
+ },
+ ],
},
cpuUtilizations: Array.from({ length: 60 }, () => 0),
memUtilizations: Array.from({ length: 60 }, () => 0),
@@ -337,7 +430,7 @@
disks: {},
activeDisk: {},
ioRead: 0,
- ioWrite: 0
+ ioWrite: 0,
};
},
mounted() {
@@ -351,41 +444,42 @@
this.procCollect();
setTimeout(() => {
this.dataCollection();
- }, 5000)
+ }, 5000);
},
serviceCollect() {
- showService().then(rsp => {
- if (rsp && rsp.success) {
- rsp.data.sort(function (obj1, obj2) {
- var val1 = obj1.name
- var val2 = obj2.name
- if (val1 < val2) {
- return -1
- } else if (val1 > val2) {
- return 1
- } else {
- return 0
- }
- })
- this.vasystemServicesData = rsp.data;
- }
- }).catch(() => { })
-
+ showService()
+ .then((rsp) => {
+ if (rsp && rsp.success) {
+ rsp.data.sort(function (obj1, obj2) {
+ var val1 = obj1.name;
+ var val2 = obj2.name;
+ if (val1 < val2) {
+ return -1;
+ } else if (val1 > val2) {
+ return 1;
+ } else {
+ return 0;
+ }
+ });
+ this.vasystemServicesData = rsp.data;
+ }
+ })
+ .catch(() => {});
},
procCollect() {
- showProcesses().then(rsp => {
- if (rsp && rsp.success) {
- if (rsp.data.algos)
- this.algoProcessData = rsp.data.algos;
+ showProcesses()
+ .then((rsp) => {
+ if (rsp && rsp.success) {
+ if (rsp.data.algos)
+ this.algoProcessData = [...rsp.data.algos, ...rsp.data.algos];
- if (rsp.data.apps)
- this.appProcessData = rsp.data.apps;
- }
-
- }).catch(() => { })
+ if (rsp.data.apps) this.appProcessData = rsp.data.apps;
+ }
+ })
+ .catch(() => {});
},
getSystemState() {
- showSystemStates().then(rsp => {
+ showSystemStates().then((rsp) => {
if (rsp && rsp.success) {
// 澶勭悊cpu
this.cpuUtilizations = this.cpuUtilizations.slice(1);
@@ -394,8 +488,12 @@
if (rsp.data.cpu_info) {
this.cpuMaxRate = (rsp.data.cpu_info[0].mhz / 1024).toFixed(2);
this.cpuModel = rsp.data.cpu_info[0].modelName;
- this.cpuCore = Number(rsp.data.cpu_info[rsp.data.cpu_info.length - 1].coreId) + 1;
- this.cpuCount = (rsp.data.cpu_info.length / this.cpuCore).toFixed(0);
+ this.cpuCore =
+ Number(rsp.data.cpu_info[rsp.data.cpu_info.length - 1].coreId) +
+ 1;
+ this.cpuCount = (rsp.data.cpu_info.length / this.cpuCore).toFixed(
+ 0
+ );
}
// 鍐呭瓨
@@ -404,7 +502,12 @@
this.memTotal = (rsp.data.mem.total / 1024 / 1024 / 1000).toFixed(0);
this.memUsed = (rsp.data.mem.used / 1024 / 1024 / 1000).toFixed(2);
this.memFree = (rsp.data.mem.free / 1024 / 1024 / 1000).toFixed(2);
- this.memCache = ((rsp.data.mem.cached + rsp.data.mem.buffers) / 1024 / 1024 / 1000).toFixed(2);
+ this.memCache = (
+ (rsp.data.mem.cached + rsp.data.mem.buffers) /
+ 1024 /
+ 1024 /
+ 1000
+ ).toFixed(2);
this.memUsedPercent = rsp.data.mem.usedPercent.toFixed(2);
// 绠楀姏
@@ -436,47 +539,54 @@
} else {
return 0;
}
- })
+ });
- rsp.data.disk.forEach(d => {
+ 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] = {};
this.disks[d.name]["info"] = d.info;
- this.disks[d.name]["readBytes"] = Array.from({ length: 60 }, () => 0);
- this.disks[d.name]["writeBytes"] = Array.from({ length: 60 }, () => 0);
+ this.disks[d.name]["readBytes"] = Array.from(
+ { length: 60 },
+ () => 0
+ );
+ this.disks[d.name]["writeBytes"] = Array.from(
+ { length: 60 },
+ () => 0
+ );
}
});
// this.disks = rsp.data.disk;
}
-
this.setChartData();
setTimeout(() => {
this.getSystemState();
- }, 1000)
- })
+ }, 1000);
+ });
},
isShow(authority) {
if (this.isAdmin) {
- return true
- } else if (
- this.buttonAuthority.indexOf(',' + authority + ',') > -1
- ) {
- return true
+ return true;
+ } else if (this.buttonAuthority.indexOf("," + authority + ",") > -1) {
+ return true;
} else {
- return false
+ return false;
}
},
format(array) {
return [
this.$moment(array[0]).format("YYYY-MM-DD"),
- this.$moment(array[1]).format("YYYY-MM-DD")
+ this.$moment(array[1]).format("YYYY-MM-DD"),
];
},
setActiveChartItem(item) {
@@ -491,7 +601,7 @@
setChartData() {
let option = JSON.parse(JSON.stringify(this.eChartsBaseOpt));
switch (this.activeChartItem) {
- case 'cpu':
+ case "cpu":
this.yAxisMaxVal = this.cpuModel;
option.title.text = "CPU";
option.title.subtext = "%鍗犵敤鐜�";
@@ -503,7 +613,7 @@
option.series[0].data = this.cpuUtilizations;
break;
- case 'mem':
+ case "mem":
this.yAxisMaxVal = this.memTotal + "G";
option.title.text = "鍐呭瓨";
option.title.subtext = "鍐呭瓨浣跨敤閲�";
@@ -514,7 +624,7 @@
option.series[0].areaStyle.color = "#f7bb88";
option.series[0].data = this.memUtilizations;
break;
- case 'gpu':
+ case "gpu":
this.yAxisMaxVal = "100%";
option.title.text = "绠楀姏";
option.title.subtext = "%浣跨敤鐜�";
@@ -525,7 +635,7 @@
option.series[0].areaStyle.color = "#de9dff";
option.series[0].data = this.gpuUtilizations;
break;
- case 'net':
+ case "net":
this.yAxisMaxVal = "";
option.title.text = "缃戠粶";
option.title.subtext = "缃戠粶璐熻浇";
@@ -534,17 +644,17 @@
option.series[0].areaStyle.color = "#d68658";
option.series[0].data = this.netReciveCount;
option.series.push({
- type: 'line',
- symbol: 'none',
+ type: "line",
+ symbol: "none",
data: this.netSendCount,
// smooth: true,
itemStyle: {
- color: "#4696da"
+ color: "#4696da",
},
areaStyle: {
- color: "#4eacfd"
- }
- })
+ color: "#4eacfd",
+ },
+ });
break;
default:
if (this.activeChartItem.indexOf("disk|") == 0) {
@@ -558,17 +668,17 @@
option.series[0].areaStyle.color = "#4eacfd";
option.series[0].data = this.disks[dev].readBytes;
option.series.push({
- type: 'line',
- symbol: 'none',
+ type: "line",
+ symbol: "none",
data: this.disks[dev].writeBytes,
// smooth: true,
itemStyle: {
- color: "#33ff66"
+ color: "#33ff66",
},
areaStyle: {
- color: "#33cc66"
- }
- })
+ color: "#33cc66",
+ },
+ });
this.activeDisk = this.disks[dev].info;
this.ioRead = this.disks[dev].readBytes[59];
@@ -578,9 +688,8 @@
}
this.eChartsObj.setOption(option);
- }
-
- }
+ },
+ },
};
</script>
<style lang="scss">
@@ -588,12 +697,187 @@
width: 100% !important;
min-width: 759px;
box-sizing: border-box;
- padding: 10px;
- // background-color: #e9ebf2;
background-color: #fff;
+ height: 100%;
+ .el-table th.el-table__cell.is-leaf,
+ .el-table td.el-table__cell {
+ border-bottom: none;
+ }
+ .el-table--enable-row-hover .el-table__body tr:hover > td {
+ background-color: #4e94ff !important;
+ color: #fff;
+ }
+ .el-table th.el-table__cell > .cell {
+
+ text-align: center;
+ }
+ .tableBox {
+ .el-table td.el-table__cell {
+ border-bottom: none;
+ }
+ .el-table--striped
+ .el-table__body
+ tr.el-table__row--striped
+ td.el-table__cell {
+ background: #f8f8ff;
+ }
+
+ th {
+ padding: 0 !important;
+ height: 40px;
+ line-height: 40px;
+ border-radius: 4px;
+ }
+ td {
+ padding: 0 !important;
+ height: 40px;
+ line-height: 40px;
+ }
+ }
+ .el-tabs--top {
+ height: 100%;
+ background: #f2f2f7;
+ padding: 4px;
+ box-sizing: border-box;
+ }
+ #systemMonitor .el-tabs__header {
+ background: #fff;
+ border-radius: 4px;
+ background-image: url("/images/systemMonitor/Group 224.png");
+ background-repeat: no-repeat;
+ background-size: 116px;
+ background-position: top 15px right 18px;
+ }
+ .el-tabs__nav-wrap {
+ padding: 25px 20px;
+ }
+ #systemMonitor .el-tabs__active-bar {
+ /* background-color: #ff7733; */
+ visibility: hidden;
+ }
+ #systemMonitor .el-tabs__content {
+ padding: 0px !important;
+ height: calc(100% - 97px);
+ width: calc(100% - 0px);
+ .el-tab-pane {
+ width: 100%;
+ display: flex;
+ height: 100%;
+ .form-title {
+ text-align: left;
+ font-size: 14px;
+ width: calc(100% - 200px);
+ padding: 10px;
+ box-sizing: border-box;
+ .desc {
+ font-size: 16px;
+ line-height: 22px;
+ color: #4e94ff;
+ margin-left: 10px;
+ margin-bottom: 5px;
+ }
+ }
+ }
+ }
+
+ .left-tab {
+ width: 200px;
+ height: 100%;
+ border-radius: 4px;
+ background: #ffffff;
+ padding: 20px;
+
+ border-radius: 4px;
+ box-sizing: border-box;
+
+ .tab-item {
+ width: 160px;
+ height: 85px;
+ /* left: 24px; */
+ color: #333333;
+ /* top: 158px; */
+ background: #f8f8ff;
+ cursor: pointer;
+ border: 2px solid transparent;
+ border-radius: 8px;
+ margin-bottom: 20px;
+ padding: 12px;
+ box-sizing: border-box;
+ text-align: left;
+ position: relative;
+ .title {
+ font-weight: bold;
+ font-size: 16px;
+ line-height: 22px;
+ margin-bottom: 4px;
+ }
+ .subtitle {
+ font-size: 12px;
+ line-height: 17px;
+ z-index: 99;
+ position: absolute;
+ }
+ .icon{
+ color: #6da3f3;
+ font-size: 60px;
+ position: absolute;
+ bottom: 4px;
+ right: 4px;
+ }
+ }
+ .tab-item-active {
+ background-color: #4e94ff;
+ color: #fff;
+ }
+ .tab-item:hover {
+ border: 2px solid #4e94ff;
+ }
+ }
+ .el-tabs__header {
+ margin: 0;
+ }
+ .el-tabs__nav-wrap::after {
+ content: "";
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ height: 3px;
+ background-color: #f2f2f7;
+ z-index: 1;
+ }
.form-title {
text-align: left;
font-size: 14px;
+ margin-left: 4px;
+ background: #fff;
+ }
+ #systemMonitor .el-tabs__header .el-tabs__item:nth-child(2) {
+ padding-left: 39px;
+ }
+ #systemMonitor .el-tabs__header .el-tabs__item {
+ padding: 0 39px;
+
+ height: 40px;
+ background: #f8f8ff;
+ font-family: PingFangSC-Regular;
+ font-size: 14px;
+ font-weight: bold;
+ font-size: 16px;
+ color: #222222;
+ text-align: center;
+ border: 0px solid transparent;
+ margin-right: 2px;
+ }
+
+ #systemMonitor .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
+ color: initial;
+ }
+ #systemMonitor .el-tabs__header .el-tabs__item.is-active {
+ border: none;
+ /* font-weight: bold; */
+ background: #4e94ff;
+ color: #fff !important;
}
.graphs-chart {
@@ -622,8 +906,8 @@
}
.resize-bar {
- width: 238px;
- height: 610px;
+ width: 285px;
+height: 600px;
}
/* 鎷栨嫿绾� */
@@ -638,28 +922,38 @@
}
.ax_default {
- width: 207px;
- height: 45px;
+ width: 270px;
+ height: 70px;
padding: 10px;
- font-size: 15px;
+ font-size: 14px;
margin: 5px;
cursor: pointer;
+ border-radius: 4px;
+ box-sizing: border-box;
+ display: flex;
+ justify-content: space-between;
}
.selected {
- background: inherit;
- background-color: #cde8ff;
+ // background: inherit;
+ // background-color: #cde8ff;
+ // border: none;
+ // border-radius: 8px;
+ background: inherit;
+ background-color: #4E94FF;
border: none;
border-radius: 8px;
+ color: #fff;
}
.ax_default_pic {
- position: absolute;
+ // position: absolute;
border-width: 0px;
width: 66px;
- height: 45px;
+ height: 50px;
box-sizing: border-box;
border: 1px solid rgba(255, 153, 0, 1);
+ background-color: #fff;
background-repeat: no-repeat;
background-position: bottom;
}
@@ -692,14 +986,13 @@
.ax_default_text {
position: relative;
text-align: left;
- margin-left: 72px;
+ font-size: 16px;
+
}
.ax_default_subtext {
font-size: 13px;
- margin-left: 72px;
line-height: 35px;
- color: #4e4d4d;
text-align: left;
}
--
Gitblit v1.8.0