【1427】 B7，X86详情页面增加的8个指标，详情页面展示布局优化 #1

【1443】 B1，通知查询功能优化--  增加告警指标、通知类型的查询条件；右上方增加：今天、本周、本月、全部、自定义 #1

@@ -501,6 +501,261 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
                 });
                 });
             });
             });
         },
         },
+        /**lsq 2022-07-05
+         *渲染环形图及链接数
+         * @param targetId 环形图区域ID
+         * @param resId 资源ID
+         * @param kpiId 指标ID,多个指标逗号隔开
+         * @param kpiname 指标名称
+         * @param titleName 环形图中心名称
+         * @param linkTargetId 链接状态区域ID
+         * @param linkKpiId 链接状态区域的指标ID，多个指标逗号隔开
+         * */
+        renderPieChartLink:function(targetId,resId,kpiId,kpiname,titleName,linkTargetId,linkKpiId,flag,isBasic,hasTotal){
+            let title='CPU';
+            let colorsArr=['#37bca6','#b4d43a','#e85228','#5a5487']
+            if(titleName){
+                title=titleName
+            }
+            let allKpi=kpiId;
+            let linkKpiIdArr=[];
+            var cpuPieChart = null;
+            if(linkKpiId){
+                allKpi+=','+linkKpiId;
+                linkKpiIdArr=linkKpiId.split(',');
+            }
+            var url = "/api-web/detail/block?resId=" + resId + "&kpiId=" + allKpi + "&hasTotal=" + hasTotal;
+            if (flag) {
+                url += '&flag=' + flag;
+            }
+            if (isBasic) {
+                url += '&isBasic=' + isBasic;
+            }
+            admin.req({
+                url: common.domainName + url
+            }).done(function (res) {
+                let linkStr='';
+                setTimeout(function () {
+                    $('#' + targetId).find('.pie-circleStr').remove();
+                    $('#' + targetId).find('.pie-legend').remove();
+                    if (res.data && res.data.length > 0) {
+                        var data = res.data;
+                        let linkData = [];
+                        let pieData = [];
+                        let colors = [];
+                        data.map((item, i) => {
+                            if (linkKpiIdArr.indexOf(item.id) != -1) {
+                                //链接数据
+                                linkData.push(item);
+                            } else {
+                                //百分比数据
+                                pieData.push(item)
+                                colors.push(common.colorsArr[i]);
+                            }
+                        })
+                        if (pieData.length > 0) {
+                            let seriesData = [];
+                            pieData.map(item => {
+                                let valArr = item.value.split('%');
+                                let obj = item;
+                                obj.value = valArr[0];
+                                seriesData.push(obj)
+                            })
+
+                            // setTimeout(function () {
+                                $('#' + targetId).find('.pie-circleStr').remove();
+                                $('#' + targetId).find('.pie-legend').remove();
+                                //生成环形图
+                                var option = {
+                                    tooltip: {
+                                        trigger: 'item',
+                                        formatter: function (param) {
+                                            var tips = param.marker + " " + param.name + "：" + param.value + param.data.unit + "</br>";
+                                            return tips;
+                                        },
+                                        axisPointer: {
+                                            type: 'shadow'
+                                        }
+                                    },
+                                    legend: {
+                                        orient: 'vertical',
+                                        x: '45%',
+                                        y: 'center',
+                                        formatter: ' ',
+                                        itemHeight: '4',
+                                        textStyle: {
+                                            fontsize: "12px"
+                                        }
+                                    },
+                                    color: colorsArr,
+                                    series: [
+                                        {
+                                            type: 'pie',
+                                            radius: ['60%', '95%'],
+                                            center: ['20%', '50%'],
+                                            data: seriesData,
+                                            avoidLabelOverlap: false,
+                                            stillShowZeroSum: true,
+                                            label: {
+                                                show: false,
+                                                position: 'center'
+                                            },
+                                            itemStyle: {
+                                                borderColor: "#ffffff",
+                                                borderWidth: '3'
+                                            },
+                                            hoverAnimation: false,
+                                            emphasis: {
+                                                scale: true,
+                                                scaleSize: 10,
+                                            },
+                                            labelLine: {
+                                                show: false
+                                            },
+                                        }
+                                    ]
+                                };
+                                if (cpuPieChart === null) {
+                                    cpuPieChart = echarts.init(document.getElementById(targetId));
+                                } else {
+                                    cpuPieChart.clear();
+                                    $('#' + targetId).html('');
+                                }
+                                cpuPieChart.setOption(option);
+                                //中间圆圈
+                                let circleStr = `<div class="pie-circleStr"><div class="pie-circleStr-title">` + title + `</div></div>`;
+                                $('#' + targetId).append(circleStr);
+                                //右侧详细内容
+                                let legendStr = ` <div class="pie-legend">`;
+                                pieData.map((item, i) => {
+                                    let fixedVal=Number(item.value).toFixed(2);
+                                    let paramName = item.name.replace('CPU', '')
+                                    legendStr += `<div class="pie-legend-item">
+                                    <span class="pie-legend-icon" style="background-color: ` + colorsArr[i] + `"></span>
+                                    <span class="pie-legend-label">` + paramName + `：</span>
+                                    <span class="pie-legend-num" data-kpiid="` + item.id + `"  
+                                    data-name="` + item.name + `" data-warning="1" data-ident="1" 
+                                    data-trend="0" data-flag="` + item.flag + `">
+                                    <span class="pie-num-val">` + fixedVal + item.unit + `</span>
+                                     <a class="detail_row_menu hide" data-id="`+item.id+`" data-kpiid="` + item.id + `"  
+                                    data-name="` + item.name + `" data-kpiname="` + item.name + `" data-warning="1" data-ident="1" 
+                                    data-trend="0" data-flag="` + item.flag + `"  data-unit="` + item.unit + `" 
+                                    data-hidem="true" data-canca="true" data-incaing="true" data-restype="` + item.resType + `">
+                                <img style="width: 17px;height: 17px;" src="/src/style/img/icon_row_menu.png">
+                            </a></span>
+                                </div>`
+                                })
+                                legendStr += '</div>';
+                                $('#' + targetId).append(legendStr);
+                                $('.pie-legend-num .pie-num-val').unbind('click').click(function () {
+                                    let kpiId = $(this).parent().data('kpiid');
+                                    let flag = $(this).parent().data('flag');
+                                    let warning = $(this).parent().data('warning');
+                                    let ident = $(this).parent().data('ident');
+                                    let trend = $(this).parent().data('trend');
+                                    let name = $(this).parent().data('name');
+                                    var params = {
+                                        resId: resId,
+                                        kpiId: kpiId,
+                                        flag: flag,
+                                        warning: warning,
+                                        ident: ident,
+                                        trend: trend,
+                                        name: name
+                                    };
+                                    common.openLineChart(name, params);
+                                })
+                                //点击扇形区域，打开性能曲线图
+                                cpuPieChart.on('click', function (params) {
+                                    let data = params.data;
+                                    let kpiId = data.id;
+                                    let flag = data.flag;
+                                    let warning = data.isWarning;
+                                    let ident = 1;
+                                    let trend = 0;
+                                    let name = data.name;
+                                    var params = {
+                                        resId: resId,
+                                        kpiId: kpiId,
+                                        flag: flag,
+                                        warning: warning,
+                                        ident: ident,
+                                        trend: trend,
+                                        name: name
+                                    };
+                                    common.openLineChart(name, params);
+                                });
+                                //监听告警压制等操作配置
+                                $('#' + targetId).find('.pie-legend-num').hover(function () {
+                                    var $that = $(this);
+                                    var $btn = $that.find(".detail_row_menu");
+                                    if ($btn.length > 0) {
+                                        $(".layui-card-body").find(".detail_row_menu:not(.hide)").addClass("hide")
+                                        $btn.removeClass("hide");
+                                    }
+                                });
+                                filterSuppressMonitor(resId);
+
+                            // }, 300)
+                        }
+                        if (linkData.length > 0) {
+                            linkData.map(item => {
+                                linkStr += `<div class="lay-row-item lay-row-item-num">
+                        <div class="lay-row-title-label">` + item.name + `</div>
+                        <div class="lay-row-num" data-kpiid="` + item.id + `"  
+                        data-name="` + item.name + `" data-warning="1" data-ident="1" 
+                        data-trend="0" data-flag="` + item.flag + `"
+                        ><span class="lay-row-num-val">` + Math.round(item.value) + `</span>
+                            <a class="detail_row_menu hide" data-id="`+item.id+`" data-kpiid="` + item.id + `"  
+                        data-name="` + item.name + `" data-kpiname="` + item.name + `" data-warning="1" data-ident="1" 
+                        data-trend="0" data-flag="` + item.flag + `" data-unit="` + item.unit + `" 
+                        data-hidem="true" data-canca="true" data-incaing="true" data-restype="` + item.resType + `" >
+                                <img style="width: 17px;height: 17px;" src="/src/style/img/icon_row_menu.png">
+                            </a></div>
+                    </div>`
+                            })
+                        }
+                    } else {
+                        linkStr = '';
+                    }
+                    $("#"+linkTargetId).html(linkStr);
+
+                    //监听编辑状态下的复选框事件
+                    getCheckedBoxData();
+                    //监听告警压制等操作配置
+                    $('#' + linkTargetId).find('.lay-row-item-num .lay-row-num').hover(function () {
+                        var $that = $(this);
+                        var $btn = $that.find(".detail_row_menu");
+                        if ($btn.length > 0) {
+                            $(".layui-card-body").find(".detail_row_menu:not(.hide)").addClass("hide")
+                            $btn.removeClass("hide");
+                        }
+                    });
+                    //监听过滤压制等事件
+                    filterSuppressMonitor(resId);
+                    //链接数值下探 ，打开性能曲线
+                    $(".lay-row-item-num .lay-row-num .lay-row-num-val").unbind('click').click(function () {
+                        let kpiId=$(this).parent().data('kpiid');
+                        let flag=$(this).parent().data('flag');
+                        let warning=$(this).parent().data('warning');
+                        let ident=$(this).parent().data('ident');
+                        let trend=$(this).parent().data('trend');
+                        let name=$(this).parent().data('name');
+                        var params = {
+                            resId: resId,
+                            kpiId: kpiId,
+                            flag: flag,
+                            warning: warning,
+                            ident: ident,
+                            trend: trend,
+                            name: name
+                        };
+                        common.openLineChart(name, params);
+                    })
+
+                })
+            })
+        },
         /**
         /**
          * 渲染饼状图
          * 渲染饼状图
          * @param targetId 饼状图区域ID
          * @param targetId 饼状图区域ID

@@ -34,6 +34,9 @@ layui.define(['commonDetail','common', 'admin'], function (exports) {
         var diskkpi = "KPI9D22EAB6,KPI5CA7AA50,KPI98183B26,KPI66BD013F,KPI3E6ED38B,KPI97373ED0,KPI95378FE0";
         var diskkpi = "KPI9D22EAB6,KPI5CA7AA50,KPI98183B26,KPI66BD013F,KPI3E6ED38B,KPI97373ED0,KPI95378FE0";
         // ogg信息
         // ogg信息
         var oggkpi = "KPI95C50C7C,KPIEC53A8C4,KPI03937134,KPI1A122D84,KPI16282DF0";
         var oggkpi = "KPI95C50C7C,KPIEC53A8C4,KPI03937134,KPI1A122D84,KPI16282DF0";
+        //lsq cpu百分比 2022-07-04
+        var cpupiekpi = "KPI1E378242,KPI41B4C1B4,KPI6AC0FB43,KPI6F620E2B";
+        var linkKpi = "KPI7C714058,KPID152C818,KPIA2EA1646,KPI780EFE90";
         if (os === 'windows'){
         if (os === 'windows'){
             $($("#x86server_filesysMore").parents(".lay-row-item")).hide();
             $($("#x86server_filesysMore").parents(".lay-row-item")).hide();
             $($("#x86server_inodeMore").parents(".lay-row-item")).hide();
             $($("#x86server_inodeMore").parents(".lay-row-item")).hide();
@@ -79,6 +82,8 @@ layui.define(['commonDetail','common', 'admin'], function (exports) {
             commonDetail.renderLineCharat("x86server_cpu_linechart", resId, "KPI7054BC34", "CPU使用率", "cpu");
             commonDetail.renderLineCharat("x86server_cpu_linechart", resId, "KPI7054BC34", "CPU使用率", "cpu");
             //内存使用率走势(12小时)
             //内存使用率走势(12小时)
             commonDetail.renderLineCharat("x86server_memery_linechart", resId, "KPI31CB8D97", "内存使用率", "mem");
             commonDetail.renderLineCharat("x86server_memery_linechart", resId, "KPI31CB8D97", "内存使用率", "mem");
+            //lsq cpu百分比 2022-07-04
+            commonDetail.renderPieChartLink("x86server_cpupie",resId,cpupiekpi,"CPU百分比",'CPU','x86server_linkdata',linkKpi);
 
 
             if (os === 'windows') {
             if (os === 'windows') {
                 //磁盘使用情况
                 //磁盘使用情况

@@ -33,7 +33,10 @@ layui.define(['commonDetail','common', 'admin'], function (exports) {
         var portDetTableKpiId='KPI39C76443,KPIC6A062EC,KPI5212EE93,KPIDCBEA93D';
         var portDetTableKpiId='KPI39C76443,KPIC6A062EC,KPI5212EE93,KPIDCBEA93D';
         // ogg信息
         // ogg信息
         var oggkpi = "KPI95C50C7C,KPIEC53A8C4,KPI03937134,KPI1A122D84,KPI16282DF0";
         var oggkpi = "KPI95C50C7C,KPIEC53A8C4,KPI03937134,KPI1A122D84,KPI16282DF0";
-        
+
+        //lsq cpu百分比 2022-07-04
+        var cpupiekpi = "KPI1E378242,KPI41B4C1B4,KPI6AC0FB43,KPI6F620E2B";
+        var linkKpi = "KPI7C714058,KPID152C818,KPIA2EA1646,KPI780EFE90";
         x86virtual();
         x86virtual();
         function x86virtual(){
         function x86virtual(){
             //资源状态
             //资源状态
@@ -52,6 +55,8 @@ layui.define(['commonDetail','common', 'admin'], function (exports) {
             commonDetail.renderLineCharat("x86virtual_cpu_linechart",resId,"KPI7054BC34","CPU使用率","cpu");
             commonDetail.renderLineCharat("x86virtual_cpu_linechart",resId,"KPI7054BC34","CPU使用率","cpu");
             //内存使用率走势(12小时)
             //内存使用率走势(12小时)
             commonDetail.renderLineCharat("x86virtual_memery_linechart",resId,"KPI31CB8D97","内存使用率","mem");
             commonDetail.renderLineCharat("x86virtual_memery_linechart",resId,"KPI31CB8D97","内存使用率","mem");
+            //lsq cpu百分比 2022-07-04
+            commonDetail.renderPieChartLink("x86virtual_cpupie",resId,cpupiekpi,"CPU百分比",'CPU','x86virtual_linkdata',linkKpi);
 
 
             //磁盘IO读速率
             //磁盘IO读速率
             commonDetail.renderLineCharat("x86virtual_disk_ioread_linechart",resId,"KPI97373ED0","磁盘IO读速率","disk", null, 'KPI9D22EAB6');
             commonDetail.renderLineCharat("x86virtual_disk_ioread_linechart",resId,"KPI97373ED0","磁盘IO读速率","disk", null, 'KPI9D22EAB6');

@@ -23,7 +23,8 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions', 'xmSelect'
         var noticeUserChart = echarts.init(document.getElementById('notice_chart_user'));
         var noticeUserChart = echarts.init(document.getElementById('notice_chart_user'));
         var noticeTypeChart = echarts.init(document.getElementById('notice_chart_type'));
         var noticeTypeChart = echarts.init(document.getElementById('notice_chart_type'));
         // var noticeUserChartNew = echarts.init(document.getElementById('notice_chart_user_new'));
         // var noticeUserChartNew = echarts.init(document.getElementById('notice_chart_user_new'));
-
+        // lsq 告警指标 2022-07-05
+        var alarmKpi= '';
         //回车搜索
         //回车搜索
         $('#notice_search_keyword').keydown(function (e) {
         $('#notice_search_keyword').keydown(function (e) {
             if (e.keyCode === 13) {
             if (e.keyCode === 13) {
@@ -56,7 +57,9 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions', 'xmSelect'
                 busId:  busId,
                 busId:  busId,
                 resType: resType,
                 resType: resType,
                 usernames:userNames,
                 usernames:userNames,
-                isSend: $('#notice_search_isSend').val()
+                isSend: $('#notice_search_isSend').val(),
+                alarmKpi: $("#noticeAlarmKpiSearchBox").val(),
+                way:$('#noticeWaySearchBox').val()
             }
             }
             , height: 'full-380'
             , height: 'full-380'
             , page: {
             , page: {
@@ -284,7 +287,51 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions', 'xmSelect'
 
 
             }
             }
         });
         });
-
+        // lsq 告警指标下拉列表 2022-07-05
+        $.ajax({
+            url: common.domainName + '/api-web/manage/kpi/findKpiInAlarm?access_token='+accessToken+'&tableName=b_alarm',
+            type: "get",
+            success:function (res) {
+                var kpis = res.data;
+                var html = '<option value="">=指标名称=</option>'
+                $.each(kpis,function (i,e) {
+                    html+='<option value="'+e.kpiId+'">'+e.kpiName+'</option>'
+                })
+                $("#noticeAlarmKpiSearchBox").html('');
+                $("#noticeAlarmKpiSearchBox").append(html);
+                form.render();
+            }
+        })
+        //lsq 通知方式下拉列表 2022-07-07
+        $.ajax({
+            url: domainName + '/api-web/manage/ddic/findSucDdics/notice_type?access_token='+accessToken,
+            type: "POST",
+            success:function (res) {
+                var ways = res.data;
+                var html = '<option value="">=通知方式=</option>'
+                $.each(ways,function (i,e) {
+                    html+='<option value="'+e.ddicCode+'">'+e.ddicName+'</option>'
+                })
+                $("#noticeWaySearchBox").html('');
+                $("#noticeWaySearchBox").append(html);
+                form.render();
+            }
+        })
+        //lsq 快速检查字典数据 2022-07-05
+        $.ajax({
+            url: domainName + '/api-web/manage/ddic/findSucDdics/quick_search?access_token='+accessToken,
+            type: "POST",
+            success:function (res) {
+                var quickSearchs = res.data;
+                var html = ''
+                $.each(quickSearchs,function (i,e) {
+                    html+=' <span data-code="'+e.ddicCode+'">'+e.ddicName+'</span>'
+                })
+                $("#quick_search").html('');
+                $("#quick_search").append(html);
+                form.render();
+            }
+        })
         //刷新表格
         //刷新表格
         function reloadTable() {
         function reloadTable() {
             noticeTable.reload({
             noticeTable.reload({
@@ -295,7 +342,9 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions', 'xmSelect'
                     resType: resType,
                     resType: resType,
                     isSend: $('#notice_search_isSend').val(),
                     isSend: $('#notice_search_isSend').val(),
                     usernames:userNames,
                     usernames:userNames,
-                    page: 1
+                    page: 1,
+                    alarmKpi: $("#noticeAlarmKpiSearchBox").val(),
+                    way:$('#noticeWaySearchBox').val()
                 }
                 }
             });
             });
         }
         }
@@ -529,7 +578,9 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions', 'xmSelect'
                 keyword: $('#notice_search_keyword').val(),
                 keyword: $('#notice_search_keyword').val(),
                 busId:  busId,
                 busId:  busId,
                 resType: resType,
                 resType: resType,
-                isSend: $('#notice_search_isSend').val()
+                isSend: $('#notice_search_isSend').val(),
+                alarmKpi: $("#noticeAlarmKpiSearchBox").val(),
+                way:$('#noticeWaySearchBox').val()
             };
             };
 
 
             $.ajax({
             $.ajax({
@@ -583,7 +634,9 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions', 'xmSelect'
                         keyword: $('#notice_search_keyword').val(),
                         keyword: $('#notice_search_keyword').val(),
                         busId:  busId,
                         busId:  busId,
                         resType: resType,
                         resType: resType,
-                        isSend: $('#notice_search_isSend').val()
+                        isSend: $('#notice_search_isSend').val(),
+                        alarmKpi: $("#noticeAlarmKpiSearchBox").val(),
+                        way:$('#noticeWaySearchBox').val()
                     };
                     };
                     var noticeTypeChartNew = echarts.init(document.getElementById('notice_chart_type_new'));
                     var noticeTypeChartNew = echarts.init(document.getElementById('notice_chart_type_new'));
                     $.ajax({
                     $.ajax({

@@ -8039,4 +8039,88 @@ form[lay-filter="activewarning-form"] .layui-inline {
     text-overflow: ellipsis;
     text-overflow: ellipsis;
     white-space: nowrap;
     white-space: nowrap;
 
 
+}
+/*lsq x86新增指标在详情页下的样式 2022-07-04*/
+.template .lay-row-item-num {
+    background-color: #f8f8f8;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    min-height: 64px;
+}
+.template .lay-row-item-num .lay-row-num{
+    text-decoration: underline;
+    font-size: 32px;
+    cursor: pointer;
+}
+.cpupie_chart{
+    width:100%;
+}
+.cpupie_chart div:first-child{
+    z-index: 99;
+}
+.pie-circleStr{
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 60%;
+    bottom: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    z-index: 9;
+}
+.pie-circleStr-title{
+    border: 1px solid #CCCCCC;
+    height: 55px;
+    width: 55px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.pie-legend{
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 55%;
+    height: 115px;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    z-index: 100;
+}
+.pie-legend-item{
+    display:flex;
+    align-items: center;
+    font-size: 12px;
+    line-height: 23px;
+}
+.pie-legend-icon{
+    width:20px;
+    height:4px;
+    margin-right: 3px;
+    display: none;
+}
+.pie-legend-num{
+    cursor: pointer;
+    color:#1e9fff;
+    text-decoration: underline;
+}
+/*lsq 通知查询搜索栏 2022-07-05*/
+.search_button_group{
+    display: flex;
+    justify-content: space-between;
+    padding:6px;
+}
+.card_header_search_button{
+   width:330px;
+}
+.quick_search span{
+    background-color: #1e9fff;
+    border-radius: 8px;
+    padding: 5px;
+    color: #fff;
+    cursor: pointer;
 }
 }

