monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 4438d773fa12e9bb684b7dc9473f43416b1fabea 2 parents bc4b6e3b 64cb2229

Merge branch 'master-v32-xwx' into 'master' 

故障诊断性能曲线图



See merge request !823
Inline Side-by-side
Showing 6 changed files with 54 additions and 29 deletions
@@ -14,7 +14,7 @@ @@ -14,7 +14,7 @@
14 </el-tooltip> 14 </el-tooltip>
15 </div> 15 </div>
16 <div style="width: calc(100% - 252px);line-height: 54px;" class="align-right"> 16 <div style="width: calc(100% - 252px);line-height: 54px;" class="align-right">
17 - <a v-model="cardName" v-if="card && card.length > 0" @click="openOrCloseBase()">{{cardName}}</a> 17 + <a class="text-link" v-model="cardName" v-if="card && card.length > 0" @click="openOrCloseBase()">{{cardName}}</a>
18 </div> 18 </div>
19 </div> 19 </div>
20 <el-divider/> 20 <el-divider/>
@@ -44,13 +44,13 @@ @@ -44,13 +44,13 @@
44 <div style="width: 230px;margin-left: 20px;display: flex;align-self: center;color: #75af49;align-items: center;"> 44 <div style="width: 230px;margin-left: 20px;display: flex;align-self: center;color: #75af49;align-items: center;">
45 <img src="../src/style/img/fault/success.png" style="width: 22px;height: 22px"> 45 <img src="../src/style/img/fault/success.png" style="width: 22px;height: 22px">
46 <span style="margin: 0px 6px 0px 6px;width: 105px;font-size: 16px">正常</span> 46 <span style="margin: 0px 6px 0px 6px;width: 105px;font-size: 16px">正常</span>
47 - <h style="font-size: 24px" class="text-link" @click="openDiagnosticItem('normal')">{{getFaultItemValue(dialTest,'normal')}}</h> 47 + <h style="font-size: 24px;color: #75af49;" class="text-link" @click="openDiagnosticItem('normal')">{{getFaultItemValue(dialTest,'normal')}}</h>
48 </div> 48 </div>
49 <span class="flex-border-span">|</span> 49 <span class="flex-border-span">|</span>
50 <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #febb1a;align-items: center;"> 50 <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #febb1a;align-items: center;">
51 <img src="../src/style/img/fault/error.png"style="width: 22px;height: 22px"> 51 <img src="../src/style/img/fault/error.png"style="width: 22px;height: 22px">
52 <span style="margin: 0px 6px 0px 6px;width: 105px;font-size: 16px"> 异常</span> 52 <span style="margin: 0px 6px 0px 6px;width: 105px;font-size: 16px"> 异常</span>
53 - <h style="font-size: 24px" class="text-link" @click="openDiagnosticItem('abnormal')">{{getFaultItemValue(dialTest,'abnormal')}}</h> 53 + <h style="font-size: 24px;color: #febb1a;" class="text-link" @click="openDiagnosticItem('abnormal')">{{getFaultItemValue(dialTest,'abnormal')}}</h>
54 </div> 54 </div>
55 </div> 55 </div>
56 </div> 56 </div>
@@ -29,25 +29,25 @@ @@ -29,25 +29,25 @@
29 <div style="width: 230px;margin-left: 20px;display: flex;align-self: center;color: #75af49;align-items: center;"> 29 <div style="width: 230px;margin-left: 20px;display: flex;align-self: center;color: #75af49;align-items: center;">
30 <img src="../src/style/img/fault/success.png" style="width:22px;height: 22px;"> 30 <img src="../src/style/img/fault/success.png" style="width:22px;height: 22px;">
31 <span style="margin: 0px 6px 0px 6px;width: 105px;font-size: 16px;">正常</span> 31 <span style="margin: 0px 6px 0px 6px;width: 105px;font-size: 16px;">正常</span>
32 - <h style="font-size: 20px" class="text-link" @click="openDiagnosticItem('normal')">{{getFaultItemValue(cardList,'normal')}}</h> 32 + <h style="font-size: 20px;color: #75af49;" class="text-link" @click="openDiagnosticItem('normal')">{{getFaultItemValue(cardList,'normal')}}</h>
33 </div> 33 </div>
34 <span class="flex-border-span">|</span> 34 <span class="flex-border-span">|</span>
35 <div style="width: 200px;margin-left: 40px;display: flex;align-self: center;color: #febb1a;align-items: center;"> 35 <div style="width: 200px;margin-left: 40px;display: flex;align-self: center;color: #febb1a;align-items: center;">
36 <img src="../src/style/img/fault/error.png" style="width:22px;height: 22px;"> 36 <img src="../src/style/img/fault/error.png" style="width:22px;height: 22px;">
37 <span style="margin: 0px 6px 0px 6px;width: 105px;font-size: 16px;"> 异常</span> 37 <span style="margin: 0px 6px 0px 6px;width: 105px;font-size: 16px;"> 异常</span>
38 - <h style="font-size: 24px" class="text-link" @click="openDiagnosticItem('abnormal')">{{getFaultItemValue(cardList,'abnormal')}}</h> 38 + <h style="font-size: 24px;color: #febb1a;" class="text-link" @click="openDiagnosticItem('abnormal')">{{getFaultItemValue(cardList,'abnormal')}}</h>
39 </div> 39 </div>
40 <span class="flex-border-span">|</span> 40 <span class="flex-border-span">|</span>
41 <div style="width: 200px;margin-left: 40px;display: flex;align-self: center;color: red;align-items: center;"> 41 <div style="width: 200px;margin-left: 40px;display: flex;align-self: center;color: red;align-items: center;">
42 <img src="../src/style/img/fault/base/alarm.png" style="width:22px;height: 22px;"> 42 <img src="../src/style/img/fault/base/alarm.png" style="width:22px;height: 22px;">
43 <span style="margin: 0px 6px 0px 6px;width: 105px;font-size: 16px;"> 告警</span> 43 <span style="margin: 0px 6px 0px 6px;width: 105px;font-size: 16px;"> 告警</span>
44 - <h style="font-size: 24px" class="text-link" @click="openAlarm()">{{getFaultItemValue(cardList,'alarm')}}</h> 44 + <h style="font-size: 24px;color: red;" class="text-link" @click="openAlarm()">{{getFaultItemValue(cardList,'alarm')}}</h>
45 </div> 45 </div>
46 </div> 46 </div>
47 </div> 47 </div>
48 <div class="align-center" style="flex: 1;text-align: right;margin-right: 80px;"> 48 <div class="align-center" style="flex: 1;text-align: right;margin-right: 80px;">
49 - <a class="m-r-20" v-if="cardList.faultFixInfoList && cardList.faultFixInfoList.length > 0" @click="openMoreDialog()">更多</a>  
50 - <a v-model="cardName" v-if="cardList.faultFixInfoList && cardList.faultFixInfoList.length > 0" @click="openOrCloseCard()">{{cardName}}</a> 49 + <a class="m-r-20 text-link" v-if="cardList.faultFixInfoList && cardList.faultFixInfoList.length > 0" @click="openMoreDialog()">更多</a>
  50 + <a class="text-link" v-model="cardName" v-if="cardList.faultFixInfoList && cardList.faultFixInfoList.length > 0" @click="openOrCloseCard()">{{cardName}}</a>
