<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">
|
<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>
|
</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>
|
</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>
|
<el-table-column prop="gpu" 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">
|
<div class="column-left" ref="left">
|
<div class="resize-bar">
|
<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', 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', 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', 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
|
v-for="(v, k) in disks"
|
:key="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>
|
|
<div class="resize-line"></div>
|
</div>
|
|
<div class="column-right">
|
<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>
|
</div>
|
<div class="ax_default_label">
|
<b>主频</b>
|
<p>{{cpuMaxRate}}Ghz</p>
|
</div>
|
<div class="ax_default_label">
|
<b>插槽</b>
|
<p>{{cpuCount}}</p>
|
</div>
|
<div class="ax_default_label">
|
<b>内核</b>
|
<p>{{cpuCore}}</p>
|
</div>
|
</div>
|
|
<div v-show="activeChartItem == 'mem'">
|
<div class="ax_default_label">
|
<b>使用中</b>
|
<p>{{memUsed}}G</p>
|
</div>
|
<div class="ax_default_label">
|
<b>已缓存</b>
|
<p>{{memCache}}G</p>
|
</div>
|
<div class="ax_default_label">
|
<b>可用</b>
|
<p>{{memFree}}G</p>
|
</div>
|
</div>
|
|
<div v-show="activeChartItem == 'net'">
|
<div class="ax_default_label">
|
<b>接收</b>
|
<p>{{netRecive |byteConver}}</p>
|
</div>
|
<div class="ax_default_label">
|
<b>发送</b>
|
<p>{{netSend |byteConver}}</p>
|
</div>
|
<div class="ax_default_label">
|
<b>IP地址</b>
|
<p>{{ipAddr}}</p>
|
</div>
|
<div class="ax_default_label" style="margin-left: 19px;">
|
<b>MAC地址</b>
|
<p>{{macAddr}}</p>
|
</div>
|
</div>
|
|
<div v-show="isDisk">
|
<div class="ax_default_label">
|
<b>容量</b>
|
<p>{{activeDisk.total |byteConver}}</p>
|
</div>
|
<div class="ax_default_label">
|
<b>已用</b>
|
<p>{{activeDisk.used |byteConver}}</p>
|
</div>
|
<div class="ax_default_label">
|
<b>可用</b>
|
<p>{{activeDisk.free |byteConver}}</p>
|
</div>
|
<div class="ax_default_label">
|
<b>读取速度</b>
|
<p>{{ioRead | byteConver}}</p>
|
</div>
|
<div class="ax_default_label">
|
<b>写入速度</b>
|
<p>{{ioWrite | byteConver}}</p>
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
|
<el-tab-pane label="服务" name="service">
|
<el-table :data="vasystemServicesData">
|
<el-table-column label="名称" show-overflow-tooltip>
|
<template slot-scope="scope">
|
<span>{{ scope.row.name}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="状态" prop="status">
|
<template slot-scope="scope">
|
<span>{{ scope.row.pid == 0 ? "未启动" : "已启动" }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="描述" prop="desc"></el-table-column>
|
</el-table>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</template>
|
|
<script>
|
import echarts from "echarts";
|
import { showSystemStates, showService, showProcesses } from "../api/api"
|
|
export default {
|
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'
|
)
|
}
|
return false;
|
}
|
},
|
filters: {
|
byteConver(limit) {
|
var size = "";
|
if (limit < 1024) { //如果小于0.1KB转化成B
|
size = limit + "B";
|
} else if (limit < 1024 * 1024) {//如果小于0.1MB转化成KB
|
size = (limit / 1024).toFixed(2) + "KB";
|
} else if (limit < 1024 * 1024 * 1024) { //如果小于0.1GB转化成MB
|
size = (limit / (1024 * 1024)).toFixed(2) + "MB";
|
} else if (limit < 1024 * 1024 * 1024 * 1024) { //其他转化成GB
|
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 dec = sizestr.substr(len + 1, 2);
|
if (dec == "00") {//当小数点后为00时 去掉小数部分
|
return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
|
}
|
|
return sizestr;
|
}
|
},
|
data() {
|
return {
|
activeName: "proc",
|
activeChartItem: "cpu",
|
yAxisMaxVal: "100%",
|
algoProcessData: [],
|
appProcessData: [],
|
vasystemServicesData: [],
|
eChartsObj: {},
|
eChartsBaseOpt: {
|
title: {
|
top: 10,
|
},
|
animation: false,
|
grid: {
|
show: true,
|
left: '1%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true,
|
borderWidth: 2,
|
borderColor: '#000'
|
},
|
xAxis: {
|
type: "category",
|
boundaryGap: false,
|
data: Array.from({ length: 60 }, () => 0),
|
// show: false,
|
axisLabel: {
|
show: false
|
},
|
axisTick: {
|
show: false
|
},
|
splitLine: {
|
show: true,
|
interval: 5,
|
lineStyle: {
|
width: 1,
|
type: 'solid'
|
}
|
}
|
},
|
yAxis: {
|
type: 'value',
|
// show: false,
|
axisLine: {
|
show: false
|
},
|
axisLabel: {
|
show: false
|
},
|
axisTick: {
|
show: false
|
}
|
},
|
series: [
|
{
|
type: 'line',
|
symbol: 'none',
|
data: Array.from({ length: 60 }, () => 0),
|
// smooth: true,
|
itemStyle: {},
|
areaStyle: {}
|
}
|
]
|
},
|
cpuUtilizations: Array.from({ length: 60 }, () => 0),
|
memUtilizations: Array.from({ length: 60 }, () => 0),
|
gpuUtilizations: Array.from({ length: 60 }, () => 0),
|
diskIOWriteCount: Array.from({ length: 60 }, () => 0),
|
diskIOReadCount: Array.from({ length: 60 }, () => 0),
|
netReciveCount: Array.from({ length: 60 }, () => 0),
|
netSendCount: Array.from({ length: 60 }, () => 0),
|
cpuModel: "",
|
cpuUsedPercent: 0,
|
cpuMaxRate: 0,
|
cpuCount: 0,
|
cpuCore: 0,
|
memTotal: 0,
|
memUsed: 0,
|
memFree: 0,
|
memCache: 0,
|
memUsedPercent: 0,
|
netSend: 0,
|
netRecive: 0,
|
ipAddr: "",
|
macAddr: "",
|
gpuUsedPercent: 0,
|
disks: {},
|
activeDisk: {},
|
ioRead: 0,
|
ioWrite: 0
|
};
|
},
|
mounted() {
|
this.dataCollection();
|
this.initChart();
|
},
|
methods: {
|
// 循环采集所有数据
|
dataCollection() {
|
this.serviceCollect();
|
this.procCollect();
|
setTimeout(() => {
|
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
|
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) {
|
// 处理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;
|
} else {
|
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);
|
} 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();
|
setTimeout(() => {
|
this.getSystemState();
|
}, 1000)
|
})
|
},
|
isShow(authority) {
|
if (this.isAdmin) {
|
return true
|
} 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")
|
];
|
},
|
setActiveChartItem(item) {
|
this.activeChartItem = item;
|
this.eChartsObj.clear();
|
this.setChartData();
|
},
|
initChart() {
|
this.eChartsObj = echarts.init(this.$refs.graphs);
|
this.getSystemState();
|
},
|
setChartData() {
|
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;
|
|
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',
|
data: this.netSendCount,
|
// smooth: true,
|
itemStyle: {
|
color: "#4696da"
|
},
|
areaStyle: {
|
color: "#4eacfd"
|
}
|
})
|
break;
|
default:
|
if (this.activeChartItem.indexOf("disk|") == 0) {
|
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;
|
option.series.push({
|
type: 'line',
|
symbol: 'none',
|
data: this.disks[dev].writeBytes,
|
// smooth: true,
|
itemStyle: {
|
color: "#33ff66"
|
},
|
areaStyle: {
|
color: "#33cc66"
|
}
|
})
|
|
this.activeDisk = this.disks[dev].info;
|
this.ioRead = this.disks[dev].readBytes[59];
|
this.ioWrite = this.disks[dev].writeBytes[59];
|
}
|
break;
|
}
|
|
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;
|
.form-title {
|
text-align: left;
|
font-size: 14px;
|
}
|
|
.graphs-chart {
|
height: 500px;
|
width: 900px;
|
margin-left: 15px;
|
// border: 1px solid rgb(69, 69, 172);
|
}
|
|
.column-left {
|
background-color: #fff;
|
position: relative;
|
float: left;
|
}
|
|
.column-right {
|
//overflow: hidden;
|
overflow-y: hidden;
|
overflow-x: auto;
|
}
|
|
.max-val {
|
position: absolute;
|
right: 4%;
|
top: 8%;
|
}
|
|
.resize-bar {
|
width: 238px;
|
height: 610px;
|
}
|
|
/* 拖拽线 */
|
.resize-line {
|
position: absolute;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
border-right: 1px solid #efefef;
|
border-left: 1px solid #e0e0e0;
|
pointer-events: none;
|
}
|
|
.ax_default {
|
width: 207px;
|
height: 45px;
|
padding: 10px;
|
font-size: 15px;
|
margin: 5px;
|
cursor: pointer;
|
}
|
|
.selected {
|
background: inherit;
|
background-color: #cde8ff;
|
border: none;
|
border-radius: 8px;
|
}
|
|
.ax_default_pic {
|
position: absolute;
|
border-width: 0px;
|
width: 66px;
|
height: 45px;
|
box-sizing: border-box;
|
border: 1px solid rgba(255, 153, 0, 1);
|
background-repeat: no-repeat;
|
background-position: bottom;
|
}
|
|
.color-cpu {
|
border-color: #8aadd0;
|
background-image: url("/images/systemMonitor/cpu.png");
|
}
|
|
.color-mem {
|
border-color: #ff9900;
|
background-image: url("/images/systemMonitor/mem.png");
|
}
|
|
.color-gpu {
|
border-color: #bc84d8;
|
background-image: url("/images/systemMonitor/gpu.png");
|
}
|
|
.color-net {
|
border-color: #4696da;
|
background-image: url("/images/systemMonitor/net.png");
|
}
|
|
.color-disk {
|
border-color: #33cc66;
|
background-image: url("/images/systemMonitor/disk.png");
|
}
|
|
.ax_default_text {
|
position: relative;
|
text-align: left;
|
margin-left: 72px;
|
}
|
|
.ax_default_subtext {
|
font-size: 13px;
|
margin-left: 72px;
|
line-height: 35px;
|
color: #4e4d4d;
|
text-align: left;
|
}
|
|
.ax_default_label {
|
width: 120px;
|
font-size: 15px;
|
display: inline-block;
|
float: left;
|
|
b {
|
font-family: "思源黑体";
|
font-weight: 400;
|
font-style: normal;
|
color: #a1a1a1;
|
}
|
|
p {
|
margin-top: 5px;
|
}
|
}
|
.ax_label_flex {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
}
|
.s-system-monitor-breadcrumb {
|
height: 5%;
|
box-sizing: border-box;
|
border: 1px solid #e4e7ed;
|
box-shadow: #e4e7ed 0px 0px 9px inset;
|
border-radius: 5px;
|
}
|
|
.el-tabs--border-card {
|
border: 0px solid #dcdfe6;
|
-webkit-box-shadow: none;
|
box-shadow: none;
|
.el-tabs__header {
|
border: 0px solid #dcdfe6;
|
.el-tabs__item {
|
padding: 5px 50px;
|
height: 50px;
|
font-family: PingFangSC-Regular;
|
font-size: 15px;
|
color: #222222;
|
text-align: center;
|
border: 0px solid transparent;
|
}
|
.el-tabs__item:nth-child(2) {
|
padding-left: 50px !important;
|
}
|
.el-tabs__item:last-child {
|
padding-right: 50px !important;
|
}
|
.el-tabs__item.is-active {
|
color: #3d68e1;
|
font-weight: bold;
|
// border-right-color: #fff;
|
// border-left-color: #fff;
|
}
|
.el-tabs__item:not(.is-disabled):hover {
|
color: #3d68e1;
|
}
|
}
|
}
|
|
.el-tabs__content {
|
height: calc(100% - 64px);
|
width: calc(100% - 20px);
|
box-sizing: border-box;
|
overflow-y: auto;
|
padding: 10px 10px !important;
|
.el-tab-pane {
|
width: 100%;
|
.s-title {
|
text-align: left;
|
padding: 15px 0px;
|
font-size: 16px;
|
}
|
}
|
}
|
|
.s-table {
|
border: 1px solid #e8e8e9;
|
margin-top: 40px;
|
}
|
|
.ui-top-title {
|
padding-bottom: 10px;
|
/* border-bottom: 1px solid #ebebeb; */
|
position: relative;
|
text-align: left;
|
padding-left: 15px;
|
font-size: 16px;
|
font-weight: bold;
|
}
|
|
.ui-top-title:before {
|
content: " ";
|
border-left: 4px solid #f53d3d;
|
display: inline-block;
|
height: 16px;
|
position: absolute;
|
top: 50%;
|
left: 0;
|
margin-top: -13px;
|
}
|
|
.el-button--text {
|
color: #3d68e1;
|
text-decoration: underline;
|
}
|
}
|
|
#systemMonitor {
|
.el-tabs__header {
|
border: 0px solid #dcdfe6;
|
.el-tabs__item {
|
padding: 5px 50px;
|
height: 50px;
|
font-family: PingFangSC-Regular;
|
font-size: 14px;
|
color: #222222;
|
text-align: center;
|
border: 0px solid transparent;
|
}
|
.el-tabs__item:nth-child(2) {
|
padding-left: 50px;
|
}
|
.el-tabs__item:last-child {
|
padding-right: 50px;
|
}
|
.el-tabs__item.is-active {
|
color: #ff7733;
|
font-weight: bold;
|
// border-right-color: #fff;
|
// border-left-color: #fff;
|
}
|
.el-tabs__item:not(.is-disabled):hover {
|
color: #ff7733;
|
}
|
}
|
.el-tabs__active-bar {
|
background-color: #ff7733;
|
}
|
.el-tabs__content {
|
padding-left: 15px !important;
|
}
|
}
|
</style>
|
