|
|
|
//性能曲线图
|
|
|
|
layui.define(['element', 'admin', 'form', 'echarts', 'commonDetail'], function (exports) {
|
|
|
|
var $ = layui.$;
|
|
|
|
var echarts = layui.echarts;
|
|
|
|
var admin = layui.admin;
|
|
|
|
var common = layui.common;
|
|
|
|
var commonDetail = layui.commonDetail;
|
|
|
|
//对外暴露的接口
|
|
|
|
exports('predictionDetail', function (data) {
|
|
|
|
var resId = ''; //资源ID
|
|
|
|
var kpiId = ''; //指标ID
|
|
|
|
var flag = '';//二级资源标识
|
|
|
|
var kpiName = '';
|
|
|
|
var predictNum = 24;
|
|
|
|
resId = data.resId; //资源ID
|
|
|
|
kpiId = data.kpiId; //指标ID
|
|
|
|
flag = data.flag;//二级资源标识
|
|
|
|
kpiName = data.kpiName;//指标名称
|
|
|
|
predictNum = data.predictNum;//预测值数量
|
|
|
|
//性能走势
|
|
|
|
var zshiLoadIndex = null;
|
|
|
|
var bizyshixiaoChart = null;
|
|
|
|
|
|
|
|
renderLineChart();
|
|
|
|
|
|
|
|
//性能曲线图
|
|
|
|
function renderLineChart() {
|
|
|
|
zshiLoadIndex = layer.load(2);//加载loading
|
|
|
|
var url = common.domainName + '/api-web/prediction/line/chart?&resId=' + resId + '&kpiId=' + kpiId + '&flag=' + flag;
|
|
|
|
//获取性能曲线图数据
|
|
|
|
admin.req({
|
|
|
|
url: url
|
|
|
|
}).done(function (res) {
|
|
|
|
layer.close(zshiLoadIndex);
|
|
|
|
//var kpiUnit = res.data.kpiUnit == null ? "" : res.data.kpiUnit;
|
|
|
|
var data = [];
|
|
|
|
if (res.object == null || res.object.timeList.length == 0) {
|
|
|
|
data = {
|
|
|
|
timeList: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
|
|
|
|
predictionList: [
|
|
|
|
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
|
|
|
|
],
|
|
|
|
performanceList: [
|
|
|
|
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
|
|
|
|
],
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
data = res.object;
|
|
|
|
}
|
|
|
|
|
|
|
|
(function () {
|
|
|
|
var series = [];
|
|
|
|
|
|
|
|
series.push({
|
|
|
|
name: kpiName,
|
|
|
|
type: 'line',
|
|
|
|
data: data.performanceList,
|
|
|
|
symbolSize: "none",
|
|
|
|
symbol: 'circle',
|
|
|
|
markLine: {
|
|
|
|
silent: true,
|
|
|
|
symbol: ["none","none"],
|
|
|
|
lineStyle:{
|
|
|
|
color: "#ccc"
|
|
|
|
},
|
|
|
|
animation: false,
|
|
|
|
label:{
|
|
|
|
show:false
|
|
|
|
},
|
|
|
|
data:[
|
|
|
|
{
|
|
|
|
xAxis: data.timeList.length-predictNum
|
|
|
|
},
|
|
|
|
]
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
var option = {
|
|
|
|
tooltip: {
|
|
|
|
trigger: 'axis',
|
|
|
|
backgroundColor: 'rgba(50,50,50,0.7)',
|
|
|
|
borderColor: "#333",
|
|
|
|
formatter: function (params) {
|
|
|
|
let str = '<div>' + params[0].name + '</div>';
|
|
|
|
let unit = '';
|
|
|
|
for (let i = 0; i < params.length; i++) {
|
|
|
|
let dataVal = 0;
|
|
|
|
if (params[i].data && params[i].data != undefined && params[i].data != 'undefined') {
|
|
|
|
dataVal = params[i].data.toFixed(2);
|
|
|
|
}
|
|
|
|
str += "<div style='display:flex;justify-content: space-between'><span>" + params[i].marker + params[i].seriesName + "</span><span style='margin-left:10px;'>" + dataVal + unit + "</span></div>"
|
|
|
|
}
|
|
|
|
return str
|
|
|
|
},
|
|
|
|
textStyle: {
|
|
|
|
color: "#fff",
|
|
|
|
align: 'left'
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
legend: {
|
|
|
|
show: true
|
|
|
|
},
|
|
|
|
grid: {
|
|
|
|
top: '10%',
|
|
|
|
left: '3%',
|
|
|
|
right: '4%',
|
|
|
|
bottom: '3%',
|
|
|
|
containLabel: true
|
|
|
|
},
|
|
|
|
toolbox: {
|
|
|
|
feature: {
|
|
|
|
saveAsImage: {
|
|
|
|
show: false
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
xAxis: {
|
|
|
|
type: 'category',
|
|
|
|
data: data.timeList,
|
|
|
|
axisLine: {
|
|
|
|
lineStyle: {
|
|
|
|
color: '#c9c9c9'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
axisLabel: {
|
|
|
|
color: '#232425',
|
|
|
|
showMaxLabel: true,
|
|
|
|
fontSize: 12,
|
|
|
|
formatter: function (params) {
|
|
|
|
let val = params
|
|
|
|
if(params.indexOf(' ' != -1)){
|
|
|
|
//console.log(params.split(' ')[0].substr(5,5));
|
|
|
|
return params.split(' ')[0].substr(5,5) +" "+params.split(' ')[1].substr(0,5);
|
|
|
|
}
|
|
|
|
return val;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
splitArea: {
|
|
|
|
show: true,
|
|
|
|
areaStyle: {
|
|
|
|
color: ['rgba(200,200,200,0.1)', 'transparent'
|
|
|
|
]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
yAxis: {
|
|
|
|
type: 'value',
|
|
|
|
axisLine: {
|
|
|
|
lineStyle: {
|
|
|
|
color: '#232425'
|
|
|
|
},
|
|
|
|
show: false
|
|
|
|
},
|
|
|
|
axisTick: {
|
|
|
|
show: false
|
|
|
|
},
|
|
|
|
splitLine: {
|
|
|
|
lineStyle: {
|
|
|
|
color: ['#ccc']
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
visualMap: {
|
|
|
|
type: "piecewise",
|
|
|
|
show: false,
|
|
|
|
dimension: 0,
|
|
|
|
seriesIndex: 0,
|
|
|
|
pieces: [
|
|
|
|
{
|
|
|
|
gt: 0,
|
|
|
|
lt: data.timeList.length-predictNum,
|
|
|
|
color: "rgba(41,11,236,0.68)",//大于0小于12为蓝色
|
|
|
|
},
|
|
|
|
{
|
|
|
|
gt: data.timeList.length-predictNum,
|
|
|
|
color: "rgba(229,27,88,0.68)",//大于12区间为红色
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
series: series
|
|
|
|
};
|
|
|
|
// 使用刚指定的配置项和数据显示图表
|
|
|
|
if (bizyshixiaoChart === null) {
|
|
|
|
bizyshixiaoChart = echarts.init(document.getElementById('predictionKpiLineChart'));
|
|
|
|
} else {
|
|
|
|
bizyshixiaoChart.clear();
|
|
|
|
}
|
|
|
|
|
|
|
|
bizyshixiaoChart.setOption(option);
|
|
|
|
|
|
|
|
//性能曲线图的点击事件
|
|
|
|
bizyshixiaoChart.off("click");
|
|
|
|
|
|
|
|
})();
|
|
|
|
}).error(function () {
|
|
|
|
layer.close(zshiLoadIndex);
|
|
|
|
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
}); |
|
|
\ No newline at end of file |
...
|
...
|
|
