monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 081dd37972d05d6c3595d3ea35370dbcf6a38484 2 parents 8b308c95 e120383f

Merge branch 'master-joke' into 'master' 

feat:H3Cpc服务器详情页调整

feat:H3Cpc服务器详情页调整

See merge request !1121
Inline Side-by-side
Showing 9 changed files with 532 additions and 72 deletions
@@ -871,6 +871,52 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -871,6 +871,52 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
871 }, 871 },
872 872
873 /** 873 /**
  874 + * 资源状态 带告警信息
  875 + * @param targetId 资源状体区域ID
  876 + * @param resId
  877 + * 返回报文： {"code":"0","data":{"yz":"3","icon":"worst","yb":"0","state":"差","zy":"0"}}
  878 + */
  879 + renderResHealthForH3cBmc: function (targetId, resId) {
  880 + var url = "/api-web/detail/resouce/health?resId=" + resId;
  881 + admin.req({
  882 + url: common.domainName + url
  883 + }).done(function (res) {
  884 + var data = res.data;
  885 + var clas = 'res-state-pie--good';
  886 + if (data.icon == 'worst') {
  887 + clas = 'res-state-pie--bad';
  888 + }
  889 + if (data.icon == 'worse') {
  890 + clas = 'res-state-pie--middle';
  891 + }
  892 + var reslt = "优", yz = '0', yb = '0', zy = '0';
  893 + if (data.state) {
  894 + reslt = data.state;
  895 + }
  896 + if (data.yz) {
  897 + yz = data.yz=='null'||''?0:data.yz;
  898 + }
  899 + if (data.zy) {
  900 + zy = data.zy=='null'||''?0:data.zy;
  901 + }
  902 + if (data.yb) {
  903 + yb = data.yb=='null'||''?0:data.yb;
  904 + }
  905 + var html = '<div class="res-state-pie ' + clas + '" style="margin: auto">' + reslt + '</div>' +
  906 + ' <div>' +
  907 + ' <ul style="margin: 135px 100px 20px 0px">' +
  908 + ' <li>严重告警：' + yz + '</li>' +
  909 + ' <li>重要告警：' + zy + '</li>' +
  910 + ' <li>一般告警：' + yb + '</li>' +
  911 + ' </ul>' +
  912 + ' </div>';
  913 +
  914 + $("#" + targetId).html(html);
  915 +
  916 + });
  917 + },
  918 +
  919 + /**
874 * 资源状态 920 * 资源状态
875 * @param targetId 资源状体区域ID 921 * @param targetId 资源状体区域ID
876 * @param resId 922 * @param resId
@@ -2460,6 +2506,253 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -2460,6 +2506,253 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
2460 }, 2506 },
2461 2507
2462 /** 2508 /**
  2509 + * 动态渲染表格
  2510 + * @param tableId 表格所在区域ID
  2511 + * @param page 是否分页 true/false
  2512 + * @param resId 资源Id
  2513 + * @param kpiId 指标Id,多个id，以逗号隔开
  2514 + * @param flagPrifix 二级标识（flag）共性部分（前缀）
  2515 + * @param colWidth 各个列宽度设置，可以只设置前边的，设置百分比
  2516 + */
  2517 + renderTableForH3cBmc: function (tableId, page, resId, kpiId, title, flagPrifix, sortBy, order, size,colWidth) {
  2518 + var editFlag = localStorage.getItem("editFlag");//是否编辑状态
  2519 + //start lsq 状态信息的状态也增加下探 202-06-08
  2520 + let statusF=false;//是否为状态信息
  2521 + //end lsq 2022-06-08
  2522 + if (!size) {
  2523 + size = 5;
  2524 + }
  2525 + var url = "/api-web/detail/table/page?resId=" + resId + "&kpiId=" + kpiId + "&page=1&size=" + size;
  2526 + if(sortBy){
  2527 + url += '&sortBy=' + sortBy;
  2528 + }
  2529 + if(order){
  2530 + url += '&order=' + order;
  2531 + }
  2532 + //如果是编辑状态，则进行分页展示
  2533 + if (editFlag && editFlag == "true") {
  2534 + page = true;
  2535 + }
  2536 + if (page) {//分页获取
  2537 + url = "/api-web/detail/table/notpage?resId=" + resId + "&kpiId=" + kpiId;
  2538 + }
  2539 + if (flagPrifix) {
  2540 + url = url + "&flagPrifix="+flagPrifix;
  2541 + }
  2542 + admin.req({
  2543 + url: common.domainName + url
  2544 + }).done(function (res) {
  2545 + var data = res.data[0];
  2546 + var header = data.header;
  2547 + var content = data.content;
  2548 + // 如果有数据，展示
  2549 + if(content.length) {
  2550 + $('#' + tableId + 'Hide').removeClass('hide');
  2551 + }
  2552 + //如果是端口存活拨测，并且没有返回值时，隐藏该展示区域
  2553 + if(tableId.indexOf("_port_detection_id") != -1 && content.length < 1){
  2554 + $("#"+tableId).parent().hide();
  2555 + }else if(tableId === 'mysql_primary_slave_id' && content.length <1){ // joke add 20210303 如果时mysql主从信息，并且没有返回值时，隐藏该展示区域
  2556 + $("#"+tableId).parent().hide();
  2557 + }else{
  2558 + //如果数据在10个及以内则不进行分页展示
  2559 + if(content.length < 11){
  2560 + page = false;
  2561 + }else{
  2562 + page = true;
  2563 + }
  2564 + var datas = [];
  2565 + var list = data.data;
  2566 + if (list && list.length > 0) {
  2567 + datas = list;
  2568 + }
  2569 + var resType="";
  2570 + var provider = ""
  2571 + //获取资源类型
  2572 + admin.req({
  2573 + url: common.domainName + "/api-web/manage/resource/findById?resId="+resId,
  2574 + async: false
  2575 + }).done(function (res) {
  2576 + if(res && res.success && res.obj && res.obj.bean && res.obj.bean.resType){
  2577 + resType=res.obj.bean.resType;
  2578 + provider = res.obj.bean.provider;
  2579 + }
  2580 + });
  2581 + layui.use(['admin', 'table', 'common'], function () {
  2582 + var table = layui.table;
  2583 + var $ = layui.$;
  2584 + var cols = [];
  2585 + var fisttd = "";
  2586 +
  2587 + $.each(header, function (i, v) {
  2588 + if (i == 0) {
  2589 + fisttd = v.id;
  2590 + }
  2591 + var columnObj = {
  2592 + field: v.id, title: v.name, templet: function (d) {
  2593 + var kpiname = "";
  2594 + if (d[fisttd] && d[fisttd].kpiName) {
  2595 + kpiname = d[fisttd].kpiName;
  2596 + }
  2597 + if (d[v.id] && d[v.id].kpiId) {
  2598 + var value = d[v.id];
  2599 + var resStyle = obj.alarmEleMatchStyle(value.flag, v.id);
  2600 + //start lsq 判断当前kpiId是否在状态指标数据列表中 2022-06-08
  2601 + let status=statusKpiList.indexOf(d[v.id].kpiId);
  2602 + if(status!=-1){
  2603 + statusF=true;
  2604 + }
  2605 + //end lsq 2022-06-08
  2606 + //拼接表空间名称、文件系统名称等等,如果是性能指标或者趋势指标，则可以下探 徐毫杰还原
  2607 + if (value.kpiIdent == '1') {
  2608 + var chbox = '';
  2609 + if (editFlag && editFlag == "true" && value.kpiIdent == '1') {
  2610 + chbox = '<input lay-filter="kpicheckboxfilter" type="checkbox" lay-skin="primary" name="identKpiCheckbox" ' +
  2611 + 'data-id="' + v.id + '" data-kpiname="' + v.name + '" data-flag="' + value.flag + '" data-name="' + kpiname + '" data-unit="' + v.unit + '">';
  2612 + }
  2613 + return chbox + '<a class="link showlinechart_' + tableId + '" style="padding-left:5px;' + resStyle + '" ' + 'data-isWarning="' + value.isWarning + '" data-ident="' + value.kpiIdent + '"' +
  2614 + 'data-trend="' + value.isTrend + '" data-id="' + v.id + '" data-kpiname="' + kpiname + '" data-name="' + v.name + '" data-flag="' + value.flag + '">' + value.kpiValue + '</a>' +
  2615 + '<a class="detail_row_menu hide" data-statusf="'+statusF+'" data-isWarning="' + value.isWarning + '" data-ident="' + value.kpiIdent + '" data-trend="' + value.isTrend + '" ' +
  2616 + 'data-id="' + v.id + '" data-kpiname="' + kpiname + '" data-name="' + v.name + '" data-flag="' + value.flag + '"' +
  2617 + 'data-canca="' + value.canCA + '" data-incaing="' + value.inCAing + '" data-restype="' + resType + '"' +
  2618 + '>' +
  2619 + '<img style="width: 20px;height: 20px;" src="/src/style/img/icon_row_menu.png"></a>';
  2620 +
  2621 + } else {
  2622 + var $html = "";
  2623 + if (resType == 'HOST_X86SERVER' && provider == 'H3C' ){
  2624 + $html = addTableCellButton(value);
  2625 + if ($html == ''){
  2626 + $html = '<a data-id="' + v.id + '"data-flag="' + value.flag + '">' + $html + value.kpiValue + '</a>';
  2627 + }
  2628 + return $html;
  2629 + }else{
  2630 + $html = addIconByValue(value.kpiValue);
  2631 + //根据资源类型判断 修改样式
  2632 + if ($html != "" && resType != "" && resType == "HOST_X86SERVER" && $html == '<i class="iconfont icon-size serious">\ue668</i>') {
  2633 + $html = '<i class="iconfont icon-size grayColor">\ue61e</i>';
  2634 + }
  2635 + return '<a data-id="' + v.id + '"data-flag="' + value.flag + '">' + $html + value.kpiValue + '</a>';
  2636 + }
  2637 +
  2638 + }
  2639 + } else {
  2640 + return d[v.id];
  2641 + }
  2642 + }
  2643 + };
  2644 + if (colWidth && colWidth[i]){
  2645 + columnObj.width = colWidth[i];
  2646 + }
  2647 +
  2648 + // <i class="iconfont good">\ue659</i>
  2649 + if(tableId == 'databaseoracle_mcx'){
  2650 + if(columnObj['field'] == 'KPI709D6F5A'){
  2651 + columnObj['width'] = 1000;
  2652 + columnObj['align'] = 'left';
  2653 + }else{
  2654 + columnObj['width'] = 200;
  2655 + }
  2656 + }
  2657 +
  2658 + cols.push(columnObj);
  2659 + });
  2660 + //添加排序
  2661 + if(tableId == 'nethardware_portlist' && flagPrifix == 'port'){
  2662 + $.each(cols,function (i,v) {
  2663 + v['sort']=true;
  2664 + });
  2665 + }
  2666 + //封装content数据
  2667 + if (content && content.length > 0) {
  2668 + $.each(content, function (indx, con) {
  2669 + var kpi = {};
  2670 + $.each(con, function (inx, item) {
  2671 + if (item.kpiValue || item.kpiValue === 0) {
  2672 + kpi[item.kpiId] = item;
  2673 + } else {
  2674 + kpi[item.kpiId] = {};
  2675 + }
  2676 + });
  2677 + datas.push(kpi);
  2678 + });
  2679 + }
  2680 + var pagePro = page;
  2681 + if (page) {
  2682 + pagePro = {
  2683 + layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
  2684 + , theme: '#1E9FFF'
  2685 + }
  2686 + }
  2687 + if (cols.length > 0) {
  2688 + table.render({
  2689 + elem: '#' + tableId
  2690 + , data: datas
  2691 + , cols: [cols]
  2692 + , even: true
  2693 + , page: pagePro//是否显示分页
  2694 + , limit: 10
  2695 + , done: function () {
  2696 + //性能指标下探
  2697 + $("a.showlinechart_" + tableId).unbind("click").on("click", function () {
  2698 + var id = $(this).data("id");
  2699 + var flag = $(this).data("flag");
  2700 + var name = $(this).data("name");
  2701 + var kpiName = $(this).data("kpiname");
  2702 + var isWarning = $(this).data("iswarning");
  2703 + var ident = $(this).data("ident");
  2704 + var trend = $(this).data("trend");
  2705 + var unit = $(this).data("unit");
  2706 + if (flag) {
  2707 + flag = flag.replace(/^\s+|\s+$/g, "");
  2708 + }
  2709 + var params = {
  2710 + resId: resId,
  2711 + kpiId: id,
  2712 + flag: flag,
  2713 + warning:isWarning,
  2714 + ident:ident,
  2715 + trend:trend,
  2716 + unit:unit,
  2717 + // Start Wang 2022/2/8 14:28 BUG#273 【性能曲线】测试名称重复
  2718 + name:kpiName,
  2719 +
  2720 + };
  2721 + // common.openLineChart(kpiName + " " + name, params);
  2722 + common.openLineChart(kpiName, params);
  2723 + // End Wang 2022/2/8 14:29
  2724 + });
  2725 + //更多点击事件
  2726 + $("#" + tableId + "More").unbind("click").on("click", function () {
  2727 + obj.openMoreTableList(title, resId, kpiId, flagPrifix, sortBy, order,colWidth,true);
  2728 + });
  2729 + //下载点击事件
  2730 + $("#" + tableId + "Download").unbind("click").on("click", function () {
  2731 + obj.downloadTableList(title, resId, kpiId, flagPrifix, sortBy, order);
  2732 + });
  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-table-view").find(".layui-table-cell .detail_row_menu:not(.hide)").addClass("hide")
  2738 + $(".layui-card-body").find(".detail_row_menu:not(.hide)").addClass("hide")
  2739 + $btn.removeClass("hide");
  2740 + }
  2741 + })
  2742 + //监听过滤压制事件
  2743 + filterSuppressMonitor(resId);
  2744 + //监听编辑状态下的复选框事件
  2745 + getCheckedBoxData();
  2746 + }
  2747 + });
  2748 + }
  2749 + });
  2750 + }
  2751 +
  2752 + });
  2753 + },
  2754 +
  2755 + /**
2463 * 柱状图+折线图 2756 * 柱状图+折线图
2464 * @params targetId 目标dom 2757 * @params targetId 目标dom
2465 * @return 2758 * @return
@@ -3135,7 +3428,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -3135,7 +3428,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
3135 * @param title 3428 * @param title
3136 * @param params 3429 * @param params
3137 */ 3430 */
3138 - openMoreTableList: function (title, resId, kpiId, flag, sortBy, order,colWidth) { 3431 + openMoreTableList: function (title, resId, kpiId, flag, sortBy, order,colWidth,isH3cbmc) {
3139 if (!title) { 3432 if (!title) {
3140 title = "更多"; 3433 title = "更多";
3141 } 3434 }
@@ -3147,6 +3440,9 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -3147,6 +3440,9 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
3147 "order": order, 3440 "order": order,
3148 "colWidth": colWidth 3441 "colWidth": colWidth
3149 }; 3442 };
  3443 + if (isH3cbmc == true){
  3444 + params.isH3cbmc = isH3cbmc;
  3445 + }
