Merge branch 'master-500-dev' of http://113.200.75.45:82/monitor_v3/hg-monitor-w…
…eb into master-500-dev
Showing
38 changed files
with
3811 additions
and
677 deletions
| @@ -321,7 +321,8 @@ layui.define(['xmSelect', 'md5'], function (exports) { | @@ -321,7 +321,8 @@ layui.define(['xmSelect', 'md5'], function (exports) { | ||
| 321 | resTypeSelect: function (targtetId, callback, ajaxParams) { | 321 | resTypeSelect: function (targtetId, callback, ajaxParams) { |
| 322 | var options = "<option value=''>=资源类型=</option>"; | 322 | var options = "<option value=''>=资源类型=</option>"; |
| 323 | admin.req(Object.assign({ | 323 | admin.req(Object.assign({ |
| 324 | - url: this.domainName + '/api-web/home/restype/getAllResType' | 324 | + url: this.domainName + '/api-web/home/restype/getAllResType', |
| 325 | + async: false | ||
| 325 | }, ajaxParams)).done(function (res) { | 326 | }, ajaxParams)).done(function (res) { |
| 326 | var reslist = res.data; | 327 | var reslist = res.data; |
| 327 | $.each(reslist, function (i, v) { | 328 | $.each(reslist, function (i, v) { |
| @@ -446,6 +447,7 @@ layui.define(['xmSelect', 'md5'], function (exports) { | @@ -446,6 +447,7 @@ layui.define(['xmSelect', 'md5'], function (exports) { | ||
| 446 | var accessToken = sessions.getToken()['access_token']; | 447 | var accessToken = sessions.getToken()['access_token']; |
| 447 | $.ajax({ | 448 | $.ajax({ |
| 448 | url: obj.domainName + '/api-web/manage/protocol/page?page=1&limit=10000&access_token=' + accessToken, | 449 | url: obj.domainName + '/api-web/manage/protocol/page?page=1&limit=10000&access_token=' + accessToken, |
| 450 | + async: false, | ||
| 449 | success: function (res) { | 451 | success: function (res) { |
| 450 | if (res && res.data) { | 452 | if (res && res.data) { |
| 451 | res.data.forEach(function (v) { | 453 | res.data.forEach(function (v) { |
| @@ -336,6 +336,80 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele | @@ -336,6 +336,80 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele | ||
| 336 | }); | 336 | }); |
| 337 | }, | 337 | }, |
| 338 | /** | 338 | /** |
| 339 | + * 渲染文本，指定列数展示，key、value展示的方式 | ||
| 340 | + * @param targetId html存放目标id | ||
| 341 | + * @param resId 资源id | ||
| 342 | + * @param kpiId 指标id,多个指标逗号隔开 | ||
| 343 | + * @param cols 指定列（一组key value为一列） | ||
| 344 | + */ | ||
| 345 | + anapshotRenderTextCols: function (targetId,data, cols, isBasic) { | ||
| 346 | + var flags = ""; | ||
| 347 | + var kpiIdList = ""; | ||
| 348 | + if (data.length > 0) { | ||
| 349 | + var dataArr = common.splieceGroup(data, cols); | ||
| 350 | + var li = ""; | ||
| 351 | + //先遍历分组后的，在遍历组内的数组 | ||
| 352 | + $.each(dataArr, function (i, v) { | ||
| 353 | + var span = ''; | ||
| 354 | + $.each(v, function (j, ar) { | ||
| 355 | + var valueStr = ''; | ||
| 356 | + var titleStr = ''; | ||
| 357 | + //end lsq 2022-06-08 | ||
| 358 | + if (ar.kpiId == 'KPIE13DD9A3') { | ||
| 359 | + valueStr = laytpl($("#linkStateDetailTpl").html()).render({linkStateList: ar.value}); | ||
| 360 | + } else if (ar.value != 'null') { | ||
| 361 | + if (ar.value == 'Infinity%') { | ||
| 362 | + valueStr = '' | ||
| 363 | + } else { | ||
| 364 | + valueStr = ar.kpiValue; | ||
| 365 | + } | ||
| 366 | + titleStr = valueStr; | ||
| 367 | + } | ||
| 368 | + if (ar.kpiId == 'KPIE13DD9A3' || ar.kpiId == 'KPI02786E8D') { | ||
| 369 | + //获取flag | ||
| 370 | + $.each(ar.value, function (i, v) { | ||
| 371 | + flags += v.flag + ","; | ||
| 372 | + }); | ||
| 373 | + if (flags != '') { | ||
| 374 | + flags = flags.substring(0, flags.length - 1); | ||
| 375 | + } | ||
| 376 | + //获取kpi | ||
| 377 | + kpiIdList += ar.kpiId + ","; | ||
| 378 | + } | ||
| 379 | + //start lsq 更改下探图标的属性值 2022-06-08 | ||
| 380 | + var tips = '<a class="detail_row_menu hide" data-id=' + ar.kpiId + ' data-flag=' + ar.flag + | ||
| 381 | + ' data-name=' + ar.kpiName + ' data-kpiname=' + ar.kpiName + ' data-iswarning=1 data-ident=1' + | ||
| 382 | + ' data-trend=0 data-unit="" data-hidem="hidem" data-nature="true" ' + | ||
| 383 | + ' data-restype=' + (ar.resType ? ar.resType : "") + '>\n' + | ||
| 384 | + '<img style="width: 17px;height: 17px;" src="/src/style/img/icon_row_menu.png">\n' + | ||
| 385 | + '</a>' | ||
| 386 | + //end lsq 2022-06-08 | ||
| 387 | + var menuId = ""; | ||
| 388 | + if (ar.kpiId == 'KPIE13DD9A3' || ar.kpiId == 'KPI02786E8D' ) { | ||
| 389 | + ar.kpiName = ar.kpiName + tips; | ||
| 390 | + menuId = "id=\"" + targetId + "_detail_row_menu\" class='statusMenu'"; | ||
| 391 | + } | ||
| 392 | + var $html = addIconByValue(valueStr); | ||
| 393 | + var resStyle = obj.alarmEleMatchStyle(ar.flag, ar.kpiId); | ||
| 394 | + span += ' <span ' + menuId + ' style="text-align:left;width:40%">' + ar.kpiName + '</span>' + | ||
| 395 | + '<span title="' + titleStr + '" style="width:60%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;' + resStyle + '">' | ||
| 396 | + + $html + valueStr + '</span>'; | ||
| 397 | + //补充空白区域 | ||
| 398 | + if (v.length < cols) { | ||
| 399 | + var l = cols - v.length; | ||
| 400 | + var appendSpan = ''; | ||
| 401 | + for (var n = 0; n < l; n++) { | ||
| 402 | + appendSpan += "<span></span><span></span>"; | ||
| 403 | + } | ||
| 404 | + span += appendSpan; | ||
| 405 | + } | ||
| 406 | + }); | ||
| 407 | + li += '<li>' + span + '</li>' | ||
| 408 | + }); | ||
| 409 | + $("#" + targetId).html(li); | ||
| 410 | + } | ||
| 411 | + }, | ||
| 412 | + /** | ||
| 339 | *仪表盘数据格式 | 413 | *仪表盘数据格式 |
| 340 | * @param targetId 仪表盘所在区域ID | 414 | * @param targetId 仪表盘所在区域ID |
| 341 | * @param resId 资源ID | 415 | * @param resId 资源ID |
| @@ -596,6 +670,36 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele | @@ -596,6 +670,36 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele | ||
| 596 | 670 | ||
| 597 | }); | 671 | }); |
| 598 | }, | 672 | }, |
| 673 | + snapshotRenderResHealth: function (data){ | ||
| 674 | + var clas = 'res-state-pie--good'; | ||
| 675 | + if (data.icon == 'worst') { | ||
| 676 | + clas = 'res-state-pie--bad'; | ||
| 677 | + } | ||
| 678 | + if (data.icon == 'worse') { | ||
| 679 | + clas = 'res-state-pie--middle'; | ||
| 680 | + } | ||
| 681 | + var reslt = "优", yz = '0', yb = '0', zy = '0'; | ||
| 682 | + if (data.state) { | ||
| 683 | + reslt = data.state; | ||
| 684 | + } | ||
| 685 | + if (data.yz) { | ||
| 686 | + yz = data.yz == 'null' || '' ? 0 : data.yz; | ||
| 687 | + } | ||
| 688 | + if (data.zy) { | ||
| 689 | + zy = data.zy == 'null' || '' ? 0 : data.zy; | ||
| 690 | + } | ||
| 691 | + if (data.yb) { | ||
| 692 | + yb = data.yb == 'null' || '' ? 0 : data.yb; | ||
| 693 | + } | ||
| 694 | + var html = '<div class="res-state-pie ' + clas + '">' + reslt + '</div>' + | ||
| 695 | + ' <ul>' + | ||
| 696 | + ' <li>严重告警：' + yz + '</li>' + | ||
| 697 | + ' <li>重要告警：' + zy + '</li>' + | ||
| 698 | + ' <li>一般告警：' + yb + '</li>' + | ||
| 699 | + ' </ul>'; | ||
| 700 | + | ||
| 701 | + $("#hostminicomputerpartition_resstate").html(html); | ||
| 702 | + }, | ||
| 599 | 703 | ||
| 600 | /** | 704 | /** |
| 601 | * 资源状态 | 705 | * 资源状态 |
| @@ -2172,6 +2276,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele | @@ -2172,6 +2276,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele | ||
| 2172 | }); | 2276 | }); |
| 2173 | }, | 2277 | }, |
| 2174 | 2278 | ||
| 2279 | + | ||
| 2280 | + | ||
| 2175 | /** | 2281 | /** |
| 2176 | * 柱状图+折线图 | 2282 | * 柱状图+折线图 |
| 2177 | * @params targetId 目标dom | 2283 | * @params targetId 目标dom |
| @@ -2620,20 +2726,20 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele | @@ -2620,20 +2726,20 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele | ||
| 2620 | '<input type="radio" name="noticeFlag" value="true" title="是"> 是' + | 2726 | '<input type="radio" name="noticeFlag" value="true" title="是"> 是' + |
| 2621 | '<input type="radio" name="noticeFlag" value="false" title="否" checked="" style="margin-left: 20px;"> 否</div> '); | 2727 | '<input type="radio" name="noticeFlag" value="false" title="否" checked="" style="margin-left: 20px;"> 否</div> '); |
| 2622 | } | 2728 | } |
| 2623 | - //start lsq 添加状态指标下探 2022-06-09 | ||
| 2624 | - $("[lay-id='" + tableId + "']").find(".layui-table-cell").hover(function () { | ||
| 2625 | - var $that = $(this) | ||
| 2626 | - var $btn = $that.find(".detail_row_menu"); | ||
| 2627 | - if ($btn.length > 0) { | ||
| 2628 | - $(".layui-card-body").find(".detail_row_menu:not(.hide)").addClass("hide") | ||
| 2629 | - $btn.removeClass("hide"); | ||
| 2630 | - } | ||
| 2631 | - }) | ||
| 2632 | - filterSuppressMonitor(resId); | ||
| 2633 | - //end lsq 2022-06-09 | ||
| 2634 | } | 2729 | } |
| 2635 | }) | 2730 | }) |
| 2636 | }); | 2731 | }); |
| 2732 | + //start lsq 添加状态指标下探 2022-06-09 | ||
| 2733 | + $("[lay-id='" + tableId + "']").find(".layui-table-cell").hover(function () { | ||
| 2734 | + var $that = $(this) | ||
| 2735 | + var $btn = $that.find(".detail_row_menu"); | ||
| 2736 | + if ($btn.length > 0) { | ||
| 2737 | + $(".layui-card-body").find(".detail_row_menu:not(.hide)").addClass("hide") | ||
| 2738 | + $btn.removeClass("hide"); | ||
| 2739 | + } | ||
| 2740 | + }) | ||
| 2741 | + filterSuppressMonitor(resId); | ||
| 2742 | + //end lsq 2022-06-09 | ||
| 2637 | } | 2743 | } |
| 2638 | }); | 2744 | }); |
| 2639 | if ($('.layui-show').find(".detail-left-panel").length == 0) { | 2745 | if ($('.layui-show').find(".detail-left-panel").length == 0) { |
| @@ -2742,6 +2848,47 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele | @@ -2742,6 +2848,47 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele | ||
| 2742 | } | 2848 | } |
| 2743 | }, | 2849 | }, |
| 2744 | /** | 2850 | /** |
| 2851 | + * 活动告警 | ||
| 2852 | + * @param tableId | ||
| 2853 | + * @param resId | ||
| 2854 | + */ | ||
| 2855 | + snapshotRenderActiveAlarms: function (title,tableId, data) { | ||
| 2856 | + //start lsq 状态信息的状态也增加下探 202-06-08 | ||
| 2857 | + let statusF = false;//是否为状态信息 | ||
| 2858 | + //end lsq 2022-06-08 | ||
| 2859 | + $('#' + tableId).prev().text(title) | ||
| 2860 | + var alarmlist = table.render({ | ||
| 2861 | + elem: '#' + tableId | ||
| 2862 | + , data: data | ||
| 2863 | + , cols: [[ | ||
| 2864 | + { | ||
| 2865 | + field: 'LAY_INDEX', title: '序号', align: 'center', width: 100, | ||
| 2866 | + templet: function (d) { | ||
| 2867 | + return '<span>' + d.LAY_INDEX + '</span>'; | ||
| 2868 | + } | ||
| 2869 | + } | ||
| 2870 | + , { | ||
| 2871 | + field: 'alarmLevel', title: '告警级别', align: 'center', width: 140, sort: true, | ||
| 2872 | + templet: function (d) { | ||
| 2873 | + if (d.alarmLevel == 3) { | ||
| 2874 | + return '<span class="layui-table-warn" style="width: 100%;">严重</span>'; | ||
| 2875 | + } else if (d.alarmLevel == 2) { | ||
| 2876 | + return '<span class="layui-table-close" style="width: 100%;">重要</span>'; | ||
| 2877 | + } else if (d.alarmLevel == 1) { | ||
| 2878 | + return '<span class="layui-table-normal" style="width: 100%;">一般</span>'; | ||
| 2879 | + } | ||
| 2880 | + } | ||
| 2881 | + } | ||
| 2882 | + , {field: 'alarmContent', title: '告警内容', align: 'center'} | ||
| 2883 | + , { | ||
| 2884 | + field: 'kpiName', title: '指标名称', align: 'center', width: '20%', | ||
| 2885 | + } | ||
| 2886 | + , {field: 'updateTime', title: '告警时间', align: 'center', width: '15%'} | ||
| 2887 | + ]], | ||
| 2888 | + }); | ||
| 2889 | + | ||
| 2890 | + }, | ||
| 2891 | + /** | ||
| 2745 | * 虚拟化虚拟机列表 | 2892 | * 虚拟化虚拟机列表 |
| 2746 | * @param tableId | 2893 | * @param tableId |
| 2747 | * @param resId | 2894 | * @param resId |
| @@ -3329,6 +3476,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele | @@ -3329,6 +3476,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele | ||
| 3329 | title += `<a class="layui-icon res-view-relation-topo" data-id=${resId} lay-tips="查看资源关系拓扑" style="margin-left: 10px"><i class="iconfont"></i></a>`; | 3476 | title += `<a class="layui-icon res-view-relation-topo" data-id=${resId} lay-tips="查看资源关系拓扑" style="margin-left: 10px"><i class="iconfont"></i></a>`; |
| 3330 | //lsq 2022-04-25 增加ping详情提交按钮 | 3477 | //lsq 2022-04-25 增加ping详情提交按钮 |
| 3331 | title += `<a class="layui-icon res-view-ping" data-id=${resId} data-resname=${resName} data-ip=${ip} data-restypename=${resTypeName} data-adminname=${adminName} lay-tips="历史数据" style="margin-left: 10px;position:relative;top:-3px;"> <img width="20" src="/src/style/img/ping.png" ></a>`; | 3478 | title += `<a class="layui-icon res-view-ping" data-id=${resId} data-resname=${resName} data-ip=${ip} data-restypename=${resTypeName} data-adminname=${adminName} lay-tips="历史数据" style="margin-left: 10px;position:relative;top:-3px;"> <img width="20" src="/src/style/img/ping.png" ></a>`; |
| 3479 | + title += `<a class="layui-icon res-view-history" data-id=${resId} data-resname=${res.resName} data-ip=${ip} data-restypename=${res.resTypeName} data-adminname=${res.adminName} lay-tips="快照历史记录" style="top: -3px;float: right;"> <img width="20" src="/src/style/img/snapshothistory.png" ></a>`; | ||
| 3480 | + title += `<a class="layui-icon res-view-addSnapshot" data-id=${resId} lay-tips="创建快照" style="top: -3px;float: right; margin-right: 10px"> <img width="20" src="/src/style/img/snapshotadd.png" ></a>`; | ||
| 3332 | if (resCategory === 'share' && hardwareFlag.endsWith("Y")) { | 3481 | if (resCategory === 'share' && hardwareFlag.endsWith("Y")) { |
| 3333 | /* | 3482 | /* |
| 3334 | title += `<a class="layui-icon res-view-assets-details" data-ip=${ip} data-name=${name} data-restype=${resType} data-id=${resId} lay-tips="资产配置信息"><i class="iconfont"></i></a>`; | 3483 | title += `<a class="layui-icon res-view-assets-details" data-ip=${ip} data-name=${name} data-restype=${resType} data-id=${resId} lay-tips="资产配置信息"><i class="iconfont"></i></a>`; |
| @@ -3354,6 +3503,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele | @@ -3354,6 +3503,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele | ||
| 3354 | title += `<a class="layui-icon res-view-relation-topo" data-id=${resId} lay-tips="查看资源关系拓扑" style="margin-left: 10px"><i class="iconfont"></i></a>`; | 3503 | title += `<a class="layui-icon res-view-relation-topo" data-id=${resId} lay-tips="查看资源关系拓扑" style="margin-left: 10px"><i class="iconfont"></i></a>`; |
| 3355 | //lsq 2022-04-25 增加ping详情提交按钮 | 3504 | //lsq 2022-04-25 增加ping详情提交按钮 |
| 3356 | title += `<a class="layui-icon res-view-ping" data-id=${resId} data-resname=${res.resName} data-ip=${ip} data-restypename=${res.resTypeName} data-adminname=${res.adminName} lay-tips="历史数据" style="margin-left: 10px;position:relative;top:-3px;"> <img width="20" src="/src/style/img/ping.png" ></a>`; | 3505 | title += `<a class="layui-icon res-view-ping" data-id=${resId} data-resname=${res.resName} data-ip=${ip} data-restypename=${res.resTypeName} data-adminname=${res.adminName} lay-tips="历史数据" style="margin-left: 10px;position:relative;top:-3px;"> <img width="20" src="/src/style/img/ping.png" ></a>`; |
| 3506 | + title += `<a class="layui-icon res-view-history" data-id=${resId} data-resname=${res.resName} data-ip=${ip} data-restypename=${res.resTypeName} data-adminname=${res.adminName} lay-tips="快照历史记录" style="top: -3px;float: right;"> <img width="20" src="/src/style/img/snapshothistory.png" ></a>`; | ||
| 3507 | + title += `<a class="layui-icon res-view-addSnapshot" data-id=${resId} lay-tips="创建快照" style="top: -3px;float: right; margin-right: 10px"> <img width="20" src="/src/style/img/snapshotadd.png" ></a>`; | ||
| 3357 | if (resCategory === 'share' && hardwareFlag.endsWith("Y")) { | 3508 | if (resCategory === 'share' && hardwareFlag.endsWith("Y")) { |
| 3358 | /* | 3509 | /* |
| 3359 | title += `<a class="layui-icon res-view-assets-details" data-ip=${ip} data-name=${name} data-restype=${resType} data-id=${resId} lay-tips="资产配置信息"><i class="iconfont"></i></a>`; | 3510 | title += `<a class="layui-icon res-view-assets-details" data-ip=${ip} data-name=${name} data-restype=${resType} data-id=${resId} lay-tips="资产配置信息"><i class="iconfont"></i></a>`; |
| @@ -3645,7 +3796,39 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele | @@ -3645,7 +3796,39 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele | ||
| 3645 | }); | 3796 | }); |
| 3646 | }); | 3797 | }); |
| 3647 | //end lsq 2022-04-24 | 3798 | //end lsq 2022-04-24 |
| 3648 | - | 3799 | + $('a.res-view-addSnapshot').unbind('click').on('click', function () { |
| 3800 | + var resId = $(this).data('id'); | ||
| 3801 | + layer.confirm('将创建该资源的所有快照信息，请确认', { | ||
| 3802 | + btn: ['确定', '取消'] //按钮 | ||
| 3803 | + }, function () { | ||
| 3804 | + admin.req({ | ||
| 3805 | + url: common.domainName + '/api-web/snapshot/his/add?access_token=' + layui.sessions.getToken().access_token +'&resId=' + resId | ||
| 3806 | + , type: 'get' | ||
| 3807 | + , done: function (res) { | ||
| 3808 | + if (res.success) { | ||
| 3809 | + layer.msg('操作成功！', {offset: '15px', icon: 1, time: 2000}); | ||
| 3810 | + } else { | ||
| 3811 | + layer.msg(res.msg, {offset: '15px', icon: 7, time: 2000}); | ||
| 3812 | + } | ||
| 3813 | + } | ||
| 3814 | + }); | ||
| 3815 | + }); | ||
| 3816 | + }); | ||
| 3817 | + $('a.res-view-history').unbind('click').on('click', function () { | ||
| 3818 | + let name = $(this).data('resname')+' |'+$(this).data('restypename')+' |'+$(this).data('ip')+' |'+'历史快照数据'; | ||
| 3819 | + let paramStr = '?resId=' + $(this).data('id'); | ||
| 3820 | + layer.open({ | ||
| 3821 | + title: [name, 'font-size:18px;'], | ||
| 3822 | + type: 2, | ||
| 3823 | + area: ['65%', '90%'], | ||
| 3824 | + shadeClose: true,//开启遮罩层 | ||
| 3825 | + id: 'res-history', | ||
| 3826 | + content: ['/vue3/index.html#/vue3/snapshot/history' + paramStr, 'no'], | ||
| 3827 | + cancel: function () { | ||
| 3828 | + clearTimeout(); | ||
| 3829 | + } | ||
| 3830 | + }); | ||
| 3831 | + }); | ||
| 3649 | // 查看资产配置信息 | 3832 | // 查看资产配置信息 |
| 3650 | $('a.res-view-assets-details').unbind('click').on('click', function () { | 3833 | $('a.res-view-assets-details').unbind('click').on('click', function () { |
| 3651 | var $that = $(this); | 3834 | var $that = $(this); |
| 1 | /** 指标组新增 */ | 1 | /** 指标组新增 */ |
| 2 | layui.define(['table', 'form', 'laydate', 'common', 'sessions', 'laydate', 'element', 'admin', 'kpiIndex', 'resourcetype'], function (exports) { | 2 | layui.define(['table', 'form', 'laydate', 'common', 'sessions', 'laydate', 'element', 'admin', 'kpiIndex', 'resourcetype'], function (exports) { |
| 3 | - var $ = layui.$; | ||
| 4 | - var form = layui.form; | ||
| 5 | - var table = layui.table; | ||
| 6 | - var common = layui.common; | ||
| 7 | - var admin = layui.admin; | ||
| 8 | - var view = layui.view; | ||
| 9 | - var element = layui.element; | ||
| 10 | - | ||
| 11 | - // 对外暴露的接口 | ||
| 12 | - exports('kpiflagEdit', function (data) { | ||
| 13 | - var flagId = data.id ? data.id : ''; | ||
| 14 | - var sessions = layui.sessions; | ||
| 15 | - var accessToken = sessions.getToken().access_token; | ||
| 16 | - var domainName = common.domainName; | ||
| 17 | - // 表格数据 | ||
| 18 | - var kpiFlagTableData = []; | ||
| 19 | - var resTypeTableData = []; | ||
| 20 | - var appTableData = []; | ||
| 21 | - var serverTableData = []; | ||
| 22 | - // 加载遮罩 | ||
| 23 | - var loading; | ||
| 24 | - // 如果是编辑，回显数据 | ||
| 25 | - var flag = { | ||
| 26 | - id: '', | ||
| 27 | - flag: '', | ||
| 28 | - name: '', | ||
| 29 | - remark: '', | ||
| 30 | - bindResTypeCount: 0, | ||
| 31 | - bindAppCount: 0, | ||
| 32 | - bindServerCount: 0, | ||
| 33 | - bindList: [] | ||
| 34 | - }; | ||
| 35 | - if (flagId) { | ||
| 36 | - $.ajax({ | ||
| 37 | - url: common.domainName + '/api-web/manage/Kpiflag/getByFlagId?access_token=' + accessToken + '&flagId=' + flagId, | ||
| 38 | - type: 'get', | ||
| 39 | - success: function (res) { | ||
| 40 | - flag = res.object; | ||
| 41 | - form.val('form-flag-edit', res.object); | ||
| 42 | - kpiFlagTableData = res.data; | ||
| 43 | - reloadKpiFlagTable(); | ||
| 44 | - } | ||
| 45 | - }); | ||
| 46 | - admin.req({ | ||
| 47 | - url: domainName + '/api-web/manage/restype/list', | ||
| 48 | - data: { | ||
| 49 | - flagId: flagId | ||
| 50 | - } | ||
| 51 | - }).done(function (response) { | ||
| 52 | - resTypeTableData = response.data; | ||
| 53 | - reloadResTypeTable(); | ||
| 54 | - }); | ||
| 55 | - admin.req({ | ||
| 56 | - url: domainName + '/api-web/manage/application/page', | ||
| 57 | - data: { | ||
| 58 | - page: -1, | ||
| 59 | - limit: -1, | ||
| 60 | - flagId: flagId | ||
| 61 | - } | ||
| 62 | - }).done(function (response) { | ||
| 63 | - appTableData = response.data; | ||
| 64 | - reloadAppTable(); | ||
| 65 | - }); | ||
| 66 | - admin.req({ | ||
| 67 | - url: domainName + '/api-web/manage/server/page', | ||
| 68 | - data: { | ||
| 69 | - page: -1, | ||
| 70 | - limit: -1, | ||
| 71 | - flagId: flagId | ||
| 72 | - } | ||
| 73 | - }).done(function (response) { | ||
| 74 | - serverTableData = response.data; | ||
| 75 | - reloadServerTable(); | ||
| 76 | - }); | 3 | + var $ = layui.$; |
| 4 | + var form = layui.form; | ||
| 5 | + var table = layui.table; | ||
| 6 | + var common = layui.common; | ||
| 7 | + var admin = layui.admin; | ||
| 8 | + var view = layui.view; | ||
| 9 | + var element = layui.element; | ||
| 10 | + | ||
| 11 | + // 对外暴露的接口 | ||
| 12 | + exports('kpiflagEdit', function (data) { | ||
| 13 | + var flagId = data.id ? data.id : ''; | ||
| 14 | + var sessions = layui.sessions; | ||
| 15 | + var accessToken = sessions.getToken().access_token; | ||
| 16 | + var domainName = common.domainName; | ||
| 17 | + // 表格数据 | ||
| 18 | + var kpiFlagTableData = []; | ||
| 19 | + var resTypeTableData = []; | ||
| 20 | + var appTableData = []; | ||
| 21 | + var serverTableData = []; | ||
| 22 | + // 加载遮罩 | ||
| 23 | + var loading; | ||
| 24 | + // 如果是编辑，回显数据 | ||
| 25 | + var flag = { | ||
| 26 | + id: '', | ||
| 27 | + flag: '', | ||
| 28 | + name: '', | ||
| 29 | + remark: '', | ||
| 30 | + bindResTypeCount: 0, | ||
| 31 | + bindAppCount: 0, | ||
| 32 | + bindServerCount: 0, | ||
| 33 | + bindList: [] | ||
| 34 | + }; | ||
| 35 | + if (flagId) { | ||
| 36 | + $.ajax({ | ||
| 37 | + url: common.domainName + '/api-web/manage/Kpiflag/getByFlagId?access_token=' + accessToken + '&flagId=' + flagId, | ||
| 38 | + type: 'get', | ||
| 39 | + success: function (res) { | ||
| 40 | + flag = res.object; | ||
| 41 | + form.val('form-flag-edit', res.object); | ||
| 42 | + kpiFlagTableData = res.data; | ||
| 43 | + reloadKpiFlagTable(); | ||
| 44 | + } | ||
| 45 | + }); | ||
| 46 | + admin.req({ | ||
| 47 | + url: domainName + '/api-web/manage/restype/list', | ||
| 48 | + data: { | ||
| 49 | + flagId: flagId | ||
| 50 | + } | ||
| 51 | + }).done(function (response) { | ||
| 52 | + resTypeTableData = response.data; | ||
| 53 | + reloadResTypeTable(); | ||
| 54 | + }); | ||
| 55 | + admin.req({ | ||
| 56 | + url: domainName + '/api-web/manage/application/page', | ||
| 57 | + data: { | ||
| 58 | + page: -1, | ||
| 59 | + limit: -1, | ||
| 60 | + flagId: flagId | ||
| 77 | } | 61 | } |
| 78 | - element.render('collapse'); | 62 | + }).done(function (response) { |
| 63 | + appTableData = response.data; | ||
| 64 | + reloadAppTable(); | ||
| 65 | + }); | ||
| 66 | + admin.req({ | ||
| 67 | + url: domainName + '/api-web/manage/server/page', | ||
| 68 | + data: { | ||
| 69 | + page: -1, | ||
| 70 | + limit: -1, | ||
| 71 | + flagId: flagId | ||
| 72 | + } | ||
| 73 | + }).done(function (response) { | ||
| 74 | + serverTableData = response.data; | ||
| 75 | + reloadServerTable(); | ||
| 76 | + }); | ||
| 77 | + } | ||
| 78 | + element.render('collapse'); | ||
| 79 | + form.render(); | ||
| 80 | + // 刷新指标表格 | ||
| 81 | + var kpiflagTable = table.render({ | ||
| 82 | + elem: '#kpiflag-edit-table' | ||
| 83 | + , cellMinWidth: 80 | ||
| 84 | + , limit: 10 | ||
| 85 | + , even: true | ||
| 86 | + , data: kpiFlagTableData | ||
| 87 | + , cols: [[{ | ||
| 88 | + field: 'kpiName', title: '指标名称', align: 'center', templet: function (d) { | ||
| 89 | + return d.kpi.kpiName | ||
| 90 | + } | ||
| 91 | + }, { | ||
| 92 | + field: 'kpiIdent', title: '指标分类', align: 'center', | ||
| 93 | + templet: function (d) { | ||
| 94 | + switch (d.kpi.kpiIdent) { | ||
| 95 | + case '0': | ||
| 96 | + return '基本指标'; | ||
| 97 | + case '1': | ||
| 98 | + return '性能指标'; | ||
| 99 | + case '2': | ||
| 100 | + return '状态指标'; | ||
| 101 | + case '3': | ||
| 102 | + return '告警指标'; | ||
| 103 | + default: | ||
| 104 | + return ''; | ||
| 105 | + } | ||
| 106 | + } | ||
| 107 | + }, | ||
| 108 | + { | ||
| 109 | + title: '唯一标志', align: 'center', | ||
| 110 | + templet: function (d) { | ||
| 111 | + var radioDom = $('<input type="checkbox" name="isUnique" data-index="' + (d.LAY_INDEX-1) + '" lay-skin="switch" lay-text="是|否" lay-filter="switchIsUnique">') ; | ||
| 112 | + var isUnique = kpiFlagTableData[(d.LAY_INDEX-1)].isUnique; | ||
| 113 | + if (isUnique === '1') { //当是1时，表示时唯一标志 | ||
| 114 | + radioDom.attr('checked', true); | ||
| 115 | + }else{ | ||
| 116 | + radioDom.attr('checked', false); | ||
| 117 | + } | ||
| 118 | + return radioDom.prop('outerHTML'); | ||
| 119 | + } | ||
| 120 | + }, | ||
| 121 | + { | ||
| 122 | + title: '排序', align: 'center', | ||
| 123 | + templet: function (d) { | ||
| 124 | + var selectDom = $('<select class="defaultSortSel" class="layui-select" data-index="' + (d.LAY_INDEX-1) + '" lay-filter="select-kpiflag-table-isSort">' + | ||
| 125 | + '<option>无</option>' + | ||
| 126 | + '<option>正序</option>' + | ||
| 127 | + '<option>倒序</option>' + | ||
| 128 | + '</select>'); | ||
| 129 | + var defaultSort = kpiFlagTableData[(d.LAY_INDEX-1)].defaultSort; | ||
| 130 | + if (defaultSort == 'asc') { | ||
| 131 | + selectDom.find('option:contains("正序")').attr('selected', 'selected'); | ||
| 132 | + } else if (defaultSort == 'desc') { | ||
| 133 | + selectDom.find('option:contains("倒序")').attr('selected', 'selected'); | ||
| 134 | + } else { | ||
| 135 | + selectDom.find('option:contains("无")').attr('selected', 'selected'); | ||
| 136 | + } | ||
| 137 | + return selectDom.prop('outerHTML'); | ||
| 138 | + } | ||
| 139 | + }, { | ||
| 140 | + field: 'sort', title: '列表顺序', align: 'center', | ||
| 141 | + templet: function (d) { | ||
| 142 | + var inputDom = $('<input id="txt-kpiflag-table-sort-' + (d.LAY_INDEX-1) + '" data-index="' + (d.LAY_INDEX-1) + '" type="number" autocomplete="off" class="layui-input txt-kpiflag-table-sort">'); | ||
| 143 | + var sort = kpiFlagTableData[(d.LAY_INDEX-1)].sort; | ||
| 144 | + if (sort != null) { | ||
| 145 | + inputDom.attr("value", sort); | ||
| 146 | + } | ||
| 147 | + return inputDom.prop('outerHTML'); | ||
| 148 | + } | ||
| 149 | + }, | ||
| 150 | + {field: 'createUser', title: '创建人', align: 'center'}, | ||
| 151 | + {field: 'createTime', title: '创建时间', align: 'center'}, | ||
| 152 | + { | ||
| 153 | + title: '操作',width: 100, align: 'center', templet: '<div><span data-index="{{(d.LAY_INDEX-1)}}" class="link link-kpiflag-delete">' + | ||
| 154 | + '<a class="layui-btn layui-btn-xs layui-btn-normal" title="删除"><i class="layui-icon"></i></a></span>' | ||
| 155 | + }]], | ||
| 156 | + done: function (res, curr, count) { | ||
| 79 | form.render(); | 157 | form.render(); |
| 80 | - // 刷新指标表格 | ||
| 81 | - var kpiflagTable = table.render({ | ||
| 82 | - elem: '#kpiflag-edit-table' | ||
| 83 | - , cellMinWidth: 80 | ||
| 84 | - , limit: 10 | ||
| 85 | - , even: true | ||
| 86 | - , data: kpiFlagTableData | ||
| 87 | - , cols: [[{ | ||
| 88 | - field: 'kpiName', title: '指标名称', align: 'center', templet: function (d) { | ||
| 89 | - return d.kpi.kpiName | ||
| 90 | - } | ||
| 91 | - }, { | ||
| 92 | - field: 'kpiIdent', title: '指标分类', align: 'center', | ||
| 93 | - templet: function (d) { | ||
| 94 | - switch (d.kpi.kpiIdent) { | ||
| 95 | - case '0': | ||
| 96 | - return '基本指标'; | ||
| 97 | - case '1': | ||
| 98 | - return '性能指标'; | ||
| 99 | - case '2': | ||
| 100 | - return '状态指标'; | ||
| 101 | - case '3': | ||
| 102 | - return '告警指标'; | ||
| 103 | - default: | ||
| 104 | - return ''; | ||
| 105 | - } | ||
| 106 | - } | ||
| 107 | - }, { | ||
| 108 | - title: '唯一标志', align: 'center', | ||
| 109 | - templet: function (d) { | ||
| 110 | - var radioDom = $('<form class="layui-form">' + | ||
| 111 | - '<div class="layui-form-item layui-form-item-flex"><div class="layui-input-block input-flex-1"><input type="radio" data-index="' + d.LAY_TABLE_INDEX + '" name="isUnique" lay-filter="rdo-kpiflag-table-isUnique"></div></div>' + | ||
| 112 | - '</form>'); | ||
| 113 | - if (d.isUnique === '1') { | ||
| 114 | - radioDom.find('input[type="radio"]').attr('checked', true); | ||
| 115 | - } | ||
| 116 | - return radioDom.prop('outerHTML'); | ||
| 117 | - } | ||
| 118 | - }, { | ||
| 119 | - title: '是否排序指标', align: 'center', | ||
| 120 | - templet: function (d) { | ||
| 121 | - var selectDom = $('<select data-index="' + d.LAY_TABLE_INDEX + '" lay-filter="select-kpiflag-table-isSort">' + | ||
| 122 | - '<option>是</option>' + | ||
| 123 | - '<option>否</option>' + | ||
| 124 | - '</select>') | ||
| 125 | - if (d.sort != '' && d.sort != null) { | ||
| 126 | - selectDom.find('option:contains("是")').attr('selected', 'selected'); | ||
| 127 | - } else { | ||
| 128 | - selectDom.find('option:contains("否")').attr('selected', 'selected'); | ||
| 129 | - } | ||
| 130 | - return selectDom.prop('outerHTML'); | ||
| 131 | - } | ||
| 132 | - }, { | ||
| 133 | - field: 'sort', title: '列表顺序', align: 'center', | ||
| 134 | - templet: function (d) { | ||
| 135 | - var inputDom = $('<input id="txt-kpiflag-table-sort-' + d.LAY_TABLE_INDEX + '" data-index="' + d.LAY_TABLE_INDEX + '" type="number" autocomplete="off" class="layui-input txt-kpiflag-table-sort">'); | ||
| 136 | - if (d.sort != '' && d.sort != null) { | ||
| 137 | - inputDom.attr("value", d.sort); | ||
| 138 | - } else { | ||
| 139 | - inputDom.attr('disabled', true); | ||
| 140 | - } | ||
| 141 | - return inputDom.prop('outerHTML'); | ||
| 142 | - } | ||
| 143 | - }, { | ||
| 144 | - title: '操作', | ||
| 145 | - align: 'center', | ||
| 146 | - templet: '<div><span data-index="{{d.LAY_TABLE_INDEX}}" class="link link-kpiflag-delete">' + | ||
| 147 | - '<a class="layui-btn layui-btn-xs layui-btn-normal" title="删除"><i class="layui-icon"></i></a></span>' | ||
| 148 | - }]], | ||
| 149 | - done: function (res, curr, count) { | ||
| 150 | - form.render(); | ||
| 151 | - // 是否排序下拉框改变事件 | ||
| 152 | - form.on('select(select-kpiflag-table-isSort)', function (data) { | ||
| 153 | - var index = $(data.elem).data('index'); | ||
| 154 | - if (data.value === '是') { | ||
| 155 | - $('#txt-kpiflag-table-sort-' + index).attr('disabled', false); | ||
| 156 | - } else { | ||
| 157 | - kpiFlagTableData[index].sort = ''; | ||
| 158 | - $('#txt-kpiflag-table-sort-' + index).val(''); | ||
| 159 | - $('#txt-kpiflag-table-sort-' + index).attr('disabled', true); | ||
| 160 | - } | ||
| 161 | - }); | ||
| 162 | - // radio选择事件 | ||
| 163 | - form.on('radio(rdo-kpiflag-table-isUnique)', function (data) { | ||
| 164 | - for (var i = 0; i < kpiFlagTableData.length; i++) { | ||
| 165 | - kpiFlagTableData[i].isUnique = '0'; | ||
| 166 | - } | ||
| 167 | - kpiFlagTableData[$(data.elem).data('index')].isUnique = '1'; | ||
| 168 | - }); | ||
| 169 | - // 排序输入框输入事件 | ||
| 170 | - $('.txt-kpiflag-table-sort').change(function () { | ||
| 171 | - kpiFlagTableData[$(this).data('index')].sort = $(this).val(); | ||
| 172 | - }); | ||
| 173 | - // 删除事件 | ||
| 174 | - $('.link-kpiflag-delete').click(function () { | ||
| 175 | - kpiFlagTableData.splice($(this).data('index'), 1); | ||
| 176 | - reloadKpiFlagTable(); | ||
| 177 | - }); | ||
| 178 | - } | 158 | + $(".kpiflag-edit-table .layui-table-body,.kpiflag-edit-table .layui-table-box,.kpiflag-edit-table .layui-table-cell").css('overflow', 'visible'); |
| 159 | + // 排序下拉框改变事件 | ||
| 160 | + form.on('select(select-kpiflag-table-isSort)', function (data) { | ||
| 161 | + var index = $(data.elem).data('index'); | ||
| 162 | + var defaultSort = 'none'; | ||
| 163 | + if (data.value === '正序') { | ||
| 164 | + defaultSort = 'asc'; | ||
| 165 | + } else if (data.value === '倒序') { | ||
| 166 | + defaultSort = 'desc'; | ||
| 167 | + } | ||
| 168 | + kpiFlagTableData[index].defaultSort = defaultSort; | ||
| 179 | }); | 169 | }); |
| 180 | - // 资源类型绑定表格 | ||
| 181 | - var resTypeBindTable = table.render({ | ||
| 182 | - elem: '#table-flag-bind-retype' | ||
| 183 | - , cellMinWidth: 80 | ||
| 184 | - , limit: 9999 | ||
| 185 | - , even: true | ||
| 186 | - , data: resTypeTableData | ||
| 187 | - , page: { | ||
| 188 | - layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'], | ||
| 189 | - theme: '#1E9FFF' | ||
| 190 | - } | ||
| 191 | - , cols: [[{ | ||
| 192 | - field: 'resTypeName', title: '名称', align: 'center', sort: true, width: '280' | ||
| 193 | - }, { | ||
| 194 | - field: 'resTypeCode', title: '编码', align: 'center', sort: true, width: '390' | ||
| 195 | - }, { | ||
| 196 | - field: 'resTypeDesc', title: '类别', align: 'center', sort: true, width: '280' | ||
| 197 | - }, { | ||
| 198 | - field: 'createTime', title: '创建时间', align: 'center', sort: true, width: '275' | ||
| 199 | - }, { | ||
| 200 | - title: '操作', align: 'center', fixed: 'right', width: '170', | ||
| 201 | - toolbar: | ||
| 202 | - '<div>' + | ||
| 203 | - ' <span data-index="{{d.LAY_TABLE_INDEX}}" class="layui-btn layui-btn-xs layui-btn-normal btn-flag-bind-restype-delete" title="取消绑定">' + | ||
| 204 | - '<i class="layui-icon layui-icon-unlink"></i></span>' + | ||
| 205 | - '</div>' | ||
| 206 | - }]], | ||
| 207 | - done: function (res, curr, count) { | ||
| 208 | - $('.btn-flag-bind-restype-delete').click(function () { | ||
| 209 | - resTypeTableData.splice($(this).data('index'), 1); | ||
| 210 | - reloadResTypeTable(); | ||
| 211 | - }); | ||
| 212 | - } | 170 | + //唯一标志开关事件 |
| 171 | + form.on('switch(switchIsUnique)', function(data){ | ||
| 172 | + if (this.checked){ | ||
| 173 | + kpiFlagTableData[$(data.elem).data('index')].isUnique = '1'; | ||
| 174 | + }else{ | ||
| 175 | + kpiFlagTableData[$(data.elem).data('index')].isUnique = '0'; | ||
| 176 | + } | ||
| 213 | }); | 177 | }); |
| 214 | - | ||
| 215 | - // 应用绑定表格 | ||
| 216 | - var appBindTable = table.render({ | ||
| 217 | - elem: '#table-flag-bind-app' | ||
| 218 | - , cellMinWidth: 80 | ||
| 219 | - , limit: 9999 | ||
| 220 | - , even: true | ||
| 221 | - , data: [] | ||
| 222 | - , page: { | ||
| 223 | - layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'], | ||
| 224 | - theme: '#1E9FFF' | ||
| 225 | - } | ||
| 226 | - , cols: [[{ | ||
| 227 | - field: 'appCode', title: '应用编号', align: 'center', sort: true, width: '240' | ||
| 228 | - }, { | ||
| 229 | - field: 'appName', title: '应用名称', align: 'center', sort: true, width: '240' | ||
| 230 | - }, { | ||
| 231 | - field: 'busTypeName', title: '所属业务', align: 'center', sort: true, width: '193', | ||
| 232 | - templet: function (d) { | ||
| 233 | - return d.busType.busTypeName; | ||
| 234 | - } | ||
| 235 | - }, { | ||
| 236 | - field: 'appDesc', title: '应用描述', align: 'center', sort: true, width: '340' | ||
| 237 | - }, { | ||
| 238 | - field: 'createTime', title: '创建时间', align: 'center', sort: true, width: '190' | ||
| 239 | - }, { | ||
| 240 | - title: '操作', align: 'center', fixed: 'right', width: '190', | ||
| 241 | - toolbar: | ||
| 242 | - '<div>' + | ||
| 243 | - ' <span data-index="{{d.LAY_TABLE_INDEX}}" class="layui-btn layui-btn-xs layui-btn-normal btn-flag-bind-app-delete" title="取消绑定">' + | ||
| 244 | - '<i class="layui-icon layui-icon-unlink"></i></span>' + | ||
| 245 | - '</div>' | ||
| 246 | - }]], | ||
| 247 | - done: function (res, curr, count) { | ||
| 248 | - $('.btn-flag-bind-app-delete').click(function () { | ||
| 249 | - appTableData.splice($(this).data('index'), 1); | ||
| 250 | - reloadAppTable(); | ||
| 251 | - }); | ||
| 252 | - } | 178 | + // 排序输入框输入事件 |
| 179 | + $('.txt-kpiflag-table-sort').change(function () { | ||
| 180 | + kpiFlagTableData[$(this).data('index')].sort = $(this).val(); | ||
| 253 | }); | 181 | }); |
| 254 | - | ||
| 255 | - // 服务绑定表格 | ||
| 256 | - var serverBindTable = table.render({ | ||
| 257 | - elem: '#table-flag-bind-server' | ||
| 258 | - , cellMinWidth: 80 | ||
| 259 | - , limit: 9999 | ||
| 260 | - , even: true | ||
| 261 | - , data: [] | ||
| 262 | - , page: { | ||
| 263 | - layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'], | ||
| 264 | - theme: '#1E9FFF' | ||
| 265 | - } | ||
| 266 | - , cols: [[{ | ||
| 267 | - field: 'serverCode', title: '服务编号', align: 'center', sort: true, width: '190' | ||
| 268 | - }, { | ||
| 269 | - field: 'serverName', title: '服务名称', align: 'center', sort: true, width: '190' | ||
| 270 | - }, { | ||
| 271 | - field: 'busTypeName', title: '所属业务', align: 'center', sort: true, width: '190', | ||
| 272 | - templet: function (d) { | ||
| 273 | - return d.application.busType.busTypeName; | ||
| 274 | - } | ||
| 275 | - }, { | ||
| 276 | - field: 'appName', title: '所属应用', align: 'center', sort: true, width: '190', | ||
| 277 | - templet: function (d) { | ||
| 278 | - return d.application.appName; | ||
| 279 | - } | ||
| 280 | - }, { | ||
| 281 | - field: 'serverDesc', title: '服务描述', align: 'center', sort: true, width: '300' | ||
| 282 | - }, { | ||
| 283 | - field: 'createTime', title: '创建时间', align: 'center', sort: true, width: '160' | ||
| 284 | - }, { | ||
| 285 | - title: '操作', align: 'center', fixed: 'right', width: '173', | ||
| 286 | - toolbar: | ||
| 287 | - '<div>' + | ||
| 288 | - ' <span data-index="{{d.LAY_TABLE_INDEX}}" class="layui-btn layui-btn-xs layui-btn-normal btn-flag-bind-server-delete" title="取消绑定">' + | ||
| 289 | - '<i class="layui-icon layui-icon-unlink"></i></span>' + | ||
| 290 | - '</div>' | ||
| 291 | - }]], | ||
| 292 | - done: function (res, curr, count) { | ||
| 293 | - $('.btn-flag-bind-server-delete').click(function () { | ||
| 294 | - serverTableData.splice($(this).data('index'), 1); | ||
| 295 | - reloadServerTable(); | ||
| 296 | - }); | ||
| 297 | - } | 182 | + // 删除事件 |
| 183 | + $('.link-kpiflag-delete').click(function () { | ||
| 184 | + kpiFlagTableData.splice($(this).data('index'), 1); | ||
| 185 | + reloadKpiFlagTable(); | ||
| 298 | }); | 186 | }); |
| 299 | - | ||
| 300 | - // 绑定资源类型 | ||
| 301 | - $('#btn-kpi-flag-restype-bind').click(function () { | ||
| 302 | - //先关闭已经打开的资源类型页签 | ||
| 303 | - $('[lay-id="/baseconfig/resourcetype/index"]').find('.layui-tab-close').trigger('click'); | ||
| 304 | - var resourcetype = layui.resourcetype(); | ||
| 305 | - common.openWin('/baseconfig/resourcetype/index', '选择资源类型', {}, ['选择', '取消'], function () { | ||
| 306 | - var checks = resourcetype.getResTypeChecks(); | ||
| 307 | - $.each(checks, function (index, value) { | ||
| 308 | - var flag = true; | ||
| 309 | - $.each(resTypeTableData, function (i, v) { | ||
| 310 | - if (value.resTypeId === v.resTypeId) { | ||
| 311 | - flag = false; | ||
| 312 | - return; | ||
| 313 | - } | ||
| 314 | - }); | ||
| 315 | - if (flag) { | ||
| 316 | - resTypeTableData.push(value); | ||
| 317 | - } | ||
| 318 | - }); | ||
| 319 | - reloadResTypeTable(); | ||
| 320 | - return true; | ||
| 321 | - }, null, ['90%', '90%']) | 187 | + } |
| 188 | + }); | ||
| 189 | + // 资源类型绑定表格 | ||
| 190 | + var resTypeBindTable = table.render({ | ||
| 191 | + elem: '#table-flag-bind-retype' | ||
| 192 | + , cellMinWidth: 80 | ||
| 193 | + , limit: 9999 | ||
| 194 | + , even: true | ||
| 195 | + , data: resTypeTableData | ||
| 196 | + , page: { | ||
| 197 | + layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'], | ||
| 198 | + theme: '#1E9FFF' | ||
| 199 | + } | ||
| 200 | + , cols: [[{ | ||
| 201 | + field: 'resTypeName', title: '名称', align: 'center', sort: true | ||
| 202 | + }, { | ||
| 203 | + field: 'resTypeCode', title: '编码', align: 'center', sort: true | ||
| 204 | + }, { | ||
| 205 | + field: 'resTypeDesc', title: '类别', align: 'center', sort: true | ||
| 206 | + },{field: 'createUser', title: '创建人', align: 'center' | ||
| 207 | + }, { | ||
| 208 | + field: 'createTime', title: '创建时间', align: 'center' | ||
| 209 | + }, { | ||
| 210 | + title: '操作', align: 'center', fixed: 'right', width: '170', | ||
| 211 | + toolbar: | ||
| 212 | + '<div>' + | ||
| 213 | + ' <span data-index="{{d.LAY_TABLE_INDEX}}" class="layui-btn layui-btn-xs layui-btn-normal btn-flag-bind-restype-delete" title="取消绑定">' + | ||
| 214 | + '<i class="layui-icon layui-icon-unlink"></i></span>' + | ||
| 215 | + '</div>' | ||
| 216 | + }]], | ||
| 217 | + done: function (res, curr, count) { | ||
| 218 | + $('.btn-flag-bind-restype-delete').click(function () { | ||
| 219 | + resTypeTableData.splice($(this).data('index'), 1); | ||
| 220 | + reloadResTypeTable(); | ||
| 322 | }); | 221 | }); |
| 222 | + } | ||
| 223 | + }); | ||
| 323 | 224 | ||
| 324 | - // 绑定应用 | ||
| 325 | - $('#btn-kpi-flag-app-bind').click(function () { | ||
| 326 | - //先关闭已经打开的应用页签 | ||
| 327 | - $('[lay-id="/baseconfig/application/index"]').find('.layui-tab-close').trigger('click'); | ||
| 328 | - common.openWin('/baseconfig/application/index', '选择应用', {}, ['选择', '取消'], function () { | ||
| 329 | - var checks = table.checkStatus('application-table').data; | ||
| 330 | - $.each(checks, function (index, value) { | ||
| 331 | - var flag = true; | ||
| 332 | - $.each(appTableData, function (i, v) { | ||
| 333 | - if (value.appId === v.appId) { | ||
| 334 | - flag = false; | ||
| 335 | - return; | ||
| 336 | - } | ||
| 337 | - }); | ||
| 338 | - if (flag) { | ||
| 339 | - appTableData.push(value); | ||
| 340 | - } | ||
| 341 | - }); | ||
| 342 | - reloadAppTable(); | ||
| 343 | - return true; | ||
| 344 | - }, null, ['1500px', '90%']) | 225 | + // 应用绑定表格 |
| 226 | + var appBindTable = table.render({ | ||
| 227 | + elem: '#table-flag-bind-app' | ||
| 228 | + , cellMinWidth: 80 | ||
| 229 | + , limit: 9999 | ||
| 230 | + , even: true | ||
| 231 | + , data: [] | ||
| 232 | + , page: { | ||
| 233 | + layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'], | ||
| 234 | + theme: '#1E9FFF' | ||
| 235 | + } | ||
| 236 | + , cols: [[{ | ||
| 237 | + field: 'appCode', title: '应用编号', align: 'center', sort: true, width: '240' | ||
| 238 | + }, { | ||
| 239 | + field: 'appName', title: '应用名称', align: 'center', sort: true, width: '240' | ||
| 240 | + }, { | ||
| 241 | + field: 'busTypeName', title: '所属业务', align: 'center', sort: true, width: '193', | ||
| 242 | + templet: function (d) { | ||
| 243 | + return d.busType.busTypeName; | ||
| 244 | + } | ||
| 245 | + }, { | ||
| 246 | + field: 'appDesc', title: '应用描述', align: 'center', sort: true, width: '340' | ||
| 247 | + }, { | ||
| 248 | + field: 'createTime', title: '创建时间', align: 'center', sort: true, width: '190' | ||
| 249 | + }, { | ||
| 250 | + title: '操作', align: 'center', fixed: 'right', width: '190', | ||
| 251 | + toolbar: | ||
| 252 | + '<div>' + | ||
| 253 | + ' <span data-index="{{d.LAY_TABLE_INDEX}}" class="layui-btn layui-btn-xs layui-btn-normal btn-flag-bind-app-delete" title="取消绑定">' + | ||
| 254 | + '<i class="layui-icon layui-icon-unlink"></i></span>' + | ||
| 255 | + '</div>' | ||
| 256 | + }]], | ||
| 257 | + done: function (res, curr, count) { | ||
| 258 | + $('.btn-flag-bind-app-delete').click(function () { | ||
| 259 | + appTableData.splice($(this).data('index'), 1); | ||
| 260 | + reloadAppTable(); | ||
| 345 | }); | 261 | }); |
| 262 | + } | ||
| 263 | + }); | ||
| 264 | + | ||
| 265 | + // 服务绑定表格 | ||
| 266 | + var serverBindTable = table.render({ | ||
| 267 | + elem: '#table-flag-bind-server' | ||
| 268 | + , cellMinWidth: 80 | ||
| 269 | + , limit: 9999 | ||
| 270 | + , even: true | ||
| 271 | + , data: [] | ||
| 272 | + , page: { | ||
| 273 | + layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'], | ||
| 274 | + theme: '#1E9FFF' | ||
| 275 | + } | ||
| 276 | + , cols: [[{ | ||
| 277 | + field: 'serverCode', title: '服务编号', align: 'center', sort: true, width: '190' | ||
| 278 | + }, { | ||
| 279 | + field: 'serverName', title: '服务名称', align: 'center', sort: true, width: '190' | ||
| 280 | + }, { | ||
| 281 | + field: 'busTypeName', title: '所属业务', align: 'center', sort: true, width: '190', | ||
| 282 | + templet: function (d) { | ||
| 283 | + return d.application.busType.busTypeName; | ||
| 284 | + } | ||
| 285 | + }, { | ||
| 286 | + field: 'appName', title: '所属应用', align: 'center', sort: true, width: '190', | ||
| 287 | + templet: function (d) { | ||
| 288 | + return d.application.appName; | ||
| 289 | + } | ||
| 290 | + }, { | ||
| 291 | + field: 'serverDesc', title: '服务描述', align: 'center', sort: true, width: '300' | ||
| 292 | + }, { | ||
| 293 | + field: 'createTime', title: '创建时间', align: 'center', sort: true, width: '160' | ||
| 294 | + }, { | ||
| 295 | + title: '操作', align: 'center', fixed: 'right', width: '173', | ||
| 296 | + toolbar: | ||
| 297 | + '<div>' + | ||
| 298 | + ' <span data-index="{{d.LAY_TABLE_INDEX}}" class="layui-btn layui-btn-xs layui-btn-normal btn-flag-bind-server-delete" title="取消绑定">' + | ||
| 299 | + '<i class="layui-icon layui-icon-unlink"></i></span>' + | ||
| 300 | + '</div>' | ||
| 301 | + }]], | ||
| 302 | + done: function (res, curr, count) { | ||
| 303 | + $('.btn-flag-bind-server-delete').click(function () { | ||
| 304 | + serverTableData.splice($(this).data('index'), 1); | ||
| 305 | + reloadServerTable(); | ||
| 306 | + }); | ||
| 307 | + } | ||
| 308 | + }); | ||
| 346 | 309 | ||
| 347 | - // 绑定服务 | ||
| 348 | - $('#btn-kpi-flag-server-bind').click(function () { | ||
| 349 | - //先关闭已经打开的应用页签 | ||
| 350 | - $('[lay-id="/baseconfig/server/index"]').find('.layui-tab-close').trigger('click'); | ||
| 351 | - common.openWin('/baseconfig/server/index', '选择服务', {}, ['选择', '取消'], function () { | ||
| 352 | - var checks = table.checkStatus('server-table').data; | ||
| 353 | - $.each(checks, function (index, value) { | ||
| 354 | - var flag = true; | ||
| 355 | - $.each(serverTableData, function (i, v) { | ||
| 356 | - if (value.serverId === v.serverId) { | ||
| 357 | - flag = false; | ||
| 358 | - return; | ||
| 359 | - } | ||
| 360 | - }); | ||
| 361 | - if (flag) { | ||
| 362 | - serverTableData.push(value); | ||
| 363 | - } | ||
| 364 | - }); | ||
| 365 | - reloadServerTable(); | ||
| 366 | - return true; | ||
| 367 | - }, null, ['1500px', '90%']) | 310 | + // 绑定资源类型 |
| 311 | + $('#btn-kpi-flag-restype-bind').click(function () { | ||
| 312 | + //先关闭已经打开的资源类型页签 | ||
| 313 | + $('[lay-id="/baseconfig/resourcetype/index"]').find('.layui-tab-close').trigger('click'); | ||
| 314 | + var resourcetype = layui.resourcetype(); | ||
| 315 | + common.openWin('/baseconfig/resourcetype/index', '选择资源类型', {}, ['选择', '取消'], function () { | ||
| 316 | + var checks = resourcetype.getResTypeChecks(); | ||
| 317 | + $.each(checks, function (index, value) { | ||
| 318 | + var flag = true; | ||
| 319 | + $.each(resTypeTableData, function (i, v) { | ||
| 320 | + if (value.resTypeId === v.resTypeId) { | ||
| 321 | + flag = false; | ||
| 322 | + return; | ||
| 323 | + } | ||
| 324 | + }); | ||
| 325 | + if (flag) { | ||
| 326 | + // value.createUser = form.val('form-flag-edit').createUser; | ||
| 327 | + // value.createTime = common.getToday(''); | ||
| 328 | + resTypeTableData.push(value); | ||
| 329 | + } | ||
| 330 | + }); | ||
| 331 | + reloadResTypeTable(); | ||
| 332 | + return true; | ||
| 333 | + }, null, ['90%', '90%']) | ||
| 334 | + }); | ||
| 335 | + | ||
| 336 | + // 绑定应用 | ||
| 337 | + $('#btn-kpi-flag-app-bind').click(function () { | ||
| 338 | + //先关闭已经打开的应用页签 | ||
| 339 | + $('[lay-id="/baseconfig/application/index"]').find('.layui-tab-close').trigger('click'); | ||
| 340 | + common.openWin('/baseconfig/application/index', '选择应用', {}, ['选择', '取消'], function () { | ||
| 341 | + var checks = table.checkStatus('application-table').data; | ||
| 342 | + $.each(checks, function (index, value) { | ||
| 343 | + var flag = true; | ||
| 344 | + $.each(appTableData, function (i, v) { | ||
| 345 | + if (value.appId === v.appId) { | ||
| 346 | + flag = false; | ||
| 347 | + return; | ||
| 348 | + } | ||
| 349 | + }); | ||
| 350 | + if (flag) { | ||
| 351 | + appTableData.push(value); | ||
| 352 | + } | ||
| 353 | + }); | ||
| 354 | + reloadAppTable(); | ||
| 355 | + return true; | ||
| 356 | + }, null, ['1500px', '90%']) | ||
| 357 | + }); | ||
| 358 | + | ||
| 359 | + // 绑定服务 | ||
| 360 | + $('#btn-kpi-flag-server-bind').click(function () { | ||
| 361 | + //先关闭已经打开的应用页签 | ||
| 362 | + $('[lay-id="/baseconfig/server/index"]').find('.layui-tab-close').trigger('click'); | ||
| 363 | + common.openWin('/baseconfig/server/index', '选择服务', {}, ['选择', '取消'], function () { | ||
| 364 | + var checks = table.checkStatus('server-table').data; | ||
| 365 | + $.each(checks, function (index, value) { | ||
| 366 | + var flag = true; | ||
| 367 | + $.each(serverTableData, function (i, v) { | ||
| 368 | + if (value.serverId === v.serverId) { | ||
| 369 | + flag = false; | ||
| 370 | + return; | ||
| 371 | + } | ||
| 372 | + }); | ||
| 373 | + if (flag) { | ||
| 374 | + serverTableData.push(value); | ||
| 375 | + } | ||
| 368 | }); | 376 | }); |
| 377 | + reloadServerTable(); | ||
| 378 | + return true; | ||
| 379 | + }, null, ['1500px', '90%']) | ||
| 380 | + }); | ||
| 369 | 381 | ||
| 370 | - // 刷新指标表格 | ||
| 371 | - function reloadKpiFlagTable() { | ||
| 372 | - kpiflagTable.reload({ | ||
| 373 | - page: {curr: 1}, | ||
| 374 | - data: kpiFlagTableData | ||
| 375 | - }); | ||
| 376 | - } | 382 | + // 刷新指标表格 |
| 383 | + function reloadKpiFlagTable() { | ||
| 384 | + kpiflagTable.reload({ | ||
| 385 | + page: {curr: 1}, | ||
| 386 | + data: kpiFlagTableData | ||
| 387 | + }); | ||
| 388 | + } | ||
| 377 | 389 | ||
| 378 | - // 刷新绑定资源类型表格 | ||
| 379 | - function reloadResTypeTable() { | ||
| 380 | - $('#txt-flag-bind-resTypeCount').html(resTypeTableData.length); | ||
| 381 | - resTypeBindTable.reload({ | ||
| 382 | - page: {curr: 1}, | ||
| 383 | - data: resTypeTableData | ||
| 384 | - }); | ||
| 385 | - } | 390 | + // 刷新绑定资源类型表格 |
| 391 | + function reloadResTypeTable() { | ||
| 392 | + $('#txt-flag-bind-resTypeCount').html(resTypeTableData.length); | ||
| 393 | + resTypeBindTable.reload({ | ||
| 394 | + page: {curr: 1}, | ||
| 395 | + data: resTypeTableData | ||
| 396 | + }); | ||
| 397 | + } | ||
| 398 | + | ||
| 399 | + // 刷新绑定应用表格 | ||
| 400 | + function reloadAppTable() { | ||
| 401 | + $('#txt-flag-bind-appCount').html(appTableData.length); | ||
| 402 | + appBindTable.reload({ | ||
| 403 | + page: {curr: 1}, | ||
| 404 | + data: appTableData | ||
| 405 | + }); | ||
| 406 | + } | ||
| 407 | + | ||
| 408 | + // 刷新绑定服务表格 | ||
| 409 | + function reloadServerTable() { | ||
| 410 | + $('#txt-flag-bind-serverCount').html(serverTableData.length); | ||
| 411 | + serverBindTable.reload({ | ||
| 412 | + page: {curr: 1}, | ||
| 413 | + data: serverTableData | ||
| 414 | + }); | ||
| 415 | + } | ||
| 386 | 416 | ||
| 387 | - // 刷新绑定应用表格 | ||
| 388 | - function reloadAppTable() { | ||
| 389 | - $('#txt-flag-bind-appCount').html(appTableData.length); | ||
| 390 | - appBindTable.reload({ | ||
| 391 | - page: {curr: 1}, | ||
| 392 | - data: appTableData | ||
| 393 | - }); | 417 | + // 表单提交事件 |
| 418 | + form.on('submit(form-flag-edit)', function (data) { | ||
| 419 | + loading = layer.load(2); | ||
| 420 | + var flag = { | ||
| 421 | + id: flagId, | ||
| 422 | + flag: '', | ||
| 423 | + name: '', | ||
| 424 | + remark: '', | ||
| 425 | + dimension: '', | ||
| 426 | + kpiFlagList: kpiFlagTableData, | ||
| 427 | + bindList: [] | ||
| 428 | + }; | ||
| 429 | + $.each(resTypeTableData, function (i, v) { | ||
| 430 | + flag.bindList.push({ | ||
| 431 | + id: '', | ||
| 432 | + flagId: '', | ||
| 433 | + bindId: v.resTypeId, | ||
| 434 | + bindType: '1', | ||
| 435 | + bindCode: v.resTypeCode | ||
| 436 | + }); | ||
| 437 | + }); | ||
| 438 | + $.each(appTableData, function (i, v) { | ||
| 439 | + flag.bindList.push({ | ||
| 440 | + id: '', | ||
| 441 | + flagId: '', | ||
| 442 | + bindId: v.appId, | ||
| 443 | + bindType: '2' | ||
| 444 | + }); | ||
| 445 | + }); | ||
| 446 | + $.each(serverTableData, function (i, v) { | ||
| 447 | + flag.bindList.push({ | ||
| 448 | + id: '', | ||
| 449 | + flagId: '', | ||
| 450 | + bindId: v.serverId, | ||
| 451 | + bindType: '3' | ||
| 452 | + }); | ||
| 453 | + }); | ||
| 454 | + Object.assign(flag, form.val('form-flag-edit')); | ||
| 455 | + admin.req({ | ||
| 456 | + url: common.domainName + '/api-web/manage/Kpiflag/saveFlag?access_token=' + accessToken, | ||
| 457 | + type: 'POST', | ||
| 458 | + contentType: 'application/json', | ||
| 459 | + data: JSON.stringify(flag), | ||
| 460 | + error: function () { | ||
| 461 | + layer.close(loading); | ||
| 394 | } | 462 | } |
| 395 | - | ||
| 396 | - // 刷新绑定服务表格 | ||
| 397 | - function reloadServerTable() { | ||
| 398 | - $('#txt-flag-bind-serverCount').html(serverTableData.length); | ||
| 399 | - serverBindTable.reload({ | ||
| 400 | - page: {curr: 1}, | ||
| 401 | - data: serverTableData | ||
| 402 | - }); | 463 | + }).done(function (response) { |
| 464 | + layer.close(loading); | ||
| 465 | + if (response.success) { | ||
| 466 | + layer.msg('保存成功', {icon: 1, timeout: 3000}); | ||
| 467 | + layer.closeAll('page'); | ||
| 468 | + table.reload('kpiflag_table', { | ||
| 469 | + page: { | ||
| 470 | + curr: 1 | ||
| 471 | + } | ||
| 472 | + , where: { | ||
| 473 | + access_token: accessToken, | ||
| 474 | + keyWord: $("#kpiflag_keyword").val(), | ||
| 475 | + dimension: $('select[name="dimension"]').val() | ||
| 476 | + } | ||
| 477 | + }); | ||
| 478 | + } else { | ||
| 479 | + layer.msg('保存失败', {icon: 2, timeout: 3000}); | ||
| 403 | } | 480 | } |
| 481 | + }); | ||
| 482 | + return false; | ||
| 483 | + }); | ||
| 404 | 484 | ||
| 405 | - // 表单提交事件 | ||
| 406 | - form.on('submit(form-flag-edit)', function (data) { | ||
| 407 | - loading = layer.load(2); | ||
| 408 | - var flag = { | ||
| 409 | - id: flagId, | ||
| 410 | - flag: '', | ||
| 411 | - name: '', | ||
| 412 | - remark: '', | ||
| 413 | - kpiFlagList: kpiFlagTableData, | ||
| 414 | - bindList: [] | ||
| 415 | - }; | ||
| 416 | - $.each(resTypeTableData, function (i, v) { | ||
| 417 | - flag.bindList.push({ | ||
| 418 | - id: '', | ||
| 419 | - flagId: '', | ||
| 420 | - bindId: v.resTypeId, | ||
| 421 | - bindType: '1' | ||
| 422 | - }); | ||
| 423 | - }); | ||
| 424 | - $.each(appTableData, function (i, v) { | ||
| 425 | - flag.bindList.push({ | ||
| 426 | - id: '', | ||
| 427 | - flagId: '', | ||
| 428 | - bindId: v.appId, | ||
| 429 | - bindType: '2' | ||
| 430 | - }); | ||
| 431 | - }); | ||
| 432 | - $.each(serverTableData, function (i, v) { | ||
| 433 | - flag.bindList.push({ | ||
| 434 | - id: '', | ||
| 435 | - flagId: '', | ||
| 436 | - bindId: v.serverId, | ||
| 437 | - bindType: '3' | ||
| 438 | - }); | ||
| 439 | - }); | ||
| 440 | - Object.assign(flag, form.val('form-flag-edit')); | ||
| 441 | - admin.req({ | ||
| 442 | - url: common.domainName + '/api-web/manage/Kpiflag/saveFlag?access_token=' + accessToken, | ||
| 443 | - type: 'POST', | ||
| 444 | - contentType: 'application/json', | ||
| 445 | - data: JSON.stringify(flag), | ||
| 446 | - error: function () { | ||
| 447 | - layer.close(loading); | ||
| 448 | - } | ||
| 449 | - }).done(function (response) { | ||
| 450 | - layer.close(loading); | ||
| 451 | - if (response.success) { | ||
| 452 | - layer.msg('保存成功', {icon: 1, timeout: 3000}); | ||
| 453 | - layer.closeAll('page'); | ||
| 454 | - table.reload('kpiflag_table', { | ||
| 455 | - page: { | ||
| 456 | - curr: 1 | ||
| 457 | - } | ||
| 458 | - , where: { | ||
| 459 | - access_token: accessToken, | ||
| 460 | - keyWord: $("#kpiflag_keyword").val(), | ||
| 461 | - } | ||
| 462 | - }); | ||
| 463 | - } else { | ||
| 464 | - layer.msg('保存失败', {icon: 2, timeout: 3000}); | 485 | + // 选择指标 |
| 486 | + $('#btn-kpiflag-kpi-bind').click(function () { | ||
| 487 | + $('[lay-id="/baseconfig/kpi/index"]').find('.layui-tab-close').trigger('click'); | ||
| 488 | + layer.open({ | ||
| 489 | + title: '选择指标', | ||
| 490 | + id: 'kpiIndexChooseHtml', | ||
| 491 | + type: 1, | ||
| 492 | + area: ['90%', '800px'], | ||
| 493 | + btn: ['确定', '取消'], | ||
| 494 | + scrollbar: true, | ||
| 495 | + success: function () { | ||
| 496 | + view(this.id).render('/baseconfig/kpi/index', {}); | ||
| 497 | + }, | ||
| 498 | + yes: function (index, layero) { | ||
| 499 | + var kpiIndex = layui.kpiIndex({}); | ||
| 500 | + var data = kpiIndex.getData(); | ||
| 501 | + if (data.length > 0) { | ||
| 502 | + $.each(data, function (i, e) { | ||
| 503 | + var flag = true; | ||
| 504 | + $.each(kpiFlagTableData, function (j, k) { | ||
| 505 | + if (e.kpiId == k.kpiId) { | ||
| 506 | + flag = false; | ||
| 465 | } | 507 | } |
| 508 | + }); | ||
| 509 | + if (flag == true) { | ||
| 510 | + kpiFlagTableData.push({ | ||
| 511 | + id: '', | ||
| 512 | + flagId: flagId, | ||
| 513 | + kpiId: e.kpiId, | ||
| 514 | + defaultSort: e.defaultSort, | ||
| 515 | + kpi: { | ||
| 516 | + kpiId: e.kpiId, | ||
| 517 | + kpiName: e.kpiName, | ||
| 518 | + kpiIdent: e.kpiIdent | ||
| 519 | + }, | ||
| 520 | + isUnique: '0', | ||
| 521 | + sort: kpiFlagTableData.length+1, | ||
| 522 | + createUser: form.val('form-flag-edit').createUser, | ||
| 523 | + createTime: common.getToday('') | ||
| 524 | + }); | ||
| 525 | + } | ||
| 466 | }); | 526 | }); |
| 527 | + layer.close(index); | ||
| 528 | + reloadKpiFlagTable(); | ||
| 529 | + } else { | ||
| 530 | + layer.msg("无选中的数据", {offset: '15px', icon: 7, time: 2000}) | ||
| 467 | return false; | 531 | return false; |
| 468 | - }); | ||
| 469 | - | ||
| 470 | - // 选择指标 | ||
| 471 | - $('#btn-kpiflag-kpi-bind').click(function () { | ||
| 472 | - $('[lay-id="/baseconfig/kpi/index"]').find('.layui-tab-close').trigger('click'); | ||
| 473 | - layer.open({ | ||
| 474 | - title: '选择指标', | ||
| 475 | - id: 'kpiIndexChooseHtml', | ||
| 476 | - type: 1, | ||
| 477 | - area: ['90%', '800px'], | ||
| 478 | - btn: ['确定', '取消'], | ||
| 479 | - scrollbar: true, | ||
| 480 | - success: function () { | ||
| 481 | - view(this.id).render('/baseconfig/kpi/index', {}); | ||
| 482 | - }, | ||
| 483 | - yes: function (index, layero) { | ||
| 484 | - var kpiIndex = layui.kpiIndex({}); | ||
| 485 | - var data = kpiIndex.getData(); | ||
| 486 | - if (data.length > 0) { | ||
| 487 | - $.each(data, function (i, e) { | ||
| 488 | - var flag = true; | ||
| 489 | - $.each(kpiFlagTableData, function (j, k) { | ||
| 490 | - if (e.kpiId == k.kpiId) { | ||
| 491 | - flag = false; | ||
| 492 | - } | ||
| 493 | - }); | ||
| 494 | - if (flag == true) { | ||
| 495 | - kpiFlagTableData.push({ | ||
| 496 | - id: '', | ||
| 497 | - flagId: flagId, | ||
| 498 | - kpiId: e.kpiId, | ||
| 499 | - kpi: { | ||
| 500 | - kpiId: e.kpiId, | ||
| 501 | - kpiName: e.kpiName, | ||
| 502 | - kpiIdent: e.kpiIdent | ||
| 503 | - }, | ||
| 504 | - isUnique: '0', | ||
| 505 | - sort: '' | ||
| 506 | - }); | ||
| 507 | - } | ||
| 508 | - }); | ||
| 509 | - layer.close(index); | ||
| 510 | - reloadKpiFlagTable(); | ||
| 511 | - } else { | ||
| 512 | - layer.msg("无选中的数据", {offset: '15px', icon: 7, time: 2000}) | ||
| 513 | - return false; | ||
| 514 | - } | ||
| 515 | - } | ||
| 516 | - }); | ||
| 517 | - form.render(); | ||
| 518 | - }); | 532 | + } |
| 533 | + } | ||
| 534 | + }); | ||
| 535 | + form.render(); | ||
| 519 | }); | 536 | }); |
| 520 | -}); | 537 | + }); |
| 538 | +}); |
| 1 | -layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', "commonDetail"], function (exports) { | 1 | +layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', "commonDetail", 'xmSelect'], function (exports) { |
| 2 | var $ = layui.$; | 2 | var $ = layui.$; |
| 3 | var form = layui.form; | 3 | var form = layui.form; |
| 4 | var layer = layui.layer; | 4 | var layer = layui.layer; |
| 5 | var admin = layui.admin; | 5 | var admin = layui.admin; |
| 6 | var table = layui.table; | 6 | var table = layui.table; |
| 7 | + var xmSelect = layui.xmSelect; | ||
| 7 | var common = layui.common; | 8 | var common = layui.common; |
| 8 | var domainName = common.domainName; | 9 | var domainName = common.domainName; |
| 9 | 10 | ||
| @@ -13,12 +14,38 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', "commonDe | @@ -13,12 +14,38 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', "commonDe | ||
| 13 | var accessToken = sessions.getToken()['access_token']; | 14 | var accessToken = sessions.getToken()['access_token']; |
| 14 | var checkList = common.checkPermission(accessToken); | 15 | var checkList = common.checkPermission(accessToken); |
| 15 | 16 | ||
| 17 | + form.render(); | ||
| 18 | + | ||
| 16 | //回车事件 | 19 | //回车事件 |
| 17 | $('#kpiflag_keyword').keydown(function (e) { | 20 | $('#kpiflag_keyword').keydown(function (e) { |
| 18 | if (e.keyCode === 13) { | 21 | if (e.keyCode === 13) { |
| 19 | reloadTable(); | 22 | reloadTable(); |
| 20 | } | 23 | } |
| 21 | }); | 24 | }); |
| 25 | + //回车事件 | ||
| 26 | + $('#kpiflag_describe').keydown(function (e) { | ||
| 27 | + if (e.keyCode === 13) { | ||
| 28 | + reloadTable(); | ||
| 29 | + } | ||
| 30 | + }); | ||
| 31 | + //回车事件 | ||
| 32 | + $('#kpiflag_kpis').keydown(function (e) { | ||
| 33 | + if (e.keyCode === 13) { | ||
| 34 | + reloadTable(); | ||
| 35 | + } | ||
| 36 | + }); | ||
| 37 | + //回车事件 | ||
| 38 | + $('#kpiflag_restypes').keydown(function (e) { | ||
| 39 | + if (e.keyCode === 13) { | ||
| 40 | + reloadTable(); | ||
| 41 | + } | ||
| 42 | + }); | ||
| 43 | + $("#kpiflagQueryBtn").unbind().on("click", function () { | ||
| 44 | + reloadTable(); | ||
| 45 | + }) | ||
| 46 | + form.on('select(change)', function (data) { | ||
| 47 | + reloadTable(); | ||
| 48 | + }) | ||
| 22 | $("#addkpiflag").unbind().on("click", function () { | 49 | $("#addkpiflag").unbind().on("click", function () { |
| 23 | if ($.inArray('back:kpiflag:save', checkList) == -1) { | 50 | if ($.inArray('back:kpiflag:save', checkList) == -1) { |
| 24 | layer.msg('暂无权限!', {icon: 7, time: 3000}); | 51 | layer.msg('暂无权限!', {icon: 7, time: 3000}); |
| @@ -44,29 +71,54 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', "commonDe | @@ -44,29 +71,54 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', "commonDe | ||
| 44 | , where: { | 71 | , where: { |
| 45 | access_token: accessToken, | 72 | access_token: accessToken, |
| 46 | keyWord: $("#kpiflag_keyword").val(), | 73 | keyWord: $("#kpiflag_keyword").val(), |
| 74 | + describe: $("#kpiflag_describe").val(), | ||
| 75 | + kpis: $("#kpiflag_kpis").val(), | ||
| 76 | + restypes: $("#kpiflag_restypes").val(), | ||
| 77 | + dimension: $('select[name="dimension"]').val() | ||
| 47 | } | 78 | } |
| 48 | - , height: 'full-340' | 79 | + , height: 'full-200' |
| 49 | , cellMinWidth: 80 | 80 | , cellMinWidth: 80 |
| 50 | , page: { | 81 | , page: { |
| 51 | layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'] | 82 | layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'] |
| 52 | , theme: '#1E9FFF' | 83 | , theme: '#1E9FFF' |
| 53 | } | 84 | } |
| 54 | - , limit: 10 | ||
| 55 | , even: true | 85 | , even: true |
| 56 | , cols: [[ | 86 | , cols: [[ |
| 57 | {type: 'checkbox'} | 87 | {type: 'checkbox'} |
| 88 | + , {field: 'index', title: '序号', align: 'center', type: 'numbers'} | ||
| 58 | , { | 89 | , { |
| 59 | - field: 'name', title: '名称', align: 'center', sort: true, | ||
| 60 | - templet: '<div><span kpiflag-data-edit="{{d.id}}" data-flag="{{d.flag}}" class="layui-table-link">{{d.name}}</span></div>' | 90 | + field: 'name', title: '名称', align: 'center', sort: true,width: 200, |
| 91 | + templet: '<div>' + | ||
| 92 | + '<span kpiflag-data-edit="{{d.id}}" data-flag="{{d.flag}}" class="layui-table-link">{{d.name}}</span>' + | ||
| 93 | + '</div>' | ||
| 94 | + } | ||
| 95 | + , {field: 'flag', title: '标识', align: 'center', sort: true,width: 200} | ||
| 96 | + , {field: 'describes', title: '指标组描述', align: 'left',width: 300} | ||
| 97 | + , { field: 'dimension', title: '维度', align: 'center', width: 80, templet: ` | ||
| 98 | + <div> | ||
| 99 | + {{# | ||
| 100 | + if (d.dimension == '1D') { | ||
| 101 | + }} <span>一维</span> {{# | ||
| 102 | + }else{ | ||
| 103 | + }} <span>二维</span> {{# | ||
| 104 | + } | ||
| 105 | + }} | ||
| 106 | + </div> | ||
| 107 | + ` | ||
| 61 | } | 108 | } |
| 62 | - , {field: 'flag', title: '标识', align: 'center', sort: true} | ||
| 63 | - , {field: 'remark', title: '备注', align: 'center'} | 109 | + , {field: 'kpis', title: '绑定指标', align: 'left',width: 500} |
| 110 | + , {field: 'restypes', title: '绑定资源类型', align: 'left',width: 300} | ||
| 111 | + , {field: 'createUser', title: '创建人',width: 100, align: 'center'} | ||
| 112 | + , {field: 'createTime', title: '创建时间', align: 'center',width: 180} | ||
| 113 | + , {field: 'remark', title: '备注', align: 'left',width: 500} | ||
| 64 | , { | 114 | , { |
| 65 | title: '操作', | 115 | title: '操作', |
| 66 | align: 'center', | 116 | align: 'center', |
| 67 | fixed: 'right', | 117 | fixed: 'right', |
| 68 | - width: 120, | ||
| 69 | - templet: '<div><span kpiflag-data-delete="{{d.id}}" data-flag="{{d.flag}}" class="layui-table-link">删除</span>' | 118 | + width: 100, |
| 119 | + templet: '<div>' + | ||
| 120 | + '<button kpiflag-data-delete="{{d.id}}" data-flag="{{d.flag}}" class="layui-btn layui-btn-xs layui-btn-normal link-restypepage-delete" lay-tips="删除"><i class="layui-icon layui-icon-delete"></i></button>' + | ||
| 121 | + '</div>' | ||
| 70 | } | 122 | } |
| 71 | ]], | 123 | ]], |
| 72 | done: function (res, curr, count) { | 124 | done: function (res, curr, count) { |
| @@ -112,7 +164,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', "commonDe | @@ -112,7 +164,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', "commonDe | ||
| 112 | return; | 164 | return; |
| 113 | } | 165 | } |
| 114 | //确认提示框 | 166 | //确认提示框 |
| 115 | - layer.confirm('确认删除当前采集协议及协议参数吗？', { | 167 | + layer.confirm('确认删除数据吗？', { |
| 116 | btn: ['确定', '取消'] //按钮 | 168 | btn: ['确定', '取消'] //按钮 |
| 117 | }, function () { | 169 | }, function () { |
| 118 | admin.req({ | 170 | admin.req({ |
| @@ -142,9 +194,20 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', "commonDe | @@ -142,9 +194,20 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', "commonDe | ||
| 142 | , where: { | 194 | , where: { |
| 143 | access_token: accessToken, | 195 | access_token: accessToken, |
| 144 | keyWord: $("#kpiflag_keyword").val(), | 196 | keyWord: $("#kpiflag_keyword").val(), |
| 197 | + describe: $("#kpiflag_describe").val(), | ||
| 198 | + kpis: $("#kpiflag_kpis").val(), | ||
| 199 | + restypes: $("#kpiflag_restypes").val(), | ||
| 200 | + dimension: $('select[name="dimension"]').val() | ||
| 145 | } | 201 | } |
| 146 | }); | 202 | }); |
| 147 | } | 203 | } |
| 204 | + | ||
| 205 | + //获取选中的数据 | ||
| 206 | + function getCheckData() { | ||
| 207 | + return table.checkStatus('kpiflag_table').data; | ||
| 208 | + } | ||
| 209 | + | ||
| 210 | + return {getData: getCheckData}; | ||
| 148 | }); | 211 | }); |
| 149 | 212 | ||
| 150 | }); | 213 | }); |
| @@ -91,24 +91,27 @@ layui.define(['laypage', 'commonDetail', 'common', 'element', 'admin'], function | @@ -91,24 +91,27 @@ layui.define(['laypage', 'commonDetail', 'common', 'element', 'admin'], function | ||
| 91 | } | 91 | } |
| 92 | }) | 92 | }) |
| 93 | for (let nodeInfo of nodeInfoList) { | 93 | for (let nodeInfo of nodeInfoList) { |
| 94 | + // lsq 详情页节电池样式修改 2022-08-08 | ||
| 94 | htmlStr += `<div class="detail-loadbalancing-vs" data-flag="${nodeInfo.flag}"> | 95 | htmlStr += `<div class="detail-loadbalancing-vs" data-flag="${nodeInfo.flag}"> |
| 95 | <div class="vs-title"> | 96 | <div class="vs-title"> |
| 96 | <p>${nodeInfo.nodeName}</p> | 97 | <p>${nodeInfo.nodeName}</p> |
| 97 | </div> | 98 | </div> |
| 98 | - <div class="vs-icon-div ${nodeInfo.healthStatus == 'normal' ? 'vs-icon-up' : 'vs-icon-down'}"> | ||
| 99 | - <div class="vs-icon"></div> | 99 | + <div class="vs-flex"> |
| 100 | + <div class="vs-icon-div ${nodeInfo.healthStatus == 'normal' ? 'vs-icon-up' : 'vs-icon-down'}"> | ||
| 101 | + <div class="vs-icon"></div> | ||
| 102 | + </div> | ||
| 103 | + <ul class="vs-info"> | ||
| 104 | + <li> | ||
| 105 | + ${nodeInfo.configStatus == 'enable' ? '<i class="iconfont icon-size good">\ue659</i> 已启用' : '<i class="iconfont icon-size serious">\ue668</i> 未启用'} | ||
| 106 | + </li> | ||
| 107 | + <li> | ||
| 108 | + 当前连接数: ${nodeInfo.currentConnections} | ||
| 109 | + </li> | ||
| 110 | + <li> | ||
| 111 | + 新增连接数: ${nodeInfo.newConnections} | ||
| 112 | + </li> | ||
| 113 | + </ul> | ||
| 100 | </div> | 114 | </div> |
| 101 | - <ul class="vs-info"> | ||
| 102 | - <li> | ||
| 103 | - ${nodeInfo.configStatus == 'enable' ? '<i class="iconfont icon-size good">\ue659</i> 已启用' : '<i class="iconfont icon-size serious">\ue668</i> 未启用'} | ||
| 104 | - </li> | ||
| 105 | - <li> | ||
| 106 | - 当前连接数: ${nodeInfo.currentConnections} | ||
| 107 | - </li> | ||
| 108 | - <li> | ||
| 109 | - 新增连接数: ${nodeInfo.newConnections} | ||
| 110 | - </li> | ||
| 111 | - </ul> | ||
| 112 | </div>` | 115 | </div>` |
| 113 | } | 116 | } |
| 114 | $vsDiv.html(htmlStr) | 117 | $vsDiv.html(htmlStr) |
| @@ -168,27 +171,30 @@ layui.define(['laypage', 'commonDetail', 'common', 'element', 'admin'], function | @@ -168,27 +171,30 @@ layui.define(['laypage', 'commonDetail', 'common', 'element', 'admin'], function | ||
| 168 | } | 171 | } |
| 169 | }) | 172 | }) |
| 170 | for (let nodeInfo of nodeInfoList) { | 173 | for (let nodeInfo of nodeInfoList) { |
| 174 | + // lsq 详情页节电池样式修改 2022-08-08 | ||
| 171 | htmlStr += `<div class="detail-loadbalancing-vs" data-flag="${nodeInfo.flag}"> | 175 | htmlStr += `<div class="detail-loadbalancing-vs" data-flag="${nodeInfo.flag}"> |
| 172 | <div class="vs-title"> | 176 | <div class="vs-title"> |
| 173 | <p>${nodeInfo.nodeName}</p> | 177 | <p>${nodeInfo.nodeName}</p> |
| 174 | </div> | 178 | </div> |
| 175 | - <div class="node-icon-div ${nodeInfo.healthStatus == 'normal' ? 'vs-icon-up' : 'vs-icon-down'}"> | ||
| 176 | - <div class="node-icon"></div> | 179 | + <div class="vs-flex"> |
| 180 | + <div class="node-icon-div ${nodeInfo.healthStatus == 'normal' ? 'vs-icon-up' : 'vs-icon-down'}"> | ||
| 181 | + <div class="node-icon"></div> | ||
| 182 | + </div> | ||
| 183 | + <ul class="vs-info"> | ||
| 184 | + <li> | ||
| 185 | + ${nodeInfo.configStatus == 'enable' ? '<i class="iconfont icon-size good">\ue659</i> 已启用' : '<i class="iconfont icon-size serious">\ue668</i> 未启用'} | ||
| 186 | + </li> | ||
| 187 | + <li> | ||
| 188 | + 当前连接数: ${nodeInfo.currentConnections} | ||
| 189 | + </li> | ||
| 190 | + <li> | ||
| 191 | + 新增连接数: ${nodeInfo.newConnections} | ||
| 192 | + </li> | ||
| 193 | + <li> | ||
| 194 | + ${nodeInfo.ipAddr}:${nodeInfo.port} | ||
| 195 | + </li> | ||
| 196 | + </ul> | ||
| 177 | </div> | 197 | </div> |
| 178 | - <ul class="vs-info"> | ||
| 179 | - <li> | ||
| 180 | - ${nodeInfo.configStatus == 'enable' ? '<i class="iconfont icon-size good">\ue659</i> 已启用' : '<i class="iconfont icon-size serious">\ue668</i> 未启用'} | ||
| 181 | - </li> | ||
| 182 | - <li> | ||
| 183 | - 当前连接数: ${nodeInfo.currentConnections} | ||
| 184 | - </li> | ||
| 185 | - <li> | ||
| 186 | - 新增连接数: ${nodeInfo.newConnections} | ||
| 187 | - </li> | ||
| 188 | - <li> | ||
| 189 | - ${nodeInfo.ipAddr}:${nodeInfo.port} | ||
| 190 | - </li> | ||
| 191 | - </ul> | ||
| 192 | </div>` | 198 | </div>` |
| 193 | } | 199 | } |
| 194 | $vsDiv.html(htmlStr) | 200 | $vsDiv.html(htmlStr) |
| @@ -537,16 +537,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'xmSelect | @@ -537,16 +537,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'xmSelect | ||
| 537 | resType: resType, | 537 | resType: resType, |
| 538 | isSend: $('#notice_search_isSend').val() | 538 | isSend: $('#notice_search_isSend').val() |
| 539 | }; | 539 | }; |
| 540 | - var typeName = new Map(); | ||
| 541 | - typeName.set("10", "告警通知"); | ||
| 542 | - typeName.set("11", "告警消除"); | ||
| 543 | - //2021-10-15 添加合并通知 XuHaoJie | ||
| 544 | - typeName.set("13", "合并通知"); | ||
| 545 | - typeName.set("20", "巡检报表通知"); | ||
| 546 | - typeName.set("30", "系统通知"); | ||
| 547 | - typeName.set("40", "工单通知"); | ||
| 548 | - typeName.set("99", "测试通知"); | ||
| 549 | - typeName.set("0", "测试通知"); | 540 | + //lsq 分类分组统计的x轴标签显示undefined修改 2022-08-08 |
| 550 | $.ajax({ | 541 | $.ajax({ |
| 551 | url: `${common.domainName}/api-web/notice/groupByType`, | 542 | url: `${common.domainName}/api-web/notice/groupByType`, |
| 552 | method: 'GET', | 543 | method: 'GET', |
| @@ -556,7 +547,8 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'xmSelect | @@ -556,7 +547,8 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'xmSelect | ||
| 556 | var yData = []; | 547 | var yData = []; |
| 557 | if (res && res.map) { | 548 | if (res && res.map) { |
| 558 | $.each(res.map.typeList, function (i, v) { | 549 | $.each(res.map.typeList, function (i, v) { |
| 559 | - xData.push(typeName.get(v)) | 550 | + //lsq 分类分组统计的x轴标签显示undefined修改 2022-08-08 |
| 551 | + xData.push(v) | ||
| 560 | }) | 552 | }) |
| 561 | yData = res.map.countList; | 553 | yData = res.map.countList; |
| 562 | } | 554 | } |
| @@ -325,7 +325,20 @@ layui.define(['admin', 'form', 'table', 'element', 'sessions', 'common', 'echart | @@ -325,7 +325,20 @@ layui.define(['admin', 'form', 'table', 'element', 'sessions', 'common', 'echart | ||
| 325 | color: '#333', | 325 | color: '#333', |
| 326 | show: true, | 326 | show: true, |
| 327 | interval: 0, | 327 | interval: 0, |
| 328 | - rotate: 15 | 328 | + rotate: 15, |
| 329 | + formatter: val => { | ||
| 330 | + // 一行字数 | ||
| 331 | + const max = 6 | ||
| 332 | + // 标签长度 | ||
| 333 | + const valLength = val.length | ||
| 334 | + // 换行数 | ||
| 335 | + const rowNum = valLength / 6 | ||
| 336 | + if (valLength > 6) { | ||
| 337 | + return val.slice(0,5) + '...'; | ||
| 338 | + } else { | ||
| 339 | + return val | ||
| 340 | + } | ||
| 341 | + } | ||
| 329 | }, | 342 | }, |
| 330 | axisLine: { | 343 | axisLine: { |
| 331 | lineStyle: { | 344 | lineStyle: { |
| 1 | +/** 指标组新增 */ | ||
| 2 | +layui.define(['table', 'form', 'laydate', 'common', 'sessions', 'laydate', 'element', 'admin', 'kpiIndex', 'resourcetype','kpiflagIndex'], function (exports) { | ||
| 3 | + var $ = layui.$; | ||
| 4 | + var form = layui.form; | ||
| 5 | + var table = layui.table; | ||
| 6 | + var common = layui.common; | ||
| 7 | + var admin = layui.admin; | ||
| 8 | + var view = layui.view; | ||
| 9 | + var element = layui.element; | ||
| 10 | + | ||
| 11 | + // 对外暴露的接口 | ||
| 12 | + exports('restypepageEdit', function (data) { | ||
| 13 | + var id = data.id ? data.id : ''; | ||
| 14 | + var sessions = layui.sessions; | ||
| 15 | + var accessToken = sessions.getToken().access_token; | ||
| 16 | + var domainName = common.domainName; | ||
| 17 | + // 表格数据 | ||
| 18 | + var restypepageFlagTableData = []; | ||
| 19 | + // 指标自定义类型数据组装option | ||
| 20 | + var restypekpitype; | ||
| 21 | + //指标表格 | ||
| 22 | + var restypepageFlagTable; | ||
| 23 | + // 加载遮罩 | ||
| 24 | + var loading; | ||
| 25 | + // 如果是编辑，回显数据 | ||
| 26 | + var restypePageData = { | ||
| 27 | + id: '', | ||
| 28 | + resType: '', | ||
| 29 | + os: '', | ||
| 30 | + provider: '', | ||
| 31 | + model: '', | ||
| 32 | + protocol: '' | ||
| 33 | + }; | ||
| 34 | + | ||
| 35 | + //初始化下拉框数据 | ||
| 36 | + initSelect(); | ||
| 37 | + //进入页面后第一次加载指标表格数据 | ||
| 38 | + loadRestypepageKpiFlagTable(); | ||
| 39 | + //获取指标自定义类型字典数据 | ||
| 40 | + getRestypePageKpiTypes(); | ||
| 41 | + | ||
| 42 | + /** | ||
| 43 | + * 初始化下拉框数据 | ||
| 44 | + * | ||
| 45 | + * */ | ||
| 46 | + function initSelect() { | ||
| 47 | + common.resTypeSelect("restypepagekpi_select_resType", function () { | ||
| 48 | + form.render("select"); | ||
| 49 | + }); | ||
| 50 | + common.renderCollProtocolSelect('restypepagekpiCollProtocol', function () { | ||
| 51 | + form.render("select"); | ||
| 52 | + }); | ||
| 53 | + common.renderCollProtocolSelect('restypepagekpiCollProtocol'); | ||
| 54 | + //绑定厂商下拉选择 | ||
| 55 | + common.providerSelect("restypepagekpiProvider", function () { | ||
| 56 | + form.render("select"); | ||
| 57 | + }); | ||
| 58 | + common.renderDdicSelect('restypepagekpiOs', 'os', function () { | ||
| 59 | + form.render("select"); | ||
| 60 | + }, "=操作系统="); | ||
| 61 | + // 根据id查询资源类型页面配置信息,在下拉框加载完成后，防止因未加载完成，造成回填异常 | ||
| 62 | + getrestypePageInfo(id); | ||
| 63 | + } | ||
| 64 | + | ||
| 65 | + | ||
| 66 | + /** | ||
| 67 | + * 获取指标自定义类型字典数据 | ||
| 68 | + * | ||
| 69 | + * */ | ||
| 70 | + function getRestypePageKpiTypes() { | ||
| 71 | + var options = ''; | ||
| 72 | + admin.req({ | ||
| 73 | + url: common.domainName + '/api-web/manage/ddic/findSucDdics/restypepage_kpi_type', | ||
| 74 | + type: 'POST', | ||
| 75 | + async: false, | ||
| 76 | + }).done(function (res) { | ||
| 77 | + var list = res.data; | ||
| 78 | + options += '<option value="">=请选择=</option>'; | ||
| 79 | + $.each(list, function (i, v) { | ||
| 80 | + options += '<option value="' + v.ddicCode + '">' + v.ddicName + '</option>'; | ||
| 81 | + }); | ||
| 82 | + restypekpitype = options; | ||
| 83 | + }).error(function (error) { | ||
| 84 | + console.error(error); | ||
| 85 | + }); | ||
| 86 | + } | ||
| 87 | + | ||
| 88 | + /** | ||
| 89 | + * 根据id查询资源类型页面配置信息 | ||
| 90 | + * | ||
| 91 | + * */ | ||
| 92 | + function getrestypePageInfo(id) { | ||
| 93 | + if (id){ | ||
| 94 | + $.ajax({ | ||
| 95 | + url: common.domainName + '/api-web/manage/restypePage/getById?access_token=' + accessToken + '&id=' + id, | ||
| 96 | + type: 'get', | ||
| 97 | + success: function (res) { | ||
| 98 | + restypePageData = res.object; | ||
| 99 | + form.val('form-restypepage-edit', res.object); | ||
| 100 | + restypepageFlagTableData = res.object.restypePageFlags; | ||
| 101 | + reloadRestypepageKpiFlagTable(); | ||
| 102 | + } | ||
| 103 | + }); | ||
| 104 | + } | ||
| 105 | + } | ||
| 106 | + | ||
| 107 | + element.render('collapse'); | ||
| 108 | + form.render(); | ||
| 109 | + | ||
| 110 | + /** | ||
| 111 | + * 加载指标表格数据 | ||
| 112 | + * | ||
| 113 | + * */ | ||
| 114 | + function loadRestypepageKpiFlagTable(){ | ||
| 115 | + restypepageFlagTable = table.render({ | ||
| 116 | + elem: '#restypepage-edit-table' | ||
| 117 | + , cellMinWidth: 80 | ||
| 118 | + , limit: 10 | ||
| 119 | + , even: true | ||
| 120 | + , data: restypepageFlagTableData | ||
| 121 | + , cols: [[ | ||
| 122 | + {field: 'index', title: '序号', align: 'center', type: 'numbers'}, | ||
| 123 | + {field: 'flagName', title: '指标组名称', align: 'center'}, | ||
| 124 | + {field: 'flagDesc', title: '指标组描述', align: 'center'}, | ||
| 125 | + { | ||
| 126 | + title: '类型', align: 'center', | ||
| 127 | + templet: function (d) { | ||
| 128 | + var selectDom = $('<select class="typeSel" lay-search="" class="layui-select" data-index="' + (d.LAY_INDEX-1) + '" lay-filter="select-restypepagekpi-table-type">' + | ||
| 129 | + restypekpitype + | ||
| 130 | + '</select>'); | ||
| 131 | + var index = (d.LAY_INDEX-1); | ||
| 132 | + var type = restypepageFlagTableData[index].type; | ||
| 133 | + selectDom.find('option[value="'+type+'"]').attr('selected', 'selected'); | ||
| 134 | + return selectDom.prop('outerHTML'); | ||
| 135 | + } | ||
| 136 | + }, | ||
| 137 | + {field: 'createUser', title: '创建人', align: 'center'}, | ||
| 138 | + {field: 'createTime', title: '创建时间', align: 'center'}, | ||
| 139 | + { | ||
| 140 | + field: 'sort', title: '排序', align: 'center', | ||
| 141 | + templet: function (d) { | ||
| 142 | + var inputDom = $('<input id="txt-restypepagekpi-table-sort-' + (d.LAY_INDEX-1) + '" data-index="' + (d.LAY_INDEX-1) + '" type="number" autocomplete="off" class="layui-input txt-restypepagekpi-table-sort">'); | ||
| 143 | + if (d.sort != null) { | ||
| 144 | + inputDom.attr("value", restypepageFlagTableData[(d.LAY_INDEX-1)].sort); | ||
| 145 | + } | ||
| 146 | + return inputDom.prop('outerHTML'); | ||
| 147 | + } | ||
| 148 | + }, { | ||
| 149 | + title: '操作', | ||
| 150 | + width: 100, | ||
| 151 | + align: 'center', | ||
| 152 | + templet: '<div><span data-index="{{(d.LAY_INDEX-1)}}" class="link link-restypepagekpi-delete">' + | ||
| 153 | + '<a class="layui-btn layui-btn-xs layui-btn-normal" title="删除"><i class="layui-icon"></i></a></span>' | ||
| 154 | + }]], | ||
| 155 | + done: function (res, curr, count) { | ||
| 156 | + form.render(); | ||
| 157 | + $(".restypepage-edit-table .layui-table-body,.restypepage-edit-table .layui-table-box,.restypepage-edit-table .layui-table-cell").css('overflow', 'visible'); | ||
| 158 | + // 排序下拉框改变事件 | ||
| 159 | + form.on('select(select-restypepagekpi-table-type)', function (data) { | ||
| 160 | + var index = $(data.elem).data('index'); | ||
| 161 | + restypepageFlagTableData[index].type = data.value; | ||
| 162 | + }); | ||
| 163 | + // 排序输入框输入事件 | ||
| 164 | + $('.txt-restypepagekpi-table-sort').change(function () { | ||
| 165 | + restypepageFlagTableData[$(this).data('index')].sort = $(this).val(); | ||
| 166 | + }); | ||
| 167 | + // 删除事件 | ||
| 168 | + $('.link-restypepagekpi-delete').click(function () { | ||
| 169 | + restypepageFlagTableData.splice($(this).data('index'), 1); | ||
| 170 | + reloadRestypepageKpiFlagTable(); | ||
| 171 | + }); | ||
| 172 | + } | ||
| 173 | + }); | ||
| 174 | + } | ||
| 175 | + | ||
| 176 | + // 刷新指标表格 | ||
| 177 | + function reloadRestypepageKpiFlagTable() { | ||
| 178 | + restypepageFlagTable.reload({ | ||
| 179 | + page: {curr: 1}, | ||
| 180 | + data: restypepageFlagTableData | ||
| 181 | + }); | ||
| 182 | + } | ||
| 183 | + | ||
| 184 | + // 表单提交事件 | ||
| 185 | + form.on('submit(form-restypepage-edit)', function (data) { | ||
| 186 | + loading = layer.load(2); | ||
| 187 | + var restypePage = { | ||
| 188 | + id: id, | ||
| 189 | + resType: '', | ||
| 190 | + os: '', | ||
| 191 | + provider: '', | ||
| 192 | + model: '', | ||
| 193 | + protocol: '', | ||
| 194 | + remark: '', | ||
| 195 | + restypePageFlags: restypepageFlagTableData | ||
| 196 | + }; | ||
| 197 | + Object.assign(restypePage, form.val('form-restypepage-edit')); | ||
| 198 | + admin.req({ | ||
| 199 | + url: common.domainName + '/api-web/manage/restypePage/saveRestypePage?access_token=' + accessToken, | ||
| 200 | + type: 'POST', | ||
| 201 | + contentType: 'application/json', | ||
| 202 | + data: JSON.stringify(restypePage), | ||
| 203 | + error: function () { | ||
| 204 | + layer.close(loading); | ||
| 205 | + } | ||
| 206 | + }).done(function (response) { | ||
| 207 | + layer.close(loading); | ||
| 208 | + if (response.success) { | ||
| 209 | + layer.msg('保存成功', {icon: 1, timeout: 3000}); | ||
| 210 | + layer.closeAll('page'); | ||
| 211 | + table.reload('table-restypepage-list', { | ||
| 212 | + page: { | ||
| 213 | + curr: 1 | ||
| 214 | + } | ||
| 215 | + , where: { | ||
| 216 | + access_token: accessToken, | ||
| 217 | + keyword: $("#restypepageQueryForm").find("input[name='keyword']").val(), | ||
| 218 | + resType: $("#restypepageQueryForm").find("select[name='restypepageresType']").val(), | ||
| 219 | + os: $("#restypepageQueryForm").find("select[name='restypepageos']").val(), | ||
| 220 | + protocol: $("#restypepageQueryForm").find("select[name='restypepagecollProtocol']").val(), | ||
| 221 | + provider: $("#restypepageQueryForm").find("select[name='restypepageprovider']").val(), | ||
| 222 | + } | ||
| 223 | + }); | ||
| 224 | + } else { | ||
| 225 | + layer.msg('保存失败', {icon: 2, timeout: 3000}); | ||
| 226 | + } | ||
| 227 | + }); | ||
| 228 | + return false; | ||
| 229 | + }); | ||
| 230 | + | ||
| 231 | + // 选择指标 | ||
| 232 | + $('#btn-restypepage-kpi-bind').click(function () { | ||
| 233 | + $('[lay-id="/baseconfig/kpiflag/index"]').find('.layui-tab-close').trigger('click'); | ||
| 234 | + layer.open({ | ||
| 235 | + title: '选择指标', | ||
| 236 | + id: 'restypepageFlagIndexChooseHtml', | ||
| 237 | + type: 1, | ||
| 238 | + area: ['90%', '800px'], | ||
| 239 | + btn: ['确定', '取消'], | ||
| 240 | + scrollbar: true, | ||
| 241 | + success: function () { | ||
| 242 | + view(this.id).render('/baseconfig/kpiflag/index', {}); | ||
| 243 | + }, | ||
| 244 | + yes: function (index, layero) { | ||
| 245 | + var kpiflagIndex = layui.kpiflagIndex({}); | ||
| 246 | + var data = kpiflagIndex.getData(); | ||
| 247 | + if (data.length > 0) { | ||
| 248 | + $.each(data, function (i, e) { | ||
| 249 | + console.log(JSON.stringify(e)); | ||
| 250 | + var flag = true; | ||
| 251 | + $.each(restypepageFlagTableData, function (j, k) { | ||
| 252 | + if (e.id == k.flagId) { | ||
| 253 | + flag = false; | ||
| 254 | + } | ||
| 255 | + }); | ||
| 256 | + if (flag == true) { | ||
| 257 | + restypepageFlagTableData.push({ | ||
| 258 | + flagName: e.name, | ||
| 259 | + flagDesc: e.describes, | ||
| 260 | + id: '', | ||
| 261 | + pageId: id, | ||
| 262 | + resType: restypePageData.resType, | ||
| 263 | + flagDimension: e.dimension, | ||
| 264 | + flagId: e.id, | ||
| 265 | + type: 'base', | ||
| 266 | + sort: restypepageFlagTableData.length+1, | ||
| 267 | + createUser: form.val('form-restypepage-edit').createUser, | ||
| 268 | + createTime: common.getToday('') | ||
| 269 | + }); | ||
| 270 | + } | ||
| 271 | + }); | ||
| 272 | + layer.close(index); | ||
| 273 | + reloadRestypepageKpiFlagTable(); | ||
| 274 | + } else { | ||
| 275 | + layer.msg("无选中的数据", {offset: '15px', icon: 7, time: 2000}) | ||
| 276 | + return false; | ||
| 277 | + } | ||
| 278 | + } | ||
| 279 | + }); | ||
| 280 | + form.render(); | ||
| 281 | + }); | ||
| 282 | + }); | ||
| 283 | +}); |
| 1 | +layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTable', 'xmSelect'], function (exports) { | ||
| 2 | + var $ = layui.$; | ||
| 3 | + var form = layui.form; | ||
| 4 | + var layer = layui.layer; | ||
| 5 | + var admin = layui.admin; | ||
| 6 | + var table = layui.table; | ||
| 7 | + var common = layui.common; | ||
| 8 | + var treeTable = layui.treeTable; | ||
| 9 | + var xmSelect = layui.xmSelect; | ||
| 10 | + | ||
| 11 | + exports('restypepageIndex', function () { | ||
| 12 | + var sessions = layui.sessions; | ||
| 13 | + var accessToken = sessions.getToken()['access_token']; | ||
| 14 | + var domainName = common.domainName; | ||
| 15 | + var restypepageTable; | ||
| 16 | + //加载权限列表 | ||
| 17 | + var checkList = common.checkPermission(accessToken); | ||
| 18 | + | ||
| 19 | + //初始化下拉框 | ||
| 20 | + initSelect(); | ||
| 21 | + //初始化事件 | ||
| 22 | + initEvent() | ||
| 23 | + //初次加载表格 | ||
| 24 | + loadTable(); | ||
| 25 | + | ||
| 26 | + | ||
| 27 | + /** | ||
| 28 | + * 初初始化事件 | ||
| 29 | + * | ||
| 30 | + * */ | ||
| 31 | + function initEvent() { | ||
| 32 | + // 回车搜索 | ||
| 33 | + $('form[lay-filter="form-restypepage-condition"] input').keydown(function (e) { | ||
| 34 | + if (e.keyCode === 13) { | ||
| 35 | + reloadTable(); | ||
| 36 | + } | ||
| 37 | + }); | ||
| 38 | + //查询按钮点击事件 | ||
| 39 | + $("#restypepageQueryBtn").unbind().on("click", function () { | ||
| 40 | + reloadTable(); | ||
| 41 | + }) | ||
| 42 | + //搜索下拉框change事件监听 | ||
| 43 | + form.on('select(change)', function (data) { | ||
| 44 | + reloadTable(); | ||
| 45 | + }) | ||
| 46 | + // 添加资源类型页面配置信息 | ||
| 47 | + $('#btn-restypepage-add').click(function () { | ||
| 48 | + if ($.inArray('back:restypepage:add', checkList) == -1) { | ||
| 49 | + layer.msg('暂无权限!', {icon: 7, time: 3000}); | ||
| 50 | + return; | ||
| 51 | + } | ||
| 52 | + openEditHtml(); | ||
| 53 | + }); | ||
| 54 | + // 删除事件 | ||
| 55 | + $('#btn-restypepage-delete').click(function () { | ||
| 56 | + var checks = table.checkStatus('table-restypepage-list').data; | ||
| 57 | + var ids = $.map(checks, function (item) { | ||
| 58 | + return item.id; | ||
| 59 | + }); | ||
| 60 | + deleteByIds(ids); | ||
| 61 | + }); | ||
| 62 | + } | ||
| 63 | + | ||
| 64 | + | ||
| 65 | + /** | ||
| 66 | + * 初始化下拉框数据 | ||
| 67 | + * | ||
| 68 | + * */ | ||
| 69 | + function initSelect() { | ||
| 70 | + common.renderCollProtocolSelect('restypepageCollProtocol', function () { | ||
| 71 | + form.render("select"); | ||
| 72 | + }); | ||
| 73 | + // common.renderCollProtocolSelect('restypepageCollProtocol'); | ||
| 74 | + //绑定厂商下拉选择 | ||
| 75 | + common.providerSelect("restypepageProvider", function () { | ||
| 76 | + form.render("select"); | ||
| 77 | + }); | ||
| 78 | + | ||
| 79 | + common.renderDdicSelect('restypepageOs', 'os', function () { | ||
| 80 | + form.render("select"); | ||
| 81 | + }, "=操作系统="); | ||
| 82 | + //资源类型下拉框 | ||
| 83 | + common.resTypeSelect("restypepage_select_resType",function () { | ||
| 84 | + form.render("select"); | ||
| 85 | + }); | ||
| 86 | + } | ||
| 87 | + /** | ||
| 88 | + * 将查询条件作为方法 | ||
| 89 | + * | ||
| 90 | + * */ | ||
| 91 | + function whereSearch() { | ||
| 92 | + form.render(); | ||
| 93 | + var $from = $("#restypepageQueryForm") | ||
| 94 | + var search = { | ||
| 95 | + access_token: accessToken, | ||
| 96 | + keyword: $from.find("input[name='keywords']").val(), | ||
| 97 | + resType: $from.find("select[name='restypepageresType']").val(), | ||
| 98 | + os: $from.find("select[name='restypepageos']").val(), | ||
| 99 | + protocol: $from.find("select[name='restypepagecollProtocol']").val(), | ||
| 100 | + provider: $from.find("select[name='restypepageprovider']").val(), | ||
| 101 | + } | ||
| 102 | + return search; | ||
| 103 | + } | ||
| 104 | + | ||
| 105 | + // 加载表格 | ||
| 106 | + function loadTable() { | ||
| 107 | + restypepageTable = table.render({ | ||
| 108 | + elem: '#table-restypepage-list', | ||
| 109 | + url: domainName + '/api-web/manage/restypePage/page', | ||
| 110 | + where: whereSearch(), | ||
| 111 | + height: 'full-200', | ||
| 112 | + limit: common.limit, | ||
| 113 | + limits: common.limits, | ||
| 114 | + page: { | ||
| 115 | + layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'], | ||
| 116 | + theme: '#1E9FFF' | ||
| 117 | + }, | ||
| 118 | + cols: [[ | ||
| 119 | + { type: 'checkbox' } | ||
| 120 | + , {field: 'index', title: '序号', align: 'center', type: 'numbers',width: 50} | ||
| 121 | + , { | ||
| 122 | + field: 'name', title: '页面名称', align: 'center', sort: true,width: 400, | ||
| 123 | + templet: '<div>' + | ||
| 124 | + '<span restypepage-data-edit="{{d.id}}" data-flag="{{d.flag}}" class="layui-table-link">{{d.name}}</span>' + | ||
| 125 | + '</div>' | ||
| 126 | + } | ||
| 127 | + , { field: 'resTypeName', title: '资源类型', align: 'center',width: 250} | ||
| 128 | + , { field: 'osName', title: '操作系统', align: 'center',width: 100} | ||
| 129 | + , { field: 'provderName', title: '厂商', align: 'center',width: 100} | ||
| 130 | + , { field: 'protocolName', title: '采集协议', align: 'center',width: 200} | ||
| 131 | + , { field: 'model', title: '型号', align: 'center',width: 200} | ||
| 132 | + , { field: 'keyword', title: '辅助关键字', align: 'center',width: 200} | ||
| 133 | + , { field: 'flags', title: '配置指标组', align: 'left',width: 300} | ||
| 134 | + , { field: 'kpis', title: '配置指标', align: 'left',width: 300} | ||
| 135 | + , { field: 'remark', title: '备注', align: 'left',width: 300} | ||
| 136 | + , { | ||
| 137 | + title: '操作', align: 'center',fixed: 'right', width: 100, | ||
| 138 | + templet: | ||
| 139 | + '<div>' + | ||
| 140 | + '<button data-id="{{d.id}}" class="layui-btn layui-btn-xs layui-btn-normal link-restypepage-edit" lay-tips="编辑"><i class="layui-icon layui-icon-edit"></i></button>'+ | ||
| 141 | + '<button data-id="{{d.id}}" class="layui-btn layui-btn-xs layui-btn-normal link-restypepage-delete" lay-tips="删除"><i class="layui-icon layui-icon-delete"></i></button>' + | ||
| 142 | + '</div>' | ||
| 143 | + }]], | ||
| 144 | + done: function (res) { | ||
| 145 | + //点击协议名称 进行编辑 | ||
| 146 | + $('[restypepage-data-edit]').on('click', function () { | ||
| 147 | + if ($.inArray('back:restypepage:add', checkList) == -1) { | ||
| 148 | + layer.msg('暂无权限!', {icon: 7, time: 3000}); | ||
| 149 | + return; | ||
| 150 | + } | ||
| 151 | + openEditHtml($(this).attr("restypepage-data-edit")); | ||
| 152 | + }); | ||
| 153 | + // 点击编辑事件 | ||
| 154 | + $('.link-restypepage-edit').click(function () { | ||
| 155 | + if ($.inArray('back:restypepage:add', checkList) == -1) { | ||
| 156 | + layer.msg('暂无权限!', {icon: 7, time: 3000}); | ||
| 157 | + return; | ||
| 158 | + } | ||
| 159 | + openEditHtml($(this).data('id')); | ||
| 160 | + }); | ||
| 161 | + // 点击删除事件 | ||
| 162 | + $('.link-restypepage-delete').click(function () { | ||
| 163 | + deleteByIds([$(this).data('id')]); | ||
| 164 | + }); | ||
| 165 | + } | ||
| 166 | + }); | ||
| 167 | + } | ||
| 168 | + | ||
| 169 | + //刷新表格 | ||
| 170 | + function reloadTable() { | ||
| 171 | + restypepageTable.reload({ | ||
| 172 | + page: { | ||
| 173 | + curr: 1 | ||
| 174 | + } | ||
| 175 | + , where: whereSearch() | ||
| 176 | + }); | ||
| 177 | + } | ||
| 178 | + | ||
| 179 | + // 新增或编辑资源类型页面配置信息 | ||
| 180 | + function openEditHtml(id) { | ||
| 181 | + common.openWin('/baseconfig/restypepage/add', `<a class="layui-icon layui-icon-edit win_title_icon"></a>` + id ? '编辑' : '新增', | ||
| 182 | + {id: id}, ['保存', '取消'], function () { | ||
| 183 | + $('#btn-restypepage-submit').click(); | ||
| 184 | + }, null, ['80%', '90%'], null, {resize: false}); | ||
| 185 | + form.render(); | ||
| 186 | + } | ||
| 187 | + | ||
| 188 | + // 根据id删除字典信息 | ||
| 189 | + function deleteByIds(ids) { | ||
| 190 | + if ($.inArray('back:restypepage:delete', checkList) == -1) { | ||
| 191 | + layer.msg('暂无权限!', {icon: 7, time: 3000}); | ||
| 192 | + return; | ||
| 193 | + } | ||
| 194 | + if (ids.length == 0) { | ||
| 195 | + layer.msg('请至少选择一条数据', {icon: 0, time: 3000}); | ||
| 196 | + return; | ||
| 197 | + } | ||
| 198 | + layer.confirm('确认要删除数据吗？', {icon: 3}, function () { | ||
| 199 | + layer.load(2); | ||
| 200 | + admin.req({ | ||
| 201 | + url: domainName + '/api-web/manage/restypePage/deleteByIds', | ||
| 202 | + data: { | ||
| 203 | + ids: ids | ||
| 204 | + } | ||
| 205 | + }).done(function (response) { | ||
| 206 | + layer.closeAll('loading'); | ||
| 207 | + if (response.success) { | ||
| 208 | + layer.msg('删除成功!', {icon: 1, time: 3000}); | ||
| 209 | + reloadTable(); | ||
| 210 | + } else { | ||
| 211 | + layer.msg('删除失败!', {icon: 2, time: 3000}); | ||
| 212 | + } | ||
| 213 | + }).error(function () { | ||
| 214 | + layer.closeAll('loading'); | ||
| 215 | + }); | ||
| 216 | + }); | ||
| 217 | + } | ||
| 218 | + }); | ||
| 219 | +}); |
| 1 | +layui.define(['commonDetail', 'common', 'sessions'], function (exports) { | ||
| 2 | + var commonDetail = layui.commonDetail; | ||
| 3 | + var $ = layui.$ | ||
| 4 | + , laytpl = layui.laytpl | ||
| 5 | + //对外暴露的接口 | ||
| 6 | + exports('snapshot_detail', function (data) { | ||
| 7 | + var common = layui.common; | ||
| 8 | + var sessions = layui.sessions; | ||
| 9 | + var table = layui.table; | ||
| 10 | + var view = layui.view; | ||
| 11 | + var laytpl = layui.laytpl; | ||
| 12 | + var resId = ''; | ||
| 13 | + var batchNo = ''; | ||
| 14 | + var showFlag = common.getUrlParam("show"); | ||
| 15 | + if (showFlag && showFlag == '0') { | ||
| 16 | + resId = common.getUrlParam("resId"); | ||
| 17 | + batchNo = common.getUrlParam("batchNo"); | ||
| 18 | + } else { | ||
| 19 | + resId = data.resId; | ||
| 20 | + batchNo = data.batchNo; | ||
| 21 | + } | ||
| 22 | + findAllSnapshot(); | ||
| 23 | + | ||
| 24 | + commonDetail.bindTips(); | ||
| 25 | + | ||
| 26 | + function findAllSnapshot() { | ||
| 27 | + // 删除所有的子元素 | ||
| 28 | + $('#table_arr_body').empty(); | ||
| 29 | + let url = common.domainName + '/api-web/snapshot/info?resId='+ resId + '&batchNo='+batchNo +'&access_token='+sessions.getToken().access_token; | ||
| 30 | + $.ajax({ | ||
| 31 | + url: url, | ||
| 32 | + type: 'get', | ||
| 33 | + async: false, | ||
| 34 | + success: function (res) { | ||
| 35 | + if (res.success){ | ||
| 36 | + if (res.object.snapshotResState){ | ||
| 37 | + commonDetail.snapshotRenderResHealth(res.object.snapshotResState); | ||
| 38 | + } | ||
| 39 | + commonDetail.anapshotRenderTextCols('hostminicomputerpartition_jbxx',res.object.snapshotBaseInformationList,2); | ||
| 40 | + if (res.object.importantInformationList != null && res.object.importantInformationList.length > 0){ | ||
| 41 | + commonDetail.anapshotRenderTextCols('hostminicomputerpartition_sysfile',res.object.importantInformationList,2); | ||
| 42 | + }else { | ||
| 43 | + $("#hostminicomputerpartition_sysfile").html('<div style="text-align:center;"><span style="line-height: 150px; padding:20px;font-style:normal;">暂无数据</span></div>') | ||
| 44 | + } | ||
| 45 | + commonDetail.snapshotRenderActiveAlarms("告警列表","snapshow_active_alram", res.object.snapshotAlamList); | ||
| 46 | + console.log(res.object.snapshotRecordList); | ||
| 47 | + let tableArr = res.object.snapshotRecordList; | ||
| 48 | + let domTableArr=''; | ||
| 49 | + // 渲染生成节点 | ||
| 50 | + tableArr.forEach((item,index)=>{ | ||
| 51 | + domTableArr+=` | ||
| 52 | + <div class="lay-row"> | ||
| 53 | + <div class="lay-row-item"> | ||
| 54 | + <h5 class="lay-row-title">${item.name} | ||
| 55 | + <span class="layui-table-link" id="snapshot_wkinfoDownload_${index}" | ||
| 56 | + style="margin-left: 10px;">下载</span> | ||
| 57 | + <span class="layui-table-link" id="snapshot_wkinfoMore_${index}">更多</span> | ||
| 58 | + </h5> | ||
| 59 | + <div id="snapshot_wkinfo_${index}"></div> | ||
| 60 | + </div> | ||
| 61 | + </div> | ||
| 62 | + ` | ||
| 63 | + }) | ||
| 64 | + // console.log(domTableArr); | ||
| 65 | + $('#table_arr_body').append(domTableArr) | ||
| 66 | + | ||
| 67 | + // 渲染节点表格数据 | ||
| 68 | + tableArr.forEach((item,index)=>{ | ||
| 69 | + let cols = []; | ||
| 70 | + let datas = []; | ||
| 71 | + item.header.map((headerItem,headerIndex)=>{ | ||
| 72 | + if (headerItem.unit){ | ||
| 73 | + cols.push({ | ||
| 74 | + field:headerItem.id,title:headerItem.name+'('+headerItem.unit+')',sort:true,align:"center", | ||
| 75 | + }) | ||
| 76 | + }else { | ||
| 77 | + cols.push({ | ||
| 78 | + field:headerItem.id,title:headerItem.name,sort:true,align:"center", | ||
| 79 | + }) | ||
| 80 | + } | ||
| 81 | + }) | ||
| 82 | + item.content.map((contItem,contIndex)=>{ | ||
| 83 | + let obj = {}; | ||
| 84 | + contItem.map((v,i)=>{ | ||
| 85 | + obj[v.kpiId] = v.kpiValue | ||
| 86 | + }) | ||
| 87 | + datas.push(obj) | ||
| 88 | + }) | ||
| 89 | + | ||
| 90 | + /*console.log('cols--------------',cols); | ||
| 91 | + console.log('datas--------------',datas);*/ | ||
| 92 | + // 创建渲染实例 | ||
| 93 | + table.render({ | ||
| 94 | + elem: `#snapshot_wkinfo_${index}` | ||
| 95 | + ,page: false | ||
| 96 | + ,data: datas | ||
| 97 | + ,cols: [cols] | ||
| 98 | + ,done(response, curr, count){ | ||
| 99 | + delete response.data[0].LAY_TABLE_INDEX // | ||
| 100 | + let keys = response.data[0] | ||
| 101 | + let params = { | ||
| 102 | + kpiId:Object.keys(keys).join(','), | ||
| 103 | + resId:resId, | ||
| 104 | + batchNo:batchNo, | ||
| 105 | + tableName:item.name, | ||
| 106 | + flagPrefix:item.flagPrefix | ||
| 107 | + } | ||
| 108 | + // 点击下载的方法 | ||
| 109 | + $(`#snapshot_wkinfoDownload_${index}`).unbind('click').on('click',()=>{ | ||
| 110 | + let url = `${common.domainName}/api-web/snapshot/info/download?kpiId=${params.kpiId}&resId=${params.resId}&batchNo=${params.batchNo}&tableName=${params.tableName}&flagPrefix=${params.flagPrefix}&access_token=${sessions.getToken().access_token}` | ||
| 111 | + window.open(url) | ||
| 112 | + }) | ||
| 113 | + // 点击更多的方法 | ||
| 114 | + $(`#snapshot_wkinfoMore_${index}`).unbind('click').on('click',()=>{ | ||
| 115 | + view('commonViewModel').render("template/detail/snapshot_detail_more").then(function (res) { | ||
| 116 | + layer.open({ | ||
| 117 | + title: ["更多", 'font-size:18px;'], | ||
| 118 | + type: 1, | ||
| 119 | + shadeClose: true,//开启遮罩层 | ||
| 120 | + area: ['90%', '690px'], | ||
| 121 | + content: laytpl(res.body).render(JSON.stringify(params)) | ||
| 122 | + }); | ||
| 123 | + }); | ||
| 124 | + }) | ||
| 125 | + } | ||
| 126 | + ,error(){ | ||
| 127 | + | ||
| 128 | + } | ||
| 129 | + }) | ||
| 130 | + }) | ||
| 131 | + }else { | ||
| 132 | + layer.msg(res.msg, { | ||
| 133 | + icon: 7, time: 2000 | ||
| 134 | + }); | ||
| 135 | + } | ||
| 136 | + } | ||
| 137 | + }) | ||
| 138 | + } | ||
| 139 | + | ||
| 140 | + | ||
| 141 | + | ||
| 142 | + //定时任务 | ||
| 143 | + // var timer = setInterval(function () { | ||
| 144 | + // findAllSnapshot() | ||
| 145 | + // }, commonDetail.timerTime); | ||
| 146 | + // commonDetail.detailTimer.push(timer); | ||
| 147 | + | ||
| 148 | + }); | ||
| 149 | +}); |
| 1 | +//更多列表 | ||
| 2 | +layui.define(['table', 'admin', 'layer', 'common', 'commonDetail'], function (exports) { | ||
| 3 | + var $ = layui.$; | ||
| 4 | + var admin = layui.admin; | ||
| 5 | + var table = layui.table; | ||
| 6 | + var common = layui.common; | ||
| 7 | + var sessions = layui.sessions; | ||
| 8 | + var commonDetail = layui.commonDetail; | ||
| 9 | + //对外暴露的接口 | ||
| 10 | + exports('snapshot_detail_more', function (data) { | ||
| 11 | + // console.log(data); | ||
| 12 | + var commonDetail = layui.commonDetail; | ||
| 13 | + var resId = data.resId; | ||
| 14 | + var kpiId = data.kpiId; | ||
| 15 | + var batchNo = data.batchNo; | ||
| 16 | + var flagPrefix = data.flagPrefix; | ||
| 17 | + var page = '1'; | ||
| 18 | + var limit = "10"; | ||
| 19 | + let cols = []; | ||
| 20 | + | ||
| 21 | + let url = `${common.domainName}/api-web/snapshot/info/page?access_token=${sessions.getToken().access_token}`; | ||
| 22 | + $.ajax({ | ||
| 23 | + url: url, | ||
| 24 | + data:{ | ||
| 25 | + resId, | ||
| 26 | + kpiId, | ||
| 27 | + batchNo, | ||
| 28 | + flagPrefix, | ||
| 29 | + page, | ||
| 30 | + limit, | ||
| 31 | + }, | ||
| 32 | + type: 'get', | ||
| 33 | + async: false, | ||
| 34 | + success:(res)=>{ | ||
| 35 | + console.log(res.object.header); | ||
| 36 | + cols = res.object.header.map(item=>{ | ||
| 37 | + if (item.unit){ | ||
| 38 | + return { | ||
| 39 | + field:item.id,title:item.name+'('+item.unit+')',sort:true,align:"center", | ||
| 40 | + } | ||
| 41 | + }else { | ||
| 42 | + return { | ||
| 43 | + field:item.id,title:item.name,sort:true,align:"center", | ||
| 44 | + } | ||
| 45 | + } | ||
| 46 | + }) | ||
| 47 | + // let tableArr = res.object; | ||
| 48 | + // let datas = []; | ||
| 49 | + // let cols = []; | ||
| 50 | + // tableArr.header.map((headerItem,headerIndex)=>{ | ||
| 51 | + // cols.push({ | ||
| 52 | + // field:headerItem.id,title:headerItem.name,sort:true,align:"center", | ||
| 53 | + // }) | ||
| 54 | + // }) | ||
| 55 | + // tableArr.content.map((contItem,contIndex)=>{ | ||
| 56 | + // let obj = {}; | ||
| 57 | + // contItem.map((v,i)=>{ | ||
| 58 | + // obj[v.kpiId] = v.kpiValue | ||
| 59 | + // }) | ||
| 60 | + // datas.push(obj) | ||
| 61 | + // }) | ||
| 62 | + }, | ||
| 63 | + error:(err)=>{ | ||
| 64 | + | ||
| 65 | + } | ||
| 66 | + }) | ||
| 67 | + | ||
| 68 | + | ||
| 69 | + table.render({ | ||
| 70 | + elem: '#detail_more_snapshot' | ||
| 71 | + ,url:url | ||
| 72 | + , cols: [cols] | ||
| 73 | + , where:{ | ||
| 74 | + resId, | ||
| 75 | + kpiId, | ||
| 76 | + batchNo, | ||
| 77 | + flagPrefix, | ||
| 78 | + } | ||
| 79 | + , id: 'detail_more_snapshot' | ||
| 80 | + , page: { | ||
| 81 | + layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'] | ||
| 82 | + , theme: '#1E9FFF' | ||
| 83 | + } | ||
| 84 | + , height: 'full-300' | ||
| 85 | + , limit: common.limit | ||
| 86 | + , limits: common.limits | ||
| 87 | + , done(){ | ||
| 88 | + | ||
| 89 | + } | ||
| 90 | + ,error(){ | ||
| 91 | + | ||
| 92 | + } | ||
| 93 | + }) | ||
| 94 | + }) | ||
| 95 | +}); |
| @@ -7992,12 +7992,13 @@ table.table-duty tbody td div.table-duty-td-day .duty-td-div-now { | @@ -7992,12 +7992,13 @@ table.table-duty tbody td div.table-duty-td-day .duty-td-div-now { | ||
| 7992 | /*通知页面中间统计图布局样式*/ | 7992 | /*通知页面中间统计图布局样式*/ |
| 7993 | 7993 | ||
| 7994 | .detail-loadbalancing-vs { | 7994 | .detail-loadbalancing-vs { |
| 7995 | - width: calc(12.5% - 22px); | 7995 | + /*lsq 详情页节电池样式修改 2022-08-08*/ |
| 7996 | + width: calc(14% - 0px); | ||
| 7996 | height: 115px; | 7997 | height: 115px; |
| 7997 | margin: 5px; | 7998 | margin: 5px; |
| 7998 | float: left; | 7999 | float: left; |
| 7999 | border: 1px solid #dcdcdc; | 8000 | border: 1px solid #dcdcdc; |
| 8000 | - padding: 10px 20px; | 8001 | + padding: 10px; |
| 8001 | border-radius: 5px; | 8002 | border-radius: 5px; |
| 8002 | cursor: pointer; | 8003 | cursor: pointer; |
| 8003 | } | 8004 | } |
| @@ -8006,15 +8007,20 @@ table.table-duty tbody td div.table-duty-td-day .duty-td-div-now { | @@ -8006,15 +8007,20 @@ table.table-duty tbody td div.table-duty-td-day .duty-td-div-now { | ||
| 8006 | font-size: 15px; | 8007 | font-size: 15px; |
| 8007 | font-weight: bold; | 8008 | font-weight: bold; |
| 8008 | height: 30px; | 8009 | height: 30px; |
| 8010 | + word-wrap: break-word; | ||
| 8009 | } | 8011 | } |
| 8010 | 8012 | ||
| 8011 | .detail-loadbalancing-vs .vs-title { | 8013 | .detail-loadbalancing-vs .vs-title { |
| 8012 | margin-bottom: 10px; | 8014 | margin-bottom: 10px; |
| 8013 | } | 8015 | } |
| 8014 | - | 8016 | +/*lsq 详情页节点池样式修改 2022-08-08*/ |
| 8017 | +.detail-loadbalancing-vs .vs-flex{ | ||
| 8018 | + display: flex; | ||
| 8019 | + align-items: center; | ||
| 8020 | +} | ||
| 8015 | .detail-loadbalancing-vs div.vs-icon-div { | 8021 | .detail-loadbalancing-vs div.vs-icon-div { |
| 8016 | - width: 55px; | ||
| 8017 | - height: 55px; | 8022 | + width: 45px; |
| 8023 | + height: 45px; | ||
| 8018 | padding: 4px; | 8024 | padding: 4px; |
| 8019 | float: left; | 8025 | float: left; |
| 8020 | border-radius: 10px; | 8026 | border-radius: 10px; |
| @@ -8030,8 +8036,8 @@ table.table-duty tbody td div.table-duty-td-day .duty-td-div-now { | @@ -8030,8 +8036,8 @@ table.table-duty tbody td div.table-duty-td-day .duty-td-div-now { | ||
| 8030 | } | 8036 | } |
| 8031 | 8037 | ||
| 8032 | .detail-loadbalancing-vs div.vs-icon { | 8038 | .detail-loadbalancing-vs div.vs-icon { |
| 8033 | - width: 50px; | ||
| 8034 | - height: 50px; | 8039 | + width: 40px; |
| 8040 | + height: 40px; | ||
| 8035 | background-repeat: no-repeat; | 8041 | background-repeat: no-repeat; |
| 8036 | background-position: center; | 8042 | background-position: center; |
| 8037 | background-image: url(/src/style/img/icon-db.png); | 8043 | background-image: url(/src/style/img/icon-db.png); |
| @@ -8062,6 +8068,8 @@ table.table-duty tbody td div.table-duty-td-day .duty-td-div-now { | @@ -8062,6 +8068,8 @@ table.table-duty tbody td div.table-duty-td-day .duty-td-div-now { | ||
| 8062 | width: 61%; | 8068 | width: 61%; |
| 8063 | float: left; | 8069 | float: left; |
| 8064 | padding-left: 10px; | 8070 | padding-left: 10px; |
| 8071 | + /*lsq 详情页节点池样式修改 2022-08-08*/ | ||
| 8072 | + flex:1; | ||
| 8065 | } | 8073 | } |
| 8066 | 8074 | ||
| 8067 | .detail-loadbalancing-vs .vs-info li { | 8075 | .detail-loadbalancing-vs .vs-info li { |
| @@ -8375,7 +8383,7 @@ form.layui-card-header.layuiadmin-card-header-auto { | @@ -8375,7 +8383,7 @@ form.layui-card-header.layuiadmin-card-header-auto { | ||
| 8375 | 8383 | ||
| 8376 | .info-table .div-link-state-list { | 8384 | .info-table .div-link-state-list { |
| 8377 | height: 30px; | 8385 | height: 30px; |
| 8378 | - width: calc(100% - 12px); | 8386 | + width: calc(100%); |
| 8379 | float: left; | 8387 | float: left; |
| 8380 | } | 8388 | } |
| 8381 | 8389 | ||
| @@ -8551,4 +8559,7 @@ form.layui-card-header.layuiadmin-card-header-auto { | @@ -8551,4 +8559,7 @@ form.layui-card-header.layuiadmin-card-header-auto { | ||
| 8551 | } | 8559 | } |
| 8552 | .res .layui-card-body{ | 8560 | .res .layui-card-body{ |
| 8553 | background: #ffffff; | 8561 | background: #ffffff; |
| 8554 | -} | ||
| 8562 | +} | ||
| 8563 | +.layui-layer-tips{ | ||
| 8564 | + word-break: break-all; | ||
| 8565 | +} |
1.27 KB
| 1 | <article> | 1 | <article> |
| 2 | - <form action="" class="layui-form layui-form-pane" lay-filter="form-flag-edit"> | ||
| 3 | - <fieldset class="layui-elem-field layui-field-title"> | ||
| 4 | - <legend>基本信息</legend> | ||
| 5 | - </fieldset> | ||
| 6 | - <div class="layui-form-item"> | ||
| 7 | - <div class="inline-half layui-inline "> | ||
| 8 | - <label class="layui-form-label">编码</label> | ||
| 9 | - <div class="layui-input-inline"> | ||
| 10 | - <input class="layui-input" lay-verify="required" name="flag" placeholder="请输入编码" type="text"> | ||
| 11 | - </div> | ||
| 12 | - </div> | ||
| 13 | - <div class="inline-half layui-inline"> | ||
| 14 | - <label class="layui-form-label">名称</label> | ||
| 15 | - <div class="layui-input-inline"> | ||
| 16 | - <input class="layui-input" lay-verify="required" name="name" placeholder="请输入名称" required | ||
| 17 | - type="text"> | ||
| 18 | - </div> | ||
| 19 | - </div> | 2 | + <form class="layui-form layui-form-pane" action="" lay-filter="form-flag-edit"> |
| 3 | + <fieldset class="layui-elem-field layui-field-title"> | ||
| 4 | + <legend>基本信息</legend> | ||
| 5 | + </fieldset> | ||
| 6 | + <div class="layui-form-item"> | ||
| 7 | + <div class="inline-half layui-inline "> | ||
| 8 | + <label class="layui-form-label">编码<span style="color: red">*</span></label> | ||
| 9 | + <div class="layui-input-inline"> | ||
| 10 | + <input type="text" name="flag" lay-verify="required" placeholder="请输入编码" class="layui-input"> | ||
| 20 | </div> | 11 | </div> |
| 21 | - <div class="layui-form-item"> | ||
| 22 | - <label class="layui-form-label textarea-label">说明</label> | ||
| 23 | - <div class="layui-input-block"> | ||
| 24 | - <textarea class="layui-textarea" name="remark" placeholder="请输入说明"></textarea> | ||
| 25 | - </div> | 12 | + </div> |
| 13 | + <div class="inline-half layui-inline"> | ||
| 14 | + <label class="layui-form-label">维度<span style="color: red">*</span></label> | ||
| 15 | + <div class="layui-input-inline"> | ||
| 16 | + <select name="dimension" lay-verify="required" class="layui-select"> | ||
| 17 | + <option value="">=选择维度=</option> | ||
| 18 | + <option value="1D">一维</option> | ||
| 19 | + <option value="2D">二维</option> | ||
| 20 | + </select> | ||
| 26 | </div> | 21 | </div> |
| 27 | - <button class="hide" id="btn-kpiflag-submit" lay-filter="kpi-flag-submit" lay-submit>提交</button> | ||
| 28 | - </form> | ||
| 29 | - <form class="layui-form layui-form-pane" onsubmit="return false"> | ||
| 30 | - <fieldset class="layui-elem-field layui-field-title"> | ||
| 31 | - <legend>绑定指标 | ||
| 32 | - <button class="layui-btn layui-btn-xs layui-btn-normal fieldset-btn" id="btn-kpiflag-kpi-bind"><i | ||
| 33 | - class="layui-icon"></i></button> | ||
| 34 | - </legend> | ||
| 35 | - </fieldset> | ||
| 36 | - <div class="layui-form-item layui-form-item-flex"> | ||
| 37 | - <table class="input-flex-1" id="kpiflag-edit-table"></table> | 22 | + </div> |
| 23 | + </div> | ||
| 24 | + <div class="layui-form-item"> | ||
| 25 | + <div class="inline-half layui-inline"> | ||
| 26 | + <label class="layui-form-label">名称<span style="color: red">*</span></label> | ||
| 27 | + <div class="layui-input-inline"> | ||
| 28 | + <input type="text" name="name" required lay-verify="required" placeholder="请输入名称" class="layui-input"> | ||
| 38 | </div> | 29 | </div> |
| 39 | - <div class="layui-form-item layui-form-item-flex hide"> | ||
| 40 | - <div class="layui-input-block input-flex-1"> | ||
| 41 | - <input name="chartType" title="列表" type="radio" value=""> | ||
| 42 | - <input name="chartType" title="折线图" type="radio" value=""> | ||
| 43 | - <input name="chartType" title="柱状图" type="radio" value=""> | ||
| 44 | - <input name="chartType" title="饼图" type="radio" value=""> | ||
| 45 | - </div> | 30 | + </div> |
| 31 | + <div class="inline-half layui-inline"> | ||
| 32 | + <label class="layui-form-label">描述<span style="color: red">*</span></label> | ||
| 33 | + <div class="layui-input-inline"> | ||
| 34 | + <input type="text" name="describes" required lay-verify="required" placeholder="请输入名称" class="layui-input"> | ||
| 46 | </div> | 35 | </div> |
| 47 | - <div class="layui-form-item"> | ||
| 48 | - <div class="layui-inline"> | ||
| 49 | - <button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-kpi-flag-restype-bind"><i | ||
| 50 | - class="layui-icon"></i>绑定到资源类型 | ||
| 51 | - </button> | ||
| 52 | - </div> | ||
| 53 | - <div class="layui-inline"> | ||
| 54 | - <button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-kpi-flag-app-bind"><i | ||
| 55 | - class="layui-icon"></i>绑定到应用 | ||
| 56 | - </button> | ||
| 57 | - </div> | ||
| 58 | - <div class="layui-inline"> | ||
| 59 | - <button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-kpi-flag-server-bind"><i | ||
| 60 | - class="layui-icon"></i>绑定到服务 | ||
| 61 | - </button> | ||
| 62 | - </div> | 36 | + </div> |
| 37 | + </div> | ||
| 38 | + <div class="layui-form-item"> | ||
| 39 | + <div class="inline-half layui-inline"> | ||
| 40 | + <label class="layui-form-label">创建人<span style="color: red">*</span></label> | ||
| 41 | + <div class="layui-input-inline"> | ||
| 42 | + <input type="text" name="createUser" required lay-verify="required" placeholder="请输入创建人" class="layui-input"> | ||
| 63 | </div> | 43 | </div> |
| 64 | - </form> | ||
| 65 | - <form class="layui-form layui-form-pane" onsubmit="return false"> | ||
| 66 | - <fieldset class="layui-elem-field layui-field-title"> | ||
| 67 | - <legend>绑定信息</legend> | ||
| 68 | - </fieldset> | ||
| 69 | - <div class="layui-collapse" id="div-flag-bind"> | ||
| 70 | - <div class="layui-colla-item flex-1"> | ||
| 71 | - <h2 class="layui-colla-title">绑定的资源类型 数量：<span id="txt-flag-bind-resTypeCount">0</span></h2> | ||
| 72 | - <div class="layui-colla-content"> | ||
| 73 | - <table id="table-flag-bind-retype"></table> | ||
| 74 | - </div> | ||
| 75 | - </div> | ||
| 76 | - <div class="layui-colla-item"> | ||
| 77 | - <h2 class="layui-colla-title">绑定的应用 数量：<span id="txt-flag-bind-appCount">0</span></h2> | ||
| 78 | - <div class="layui-colla-content"> | ||
| 79 | - <table id="table-flag-bind-app"></table> | ||
| 80 | - </div> | ||
| 81 | - </div> | ||
| 82 | - <div class="layui-colla-item"> | ||
| 83 | - <h2 class="layui-colla-title">绑定的服务 数量：<span id="txt-flag-bind-serverCount">0</span></h2> | ||
| 84 | - <div class="layui-colla-content"> | ||
| 85 | - <table id="table-flag-bind-server"></table> | ||
| 86 | - </div> | ||
| 87 | - </div> | 44 | + </div> |
| 45 | + <div class="inline-half layui-inline"> | ||
| 46 | + <label class="layui-form-label">创建时间</label> | ||
| 47 | + <div class="layui-input-inline"> | ||
| 48 | + <input type="text" name="createTime" disabled class="layui-input"> | ||
| 88 | </div> | 49 | </div> |
| 89 | - </form> | 50 | + </div> |
| 51 | + </div> | ||
| 52 | + <div class="layui-form-item"> | ||
| 53 | + <label class="layui-form-label textarea-label">说明</label> | ||
| 54 | + <div class="layui-input-block"> | ||
| 55 | + <textarea name="remark" placeholder="请输入说明" class="layui-textarea"></textarea> | ||
| 56 | + </div> | ||
| 57 | + </div> | ||
| 58 | + <button id="btn-kpiflag-submit" class="hide" lay-submit lay-filter="kpi-flag-submit">提交</button> | ||
| 59 | + </form> | ||
| 60 | + <form class="layui-form layui-form-pane" onsubmit="return false"> | ||
| 61 | + <fieldset class="layui-elem-field layui-field-title"> | ||
| 62 | + <legend>绑定指标 | ||
| 63 | + <button class="layui-btn layui-btn-xs layui-btn-normal fieldset-btn" id="btn-kpiflag-kpi-bind"><i class="layui-icon"></i></button> | ||
| 64 | + </legend> | ||
| 65 | + </fieldset> | ||
| 66 | + <div class="layui-form-item layui-form-item-flex kpiflag-edit-table"> | ||
| 67 | + <table id="kpiflag-edit-table" class="input-flex-1"></table> | ||
| 68 | + </div> | ||
| 69 | + <div class="layui-form-item layui-form-item-flex hide"> | ||
| 70 | + <div class="layui-input-block input-flex-1"> | ||
| 71 | + <input type="radio" name="chartType" value="" title="列表"> | ||
| 72 | + <input type="radio" name="chartType" value="" title="折线图"> | ||
| 73 | + <input type="radio" name="chartType" value="" title="柱状图"> | ||
| 74 | + <input type="radio" name="chartType" value="" title="饼图"> | ||
| 75 | + </div> | ||
| 76 | + </div> | ||
| 77 | + <div class="layui-form-item"> | ||
| 78 | + <div class="layui-inline"> | ||
| 79 | + <button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-kpi-flag-restype-bind"><i class="layui-icon"></i>绑定到资源类型</button> | ||
| 80 | + </div> | ||
| 81 | + <div class="layui-inline"> | ||
| 82 | + <button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-kpi-flag-app-bind"><i class="layui-icon"></i>绑定到应用</button> | ||
| 83 | + </div> | ||
| 84 | + <div class="layui-inline"> | ||
| 85 | + <button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-kpi-flag-server-bind"><i class="layui-icon"></i>绑定到服务</button> | ||
| 86 | + </div> | ||
| 87 | + </div> | ||
| 88 | + </form> | ||
| 89 | + <form class="layui-form layui-form-pane" onsubmit="return false"> | ||
| 90 | + <fieldset class="layui-elem-field layui-field-title"> | ||
| 91 | + <legend>绑定信息</legend> | ||
| 92 | + </fieldset> | ||
| 93 | + <div class="layui-collapse" id="div-flag-bind"> | ||
| 94 | + <div class="layui-colla-item flex-1"> | ||
| 95 | + <h2 class="layui-colla-title">绑定的资源类型 数量：<span id="txt-flag-bind-resTypeCount">0</span></h2> | ||
| 96 | + <div class="layui-colla-content"> | ||
| 97 | + <table id="table-flag-bind-retype"></table> | ||
| 98 | + </div> | ||
| 99 | + </div> | ||
| 100 | + <div class="layui-colla-item"> | ||
| 101 | + <h2 class="layui-colla-title">绑定的应用 数量：<span id="txt-flag-bind-appCount">0</span></h2> | ||
| 102 | + <div class="layui-colla-content"> | ||
| 103 | + <table id="table-flag-bind-app"></table> | ||
| 104 | + </div> | ||
| 105 | + </div> | ||
| 106 | + <div class="layui-colla-item"> | ||
| 107 | + <h2 class="layui-colla-title">绑定的服务 数量：<span id="txt-flag-bind-serverCount">0</span></h2> | ||
| 108 | + <div class="layui-colla-content"> | ||
| 109 | + <table id="table-flag-bind-server"></table> | ||
| 110 | + </div> | ||
| 111 | + </div> | ||
| 112 | + </div> | ||
| 113 | + </form> | ||
| 90 | </article> | 114 | </article> |
| 91 | <script> | 115 | <script> |
| 92 | - layui.use('kpiflagEdit', function (fn) { | ||
| 93 | - fn({{ d }}); | ||
| 94 | - }); | ||
| 95 | -</script> | 116 | + layui.use('kpiflagEdit', function (fn) { |
| 117 | + fn({{d}}); | ||
| 118 | + }); | ||
| 119 | +</script> |
| @@ -5,30 +5,58 @@ | @@ -5,30 +5,58 @@ | ||
| 5 | <div class="layui-card"> | 5 | <div class="layui-card"> |
| 6 | <div class="layui-card-header"> | 6 | <div class="layui-card-header"> |
| 7 | <div class="layui-status"> | 7 | <div class="layui-status"> |
| 8 | - <form class="layui-form layui-card-header layuiadmin-card-header-auto" | ||
| 9 | - lay-filter="kpiflag-form"> | 8 | + <form class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="kpiflag-form"> |
| 10 | <div class="layui-form-item"> | 9 | <div class="layui-form-item"> |
| 11 | <div class="layui-inline"> | 10 | <div class="layui-inline"> |
| 12 | <div class="layui-input-inline layui-input-inline--long"> | 11 | <div class="layui-input-inline layui-input-inline--long"> |
| 13 | - <input autocomplete="off" class="layui-input" id="kpiflag_keyword" | ||
| 14 | - lay-tips="关键字检索包含： </br>指标组名称" name="kpiflag_keyword" | ||
| 15 | - placeholder="输入关键字，回车搜索" | ||
| 16 | - type="text"> | ||
| 17 | - <input style="display: none" type="text"> | 12 | + <input type="text" id="kpiflag_keyword" name="kpiflag_keyword" placeholder="输入关键字，回车搜索" autocomplete="off" |
| 13 | + lay-tips="关键字检索包含： </br>指标组名称</br>flag</br>备注</br>绑定资源类型</br>绑定指标</br>指标组描述</br>创建人" | ||
| 14 | + class="layui-input"> | ||
| 15 | + <input type="text" style="display: none"> | ||
| 18 | </div> | 16 | </div> |
| 19 | </div> | 17 | </div> |
| 18 | + <div class="layui-inline"> | ||
| 19 | + <div class="layui-input-inline layui-input-inline--long"> | ||
| 20 | + <input type="text" id="kpiflag_describe" name="kpiflag_describe" placeholder="输入指标组描述，回车搜索" autocomplete="off" | ||
| 21 | + class="layui-input"> | ||
| 22 | + <input type="text" style="display: none"> | ||
| 23 | + </div> | ||
| 24 | + </div> | ||
| 25 | + <div class="layui-inline"> | ||
| 26 | + <div class="layui-input-inline layui-input-inline--long"> | ||
| 27 | + <input type="text" id="kpiflag_kpis" name="kpiflag_kpis" placeholder="输入指标名称，回车搜索" autocomplete="off" | ||
| 28 | + class="layui-input"> | ||
| 29 | + <input type="text" style="display: none"> | ||
| 30 | + </div> | ||
| 31 | + </div> | ||
| 32 | + <div class="layui-inline"> | ||
| 33 | + <div class="layui-input-inline layui-input-inline--long"> | ||
| 34 | + <input type="text" id="kpiflag_restypes" name="kpiflag_restypes" placeholder="输入资源类型，回车搜索" autocomplete="off" | ||
| 35 | + class="layui-input"> | ||
| 36 | + <input type="text" style="display: none"> | ||
| 37 | + </div> | ||
| 38 | + </div> | ||
| 39 | + <div class="layui-inline"> | ||
| 40 | + <div class="layui-input-inline layui-input-inline--long"> | ||
| 41 | + <select name="dimension" class="layui-select" lay-filter="change"> | ||
| 42 | + <option value="">=选择维度=</option> | ||
| 43 | + <option value="1D">一维</option> | ||
| 44 | + <option value="2D">二维</option> | ||
| 45 | + </select> | ||
| 46 | + </div> | ||
| 47 | + </div> | ||
| 48 | + <button class="layui-btn layui-btn-normal" id="kpiflagQueryBtn" type="button"> | ||
| 49 | + <!--lsq 查询按钮取消掉图标 2022-06-30--> | ||
| 50 | + 查询 | ||
| 51 | + </button> | ||
| 20 | </div> | 52 | </div> |
| 21 | </form> | 53 | </form> |
| 22 | </div> | 54 | </div> |
| 23 | </div> | 55 | </div> |
| 24 | <div class="layui-card-body"> | 56 | <div class="layui-card-body"> |
| 25 | <div class="warn-btns"> | 57 | <div class="warn-btns"> |
| 26 | - <button class="layui-btn layui-btn-sm layui-btn-normal" id="addkpiflag" type="button"><i | ||
| 27 | - class="layui-icon"></i>新增 | ||
| 28 | - </button> | ||
| 29 | - <button class="layui-btn layui-btn-sm layui-btn-normal" id="delkpiflag" type="button"><i | ||
| 30 | - class="layui-icon"></i>删除 | ||
| 31 | - </button> | 58 | + <button id="addkpiflag" type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon"></i>新增</button> |
| 59 | + <button id="delkpiflag" type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon"></i>删除</button> | ||
| 32 | </div> | 60 | </div> |
| 33 | <table id="kpiflag_table"></table> | 61 | <table id="kpiflag_table"></table> |
| 34 | </div> | 62 | </div> |
| @@ -42,3 +70,8 @@ | @@ -42,3 +70,8 @@ | ||
| 42 | fn(); | 70 | fn(); |
| 43 | }); | 71 | }); |
| 44 | </script> | 72 | </script> |
| 73 | +<style> | ||
| 74 | + .layui-status .layui-input-inline--long { | ||
| 75 | + width: 190px !important; | ||
| 76 | + } | ||
| 77 | +</style> |
| 1 | +<article> | ||
| 2 | + <form class="layui-form layui-form-pane" action="" lay-filter="form-restypepage-edit"> | ||
| 3 | + <fieldset class="layui-elem-field layui-field-title"> | ||
| 4 | + <legend>基本信息</legend> | ||
| 5 | + </fieldset> | ||
| 6 | + <div class="layui-form-item"> | ||
| 7 | + <div class="inline-half layui-inline"> | ||
| 8 | + <label class="layui-form-label">页面名称<span style="color: red">*</span></label> | ||
| 9 | + <div class="layui-input-inline"> | ||
| 10 | + <input type="text" name="name" lay-verify="required" placeholder="请输入页面名称" class="layui-input"> | ||
| 11 | + </div> | ||
| 12 | + </div> | ||
| 13 | + <div class="inline-half layui-inline"> | ||
| 14 | + <label class="layui-form-label">资源类型<span style="color: red">*</span></label> | ||
| 15 | + <div class="layui-input-inline"> | ||
| 16 | + <select name="resType" lay-verify="required" lay-search="" id="restypepagekpi_select_resType" class="layui-select"> | ||
| 17 | + <option value="">=资源类型=</option> | ||
| 18 | + </select> | ||
| 19 | + </div> | ||
| 20 | + </div> | ||
| 21 | + </div> | ||
| 22 | + <div class="layui-form-item"> | ||
| 23 | + <div class="inline-half layui-inline"> | ||
| 24 | + <label class="layui-form-label">操作系统</label> | ||
| 25 | + <div class="layui-input-inline"> | ||
| 26 | + <select name="os" id="restypepagekpiOs" lay-search="" class="layui-select"> | ||
| 27 | + <option value="">=操作系统=</option> | ||
| 28 | + </select> | ||
| 29 | + </div> | ||
| 30 | + </div> | ||
| 31 | + <div class="inline-half layui-inline"> | ||
| 32 | + <label class="layui-form-label">厂商</label> | ||
| 33 | + <div class="layui-input-inline"> | ||
| 34 | + <select name="provider" id="restypepagekpiProvider" lay-search="" class="layui-select"> | ||
| 35 | + <option value="">=厂商=</option> | ||
| 36 | + </select> | ||
| 37 | + </div> | ||
| 38 | + </div> | ||
| 39 | + </div> | ||
| 40 | + <div class="layui-form-item"> | ||
| 41 | + <div class="inline-half layui-inline"> | ||
| 42 | + <label class="layui-form-label">采集协议</label> | ||
| 43 | + <div class="layui-input-inline"> | ||
| 44 | + <select name="protocol" id="restypepagekpiCollProtocol" lay-search="" class="layui-select"> | ||
| 45 | + <option value="">=采集协议=</option> | ||
| 46 | + </select> | ||
| 47 | + </div> | ||
| 48 | + </div> | ||
| 49 | + <div class="inline-half layui-inline"> | ||
| 50 | + <label class="layui-form-label">型号</label> | ||
| 51 | + <div class="layui-input-inline"> | ||
| 52 | + <input type="text" name="model" placeholder="请输入型号" class="layui-input"> | ||
| 53 | + </div> | ||
| 54 | + </div> | ||
| 55 | + </div> | ||
| 56 | + <div class="layui-form-item"> | ||
| 57 | + <div class="inline-half layui-inline"> | ||
| 58 | + <label class="layui-form-label">排序<span style="color: red">*</span></label> | ||
| 59 | + <div class="layui-input-inline"> | ||
| 60 | + <input class="layui-input" lay-verify="required" name="sort" value="1" placeholder="请输入排序" type="number"> | ||
| 61 | + </div> | ||
| 62 | + </div> | ||
| 63 | + <div class="inline-half layui-inline"> | ||
| 64 | + <label class="layui-form-label">辅助关键字</label> | ||
| 65 | + <div class="layui-input-inline"> | ||
| 66 | + <input type="text" name="keyword" placeholder="请输入辅助关键字" class="layui-input"> | ||
| 67 | + </div> | ||
| 68 | + </div> | ||
| 69 | + </div> | ||
| 70 | + <div class="layui-form-item"> | ||
| 71 | + <div class="inline-half layui-inline"> | ||
| 72 | + <label class="layui-form-label">创建人<span style="color: red">*</span></label> | ||
| 73 | + <div class="layui-input-inline"> | ||
| 74 | + <input type="text" name="createUser" required lay-verify="required" placeholder="请输入创建人" class="layui-input"> | ||
| 75 | + </div> | ||
| 76 | + </div> | ||
| 77 | + </div> | ||
| 78 | + <div class="layui-form-item"> | ||
| 79 | + <label class="layui-form-label textarea-label">备注</label> | ||
| 80 | + <div class="layui-input-block"> | ||
| 81 | + <textarea name="remark" placeholder="请输入备注" class="layui-textarea"></textarea> | ||
| 82 | + </div> | ||
| 83 | + </div> | ||
| 84 | + <button id="btn-restypepage-submit" class="hide" lay-submit lay-filter="kpi-flag-submit">提交</button> | ||
| 85 | + </form> | ||
| 86 | + <form class="layui-form layui-form-pane" onsubmit="return false"> | ||
| 87 | + <fieldset class="layui-elem-field layui-field-title"> | ||
| 88 | + <legend>选择指标组 | ||
| 89 | + <button class="layui-btn layui-btn-xs layui-btn-normal fieldset-btn" id="btn-restypepage-kpi-bind"><i class="layui-icon"></i></button> | ||
| 90 | + </legend> | ||
| 91 | + </fieldset> | ||
| 92 | + <div class="layui-form-item layui-form-item-flex restypepage-edit-table"> | ||
| 93 | + <table id="restypepage-edit-table" class="input-flex-1"></table> | ||
| 94 | + </div> | ||
| 95 | + </form> | ||
| 96 | +</article> | ||
| 97 | +<script> | ||
| 98 | + layui.use('restypepageEdit', function (fn) { | ||
| 99 | + fn({{d}}); | ||
| 100 | + }); | ||
| 101 | +</script> | ||
| 102 | +<style> | ||
| 103 | + [lay-id="restypepage-edit-table"] .layui-table-cell { | ||
| 104 | + height: auto !important; | ||
| 105 | + } | ||
| 106 | +</style> |
hg-monitor-web-base/src/main/resources/static/src/views/baseconfig/restypepage/index.html
0 → 100644
| 1 | +<title>资源类型页面配置</title> | ||
| 2 | +<article class="page-container"> | ||
| 3 | + <div class="page-panel"> | ||
| 4 | + <div class="main commonDiv"> | ||
| 5 | + <div class="layui-card"> | ||
| 6 | + <div class="layui-card-header"> | ||
| 7 | + <div class="layui-status"> | ||
| 8 | + <form class="layui-card-header layuiadmin-card-header-auto layui-form" | ||
| 9 | + lay-filter="form-restypepage-condition" id="restypepageQueryForm"> | ||
| 10 | + <div class="layui-form-item"> | ||
| 11 | + <div class="layui-inline"> | ||
| 12 | + <div class="layui-input-inline layui-input-inline--long"> | ||
| 13 | + <input autocomplete="off" class="layui-input" name="keywords" placeholder="输入关键字，回车搜索" lay-tips="关键字检索包含：</br>页面名称</br>型号</br>关键字</br>备注</br>指标组名称</br>指标名称" | ||
| 14 | + type="text"> | ||
| 15 | + </div> | ||
| 16 | + </div> | ||
| 17 | + <div class="layui-inline"> | ||
| 18 | + <div class="layui-input-inline"> | ||
| 19 | + <select name="restypepageresType" id="restypepage_select_resType" lay-search="" lay-filter="change"> | ||
| 20 | + <option value="">=资源类型=</option> | ||
| 21 | + </select> | ||
| 22 | + </div> | ||
| 23 | + </div> | ||
| 24 | + <div class="layui-inline"> | ||
| 25 | + <div class="layui-input-inline"> | ||
| 26 | + <select id="restypepageCollProtocol" lay-search="" name="restypepagecollProtocol" lay-filter="change"> | ||
| 27 | + <option value="">=采集协议=</option> | ||
| 28 | + </select> | ||
| 29 | + </div> | ||
| 30 | + </div> | ||
| 31 | + <div class="layui-inline"> | ||
| 32 | + <div class="layui-input-inline"> | ||
| 33 | + <select id="restypepageOs" lay-search="" name="restypepageos" lay-filter="change"> | ||
| 34 | + <option value="">=操作系统=</option> | ||
| 35 | + </select> | ||
| 36 | + </div> | ||
| 37 | + </div> | ||
| 38 | + <div class="layui-inline"> | ||
| 39 | + <div class="layui-input-inline"> | ||
| 40 | + <select id="restypepageProvider" lay-search="" name="restypepageprovider" lay-filter="change"> | ||
| 41 | + <option value="">=厂商=</option> | ||
| 42 | + </select> | ||
| 43 | + </div> | ||
| 44 | + </div> | ||
| 45 | + <button class="layui-btn layui-btn-normal" id="restypepageQueryBtn" type="button"> | ||
| 46 | + <!--lsq 查询按钮取消掉图标 2022-06-30--> | ||
| 47 | + 查询 | ||
| 48 | + </button> | ||
| 49 | + </div> | ||
| 50 | + </form> | ||
| 51 | + </div> | ||
| 52 | + </div> | ||
| 53 | + <div class="layui-card-body"> | ||
| 54 | + <div class="warn-btns"> | ||
| 55 | + <button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-restypepage-add"> | ||
| 56 | + <i class="layui-icon layui-icon-add-1"></i>新增 | ||
| 57 | + </button> | ||
| 58 | + <button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-restypepage-delete"> | ||
| 59 | + <i class="layui-icon layui-icon-delete"></i>删除 | ||
| 60 | + </button> | ||
| 61 | + </div> | ||
| 62 | + <table id="table-restypepage-list" lay-filter="table-restypepage-list"></table> | ||
| 63 | + </div> | ||
| 64 | + </div> | ||
| 65 | + </div> | ||
| 66 | + </div> | ||
| 67 | +</article> | ||
| 68 | +<script> | ||
| 69 | + layui.use('restypepageIndex', function (fn) { | ||
| 70 | + fn(); | ||
| 71 | + }); | ||
| 72 | +</script> |
hg-monitor-web-base/src/main/resources/static/src/views/template/detail/snapshot_detail.html
0 → 100644
| 1 | +<!--快照详细页面--> | ||
| 2 | +<article class="page-container template"> | ||
| 3 | + <div class="page-panel"> | ||
| 4 | + <div class="main"> | ||
| 5 | + <div class="layui-card"> | ||
| 6 | + <div class="layui-card-body"> | ||
| 7 | + <div class="lay-row"> | ||
| 8 | + <div class="lay-row-item" style="max-width: 200px"> | ||
| 9 | + <h5 class="lay-row-title">资源状态</h5> | ||
| 10 | + <div class="res-state" id="hostminicomputerpartition_resstate"> | ||
| 11 | + <div class="res-state-pie res-state-pie--good">优</div> | ||
| 12 | + <ul> | ||
| 13 | + <li>严重告警：0</li> | ||
| 14 | + <li>重要告警：0</li> | ||
| 15 | + <li>一般告警：0</li> | ||
| 16 | + </ul> | ||
| 17 | + </div> | ||
| 18 | + </div> | ||
| 19 | + <div class="lay-row-item lay-row-item--half" style="width: calc(100% - 200px)"> | ||
| 20 | + <h5 class="lay-row-title">基本信息<i class="iconfont detail_base_info" | ||
| 21 | + data-id="hostminicomputerpartition_jbxx"></i></h5> | ||
| 22 | + <ul class="info-table" id="hostminicomputerpartition_jbxx"> | ||
| 23 | + </ul> | ||
| 24 | + </div> | ||
| 25 | + </div> | ||
| 26 | + <div class="lay-row"> | ||
| 27 | + <div class="lay-row-item lay-row-item--half" style="width: calc(100% - 10px)"> | ||
| 28 | + <h5 class="lay-row-title">性能信息<i class="iconfont detail_base_info" | ||
| 29 | + data-id="hostminicomputerpartition_sysfile"></i></h5> | ||
| 30 | + <ul class="info-table" id="hostminicomputerpartition_sysfile"></ul> | ||
| 31 | + </div> | ||
| 32 | + </div> | ||
| 33 | + <div id="table_arr_body"> | ||
| 34 | + </div> | ||
| 35 | + <div class="lay-row"> | ||
| 36 | + <div class="lay-row-item"> | ||
| 37 | + <h5 class="lay-row-title">告警列表</h5> | ||
| 38 | + <div id="snapshow_active_alram"></div> | ||
| 39 | + </div> | ||
| 40 | + </div> | ||
| 41 | + </div> | ||
| 42 | + </div> | ||
| 43 | + </div> | ||
| 44 | + </div> | ||
| 45 | +</article> | ||
| 46 | +<textarea id="snapshot_detail_param_id" style="display: none;">{{d}}</textarea> | ||
| 47 | +<script> | ||
| 48 | + layui.use('snapshot_detail', function (fn) { | ||
| 49 | + var $ = layui.$; | ||
| 50 | + var parm = $("#snapshot_detail_param_id").val(); | ||
| 51 | + if (parm.indexOf('{{d') != -1) { | ||
| 52 | + fn(); | ||
| 53 | + } else { | ||
| 54 | + fn(JSON.parse(parm)); | ||
| 55 | + } | ||
| 56 | + }); | ||
| 57 | +</script> |
hg-monitor-web-base/src/main/resources/static/src/views/template/detail/snapshot_detail_more.html
0 → 100644
| 1 | +<title>快照更多展示</title> | ||
| 2 | +<article class="page-container"> | ||
| 3 | + <div class="page-panel"> | ||
| 4 | + <div class="main"> | ||
| 5 | + <div class="layui-card"> | ||
| 6 | + <div class="layui-card-body"> | ||
| 7 | + <table id="detail_more_snapshot" lay-filter="detail_more_snapshot"></table> | ||
| 8 | + </div> | ||
| 9 | + </div> | ||
| 10 | + </div> | ||
| 11 | + </div> | ||
| 12 | +</article> | ||
| 13 | + | ||
| 14 | +<script> | ||
| 15 | + layui.use('snapshot_detail_more', function (fn) { | ||
| 16 | + fn({{ d }}); | ||
| 17 | + }); | ||
| 18 | +</script> |
hg-monitor-web-base/src/main/resources/static/vue3/src/components/common/inputbiztypetree/index.html
| 1 | <div> | 1 | <div> |
| 2 | <el-select :size="$global.elementConfig.size.input" :collapse-tags="true" :filter-method="selectFilterMethod" :filterable="isFilter" | 2 | <el-select :size="$global.elementConfig.size.input" :collapse-tags="true" :filter-method="selectFilterMethod" :filterable="isFilter" |
| 3 | - :size="size" @change="selectChangeMethod" @visible-change="selectClose" clearable placeholder="所属系统" | 3 | + :size="size" @change="selectChangeMethod" @visible-change="selectClose" clearable placeholder="所属业务" |
| 4 | style="min-width: 120px;" v-model="modelValueLabel"> | 4 | style="min-width: 120px;" v-model="modelValueLabel"> |
| 5 | <el-option :value="modelValue" style="height: auto;padding: 0;"> | 5 | <el-option :value="modelValue" style="height: auto;padding: 0;"> |
| 6 | <el-tree :check-on-click-node="true" :check-strictly="false" :data="list" :default-expand-all="isDefaultAll" | 6 | <el-tree :check-on-click-node="true" :check-strictly="false" :data="list" :default-expand-all="isDefaultAll" |
| @@ -64,7 +64,7 @@ export default { | @@ -64,7 +64,7 @@ export default { | ||
| 64 | }, | 64 | }, |
| 65 | selectFilterMethod(val) { | 65 | selectFilterMethod(val) { |
| 66 | // 下拉框调用tree树筛选 | 66 | // 下拉框调用tree树筛选 |
| 67 | - this.$refs.kpiTree.filter(val) | 67 | + this.$refs.bizTree.filter(val) |
| 68 | }, | 68 | }, |
| 69 | selectChangeMethod(e) { | 69 | selectChangeMethod(e) { |
| 70 | var arrNew = [] | 70 | var arrNew = [] |
| @@ -78,7 +78,7 @@ export default { | @@ -78,7 +78,7 @@ export default { | ||
| 78 | } | 78 | } |
| 79 | } | 79 | } |
| 80 | // 设置勾选的值 | 80 | // 设置勾选的值 |
| 81 | - this.$refs.kpiTree.setCheckedNodes(arrNew) | 81 | + this.$refs.bizTree.setCheckedNodes(arrNew) |
| 82 | }, | 82 | }, |
| 83 | filterNode(value, data) { | 83 | filterNode(value, data) { |
| 84 | if (!value) return true | 84 | if (!value) return true |
hg-monitor-web-base/src/main/resources/static/vue3/src/components/common/inputusertree/index.html
0 → 100644
| 1 | +<div> | ||
| 2 | + <el-select :size="$global.elementConfig.size.input" :collapse-tags="true" :filter-method="selectFilterMethod" :filterable="isFilter" | ||
| 3 | + :size="size" @change="selectChangeMethod" @visible-change="selectClose" clearable placeholder="选择用户" | ||
| 4 | + style="min-width: 120px;" v-model="modelValueLabel"> | ||
| 5 | + <el-option :value="modelValue" style="height: auto;padding: 0;"> | ||
| 6 | + <el-tree :check-on-click-node="true" :check-strictly="false" :data="list" :default-expand-all="isDefaultAll" | ||
| 7 | + :empty-text="emptyText" :expand-on-click-node="true" :filter-node-method="filterNode" | ||
| 8 | + :props="defaultProps" :show-checkbox="isMultiple" :show-checkbox="checkbox" @check-change="handleCheckChange" | ||
| 9 | + node-key="id" node-key="id" ref="userTree"> | ||
| 10 | + </el-tree> | ||
| 11 | + </el-option> | ||
| 12 | + </el-select> | ||
| 13 | +</div> |
hg-monitor-web-base/src/main/resources/static/vue3/src/components/common/inputusertree/index.js
0 → 100644
| 1 | +export default { | ||
| 2 | + template: '', | ||
| 3 | + name: 'user-tree-input', | ||
| 4 | + props: { | ||
| 5 | + // echoObj 可以用于回显，它的值为需要回显的对象，多个时可以使用数组 | ||
| 6 | + echoObj: {}, | ||
| 7 | + // 是否开启搜索 | ||
| 8 | + isFilter: { | ||
| 9 | + default: true | ||
| 10 | + }, | ||
| 11 | + // 尺寸 | ||
| 12 | + size: { | ||
| 13 | + default: '' | ||
| 14 | + }, | ||
| 15 | + placeholderText: { | ||
| 16 | + default: '选择用户' | ||
| 17 | + }, | ||
| 18 | + isTag: { | ||
| 19 | + default: true | ||
| 20 | + }, | ||
| 21 | + isDefaultAll: { | ||
| 22 | + default: true | ||
| 23 | + }, | ||
| 24 | + // 点击节点是否展开 | ||
| 25 | + expandClickNode: { | ||
| 26 | + default: false | ||
| 27 | + }, | ||
| 28 | + // 字段key，用于取出数据中的名字 | ||
| 29 | + fieldName: { | ||
| 30 | + default: 'title' | ||
| 31 | + }, | ||
| 32 | + emptyText: { | ||
| 33 | + default: '无匹配项' | ||
| 34 | + }, | ||
| 35 | + // 字段key， 数据中的id | ||
| 36 | + fieldId: { | ||
| 37 | + default: '' | ||
| 38 | + }, | ||
| 39 | + // 配置是否可多选 | ||
| 40 | + isMultiple: { | ||
| 41 | + type: Boolean, | ||
| 42 | + default: true | ||
| 43 | + }, | ||
| 44 | + | ||
| 45 | + }, | ||
| 46 | + data() { | ||
| 47 | + return { | ||
| 48 | + defaultProps: { | ||
| 49 | + children: 'children', | ||
| 50 | + label: 'nickname' | ||
| 51 | + }, | ||
| 52 | + list: [], | ||
| 53 | + // 实际选中值 | ||
| 54 | + modelValue: [], | ||
| 55 | + // 下拉框绑定值(选中值名字) | ||
| 56 | + modelValueLabel: [] | ||
| 57 | + } | ||
| 58 | + }, | ||
| 59 | + methods: { | ||
| 60 | + selectClose(bool) { | ||
| 61 | + if (bool) { | ||
| 62 | + this.selectFilterMethod('') | ||
| 63 | + } | ||
| 64 | + }, | ||
| 65 | + selectFilterMethod(val) { | ||
| 66 | + // 下拉框调用tree树筛选 | ||
| 67 | + this.$refs.userTree.filter(val) | ||
| 68 | + }, | ||
| 69 | + selectChangeMethod(e) { | ||
| 70 | + var arrNew = [] | ||
| 71 | + var dataLength = this.modelValue.length | ||
| 72 | + var eLength = e.length | ||
| 73 | + for (var i = 0; i < dataLength; i++) { | ||
| 74 | + for (var j = 0; j < eLength; j++) { | ||
| 75 | + if (e[j] === JSON.parse('this.modelValue[i].' + this.fieldName)) { | ||
| 76 | + arrNew.push(this.modelValue[i]) | ||
| 77 | + } | ||
| 78 | + } | ||
| 79 | + } | ||
| 80 | + // 设置勾选的值 | ||
| 81 | + this.$refs.userTree.setCheckedNodes(arrNew) | ||
| 82 | + }, | ||
| 83 | + filterNode(value, data) { | ||
| 84 | + if (!value) return true | ||
| 85 | + | ||
| 86 | + return data[this.fieldName].indexOf(value) !== -1 | ||
| 87 | + }, | ||
| 88 | + handleCheckChange(data, checked, indeterminate) { | ||
| 89 | + let that = this; | ||
| 90 | + | ||
| 91 | + var selectArr = []; | ||
| 92 | + selectArr.push(data); | ||
| 93 | + // data[that.defaultProps.children].forEach(function (v) { | ||
| 94 | + // selectArr.push(data); | ||
| 95 | + // }); | ||
| 96 | + | ||
| 97 | + if (checked) { | ||
| 98 | + // 已选中 | ||
| 99 | + that.modelValue = that.modelValue.concat(selectArr) | ||
| 100 | + } else { | ||
| 101 | + that.modelValue.forEach(function (v, i) { | ||
| 102 | + selectArr.forEach(function (v1) { | ||
| 103 | + if (v.busId == v1.busId) { | ||
| 104 | + that.modelValue.splice(i, 1); | ||
| 105 | + } | ||
| 106 | + }) | ||
| 107 | + }) | ||
| 108 | + } | ||
| 109 | + that.modelValueLabel = that.modelValue.map(function (v) { | ||
| 110 | + return v[that.defaultProps.label]; | ||
| 111 | + }); | ||
| 112 | + that.$emit('callback', this.modelValue) | ||
| 113 | + } | ||
| 114 | + }, | ||
| 115 | + watch: {}, | ||
| 116 | + mounted() { | ||
| 117 | + let that = this; | ||
| 118 | + //加载资源列表 | ||
| 119 | + const {proxy} = Vue.getCurrentInstance() | ||
| 120 | + // 加载列表 | ||
| 121 | + proxy.$http.get("/api-user/users/getAll", {}, function (res) { | ||
| 122 | + if (res) { | ||
| 123 | + that.list = res; | ||
| 124 | + } | ||
| 125 | + }) | ||
| 126 | + }, | ||
| 127 | + created() { | ||
| 128 | + | ||
| 129 | + | ||
| 130 | + } | ||
| 131 | +} |
| @@ -40,16 +40,16 @@ Promise.all([ | @@ -40,16 +40,16 @@ Promise.all([ | ||
| 40 | .component('cm-document', Vue.defineAsyncComponent(() => myImport('components/common/document/index'))) | 40 | .component('cm-document', Vue.defineAsyncComponent(() => myImport('components/common/document/index'))) |
| 41 | //指标类型数 | 41 | //指标类型数 |
| 42 | .component('cm-kpi-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputkpitree/index'))) | 42 | .component('cm-kpi-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputkpitree/index'))) |
| 43 | - //所属系统 | 43 | + //所属业务 |
| 44 | .component('cm-biz-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputbiztypetree/index'))) | 44 | .component('cm-biz-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputbiztypetree/index'))) |
| 45 | //时间范围组件 | 45 | //时间范围组件 |
| 46 | .component('cm-date-range-influx', Vue.defineAsyncComponent(() => myImport('components/common/dateRange/indexInflux'))) | 46 | .component('cm-date-range-influx', Vue.defineAsyncComponent(() => myImport('components/common/dateRange/indexInflux'))) |
| 47 | //富文本框组件 | 47 | //富文本框组件 |
| 48 | .component('cm-wang-editor', Vue.defineAsyncComponent(() => myImport('components/common/wangEditorComponent/index'))) | 48 | .component('cm-wang-editor', Vue.defineAsyncComponent(() => myImport('components/common/wangEditorComponent/index'))) |
| 49 | //告警通知统计信息 | 49 | //告警通知统计信息 |
| 50 | - .component('cm-notice-statistics', Vue.defineAsyncComponent(() => myImport('components/common/noticeStatistics/index'))); | ||
| 51 | - | ||
| 52 | - | 50 | + .component('cm-notice-statistics', Vue.defineAsyncComponent(() => myImport('components/common/noticeStatistics/index'))) |
| 51 | + //告警通知统计信息 | ||
| 52 | + .component('cm-user-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputusertree/index'))); | ||
| 53 | // // 自定义指令 | 53 | // // 自定义指令 |
| 54 | // app.directive('permissions', { | 54 | // app.directive('permissions', { |
| 55 | // // 当被绑定的元素插入到 DOM 中时…… | 55 | // // 当被绑定的元素插入到 DOM 中时…… |
| @@ -149,6 +149,24 @@ const routes = [{ | @@ -149,6 +149,24 @@ const routes = [{ | ||
| 149 | name: 'busyConfig', | 149 | name: 'busyConfig', |
| 150 | component: () => myImport('views/busyConfig/index') | 150 | component: () => myImport('views/busyConfig/index') |
| 151 | }, | 151 | }, |
| 152 | + //快照管理 | ||
| 153 | + { | ||
| 154 | + path: '/vue3/snapshot', | ||
| 155 | + name: 'snapshot', | ||
| 156 | + component: () => myImport('views/snapshot/index') | ||
| 157 | + }, | ||
| 158 | + //快照历史 | ||
| 159 | + { | ||
| 160 | + path: '/vue3/snapshot/history', | ||
| 161 | + name: 'snapshotHistory', | ||
| 162 | + component: () => myImport('views/snapshot/history/index') | ||
| 163 | + }, | ||
| 164 | + //快照概览 | ||
| 165 | + { | ||
| 166 | + path: '/vue3/snapshotOverview', | ||
| 167 | + name: 'snapshotOverview', | ||
| 168 | + component: () => myImport('views/snapshotOverview/index') | ||
| 169 | + }, | ||
| 152 | ]; | 170 | ]; |
| 153 | 171 | ||
| 154 | // hash模式： createWebHashHistory | 172 | // hash模式： createWebHashHistory |
| @@ -295,7 +295,11 @@ global.openDetail = (resId, resType, proxy) => { | @@ -295,7 +295,11 @@ global.openDetail = (resId, resType, proxy) => { | ||
| 295 | 295 | ||
| 296 | }); | 296 | }); |
| 297 | } | 297 | } |
| 298 | - | 298 | +//跳转详情页 |
| 299 | +global.openNewWin = (url, name, params, editFlag, fn, cancelfn, type, sign) => { | ||
| 300 | + let lyaui = global.layui; | ||
| 301 | + lyaui.commonDetail.openNewWin(url, name, params, editFlag, fn, cancelfn, type, sign) | ||
| 302 | +} | ||
| 299 | /** | 303 | /** |
| 300 | * @description 打开选择layUI弹窗 | 304 | * @description 打开选择layUI弹窗 |
| 301 | * @author XuHaoJie | 305 | * @author XuHaoJie |
| 1 | +<div :style="{'height':height+'px','max-height':height+'px','padding':'10px 0 10px 10px','background':'#fff','box-sizing':'border-box'}" | ||
| 2 | + class="container"> | ||
| 3 | + <div :style="{'min-height':height+'px','max-height':height+'px','height':'100%','padding-top':'3px'}" | ||
| 4 | + class="cm-card"> | ||
| 5 | + <div class="search"> | ||
| 6 | + <div class="condition ping"> | ||
| 7 | + <el-form-item> | ||
| 8 | + <el-date-picker | ||
| 9 | + :size="$global.elementConfig.size.input" | ||
| 10 | + end-placeholder="开始时间" | ||
| 11 | + placeholder="开始时间" | ||
| 12 | + type="datetime" | ||
| 13 | + v-model="search.startTime" | ||
| 14 | + value-format="YYYY-MM-DD HH:mm:ss" | ||
| 15 | + /> | ||
| 16 | + | ||
| 17 | + </el-form-item> | ||
| 18 | + <el-form-item> | ||
| 19 | + <el-date-picker | ||
| 20 | + :size="$global.elementConfig.size.input" | ||
| 21 | + end-placeholder="结束时间" | ||
| 22 | + placeholder="结束时间" | ||
| 23 | + type="datetime" | ||
| 24 | + v-model="search.endTime" | ||
| 25 | + value-format="YYYY-MM-DD HH:mm:ss" | ||
| 26 | + /> | ||
| 27 | + </el-form-item> | ||
| 28 | + <el-form-item> | ||
| 29 | + <el-button :size="$global.elementConfig.size.button" type="primary" @click="getDataList">查询</el-button> | ||
| 30 | + </el-form-item> | ||
| 31 | + <el-form-item> | ||
| 32 | + <el-button :size="$global.elementConfig.size.button" @click="deleteHistory">删除</el-button> | ||
| 33 | + </el-form-item> | ||
| 34 | + </div> | ||
| 35 | + </div> | ||
| 36 | + <div class="search-table"> | ||
| 37 | + <cm-table-page :columns="tableData.columns" :dataList="tableData.dataList" :height="(height - 110)" | ||
| 38 | + :loading="false" :pageSize="search.pageSize" :showBorder="true" | ||
| 39 | + :showIndex="true" :showPage="true" :showSelection="true" | ||
| 40 | + :showTools="true" :total="tableData.count" @loaddata="loaddata" @selectionChange="selectionChange"> | ||
| 41 | + <template #default="{row,prop,column}"> | ||
| 42 | + <div v-if="prop == 'state'"> | ||
| 43 | + <div v-if="row.state == 0"> | ||
| 44 | + <el-tag>创建中</el-tag> | ||
| 45 | + </div> | ||
| 46 | + <div v-if="row.state == 1"> | ||
| 47 | + <el-tag type="success">已创建</el-tag> | ||
| 48 | + </div> | ||
| 49 | + <div v-if="row.state == 2"> | ||
| 50 | + <el-tag type="danger">创建失败</el-tag> | ||
| 51 | + </div> | ||
| 52 | + </div> | ||
| 53 | + </template> | ||
| 54 | + <template #tools="{scope}"> | ||
| 55 | + <div class="list-handle"> | ||
| 56 | + <span class="icon-bg"> | ||
| 57 | + <i @click="handleDetail(scope.row)" class="el-icon-document" title="查看详情"></i> | ||
| 58 | + </span> | ||
| 59 | + <span class="icon-bg"> | ||
| 60 | + <i @click="handleDelete(scope.row)" class="el-icon-delete" title="删除"></i> | ||
| 61 | + </span> | ||
| 62 | + </div> | ||
| 63 | + </template> | ||
| 64 | + </cm-table-page> | ||
| 65 | + </div> | ||
| 66 | + </div> | ||
| 67 | +</div> | ||
| 68 | + |
| 1 | +export default { | ||
| 2 | + name: 'snapshotHistory', | ||
| 3 | + template: '', | ||
| 4 | + components: {}, | ||
| 5 | + props: [], | ||
| 6 | + setup(props, {attrs, slots, emit}) { | ||
| 7 | + const {proxy} = Vue.getCurrentInstance(); | ||
| 8 | + let height = Vue.ref(window.innerHeight); | ||
| 9 | + let resId = Vue.ref(''); | ||
| 10 | + //选择的数据 | ||
| 11 | + let selectionData = Vue.ref([]); | ||
| 12 | + let search = Vue.ref({ | ||
| 13 | + pageNum: 1, | ||
| 14 | + pageSize: 20, | ||
| 15 | + startTime: '', | ||
| 16 | + endTime: '', | ||
| 17 | + keyWord: '' | ||
| 18 | + | ||
| 19 | + }); | ||
| 20 | + let selectionChange = (val) => { | ||
| 21 | + selectionData.value = val; | ||
| 22 | + } | ||
| 23 | + //表格字段 | ||
| 24 | + let tableData = Vue.ref({ | ||
| 25 | + count: 0, | ||
| 26 | + dataList: [], | ||
| 27 | + columns: [ | ||
| 28 | + { | ||
| 29 | + prop: 'createUser', | ||
| 30 | + label: '快照创建人', | ||
| 31 | + sortable: true, | ||
| 32 | + align: 'center', | ||
| 33 | + width: '250' | ||
| 34 | + }, | ||
| 35 | + { | ||
| 36 | + prop: 'createTime', | ||
| 37 | + label: '快照创建时间', | ||
| 38 | + sortable: true, | ||
| 39 | + align: 'center', | ||
| 40 | + width: '300' | ||
| 41 | + }, | ||
| 42 | + { | ||
| 43 | + prop: 'state', | ||
| 44 | + label: '同步状态', | ||
| 45 | + sortable: true, | ||
| 46 | + align: 'center', | ||
| 47 | + width: '170' | ||
| 48 | + }, | ||
| 49 | + { | ||
| 50 | + prop: 'batchNo', | ||
| 51 | + label: '批次号', | ||
| 52 | + sortable: true, | ||
| 53 | + align: 'center', | ||
| 54 | + } | ||
| 55 | + ] | ||
| 56 | + }) | ||
| 57 | + // 获取列表 | ||
| 58 | + let getDataList = () => { | ||
| 59 | + let params = { | ||
| 60 | + resId: resId.value, | ||
| 61 | + startTime: search.value.startTime, | ||
| 62 | + endTime: search.value.endTime, | ||
| 63 | + keyWord: search.value.keyword, | ||
| 64 | + pageNum:search.value.pageNum, | ||
| 65 | + pageSize: search.value.pageSize | ||
| 66 | + } | ||
| 67 | + proxy.$http.get(`/api-web/snapshot/his/getList`, params, function (res) { | ||
| 68 | + if (res.success) { | ||
| 69 | + tableData.value.dataList = res.data; | ||
| 70 | + tableData.value.count = res.count; | ||
| 71 | + } else { | ||
| 72 | + tableData.value.dataList = []; | ||
| 73 | + tableData.value.count = 0; | ||
| 74 | + } | ||
| 75 | + }); | ||
| 76 | + } | ||
| 77 | + //删除快照历史数据 | ||
| 78 | + let handleDelete = (row) =>{ | ||
| 79 | + let params = { | ||
| 80 | + resId: resId.value, | ||
| 81 | + batchNo: row.batchNo | ||
| 82 | + } | ||
| 83 | + deleteSnapshot(params); | ||
| 84 | + } | ||
| 85 | + //多选删除 | ||
| 86 | + let deleteHistory = () =>{ | ||
| 87 | + if (selectionData.value.length > 0) { | ||
| 88 | + let id = []; | ||
| 89 | + let batchNo = []; | ||
| 90 | + selectionData.value.map(item => { | ||
| 91 | + id.push(item.resId); | ||
| 92 | + batchNo.push(item.batchNo); | ||
| 93 | + }) | ||
| 94 | + let params = { | ||
| 95 | + resId: id.toString(), | ||
| 96 | + batchNo: batchNo.toString() | ||
| 97 | + } | ||
| 98 | + deleteSnapshot(params); | ||
| 99 | + }else { | ||
| 100 | + proxy.$global.showMsg("请选择需要删除的历史快照数据","warning"); | ||
| 101 | + } | ||
| 102 | + } | ||
| 103 | + //删除 | ||
| 104 | + let deleteSnapshot = (param) =>{ | ||
| 105 | + proxy.$global.confirm('确认删除吗？', function () { | ||
| 106 | + proxy.$http.get(`/api-web/snapshot/his/delete`, param, function (res) { | ||
| 107 | + if (res.success) { | ||
| 108 | + proxy.$global.showMsg("删除成功","success"); | ||
| 109 | + getDataList(); | ||
| 110 | + } else { | ||
| 111 | + proxy.$global.showMsg("删除失败","error"); | ||
| 112 | + } | ||
| 113 | + }); | ||
| 114 | + }); | ||
| 115 | + } | ||
| 116 | + | ||
| 117 | + | ||
| 118 | + //获取resId | ||
| 119 | + let getResId = () => { | ||
| 120 | + resId.value = proxy.$route.query.resId; | ||
| 121 | + } | ||
| 122 | + let loaddata = ({page, limit}) => { | ||
| 123 | + search.value.pageNum = page; | ||
| 124 | + search.value.pageSize = limit; | ||
| 125 | + getDataList(); | ||
| 126 | + } | ||
| 127 | + //快照详情 | ||
| 128 | + let handleDetail = (row)=>{ | ||
| 129 | + proxy.$global.openNewWin('template/detail/snapshot_detail', row.createUser+'在'+row.createTime+'创建的'+row.resName+'的快照', {resId:row.resId,'batchNo':row.batchNo},false); | ||
| 130 | + } | ||
| 131 | + | ||
| 132 | + //查看资源详情 | ||
| 133 | + let goResDetail = (row) => { | ||
| 134 | + proxy.$global.openDetail(row.resId, row.resType, proxy); | ||
| 135 | + } | ||
| 136 | + // 挂载完 | ||
| 137 | + Vue.onMounted(() => { | ||
| 138 | + getResId(); | ||
| 139 | + getDataList(); | ||
| 140 | + }) | ||
| 141 | + | ||
| 142 | + | ||
| 143 | + return { | ||
| 144 | + height, | ||
| 145 | + resId, | ||
| 146 | + getDataList, | ||
| 147 | + tableData, | ||
| 148 | + search, | ||
| 149 | + loaddata, | ||
| 150 | + goResDetail, | ||
| 151 | + handleDelete, | ||
| 152 | + handleDetail, | ||
| 153 | + selectionChange, | ||
| 154 | + deleteHistory, | ||
| 155 | + deleteSnapshot | ||
| 156 | + } | ||
| 157 | + } | ||
| 158 | + | ||
| 159 | +} |
| 1 | +<div class="container" :style="{'height':height+'px','max-height':height+'px','padding':'10px 0 10px 10px','background':'#fff','box-sizing':'border-box'}"> | ||
| 2 | + <div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%','padding-top':'3px'}"> | ||
| 3 | + <div class="search"> | ||
| 4 | + <div class="condition esData-conditon" style="justify-content: space-between;width: 100%;"> | ||
| 5 | + <el-form :inline="true"> | ||
| 6 | + <el-form-item> | ||
| 7 | + <el-tooltip placement="bottom-start"> | ||
| 8 | + <template #content> 资源名称 <br /> 资源ip <br /> 业务名称</template> | ||
| 9 | + <el-input clearable :size="$global.elementConfig.size.input" v-model="queryParams.keyWord" placeholder="关键字检索" /> | ||
| 10 | + </el-tooltip> | ||
| 11 | + </el-form-item> | ||
| 12 | + <el-form-item> | ||
| 13 | + <el-dropdown> | ||
| 14 | + <cm-res-type-tree-input @callback="getResType" clearable collapseTags multiple/> | ||
| 15 | + </el-dropdown> | ||
| 16 | + </el-form-item> | ||
| 17 | + <el-form-item> | ||
| 18 | + <el-dropdown> | ||
| 19 | + <cm-biz-type-tree-input @callback="getBizType" clearable collapseTags multiple/> | ||
| 20 | + </el-dropdown> | ||
| 21 | + </el-form-item> | ||
| 22 | + <el-form-item> | ||
| 23 | + <el-button @click="handleQuery" :size="$global.elementConfig.size.button" type="primary">查询</el-button> | ||
| 24 | + </el-form-item> | ||
| 25 | + </el-form> | ||
| 26 | + <el-button-group> | ||
| 27 | + <el-button @click="handleBtnGroup('today')" :type="queryParams.time=='today'?'primary':''">今天</el-button> | ||
| 28 | + <el-button @click="handleBtnGroup('week')" :type="queryParams.time=='week'?'primary':''">近7天</el-button> | ||
| 29 | + <el-button @click="handleBtnGroup('month')" :type="queryParams.time=='month'?'primary':''">近30天</el-button> | ||
| 30 | + <el-button @click="handleBtnGroup('quarter')" :type="queryParams.time=='quarter'?'primary':''">近90天</el-button> | ||
| 31 | + <el-popover | ||
| 32 | + v-model:visible="visiblePopover" | ||
| 33 | + :width="420" | ||
| 34 | + placement="bottom-end"> | ||
| 35 | + <template #reference> | ||
| 36 | + <el-button @click="handleBtnGroup(4)" :type="queryParams.time!='today' && queryParams.time!='week' && queryParams.time!='month' && queryParams.time!='quarter'?'primary':''">自定义</el-button> | ||
| 37 | + </template> | ||
| 38 | + <el-date-picker | ||
| 39 | + format="YYYY-MM-DD HH:mm:ss" | ||
| 40 | + value-format="YYYY-MM-DD HH:mm:ss" | ||
| 41 | + @change="handleChangeDatetime" | ||
| 42 | + v-model="datetimerange" | ||
| 43 | + type="datetimerange" | ||
| 44 | + range-separator="-" | ||
| 45 | + start-placeholder="开始时间" | ||
| 46 | + end-placeholder="结束时间" | ||
| 47 | + /> | ||
| 48 | + </el-popover> | ||
| 49 | + </el-button-group> | ||
| 50 | + </div> | ||
| 51 | + </div> | ||
| 52 | + | ||
| 53 | + <el-row :gutter="20" style="padding: 3px 10px;"> | ||
| 54 | + <el-col :span="8"> | ||
| 55 | + <h3 style="text-align: left;color:#2b9eef;">资源类型快照量TOP5</h3> | ||
| 56 | + <div ref="bizChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div> | ||
| 57 | + </el-col> | ||
| 58 | + <el-col :span="8"> | ||
| 59 | + <h3 style="text-align: left;color:#2b9eef;">业务系统快照量TOP5</h3> | ||
| 60 | + <div ref="devChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div> | ||
| 61 | + </el-col> | ||
| 62 | + <el-col :span="8"> | ||
| 63 | + <h3 style="text-align: left;color:#2b9eef;">快照量</h3> | ||
| 64 | + <div ref="snapshotChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div> | ||
| 65 | + </el-col> | ||
| 66 | + </el-row> | ||
| 67 | + | ||
| 68 | + <div class="search-table"> | ||
| 69 | + <h3 style="text-align: left;color:#2b9eef;">快照信息</h3> | ||
| 70 | + <cm-table-page :columns="tableData.columns" :dataList="tableData.dataList" | ||
| 71 | + :height="height - 550" | ||
| 72 | + :loading="false" | ||
| 73 | + :pageSize="queryParams.pageSize" | ||
| 74 | + :showBorder="true" | ||
| 75 | + :showIndex="true" | ||
| 76 | + :showPage="true" | ||
| 77 | + :showSelection="false" | ||
| 78 | + :showTools="true" | ||
| 79 | + :total="queryParams.count" | ||
| 80 | + @loaddata="loaddata"> | ||
| 81 | + <template #default="{row,prop,column}"> | ||
| 82 | + <div v-if="prop == 'resName'"> | ||
| 83 | + <!-- 资源名称点击事件 --> | ||
| 84 | + <el-tooltip placement="top"> | ||
| 85 | + <el-button @click.prevent="goResDetail(row)" size="small" type="text"> | ||
| 86 | + <span class="">{{row.resName}}</span> | ||
| 87 | + </el-button> | ||
| 88 | + <template #content>{{row.resName}}</template> | ||
| 89 | + </el-tooltip> | ||
| 90 | + </div> | ||
| 91 | + <div v-if="prop == 'busTypeName'"> | ||
| 92 | + <div v-if="(row.busTypeName || '').split(',').length <= '3'"> | ||
| 93 | + <div v-if="row.busTypeName != null && row.busTypeName.indexOf(',') != -1" v-for="item in row.busTypeName.split(',')"> | ||
| 94 | + <el-tooltip placement="top"> | ||
| 95 | + <template #content>{{item}}</template> | ||
| 96 | + <el-tag style="margin: 2px;" type="info" class="mx-1" effect="light">{{item}}</el-tag> | ||
| 97 | + </el-tooltip> | ||
| 98 | + </div> | ||
| 99 | + <div v-else-if="row.busTypeName != null && row.busTypeName.indexOf(',') == -1 "> | ||
| 100 | + <el-tooltip placement="top"> | ||
| 101 | + <template #content>{{row.busTypeName}}</template> | ||
| 102 | + <el-tag type="info" class="mx-1" effect="light">{{row.busTypeName}}</el-tag> | ||
| 103 | + </el-tooltip> | ||
| 104 | + </div> | ||
| 105 | + </div> | ||
| 106 | + <div v-else> | ||
| 107 | + <el-button @click="goBus(row)" size="small" type="text"> | ||
| 108 | + <span>共计：{{row.nickname.split(',').length}}个业务</span> | ||
| 109 | + </el-button> | ||
| 110 | + </div> | ||
| 111 | + </div> | ||
| 112 | + <div v-if="prop == 'nickname'"> | ||
| 113 | + <div v-if="(row.nickname || '').split(',').length <= '3'"> | ||
| 114 | + <div v-if="row.nickname != null && row.nickname.indexOf(',') != -1" v-for="item in row.nickname.split(',')"> | ||
| 115 | + <el-tooltip placement="top"> | ||
| 116 | + <template #content>{{item}}</template> | ||
| 117 | + <el-tag style="margin: 2px;" type="info" class="mx-1" effect="light">{{item}}</el-tag> | ||
| 118 | + </el-tooltip> | ||
| 119 | + </div> | ||
| 120 | + <div v-else-if="row.nickname != null && row.nickname.indexOf(',') == -1 "> | ||
| 121 | + <el-tooltip placement="top"> | ||
| 122 | + <template #content>{{row.nickname}}</template> | ||
| 123 | + <el-tag type="info" class="mx-1" effect="light">{{row.nickname}}</el-tag> | ||
| 124 | + </el-tooltip> | ||
| 125 | + </div> | ||
| 126 | + </div> | ||
| 127 | + <div v-else> | ||
| 128 | + <el-button @click="goBus(row)" size="small" type="text"> | ||
| 129 | + <span>共计：{{row.nickname.split(',').length}}个业务负责人</span> | ||
| 130 | + </el-button> | ||
| 131 | + </div> | ||
| 132 | + </div> | ||
| 133 | + <div v-if="prop == 'admin'"> | ||
| 134 | + <div v-if="row.admin != null"> | ||
| 135 | + <el-tooltip placement="top"> | ||
| 136 | + <template #content>{{row.admin}}</template> | ||
| 137 | + <el-tag type="info" class="mx-1" effect="light">{{row.admin}}</el-tag> | ||
| 138 | + </el-tooltip> | ||
| 139 | + </div> | ||
| 140 | + </div> | ||
| 141 | + <div v-if="prop == 'createUser'"> | ||
| 142 | + <div v-if="row.createUser != null"> | ||
| 143 | + <el-tooltip placement="top"> | ||
| 144 | + <template #content>{{row.createUser}}</template> | ||
| 145 | + <el-tag type="info" class="mx-1" effect="light">{{row.createUser}}</el-tag> | ||
| 146 | + </el-tooltip> | ||
| 147 | + </div> | ||
| 148 | + </div> | ||
| 149 | + </template> | ||
| 150 | + <template #tools="{scope}"> | ||
| 151 | + <div class="list-handle"> | ||
| 152 | + <span class="icon-bg" @click="handleDetail(scope.row)"> | ||
| 153 | + <i class="el-icon-document" title="详情"></i> | ||
| 154 | + </span> | ||
| 155 | + <span class="icon-bg"@click="handleDel(scope.row)"> | ||
| 156 | + <i class="el-icon-delete"></i> | ||
| 157 | + </span> | ||
| 158 | + </div> | ||
| 159 | + </template> | ||
| 160 | + </cm-table-page> | ||
| 161 | + </div> | ||
| 162 | + </div> | ||
| 163 | +</div> | ||
| 164 | + | ||
| 165 | +<cm-dialog :showDialogVisible="showBus" :showFooter="false" :title="title" @hidedialog="cancelBtn" | ||
| 166 | + width="700px"> | ||
| 167 | + <template v-slot> | ||
| 168 | + <div class="dialog"> | ||
| 169 | + <div v-model="busType" v-for="item in busType" style="display: inline-block"> | ||
| 170 | + <el-tag type="info" class="mx-1" effect="light">{{item}}</el-tag> | ||
| 171 | + </div> | ||
| 172 | + </div> | ||
| 173 | + </template> | ||
| 174 | +</cm-dialog> |
| 1 | +export default { | ||
| 2 | + name:"snapshot", | ||
| 3 | + template:"", | ||
| 4 | + setup(props, {attrs, slots, emit}){ | ||
| 5 | + const {proxy} = Vue.getCurrentInstance(); | ||
| 6 | + let height = Vue.ref(window.innerHeight); | ||
| 7 | + let formSize = Vue.ref('default'); | ||
| 8 | + let datetimerange = Vue.ref([]); | ||
| 9 | + let visiblePopover = Vue.ref(false); | ||
| 10 | + let queryParams = Vue.ref({ | ||
| 11 | + keyWord:'', | ||
| 12 | + resType:'', | ||
| 13 | + busId:'', | ||
| 14 | + time:"today", | ||
| 15 | + pageNum: 1, | ||
| 16 | + pageSize: 10, | ||
| 17 | + count:0, | ||
| 18 | + }) | ||
| 19 | + let btnGroupType = Vue.ref(0); | ||
| 20 | + //表格字段 | ||
| 21 | + let tableData = Vue.ref({ | ||
| 22 | + count: 0, | ||
| 23 | + dataList: [], | ||
| 24 | + columns: [ | ||
| 25 | + { | ||
| 26 | + prop: 'resTypeName', | ||
| 27 | + label: '资源类型', | ||
| 28 | + sortable: true, | ||
| 29 | + align: 'center', | ||
| 30 | + width: '200', | ||
| 31 | + }, | ||
| 32 | + { | ||
| 33 | + prop: 'resName', | ||
| 34 | + label: '资源名称', | ||
| 35 | + sortable: true, | ||
| 36 | + align: 'center' | ||
| 37 | + }, | ||
| 38 | + { | ||
| 39 | + prop: 'ip', | ||
| 40 | + label: 'IP地址', | ||
| 41 | + sortable: true, | ||
| 42 | + align: 'center', | ||
| 43 | + width: '130' | ||
| 44 | + }, { | ||
| 45 | + prop: 'admin', | ||
| 46 | + label: '负责人', | ||
| 47 | + sortable: true, | ||
| 48 | + align: 'center', | ||
| 49 | + width: '130' | ||
| 50 | + }, { | ||
| 51 | + prop: 'busTypeName', | ||
| 52 | + label: '所属业务系统', | ||
| 53 | + sortable: true, | ||
| 54 | + align: 'center', | ||
| 55 | + width: '270' | ||
| 56 | + }, | ||
| 57 | + { | ||
| 58 | + prop: 'nickname', | ||
| 59 | + label: '业务系统负责人', | ||
| 60 | + sortable: true, | ||
| 61 | + align: 'center', | ||
| 62 | + width: '150' | ||
| 63 | + }, | ||
| 64 | + { | ||
| 65 | + prop: 'createUser', | ||
| 66 | + label: '快照创建人', | ||
| 67 | + sortable: true, | ||
| 68 | + align: 'center', | ||
| 69 | + width: '130' | ||
| 70 | + }, | ||
| 71 | + { | ||
| 72 | + prop: 'createTime', | ||
| 73 | + label: '快照创建时间', | ||
| 74 | + sortable: true, | ||
| 75 | + align: 'center', | ||
| 76 | + width: '170' | ||
| 77 | + }, | ||
| 78 | + ] | ||
| 79 | + }) | ||
| 80 | + | ||
| 81 | + let loaddata = ({page, limit}) => { | ||
| 82 | + queryParams.value.pageNum = page; | ||
| 83 | + queryParams.value.pageSize = limit; | ||
| 84 | + getDataList(); | ||
| 85 | + getEchartsData(); | ||
| 86 | + } | ||
| 87 | + | ||
| 88 | + let getResType = (arr) => { | ||
| 89 | + let types = arr.map(function (v) { | ||
| 90 | + return v.id; | ||
| 91 | + }); | ||
| 92 | + queryParams.value.resType = types.join(','); | ||
| 93 | + } | ||
| 94 | + let getBizType = (arr) => { | ||
| 95 | + let types = arr.map(function (v) { | ||
| 96 | + return v.busId; | ||
| 97 | + }); | ||
| 98 | + queryParams.value.busId = types.join(','); | ||
| 99 | + } | ||
| 100 | + | ||
| 101 | + // 获取列表 | ||
| 102 | + let getDataList = () => { | ||
| 103 | + // console.log(queryParams.value); | ||
| 104 | + proxy.$http.get(`/api-web/snapshot/manage/getList`,queryParams.value,(res)=>{ | ||
| 105 | + // console.log(res.data); | ||
| 106 | + tableData.value.dataList = res.data; | ||
| 107 | + queryParams.value.count = res.count; | ||
| 108 | + },(err)=>{ | ||
| 109 | + console.log(err); | ||
| 110 | + }) | ||
| 111 | + }; | ||
| 112 | + // 查询事件 | ||
| 113 | + let handleQuery = ()=> { | ||
| 114 | + queryParams.value.pageSize=10; | ||
| 115 | + queryParams.value.pageNum=1; | ||
| 116 | + getDataList(); | ||
| 117 | + getEchartsData(); | ||
| 118 | + } | ||
| 119 | + // 按钮组点击事件 | ||
| 120 | + let handleBtnGroup = (val)=>{ | ||
| 121 | + queryParams.value.time = val; | ||
| 122 | + if (val == 4){ | ||
| 123 | + visiblePopover.value = !visiblePopover.value; | ||
| 124 | + }else{ | ||
| 125 | + visiblePopover.value = false; | ||
| 126 | + getDataList(); | ||
| 127 | + getEchartsData(); | ||
| 128 | + } | ||
| 129 | + }; | ||
| 130 | + | ||
| 131 | + // echarts | ||
| 132 | + let bizChartsRefs = Vue.ref(null); | ||
| 133 | + let devChartsRefs = Vue.ref(null); | ||
| 134 | + let snapshotChartsRefs = Vue.ref(null); | ||
| 135 | + let bizCharts = Vue.ref('') | ||
| 136 | + let devCharts = Vue.ref('') | ||
| 137 | + let snapshotCharts = Vue.ref('') | ||
| 138 | + let showBus = Vue.ref(false); | ||
| 139 | + let title = Vue.ref(''); | ||
| 140 | + let busType = Vue.ref(); | ||
| 141 | + let getEcharts = ()=>{ | ||
| 142 | + bizCharts = echarts.init(bizChartsRefs.value); | ||
| 143 | + let bizOption = { | ||
| 144 | + grid:{ | ||
| 145 | + top:"8%", | ||
| 146 | + bottom:"8%", | ||
| 147 | + left:"4%", | ||
| 148 | + containLabel:true, | ||
| 149 | + }, | ||
| 150 | + tooltip: { | ||
| 151 | + trigger: 'axis', | ||
| 152 | + axisPointer: { | ||
| 153 | + type: 'shadow', | ||
| 154 | + } | ||
| 155 | + }, | ||
| 156 | + color:"#60a0f7", | ||
| 157 | + xAxis: { | ||
| 158 | + type: 'category', | ||
| 159 | + data: [], | ||
| 160 | + axisTick:false, | ||
| 161 | + axisLabel: { | ||
| 162 | + interval: 0, | ||
| 163 | + formatter: val => { | ||
| 164 | + // 一行字数 | ||
| 165 | + const max = 6 | ||
| 166 | + // 标签长度 | ||
| 167 | + const valLength = val.length | ||
| 168 | + // 换行数 | ||
| 169 | + const rowNum = valLength / 6 | ||
| 170 | + if (valLength > 6) { | ||
| 171 | + return val.slice(0,5) + '...'; | ||
| 172 | + } else { | ||
| 173 | + return val | ||
| 174 | + } | ||
| 175 | + } | ||
| 176 | + } | ||
| 177 | + }, | ||
| 178 | + yAxis: { | ||
| 179 | + type: 'value', | ||
| 180 | + axisLine:{ | ||
| 181 | + show:true, | ||
| 182 | + }, | ||
| 183 | + //分隔线样式 | ||
| 184 | + splitLine:{ | ||
| 185 | + show:true, | ||
| 186 | + lineStyle:{ | ||
| 187 | + type:'dashed' | ||
| 188 | + } | ||
| 189 | + } | ||
| 190 | + }, | ||
| 191 | + series: [ | ||
| 192 | + { | ||
| 193 | + data: [], | ||
| 194 | + type: 'bar', | ||
| 195 | + barWidth: 26,//设置柱状图大小 | ||
| 196 | + itemStyle:{ | ||
| 197 | + borderRadius:[20,20,0,0] | ||
| 198 | + } | ||
| 199 | + } | ||
| 200 | + ] | ||
| 201 | + } | ||
| 202 | + bizCharts.setOption(bizOption); | ||
| 203 | + | ||
| 204 | + devCharts = echarts.init(devChartsRefs.value); | ||
| 205 | + let devOption = { | ||
| 206 | + grid:{ | ||
| 207 | + top:"8%", | ||
| 208 | + bottom:"8%", | ||
| 209 | + left:"4%", | ||
| 210 | + containLabel:true, | ||
| 211 | + }, | ||
| 212 | + tooltip: { | ||
| 213 | + trigger: 'axis', | ||
| 214 | + axisPointer: { | ||
| 215 | + type: 'shadow', | ||
| 216 | + } | ||
| 217 | + }, | ||
| 218 | + color:"#60a0f7", | ||
| 219 | + xAxis: { | ||
| 220 | + type: 'category', | ||
| 221 | + data: [], | ||
| 222 | + axisTick:false, | ||
| 223 | + axisLabel: { | ||
| 224 | + interval: 0, | ||
| 225 | + formatter: val => { | ||
| 226 | + // 一行字数 | ||
| 227 | + const max = 6 | ||
| 228 | + // 标签长度 | ||
| 229 | + const valLength = val.length | ||
| 230 | + // 换行数 | ||
| 231 | + const rowNum = valLength / 6 | ||
| 232 | + if (valLength > 6) { | ||
| 233 | + return val.slice(0,5) + '...'; | ||
| 234 | + } else { | ||
| 235 | + return val | ||
| 236 | + } | ||
| 237 | + } | ||
| 238 | + } | ||
| 239 | + }, | ||
| 240 | + yAxis: { | ||
| 241 | + type: 'value', | ||
| 242 | + axisLine:{ | ||
| 243 | + show:true, | ||
| 244 | + }, | ||
| 245 | + //分隔线样式 | ||
| 246 | + splitLine:{ | ||
| 247 | + show:true, | ||
| 248 | + lineStyle:{ | ||
| 249 | + type:'dashed' | ||
| 250 | + } | ||
| 251 | + } | ||
| 252 | + }, | ||
| 253 | + series: [ | ||
| 254 | + { | ||
| 255 | + data: [], | ||
| 256 | + type: 'bar', | ||
| 257 | + barWidth: 26,//设置柱状图大小 | ||
| 258 | + itemStyle:{ | ||
| 259 | + borderRadius:[20,20,0,0] | ||
| 260 | + } | ||
| 261 | + } | ||
| 262 | + ] | ||
| 263 | + } | ||
| 264 | + devCharts.setOption(devOption); | ||
| 265 | + | ||
| 266 | + snapshotCharts = echarts.init(snapshotChartsRefs.value); | ||
| 267 | + let shapshotOption = { | ||
| 268 | + grid:{ | ||
| 269 | + top:"8%", | ||
| 270 | + bottom:"8%", | ||
| 271 | + left:"4%", | ||
| 272 | + containLabel:true, | ||
| 273 | + }, | ||
| 274 | + tooltip: { | ||
| 275 | + trigger: 'axis', | ||
| 276 | + axisPointer: { | ||
| 277 | + type: 'shadow', | ||
| 278 | + } | ||
| 279 | + }, | ||
| 280 | + color:"#60a0f7", | ||
| 281 | + xAxis: { | ||
| 282 | + type: 'category', | ||
| 283 | + data: [], | ||
| 284 | + axisTick:false, | ||
| 285 | + }, | ||
| 286 | + yAxis: { | ||
| 287 | + type: 'value', | ||
| 288 | + axisLine:{ | ||
| 289 | + show:true, | ||
| 290 | + }, | ||
| 291 | + //分隔线样式 | ||
| 292 | + splitLine:{ | ||
| 293 | + show:true, | ||
| 294 | + lineStyle:{ | ||
| 295 | + type:'dashed' | ||
| 296 | + } | ||
| 297 | + } | ||
| 298 | + }, | ||
| 299 | + series: [ | ||
| 300 | + { | ||
| 301 | + data: [], | ||
| 302 | + type: 'bar', | ||
| 303 | + barWidth: 26,//设置柱状图大小 | ||
| 304 | + itemStyle:{ | ||
| 305 | + borderRadius:[20,20,0,0] | ||
| 306 | + } | ||
| 307 | + } | ||
| 308 | + ] | ||
| 309 | + } | ||
| 310 | + snapshotCharts.setOption(shapshotOption); | ||
| 311 | + } | ||
| 312 | + | ||
| 313 | + let getEchartsData = ()=>{ | ||
| 314 | + let resTypeData = { | ||
| 315 | + xaxis:[], | ||
| 316 | + yaxis:[], | ||
| 317 | + } | ||
| 318 | + proxy.$http.get(`/api-web/snapshot/manage/resTypeTop`,queryParams.value,(res)=>{ | ||
| 319 | + // console.log(res.object); | ||
| 320 | + res.object.forEach(item=>{ | ||
| 321 | + resTypeData.xaxis.push(item.xaxis); | ||
| 322 | + resTypeData.yaxis.push(item.yaxis) | ||
| 323 | + }) | ||
| 324 | + bizCharts.setOption({ | ||
| 325 | + xAxis:{ | ||
| 326 | + data:resTypeData.xaxis, | ||
| 327 | + }, | ||
| 328 | + series:[ | ||
| 329 | + { | ||
| 330 | + data:resTypeData.yaxis | ||
| 331 | + } | ||
| 332 | + ] | ||
| 333 | + }); | ||
| 334 | + },(err)=>{ | ||
| 335 | + console.log(err); | ||
| 336 | + }) | ||
| 337 | + | ||
| 338 | + let busTypeData = { | ||
| 339 | + xaxis:[], | ||
| 340 | + yaxis:[], | ||
| 341 | + } | ||
| 342 | + proxy.$http.get(`/api-web/snapshot/manage/busTop`,queryParams.value,(res)=>{ | ||
| 343 | + // console.log(res.object); | ||
| 344 | + res.object.forEach(item=>{ | ||
| 345 | + busTypeData.xaxis.push(item.xaxis); | ||
| 346 | + busTypeData.yaxis.push(item.yaxis) | ||
| 347 | + }) | ||
| 348 | + devCharts.setOption({ | ||
| 349 | + xAxis:{ | ||
| 350 | + data:busTypeData.xaxis, | ||
| 351 | + }, | ||
| 352 | + series:[ | ||
| 353 | + { | ||
| 354 | + data:busTypeData.yaxis | ||
| 355 | + } | ||
| 356 | + ] | ||
| 357 | + }); | ||
| 358 | + },(err)=>{ | ||
| 359 | + console.log(err); | ||
| 360 | + }) | ||
| 361 | + | ||
| 362 | + let snapshotNumData = { | ||
| 363 | + xaxis:[], | ||
| 364 | + yaxis:[], | ||
| 365 | + } | ||
| 366 | + proxy.$http.get(`/api-web/snapshot/manage/snapshotNum`,queryParams.value,(res)=>{ | ||
| 367 | + // console.log(res.object); | ||
| 368 | + res.object.forEach(item=>{ | ||
| 369 | + snapshotNumData.xaxis.push(item.xaxis); | ||
| 370 | + snapshotNumData.yaxis.push(item.yaxis) | ||
| 371 | + }) | ||
| 372 | + snapshotCharts.setOption({ | ||
| 373 | + xAxis:{ | ||
| 374 | + data:snapshotNumData.xaxis, | ||
| 375 | + }, | ||
| 376 | + series:[ | ||
| 377 | + { | ||
| 378 | + data:snapshotNumData.yaxis | ||
| 379 | + } | ||
| 380 | + ] | ||
| 381 | + }); | ||
| 382 | + },(err)=>{ | ||
| 383 | + console.log(err); | ||
| 384 | + }) | ||
| 385 | + } | ||
| 386 | + | ||
| 387 | + // 时间范围快捷键 修改事件 | ||
| 388 | + let handleChangeDatetime = (value)=>{ | ||
| 389 | + visiblePopover.value = false; | ||
| 390 | + queryParams.value.time = value.join(','); | ||
| 391 | + getDataList(); | ||
| 392 | + getEchartsData(); | ||
| 393 | + } | ||
| 394 | + | ||
| 395 | + // 表格删除事件 | ||
| 396 | + let handleDel = (row)=>{ | ||
| 397 | + // console.log(row); | ||
| 398 | + proxy.$global.confirm("确认删除吗？", function () { | ||
| 399 | + deleteItems([row.resId],[row.batchNo]); | ||
| 400 | + }) | ||
| 401 | + } | ||
| 402 | + //删除 | ||
| 403 | + let deleteItems = (ids,nos) => { | ||
| 404 | + let params = { | ||
| 405 | + resId: ids.toString(), | ||
| 406 | + batchNo:nos.toString(), | ||
| 407 | + } | ||
| 408 | + proxy.$http.get('/api-web/snapshot/his/delete', params, function (res) { | ||
| 409 | + if (res && res.success) { | ||
| 410 | + proxy.$global.showMsg('删除成功'); | ||
| 411 | + handleQuery() | ||
| 412 | + } | ||
| 413 | + }) | ||
| 414 | + } | ||
| 415 | + | ||
| 416 | + //快照详情 | ||
| 417 | + let handleDetail = (row)=>{ | ||
| 418 | + // console.log(row); | ||
| 419 | + // proxy.$global.openNewWin('template/detail/snapshot_detail_v1', "快照详情", {resId:row.resId,'batchNo':row.batchNo},false); | ||
| 420 | + proxy.$global.openNewWin('template/detail/snapshot_detail', row.createUser+'在'+row.createTime+'创建的'+row.resName+'的快照', {resId:row.resId,'batchNo':row.batchNo},false); | ||
| 421 | + } | ||
| 422 | + | ||
| 423 | + //查看资源详情 | ||
| 424 | + let goResDetail = (row) => { | ||
| 425 | + proxy.$global.openDetail(row.resId, row.resType, proxy); | ||
| 426 | + } | ||
| 427 | + | ||
| 428 | + //查看业务系统 | ||
| 429 | + let goBus = (row) => { | ||
| 430 | + title.value = row.resName+'所属业务系统信息'; | ||
| 431 | + let busTypeAdmin = []; | ||
| 432 | + for (let i = 0; i < row.busTypeName.split(',').length; i++) { | ||
| 433 | + for (let j = 0; j < row.nickname.split(',').length; j++) { | ||
| 434 | + if (i==j){ | ||
| 435 | + busTypeAdmin.push(row.busTypeName.split(',')[i]+'('+row.nickname.split(',')[i]+')') | ||
| 436 | + } | ||
| 437 | + } | ||
| 438 | + } | ||
| 439 | + busType.value = busTypeAdmin; | ||
| 440 | + showBus.value = true; | ||
| 441 | + | ||
| 442 | + } | ||
| 443 | + //关闭弹框 | ||
| 444 | + let cancelBtn = () => { | ||
| 445 | + showBus.value = false; | ||
| 446 | + } | ||
| 447 | + | ||
| 448 | + Vue.onMounted(()=>{ | ||
| 449 | + getEcharts(); | ||
| 450 | + getDataList(); | ||
| 451 | + getEchartsData(); | ||
| 452 | + }) | ||
| 453 | + | ||
| 454 | + return{ | ||
| 455 | + height, | ||
| 456 | + formSize, | ||
| 457 | + queryParams, | ||
| 458 | + tableData, | ||
| 459 | + btnGroupType, | ||
| 460 | + bizChartsRefs, | ||
| 461 | + devChartsRefs, | ||
| 462 | + snapshotChartsRefs, | ||
| 463 | + handleBtnGroup, | ||
| 464 | + datetimerange, | ||
| 465 | + visiblePopover, | ||
| 466 | + handleChangeDatetime, | ||
| 467 | + getResType, | ||
| 468 | + getBizType, | ||
| 469 | + handleQuery, | ||
| 470 | + loaddata, | ||
| 471 | + handleDel, | ||
| 472 | + handleDetail, | ||
| 473 | + goResDetail, | ||
| 474 | + goBus, | ||
| 475 | + showBus, | ||
| 476 | + cancelBtn, | ||
| 477 | + title, | ||
| 478 | + busType | ||
| 479 | + } | ||
| 480 | + } | ||
| 481 | +} |
| 1 | +<div class="container" :style="{'height':height+'px','max-height':height+'px','padding':'10px 0 10px 10px','background':'#fff','box-sizing':'border-box'}"> | ||
| 2 | + <div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%','padding-top':'3px'}"> | ||
| 3 | + <div class="search"> | ||
| 4 | + <div class="condition esData-conditon" style="justify-content: space-between;width: 100%;"> | ||
| 5 | + <el-form :inline="true"> | ||
| 6 | + <el-form-item> | ||
| 7 | + <el-tooltip placement="bottom-start"> | ||
| 8 | + <template #content> 资源名称 <br /> 资源ip <br /> 业务名称</template> | ||
| 9 | + <el-input clearable :size="$global.elementConfig.size.input" v-model="queryParams.keyWord" placeholder="关键字检索" /> | ||
| 10 | + </el-tooltip> | ||
| 11 | + </el-form-item> | ||
| 12 | + <el-form-item> | ||
| 13 | + <el-dropdown> | ||
| 14 | + <cm-res-type-tree-input @callback="getResType" clearable collapseTags multiple/> | ||
| 15 | + </el-dropdown> | ||
| 16 | + </el-form-item> | ||
| 17 | + <el-form-item> | ||
| 18 | + <el-dropdown> | ||
| 19 | + <cm-biz-type-tree-input @callback="getBizType" clearable collapseTags multiple/> | ||
| 20 | + </el-dropdown> | ||
| 21 | + </el-form-item> | ||
| 22 | + <el-form-item> | ||
| 23 | + <el-dropdown> | ||
| 24 | + <cm-user-type-tree-input @callback="getUser" clearable collapseTags multiple/> | ||
| 25 | + </el-dropdown> | ||
| 26 | + </el-form-item> | ||
| 27 | + <el-form-item> | ||
| 28 | + <el-button @click="handleQuery" :size="$global.elementConfig.size.button" type="primary">查询</el-button> | ||
| 29 | + </el-form-item> | ||
| 30 | + </el-form> | ||
| 31 | + <el-button-group> | ||
| 32 | + <el-button @click="handleBtnGroup('today')" :type="queryParams.time=='today'?'primary':''">今天</el-button> | ||
| 33 | + <el-button @click="handleBtnGroup('week')" :type="queryParams.time=='week'?'primary':''">近7天</el-button> | ||
| 34 | + <el-button @click="handleBtnGroup('month')" :type="queryParams.time=='month'?'primary':''">近30天</el-button> | ||
| 35 | + <el-button @click="handleBtnGroup('quarter')" :type="queryParams.time=='quarter'?'primary':''">近90天</el-button> | ||
| 36 | + <el-popover | ||
| 37 | + v-model:visible="visiblePopover" | ||
| 38 | + :width="420" | ||
| 39 | + placement="bottom-end"> | ||
| 40 | + <template #reference> | ||
| 41 | + <el-button @click="handleBtnGroup(4)" :type="queryParams.time!='today' && queryParams.time!='week' && queryParams.time!='month' && queryParams.time!='quarter'?'primary':''">自定义</el-button> | ||
| 42 | + </template> | ||
| 43 | + <el-date-picker | ||
| 44 | + format="YYYY-MM-DD HH:mm:ss" | ||
| 45 | + value-format="YYYY-MM-DD HH:mm:ss" | ||
| 46 | + @change="handleChangeDatetime" | ||
| 47 | + v-model="datetimerange" | ||
| 48 | + type="datetimerange" | ||
| 49 | + range-separator="-" | ||
| 50 | + start-placeholder="开始时间" | ||
| 51 | + end-placeholder="结束时间" | ||
| 52 | + /> | ||
| 53 | + </el-popover> | ||
| 54 | + </el-button-group> | ||
| 55 | + </div> | ||
| 56 | + </div> | ||
| 57 | + | ||
| 58 | + <el-row :gutter="20" style="padding: 3px 10px;"> | ||
| 59 | + <el-col :span="12"> | ||
| 60 | + <h3 style="text-align: left;color:#2b9eef;">资源类型快照量TOP5</h3> | ||
| 61 | + <div ref="bizChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div> | ||
| 62 | + </el-col> | ||
| 63 | + <el-col :span="12"> | ||
| 64 | + <h3 style="text-align: left;color:#2b9eef;">业务系统快照量TOP5</h3> | ||
| 65 | + <div ref="devChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div> | ||
| 66 | + </el-col> | ||
| 67 | + <el-col :span="12"> | ||
| 68 | + <h3 style="text-align: left;color:#2b9eef;">人员快照量</h3> | ||
| 69 | + <div ref="peopleSSChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div> | ||
| 70 | + </el-col> | ||
| 71 | + <el-col :span="12"> | ||
| 72 | + <h3 style="text-align: left;color:#2b9eef;">快照量</h3> | ||
| 73 | + <div ref="snapshotChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div> | ||
| 74 | + </el-col> | ||
| 75 | + </el-row> | ||
| 76 | + | ||
| 77 | + | ||
| 78 | + <div class="search-table"> | ||
| 79 | + <h3 style="text-align: left;color:#2b9eef;">快照信息</h3> | ||
| 80 | + <cm-table-page :columns="tableData.columns" :dataList="tableData.dataList" | ||
| 81 | + :height="height - 423" | ||
| 82 | + :loading="false" | ||
| 83 | + :pageSize="queryParams.pageSize" | ||
| 84 | + :showBorder="true" | ||
| 85 | + :showIndex="true" | ||
| 86 | + :showPage="true" | ||
| 87 | + :showSelection="false" | ||
| 88 | + :showTools="true" | ||
| 89 | + :total="queryParams.count" | ||
| 90 | + @loaddata="loaddata"> | ||
| 91 | + <template #default="{row,prop,column}"> | ||
| 92 | + <div v-if="prop == 'resName'"> | ||
| 93 | + <!-- 资源名称点击事件 --> | ||
| 94 | + <el-tooltip placement="top"> | ||
| 95 | + <el-button @click.prevent="goResDetail(row)" size="small" type="text"> | ||
| 96 | + <span class="">{{row.resName}}</span> | ||
| 97 | + </el-button> | ||
| 98 | + <template #content>{{row.resName}}</template> | ||
| 99 | + </el-tooltip> | ||
| 100 | + </div> | ||
| 101 | + <div v-if="prop == 'busTypeName'"> | ||
| 102 | + <div v-if="(row.busTypeName || '').split(',').length <= '3'"> | ||
| 103 | + <div v-if="row.busTypeName != null && row.busTypeName.indexOf(',') != -1" v-for="item in row.busTypeName.split(',')"> | ||
| 104 | + <el-tooltip placement="top"> | ||
| 105 | + <template #content>{{item}}</template> | ||
| 106 | + <el-tag style="margin: 2px;" type="info" class="mx-1" effect="light">{{item}}</el-tag> | ||
| 107 | + </el-tooltip> | ||
| 108 | + </div> | ||
| 109 | + <div v-else-if="row.busTypeName != null && row.busTypeName.indexOf(',') == -1 "> | ||
| 110 | + <el-tooltip placement="top"> | ||
| 111 | + <template #content>{{row.busTypeName}}</template> | ||
| 112 | + <el-tag type="info" class="mx-1" effect="light">{{row.busTypeName}}</el-tag> | ||
| 113 | + </el-tooltip> | ||
| 114 | + </div> | ||
| 115 | + </div> | ||
| 116 | + <div v-else> | ||
| 117 | + <el-button @click="goBus(row)" size="small" type="text"> | ||
| 118 | + <span>共计：{{row.nickname.split(',').length}}个业务</span> | ||
| 119 | + </el-button> | ||
| 120 | + </div> | ||
| 121 | + </div> | ||
| 122 | + <div v-if="prop == 'nickname'"> | ||
| 123 | + <div v-if="(row.nickname || '').split(',').length <= '3'"> | ||
| 124 | + <div v-if="row.nickname != null && row.nickname.indexOf(',') != -1" v-for="item in row.nickname.split(',')"> | ||
| 125 | + <el-tooltip placement="top"> | ||
| 126 | + <template #content>{{item}}</template> | ||
| 127 | + <el-tag style="margin: 2px;" type="info" class="mx-1" effect="light">{{item}}</el-tag> | ||
| 128 | + </el-tooltip> | ||
| 129 | + </div> | ||
| 130 | + <div v-else-if="row.nickname != null && row.nickname.indexOf(',') == -1 "> | ||
| 131 | + <el-tooltip placement="top"> | ||
| 132 | + <template #content>{{row.nickname}}</template> | ||
| 133 | + <el-tag type="info" class="mx-1" effect="light">{{row.nickname}}</el-tag> | ||
| 134 | + </el-tooltip> | ||
| 135 | + </div> | ||
| 136 | + </div> | ||
| 137 | + <div v-else> | ||
| 138 | + <el-button @click="goBus(row)" size="small" type="text"> | ||
| 139 | + <span>共计：{{row.nickname.split(',').length}}个业务负责人</span> | ||
| 140 | + </el-button> | ||
| 141 | + </div> | ||
| 142 | + </div> | ||
| 143 | + <div v-if="prop == 'admin'"> | ||
| 144 | + <div v-if="row.admin != null"> | ||
| 145 | + <el-tooltip placement="top"> | ||
| 146 | + <template #content>{{row.admin}}</template> | ||
| 147 | + <el-tag type="info" class="mx-1" effect="light">{{row.admin}}</el-tag> | ||
| 148 | + </el-tooltip> | ||
| 149 | + </div> | ||
| 150 | + </div> | ||
| 151 | + <div v-if="prop == 'createUser'"> | ||
| 152 | + <div v-if="row.createUser != null"> | ||
| 153 | + <el-tooltip placement="top"> | ||
| 154 | + <template #content>{{row.createUser}}</template> | ||
| 155 | + <el-tag type="info" class="mx-1" effect="light">{{row.createUser}}</el-tag> | ||
| 156 | + </el-tooltip> | ||
| 157 | + </div> | ||
| 158 | + </div> | ||
| 159 | + </template> | ||
| 160 | + <template #tools="{scope}"> | ||
| 161 | + <div class="list-handle"> | ||
| 162 | + <span class="icon-bg" @click="handleDetail(scope.row)"> | ||
| 163 | + <i class="el-icon-document" title="详情"></i> | ||
| 164 | + </span> | ||
| 165 | + </div> | ||
| 166 | + </template> | ||
| 167 | + </cm-table-page> | ||
| 168 | + </div> | ||
| 169 | + </div> | ||
| 170 | +</div> | ||
| 171 | + | ||
| 172 | +<cm-dialog :showDialogVisible="showBus" :showFooter="false" :title="title" @hidedialog="cancelBtn" | ||
| 173 | + width="700px"> | ||
| 174 | + <template v-slot> | ||
| 175 | + <div class="dialog"> | ||
| 176 | + <div v-model="busType" v-for="item in busType" style="display: inline-block"> | ||
| 177 | + <el-tag type="info" class="mx-1" effect="light">{{item}}</el-tag> | ||
| 178 | + </div> | ||
| 179 | + </div> | ||
| 180 | + </template> | ||
| 181 | +</cm-dialog> | ||
| 182 | + |
| 1 | +export default { | ||
| 2 | + name:"snapshotOverview", | ||
| 3 | + template:"", | ||
| 4 | + setup(props,{attrs,slots,emit}){ | ||
| 5 | + const {proxy} = Vue.getCurrentInstance(); | ||
| 6 | + let height = Vue.ref(window.innerHeight); | ||
| 7 | + let btnGroupType = Vue.ref(0); | ||
| 8 | + let datetimerange = Vue.ref([]); | ||
| 9 | + let visiblePopover = Vue.ref(false); | ||
| 10 | + let queryParams = Vue.ref({ | ||
| 11 | + keyWord:'', | ||
| 12 | + resType:'', | ||
| 13 | + busId:'', | ||
| 14 | + userName:'', | ||
| 15 | + time:"today", | ||
| 16 | + pageNum: 1, | ||
| 17 | + pageSize: 10, | ||
| 18 | + count:0, | ||
| 19 | + }) | ||
| 20 | + //表格字段 | ||
| 21 | + let tableData = Vue.ref({ | ||
| 22 | + dataList: [], | ||
| 23 | + columns: [ | ||
| 24 | + { | ||
| 25 | + prop: 'resTypeName', | ||
| 26 | + label: '资源类型', | ||
| 27 | + sortable: true, | ||
| 28 | + align: 'center', | ||
| 29 | + width: '200', | ||
| 30 | + }, | ||
| 31 | + { | ||
| 32 | + prop: 'resName', | ||
| 33 | + label: '资源名称', | ||
| 34 | + sortable: true, | ||
| 35 | + align: 'center' | ||
| 36 | + }, | ||
| 37 | + { | ||
| 38 | + prop: 'ip', | ||
| 39 | + label: 'IP地址', | ||
| 40 | + sortable: true, | ||
| 41 | + align: 'center', | ||
| 42 | + width: '130' | ||
| 43 | + }, { | ||
| 44 | + prop: 'admin', | ||
| 45 | + label: '负责人', | ||
| 46 | + sortable: true, | ||
| 47 | + align: 'center', | ||
| 48 | + width: '130' | ||
| 49 | + }, { | ||
| 50 | + prop: 'busTypeName', | ||
| 51 | + label: '所属业务系统', | ||
| 52 | + sortable: true, | ||
| 53 | + align: 'center', | ||
| 54 | + width: '270' | ||
| 55 | + }, | ||
| 56 | + { | ||
| 57 | + prop: 'nickname', | ||
| 58 | + label: '业务系统负责人', | ||
| 59 | + sortable: true, | ||
| 60 | + align: 'center', | ||
| 61 | + width: '150' | ||
| 62 | + }, | ||
| 63 | + { | ||
| 64 | + prop: 'createUser', | ||
| 65 | + label: '快照创建人', | ||
| 66 | + sortable: true, | ||
| 67 | + align: 'center', | ||
| 68 | + width: '130' | ||
| 69 | + }, | ||
| 70 | + { | ||
| 71 | + prop: 'createTime', | ||
| 72 | + label: '快照创建时间', | ||
| 73 | + sortable: true, | ||
| 74 | + align: 'center', | ||
| 75 | + width: '170' | ||
| 76 | + }, | ||
| 77 | + ] | ||
| 78 | + }) | ||
| 79 | + | ||
| 80 | + let loaddata = ({page, limit}) => { | ||
| 81 | + queryParams.value.pageNum = page; | ||
| 82 | + queryParams.value.pageSize = limit; | ||
| 83 | + getDataList(); | ||
| 84 | + } | ||
| 85 | + // 获取列表 | ||
| 86 | + let getDataList = () => { | ||
| 87 | + proxy.$http.get(`/api-web/snapshot/overview/getList`,queryParams.value,(res)=>{ | ||
| 88 | + tableData.value.dataList = res.data; | ||
| 89 | + queryParams.value.count = res.count; | ||
| 90 | + },(err)=>{ | ||
| 91 | + console.log(err); | ||
| 92 | + }) | ||
| 93 | + }; | ||
| 94 | + | ||
| 95 | + let getEchartsData = ()=>{ | ||
| 96 | + let resTypeData = { | ||
| 97 | + xaxis:[], | ||
| 98 | + yaxis:[], | ||
| 99 | + } | ||
| 100 | + proxy.$http.get(`/api-web/snapshot/overview/resTypeTop`,queryParams.value,(res)=>{ | ||
| 101 | + res.object.forEach(item=>{ | ||
| 102 | + resTypeData.xaxis.push(item.xaxis); | ||
| 103 | + resTypeData.yaxis.push(item.yaxis) | ||
| 104 | + }) | ||
| 105 | + bizCharts.setOption({ | ||
| 106 | + xAxis:{ | ||
| 107 | + data:resTypeData.xaxis, | ||
| 108 | + }, | ||
| 109 | + series:[ | ||
| 110 | + { | ||
| 111 | + data:resTypeData.yaxis | ||
| 112 | + } | ||
| 113 | + ] | ||
| 114 | + }); | ||
| 115 | + },(err)=>{ | ||
| 116 | + console.log(err); | ||
| 117 | + }) | ||
| 118 | + | ||
| 119 | + let busTypeData = { | ||
| 120 | + xaxis:[], | ||
| 121 | + yaxis:[], | ||
| 122 | + } | ||
| 123 | + proxy.$http.get(`/api-web/snapshot/overview/busTop`,queryParams.value,(res)=>{ | ||
| 124 | + res.object.forEach(item=>{ | ||
| 125 | + busTypeData.xaxis.push(item.xaxis); | ||
| 126 | + busTypeData.yaxis.push(item.yaxis) | ||
| 127 | + }) | ||
| 128 | + devCharts.setOption({ | ||
| 129 | + xAxis:{ | ||
| 130 | + data:busTypeData.xaxis, | ||
| 131 | + }, | ||
| 132 | + series:[ | ||
| 133 | + { | ||
| 134 | + data:busTypeData.yaxis | ||
| 135 | + } | ||
| 136 | + ] | ||
| 137 | + }); | ||
| 138 | + },(err)=>{ | ||
| 139 | + console.log(err); | ||
| 140 | + }) | ||
| 141 | + | ||
| 142 | + let snapshotNumData = { | ||
| 143 | + xaxis:[], | ||
| 144 | + yaxis:[], | ||
| 145 | + } | ||
| 146 | + proxy.$http.get(`/api-web/snapshot/overview/snapshotNum`,queryParams.value,(res)=>{ | ||
| 147 | + res.object.forEach(item=>{ | ||
| 148 | + snapshotNumData.xaxis.push(item.xaxis); | ||
| 149 | + snapshotNumData.yaxis.push(item.yaxis) | ||
| 150 | + }) | ||
| 151 | + snapshotCharts.setOption({ | ||
| 152 | + yAxis:{ | ||
| 153 | + data:snapshotNumData.xaxis, | ||
| 154 | + }, | ||
| 155 | + series:[ | ||
| 156 | + { | ||
| 157 | + data:snapshotNumData.yaxis | ||
| 158 | + } | ||
| 159 | + ] | ||
| 160 | + }); | ||
| 161 | + },(err)=>{ | ||
| 162 | + console.log(err); | ||
| 163 | + }) | ||
| 164 | + | ||
| 165 | + var peopleSSChartsData = []; | ||
| 166 | + proxy.$http.get(`/api-web/snapshot/overview/snapshotNumByUser`,queryParams.value,(res)=>{ | ||
| 167 | + res.object.forEach(item=>{ | ||
| 168 | + let list = {}; | ||
| 169 | + list.name = item.xaxis + '('+item.yaxis+ ')'; | ||
| 170 | + list.value = item.yaxis; | ||
| 171 | + peopleSSChartsData.push(list); | ||
| 172 | + }) | ||
| 173 | + console.log(peopleSSChartsData); | ||
| 174 | + peopleSSCharts.setOption({ | ||
| 175 | + series:[ | ||
| 176 | + { | ||
| 177 | + data:peopleSSChartsData | ||
| 178 | + } | ||
| 179 | + ] | ||
| 180 | + }); | ||
| 181 | + },(err)=>{ | ||
| 182 | + console.log(err); | ||
| 183 | + }) | ||
| 184 | + } | ||
| 185 | + // 查询事件 | ||
| 186 | + let handleQuery = ()=> { | ||
| 187 | + queryParams.value.pageSize=10; | ||
| 188 | + queryParams.value.pageNum=1; | ||
| 189 | + getDataList(); | ||
| 190 | + getEchartsData(); | ||
| 191 | + } | ||
| 192 | + let getResType = (arr) => { | ||
| 193 | + let types = arr.map(function (v) { | ||
| 194 | + return v.id; | ||
| 195 | + }); | ||
| 196 | + queryParams.value.resType = types.join(','); | ||
| 197 | + } | ||
| 198 | + let getBizType = (arr) => { | ||
| 199 | + let types = arr.map(function (v) { | ||
| 200 | + return v.busId; | ||
| 201 | + }); | ||
| 202 | + queryParams.value.busId = types.join(','); | ||
| 203 | + } | ||
| 204 | + let getUser = (arr) => { | ||
| 205 | + let types = arr.map(function (v) { | ||
| 206 | + return v.username; | ||
| 207 | + }); | ||
| 208 | + queryParams.value.userName = types.join(','); | ||
| 209 | + } | ||
| 210 | + | ||
| 211 | + // 按钮组点击事件 | ||
| 212 | + let handleBtnGroup = (val)=>{ | ||
| 213 | + queryParams.value.time = val; | ||
| 214 | + if (val == 4){ | ||
| 215 | + visiblePopover.value = !visiblePopover.value; | ||
| 216 | + }else{ | ||
| 217 | + visiblePopover.value = false; | ||
| 218 | + getDataList(); | ||
| 219 | + getEchartsData(); | ||
| 220 | + } | ||
| 221 | + }; | ||
| 222 | + | ||
| 223 | + // echarts | ||
| 224 | + let bizChartsRefs = Vue.ref(null); | ||
| 225 | + let devChartsRefs = Vue.ref(null); | ||
| 226 | + let snapshotChartsRefs = Vue.ref(null); | ||
| 227 | + let peopleSSChartsRefs = Vue.ref(null); | ||
| 228 | + let bizCharts = Vue.ref(''); | ||
| 229 | + let devCharts = Vue.ref(''); | ||
| 230 | + let snapshotCharts = Vue.ref(''); | ||
| 231 | + let peopleSSCharts = Vue.ref(''); | ||
| 232 | + let showBus = Vue.ref(false); | ||
| 233 | + let title = Vue.ref(''); | ||
| 234 | + let busType = Vue.ref(); | ||
| 235 | + let getEcharts = ()=>{ | ||
| 236 | + bizCharts = echarts.init(bizChartsRefs.value); | ||
| 237 | + let bizOption = { | ||
| 238 | + grid:{ | ||
| 239 | + top:"8%", | ||
| 240 | + bottom:"4%", | ||
| 241 | + left:"2%", | ||
| 242 | + containLabel:true, | ||
| 243 | + }, | ||
| 244 | + tooltip: { | ||
| 245 | + trigger: 'axis', | ||
| 246 | + axisPointer: { | ||
| 247 | + type: 'shadow', | ||
| 248 | + } | ||
| 249 | + }, | ||
| 250 | + color:"#60a0f7", | ||
| 251 | + xAxis: { | ||
| 252 | + type: 'category', | ||
| 253 | + data: [], | ||
| 254 | + axisTick:false, | ||
| 255 | + axisLabel: { | ||
| 256 | + interval: 0, | ||
| 257 | + formatter: val => { | ||
| 258 | + // 标签长度 | ||
| 259 | + const valLength = val.length | ||
| 260 | + if (valLength > 8) { | ||
| 261 | + return val.slice(0,7) + '...'; | ||
| 262 | + } else { | ||
| 263 | + return val | ||
| 264 | + } | ||
| 265 | + } | ||
| 266 | + } | ||
| 267 | + }, | ||
| 268 | + yAxis: { | ||
| 269 | + type: 'value', | ||
| 270 | + axisLine:{ | ||
| 271 | + show:true, | ||
| 272 | + }, | ||
| 273 | + //分隔线样式 | ||
| 274 | + splitLine:{ | ||
| 275 | + show:true, | ||
| 276 | + lineStyle:{ | ||
| 277 | + type:'dashed' | ||
| 278 | + } | ||
| 279 | + } | ||
| 280 | + }, | ||
| 281 | + series: [ | ||
| 282 | + { | ||
| 283 | + data: [], | ||
| 284 | + type: 'bar', | ||
| 285 | + barWidth: 26,//设置柱状图大小 | ||
| 286 | + itemStyle:{ | ||
| 287 | + borderRadius:[20,20,0,0] | ||
| 288 | + } | ||
| 289 | + } | ||
| 290 | + ] | ||
| 291 | + } | ||
| 292 | + bizCharts.setOption(bizOption); | ||
| 293 | + | ||
| 294 | + devCharts = echarts.init(devChartsRefs.value); | ||
| 295 | + let devOption = { | ||
| 296 | + grid:{ | ||
| 297 | + top:"8%", | ||
| 298 | + bottom:"4%", | ||
| 299 | + left:"2%", | ||
| 300 | + containLabel:true, | ||
| 301 | + }, | ||
| 302 | + tooltip: { | ||
| 303 | + trigger: 'axis', | ||
| 304 | + axisPointer: { | ||
| 305 | + type: 'shadow', | ||
| 306 | + } | ||
| 307 | + }, | ||
| 308 | + color:"#60a0f7", | ||
| 309 | + xAxis: { | ||
| 310 | + type: 'category', | ||
| 311 | + data: [], | ||
| 312 | + axisTick:false, | ||
| 313 | + axisLabel: { | ||
| 314 | + interval: 0, | ||
| 315 | + formatter: val => { | ||
| 316 | + // 标签长度 | ||
| 317 | + const valLength = val.length | ||
| 318 | + if (valLength > 8) { | ||
| 319 | + return val.slice(0,7) + '...'; | ||
| 320 | + } else { | ||
| 321 | + return val | ||
| 322 | + } | ||
| 323 | + } | ||
| 324 | + } | ||
| 325 | + }, | ||
| 326 | + yAxis: { | ||
| 327 | + type: 'value', | ||
| 328 | + axisLine:{ | ||
| 329 | + show:true, | ||
| 330 | + }, | ||
| 331 | + //分隔线样式 | ||
| 332 | + splitLine:{ | ||
| 333 | + show:true, | ||
| 334 | + lineStyle:{ | ||
| 335 | + type:'dashed' | ||
| 336 | + } | ||
| 337 | + } | ||
| 338 | + }, | ||
| 339 | + series: [ | ||
| 340 | + { | ||
| 341 | + data: [], | ||
| 342 | + type: 'bar', | ||
| 343 | + barWidth: 26,//设置柱状图大小 | ||
| 344 | + itemStyle:{ | ||
| 345 | + borderRadius:[20,20,0,0] | ||
| 346 | + } | ||
| 347 | + } | ||
| 348 | + ] | ||
| 349 | + } | ||
| 350 | + devCharts.setOption(devOption); | ||
| 351 | + | ||
| 352 | + snapshotCharts = echarts.init(snapshotChartsRefs.value); | ||
| 353 | + let shapshotOption = { | ||
| 354 | + grid:{ | ||
| 355 | + top:"8%", | ||
| 356 | + bottom:"8%", | ||
| 357 | + left:"2%", | ||
| 358 | + containLabel:true, | ||
| 359 | + }, | ||
| 360 | + tooltip: { | ||
| 361 | + trigger: 'axis', | ||
| 362 | + axisPointer: { | ||
| 363 | + type: 'shadow', | ||
| 364 | + } | ||
| 365 | + }, | ||
| 366 | + color:"#EF8166", | ||
| 367 | + xAxis: { | ||
| 368 | + type: 'value', | ||
| 369 | + axisLine:{ | ||
| 370 | + show:true, | ||
| 371 | + }, | ||
| 372 | + //分隔线样式 | ||
| 373 | + splitLine:{ | ||
| 374 | + show:true, | ||
| 375 | + lineStyle:{ | ||
| 376 | + type:'dashed' | ||
| 377 | + } | ||
| 378 | + } | ||
| 379 | + }, | ||
| 380 | + yAxis: { | ||
| 381 | + type: 'category', | ||
| 382 | + data: [], | ||
| 383 | + axisTick:false, | ||
| 384 | + }, | ||
| 385 | + series: [ | ||
| 386 | + { | ||
| 387 | + data: [], | ||
| 388 | + type: 'bar', | ||
| 389 | + barWidth: 26,//设置柱状图大小 | ||
| 390 | + itemStyle:{ | ||
| 391 | + borderRadius:[0,20,20,0] | ||
| 392 | + } | ||
| 393 | + } | ||
| 394 | + ] | ||
| 395 | + } | ||
| 396 | + snapshotCharts.setOption(shapshotOption); | ||
| 397 | + | ||
| 398 | + peopleSSCharts = echarts.init(peopleSSChartsRefs.value); | ||
| 399 | + let peopleOption = { | ||
| 400 | + grid:{ | ||
| 401 | + top:"14%", | ||
| 402 | + bottom:"8%" | ||
| 403 | + }, | ||
| 404 | + //color:"#60a0f7", | ||
| 405 | + tooltip: { | ||
| 406 | + trigger: 'item' | ||
| 407 | + }, | ||
| 408 | + legend: { | ||
| 409 | + orient: 'vertical', | ||
| 410 | + top:"middle", | ||
| 411 | + right:"10%", | ||
| 412 | + itemWidth:35, | ||
| 413 | + icon:"rect", | ||
| 414 | + }, | ||
| 415 | + series: [ | ||
| 416 | + { | ||
| 417 | + data: [], | ||
| 418 | + center: ['40%', '50%'], | ||
| 419 | + type: 'pie', | ||
| 420 | + //高亮状态的扇区和标签样式。 | ||
| 421 | + emphasis: { | ||
| 422 | + label: { | ||
| 423 | + show: true | ||
| 424 | + }, | ||
| 425 | + itemStyle: { | ||
| 426 | + shadowBlur: 10, | ||
| 427 | + shadowOffsetX: 0, | ||
| 428 | + shadowColor: 'rgba(0, 0, 0, 0.5)' | ||
| 429 | + } | ||
| 430 | + }, | ||
| 431 | + label: { | ||
| 432 | + show: false | ||
| 433 | + }, | ||
| 434 | + } | ||
| 435 | + ] | ||
| 436 | + } | ||
| 437 | + peopleSSCharts.setOption(peopleOption); | ||
| 438 | + } | ||
| 439 | + // 表格删除事件 | ||
| 440 | + let handleDel = (row)=>{ | ||
| 441 | + // console.log(row); | ||
| 442 | + proxy.$global.confirm("确认删除吗？", function () { | ||
| 443 | + deleteItems([row.resId],[row.batchNo]); | ||
| 444 | + }) | ||
| 445 | + } | ||
| 446 | + //删除 | ||
| 447 | + let deleteItems = (ids,nos) => { | ||
| 448 | + let params = { | ||
| 449 | + resId: ids.toString(), | ||
| 450 | + batchNo:nos.toString(), | ||
| 451 | + } | ||
| 452 | + proxy.$http.get('/api-web/snapshot/his/delete', params, function (res) { | ||
| 453 | + if (res && res.success) { | ||
| 454 | + proxy.$global.showMsg('删除成功'); | ||
| 455 | + handleQuery(); | ||
| 456 | + } | ||
| 457 | + }) | ||
| 458 | + } | ||
| 459 | + //快照详情 | ||
| 460 | + let handleDetail = (row)=>{ | ||
| 461 | + proxy.$global.openNewWin('template/detail/snapshot_detail', row.createUser+'在'+row.createTime+'创建的'+row.resName+'的快照', {resId:row.resId,'batchNo':row.batchNo},false); | ||
| 462 | + } | ||
| 463 | + | ||
| 464 | + | ||
| 465 | + //查看业务系统 | ||
| 466 | + let goBus = (row) => { | ||
| 467 | + title.value = row.resName+'所属业务系统信息'; | ||
| 468 | + let busTypeAdmin = []; | ||
| 469 | + for (let i = 0; i < row.busTypeName.split(',').length; i++) { | ||
| 470 | + for (let j = 0; j < row.nickname.split(',').length; j++) { | ||
| 471 | + if (i==j){ | ||
| 472 | + busTypeAdmin.push(row.busTypeName.split(',')[i]+'('+row.nickname.split(',')[i]+')') | ||
| 473 | + } | ||
| 474 | + } | ||
| 475 | + } | ||
| 476 | + busType.value = busTypeAdmin; | ||
| 477 | + showBus.value = true; | ||
| 478 | + | ||
| 479 | + } | ||
| 480 | + //关闭弹框 | ||
| 481 | + let cancelBtn = () => { | ||
| 482 | + showBus.value = false; | ||
| 483 | + } | ||
| 484 | + | ||
| 485 | + //查看资源详情 | ||
| 486 | + let goResDetail = (row) => { | ||
| 487 | + proxy.$global.openDetail(row.resId, row.resType, proxy); | ||
| 488 | + } | ||
| 489 | + | ||
| 490 | + // 时间范围快捷键 修改事件 | ||
| 491 | + let handleChangeDatetime = (value)=>{ | ||
| 492 | + visiblePopover.value = false; | ||
| 493 | + queryParams.value.time = value.join(','); | ||
| 494 | + getDataList(); | ||
| 495 | + getEchartsData(); | ||
| 496 | + } | ||
| 497 | + | ||
| 498 | + | ||
| 499 | + | ||
| 500 | + Vue.onMounted(()=>{ | ||
| 501 | + getEcharts(); | ||
| 502 | + getEchartsData(); | ||
| 503 | + getDataList(); | ||
| 504 | + }) | ||
| 505 | + | ||
| 506 | + return { | ||
| 507 | + height, | ||
| 508 | + tableData, | ||
| 509 | + queryParams, | ||
| 510 | + btnGroupType, | ||
| 511 | + loaddata, | ||
| 512 | + handleBtnGroup, | ||
| 513 | + bizChartsRefs, | ||
| 514 | + devChartsRefs, | ||
| 515 | + snapshotChartsRefs, | ||
| 516 | + peopleSSChartsRefs, | ||
| 517 | + datetimerange, | ||
| 518 | + visiblePopover, | ||
| 519 | + handleChangeDatetime, | ||
| 520 | + handleDel, | ||
| 521 | + goResDetail, | ||
| 522 | + handleDetail, | ||
| 523 | + goBus, | ||
| 524 | + showBus, | ||
| 525 | + cancelBtn, | ||
| 526 | + title, | ||
| 527 | + busType, | ||
| 528 | + getResType, | ||
| 529 | + getBizType, | ||
| 530 | + handleQuery, | ||
| 531 | + getUser | ||
| 532 | + } | ||
| 533 | + } | ||
| 534 | +} |
| @@ -1135,6 +1135,8 @@ layui.define(['table', 'form', 'laydate', 'admin', 'layer', 'laytpl', 'common', | @@ -1135,6 +1135,8 @@ layui.define(['table', 'form', 'laydate', 'admin', 'layer', 'laytpl', 'common', | ||
| 1135 | }); | 1135 | }); |
| 1136 | //告警级别 | 1136 | //告警级别 |
| 1137 | form.on('select(alarmLevelSearch)', function (data) { | 1137 | form.on('select(alarmLevelSearch)', function (data) { |
| 1138 | + //lsq 切换告警级别时，获取统计告警量接口的参数更改 2022-08-08 | ||
| 1139 | + alarmLevel = $("#alarmLevelSearchBox").val() | ||
| 1138 | reloadTable(); | 1140 | reloadTable(); |
| 1139 | }); | 1141 | }); |
| 1140 | // 告警确认 | 1142 | // 告警确认 |
| @@ -921,6 +921,8 @@ | @@ -921,6 +921,8 @@ | ||
| 921 | class="layui-btn layui-btn-danger layui-bg-red layui-btn-radius layui-btn-xs p-0-15 cant-click"> | 921 | class="layui-btn layui-btn-danger layui-bg-red layui-btn-radius layui-btn-xs p-0-15 cant-click"> |
| 922 | 失败 | 922 | 失败 |
| 923 | </button>`; | 923 | </button>`; |
| 924 | + /*lsq 连接失败时tips显示连接失败 2022-08-08*/ | ||
| 925 | + linkStateTips='连接失败'; | ||
| 924 | } | 926 | } |
| 925 | } | 927 | } |
| 926 | }} | 928 | }} |
| @@ -244,6 +244,24 @@ const routes = [{ | @@ -244,6 +244,24 @@ const routes = [{ | ||
| 244 | name: 'busyConfig', | 244 | name: 'busyConfig', |
| 245 | component: () => myImport('views/busyConfig/index') | 245 | component: () => myImport('views/busyConfig/index') |
| 246 | }, | 246 | }, |
| 247 | + //快照管理 | ||
| 248 | + { | ||
| 249 | + path: '/vue3/snapshot', | ||
| 250 | + name: 'snapshot', | ||
| 251 | + component: () => myImport('views/snapshot/index') | ||
| 252 | + }, | ||
| 253 | + //快照历史 | ||
| 254 | + { | ||
| 255 | + path: '/vue3/snapshot/history', | ||
| 256 | + name: 'snapshotHistory', | ||
| 257 | + component: () => myImport('views/snapshot/history/index') | ||
| 258 | + }, | ||
| 259 | + //快照概览 | ||
| 260 | + { | ||
| 261 | + path: '/vue3/snapshotOverview', | ||
| 262 | + name: 'snapshotOverview', | ||
| 263 | + component: () => myImport('views/snapshotOverview/index') | ||
| 264 | + }, | ||
| 247 | ]; | 265 | ]; |
| 248 | 266 | ||
| 249 | // hash模式： createWebHashHistory | 267 | // hash模式： createWebHashHistory |
-
Please register or login to post a comment