monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by xwx
Commit 41c4dcbea05e80aea77636a7b46f061c55369823 1 parent 0517f37e

【1401】通知统计功能 点击全部结果与实际数据不符

Inline Side-by-side
Showing 2 changed files with 76 additions and 14 deletions
@@ -34,9 +34,25 @@ layui.define(['common', 'admin', 'echarts', 'common', 'table', 'sessions'], func @@ -34,9 +34,25 @@ layui.define(['common', 'admin', 'echarts', 'common', 'table', 'sessions'], func
34 }); 34 });
35 //导出 35 //导出
36 $('#exportNoticeCountBtn').on("click", function () { 36 $('#exportNoticeCountBtn').on("click", function () {
37 - var url=common.domainName + '/api-web/bAlarm/noticeExport?access_token=' + accessToken + '&type=' + tablePeriod; 37 + var url = common.domainName + '/api-web/bAlarm/noticeExport?access_token=' + accessToken + '&type=' + tablePeriod;
38 window.open(url); 38 window.open(url);
39 }); 39 });
  40 +
  41 + var alarmSendTips ;
  42 + $(".detail_base_info").hover(function() {
  43 + openMsg();
  44 + }, function() {
  45 + layer.close(alarmSendTips);
  46 + });
  47 + function openMsg() {
  48 + alarmSendTips = layer.tips("<span style='color:#585858;'>" +
  49 + "人员告警发送统计规则：<br>" +
  50 + "&nbsp;&nbsp;&nbsp;&nbsp;• 一条告警可能存在多个通知人<br>" +
  51 + "&nbsp;&nbsp;&nbsp;&nbsp;• 按照通知人统计告警发送数量<br>" +
  52 + "</span>",
  53 + '.detail_base_info',{tips:[2,'#F0F0F0'], time:0,area: ['auto', 'auto']});
  54 + }
  55 +
40 //初始化柱状图页面 56 //初始化柱状图页面
41 function initNoticeCount() { 57 function initNoticeCount() {
42 $.ajax({ 58 $.ajax({
@@ -48,11 +64,36 @@ layui.define(['common', 'admin', 'echarts', 'common', 'table', 'sessions'], func @@ -48,11 +64,36 @@ layui.define(['common', 'admin', 'echarts', 'common', 'table', 'sessions'], func
48 histogramECharts(res.map.business, 'count_notice_send_business', '业务子系统告警发送统计'); 64 histogramECharts(res.map.business, 'count_notice_send_business', '业务子系统告警发送统计');
49 //初始化人员告警发送告警统计 65 //初始化人员告警发送告警统计
50 histogramECharts(res.map.user, 'count_notice_send_user', '人员告警发送统计'); 66 histogramECharts(res.map.user, 'count_notice_send_user', '人员告警发送统计');
  67 +
  68 + $("#businessMore").unbind('click').on('click', function () {
  69 + queryData('业务子系统告警发送统计', res.map.business)
  70 + })
  71 + $("#userMore").unbind('click').on('click', function () {
  72 + queryData('人员告警发送统计', res.map.user)
  73 + })
51 } 74 }
52 } 75 }
53 }) 76 })
54 } 77 }
55 78
  79 + //lsq 弹框打开更多 2022-06-21
  80 + function queryData(title, data) {
  81 + let html = `
  82 + <div class="pie-chart pie-chart-custom" id="more_notice" style="height: 60vh"></div>
  83 + `
  84 + layer.open({
  85 + type: 1
  86 + , title: title //不显示标题栏
  87 + , area: ["91%", "800px"]
  88 + , id: 'moreData' //设定一个id，防止重复弹出
  89 + , btn: ['取消']
  90 + , content: html
  91 + , success: function (layero, index) {
  92 + histogramECharts(data, 'more_notice', title)
  93 + }
  94 + })
  95 + }
  96 +
