MONITOR CPU 页面中，添加刷新时间功能按钮
This commit is contained in:
parent
cd5044d1bf
commit
07afefae43
|
|
@ -41,6 +41,10 @@
|
|||
</a-col>
|
||||
</a-row>
|
||||
<div class="cpu-search-btns">
|
||||
<a-button class="view-btn" @click="handleRefresh">
|
||||
<img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
|
||||
<span style="margin-left: 10px"> Refresh </span>
|
||||
</a-button>
|
||||
<a-button class="cpu-search-btns-ant" @click="createAlertRules">Create Alert Rules</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -41,6 +41,10 @@
|
|||
</a-col>
|
||||
</a-row>
|
||||
<div class="monitor-search-btns">
|
||||
<a-button class="view-btn" @click="handleRefresh">
|
||||
<img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
|
||||
<span style="margin-left: 10px"> Refresh </span>
|
||||
</a-button>
|
||||
<a-button class="monitor-search-btns-ant" @click="createAlertRules">Create Alert Rules</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user