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

Merge branch 'master-dev' of http://git.hivekion.com:3000/xiaoguangbin/AnalysisSystemForRadionuclide_vue into master-dev

Browse Source
This commit is contained in:
xiaoguangbin 2023-10-07 08:58:12 +08:00
commit ce29017c03
6 changed files with 1764 additions and 1273 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -11,6 +11,7 @@
}, },
"dependencies": { "dependencies": {
"@antv/data-set": "^0.11.4", "@antv/data-set": "^0.11.4",
"@antv/g2plot": "^2.4.23",
"@jeecg/antd-online-mini": "3.4.3-beta2", "@jeecg/antd-online-mini": "3.4.3-beta2",
"@tinymce/tinymce-vue": "2.1.0", "@tinymce/tinymce-vue": "2.1.0",
"@toast-ui/editor": "^2.1.2", "@toast-ui/editor": "^2.1.2",

601
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,60 @@
</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: [
"#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"
],
xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
visible: false, visible: false,
modalTitle: "", modalTitle: '',
//CPU utilizatior
cpuUtilization: {},
cpuUtilization_xData: [],
cpuUtilization_data: [],
// Percentage of free system space
cpuIdleRate: {},
cpuIdleRate_xData: [],
cpuIdleRate_data: [],
// Interrupt and episodic switching
multiLine: {
cpuInterrupt: {},
cpuSwitch: {},
},
multiLine_xData: [],
cpuInterrupt_data: [],
cpuSwitch_data: [],
// CPU usage of diferent cores
cpuDiff_xData: [],
cpuDiff_data: [],
} }
}, },
created() { created() {
@ -187,19 +228,76 @@ export default {
}, },
mounted() { mounted() {
this.getServerList() this.getServerList()
this.$nextTick(() => { },
setTimeout(() => { 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))
})
//总CPU使用率
let totalCpu = []
data.map((item) => {
if (item.name.search('cpuUtilization_') != -1) {
totalCpu.push(item)
}
})
console.log(totalCpu)
this.cpuDiff_xData = totalCpu[0].list.map((item) => {
return dateFormat(new Date(item.date * 1000), 'hh:mm')
})
this.cpuDiff_data = totalCpu.map((item) => {
return {
name: item.name,
data: item.list.map((el) => Number(el.value.toFixed(2))),
}
})
this.drawChart1() this.drawChart1()
this.drawChart2() this.drawChart2()
this.drawChart3() this.drawChart3()
this.drawChart4() this.drawChart4()
},0)
}) })
}, },
methods: {
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 +308,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 +367,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.cpuUtilization_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 +438,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.cpuIdleRate_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 +523,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.multiLine_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,
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis',
confine: true,
}, },
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: {
@ -569,158 +665,105 @@ export default {
}, },
padding: [0, -2, -4, 0], padding: [0, -2, -4, 0],
}, },
data: this.legendList, // 不需要''换行 // data: this.legendList, // 不需要''换行
}, },
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.cpuDiff_xData.length - 1) {
return value + ' '; return value + ' '
} }
return value return value
} },
}, },
boundaryGap: false, boundaryGap: false,
data: this.xData data: this.cpuDiff_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',
name:"CPU0,10",
symbol: 'none',
data: [15, 30, 24, 28, 13, 14, 20],
},
{
type: 'line',
name:"CPU0,11",
symbol: 'none',
data: [82, 92, 91, 34, 12, 30, 20],
},
{
type: 'line',
name:"CPU0,8",
symbol: 'none',
data: [2, 9, 11, 24, 12, 20, 25],
},
{
type: 'line',
name:"CPU0,9",
symbol: 'none',
data: [8, 19, 32, 4, 22, 13, 50],
},
{
type: 'line',
name:"CPU0,1",
symbol: 'none',
data: [53, 62, 71, 14, 16, 37, 24],
},
{
type: 'line',
name:"CPU0,2",
symbol: 'none',
data: [62, 54, 49, 64, 62, 45, 29],
},
{
type: 'line',
name:"CPU0,0",
symbol: 'none',
data: [15, 30, 24, 28, 13, 14, 20],
},
{
type: 'line',
name:"CPU0,5",
symbol: 'none',
data: [82, 92, 91, 34, 12, 30, 20],
},
{
type: 'line',
name:"CPU0,6",
symbol: 'none',
data: [2, 9, 11, 24, 12, 20, 25],
},
{
type: 'line',
name:"CPU0,3",
symbol: 'none',
data: [8, 19, 32, 4, 22, 13, 50],
},
{
type: 'line',
name:"CPU0,4",
symbol: 'none',
data: [53, 62, 71, 14, 16, 37, 24],
},
{
type: 'line',
name:"CPU0,7",
symbol: 'none',
data: [62, 54, 49, 64, 62, 45, 29],
} }
] let series = this.cpuDiff_data.map((item) => {
}; return {
type: 'line',
name: item.name,
symbol: 'none',
data: item.data,
}
})
this.option4.series = series.splice(0, 10)
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);
this.modalTitle = str this.modalTitle = str
this.visible = true this.visible = true
this.$nextTick(() => { this.$nextTick(() => {
if (str === 'CPU usage of diferent cores') {
option.series = this.cpuDiff_data.map((item) => {
return {
type: 'line',
name: item.name,
symbol: 'none',
data: item.data,
}
})
this.drawLine(option) this.drawLine(option)
} else {
this.drawLine(option)
}
}) })
}, },
onCancel() { onCancel() {
this.visible = false this.visible = false
this.myLine.clear() this.myLine.clear()
} },
}, },
} }
</script> </script>