51 </div> 51 </div>
52 </div> 52 </div>
53 <div v-if="cardOpen" 53 <div v-if="cardOpen"
@@ -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
@@ -413,14 +413,19 @@ const faultEvent = () => { @@ -413,14 +413,19 @@ const faultEvent = () => {
413 resId: row.resId, 413 resId: row.resId,
414 kpiId: row.kpiId, 414 kpiId: row.kpiId,
415 flag: row.flag, 415 flag: row.flag,
416 - resClass: '' 416 + resClass: '',
  417 + title:row.kpiName+'性能曲线'
417 }) 418 })
418 } 419 }
419 }, 420 },
420 render: function (row) { 421 render: function (row) {
421 if (row) { 422 if (row) {
  423 + var unit = '';
  424 + if (row.unit && row.unit != null) {
  425 + unit = row.unit
  426 + }
422 var lineClass = row.kpiIdent == 1 ? 'text-decoration: underline;' : ''; 427 var lineClass = row.kpiIdent == 1 ? 'text-decoration: underline;' : '';
423 - return `<span style="${lineClass}color:#1e9fff;">${row.diagnosisResult}</span>` 428 + return `<span style="${lineClass}color:#1e9fff;">${row.diagnosisResult}${unit}</span>`
424 } 429 }
425 return ''; 430 return '';
426 } 431 }