server 服务器模块，cpu页面接口对接，图形渲染
This commit is contained in:
任珮宇
parent
b69d9d86fd
commit
11ebcfa819
|
|
@ -1,10 +1,11 @@
|
|||
<template>
|
||||
<div style="height: 100%;">
|
||||
<div style="height: 100%">
|
||||
<div class="cpu-search">
|
||||
<a-row type="flex" :gutter="10">
|
||||
<a-col flex="265px">
|
||||
<span class="item-label">Server</span>
|
||||
<a-select style="width:180px"
|
||||
<a-select
|
||||
style="width: 180px"
|
||||
v-model="queryParams.server"
|
||||
placeholder="select..."
|
||||
:filter-option="filterOption"
|
||||
|
|
@ -19,7 +20,8 @@
|
|||
</a-col>
|
||||
<a-col flex="265px">
|
||||
<span class="item-label">Time</span>
|
||||
<a-select style="width:180px"
|
||||
<a-select
|
||||
style="width: 180px"
|
||||
v-model="queryParams.timer"
|
||||
placeholder="select..."
|
||||
show-arrow
|
||||
|
|
@ -43,72 +45,106 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="cpu-content">
|
||||
<a-row :gutter="[20,15]" style="height: 100%;">
|
||||
<a-col :span="12" style="height: calc(50% + 10px);">
|
||||
<a-row :gutter="[20, 15]" style="height: 100%">
|
||||
<a-col :span="12" style="height: calc(50% + 10px)">
|
||||
<div class="cpu-content-item">
|
||||
<BoxTitle title="CPU utilizatior">
|
||||
<template slot="right">
|
||||
<ul>
|
||||
<li><span>Avg:</span>7.43%</li>
|
||||
<li><span>Min:</span>7.43%</li>
|
||||
<li><span>Max:</span>7.43%</li>
|
||||
<li><span>Avg:</span>{{ cpuUtilization.avg + cpuUtilization.units }}</li>
|
||||
<li><span>Min:</span>{{ cpuUtilization.min + cpuUtilization.units }}</li>
|
||||
<li><span>Max:</span>{{ cpuUtilization.max + cpuUtilization.units }}</li>
|
||||
</ul>
|
||||
</template>
|
||||
<template slot="other">
|
||||
<img src="@/assets/images/abnormalAlarm/big.png" @click="handelZoom('CPU utilizatior',option1)" alt="">
|
||||
<img
|
||||
src="@/assets/images/abnormalAlarm/big.png"
|
||||
@click="handelZoom('CPU utilizatior', option1)"
|
||||
alt=""
|
||||
/>
|
||||
</template>
|
||||
</BoxTitle>
|
||||
<div class="cpu-content-item-chart" id="chart1"></div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12" style="height: calc(50% + 10px);">
|
||||
<a-col :span="12" style="height: calc(50% + 10px)">
|
||||
<div class="cpu-content-item">
|
||||
<BoxTitle title="Percentage of free system space">
|
||||
<template slot="right">
|
||||
<ul>
|
||||
<li><span>Avg:</span>7.43%</li>
|
||||
<li><span>Min:</span>7.43%</li>
|
||||
<li><span>Max:</span>7.43%</li>
|
||||
<li><span>Avg:</span>{{ cpuIdleRate.avg + cpuIdleRate.units }}</li>
|
||||
<li><span>Min:</span>{{ cpuIdleRate.min + cpuIdleRate.units }}</li>
|
||||
<li><span>Max:</span>{{ cpuIdleRate.max + cpuIdleRate.units }}</li>
|
||||
</ul>
|
||||
</template>
|
||||
<template slot="other">
|
||||
<img src="@/assets/images/abnormalAlarm/big.png" @click="handelZoom('Percentage of free system space',option2)" alt="">
|
||||
<img
|
||||
src="@/assets/images/abnormalAlarm/big.png"
|
||||
@click="handelZoom('Percentage of free system space', option2)"
|
||||
alt=""
|
||||
/>
|
||||
</template>
|
||||
</BoxTitle>
|
||||
<div class="cpu-content-item-chart" id="chart2"></div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12" style="height: calc(50% + 10px);">
|
||||
<a-col :span="12" style="height: calc(50% + 10px)">
|
||||
<div class="cpu-content-item">
|
||||
<BoxTitle title="Interrupt and episodic switching">
|
||||
<template slot="other">
|
||||
<img src="@/assets/images/abnormalAlarm/big.png" @click="handelZoom('Interrupt and episodic switching',option3)" alt="">
|
||||
<img
|
||||
src="@/assets/images/abnormalAlarm/big.png"
|
||||
@click="handelZoom('Interrupt and episodic switching', option3)"
|
||||
alt=""
|
||||
/>
|
||||
</template>
|
||||
</BoxTitle>
|
||||
<div class="cpu-content-item-info">
|
||||
<a-row style="height: 30px;" type="flex">
|
||||
<a-row style="height: 30px" type="flex">
|
||||
<a-col flex="170px">Processor interrupt(s)</a-col>
|
||||
<a-col flex="100px">Avg:<span>7.43%</span></a-col>
|
||||
<a-col flex="100px">Min:<span>7.43%</span></a-col>
|
||||
<a-col flex="100px">Max:<span>7.43%</span></a-col>
|
||||
<a-col><div style="background: #00a8ff;" class="li-icon"></div><i>Processor interrupt</i></a-col>
|
||||
<a-col flex="100px"
|
||||
>Avg:<span>{{ multiLine.cpuInterrupt.avg + multiLine.cpuInterrupt.units }}</span></a-col
|
||||
>
|
||||
<a-col flex="100px"
|
||||
>Min:<span>{{ multiLine.cpuInterrupt.min + multiLine.cpuInterrupt.units }}</span></a-col
|
||||
>
|
||||
<a-col flex="100px"
|
||||
>Max:<span>{{ multiLine.cpuInterrupt.max + multiLine.cpuInterrupt.units }}</span></a-col
|
||||
>
|
||||
<a-col
|
||||
><div style="background: #00a8ff" class="li-icon"></div>
|
||||
<i>Processor interrupt</i></a-col
|
||||
>
|
||||
</a-row>
|
||||
<a-row style="height: 30px;" type="flex">
|
||||
<a-row style="height: 30px" type="flex">
|
||||
<a-col flex="170px">Situational switching(s)</a-col>
|
||||
<a-col flex="100px">Avg:<span>7.43%</span></a-col>
|
||||
<a-col flex="100px">Min:<span>7.43%</span></a-col>
|
||||
<a-col flex="100px">Max:<span>7.43%</span></a-col>
|
||||
<a-col><div style="background: #73b54b;" class="li-icon"></div><i>Situational switching(s)</i></a-col>
|
||||
<a-col flex="100px"
|
||||
>Avg:<span>{{ multiLine.cpuSwitch.avg + multiLine.cpuSwitch.units }}</span></a-col
|
||||
>
|
||||
<a-col flex="100px"
|
||||
>Min:<span>{{ multiLine.cpuSwitch.min + multiLine.cpuSwitch.units }}</span></a-col
|
||||
>
|
||||
<a-col flex="100px"
|
||||
>Max:<span>{{ multiLine.cpuSwitch.max + multiLine.cpuSwitch.units }}</span></a-col
|
||||
>
|
||||
<a-col
|
||||
><div style="background: #73b54b" class="li-icon"></div>
|
||||
<i>Situational switching(s)</i></a-col
|
||||
>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="cpu-content-item-chart3" id="chart3"></div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12" style="height: calc(50% + 10px);">
|
||||
<a-col :span="12" style="height: calc(50% + 10px)">
|
||||
<div class="cpu-content-item">
|
||||
<BoxTitle title="CPU usage of diferent cores">
|
||||
<template slot="other">
|
||||
<img src="@/assets/images/abnormalAlarm/big.png" @click="handelZoom('CPU usage of diferent cores',option4)" alt="">
|
||||
<img
|
||||
src="@/assets/images/abnormalAlarm/big.png"
|
||||
@click="handelZoom('CPU usage of diferent cores', option4)"
|
||||
alt=""
|
||||
/>
|
||||
</template>
|
||||
</BoxTitle>
|
||||
<div class="cpu-content-item-chart" id="chart4"></div>
|
||||
|
|
@ -116,12 +152,7 @@
|
|||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<a-modal
|
||||
:title="modalTitle"
|
||||
:width="1200"
|
||||
v-model="visible"
|
||||
@cancel="onCancel"
|
||||
>
|
||||
<a-modal :title="modalTitle" :width="1200" v-model="visible" @cancel="onCancel">
|
||||
<div class="modal-content" id="common_cpu"></div>
|
||||
</a-modal>
|
||||
<CreateRules
|
||||
|
|
@ -136,50 +167,84 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
import moment from 'moment'
|
||||
import * as echarts from 'echarts'
|
||||
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
|
||||
import BoxTitle from '../../components/boxTitle.vue';
|
||||
import CreateRules from './createRules.vue';
|
||||
import BoxTitle from '../../components/boxTitle.vue'
|
||||
import CreateRules from './createRules.vue'
|
||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||
export default {
|
||||
components: {
|
||||
BoxTitle,
|
||||
CreateRules
|
||||
CreateRules,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currId:"",
|
||||
currId: '',
|
||||
visible_rule: false,
|
||||
currLabel:"",
|
||||
currLabel: '',
|
||||
queryParams: {
|
||||
server: undefined,
|
||||
timer: 1,
|
||||
startDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
|
||||
endDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss')
|
||||
endDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
|
||||
},
|
||||
serverOptions: [],
|
||||
timerOptions: [
|
||||
{label: "1Hours",value: 1},
|
||||
{label: "2Hours",value: 2},
|
||||
{label: "3Hours",value: 3},
|
||||
{label: "user-defined",value: 0},
|
||||
{ label: '1Hours', value: 1 },
|
||||
{ label: '2Hours', value: 2 },
|
||||
{ label: '3Hours', value: 3 },
|
||||
{ label: 'user-defined', value: 0 },
|
||||
],
|
||||
option1: {},
|
||||
option2: {},
|
||||
option3: {},
|
||||
option4: {},
|
||||
colorList: [
|
||||
"#c13a28", "#ff8a00", "#cbae7f", "#c9bd2b", "#81b477", "#488672",
|
||||
"#55d9d1", "#49a8f0", "#2859ed", "#9e54ec", "#7e16a3", "#e6437d"
|
||||
'#c13a28',
|
||||
'#ff8a00',
|
||||
'#cbae7f',
|
||||
'#c9bd2b',
|
||||
'#81b477',
|
||||
'#488672',
|
||||
'#55d9d1',
|
||||
'#49a8f0',
|
||||
'#2859ed',
|
||||
'#9e54ec',
|
||||
'#7e16a3',
|
||||
'#e6437d',
|
||||
],
|
||||
legendList: [
|
||||
"CPU0,10", "CPU0,11", "CPU0,8", "CPU0,9", "CPU0,1", "CPU0,2","",
|
||||
"CPU0,0", "CPU0,5", "CPU0,6", "CPU0,3", "CPU0,4", "CPU0,7"
|
||||
'CPU0,10',
|
||||
'CPU0,11',
|
||||
'CPU0,8',
|
||||
'CPU0,9',
|
||||
'CPU0,1',
|
||||
'CPU0,2',
|
||||
'',
|
||||
'CPU0,0',
|
||||
'CPU0,5',
|
||||
'CPU0,6',
|
||||
'CPU0,3',
|
||||
'CPU0,4',
|
||||
'CPU0,7',
|
||||
],
|
||||
xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
visible: false,
|
||||
modalTitle: "",
|
||||
modalTitle: '',
|
||||
cpuUtilization: {},
|
||||
cpuUtilization_xData: [],
|
||||
cpuUtilization_data: [],
|
||||
cpuIdleRate: {},
|
||||
cpuIdleRate_xData: [],
|
||||
cpuIdleRate_data: [],
|
||||
multiLine: {
|
||||
cpuInterrupt: {},
|
||||
cpuSwitch: {},
|
||||
},
|
||||
multiLine_xData: [],
|
||||
cpuInterrupt_data: [],
|
||||
cpuSwitch_data: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -189,17 +254,71 @@ export default {
|
|||
this.getServerList()
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.drawChart1()
|
||||
this.drawChart2()
|
||||
this.drawChart3()
|
||||
this.drawChart4()
|
||||
}, 0)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getTheData() {
|
||||
console.log(this.serverOptions)
|
||||
let hostId = this.serverOptions.find((item) => {
|
||||
return item.value == this.currId
|
||||
}).hostId
|
||||
let params = {
|
||||
hostId,
|
||||
pageName: 'cpu',
|
||||
start: this.queryParams.startDate,
|
||||
end: this.queryParams.endDate,
|
||||
}
|
||||
getAction('/systemMonitor/queryHostDetails', params).then((res) => {
|
||||
const data = res.result
|
||||
//CPU utilizatior
|
||||
this.cpuUtilization = data.find((item) => item.name === 'cpuUtilization')
|
||||
this.cpuUtilization_xData = this.cpuUtilization.list.map((item) => {
|
||||
return dateFormat(new Date(item.date * 1000), 'hh:mm')
|
||||
})
|
||||
this.cpuUtilization_data = this.cpuUtilization.list.map((item) => {
|
||||
return Number(item.value.toFixed(2))
|
||||
})
|
||||
//Percentage of free system space
|
||||
this.cpuIdleRate = data.find((item) => item.name === 'cpuIdleRate')
|
||||
this.cpuIdleRate_xData = this.cpuIdleRate.list.map((item) => {
|
||||
return dateFormat(new Date(item.date * 1000), 'hh:mm')
|
||||
})
|
||||
this.cpuIdleRate_data = this.cpuIdleRate.list.map((item) => {
|
||||
return Number(item.value.toFixed(2))
|
||||
})
|
||||
// Interrupt and episodic switching
|
||||
;(this.multiLine.cpuInterrupt = data.find((item) => item.name === 'cpuInterrupt')),
|
||||
(this.multiLine.cpuSwitch = data.find((item) => item.name === 'cpuSwitch')),
|
||||
(this.multiLine_xData = this.multiLine.cpuInterrupt.list.map((item) => {
|
||||
return dateFormat(new Date(item.date * 1000), 'hh:mm')
|
||||
}))
|
||||
this.cpuInterrupt_data = this.multiLine.cpuInterrupt.list.map((item) => {
|
||||
return Number(item.value.toFixed(2))
|
||||
})
|
||||
this.cpuSwitch_data = this.multiLine.cpuSwitch.list.map((item) => {
|
||||
return Number(item.value.toFixed(2))
|
||||
})
|
||||
|
||||
// const list = [...this.multiLine.cpuInterrupt.list, ...this.multiLine.cpuSwitch.list]
|
||||
// this.renderingEchart(list, 'cpuMultiLine', Area) // 中断和情境切换
|
||||
// //总CPU使用率
|
||||
// let totalCpu = new Array()
|
||||
// data.map((item) => {
|
||||
// if (item.name.search('cpuUtilization_') != -1) {
|
||||
// totalCpu = [...totalCpu, ...item.list]
|
||||
// }
|
||||
// })
|
||||
// this.renderingEchart(totalCpu, 'cpulist', Line)
|
||||
this.drawChart1()
|
||||
this.drawChart2()
|
||||
this.drawChart3()
|
||||
})
|
||||
},
|
||||
getBeforeHours(num) {
|
||||
let currentTime = moment()
|
||||
let oneHourAgo = moment().subtract(num, 'hours');
|
||||
let oneHourAgo = moment().subtract(num, 'hours')
|
||||
this.queryParams.startDate = oneHourAgo.format('YYYY-MM-DD HH:mm:ss')
|
||||
this.queryParams.endDate = currentTime.format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
|
|
@ -210,49 +329,49 @@ export default {
|
|||
this.visible_rule = false
|
||||
},
|
||||
handleOk(params) {
|
||||
postAction("/alarmRule/create", params).then(res => {
|
||||
postAction('/alarmRule/create', params).then((res) => {
|
||||
if (res.success) {
|
||||
this.visible_rule = false
|
||||
this.$message.success("success")
|
||||
this.$message.success('success')
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
moment,
|
||||
filterOption(input, option) {
|
||||
return (
|
||||
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
);
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
},
|
||||
getServerList() {
|
||||
getAction("/sysServer/sourceList").then(res => {
|
||||
getAction('/sysServer/sourceList').then((res) => {
|
||||
if (res.success) {
|
||||
this.serverOptions = res.result.map(item => {
|
||||
this.serverOptions = res.result.map((item) => {
|
||||
return {
|
||||
label: item.sourceName,
|
||||
value: item.sourceId
|
||||
value: item.sourceId,
|
||||
hostId: item.hostId,
|
||||
}
|
||||
})
|
||||
this.currId = this.$route.query.serverId || res.result[0].sourceId
|
||||
if (this.$route.query.serverId) {
|
||||
let currOption = this.serverOptions.find(item => {
|
||||
let currOption = this.serverOptions.find((item) => {
|
||||
return item.value === this.$route.query.serverId
|
||||
})
|
||||
this.currLabel = currOption.label
|
||||
this.queryParams.server = {
|
||||
key: this.$route.query.serverId,
|
||||
label:this.currLabel
|
||||
label: this.currLabel,
|
||||
}
|
||||
} else {
|
||||
this.currLabel = res.result[0].sourceName
|
||||
this.queryParams.server = {
|
||||
key: res.result[0].sourceId,
|
||||
label:this.currLabel
|
||||
label: this.currLabel,
|
||||
}
|
||||
}
|
||||
this.getTheData()
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -269,68 +388,68 @@ export default {
|
|||
this.queryParams.endDate = dateString[1]
|
||||
},
|
||||
drawChart1() {
|
||||
let myLine = echarts.init(document.getElementById("chart1"))
|
||||
let myLine = echarts.init(document.getElementById('chart1'))
|
||||
this.option1 = {
|
||||
color: ["#0096ff"],
|
||||
color: ['#0096ff'],
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
left: 25,
|
||||
right: 0,
|
||||
top: 15,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show:false
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(115, 191, 255, 0.2)"
|
||||
}
|
||||
color: 'rgba(115, 191, 255, 0.2)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)",
|
||||
color: 'rgba(173, 230, 238, 1)',
|
||||
formatter: (value, index) => {
|
||||
if (index === 0) {
|
||||
return ' ' + value;
|
||||
return ' ' + value
|
||||
}
|
||||
if (index === this.xData.length - 1) {
|
||||
return value + ' ';
|
||||
return value + ' '
|
||||
}
|
||||
return value
|
||||
}
|
||||
},
|
||||
},
|
||||
boundaryGap: false,
|
||||
data: this.xData
|
||||
data: this.cpuUtilization_xData,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: "CPU utilization(%)",
|
||||
nameLocation: "middle",
|
||||
name: 'CPU utilization(%)',
|
||||
nameLocation: 'middle',
|
||||
nameTextStyle: {
|
||||
color: "#5b9cba",
|
||||
fontFamily: "ArialMT",
|
||||
fontSize: 14
|
||||
color: '#5b9cba',
|
||||
fontFamily: 'ArialMT',
|
||||
fontSize: 14,
|
||||
},
|
||||
nameGap: 30,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(115, 191, 255, 0.2)"
|
||||
}
|
||||
color: 'rgba(115, 191, 255, 0.2)',
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(115, 191, 255, 0.5)"
|
||||
}
|
||||
color: 'rgba(115, 191, 255, 0.5)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)"
|
||||
color: 'rgba(173, 230, 238, 1)',
|
||||
},
|
||||
},
|
||||
series: [
|
||||
|
|
@ -340,82 +459,82 @@ export default {
|
|||
areaStyle: {
|
||||
opacity: 1,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#0096ff" },
|
||||
{ offset: 1, color: "rgba(0, 150, 255,0.2)" },
|
||||
])
|
||||
{ offset: 0, color: '#0096ff' },
|
||||
{ offset: 1, color: 'rgba(0, 150, 255,0.2)' },
|
||||
]),
|
||||
},
|
||||
data: [5, 23, 12, 48, 15, 27, 56]
|
||||
data: this.cpuUtilization_data,
|
||||
},
|
||||
],
|
||||
}
|
||||
]
|
||||
};
|
||||
myLine.setOption(this.option1)
|
||||
window.addEventListener("resize", function () {
|
||||
myLine.resize();
|
||||
window.addEventListener('resize', function () {
|
||||
myLine.resize()
|
||||
})
|
||||
},
|
||||
drawChart2() {
|
||||
let myLine = echarts.init(document.getElementById("chart2"))
|
||||
let myLine = echarts.init(document.getElementById('chart2'))
|
||||
this.option2 = {
|
||||
color: ["#f1e852"],
|
||||
color: ['#f1e852'],
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
left: 25,
|
||||
right: 0,
|
||||
top: 15,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show:false
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(115, 191, 255, 0.2)"
|
||||
}
|
||||
color: 'rgba(115, 191, 255, 0.2)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)",
|
||||
color: 'rgba(173, 230, 238, 1)',
|
||||
formatter: (value, index) => {
|
||||
if (index === 0) {
|
||||
return ' ' + value;
|
||||
return ' ' + value
|
||||
}
|
||||
if (index === this.xData.length - 1) {
|
||||
return value + ' ';
|
||||
return value + ' '
|
||||
}
|
||||
return value
|
||||
}
|
||||
},
|
||||
},
|
||||
boundaryGap: false,
|
||||
data: this.xData
|
||||
data: this.cpuIdleRate_xData,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: "system space(%)",
|
||||
nameLocation: "middle",
|
||||
name: 'system space(%)',
|
||||
nameLocation: 'middle',
|
||||
nameTextStyle: {
|
||||
color: "#5b9cba",
|
||||
fontFamily: "ArialMT",
|
||||
fontSize: 14
|
||||
color: '#5b9cba',
|
||||
fontFamily: 'ArialMT',
|
||||
fontSize: 14,
|
||||
},
|
||||
nameGap: 30,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(115, 191, 255, 0.2)"
|
||||
}
|
||||
color: 'rgba(115, 191, 255, 0.2)',
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(115, 191, 255, 0.5)"
|
||||
}
|
||||
color: 'rgba(115, 191, 255, 0.5)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)"
|
||||
color: 'rgba(173, 230, 238, 1)',
|
||||
},
|
||||
},
|
||||
series: [
|
||||
|
|
@ -425,141 +544,139 @@ export default {
|
|||
areaStyle: {
|
||||
opacity: 1,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#f1e852" },
|
||||
{ offset: 1, color: "rgba(241, 232, 82,0.2)" },
|
||||
])
|
||||
{ offset: 0, color: '#f1e852' },
|
||||
{ offset: 1, color: 'rgba(241, 232, 82,0.2)' },
|
||||
]),
|
||||
},
|
||||
data: [5, 23, 12, 48, 15, 27, 56]
|
||||
data: this.cpuIdleRate_data,
|
||||
},
|
||||
],
|
||||
}
|
||||
]
|
||||
};
|
||||
myLine.setOption(this.option2)
|
||||
window.addEventListener("resize", function () {
|
||||
myLine.resize();
|
||||
window.addEventListener('resize', function () {
|
||||
myLine.resize()
|
||||
})
|
||||
},
|
||||
drawChart3() {
|
||||
let myLine = echarts.init(document.getElementById("chart3"))
|
||||
let myLine = echarts.init(document.getElementById('chart3'))
|
||||
this.option3 = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
left: 25,
|
||||
right: 0,
|
||||
top: 10,
|
||||
bottom: 10,
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show:false
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(64, 105, 121, 0.5)"
|
||||
}
|
||||
color: 'rgba(64, 105, 121, 0.5)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)",
|
||||
color: 'rgba(173, 230, 238, 1)',
|
||||
formatter: (value, index) => {
|
||||
if (index === 0) {
|
||||
return ' ' + value;
|
||||
return ' ' + value
|
||||
}
|
||||
if (index === this.xData.length - 1) {
|
||||
return value + ' ';
|
||||
return value + ' '
|
||||
}
|
||||
return value
|
||||
}
|
||||
},
|
||||
},
|
||||
boundaryGap: false,
|
||||
data: this.xData
|
||||
data: this.multiLine_xData,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: "s",
|
||||
nameLocation: "middle",
|
||||
name: 's',
|
||||
nameLocation: 'middle',
|
||||
nameTextStyle: {
|
||||
color: "#5b9cba",
|
||||
fontFamily: "ArialMT",
|
||||
fontSize: 14
|
||||
color: '#5b9cba',
|
||||
fontFamily: 'ArialMT',
|
||||
fontSize: 14,
|
||||
},
|
||||
nameGap: 30,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(64, 105, 121, 0.5)"
|
||||
}
|
||||
color: 'rgba(64, 105, 121, 0.5)',
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(115, 191, 255, 0.5)"
|
||||
}
|
||||
color: 'rgba(115, 191, 255, 0.5)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)"
|
||||
color: 'rgba(173, 230, 238, 1)',
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
name: 'Email',
|
||||
symbol: 'none',
|
||||
itemStyle:{ normal:{color:"#00a8ff"}},
|
||||
itemStyle: { normal: { color: '#00a8ff' } },
|
||||
areaStyle: {
|
||||
opacity: 1,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#00a8ff" },
|
||||
{ offset: 1, color: "rgba(255,255,255,0)" },
|
||||
])
|
||||
{ offset: 0, color: '#00a8ff' },
|
||||
{ offset: 1, color: 'rgba(255,255,255,0)' },
|
||||
]),
|
||||
},
|
||||
data: [150, 230, 224, 218, 135, 147, 260],
|
||||
data: this.cpuInterrupt_data,
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name: 'Eml',
|
||||
symbol: 'none',
|
||||
itemStyle:{ normal:{color:"#73b54b"}},
|
||||
itemStyle: { normal: { color: '#73b54b' } },
|
||||
areaStyle: {
|
||||
opacity: 1,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#73b54b" },
|
||||
{ offset: 1, color: "rgba(255,255,255,0)" },
|
||||
{ offset: 0, color: '#73b54b' },
|
||||
{ offset: 1, color: 'rgba(255,255,255,0)' },
|
||||
]),
|
||||
},
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
data: this.cpuSwitch_data,
|
||||
},
|
||||
],
|
||||
}
|
||||
]
|
||||
};
|
||||
myLine.setOption(this.option3)
|
||||
window.addEventListener("resize", function () {
|
||||
myLine.resize();
|
||||
window.addEventListener('resize', function () {
|
||||
myLine.resize()
|
||||
})
|
||||
},
|
||||
drawChart4() {
|
||||
let myLine = echarts.init(document.getElementById("chart4"))
|
||||
let myLine = echarts.init(document.getElementById('chart4'))
|
||||
this.option4 = {
|
||||
color: this.colorList,
|
||||
// color: this.colorList,
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
left: 25,
|
||||
right: 0,
|
||||
top: 70,
|
||||
bottom: 10,
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
icon: "roundRect",
|
||||
icon: 'roundRect',
|
||||
itemHeight: 12, // 图例icon高度
|
||||
itemWidth: 12, // 图例icon宽度
|
||||
top: 10,
|
||||
right: 0,
|
||||
textStyle: {
|
||||
color: "#9ab1bc",
|
||||
color: '#9ab1bc',
|
||||
width: 65,
|
||||
lineHeight: 12,
|
||||
rich: {
|
||||
|
|
@ -574,143 +691,143 @@ export default {
|
|||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show:false
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(64, 105, 121, 0.5)"
|
||||
}
|
||||
color: 'rgba(64, 105, 121, 0.5)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)",
|
||||
color: 'rgba(173, 230, 238, 1)',
|
||||
formatter: (value, index) => {
|
||||
if (index === 0) {
|
||||
return ' ' + value;
|
||||
return ' ' + value
|
||||
}
|
||||
if (index === this.xData.length - 1) {
|
||||
return value + ' ';
|
||||
return value + ' '
|
||||
}
|
||||
return value
|
||||
}
|
||||
},
|
||||
},
|
||||
boundaryGap: false,
|
||||
data: this.xData
|
||||
data: this.xData,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: "CPU usage(%)",
|
||||
nameLocation: "middle",
|
||||
name: 'CPU usage(%)',
|
||||
nameLocation: 'middle',
|
||||
nameTextStyle: {
|
||||
color: "#5b9cba",
|
||||
fontFamily: "ArialMT",
|
||||
fontSize: 14
|
||||
color: '#5b9cba',
|
||||
fontFamily: 'ArialMT',
|
||||
fontSize: 14,
|
||||
},
|
||||
nameGap: 30,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(64, 105, 121, 0.5)"
|
||||
}
|
||||
color: 'rgba(64, 105, 121, 0.5)',
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(115, 191, 255, 0.5)"
|
||||
}
|
||||
color: 'rgba(115, 191, 255, 0.5)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)"
|
||||
color: 'rgba(173, 230, 238, 1)',
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
name:"CPU0,10",
|
||||
name: 'CPU0,10',
|
||||
symbol: 'none',
|
||||
data: [15, 30, 24, 28, 13, 14, 20],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name:"CPU0,11",
|
||||
name: 'CPU0,11',
|
||||
symbol: 'none',
|
||||
data: [82, 92, 91, 34, 12, 30, 20],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name:"CPU0,8",
|
||||
name: 'CPU0,8',
|
||||
symbol: 'none',
|
||||
data: [2, 9, 11, 24, 12, 20, 25],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name:"CPU0,9",
|
||||
name: 'CPU0,9',
|
||||
symbol: 'none',
|
||||
data: [8, 19, 32, 4, 22, 13, 50],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name:"CPU0,1",
|
||||
name: 'CPU0,1',
|
||||
symbol: 'none',
|
||||
data: [53, 62, 71, 14, 16, 37, 24],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name:"CPU0,2",
|
||||
name: 'CPU0,2',
|
||||
symbol: 'none',
|
||||
data: [62, 54, 49, 64, 62, 45, 29],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name:"CPU0,0",
|
||||
name: 'CPU0,0',
|
||||
symbol: 'none',
|
||||
data: [15, 30, 24, 28, 13, 14, 20],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name:"CPU0,5",
|
||||
name: 'CPU0,5',
|
||||
symbol: 'none',
|
||||
data: [82, 92, 91, 34, 12, 30, 20],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name:"CPU0,6",
|
||||
name: 'CPU0,6',
|
||||
symbol: 'none',
|
||||
data: [2, 9, 11, 24, 12, 20, 25],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name:"CPU0,3",
|
||||
name: 'CPU0,3',
|
||||
symbol: 'none',
|
||||
data: [8, 19, 32, 4, 22, 13, 50],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name:"CPU0,4",
|
||||
name: 'CPU0,4',
|
||||
symbol: 'none',
|
||||
data: [53, 62, 71, 14, 16, 37, 24],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name:"CPU0,7",
|
||||
name: 'CPU0,7',
|
||||
symbol: 'none',
|
||||
data: [62, 54, 49, 64, 62, 45, 29],
|
||||
},
|
||||
],
|
||||
}
|
||||
]
|
||||
};
|
||||
myLine.setOption(this.option4)
|
||||
window.addEventListener("resize", function () {
|
||||
myLine.resize();
|
||||
window.addEventListener('resize', function () {
|
||||
myLine.resize()
|
||||
})
|
||||
},
|
||||
drawLine(option) {
|
||||
this.myLine = echarts.init(document.getElementById("common_cpu"))
|
||||
this.myLine = echarts.init(document.getElementById('common_cpu'))
|
||||
this.myLine.setOption(option)
|
||||
window.addEventListener("resize", function () {
|
||||
this.myLine.resize();
|
||||
window.addEventListener('resize', function () {
|
||||
this.myLine.resize()
|
||||
})
|
||||
},
|
||||
handelZoom(str, option) {
|
||||
console.log(option);
|
||||
console.log(option)
|
||||
this.modalTitle = str
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
|
|
@ -720,7 +837,7 @@ export default {
|
|||
onCancel() {
|
||||
this.visible = false
|
||||
this.myLine.clear()
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user