@@ -17,9 +17,9 @@
     <div class="page-panel">
     <div class="page-panel">
         <div class="main">
         <div class="main">
             <div class="layui-card" style="overflow: hidden">
             <div class="layui-card" style="overflow: hidden">
-                <div class="layui-card-header">
+                <div class="layui-card-header" style="    padding: 0 3px;">
                     <div class="layui-status search_panel">
                     <div class="layui-status search_panel">
-                        <form class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="notice_search_form">
+                        <form style="padding:5px 0 0 0;" class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="notice_search_form">
                             <div class="layui-form-item">
                             <div class="layui-form-item">
                                 <div class="layui-inline">
                                 <div class="layui-inline">
                                     <div class="layui-input-inline layui-input-inline--long">
                                     <div class="layui-input-inline layui-input-inline--long">
@@ -45,21 +45,52 @@
                                     </div>
                                     </div>
                                 </div>
                                 </div>
                                 <!--发送状态-->
                                 <!--发送状态-->
-                                <div class="layui-inline">
-                                    <div class="layui-input-inline layui-input-inline--long">
+                                <!--<div class="layui-inline">
+                                    <div class="layui-input-inline layui-input-inline&#45;&#45;long">
                                         <select id="notice_search_isSend" lay-filter="notice_search_isSend">
                                         <select id="notice_search_isSend" lay-filter="notice_search_isSend">
                                             <option value="1">已发送</option>
                                             <option value="1">已发送</option>
                                             <option value="">待发送</option>
                                             <option value="">待发送</option>
                                         </select>
                                         </select>
                                     </div>
                                     </div>
