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 @@ @@ -78,13 +78,13 @@
78 CPU 78 CPU
79 </el-col> 79 </el-col>
80 <el-col :span="12" class="align-right border-solid p-6" v-if="resClass!='database'"> 80 <el-col :span="12" class="align-right border-solid p-6" v-if="resClass!='database'">
81 - {{item.cpu}} 81 + {{item.cpu}}{{item.cpuUnit}}
82 </el-col> 82 </el-col>
83 <el-col :span="12" class="align-left border-solid p-6" v-if="resClass!='database'"> 83 <el-col :span="12" class="align-left border-solid p-6" v-if="resClass!='database'">
84 内存 84 内存
85 </el-col> 85 </el-col>
86 <el-col :span="12" class="align-right border-solid p-6" v-if="resClass!='database'"> 86 <el-col :span="12" class="align-right border-solid p-6" v-if="resClass!='database'">
87 - {{item.men}} 87 + {{item.men}}{{item.menUnit}}
88 </el-col> 88 </el-col>
89 <el-col :span="12" class="align-left border-solid p-6"> 89 <el-col :span="12" class="align-left border-solid p-6">
90 告警量 90 告警量
@@ -104,7 +104,6 @@ @@ -104,7 +104,6 @@
104 <el-row style="height: 70px;padding: 10px 30px;display:flex;align-items:center;" v-if="item.resClass=='system'"> 104 <el-row style="height: 70px;padding: 10px 30px;display:flex;align-items:center;" v-if="item.resClass=='system'">
105 <el-col :span="4" class="align-center" style="margin: auto;"> 105 <el-col :span="4" class="align-center" style="margin: auto;">
106 <el-tooltip 106 <el-tooltip
107 - effect="light"  
108 placement="top-start"> 107 placement="top-start">
109 <template #content> 108 <template #content>
110 {{item.kpiName}}: {{item.linkState}} 109 {{item.kpiName}}: {{item.linkState}}
@@ -116,13 +115,13 @@ @@ -116,13 +115,13 @@
116 <el-col :span="1" style="line-height: 36px;color: gainsboro;"> 115 <el-col :span="1" style="line-height: 36px;color: gainsboro;">
117 <span class="flex-border-span">|</span> 116 <span class="flex-border-span">|</span>
118 </el-col> 117 </el-col>
119 - <el-col :span="4" class="align-center"> 118 + <el-col :span="4" class="text-link align-center" style="color:#1e9fff;" @click="openResPonse(item.kpiId,item.resId,'cpu性能曲线')">
120 <img src="../src/style/img/fault/base/CPU-green.png"><br/> 119 <img src="../src/style/img/fault/base/CPU-green.png"><br/>
121 - {{item.cpu}} 120 + {{item.cpu}}{{item.cpuUnit}}
122 </el-col> 121 </el-col>
123 - <el-col :span="5" class="align-center"> 122 + <el-col :span="5" class="text-link align-center" style="color:#1e9fff;" @click="openResPonse(item.kpiId,item.resId,'内存性能曲线')">
124 <img src="../src/style/img/fault/base/men.png"><br/> 123 <img src="../src/style/img/fault/base/men.png"><br/>
125 - {{item.men}}% 124 + {{item.men}}{{item.menUnit}}
126 </el-col> 125 </el-col>
127 <el-col :span="5" class="align-center"> 126 <el-col :span="5" class="align-center">
128 <img src="../src/style/img/fault/base/alarm.png"><br/> 127 <img src="../src/style/img/fault/base/alarm.png"><br/>
@@ -136,7 +135,6 @@ @@ -136,7 +135,6 @@
136 <el-row style="height: 70px;padding: 10px 30px;display:flex;align-items:center;" v-if="item.resClass!='system'"> 135 <el-row style="height: 70px;padding: 10px 30px;display:flex;align-items:center;" v-if="item.resClass!='system'">
137 <el-col :span="3" class="align-center" v-if="item.resClass!='middleware'" > 136 <el-col :span="3" class="align-center" v-if="item.resClass!='middleware'" >
138 <el-tooltip 137 <el-tooltip
139 - effect="light"  
140 placement="top-start"> 138 placement="top-start">
141 <template #content> 139 <template #content>
142 {{item.kpiName}}: {{item.linkState}} 140 {{item.kpiName}}: {{item.linkState}}
@@ -147,7 +145,6 @@ @@ -147,7 +145,6 @@
147 </el-col> 145 </el-col>
148 <el-col :span="3" class="align-center" v-else > 146 <el-col :span="3" class="align-center" v-else >
149 <el-tooltip 147 <el-tooltip
150 - effect="light"  
151 placement="top-start"> 148 placement="top-start">
152 <template #content> 149 <template #content>
153 {{item.kpiName}}: {{item.linkState}} 150 {{item.kpiName}}: {{item.linkState}}
@@ -61,19 +61,27 @@ export default { @@ -61,19 +61,27 @@ export default {
61 resClass:'', 61 resClass:'',
62 collTime:'', 62 collTime:'',
63 health:'', 63 health:'',
64 - kpiName:'监控连接状态' 64 + kpiName:'监控连接状态',
  65 + cpuUnit:'',
  66 + menUnit:'',
  67 + kpiId:'',
  68 + resId:''
65 } 69 }
66 for (let j = 0; j < data[i].length; j++) { 70 for (let j = 0; j < data[i].length; j++) {
67 resItem.resName=data[i][j].resName; 71 resItem.resName=data[i][j].resName;
  72 + resItem.kpiId=data[i][j].kpiId;
  73 + resItem.resId=data[i][j].resId;
68 resItem.ipAddr=data[i][j].ipAddr; 74 resItem.ipAddr=data[i][j].ipAddr;
69 resItem.alarm=data[i][j].alarmNum; 75 resItem.alarm=data[i][j].alarmNum;
70 resItem.collTime=data[i][j].collTimeRecent; 76 resItem.collTime=data[i][j].collTimeRecent;
71 resItem.resClass=data[i][j].resClass; 77 resItem.resClass=data[i][j].resClass;
72 resItem.health=data[i][j].health; 78 resItem.health=data[i][j].health;
73 if (data[i][j].kpiId=='KPI31CB8D97'){ 79 if (data[i][j].kpiId=='KPI31CB8D97'){
74 - resItem.men=data[i][j].diagnosisResult 80 + resItem.men=data[i][j].diagnosisResult;
  81 + resItem.menUnit=data[i][j].unit;
75 }else if (data[i][j].kpiId=='KPI7054BC34'){ 82 }else if (data[i][j].kpiId=='KPI7054BC34'){
76 - resItem.cpu=data[i][j].diagnosisResult 83 + resItem.cpu=data[i][j].diagnosisResult;
  84 + resItem.cpuUnit=data[i][j].unit;
77 }else if (data[i][j].kpiId=='KPIE13DD9A3'||data[i][j].kpiId=='KPI4DA976AF'){ 85 }else if (data[i][j].kpiId=='KPIE13DD9A3'||data[i][j].kpiId=='KPI4DA976AF'){
78 resItem.linkState=data[i][j].diagnosisResult; 86 resItem.linkState=data[i][j].diagnosisResult;
79 resItem.kpiName=data[i][j].kpiName; 87 resItem.kpiName=data[i][j].kpiName;
@@ -137,6 +145,17 @@ export default { @@ -137,6 +145,17 @@ export default {
137 service.sendEventNormalDialog(props.parentEmit, proxy.$global, faultNo, targetType, resClass,type); 145 service.sendEventNormalDialog(props.parentEmit, proxy.$global, faultNo, targetType, resClass,type);
138 } 146 }
139 147
  148 + let openResPonse = (kpiId,redId,title) =>{
  149 + let param = {
  150 + faultNo: faultNo,
  151 + targetType: targetType,
  152 + resId: redId,
  153 + kpiId: kpiId,
  154 + title: title
  155 + }
  156 + service.sendEventLineDialog(props.parentEmit, param);
  157 + }
  158 +
140 // 挂载完 159 // 挂载完
141 Vue.onMounted(() => { 160 Vue.onMounted(() => {
142 let cardList = props.cardList; 161 let cardList = props.cardList;
@@ -158,7 +177,8 @@ export default { @@ -158,7 +177,8 @@ export default {
158 openBusScenarios, 177 openBusScenarios,
159 openKpiList, 178 openKpiList,
160 resClass, 179 resClass,
161 - openDiagnosticItem 180 + openDiagnosticItem,
  181 + openResPonse
162 } 182 }
163 } 183 }
164 } 184 }
@@ -84,12 +84,12 @@ @@ -84,12 +84,12 @@
84 <div style="display: flex;text-align: left;margin-top: -17px;margin-left: 50px;"> 84 <div style="display: flex;text-align: left;margin-top: -17px;margin-left: 50px;">
85 <p style="width: 50%;">响应率 85 <p style="width: 50%;">响应率
86 <h class="text-link" style="margin-left: 6px;" 86 <h class="text-link" style="margin-left: 6px;"
87 - :style="{color: item.responseColor}" @click="openResPonse(item.kpiId,item.resId,'响应率折线图')">{{item.responseNum}}% 87 + :style="{color: item.responseColor}" @click="openResPonse(item.kpiId,item.resId,'响应率性能曲线')">{{item.responseNum}}%
88 </h> 88 </h>
89 </p> 89 </p>
90 <p style="width: 50%;">成功率 90 <p style="width: 50%;">成功率
91 <h class="text-link" style="margin-left: 6px;" 91 <h class="text-link" style="margin-left: 6px;"
92 - :style="{color: item.successColor}" @click="openResPonse(item.kpiId,item.resId,'成功率折线图')">{{item.successNum}}% 92 + :style="{color: item.successColor}" @click="openResPonse(item.kpiId,item.resId,'成功率性能曲线')">{{item.successNum}}%
93 </h> 93 </h>
94 </p> 94 </p>
95 </div> 95 </div>
@@ -116,23 +116,26 @@ export default { @@ -116,23 +116,26 @@ export default {
116 proxy.$http.get('/api-web/fault/conf/detail/getDetailByNo', {faultNo: faultDetailDetailInfo.value.faultNo}, function (res) { 116 proxy.$http.get('/api-web/fault/conf/detail/getDetailByNo', {faultNo: faultDetailDetailInfo.value.faultNo}, function (res) {
117 if (res.length > 0) { 117 if (res.length > 0) {
118 res.forEach((item) => { 118 res.forEach((item) => {
119 - if (item.type.toUpperCase() == 'NETLINK') { 119 + if (item.type.toUpperCase() == 'DIALTEST') {
120 faultDetailDetailInfo.value.items[0].state = item.state 120 faultDetailDetailInfo.value.items[0].state = item.state
121 } 121 }
122 122
123 - if (item.type.toUpperCase() == 'DIALTEST') { 123 + if (item.type.toUpperCase() == 'NETLINK') {
124 faultDetailDetailInfo.value.items[1].state = item.state 124 faultDetailDetailInfo.value.items[1].state = item.state
125 } 125 }
  126 +
  127 +
126 if (item.type.toUpperCase() == 'NPM') { 128 if (item.type.toUpperCase() == 'NPM') {
127 faultDetailDetailInfo.value.items[2].state = item.state 129 faultDetailDetailInfo.value.items[2].state = item.state
128 130
129 } 131 }
130 - if (item.type.toUpperCase() == 'BASE') { 132 + if (item.type.toUpperCase() == 'APM') {
131 faultDetailDetailInfo.value.items[3].state = item.state 133 faultDetailDetailInfo.value.items[3].state = item.state
132 } 134 }
133 - if (item.type.toUpperCase() == 'APM') { 135 + if (item.type.toUpperCase() == 'BASE') {
134 faultDetailDetailInfo.value.items[4].state = item.state 136 faultDetailDetailInfo.value.items[4].state = item.state
135 } 137 }
  138 +
136 }) 139 })
137 } 140 }
138 141
@@ -383,14 +383,19 @@ const faultEvent = () => { @@ -383,14 +383,19 @@ const faultEvent = () => {
383 resId: row.resId, 383 resId: row.resId,
384 kpiId: row.kpiId, 384 kpiId: row.kpiId,
385 flag: row.flag, 385 flag: row.flag,
386 - resClass: '' 386 + resClass: '',
  387 + title:row.kpiName+'性能曲线'
387 }) 388 })
388 } 389 }
389 }, 390 },
390 render: function (row) { 391 render: function (row) {
391 if (row) { 392 if (row) {
  393 + var unit = '';
  394 + if (row.unit && row.unit != null) {
  395 + unit = row.unit
  396 + }
392 var lineClass = row.kpiIdent == 1 ? 'text-decoration: underline;' : ''; 397 var lineClass = row.kpiIdent == 1 ? 'text-decoration: underline;' : '';
393 - return `<span style="${lineClass}color:#1e9fff;">${row.diagnosisResult}</span>` 398 + return `<span style="${lineClass}color:#1e9fff;">${row.diagnosisResult}${unit}</span>`
394 } 399 }
395 return ''; 400 return '';
396 } 401 }