monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by xwx
Commit 8f36608daf96fcbb14ef4729ca6b8a308e9c311f 1 parent dd895e24

故障诊断APM弹框

Inline Side-by-side
Showing 4 changed files with 19 additions and 15 deletions
@@ -59,30 +59,30 @@ @@ -59,30 +59,30 @@
59 <div style="width: 566px;min-height: 357px;background: url('../src/style/img/fault/apm/apmCard.png') no-repeat;background-size: 100% 100%;margin: 0px 0px 26px 90px;box-sizing: border-box;text-align: center;margin: 0 auto;padding-top: 65px"> 59 <div style="width: 566px;min-height: 357px;background: url('../src/style/img/fault/apm/apmCard.png') no-repeat;background-size: 100% 100%;margin: 0px 0px 26px 90px;box-sizing: border-box;text-align: center;margin: 0 auto;padding-top: 65px">
60 <div style="color: #ffffff;font-size: 24px;">{{item.resClassName}}</div> 60 <div style="color: #ffffff;font-size: 24px;">{{item.resClassName}}</div>
61 <img src="../src/style/img/fault/apm/apmAbout.png" style="padding-top: 30px;"> 61 <img src="../src/style/img/fault/apm/apmAbout.png" style="padding-top: 30px;">
62 - <div style="padding-top: 30px;font-size: 18px;color: #333333">应用：<span class="text-link">{{item.applicationName}}</span></div> 62 + <div style="padding-top: 30px;font-size: 18px;color: #333333">应用：<span class="text-link" @click="openBusScenarios(item.resClass)">{{item.applicationName}}</span></div>
63 <hr style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#aed6f4 size=1> 63 <hr style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#aed6f4 size=1>
64 <div style="text-align: left;display: flex;margin-top: 10px;margin-left: 76px;font-size: 18px;"> 64 <div style="text-align: left;display: flex;margin-top: 10px;margin-left: 76px;font-size: 18px;">
65 <div style="width: 230px;display: flex;align-self: center;"> 65 <div style="width: 230px;display: flex;align-self: center;">
66 <img src="../src/style/img/fault/base/alarm.png" style="width:22px;height: 22px;"> 66 <img src="../src/style/img/fault/base/alarm.png" style="width:22px;height: 22px;">
67 <span style="margin: 0px 6px;width: 133px;">响应时间告警量:</span> 67 <span style="margin: 0px 6px;width: 133px;">响应时间告警量:</span>
68 - <span class="text-link">{{item.responseNum}}</span> 68 + <span class="text-link" @click="openAlarm(item.kpiId,item.resClass)">{{item.responseNum}}</span>
69 </div> 69 </div>
70 <div style="width: 230px;margin-left: 20px;display: flex;align-self: center;"> 70 <div style="width: 230px;margin-left: 20px;display: flex;align-self: center;">
71 <img src="../src/style/img/fault/base/alarm.png" style="width:22px;height: 22px;"> 71 <img src="../src/style/img/fault/base/alarm.png" style="width:22px;height: 22px;">
72 <span style="margin: 0px 6px 0px 6px;width: 115px;">Fullgc告警量:</span> 72 <span style="margin: 0px 6px 0px 6px;width: 115px;">Fullgc告警量:</span>
73 - <span class="text-link">{{item.FullGcNum}}</span> 73 + <span class="text-link" @click="openAlarm(item.kpiId,item.resClass)">{{item.FullGcNum}}</span>
74 </div> 74 </div>
75 </div> 75 </div>
76 <div style="text-align: left;display: flex;margin-top: 10px;margin-left: 76px;font-size: 18px;"> 76 <div style="text-align: left;display: flex;margin-top: 10px;margin-left: 76px;font-size: 18px;">
77 <div style="width: 230px;display: flex;align-self: center;"> 77 <div style="width: 230px;display: flex;align-self: center;">
78 <img src="../src/style/img/fault/base/alarm.png" style="width:22px;height: 22px;"> 78 <img src="../src/style/img/fault/base/alarm.png" style="width:22px;height: 22px;">
79 <span style="margin: 0px 6px;width: 133px;">线程总数告警量:</span> 79 <span style="margin: 0px 6px;width: 133px;">线程总数告警量:</span>
80 - <span class="text-link">{{item.threadNum}}</span> 80 + <span class="text-link" @click="openAlarm(item.kpiId,item.resClass)">{{item.threadNum}}</span>
81 </div> 81 </div>
82 <div style="width: 230px;margin-left: 20px;display: flex;align-self: center;"> 82 <div style="width: 230px;margin-left: 20px;display: flex;align-self: center;">
83 <img src="../src/style/img/fault/base/alarm.png" style="width:22px;height: 22px;"> 83 <img src="../src/style/img/fault/base/alarm.png" style="width:22px;height: 22px;">
84 <span style="margin: 0px 6px 0px 6px;width: 115px;">错误率告警量:</span> 84 <span style="margin: 0px 6px 0px 6px;width: 115px;">错误率告警量:</span>
85 - <span class="text-link">{{item.errorNum}}</span> 85 + <span class="text-link" @click="openAlarm(item.kpiId,item.resClass)">{{item.errorNum}}</span>
86 </div> 86 </div>
87 </div> 87 </div>
88 88
@@ -64,11 +64,14 @@ export default { @@ -64,11 +64,14 @@ export default {
64 responseNum: 0, 64 responseNum: 0,
65 errorNum: 0, 65 errorNum: 0,
66 threadNum:0, 66 threadNum:0,
67 - applicationName:0 67 + applicationName:0,
  68 + resClass:''
68 } 69 }
69 for (let j = 0; j < data[i].length; j++) { 70 for (let j = 0; j < data[i].length; j++) {
  71 + resItem.resClass = data[i][j].resClass;
70 resItem.resClassName = data[i][j].resClassName; 72 resItem.resClassName = data[i][j].resClassName;
71 resItem.applicationName = data[i][j].applicationName; 73 resItem.applicationName = data[i][j].applicationName;
  74 + resItem.kpiId = data[i][j].kpiId;
72 if (data[i][j].kpiId == 'KPI3D67301E') { 75 if (data[i][j].kpiId == 'KPI3D67301E') {
73 resItem.FullGcNum = data[i][j].diagnosisResult; 76 resItem.FullGcNum = data[i][j].diagnosisResult;
74 } else if (data[i][j].kpiId == 'KPI7C4BEB26') { 77 } else if (data[i][j].kpiId == 'KPI7C4BEB26') {
@@ -83,17 +86,19 @@ export default { @@ -83,17 +86,19 @@ export default {
83 } 86 }
84 console.log(cardData.value) 87 console.log(cardData.value)
85 } 88 }
86 - const openAlarm = () => { 89 + const openAlarm = (kpiId,resClass) => {
87 service.sendEventAlarmDialog(emit, { 90 service.sendEventAlarmDialog(emit, {
88 faultNo: props.faultNo, 91 faultNo: props.faultNo,
89 - targetType: props.targetType 92 + targetType: props.targetType.toLocaleLowerCase(),
  93 + kpiId:kpiId,
  94 + resClass:resClass,
90 }); 95 });
91 } 96 }
92 const openMoreDialog = () => { 97 const openMoreDialog = () => {
93 service.sendEventMoreDialog(emit, proxy.$global, card.value); 98 service.sendEventMoreDialog(emit, proxy.$global, card.value);
94 } 99 }
95 //诊断应用 100 //诊断应用
96 - const openBusScenarios = () => { 101 + const openBusScenarios = (resClass) => {
97 let param = [{ 102 let param = [{
98 prop: 'extendCol3', 103 prop: 'extendCol3',
99 label: '名称', 104 label: '名称',
@@ -110,7 +115,7 @@ export default { @@ -110,7 +115,7 @@ export default {
110 prop: 'os', 115 prop: 'os',
111 label: '操作系统', 116 label: '操作系统',
112 }] 117 }]
113 - service.sendEventDiagnoseBusinessScenarios(emit, props.faultNo,props.targetType.toLocaleLowerCase(),param); 118 + service.sendEventDiagnoseBusinessScenarios(emit, props.faultNo,props.targetType.toLocaleLowerCase(),param,resClass);
114 } 119 }
115 const openKpiList = () => { 120 const openKpiList = () => {
116 service.sendEventDiagnoseKpiList(emit, props.faultNo,props.targetType.toLocaleLowerCase()); 121 service.sendEventDiagnoseKpiList(emit, props.faultNo,props.targetType.toLocaleLowerCase());
@@ -8,7 +8,7 @@ @@ -8,7 +8,7 @@
8 placement="top-start"> 8 placement="top-start">
9 <template #content> 9 <template #content>
10 以图标方式展示每个资源类型的告警结果，颜色代表告警结果 <br/> 10 以图标方式展示每个资源类型的告警结果，颜色代表告警结果 <br/>
11 - 红色：存在严重告警； 橙色：存在重要告警; 橙色：存在一般告警; 绿色：无告警 11 + 红色：存在严重告警； 黄色：存在重要告警; 橙色：存在一般告警; 绿色：无告警
12 </template> 12 </template>
13 <i class="iconfont icon-tishi" /> 13 <i class="iconfont icon-tishi" />
14 </el-tooltip> 14 </el-tooltip>
@@ -283,7 +283,6 @@ const faultEvent = () => { @@ -283,7 +283,6 @@ const faultEvent = () => {
283 * @param arr [[{指标对象},{指标对象},....].[{指标对象},{指标对象},....]] 283 * @param arr [[{指标对象},{指标对象},....].[{指标对象},{指标对象},....]]
284 */ 284 */
285 const sendEventMoreDialog = (emit, global, arr, title) => { 285 const sendEventMoreDialog = (emit, global, arr, title) => {
286 - debugger  
287 if (!arr || arr.length == 0) { 286 if (!arr || arr.length == 0) {
288 global.showMsg("暂无数据！", "warning"); 287 global.showMsg("暂无数据！", "warning");
289 return; 288 return;
@@ -361,15 +360,15 @@ const faultEvent = () => { @@ -361,15 +360,15 @@ const faultEvent = () => {
361 label: '名称', 360 label: '名称',
362 }, { 361 }, {
363 prop: 'kpiName', 362 prop: 'kpiName',
364 - width: 120, 363 + width: 230,
365 label: '指标名称', 364 label: '指标名称',
366 }, { 365 }, {
367 prop: 'diagnosisResult', 366 prop: 'diagnosisResult',
368 - width: 80, 367 + width: 200,
369 label: '诊断值', 368 label: '诊断值',
370 }, { 369 }, {
371 prop: 'isAbnormal', 370 prop: 'isAbnormal',
372 - width: 80, 371 + width: 200,
373 label: '诊断结果', 372 label: '诊断结果',
374 render: function (row) { 373 render: function (row) {
375 if (row) { 374 if (row) {