monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit c062ac3f1da630ce4fb6276e6845dd1e488cda13 2 parents 4f1978b7 37531eb1

Merge branch 'master' of http://192.168.1.136:82/monitor_v3/hg-monitor-web

Inline Side-by-side
Showing 4 changed files with 141 additions and 10 deletions
@@ -375,7 +375,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions', 'xmSelect' @@ -375,7 +375,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions', 'xmSelect'
375 grid: [{ 375 grid: [{
376 top: 20, 376 top: 20,
377 bottom: 45, 377 bottom: 45,
378 - left: 30, 378 + left: 40,
379 right: 5 379 right: 5
380 }], 380 }],
381 xAxis: [{ 381 xAxis: [{
@@ -439,7 +439,121 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions', 'xmSelect' @@ -439,7 +439,121 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions', 'xmSelect'
439 }); 439 });
440 }); 440 });
441 } 441 }
  442 + /********************单独加载更多****************************/
  443 + function loadNoticeMoreChart(echartObject,xData,yData) {
  444 + var series = [{
  445 + name: '通知次数',
  446 + data: yData,
  447 + barWidth: 20,
  448 + type: 'bar',
  449 + label: {
  450 + show: true,
  451 + position: 'top',
  452 + textStyle: {
  453 + color: '#555'
  454 + },
  455 + },
  456 + itemStyle: {
  457 + normal: {
  458 + color: (params) => {
  459 + var colors = ['#b6c2ff', '#96edc1', '#fcb75b'];
  460 + return colors[params.dataIndex % 3]
  461 + }
  462 + }
  463 + },
  464 + emphasis: {
  465 + itemStyle: {
  466 + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  467 + { offset: 0, color: '#2378f7' },
  468 + { offset: 0.7, color: '#2378f7' },
  469 + { offset: 1, color: '#83bff6' }
  470 + ])
  471 + }
  472 + },
  473 + }]
442 474
  475 + var option = {
  476 + tooltip: {
  477 + trigger: 'axis',
  478 + axisPointer: {
  479 + type: 'shadow'
  480 + }
  481 + },
  482 + grid: [{
  483 + top: 20,
  484 + bottom: 70,
  485 + left: 30,
  486 + right: 5
  487 + }],
  488 + xAxis: [{
  489 + type: 'category',
  490 + data: xData,
  491 + axisLabel: {
  492 + color: '#333',
  493 + show: true,
  494 + interval:0,
  495 + rotate:15
  496 + },
  497 + axisLine: {
  498 + lineStyle: {
  499 + color: '#e7e7e7'
  500 + }
  501 + },
  502 + axisTick: {
  503 + lineStyle: {
  504 + color: '#e7e7e7'
  505 + }
  506 + },
  507 + zlevel: 1
  508 + }],
  509 + yAxis: [{
  510 + type: 'value',
  511 + gridIndex: 0,
  512 + axisLabel: {
  513 + color: '#333'
  514 + },
  515 + splitLine: {
  516 + lineStyle: {
  517 + type: 'dashed'
  518 + }
  519 + },
  520 + axisLine: {
  521 + lineStyle: {
  522 + color: '#ccc'
  523 + }
  524 + },
  525 + axisTick: {
  526 + lineStyle: {
  527 + color: '#ccc'
  528 + }
  529 + }
  530 + }],
  531 + series: series,
  532 + dataZoom: [
  533 + { type: 'slider',
  534 + show: true,
  535 + xAxisIndex: [0],
  536 + left: '1%',
  537 + bottom: -5,
  538 + start: 0,
  539 + end: 50 //初始化滚动条
  540 + }
  541 + ],
  542 + }
  543 + echartObject.setOption(option)
  544 + window.onresize=function(){
  545 + echartObject.resize();
  546 + }
  547 + // const zoomSize = 6;
  548 + // echartObject.on('click', function (params) {
  549 + // echartObject.dispatchAction({
  550 + // type: 'dataZoom',
  551 + // startValue: xData[Math.max(params.dataIndex - zoomSize / 2, 0)],
  552 + // endValue:
  553 + // xData[Math.min(params.dataIndex + zoomSize / 2, yData.length - 1)]
  554 + // });
  555 + // });
  556 + }