1035
src/views/abnormalAlarm/serverMonitor/instances/details.vue
View File

File diff suppressed because it is too large Load Diff

72
src/views/abnormalAlarm/serverMonitor/instances/lineChart.vue
View File

@ -2,68 +2,72 @@
<div class="line-box"> <div class="line-box">
<BoxTitle :title="title"> <BoxTitle :title="title">
<template slot="other"> <template slot="other">
<img src="@/assets/images/abnormalAlarm/big.png" @click="changeSize" alt=""> <img src="@/assets/images/abnormalAlarm/big.png" @click="changeSize" alt="" />
</template> </template>
</BoxTitle> </BoxTitle>
<div style="width: 100%;height: calc(100% - 40px);" :id="layout"></div> <div style="width: 100%; height: calc(100% - 40px)" :id="layout"></div>
</div> </div>
</template> </template>
<script> <script>
import * as echarts from 'echarts' import * as echarts from 'echarts'
import BoxTitle from '../../components/boxTitle.vue'; import BoxTitle from '../../components/boxTitle.vue'
export default { export default {
props: ["title","layout","dataSource"], props: ['title', 'layout', 'dataSource', 'xData'],
components: { components: {
BoxTitle, BoxTitle,
}, },
data() { data() {
return { return {
option: {}, option: {},
xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
} }
}, },
mounted () { watch: {
dataSource: {
handler: function () {
this.$nextTick(() => { this.$nextTick(() => {
setTimeout(() => { setTimeout(() => {
this.drawLine() this.drawLine()
}, 0) }, 0)
}) })
}, },
immediate: true,
},
},
methods: { methods: {
changeSize() { changeSize() {
this.$emit("zoom",this.title,this.option) this.$emit('zoom', this.title, this.option)
}, },
drawLine() { drawLine() {
let myLine = echarts.init(document.getElementById(`${this.layout}`)) let myLine = echarts.init(document.getElementById(`${this.layout}`))
let series = this.dataSource.map(item => { let series = this.dataSource.map((item) => {
return { return {
type: 'line', type: 'line',
name: item.name, name: item.name,
symbol: 'none', symbol: 'none',
data: item.data data: item.data,
} }
}) })
this.option = { this.option = {
color: ["#00ff5a", "#0096ff", "#ffc600"], color: ['#00ff5a', '#0096ff', '#ffc600'],
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis',
}, },
grid: { grid: {
left: 0, left: 0,
right: 0, right: 0,
top: 35, top: 35,
bottom: 0, bottom: 0,
containLabel: true containLabel: true,
}, },
legend: { legend: {
icon: "roundRect", icon: 'roundRect',
itemHeight: 12, // 图例icon高度 itemHeight: 12, // 图例icon高度
itemWidth: 12, // 图例icon宽度 itemWidth: 12, // 图例icon宽度
top: 0, top: 0,
right: 0, right: 0,
textStyle: { textStyle: {
color: "#ade6ee", color: '#ade6ee',
lineHeight: 12, lineHeight: 12,
rich: { rich: {
a: { a: {
@ -71,62 +75,62 @@ export default {
}, },
}, },
padding: [0, -2, -4, 0], padding: [0, -2, -4, 0],
} },
}, },
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)',
} },
}, },
splitLine: { splitLine: {
show: true, show: true,
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.xData || ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
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,
}; }
myLine.setOption(this.option) myLine.setOption(this.option)
window.addEventListener("resize", function () { window.addEventListener('resize', function () {
myLine.resize(); myLine.resize()
}) })
}, },
}, },

325
src/views/abnormalAlarm/serverMonitor/instances/monitor.vue
View File

