|
|
1
|
+/**
|
|
|
2
|
+ * 折线图
|
|
|
3
|
+ * <p>
|
|
|
4
|
+ * 作者: Wang
|
|
|
5
|
+ * 时间:2021/12/15 19:59
|
|
|
6
|
+ */
|
1
|
const lineDetail = () => {
|
7
|
const lineDetail = () => {
|
2
|
let showLineDialog = Vue.ref(false);
|
8
|
let showLineDialog = Vue.ref(false);
|
3
|
|
9
|
|
4
|
let closeLineDialog = (flg) => {
|
10
|
let closeLineDialog = (flg) => {
|
5
|
showLineDialog.value = flg;
|
11
|
showLineDialog.value = flg;
|
6
|
}
|
12
|
}
|
|
|
13
|
+
|
|
|
14
|
+ let openLine = (row) => {
|
|
|
15
|
+ debugger
|
|
|
16
|
+ closeLineDialog(true);
|
|
|
17
|
+ }
|
7
|
return {
|
18
|
return {
|
8
|
showLineDialog,
|
19
|
showLineDialog,
|
9
|
- closeLineDialog
|
20
|
+ closeLineDialog,
|
|
|
21
|
+ openLine
|
|
|
22
|
+ }
|
|
|
23
|
+}
|
|
|
24
|
+
|
|
|
25
|
+/**
|
|
|
26
|
+ * 告警列表
|
|
|
27
|
+ * <p>
|
|
|
28
|
+ * 作者: Wang
|
|
|
29
|
+ * 时间:2021/12/15 19:59
|
|
|
30
|
+ */
|
|
|
31
|
+const alarmDialog = () => {
|
|
|
32
|
+ const {proxy} = Vue.getCurrentInstance();
|
|
|
33
|
+ let alarmFlg = Vue.ref(false);
|
|
|
34
|
+
|
|
|
35
|
+ let alarmList = Vue.ref({
|
|
|
36
|
+ columns: [/*{
|
|
|
37
|
+ prop: "resId",
|
|
|
38
|
+ label: "资源ID",
|
|
|
39
|
+ },*/ {
|
|
|
40
|
+ prop: "kpiId",
|
|
|
41
|
+ label: "指标ID",
|
|
|
42
|
+ }, {
|
|
|
43
|
+ prop: "flag",
|
|
|
44
|
+ label: "FLAG",
|
|
|
45
|
+ }, /*{
|
|
|
46
|
+ prop: "id",
|
|
|
47
|
+ label: "告警ID",
|
|
|
48
|
+ },*/ {
|
|
|
49
|
+ prop: "alarmTime",
|
|
|
50
|
+ label: "首次告警时间",
|
|
|
51
|
+ }, {
|
|
|
52
|
+ prop: "alarmContent",
|
|
|
53
|
+ label: "告警内容",
|
|
|
54
|
+ }, {
|
|
|
55
|
+ prop: "noticeTime",
|
|
|
56
|
+ label: "通知时间",
|
|
|
57
|
+ }, {
|
|
|
58
|
+ prop: "alarmRepeatCnt",
|
|
|
59
|
+ label: "告警次数",
|
|
|
60
|
+ },/* {
|
|
|
61
|
+ prop: "alarmContent",
|
|
|
62
|
+ label: "通知内容",
|
|
|
63
|
+ },*/ {
|
|
|
64
|
+ prop: "alarmLevel",
|
|
|
65
|
+ label: "告警级别",
|
|
|
66
|
+ render: function (row) {
|
|
|
67
|
+
|
|
|
68
|
+ let obj = proxy.$global.getAlarmLevel(row.alarmLevel);
|
|
|
69
|
+ if (obj) {
|
|
|
70
|
+ return `<span style="color: ${obj.color}">${obj.name}</span>`
|
|
|
71
|
+ }
|
|
|
72
|
+ return '';
|
|
|
73
|
+ }
|
|
|
74
|
+ }, {
|
|
|
75
|
+ prop: "durationStr",
|
|
|
76
|
+ label: "持续时长",
|
|
|
77
|
+ }],
|
|
|
78
|
+ dataList: [],
|
|
|
79
|
+ total: 0
|
|
|
80
|
+ });
|
|
|
81
|
+
|
|
|
82
|
+ let showAlarmDialog = (flg) => {
|
|
|
83
|
+ alarmFlg.value = flg;
|
|
|
84
|
+ }
|
|
|
85
|
+
|
|
|
86
|
+ let openAlarmDialog = (row) => {
|
|
|
87
|
+ showAlarmDialog(true);
|
|
|
88
|
+ // 获取告警列表
|
|
|
89
|
+ proxy.$http.get(`/api-web/home/alarm/alarmListPage?page=1&limit=10000&resId=${row.resId}`, {}, function (res) {
|
|
|
90
|
+ if (res && res.success) {
|
|
|
91
|
+ if (res.data) {
|
|
|
92
|
+ alarmList.value.dataList = res.data;
|
|
|
93
|
+ }
|
|
|
94
|
+ } else {
|
|
|
95
|
+ proxy.$global.showMsg(res.msg ? res.msg : '暂无告警数据!', "warning");
|
|
|
96
|
+ }
|
|
|
97
|
+ });
|
|
|
98
|
+ }
|
|
|
99
|
+
|
|
|
100
|
+
|
|
|
101
|
+ return {
|
|
|
102
|
+ showAlarmDialog,
|
|
|
103
|
+ openAlarmDialog,
|
|
|
104
|
+ alarmList,
|
|
|
105
|
+ alarmFlg
|
10
|
}
|
106
|
}
|
11
|
}
|
107
|
}
|
12
|
|
108
|
|
13
|
-const colTypes = (props,list) => {
|
109
|
+/**
|
|
|
110
|
+ * 数据转换
|
|
|
111
|
+ * <p>
|
|
|
112
|
+ * 作者: Wang
|
|
|
113
|
+ * 时间:2021/12/15 18:08
|
|
|
114
|
+ */
|
|
|
115
|
+const colTypes = (props, list,openLine,openAlarmDialog) => {
|
|
|
116
|
+
|
|
|
117
|
+ // 指标
|
|
|
118
|
+ let lineKpiIds = ['point_succ', 'count', 'response_rate', 'success_rate']
|
|
|
119
|
+
|
|
|
120
|
+ let getItem = (v) => {
|
|
|
121
|
+ let item = {};
|
|
|
122
|
+ item.resId = v.resId;
|
|
|
123
|
+ item.resName = v.resName;
|
|
|
124
|
+ item.kpiName = v.kpiName;
|
|
|
125
|
+ item.bizId = v.bizId;
|
|
|
126
|
+ item.bizName = v.bizName;
|
|
|
127
|
+ item.kpiId = v.kpiId;
|
|
|
128
|
+ item.flag = v.flag;
|
|
|
129
|
+ return item;
|
|
|
130
|
+ }
|
14
|
/**
|
131
|
/**
|
15
|
* KPI数据处理方式
|
132
|
* KPI数据处理方式
|
16
|
* <p>
|
133
|
* <p>
|
|
@@ -20,33 +137,35 @@ const colTypes = (props,list) => { |
|
@@ -20,33 +137,35 @@ const colTypes = (props,list) => { |
20
|
let dataTypeByKpi = (data) => {
|
137
|
let dataTypeByKpi = (data) => {
|
21
|
let dataList = [];
|
138
|
let dataList = [];
|
22
|
let col = [{
|
139
|
let col = [{
|
23
|
- prop: 'kpiName',
|
140
|
+ prop: 'resName',
|
24
|
label: props.itemName,
|
141
|
label: props.itemName,
|
25
|
- width: 120,
|
|
|
26
|
- click: function (row) {
|
|
|
27
|
- closeLineDialog(true);
|
|
|
28
|
- }
|
142
|
+ width: 100
|
29
|
}];
|
143
|
}];
|
30
|
|
144
|
|
31
|
let index = 0;
|
145
|
let index = 0;
|
32
|
for (let resId in data) {
|
146
|
for (let resId in data) {
|
33
|
let list = data[resId];
|
147
|
let list = data[resId];
|
34
|
-
|
|
|
35
|
- let item = {};
|
|
|
36
|
- item.resId = list[0].resId;
|
|
|
37
|
- item.resName = list[0].resName;
|
|
|
38
|
- item.bizId = list[0].bizId;
|
|
|
39
|
- item.bizName = list[0].bizName;
|
|
|
40
|
-
|
148
|
+ let item = getItem(list[0]);
|
41
|
list.forEach(function (v) {
|
149
|
list.forEach(function (v) {
|
42
|
item[v.kpiId] = v.kpiValue;
|
150
|
item[v.kpiId] = v.kpiValue;
|
43
|
item.kpiName = v.kpiName;
|
151
|
item.kpiName = v.kpiName;
|
44
|
if (index == 0) {
|
152
|
if (index == 0) {
|
45
|
- col.push({
|
153
|
+ let colInfo = {
|
46
|
prop: v.kpiId,
|
154
|
prop: v.kpiId,
|
47
|
label: v.kpiName,
|
155
|
label: v.kpiName,
|
48
|
width: 80
|
156
|
width: 80
|
49
|
- })
|
157
|
+ };
|
|
|
158
|
+
|
|
|
159
|
+ if (lineKpiIds.indexOf(v.kpiId) != -1) {
|
|
|
160
|
+ colInfo['click'] = function (row) {
|
|
|
161
|
+ openLine(row);
|
|
|
162
|
+ }
|
|
|
163
|
+ colInfo['render'] = function (row) {
|
|
|
164
|
+ return `<span style="text-decoration: underline;color: blue;">${row[v.kpiId]}</span>`
|
|
|
165
|
+ }
|
|
|
166
|
+ }
|
|
|
167
|
+
|
|
|
168
|
+ col.push(colInfo)
|
50
|
}
|
169
|
}
|
51
|
});
|
170
|
});
|
52
|
dataList.push(item);
|
171
|
dataList.push(item);
|
|
@@ -76,41 +195,31 @@ const colTypes = (props,list) => { |
|
@@ -76,41 +195,31 @@ const colTypes = (props,list) => { |
76
|
}, {
|
195
|
}, {
|
77
|
prop: "alarm",
|
196
|
prop: "alarm",
|
78
|
label: "告警",
|
197
|
label: "告警",
|
|
|
198
|
+ click: function (row) {
|
|
|
199
|
+ openAlarmDialog(row);
|
|
|
200
|
+ },
|
|
|
201
|
+ render: function (row) {
|
|
|
202
|
+ return `<span style="text-decoration: underline;color: blue;">${row.alarm}</span>`
|
|
|
203
|
+ }
|
79
|
}];
|
204
|
}];
|
80
|
|
205
|
|
81
|
let dataList = [];
|
206
|
let dataList = [];
|
82
|
let col = [{
|
207
|
let col = [{
|
83
|
prop: 'kpiName',
|
208
|
prop: 'kpiName',
|
84
|
label: props.itemName,
|
209
|
label: props.itemName,
|
85
|
- width: 100,
|
|
|
86
|
- click: function (row) {
|
|
|
87
|
- closeLineDialog(true);
|
|
|
88
|
- }
|
210
|
+ width: 100
|
89
|
}];
|
211
|
}];
|
90
|
|
212
|
|
91
|
- flags.forEach(function ({prop, label}) {
|
|
|
92
|
- col.push({
|
|
|
93
|
- prop: prop,
|
|
|
94
|
- label: label,
|
|
|
95
|
- width: 80
|
|
|
96
|
- })
|
213
|
+ flags.forEach(function (item) {
|
|
|
214
|
+ col.push(item)
|
97
|
})
|
215
|
})
|
98
|
-
|
|
|
99
|
let index = 0;
|
216
|
let index = 0;
|
100
|
for (let resId in data) {
|
217
|
for (let resId in data) {
|
101
|
let list = data[resId];
|
218
|
let list = data[resId];
|
102
|
-
|
|
|
103
|
- let item = {};
|
|
|
104
|
- item.resId = list[0].resId;
|
|
|
105
|
- item.resName = list[0].resName;
|
|
|
106
|
- item.bizId = list[0].bizId;
|
|
|
107
|
- item.bizName = list[0].bizName;
|
|
|
108
|
- item.kpiName = list[0].kpiName;
|
|
|
109
|
-
|
219
|
+ let item = getItem(list[0]);
|
110
|
list.forEach(function (v) {
|
220
|
list.forEach(function (v) {
|
111
|
item[v.flag] = v.kpiValue;
|
221
|
item[v.flag] = v.kpiValue;
|
112
|
});
|
222
|
});
|
113
|
-
|
|
|
114
|
dataList.push(item);
|
223
|
dataList.push(item);
|
115
|
index++;
|
224
|
index++;
|
116
|
}
|
225
|
}
|
|
@@ -121,6 +230,78 @@ const colTypes = (props,list) => { |
|
@@ -121,6 +230,78 @@ const colTypes = (props,list) => { |
121
|
|
230
|
|
122
|
return {dataTypeByKpi, dataTypeByFlag}
|
231
|
return {dataTypeByKpi, dataTypeByFlag}
|
123
|
}
|
232
|
}
|
|
|
233
|
+
|
|
|
234
|
+const resDetail = (props) => {
|
|
|
235
|
+ const {proxy} = Vue.getCurrentInstance();
|
|
|
236
|
+ let resListDialog = Vue.ref(false);
|
|
|
237
|
+ let resList = Vue.ref({
|
|
|
238
|
+ columns: [{
|
|
|
239
|
+ prop: "resName",
|
|
|
240
|
+ label: "资源名称",
|
|
|
241
|
+ }, {
|
|
|
242
|
+ prop: "bizName",
|
|
|
243
|
+ label: "业务名称",
|
|
|
244
|
+ }, {
|
|
|
245
|
+ prop: "kpiId",
|
|
|
246
|
+ label: "指标",
|
|
|
247
|
+ }, {
|
|
|
248
|
+ prop: "kpiName",
|
|
|
249
|
+ label: "指标名称",
|
|
|
250
|
+ }, {
|
|
|
251
|
+ prop: "kpiValue",
|
|
|
252
|
+ label: "指标值",
|
|
|
253
|
+ }, {
|
|
|
254
|
+ prop: "targetType",
|
|
|
255
|
+ label: "分类",
|
|
|
256
|
+ }],
|
|
|
257
|
+ dataList: [],
|
|
|
258
|
+ total: 0
|
|
|
259
|
+ });
|
|
|
260
|
+
|
|
|
261
|
+ let showResListDialog = (flg) => {
|
|
|
262
|
+ resListDialog.value = flg;
|
|
|
263
|
+ }
|
|
|
264
|
+
|
|
|
265
|
+ let handleClick = (row, index) => {
|
|
|
266
|
+ debugger
|
|
|
267
|
+ showResListDialog(true);
|
|
|
268
|
+ getResListPage(row);
|
|
|
269
|
+ }
|
|
|
270
|
+
|
|
|
271
|
+ let getResListPage = (row) => {
|
|
|
272
|
+ let params = {
|
|
|
273
|
+ faultNo: props.faultNo,
|
|
|
274
|
+ targeType: props.targeType,
|
|
|
275
|
+ resId: row.resId,
|
|
|
276
|
+ kpiId: row.kpiId,
|
|
|
277
|
+ flag: row.flag
|
|
|
278
|
+ }
|
|
|
279
|
+ proxy.$http.get('/api-web/fault/result/findResList', params, function (res) {
|
|
|
280
|
+ if (res && res.success) {
|
|
|
281
|
+ if (res.data) {
|
|
|
282
|
+ resList.value.dataList = res.data;
|
|
|
283
|
+ }
|
|
|
284
|
+ } else {
|
|
|
285
|
+ proxy.$global.showMsg(res.msg, "warning");
|
|
|
286
|
+ }
|
|
|
287
|
+ });
|
|
|
288
|
+ }
|
|
|
289
|
+
|
|
|
290
|
+ let loadPage = () => {
|
|
|
291
|
+
|
|
|
292
|
+ }
|
|
|
293
|
+
|
|
|
294
|
+ return {
|
|
|
295
|
+ resList,
|
|
|
296
|
+ resListDialog,
|
|
|
297
|
+ showResListDialog,
|
|
|
298
|
+ getResListPage,
|
|
|
299
|
+ loadPage,
|
|
|
300
|
+ handleClick
|
|
|
301
|
+ }
|
|
|
302
|
+}
|
|
|
303
|
+
|
|
|
304
|
+
|
124
|
export default {
|
305
|
export default {
|
125
|
name: 'resultItemIndex',
|
306
|
name: 'resultItemIndex',
|
126
|
template: '',
|
307
|
template: '',
|
|
@@ -157,7 +338,7 @@ export default { |
|
@@ -157,7 +338,7 @@ export default { |
157
|
},
|
338
|
},
|
158
|
},
|
339
|
},
|
159
|
setup(props, {attrs, slots, emit}) {
|
340
|
setup(props, {attrs, slots, emit}) {
|
160
|
- let width = Vue.ref(window.innerWidth * 0.8 - 190);
|
341
|
+ let width = Vue.ref(window.innerWidth * 0.8 - 220);
|
161
|
const {proxy} = Vue.getCurrentInstance();
|
342
|
const {proxy} = Vue.getCurrentInstance();
|
162
|
let list = Vue.ref({
|
343
|
let list = Vue.ref({
|
163
|
columns: [],
|
344
|
columns: [],
|
|
@@ -166,12 +347,35 @@ export default { |
|
@@ -166,12 +347,35 @@ export default { |
166
|
});
|
347
|
});
|
167
|
|
348
|
|
168
|
let detailInfo = Vue.ref({
|
349
|
let detailInfo = Vue.ref({
|
169
|
- rate:0,
|
|
|
170
|
- info:''
|
350
|
+ rate: 0,
|
|
|
351
|
+ info: ''
|
171
|
});
|
352
|
});
|
172
|
|
353
|
|
|
|
354
|
+ const {
|
|
|
355
|
+ showLineDialog,
|
|
|
356
|
+ closeLineDialog,
|
|
|
357
|
+ openLine
|
|
|
358
|
+ } = lineDetail();
|
|
|
359
|
+
|
|
|
360
|
+
|
|
|
361
|
+ const {
|
|
|
362
|
+ resList,
|
|
|
363
|
+ resListDialog,
|
|
|
364
|
+ showResListDialog,
|
|
|
365
|
+ getResListPage,
|
|
|
366
|
+ loadPage,
|
|
|
367
|
+ handleClick
|
|
|
368
|
+ } = resDetail(props);
|
|
|
369
|
+
|
|
|
370
|
+ const {
|
|
|
371
|
+ showAlarmDialog,
|
|
|
372
|
+ openAlarmDialog,
|
|
|
373
|
+ alarmList,
|
|
|
374
|
+ alarmFlg
|
|
|
375
|
+ } = alarmDialog();
|
|
|
376
|
+
|
173
|
// 数据统计方式
|
377
|
// 数据统计方式
|
174
|
- const {dataTypeByKpi, dataTypeByFlag} = colTypes(props,list);
|
378
|
+ const {dataTypeByKpi, dataTypeByFlag} = colTypes(props, list,openLine,openAlarmDialog);
|
175
|
|
379
|
|
176
|
/**
|
380
|
/**
|
177
|
* 获取表格数据
|
381
|
* 获取表格数据
|
|
@@ -186,11 +390,11 @@ export default { |
|
@@ -186,11 +390,11 @@ export default { |
186
|
}
|
390
|
}
|
187
|
proxy.$http.get('/api-web/fault/result/findResult', params, function (res) {
|
391
|
proxy.$http.get('/api-web/fault/result/findResult', params, function (res) {
|
188
|
if (res && res.success) {
|
392
|
if (res && res.success) {
|
189
|
- if(res.map){
|
393
|
+ if (res.map) {
|
190
|
callback(res.map);
|
394
|
callback(res.map);
|
191
|
}
|
395
|
}
|
192
|
} else {
|
396
|
} else {
|
193
|
- proxy.$global.showMsg(res.msg,"warning");
|
397
|
+ proxy.$global.showMsg(res.msg, "warning");
|
194
|
}
|
398
|
}
|
195
|
});
|
399
|
});
|
196
|
|
400
|
|
|
@@ -211,27 +415,22 @@ export default { |
|
@@ -211,27 +415,22 @@ export default { |
211
|
/**
|
415
|
/**
|
212
|
* 获取统计信息
|
416
|
* 获取统计信息
|
213
|
*/
|
417
|
*/
|
214
|
- let findCountInfo = () =>{
|
418
|
+ let findCountInfo = () => {
|
215
|
let params = {
|
419
|
let params = {
|
216
|
faultNo: props.faultNo,
|
420
|
faultNo: props.faultNo,
|
217
|
targeType: props.targeType
|
421
|
targeType: props.targeType
|
218
|
}
|
422
|
}
|
219
|
proxy.$http.get('/api-web/fault/result/findCountInfo', params, function (res) {
|
423
|
proxy.$http.get('/api-web/fault/result/findCountInfo', params, function (res) {
|
220
|
if (res && res.success) {
|
424
|
if (res && res.success) {
|
221
|
- if( res.map){
|
425
|
+ if (res.map) {
|
222
|
detailInfo.value = res.map;
|
426
|
detailInfo.value = res.map;
|
223
|
}
|
427
|
}
|
224
|
} else {
|
428
|
} else {
|
225
|
- proxy.$global.showMsg(res.msg,"warning");
|
429
|
+ proxy.$global.showMsg(res.msg, "warning");
|
226
|
}
|
430
|
}
|
227
|
});
|
431
|
});
|
228
|
}
|
432
|
}
|
229
|
|
433
|
|
230
|
- const {
|
|
|
231
|
- showLineDialog,
|
|
|
232
|
- closeLineDialog
|
|
|
233
|
- } = lineDetail();
|
|
|
234
|
-
|
|
|
235
|
// 监听编辑状态
|
434
|
// 监听编辑状态
|
236
|
Vue.watch(() => props.faultNo, (newValue, oldVlaue) => {
|
435
|
Vue.watch(() => props.faultNo, (newValue, oldVlaue) => {
|
237
|
getPage();
|
436
|
getPage();
|
|
@@ -248,8 +447,25 @@ export default { |
|
@@ -248,8 +447,25 @@ export default { |
248
|
list,
|
447
|
list,
|
249
|
detailInfo,
|
448
|
detailInfo,
|
250
|
|
449
|
|
|
|
450
|
+ // 折线图
|
251
|
showLineDialog,
|
451
|
showLineDialog,
|
252
|
- closeLineDialog
|
452
|
+ closeLineDialog,
|
|
|
453
|
+ openLine,
|
|
|
454
|
+
|
|
|
455
|
+
|
|
|
456
|
+ // 资源详情
|
|
|
457
|
+ resList,
|
|
|
458
|
+ resListDialog,
|
|
|
459
|
+ showResListDialog,
|
|
|
460
|
+ getResListPage,
|
|
|
461
|
+ loadPage,
|
|
|
462
|
+ handleClick,
|
|
|
463
|
+
|
|
|
464
|
+ // 告警弹框
|
|
|
465
|
+ showAlarmDialog,
|
|
|
466
|
+ openAlarmDialog,
|
|
|
467
|
+ alarmList,
|
|
|
468
|
+ alarmFlg
|
253
|
}
|
469
|
}
|
254
|
}
|
470
|
}
|
255
|
} |
471
|
} |