monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by xwx
Commit 0447474a6d62af6a8f67e3416db99014949006ab 1 parent b891b7a5

故障诊断性能曲线图

Inline Side-by-side
Showing 5 changed files with 46 additions and 21 deletions
... ... @@ -78,13 +78,13 @@
CPU
</el-col>
<el-col :span="12" class="align-right border-solid p-6" v-if="resClass!='database'">
{{item.cpu}}
{{item.cpu}}{{item.cpuUnit}}
</el-col>
<el-col :span="12" class="align-left border-solid p-6" v-if="resClass!='database'">
内存
</el-col>
<el-col :span="12" class="align-right border-solid p-6" v-if="resClass!='database'">
{{item.men}}
{{item.men}}{{item.menUnit}}
</el-col>
<el-col :span="12" class="align-left border-solid p-6">
告警量
... ... @@ -104,7 +104,6 @@
<el-row style="height: 70px;padding: 10px 30px;display:flex;align-items:center;" v-if="item.resClass=='system'">
<el-col :span="4" class="align-center" style="margin: auto;">
<el-tooltip
effect="light"
placement="top-start">
<template #content>
{{item.kpiName}}: {{item.linkState}}
... ... @@ -116,13 +115,13 @@
<el-col :span="1" style="line-height: 36px;color: gainsboro;">
<span class="flex-border-span">|</span>
</el-col>
<el-col :span="4" class="align-center">
<el-col :span="4" class="text-link align-center" style="color:#1e9fff;" @click="openResPonse(item.kpiId,item.resId,'cpu性能曲线')">
<img src="../src/style/img/fault/base/CPU-green.png"><br/>
{{item.cpu}}
{{item.cpu}}{{item.cpuUnit}}
</el-col>
<el-col :span="5" class="align-center">
<el-col :span="5" class="text-link align-center" style="color:#1e9fff;" @click="openResPonse(item.kpiId,item.resId,'内存性能曲线')">
<img src="../src/style/img/fault/base/men.png"><br/>
{{item.men}}%
{{item.men}}{{item.menUnit}}
</el-col>
<el-col :span="5" class="align-center">
<img src="../src/style/img/fault/base/alarm.png"><br/>
... ... @@ -136,7 +135,6 @@
<el-row style="height: 70px;padding: 10px 30px;display:flex;align-items:center;" v-if="item.resClass!='system'">
<el-col :span="3" class="align-center" v-if="item.resClass!='middleware'" >
<el-tooltip
effect="light"
placement="top-start">
<template #content>
{{item.kpiName}}: {{item.linkState}}
... ... @@ -147,7 +145,6 @@
</el-col>
<el-col :span="3" class="align-center" v-else >
<el-tooltip
effect="light"
placement="top-start">
<template #content>
{{item.kpiName}}: {{item.linkState}}
... ...
... ... @@ -61,19 +61,27 @@ export default {
resClass:'',
collTime:'',
health:'',
kpiName:'监控连接状态'
kpiName:'监控连接状态',
cpuUnit:'',
menUnit:'',
kpiId:'',
resId:''
}
for (let j = 0; j < data[i].length; j++) {
resItem.resName=data[i][j].resName;
resItem.kpiId=data[i][j].kpiId;
resItem.resId=data[i][j].resId;
resItem.ipAddr=data[i][j].ipAddr;
resItem.alarm=data[i][j].alarmNum;
resItem.collTime=data[i][j].collTimeRecent;
resItem.resClass=data[i][j].resClass;
resItem.health=data[i][j].health;
if (data[i][j].kpiId=='KPI31CB8D97'){
resItem.men=data[i][j].diagnosisResult
resItem.men=data[i][j].diagnosisResult;
resItem.menUnit=data[i][j].unit;
}else if (data[i][j].kpiId=='KPI7054BC34'){
resItem.cpu=data[i][j].diagnosisResult
resItem.cpu=data[i][j].diagnosisResult;
resItem.cpuUnit=data[i][j].unit;
}else if (data[i][j].kpiId=='KPIE13DD9A3'||data[i][j].kpiId=='KPI4DA976AF'){
resItem.linkState=data[i][j].diagnosisResult;
resItem.kpiName=data[i][j].kpiName;
... ... @@ -137,6 +145,17 @@ export default {
service.sendEventNormalDialog(props.parentEmit, proxy.$global, faultNo, targetType, resClass,type);
}
let openResPonse = (kpiId,redId,title) =>{
let param = {
faultNo: faultNo,
targetType: targetType,
resId: redId,
kpiId: kpiId,
title: title
}
service.sendEventLineDialog(props.parentEmit, param);
}
// 挂载完
Vue.onMounted(() => {
let cardList = props.cardList;
... ... @@ -158,7 +177,8 @@ export default {
openBusScenarios,
openKpiList,
resClass,
openDiagnosticItem
openDiagnosticItem,
openResPonse
}
}
}
... ...
... ... @@ -84,12 +84,12 @@
<div style="display: flex;text-align: left;margin-top: -17px;margin-left: 50px;">
<p style="width: 50%;">响应率
<h class="text-link" style="margin-left: 6px;"
:style="{color: item.responseColor}" @click="openResPonse(item.kpiId,item.resId,'响应率折线图')">{{item.responseNum}}%
:style="{color: item.responseColor}" @click="openResPonse(item.kpiId,item.resId,'响应率性能曲线')">{{item.responseNum}}%
</h>
</p>
<p style="width: 50%;">成功率
<h class="text-link" style="margin-left: 6px;"
:style="{color: item.successColor}" @click="openResPonse(item.kpiId,item.resId,'成功率折线图')">{{item.successNum}}%
:style="{color: item.successColor}" @click="openResPonse(item.kpiId,item.resId,'成功率性能曲线')">{{item.successNum}}%
</h>
</p>
</div>
... ...
... ... @@ -116,23 +116,26 @@ export default {
proxy.$http.get('/api-web/fault/conf/detail/getDetailByNo', {faultNo: faultDetailDetailInfo.value.faultNo}, function (res) {
if (res.length > 0) {
res.forEach((item) => {
if (item.type.toUpperCase() == 'NETLINK') {
if (item.type.toUpperCase() == 'DIALTEST') {
faultDetailDetailInfo.value.items[0].state = item.state
}
if (item.type.toUpperCase() == 'DIALTEST') {
if (item.type.toUpperCase() == 'NETLINK') {
faultDetailDetailInfo.value.items[1].state = item.state
}
if (item.type.toUpperCase() == 'NPM') {
faultDetailDetailInfo.value.items[2].state = item.state
}
if (item.type.toUpperCase() == 'BASE') {
if (item.type.toUpperCase() == 'APM') {
faultDetailDetailInfo.value.items[3].state = item.state
}
if (item.type.toUpperCase() == 'APM') {
if (item.type.toUpperCase() == 'BASE') {
faultDetailDetailInfo.value.items[4].state = item.state
}
})
}
... ...
... ... @@ -383,14 +383,19 @@ const faultEvent = () => {
resId: row.resId,
kpiId: row.kpiId,
flag: row.flag,
resClass: ''
resClass: '',
title:row.kpiName+'性能曲线'
})
}
},
render: function (row) {
if (row) {
var unit = '';
if (row.unit && row.unit != null) {
unit = row.unit
}
var lineClass = row.kpiIdent == 1 ? 'text-decoration: underline;' : '';
return `<span style="${lineClass}color:#1e9fff;">${row.diagnosisResult}</span>`
return `<span style="${lineClass}color:#1e9fff;">${row.diagnosisResult}${unit}</span>`
}
return '';
}
... ...