<template>
|
<div class="s-system-monitor">
|
<el-tabs id="systemMonitor" v-model="activeName">
|
<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 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>
|
</template>
|
</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>
|
</div>
|
|
<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>
|
</div>
|
</el-tab-pane>
|
|
<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_pic color-cpu"></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_pic color-mem"></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_pic color-gpu"></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_pic color-net"></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)"
|
>
|
<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>
|
|
<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 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">
|
<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">
|
<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: "top",
|
activeChartItem: "cpu",
|
yAxisMaxVal: "100%",
|
algoProcessData: [],
|
appProcessData: [],
|
vasystemServicesData: [],
|
eChartsObj: {},
|
activeTab: 0,
|
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",
|
color: "rgb(242,242,242)"
|
}
|
}
|
},
|
yAxis: {
|
type: "value",
|
// show: false,
|
axisLine: {
|
show: false
|
},
|
axisLabel: {
|
show: false
|
},
|
axisTick: {
|
show: false
|
},
|
splitLine: {
|
lineStyle: {
|
color: "rgb(242,242,242)"
|
}
|
}
|
},
|
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;
|
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 {
|
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 {
|
background-color: #fff;
|
overflow-y: auto;
|
overflow-x: auto;
|
}
|
|
.max-val {
|
position: absolute;
|
right: 4%;
|
top: 8%;
|
}
|
|
.resize-bar {
|
width: 285px;
|
// height: 600px;
|
}
|
|
/* 拖拽线 */
|
.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: 270px;
|
height: 70px;
|
padding: 10px;
|
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: #4e94ff;
|
border: none;
|
border-radius: 8px;
|
color: #fff;
|
}
|
|
.ax_default_pic {
|
// position: absolute;
|
border-width: 0px;
|
width: 66px;
|
height: 50px;
|
box-sizing: border-box;
|
border: 1px solid rgba(255, 153, 0, 1);
|
background-color: #fff;
|
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: right;
|
|
font-size: 16px;
|
line-height: 22px;
|
font-weight: bold;
|
}
|
|
.ax_default_subtext {
|
font-size: 14px;
|
line-height: 20px;
|
text-align: right;
|
}
|
|
.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>
|
