From 51ecc231aa4f73a5071e188b4528ab59d730b07f Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期二, 05 九月 2023 19:14:30 +0800
Subject: [PATCH] 移除视频分析相关功能, 默认自动登录
---
src/pages/systemMonitor/index/App.vue | 602 +++++++++++++++++++++++++----------------------------
1 files changed, 284 insertions(+), 318 deletions(-)
diff --git a/src/pages/systemMonitor/index/App.vue b/src/pages/systemMonitor/index/App.vue
index 3da55ad..8e2fb1d 100644
--- a/src/pages/systemMonitor/index/App.vue
+++ b/src/pages/systemMonitor/index/App.vue
@@ -1,31 +1,21 @@
<template>
<div class="s-system-monitor">
<el-tabs id="systemMonitor" v-model="activeName">
- <el-tab-pane name="proc">
+ <el-tab-pane name="proc" v-if="false">
<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="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 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="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 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,17 +27,17 @@
<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">
<template slot-scope="scope">
<span>{{ scope.row.cpu.toFixed(2) }} %</span>
</template>
@@ -57,13 +47,16 @@
<span>{{ scope.row.mem.toFixed(2) }} %</span>
</template>
</el-table-column>
- <el-table-column prop="disk" label="纭洏"></el-table-column>
+ <!-- <el-table-column
+ prop="disk"
+ label="纭洏"
+ width="150"
+ ></el-table-column> -->
<el-table-column label="绠楀姏">
<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>
</div>
@@ -76,105 +69,80 @@
<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
>
<div class="column-left" ref="left">
<div class="resize-bar">
- <div
- :class="[
- 'ax_default',
- activeChartItem == 'cpu' ? 'selected' : '',
- ]"
- @click="setActiveChartItem('cpu')"
- >
+ <div :class="['ax_default', activeChartItem == 'cpu' ? 'selected' : '']" @click="setActiveChartItem('cpu')">
<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>
- <div
- :class="[
- 'ax_default',
- activeChartItem == 'mem' ? 'selected' : '',
- ]"
- @click="setActiveChartItem('mem')"
- >
+ <div :class="['ax_default', activeChartItem == 'mem' ? 'selected' : '']" @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
- :class="[
- 'ax_default',
- activeChartItem == 'gpu' ? 'selected' : '',
- ]"
- @click="setActiveChartItem('gpu')"
- >
+ <div :class="['ax_default', activeChartItem == 'gpu' ? 'selected' : '']" @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
- :class="[
- 'ax_default',
- activeChartItem == 'net' ? 'selected' : '',
- ]"
- @click="setActiveChartItem('net')"
- >
+ <div :class="['ax_default', activeChartItem == 'net' ? 'selected' : '']" @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
v-for="(v, k) in disks"
:key="k"
- :class="[
- 'ax_default',
- activeChartItem == 'disk|' + k ? 'selected' : '',
- ]"
+ :class="['ax_default', activeChartItem == 'disk|' + k ? 'selected' : '']"
@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>
@@ -263,15 +231,23 @@
</div>
</el-tab-pane>
- <el-tab-pane name="service">
+ <el-tab-pane name="service" v-if="false">
<span slot="label">
<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">
@@ -287,59 +263,56 @@
</template>
<script>
-import echarts from "echarts";
-import { showSystemStates, showService, showProcesses } from "../api/api";
+import echarts from "echarts"
+import { showSystemStates, showService, showProcesses } from "../api/api"
export default {
components: {},
computed: {
isDisk() {
- return this.activeChartItem.indexOf("disk") == 0;
+ return this.activeChartItem.indexOf("disk") == 0
},
isAdmin() {
- if (
- sessionStorage.getItem("userInfo") &&
- sessionStorage.getItem("userInfo") !== ""
- ) {
- let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
- return loginName === "superadmin" || loginName === "basic";
+ if (sessionStorage.getItem("userInfo") && sessionStorage.getItem("userInfo") !== "") {
+ let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username
+ return loginName === "superadmin" || loginName === "basic"
}
- return false;
- },
+ return false
+ }
},
filters: {
byteConver(limit) {
- var size = "";
+ var size = ""
if (limit < 1024) {
//濡傛灉灏忎簬0.1KB杞寲鎴怋
- size = limit + "B";
+ size = limit + "B"
} else if (limit < 1024 * 1024) {
//濡傛灉灏忎簬0.1MB杞寲鎴怟B
- size = (limit / 1024).toFixed(2) + "KB";
+ size = (limit / 1024).toFixed(2) + "KB"
} else if (limit < 1024 * 1024 * 1024) {
//濡傛灉灏忎簬0.1GB杞寲鎴怣B
- size = (limit / (1024 * 1024)).toFixed(2) + "MB";
+ size = (limit / (1024 * 1024)).toFixed(2) + "MB"
} else if (limit < 1024 * 1024 * 1024 * 1024) {
//鍏朵粬杞寲鎴怗B
- size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB";
+ size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB"
} else {
- size = (limit / (1024 * 1024 * 1024 * 1024)).toFixed(2) + "TB";
+ size = (limit / (1024 * 1024 * 1024 * 1024)).toFixed(2) + "TB"
}
- var sizestr = size + "";
- var len = sizestr.indexOf(".");
- var dec = sizestr.substr(len + 1, 2);
+ var sizestr = size + ""
+ var len = sizestr.indexOf(".")
+ var dec = sizestr.substr(len + 1, 2)
if (dec == "00") {
//褰撳皬鏁扮偣鍚庝负00鏃� 鍘绘帀灏忔暟閮ㄥ垎
- return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
+ return sizestr.substring(0, len) + sizestr.substr(len + 3, 2)
}
- return sizestr;
- },
+ return sizestr
+ }
},
data() {
return {
- activeName: "proc",
+ activeName: "top",
activeChartItem: "cpu",
yAxisMaxVal: "100%",
algoProcessData: [],
@@ -349,7 +322,7 @@
activeTab: 0,
eChartsBaseOpt: {
title: {
- top: 10,
+ top: 10
},
animation: false,
grid: {
@@ -357,9 +330,10 @@
left: "1%",
right: "4%",
bottom: "3%",
+
containLabel: true,
borderWidth: 2,
- borderColor: "#000",
+ borderColor: "#000"
},
xAxis: {
type: "category",
@@ -367,10 +341,10 @@
data: Array.from({ length: 60 }, () => 0),
// show: false,
axisLabel: {
- show: false,
+ show: false
},
axisTick: {
- show: false,
+ show: false
},
splitLine: {
show: true,
@@ -378,21 +352,27 @@
lineStyle: {
width: 1,
type: "solid",
- },
- },
+ color: "rgb(242,242,242)"
+ }
+ }
},
yAxis: {
type: "value",
// show: false,
axisLine: {
- show: false,
+ show: false
},
axisLabel: {
- show: false,
+ show: false
},
axisTick: {
- show: false,
+ show: false
},
+ splitLine: {
+ lineStyle: {
+ color: "rgb(242,242,242)"
+ }
+ }
},
series: [
{
@@ -401,9 +381,9 @@
data: Array.from({ length: 60 }, () => 0),
// smooth: true,
itemStyle: {},
- areaStyle: {},
- },
- ],
+ areaStyle: {}
+ }
+ ]
},
cpuUtilizations: Array.from({ length: 60 }, () => 0),
memUtilizations: Array.from({ length: 60 }, () => 0),
@@ -430,267 +410,244 @@
disks: {},
activeDisk: {},
ioRead: 0,
- ioWrite: 0,
- };
+ ioWrite: 0
+ }
},
mounted() {
- this.dataCollection();
- this.initChart();
+ this.dataCollection()
+ this.initChart()
},
methods: {
// 寰幆閲囬泦鎵�鏈夋暟鎹�
dataCollection() {
- this.serviceCollect();
- this.procCollect();
+ this.serviceCollect()
+ this.procCollect()
setTimeout(() => {
- this.dataCollection();
- }, 5000);
+ this.dataCollection()
+ }, 5000)
},
serviceCollect() {
showService()
.then((rsp) => {
if (rsp && rsp.success) {
- rsp.data.sort(function (obj1, obj2) {
- var val1 = obj1.name;
- var val2 = obj2.name;
+ rsp.data.sort(function(obj1, obj2) {
+ var val1 = obj1.name
+ var val2 = obj2.name
if (val1 < val2) {
- return -1;
+ return -1
} else if (val1 > val2) {
- return 1;
+ return 1
} else {
- return 0;
+ return 0
}
- });
- this.vasystemServicesData = rsp.data;
+ })
+ this.vasystemServicesData = rsp.data
}
})
- .catch(() => {});
+ .catch(() => {})
},
procCollect() {
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;
+ if (rsp.data.apps) this.appProcessData = rsp.data.apps
}
})
- .catch(() => {});
+ .catch(() => {})
},
getSystemState() {
showSystemStates().then((rsp) => {
if (rsp && rsp.success) {
// 澶勭悊cpu
- this.cpuUtilizations = this.cpuUtilizations.slice(1);
- this.cpuUtilizations.push(rsp.data.cpu.toFixed(2));
- this.cpuUsedPercent = this.cpuUtilizations[59];
+ this.cpuUtilizations = this.cpuUtilizations.slice(1)
+ this.cpuUtilizations.push(rsp.data.cpu.toFixed(2))
+ this.cpuUsedPercent = this.cpuUtilizations[59]
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.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.memUtilizations = this.memUtilizations.slice(1);
- this.memUtilizations.push(rsp.data.mem.usedPercent.toFixed(2));
- 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.memUsedPercent = rsp.data.mem.usedPercent.toFixed(2);
+ this.memUtilizations = this.memUtilizations.slice(1)
+ this.memUtilizations.push(rsp.data.mem.usedPercent.toFixed(2))
+ 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.memUsedPercent = rsp.data.mem.usedPercent.toFixed(2)
// 绠楀姏
- this.gpuUtilizations = this.gpuUtilizations.slice(1);
- this.gpuUtilizations.push(rsp.data.gpu.toFixed(2));
- this.gpuUsedPercent = this.gpuUtilizations[59];
+ this.gpuUtilizations = this.gpuUtilizations.slice(1)
+ this.gpuUtilizations.push(rsp.data.gpu.toFixed(2))
+ this.gpuUsedPercent = this.gpuUtilizations[59]
// 缃戠粶
- this.netReciveCount = this.netReciveCount.slice(1);
- this.netReciveCount.push(rsp.data.net.bytesRecv);
- this.netSendCount = this.netSendCount.slice(1);
- this.netSendCount.push(rsp.data.net.bytesSent);
+ this.netReciveCount = this.netReciveCount.slice(1)
+ this.netReciveCount.push(rsp.data.net.bytesRecv)
+ this.netSendCount = this.netSendCount.slice(1)
+ this.netSendCount.push(rsp.data.net.bytesSent)
- this.netRecive = this.netReciveCount[59];
- this.netSend = this.netSendCount[59];
- this.macAddr = rsp.data.net.mac;
+ this.netRecive = this.netReciveCount[59]
+ this.netSend = this.netSendCount[59]
+ this.macAddr = rsp.data.net.mac
if (rsp.data.net.addr.length) {
- this.ipAddr = rsp.data.net.addr[0].addr;
+ this.ipAddr = rsp.data.net.addr[0].addr
}
// 纾佺洏
- rsp.data.disk.sort(function (obj1, obj2) {
- var val1 = obj1.name;
- var val2 = obj2.name;
+ rsp.data.disk.sort(function(obj1, obj2) {
+ var val1 = obj1.name
+ var val2 = obj2.name
if (val1 < val2) {
- return -1;
+ return -1
} else if (val1 > val2) {
- return 1;
+ return 1
} else {
- return 0;
+ return 0
}
- });
+ })
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.push(d.readBytes);
- this.disks[d.name].writeBytes = this.disks[
- d.name
- ].writeBytes.slice(1);
- this.disks[d.name].writeBytes.push(d.writeBytes);
+ 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.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] = {}
+ 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 = rsp.data.disk;
}
- this.setChartData();
+ this.setChartData()
setTimeout(() => {
- this.getSystemState();
- }, 1000);
- });
+ this.getSystemState()
+ }, 1000)
+ })
},
isShow(authority) {
if (this.isAdmin) {
- return true;
+ return true
} else if (this.buttonAuthority.indexOf("," + authority + ",") > -1) {
- return true;
+ 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"),
- ];
+ return [this.$moment(array[0]).format("YYYY-MM-DD"), this.$moment(array[1]).format("YYYY-MM-DD")]
},
setActiveChartItem(item) {
- this.activeChartItem = item;
- this.eChartsObj.clear();
- this.setChartData();
+ this.activeChartItem = item
+ this.eChartsObj.clear()
+ this.setChartData()
},
initChart() {
- this.eChartsObj = echarts.init(this.$refs.graphs);
- this.getSystemState();
+ this.eChartsObj = echarts.init(this.$refs.graphs)
+ this.getSystemState()
},
setChartData() {
- let option = JSON.parse(JSON.stringify(this.eChartsBaseOpt));
+ let option = JSON.parse(JSON.stringify(this.eChartsBaseOpt))
switch (this.activeChartItem) {
case "cpu":
- this.yAxisMaxVal = this.cpuModel;
- option.title.text = "CPU";
- option.title.subtext = "%鍗犵敤鐜�";
- option.yAxis.max = 100;
- option.yAxis.min = 0;
- option.grid.borderColor = "#8aadd0";
- option.series[0].itemStyle.color = "#8aadd0";
- option.series[0].areaStyle.color = "#a8d4ff";
- option.series[0].data = this.cpuUtilizations;
+ this.yAxisMaxVal = this.cpuModel
+ option.title.text = "CPU"
+ option.title.subtext = "%鍗犵敤鐜�"
+ option.yAxis.max = 100
+ option.yAxis.min = 0
+ option.grid.borderColor = "#8aadd0"
+ option.series[0].itemStyle.color = "#8aadd0"
+ option.series[0].areaStyle.color = "#a8d4ff"
+ option.series[0].data = this.cpuUtilizations
- break;
+ break
case "mem":
- this.yAxisMaxVal = this.memTotal + "G";
- option.title.text = "鍐呭瓨";
- option.title.subtext = "鍐呭瓨浣跨敤閲�";
- option.yAxis.max = 100;
- option.yAxis.min = 0;
- option.grid.borderColor = "#ff9900";
- option.series[0].itemStyle.color = "#ff9900";
- option.series[0].areaStyle.color = "#f7bb88";
- option.series[0].data = this.memUtilizations;
- break;
+ this.yAxisMaxVal = this.memTotal + "G"
+ option.title.text = "鍐呭瓨"
+ option.title.subtext = "鍐呭瓨浣跨敤閲�"
+ option.yAxis.max = 100
+ option.yAxis.min = 0
+ option.grid.borderColor = "#ff9900"
+ option.series[0].itemStyle.color = "#ff9900"
+ option.series[0].areaStyle.color = "#f7bb88"
+ option.series[0].data = this.memUtilizations
+ break
case "gpu":
- this.yAxisMaxVal = "100%";
- option.title.text = "绠楀姏";
- option.title.subtext = "%浣跨敤鐜�";
- option.yAxis.max = 100;
- option.yAxis.min = 0;
- option.grid.borderColor = "#bc84d8";
- option.series[0].itemStyle.color = "#bc84d8";
- option.series[0].areaStyle.color = "#de9dff";
- option.series[0].data = this.gpuUtilizations;
- break;
+ this.yAxisMaxVal = "100%"
+ option.title.text = "绠楀姏"
+ option.title.subtext = "%浣跨敤鐜�"
+ option.yAxis.max = 100
+ option.yAxis.min = 0
+ option.grid.borderColor = "#bc84d8"
+ option.series[0].itemStyle.color = "#bc84d8"
+ option.series[0].areaStyle.color = "#de9dff"
+ option.series[0].data = this.gpuUtilizations
+ break
case "net":
- this.yAxisMaxVal = "";
- option.title.text = "缃戠粶";
- option.title.subtext = "缃戠粶璐熻浇";
- option.grid.borderColor = "#4696da";
- option.series[0].itemStyle.color = "#ffa16a";
- option.series[0].areaStyle.color = "#d68658";
- option.series[0].data = this.netReciveCount;
+ this.yAxisMaxVal = ""
+ option.title.text = "缃戠粶"
+ option.title.subtext = "缃戠粶璐熻浇"
+ option.grid.borderColor = "#4696da"
+ option.series[0].itemStyle.color = "#ffa16a"
+ option.series[0].areaStyle.color = "#d68658"
+ option.series[0].data = this.netReciveCount
option.series.push({
type: "line",
symbol: "none",
data: this.netSendCount,
// smooth: true,
itemStyle: {
- color: "#4696da",
+ color: "#4696da"
},
areaStyle: {
- color: "#4eacfd",
- },
- });
- break;
+ color: "#4eacfd"
+ }
+ })
+ break
default:
if (this.activeChartItem.indexOf("disk|") == 0) {
- let dev = this.activeChartItem.split("|")[1];
+ let dev = this.activeChartItem.split("|")[1]
- this.yAxisMaxVal = "";
- option.title.text = "纾佺洏";
- option.title.subtext = "纾佺洏浼犺緭閫熺巼";
- option.grid.borderColor = "#33cc66";
- option.series[0].itemStyle.color = "#4696da";
- option.series[0].areaStyle.color = "#4eacfd";
- option.series[0].data = this.disks[dev].readBytes;
+ this.yAxisMaxVal = ""
+ option.title.text = "纾佺洏"
+ option.title.subtext = "纾佺洏浼犺緭閫熺巼"
+ option.grid.borderColor = "#33cc66"
+ option.series[0].itemStyle.color = "#4696da"
+ option.series[0].areaStyle.color = "#4eacfd"
+ option.series[0].data = this.disks[dev].readBytes
option.series.push({
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];
- this.ioWrite = this.disks[dev].writeBytes[59];
+ this.activeDisk = this.disks[dev].info
+ this.ioRead = this.disks[dev].readBytes[59]
+ this.ioWrite = this.disks[dev].writeBytes[59]
}
- break;
+ break
}
- this.eChartsObj.setOption(option);
- },
- },
-};
+ this.eChartsObj.setOption(option)
+ }
+ }
+}
</script>
<style lang="scss">
.s-system-monitor {
@@ -699,6 +656,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,17 +671,13 @@
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 {
+ .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
background: #f8f8ff;
}
@@ -732,6 +691,7 @@
padding: 0 !important;
height: 40px;
line-height: 40px;
+ text-align: center;
}
}
.el-tabs--top {
@@ -812,17 +772,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 +854,8 @@
}
.column-right {
- //overflow: hidden;
- overflow-y: hidden;
+ background-color: #fff;
+ overflow-y: auto;
overflow-x: auto;
}
@@ -906,8 +866,8 @@
}
.resize-bar {
- width: 285px;
-height: 600px;
+ width: 285px;
+ // height: 600px;
}
/* 鎷栨嫿绾� */
@@ -922,7 +882,7 @@
}
.ax_default {
- width: 270px;
+ width: 270px;
height: 70px;
padding: 10px;
font-size: 14px;
@@ -932,15 +892,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 +914,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 +949,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