Merge branch 'master-joke' into 'master'

feat:H3Cpc服务器详情页调整

feat:H3Cpc服务器详情页调整

See merge request !1121

@@ -871,6 +871,52 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
         },
 
         /**
+         * 资源状态 带告警信息
+         * @param targetId 资源状体区域ID
+         * @param resId
+         * 返回报文： {"code":"0","data":{"yz":"3","icon":"worst","yb":"0","state":"差","zy":"0"}}
+         */
+        renderResHealthForH3cBmc: function (targetId, resId) {
+            var url = "/api-web/detail/resouce/health?resId=" + resId;
+            admin.req({
+                url: common.domainName + url
+            }).done(function (res) {
+                var data = res.data;
+                var clas = 'res-state-pie--good';
+                if (data.icon == 'worst') {
+                    clas = 'res-state-pie--bad';
+                }
+                if (data.icon == 'worse') {
+                    clas = 'res-state-pie--middle';
+                }
+                var reslt = "优", yz = '0', yb = '0', zy = '0';
+                if (data.state) {
+                    reslt = data.state;
+                }
+                if (data.yz) {
+                    yz = data.yz=='null'||''?0:data.yz;
+                }
+                if (data.zy) {
+                    zy = data.zy=='null'||''?0:data.zy;
+                }
+                if (data.yb) {
+                    yb = data.yb=='null'||''?0:data.yb;
+                }
+                var html = '<div class="res-state-pie ' + clas + '" style="margin: auto">' + reslt + '</div>' +
+                    '       <div>' +
+                    '       <ul style="margin: 135px 100px 20px 0px">' +
+                    '           <li>严重告警：' + yz + '</li>' +
+                    '           <li>重要告警：' + zy + '</li>' +
+                    '           <li>一般告警：' + yb + '</li>' +
+                    '       </ul>' +
+                    '       </div>';
+
+                $("#" + targetId).html(html);
+
+            });
+        },
+
+        /**
          * 资源状态
          * @param targetId 资源状体区域ID
          * @param resId
@@ -2460,6 +2506,253 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
         },
 
         /**
+         * 动态渲染表格
+         * @param tableId 表格所在区域ID
+         * @param page 是否分页 true/false
+         * @param resId 资源Id
+         * @param kpiId 指标Id,多个id，以逗号隔开
+         * @param flagPrifix 二级标识（flag）共性部分（前缀）
+         * @param colWidth 各个列宽度设置，可以只设置前边的，设置百分比
+         */
+        renderTableForH3cBmc: function (tableId, page, resId, kpiId, title, flagPrifix, sortBy, order, size,colWidth) {
+            var editFlag = localStorage.getItem("editFlag");//是否编辑状态
+            //start lsq 状态信息的状态也增加下探 202-06-08
+            let statusF=false;//是否为状态信息
+            //end lsq 2022-06-08
+            if (!size) {
+                size = 5;
+            }
+            var url = "/api-web/detail/table/page?resId=" + resId + "&kpiId=" + kpiId + "&page=1&size=" + size;
+            if(sortBy){
+                url += '&sortBy=' + sortBy;
+            }
+            if(order){
+                url += '&order=' + order;
+            }
+            //如果是编辑状态，则进行分页展示
+            if (editFlag && editFlag == "true") {
+                page = true;
+            }
+            if (page) {//分页获取
+                url = "/api-web/detail/table/notpage?resId=" + resId + "&kpiId=" + kpiId;
+            }
+            if (flagPrifix) {
+                url = url + "&flagPrifix="+flagPrifix;
+            }
+            admin.req({
+                url: common.domainName + url
+            }).done(function (res) {
+                var data = res.data[0];
+                var header = data.header;
+                var content = data.content;
+                // 如果有数据，展示
+                if(content.length) {
+                    $('#' + tableId + 'Hide').removeClass('hide');
+                }
+                //如果是端口存活拨测，并且没有返回值时，隐藏该展示区域
+                if(tableId.indexOf("_port_detection_id") != -1 && content.length < 1){
+                    $("#"+tableId).parent().hide();
+                }else if(tableId === 'mysql_primary_slave_id' && content.length <1){  // joke add 20210303 如果时mysql主从信息，并且没有返回值时，隐藏该展示区域
+                    $("#"+tableId).parent().hide();
+                }else{
+                    //如果数据在10个及以内则不进行分页展示
+                    if(content.length < 11){
+                        page = false;
+                    }else{
+                        page = true;
+                    }
+                    var datas = [];
+                    var list = data.data;
+                    if (list && list.length > 0) {
+                        datas = list;
+                    }
+                    var resType="";
+                    var provider = ""
+                    //获取资源类型
+                    admin.req({
+                        url: common.domainName + "/api-web/manage/resource/findById?resId="+resId,
+                        async: false
+                    }).done(function (res) {
+                        if(res && res.success && res.obj && res.obj.bean && res.obj.bean.resType){
+                            resType=res.obj.bean.resType;
+                            provider = res.obj.bean.provider;
+                        }
+                    });
+                    layui.use(['admin', 'table', 'common'], function () {
+                        var table = layui.table;
+                        var $ = layui.$;
+                        var cols = [];
+                        var fisttd = "";
+
+                        $.each(header, function (i, v) {
+                            if (i == 0) {
+                                fisttd = v.id;
+                            }
+                            var columnObj = {
+                                field: v.id, title: v.name, templet: function (d) {
+                                    var kpiname = "";
+                                    if (d[fisttd] && d[fisttd].kpiName) {
+                                        kpiname = d[fisttd].kpiName;
+                                    }
+                                    if (d[v.id] && d[v.id].kpiId) {
+                                        var value = d[v.id];
+                                        var resStyle = obj.alarmEleMatchStyle(value.flag, v.id);
+                                        //start lsq 判断当前kpiId是否在状态指标数据列表中 2022-06-08
+                                        let status=statusKpiList.indexOf(d[v.id].kpiId);
+                                        if(status!=-1){
+                                            statusF=true;
+                                        }
+                                        //end lsq 2022-06-08
+                                        //拼接表空间名称、文件系统名称等等,如果是性能指标或者趋势指标，则可以下探  徐毫杰还原
+                                        if (value.kpiIdent == '1') {
+                                            var chbox = '';
+                                            if (editFlag && editFlag == "true" && value.kpiIdent == '1') {
+                                                chbox = '<input lay-filter="kpicheckboxfilter" type="checkbox" lay-skin="primary" name="identKpiCheckbox" ' +
+                                                    'data-id="' + v.id + '" data-kpiname="' + v.name + '" data-flag="' + value.flag + '" data-name="' + kpiname + '" data-unit="' + v.unit + '">';
+                                            }
+                                            return chbox + '<a class="link showlinechart_' + tableId + '"  style="padding-left:5px;' + resStyle + '" ' + 'data-isWarning="' + value.isWarning + '" data-ident="' + value.kpiIdent + '"' +
+                                                'data-trend="' + value.isTrend + '" data-id="' + v.id + '" data-kpiname="' + kpiname + '" data-name="' + v.name + '" data-flag="' + value.flag + '">' + value.kpiValue + '</a>' +
+                                                '<a  class="detail_row_menu hide"  data-statusf="'+statusF+'"  data-isWarning="' + value.isWarning + '" data-ident="' + value.kpiIdent + '" data-trend="' + value.isTrend + '" ' +
+                                                'data-id="' + v.id + '" data-kpiname="' + kpiname + '" data-name="' + v.name + '" data-flag="' + value.flag + '"' +
+                                                'data-canca="' + value.canCA + '" data-incaing="' + value.inCAing + '" data-restype="' + resType + '"' +
+                                                '>' +
+                                                '<img style="width: 20px;height: 20px;" src="/src/style/img/icon_row_menu.png"></a>';
+
+                                        } else {
+                                            var $html = "";
+                                            if (resType == 'HOST_X86SERVER' && provider == 'H3C' ){
+                                                $html = addTableCellButton(value);
+                                                if ($html == ''){
+                                                    $html = '<a data-id="' + v.id + '"data-flag="' + value.flag + '">' + $html + value.kpiValue + '</a>';
+                                                }
+                                                return $html;
+                                            }else{
+                                                $html = addIconByValue(value.kpiValue);
+                                                //根据资源类型判断 修改样式
+                                                if ($html != "" && resType != "" && resType == "HOST_X86SERVER" && $html == '<i class="iconfont icon-size serious">\ue668</i>') {
+                                                    $html = '<i class="iconfont icon-size grayColor">\ue61e</i>';
+                                                }
+                                                return '<a data-id="' + v.id + '"data-flag="' + value.flag + '">' + $html + value.kpiValue + '</a>';
+                                            }
+
+                                        }
+                                    } else {
+                                        return d[v.id];
+                                    }
+                                }
+                            };
+                            if (colWidth && colWidth[i]){
+                                columnObj.width = colWidth[i];
+                            }
+
+                            // <i class="iconfont good">\ue659</i>
+                            if(tableId == 'databaseoracle_mcx'){
+                                if(columnObj['field'] == 'KPI709D6F5A'){
+                                    columnObj['width'] = 1000;
+                                    columnObj['align'] = 'left';
+                                }else{
+                                    columnObj['width'] = 200;
+                                }
+                            }
+
+                            cols.push(columnObj);
+                        });
+                        //添加排序
+                        if(tableId == 'nethardware_portlist' && flagPrifix == 'port'){
+                            $.each(cols,function (i,v) {
+                                v['sort']=true;
+                            });
+                        }
+                        //封装content数据
+                        if (content && content.length > 0) {
+                            $.each(content, function (indx, con) {
+                                var kpi = {};
+                                $.each(con, function (inx, item) {
+                                    if (item.kpiValue || item.kpiValue === 0) {
+                                        kpi[item.kpiId] = item;
+                                    } else {
+                                        kpi[item.kpiId] = {};
+                                    }
+                                });
+                                datas.push(kpi);
+                            });
+                        }
+                        var pagePro = page;
+                        if (page) {
+                            pagePro = {
+                                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
+                                , theme: '#1E9FFF'
+                            }
+                        }
+                        if (cols.length > 0) {
+                            table.render({
+                                elem: '#' + tableId
+                                , data: datas
+                                , cols: [cols]
+                                , even: true
+                                , page: pagePro//是否显示分页
+                                , limit: 10
+                                , done: function () {
+                                    //性能指标下探
+                                    $("a.showlinechart_" + tableId).unbind("click").on("click", function () {
+                                        var id = $(this).data("id");
+                                        var flag = $(this).data("flag");
+                                        var name = $(this).data("name");
+                                        var kpiName = $(this).data("kpiname");
+                                        var isWarning = $(this).data("iswarning");
+                                        var ident = $(this).data("ident");
+                                        var trend = $(this).data("trend");
+                                        var unit = $(this).data("unit");
+                                        if (flag) {
+                                            flag = flag.replace(/^\s+|\s+$/g, "");
+                                        }
+                                        var params = {
+                                            resId: resId,
+                                            kpiId: id,
+                                            flag: flag,
+                                            warning:isWarning,
+                                            ident:ident,
+                                            trend:trend,
+                                            unit:unit,
+                                            // Start Wang 2022/2/8 14:28 BUG#273 【性能曲线】测试名称重复
+                                            name:kpiName,
+
+                                        };
+                                        // common.openLineChart(kpiName + " " + name, params);
+                                        common.openLineChart(kpiName, params);
+                                        // End Wang 2022/2/8 14:29
+                                    });
+                                    //更多点击事件
+                                    $("#" + tableId + "More").unbind("click").on("click", function () {
+                                        obj.openMoreTableList(title, resId, kpiId, flagPrifix, sortBy, order,colWidth,true);
+                                    });
+                                    //下载点击事件
+                                    $("#" + tableId + "Download").unbind("click").on("click", function () {
+                                        obj.downloadTableList(title, resId, kpiId, flagPrifix, sortBy, order);
+                                    });
+                                    $("[lay-id='"+tableId+"']").find(".layui-table-cell").hover(function () {
+                                        var $that = $(this)
+                                        var $btn = $that.find(".detail_row_menu");
+                                        if ($btn.length > 0) {
+                                            //$(".layui-table-view").find(".layui-table-cell .detail_row_menu:not(.hide)").addClass("hide")
+                                            $(".layui-card-body").find(".detail_row_menu:not(.hide)").addClass("hide")
+                                            $btn.removeClass("hide");
+                                        }
+                                    })
+                                    //监听过滤压制事件
+                                    filterSuppressMonitor(resId);
+                                    //监听编辑状态下的复选框事件
+                                    getCheckedBoxData();
+                                }
+                            });
+                        }
+                    });
+                }
+
+            });
+        },
+
+        /**
          * 柱状图+折线图
          * @params targetId 目标dom
          * @return
@@ -3135,7 +3428,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
          * @param title
          * @param params
          */
