monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by wangtao
Commit bed759d836523576f299201a0c92520793ab4a64 1 parent 575b6cf5

即时消息功能增加对于es、influxdb、tdengine的支撑（支持监控数据库的查询操作/文本，es、influxdb、tdengine暂时不支持）

Inline Side-by-side
Showing 5 changed files with 152 additions and 75 deletions
@@ -38,7 +38,26 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl @@ -38,7 +38,26 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl
38 noticeTimely.state = noticeTimely.state == 2 ? 1 : 0; 38 noticeTimely.state = noticeTimely.state == 2 ? 1 : 0;
39 form.val('form-noticeTimely-add', noticeTimely); 39 form.val('form-noticeTimely-add', noticeTimely);
40 $('[name="templates"]').val(noticeTimely.templates); 40 $('[name="templates"]').val(noticeTimely.templates);
41 - bloatedSite(noticeTimely.site); 41 +
  42 + var setting = noticeTimely.msgSetting;
  43 + if(setting){
  44 + try{
  45 + // "[{\"fieldName\":\"noticeType\",\"condition\":\"2\",\"conditionVal\":\"2\",\"msgLevel\":\"3\"}]"
  46 + var arr = JSON.parse(setting);
  47 + if(arr){
  48 + $(arr).each(function (i,v){
  49 + addCondition(v);
  50 + })
  51 + }
  52 +
  53 + }catch (e) {
  54 +
  55 + }
  56 +
  57 + }
  58 +
  59 +
  60 + //bloatedSite(noticeTimely.site);
