toesbieya
6 years ago
parent
255b808a9d
commit
14404fa6a4
@ -1,129 +0,0 @@ |
||||
<template> |
||||
<el-card class="chart-card"> |
||||
<div slot="header"> |
||||
<span><b>cpu监控</b></span> |
||||
|
||||
<span class="title-span"> |
||||
当前使用率： |
||||
<count-to |
||||
:decimals="2" |
||||
:end-val="data.utilizationRate" |
||||
:start-val="data.lastUtilizationRate" |
||||
suffix="%" |
||||
/> |
||||
</span> |
||||
|
||||
<span class="title-span"> |
||||
峰值： |
||||
<count-to |
||||
:decimals="2" |
||||
:end-val="data.maxUtilizationRate" |
||||
:start-val="data.lastMaxUtilizationRate" |
||||
suffix="%" |
||||
/> |
||||
</span> |
||||
</div> |
||||
|
||||
<div class="line-chart"/> |
||||
</el-card> |
||||
</template> |
||||
|
||||
<script> |
||||
import {logic, resize} from "@/mixins/chart" |
||||
import CountTo from 'vue-count-to' |
||||
|
||||
export default { |
||||
name: "Cpu", |
||||
|
||||
mixins: [resize, logic], |
||||
|
||||
components: {CountTo}, |
||||
|
||||
props: { |
||||
data: Object |
||||
}, |
||||
|
||||
data() { |
||||
return { |
||||
options: { |
||||
xAxis: { |
||||
data: [], |
||||
type: 'category', |
||||
axisTick: { |
||||
show: false |
||||
} |
||||
}, |
||||
grid: { |
||||
left: 10, |
||||
right: 10, |
||||
bottom: 20, |
||||
top: 30, |
||||
containLabel: true |
||||
}, |
||||
tooltip: { |
||||
trigger: 'axis', |
||||
axisPointer: { |
||||
type: 'cross' |
||||
}, |
||||
padding: [5, 10] |
||||
}, |
||||
yAxis: { |
||||
name: '%', |
||||
axisTick: { |
||||
show: false |
||||
} |
||||
}, |
||||
dataZoom: [ |
||||
{ |
||||
start: 30, |
||||
end: 70, |
||||
} |
||||
], |
||||
series: [{ |
||||
name: 'cpu使用率', |
||||
itemStyle: { |
||||
normal: { |
||||
color: '#FF005A', |
||||
lineStyle: { |
||||
color: '#FF005A', |
||||
width: 2 |
||||
} |
||||
} |
||||
}, |
||||
smooth: true, |
||||
type: 'line', |
||||
areaStyle: {}, |
||||
data: [] |
||||
}] |
||||
} |
||||
} |
||||
}, |
||||
|
||||
watch: { |
||||
data: { |
||||
deep: true, |
||||
handler({xData, vData}) { |
||||
if (!xData || !vData) return |
||||
this.setOptions({xData, vData}) |
||||
} |
||||
} |
||||
}, |
||||
|
||||
methods: { |
||||
init() { |
||||
this.chart.setOption(this.options) |
||||
}, |
||||
|
||||
$_getChartDom() { |
||||
return this.$el.querySelector('.line-chart') |
||||
}, |
||||
|
||||
setOptions({xData, vData} = {}) { |
||||
this.chart.setOption({ |
||||
xAxis: {data: xData}, |
||||
series: [{data: vData}] |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -1,128 +0,0 @@ |
||||
<template> |
||||
<el-card class="chart-card"> |
||||
<div slot="header"> |
||||
<span><b>JVM监控</b></span> |
||||
<span class="title-span">{{data.used|numberFormatter}} / {{data.total|numberFormatter}}</span> |
||||
<span class="title-span"> |
||||
当前使用率： |
||||
<count-to |
||||
:decimals="2" |
||||
:end-val="data.utilizationRate" |
||||
:start-val="data.lastUtilizationRate" |
||||
suffix="%" |
||||
/> |
||||
</span> |
||||
<span class="title-span"> |
||||
峰值： |
||||
<count-to |
||||
:decimals="2" |
||||
:end-val="data.maxUtilizationRate" |
||||
:start-val="data.lastMaxUtilizationRate" |
||||
suffix="%" |
||||
/> |
||||
</span> |
||||
</div> |
||||
|
||||
<div class="line-chart"/> |
||||
</el-card> |
||||
</template> |
||||
|
||||
<script> |
||||
import {logic, resize} from "@/mixins/chart" |
||||
import CountTo from 'vue-count-to' |
||||
|
||||
export default { |
||||
name: "Jvm", |
||||
|
||||
mixins: [resize, logic], |
||||
|
||||
components: {CountTo}, |
||||
|
||||
props: { |
||||
data: Object |
||||
}, |
||||
|
||||
data() { |
||||
return { |
||||
options: { |
||||
xAxis: { |
||||
data: [], |
||||
type: 'category', |
||||
axisTick: { |
||||
show: false |
||||
} |
||||
}, |
||||
grid: { |
||||
left: 10, |
||||
right: 10, |
||||
bottom: 20, |
||||
top: 30, |
||||
containLabel: true |
||||
}, |
||||
tooltip: { |
||||
trigger: 'axis', |
||||
axisPointer: { |
||||
type: 'cross' |
||||
}, |
||||
padding: [5, 10] |
||||
}, |
||||
yAxis: { |
||||
name: '%', |
||||
axisTick: { |
||||
show: false |
||||
} |
||||
}, |
||||
dataZoom: [ |
||||
{ |
||||
start: 30, |
||||
end: 70, |
||||
} |
||||
], |
||||
series: [{ |
||||
name: '占用率', |
||||
itemStyle: { |
||||
normal: { |
||||
color: '#FF005A', |
||||
lineStyle: { |
||||
color: '#FF005A', |
||||
width: 2 |
||||
} |
||||
} |
||||
}, |
||||
smooth: true, |
||||
type: 'line', |
||||
areaStyle: {}, |
||||
data: [] |
||||
}] |
||||
} |
||||
} |
||||
}, |
||||
|
||||
watch: { |
||||
data: { |
||||
deep: true, |
||||
handler({xData, vData}) { |
||||
if (!xData || !vData) return |
||||
this.setOptions({xData, vData}) |
||||
} |
||||
} |
||||
}, |
||||
|
||||
methods: { |
||||
init() { |
||||
this.chart.setOption(this.options) |
||||
}, |
||||
|
||||
$_getChartDom() { |
||||
return this.$el.querySelector('.line-chart') |
||||
}, |
||||
|
||||
setOptions({xData, vData} = {}) { |
||||
this.chart.setOption({ |
||||
xAxis: {data: xData}, |
||||
series: [{data: vData}] |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -1,128 +0,0 @@ |
||||
<template> |
||||
<el-card class="chart-card"> |
||||
<div slot="header"> |
||||
<span><b>内存监控</b></span> |
||||
<span class="title-span">{{data.used|numberFormatter}} / {{data.total|numberFormatter}}</span> |
||||
<span class="title-span"> |
||||
当前使用率： |
||||
<count-to |
||||
:decimals="2" |
||||
:end-val="data.utilizationRate" |
||||
:start-val="data.lastUtilizationRate" |
||||
suffix="%" |
||||
/> |
||||
</span> |
||||
<span class="title-span"> |
||||
峰值： |
||||
<count-to |
||||
:decimals="2" |
||||
:end-val="data.maxUtilizationRate" |
||||
:start-val="data.lastMaxUtilizationRate" |
||||
suffix="%" |
||||
/> |
||||
</span> |
||||
</div> |
||||
|
||||
<div class="line-chart"/> |
||||
</el-card> |
||||
</template> |
||||
|
||||
<script> |
||||
import {logic, resize} from "@/mixins/chart" |
||||
import CountTo from 'vue-count-to' |
||||
|
||||
export default { |
||||
name: "Memory", |
||||
|
||||
mixins: [resize, logic], |
||||
|
||||
components: {CountTo}, |
||||
|
||||
props: { |
||||
data: Object |
||||
}, |
||||
|
||||
data() { |
||||
return { |
||||
options: { |
||||
xAxis: { |
||||
data: [], |
||||
type: 'category', |
||||
axisTick: { |
||||
show: false |
||||
} |
||||
}, |
||||
grid: { |
||||
left: 10, |
||||
right: 10, |
||||
bottom: 20, |
||||
top: 30, |
||||
containLabel: true |
||||
}, |
||||
tooltip: { |
||||
trigger: 'axis', |
||||
axisPointer: { |
||||
type: 'cross' |
||||
}, |
||||
padding: [5, 10] |
||||
}, |
||||
yAxis: { |
||||
name: '%', |
||||
axisTick: { |
||||
show: false |
||||
} |
||||
}, |
||||
dataZoom: [ |
||||
{ |
||||
start: 30, |
||||
end: 70, |
||||
} |
||||
], |
||||
series: [{ |
||||
name: '占用率', |
||||
itemStyle: { |
||||
normal: { |
||||
color: '#FF005A', |
||||
lineStyle: { |
||||
color: '#FF005A', |
||||
width: 2 |
||||
} |
||||
} |
||||
}, |
||||
smooth: true, |
||||
type: 'line', |
||||
areaStyle: {}, |
||||
data: [] |
||||
}] |
||||
} |
||||
} |
||||
}, |
||||
|
||||
watch: { |
||||
data: { |
||||
deep: true, |
||||
handler({xData, vData}) { |
||||
if (!xData || !vData) return |
||||
this.setOptions({xData, vData}) |
||||
} |
||||
} |
||||
}, |
||||
|
||||
methods: { |
||||
init() { |
||||
this.chart.setOption(this.options) |
||||
}, |
||||
|
||||
$_getChartDom() { |
||||
return this.$el.querySelector('.line-chart') |
||||
}, |
||||
|
||||
setOptions({xData, vData} = {}) { |
||||
this.chart.setOption({ |
||||
xAxis: {data: xData}, |
||||
series: [{data: vData}] |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -1,172 +0,0 @@ |
||||
<template> |
||||
<div> |
||||
<div class="tip-row"> |
||||
<span>启动时间：{{operatingInfo.bootedTime}}</span> |
||||
<span style="margin-left: 20px">运行时间：{{operatingInfo.upTime|timePass}}</span> |
||||
</div> |
||||
|
||||
<cpu-info :data="cpuInfo"/> |
||||
|
||||
<el-row :gutter="40" style="margin-top: 32px"> |
||||
<el-col :span="12"> |
||||
<memory-info :data="memoryInfo"/> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<jvm-info :data="jvmInfo"/> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import {getMonitorInfo} from "@/api/system/monitor" |
||||
import CpuInfo from './components/Cpu' |
||||
import MemoryInfo from './components/Memory' |
||||
import JvmInfo from './components/Jvm' |
||||
import {timeFormat} from "@/utils" |
||||
import {sub} from "@/utils/math" |
||||
|
||||
export default { |
||||
name: "systemMonitor", |
||||
|
||||
components: {CpuInfo, MemoryInfo, JvmInfo}, |
||||
|
||||
data() { |
||||
return { |
||||
loading: false, |
||||
info: { |
||||
diskInfo: [{ |
||||
"name": "", |
||||
"remain": 0, |
||||
"total": 0, |
||||
"used": 0, |
||||
"utilizationRate": 0 |
||||
}] |
||||
}, |
||||
expire: 60, |
||||
time: '', |
||||
refreshTimer: null, |
||||
operatingInfo: { |
||||
bootedTime: 'NaN', |
||||
upTime: 'NaN' |
||||
}, |
||||
cpuInfo: { |
||||
name: '', |
||||
core: 'NaN', |
||||
utilizationRate: 0.00, |
||||
lastUtilizationRate: 0.00, |
||||
maxUtilizationRate: 0.00, |
||||
lastMaxUtilizationRate: 0.00, |
||||
xData: [], |
||||
vData: [] |
||||
}, |
||||
memoryInfo: { |
||||
total: 0, |
||||
used: 0, |
||||
utilizationRate: 0.00, |
||||
lastUtilizationRate: 0.00, |
||||
maxUtilizationRate: 0.00, |
||||
lastMaxUtilizationRate: 0.00, |
||||
xData: [], |
||||
vData: [] |
||||
}, |
||||
jvmInfo: { |
||||
total: 0, |
||||
used: 0, |
||||
remain: 0, |
||||
utilizationRate: 0.00, |
||||
lastUtilizationRate: 0.00, |
||||
maxUtilizationRate: 0.00, |
||||
lastMaxUtilizationRate: 0.00, |
||||
xData: [], |
||||
vData: [] |
||||
} |
||||
} |
||||
}, |
||||
|
||||
methods: { |
||||
getData() { |
||||
if (this.loading) return |
||||
this.loading = true |
||||
getMonitorInfo() |
||||
.then(data => { |
||||
this.expire = data.expire |
||||
this.time = timeFormat('HH:mm:ss', new Date(data.timestamp)) |
||||
this.handleOperatingInfo(data.operatingInfo) |
||||
this.handleCpuInfo(data.cpuInfo) |
||||
this.handleMemoryInfo(data.memoryInfo) |
||||
this.handleJvmInfo(data.jvmInfo) |
||||
}) |
||||
.finally(() => this.loading = false) |
||||
}, |
||||
|
||||
handleOperatingInfo(info) { |
||||
this.operatingInfo.bootedTime = timeFormat(null, new Date(info.bootedTime * 1000)) |
||||
this.operatingInfo.upTime = info.upTime |
||||
}, |
||||
|
||||
handleCpuInfo(info) { |
||||
let used = (Number)(sub(100, info.idle).toFixed(2)) |
||||
this.cpuInfo.name = info.name |
||||
this.cpuInfo.core = info.core |
||||
this.cpuInfo.lastUtilizationRate = this.cpuInfo.utilizationRate |
||||
this.cpuInfo.utilizationRate = used |
||||
if (used > this.cpuInfo.maxUtilizationRate) { |
||||
this.cpuInfo.lastMaxUtilizationRate = this.cpuInfo.maxUtilizationRate |
||||
this.cpuInfo.maxUtilizationRate = used |
||||
} |
||||
this.cpuInfo.xData.push(this.time) |
||||
this.cpuInfo.vData.push(used) |
||||
}, |
||||
|
||||
handleMemoryInfo(info) { |
||||
info.utilizationRate = (Number)(info.utilizationRate.toFixed(2)) |
||||
this.memoryInfo.total = info.total |
||||
this.memoryInfo.used = info.used |
||||
this.memoryInfo.remain = info.remain |
||||
this.memoryInfo.lastUtilizationRate = this.memoryInfo.utilizationRate |
||||
this.memoryInfo.utilizationRate = info.utilizationRate |
||||
if (info.utilizationRate > this.memoryInfo.maxUtilizationRate) { |
||||
this.memoryInfo.lastMaxUtilizationRate = this.memoryInfo.maxUtilizationRate |
||||
this.memoryInfo.maxUtilizationRate = info.utilizationRate |
||||
} |
||||
this.memoryInfo.xData.push(this.time) |
||||
this.memoryInfo.vData.push(info.utilizationRate) |
||||
}, |
||||
|
||||
handleJvmInfo(info) { |
||||
info.utilizationRate = (Number)(info.utilizationRate.toFixed(2)) |
||||
this.jvmInfo.total = info.total |
||||
this.jvmInfo.used = info.used |
||||
this.jvmInfo.remain = info.remain |
||||
this.jvmInfo.lastUtilizationRate = this.jvmInfo.utilizationRate |
||||
this.jvmInfo.utilizationRate = info.utilizationRate |
||||
if (info.utilizationRate > this.jvmInfo.maxUtilizationRate) { |
||||
this.jvmInfo.lastMaxUtilizationRate = this.jvmInfo.maxUtilizationRate |
||||
this.jvmInfo.maxUtilizationRate = info.utilizationRate |
||||
} |
||||
this.jvmInfo.xData.push(this.time) |
||||
this.jvmInfo.vData.push(info.utilizationRate) |
||||
}, |
||||
}, |
||||
|
||||
mounted() { |
||||
this.getData() |
||||
this.refreshTimer = setInterval(() => this.getData(), 40000) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.chart-card { |
||||
width: 100%; |
||||
|
||||
.title-span { |
||||
margin-left: 20px |
||||
} |
||||
|
||||
.line-chart { |
||||
height: 250px; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue