From 07afefae43f2fc11e7c21efd494695975be929b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BB=BB=E7=8F=AE=E5=AE=87?= Date: Thu, 21 Dec 2023 14:39:44 +0800 Subject: [PATCH] =?UTF-8?q?MONITOR=20=20CPU=20=20=20=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E4=B8=AD=EF=BC=8C=E6=B7=BB=E5=8A=A0=E5=88=B7=E6=96=B0=E6=97=B6?= =?UTF-8?q?=E9=97=B4=E5=8A=9F=E8=83=BD=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../serverMonitor/instances/cpu.vue | 25 ++ .../serverMonitor/instances/details.vue | 239 +++++++++--------- .../serverMonitor/instances/monitor.vue | 25 ++ 3 files changed, 170 insertions(+), 119 deletions(-) diff --git a/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue b/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue index f43de96..24196e7 100644 --- a/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue +++ b/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue @@ -41,6 +41,10 @@
+ + + Refresh + Create Alert Rules
@@ -196,6 +200,7 @@ export default { { label: '3Hours', value: 3 }, { label: 'user-defined', value: 0 }, ], + userDefined: false, option1: {}, option2: {}, option3: {}, @@ -230,6 +235,11 @@ export default { this.getServerList() }, methods: { + handleRefresh() { + if (!this.userDefined) { + this.getBeforeHours(this.queryParams.timer) + } + }, getTheData() { let hostId = this.serverOptions.find((item) => { return item.value == this.currId @@ -358,6 +368,12 @@ export default { this.getTheData() }, onTimeChange(val) { + if (val !== 0) { + this.userDefined = false + } else { + this.userDefined = true + } + this.queryParams.timer = val this.getBeforeHours(val) this.getTheData() }, @@ -803,6 +819,7 @@ export default { &-ant { background: #1397a3; border: none; + margin-left: 10px; } } } @@ -888,4 +905,12 @@ export default { width: 100%; height: 600px; } +.view-btn { + background-color: #1397a3; + font-family: ArialMT; + color: #ffffff; + border: none; + margin-left: 20px; + box-shadow: 0px 1px 1px 0px #000000; +} \ No newline at end of file diff --git a/src/views/abnormalAlarm/serverMonitor/instances/details.vue b/src/views/abnormalAlarm/serverMonitor/instances/details.vue index 9481b0d..394f948 100644 --- a/src/views/abnormalAlarm/serverMonitor/instances/details.vue +++ b/src/views/abnormalAlarm/serverMonitor/instances/details.vue @@ -475,15 +475,15 @@ export default { this.getCpuUtilizationData() this.getTimeLineData() // this.EchartsTimeline() - } else { - this.$message.warning('This operation fails. Contact your system administrator') - } - }) - this.getDetailsAlarmInfo((res) => { - this.loading_alarm_info = false - if (res.success) { - this.ipagination_alarm_info.total = res.result.total - this.dataSource_alarm_info = res.result.records + this.getDetailsAlarmInfo((res) => { + this.loading_alarm_info = false + if (res.success) { + this.ipagination_alarm_info.total = res.result.total + this.dataSource_alarm_info = res.result.records + } else { + this.$message.warning('This operation fails. Contact your system administrator') + } + }) } else { this.$message.warning('This operation fails. Contact your system administrator') } @@ -496,114 +496,114 @@ 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) + // 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() - }) - }, + // return timeDateHours(data[index].date) + // }, + // }, + // }, + // legend: { + // position: "top-left'", + // }, + // tooltip: false, + // }) + // this.barPlot.render() + // }) + // }, moment, // Basic lnformation getBasiclnfo(sourceId) { @@ -648,7 +648,8 @@ export default { itemId: this.currItemId, itemType: 0, start: `${dateFormat(new Date(), 'yyyy-MM-dd')} 00:00:00`, - end: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'), + // end: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'), + end: `${dateFormat(new Date(), 'yyyy-MM-dd')} 23:59:59`, } getAction('/systemMonitor/queryItemHistoryData', params).then((res) => { let data = res.result @@ -742,7 +743,7 @@ export default { this.getTimeLineData() }, getDetailsAlarmInfo(callBack) { - this.loading = true + this.loading_alarm_info = true let params = { sourceId: this.currSourceId, pageNo: this.ipagination_alarm_info.current, @@ -1204,7 +1205,7 @@ export default { }, grid: { left: '0%', - right: '0%', + right: '1%', bottom: '0', top: 15, containLabel: true, diff --git a/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue b/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue index 6b7e9f4..25e058d 100644 --- a/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue +++ b/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue @@ -41,6 +41,10 @@
+ + + Refresh + Create Alert Rules
@@ -202,6 +206,7 @@ export default { { label: '3Hours', value: 3 }, { label: 'user-defined', value: 0 }, ], + userDefined: false, data1: { xData: [], data: [], @@ -301,6 +306,11 @@ export default { this.getServerList() }, methods: { + handleRefresh() { + if (!this.userDefined) { + this.getBeforeHours(this.queryParams.timer) + } + }, // 获取所有监控项的itemId getMonitorItemId() { let params = { @@ -441,6 +451,12 @@ export default { this.getMonitorItemId() }, onTimeChange(val) { + if (val !== 0) { + this.userDefined = false + } else { + this.userDefined = true + } + this.queryParams.timer = val this.getBeforeHours(val) this.getMonitorData() }, @@ -501,6 +517,7 @@ export default { &-ant { background: #1397a3; border: none; + margin-left: 10px; } } } @@ -527,4 +544,12 @@ export default { width: 100%; height: 600px; } +.view-btn { + background-color: #1397a3; + font-family: ArialMT; + color: #ffffff; + border: none; + margin-left: 20px; + box-shadow: 0px 1px 1px 0px #000000; +} \ No newline at end of file