42 bloatedParameter(noticeTimely); 61 bloatedParameter(noticeTimely);
43 if (response.data) { 62 if (response.data) {
44 $.each(response.data, function (i, v) { 63 $.each(response.data, function (i, v) {
@@ -110,30 +129,60 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl @@ -110,30 +129,60 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl
110 player.play(); 129 player.play();
111 }); 130 });
112 131
113 - //添加消息状态  
114 - $("#editNoticeTimelyParamBtn").on("click",function () {  
115 -  
116 - let testStatus = $('#layui-notice_timely_sql_test').attr('test-status');  
117 - if(!testStatus || testStatus != 'success'){  
118 - layer.msg('请先测试脚本！', {icon: 7,time:3000});  
119 - return;  
120 - } 132 + function addCondition(defVal){
  133 + var settingItem = $('#notice_timely_param_level');
121 134
122 var html = $("#noticeTimelyParamAddRowHtml").html(); 135 var html = $("#noticeTimelyParamAddRowHtml").html();
123 - $('#notice_timely_param_level').append(html); 136 + settingItem.append(html);
124 $('#notice_timely_param_sql').removeClass('hide'); 137 $('#notice_timely_param_sql').removeClass('hide');
125 - $('#notice_timely_param_level').removeClass('hide');  
126 - var number = $('#notice_timely_param_level').find('.notice_time_select_sql_value').length; 138 + settingItem.removeClass('hide');
  139 + var number = settingItem.find('.notice_time_select_sql_value').length;
127 getRowName(); 140 getRowName();
128 var ht = ''; 141 var ht = '';
129 rowNames.forEach(item => { 142 rowNames.forEach(item => {
130 ht += '<option value="' + item + '">' + item + '</option>' 143 ht += '<option value="' + item + '">' + item + '</option>'
131 }) 144 })
132 - $('#notice_timely_param_level').find('.notice_time_select_sql_value').eq(number - 1).append(ht); 145 + settingItem.find('.notice_time_select_sql_value').eq(number - 1).append(ht);
133 if (identifying == 0) { 146 if (identifying == 0) {
134 - $('#notice_timely_param_level').find('.notice_time_select_colour').eq(0).val(grade); 147 + settingItem.find('.notice_time_select_colour').eq(0).val(grade);
135 identifying = 1; 148 identifying = 1;
136 } 149 }
  150 +
  151 + settingItem.find('.delete-condition').eq(0).attr('id','id'+(new Date()).getTime());
  152 +
  153 + settingItem.find('.delete-condition').on('click',function (){
  154 + var that = $(this);
  155 + layer.confirm('确认要删除吗？', {icon: 3}, function (index) {
  156 + that.parent().parent().remove();
  157 + layer.close(index);
  158 + });
  159 + })
  160 +
  161 + if(defVal){
  162 + // 设置默认值
  163 + settingItem.find('.notice_time_select_sql_value').val(defVal.fieldName);
  164 + settingItem.find('.notice_time_select_symbol').val(defVal.condition);
  165 + settingItem.find('.layui-notice-time-btn').val(defVal.conditionVal);
  166 + settingItem.find('.notice_time_select_colour').val(defVal.msgLevel);
  167 +
  168 + setDetailsTags(rowNames);
  169 + }
  170 + }
  171 +
  172 + //添加消息状态
  173 + $("#editNoticeTimelyParamBtn").on("click",function () {
  174 +
  175 + var rowNames = getRowName();
  176 + if(rowNames && rowNames.length == 0){
  177 + let testStatus = $('#layui-notice_timely_sql_test').attr('test-status');
  178 + if(!testStatus || testStatus != 'success'){
  179 + layer.msg('请先测试脚本！', {icon: 7,time:3000});
  180 + return;
  181 + }
  182 + }
  183 +
  184 + addCondition();
  185 +
137 }) 186 })
138 //写入标签内容 187 //写入标签内容
139 function writeTagsInfo(data) { 188 function writeTagsInfo(data) {
@@ -348,12 +397,16 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl @@ -348,12 +397,16 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl
348 } 397 }
349 398
350 //测试按钮点击 399 //测试按钮点击
351 - $('#layui-notice_timely_sql_test').unbind("click").on("click", function () { 400 + $('#layui-notice_timely_sql_test').unbind("click").on("click", function (e) {
  401 + e.preventDefault();
352 var sql = $('#layui-notice_timely_sql').val(); 402 var sql = $('#layui-notice_timely_sql').val();
  403 + var type = $('#noticeTimely_type').val();
  404 +
353 admin.req({ 405 admin.req({
354 url: common.domainName + '/api-web/noticeTimely/executeSql' 406 url: common.domainName + '/api-web/noticeTimely/executeSql'
355 , data: { 407 , data: {
356 - sql: sql 408 + sql: sql,
  409 + type:type
357 } 410 }
358 , success: function (res) { 411 , success: function (res) {
359 if (res && res.data && res.data.length > 0) { 412 if (res && res.data && res.data.length > 0) {
@@ -363,23 +416,15 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl @@ -363,23 +416,15 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl
363 var list = res.data; 416 var list = res.data;
364 //默认取值第一个 417 //默认取值第一个
365 var keys = Object.keys(list[0]); 418 var keys = Object.keys(list[0]);
366 - var details_tags = '';  
367 var html = ''; 419 var html = '';
368 keys.forEach(item => { 420 keys.forEach(item => {
369 html += '<option value="' + item + '">' + item + '</option>' 421 html += '<option value="' + item + '">' + item + '</option>'
370 -  
371 - //  
372 - details_tags += `<span id="tags_span_${item}" class="layui-badge layui-bg-blue" style="margin: 3px;" ><em>${item}</em></span>`;  
373 }) 422 })
374 $.each($('.notice_time_select_sql_value'), function (i, v) { 423 $.each($('.notice_time_select_sql_value'), function (i, v) {
375 $(this).empty(); 424 $(this).empty();
376 $(this).append(html); 425 $(this).append(html);
377 }) 426 })
378 -  
379 - $('#details_tags').append(details_tags);  
380 - $('#details_tags span').on('click',function (){  
381 - $('[name="templates"]').val($('[name="templates"]').val() + '#{'+$(this).text() + '}');  
382 - }); 427 + setDetailsTags(keys);
383 layer.msg('脚本验证通过!', {icon: 1, time: 3000}); 428 layer.msg('脚本验证通过!', {icon: 1, time: 3000});
384 } else { 429 } else {
385 layer.msg('脚本验证失败，请检查!', {icon: 7, time: 3000}); 430 layer.msg('脚本验证失败，请检查!', {icon: 7, time: 3000});
@@ -388,21 +433,28 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl @@ -388,21 +433,28 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl
388 }); 433 });
389 }); 434 });
390 435
391 - //获取配置参数  
392 - function getParam() {  
393 - debugger  
394 - var map = getRowName();  
395 - var pa = '';  
396 - map.rowNameList.forEach(item => {  
397 - pa += '#{' + item + '},'; 436 + function setDetailsTags(arr){
  437 +
  438 + $('#details_tags').find('.layui-badge').remove();
  439 +
  440 + var details_tags = '';
  441 + arr.forEach(item => {
  442 + details_tags += `<span id="tags_span_${item}" class="layui-badge layui-bg-blue" style="margin: 3px;" ><em>${item}</em></span>`;
398 }) 443 })
399 - if (pa != '') {  
400 - pa = pa.substring(0, pa.length - 1); 444 +
  445 + $('#details_tags').append(details_tags);
  446 + $('#details_tags span').on('click',function (){
  447 + $('[name="templates"]').val($('[name="templates"]').val() + '#{'+$(this).text() + '}');
  448 + });
401 } 449 }
  450 +
  451 + //获取配置参数
  452 + function getParam() {
  453 +
402 //获取模板和等级 454 //获取模板和等级
403 var obj = { 455 var obj = {
404 - msgSetting: '',  
405 - templates: pa 456 + msgSetting: null,
  457 + templates: null
406 }; 458 };
407 459
408 var errMsg = ''; 460 var errMsg = '';
@@ -410,7 +462,19 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl @@ -410,7 +462,19 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl
410 if (!$('#notice_timely_param_sql').hasClass('hide')) { 462 if (!$('#notice_timely_param_sql').hasClass('hide')) {
411 // 获取模板信息 463 // 获取模板信息
412 var val = $('#notice_timely_param_sql').find('textarea[name="templates"]').eq(0).val(); 464 var val = $('#notice_timely_param_sql').find('textarea[name="templates"]').eq(0).val();
413 - obj.templates = val ? val : pa; 465 + if(!val || val == '' || val == null){
  466 + var map = getRowName();
  467 + var pa = '';
  468 + map.rowNameList.forEach(item => {
  469 + pa += '#{' + item + '},';
  470 + })
  471 + if (pa != '') {
  472 + pa = pa.substring(0, pa.length - 1);
  473 + }
  474 + val = pa;
  475 + }
  476 +
  477 + obj.templates = val;
414 478
415 var arr = []; 479 var arr = [];
416 // 获取条件行 480 // 获取条件行
@@ -113,7 +113,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl @@ -113,7 +113,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl
113 elem: '#table-noticeTimely-state-list', 113 elem: '#table-noticeTimely-state-list',
114 url: domainName + '/api-web/noticeTimely/statePage', 114 url: domainName + '/api-web/noticeTimely/statePage',
115 where: params, 115 where: params,
116 - height: 'full', 116 + height: 'full-450',
117 limit: common.limit, 117 limit: common.limit,
118 limits: common.limits, 118 limits: common.limits,
119 page: { 119 page: {
@@ -246,7 +246,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl @@ -246,7 +246,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl
246 layer.open({ 246 layer.open({
247 title: "已发送消息", 247 title: "已发送消息",
248 content: $("#noticeTimely-state-html").html(), 248 content: $("#noticeTimely-state-html").html(),
249 - area: ['80%', '70%'], 249 + area: ['80%', '670px'],
250 btns: ['确认', '取消'], 250 btns: ['确认', '取消'],
251 success: function (index) { 251 success: function (index) {
252 loadStateTable(id); 252 loadStateTable(id);
@@ -441,8 +441,7 @@ layui.extend({ @@ -441,8 +441,7 @@ layui.extend({
441 //通过stompClient.subscribe订阅/topic/getResponse 目标(destination)发送的消息 441 //通过stompClient.subscribe订阅/topic/getResponse 目标(destination)发送的消息
442 stompClient.subscribe('/alarmQuery/', function (respnose) { 442 stompClient.subscribe('/alarmQuery/', function (respnose) {
443 var alarmArr = JSON.parse(respnose.body); 443 var alarmArr = JSON.parse(respnose.body);
444 - var mp3Name = sessionStorage.getItem('mp3');  
445 - var audio = audioPlayer(`../src/style/mp3/${mp3Name}.mp3`) 444 +
446 $.each(alarmArr, function (i, v) { 445 $.each(alarmArr, function (i, v) {
447 if (v.alarmContent) { 446 if (v.alarmContent) {
448 (function (i) { 447 (function (i) {
@@ -461,7 +460,8 @@ layui.extend({ @@ -461,7 +460,8 @@ layui.extend({
461 let isNotify = alarmByUser(v.alarmId, alarmType === 'alarm' ? 'b_alarm' : 'b_alarm_his'); 460 let isNotify = alarmByUser(v.alarmId, alarmType === 'alarm' ? 'b_alarm' : 'b_alarm_his');
462 if (isNotify) { 461 if (isNotify) {
463 setTimeout(function () { 462 setTimeout(function () {
464 - audio.playclip(); 463 + var mp3Name = sessionStorage.getItem('mp3');
  464 + audioPlayer(`../src/style/mp3/${mp3Name}.mp3`)
465 new msgTips({ 465 new msgTips({
466 dom: ".right-bottom-tips", 466 dom: ".right-bottom-tips",
467 title: "告警消息", 467 title: "告警消息",
@@ -551,7 +551,7 @@ layui.extend({ @@ -551,7 +551,7 @@ layui.extend({
551 toastType: toastType, 551 toastType: toastType,
552 type: 'click', 552 type: 'click',
553 action: function () { 553 action: function () {
554 - if (hash) { 554 + if (hash && hash != '' && hash != null) {
555 if (hash.toLowerCase().indexOf("http://") != -1 && hash.toLowerCase().indexOf("https://") != -1) { 555 if (hash.toLowerCase().indexOf("http://") != -1 && hash.toLowerCase().indexOf("https://") != -1) {
556 location.hash = hash; 556 location.hash = hash;
557 } else { 557 } else {
@@ -621,7 +621,7 @@ layui.extend({ @@ -621,7 +621,7 @@ layui.extend({
621 621
622 // 订阅实时消息 622 // 订阅实时消息
623 stompClient.subscribe('/realTime/', function (respnose) { 623 stompClient.subscribe('/realTime/', function (respnose) {
624 - console.log('实时信息： ' + respnose); 624 + //console.log('实时信息： ' + respnose);
625 var data = respnose.body; 625 var data = respnose.body;
626 if (data) { 626 if (data) {
627 var obj = JSON.parse(data); 627 var obj = JSON.parse(data);
@@ -633,7 +633,7 @@ layui.extend({ @@ -633,7 +633,7 @@ layui.extend({
633 // 订阅用户消息 633 // 订阅用户消息
634 layui.use('element', function () { 634 layui.use('element', function () {
635 stompClient.subscribe("/user/realTime/notifications/", function (respnose) { 635 stompClient.subscribe("/user/realTime/notifications/", function (respnose) {
636 - console.log('专属信息： ' + respnose); 636 + //console.log('专属信息： ' + respnose);
637 var data = respnose.body; 637 var data = respnose.body;
638 if (data) { 638 if (data) {
639 var obj = JSON.parse(data); 639 var obj = JSON.parse(data);
@@ -648,17 +648,23 @@ layui.extend({ @@ -648,17 +648,23 @@ layui.extend({
648 progressHandel(element,obj); 648 progressHandel(element,obj);
649 } else { 649 } else {
650 showTips(obj.content, obj.title, obj.msgType.toLowerCase(), obj.href, 1000, obj.queryResult); 650 showTips(obj.content, obj.title, obj.msgType.toLowerCase(), obj.href, 1000, obj.queryResult);
651 - if (typeof (obj.msgType) != "undefined") {  
652 - var str = '滑稽';  
653 - voiceList.forEach(item => {  
654 - if (item.type_ == obj.msgType) {  
655 - str = item.voice_;  
656 - }  
657 - })  
658 - var url = '../src/style/mp3/' + str + '.mp3';  
659 - var audio = audioPlayer(url);  
660 - audio.playclip();  
661 - } 651 + var noticeVoice = '滑稽';
  652 + if(obj.voice){
  653 + noticeVoice = obj.voice;
  654 + }
  655 + var mp3Url = `/src/style/mp3/${noticeVoice}.mp3`;
  656 + audioPlayer(mp3Url);
  657 + // if (typeof (obj.msgType) != "undefined") {
  658 + // var str = '滑稽';
  659 + // voiceList.forEach(item => {
  660 + // if (item.type_ == obj.msgType) {
  661 + // str = item.voice_;
  662 + // }
  663 + // })
  664 + // var url = '../src/style/mp3/' + str + '.mp3';
  665 + // var audio = audioPlayer(url);
  666 + // audio.playclip();
  667 + // }
662 } 668 }
663 } 669 }
664 }); 670 });
@@ -701,20 +707,27 @@ layui.extend({ @@ -701,20 +707,27 @@ layui.extend({
701 707
702 //音频播放 708 //音频播放
703 function audioPlayer(url) { 709 function audioPlayer(url) {
704 - var audio = document.createElement('audio')  
705 - if (audio.canPlayType) {  
706 - var element = document.createElement('source')  
707 - element.setAttribute('src', url)  
708 - element.setAttribute('type', 'audio/mpeg')  
709 - audio.appendChild(element)  
710 - audio.load()  
711 - audio.playclip = function () {  
712 - audio.pause()  
713 - audio.currentTime = 0  
714 - audio.play()  
715 - }  
716 - return audio 710 + try{
  711 + // var audio = document.createElement('audio')
  712 + // if (audio.canPlayType) {
  713 + // var element = document.createElement('source')
  714 + // element.setAttribute('src', url)
  715 + // element.setAttribute('type', 'audio/mpeg')
  716 + // audio.appendChild(element)
  717 + // audio.load()
  718 + // audio.playclip = function () {
  719 + // audio.pause()
  720 + // audio.currentTime = 0
  721 + // audio.play()
  722 + // }
  723 + // return audio
  724 + // }
  725 + var player = new Audio(url);
  726 + player.play();
  727 + }catch (e) {
  728 + console.log('已播放！');
717 } 729 }
  730 +
718 } 731 }
719 732
720 var tryFunc = function () { 733 var tryFunc = function () {
@@ -84,15 +84,15 @@ @@ -84,15 +84,15 @@
84 <label class="layui-form-label">类型</label> 84 <label class="layui-form-label">类型</label>
85 <div class="layui-input-inline"> 85 <div class="layui-input-inline">
86 <select name="type" id="noticeTimely_type" lay-filter="noticeTimely_type"> 86 <select name="type" id="noticeTimely_type" lay-filter="noticeTimely_type">
87 - <option value="sql">监控数据库</option>  
88 - <option value="text">文本</option> 87 + <option value="SQL">监控数据库</option>
  88 + <option value="TEXT">文本</option>
89 <!-- <option value="es">es</option> 89 <!-- <option value="es">es</option>
90 <option value="influxdb">时序</option> 90 <option value="influxdb">时序</option>
91 <option value="tdEngine">tdEngine</option>--> 91 <option value="tdEngine">tdEngine</option>-->
92 </select> 92 </select>
93 - <span> 93 + <div style="padding: 3px">
94 文本支持：#{now} 当前时间格式：yyyy-MM-dd HH:mm:ss 94 文本支持：#{now} 当前时间格式：yyyy-MM-dd HH:mm:ss
95 - </span> 95 + </div>
96 </div> 96 </div>
97 </div> 97 </div>
98 </div> 98 </div>
@@ -129,7 +129,7 @@ @@ -129,7 +129,7 @@
129 </div> 129 </div>
130 <div class="layui-form-item hide" id="notice_timely_param_level"> 130 <div class="layui-form-item hide" id="notice_timely_param_level">
131 <label class="layui-form-label">展示设置</label> 131 <label class="layui-form-label">展示设置</label>
132 - <span style="color: red">* 列表数据的状态设置办法：获取“第一条”数据的内容进行判断;多条件之间的关系为“且”。</span> 132 + <span style="color: red;line-height:36px">* 列表数据的状态设置办法：获取“第一条”数据的内容进行判断。</span>
133 </div> 133 </div>
134 </div> 134 </div>
135 </article> 135 </article>
@@ -153,7 +153,7 @@ @@ -153,7 +153,7 @@
153 <option value="2">重要(黄色)</option> 153 <option value="2">重要(黄色)</option>
154 <option value="3">严重(红色)</option> 154 <option value="3">严重(红色)</option>
155 </select> 155 </select>
156 - <div class="layui-notice-time-lable" style="width: 40px;">测试</div> 156 + <div class="layui-notice-time-lable delete-condition" style="width: 40px;">删除</div>
157 </div> 157 </div>
158 </div> 158 </div>
159 </script> 159 </script>