monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by wangtao
Commit 51d0d75579687c3b5520ef7b2a6db18f5a5cfbcd 1 parent 86a54b6d

故障调整

Inline Side-by-side
Showing 6 changed files with 74 additions and 17 deletions
@@ -44,7 +44,7 @@ @@ -44,7 +44,7 @@
44 <body> 44 <body>
45 45
46 <div id="app"> 46 <div id="app">
47 - <router-view></router-view> 47 + <router-view v-f-tips></router-view>
48 <!-- <div id="nav"> 48 <!-- <div id="nav">
49 <p> 49 <p>
50 <router-link to="/vue3/test/">首页</router-link>&nbsp;&nbsp;&nbsp; 50 <router-link to="/vue3/test/">首页</router-link>&nbsp;&nbsp;&nbsp;
@@ -204,4 +204,16 @@ a { @@ -204,4 +204,16 @@ a {
204 margin-top: 6px; 204 margin-top: 6px;
205 } 205 }
206 206
  207 +/* 文本超长胜率好*/
  208 +.text-overflow{
  209 + overflow: hidden;
  210 + text-overflow: ellipsis;
  211 + white-space: nowrap;
  212 +}
  213 +/*下划线*/
  214 +.text-link{
  215 + text-decoration: underline;
  216 + cursor: pointer;
  217 +}
  218 +
