monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 539a12d083f337f5fa6d74d7a68ecc2da8bc730e 2 parents 584eb8e7 5cfced17

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

故障诊断基础资源汇总信息弹框



See merge request !796
Inline Side-by-side
Showing 10 changed files with 82 additions and 29 deletions
@@ -96,11 +96,9 @@ export default { @@ -96,11 +96,9 @@ export default {
96 const openBusScenarios = () => { 96 const openBusScenarios = () => {
97 let param = [{ 97 let param = [{
98 prop: 'taskName', 98 prop: 'taskName',
99 - width: 150,  
100 label: '名称', 99 label: '名称',
101 },{ 100 },{
102 prop: 'taskType', 101 prop: 'taskType',
103 - width: 120,  
104 label: '类型', 102 label: '类型',
105 }] 103 }]
106 service.sendEventDiagnoseBusinessScenarios(emit, props.faultNo,props.targetType.toLocaleLowerCase(),param); 104 service.sendEventDiagnoseBusinessScenarios(emit, props.faultNo,props.targetType.toLocaleLowerCase(),param);
@@ -2,7 +2,18 @@ @@ -2,7 +2,18 @@
2 <div class="d-flex"> 2 <div class="d-flex">
3 <img src="../src/style/img/fault/dialtest.gif"> 3 <img src="../src/style/img/fault/dialtest.gif">
4 <h3 style="margin-left: 10px;color: #666666;font-size: 18px">业务拨测</h3> 4 <h3 style="margin-left: 10px;color: #666666;font-size: 18px">业务拨测</h3>
5 - <div style="width: calc(100% - 200px);line-height: 54px" class="align-right"> 5 + <div style="line-height: 60px;" class="m-l-6">
  6 + <el-tooltip
  7 + effect="light"
  8 + placement="top-start">
  9 + <template #content>
  10 + 以图标方式展示每个场景的拨测结果，颜色代表拨测结果 <br/>
  11 + 红色：拨测结果 < 70%； 橙色：70% <= 拨测结果 < 90% ; 蓝色：90% <= 拨测结果 < 100% ; 绿色：拨测结果 = 100%
  12 + </template>
  13 + <i class="iconfont icon-tishi" />
  14 + </el-tooltip>
  15 + </div>
  16 + <div style="width: calc(100% - 250px);line-height: 54px" class="align-right">
6 <a class="m-r-20" v-if="card && card.length > 0" @click="openMoreDialog">更多</a> 17 <a class="m-r-20" v-if="card && card.length > 0" @click="openMoreDialog">更多</a>
7 <a v-model="cardName" v-if="card && card.length > 0" @click="openOrCloseDialtest()">{{cardName}}</a> 18 <a v-model="cardName" v-if="card && card.length > 0" @click="openOrCloseDialtest()">{{cardName}}</a>
8 </div> 19 </div>
@@ -86,12 +86,17 @@ export default { @@ -86,12 +86,17 @@ export default {
86 const openBusScenarios = () => { 86 const openBusScenarios = () => {
87 let param = [{ 87 let param = [{
88 prop: 'taskName', 88 prop: 'taskName',
89 - width: 150,  
90 label: '名称', 89 label: '名称',
91 },{ 90 },{
92 prop: 'taskType', 91 prop: 'taskType',
93 - width: 120,  
94 label: '类型', 92 label: '类型',
  93 + render:function (row) {
  94 + if (row.taskType == 1) {
  95 + return '页面拨测';
  96 + } else if (row.taskType == 2) {
  97 + return '事务拨测';
  98 + }
  99 + }
95 }] 100 }]
96 service.sendEventDiagnoseBusinessScenarios(emit, props.faultNo,props.targetType.toLocaleLowerCase(),param); 101 service.sendEventDiagnoseBusinessScenarios(emit, props.faultNo,props.targetType.toLocaleLowerCase(),param);
97 } 102 }
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <div class="d-flex"> 2 <div class="d-flex">
3 <img src="../src/style/img/fault/base.gif"> 3 <img src="../src/style/img/fault/base.gif">
4 <h3 style="margin-left: 10px;color: #666666;font-size: 18px">基础资源</h3> 4 <h3 style="margin-left: 10px;color: #666666;font-size: 18px">基础资源</h3>
5 - <div style="width: calc(100% - 200px);line-height: 54px;" class="align-right"> 5 + <div style="width: calc(100% - 225px);line-height: 54px;" class="align-right">
6 <a class="m-r-20" v-if="card && card.length > 0" @click="openMoreDialog">更多</a> 6 <a class="m-r-20" v-if="card && card.length > 0" @click="openMoreDialog">更多</a>
7 <a v-model="cardName" v-if="card && card.length > 0" @click="openOrCloseBase()">{{cardName}}</a> 7 <a v-model="cardName" v-if="card && card.length > 0" @click="openOrCloseBase()">{{cardName}}</a>
8 </div> 8 </div>
@@ -55,6 +55,6 @@ @@ -55,6 +55,6 @@
55 </div> 55 </div>
56 56
57 57
58 - <res-item v-for="item in card" v-if="cardOpen" :cardList="item" /> 58 + <res-item v-for="item in card" v-if="cardOpen" :cardList="item" :faultNo="faultNo" :targetType="targetType"/>
59 59
60 </div> 60 </div>
@@ -38,6 +38,8 @@ export default { @@ -38,6 +38,8 @@ export default {
38 cardName.value='展开'; 38 cardName.value='展开';
39 } 39 }
40 } 40 }
  41 + let faultNo = props.faultNo;
  42 + let targetType = props.targetType.toLocaleLowerCase();
41 let getDialtestList = () => { 43 let getDialtestList = () => {
42 let params = { 44 let params = {
43 faultNo: props.faultNo, 45 faultNo: props.faultNo,
@@ -60,7 +62,7 @@ export default { @@ -60,7 +62,7 @@ export default {
60 const openAlarm = () => { 62 const openAlarm = () => {
61 service.sendEventAlarmDialog(emit, { 63 service.sendEventAlarmDialog(emit, {
62 faultNo: props.faultNo, 64 faultNo: props.faultNo,
63 - targetType: props.targetType 65 + targetType: props.targetType.toLocaleLowerCase()
64 }); 66 });
65 } 67 }
66 const openMoreDialog = () => { 68 const openMoreDialog = () => {
@@ -69,13 +71,11 @@ export default { @@ -69,13 +71,11 @@ export default {
69 //诊断资源 71 //诊断资源
70 const openBusScenarios = () => { 72 const openBusScenarios = () => {
71 let param = [{ 73 let param = [{
72 - prop: 'taskName',  
73 - width: 150,  
74 - label: '名称', 74 + prop: 'resName',
  75 + label: '资源名称',
75 },{ 76 },{
76 - prop: 'taskType',  
77 - width: 120,  
78 - label: '类型', 77 + prop: 'ip',
  78 + label: 'IP地址',
79 }] 79 }]
80 service.sendEventDiagnoseBusinessScenarios(emit, props.faultNo,props.targetType.toLocaleLowerCase(),param); 80 service.sendEventDiagnoseBusinessScenarios(emit, props.faultNo,props.targetType.toLocaleLowerCase(),param);
81 } 81 }
@@ -98,7 +98,9 @@ export default { @@ -98,7 +98,9 @@ export default {
98 openAlarm, 98 openAlarm,
99 getFaultItemValue: service.getFaultItemValue, 99 getFaultItemValue: service.getFaultItemValue,
100 openBusScenarios, 100 openBusScenarios,
101 - openKpiList 101 + openKpiList,
  102 + faultNo,
  103 + targetType
102 } 104 }
103 } 105 }
104 } 106 }
@@ -7,16 +7,16 @@ @@ -7,16 +7,16 @@
7 </div> 7 </div>
8 <div> 8 <div>
9 <div class="d-flex align-left"> 9 <div class="d-flex align-left">
10 - <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #666666;font-size: 16px"> 10 + <div style="width: 230px;margin-left: 20px;display: flex;align-self: center;color: #666666;font-size: 16px">
11 <img src="../src/style/img/fault/disRes.png"> 11 <img src="../src/style/img/fault/disRes.png">
12 <span style="margin: 0px 6px 0px 6px;width: 105px">诊断资源</span> 12 <span style="margin: 0px 6px 0px 6px;width: 105px">诊断资源</span>
13 - <h class="text-link">{{getFaultItemValue(cardList,'diagnosticResources')}}</h> 13 + <h class="text-link" @click="openBusScenarios()">{{getFaultItemValue(cardList,'diagnosticResources')}}</h>
14 </div> 14 </div>
15 | 15 |
16 <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #666666;font-size: 16px"> 16 <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #666666;font-size: 16px">
17 <img src="../src/style/img/fault/disKpi.png"> 17 <img src="../src/style/img/fault/disKpi.png">
18 <span style="margin: 0px 6px 0px 6px;width: 105px">诊断指标</span> 18 <span style="margin: 0px 6px 0px 6px;width: 105px">诊断指标</span>
19 - <h class="text-link">{{getFaultItemValue(cardList,'diagnosticIndicators')}}</h> 19 + <h class="text-link" @click="openKpiList()">{{getFaultItemValue(cardList,'diagnosticIndicators')}}</h>
20 </div> 20 </div>
21 | 21 |
22 <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #666666;font-size: 16px"> 22 <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #666666;font-size: 16px">
@@ -26,7 +26,7 @@ @@ -26,7 +26,7 @@
26 </div> 26 </div>
27 </div> 27 </div>
28 <div style="text-align: left;display: flex;margin-top: 10px;"> 28 <div style="text-align: left;display: flex;margin-top: 10px;">
29 - <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #75af49;"> 29 + <div style="width: 230px;margin-left: 20px;display: flex;align-self: center;color: #75af49;">
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">{{getFaultItemValue(cardList,'normal')}}</h> 32 <h style="font-size: 20px" class="text-link">{{getFaultItemValue(cardList,'normal')}}</h>
@@ -5,7 +5,7 @@ export default { @@ -5,7 +5,7 @@ export default {
5 name: 'faultDialTest', 5 name: 'faultDialTest',
6 template: '', 6 template: '',
7 components: {}, 7 components: {},
8 - props: ['cardList'], 8 + props: ['cardList','faultNo','targetType'],
9 data() { 9 data() {
10 return {} 10 return {}
11 }, 11 },
@@ -29,6 +29,8 @@ export default { @@ -29,6 +29,8 @@ export default {
29 dialTest = Vue.ref([]); 29 dialTest = Vue.ref([]);
30 } 30 }
31 } 31 }
  32 + let faultNo=props.faultNo;
  33 + let targetType=props.targetType;
32 let getDialtestList = (data) => { 34 let getDialtestList = (data) => {
33 for (let i = 0; i < data.length; i++) { 35 for (let i = 0; i < data.length; i++) {
34 let resItem={ 36 let resItem={
@@ -82,6 +84,21 @@ export default { @@ -82,6 +84,21 @@ export default {
82 const openMoreDialog = () => { 84 const openMoreDialog = () => {
83 service.sendEventMoreDialog(emit, proxy.$global, cardList.faultFixInfoList); 85 service.sendEventMoreDialog(emit, proxy.$global, cardList.faultFixInfoList);
84 } 86 }
  87 + //诊断资源
  88 + const openBusScenarios = () => {
  89 + let param = [{
  90 + prop: 'resName',
  91 + label: '资源名称',
  92 + },{
  93 + prop: 'ip',
  94 + label: 'IP地址',
  95 + }]
  96 + service.sendEventDiagnoseBusinessScenarios(emit, props.faultNo,props.targetType.toLocaleLowerCase(),param,props.cardList.resClass);
  97 + }
  98 + //诊断指标
  99 + const openKpiList = () => {
  100 + service.sendEventDiagnoseKpiList(emit, props.faultNo,props.targetType.toLocaleLowerCase());
  101 + }
85 102
86 // 挂载完 103 // 挂载完
87 Vue.onMounted(() => { 104 Vue.onMounted(() => {
@@ -98,7 +115,11 @@ export default { @@ -98,7 +115,11 @@ export default {
98 alarmColor, 115 alarmColor,
99 openMoreDialog, 116 openMoreDialog,
100 openAlarm, 117 openAlarm,
101 - getFaultItemValue: service.getFaultItemValue 118 + getFaultItemValue: service.getFaultItemValue,
  119 + faultNo,
  120 + targetType,
  121 + openBusScenarios,
  122 + openKpiList
102 } 123 }
103 } 124 }
104 } 125 }
@@ -2,7 +2,18 @@ @@ -2,7 +2,18 @@
2 <div class="d-flex"> 2 <div class="d-flex">
3 <img src="../src/style/img/fault/npm.gif"> 3 <img src="../src/style/img/fault/npm.gif">
4 <h3 style="margin-left: 10px;color: #666666;font-size: 18px">NPM</h3> 4 <h3 style="margin-left: 10px;color: #666666;font-size: 18px">NPM</h3>
5 - <div style="width: calc(100% - 170px);line-height: 54px" class="align-right"> 5 + <div style="line-height: 60px;" class="m-l-6">
  6 + <el-tooltip
  7 + effect="light"
  8 + placement="top-start">
  9 + <template #content>
  10 + 以图标方式展示每个链路节点数的监控结果，指标值颜色代表结果 <br/>
  11 + 红色：监控结果 < 70%； 橙色：70% <= 监控结果 < 90% ; 蓝色：90% <= 监控结果 < 100% ; 绿色：监控结果：=100%
  12 + </template>
  13 + <i class="iconfont icon-tishi" />
  14 + </el-tooltip>
  15 + </div>
  16 + <div style="width: calc(100% - 220px);line-height: 54px" class="align-right">
6 <a class="m-r-20" v-if="card && card.length > 0" @click="openMoreDialog">更多</a> 17 <a class="m-r-20" v-if="card && card.length > 0" @click="openMoreDialog">更多</a>
7 <a v-model="cardName" v-if="card && card.length > 0" @click="openOrCloseNpm()">{{cardName}}</a> 18 <a v-model="cardName" v-if="card && card.length > 0" @click="openOrCloseNpm()">{{cardName}}</a>
8 </div> 19 </div>
@@ -92,13 +92,11 @@ export default { @@ -92,13 +92,11 @@ export default {
92 //诊断链路场景 92 //诊断链路场景
93 const openBusScenarios = () => { 93 const openBusScenarios = () => {
94 let param = [{ 94 let param = [{
95 - prop: 'taskName',  
96 - width: 150, 95 + prop: 'streamName',
97 label: '名称', 96 label: '名称',
98 },{ 97 },{
99 - prop: 'taskType',  
100 - width: 120,  
101 - label: '类型', 98 + prop: 'createBy',
  99 + label: '创建用户',
102 }] 100 }]
103 service.sendEventDiagnoseBusinessScenarios(emit, props.faultNo,props.targetType.toLocaleLowerCase(),param); 101 service.sendEventDiagnoseBusinessScenarios(emit, props.faultNo,props.targetType.toLocaleLowerCase(),param);
104 } 102 }
@@ -334,14 +334,21 @@ const faultEvent = () => { @@ -334,14 +334,21 @@ const faultEvent = () => {
334 * @param targetType 诊断类型 334 * @param targetType 诊断类型
335 * @param columns 数组，表格列对象 335 * @param columns 数组，表格列对象
336 */ 336 */
337 - const sendEventDiagnoseBusinessScenarios = (emit, faultNo, targetType, columns) => { 337 + const sendEventDiagnoseBusinessScenarios = (emit, faultNo, targetType, columns,resClass) => {
338 338
339 var obj = { 339 var obj = {
340 columns: columns, 340 columns: columns,
341 data: [] 341 data: []
342 } 342 }
  343 + var param = {
  344 + faultNo:faultNo,
  345 + targetType:targetType
  346 + }
  347 + if (resClass&&resClass!=''){
  348 + param.resClass=resClass;
  349 + }
343 350
344 - store.dispatch('getFaultBusinessList', {faultNo: faultNo, targetType: targetType}).then((res) => { 351 + store.dispatch('getFaultBusinessList', param).then((res) => {
345 if (res && res.success) { 352 if (res && res.success) {
346 obj.data = res.data; 353 obj.data = res.data;
347 emit('openDialog', 'more', {},obj); 354 emit('openDialog', 'more', {},obj);