56 //初始化表格 97 //初始化表格
57 function initTable() { 98 function initTable() {
58 businessTable = table.render({ 99 businessTable = table.render({
@@ -65,7 +106,7 @@ layui.define(['common', 'admin', 'echarts', 'common', 'table', 'sessions'], func @@ -65,7 +106,7 @@ layui.define(['common', 'admin', 'echarts', 'common', 'table', 'sessions'], func
65 , page: { 106 , page: {
66 layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'] 107 layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
67 , theme: '#1E9FFF'//自定义分页主题颜色 108 , theme: '#1E9FFF'//自定义分页主题颜色
68 - ,limits:[5,10,15,20] 109 + , limits: [5, 10, 15, 20]
69 } 110 }
70 , limit: '5' 111 , limit: '5'
71 , even: true 112 , even: true
@@ -97,7 +138,7 @@ layui.define(['common', 'admin', 'echarts', 'common', 'table', 'sessions'], func @@ -97,7 +138,7 @@ layui.define(['common', 'admin', 'echarts', 'common', 'table', 'sessions'], func
97 , page: { 138 , page: {
98 layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'] 139 layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
99 , theme: '#1E9FFF'//自定义分页主题颜色 140 , theme: '#1E9FFF'//自定义分页主题颜色
100 - ,limits:[5,10,15,20] 141 + , limits: [5, 10, 15, 20]
101 } 142 }
102 , limit: '5' 143 , limit: '5'
103 , even: true 144 , even: true
@@ -149,7 +190,8 @@ layui.define(['common', 'admin', 'echarts', 'common', 'table', 'sessions'], func @@ -149,7 +190,8 @@ layui.define(['common', 'admin', 'echarts', 'common', 'table', 'sessions'], func
149 var row = data.row; 190 var row = data.row;
150 //列 191 //列
151 var line = data.line; 192 var line = data.line;
152 - var myChart = echarts.init(document.getElementById(id)); 193 + let el = document.getElementById(id);
  194 + var myChart = echarts.init(el);
153 var option; 195 var option;
154 option = { 196 option = {
155 tooltip: { 197 tooltip: {
@@ -169,7 +211,7 @@ layui.define(['common', 'admin', 'echarts', 'common', 'table', 'sessions'], func @@ -169,7 +211,7 @@ layui.define(['common', 'admin', 'echarts', 'common', 'table', 'sessions'], func
169 grid: { 211 grid: {
170 left: '3%', 212 left: '3%',
171 right: '4%', 213 right: '4%',
172 - bottom: '3%', 214 + bottom: '12%',
173 top: '20', 215 top: '20',
174 containLabel: true 216 containLabel: true
175 }, 217 },
@@ -184,7 +226,7 @@ layui.define(['common', 'admin', 'echarts', 'common', 'table', 'sessions'], func @@ -184,7 +226,7 @@ layui.define(['common', 'admin', 'echarts', 'common', 'table', 'sessions'], func
184 color: '#000000', 226 color: '#000000',
185 show: true, 227 show: true,
186 interval: 0, 228 interval: 0,
187 - rotate: 30, 229 + rotate: 10,
188 fontSize: '10', 230 fontSize: '10',
189 }, 231 },
190 } 232 }
@@ -197,7 +239,7 @@ layui.define(['common', 'admin', 'echarts', 'common', 'table', 'sessions'], func @@ -197,7 +239,7 @@ layui.define(['common', 'admin', 'echarts', 'common', 'table', 'sessions'], func
197 series: [ 239 series: [
198 { 240 {
199 type: 'bar', 241 type: 'bar',
200 - barWidth: '40%', 242 + barWidth: '20',
201 data: line, 243 data: line,
202 itemStyle: { 244 itemStyle: {
203 normal: { 245 normal: {
@@ -218,10 +260,21 @@ layui.define(['common', 'admin', 'echarts', 'common', 'table', 'sessions'], func @@ -218,10 +260,21 @@ layui.define(['common', 'admin', 'echarts', 'common', 'table', 'sessions'], func
218 } 260 }
219 } 261 }
220 } 262 }
221 - ] 263 + ],
  264 + //x轴拖动
  265 + dataZoom: [
  266 + {
  267 + show: id == 'more_notice' ? true : false,
  268 + type: "slider",
  269 + realtime: true, //拖动滚动条时是否动态的更新图表数据
  270 + height: 25, //滚动条高度
  271 + start: 0, //滚动条开始位置（共100等份）
  272 + end: 12 //结束位置（共100等份）//lsq x轴缩放距离调整 2022-05-25
  273 + }
  274 + ],
222 }; 275 };
223 myChart.setOption(option) 276 myChart.setOption(option)
224 } 277 }
225 278
226 }); 279 });
227 -});  
  280 +});
@@ -18,12 +18,21 @@ @@ -18,12 +18,21 @@
18 <div class="layui-card-body noticeCount-ECharts" id="count_notice_send"> 18 <div class="layui-card-body noticeCount-ECharts" id="count_notice_send">
19 <div class="layui-noticeCount-ECharts"> 19 <div class="layui-noticeCount-ECharts">
20 <div> 20 <div>
21 - <h5 class="lay-row-title" style="color: #666;">业务子系统告警发送统计</h5>  
22 - <div class="pie-chart pie-chart-custom" id="count_notice_send_business" style="height: 30vh"></div> 21 + <h5 class="lay-row-title">
  22 + 业务子系统告警发送统计
  23 + <span id="businessMore">查看更多</span>
  24 +
  25 + </h5>
  26 + <div class="pie-chart pie-chart-custom" id="count_notice_send_business"
  27 + style="height: 30vh"></div>
23 </div> 28 </div>
24 <div> 29 <div>
25 - <h5 class="lay-row-title" style="color: #666;">人员告警发送统计</h5>  
26 - <div class="pie-chart pie-chart-custom" id="count_notice_send_user" style="height: 30vh"></div> 30 + <h5 class="lay-row-title">人员告警发送统计
  31 + <i class="iconfont detail_base_info" style="color:rgb(30,159,255);">&#xe61e;</i>
  32 + <span id="userMore">查看更多</span>
  33 + </h5>
  34 + <div class="pie-chart pie-chart-custom" id="count_notice_send_user"
  35 + style="height: 30vh"></div>
27 </div> 36 </div>
28 </div> 37 </div>
29 </div> 38 </div>
@@ -51,4 +60,4 @@ @@ -51,4 +60,4 @@
51 layui.use('noticeCountIndex', function (fn) { 60 layui.use('noticeCountIndex', function (fn) {
52 fn(); 61 fn();
53 }); 62 });
54 -</script>  
  63 +</script>