+                                </div>-->
+                                <!--lsq 告警指标 2022-07-05-->
+                                <div class="layui-inline">
+                                    <div class="layui-input-inline">
+                                        <select name="alarmKpi" lay-filter="alarmKpiSearch"  lay-search="" id="noticeAlarmKpiSearchBox">
+                                        </select>
+                                    </div>
                                 </div>
                                 </div>
+                                <!--lsq 通知方式 2022-07-05-->
                                 <div class="layui-inline">
                                 <div class="layui-inline">
-                                    <button id="noticeSearchQueryBtn" type="button" class="layui-btn layui-btn-normal" ><i
+                                    <div class="layui-input-inline">
+                                        <select name="way" lay-filter="noticeWaySearch" llay-search="" id="noticeWaySearchBox">
+                                        </select>
+                                    </div>
+                                </div>
+                                <div class="layui-inline">
+                                   <!-- <button id="noticeSearchQueryBtn" type="button" class="layui-btn layui-btn-normal" ><i
                                             class="layui-icon layui-icon-search"></i>查询
                                             class="layui-icon layui-icon-search"></i>查询
-                                    </button>
+                                    </button>-->
                                 </div>
                                 </div>
                             </div>
                             </div>
                         </form>
                         </form>
+
+                    </div>
+                    <div class="search_button_group">
+                        <div class="quick_search" id="quick_search">
+                            <span>ip</span>
+                            <span>ip1</span>
+                        </div>
+
+                        <div class="layui-card-header card_header_search_button" >
+                            <div class="layui-btn-group time-group" id="noticeCount_time_button_id" style="float: right;">
+                                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-period="all">全部</button>
+                                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm active" data-period="today">今天</button>
+                                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-period="week">本周</button>
+                                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-period="month">本月</button>
+                                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-period="custom">自定义</button>
+                            </div>
+                        </div>
                     </div>
                     </div>
                 </div>
                 </div>
                 <div style="display: flex" class="layui-card-echart">
                 <div style="display: flex" class="layui-card-echart">

