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

alarm 模块图表页面增加loading效果

Browse Source
This commit is contained in:
任珮宇 2024-01-30 15:22:14 +08:00
parent 875aae28ca
commit 2f00795b75
4 changed files with 702 additions and 767 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,112 +49,114 @@
</div> </div>
</div> </div>
<div class="cpu-content"> <div class="cpu-content">
<a-row :gutter="[20, 15]" style="height: 100%"> <a-spin :spinning="spinning">
<a-col :span="12" style="height: calc(50% + 10px)"> <a-row :gutter="[20, 15]" style="height: 100%">
<div class="cpu-content-item"> <a-col :span="12" style="height: calc(50% + 10px)">
<BoxTitle title="CPU utilizatior"> <div class="cpu-content-item">
<template slot="right"> <BoxTitle title="CPU utilizatior">
<ul> <template slot="right">
<li><span>Avg:</span>{{ cpuUtilization.avg + cpuUtilization.units }}</li> <ul>
<li><span>Min:</span>{{ cpuUtilization.min + cpuUtilization.units }}</li> <li><span>Avg:</span>{{ cpuUtilization.avg + cpuUtilization.units }}</li>
<li><span>Max:</span>{{ cpuUtilization.max + cpuUtilization.units }}</li> <li><span>Min:</span>{{ cpuUtilization.min + cpuUtilization.units }}</li>
</ul> <li><span>Max:</span>{{ cpuUtilization.max + cpuUtilization.units }}</li>
</template> </ul>
<template slot="other"> </template>
<img <template slot="other">
src="@/assets/images/abnormalAlarm/big.png" <img
@click="handelZoom('CPU utilizatior', option1)" src="@/assets/images/abnormalAlarm/big.png"
alt="" @click="handelZoom('CPU utilizatior', option1)"
/> alt=""
</template> />
</BoxTitle> </template>
<div class="cpu-content-item-chart" id="chart1"></div> </BoxTitle>
</div> <div class="cpu-content-item-chart" id="chart1"></div>
</a-col>
<a-col :span="12" style="height: calc(50% + 10px)">
<div class="cpu-content-item">
<BoxTitle title="Percentage of free system space">
<template slot="right">
<ul>
<li><span>Avg:</span>{{ cpuIdleRate.avg + cpuIdleRate.units }}</li>
<li><span>Min:</span>{{ cpuIdleRate.min + cpuIdleRate.units }}</li>
<li><span>Max:</span>{{ cpuIdleRate.max + cpuIdleRate.units }}</li>
</ul>
</template>
<template slot="other">
<img
src="@/assets/images/abnormalAlarm/big.png"
@click="handelZoom('Percentage of free system space', option2)"
alt=""
/>
</template>
</BoxTitle>
<div class="cpu-content-item-chart" id="chart2"></div>
</div>
</a-col>
<a-col :span="12" style="height: calc(50% + 10px)">
<div class="cpu-content-item">
<BoxTitle title="Interrupt and episodic switching">
<template slot="other">
<img
src="@/assets/images/abnormalAlarm/big.png"
@click="handelZoom('Interrupt and episodic switching', option3)"
alt=""
/>
</template>
</BoxTitle>
<div class="cpu-content-item-info">
<a-row style="height: 30px" type="flex">
<a-col flex="170px">Processor interrupt(s)</a-col>
<a-col flex="100px"
>Avg:<span>{{ multiLine.cpuInterrupt.avg + multiLine.cpuInterrupt.units }}</span></a-col
>
<a-col flex="100px"
>Min:<span>{{ multiLine.cpuInterrupt.min + multiLine.cpuInterrupt.units }}</span></a-col
>
<a-col flex="100px"
>Max:<span>{{ multiLine.cpuInterrupt.max + multiLine.cpuInterrupt.units }}</span></a-col
>
<a-col
><div style="background: #00a8ff" class="li-icon"></div>
<i>Processor interrupt</i></a-col
>
</a-row>
<a-row style="height: 30px" type="flex">
<a-col flex="170px">Situational switching(s)</a-col>
<a-col flex="100px"
>Avg:<span>{{ multiLine.cpuSwitch.avg + multiLine.cpuSwitch.units }}</span></a-col
>
<a-col flex="100px"
>Min:<span>{{ multiLine.cpuSwitch.min + multiLine.cpuSwitch.units }}</span></a-col
>
<a-col flex="100px"
>Max:<span>{{ multiLine.cpuSwitch.max + multiLine.cpuSwitch.units }}</span></a-col
>
<a-col
><div style="background: #73b54b" class="li-icon"></div>
<i>Situational switching(s)</i></a-col
>
</a-row>
</div> </div>
<div class="cpu-content-item-chart3" id="chart3"></div> </a-col>
</div> <a-col :span="12" style="height: calc(50% + 10px)">
</a-col> <div class="cpu-content-item">
<a-col :span="12" style="height: calc(50% + 10px)"> <BoxTitle title="Percentage of free system space">
<div class="cpu-content-item"> <template slot="right">
<BoxTitle title="CPU usage of diferent cores"> <ul>
<template slot="other"> <li><span>Avg:</span>{{ cpuIdleRate.avg + cpuIdleRate.units }}</li>
<img <li><span>Min:</span>{{ cpuIdleRate.min + cpuIdleRate.units }}</li>
src="@/assets/images/abnormalAlarm/big.png" <li><span>Max:</span>{{ cpuIdleRate.max + cpuIdleRate.units }}</li>
@click="handelZoom('CPU usage of diferent cores', option4)" </ul>
alt="" </template>
/> <template slot="other">
</template> <img
</BoxTitle> src="@/assets/images/abnormalAlarm/big.png"
<div class="cpu-content-item-chart" id="chart4"></div> @click="handelZoom('Percentage of free system space', option2)"
</div> alt=""
</a-col> />
</a-row> </template>
</BoxTitle>
<div class="cpu-content-item-chart" id="chart2"></div>
</div>
</a-col>
<a-col :span="12" style="height: calc(50% + 10px)">
<div class="cpu-content-item">
<BoxTitle title="Interrupt and episodic switching">
<template slot="other">
<img
src="@/assets/images/abnormalAlarm/big.png"
@click="handelZoom('Interrupt and episodic switching', option3)"
alt=""
/>
</template>
</BoxTitle>
<div class="cpu-content-item-info">
<a-row style="height: 30px" type="flex">
<a-col flex="170px">Processor interrupt(s)</a-col>
<a-col flex="100px"
>Avg:<span>{{ multiLine.cpuInterrupt.avg + multiLine.cpuInterrupt.units }}</span></a-col
>
<a-col flex="100px"
>Min:<span>{{ multiLine.cpuInterrupt.min + multiLine.cpuInterrupt.units }}</span></a-col
>
<a-col flex="100px"
>Max:<span>{{ multiLine.cpuInterrupt.max + multiLine.cpuInterrupt.units }}</span></a-col
>
<a-col
><div style="background: #00a8ff" class="li-icon"></div>
<i>Processor interrupt</i></a-col
>
</a-row>
<a-row style="height: 30px" type="flex">
<a-col flex="170px">Situational switching(s)</a-col>
<a-col flex="100px"
>Avg:<span>{{ multiLine.cpuSwitch.avg + multiLine.cpuSwitch.units }}</span></a-col
>
<a-col flex="100px"
>Min:<span>{{ multiLine.cpuSwitch.min + multiLine.cpuSwitch.units }}</span></a-col
>
<a-col flex="100px"
>Max:<span>{{ multiLine.cpuSwitch.max + multiLine.cpuSwitch.units }}</span></a-col
>
<a-col
><div style="background: #73b54b" class="li-icon"></div>
<i>Situational switching(s)</i></a-col
>
</a-row>
</div>
<div class="cpu-content-item-chart3" id="chart3"></div>
</div>
</a-col>
<a-col :span="12" style="height: calc(50% + 10px)">
<div class="cpu-content-item">
<BoxTitle title="CPU usage of diferent cores">
<template slot="other">
<img
src="@/assets/images/abnormalAlarm/big.png"
@click="handelZoom('CPU usage of diferent cores', option4)"
alt=""
/>
</template>
</BoxTitle>
<div class="cpu-content-item-chart" id="chart4"></div>
</div>
</a-col>
</a-row>
</a-spin>
</div> </div>
<a-modal :title="modalTitle" :width="1200" v-model="visible" :maskClosable="false" @cancel="onCancel"> <a-modal :title="modalTitle" :width="1200" v-model="visible" :maskClosable="false" @cancel="onCancel">
<div class="modal-content" id="common_cpu"></div> <div class="modal-content" id="common_cpu"></div>
@ -176,7 +178,7 @@ 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 } from '@/api/manage'
export default { export default {
components: { components: {
BoxTitle, BoxTitle,
@ -184,6 +186,7 @@ export default {
}, },
data() { data() {
return { return {
spinning: false,
currId: '', currId: '',
visible_rule: false, visible_rule: false,
currLabel: '', currLabel: '',
@ -251,58 +254,63 @@ export default {
start: this.queryParams.startDate, start: this.queryParams.startDate,
end: this.queryParams.endDate, end: this.queryParams.endDate,
} }
getAction('/systemMonitor/queryHostDetails', params).then((res) => { this.spinning = true
const data = res.result getAction('/systemMonitor/queryHostDetails', params)
//CPU utilizatior .then((res) => {
this.cpuUtilization = data.find((item) => item.name === 'cpuUtilization') const data = res.result
this.cpuUtilization_xData = this.cpuUtilization.list.map((item) => { //CPU utilizatior
return dateFormat(new Date(item.date * 1000), 'hh:mm') this.cpuUtilization = data.find((item) => item.name === 'cpuUtilization')
}) this.cpuUtilization_xData = this.cpuUtilization.list.map((item) => {
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') return dateFormat(new Date(item.date * 1000), 'hh:mm')
})) })
this.cpuInterrupt_data = this.multiLine.cpuInterrupt.list.map((item) => { this.cpuUtilization_data = this.cpuUtilization.list.map((item) => {
return Number(item.value.toFixed(2)) return Number(item.value.toFixed(2))
}) })
this.cpuSwitch_data = this.multiLine.cpuSwitch.list.map((item) => { //Percentage of free system space
return Number(item.value.toFixed(2)) this.cpuIdleRate = data.find((item) => item.name === 'cpuIdleRate')
}) this.cpuIdleRate_xData = this.cpuIdleRate.list.map((item) => {
//总CPU使用率 return dateFormat(new Date(item.date * 1000), 'hh:mm')
let totalCpu = [] })
data.map((item) => { this.cpuIdleRate_data = this.cpuIdleRate.list.map((item) => {
if (item.name.search('cpuUtilization_') != -1) { return Number(item.value.toFixed(2))
totalCpu.push(item) })
} // Interrupt and episodic switching
}) ;(this.multiLine.cpuInterrupt = data.find((item) => item.name === 'cpuInterrupt')),
this.cpuDiff_xData = totalCpu[0].list.map((item) => { (this.multiLine.cpuSwitch = data.find((item) => item.name === 'cpuSwitch')),
return dateFormat(new Date(item.date * 1000), 'hh:mm') (this.multiLine_xData = this.multiLine.cpuInterrupt.list.map((item) => {
}) return dateFormat(new Date(item.date * 1000), 'hh:mm')
this.cpuDiff_data = totalCpu.map((item) => { }))
return { this.cpuInterrupt_data = this.multiLine.cpuInterrupt.list.map((item) => {
name: item.name, return Number(item.value.toFixed(2))
data: item.list.map((el) => Number(el.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)
}
})
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()
}) })
.finally(() => {
this.spinning = false
})
}, },
getBeforeHours(num) { getBeforeHours(num) {
let currentTime = moment() let currentTime = moment()
@ -828,6 +836,14 @@ export default {
height: calc(100% - 60px); height: calc(100% - 60px);
margin-top: 10px; margin-top: 10px;
overflow: hidden; overflow: hidden;
/deep/.ant-spin-nested-loading {
width: 100%;
height: 100%;
}
/deep/.ant-spin-container {
width: 100%;
height: 100%;
}
&-item { &-item {
width: 100%; width: 100%;
height: 100%; height: 100%;

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

@ -1,364 +1,360 @@
<template> <template>
<div style="height: 100%"> <div style="height: 100%">
<div class="content-top"> <a-spin :spinning="spinning">
<div style="width: calc(100% - 562px)"> <div class="content-top">
<BoxTitle title="Basic lnformation"></BoxTitle> <div style="width: calc(100% - 562px)">
<div class="basic-info"> <BoxTitle title="Basic lnformation"></BoxTitle>
<div <div class="basic-info">
class="basic-info-list" <div
v-infinite-scroll="handleInfiniteOnLoad" class="basic-info-list"
:infinite-scroll-disabled="busy" v-infinite-scroll="handleInfiniteOnLoad"
:infinite-scroll-distance="5" :infinite-scroll-disabled="busy"
> :infinite-scroll-distance="5"
<a-list :dataSource="dataSource"> >
<a-list-item <a-list :dataSource="dataSource">
:class="{ 'ant-list-item-active': index === currIndex }" <a-list-item
slot="renderItem" :class="{ 'ant-list-item-active': index === currIndex }"
slot-scope="item, index" slot="renderItem"
@click="handleBasicItem(index, item)" slot-scope="item, index"
> @click="handleBasicItem(index, item)"
<div>{{ item.sourceName }}</div> >
</a-list-item> <div>{{ item.sourceName }}</div>
</a-list> </a-list-item>
</a-list>
<div v-if="loading && !busy" class="demo-loading-container"> <div v-if="loading && !busy" class="demo-loading-container">
<a-spin /> <a-spin />
</div>
</div> </div>
</div> <div class="basic-info-detail">
<div class="basic-info-detail"> <a-row :gutter="10" style="height: 40px">
<a-row :gutter="10" style="height: 40px"> <a-col :span="6" style="height: 100%">
<a-col :span="6" style="height: 100%"> <div class="basic-info-detail-col">
<div class="basic-info-detail-col"> <div class="basic-info-detail-col-img">
<div class="basic-info-detail-col-img"> <img src="~@/assets/images/abnormalAlarm/running.png" alt="" />
<img src="~@/assets/images/abnormalAlarm/running.png" alt="" />
</div>
<div class="basic-info-detail-col-msg">
<div class="basic-info-detail-col-msg-title">
<div class="circle"></div>
<div class="title">running state</div>
</div> </div>
<div class="basic-info-detail-col-msg-num state"> <div class="basic-info-detail-col-msg">
{{ `${detailInfo.runningState ? 'NORMAL' : 'ERROR'}` }} <div class="basic-info-detail-col-msg-title">
<div class="circle"></div>
<div class="title">running state</div>
</div>
<div class="basic-info-detail-col-msg-num state">
{{ `${detailInfo.runningState ? 'NORMAL' : 'ERROR'}` }}
</div>
</div> </div>
</div> </div>
</div> </a-col>
</a-col> <a-col :span="5" style="height: 100%">
<a-col :span="5" style="height: 100%"> <div class="basic-info-detail-col">
<div class="basic-info-detail-col"> <div class="basic-info-detail-col-img">
<div class="basic-info-detail-col-img"> <img src="~@/assets/images/abnormalAlarm/alarm.png" alt="" />
<img src="~@/assets/images/abnormalAlarm/alarm.png" alt="" />
</div>
<div class="basic-info-detail-col-msg">
<div class="basic-info-detail-col-msg-title">
<div class="circle"></div>
<div class="title">Alarm SMS</div>
</div> </div>
<div class="basic-info-detail-col-msg-num">{{ detailInfo.alarmSms }}</div> <div class="basic-info-detail-col-msg">
</div> <div class="basic-info-detail-col-msg-title">
</div> <div class="circle"></div>
</a-col> <div class="title">Alarm SMS</div>
<a-col :span="6" style="height: 100%; padding-left: 12px"> </div>
<div class="basic-info-detail-col"> <div class="basic-info-detail-col-msg-num">{{ detailInfo.alarmSms }}</div>
<div class="basic-info-detail-col-img">
<img src="~@/assets/images/abnormalAlarm/email.png" alt="" />
</div>
<div class="basic-info-detail-col-msg">
<div class="basic-info-detail-col-msg-title">
<div class="circle"></div>
<div class="title">Alarm email</div>
</div> </div>
<div class="basic-info-detail-col-msg-num">{{ detailInfo.alarmEmail }}</div>
</div> </div>
</div> </a-col>
</a-col> <a-col :span="6" style="height: 100%; padding-left: 12px">
<a-col :span="7" style="height: 100%"> <div class="basic-info-detail-col">
<div class="basic-info-detail-col"> <div class="basic-info-detail-col-img">
<div class="basic-info-detail-col-img"> <img src="~@/assets/images/abnormalAlarm/email.png" alt="" />
<img src="~@/assets/images/abnormalAlarm/warning.png" alt="" />
</div>
<div class="basic-info-detail-col-msg">
<div class="basic-info-detail-col-msg-title">
<div class="circle"></div>
<div class="title">Number of alarms</div>
</div> </div>
<div class="basic-info-detail-col-msg-num">{{ detailInfo.alarms }}</div> <div class="basic-info-detail-col-msg">
</div> <div class="basic-info-detail-col-msg-title">
</div> <div class="circle"></div>
</a-col> <div class="title">Alarm email</div>
</a-row> </div>
<a-row :gutter="10" style="height: 40px; margin-top: 10px"> <div class="basic-info-detail-col-msg-num">{{ detailInfo.alarmEmail }}</div>
<a-col :span="6" style="height: 100%">
<div class="basic-info-detail-col">
<div class="basic-info-detail-col-img">
<img src="~@/assets/images/abnormalAlarm/times.png" alt="" />
</div>
<div class="basic-info-detail-col-msg">
<div class="basic-info-detail-col-msg-title">
<div class="circle"></div>
<div class="title">Run time</div>
</div> </div>
<div class="basic-info-detail-col-msg-num">{{ detailInfo.runTime }}</div>
</div> </div>
</div> </a-col>
</a-col> <a-col :span="7" style="height: 100%">
<a-col :span="5" style="height: 100%"> <div class="basic-info-detail-col">
<div class="basic-info-detail-col"> <div class="basic-info-detail-col-img">
<div class="basic-info-detail-col-img"> <img src="~@/assets/images/abnormalAlarm/warning.png" alt="" />
<img src="~@/assets/images/abnormalAlarm/ram.png" alt="" />
</div>
<div class="basic-info-detail-col-msg">
<div class="basic-info-detail-col-msg-title">
<div class="circle"></div>
<div class="title">RAM Size</div>
</div> </div>
<div class="basic-info-detail-col-msg-num">{{ detailInfo.ramSize }}</div> <div class="basic-info-detail-col-msg">
</div> <div class="basic-info-detail-col-msg-title">
</div> <div class="circle"></div>
</a-col> <div class="title">Number of alarms</div>
<a-col :span="6" style="height: 100%; padding-left: 12px"> </div>
<div class="basic-info-detail-col"> <div class="basic-info-detail-col-msg-num">{{ detailInfo.alarms }}</div>
<div class="basic-info-detail-col-img">
<img src="~@/assets/images/abnormalAlarm/cpu.png" alt="" />
</div>
<div class="basic-info-detail-col-msg">
<div class="basic-info-detail-col-msg-title">
<div class="circle"></div>
<div class="title">CPU Cores</div>
</div> </div>
<div class="basic-info-detail-col-msg-num">{{ detailInfo.cpuCores }}</div>
</div> </div>
</div> </a-col>
</a-col> </a-row>
<a-col :span="7" style="height: 100%"> <a-row :gutter="10" style="height: 40px; margin-top: 10px">
<div class="basic-info-detail-col"> <a-col :span="6" style="height: 100%">
<div class="basic-info-detail-col-img"> <div class="basic-info-detail-col">
<img src="~@/assets/images/abnormalAlarm/partition.png" alt="" /> <div class="basic-info-detail-col-img">
</div> <img src="~@/assets/images/abnormalAlarm/times.png" alt="" />
<div class="basic-info-detail-col-msg"> </div>
<div class="basic-info-detail-col-msg-title"> <div class="basic-info-detail-col-msg">
<div class="circle"></div> <div class="basic-info-detail-col-msg-title">
<div class="title">Total Disk Partition</div> <div class="circle"></div>
<div class="title">Run time</div>
</div>
<div class="basic-info-detail-col-msg-num">{{ detailInfo.runTime }}</div>
</div> </div>
<div class="basic-info-detail-col-msg-num">{{ detailInfo.totalDiskPar }}</div>
</div> </div>
</div> </a-col>
</a-col> <a-col :span="5" style="height: 100%">
</a-row> <div class="basic-info-detail-col">
<div class="basic-info-detail-content"> <div class="basic-info-detail-col-img">
<a-row style="height: 100%"> <img src="~@/assets/images/abnormalAlarm/ram.png" alt="" />
<a-col :span="12"> </div>
<a-row style="height: 26px"> <div class="basic-info-detail-col-msg">
<a-col :span="12" style="height: 26px"> <div class="basic-info-detail-col-msg-title">
<a-row style="height: 100%"> <div class="circle"></div>
<a-col :span="12" class="basic-info-detail-content-key">Host Name:</a-col> <div class="title">RAM Size</div>
<a-col :span="12" class="basic-info-detail-content-val">{{ detailInfo.hostName }}</a-col> </div>
</a-row> <div class="basic-info-detail-col-msg-num">{{ detailInfo.ramSize }}</div>
</a-col> </div>
<a-col :span="12" style="height: 26px"> </div>
<a-row style="height: 100%"> </a-col>
<a-col :span="12" class="basic-info-detail-content-key">Bios Version:</a-col> <a-col :span="6" style="height: 100%; padding-left: 12px">
<a-col :span="12" class="basic-info-detail-content-val">FX705GM.307</a-col> <div class="basic-info-detail-col">
<!-- <a-col :span="12" class="basic-info-detail-content-key">OS Version:</a-col> <div class="basic-info-detail-col-img">
<img src="~@/assets/images/abnormalAlarm/cpu.png" alt="" />
</div>
<div class="basic-info-detail-col-msg">
<div class="basic-info-detail-col-msg-title">
<div class="circle"></div>
<div class="title">CPU Cores</div>
</div>
<div class="basic-info-detail-col-msg-num">{{ detailInfo.cpuCores }}</div>
</div>
</div>
</a-col>
<a-col :span="7" style="height: 100%">
<div class="basic-info-detail-col">
<div class="basic-info-detail-col-img">
<img src="~@/assets/images/abnormalAlarm/partition.png" alt="" />
</div>
<div class="basic-info-detail-col-msg">
<div class="basic-info-detail-col-msg-title">
<div class="circle"></div>
<div class="title">Total Disk Partition</div>
</div>
<div class="basic-info-detail-col-msg-num">{{ detailInfo.totalDiskPar }}</div>
</div>
</div>
</a-col>
</a-row>
<div class="basic-info-detail-content">
<a-row style="height: 100%">
<a-col :span="12">
<a-row style="height: 26px">
<a-col :span="12" style="height: 26px">
<a-row style="height: 100%">
<a-col :span="12" class="basic-info-detail-content-key">Host Name:</a-col>
<a-col :span="12" class="basic-info-detail-content-val">{{ detailInfo.hostName }}</a-col>
</a-row>
</a-col>
<a-col :span="12" style="height: 26px">
<a-row style="height: 100%">
<a-col :span="12" class="basic-info-detail-content-key">Bios Version:</a-col>
<a-col :span="12" class="basic-info-detail-content-val">FX705GM.307</a-col>
<!-- <a-col :span="12" class="basic-info-detail-content-key">OS Version:</a-col>
<a-col :span="12" class="basic-info-detail-content-val">{{ detailInfo.osVersion }}</a-col> --> <a-col :span="12" class="basic-info-detail-content-val">{{ detailInfo.osVersion }}</a-col> -->
</a-row> </a-row>
</a-col> </a-col>
</a-row> </a-row>
<a-row style="height: 26px"> <a-row style="height: 26px">
<a-col :span="12" style="height: 26px"> <a-col :span="12" style="height: 26px">
<a-row style="height: 100%"> <a-row style="height: 100%">
<a-col :span="12" class="basic-info-detail-content-key">IP Address:</a-col> <a-col :span="12" class="basic-info-detail-content-key">IP Address:</a-col>
<a-col :span="12" class="basic-info-detail-content-val">{{ detailInfo.ip }}</a-col> <a-col :span="12" class="basic-info-detail-content-val">{{ detailInfo.ip }}</a-col>
</a-row> </a-row>
</a-col> </a-col>
<a-col :span="12" style="height: 26px"> <a-col :span="12" style="height: 26px">
<a-row style="height: 100%"> <a-row style="height: 100%">
<a-col :span="12" class="basic-info-detail-content-key">Kernel version:</a-col> <a-col :span="12" class="basic-info-detail-content-key">Kernel version:</a-col>
<a-col :span="12" class="basic-info-detail-content-val">2000</a-col> <a-col :span="12" class="basic-info-detail-content-val">2000</a-col>
</a-row> </a-row>
</a-col> </a-col>
</a-row> </a-row>
<a-row style="height: 26px"> <a-row style="height: 26px">
<a-col :span="4" style="height: 26px" class="basic-info-detail-content-key">OS Name:</a-col> <a-col :span="4" style="height: 26px" class="basic-info-detail-content-key">OS Name:</a-col>
<a-col :span="20" style="height: 26px" class="basic-info-detail-content-val"> <a-col :span="20" style="height: 26px" class="basic-info-detail-content-val">
{{ detailInfo.osName }} {{ detailInfo.osName }}
</a-col> </a-col>
<!-- <a-col :span="12" style="height: 26px"> <!-- <a-col :span="12" style="height: 26px">
<a-row style="height: 100%"> <a-row style="height: 100%">
<a-col :span="12" class="basic-info-detail-content-key">OS Name:</a-col> <a-col :span="12" class="basic-info-detail-content-key">OS Name:</a-col>
<a-col :span="12" class="basic-info-detail-content-val">{{ detailInfo.osName }}</a-col> <a-col :span="12" class="basic-info-detail-content-val">{{ detailInfo.osName }}</a-col>
</a-row> </a-row>
</a-col> --> </a-col> -->
<!-- <a-col :span="12" style="height: 26px"> <!-- <a-col :span="12" style="height: 26px">
<a-row style="height: 100%"> <a-row style="height: 100%">
<a-col :span="12" class="basic-info-detail-content-key">Bios Version:</a-col> <a-col :span="12" class="basic-info-detail-content-key">Bios Version:</a-col>
<a-col :span="12" class="basic-info-detail-content-val">FX705GM.307</a-col> <a-col :span="12" class="basic-info-detail-content-val">FX705GM.307</a-col>
</a-row> </a-row>
</a-col> --> </a-col> -->
</a-row> </a-row>
<a-row style="height: 26px"> <a-row style="height: 26px">
<a-col :span="4" style="height: 26px" class="basic-info-detail-content-key">CPU:</a-col> <a-col :span="4" style="height: 26px" class="basic-info-detail-content-key">CPU:</a-col>
<a-col :span="20" style="height: 26px" class="basic-info-detail-content-val"> <a-col :span="20" style="height: 26px" class="basic-info-detail-content-val">
{{ detailInfo.cpuType }} {{ detailInfo.cpuType }}
</a-col> </a-col>
</a-row> </a-row>
<a-row style="height: 26px"> <a-row style="height: 26px">
<a-col :span="6" style="height: 26px" class="basic-info-detail-content-key">Manufacturer:</a-col> <a-col :span="6" style="height: 26px" class="basic-info-detail-content-key">Manufacturer:</a-col>
<a-col :span="18" style="height: 26px" class="basic-info-detail-content-val" <a-col :span="18" style="height: 26px" class="basic-info-detail-content-val"
>ASUSTeK COMPUTER INC.</a-col >ASUSTeK COMPUTER INC.</a-col
> >
</a-row> </a-row>
<a-row style="height: 26px"> <a-row style="height: 26px">
<a-col :span="8" style="height: 26px" class="basic-info-detail-content-key" <a-col :span="8" style="height: 26px" class="basic-info-detail-content-key"
>Server Agent Path:</a-col >Server Agent Path:</a-col
> >
<a-col :span="16" style="height: 26px" class="basic-info-detail-content-val" <a-col :span="16" style="height: 26px" class="basic-info-detail-content-val"
>C:\Agent\Default\Desktop</a-col >C:\Agent\Default\Desktop</a-col
> >
</a-row> </a-row>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-row style="height: 26px"> <a-row style="height: 26px">
<a-col :span="11" style="height: 26px"> <a-col :span="11" style="height: 26px">
<a-row style="height: 100%"> <a-row style="height: 100%">
<a-col :span="18" class="basic-info-detail-content-key">Network Lnterface:</a-col> <a-col :span="18" class="basic-info-detail-content-key">Network Lnterface:</a-col>
<a-col :span="6" class="basic-info-detail-content-val">{{ detailInfo.network }}</a-col> <a-col :span="6" class="basic-info-detail-content-val">{{ detailInfo.network }}</a-col>
</a-row> </a-row>
</a-col> </a-col>
<a-col :span="13" style="height: 26px"> <a-col :span="13" style="height: 26px">
<a-row style="height: 100%"> <a-row style="height: 100%">
<a-col :span="15" class="basic-info-detail-content-key">Location:</a-col> <a-col :span="15" class="basic-info-detail-content-key">Location:</a-col>
<a-col :span="9" class="basic-info-detail-content-val">{{ detailInfo.location }}</a-col> <a-col :span="9" class="basic-info-detail-content-val">{{ detailInfo.location }}</a-col>
</a-row> </a-row>
</a-col> </a-col>
</a-row> </a-row>
<a-row style="height: 26px"> <a-row style="height: 26px">
<a-col :span="11" style="height: 26px"> <a-col :span="11" style="height: 26px">
<a-row style="height: 100%"> <a-row style="height: 100%">
<a-col :span="18" class="basic-info-detail-content-key">Time Zone:</a-col> <a-col :span="18" class="basic-info-detail-content-key">Time Zone:</a-col>
<a-col :span="6" class="basic-info-detail-content-val">{{ detailInfo.zone }}</a-col> <a-col :span="6" class="basic-info-detail-content-val">{{ detailInfo.zone }}</a-col>
</a-row> </a-row>
</a-col> </a-col>
<a-col :span="13" style="height: 26px"> <a-col :span="13" style="height: 26px">
<a-row style="height: 100%"> <a-row style="height: 100%">
<a-col :span="15" class="basic-info-detail-content-key">Server Agent User:</a-col> <a-col :span="15" class="basic-info-detail-content-key">Server Agent User:</a-col>
<a-col :span="9" class="basic-info-detail-content-val">LocalSystem</a-col> <a-col :span="9" class="basic-info-detail-content-val">LocalSystem</a-col>
</a-row> </a-row>
</a-col> </a-col>
</a-row> </a-row>
<a-row style="height: 26px"> <a-row style="height: 26px">
<a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">OS Version:</a-col> <a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">OS Version:</a-col>
<a-col :span="17" style="height: 26px" class="basic-info-detail-content-val" <a-col :span="17" style="height: 26px" class="basic-info-detail-content-val"
>2023-03-01 14:00:01</a-col >2023-03-01 14:00:01</a-col
> >
</a-row> </a-row>
<a-row style="height: 26px"> <a-row style="height: 26px">
<a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">Start Time:</a-col> <a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">Start Time:</a-col>
<a-col :span="17" style="height: 26px" class="basic-info-detail-content-val"> <a-col :span="17" style="height: 26px" class="basic-info-detail-content-val">
{{ detailInfo.osVersion }} {{ detailInfo.osVersion }}
</a-col> </a-col>
</a-row> </a-row>
<a-row style="height: 26px"> <a-row style="height: 26px">
<a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">Model Number:</a-col> <a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">Model Number:</a-col>
<a-col :span="17" style="height: 26px" class="basic-info-detail-content-val" <a-col :span="17" style="height: 26px" class="basic-info-detail-content-val"
>TUF GamingFX705GM_FX86SM</a-col >TUF GamingFX705GM_FX86SM</a-col
> >
</a-row> </a-row>
<a-row style="height: 26px"> <a-row style="height: 26px">
<a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">Bios Supplier:</a-col> <a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">Bios Supplier:</a-col>
<a-col :span="17" style="height: 26px" class="basic-info-detail-content-val" <a-col :span="17" style="height: 26px" class="basic-info-detail-content-val"
>American Megatrends lnc.</a-col >American Megatrends lnc.</a-col
> >
</a-row> </a-row>
</a-col> </a-col>
</a-row> </a-row>
</div>
</div>
</div>
</div>
<div class="alarm-info" style="width: 542px">
<BoxTitle title="Alarm information"></BoxTitle>
<div
class="alarm-info-list"
v-infinite-scroll="handleInfiniteAlarmInfo"
:infinite-scroll-disabled="busy_alarm_info"
:infinite-scroll-distance="10"
>
<a-list :dataSource="dataSource_alarm_info">
<a-list-item slot="renderItem" slot-scope="item">
<img class="alarm-info-list-img" src="@/assets/images/abnormalAlarm/icon-r.png" alt="" />
<div class="alarm-info-list-info" :title="item.alarmInfo">{{ item.alarmInfo }}</div>
<div class="alarm-info-list-date">{{ item.alarmStartDate }}</div>
<!-- <a slot="actions" class="alarm-info-list-actions">Detail</a> -->
</a-list-item>
</a-list>
<div v-if="loading_alarm_info && !busy" class="demo-loading-container">
<a-spin />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="alarm-info" style="width: 542px"> <div class="content-center">
<BoxTitle title="Alarm information"></BoxTitle> <BoxTitle title="Event Timelinen">
<div <template slot="right">
class="alarm-info-list" <ul class="legend-list">
v-infinite-scroll="handleInfiniteAlarmInfo" <li v-for="(item, index) in types" :key="index">
:infinite-scroll-disabled="busy_alarm_info" <div :style="`background:${item.color}`" class="li-icon"></div>
:infinite-scroll-distance="10" {{ item.name }}
> </li>
<a-list :dataSource="dataSource_alarm_info"> </ul>
<a-list-item slot="renderItem" slot-scope="item"> </template>
<img class="alarm-info-list-img" src="@/assets/images/abnormalAlarm/icon-r.png" alt="" /> </BoxTitle>
<div class="alarm-info-list-info" :title="item.alarmInfo">{{ item.alarmInfo }}</div> <div class="line-bg"></div>
<div class="alarm-info-list-date">{{ item.alarmStartDate }}</div> <div class="time-line" id="timeLine"></div>
<!-- <a slot="actions" class="alarm-info-list-actions">Detail</a> --> </div>
</a-list-item> <div class="content-bottom">
</a-list> <div class="content-bottom-left">
<div v-if="loading_alarm_info && !busy" class="demo-loading-container"> <div class="content-bottom-left-top">
<a-spin /> <a-row :gutter="20">
<a-col class="gutter-row" :span="8">
<BoxTitle title="CPU"></BoxTitle>
<div class="gauge-content" id="cpu"></div>
</a-col>
<a-col class="gutter-row" :span="8">
<BoxTitle title="MEMORY"></BoxTitle>
<div class="gauge-content" id="memory"></div>
</a-col>
<a-col class="gutter-row" :span="8">
<BoxTitle title="RESPONSE"></BoxTitle>
<div class="gauge-content" id="responseSuccessRate"></div>
</a-col>
</a-row>
</div>
<div class="content-bottom-left-bottom">
<BoxTitle title="CPU utilization">
<template slot="right">
<div class="right-title">
<div class="right-title-item">
average value:<i>{{ cpuData.avg }}%</i>
</div>
<div class="right-title-item">
minimum value:<i>{{ cpuData.min }}%</i>
</div>
<div class="right-title-item">
Maximum value:<i>{{ cpuData.max }}%</i>
</div>
</div>
</template>
</BoxTitle>
<div class="area-cpu" id="areaCpu"></div>
</div> </div>
</div> </div>
</div> <div style="width: 542px">
</div> <BoxTitle title="DISK"></BoxTitle>
<!-- <div class="Timeline"> <div class="bar-disk" id="disk"></div>
<p>事件时间线</p>
<div>
<div id="timeL" style="width: 100%; height: 140px"></div>
</div>
</div> -->
<div class="content-center">
<BoxTitle title="Event Timelinen">
<template slot="right">
<ul class="legend-list">
<li v-for="(item, index) in types" :key="index">
<div :style="`background:${item.color}`" class="li-icon"></div>
{{ item.name }}
</li>
</ul>
</template>
</BoxTitle>
<div class="line-bg"></div>
<div class="time-line" id="timeLine"></div>
</div>
<div class="content-bottom">
<div class="content-bottom-left">
<div class="content-bottom-left-top">
<a-row :gutter="20">
<a-col class="gutter-row" :span="8">
<BoxTitle title="CPU"></BoxTitle>
<div class="gauge-content" id="cpu"></div>
</a-col>
<a-col class="gutter-row" :span="8">
<BoxTitle title="MEMORY"></BoxTitle>
<div class="gauge-content" id="memory"></div>
</a-col>
<a-col class="gutter-row" :span="8">
<BoxTitle title="RESPONSE"></BoxTitle>
<div class="gauge-content" id="responseSuccessRate"></div>
</a-col>
</a-row>
</div>
<div class="content-bottom-left-bottom">
<BoxTitle title="CPU utilization">
<template slot="right">
<div class="right-title">
<div class="right-title-item">
average value:<i>{{ cpuData.avg }}%</i>
</div>
<div class="right-title-item">
minimum value:<i>{{ cpuData.min }}%</i>
</div>
<div class="right-title-item">
Maximum value:<i>{{ cpuData.max }}%</i>
</div>
</div>
</template>
</BoxTitle>
<div class="area-cpu" id="areaCpu"></div>
</div> </div>
</div> </div>
<div style="width: 542px"> </a-spin>
<BoxTitle title="DISK"></BoxTitle>
<div class="bar-disk" id="disk"></div>
</div>
</div>
</div> </div>
</template> </template>
@ -417,6 +413,7 @@ export default {
}, },
data() { data() {
return { return {
spinning: false,
types, types,
dataSource: [], dataSource: [],
loading: false, loading: false,
@ -496,120 +493,12 @@ export default {
// }) // })
}, },
methods: { methods: {
// Echarts (时间线)
// EchartsTimeline() {
// const params = {
// itemId: '37550',
// itemType: 0,
// start: '2023-09-21 00:00:00',
// end: '2023-09-21 18:54:00',
// }
// getAction('/systemMonitor/queryItemHistoryData', params).then((res) => {
// let data = res.result
// const percentage = 100 / data.length
// let indexArr = [[0, 0]]
// for (let i = 1; i < data.length; i++) {
// const num = i + 1
// if (i === data.length - 1) {
// indexArr[0][1] = data.length
// }
// if (data[i - 1].value != data[i].value) {
// indexArr[0][1] = i
// indexArr.unshift([i, num])
// }
// }
// let objArr = [],
// echartData = []
// indexArr.map((item) => {
// objArr.push(data.slice(item[0], item[1]))
// })
// const statusConversion = (val) => {
// if (val == 1) {
// return '正常'
// } else if (val == 2) {
// return '警告'
// } else {
// return '离线'
// }
// }
// objArr.map((item, index) => {
// let obj = null
// if (index === 0) {
// const arr = objArr[index + 1]
// let timeInterval
// if (arr) {
// timeInterval = [item[0].date, arr[arr.length - 1].date]
// } else {
// timeInterval = [item[0].date, item[item.length - 1].date]
// }
// obj = {
// type: 'Cpu',
// value: statusConversion(item[0].value),
// valueInterval: [0, item.length * percentage],
// timeInterval: timeInterval, // 时间区间
// }
// } else if (index === objArr.length - 1) {
// const arr = echartData[echartData.length - 1]
// obj = {
// type: 'Cpu',
// value: statusConversion(item[0].value),
// valueInterval: [arr.valueInterval[1], 100],
// timeInterval: [arr.timeInterval[1], item[0].date], // 时间区间
// }
// } else {
// const arr = echartData[echartData.length - 1],
// arr1 = objArr[index + 1],
// num = arr.valueInterval[1],
// length = item.length * percentage
// obj = {
// type: 'Cpu',
// value: statusConversion(item[0].value),
// valueInterval: [num, length + num],
// timeInterval: [arr.timeInterval[1], arr1[arr1.length - 1].date], // 时间区间
// }
// }
// echartData.push(obj)
// })
// if (this.barPlot) {
// this.barPlot.changeData(echartData)
// return
// }
// const timeDateHours = (val) => {
// return moment(val).format('HH:mm')
// }
// this.barPlot = new Bar('timeL', {
// data: echartData.reverse(),
// xField: 'valueInterval',
// yField: 'type',
// isRange: true,
// seriesField: 'value',
// padding: 20,
// yAxis: {
// label: null,
// },
// xAxis: {
// label: {
// formatter: (params) => {
// const percentage = params / 100,
// index = parseInt((data.length - 1) * percentage)
// return timeDateHours(data[index].date)
// },
// },
// },
// legend: {
// position: "top-left'",
// },
// tooltip: false,
// })
// this.barPlot.render()
// })
// },
moment, moment,
// Basic lnformation // Basic lnformation
getBasiclnfo(sourceId) { getBasiclnfo(sourceId) {
let params = { hostId: sourceId } let params = { hostId: sourceId }
getAction('/sysServer/detailsBasicInfo', params).then((res) => { getAction('/sysServer/detailsBasicInfo', params).then((res) => {
this.spinning = false
if (res.success) { if (res.success) {
this.detailInfo = res.result this.detailInfo = res.result
this.drawGuageCpu() this.drawGuageCpu()
@ -630,6 +519,7 @@ export default {
end: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'), end: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
} }
getAction('/systemMonitor/queryItemHistoryData', params).then((res) => { getAction('/systemMonitor/queryItemHistoryData', params).then((res) => {
this.spinning = false
const arr = res.result.map((x) => x.value) const arr = res.result.map((x) => x.value)
this.cpuData.max = Math.max(...arr).toFixed(2) this.cpuData.max = Math.max(...arr).toFixed(2)
this.cpuData.min = Math.min(...arr).toFixed(2) this.cpuData.min = Math.min(...arr).toFixed(2)
@ -654,6 +544,7 @@ export default {
end: `${dateFormat(new Date(), 'yyyy-MM-dd')} 23:59:59`, end: `${dateFormat(new Date(), 'yyyy-MM-dd')} 23:59:59`,
} }
getAction('/systemMonitor/queryItemHistoryData', params).then((res) => { getAction('/systemMonitor/queryItemHistoryData', params).then((res) => {
this.spinning = false
let data = res.result let data = res.result
startTime = data[0].clock * 1000 startTime = data[0].clock * 1000
let indexArr = [[0, 0]] let indexArr = [[0, 0]]
@ -727,6 +618,7 @@ export default {
} }
}, },
handleBasicItem(i, item) { handleBasicItem(i, item) {
this.spinning = true
this.currIndex = i this.currIndex = i
this.currItemId = item.cpuUsedItemId this.currItemId = item.cpuUsedItemId
this.currSourceId = item.sourceId this.currSourceId = item.sourceId

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

@ -49,22 +49,24 @@
</div> </div>
</div> </div>
<div class="monitor-content"> <div class="monitor-content">
<a-row :gutter="[20, 15]" style="height: 100%"> <a-spin :spinning="spinning">
<a-col v-for="(item, index) in chartDatas" :key="item.title" :span="8" style="height: 34%"> <a-row :gutter="[20, 15]" style="height: 100%">
<div class="monitor-content-item"> <a-col v-for="(item, index) in chartDatas" :key="item.title" :span="8" style="height: 34%">
<LineChart <div class="monitor-content-item">
:title="item.title" <LineChart
:layout="'line' + index" :title="item.title"
:xData="item.xData" :layout="'line' + index"
:dataSource="item.data" :xData="item.xData"
:newUnits="item.newUnits" :dataSource="item.data"
:units="item.units" :newUnits="item.newUnits"
@zoom="handelZoom" :units="item.units"
> @zoom="handelZoom"
</LineChart> >
</div> </LineChart>
</a-col> </div>
</a-row> </a-col>
</a-row>
</a-spin>
</div> </div>
<a-modal :title="modalTitle" :width="1200" v-model="visible" :maskClosable="false" @cancel="onCancel"> <a-modal :title="modalTitle" :width="1200" v-model="visible" :maskClosable="false" @cancel="onCancel">
<div class="modal-content" id="common"></div> <div class="modal-content" id="common"></div>
@ -85,7 +87,7 @@ 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 } 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 {
@ -94,19 +96,19 @@ export default {
LineChart, LineChart,
CreateRules, CreateRules,
}, },
computed:{ computed: {
unitConversion(){ unitConversion() {
return function(number,units){ return function (number, units) {
if( units === 'Kb') { if (units === 'Kb') {
number = number *1024 number = number * 1024
} }
if (number < 1024 ) return "B" if (number < 1024) return 'B'
number = number / 1024 number = number / 1024
if (number < 1024) return "KB" if (number < 1024) return 'KB'
number = number / 1024 number = number / 1024
if (number < 1024) return "MB" if (number < 1024) return 'MB'
number = number / 1024 number = number / 1024
console.log('TB',number) console.log('TB', number)
if (number < 1024) return 'GB' if (number < 1024) return 'GB'
number = number / 1024 number = number / 1024
if (number < 1024) return 'TB' if (number < 1024) return 'TB'
@ -116,23 +118,24 @@ export default {
if (number < 1024) return 'EB' if (number < 1024) return 'EB'
} }
}, },
dataConversion(){ dataConversion() {
return function(number,units){ return function (number, units) {
const obj = { const obj = {
KB: 1024, KB: 1024,
MB: Math.pow(1024,2), MB: Math.pow(1024, 2),
GB: Math.pow(1024,3), GB: Math.pow(1024, 3),
TB: Math.pow(1024,4), TB: Math.pow(1024, 4),
PB: Math.pow(1024,5), PB: Math.pow(1024, 5),
EB: Math.pow(1024,6), EB: Math.pow(1024, 6),
} }
// console.log(obj[units],number / obj[units]) // console.log(obj[units],number / obj[units])
return (number / obj[units]).toFixed(2) return (number / obj[units]).toFixed(2)
} }
} },
}, },
data() { data() {
return { return {
spinning: false,
currId: '', currId: '',
visible_rule: false, visible_rule: false,
currLabel: '', currLabel: '',
@ -176,10 +179,11 @@ export default {
sourceType: 'Server', sourceType: 'Server',
sourceId: this.currId, sourceId: this.currId,
} }
this.spinning = true
getAction('/alarmRule/getItems', params).then((res) => { getAction('/alarmRule/getItems', params).then((res) => {
if (res.success) { if (res.success) {
this.MonitorItem = res.result this.MonitorItem = res.result
this.chartDatas = this.MonitorItem.map(f=>({ this.chartDatas = this.MonitorItem.map((f) => ({
title: f.name, title: f.name,
value: f.itemId, value: f.itemId,
type: f.valueType, type: f.valueType,
@ -207,7 +211,8 @@ export default {
} }
try { try {
const res = await this.getMonitorItemData(params) const res = await this.getMonitorItemData(params)
console.log("getMonitorItemData>",res); this.spinning = false
console.log('getMonitorItemData>', res)
item.xData = res.xData item.xData = res.xData
item.data = [ item.data = [
{ {
@ -219,6 +224,7 @@ export default {
item.newUnits = res.newUnits item.newUnits = res.newUnits
} catch (error) { } catch (error) {
console.error(error) console.error(error)
this.spinning = false
} }
}) })
}, },
@ -234,21 +240,21 @@ export default {
return dateFormat(new Date(item.date * 1000), 'hh:mm') return dateFormat(new Date(item.date * 1000), 'hh:mm')
}) })
let item = res.result; let item = res.result
if(item.units === 'B' || item.units === 'Kb'){ if (item.units === 'B' || item.units === 'Kb') {
item.newUnits = this.unitConversion(item.min,item.units) item.newUnits = this.unitConversion(item.min, item.units)
newUnits = item.newUnits newUnits = item.newUnits
item.list.map(val =>{ item.list.map((val) => {
let number = val.value let number = val.value
if(item.units ==="Kb"){ if (item.units === 'Kb') {
number = val.value *1024 number = val.value * 1024
} }
val.value = Number(this.dataConversion(number,item.newUnits)) val.value = Number(this.dataConversion(number, item.newUnits))
data.push({ data.push({
value: Number(val.value), value: Number(val.value),
Date: moment(val.date * 1000).format('hh:mm') Date: moment(val.date * 1000).format('hh:mm'),
})
}) })
})
console.log(item) console.log(item)
} else { } else {
data = res.result.list.map((item_1) => { data = res.result.list.map((item_1) => {
@ -260,7 +266,7 @@ export default {
xData, xData,
data, data,
units, units,
newUnits newUnits,
} }
} }
}, },
@ -402,6 +408,14 @@ export default {
height: calc(100% - 60px); height: calc(100% - 60px);
margin-top: 10px; margin-top: 10px;
overflow: hidden; overflow: hidden;
/deep/.ant-spin-nested-loading {
width: 100%;
height: 100%;
}
/deep/.ant-spin-container {
width: 100%;
height: 100%;
}
&-item { &-item {
width: 100%; width: 100%;
height: 100%; height: 100%;

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

@ -57,24 +57,25 @@
</div> </div>
</div> </div>
<div class="service-content"> <div class="service-content">
<div class="service-content-ranked"> <a-spin :spinning="spinning">
<BoxTitle title="Top-ranked processes in the last hour"> <div class="service-content-ranked">
<template slot="right"> <BoxTitle title="Top-ranked processes in the last hour">
<ul class="legend-list"> <template slot="right">
<li v-for="(item, index) in ranked.legend" :key="index"> <ul class="legend-list">
<div :style="`background:${ranked.color[index]}`" class="li-icon"></div> <li v-for="(item, index) in ranked.legend" :key="index">
{{ item }} <div :style="`background:${ranked.color[index]}`" class="li-icon"></div>
</li> {{ item }}
</ul> </li>
</template> </ul>
</BoxTitle> </template>
<div class="service-content-ranked-box" id="ranked"></div> </BoxTitle>
</div> <div class="service-content-ranked-box" id="ranked"></div>
<div class="service-content-center"> </div>
<a-row :gutter="20"> <div class="service-content-center">
<a-col :span="12"> <a-row :gutter="20">
<BoxTitle title="Process CPU usage(%)"> <a-col :span="12">
<!-- <template slot="right"> <BoxTitle title="Process CPU usage(%)">
<!-- <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>
@ -82,12 +83,12 @@
</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>
@ -95,25 +96,25 @@
</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>
</a-row> </a-row>
</div> </div>
<div class="service-content-table"> <div class="service-content-table">
<BoxTitle title="Service"></BoxTitle> <BoxTitle title="Service"></BoxTitle>
<div style="padding-top: 10px"> <div style="padding-top: 10px">
<TableList <TableList
size="middle" size="middle"
rowKey="id" rowKey="id"
:columns="columns" :columns="columns"
:list="dataSource" :list="dataSource"
:loading="loading" :loading="loading"
:pagination="false" :pagination="false"
:canSelect="false" :canSelect="false"
> >
</TableList> </TableList>
<!-- <a-pagination <!-- <a-pagination
size="small" size="small"
v-model="ipagination.current" v-model="ipagination.current"
:pageSize="ipagination.pageSize" :pageSize="ipagination.pageSize"
@ -129,8 +130,9 @@
@change="handlePageChange" @change="handlePageChange"
@showSizeChange="handleSizeChange" @showSizeChange="handleSizeChange"
/> --> /> -->
</div>
</div> </div>
</div> </a-spin>
</div> </div>
</div> </div>
</template> </template>
@ -140,7 +142,7 @@ 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 } from '@/api/manage'
import * as echarts from 'echarts' import * as echarts from 'echarts'
// const columns = [ // const columns = [
// { // {
@ -193,27 +195,33 @@ import * as echarts from 'echarts'
// }, // },
// ] // ]
const columns = [{ const columns = [
title: 'Name', {
dataIndex: 'name', title: 'Name',
width: '20%' dataIndex: 'name',
}, { width: '20%',
title: 'Min(%)', },
dataIndex: 'min', {
width: '20%' title: 'Min(%)',
}, { dataIndex: 'min',
title: 'Max(%)', width: '20%',
dataIndex: 'max', },
width: '20%' {
}, { title: 'Max(%)',
title: 'Avg(%)', dataIndex: 'max',
dataIndex: 'avg', width: '20%',
width: '20%' },
}, { {
title: 'Now(%)', title: 'Avg(%)',
dataIndex: 'now', dataIndex: 'avg',
width: '20%' width: '20%',
}] },
{
title: 'Now(%)',
dataIndex: 'now',
width: '20%',
},
]
export default { export default {
components: { components: {
BoxTitle, BoxTitle,
@ -221,6 +229,7 @@ export default {
}, },
data() { data() {
return { return {
spinning: false,
type: 'cpu', type: 'cpu',
queryParams: { queryParams: {
server: undefined, server: undefined,
@ -312,71 +321,75 @@ export default {
start: this.queryParams.startDate, start: this.queryParams.startDate,
end: this.queryParams.endDate, end: this.queryParams.endDate,
} }
const hide = this.$message.loading('loading...', 0) // const hide = this.$message.loading('loading...', 0)
getAction('/systemMonitor/queryHostDetails', params).then((res) => { this.spinning = true
this.list = res.result getAction('/systemMonitor/queryHostDetails', params)
this.listData = { .then((res) => {
list: this.num === 0 ? this.list.cpu : this.list.memory, this.list = res.result
type: this.num === 0 ? 'CPU' : '内存', this.listData = {
} list: this.num === 0 ? this.list.cpu : this.list.memory,
type: this.num === 0 ? 'CPU' : '内存',
this.setTableData()
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 = { this.setTableData()
type: this.type === 'cpu' ? 'CPU' : 'Memory',
cpu_xData, let cpu_xData = res.result.cpu[0].list.map((item) => {
cpu_Data, return dateFormat(new Date(item.date * 1000), 'hh:mm')
memory_xData, })
memory_Data, let cpu_Data = res.result.cpu.map((item) => {
} return {
this.ranked.legend = this.type === 'cpu' ? cpu_legend : memory_legend name: item.name,
this.processCpu.xData = cpu_xData data: item.list.map((el) => Number((el.value * 100).toFixed(2))),
// this.processCpu.data = res.result.cpu.map((item) => { }
// return { })
// name: item.name, let cpu_legend = res.result.cpu.map((item) => {
// data: item.list.map((el) => el.value), return item.name
// } })
// }) let memory_xData = res.result.memory[0].list.map((item) => {
this.processCpu.data = cpu_Data return dateFormat(new Date(item.date * 1000), 'hh:mm')
this.processMenbry.xData = memory_xData })
// this.processMenbry.data = res.result.memory.map((item) => { let memory_Data = res.result.memory.map((item) => {
// return { return {
// name: item.name, name: item.name,
// data: item.list.map((el) => el.value), data: item.list.map((el) => Number((el.value * 100).toFixed(2))),
// } }
// }) })
this.processMenbry.data = memory_Data let memory_legend = res.result.memory.map((item) => {
this.drawRanked() return item.name
this.drawProcesCpu() })
this.drawProcesMenbry()
}).finally(() => { this.rankData = {
hide() 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()
})
.finally(() => {
// hide()
this.spinning = false
})
}, },
getBeforeHours(num) { getBeforeHours(num) {
let currentTime = moment() let currentTime = moment()