@ -1,10 +1,11 @@
<template> <template>
<div style="height: 100%;"> <div style="height: 100%">
<div class="monitor-search"> <div class="monitor-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,101 +45,110 @@
</div> </div>
</div> </div>
<div class="monitor-content"> <div class="monitor-content">
<a-row :gutter="[20,15]" style="height: 100%;"> <a-row :gutter="[20, 15]" style="height: 100%">
<a-col :span="8" style="height: 34%;"> <a-col :span="8" style="height: 34%">
<div class="monitor-content-item"> <div class="monitor-content-item">
<LineChart <LineChart
title="CPU utilizatior" title="CPU utilizatior"
layout="line1" layout="line1"
:dataSource="data1" :xData="data1.xData"
:dataSource="data1.data"
@zoom="handelZoom" @zoom="handelZoom"
> >
</LineChart> </LineChart>
</div> </div>
</a-col> </a-col>
<a-col :span="8" style="height: 34%;"> <a-col :span="8" style="height: 34%">
<div class="monitor-content-item"> <div class="monitor-content-item">
<LineChart <LineChart
title="Memory Usage" title="Memory Usage"
layout="line2" layout="line2"
:dataSource="data2" :xData="data2.xData"
:dataSource="data2.data"
@zoom="handelZoom" @zoom="handelZoom"
> >
</LineChart> </LineChart>
</div> </div>
</a-col> </a-col>
<a-col :span="8" style="height: 34%;"> <a-col :span="8" style="height: 34%">
<div class="monitor-content-item"> <div class="monitor-content-item">
<LineChart <LineChart
title="System Load" title="System Load"
layout="line3" layout="line3"
:dataSource="data3" :xData="data3.xData"
:dataSource="data3.data"
@zoom="handelZoom" @zoom="handelZoom"
> >
</LineChart> </LineChart>
</div> </div>
</a-col> </a-col>
<a-col :span="8" style="height: 34%;"> <a-col :span="8" style="height: 34%">
<div class="monitor-content-item"> <div class="monitor-content-item">
<LineChart <LineChart
title="Disk Read/Write BPS (Byte/s)" title="Disk Read/Write BPS (Byte/s)"
layout="line4" layout="line4"
:dataSource="data4" :xData="data4.xData"
:dataSource="data4.data"
@zoom="handelZoom" @zoom="handelZoom"
> >
</LineChart> </LineChart>
</div> </div>
</a-col> </a-col>
<a-col :span="8" style="height: 34%;"> <a-col :span="8" style="height: 34%">
<div class="monitor-content-item"> <div class="monitor-content-item">
<LineChart <LineChart
title="Disk IOPS (Count/s)" title="Disk IOPS (Count/s)"
layout="line5" layout="line5"
:dataSource="data5" :xData="data5.xData"
:dataSource="data5.data"
@zoom="handelZoom" @zoom="handelZoom"
> >
</LineChart> </LineChart>
</div> </div>
</a-col> </a-col>
<a-col :span="8" style="height: 34%;"> <a-col :span="8" style="height: 34%">
<div class="monitor-content-item"> <div class="monitor-content-item">
<LineChart <LineChart
title="Disk Usage/Lnode Usage" title="Disk Usage/Lnode Usage"
layout="line6" layout="line6"
:dataSource="data6" :xData="data6.xData"
:dataSource="data6.data"
@zoom="handelZoom" @zoom="handelZoom"
> >
</LineChart> </LineChart>
</div> </div>
</a-col> </a-col>
<a-col :span="8" style="height: 34%;"> <a-col :span="8" style="height: 34%">
<div class="monitor-content-item"> <div class="monitor-content-item">
<LineChart <LineChart
title="Public Bandwidth" title="Public Bandwidth"
layout="line7" layout="line7"
:dataSource="data7" :xData="data7.xData"
:dataSource="data7.data"
@zoom="handelZoom" @zoom="handelZoom"
> >
</LineChart> </LineChart>
</div> </div>
</a-col> </a-col>
<a-col :span="8" style="height: 34%;"> <a-col :span="8" style="height: 34%">
<div class="monitor-content-item"> <div class="monitor-content-item">
<LineChart <LineChart
title="Internal Network Bandwidth (bit/s)" title="Internal Network Bandwidth (bit/s)"
layout="line8" layout="line8"
:dataSource="data8" :xData="data8.xData"
:dataSource="data8.data"
@zoom="handelZoom" @zoom="handelZoom"
> >
</LineChart> </LineChart>
</div> </div>
</a-col> </a-col>
<a-col :span="8" style="height: 34%;"> <a-col :span="8" style="height: 34%">
<div class="monitor-content-item"> <div class="monitor-content-item">
<LineChart <LineChart
title="ECS Concurrent Connections (Count)" title="ECS Concurrent Connections (Count)"
layout="line9" layout="line9"
:dataSource="data9" :xData="data9.xData"
:dataSource="data9.data"
@zoom="handelZoom" @zoom="handelZoom"
> >
</LineChart> </LineChart>
@ -145,12 +156,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"></div> <div class="modal-content" id="common"></div>
</a-modal> </a-modal>
<CreateRules <CreateRules
@ -165,122 +171,127 @@
</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 { getAction, postAction, httpAction, deleteAction } from '@/api/manage' import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
import LineChart from './lineChart.vue'; import LineChart from './lineChart.vue'
import CreateRules from './createRules.vue'; import CreateRules from './createRules.vue'
export default { export default {
components: { components: {
BoxTitle, BoxTitle,
LineChart, LineChart,
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 },
], ],
data1: [ data1: {
xData: [],
data: [],
},
data2: {
xData: [],
data: [],
},
data3: {
xData: [],
data: [],
},
data4: {
xData: [],
data: [
{ {
name: "CPU Total", name: 'Disk BPS Read',
data: [150, 230, 224, 218, 135, 147, 260] data: [15, 23, 22, 28, 35, 47, 26],
}
],
data2: [
{
name: "Memory Used Utilization",
data: [150, 230, 224, 218, 135, 147, 260]
}
],
data3: [
{
name: "Load 1m",
data: [15, 23, 22, 28, 35, 47, 26]
}, },
{ {
name: "Load 5m", name: 'Disk BPS Write',
data: [25, 13, 32, 18, 45, 27, 36] data: [25, 13, 32, 18, 45, 27, 36],
},
{
name: "Load 15m",
data: [5, 23, 12, 48, 15, 27, 56]
}, },
], ],
data4: [ },
data5: {
xData: [],
data: [
{ {
name: "Disk BPS Read", name: 'Disk IOPS Read',
data: [15, 23, 22, 28, 35, 47, 26] data: [15, 23, 22, 28, 35, 47, 26],
}, },
{ {
name: "Disk BPS Write", name: 'Disk IOPS Write',
data: [25, 13, 32, 18, 45, 27, 36] data: [25, 13, 32, 18, 45, 27, 36],
} },
], ],
data5: [ },
data6: {
xData: [],
data: [
{ {
name: "Disk IOPS Read", name: 'Disk Usage Utilization',
data: [15, 23, 22, 28, 35, 47, 26] data: [15, 23, 22, 28, 35, 47, 26],
}, },
{ {
name: "Disk IOPS Write", name: 'Lnode Utilization',
data: [25, 13, 32, 18, 45, 27, 36] data: [25, 13, 32, 18, 45, 27, 36],
} },
], ],
data6: [ },
data7: {
xData: [],
data: [
{ {
name: "Disk Usage Utilization", name: 'VPC PublicIP Lnterner in Rate',
data: [15, 23, 22, 28, 35, 47, 26] data: [15, 23, 22, 28, 35, 47, 26],
}, },
{ {
name: "Lnode Utilization", name: 'VPC PublicIP Lnterner Out Rate',
data: [25, 13, 32, 18, 45, 27, 36] data: [25, 13, 32, 18, 45, 27, 36],
} },
], ],
data7: [ },
data8: {
xData: [],
data: [
{ {
name: "VPC PublicIP Lnterner in Rate", name: 'Intranet in Rete',
data: [15, 23, 22, 28, 35, 47, 26] data: [15, 23, 22, 28, 35, 47, 26],
}, },
{ {
name: "VPC PublicIP Lnterner Out Rate", name: 'Intranet Out Rete',
data: [25, 13, 32, 18, 45, 27, 36] data: [25, 13, 32, 18, 45, 27, 36],
}
],
data8: [
{
name: "Intranet in Rete",
data: [15, 23, 22, 28, 35, 47, 26]
}, },
{
name: "Intranet Out Rete",
data: [25, 13, 32, 18, 45, 27, 36]
}
], ],
data9: [ },
data9: {
xData: [],
data: [
{ {
name: "Intranet Out Rete", name: 'Intranet Out Rete',
data: [15, 23, 22, 28, 35, 47, 26] data: [15, 23, 22, 28, 35, 47, 26],
} },
], ],
},
visible: false, visible: false,
modalTitle: "", modalTitle: '',
myLine: null myLine: null,
MonitorItem: {},
} }
}, },
created() { created() {
@ -290,9 +301,85 @@ export default {
this.getServerList() this.getServerList()
}, },
methods: { methods: {
// 获取所有监控项的itemId
getMonitorItemId() {
let params = {
sourceId: this.currId,
}
getAction('/alarmItem/alarmItems', params).then((res) => {
if (res.success) {
this.MonitorItem = res.result
this.getMonitorData()
}
})
},
// 获取监控项的数据
getMonitorData() {
for (const key in this.MonitorItem) {
if (this.MonitorItem.hasOwnProperty.call(this.MonitorItem, key)) {
const element = this.MonitorItem[key]
let params = {
itemId: element,
itemType: 0,
start: this.queryParams.startDate,
end: this.queryParams.endDate,
}
if (key === 'cpuUtilization') {
this.getMonitorItemData(params).then((res) => {
this.data1.xData = res.xData
this.data1.data = [
{
name: res.name,
data: res.data,
},
]
})
} else if (key === 'memoryUtilization') {
this.getMonitorItemData(params).then((res) => {
this.data2.xData = res.xData
this.data2.data = [
{
name: res.name,
data: res.data,
},
]
})
} else if (key === 'load') {
this.getMonitorItemData(params).then((res) => {
this.data3.xData = res.xData
this.data3.data = [
{
name: res.name,
data: res.data,
},
]
})
}
}
}
},
getMonitorItemData(params) {
return getAction('/systemMonitor/queryItemHistory', params).then((res) => {
// return res
if (res.success) {
let name = res.result.name
let xData = res.result.list.map((item) => {
return dateFormat(new Date(item.date * 1000), 'hh:mm')
})
let data = res.result.list.map((item) => {
return Number((item.value * 100).toFixed(2))
})
return {
name,
xData,
data,
}
}
})
},
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')
}, },
@ -303,69 +390,71 @@ 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,
} }
}) })
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.getMonitorItemId()
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
onServerChange(val) { onServerChange(val) {
this.currId = val.key this.currId = val.key
this.currLabel = val.label this.currLabel = val.label
this.getMonitorItemId()
}, },
onTimeChange(val) { onTimeChange(val) {
this.getBeforeHours(val) this.getBeforeHours(val)
this.getMonitorData()
}, },
onRangeDateChange(date, dateString) { onRangeDateChange(date, dateString) {
this.queryParams.timer = 0 this.queryParams.timer = 0
this.queryParams.startDate = dateString[0] this.queryParams.startDate = dateString[0]
this.queryParams.endDate = dateString[1] this.queryParams.endDate = dateString[1]
this.getMonitorData()
}, },
drawLine(option) { drawLine(option) {
this.myLine = echarts.init(document.getElementById("common")) this.myLine = echarts.init(document.getElementById('common'))
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) {
@ -378,7 +467,7 @@ export default {
onCancel() { onCancel() {
this.visible = false this.visible = false
this.myLine.clear() this.myLine.clear()
} },
}, },
} }
</script> </script>