-        openMoreTableList: function (title, resId, kpiId, flag, sortBy, order,colWidth) {
+        openMoreTableList: function (title, resId, kpiId, flag, sortBy, order,colWidth,isH3cbmc) {
             if (!title) {
                 title = "更多";
             }
@@ -3147,6 +3440,9 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
                 "order": order,
                 "colWidth": colWidth
             };
+            if (isH3cbmc == true){
+                params.isH3cbmc = isH3cbmc;
+            }
             view('commonViewModel').render("template/detail/detail_more").then(function (res) {
                 layer.open({
                     title: [title, 'font-size:18px;'],
@@ -3934,6 +4230,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
         setKPIAlarmConfig: setKPIAlarmConfig,
         setKpiFilter: setKpiFilter,
         addIconByValue: addIconByValue,
+        addTableCellButton: addTableCellButton,
         bindTips:function () {
             // 基本信息悬浮提示
             $(".detail_base_info").mouseenter(function () {
@@ -4269,6 +4566,35 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
         return $html;
     }
 
+    function addTableCellButton(kpi) {
+        var $html = '';
+        //h3c bmc指定转换状态指标id
+        var filterKpiIds = "KPIF4362E32,KPI8ED105CD,KPI32A0A858,KPIF5D53796";
+        var kpiId = kpi.kpiId;
+        if (filterKpiIds.indexOf(kpiId) == -1){
+            return $html;
+        }
+        var kpiValue = kpi.kpiValue;
+        var value = kpi.kpiValue;
+        if(value && typeof(value) == 'string'){
+            value = value.trim().toLowerCase();
+        }
+        var colorClass = 'buttonUnknown';
+        if (value === 'ok'){
+            colorClass = 'buttonOk';
+        }else if (value === 'mlnor'){
+            colorClass = 'buttonMlnor';
+        }else  if (value === 'major'){
+            colorClass = 'buttonMajor';
+        }else if (value === 'critical'){
+            colorClass = 'buttonCritical';
+        }else if (value === 'absence'){
+            colorClass = 'buttonAbsence';
+        }
+        $html = '<button type="button" class="layui-btn layui-btn-radius '+colorClass+' layui-btn-xs p-0-15 cant-click" style="font-size: 14px">'+kpiValue+'</button>';
+        return $html;
+    }
+
     /**
      * 取消容量预测
      * @param pararms

@@ -14,6 +14,7 @@ layui.define(['table', 'admin', 'layer', 'common', 'commonDetail'], function (ex
         var sortBy = data.sortBy;
         var order = data.order;
         var colWidth = data.colWidth;
+        var isH3cbmc = data.isH3cbmc;
         var url = "/api-web/detail/table/notpage?resId=" + resId + "&kpiId=" + kpiId;
 
         var resType="";
@@ -70,14 +71,27 @@ layui.define(['table', 'admin', 'layer', 'common', 'commonDetail'], function (ex
                                     'data-id="' + v.id + '" data-kpiname="' + kpiname + '" data-name="' + v.name + '" data-flag="' + value[2] + '">' +
                                     '<img style="width: 20px;height: 20px;" src="/src/style/img/icon_row_menu.png"></a>';
                             } else {
+                                //增加h3cbmc的更多弹出优化，如果是对应如下的几个状态指标，则处理样式  joke modify 20230427
+                                var filterKpiIds = "KPIF4362E32,KPI8ED105CD,KPI32A0A858,KPIF5D53796";
+                                if (isH3cbmc == true && filterKpiIds.indexOf(v.id) != -1){
+                                    var kpi = {
+                                        kpiId : v.id,
+                                        kpiValue :  value[0]
+                                    }
+                                    $html = commonDetail.addTableCellButton(kpi);
+                                    if ($html == ''){
+                                        $html = '<a data-id="' + v.id + '"data-flag="' + value.flag + '">' + $html + value.kpiValue + '</a>';
+                                    }
+                                    return $html;
+                                }else{
                                     var $html = commonDetail.addIconByValue(value[0]);
                                     //根据资源类型判断 修改样式
                                     if($html!="" && resType!="" && resType=="HOST_X86SERVER" && $html=='<i class="iconfont icon-size serious">\ue668</i>'){
                                         $html='<i class="iconfont icon-size grayColor">\ue61e</i>';
                                     }
-
                                     return '<a data-id="' + v.id + '"data-flag="' + value[2] + '">' + $html + value[0] + '</a>';
                                 }
+                            }
                         } else {
                             return d[v.id];
                         }

@@ -20,52 +20,104 @@ layui.define(['commonDetail','common', 'admin'], function (exports) {
             os = data.os;
         }
 
-        //基本信息
-        var jbxxKpi = "KPIE13DD9A3,KPIF74D9D2B,KPIF9BA6573,KPI9F694F60";
+        //基本信息：设备健康度、设备名称、序列号、电源功率
+        var jbxxKpi = "KPID3DD6605,KPI9F694F60,KPI4419E8A1,KPI74DB2138";
+        //设置信息
+        var deviceKpi = "KPI9F694F60,KPI4419E8A1,KPI74DB2138";
         //cpu信息
-        var cpukpi = "KPI6232CA8F,KPIF4362E32,KPI899DBD7B,KPIDDBCCA5A";
+        var cpukpi = "KPI6232CA8F,KPI70AEFC6A,KPI0990CD44,KPIF4362E32,KPIBDB60856,KPI15358CE3";
         //磁盘信息
-        var diskkpi = "KPI9D22EAB6,KPI32A0A858,KPI8546BDCF";
-        //逻辑磁盘信息
-        var logicDiskKpi = "KPIE95E8B51,KPIB13D1D4A,KPIC98EA1B0,KPIC3ED81ED";
+        var diskkpi = "KPI9D22EAB6,KPI4419E8A1,KPI29D42042,KPI7B6A062F,KPI44C90B87,KPI32A0A858";
         //内存信息
-        var memkpi = "KPI4E7CD5C9,KPI8ED105CD,KPI1584BE1C,KPI0990CD44";
-        //内存容量信息
-        //var memSummarykpi = "KPID4D2A668,KPI1584BE1C,KPIDC7E789B,KPI0990CD44,KPIA2DC1868";
-        //传感器信息
-        //var sensorkpi = "KPI7DCEAE85,KPI7F80B0C4,KPIFF55D32A,KPIF2996845";
-        //电源
-        var powerkpi="KPI83E76634,KPI8BCBCA98";
-        //风扇
-        var fankpi="KPI28C9A37D,KPIF5D53796";
+        var memkpi = "KPI4E7CD5C9,KPI70AEFC6A,KPIC8EAE5A2,KPI8ED105CD,KPI4419E8A1";
+        //风扇信息
+        var fanKpi = "KPI28C9A37D,KPI1A9360B6,KPIF5D53796";
         commonDetail.bindTips();
 
         renderPageInfo();
 
 
+        //获取设备信息，左上角数据回填
+        function getDeviceInfo(resId) {
+            var url = "/api-web/detail/block?resId=" + resId + "&kpiId=" + jbxxKpi + "&hasTotal=null&isBasic=true";
+            admin.req({
+                url: common.domainName + url
+            }).done(function (res) {
+                $.each(res.data,function (i,e){
+                    //设备名称
+                    if (e.id == 'KPI9F694F60'){
+                        $('#deviceName').html(e.value)
+                    }
+                    if (e.name == '设备型号'){
+                        $('#deviceModel').html(e.value)
+                    }
+                })
+            });
+        }
+
+        /**
+         * 计算表格数据的总数及在位数
+         * */
+        function setSumaryByType(resId,targetId,kpiIds,flagPrifix) {
+            var url = "/api-web/detail/table/page?resId=" + resId + "&kpiId=" + kpiIds + "&page=1&size=1000";
+
+            if (flagPrifix) {
+                url = url + "&flagPrifix="+flagPrifix;
+            }
+            admin.req({
+                url: common.domainName + url
+            }).done(function (res) {
+                var data = res.data[0];
+                var content = data.content;
+                var summaryCount = content.length;
+                var summaryIn = content.length;
+                $.each(content,function (ind,val) {
+                    $.each(val,function (i,v) {
+                        var kpiValue = '';
+                        if (flagPrifix.indexOf('cpu') != -1 && v.kpiId === 'KPIF4362E32'){
+                            kpiValue = v.kpiValue;
+                        }else if (flagPrifix.indexOf('mem')!= -1 && v.kpiId === 'KPI8ED105CD'){
+                            kpiValue = v.kpiValue;
+                        }else if (flagPrifix.indexOf('disk')!= -1 && v.kpiId === 'KPI32A0A858'){
+                            kpiValue = v.kpiValue;
+                        }else if (flagPrifix.indexOf('fan')!= -1 && v.kpiId === 'KPIF5D53796'){
+                            kpiValue = v.kpiValue;
+                        }
+                        if (kpiValue === 'absence'){
+                            summaryIn = summaryIn-1;
+                        }
+                    })
+                })
+                $('#'+targetId).html('总数： '+summaryCount + '<br/><br/>在位： '+summaryIn)
+            });
+        }
 
         //渲染页面
         function renderPageInfo() {
+            //填充cpu总数及在位数
+            setSumaryByType(resId,'cpuSummaryInfo',cpukpi,'cpu-');
+            //填充内存总数及在位数
+            setSumaryByType(resId,'memSummaryInfo',memkpi,'mem-');
+            //填充磁盘总数及在位数
+            setSumaryByType(resId,'diskSummaryInfo',diskkpi,'disk-');
+            //填充风扇总数及在位数
+            setSumaryByType(resId,'fanSummaryInfo',fanKpi,'fan-');
+            //填充左上角设备信息
+            getDeviceInfo(resId,deviceKpi);
             //资源状态
-            commonDetail.renderResHealth("host_bmc_h3c_health_state",resId);
-            //基本信息
-            commonDetail.renderText("host_bmc_h3c_baseinfo",resId,jbxxKpi,null,null,null,"true");
+            commonDetail.renderResHealthForH3cBmc("host_bmc_h3c_health_state",resId);
+            //基本信息,此处的kpiId传入一个，是因为左侧已经有其他信息，防止展示与左侧的重复
+            commonDetail.renderText("host_bmc_h3c_baseinfo",resId,'KPID3DD6605',null,null,null,"true");
+            //设备信息
+            commonDetail.renderText("host_bmc_h3c_device_info",resId,deviceKpi,null,null,null);
             //cpu信息
-            commonDetail.renderTable("host_bmc_h3c_cpuinfo",false,resId,cpukpi,'CPU信息','bmccpu-','KPI6232CA8F','ASC');
-            //磁盘信息
-            commonDetail.renderTable("host_bmc_h3c_diskinfo",false,resId,diskkpi,'磁盘信息','bmcdisk-','KPI9D22EAB6','ASC');
-            //逻辑磁盘信息
-            commonDetail.renderTable("host_bmc_h3c_logic_diskinfo",false,resId,logicDiskKpi,'磁盘信息','raid-','KPIE95E8B51','ASC');
+            commonDetail.renderTableForH3cBmc("host_bmc_h3c_cpuinfo",false,resId,cpukpi,'CPU信息','cpu-','KPI6232CA8F','ASC');
             //内存信息
-            commonDetail.renderTable("host_bmc_h3c_meminfo",false,resId,memkpi,'内存信息','bmcmem-','KPI4E7CD5C9','ASC');
-            //电源信息
-            commonDetail.renderTable("host_bmc_h3c_powerinfo",false,resId,powerkpi,'电源信息','power','KPI83E76634','ASC');
+            commonDetail.renderTableForH3cBmc("host_bmc_h3c_meminfo",false,resId,memkpi,'内存信息','mem-','KPI4E7CD5C9','ASC');
+            //磁盘信息
+            commonDetail.renderTableForH3cBmc("host_bmc_h3c_diskinfo",false,resId,diskkpi,'磁盘信息','disk-','KPI9D22EAB6','ASC');
             //风扇信息
-            commonDetail.renderTable("host_bmc_h3c_faninfo",false,resId,fankpi,'风扇信息','fan','KPI28C9A37D','ASC');
-            //内存容量信息
-            //commonDetail.renderTable("host_bmc_h3c_memSummaryinfo",false,resId,memSummarykpi,'电源信息','memSummary');
-            //传感器信息
-            //commonDetail.renderTable("host_bmc_h3c_sensorinfo",false,resId,sensorkpi,'传感器信息','sensor');
+            commonDetail.renderTableForH3cBmc("host_bmc_h3c_faninfo",false,resId,fanKpi,'风扇信息','fan-','KPI28C9A37D','ASC');
             //活动告警
             commonDetail.renderActiveAlarms("host_bmc_h3c_active_alarm",resId);
         }

@@ -4,63 +4,89 @@
         <div class="main">
             <div class="layui-card template_detail_content">
                 <div class="layui-card-body">
-                    <div class="lay-row">
-                        <div class="lay-row-item lay-row-item--small">
-                            <h5 class="lay-row-title">资源状态</h5>
-                            <div class="res-state" id="host_bmc_h3c_health_state"></div>
+                    <div class="lay-row" style="height: 340px">
+                        <div class="lay-row-item lay-row-item--auto-width">
+                            <div style="height: 200px;" class="imgDiv">
+                                <div style="float: left;width: 50%">
+                                    <div style="padding: 70px 10px;color: white">
+                                        <h1 style="margin-bottom: 15px;margin-left: 10px" id="deviceModel"></h1>
+                                        <label style="margin-left: 10px">主机名：  <span id="deviceName"></span></label>
+                                    </div>
+                                </div>
+                                <div style="float: right;width: 50%">
+                                    <div style="margin: 60px 10px;">
+                                        <img class="h3c_bmc_img" src="src/style/img/detail/h3c_bmc.png">
+                                    </div>
+                                </div>
+                            </div>
+                            <h5 class="lay-row-title">设备信息</h5>
+                            <div class="info-table" id="host_bmc_h3c_device_info"></div>
                         </div>
                         <div class="lay-row-item lay-row-item--small">
                             <h5 class="lay-row-title">基本信息<i data-id="host_bmc_h3c_baseinfo" class="iconfont detail_base_info">&#xe61e;</i></h5>
                             <ul class="info-table" id="host_bmc_h3c_baseinfo"></ul>
                         </div>
-<!--                        <div class="lay-row-item">-->
-<!--                            <h5 class="lay-row-title">内存容量信息<span id="host_bmc_h3c_memSummaryinfoDownload" class="layui-table-link"  style="margin-left: 10px;">下载</span><span id="host_bmc_h3c_memSummaryinfoMore" class="layui-table-link">更多</span></h5>-->
-<!--                            <div id="host_bmc_h3c_memSummaryinfo"></div>-->
-<!--                        </div>-->
-                        <div class="lay-row-item">
-                            <h5 class="lay-row-title">电源信息<span id="host_bmc_h3c_powerinfoDownload" class="layui-table-link"  style="margin-left: 10px;">下载</span><span id="host_bmc_h3c_powerinfoMore" class="layui-table-link">更多</span></h5>
-                            <div id="host_bmc_h3c_powerinfo"></div>
+                        <div class="border1" style="width: 400px;margin: 5px">
+                            <h5 class="lay-row-title">设备健康度</h5>
+                            <div class="res-state" style="padding-top: 20px" id="host_bmc_h3c_health_state"></div>
                         </div>
                     </div>
                     <div class="lay-row">
-                        <div class="lay-row-item">
+                        <div class="border1 summaryDiv">
+                            <div class="summaryDivImg">
+                                <img src="src/style/img/detail/cpu.png">
+                            </div>
+                            <div>
+                                <p id="cpuSummaryInfo">总数:2</p>
+                            </div>
+                        </div>
+                        <div style="float: right" class="lay-row-item">
                             <h5 class="lay-row-title">CPU信息<span id="host_bmc_h3c_cpuinfoDownload" class="layui-table-link"  style="margin-left: 10px;">下载</span><span id="host_bmc_h3c_cpuinfoMore" class="layui-table-link">更多</span></h5>
                             <div id="host_bmc_h3c_cpuinfo"></div>
                         </div>
                     </div>
                     <div class="lay-row">
-                        <div class="lay-row-item">
-                            <h5 class="lay-row-title">磁盘信息<span id="host_bmc_h3c_diskinfoDownload" class="layui-table-link"  style="margin-left: 10px;">下载</span><span id="host_bmc_h3c_diskinfoMore" class="layui-table-link">更多</span></h5>
-                            <div id="host_bmc_h3c_diskinfo"></div>
+                        <div class="border1 summaryDiv">
+                            <div class="summaryDivImg">
+                                <img src="src/style/img/detail/mem.png">
                             </div>
+                            <div>
+                                <p id="memSummaryInfo"></p>
                             </div>
-                    <div class="lay-row">
-                        <div class="lay-row-item">
-                            <h5 class="lay-row-title">逻辑磁盘信息<span id="host_bmc_h3c_logic_diskinfoDownload" class="layui-table-link"  style="margin-left: 10px;">下载</span><span id="host_bmc_h3c_logic_diskinfoMore" class="layui-table-link">更多</span></h5>
-                            <div id="host_bmc_h3c_logic_diskinfo"></div>
                         </div>
-                    </div>
-                    <div class="lay-row">
-                        <div class="lay-row-item">
+                        <div style="float: right" class="lay-row-item">
                             <h5 class="lay-row-title">内存信息<span id="host_bmc_h3c_meminfoDownload" class="layui-table-link"  style="margin-left: 10px;">下载</span><span id="host_bmc_h3c_meminfoMore" class="layui-table-link">更多</span></h5>
                             <div id="host_bmc_h3c_meminfo"></div>
                         </div>
                     </div>
                     <div class="lay-row">
-                        <div class="lay-row-item">
+                        <div class="border1 summaryDiv">
+                            <div class="summaryDivImg">
+                                <img src="src/style/img/detail/disk.png">
+                            </div>
+                            <div>
+                                <p id="diskSummaryInfo"></p>
+                            </div>
+                        </div>
+                        <div style="float: right" class="lay-row-item">
+                            <h5 class="lay-row-title">磁盘信息<span id="host_bmc_h3c_diskinfoDownload" class="layui-table-link"  style="margin-left: 10px;">下载</span><span id="host_bmc_h3c_diskinfoMore" class="layui-table-link">更多</span></h5>
+                            <div id="host_bmc_h3c_diskinfo"></div>
+                        </div>
+                    </div>
+                    <div class="lay-row">
+                        <div class="border1 summaryDiv">
+                            <div class="summaryDivImg">
+                                <img src="src/style/img/detail/fan.png">
+                            </div>
+                            <div>
+                                <p id="fanSummaryInfo"></p>
+                            </div>
+                        </div>
+                        <div style="float: right" class="lay-row-item">
                             <h5 class="lay-row-title">风扇信息<span id="host_bmc_h3c_faninfoDownload" class="layui-table-link"  style="margin-left: 10px;">下载</span><span id="host_bmc_h3c_faninfoMore" class="layui-table-link">更多</span></h5>
                             <div id="host_bmc_h3c_faninfo"></div>
                         </div>
                     </div>
-<!--                    <div class="lay-row">-->
-<!--                        -->
-<!--                    </div>-->
-<!--                    <div class="lay-row">-->
-<!--                        <div class="lay-row-item">-->
-<!--                            <h5 class="lay-row-title">传感器信息<span id="host_bmc_h3c_sensorinfoDownload" class="layui-table-link"  style="margin-left: 10px;">下载</span><span id="host_bmc_h3c_sensorinfoMore" class="layui-table-link">更多</span></h5>-->
-<!--                            <div id="host_bmc_h3c_sensorinfo"></div>-->
-<!--                        </div>-->
-<!--                    </div>-->
                     <div class="lay-row">
                         <div class="lay-row-item">
                             <h5 class="lay-row-title">实时告警动态</h5>
@@ -84,3 +110,45 @@
         }
     });
 </script>
+<style>
+    .imgDiv{
+        background-color: #536ead;
+    }
+    .h3c_bmc_img{
+        max-width:99%;margin-right:auto;margin-left:auto;
+    }
+    .template .lay-row-item .info-table li span:nth-child(2), .template .lay-row-item .info-table li span:nth-child(4) {
+        text-align: right; !important;
+    }
+    .border1{
+        border: 1px solid rgba(151, 151, 151, 0.13);
+    }
+    .buttonUnknown{
+        background-color: #424242; !important;
+    }
+    .buttonOk{
+        background-color: #84cb3a; !important;
+    }
+    .buttonMlnor{
+        background-color: #4c9df8; !important;
+    }
+    .buttonMajor{
+        background-color: #e9a944; !important;
+    }
+    .buttonCritical{
+        background-color: #c63520; !important;
+    }
+    .buttonAbsence{
+        background-color: #c5c5c5; !important;
+    }
+    .summaryDiv{
+        justify-content: space-evenly;
+        align-items: center;
+        display: flex;
+        width: 200px;
+        margin: 5px;
+    }
+    .summaryDiv .summaryDivImg{
+        width: 50px;
+    }
+</style>
\ No newline at end of file