monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit f4b499c64eacb5c3867b96cc5f9296ac3a5a8fc2 1 parent 1d590678

故障结果优化

Inline Side-by-side
Showing 3 changed files with 62 additions and 40 deletions
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 <div> 3 <div>
4 {{detailInfo.info}} 4 {{detailInfo.info}}
5 </div> 5 </div>
6 - <el-progress :text-inside="true" :stroke-width="26" :percentage="detailInfo.rate*100" > 6 + <el-progress :text-inside="true" :stroke-width="26" :percentage="detailInfo.rate*100" :status="detailInfo.rate*100 == 0 ? 'exception' : 'success'">
7 <span style="color: black">正常占比:{{detailInfo.rate*100}}%</span> 7 <span style="color: black">正常占比:{{detailInfo.rate*100}}%</span>
8 </el-progress> 8 </el-progress>
9 </div> 9 </div>
@@ -56,17 +56,17 @@ @@ -56,17 +56,17 @@
56 </cm-dialog> 56 </cm-dialog>
57 57
58 <!-- 告警列表 --> 58 <!-- 告警列表 -->
59 - <cm-dialog top="3vh" title="告警列表" width="80%" :showDialogVisible="alarmFlg" 59 + <cm-dialog top="3vh" title="告警列表" width="90%" :showDialogVisible="alarmFlg"
60 @hidedialog="showAlarmDialog" :showFooter="false"> 60 @hidedialog="showAlarmDialog" :showFooter="false">
61 <template v-slot> 61 <template v-slot>
62 - <div> 62 + <div style="height:720px;max-height:720px;overflow-y: auto;">
63 <cm-table-page v-if="alarmList.columns.length > 0" :columns="alarmList.columns" 63 <cm-table-page v-if="alarmList.columns.length > 0" :columns="alarmList.columns"
64 :dataList="alarmList.dataList" 64 :dataList="alarmList.dataList"
65 :showIndex="true" 65 :showIndex="true"
66 :showBorder="true" 66 :showBorder="true"
67 @loaddata="loadPage" 67 @loaddata="loadPage"
68 :showPage="false" 68 :showPage="false"
69 - :height="500" 69 + :height="720"
70 :showTools="false"> 70 :showTools="false">
71 </cm-table-page> 71 </cm-table-page>
72 </div> 72 </div>
@@ -59,53 +59,62 @@ const lineDetail = (props) => { @@ -59,53 +59,62 @@ const lineDetail = (props) => {
59 * 作者： Wang 59 * 作者： Wang
60 * 时间：2021/12/15 19:59 60 * 时间：2021/12/15 19:59
61 */ 61 */
62 -const alarmDialog = () => { 62 +const alarmDialog = (props) => {
63 const {proxy} = Vue.getCurrentInstance(); 63 const {proxy} = Vue.getCurrentInstance();
64 let alarmFlg = Vue.ref(false); 64 let alarmFlg = Vue.ref(false);
65 65
66 let alarmList = Vue.ref({ 66 let alarmList = Vue.ref({
67 - columns: [/*{ 67 + columns: [{
68 prop: "resId", 68 prop: "resId",
69 label: "资源ID", 69 label: "资源ID",
70 - },*/ { 70 + width:120
  71 + }, {
71 prop: "kpiId", 72 prop: "kpiId",
72 label: "指标ID", 73 label: "指标ID",
  74 + width:120
73 }, { 75 }, {
74 prop: "flag", 76 prop: "flag",
75 label: "FLAG", 77 label: "FLAG",
76 - }, /*{  
77 - prop: "id",  
78 - label: "告警ID",  
79 - },*/ {  
80 - prop: "alarmTime",  
81 - label: "首次告警时间", 78 + width:120
82 }, { 79 }, {
  80 + prop: "alarmId",
  81 + label: "告警ID",
  82 + width:120
  83 + },{
83 prop: "alarmContent", 84 prop: "alarmContent",
84 label: "告警内容", 85 label: "告警内容",
  86 + width:250
  87 + }, {
  88 + prop: "firstAlarmTime",
  89 + label: "首次告警时间",
  90 + width:120
85 }, { 91 }, {
86 - prop: "noticeTime",  
87 - label: "通知时间", 92 + prop: "recentAlarmTime",
  93 + label: "最近告警时间",
  94 + width:120
88 }, { 95 }, {
89 prop: "alarmRepeatCnt", 96 prop: "alarmRepeatCnt",
90 label: "告警次数", 97 label: "告警次数",
91 - },/* {  
92 - prop: "alarmContent", 98 + width:80
  99 + }, {
  100 + prop: "noticeContent",
93 label: "通知内容", 101 label: "通知内容",
94 - },*/ { 102 + width:300
  103 + }, {
95 prop: "alarmLevel", 104 prop: "alarmLevel",
96 label: "告警级别", 105 label: "告警级别",
  106 + width:80,
97 render: function (row) { 107 render: function (row) {
98 -  
99 let obj = proxy.$global.getAlarmLevel(row.alarmLevel); 108 let obj = proxy.$global.getAlarmLevel(row.alarmLevel);
100 if (obj) { 109 if (obj) {
101 return `<span style="color: ${obj.color}">${obj.name}</span>` 110 return `<span style="color: ${obj.color}">${obj.name}</span>`
102 } 111 }
103 return ''; 112 return '';
104 } 113 }
105 - }, {  
106 - prop: "durationStr",  
107 - label: "持续时长",  
108 - }], 114 + }/*, {
  115 + prop: "firstAlarmTime",
  116 + label: "时间戳",
  117 + }*/],
109 dataList: [], 118 dataList: [],
110 total: 0 119 total: 0
111 }); 120 });
@@ -117,7 +126,14 @@ const alarmDialog = () => { @@ -117,7 +126,14 @@ const alarmDialog = () => {
117 let openAlarmDialog = (row) => { 126 let openAlarmDialog = (row) => {
118 showAlarmDialog(true); 127 showAlarmDialog(true);
119 // 获取告警列表 128 // 获取告警列表
120 - proxy.$http.get(`/api-web/home/alarm/alarmListPage?page=1&limit=10000&resId=${row.resId}`, {}, function (res) { 129 + let params ={
  130 + faultNo: props.faultNo,
  131 + targetType: props.targetType,
  132 + resId: row.resId,
  133 + kpiId: row.kpiId,
  134 + flag: row.flg
  135 + }
  136 + proxy.$http.get(`/api-web/fault/result/findAlarmList`, params, function (res) {
121 if (res && res.success) { 137 if (res && res.success) {
122 if (res.data) { 138 if (res.data) {
123 alarmList.value.dataList = res.data; 139 alarmList.value.dataList = res.data;
@@ -145,6 +161,10 @@ const alarmDialog = () => { @@ -145,6 +161,10 @@ const alarmDialog = () => {
145 */ 161 */
146 const colTypes = (props, list,openLine,openAlarmDialog) => { 162 const colTypes = (props, list,openLine,openAlarmDialog) => {
147 163
  164 + let widths ={
  165 + errcode:150
  166 + }
  167 +
148 // 展示折线图指标 168 // 展示折线图指标
149 let lineKpiIds = ['point_succ', 'count', 'response_rate', 'success_rate']; 169 let lineKpiIds = ['point_succ', 'count', 'response_rate', 'success_rate'];
150 170
@@ -231,7 +251,7 @@ const colTypes = (props, list,openLine,openAlarmDialog) => { @@ -231,7 +251,7 @@ const colTypes = (props, list,openLine,openAlarmDialog) => {
231 let colInfo = { 251 let colInfo = {
232 prop: prop, 252 prop: prop,
233 label: v.kpiName, 253 label: v.kpiName,
234 - width: 50 254 + width: widths[prop] == undefined ? 50 : 100
235 }; 255 };
236 256
237 if (lineKpiIds.indexOf(prop) != -1) { 257 if (lineKpiIds.indexOf(prop) != -1) {
@@ -283,11 +303,17 @@ const colTypes = (props, list,openLine,openAlarmDialog) => { @@ -283,11 +303,17 @@ const colTypes = (props, list,openLine,openAlarmDialog) => {
283 }, { 303 }, {
284 prop: "normal", 304 prop: "normal",
285 width:80, 305 width:80,
286 - label: "正常数" 306 + label: "正常数",
  307 + render: function (row) {
  308 + return `<span >${row.normal == undefined ? 0 : row.normal }</span>`
  309 + }
287 }, { 310 }, {
288 prop: "abnormal", 311 prop: "abnormal",
289 width:80, 312 width:80,
290 label: "异常出", 313 label: "异常出",
  314 + render: function (row) {
  315 + return `<span >${row.abnormal == undefined ? 0 : row.abnormal }</span>`
  316 + }
291 }, { 317 }, {
292 prop: "alarm", 318 prop: "alarm",
293 width:80, 319 width:80,
@@ -296,15 +322,7 @@ const colTypes = (props, list,openLine,openAlarmDialog) => { @@ -296,15 +322,7 @@ const colTypes = (props, list,openLine,openAlarmDialog) => {
296 openAlarmDialog(row); 322 openAlarmDialog(row);
297 }, 323 },
298 render: function (row) { 324 render: function (row) {
299 - try {  
300 - let html = eval(prop + '(' + row[prop] + ')');  
301 - if(html){  
302 - return html;  
303 - }  
304 - }catch (e){  
305 -  
306 - }  
307 - return `<span style="text-decoration: underline;color: blue;">${row.alarm}</span>` 325 + return `<span style="text-decoration: underline;color: blue;">${row.alarm == undefined ? 0 : row.alarm }</span>`
308 } 326 }
309 }]; 327 }];
310 328
@@ -328,6 +346,7 @@ const colTypes = (props, list,openLine,openAlarmDialog) => { @@ -328,6 +346,7 @@ const colTypes = (props, list,openLine,openAlarmDialog) => {
328 dataList.push(item); 346 dataList.push(item);
329 index++; 347 index++;
330 } 348 }
  349 +
331 // 设置数据 350 // 设置数据
332 list.value.dataList = dataList; 351 list.value.dataList = dataList;
333 list.value.columns = col; 352 list.value.columns = col;
@@ -481,7 +500,7 @@ export default { @@ -481,7 +500,7 @@ export default {
481 openAlarmDialog, 500 openAlarmDialog,
482 alarmList, 501 alarmList,
483 alarmFlg 502 alarmFlg
484 - } = alarmDialog(); 503 + } = alarmDialog(props);
485 504
486 // 数据统计方式 505 // 数据统计方式
487 const {dataTypeByKpi, dataTypeByFlag} = colTypes(props, list,openLine,openAlarmDialog); 506 const {dataTypeByKpi, dataTypeByFlag} = colTypes(props, list,openLine,openAlarmDialog);
@@ -67,12 +67,11 @@ const faultDetail = () => { @@ -67,12 +67,11 @@ const faultDetail = () => {
67 */ 67 */
68 let settingDetail = (row) => { 68 let settingDetail = (row) => {
69 // 设置标题 69 // 设置标题
70 - faultDetailDialogTitle.value = `${row.faultBody}诊断报告`; 70 + faultDetailDialogTitle.value = `${row.faultBody}（${row.faultNo}）诊断报告`;
71 // 当前故障编号 71 // 当前故障编号
72 faultDetailDetailInfo.value.faultNo = row.faultNo; 72 faultDetailDetailInfo.value.faultNo = row.faultNo;
73 } 73 }
74 74
75 -  
76 return { 75 return {
77 settingDetail, 76 settingDetail,
78 showFaultDetailDialog, 77 showFaultDetailDialog,
@@ -232,6 +231,10 @@ export default { @@ -232,6 +231,10 @@ export default {
232 // 列表展示结果 231 // 列表展示结果
233 let list = Vue.ref({ 232 let list = Vue.ref({
234 columns: [{ 233 columns: [{
  234 + prop: 'faultNo',
  235 + width: 120,
  236 + label: '故障编号'
  237 + },{
235 prop: 'faultBody', 238 prop: 'faultBody',
236 label: '故障主体', 239 label: '故障主体',
237 width: 150, 240 width: 150,
@@ -246,12 +249,12 @@ export default { @@ -246,12 +249,12 @@ export default {
246 } 249 }
247 }, { 250 }, {
248 prop: 'faulttype', 251 prop: 'faulttype',
249 - width: 80, 252 + width: 100,
250 label: '故障分类' 253 label: '故障分类'
251 }, { 254 }, {
252 prop: 'createTime', 255 prop: 'createTime',
253 label: '发生时间', 256 label: '发生时间',
254 - width: 120, 257 + width: 130,
255 }, { 258 }, {
256 prop: 'faultState', 259 prop: 'faultState',
257 label: '故障状态', 260 label: '故障状态',