monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit c02fff04650febd956c8bbf42f645ae5c3d4b11e 1 parent bc97427d

首页卡片，业务数据对应不上（过滤空数据）

Inline Side-by-side
Showing 2 changed files with 91 additions and 43 deletions
@@ -121,8 +121,15 @@ layui.define(['common', 'swiper', 'admin','commonDetail','mxClient','sessions',' @@ -121,8 +121,15 @@ layui.define(['common', 'swiper', 'admin','commonDetail','mxClient','sessions','
121 121
122 //加载业务信息 122 //加载业务信息
123 function loadBizInfo() { 123 function loadBizInfo() {
  124 + var filter = $("#select-content-ul-bus li.listActive").attr('data-val');
  125 + if(!filter){
  126 + // 过滤无资源的业务
  127 + filter = '2';
  128 + }
  129 + var url = `${common.domainName}/api-web/home/business/getBusHealthResultByAlarm?filter=${filter}&layout=${sessionStorage.getItem("userLayout")}`
  130 +
124 admin.req({ 131 admin.req({
125 - url: common.domainName + '/api-web/home/business/getBusHealthResultByAlarm?layout=' + sessionStorage.getItem("userLayout") 132 + url: url
126 , type: "get" 133 , type: "get"
127 , async: false 134 , async: false
128 , done: function (data) { 135 , done: function (data) {
@@ -299,41 +306,10 @@ layui.define(['common', 'swiper', 'admin','commonDetail','mxClient','sessions',' @@ -299,41 +306,10 @@ layui.define(['common', 'swiper', 'admin','commonDetail','mxClient','sessions','
299 }); 306 });
300 } 307 }
301 308
302 - //加载资源类型信息  
303 - function loadResTypeInfo() {  
304 - admin.req({  
305 - url: common.domainName + '/api-web/home/restype/getResTypeHealthResult'  
306 - , type: "get"  
307 - , done: function (data) {  
308 - layer.close(loadIdx);  
309 - if (data.code === 0) {  
310 - var resTypelist = data.data  
311 - if(resTypelist != null && resTypelist.length > 0){  
312 - $(".index-line").show();  
313 - layui.use('laytpl', function () {  
314 - var laytpl = layui.laytpl;  
315 - //加载资源类型导航  
316 - var getResTypeTpl = document.getElementById("indexResTypeTabTpl").innerHTML;  
317 - laytpl(getResTypeTpl).render(data, function (html) {  
318 - $('.index-banner-res-group').remove();  
319 - $('.index-banner-biz-div').append(html);  
320 -  
321 - //点击告警数字，跳转至告警页面  
322 - $("#indexbizhealth [data-index-banner-item='resType'] .gj-detail-info li[data-level]").unbind('click').on("click", function () {  
323 - var level = $(this).data("level");  
324 - var _resType = $(this).data("restype");  
325 - var alarmTotal = $(this).find("b").text();  
326 - if (alarmTotal === '0') {  
327 - layer.msg('暂无告警', {icon: 0});  
328 - return false;  
329 - }  
330 - //不以资源类型不包括父节点的资源类型 包括阿里云、华为云  
331 - if("ALI_CLOUD_PLAT"== _resType || "HUAWEI_CLOUD_PLAT" == _resType){  
332 - _resType =_resType.substring(0,_resType.lastIndexOf("_"));  
333 - }  
334 - $(this).attr("lay-href", "/alarm/activewarning/restype=" + _resType + "/level=" + level);  
335 - // $(this).trigger();  
336 - }); 309 + /**
  310 + * 首页右下角两个功能的时间
  311 + */
  312 + function bottomEvent(){
337 // Start 告警级别默认为严重告警，点击左下角选择告警级别，页面的小红点切换不同告警的数量，item根据告警数量进行排序 LSQ 2021/12/29 19:37 313 // Start 告警级别默认为严重告警，点击左下角选择告警级别，页面的小红点切换不同告警的数量，item根据告警数量进行排序 LSQ 2021/12/29 19:37
338 $(".select-total").hide(); 314 $(".select-total").hide();
339 $(".select-important").hide(); 315 $(".select-important").hide();
@@ -345,10 +321,11 @@ layui.define(['common', 'swiper', 'admin','commonDetail','mxClient','sessions',' @@ -345,10 +321,11 @@ layui.define(['common', 'swiper', 'admin','commonDetail','mxClient','sessions','
345 } 321 }
346 $(item).css('order',$(item).data('serious')) 322 $(item).css('order',$(item).data('serious'))
347 }) 323 })
  324 +
348 $("#select-content-ul li").unbind("click").on("click",function (){ 325 $("#select-content-ul li").unbind("click").on("click",function (){
349 var dataVal=$(this).data('val'); 326 var dataVal=$(this).data('val');
350 var dataValLabel=$(this).text(); 327 var dataValLabel=$(this).text();
351 - $('.select-val span').text(dataValLabel); 328 + $('.alarm-text-view span').text(dataValLabel);
352 $(this).addClass('listActive').siblings().removeClass("listActive"); 329 $(this).addClass('listActive').siblings().removeClass("listActive");
353 if(dataVal=='4'){ 330 if(dataVal=='4'){
354 $(".select-total").show(); 331 $(".select-total").show();
@@ -398,6 +375,62 @@ layui.define(['common', 'swiper', 'admin','commonDetail','mxClient','sessions',' @@ -398,6 +375,62 @@ layui.define(['common', 'swiper', 'admin','commonDetail','mxClient','sessions','
398 375
399 }) 376 })
400 //End LSQ 2021/12/29 19:38 377 //End LSQ 2021/12/29 19:38
  378 + // Start Wang 2022/3/7 16:33 业务资源过滤
  379 + $("#select-content-ul-bus li").unbind("click").on("click",function (){
  380 + debugger
  381 + var that = $(this);
  382 + // 设置标题
  383 + that.parent().parent().find('#bus-text-view').text(that.text());
  384 +
  385 + // 删除所有li标签的样式：listActive
  386 + $("#select-content-ul-bus li.listActive").removeClass('listActive')
  387 +
  388 + that.addClass('listActive');
  389 +
  390 + // 调用接口获取数据
  391 + loadBizInfo()
  392 + })
  393 + // End Wang 2022/3/7 16:33
  394 + }
  395 +
  396 + //加载资源类型信息
  397 + function loadResTypeInfo() {
  398 + admin.req({
  399 + url: common.domainName + '/api-web/home/restype/getResTypeHealthResult'
  400 + , type: "get"
  401 + , done: function (data) {
  402 + layer.close(loadIdx);
  403 + if (data.code === 0) {
  404 + var resTypelist = data.data
  405 + if(resTypelist != null && resTypelist.length > 0){
  406 + $(".index-line").show();
  407 + layui.use('laytpl', function () {
  408 + var laytpl = layui.laytpl;
  409 + //加载资源类型导航
  410 + var getResTypeTpl = document.getElementById("indexResTypeTabTpl").innerHTML;
  411 + laytpl(getResTypeTpl).render(data, function (html) {
  412 + $('.index-banner-res-group').remove();
  413 + $('.index-banner-biz-div').append(html);
  414 +
  415 + //点击告警数字，跳转至告警页面
  416 + $("#indexbizhealth [data-index-banner-item='resType'] .gj-detail-info li[data-level]").unbind('click').on("click", function () {
  417 + var level = $(this).data("level");
  418 + var _resType = $(this).data("restype");
  419 + var alarmTotal = $(this).find("b").text();
  420 + if (alarmTotal === '0') {
  421 + layer.msg('暂无告警', {icon: 0});
  422 + return false;
  423 + }
  424 + //不以资源类型不包括父节点的资源类型 包括阿里云、华为云
  425 + if("ALI_CLOUD_PLAT"== _resType || "HUAWEI_CLOUD_PLAT" == _resType){
  426 + _resType =_resType.substring(0,_resType.lastIndexOf("_"));
  427 + }
  428 + $(this).attr("lay-href", "/alarm/activewarning/restype=" + _resType + "/level=" + level);
  429 + // $(this).trigger();
  430 + });
  431 +
  432 +
  433 + bottomEvent();
401 434
402 // 点击资源数量 435 // 点击资源数量
403 $("#indexbizhealth [data-index-banner-item='resType'] .gj-detail-info li:not([data-level])").unbind('click').on("click", function () { 436 $("#indexbizhealth [data-index-banner-item='resType'] .gj-detail-info li:not([data-level])").unbind('click').on("click", function () {
@@ -458,6 +491,8 @@ layui.define(['common', 'swiper', 'admin','commonDetail','mxClient','sessions',' @@ -458,6 +491,8 @@ layui.define(['common', 'swiper', 'admin','commonDetail','mxClient','sessions','
458 //绑定卡片上的事件 491 //绑定卡片上的事件
459 function bindCardEvent() { 492 function bindCardEvent() {
460 493
  494 + bottomEvent();
  495 +
461 //点击空白处隐藏子菜单 496 //点击空白处隐藏子菜单
462 $(document).click(function (event) { 497 $(document).click(function (event) {
463 // var _con = $('[data-index-banner-item]');// 设置目标区域 498 // var _con = $('[data-index-banner-item]');// 设置目标区域
@@ -1006,8 +1041,14 @@ layui.define(['common', 'swiper', 'admin','commonDetail','mxClient','sessions',' @@ -1006,8 +1041,14 @@ layui.define(['common', 'swiper', 'admin','commonDetail','mxClient','sessions','
1006 1041
1007 //刷新业务健康状态 1042 //刷新业务健康状态
1008 function refreshBizHealth() { 1043 function refreshBizHealth() {
  1044 + var filter = $("#select-content-ul-bus li.listActive").attr('data-val');
  1045 + if(!filter){
  1046 + // 过滤无资源的业务
  1047 + filter = '2';
  1048 + }
  1049 + var url = `${common.domainName}/api-web/home/business/getBusHealthResultByAlarm?filter=${filter}&layout=${sessionStorage.getItem("userLayout")}`
1009 admin.req({ 1050 admin.req({
1010 - url: common.domainName + '/api-web/home/business/getBusHealthResultByAlarm?layout=' + sessionStorage.getItem("userLayout") 1051 + url: url
1011 , type: "get" 1052 , type: "get"
1012 , done: function (data) { 1053 , done: function (data) {
1013 if (data.code === 0) { 1054 if (data.code === 0) {
@@ -367,23 +367,30 @@ @@ -367,23 +367,30 @@
367 --> 367 -->
368 <div class="flex-bottom"> 368 <div class="flex-bottom">
369 369
  370 + <div style="width: calc(100% - 200px);">
370 {{# if(d.data[0] && d.data[0].bizList ) { }} 371 {{# if(d.data[0] && d.data[0].bizList ) { }}
371 <span class="index-banner-count">业务共 {{d.data[0].bizList.length}} 个</span> 372 <span class="index-banner-count">业务共 {{d.data[0].bizList.length}} 个</span>
372 {{# }else{ }} 373 {{# }else{ }}
373 <span class="index-banner-count">业务共 0 个</span> 374 <span class="index-banner-count">业务共 0 个</span>
374 {{# } }} 375 {{# } }}
375 - <div class="div-select select-margin " >  
376 - <div class="select-val"><span>严重告警</span> <i class="arrow-down-alarm"></i></div> 376 + </div>
  377 +
  378 + <div class="div-select select-margin " style="width: 100px">
  379 + <div class="select-val alarm-text-view"><span>严重告警</span> <i class="arrow-down-alarm"></i></div>
377 <ul class="select-content" id="select-content-ul"> 380 <ul class="select-content" id="select-content-ul">
378 <li class="select-list" data-val="4">全部告警</li> 381 <li class="select-list" data-val="4">全部告警</li>
379 <li class="select-list listActive" data-val="3">严重告警</li> 382 <li class="select-list listActive" data-val="3">严重告警</li>
380 <li class="select-list" data-val="2">重要告警</li> 383 <li class="select-list" data-val="2">重要告警</li>
381 <li class="select-list" data-val="1">一般告警</li> 384 <li class="select-list" data-val="1">一般告警</li>
382 </ul> 385 </ul>
383 -  
384 </div> 386 </div>
385 -  
386 - 387 + <div class="div-select select-margin " style="width: 100px">
  388 + <div class="select-val"><span id="bus-text-view">过滤无资源的业务</span> <i class="arrow-down-alarm"></i></div>
  389 + <ul class="select-content" id="select-content-ul-bus" style="top: -65px;">
  390 + <li class="select-list" data-val="1">全部展示</li>
  391 + <li class="select-list listActive" data-val="2">过滤无资源的业务</li>
  392 + </ul>
  393 + </div>
387 </div> 394 </div>
388 </script> 395 </script>
389 396