@@ -63,6 +63,12 @@
 
 
                     <div class="lay-row">
                     <div class="lay-row">
                         <div class="lay-row-item">
                         <div class="lay-row-item">
+                            <h5 class="lay-row-title">CPU百分比
+                            </h5>
+                            <div id="x86server_cpupie" class="pie-wrap dasboard cpupie_chart">
+                            </div>
+                        </div>
+                        <div class="lay-row-item">
                             <h5 class="lay-row-title">CPU使用率
                             <h5 class="lay-row-title">CPU使用率
                                 <a class="detail_row_menu hide">
                                 <a class="detail_row_menu hide">
                                     <img style="width: 17px;height: 17px;" src="/src/style/img/icon_row_menu.png">
                                     <img style="width: 17px;height: 17px;" src="/src/style/img/icon_row_menu.png">

@@ -62,6 +62,12 @@
                     </div>
                     </div>
                     <div class="lay-row">
                     <div class="lay-row">
                         <div class="lay-row-item">
                         <div class="lay-row-item">
+                            <h5 class="lay-row-title">CPU百分比
+                            </h5>
+                            <div id="x86virtual_cpupie" class="pie-wrap dasboard cpupie_chart">
+                            </div>
+                        </div>
+                        <div class="lay-row-item">
                             <h5 class="lay-row-title">CPU使用率
                             <h5 class="lay-row-title">CPU使用率
                                 <a class="detail_row_menu hide">
                                 <a class="detail_row_menu hide">
                                     <img style="width: 17px;height: 17px;" src="/src/style/img/icon_row_menu.png">
                                     <img style="width: 17px;height: 17px;" src="/src/style/img/icon_row_menu.png">
