gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：修改问题

Browse Source 
1 panel chart 图表refresh刷新无效，一致显示loading图标
2 堆叠图tooltip加一个总和total
This commit is contained in:
hyx
2020-04-29 16:35:58 +08:00
parent 690db89452
commit e0b70cdabc
4 changed files with 228 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
nezha-fronted/src/components/charts/chartPreview.vue
View File

@@ -145,6 +145,7 @@
xAxis: [], xAxis: [],
theData: [], // series数据组 theData: [], // series数据组
}, },
isStackArea:false,
echartModalStore: null, // 全屏查看时数据 echartModalStore: null, // 全屏查看时数据
chartType: 'line', // 图表类型 chartType: 'line', // 图表类型
screenModal: false, screenModal: false,
@@ -326,7 +327,6 @@
that.$refs.loadingPreview.endLoading(); that.$refs.loadingPreview.endLoading();
} }
} }
console.log('=======',this.chart);
iframe.src = this.chart.param.url; iframe.src = this.chart.param.url;
}); });
} }
@@ -642,6 +642,8 @@ console.log('=======',this.chart);
} }
}; };
let stackIconBorderColor = (chartInfo.type==='stackArea'?'#53a3cb':'#7e7e7e');
let stackIconChooseBorderColor = (chartInfo.type==='stackArea'?'#7e7e7e':'#53a3cb');
var option = { var option = {
title:{ title:{
show:false, show:false,
@@ -656,7 +658,13 @@ console.log('=======',this.chart);
yAxisIndex:false yAxisIndex:false
}, },
magicType:{ magicType:{
type:['stack'] type:['stack'],
iconStyle:{
borderColor:stackIconBorderColor,
},
emphasis:{
borderColor:stackIconChooseBorderColor,
}
} }
} }
}, },
@@ -698,7 +706,7 @@ console.log('=======',this.chart);
formatter:function(params){ formatter:function(params){
//display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; //display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;
let str = `<div>`; let str = `<div>`;
let sum = 0;
//let str = `<div style='white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;min-width:150px;max-width:600px;display:inline-block;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`; //let str = `<div style='white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;min-width:150px;max-width:600px;display:inline-block;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
params.forEach((item, i) => { params.forEach((item, i) => {
//let tip=legend.find((element)=>{ //let tip=legend.find((element)=>{
@@ -716,6 +724,7 @@ console.log('=======',this.chart);
if(val===0){ if(val===0){
val = Number(item.data[1]); val = Number(item.data[1]);
} }
sum +=val;
str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`; str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName} </div>`; str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName} </div>`;
str += `<div style="padding-left: 10px;">`; str += `<div style="padding-left: 10px;">`;
@@ -724,6 +733,17 @@ console.log('=======',this.chart);
str += `</div>`; str += `</div>`;
}); });
if(chartInfo.type==='stackArea' || self.isStackArea){
sum = parseFloat(Number(sum).toFixed(2));
str +=`<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
str +=`<div style="line-height: 18px; font-size: 12px;padding-left:20px;">`
str +=self.$t("dashboard.panel.chartTotal");
str +=`</div>`;
str +=`<div style="padding-left: 10px;">`;
str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(sum,null,2);
str +=`</div>`;
str += `</div>`;
}
str +=`</div>`; str +=`</div>`;
return str; return str;
}, },
@@ -891,6 +911,62 @@ console.log('=======',this.chart);
this.echartModalStore.setOption(option);//创建图表 this.echartModalStore.setOption(option);//创建图表
this.$refs.loadingPreview.endLoading(); this.$refs.loadingPreview.endLoading();
}); });
this.echartModalStore.on('magictypechanged', function (params) {
self.isStackArea = !self.isStackArea;
if(self.isStackArea){
this.setOption({
toolbox:{
feature:{
magicType:{
iconStyle:{
borderColor:'#7e7e7e',
},
},
}
},
tooltip: {
formatter:function(params){
let str = `<div>`;let sum = 0;
params.forEach((item, i) => {let tip=legend[item.seriesIndex];
let color = self.bgColorList[item.seriesIndex];
if(i===0){
let value=bus.computeTimezone(item.data[0]);
let t_date = new Date(value);
str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
+ [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
str +=`<br/>`;
}
let val = parseFloat(Number(item.data[1]).toFixed(2));
if(val===0){
val = Number(item.data[1]);
}
sum +=val;
str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName} </div>`;
str += `<div style="padding-left: 10px;">`;
str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
str += `</div>`;
str += `</div>`;
});
if(chartInfo.type==='stackArea' || self.isStackArea){
sum = parseFloat(Number(sum).toFixed(2));
str +=`<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
str +=`<div style="line-height: 18px; font-size: 12px;padding-left:20px;">`
str +=self.$t("dashboard.panel.chartTotal");
str +=`</div>`;
str +=`<div style="padding-left: 10px;">`;
str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(sum,null,2);
str +=`</div>`;
str += `</div>`;
}
str +=`</div>`;
return str;
},
}
});
}
});
}, },
mouseEnterFullChart(){ mouseEnterFullChart(){
if (this.echartModalStore) { if (this.echartModalStore) {
@@ -952,6 +1028,7 @@ console.log('=======',this.chart);
if(iframe){ if(iframe){
iframe.src=""; iframe.src="";
} }
this.isStackArea = false;
}, },
// 重新请求数据 刷新操作 // 重新请求数据 刷新操作

150
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -187,6 +187,7 @@
seriesItem: [], // 保存信息 seriesItem: [], // 保存信息
seriesItemScreen:[], seriesItemScreen:[],
images: '', images: '',
isStackArea:false,
isError:false, isError:false,
errorContent:'', errorContent:'',
toolbox: false, toolbox: false,
@@ -696,6 +697,8 @@
} }
}; };
let stackIconBorderColor = (chartInfo.type==='stackArea'?'#53a3cb':'#7e7e7e');
let stackIconChooseBorderColor = (chartInfo.type==='stackArea'?'#7e7e7e':'#53a3cb');
var option = { var option = {
title:{ title:{
show:false, show:false,
@@ -710,8 +713,14 @@
yAxisIndex:false yAxisIndex:false
}, },
magicType:{ magicType:{
type:['stack'] type:['stack'],
} iconStyle:{
borderColor:stackIconBorderColor,
},
emphasis:{
borderColor:stackIconChooseBorderColor,
}
},
} }
}, },
tooltip: { tooltip: {
@@ -782,6 +791,7 @@
let str = `<div>`; let str = `<div>`;
//let str = `<div style='white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;min-width:150px;max-width:600px;display:inline-block;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`; //let str = `<div style='white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;min-width:150px;max-width:600px;display:inline-block;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
let sum = 0;
params.forEach((item, i) => { params.forEach((item, i) => {
//alert('tooltip====='+JSON.stringify(item)) //alert('tooltip====='+JSON.stringify(item))
//let tip=legend.find((element)=>{ //let tip=legend.find((element)=>{
@@ -801,6 +811,7 @@
if(val===0){ if(val===0){
val = Number(item.data[1]); val = Number(item.data[1]);
} }
sum +=val;
str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`; str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName} </div>`; str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName} </div>`;
str += `<div style="padding-left: 10px;">`; str += `<div style="padding-left: 10px;">`;
@@ -815,6 +826,18 @@
str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2); str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
str +=`</div>`;*/ str +=`</div>`;*/
}); });
if(self.data.type==='stackArea' || self.isStackArea){
sum = parseFloat(Number(sum).toFixed(2));
str +=`<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
str +=`<div style="line-height: 18px; font-size: 12px;padding-left:20px;">`
str +=self.$t("dashboard.panel.chartTotal");
str +=`</div>`;
str +=`<div style="padding-left: 10px;">`;
str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(sum,null,2);
str +=`</div>`;
str += `</div>`;
}
str +=`</div>`; str +=`</div>`;
return str; return str;
// return `<div style='width:100%;display:block;word-break:break-all;word-wrap:break-word;white-space:normal'><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${params[0].color};}'></span> ${params[0].seriesName}:${params[0].data[1]}</div>`; // return `<div style='width:100%;display:block;word-break:break-all;word-wrap:break-word;white-space:normal'><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${params[0].color};}'></span> ${params[0].seriesName}:${params[0].data[1]}</div>`;
@@ -1041,6 +1064,67 @@
this.echartStore.setOption(option);//创建图表 this.echartStore.setOption(option);//创建图表
this.$refs['localLoading'+this.chartIndex].endLoading(); this.$refs['localLoading'+this.chartIndex].endLoading();
this.firstShow = true; // 展示操作按键 this.firstShow = true; // 展示操作按键
this.echartStore.on('magictypechanged', function (params) {
self.isStackArea = !self.isStackArea;
if(self.isStackArea){
this.setOption({
toolbox:{
feature:{
magicType:{
iconStyle:{
borderColor:'#7e7e7e',
},
},
}
},
tooltip: {
formatter:function(params){
let str = `<div>`;
let sum = 0;
params.forEach((item, i) => {let tip=legend[item.seriesIndex];
let color = self.bgColorList[item.seriesIndex];
if(i===0){
let value=bus.computeTimezone(item.data[0]);
let t_date = new Date(value);
str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
+ [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
str +=`<br/>`;
}
let val = parseFloat(Number(item.data[1]).toFixed(2));
if(val===0){
val = Number(item.data[1]);
}
sum +=val;
str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName} </div>`;
str += `<div style="padding-left: 10px;">`;
str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
str += `</div>`;
str += `</div>`;
});
if(self.data.type==='stackArea' || self.isStackArea){
sum = parseFloat(Number(sum).toFixed(2));
str +=`<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
str +=`<div style="line-height: 18px; font-size: 12px;padding-left:20px;">`
str +=self.$t("dashboard.panel.chartTotal");
str +=`</div>`;
str +=`<div style="padding-left: 10px;">`;
str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(sum,null,2);
str +=`</div>`;
str += `</div>`;
}
str +=`</div>`;
return str;
},
}
});
}
});
//this.echartStore.dispatchAction({
//type: 'magictypechanged',
//});
}); });
} else if (chartSite === 'screen') { // 全屏显示 } else if (chartSite === 'screen') { // 全屏显示
@@ -1127,6 +1211,63 @@
let divHeight = this.$refs.screenLegendArea.offsetHeight; let divHeight = this.$refs.screenLegendArea.offsetHeight;
this.echartModalStore.resize({height: '100%'}); this.echartModalStore.resize({height: '100%'});
});*/ });*/
this.echartModalStore.on('magictypechanged', function (params) {
self.isStackArea = !self.isStackArea;
if(self.isStackArea){
this.setOption({
toolbox:{
feature:{
magicType:{
iconStyle:{
borderColor:'#7e7e7e',
},
},
}
},
tooltip: {
formatter:function(params){
let str = `<div>`;
let sum = 0;
params.forEach((item, i) => {let tip=legend[item.seriesIndex];
let color = self.bgColorList[item.seriesIndex];
if(i===0){
let value=bus.computeTimezone(item.data[0]);
let t_date = new Date(value);
str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
+ [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
str +=`<br/>`;
}
let val = parseFloat(Number(item.data[1]).toFixed(2));
if(val===0){
val = Number(item.data[1]);
}
sum +=val;
str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName} </div>`;
str += `<div style="padding-left: 10px;">`;
str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
str += `</div>`;
str += `</div>`;
});
if(self.data.type==='stackArea' || self.isStackArea){
sum = parseFloat(Number(sum).toFixed(2));
str +=`<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
str +=`<div style="line-height: 18px; font-size: 12px;padding-left:20px;">`
str +=self.$t("dashboard.panel.chartTotal");
str +=`</div>`;
str +=`<div style="padding-left: 10px;">`;
str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(sum,null,2);
str +=`</div>`;
str += `</div>`;
}
str +=`</div>`;
return str;
},
}
});
}
});
} }
}, },
handleLineFeed(str,chartWidth){ handleLineFeed(str,chartWidth){
@@ -1259,10 +1400,11 @@
// 重新请求数据 刷新操作 // 重新请求数据 刷新操作
refreshChart() { refreshChart() {
this.dropdownMenuShow=false; this.dropdownMenuShow=false;
let id = this.data.id;
this.clearChart(); this.clearChart();
this.$refs['localLoading'+this.chartIndex].startLoading(); this.$refs['localLoading'+this.chartIndex].startLoading();
/*this.firstShow = false; this.firstShow = false;
this.$emit('on-refresh-data', this.data.id);*/ this.$emit('on-refresh-data', id);
}, },
initDialog(){ initDialog(){
//此时初始化，才能获得screenShowArea对象，否则此对象为undefined，无法初始化图表 //此时初始化，才能获得screenShowArea对象，否则此对象为undefined，无法初始化图表

1
nezha-fronted/src/components/common/language/cn.js
View File

@@ -97,6 +97,7 @@ const cn = {
searchItem: { searchItem: {
name: "名称" name: "名称"
}, },
chartTotal:'总和',
createPanelTitle: "新增面板", createPanelTitle: "新增面板",
selectPanelTitle: "选择面板", selectPanelTitle: "选择面板",
createPanelTitleSec: "新增面板", createPanelTitleSec: "新增面板",

1
nezha-fronted/src/components/common/language/en.js
View File

@@ -101,6 +101,7 @@ const en = {
searchItem:{ searchItem:{
name:'name' name:'name'
}, },
chartTotal:'total',
//面板-侧滑框 //面板-侧滑框
createPanelTitle: 'New panel', //"新增面板" createPanelTitle: 'New panel', //"新增面板"
selectPanelTitle:'Select', //"选择面板" selectPanelTitle:'Select', //"选择面板"