|
...
|
...
|
@@ -11,15 +11,13 @@ export default { |
|
|
|
},
|
|
|
|
setup(props, {attrs, slots, emit}) {
|
|
|
|
const {proxy} = Vue.getCurrentInstance();
|
|
|
|
let interval=Vue.ref('DAY');
|
|
|
|
let dateType=Vue.ref('oneDay');
|
|
|
|
let optionData=Vue.ref('');
|
|
|
|
let names = Vue.ref(['1', '2', '3', '4', '5', '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 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',
|
|
...
|
...
|
@@ -33,132 +31,78 @@ export default { |
|
|
|
start: '#C04DD8',
|
|
|
|
end: '#D81F72'
|
|
|
|
},
|
|
|
|
|
|
|
|
])
|
|
|
|
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 = [['2022-05-03','02:00'],['2022-05-04','03:00'],['2022-05-05','04:00']];
|
|
|
|
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();
|
|
|
|
{
|
|
|
|
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'
|
|
|
|
}
|
|
|
|
|
|
|
|
])
|
|
|
|
|
|
|
|
const changeInterval=(val)=>{
|
|
|
|
interval.value=val;
|
|
|
|
dateType.value=val;
|
|
|
|
if(val=='custom'){
|
|
|
|
}else{
|
|
|
|
getLineChart();
|
|
...
|
...
|
@@ -170,24 +114,21 @@ export default { |
|
|
|
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;
|
|
|
|
let resType=params.resType;//资源类型
|
|
|
|
|
|
|
|
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;
|
|
|
|
let url = '/api-web/scatter/getByResId?dateType=' + dateType.value +
|
|
|
|
'&resId=' + resourceId + '&kpiId=' + kpiId + '&resType=' + resType;
|
|
|
|
proxy.$http.get(url, {},function (res){
|
|
|
|
kpiUnit.value = res.data.kpiUnit == null ? "" : res.data.kpiUnit;
|
|
|
|
if (res.data && res.data.names.length == 0) {
|
|
|
|
if (res.data && res.data.length == 0) {
|
|
|
|
rateData.value = {
|
|
|
|
series: [{
|
|
|
|
"data": [['2022-05-03','02:00'],['2022-05-04','03:00'],['2022-05-05','04:00']],
|
|
|
|
"data": [['2022-05-03','02:00'],['2022-05-05','03:00'],['2022-05-07','04:00']],
|
|
|
|
// "name": kpiName.value
|
|
|
|
"name": '成功'
|
|
|
|
},{
|
|
|
|
"data": [['2022-05-03','08:00'],['2022-05-04','09:00'],['2022-05-05','10:00']],
|
|
|
|
"data": [['2022-05-04','08:00'],['2022-05-06','09:00'],['2022-05-07','10:00']],
|
|
|
|
// "name": kpiName.value
|
|
|
|
"name": '失败'
|
|
|
|
}],
|
|
...
|
...
|
@@ -200,11 +141,11 @@ export default { |
|
|
|
},function (error){
|
|
|
|
rateData.value = {
|
|
|
|
series: [{
|
|
|
|
"data": [['2022-05-03','02:00'],['2022-05-04','03:00'],['2022-05-05','04:00']],
|
|
|
|
"data": [['2022-05-03','02:00'],['2022-05-05','03:00'],['2022-05-07','04:00']],
|
|
|
|
// "name": kpiName.value
|
|
|
|
"name": '成功'
|
|
|
|
},{
|
|
|
|
"data": [['2022-05-03','08:00'],['2022-05-04','09:00'],['2022-05-05','10:00']],
|
|
|
|
"data": [['2022-05-04','08:00'],['2022-05-06','09:00'],['2022-05-07','10:00']],
|
|
|
|
// "name": kpiName.value
|
|
|
|
"name": '失败'
|
|
|
|
}],
|
|
...
|
...
|
@@ -216,54 +157,42 @@ export default { |
|
|
|
}
|
|
|
|
const setSeries=()=>{
|
|
|
|
series.value=[];
|
|
|
|
$.each(rateData.value.series,function (i,v) {
|
|
|
|
$.each(rateData.value,function (i,v) {
|
|
|
|
if(v.x && v.x.length>0){
|
|
|
|
xAxisData.value=v.x;
|
|
|
|
}
|
|
|
|
series.value.push({
|
|
|
|
name: v.name,
|
|
|
|
type: 'scatter',
|
|
|
|
data: v.data,
|
|
|
|
data: v.date,
|
|
|
|
/* symbolSize: 12,
|
|
|
|
symbol: 'circle',*/
|
|
|
|
itemStyle: {
|
|
|
|
normal: {
|
|
|
|
color: colorsArr.value[i].start //图标颜色
|
|
|
|
color: colorsArr.value[i]?colorsArr.value[i].start:colorsArr.value[0].start //图标颜色
|
|
|
|
}
|
|
|
|
},
|
|
|
|
lineStyle: {
|
|
|
|
normal: {
|
|
|
|
width: 3, //连线粗细
|
|
|
|
color: colorsArr.value[i].end //连线颜色
|
|
|
|
color: colorsArr.value[i]?colorsArr.value[i].end:colorsArr.value[0].end //连线颜色
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
});
|
|
|
|
console.log("****",series.value)
|
|
|
|
|
|
|
|
optionDataInit();
|
|
|
|
}
|
|
|
|
const optionDataInit=()=>{
|
|
|
|
let COLOR_ALL = [
|
|
|
|
'#37A2DA',
|
|
|
|
'#e06343',
|
|
|
|
];
|
|
|
|
let pieces = [];
|
|
|
|
let CLUSTER_COUNT = 2;
|
|
|
|
let DIENSIION_CLUSTER_INDEX = 1;
|
|
|
|
for (let i = 0; i < 2; i++) {
|
|
|
|
pieces.push({
|
|
|
|
value: i,
|
|
|
|
label: 'cluster ' + i,
|
|
|
|
color: COLOR_ALL[i]
|
|
|
|
});
|
|
|
|
}
|
|
|
|
optionData.value = {
|
|
|
|
tooltip: {
|
|
|
|
trigger: 'axis',
|
|
|
|
formatter:function (param) {
|
|
|
|
// var tips = kpiName.value+" "+param[0].name +"<br/>";
|
|
|
|
var tips =param[0].name +"<br/>";
|
|
|
|
var tips =kpiName.value +"<br/>";
|
|
|
|
$.each(param,function (i,v) {
|
|
|
|
// tips += v.marker+" "+v.seriesName + ":"+v.value +kpiUnit.value+"</br>"
|
|
|
|
tips += v.marker+" "+v.seriesName + ":"+v.value +"</br>"
|
|
|
|
tips += "<div style='display: flex;align-content: flex-start;'><span>"+v.marker+"</span> <span>"+
|
|
|
|
v.seriesName + ":"+v.value +"</span></div>"
|
|
|
|
});
|
|
|
|
return tips;
|
|
|
|
}
|
|
...
|
...
|
@@ -307,11 +236,12 @@ export default { |
|
|
|
}
|
|
|
|
},
|
|
|
|
yAxis: {
|
|
|
|
data: ['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'],
|
|
|
|
// data: ['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'],
|
|
|
|
data:YAxisData.value,
|
|
|
|
scale: true,
|
|
|
|
boundaryGap: ['10%', '10%'],
|
|
|
|
axisLabel: {
|
|
|
|
// interval:0,//label无间隔
|
|
|
|
interval:59,//label无间隔
|
|
|
|
formatter: '{value} 时'
|
|
|
|
|
|
|
|
},
|
|
...
|
...
|
@@ -330,15 +260,6 @@ export default { |
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
/* visualMap: {
|
|
|
|
type: 'piecewise',
|
|
|
|
top: 'middle',
|
|
|
|
left: 10,
|
|
|
|
show:false,
|
|
|
|
splitNumber: CLUSTER_COUNT,
|
|
|
|
dimension: DIENSIION_CLUSTER_INDEX,
|
|
|
|
pieces: pieces
|
|
|
|
},*/
|
|
|
|
// x轴拖动
|
|
|
|
dataZoom: [
|
|
|
|
{
|
|
...
|
...
|
@@ -352,26 +273,30 @@ export default { |
|
|
|
series:series.value
|
|
|
|
};
|
|
|
|
}
|
|
|
|
//时间范围组件回调函数--时间范围
|
|
|
|
const callbacktime=(val)=>{
|
|
|
|
|
|
|
|
}
|
|
|
|
//时间范围组件回调函数--聚合频率
|
|
|
|
const callbackrate=(val)=>{
|
|
|
|
|
|
|
|
}
|
|
|
|
//获取近30天
|
|
|
|
let xAxisData=Vue.ref([]);
|
|
|
|
const getMonthDay=()=>{
|
|
|
|
let m=24;
|
|
|
|
if(dateType=='oneDay'){
|
|
|
|
m=24;
|
|
|
|
}else if(dateType=='week'){
|
|
|
|
m=7;
|
|
|
|
}else if(dateType=='month'){
|
|
|
|
m=30;
|
|
|
|
}
|
|
|
|
let dateArr=[];
|
|
|
|
for(let i=0;i<=30;i++){
|
|
|
|
for(let i=0;i<=m;i++){
|
|
|
|
let myDate=new Date();
|
|
|
|
if(dateType=='oneDay'){
|
|
|
|
myDate.setHours(myDate.getHours()-m)
|
|
|
|
}else if(dateType=='week' || dateType=='month'){
|
|
|
|
myDate.setDate(myDate.getDate() - i);
|
|
|
|
}
|
|
|
|
let lowData =getDateTime(myDate); //用了上面转年月日的方法
|
|
|
|
dateArr.unshift(lowData)
|
|
|
|
}
|
|
|
|
xAxisData.value=dateArr;
|
|
|
|
console.log("2121212",dateArr)
|
|
|
|
}
|
|
|
|
//获取时间点 转年月日的方法
|
|
|
|
const getDateTime=(newDate)=>{
|
|
...
|
...
|
@@ -393,26 +318,50 @@ export default { |
|
|
|
let timeFormat =(number)=> {
|
|
|
|
return number.length == 1 ? ('0' + number) : number
|
|
|
|
}
|
|
|
|
//00:00-23:59数据
|
|
|
|
let YAxisData=Vue.ref([]);
|
|
|
|
let getYAxisData=()=>{
|
|
|
|
let arr1=[];
|
|
|
|
for(let i=0;i<24;i++){
|
|
|
|
for(let j=0;j<60;j++){
|
|
|
|
if(i<10){
|
|
|
|
if(j<10){
|
|
|
|
arr1.push('0'+i+':0'+j);
|
|
|
|
}else{
|
|
|
|
arr1.push('0'+i+':'+j);
|
|
|
|
}
|
|
|
|
|
|
|
|
}else{
|
|
|
|
if(j<10){
|
|
|
|
arr1.push(i+':0'+j);
|
|
|
|
}else{
|
|
|
|
arr1.push(i+':'+j);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
YAxisData.value=arr1;
|
|
|
|
}
|
|
|
|
// 挂载完
|
|
|
|
Vue.onMounted(() => {
|
|
|
|
getYAxisData();
|
|
|
|
getMonthDay();
|
|
|
|
getLineChart();
|
|
|
|
})
|
|
|
|
return {
|
|
|
|
xAxisData,
|
|
|
|
YAxisData,
|
|
|
|
getMonthDay,
|
|
|
|
timeFormat,
|
|
|
|
interval,
|
|
|
|
dateType,
|
|
|
|
optionData,
|
|
|
|
names,
|
|
|
|
series,
|
|
|
|
rateData,
|
|
|
|
kpiUnit,
|
|
|
|
kpiName,
|
|
|
|
keys,
|
|
|
|
optionDataInit,
|
|
|
|
getOptionData,
|
|
|
|
getInfluxOption,
|
|
|
|
getLineChart,
|
|
|
|
changeInterval
|
|
|
|
}
|
...
|
...
|
|