@@ -106,6 +112,25 @@
                             </ul>
                             </ul>
                         </div>
                         </div>
                     </div>
                     </div>
+                    <!--lsq x86新增的指标信息 2022-07-04-->
+                    <div class="lay-row" id="x86virtual_linkdata">
+                        <!--<div class="lay-row-item lay-row-item-num">
+                            <div class="lay-row-title-label">总链接数</div>
+                            <div class="lay-row-num">23</div>
+                        </div>
+                        <div class="lay-row-item lay-row-item-num">
+                            <div class="lay-row-title-label">保持状态链接数</div>
+                            <div class="lay-row-num"></div>
+                        </div>
+                        <div class="lay-row-item lay-row-item-num">
+                            <div class="lay-row-title-label">time_wait状态链接数</div>
+                            <div class="lay-row-num"></div>
+                        </div>
+                        <div class="lay-row-item lay-row-item-num">
+                            <div class="lay-row-title-label">close_wait状态链接数</div>
+                            <div class="lay-row-num"></div>
+                        </div>-->
+                    </div>
                     <div class="lay-row">
                     <div class="lay-row">
                         <div class="lay-row-item">
                         <div class="lay-row-item">
                             <h5 class="lay-row-title">文件系统<span id="x86virtual_filesysDownload" class="layui-table-link"  style="margin-left: 10px;">下载</span><span id="x86virtual_filesysMore" class="layui-table-link">更多</span></h5>
                             <h5 class="lay-row-title">文件系统<span id="x86virtual_filesysDownload" class="layui-table-link"  style="margin-left: 10px;">下载</span><span id="x86virtual_filesysMore" class="layui-table-link">更多</span></h5>