From 2f00795b75ce20098c34da35f08e26aa6102fcd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BB=BB=E7=8F=AE=E5=AE=87?= Date: Tue, 30 Jan 2024 15:22:14 +0800 Subject: [PATCH] =?UTF-8?q?=20alarm=20=E6=A8=A1=E5=9D=97=E5=9B=BE=E8=A1=A8?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=A2=9E=E5=8A=A0loading=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../serverMonitor/instances/cpu.vue | 328 ++++---- .../serverMonitor/instances/details.vue | 758 ++++++++---------- .../serverMonitor/instances/monitor.vue | 112 +-- .../instances/serviceProcess.vue | 271 ++++--- 4 files changed, 702 insertions(+), 767 deletions(-) diff --git a/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue b/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue index ce0f74f..3efae28 100644 --- a/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue +++ b/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue @@ -49,112 +49,114 @@
- - -
- - - - -
-
- - -
- - - - -
-
- - -
- - - -
- - Processor interrupt(s) - Avg:{{ multiLine.cpuInterrupt.avg + multiLine.cpuInterrupt.units }} - Min:{{ multiLine.cpuInterrupt.min + multiLine.cpuInterrupt.units }} - Max:{{ multiLine.cpuInterrupt.max + multiLine.cpuInterrupt.units }} -
- Processor interrupt - - - Situational switching(s) - Avg:{{ multiLine.cpuSwitch.avg + multiLine.cpuSwitch.units }} - Min:{{ multiLine.cpuSwitch.min + multiLine.cpuSwitch.units }} - Max:{{ multiLine.cpuSwitch.max + multiLine.cpuSwitch.units }} -
- Situational switching(s) - + + + +
+ + + + +
-
-
- - -
- - - -
-
- - + + +
+ + + + +
+
+ + +
+ + + +
+ + Processor interrupt(s) + Avg:{{ multiLine.cpuInterrupt.avg + multiLine.cpuInterrupt.units }} + Min:{{ multiLine.cpuInterrupt.min + multiLine.cpuInterrupt.units }} + Max:{{ multiLine.cpuInterrupt.max + multiLine.cpuInterrupt.units }} +
+ Processor interrupt + + + Situational switching(s) + Avg:{{ multiLine.cpuSwitch.avg + multiLine.cpuSwitch.units }} + Min:{{ multiLine.cpuSwitch.min + multiLine.cpuSwitch.units }} + Max:{{ multiLine.cpuSwitch.max + multiLine.cpuSwitch.units }} +
+ Situational switching(s) + +
+
+
+ + +
+ + + +
+
+ + +
@@ -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,58 +254,63 @@ export default { 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) => { + this.spinning = true + 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.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) - } - }) - 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.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) + } + }) + 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.drawChart2() - this.drawChart3() - this.drawChart4() - }) + this.drawChart1() + this.drawChart2() + 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%; diff --git a/src/views/abnormalAlarm/serverMonitor/instances/details.vue b/src/views/abnormalAlarm/serverMonitor/instances/details.vue index 0a631c8..53ac151 100644 --- a/src/views/abnormalAlarm/serverMonitor/instances/details.vue +++ b/src/views/abnormalAlarm/serverMonitor/instances/details.vue @@ -1,364 +1,360 @@ @@ -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 diff --git a/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue b/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue index f78a800..c384d95 100644 --- a/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue +++ b/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue @@ -49,22 +49,24 @@
- - -
- - -
- - + + + +
+ + +
+ + +
@@ -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,21 +240,21 @@ 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) - newUnits = item.newUnits - item.list.map(val =>{ + 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) => { 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)) - data.push({ - value: Number(val.value), - Date: moment(val.date * 1000).format('hh:mm') - }) + val.value = Number(this.dataConversion(number, item.newUnits)) + data.push({ + value: Number(val.value), + Date: moment(val.date * 1000).format('hh:mm'), }) + }) console.log(item) } else { data = res.result.list.map((item_1) => { @@ -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%; diff --git a/src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue b/src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue index dd4d9bf..4f7b47a 100644 --- a/src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue +++ b/src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue @@ -57,24 +57,25 @@
-
- - - -
-
-
- - - - - -
- - - - - -
- - -
-
- -
- - - +
-
+ @@ -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 = [{ - title: 'Name', - dataIndex: 'name', - width: '20%' -}, { - title: 'Min(%)', - dataIndex: 'min', - width: '20%' -}, { - title: 'Max(%)', - dataIndex: 'max', - width: '20%' -}, { - title: 'Avg(%)', - dataIndex: 'avg', - width: '20%' -}, { - title: 'Now(%)', - dataIndex: 'now', - width: '20%' -}] +const columns = [ + { + title: 'Name', + dataIndex: 'name', + width: '20%', + }, + { + title: 'Min(%)', + dataIndex: 'min', + width: '20%', + }, + { + title: 'Max(%)', + dataIndex: 'max', + width: '20%', + }, + { + title: 'Avg(%)', + dataIndex: 'avg', + width: '20%', + }, + { + title: 'Now(%)', + dataIndex: 'now', + width: '20%', + }, +] export default { components: { BoxTitle, @@ -221,6 +229,7 @@ export default { }, data() { return { + spinning: false, type: 'cpu', queryParams: { server: undefined, @@ -312,71 +321,75 @@ export default { start: this.queryParams.startDate, end: this.queryParams.endDate, } - const hide = this.$message.loading('loading...', 0) - 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' : '内存', - } - - 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))), + // 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, + type: this.num === 0 ? 'CPU' : '内存', } - }) - 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() - }).finally(() => { - hide() - }) + 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 = { + 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) { let currentTime = moment()