523
src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue
View File

@ -1,10 +1,11 @@
<template> <template>
<div style="height: 100%;"> <div style="height: 100%">
<div class="service-search"> <div class="service-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"
@ -18,7 +19,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
@ -32,14 +34,22 @@
<a-col flex="265px"> <a-col flex="265px">
<a-range-picker <a-range-picker
:show-time="true" :show-time="true"
:default-value="[moment(queryParams.startDate), moment(queryParams.endDate)]" :value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
@change="onRangeDateChange" @change="onRangeDateChange"
/> />
</a-col> </a-col>
</a-row> </a-row>
<div class="service-search-btns"> <div class="service-search-btns">
<a-button :class="['service-search-btns-ant', type=='cpu'?'service-search-btns-active':'']" @click="handleCpu">CPU</a-button> <a-button
<a-button :class="['service-search-btns-ant', type=='memory'?'service-search-btns-active':'']" @click="handleMemory">Memory</a-button> :class="['service-search-btns-ant', type == 'cpu' ? 'service-search-btns-active' : '']"
@click="handleCpu"
>CPU</a-button
>
<a-button
:class="['service-search-btns-ant', type == 'memory' ? 'service-search-btns-active' : '']"
@click="handleMemory"
>Memory</a-button
>
</div> </div>
</div> </div>
<div class="service-content"> <div class="service-content">
@ -60,27 +70,27 @@
<a-row :gutter="20"> <a-row :gutter="20">
<a-col :span="12"> <a-col :span="12">
<BoxTitle title="Process CPU usage(%)"> <BoxTitle title="Process CPU usage(%)">
<template slot="right"> <!-- <template slot="right">
<ul class="legend-list"> <ul class="legend-list">
<li v-for="(item, index) in processCpu.legend" :key="index"> <li v-for="(item, index) in processCpu.legend" :key="index">
<div :style="`background:${processCpu.color[index]}`" class="li-icon"></div> <div :style="`background:${processCpu.color[index]}`" class="li-icon"></div>
{{ item }} {{ item }}
</li> </li>
</ul> </ul>
</template> </template> -->
</BoxTitle> </BoxTitle>
<div class="service-content-center-item" id="processCpu"></div> <div class="service-content-center-item" id="processCpu"></div>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<BoxTitle title="Process memory usage(%)"> <BoxTitle title="Process memory usage(%)">
<template slot="right"> <!-- <template slot="right">
<ul class="legend-list"> <ul class="legend-list">
<li v-for="(item, index) in processMenbry.legend" :key="index"> <li v-for="(item, index) in processMenbry.legend" :key="index">
<div :style="`background:${processMenbry.color[index]}`" class="li-icon"></div> <div :style="`background:${processMenbry.color[index]}`" class="li-icon"></div>
{{ item }} {{ item }}
</li> </li>
</ul> </ul>
</template> </template> -->
</BoxTitle> </BoxTitle>
<div class="service-content-center-item" id="menbry"></div> <div class="service-content-center-item" id="menbry"></div>
</a-col> </a-col>
@ -88,7 +98,7 @@
</div> </div>
<div class="service-content-table"> <div class="service-content-table">
<BoxTitle title="Service"></BoxTitle> <BoxTitle title="Service"></BoxTitle>
<div style="padding-top: 15px;"> <div style="padding-top: 10px">
<TableList <TableList
size="middle" size="middle"
rowKey="id" rowKey="id"
@ -107,7 +117,10 @@
show-size-changer show-size-changer
show-quick-jumper show-quick-jumper
:total="ipagination.total" :total="ipagination.total"
:show-total="(total, range) => `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`" :show-total="
(total, range) =>
`Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
"
show-less-items show-less-items
@change="handlePageChange" @change="handlePageChange"
@showSizeChange="handleSizeChange" @showSizeChange="handleSizeChange"
@ -119,88 +132,100 @@
</template> </template>
<script> <script>
import moment from 'moment'; import moment from 'moment'
import BoxTitle from '../../components/boxTitle.vue'; import BoxTitle from '../../components/boxTitle.vue'
import TableList from '../../components/tableList.vue'; import TableList from '../../components/tableList.vue'
import dateFormat from '@/components/jeecg/JEasyCron/format-date' import dateFormat from '@/components/jeecg/JEasyCron/format-date'
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage' import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
import * as echarts from 'echarts' import * as echarts from 'echarts'
const columns = [{ const columns = [
{
title: 'STATUS', title: 'STATUS',
align: 'left', align: 'left',
dataIndex: 'status', dataIndex: 'status',
// width: 250, // width: 250,
},{ },
{
title: 'SERVICE NAME', title: 'SERVICE NAME',
align: 'left', align: 'left',
dataIndex: 'name', dataIndex: 'name',
// width: 250, // width: 250,
},{ },
{
title: 'ASSOCIATED PROCESS', title: 'ASSOCIATED PROCESS',
align: 'left', align: 'left',
dataIndex: 'process', dataIndex: 'process',
// width: 250, // width: 250,
},{ },
{
title: 'CPU(%)', title: 'CPU(%)',
align: 'left', align: 'left',
dataIndex: 'cpu', dataIndex: 'cpu',
// width: 250, // width: 250,
},{ },
{
title: 'MENORY', title: 'MENORY',
align: 'left', align: 'left',
dataIndex: 'menory', dataIndex: 'menory',
// width: 250, // width: 250,
},{ },
{
title: 'INSTANCE', title: 'INSTANCE',
align: 'left', align: 'left',
dataIndex: 'instance', dataIndex: 'instance',
// width: 250, // width: 250,
},{ },
{
title: 'THREAD COUNT', title: 'THREAD COUNT',
align: 'left', align: 'left',
dataIndex: 'threadCount', dataIndex: 'threadCount',
// width: 250, // width: 250,
},{ },
{
title: 'PROCESSING COUNT', title: 'PROCESSING COUNT',
align: 'left', align: 'left',
dataIndex: 'processongCount', dataIndex: 'processongCount',
// width: 250, // width: 250,
} },
] ]
export default { export default {
components: { components: {
BoxTitle, BoxTitle,
TableList TableList,
}, },
data() { data() {
return { return {
type: "cpu", type: 'cpu',
queryParams: { queryParams: {
server: undefined, server: undefined,
timer: "1h", timer: 1,
startDate: dateFormat(new Date(), 'yyyy-MM-dd'), startDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
endDate: dateFormat(new Date(), 'yyyy-MM-dd') endDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
}, },
serverOptions: [], serverOptions: [],
timerOptions: [ timerOptions: [
{label: "1Hours",value: "1h"}, { label: '1Hours', value: 1 },
{label: "2Hours",value: "2h"}, { label: '2Hours', value: 2 },
{label: "3Hours",value: "3h"}, { label: '3Hours', value: 3 },
], ],
ranked: { ranked: {
content: null, content: null,
legend: ["NemuHeadless.exe","System","dwm.exe","CompatTelRunner.exe","msedge.exe"], legend: [],
color: ['#2d5cd3','#60cae8','#1ab060','#ffbf44','#e86954'] color: ['#2d5cd3', '#f4ff7d', '#60cae8', '#1ab060', '#ffbf44', '#e86954', 'red'],
}, },
processCpu: { processCpu: {
content: null, content: null,
legend: ["mysqld.exe","svchost.exe"], legend: ['mysqld.exe', 'svchost.exe'],
color: ['#e5ae2d','#00a8ff'] color: ['#2d5cd3', '#60cae8', '#1ab060', '#ffbf44', '#e86954', 'red'],
xData: [],
data: [],
}, },
processMenbry: { processMenbry: {
content: null, content: null,
legend: ["mysqld.exe","svchost.exe"], legend: ['mysqld.exe', 'svchost.exe'],
color: ['#9ed24d','#00a8ff'] color: ['#2d5cd3', '#60cae8', '#1ab060', '#ffbf44', '#e86954', 'red'],
xData: [],
data: [],
}, },
columns, columns,
loading: false, loading: false,
@ -215,342 +240,382 @@ export default {
}, },
showQuickJumper: true, showQuickJumper: true,
showSizeChanger: true, showSizeChanger: true,
total: 0 total: 0,
}, },
xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
rankData: {},
} }
}, },
created() {
this.getBeforeHours(1)
},
mounted() { mounted() {
this.getServerList() this.getServerList()
this.$nextTick(() => { this.$nextTick(() => {
setTimeout(() => { setTimeout(() => {}, 0)
this.drawRanked()
this.drawProcesCpu()
this.drawProcesMenbry()
},0)
}) })
}, },
methods: { methods: {
// Top-ranked processes in the last hour
getRankProcesses() {
this.ranked.content && this.ranked.content.clear()
this.processCpu.content && this.processCpu.content.clear()
this.processMenbry.content && this.processMenbry.content.clear()
let params = {
hostId: this.queryParams.server || '10483',
pageName: 'serviceAndProcess',
start: this.queryParams.startDate,
end: this.queryParams.endDate,
}
getAction('/systemMonitor/queryHostDetails', params).then((res) => {
this.list = res.result
this.listData = {
list: this.num === 0 ? this.list.cpu : this.list.memory,
type: this.num === 0 ? 'CPU' : '内存',
}
let cpu_xData = res.result.cpu[0].list.map((item) => {
return dateFormat(new Date(item.date * 1000), 'hh:mm')
})
let cpu_Data = res.result.cpu.map((item) => {
return {
name: item.name,
data: item.list.map((el) => Number((el.value * 100).toFixed(2))),
}
})
let cpu_legend = res.result.cpu.map((item) => {
return item.name
})
let memory_xData = res.result.memory[0].list.map((item) => {
return dateFormat(new Date(item.date * 1000), 'hh:mm')
})
let memory_Data = res.result.memory.map((item) => {
return {
name: item.name,
data: item.list.map((el) => Number((el.value * 100).toFixed(2))),
}
})
let memory_legend = res.result.memory.map((item) => {
return item.name
})
this.rankData = {
type: this.type === 'cpu' ? 'CPU' : 'Memory',
cpu_xData,
cpu_Data,
memory_xData,
memory_Data,
}
this.ranked.legend = this.type === 'cpu' ? cpu_legend : memory_legend
this.processCpu.xData = cpu_xData
// this.processCpu.data = res.result.cpu.map((item) => {
// return {
// name: item.name,
// data: item.list.map((el) => el.value),
// }
// })
this.processCpu.data = cpu_Data
this.processMenbry.xData = memory_xData
// this.processMenbry.data = res.result.memory.map((item) => {
// return {
// name: item.name,
// data: item.list.map((el) => el.value),
// }
// })
this.processMenbry.data = memory_Data
this.drawRanked()
this.drawProcesCpu()
this.drawProcesMenbry()
})
},
getBeforeHours(num) {
let currentTime = moment()
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')
console.log(this.queryParams)
},
moment, moment,
onRangeDateChange(date, dateString) { onRangeDateChange(date, dateString) {
this.queryParams.startDate = dateString[0] this.queryParams.startDate = dateString[0]
this.queryParams.endDate = dateString[1] this.queryParams.endDate = dateString[1]
this.getRankProcesses()
}, },
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.hostId,
} }
}) })
this.queryParams.server = this.$route.query.serverId || res.result[0].sourceId let serverId = this.$route.query.serverId
this.queryParams.server = '10483'
// this.serverOptions.find((item) => item.sourceId === serverId).hostId || res.result[0].hostId
this.getRankProcesses()
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
onServerChange(val) { onServerChange(val) {
console.log(val); this.queryParams.server = val
this.getRankProcesses()
}, },
onTimeChange(val) { onTimeChange(val) {
console.log(val); this.getBeforeHours(val)
this.getRankProcesses()
}, },
handleCpu() { handleCpu() {
this.type = "cpu" this.type = 'cpu'
this.ranked.content.clear()
this.drawRanked()
}, },
handleMemory() { handleMemory() {
this.type = "memory" this.type = 'memory'
this.ranked.content.clear()
this.drawRanked()
}, },
drawRanked() { drawRanked() {
this.ranked.content = echarts.init(document.getElementById("ranked")) this.ranked.content = echarts.init(document.getElementById('ranked'))
let xData = this.type === 'cpu' ? this.rankData.cpu_xData : this.rankData.memory_xData
let option = { let option = {
color: this.ranked.color, color: this.ranked.color,
tooltip: { tooltip: {
trigger: 'item' trigger: 'item',
}, },
grid: { grid: {
left: 25, left: 25,
right: 0, right: 0,
top: 15, top: 15,
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) => {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] if (index === 0) {
return ' ' + value
} }
if (index === xData.length - 1) {
return value + ' '
}
return value
},
},
data: xData,
},
], ],
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
name: "CPU utilization", name: `${this.type == 'cpu' ? 'CPU' : 'Memory'} utilization`,
nameLocation: "middle", nameLocation: 'middle',
nameTextStyle: { nameTextStyle: {
color: "#5b9cba", color: '#5b9cba',
fontFamily: "ArialMT", fontFamily: 'ArialMT',
fontSize: 14 fontSize: 14,
}, },
nameGap: 35, nameGap: 35,
splitLine: { splitLine: {
show: true, show: true,
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)',
},
}, },
}
], ],
series: [ series: [],
{ }
name: 'Baidu', if (this.type === 'cpu') {
option.series = this.rankData.cpu_Data.map((item) => {
return {
name: item.name,
type: 'bar', type: 'bar',
barWidth: 20, stack: 'cpu',
stack: 'Search Engine', data: item.data,
// emphasis: { }
// focus: 'series' })
// }, } else {
data: [20, 32, 71, 34, 90, 30,92] option.series = this.rankData.memory_Data.map((item) => {
}, return {
{ name: item.name,
name: 'Google',
type: 'bar', type: 'bar',
stack: 'Search Engine', stack: 'memory',
// emphasis: { data: item.data,
// focus: 'series' }
// }, })
data: [12, 25, 46, 34, 29, 23,64] }
},
{
name: 'Bing',
type: 'bar',
stack: 'Search Engine',
// emphasis: {
// focus: 'series'
// },
data: [60, 72, 71, 74, 90, 13,43]
},
{
name: 'Others',
type: 'bar',
stack: 'Search Engine',
// emphasis: {
// focus: 'series'
// },
data: [62, 82, 91, 84, 19, 11, 55]
},
{
name: 'adf',
type: 'bar',
barWidth: 20,
stack: 'Search Engine',
// emphasis: {
// focus: 'series'
// },
data: [20, 32, 71, 34, 90, 30,92]
},
]
};
this.ranked.content.setOption(option) this.ranked.content.setOption(option)
window.addEventListener("resize", function () { window.addEventListener('resize', function () {
this.ranked.content.resize(); this.ranked.content.resize()
}); })
}, },
drawProcesCpu() { drawProcesCpu() {
this.processCpu.content = echarts.init(document.getElementById("processCpu")) this.processCpu.content = echarts.init(document.getElementById('processCpu'))
let option = { let option = {
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis',
}, },
grid: { grid: {
left: 0, left: 0,
right: 0, right: 0,
top: 15, top: 15,
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.processCpu.xData.length - 1) {
return value + ' '; return value + ' '
} }
return value return value
} },
}, },
boundaryGap: false, boundaryGap: false,
data: this.xData data: this.processCpu.xData,
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
splitLine: { splitLine: {
show: true, show: true,
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)',
}, },
}, },
series: [ series: [],
{
type: 'line',
name: 'Email',
symbol: 'none',
itemStyle:{ normal:{color:"#00a8ff"}},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#00a8ff" },
{ offset: 1, color: "rgba(255,255,255,0)" },
]),
},
},
data: [150, 230, 224, 218, 135, 147, 260],
},
{
type: 'line',
name: 'Eml',
symbol: 'none',
itemStyle:{ normal:{color:"#ffbf2e"}},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#ffbf2e" },
{ offset: 1, color: "rgba(255,255,255,0)" },
]),
},
},
data: [820, 932, 901, 934, 1290, 1330, 1320],
} }
] option.series = this.processCpu.data.map((item, index) => {
}; return {
type: 'line',
name: item.name,
symbol: 'none',
itemStyle: { normal: { color: this.processCpu.color[index] } },
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.processCpu.color[index] },
{ offset: 1, color: 'rgba(255,255,255,0)' },
]),
},
},
data: item.data,
}
})
this.processCpu.content.setOption(option) this.processCpu.content.setOption(option)
window.addEventListener("resize", function () { window.addEventListener('resize', function () {
this.processCpu.content.resize(); this.processCpu.content.resize()
}); })
}, },
drawProcesMenbry() { drawProcesMenbry() {
this.processMenbry.content = echarts.init(document.getElementById("menbry")) this.processMenbry.content = echarts.init(document.getElementById('menbry'))
let option = { let option = {
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis',
}, },
grid: { grid: {
left: 0, left: 0,
right: 0, right: 0,
top: 15, top: 15,
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.processMenbry.xData.length - 1) {
return value + ' '; return value + ' '
} }
return value return value
} },
}, },
boundaryGap: false, boundaryGap: false,
data: this.xData data: this.processMenbry.xData,
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
splitLine: { splitLine: {
show: true, show: true,
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)',
}, },
}, },
series: [ series: [],
{
type: 'line',
name: 'Email',
symbol: 'none',
itemStyle:{ normal:{color:"#00a8ff"}},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#00a8ff" },
{ offset: 1, color: "rgba(255,255,255,0)" },
]),
},
},
data: [150, 230, 224, 218, 135, 147, 260],
},
{
type: 'line',
name: 'Eml',
symbol: 'none',
itemStyle:{ normal:{color:"#ffbf2e"}},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#ffbf2e" },
{ offset: 1, color: "rgba(255,255,255,0)" },
]),
},
},
data: [820, 932, 901, 934, 1290, 1330, 1320],
} }
] option.series = this.processMenbry.data.map((item, index) => {
}; return {
type: 'line',
name: item.name,
symbol: 'none',
itemStyle: { normal: { color: this.processCpu.color[index] } },
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.processCpu.color[index] },
{ offset: 1, color: 'rgba(255,255,255,0)' },
]),
},
},
data: item.data,
}
})
this.processMenbry.content.setOption(option) this.processMenbry.content.setOption(option)
window.addEventListener("resize", function () { window.addEventListener('resize', function () {
this.processMenbry.content.resize(); this.processMenbry.content.resize()
}); })
}, },
handlePageChange(page, pageSize) { handlePageChange(page, pageSize) {
this.ipagination.current = page this.ipagination.current = page
@ -562,13 +627,13 @@ export default {
this.ipagination.pageSize = size this.ipagination.pageSize = size
// this.getServerAlarmHistory(this.paramsArg) // this.getServerAlarmHistory(this.paramsArg)
}, },
} },
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.service-search { .service-search {
height: 50px; height: 45px;
border-top: 1px solid rgba(13, 235, 201, 0.3); border-top: 1px solid rgba(13, 235, 201, 0.3);
border-bottom: 1px solid rgba(13, 235, 201, 0.3); border-bottom: 1px solid rgba(13, 235, 201, 0.3);
display: flex; display: flex;
@ -616,7 +681,7 @@ export default {
} }
} }
&-table { &-table {
height: calc(100% - 420px); height: calc(100% - 415px);
position: relative; position: relative;
.ant-pagination { .ant-pagination {
position: absolute; position: absolute;