monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit c5b4af1df13fa3fdfb7bcfd5657378da32efe054 2 parents bf8497d9 50a84d0f

Merge branch 'master' of http://192.168.1.136:82/monitor_v3/hg-monitor-web into … 

…master-v32-lushangqing
Inline Side-by-side
Showing 3 changed files with 165 additions and 32 deletions
... ... @@ -22,10 +22,41 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
var accessToken = sessions.getToken()['access_token'];
var checkList = common.checkPermission(accessToken);
//资源详细页面相关调用函数，包含各种展示类型的
let editKpiList = [];
var obj = {
detailTimer:[],
timerTime: 180000,
sessions: layui.sessions,
// 获取编辑指标
getEditKpiList:function (){
if(editKpiList.length != 0){
return editKpiList;
}
editKpiList = [];
admin.req({
url: common.domainName + '/api-web/manage/ddic/findSucDdics/topoBindKpiIds?access_token='+accessToken
, method: 'POST'
, async: false
, success: function (res) {
// 添加一个 空置，如果获取的值为空，则下次不请求
editKpiList.push('----');
$.each(res.data, function (i, v) {
editKpiList.push(v.ddicCode)
});
}
});
return editKpiList;
},
checkKpi : function (kpiId){
var data = {}
var kpiIds = kpiId.split(',');
$.each(kpiIds, function (i, v) {
data[v] = editKpiList.includes(v);
});
return data;
},
/**
* 渲染文本展示，key、value展示的方式
* @param targetId html存放目标id
... ... @@ -155,6 +186,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
if (data.value) {
val = parseFloat(data.value).toFixed(2);
}
//获取编辑状态
var editFlag = localStorage.getItem("editFlag");//是否编辑状态
var piechbox = '<div class="layui-form" style="float: left;top: 15px;position: relative;left: 12px;" >' +
... ... @@ -162,13 +194,38 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
'data-id="' + kpiId + '" data-kpiname="' + data.name + '" data-flag="' + data.flag + '" data-name='+data.name+'></div>';
pie.find("li").attr("data-degree", val);
var resStyle = obj.alarmEleMatchStyle(data.flag,kpiId);
//可编辑状态的性能指标
if(data.ident=='1' && editFlag && editFlag == "true"){
pie.find(".pie-half-text").html(piechbox+"<b><u style='"+resStyle+"'>"+val + "%</u></b>");
form.render();
}else{
pie.find(".pie-half-text").find("b").html("<u style='"+resStyle+"'>"+val + "%</u>"); //增加下划线
// Start Wang 2021/11/18 15:03 查询字典编辑指标，判断编辑状态
// // 可编辑状态的性能指标
// if(data.ident=='1' && editFlag && editFlag == "true"){
// pie.find(".pie-half-text").html(piechbox+"<b><u style='"+resStyle+"'>"+val + "%</u></b>");
// form.render();
// }else{
// pie.find(".pie-half-text").find("b").html("<u style='"+resStyle+"'>"+val + "%</u>"); //增加下划线
// }
// 获取配置指标
var kpiList = obj.getEditKpiList();
// 没有配置字典指标则按照性能指标判断
if(kpiList.length == 1){
// 可编辑状态的性能指标
if(data.ident=='1' && editFlag && editFlag == "true"){
pie.find(".pie-half-text").html(piechbox+"<b><u style='"+resStyle+"'>"+val + "%</u></b>");
form.render();
}else{
pie.find(".pie-half-text").find("b").html("<u style='"+resStyle+"'>"+val + "%</u>"); //增加下划线
}
} else {
// 按照指标配置展示
let kpiObject = obj.checkKpi(kpiId)
if(kpiObject[data.id] && kpiObject[data.id] == true){
pie.find(".pie-half-text").html(piechbox+"<b><u style='"+resStyle+"'>"+val + "%</u></b>");
form.render();
} else {
pie.find(".pie-half-text").find("b").html("<u style='"+resStyle+"'>"+val + "%</u>"); //增加下划线
}
}
// End Wang 2021/11/18 15:04 查询字典编辑指标，判断编辑状态
pie.find(".pie-half-text").find("span").text(data.name);
pie.find(".pie-half-text").find("b").css('cursor','pointer'); //增加悬浮显示手指样式
... ... @@ -1673,29 +1730,78 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
if (d[v.id] && d[v.id].kpiId) {
var value = d[v.id];
var resStyle = obj.alarmEleMatchStyle(value.flag,v.id);
//拼接表空间名称、文件系统名称等等,如果是性能指标或者趋势指标，则可以下探
if (value.kpiIdent == '1' || value.isWarning == '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-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>';
// Start Wang 2021/11/18 15:03 查询字典编辑指标，判断编辑状态
// //拼接表空间名称、文件系统名称等等,如果是性能指标或者趋势指标，则可以下探
// if (value.kpiIdent == '1' || value.isWarning == '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-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 = 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>';
// }
let arr = obj.getEditKpiList();
var 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 + '">';
if(arr.length == 1){
if (value.kpiIdent == '1' || value.isWarning == '1') {
if (!(editFlag && editFlag == "true" && value.kpiIdent == '1')) {
chbox = '';
}
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-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 = 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 {
var $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>';
var kpiId = d[v.id].kpiId;
// 按照指标配置展示
let kpiObject = obj.checkKpi(kpiId)
if(kpiObject[kpiId] && kpiObject[kpiId] == true){
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-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 = 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>';
}
return '<a data-id="' + v.id + '"data-flag="' + value.flag + '">' + $html + value.kpiValue + '</a>';
}
// End Wang 2021/11/18 15:03 查询字典编辑指标，判断编辑状态
} else {
return d[v.id];
}
... ...
... ... @@ -35,7 +35,21 @@ export default {
{
name:'89.12.97.3',
datas:[1,1,1,1,1,1,1,1],
flag:'vmem'
flag:'cpu'
}
]
}
},
res2:{
code:'0',
data:{
kpiUnit:'%',
names:['20:10','21:10','22:15','23:15'],
series:[
{
name:'89.12.97.2',
datas:[1,1,1,1,1,1,1,1],
flag:'cpu'
}
]
}
... ... @@ -73,7 +87,6 @@ export default {
methods: {
getData1(that){
// const { proxy } = Vue.getCurrentInstance();
var params = {
resId: that.resId1,
kpiIds: that.kpiIds,
... ... @@ -89,10 +102,10 @@ export default {
if(res.data.series && res.data.series.length>0){
resData=res.data;
}else{
resData=that.res1.data;
resData=that.res2.data;
}
}else{
resData=that.res1.data;
resData=that.res2.data;
}
that.allData.polyline.data.push(resData.series[0])
... ...
... ... @@ -32,7 +32,21 @@ export default {
names:['20:10','21:10','22:15','23:15'],
series:[
{
name:'89.12.97.3',
name:'80.12.97.7',
datas:[1,1,1,1,1,1,1,1],
flag:'cpu'
}
]
}
},
res2:{
code:'0',
data:{
kpiUnit:'%',
names:['20:10','21:10','22:15','23:15'],
series:[
{
name:'80.12.97.8',
datas:[1,1,1,1,1,1,1,1],
flag:'cpu'
}
... ... @@ -83,11 +97,11 @@ export default {
if(res.data.series && res.data.series.length>0){
resData=res.data;
}else{
resData=that.res1.data;
resData=that.res2.data;
}
}else{
resData=that.res1.data
resData=that.res2.data
}
that.allData.polyline.data.push(resData.series[0])
that.updateChart()
... ...