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