alarm 模块图表页面增加loading效果
This commit is contained in:
parent
875aae28ca
commit
2f00795b75
|
|
@ -49,6 +49,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="cpu-content">
|
||||
<a-spin :spinning="spinning">
|
||||
<a-row :gutter="[20, 15]" style="height: 100%">
|
||||
<a-col :span="12" style="height: calc(50% + 10px)">
|
||||
<div class="cpu-content-item">
|
||||
|
|
@ -155,6 +156,7 @@
|
|||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-spin>
|
||||
</div>
|
||||
<a-modal :title="modalTitle" :width="1200" v-model="visible" :maskClosable="false" @cancel="onCancel">
|
||||
<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 BoxTitle from '../../components/boxTitle.vue'
|
||||
import CreateRules from './createRules.vue'
|
||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||
import { getAction, postAction } from '@/api/manage'
|
||||
export default {
|
||||
components: {
|
||||
BoxTitle,
|
||||
|
|
@ -184,6 +186,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
spinning: false,
|
||||
currId: '',
|
||||
visible_rule: false,
|
||||
currLabel: '',
|
||||
|
|
@ -251,7 +254,9 @@ export default {
|
|||
start: this.queryParams.startDate,
|
||||
end: this.queryParams.endDate,
|
||||
}
|
||||
getAction('/systemMonitor/queryHostDetails', params).then((res) => {
|
||||
this.spinning = true
|
||||
getAction('/systemMonitor/queryHostDetails', params)
|
||||
.then((res) => {
|
||||
const data = res.result
|
||||
//CPU utilizatior
|
||||
this.cpuUtilization = data.find((item) => item.name === 'cpuUtilization')
|
||||
|
|
@ -303,6 +308,9 @@ export default {
|
|||
this.drawChart3()
|
||||
this.drawChart4()
|
||||
})
|
||||
.finally(() => {
|
||||
this.spinning = false
|
||||
})
|
||||
},
|
||||
getBeforeHours(num) {
|
||||
let currentTime = moment()
|
||||
|
|
@ -828,6 +836,14 @@ export default {
|
|||
height: calc(100% - 60px);
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
/deep/.ant-spin-nested-loading {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/deep/.ant-spin-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<div style="height: 100%">
|
||||
<a-spin :spinning="spinning">
|
||||
<div class="content-top">
|
||||
<div style="width: calc(100% - 562px)">
|
||||
<BoxTitle title="Basic lnformation"></BoxTitle>
|
||||
|
|
@ -297,12 +298,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="Timeline">
|
||||
<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">
|
||||
|
|
@ -359,6 +354,7 @@
|
|||
<div class="bar-disk" id="disk"></div>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -417,6 +413,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
spinning: false,
|
||||
types,
|
||||
dataSource: [],
|
||||
loading: false,
|
||||
|
|
@ -496,120 +493,12 @@ export default {
|
|||
// })
|
||||
},
|
||||
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,
|
||||
// Basic lnformation
|
||||
getBasiclnfo(sourceId) {
|
||||
let params = { hostId: sourceId }
|
||||
getAction('/sysServer/detailsBasicInfo', params).then((res) => {
|
||||
this.spinning = false
|
||||
if (res.success) {
|
||||
this.detailInfo = res.result
|
||||
this.drawGuageCpu()
|
||||
|
|
@ -630,6 +519,7 @@ export default {
|
|||
end: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
|
||||
}
|
||||
getAction('/systemMonitor/queryItemHistoryData', params).then((res) => {
|
||||
this.spinning = false
|
||||
const arr = res.result.map((x) => x.value)
|
||||
this.cpuData.max = Math.max(...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`,
|
||||
}
|
||||
getAction('/systemMonitor/queryItemHistoryData', params).then((res) => {
|
||||
this.spinning = false
|
||||
let data = res.result
|
||||
startTime = data[0].clock * 1000
|
||||
let indexArr = [[0, 0]]
|
||||
|
|
@ -727,6 +618,7 @@ export default {
|
|||
}
|
||||
},
|
||||
handleBasicItem(i, item) {
|
||||
this.spinning = true
|
||||
this.currIndex = i
|
||||
this.currItemId = item.cpuUsedItemId
|
||||
this.currSourceId = item.sourceId
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="monitor-content">
|
||||
<a-spin :spinning="spinning">
|
||||
<a-row :gutter="[20, 15]" style="height: 100%">
|
||||
<a-col v-for="(item, index) in chartDatas" :key="item.title" :span="8" style="height: 34%">
|
||||
<div class="monitor-content-item">
|
||||
|
|
@ -65,6 +66,7 @@
|
|||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-spin>
|
||||
</div>
|
||||
<a-modal :title="modalTitle" :width="1200" v-model="visible" :maskClosable="false" @cancel="onCancel">
|
||||
<div class="modal-content" id="common"></div>
|
||||
|
|
@ -85,7 +87,7 @@ import moment from 'moment'
|
|||
import * as echarts from 'echarts'
|
||||
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
|
||||
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 CreateRules from './createRules.vue'
|
||||
export default {
|
||||
|
|
@ -94,19 +96,19 @@ export default {
|
|||
LineChart,
|
||||
CreateRules,
|
||||
},
|
||||
computed:{
|
||||
unitConversion(){
|
||||
return function(number,units){
|
||||
if( units === 'Kb') {
|
||||
number = number *1024
|
||||
computed: {
|
||||
unitConversion() {
|
||||
return function (number, units) {
|
||||
if (units === 'Kb') {
|
||||
number = number * 1024
|
||||
}
|
||||
if (number < 1024 ) return "B"
|
||||
if (number < 1024) return 'B'
|
||||
number = number / 1024
|
||||
if (number < 1024) return "KB"
|
||||
if (number < 1024) return 'KB'
|
||||
number = number / 1024
|
||||
if (number < 1024) return "MB"
|
||||
if (number < 1024) return 'MB'
|
||||
number = number / 1024
|
||||
console.log('TB',number)
|
||||
console.log('TB', number)
|
||||
if (number < 1024) return 'GB'
|
||||
number = number / 1024
|
||||
if (number < 1024) return 'TB'
|
||||
|
|
@ -116,23 +118,24 @@ export default {
|
|||
if (number < 1024) return 'EB'
|
||||
}
|
||||
},
|
||||
dataConversion(){
|
||||
return function(number,units){
|
||||
dataConversion() {
|
||||
return function (number, units) {
|
||||
const obj = {
|
||||
KB: 1024,
|
||||
MB: Math.pow(1024,2),
|
||||
GB: Math.pow(1024,3),
|
||||
TB: Math.pow(1024,4),
|
||||
PB: Math.pow(1024,5),
|
||||
EB: Math.pow(1024,6),
|
||||
MB: Math.pow(1024, 2),
|
||||
GB: Math.pow(1024, 3),
|
||||
TB: Math.pow(1024, 4),
|
||||
PB: Math.pow(1024, 5),
|
||||
EB: Math.pow(1024, 6),
|
||||
}
|
||||
// console.log(obj[units],number / obj[units])
|
||||
return (number / obj[units]).toFixed(2)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
spinning: false,
|
||||
currId: '',
|
||||
visible_rule: false,
|
||||
currLabel: '',
|
||||
|
|
@ -176,10 +179,11 @@ export default {
|
|||
sourceType: 'Server',
|
||||
sourceId: this.currId,
|
||||
}
|
||||
this.spinning = true
|
||||
getAction('/alarmRule/getItems', params).then((res) => {
|
||||
if (res.success) {
|
||||
this.MonitorItem = res.result
|
||||
this.chartDatas = this.MonitorItem.map(f=>({
|
||||
this.chartDatas = this.MonitorItem.map((f) => ({
|
||||
title: f.name,
|
||||
value: f.itemId,
|
||||
type: f.valueType,
|
||||
|
|
@ -207,7 +211,8 @@ export default {
|
|||
}
|
||||
try {
|
||||
const res = await this.getMonitorItemData(params)
|
||||
console.log("getMonitorItemData>",res);
|
||||
this.spinning = false
|
||||
console.log('getMonitorItemData>', res)
|
||||
item.xData = res.xData
|
||||
item.data = [
|
||||
{
|
||||
|
|
@ -219,6 +224,7 @@ export default {
|
|||
item.newUnits = res.newUnits
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
this.spinning = false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -234,19 +240,19 @@ export default {
|
|||
return dateFormat(new Date(item.date * 1000), 'hh:mm')
|
||||
})
|
||||
|
||||
let item = res.result;
|
||||
if(item.units === 'B' || item.units === 'Kb'){
|
||||
item.newUnits = this.unitConversion(item.min,item.units)
|
||||
let item = res.result
|
||||
if (item.units === 'B' || item.units === 'Kb') {
|
||||
item.newUnits = this.unitConversion(item.min, item.units)
|
||||
newUnits = item.newUnits
|
||||
item.list.map(val =>{
|
||||
item.list.map((val) => {
|
||||
let number = val.value
|
||||
if(item.units ==="Kb"){
|
||||
number = val.value *1024
|
||||
if (item.units === 'Kb') {
|
||||
number = val.value * 1024
|
||||
}
|
||||
val.value = Number(this.dataConversion(number,item.newUnits))
|
||||
val.value = Number(this.dataConversion(number, item.newUnits))
|
||||
data.push({
|
||||
value: Number(val.value),
|
||||
Date: moment(val.date * 1000).format('hh:mm')
|
||||
Date: moment(val.date * 1000).format('hh:mm'),
|
||||
})
|
||||
})
|
||||
console.log(item)
|
||||
|
|
@ -260,7 +266,7 @@ export default {
|
|||
xData,
|
||||
data,
|
||||
units,
|
||||
newUnits
|
||||
newUnits,
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -402,6 +408,14 @@ export default {
|
|||
height: calc(100% - 60px);
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
/deep/.ant-spin-nested-loading {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/deep/.ant-spin-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -57,6 +57,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="service-content">
|
||||
<a-spin :spinning="spinning">
|
||||
<div class="service-content-ranked">
|
||||
<BoxTitle title="Top-ranked processes in the last hour">
|
||||
<template slot="right">
|
||||
|
|
@ -131,6 +132,7 @@
|
|||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -140,7 +142,7 @@ import moment from 'moment'
|
|||
import BoxTitle from '../../components/boxTitle.vue'
|
||||
import TableList from '../../components/tableList.vue'
|
||||
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'
|
||||
// const columns = [
|
||||
// {
|
||||
|
|
@ -193,27 +195,33 @@ import * as echarts from 'echarts'
|
|||
// },
|
||||
// ]
|
||||
|
||||
const columns = [{
|
||||
const columns = [
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
width: '20%'
|
||||
}, {
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
title: 'Min(%)',
|
||||
dataIndex: 'min',
|
||||
width: '20%'
|
||||
}, {
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
title: 'Max(%)',
|
||||
dataIndex: 'max',
|
||||
width: '20%'
|
||||
}, {
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
title: 'Avg(%)',
|
||||
dataIndex: 'avg',
|
||||
width: '20%'
|
||||
}, {
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
title: 'Now(%)',
|
||||
dataIndex: 'now',
|
||||
width: '20%'
|
||||
}]
|
||||
width: '20%',
|
||||
},
|
||||
]
|
||||
export default {
|
||||
components: {
|
||||
BoxTitle,
|
||||
|
|
@ -221,6 +229,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
spinning: false,
|
||||
type: 'cpu',
|
||||
queryParams: {
|
||||
server: undefined,
|
||||
|
|
@ -312,8 +321,10 @@ export default {
|
|||
start: this.queryParams.startDate,
|
||||
end: this.queryParams.endDate,
|
||||
}
|
||||
const hide = this.$message.loading('loading...', 0)
|
||||
getAction('/systemMonitor/queryHostDetails', params).then((res) => {
|
||||
// const hide = this.$message.loading('loading...', 0)
|
||||
this.spinning = true
|
||||
getAction('/systemMonitor/queryHostDetails', params)
|
||||
.then((res) => {
|
||||
this.list = res.result
|
||||
this.listData = {
|
||||
list: this.num === 0 ? this.list.cpu : this.list.memory,
|
||||
|
|
@ -374,8 +385,10 @@ export default {
|
|||
this.drawRanked()
|
||||
this.drawProcesCpu()
|
||||
this.drawProcesMenbry()
|
||||
}).finally(() => {
|
||||
hide()
|
||||
})
|
||||
.finally(() => {
|
||||
// hide()
|
||||
this.spinning = false
|
||||
})
|
||||
},
|
||||
getBeforeHours(num) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user