207 219
@@ -65,7 +65,48 @@ Promise.all([ @@ -65,7 +65,48 @@ Promise.all([
65 // } 65 // }
66 // }) 66 // })
67 67
68 - app.config.globalProperties.$global = res[3].default 68 + var __global = res[3].default;
  69 + // created：在绑定元素的属性前，或者事件监听器应用前调用
  70 + // beforeMount：在元素被插入到DOM前调用，例如我们想要实现输入框的自动聚焦，就不能在beforeMount钩子中实现
  71 + // mounted：在绑定元素的父组件以及自己的所有子节点都挂载完毕后调用，这个时候DOM已经渲染出来，我们实现输入框自动聚焦也是在这个钩子函数中实现
  72 + // beforeUpdate：绑定元素的父组件更新前调用
  73 + // updated：在绑定元素的父组件以及自己的所有子节点都更新完毕后调用
  74 + // beforeUnmount：绑定元素的父组件卸载前调用
  75 + // unmounted：绑定元素的父组件卸载后调用
  76 + // 自定义指令
  77 + app.directive('f-tips', {
  78 + // 当被绑定的元素插入到 DOM 中时……
  79 + mounted(el, binding, vnode) {
  80 + var hash = window.top.location.hash
  81 + // 获取所有子元素
  82 + let getChild = (elm,callback) =>{
  83 + var list = elm.childNodes;
  84 + if(list && list.length > 0){
  85 + list.forEach(function(elItem){
  86 + getChild(elItem,callback);
  87 + callback(elItem)
  88 +
  89 + });
  90 + }
  91 + }
  92 +
  93 + getChild(el,function (elItem){
  94 + $(elItem).attr('wwwwwwwwwwwwww',$(elItem).text());
  95 + });
  96 +
  97 + // var contextmenuEl = '<ul id="tipContextmenu" class="contextmenu-style" style="color:#fff;">';
  98 + // contextmenuEl += '<li>测试提示</li>';
  99 + // contextmenuEl += '</ul>';
  100 + // __global.layer.tips(contextmenuEl, el, {
  101 + // time: 0,
  102 + // tips: [3, '#1e9fff'],
  103 + // success() {
  104 + // }
  105 + // })
  106 + }
  107 + })
  108 +
  109 + app.config.globalProperties.$global = __global
69 app.config.globalProperties.$http = res[4].default 110 app.config.globalProperties.$http = res[4].default
70 app.mount('#app'); // 挂载Vue的app实例 111 app.mount('#app'); // 挂载Vue的app实例
71 }) 112 })
@@ -15,32 +15,32 @@ @@ -15,32 +15,32 @@
15 <div style="width: 230px;margin-left: 20px;display: flex;align-self: center;color: #666666;font-size: 16px"> 15 <div style="width: 230px;margin-left: 20px;display: flex;align-self: center;color: #666666;font-size: 16px">
16 <img src="../src/style/img/fault/npm/npmLink.png"> 16 <img src="../src/style/img/fault/npm/npmLink.png">
17 <span style="margin: 0px 6px 0px 6px;width: 105px">诊断应用</span> 17 <span style="margin: 0px 6px 0px 6px;width: 105px">诊断应用</span>
18 - <h>{{dialTest && dialTest.diagnosticResources ?dialTest.diagnosticResources:0}}</h> 18 + <h class="text-link">{{dialTest && dialTest.diagnosticResources ?dialTest.diagnosticResources:0}}</h>
19 </div> 19 </div>
20 | 20 |
21 <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #666666;font-size: 16px"> 21 <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #666666;font-size: 16px">
22 <img src="../src/style/img/fault/disKpi.png"> 22 <img src="../src/style/img/fault/disKpi.png">
23 <span style="margin: 0px 6px 0px 6px;width: 105px">诊断指标</span> 23 <span style="margin: 0px 6px 0px 6px;width: 105px">诊断指标</span>
24 - <h>{{dialTest && dialTest.diagnosticIndicators ?dialTest.diagnosticIndicators:0}}</h> 24 + <h class="text-link">{{dialTest && dialTest.diagnosticIndicators ?dialTest.diagnosticIndicators:0}}</h>
25 </div> 25 </div>
26 | 26 |
27 <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #666666;font-size: 16px"> 27 <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #666666;font-size: 16px">
28 <img src="../src/style/img/fault/disItem.png"> 28 <img src="../src/style/img/fault/disItem.png">
29 <span style="margin: 0px 6px 0px 6px;width: 105px"> 诊断项</span> 29 <span style="margin: 0px 6px 0px 6px;width: 105px"> 诊断项</span>
30 - <h>{{dialTest && dialTest.diagnosticItem ?dialTest.diagnosticItem:0}}</h> 30 + <h class="text-link">{{dialTest && dialTest.diagnosticItem ?dialTest.diagnosticItem:0}}</h>
31 </div> 31 </div>
32 </div> 32 </div>
33 <div style="text-align: left;display: flex;margin-top: 10px;"> 33 <div style="text-align: left;display: flex;margin-top: 10px;">
34 <div style="width: 230px;margin-left: 20px;display: flex;align-self: center;color: #75af49;"> 34 <div style="width: 230px;margin-left: 20px;display: flex;align-self: center;color: #75af49;">
35 <img src="../src/style/img/fault/success.png" style="width: 22px;height: 22px;"> 35 <img src="../src/style/img/fault/success.png" style="width: 22px;height: 22px;">
36 <span style="margin: 0px 6px 0px 6px;width: 105px;font-size: 16px">正常</span> 36 <span style="margin: 0px 6px 0px 6px;width: 105px;font-size: 16px">正常</span>
37 - <h style="font-size: 24px">{{dialTest && dialTest.normal ?dialTest.normal:0}}</h> 37 + <h class="text-link" style="font-size: 24px">{{dialTest && dialTest.normal ?dialTest.normal:0}}</h>
38 </div> 38 </div>
39 | 39 |
40 <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #febb1a;"> 40 <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;color: #febb1a;">
41 <img src="../src/style/img/fault/error.png" style="width: 22px;height: 22px;"> 41 <img src="../src/style/img/fault/error.png" style="width: 22px;height: 22px;">
42 <span style="margin: 0px 6px 0px 6px;width: 105px;font-size: 16px"> 异常</span> 42 <span style="margin: 0px 6px 0px 6px;width: 105px;font-size: 16px"> 异常</span>
43 - <h style="font-size: 24px">{{dialTest && dialTest.abnormal ?dialTest.abnormal:0}}</h> 43 + <h class="text-link" style="font-size: 24px">{{dialTest && dialTest.abnormal ?dialTest.abnormal:0}}</h>
44 </div> 44 </div>
45 </div> 45 </div>
46 </div> 46 </div>
@@ -57,31 +57,30 @@ @@ -57,31 +57,30 @@
57 style="margin-top:20px;background-color: whitesmoke;display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 26px 26px 0px 26px;"> 57 style="margin-top:20px;background-color: whitesmoke;display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 26px 26px 0px 26px;">
58 <div v-for="item in card" style="width: 50%;overflow: hidden;"> 58 <div v-for="item in card" style="width: 50%;overflow: hidden;">
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: white;font-size: 25px;">{{item[0].resClassName}}</div> 60 + <div style="color: white;font-size: 25px;">{{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: 20px;">应用：<span>{{item[0].use}}</span></div> 62 + <div style="padding-top: 30px;font-size: 20px;">应用：<span>{{item.use}}</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: 200px;margin-left: 10px;display: flex;align-self: center;"> 65 <div style="width: 200px;margin-left: 10px;display: flex;align-self: center;">
66 <span style="margin: 0px 6px;width: 95px">响应时间:</span> 66 <span style="margin: 0px 6px;width: 95px">响应时间:</span>
67 - <span>{{item.time}}</span> 67 + <span class="text-link">{{item.time ? item.time : 0}}</span>
68 </div> 68 </div>
69 <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;"> 69 <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;">
70 <span style="margin: 0px 6px 0px 6px;width: 95px">Fullgc:</span> 70 <span style="margin: 0px 6px 0px 6px;width: 95px">Fullgc:</span>
71 - <span>{{item[0].count}}</span> 71 + <span class="text-link">{{item.count ? item.count : 0}}</span>
72 </div> 72 </div>
73 </div> 73 </div>
74 <div style="text-align: left;display: flex;margin-top: 10px;margin-left: 76px;font-size: 18px;"> 74 <div style="text-align: left;display: flex;margin-top: 10px;margin-left: 76px;font-size: 18px;">
75 <div style="width: 200px;margin-left: 10px;display: flex;align-self: center;"> 75 <div style="width: 200px;margin-left: 10px;display: flex;align-self: center;">
76 <span style="margin: 0px 6px;width: 95px">线程总数:</span> 76 <span style="margin: 0px 6px;width: 95px">线程总数:</span>
77 - <span>{{item.count}}</span> 77 + <span class="text-link">{{item.count ? item.count : 0}}</span>
78 </div> 78 </div>
79 <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;"> 79 <div style="width: 200px;margin-left: 20px;display: flex;align-self: center;">
80 <span style="margin: 0px 6px 0px 6px;width: 95px">错误率:</span> 80 <span style="margin: 0px 6px 0px 6px;width: 95px">错误率:</span>
81 - <span>{{item.error}}</span> 81 + <span class="text-link">{{item.error ? item.count : 0}}</span>
82 </div> 82 </div>
83 </div> 83 </div>
84 -  
85 </div> 84 </div>
86 </div> 85 </div>
87 </div> 86 </div>
@@ -28,6 +28,9 @@ export default { @@ -28,6 +28,9 @@ export default {
28 let faultDetailDialogTitle = Vue.ref(''); 28 let faultDetailDialogTitle = Vue.ref('');
29 let faultDetailDetailInfo = Vue.ref({ 29 let faultDetailDetailInfo = Vue.ref({
30 faultNo: '', 30 faultNo: '',
  31 + resId: '',
  32 + kpiId: '',
  33 + flag: '',
31 items: [{ 34 items: [{
32 faultType: 'NETLINK', 35 faultType: 'NETLINK',
33 faultTypeName: '网络链路', 36 faultTypeName: '网络链路',
@@ -76,12 +76,14 @@ const alarmService = () => { @@ -76,12 +76,14 @@ const alarmService = () => {
76 alarmFlg.value = flg; 76 alarmFlg.value = flg;
77 } 77 }
78 78
79 - let openAlarmDialog = (proxy, faultNo, targetType, resId, kpiId, flag) => { 79 + let openAlarmDialog = (proxy, faultNo, targetType, resId, kpiId, flag, resClass) => {
80 showAlarmDialog(true); 80 showAlarmDialog(true);
81 // 获取告警列表 81 // 获取告警列表
82 let params = { 82 let params = {
  83 + // 基础更多查询需要传入对应的资源类型
  84 + resClass: resClass,
83 faultNo: faultNo, 85 faultNo: faultNo,
84 - targetType: targetType, 86 + type: targetType,
85 resId: resId, 87 resId: resId,
86 kpiId: kpiId, 88 kpiId: kpiId,
87 flag: flag 89 flag: flag
@@ -137,7 +139,7 @@ const alarmService = () => { @@ -137,7 +139,7 @@ const alarmService = () => {
137 } 139 }
138 }]; 140 }];
139 141
140 - proxy.$http.get(`/api-web/fault/result/findAlarmList`, params, function (res) { 142 + proxy.$http.get(`/api-web/fault/result/alarmList`, params, function (res) {
141 if (res && res.success) { 143 if (res && res.success) {
142 if (res.data) { 144 if (res.data) {
143 alarmList.value.dataList = res.data; 145 alarmList.value.dataList = res.data;