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

MONITOR CPU 页面中，添加刷新时间功能按钮

Browse Source
This commit is contained in:
任珮宇 2023-12-21 14:39:44 +08:00
parent cd5044d1bf
commit 07afefae43
3 changed files with 170 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,6 +41,10 @@
</a-col> </a-col>
</a-row> </a-row>
<div class="cpu-search-btns"> <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> <a-button class="cpu-search-btns-ant" @click="createAlertRules">Create Alert Rules</a-button>
</div> </div>
</div> </div>
@ -196,6 +200,7 @@ export default {
{ label: '3Hours', value: 3 }, { label: '3Hours', value: 3 },
{ label: 'user-defined', value: 0 }, { label: 'user-defined', value: 0 },
], ],
userDefined: false,
option1: {}, option1: {},
option2: {}, option2: {},
option3: {}, option3: {},
@ -230,6 +235,11 @@ export default {
this.getServerList() this.getServerList()
}, },
methods: { methods: {
handleRefresh() {
if (!this.userDefined) {
this.getBeforeHours(this.queryParams.timer)
}
},
getTheData() { getTheData() {
let hostId = this.serverOptions.find((item) => { let hostId = this.serverOptions.find((item) => {
return item.value == this.currId return item.value == this.currId
@ -358,6 +368,12 @@ export default {
this.getTheData() this.getTheData()
}, },
onTimeChange(val) { onTimeChange(val) {
if (val !== 0) {
this.userDefined = false
} else {
this.userDefined = true
}
this.queryParams.timer = val
this.getBeforeHours(val) this.getBeforeHours(val)
this.getTheData() this.getTheData()
}, },
@ -803,6 +819,7 @@ export default {
&-ant { &-ant {
background: #1397a3; background: #1397a3;
border: none; border: none;
margin-left: 10px;
} }
} }
} }
@ -888,4 +905,12 @@ export default {
width: 100%; width: 100%;
height: 600px; 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> </style>

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

@ -475,10 +475,6 @@ export default {
this.getCpuUtilizationData() this.getCpuUtilizationData()
this.getTimeLineData() this.getTimeLineData()
// this.EchartsTimeline() // this.EchartsTimeline()
} else {
this.$message.warning('This operation fails. Contact your system administrator')
}
})
this.getDetailsAlarmInfo((res) => { this.getDetailsAlarmInfo((res) => {
this.loading_alarm_info = false this.loading_alarm_info = false
if (res.success) { if (res.success) {
@ -488,6 +484,10 @@ export default {
this.$message.warning('This operation fails. Contact your system administrator') this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
} else {
this.$message.warning('This operation fails. Contact your system administrator')
}
})
this.$nextTick(() => { this.$nextTick(() => {
setTimeout(() => { setTimeout(() => {
this.drawGuageLoads() this.drawGuageLoads()
@ -496,114 +496,114 @@ export default {
}, },
methods: { methods: {
// Echarts (时间线) // Echarts (时间线)
EchartsTimeline() { // EchartsTimeline() {
const params = { // const params = {
itemId: '37550', // itemId: '37550',
itemType: 0, // itemType: 0,
start: '2023-09-21 00:00:00', // start: '2023-09-21 00:00:00',
end: '2023-09-21 18:54:00', // end: '2023-09-21 18:54:00',
} // }
getAction('/systemMonitor/queryItemHistoryData', params).then((res) => { // getAction('/systemMonitor/queryItemHistoryData', params).then((res) => {
let data = res.result // let data = res.result
const percentage = 100 / data.length // const percentage = 100 / data.length
let indexArr = [[0, 0]] // let indexArr = [[0, 0]]
for (let i = 1; i < data.length; i++) { // for (let i = 1; i < data.length; i++) {
const num = i + 1 // const num = i + 1
if (i === data.length - 1) { // if (i === data.length - 1) {
indexArr[0][1] = data.length // indexArr[0][1] = data.length
} // }
if (data[i - 1].value != data[i].value) { // if (data[i - 1].value != data[i].value) {
indexArr[0][1] = i // indexArr[0][1] = i
indexArr.unshift([i, num]) // indexArr.unshift([i, num])
} // }
} // }
let objArr = [], // let objArr = [],
echartData = [] // echartData = []
indexArr.map((item) => { // indexArr.map((item) => {
objArr.push(data.slice(item[0], item[1])) // objArr.push(data.slice(item[0], item[1]))
}) // })
const statusConversion = (val) => { // const statusConversion = (val) => {
if (val == 1) { // if (val == 1) {
return '正常' // return '正常'
} else if (val == 2) { // } else if (val == 2) {
return '警告' // return '警告'
} else { // } else {
return '离线' // return '离线'
} // }
} // }
objArr.map((item, index) => { // objArr.map((item, index) => {
let obj = null // let obj = null
if (index === 0) { // if (index === 0) {
const arr = objArr[index + 1] // const arr = objArr[index + 1]
let timeInterval // let timeInterval
if (arr) { // if (arr) {
timeInterval = [item[0].date, arr[arr.length - 1].date] // timeInterval = [item[0].date, arr[arr.length - 1].date]
} else { // } else {
timeInterval = [item[0].date, item[item.length - 1].date] // timeInterval = [item[0].date, item[item.length - 1].date]
} // }
obj = { // obj = {
type: 'Cpu', // type: 'Cpu',
value: statusConversion(item[0].value), // value: statusConversion(item[0].value),
valueInterval: [0, item.length * percentage], // valueInterval: [0, item.length * percentage],
timeInterval: timeInterval, // 时间区间 // timeInterval: timeInterval, // 时间区间
} // }
} else if (index === objArr.length - 1) { // } else if (index === objArr.length - 1) {
const arr = echartData[echartData.length - 1] // const arr = echartData[echartData.length - 1]
obj = { // obj = {
type: 'Cpu', // type: 'Cpu',
value: statusConversion(item[0].value), // value: statusConversion(item[0].value),
valueInterval: [arr.valueInterval[1], 100], // valueInterval: [arr.valueInterval[1], 100],
timeInterval: [arr.timeInterval[1], item[0].date], // 时间区间 // timeInterval: [arr.timeInterval[1], item[0].date], // 时间区间
} // }
} else { // } else {
const arr = echartData[echartData.length - 1], // const arr = echartData[echartData.length - 1],
arr1 = objArr[index + 1], // arr1 = objArr[index + 1],
num = arr.valueInterval[1], // num = arr.valueInterval[1],
length = item.length * percentage // length = item.length * percentage
obj = { // obj = {
type: 'Cpu', // type: 'Cpu',
value: statusConversion(item[0].value), // value: statusConversion(item[0].value),
valueInterval: [num, length + num], // valueInterval: [num, length + num],
timeInterval: [arr.timeInterval[1], arr1[arr1.length - 1].date], // 时间区间 // timeInterval: [arr.timeInterval[1], arr1[arr1.length - 1].date], // 时间区间
} // }
} // }
echartData.push(obj) // echartData.push(obj)
}) // })
if (this.barPlot) { // if (this.barPlot) {
this.barPlot.changeData(echartData) // this.barPlot.changeData(echartData)
return // return
} // }
const timeDateHours = (val) => { // const timeDateHours = (val) => {
return moment(val).format('HH:mm') // return moment(val).format('HH:mm')
} // }
this.barPlot = new Bar('timeL', { // this.barPlot = new Bar('timeL', {
data: echartData.reverse(), // data: echartData.reverse(),
xField: 'valueInterval', // xField: 'valueInterval',
yField: 'type', // yField: 'type',
isRange: true, // isRange: true,
seriesField: 'value', // seriesField: 'value',
padding: 20, // padding: 20,
yAxis: { // yAxis: {
label: null, // label: null,
}, // },
xAxis: { // xAxis: {
label: { // label: {
formatter: (params) => { // formatter: (params) => {
const percentage = params / 100, // const percentage = params / 100,
index = parseInt((data.length - 1) * percentage) // index = parseInt((data.length - 1) * percentage)
return timeDateHours(data[index].date) // return timeDateHours(data[index].date)
}, // },
}, // },
}, // },
legend: { // legend: {
position: "top-left'", // position: "top-left'",
}, // },
tooltip: false, // tooltip: false,
}) // })
this.barPlot.render() // this.barPlot.render()
}) // })
}, // },
moment, moment,
// Basic lnformation // Basic lnformation
getBasiclnfo(sourceId) { getBasiclnfo(sourceId) {
@ -648,7 +648,8 @@ export default {
itemId: this.currItemId, itemId: this.currItemId,
itemType: 0, itemType: 0,
start: `${dateFormat(new Date(), 'yyyy-MM-dd')} 00:00:00`, 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) => { getAction('/systemMonitor/queryItemHistoryData', params).then((res) => {
let data = res.result let data = res.result
@ -742,7 +743,7 @@ export default {
this.getTimeLineData() this.getTimeLineData()
}, },
getDetailsAlarmInfo(callBack) { getDetailsAlarmInfo(callBack) {
this.loading = true this.loading_alarm_info = true
let params = { let params = {
sourceId: this.currSourceId, sourceId: this.currSourceId,
pageNo: this.ipagination_alarm_info.current, pageNo: this.ipagination_alarm_info.current,
@ -1204,7 +1205,7 @@ export default {
}, },
grid: { grid: {
left: '0%', left: '0%',
right: '0%', right: '1%',
bottom: '0', bottom: '0',
top: 15, top: 15,
containLabel: true, containLabel: true,

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

@ -41,6 +41,10 @@
</a-col> </a-col>
</a-row> </a-row>
<div class="monitor-search-btns"> <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> <a-button class="monitor-search-btns-ant" @click="createAlertRules">Create Alert Rules</a-button>
</div> </div>
</div> </div>
@ -202,6 +206,7 @@ export default {
{ label: '3Hours', value: 3 }, { label: '3Hours', value: 3 },
{ label: 'user-defined', value: 0 }, { label: 'user-defined', value: 0 },
], ],
userDefined: false,
data1: { data1: {
xData: [], xData: [],
data: [], data: [],
@ -301,6 +306,11 @@ export default {
this.getServerList() this.getServerList()
}, },
methods: { methods: {
handleRefresh() {
if (!this.userDefined) {
this.getBeforeHours(this.queryParams.timer)
}
},
// 获取所有监控项的itemId // 获取所有监控项的itemId
getMonitorItemId() { getMonitorItemId() {
let params = { let params = {
@ -441,6 +451,12 @@ export default {
this.getMonitorItemId() this.getMonitorItemId()
}, },
onTimeChange(val) { onTimeChange(val) {
if (val !== 0) {
this.userDefined = false
} else {
this.userDefined = true
}
this.queryParams.timer = val
this.getBeforeHours(val) this.getBeforeHours(val)
this.getMonitorData() this.getMonitorData()
}, },
@ -501,6 +517,7 @@ export default {
&-ant { &-ant {
background: #1397a3; background: #1397a3;
border: none; border: none;
margin-left: 10px;
} }
} }
} }
@ -527,4 +544,12 @@ export default {
width: 100%; width: 100%;
height: 600px; 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> </style>