From c0c034b3ef0fdf0fd9c802d5984dbd717db6817a Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 06 九月 2023 17:54:55 +0800
Subject: [PATCH] 定制桌面.
---
src/pages/systemMonitor/index/App.vue | 847 ++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 553 insertions(+), 294 deletions(-)
diff --git a/src/pages/systemMonitor/index/App.vue b/src/pages/systemMonitor/index/App.vue
index 88437be..8e2fb1d 100644
--- a/src/pages/systemMonitor/index/App.vue
+++ b/src/pages/systemMonitor/index/App.vue
@@ -1,94 +1,148 @@
<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-table-column label="CPU" width="180">
+ <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="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">姝ｅ湪杩涜{{ appProcessData.length }}涓簲鐢ㄥ崟鍏�</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 label="鍚嶇О" width="231">
<template slot-scope="scope">
- <span>{{ scope.row.cpu.toFixed(2)}} %</span>
+ <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>
</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
+ prop="disk"
+ label="纭洏"
+ width="150"
+ ></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>
- <el-table-column prop="mem" label="鍐呭瓨"></el-table-column>
- <el-table-column prop="disk" label="纭洏"></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;font-size: 16px;'"
+ stripe
+ class="tableBox"
+ >
+ <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 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': '']"
- @click="setActiveChartItem('cpu')"
- >
+ <div :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': '']"
- @click="setActiveChartItem('mem')"
- >
+ <div :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': '']"
- @click="setActiveChartItem('gpu')"
- >
+ <div :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': '']"
- @click="setActiveChartItem('net')"
- >
+ <div :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 +150,104 @@
</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-table :data="vasystemServicesData">
+ <el-tab-pane name="service" v-if="false">
+ <span slot="label">
+ <span class="iconfont icon"></span>
+ 鏈嶅姟</span
+ >
+ <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">
@@ -197,76 +263,77 @@
</template>
<script>
-import echarts from "echarts";
+import echarts from "echarts"
import { showSystemStates, showService, showProcesses } from "../api/api"
export default {
- components: {
- },
+ components: {},
computed: {
isDisk() {
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 = "";
- if (limit < 1024) { //濡傛灉灏忎簬0.1KB杞寲鎴怋
- size = limit + "B";
- } else if (limit < 1024 * 1024) {//濡傛灉灏忎簬0.1MB杞寲鎴怟B
- size = (limit / 1024).toFixed(2) + "KB";
- } else if (limit < 1024 * 1024 * 1024) { //濡傛灉灏忎簬0.1GB杞寲鎴怣B
- size = (limit / (1024 * 1024)).toFixed(2) + "MB";
- } else if (limit < 1024 * 1024 * 1024 * 1024) { //鍏朵粬杞寲鎴怗B
- size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB";
+ var size = ""
+ if (limit < 1024) {
+ //濡傛灉灏忎簬0.1KB杞寲鎴怋
+ size = limit + "B"
+ } else if (limit < 1024 * 1024) {
+ //濡傛灉灏忎簬0.1MB杞寲鎴怟B
+ size = (limit / 1024).toFixed(2) + "KB"
+ } else if (limit < 1024 * 1024 * 1024) {
+ //濡傛灉灏忎簬0.1GB杞寲鎴怣B
+ size = (limit / (1024 * 1024)).toFixed(2) + "MB"
+ } 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";
+ size = (limit / (1024 * 1024 * 1024 * 1024)).toFixed(2) + "TB"
}
- 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);
+ 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;
+ return sizestr
}
},
data() {
return {
- activeName: "proc",
+ activeName: "top",
activeChartItem: "cpu",
yAxisMaxVal: "100%",
algoProcessData: [],
appProcessData: [],
vasystemServicesData: [],
eChartsObj: {},
+ activeTab: 0,
eChartsBaseOpt: {
title: {
- top: 10,
+ top: 10
},
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",
@@ -284,12 +351,13 @@
interval: 5,
lineStyle: {
width: 1,
- type: 'solid'
+ type: "solid",
+ color: "rgb(242,242,242)"
}
}
},
yAxis: {
- type: 'value',
+ type: "value",
// show: false,
axisLine: {
show: false
@@ -299,12 +367,17 @@
},
axisTick: {
show: false
+ },
+ splitLine: {
+ lineStyle: {
+ color: "rgb(242,242,242)"
+ }
}
},
series: [
{
- type: 'line',
- symbol: 'none',
+ type: "line",
+ symbol: "none",
data: Array.from({ length: 60 }, () => 0),
// smooth: true,
itemStyle: {},
@@ -338,25 +411,95 @@
activeDisk: {},
ioRead: 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();
+ this.dataCollection()
}, 5000)
},
serviceCollect() {
- showService().then(rsp => {
+ 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
+
+ if (rsp.data.apps) this.appProcessData = rsp.data.apps
+ }
+ })
+ .catch(() => {})
+ },
+ getSystemState() {
+ showSystemStates().then((rsp) => {
if (rsp && rsp.success) {
- rsp.data.sort(function (obj1, obj2) {
+ // 澶勭悊cpu
+ 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.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.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
+ if (rsp.data.net.addr.length) {
+ this.ipAddr = rsp.data.net.addr[0].addr
+ }
+
+ // 纾佺洏
+ rsp.data.disk.sort(function(obj1, obj2) {
var val1 = obj1.name
var val2 = obj2.name
if (val1 < val2) {
@@ -367,175 +510,99 @@
return 0
}
})
- this.vasystemServicesData = rsp.data;
- }
- }).catch(() => { })
- },
- procCollect() {
- showProcesses().then(rsp => {
- if (rsp && rsp.success) {
- if (rsp.data.algos)
- this.algoProcessData = rsp.data.algos;
-
- if (rsp.data.apps)
- this.appProcessData = rsp.data.apps;
- }
-
- }).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];
- 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.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.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;
- if (rsp.data.net.addr.length) {
- this.ipAddr = rsp.data.net.addr[0].addr;
- }
-
- // 纾佺洏
- rsp.data.disk.sort(function (obj1, obj2) {
- var val1 = obj1.name;
- var val2 = obj2.name;
- if (val1 < val2) {
- return -1;
- } else if (val1 > val2) {
- return 1;
+ 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)
} else {
- return 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)
}
})
-
- 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);
- } 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 = rsp.data.disk;
}
-
- this.setChartData();
+ this.setChartData()
setTimeout(() => {
- this.getSystemState();
+ this.getSystemState()
}, 1000)
})
},
isShow(authority) {
if (this.isAdmin) {
return true
- } else if (
- this.buttonAuthority.indexOf(',' + authority + ',') > -1
- ) {
+ } else if (this.buttonAuthority.indexOf("," + authority + ",") > -1) {
return true
} else {
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;
+ 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
- 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;
- 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;
- 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;
+ 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
+ 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
+ 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
option.series.push({
- type: 'line',
- symbol: 'none',
+ type: "line",
+ symbol: "none",
data: this.netSendCount,
// smooth: true,
itemStyle: {
@@ -545,21 +612,21 @@
color: "#4eacfd"
}
})
- break;
+ 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',
+ type: "line",
+ symbol: "none",
data: this.disks[dev].writeBytes,
// smooth: true,
itemStyle: {
@@ -570,30 +637,207 @@
}
})
- 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 {
width: 100% !important;
min-width: 759px;
box-sizing: border-box;
- padding: 10px;
- // background-color: #e9ebf2;
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;
+ }
+ .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;
+ text-align: center;
+ }
+ }
+ .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 {
@@ -610,8 +854,8 @@
}
.column-right {
- //overflow: hidden;
- overflow-y: hidden;
+ background-color: #fff;
+ overflow-y: auto;
overflow-x: auto;
}
@@ -622,8 +866,8 @@
}
.resize-bar {
- width: 238px;
- height: 610px;
+ width: 285px;
+ // height: 600px;
}
/* 鎷栨嫿绾� */
@@ -638,28 +882,42 @@
}
.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;
+ color: #333333;
}
-
+ .ax_default:hover {
+ color: #333333;
+ background: #f8f8ff;
+ }
.selected {
+ // background: inherit;
+ // background-color: #cde8ff;
+ // border: none;
+ // border-radius: 8px;
background: inherit;
- background-color: #cde8ff;
+ 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;
}
@@ -691,16 +949,17 @@
.ax_default_text {
position: relative;
- text-align: left;
- margin-left: 72px;
+ text-align: right;
+
+ font-size: 16px;
+ line-height: 22px;
+ font-weight: bold;
}
.ax_default_subtext {
- font-size: 13px;
- margin-left: 72px;
- line-height: 35px;
- color: #4e4d4d;
- text-align: left;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: right;
}
.ax_default_label {
--
Gitblit v1.8.0