monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 张凯
Commit 89778cad02929c1a03cd853cee03e2b4e80b055c 1 parent 1bccfdd6

feat:H3Cpc服务器详情页调整

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
},
/**
* 资源状态 带告警信息
* @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,13 +71,26 @@ 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 {
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>';
//增加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>';
}
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>
</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 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">
<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 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="lay-row-item">
<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>
... ... @@ -83,4 +109,46 @@
fn(JSON.parse(parm));
}
});
</script>
\ No newline at end of file
</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
... ...