|
|
|
export default {
|
|
|
|
name: 'pieDetailLine',
|
|
|
|
template: '',
|
|
|
|
components:{
|
|
|
|
'LineChart': Vue.defineAsyncComponent(
|
|
|
|
() => myImport('views/page/components/lineChart/index')
|
|
|
|
)
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return{}
|
|
|
|
},
|
|
|
|
setup(props, {attrs, slots, emit}) {
|
|
|
|
const {proxy} = Vue.getCurrentInstance();
|
|
|
|
let interval=Vue.ref('DAY');
|
|
|
|
let optionData=Vue.ref('');
|
|
|
|
let names = Vue.ref(['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']);
|
|
|
|
let series = Vue.ref([]);
|
|
|
|
let rateData = Vue.ref([]);
|
|
|
|
let kpiUnit = Vue.ref('');
|
|
|
|
let kpiName = Vue.ref('');//指标名称
|
|
|
|
let startTime=Vue.ref('');
|
|
|
|
let endTime=Vue.ref('');
|
|
|
|
let colorsArr=Vue.ref([
|
|
|
|
{
|
|
|
|
start: '#46d6d8',
|
|
|
|
end: '#2883d0'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
start: '#facf5b',
|
|
|
|
end: '#f77623'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
start: '#C04DD8',
|
|
|
|
end: '#D81F72'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
start: '#F5A1EB',
|
|
|
|
end: '#A04DE2'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
start: '#F36093',
|
|
|
|
end: '#FF465C'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
start: '#C2E74D',
|
|
|
|
end: '#00AE8B'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
start: '#3DC3FF',
|
|
|
|
end: '#01FFFF'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
start: '#B850ED',
|
|
|
|
end: '#9062EF'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
start: '#305be6',
|
|
|
|
end: '#36a7d3'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
start: '#FFA500',
|
|
|
|
end: '#FFEE00'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
start: '#C4E64C',
|
|
|
|
end: '#2de078'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
start: '#30ffb3',
|
|
|
|
end: '#01FFFF'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
start: '#FF4488',
|
|
|
|
end: '#F13EFF'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
start: '#A64CE2',
|
|
|
|
end: '#625AE7'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
start: '#5AEBC7',
|
|
|
|
end: '#5FC9F8'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
start: '#FFA500',
|
|
|
|
end: '#FFEE00'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
start: '#00AAD6',
|
|
|
|
end: '#625AE7'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
start: '#E48BDE',
|
|
|
|
end: '#FF9262'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
start: '#B2797B',
|
|
|
|
end: '#FF4B51'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
start: '#ffe393',
|
|
|
|
end: '#feff5b'
|
|
|
|
}
|
|
|
|
])
|
|
|
|
let keys=Vue.ref('');
|
|
|
|
let getOptionData=(res)=>{
|
|
|
|
let nameArr=[];
|
|
|
|
let dataArr=[];
|
|
|
|
if(res && res.success){
|
|
|
|
if(res.map){
|
|
|
|
let resData=res.map;
|
|
|
|
kpiUnit.value = resData.kpiUnit == null ? "" : resData.kpiUnit;
|
|
|
|
Object.keys(resData).forEach(function(key){
|
|
|
|
Object.keys(resData[key]).sort(function (a, b) {
|
|
|
|
return a<b?1:-1;
|
|
|
|
}).forEach(function(time){
|
|
|
|
nameArr.unshift(time);
|
|
|
|
dataArr.unshift(resData[key][time])
|
|
|
|
})
|
|
|
|
})
|
|
|
|
rateData.value = {
|
|
|
|
names: nameArr,
|
|
|
|
series: [{
|
|
|
|
"data": dataArr,
|
|
|
|
"name": '平均值'
|
|
|
|
}],
|
|
|
|
kpiUnit: kpiUnit.value
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}else{
|
|
|
|
proxy.$global.showMsg(res.msg,'warning');
|
|
|
|
}
|
|
|
|
setSeries();
|
|
|
|
}
|
|
|
|
|
|
|
|
const getInfluxOption = (res) => {
|
|
|
|
let str = res.str;
|
|
|
|
if (res.map && Object.keys(res.map).length == 0) {
|
|
|
|
let defData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
|
|
|
|
let seriesDefArr = [];
|
|
|
|
if(str == 'performance'){
|
|
|
|
seriesDefArr = [{
|
|
|
|
"data": defData,
|
|
|
|
"name": kpiName.value
|
|
|
|
}];
|
|
|
|
} else {
|
|
|
|
seriesDefArr = [{
|
|
|
|
"data": defData,
|
|
|
|
"name": "最大"
|
|
|
|
},{
|
|
|
|
"data": defData,
|
|
|
|
"name": "最小"
|
|
|
|
},{
|
|
|
|
"data": defData,
|
|
|
|
"name": "平均"
|
|
|
|
}];
|
|
|
|
}
|
|
|
|
rateData.value = {
|
|
|
|
names: ['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'],
|
|
|
|
series: seriesDefArr,
|
|
|
|
kpiUnit: kpiUnit.value
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
let names = [];
|
|
|
|
let max = [];
|
|
|
|
let min = [];
|
|
|
|
let avg = [];
|
|
|
|
let kpiValueArr = [];
|
|
|
|
let seriesArr = [];
|
|
|
|
let kpiName = '';
|
|
|
|
let kpiUnitVal = '';
|
|
|
|
let kpiList = res.data;
|
|
|
|
|
|
|
|
Object.keys(res.map).forEach(function(key){
|
|
|
|
res.map[key].forEach(function(item){
|
|
|
|
names.push(item.dbTimeStr);
|
|
|
|
if(str == 'performance'){
|
|
|
|
kpiValueArr.push(item.kpiValue);
|
|
|
|
} else {
|
|
|
|
max.push(item.maxValue);
|
|
|
|
min.push(item.minValue);
|
|
|
|
avg.push(item.avgValue);
|
|
|
|
}
|
|
|
|
if(kpiName == '' && kpiUnitVal == ''){
|
|
|
|
kpiList.filter(function (v){
|
|
|
|
if(v.kpiId == item.kpiId){
|
|
|
|
kpiName = v.kpiName;
|
|
|
|
kpiUnitVal = v.unit;
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
if(str == 'performance'){
|
|
|
|
seriesArr = [{
|
|
|
|
"data": kpiValueArr,
|
|
|
|
"name": kpiName
|
|
|
|
}];
|
|
|
|
} else {
|
|
|
|
seriesArr = [{
|
|
|
|
"data": max,
|
|
|
|
"name": "最大"
|
|
|
|
},{
|
|
|
|
"data": min,
|
|
|
|
"name": "最小"
|
|
|
|
},{
|
|
|
|
"data": avg,
|
|
|
|
"name": "平均"
|
|
|
|
}];
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
kpiUnit.value = kpiUnitVal;
|
|
|
|
rateData.value = {
|
|
|
|
names: names,
|
|
|
|
series: seriesArr,
|
|
|
|
kpiUnit: kpiUnit.value
|
|
|
|
};
|
|
|
|
}
|
|
|
|
setSeries();
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const changeInterval=(val)=>{
|
|
|
|
interval.value=val;
|
|
|
|
if(val=='custom'){
|
|
|
|
}else{
|
|
|
|
getLineChart();
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const getLineChart=()=>{
|
|
|
|
let params=proxy.$route.query
|
|
|
|
let resourceId=params.resId;//资源ID
|
|
|
|
let kpiId =params.kpiId; //指标ID
|
|
|
|
let flag =params.flag;//二级资源标识
|
|
|
|
let warning =params.warning;//预警指标标识
|
|
|
|
let ident =params.ident;//性能指标标识
|
|
|
|
let trend =params.trend;//趋势指标标识
|
|
|
|
keys.value=resourceId+":"+kpiId+":"+flag;
|
|
|
|
kpiName.value = params.name;//指标名称
|
|
|
|
let url = '/api-web/detail/performance/line/chart?interval=' + interval.value + '&startTime='
|
|
|
|
+ startTime.value + '&endTime=' + endTime.value + '&resId=' + resourceId + '&kpiIds=' + kpiId + '&subResId=' + flag;
|
|
|
|
proxy.$http.get(url, {},function (res){
|
|
|
|
kpiUnit.value = res.data.kpiUnit == null ? "" : res.data.kpiUnit;
|
|
|
|
if (res.data && res.data.names.length == 0) {
|
|
|
|
rateData.value = {
|
|
|
|
names: ['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'],
|
|
|
|
series: [{
|
|
|
|
"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
|
|
"name": kpiName.value
|
|
|
|
}],
|
|
|
|
kpiUnit: kpiUnit.value
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
rateData.value = res.data;
|
|
|
|
}
|
|
|
|
setSeries();
|
|
|
|
},function (error){
|
|
|
|
rateData.value = {
|
|
|
|
names: ['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'],
|
|
|
|
series: [{
|
|
|
|
"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
|
|
"name": kpiName.value
|
|
|
|
}],
|
|
|
|
kpiUnit: kpiUnit.value
|
|
|
|
}
|
|
|
|
setSeries();
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
const setSeries=()=>{
|
|
|
|
series.value=[];
|
|
|
|
$.each(rateData.value.series,function (i,v) {
|
|
|
|
series.value.push({
|
|
|
|
name: v.name,
|
|
|
|
type: 'line',
|
|
|
|
data: v.data,
|
|
|
|
symbolSize: 12,
|
|
|
|
symbol: 'circle',
|
|
|
|
itemStyle: {
|
|
|
|
normal: {
|
|
|
|
color: colorsArr.value[i].start //图标颜色
|
|
|
|
}
|
|
|
|
},
|
|
|
|
lineStyle: {
|
|
|
|
normal: {
|
|
|
|
width: 3, //连线粗细
|
|
|
|
color: colorsArr.value[i].end //连线颜色
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
});
|
|
|
|
optionDataInit();
|
|
|
|
}
|
|
|
|
const optionDataInit=()=>{
|
|
|
|
|
|
|
|
optionData.value = {
|
|
|
|
tooltip: {
|
|
|
|
trigger: 'axis',
|
|
|
|
formatter:function (param) {
|
|
|
|
var tips = kpiName.value+" "+param[0].name +"<br/>";
|
|
|
|
$.each(param,function (i,v) {
|
|
|
|
tips += v.marker+" "+v.seriesName + ":"+v.value +kpiUnit.value+"</br>"
|
|
|
|
});
|
|
|
|
return tips;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
legend: {
|
|
|
|
show: true
|
|
|
|
},
|
|
|
|
grid: {
|
|
|
|
top: '10%',
|
|
|
|
left: '3%',
|
|
|
|
right: '4%',
|
|
|
|
bottom: '15%',
|
|
|
|
containLabel: true
|
|
|
|
},
|
|
|
|
toolbox: {
|
|
|
|
feature: {
|
|
|
|
saveAsImage: {
|
|
|
|
show: false
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
xAxis: {
|
|
|
|
type: 'category',
|
|
|
|
data: rateData.value.names,
|
|
|
|
axisLine: {
|
|
|
|
lineStyle: {
|
|
|
|
color: '#c9c9c9'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
axisLabel: {
|
|
|
|
color: '#232425',
|
|
|
|
showMaxLabel: true
|
|
|
|
},
|
|
|
|
splitArea: {
|
|
|
|
show: true,
|
|
|
|
areaStyle: {
|
|
|
|
color: ['rgba(200,200,200,0.1)', 'transparent'
|
|
|
|
]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
yAxis: {
|
|
|
|
type: 'value',
|
|
|
|
scale: true,
|
|
|
|
boundaryGap: ['10%', '10%'],
|
|
|
|
axisLine: {
|
|
|
|
lineStyle: {
|
|
|
|
color: '#232425'
|
|
|
|
},
|
|
|
|
show: false
|
|
|
|
},
|
|
|
|
axisTick: {
|
|
|
|
show: false
|
|
|
|
},
|
|
|
|
splitLine: {
|
|
|
|
lineStyle: {
|
|
|
|
color: ['#ccc']
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
// x轴拖动
|
|
|
|
dataZoom: [
|
|
|
|
{
|
|
|
|
type: "slider",
|
|
|
|
realtime: true, //拖动滚动条时是否动态的更新图表数据
|
|
|
|
height: 25, //滚动条高度
|
|
|
|
start: 40, //滚动条开始位置（共100等份）
|
|
|
|
end: 65 //结束位置（共100等份）
|
|
|
|
}
|
|
|
|
],
|
|
|
|
series:series.value
|
|
|
|
};
|
|
|
|
}
|
|
|
|
//时间范围组件回调函数--时间范围
|
|
|
|
const callbacktime=(val)=>{
|
|
|
|
|
|
|
|
}
|
|
|
|
//时间范围组件回调函数--聚合频率
|
|
|
|
const callbackrate=(val)=>{
|
|
|
|
|
|
|
|
}
|
|
|
|
// 挂载完
|
|
|
|
Vue.onMounted(() => {
|
|
|
|
getLineChart();
|
|
|
|
})
|
|
|
|
return {
|
|
|
|
interval,
|
|
|
|
optionData,
|
|
|
|
names,
|
|
|
|
series,
|
|
|
|
rateData,
|
|
|
|
kpiUnit,
|
|
|
|
kpiName,
|
|
|
|
keys,
|
|
|
|
optionDataInit,
|
|
|
|
getOptionData,
|
|
|
|
getInfluxOption,
|
|
|
|
getLineChart,
|
|
|
|
changeInterval
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} |
...
|
...
|
|