3150 view('commonViewModel').render("template/detail/detail_more").then(function (res) { 3446 view('commonViewModel').render("template/detail/detail_more").then(function (res) {
3151 layer.open({ 3447 layer.open({
3152 title: [title, 'font-size:18px;'], 3448 title: [title, 'font-size:18px;'],
@@ -3934,6 +4230,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -3934,6 +4230,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
3934 setKPIAlarmConfig: setKPIAlarmConfig, 4230 setKPIAlarmConfig: setKPIAlarmConfig,
3935 setKpiFilter: setKpiFilter, 4231 setKpiFilter: setKpiFilter,
3936 addIconByValue: addIconByValue, 4232 addIconByValue: addIconByValue,
  4233 + addTableCellButton: addTableCellButton,
3937 bindTips:function () { 4234 bindTips:function () {
3938 // 基本信息悬浮提示 4235 // 基本信息悬浮提示
3939 $(".detail_base_info").mouseenter(function () { 4236 $(".detail_base_info").mouseenter(function () {
@@ -4269,6 +4566,35 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -4269,6 +4566,35 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
4269 return $html; 4566 return $html;
4270 } 4567 }
4271 4568
  4569 + function addTableCellButton(kpi) {
  4570 + var $html = '';
  4571 + //h3c bmc指定转换状态指标id
  4572 + var filterKpiIds = "KPIF4362E32,KPI8ED105CD,KPI32A0A858,KPIF5D53796";
  4573 + var kpiId = kpi.kpiId;
  4574 + if (filterKpiIds.indexOf(kpiId) == -1){
  4575 + return $html;
  4576 + }
  4577 + var kpiValue = kpi.kpiValue;
  4578 + var value = kpi.kpiValue;
  4579 + if(value && typeof(value) == 'string'){
  4580 + value = value.trim().toLowerCase();
  4581 + }
  4582 + var colorClass = 'buttonUnknown';
  4583 + if (value === 'ok'){
  4584 + colorClass = 'buttonOk';
  4585 + }else if (value === 'mlnor'){
  4586 + colorClass = 'buttonMlnor';
  4587 + }else if (value === 'major'){
  4588 + colorClass = 'buttonMajor';
  4589 + }else if (value === 'critical'){
  4590 + colorClass = 'buttonCritical';
  4591 + }else if (value === 'absence'){
  4592 + colorClass = 'buttonAbsence';
  4593 + }
  4594 + $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>';
  4595 + return $html;
  4596 + }
  4597 +
4272 /** 4598 /**
4273 * 取消容量预测 4599 * 取消容量预测
4274 * @param pararms 4600 * @param pararms
@@ -14,6 +14,7 @@ layui.define(['table', 'admin', 'layer', 'common', 'commonDetail'], function (ex @@ -14,6 +14,7 @@ layui.define(['table', 'admin', 'layer', 'common', 'commonDetail'], function (ex
14 var sortBy = data.sortBy; 14 var sortBy = data.sortBy;
15 var order = data.order; 15 var order = data.order;
16 var colWidth = data.colWidth; 16 var colWidth = data.colWidth;
  17 + var isH3cbmc = data.isH3cbmc;
17 var url = "/api-web/detail/table/notpage?resId=" + resId + "&kpiId=" + kpiId; 18 var url = "/api-web/detail/table/notpage?resId=" + resId + "&kpiId=" + kpiId;
18 19
19 var resType=""; 20 var resType="";
@@ -70,13 +71,26 @@ layui.define(['table', 'admin', 'layer', 'common', 'commonDetail'], function (ex @@ -70,13 +71,26 @@ layui.define(['table', 'admin', 'layer', 'common', 'commonDetail'], function (ex
70 'data-id="' + v.id + '" data-kpiname="' + kpiname + '" data-name="' + v.name + '" data-flag="' + value[2] + '">' + 71 'data-id="' + v.id + '" data-kpiname="' + kpiname + '" data-name="' + v.name + '" data-flag="' + value[2] + '">' +
71 '<img style="width: 20px;height: 20px;" src="/src/style/img/icon_row_menu.png"></a>'; 72 '<img style="width: 20px;height: 20px;" src="/src/style/img/icon_row_menu.png"></a>';
72 } else { 73 } else {
73 - var $html = commonDetail.addIconByValue(value[0]);  
74 - //根据资源类型判断 修改样式  
75 - if($html!="" && resType!="" && resType=="HOST_X86SERVER" && $html=='<i class="iconfont icon-size serious">\ue668</i>'){  
76 - $html='<i class="iconfont icon-size grayColor">\ue61e</i>'; 74 + //增加h3cbmc的更多弹出优化，如果是对应如下的几个状态指标，则处理样式 joke modify 20230427
  75 + var filterKpiIds = "KPIF4362E32,KPI8ED105CD,KPI32A0A858,KPIF5D53796";
  76 + if (isH3cbmc == true && filterKpiIds.indexOf(v.id) != -1){
  77 + var kpi = {
  78 + kpiId : v.id,
  79 + kpiValue : value[0]
  80 + }
  81 + $html = commonDetail.addTableCellButton(kpi);
  82 + if ($html == ''){
  83 + $html = '<a data-id="' + v.id + '"data-flag="' + value.flag + '">' + $html + value.kpiValue + '</a>';
  84 + }
  85 + return $html;
  86 + }else{
  87 + var $html = commonDetail.addIconByValue(value[0]);
  88 + //根据资源类型判断 修改样式
  89 + if($html!="" && resType!="" && resType=="HOST_X86SERVER" && $html=='<i class="iconfont icon-size serious">\ue668</i>'){
  90 + $html='<i class="iconfont icon-size grayColor">\ue61e</i>';
  91 + }
  92 + return '<a data-id="' + v.id + '"data-flag="' + value[2] + '">' + $html + value[0] + '</a>';
77 } 93 }
78 -  
79 - return '<a data-id="' + v.id + '"data-flag="' + value[2] + '">' + $html + value[0] + '</a>';  
80 } 94 }
81 } else { 95 } else {
82 return d[v.id]; 96 return d[v.id];
@@ -20,52 +20,104 @@ layui.define(['commonDetail','common', 'admin'], function (exports) { @@ -20,52 +20,104 @@ layui.define(['commonDetail','common', 'admin'], function (exports) {
20 os = data.os; 20 os = data.os;
21 } 21 }
22 22
23 - //基本信息  
24 - var jbxxKpi = "KPIE13DD9A3,KPIF74D9D2B,KPIF9BA6573,KPI9F694F60"; 23 + //基本信息：设备健康度、设备名称、序列号、电源功率
  24 + var jbxxKpi = "KPID3DD6605,KPI9F694F60,KPI4419E8A1,KPI74DB2138";
  25 + //设置信息
  26 + var deviceKpi = "KPI9F694F60,KPI4419E8A1,KPI74DB2138";
25 //cpu信息 27 //cpu信息
26 - var cpukpi = "KPI6232CA8F,KPIF4362E32,KPI899DBD7B,KPIDDBCCA5A"; 28 + var cpukpi = "KPI6232CA8F,KPI70AEFC6A,KPI0990CD44,KPIF4362E32,KPIBDB60856,KPI15358CE3";
27 //磁盘信息 29 //磁盘信息
28 - var diskkpi = "KPI9D22EAB6,KPI32A0A858,KPI8546BDCF";  
29 - //逻辑磁盘信息  
30 - var logicDiskKpi = "KPIE95E8B51,KPIB13D1D4A,KPIC98EA1B0,KPIC3ED81ED"; 30 + var diskkpi = "KPI9D22EAB6,KPI4419E8A1,KPI29D42042,KPI7B6A062F,KPI44C90B87,KPI32A0A858";
31 //内存信息 31 //内存信息
32 - var memkpi = "KPI4E7CD5C9,KPI8ED105CD,KPI1584BE1C,KPI0990CD44";  
33 - //内存容量信息  
34 - //var memSummarykpi = "KPID4D2A668,KPI1584BE1C,KPIDC7E789B,KPI0990CD44,KPIA2DC1868";  
35 - //传感器信息  
36 - //var sensorkpi = "KPI7DCEAE85,KPI7F80B0C4,KPIFF55D32A,KPIF2996845";  
37 - //电源  
38 - var powerkpi="KPI83E76634,KPI8BCBCA98";  
39 - //风扇  
40 - var fankpi="KPI28C9A37D,KPIF5D53796"; 32 + var memkpi = "KPI4E7CD5C9,KPI70AEFC6A,KPIC8EAE5A2,KPI8ED105CD,KPI4419E8A1";
  33 + //风扇信息
  34 + var fanKpi = "KPI28C9A37D,KPI1A9360B6,KPIF5D53796";
41 commonDetail.bindTips(); 35 commonDetail.bindTips();
42 36
43 renderPageInfo(); 37 renderPageInfo();
44 38
45 39
  40 + //获取设备信息，左上角数据回填
  41 + function getDeviceInfo(resId) {
  42 + var url = "/api-web/detail/block?resId=" + resId + "&kpiId=" + jbxxKpi + "&hasTotal=null&isBasic=true";
  43 + admin.req({
  44 + url: common.domainName + url
  45 + }).done(function (res) {
  46 + $.each(res.data,function (i,e){
  47 + //设备名称
  48 + if (e.id == 'KPI9F694F60'){
  49 + $('#deviceName').html(e.value)
  50 + }
  51 + if (e.name == '设备型号'){
  52 + $('#deviceModel').html(e.value)
  53 + }
  54 + })
  55 + });
  56 + }
  57 +
  58 + /**
  59 + * 计算表格数据的总数及在位数
  60 + * */
  61 + function setSumaryByType(resId,targetId,kpiIds,flagPrifix) {
  62 + var url = "/api-web/detail/table/page?resId=" + resId + "&kpiId=" + kpiIds + "&page=1&size=1000";
  63 +
  64 + if (flagPrifix) {
  65 + url = url + "&flagPrifix="+flagPrifix;
  66 + }
  67 + admin.req({
  68 + url: common.domainName + url
  69 + }).done(function (res) {
  70 + var data = res.data[0];
  71 + var content = data.content;
  72 + var summaryCount = content.length;
  73 + var summaryIn = content.length;
  74 + $.each(content,function (ind,val) {
  75 + $.each(val,function (i,v) {
  76 + var kpiValue = '';
  77 + if (flagPrifix.indexOf('cpu') != -1 && v.kpiId === 'KPIF4362E32'){
  78 + kpiValue = v.kpiValue;
  79 + }else if (flagPrifix.indexOf('mem')!= -1 && v.kpiId === 'KPI8ED105CD'){
  80 + kpiValue = v.kpiValue;
  81 + }else if (flagPrifix.indexOf('disk')!= -1 && v.kpiId === 'KPI32A0A858'){
  82 + kpiValue = v.kpiValue;
  83 + }else if (flagPrifix.indexOf('fan')!= -1 && v.kpiId === 'KPIF5D53796'){
  84 + kpiValue = v.kpiValue;
  85 + }
  86 + if (kpiValue === 'absence'){
  87 + summaryIn = summaryIn-1;
  88 + }
  89 + })
  90 + })
  91 + $('#'+targetId).html('总数： '+summaryCount + '<br/><br/>在位： '+summaryIn)
  92 + });
  93 + }
46 94
47 //渲染页面 95 //渲染页面
48 function renderPageInfo() { 96 function renderPageInfo() {
  97 + //填充cpu总数及在位数
  98 + setSumaryByType(resId,'cpuSummaryInfo',cpukpi,'cpu-');
  99 + //填充内存总数及在位数
  100 + setSumaryByType(resId,'memSummaryInfo',memkpi,'mem-');
  101 + //填充磁盘总数及在位数
  102 + setSumaryByType(resId,'diskSummaryInfo',diskkpi,'disk-');
  103 + //填充风扇总数及在位数
  104 + setSumaryByType(resId,'fanSummaryInfo',fanKpi,'fan-');
  105 + //填充左上角设备信息
  106 + getDeviceInfo(resId,deviceKpi);
49 //资源状态 107 //资源状态
50 - commonDetail.renderResHealth("host_bmc_h3c_health_state",resId);  
51 - //基本信息  
52 - commonDetail.renderText("host_bmc_h3c_baseinfo",resId,jbxxKpi,null,null,null,"true"); 108 + commonDetail.renderResHealthForH3cBmc("host_bmc_h3c_health_state",resId);
  109 + //基本信息,此处的kpiId传入一个，是因为左侧已经有其他信息，防止展示与左侧的重复
  110 + commonDetail.renderText("host_bmc_h3c_baseinfo",resId,'KPID3DD6605',null,null,null,"true");
  111 + //设备信息
  112 + commonDetail.renderText("host_bmc_h3c_device_info",resId,deviceKpi,null,null,null);
53 //cpu信息 113 //cpu信息
54 - commonDetail.renderTable("host_bmc_h3c_cpuinfo",false,resId,cpukpi,'CPU信息','bmccpu-','KPI6232CA8F','ASC');  
55 - //磁盘信息  
56 - commonDetail.renderTable("host_bmc_h3c_diskinfo",false,resId,diskkpi,'磁盘信息','bmcdisk-','KPI9D22EAB6','ASC');  
57 - //逻辑磁盘信息  
58 - commonDetail.renderTable("host_bmc_h3c_logic_diskinfo",false,resId,logicDiskKpi,'磁盘信息','raid-','KPIE95E8B51','ASC'); 114 + commonDetail.renderTableForH3cBmc("host_bmc_h3c_cpuinfo",false,resId,cpukpi,'CPU信息','cpu-','KPI6232CA8F','ASC');
59 //内存信息 115 //内存信息
60 - commonDetail.renderTable("host_bmc_h3c_meminfo",false,resId,memkpi,'内存信息','bmcmem-','KPI4E7CD5C9','ASC');  
61 - //电源信息  
62 - commonDetail.renderTable("host_bmc_h3c_powerinfo",false,resId,powerkpi,'电源信息','power','KPI83E76634','ASC'); 116 + commonDetail.renderTableForH3cBmc("host_bmc_h3c_meminfo",false,resId,memkpi,'内存信息','mem-','KPI4E7CD5C9','ASC');
  117 + //磁盘信息
  118 + commonDetail.renderTableForH3cBmc("host_bmc_h3c_diskinfo",false,resId,diskkpi,'磁盘信息','disk-','KPI9D22EAB6','ASC');
63 //风扇信息 119 //风扇信息
64 - commonDetail.renderTable("host_bmc_h3c_faninfo",false,resId,fankpi,'风扇信息','fan','KPI28C9A37D','ASC');  
65 - //内存容量信息  
66 - //commonDetail.renderTable("host_bmc_h3c_memSummaryinfo",false,resId,memSummarykpi,'电源信息','memSummary');  
67 - //传感器信息  
68 - //commonDetail.renderTable("host_bmc_h3c_sensorinfo",false,resId,sensorkpi,'传感器信息','sensor'); 120 + commonDetail.renderTableForH3cBmc("host_bmc_h3c_faninfo",false,resId,fanKpi,'风扇信息','fan-','KPI28C9A37D','ASC');
69 //活动告警 121 //活动告警
70 commonDetail.renderActiveAlarms("host_bmc_h3c_active_alarm",resId); 122 commonDetail.renderActiveAlarms("host_bmc_h3c_active_alarm",resId);
71 } 123 }
@@ -4,63 +4,89 @@ @@ -4,63 +4,89 @@
4 <div class="main"> 4 <div class="main">
5 <div class="layui-card template_detail_content"> 5 <div class="layui-card template_detail_content">
6 <div class="layui-card-body"> 6 <div class="layui-card-body">
7 - <div class="lay-row">  
8 - <div class="lay-row-item lay-row-item--small">  
9 - <h5 class="lay-row-title">资源状态</h5>  
10 - <div class="res-state" id="host_bmc_h3c_health_state"></div> 7 + <div class="lay-row" style="height: 340px">
  8 + <div class="lay-row-item lay-row-item--auto-width">
  9 + <div style="height: 200px;" class="imgDiv">
  10 + <div style="float: left;width: 50%">
  11 + <div style="padding: 70px 10px;color: white">
  12 + <h1 style="margin-bottom: 15px;margin-left: 10px" id="deviceModel"></h1>
  13 + <label style="margin-left: 10px">主机名： <span id="deviceName"></span></label>
  14 + </div>
  15 + </div>
  16 + <div style="float: right;width: 50%">
  17 + <div style="margin: 60px 10px;">
  18 + <img class="h3c_bmc_img" src="src/style/img/detail/h3c_bmc.png">
  19 + </div>
  20 + </div>
  21 + </div>
  22 + <h5 class="lay-row-title">设备信息</h5>
  23 + <div class="info-table" id="host_bmc_h3c_device_info"></div>
11 </div> 24 </div>
12 <div class="lay-row-item lay-row-item--small"> 25 <div class="lay-row-item lay-row-item--small">
13 <h5 class="lay-row-title">基本信息<i data-id="host_bmc_h3c_baseinfo" class="iconfont detail_base_info">&#xe61e;</i></h5> 26 <h5 class="lay-row-title">基本信息<i data-id="host_bmc_h3c_baseinfo" class="iconfont detail_base_info">&#xe61e;</i></h5>
14 <ul class="info-table" id="host_bmc_h3c_baseinfo"></ul> 27 <ul class="info-table" id="host_bmc_h3c_baseinfo"></ul>
15 </div> 28 </div>
16 -<!-- <div class="lay-row-item">-->  
17 -<!-- <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>-->  
18 -<!-- <div id="host_bmc_h3c_memSummaryinfo"></div>-->  
19 -<!-- </div>-->  
20 - <div class="lay-row-item">  
21 - <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>  
22 - <div id="host_bmc_h3c_powerinfo"></div> 29 + <div class="border1" style="width: 400px;margin: 5px">
  30 + <h5 class="lay-row-title">设备健康度</h5>
  31 + <div class="res-state" style="padding-top: 20px" id="host_bmc_h3c_health_state"></div>
23 </div> 32 </div>
24 </div> 33 </div>
25 <div class="lay-row"> 34 <div class="lay-row">
26 - <div class="lay-row-item"> 35 + <div class="border1 summaryDiv">
  36 + <div class="summaryDivImg">
  37 + <img src="src/style/img/detail/cpu.png">
  38 + </div>
  39 + <div>
  40 + <p id="cpuSummaryInfo">总数:2</p>
  41 + </div>
  42 + </div>
  43 + <div style="float: right" class="lay-row-item">
27 <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> 44 <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>
28 <div id="host_bmc_h3c_cpuinfo"></div> 45 <div id="host_bmc_h3c_cpuinfo"></div>
29 </div> 46 </div>
30 </div> 47 </div>
31 <div class="lay-row"> 48 <div class="lay-row">
32 - <div class="lay-row-item">  
33 - <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>  
34 - <div id="host_bmc_h3c_diskinfo"></div> 49 + <div class="border1 summaryDiv">
  50 + <div class="summaryDivImg">
  51 + <img src="src/style/img/detail/mem.png">
  52 + </div>
  53 + <div>
  54 + <p id="memSummaryInfo"></p>
  55 + </div>
35 </div> 56 </div>
36 - </div>  
37 - <div class="lay-row">  
38 - <div class="lay-row-item">  
39 - <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>  
40 - <div id="host_bmc_h3c_logic_diskinfo"></div> 57 + <div style="float: right" class="lay-row-item">
  58 + <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>
  59 + <div id="host_bmc_h3c_meminfo"></div>
41 </div> 60 </div>
42 </div> 61 </div>
43 <div class="lay-row"> 62 <div class="lay-row">
44 - <div class="lay-row-item">  
45 - <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>  
46 - <div id="host_bmc_h3c_meminfo"></div> 63 + <div class="border1 summaryDiv">
  64 + <div class="summaryDivImg">
  65 + <img src="src/style/img/detail/disk.png">
  66 + </div>
  67 + <div>
  68 + <p id="diskSummaryInfo"></p>
  69 + </div>
  70 + </div>
  71 + <div style="float: right" class="lay-row-item">
  72 + <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>
  73 + <div id="host_bmc_h3c_diskinfo"></div>
47 </div> 74 </div>
48 </div> 75 </div>
49 <div class="lay-row"> 76 <div class="lay-row">
50 - <div class="lay-row-item"> 77 + <div class="border1 summaryDiv">
  78 + <div class="summaryDivImg">
  79 + <img src="src/style/img/detail/fan.png">
  80 + </div>
  81 + <div>
  82 + <p id="fanSummaryInfo"></p>
  83 + </div>
  84 + </div>
  85 + <div style="float: right" class="lay-row-item">
51 <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> 86 <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>
52 <div id="host_bmc_h3c_faninfo"></div> 87 <div id="host_bmc_h3c_faninfo"></div>
53 </div> 88 </div>
54 </div> 89 </div>
55 -<!-- <div class="lay-row">-->  
56 -<!-- -->  
57 -<!-- </div>-->  
58 -<!-- <div class="lay-row">-->  
59 -<!-- <div class="lay-row-item">-->  
60 -<!-- <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>-->  
61 -<!-- <div id="host_bmc_h3c_sensorinfo"></div>-->  
62 -<!-- </div>-->  
63 -<!-- </div>-->  
64 <div class="lay-row"> 90 <div class="lay-row">
65 <div class="lay-row-item"> 91 <div class="lay-row-item">
66 <h5 class="lay-row-title">实时告警动态</h5> 92 <h5 class="lay-row-title">实时告警动态</h5>
@@ -83,4 +109,46 @@ @@ -83,4 +109,46 @@
83 fn(JSON.parse(parm)); 109 fn(JSON.parse(parm));
84 } 110 }
85 }); 111 });
86 -</script>  
  112 +</script>
  113 +<style>
  114 + .imgDiv{
  115 + background-color: #536ead;
  116 + }
  117 + .h3c_bmc_img{
  118 + max-width:99%;margin-right:auto;margin-left:auto;
  119 + }
  120 + .template .lay-row-item .info-table li span:nth-child(2), .template .lay-row-item .info-table li span:nth-child(4) {
  121 + text-align: right; !important;
  122 + }
  123 + .border1{
  124 + border: 1px solid rgba(151, 151, 151, 0.13);
  125 + }
  126 + .buttonUnknown{
  127 + background-color: #424242; !important;
  128 + }
  129 + .buttonOk{
  130 + background-color: #84cb3a; !important;
  131 + }
  132 + .buttonMlnor{
  133 + background-color: #4c9df8; !important;
  134 + }
  135 + .buttonMajor{
  136 + background-color: #e9a944; !important;
  137 + }
  138 + .buttonCritical{
  139 + background-color: #c63520; !important;
  140 + }
  141 + .buttonAbsence{
  142 + background-color: #c5c5c5; !important;
  143 + }
  144 + .summaryDiv{
  145 + justify-content: space-evenly;
  146 + align-items: center;
  147 + display: flex;
  148 + width: 200px;
  149 + margin: 5px;
  150 + }
  151 + .summaryDiv .summaryDivImg{
  152 + width: 50px;
  153 + }
  154 +</style>