443 //获取图表数据 557 //获取图表数据
444 function getChartData() { 558 function getChartData() {
445 var where = { 559 var where = {
@@ -522,7 +636,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions', 'xmSelect' @@ -522,7 +636,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions', 'xmSelect'
522 var yData = res.map.countList; 636 var yData = res.map.countList;
523 var xData = res.map.userList; 637 var xData = res.map.userList;
524 //展示前20条数据 @Editor LH 638 //展示前20条数据 @Editor LH
525 - loadNoticeChart(noticeTypeChartNew,xData, yData); 639 + loadNoticeMoreChart(noticeTypeChartNew,xData, yData);
526 } 640 }
527 } 641 }
528 }) 642 })
@@ -237,7 +237,10 @@ layui.define(['admin', 'form', 'table', 'element', 'sessions', 'common', 'echart @@ -237,7 +237,10 @@ layui.define(['admin', 'form', 'table', 'element', 'sessions', 'common', 'echart
237 show: true, 237 show: true,
238 position: 'top', 238 position: 'top',
239 textStyle: { 239 textStyle: {
240 - color: '#555' 240 + color: '#555',
  241 + // Start 增加padding LSQ 2021/12/29 10:17
  242 + padding:[5,0,5,0]
  243 + //End LSQ 2021/12/29 10:17
241 } 244 }
242 } 245 }
243 },{ 246 },{
@@ -16,17 +16,31 @@ @@ -16,17 +16,31 @@
16 <div class="layui-card" style="min-height: calc(30% - 15px)"> 16 <div class="layui-card" style="min-height: calc(30% - 15px)">
17 <div class="layui-card-body"> 17 <div class="layui-card-body">
18 <div style="display: flex" class="layui-card-echart"> 18 <div style="display: flex" class="layui-card-echart">
19 - <div style="width: 60%!important;"> 19 + <!--1单独一行，宽度由60%设为100%// Start LSQ 2021/12/29 10:19-->
  20 + <div style="width: 100%!important;">
20 <h5 class="lay-row-title">告警趋势图（24小时）</h5> 21 <h5 class="lay-row-title">告警趋势图（24小时）</h5>
21 <div class="pie-chart" id="overview_alarm_trend"></div> 22 <div class="pie-chart" id="overview_alarm_trend"></div>
22 </div> 23 </div>
23 - <div style="width: 40%!important;"> 24 + </div>
  25 + </div>
  26 + </div>
  27 + <!--2和5一行 // Start LSQ 2021/12/29 10:18-->
  28 +
  29 + <div class="layui-card" style="min-height: calc(30% - 15px)">
  30 + <div class="layui-card-body">
  31 + <div style="display: flex" class="layui-card-echart">
  32 + <div style="width: 50%!important;">
24 <h5 class="lay-row-title">指标告警统计Top10</h5> 33 <h5 class="lay-row-title">指标告警统计Top10</h5>
25 <div class="pie-chart" id="overview_alarm_kpi"></div> 34 <div class="pie-chart" id="overview_alarm_kpi"></div>
26 </div> 35 </div>
  36 + <div style="flex-grow: 1">
  37 + <h5 class="lay-row-title">业务域告警统计Top10</h5>
  38 + <div class="pie-chart" id="overview_alarm_domain"></div>
  39 + </div>
27 </div> 40 </div>
28 </div> 41 </div>
29 </div> 42 </div>
  43 + <!--//End LSQ 2021/12/29 10:18-->
30 44
31 <div class="layui-card" style="min-height: calc(30% - 15px)"> 45 <div class="layui-card" style="min-height: calc(30% - 15px)">
32 <div class="layui-card-body"> 46 <div class="layui-card-body">
@@ -39,10 +53,10 @@ @@ -39,10 +53,10 @@
39 <h5 class="lay-row-title">业务类型告警统计Top10</h5> 53 <h5 class="lay-row-title">业务类型告警统计Top10</h5>
40 <div class="pie-chart" id="overview_alarm_busType"></div> 54 <div class="pie-chart" id="overview_alarm_busType"></div>
41 </div> 55 </div>
42 - <div style="flex-grow: 1"> 56 + <!-- <div style="flex-grow: 1">
43 <h5 class="lay-row-title">业务域告警统计Top10</h5> 57 <h5 class="lay-row-title">业务域告警统计Top10</h5>
44 <div class="pie-chart" id="overview_alarm_domain"></div> 58 <div class="pie-chart" id="overview_alarm_domain"></div>
45 - </div> 59 + </div>-->
46 </div> 60 </div>
47 </div> 61 </div>
48 </div> 62 </div>
@@ -103,9 +103,9 @@ @@ -103,9 +103,9 @@
103 </article> 103 </article>
104 <!--上传弹框--> 104 <!--上传弹框-->
105 <script id="more_info" type="text/html"> 105 <script id="more_info" type="text/html">
106 - <div style="align:center;">  
107 - <div class="lay-row-title" > 人员分组统计 <div style=" float:right;"></div></div>  
108 - <div class="pie-chart" style="height: 350px" id="notice_chart_type_new"></div> 106 + <div style="align:center;padding: 20px;height: 330px">
  107 + <div class="lay-row-title" lay-tips="灰色拖动条可以左右拉缩并拖动展示其它数据"> 人员分组统计 </div>
  108 + <div class="pie-chart" style="height: 100%" id="notice_chart_type_new"></div>
109 </div> 109 </div>
110 </script> 110 </script>
111 <script> 111 <script>