xiaoguangbin/AnalysisSystemForRadionuclide_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

server 服务器模块，cpu页面接口对接，图形渲染

Browse Source
This commit is contained in:
任珮宇 2023-09-27 16:47:55 +08:00
parent b69d9d86fd
commit 11ebcfa819
1 changed files with 384 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

533
src/views/abnormalAlarm/serverMonitor/instances/cpu.vue
View File

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