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

feat：新功能

Browse Source 
1 echarts图表增加toolbox
fix：修改问题
1 echarts图表对于返回数据metric为空图表不显示数据情况进行处理
2 tooltip背景色修改
3 echarts图表对于返回数据metric为空图表，tooltip无法正常显示修改（列表及全屏，预览及全屏，explore及全屏）
This commit is contained in:
hyx
2020-04-17 08:15:13 +08:00
parent 5c58e8eebf
commit cd0bfe9004
9 changed files with 302 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -616,17 +616,25 @@ export default {
const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"] const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
// 设置时间-数据格式对 // 设置时间-数据格式对
const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ] const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
// 判断是否有数据 // 判断是否有数据, && tagsArr.length > 0
if (dpsArr.length > 0 && tagsArr.length > 0 && this.$refs.editChart[index]) { if (dpsArr.length > 0 && this.$refs.editChart[index]) {
tagsArr.forEach((tag, i) => { tagsArr.forEach((tag, i) => {
if (tag !== '__name__') { if (tag !== '__name__') {
host += `${tag}="${queryItem.metric[tag]}",`; host += `${tag}="${queryItem.metric[tag]}",`;
} }
}); });
if(host.endsWith(',')){host = host.substr(0,host.length-1);} if(host.endsWith(',')){host = host.substr(0,host.length-1);}
host +="}"; if(queryItem.metric.__name__){
host +="}";
}
if(!host || host===''){
host = chartItem.elements[innerPos].expression;
}
//处理legend别名 //处理legend别名
let alias=this.$refs.editChart[index].dealLegendAlias(host,chartItem.elements[innerPos].legend); let alias=this.$refs.editChart[index].dealLegendAlias(host,chartItem.elements[innerPos].legend);
if(!alias || alias===''){
alias = chartItem.elements[innerPos].expression;
}
legend.push({name:host,alias:alias}); legend.push({name:host,alias:alias});
// 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c // 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
seriesItem.theData.name = host; seriesItem.theData.name = host;

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

@@ -16,6 +16,9 @@
.char-url-preview html{ .char-url-preview html{
} }
#chartPreviewDailog .el-dialog__body {
padding-bottom:5px !important;
}
</style> </style>
<template> <template>
<el-dialog class="chart-preview-dialog nz-dialog" id="chartPreviewDailog" <el-dialog class="chart-preview-dialog nz-dialog" id="chartPreviewDailog"
@@ -42,8 +45,8 @@
</div> </div>
<template v-if="chart.type==='line'||chart.type==='bar'||chart.type==='stackArea'"> <template v-if="chart.type==='line'||chart.type==='bar'||chart.type==='stackArea'">
<div id="chartEchartPreview"> <div id="chartEchartPreview" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart">
<div class="line-area" ref="screenShowArea" id="screenShowArea" style="margin-top:10px;"></div> <div class="line-area" ref="screenShowArea" id="screenShowArea" style="margin-top:0px;"></div>
<div class="legend-container legend-container-screen" id="screenLegendArea" ref="screenLegendArea" v-show="showLegend" v-scrollBar:legend> <div class="legend-container legend-container-screen" id="screenLegendArea" ref="screenLegendArea" v-show="showLegend" v-scrollBar:legend>
<div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias:item.name" @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" :key="'legend_' + item.name+'_'+index"> <div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias:item.name" @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" :key="'legend_' + item.name+'_'+index">
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}} <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
@@ -147,7 +150,7 @@
searchTime:[new Date().setHours(new Date().getHours()-1),new Date()], searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
//oldSearchTime:[], //oldSearchTime:[],
minHeight:200, minHeight:200,
chartSpaceHeight:0,//top-border: 1,bottom-border: 1,padding-bottome:3 chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
titleHeight:50, titleHeight:50,
legendHeight:80, legendHeight:80,
//oldChartBoxCss:'', //oldChartBoxCss:'',
@@ -409,17 +412,25 @@ console.log('=======',this.chart)
const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"] const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
// 设置时间-数据格式对 // 设置时间-数据格式对
const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ] const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
// 判断是否有数据 // 判断是否有数据, && tagsArr.length > 0
if (dpsArr.length > 0 && tagsArr.length > 0 ) { if (dpsArr.length > 0 ) {
tagsArr.forEach((tag, i) => { tagsArr.forEach((tag, i) => {
if (tag !== '__name__') { if (tag !== '__name__') {
host += `${tag}="${queryItem.metric[tag]}",`; host += `${tag}="${queryItem.metric[tag]}",`;
} }
}); });
if(host.endsWith(',')){host = host.substr(0,host.length-1);} if(host.endsWith(',')){host = host.substr(0,host.length-1);}
host +="}"; if(queryItem.metric.__name__){
host +="}";
}
if(!host || host===''){
host = chartItem.elements[innerPos].expression;
}
//处理legend别名 //处理legend别名
let alias=this.dealLegendAlias(host,chartItem.elements[innerPos].legend); let alias=this.dealLegendAlias(host,chartItem.elements[innerPos].legend);
if(!alias || alias===''){
alias = chartItem.elements[innerPos].expression;
}
legend.push({name:host,alias:alias}); legend.push({name:host,alias:alias});
// 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c // 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
seriesItem.theData.name = host; seriesItem.theData.name = host;
@@ -596,9 +607,26 @@ console.log('=======',this.chart)
show:false, show:false,
}, },
color: this.bgColorList, color: this.bgColorList,
toolbox:{
show:false,
top:'0',
showTitle:false,
feature:{
dataZoom:{
yAxisIndex:false
},
magicType:{
type:['stack']
}
}
},
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
confine:false, confine:false,
backgroundColor:'rgba(221,228,237,1)',
textStyle:{
color:'#000'
},
extraCssText:'z-index:1000;', extraCssText:'z-index:1000;',
/*enterable:true, 导致tooltip不消失，显示多个tooltip*/ /*enterable:true, 导致tooltip不消失，显示多个tooltip*/
position:function(point,params,dom,rect,size){ position:function(point,params,dom,rect,size){
@@ -712,12 +740,12 @@ console.log('=======',this.chart)
//bottom:0 //bottom:0
}, },
grid: { grid: {
top: 13, top: 30,
left: 0, left: 0,
right: 30, right: 30,
containLabel: true, containLabel: true,
bottom:35,//156 bottom:8,//156
}, },/*
dataZoom: [{ dataZoom: [{
type: 'slider', type: 'slider',
show:true, show:true,
@@ -729,7 +757,7 @@ console.log('=======',this.chart)
left:40, left:40,
right:48, right:48,
} }
], ],*/
xAxis: { xAxis: {
type: 'time', type: 'time',
@@ -796,6 +824,24 @@ console.log('=======',this.chart)
this.$refs.loadingPreview.endLoading(); this.$refs.loadingPreview.endLoading();
}); });
}, },
mouseEnterFullChart(){
if (this.echartModalStore) {
this.echartModalStore.setOption({
toolbox: {
show:true,
}
})
}
},
mouseLeaveFullChart(){
if (this.echartModalStore) {
this.echartModalStore.setOption({
toolbox: {
show:false,
}
})
}
},
// 设置数据 // 设置数据
setData(chartItem, seriesItem,legend) { setData(chartItem, seriesItem,legend) {
this.legend = legend; this.legend = legend;
@@ -929,16 +975,24 @@ console.log('=======',this.chart)
const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"] const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
// 设置时间-数据格式对 // 设置时间-数据格式对
const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ] const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
// 判断是否有数据 // 判断是否有数据,&& tagsArr.length > 0
if (dpsArr.length > 0 && tagsArr.length > 0) { if (dpsArr.length > 0 ) {
tagsArr.forEach((tag, i) => { tagsArr.forEach((tag, i) => {
if (tag !== '__name__') { if (tag !== '__name__') {
host += `${tag}="${queryItem.metric[tag]}",`; host += `${tag}="${queryItem.metric[tag]}",`;
} }
}); });
if(host.endsWith(',')){host = host.substr(0,host.length-1);} if(host.endsWith(',')){host = host.substr(0,host.length-1);}
host +="}"; if(queryItem.metric.__name__){
host +="}";
}
if(!host || host===''){
host = this.chart.elements[pos].expression;
}
let alias=this.dealLegendAlias(host,this.chart.elements[pos].legend); let alias=this.dealLegendAlias(host,this.chart.elements[pos].legend);
if(!alias || alias===''){
alias = this.chart.elements[pos].expression;
}
legend.push({name:host,alias:alias}); legend.push({name:host,alias:alias});
// 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c // 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
seriesItem.theData.name = host; seriesItem.theData.name = host;

2
nezha-fronted/src/components/charts/line-chart-block.scss
View File

@@ -141,7 +141,7 @@
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
} }
} }
} }
.line-area { .line-area {

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

@@ -2,7 +2,7 @@
@import './line-chart-block.scss'; @import './line-chart-block.scss';
</style> </style>
<template> <template>
<div class="line-chart-block" :id="'lineChartDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false"> <div class="line-chart-block" :id="'lineChartDiv'+chartIndex" v-show="divFirstShow" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart">
<loading :ref="'localLoading'+chartIndex"></loading> <loading :ref="'localLoading'+chartIndex"></loading>
<!--<div class="edit"> <!--<div class="edit">
@@ -49,19 +49,19 @@
<i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li> <i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
</ul> </ul>
</el-dropdown> </el-dropdown>
<!-- <!--
<div class="chart-title" v-show="firstShow"> <div class="chart-title" v-show="firstShow">
{{data.title}} {{data.title}}
</div> </div>
<div class="nz-btn-group nz-btn-group-light edit button-panel-height" v-show="firstShow"> <div class="nz-btn-group nz-btn-group-light edit button-panel-height" v-show="firstShow">
<button type="button" @click="refreshChart" style="padding: 6px 14px 5px 14px;" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i style="font-size: 16px;" class="global-active-color el-icon-refresh-right"></i></button> <button type="button" @click="refreshChart" style="padding: 6px 14px 5px 14px;" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i style="font-size: 16px;" class="global-active-color el-icon-refresh-right"></i></button>
<button @click="editChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i class="nz-icon nz-icon-edit"></i></button> <button @click="editChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i class="nz-icon nz-icon-edit"></i></button>
<button @click="removeChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i class="el-icon-delete"></i></button> <button @click="removeChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i class="el-icon-delete"></i></button>
<button <button
@click="showAllScreen" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-full-screen"></i></button> @click="showAllScreen" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-full-screen"></i></button>
</div> </div>
--> -->
</div> </div>
<div class="line-area" ref="lineChartArea" :id="'lineChartArea'+chartIndex" v-show="firstShow"></div> <div class="line-area" ref="lineChartArea" :id="'lineChartArea'+chartIndex" v-show="firstShow"></div>
@@ -98,9 +98,9 @@
<!--<button @click="refreshChart" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i style="font-size: 14px;" class="el-icon-refresh-right"></i></button>--> <!--<button @click="refreshChart" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i style="font-size: 14px;" class="el-icon-refresh-right"></i></button>-->
</div> </div>
</div> </div>
<div class="line-area" ref="screenShowArea" id="screenShowArea" style="margin-top:10px;"></div> <div class="line-area" ref="screenShowArea" id="screenShowArea" style="margin-top:10px;" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"></div>
<div class="legend-container legend-container-screen" id="screenLegendArea" ref="screenLegendArea" v-show="showLegend" v-scrollBar:legend> <div class="legend-container legend-container-screen" id="screenLegendArea" ref="screenLegendArea" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" v-show="showLegend" v-scrollBar:legend>
<div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias:item.name" @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" :key="'legend_' + item.name+'_'+index"> <div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias:item.name" @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" :key="'legend_' + item.name+'_'+index">
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}} <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
<br/><!--bgColorList[index]--> <br/><!--bgColorList[index]-->
@@ -298,6 +298,44 @@
setDivFirstShow(showDiv){ setDivFirstShow(showDiv){
this.divFirstShow = showDiv; this.divFirstShow = showDiv;
}, },
mouseEnterChart(){
this.caretShow=true;
if (this.echartStore) {
this.echartStore.setOption({
toolbox: {
show:true,
}
})
}
},
mouseLeaveChart(){
this.caretShow=false;
if (this.echartStore) {
this.echartStore.setOption({
toolbox: {
show:false,
}
})
}
},
mouseEnterFullChart(){
if (this.echartModalStore) {
this.echartModalStore.setOption({
toolbox: {
show:true,
}
})
}
},
mouseLeaveFullChart(){
if (this.echartModalStore) {
this.echartModalStore.setOption({
toolbox: {
show:false,
}
})
}
},
dragResize:function(e){ dragResize:function(e){
var diffWidth = 20;//界面的宽度空白的地方的宽度 var diffWidth = 20;//界面的宽度空白的地方的宽度
var chartBoxPadding = 20; var chartBoxPadding = 20;
@@ -449,8 +487,8 @@
// type: 'legendToggleSelect', // type: 'legendToggleSelect',
// name: legendName // name: legendName
// }); // });
// let isGreyTmp = this.isGrey[index]; // let isGreyTmp = this.isGrey[index];
// this.$set(this.isGrey, index, !isGreyTmp); // this.$set(this.isGrey, index, !isGreyTmp);
// } // }
//点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部 //点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
@@ -624,9 +662,26 @@
show:false, show:false,
}, },
color: this.bgColorList, color: this.bgColorList,
toolbox:{
show:false,
top:'0',
showTitle:false,
feature:{
dataZoom:{
yAxisIndex:false
},
magicType:{
type:['stack']
}
}
},
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
confine:false, confine:false,
backgroundColor:'rgba(221,228,237,1)',
textStyle:{
color:'#000'
},
extraCssText:'z-index:1000;', extraCssText:'z-index:1000;',
/*enterable:true, 导致tooltip不消失，显示多个tooltip*/ /*enterable:true, 导致tooltip不消失，显示多个tooltip*/
position:function(point,params,dom,rect,size){ position:function(point,params,dom,rect,size){
@@ -776,12 +831,13 @@
//bottom:0 //bottom:0
}, },
grid: { grid: {
top: 13, top: 30,
left: 0, left: 0,
right: 30, right: 30,
containLabel: true, containLabel: true,
bottom:35,//156 bottom:8,//156
}, },
/*
dataZoom: [{ dataZoom: [{
type: 'slider', type: 'slider',
show:true, show:true,
@@ -793,24 +849,7 @@
left:40, left:40,
right:48, right:48,
} }
/* ],*/
, {
start: 0,
end: 100,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}
*/],
xAxis: { xAxis: {
type: 'time', type: 'time',
// boundaryGap: false,//line-false; bar-true; // boundaryGap: false,//line-false; bar-true;
@@ -994,12 +1033,25 @@
const legend = { const legend = {
name:item.name, name:item.name,
alias:item.alias, alias:item.alias,
showText:this.formatLegend(chartWidth,item.alias?item.alias:item.name) showText:this.formatLegend(chartWidth,item.name)
}; };
this.screenLegendList.push(legend); this.screenLegendList.push(legend);
this.isGreyScreen.push(false); this.isGreyScreen.push(false);
}); });
} }
if(legend){
this.legendList = [];
legend.forEach((item, i) => {
const legend = {
name:item.name,
alias:item.alias,
showText:this.formatLegend(chartWidth,item.name)
};
this.legendList.push(legend);
this.isGrey.push(false);
});
}
/*this.$nextTick(() => { /*this.$nextTick(() => {
this.$refs.screenLegendScrollbar.update(); this.$refs.screenLegendScrollbar.update();
let divHeight = this.$refs.screenLegendArea.offsetHeight; let divHeight = this.$refs.screenLegendArea.offsetHeight;
@@ -1155,13 +1207,13 @@
this.isGreyScreen=[]; this.isGreyScreen=[];
this.seriesItemScreen = this.seriesItem; this.seriesItemScreen = this.seriesItem;
/* /*
this.searchTime = []; this.searchTime = [];
this.searchTime[0] = this.oldSearchTime[0];//将列表的查询时间复制给全屏的查询时间 this.searchTime[0] = this.oldSearchTime[0];//将列表的查询时间复制给全屏的查询时间
this.searchTime[1] = this.oldSearchTime[1]; this.searchTime[1] = this.oldSearchTime[1];
this.seriesItemScreen = this.seriesItem; this.seriesItemScreen = this.seriesItem;
this.screenModal = true; this.screenModal = true;
*/ */
//this.dateChange(); //this.dateChange();
}, },
dateChange(time) { dateChange(time) {
@@ -1253,16 +1305,24 @@
const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"] const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
// 设置时间-数据格式对 // 设置时间-数据格式对
const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ] const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
// 判断是否有数据 // 判断是否有数据,&& tagsArr.length > 0
if (dpsArr.length > 0 && tagsArr.length > 0) { if (dpsArr.length > 0 ) {
tagsArr.forEach((tag, i) => { tagsArr.forEach((tag, i) => {
if (tag !== '__name__') { if (tag !== '__name__') {
host += `${tag}="${queryItem.metric[tag]}",`; host += `${tag}="${queryItem.metric[tag]}",`;
} }
}); });
if(host.endsWith(',')){host = host.substr(0,host.length-1);} if(host.endsWith(',')){host = host.substr(0,host.length-1);}
host +="}"; if(queryItem.metric.__name__){
host +="}";
}
if(!host || host===''){
host = this.data.elements[pos].expression;
}
let alias=this.dealLegendAlias(host,this.data.elements[pos].legend); let alias=this.dealLegendAlias(host,this.data.elements[pos].legend);
if(!alias || alias===''){
alias = this.data.elements[pos].expression;
}
legend.push({name:host,alias:alias}); legend.push({name:host,alias:alias});
// 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c // 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
seriesItem.theData.name = host; seriesItem.theData.name = host;
@@ -1322,7 +1382,7 @@
} }
chartBox.style.height = `${height-this.chartSpaceHeight}px`; chartBox.style.height = `${height-this.chartSpaceHeight}px`;
//const tableBox = document.getElementById('tableContainer'); //const tableBox = document.getElementById('tableContainer');
// const chartBox = document.getElementById('lineChartDiv'+this.chartIndex); // const chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
//tableBox.style.height = `${height-75}px`; //tableBox.style.height = `${height-75}px`;
}); });
this.clearData(); this.clearData();
@@ -1381,6 +1441,10 @@
}, },
handleClose(){}, handleClose(){},
/* /*
// 展示图表编辑区
showTool() {
this.toolbox = !this.toolbox;
},
handleClose(done) { handleClose(done) {
/* /*
this.$confirm('确认关闭？') this.$confirm('确认关闭？')
@@ -1391,10 +1455,6 @@
},*/ },*/
/* /*
// 展示图表编辑区
showTool() {
this.toolbox = !this.toolbox;
},
// 修改图表类型 // 修改图表类型
changeChart(type) { changeChart(type) {
this.chartType = type; this.chartType = type;
@@ -1404,16 +1464,6 @@
}, },
}); });
}, },
dateChange(time) {
this.filter.start_time = `${time[0]}:00`;
this.filter.end_time = `${time[1]}:59`;
if (this.showSetting) {
this.getQueryChart('list');
} else {
this.getQueryChart('dashboard');
}
},
// 查询数据,修改日期查询全屏数据 // 查询数据,修改日期查询全屏数据
getQueryChart(type) { getQueryChart(type) {
if (this.highchartModalStore) { if (this.highchartModalStore) {

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

@@ -117,7 +117,7 @@ const en = {
chartName:"Chart Name", chartName:"Chart Name",
type:"Type", type:"Type",
unit:"Unit", unit:"Unit",
url:"Url", url:"URL",
legend:'Legend', legend:'Legend',
legendTip:'Controls the name of the time series, using name or pattern. For example {{hostname}} will be replaced with label value for the label hostname.', legendTip:'Controls the name of the time series, using name or pattern. For example {{hostname}} will be replaced with label value for the label hostname.',
typeVal:{ typeVal:{
@@ -134,7 +134,7 @@ const en = {
label:"Stack Area" label:"Stack Area"
}, },
url:{ url:{
label:"Url" label:"URL"
} }
}, },
width:'Width', //"宽" width:'Width', //"宽"

103
nezha-fronted/src/components/common/calendar.vue → nezha-fronted/src/components/common/timePicker.vue
View File

@@ -3,7 +3,6 @@
color:#232f3e !important; color:#232f3e !important;
} }
.calendar{ .calendar{
} }
.nz-dashboard-dropdown-bg { .nz-dashboard-dropdown-bg {
background: $global-text-color-active; background: $global-text-color-active;
@@ -16,7 +15,7 @@
margin-top: 3px; margin-top: 3px;
text-align:left; text-align:left;
border-radius:4px; border-radius:4px;
width:140px; width:160px;
height:24px; height:24px;
border:solid 1px #d8dce1; border:solid 1px #d8dce1;
white-space: nowrap; white-space: nowrap;
@@ -30,17 +29,17 @@
line-height:22px; line-height:22px;
text-align:center; text-align:center;
} }
.el-popper{
}
</style> </style>
<template> <template>
<div class="calendar top-tools"> <div class="calendar top-tools" id="panel-calender">
<el-dropdown @command="timeChange" class="calendar-dropdown-title" trigger="click" v-scrollBar:el-dropdown> <el-dropdown @command="timeChange" class="calendar-dropdown-title" trigger="click" v-scrollBar:el-dropdown @visible-change="popoverClick">
<el-popover <el-popover
placement="bottom-end" placement="bottom-end"
width="80" min-width="120px"
trigger="hover"> :visible-arrow="false"
:disabled="isPopoverDisabled"
trigger="hover"
id="panel-calender-popover">
<el-row :gutter="10" class="calendar-popover"> <el-row :gutter="10" class="calendar-popover">
<el-col :span="24">{{searchTime[0]}}</el-col> <el-col :span="24">{{searchTime[0]}}</el-col>
</el-row> </el-row>
@@ -52,18 +51,24 @@
</el-row> </el-row>
<el-row :gutter="10" class="el-dropdown-link" slot="reference"> <el-row :gutter="10" class="el-dropdown-link" slot="reference">
<el-col :span="3" ><i class="el-icon-time"></i></el-col> <el-col :span="3" ><i class="el-icon-time"></i></el-col>
<el-col :span="16" class="panel-list-title" >{{showTime.text}}</el-col> <el-col :span="17" class="panel-list-title" >{{showTime.text}}</el-col>
<el-col :span="5" style="padding-left:0px !important;"><i class="el-icon-arrow-down el-icon--right"></i></el-col> <el-col :span="4" style="padding-left:0px !important;"><i class="el-icon-arrow-down el-icon--right"></i></el-col>
</el-row> </el-row>
</el-popover> </el-popover>
<el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown"> <el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown">
<el-dropdown-item>{{$t('dashboard.panel.customTimeRange')}}</el-dropdown-item> <!-- <el-dropdown-item >{{$t('dashboard.panel.customTimeRange')}}</el-dropdown-item> -->
<el-dropdown-item v-for="item in timeData" :key="item.id+1" <el-dropdown-item v-for="item in timeData" :key="item.id+1"
:class="showTime.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item"> :class="showTime.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">
{{item.text}} {{item.text}}
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
<el-date-picker prefix-icon=" " class="nz-dashboard-picker" size="mini" ref="calendar"
format="yyyy/MM/dd HH:mm" @change="dateChange" v-model="searchTime" type="datetimerange"
:picker-options="pickerOptions" :range-separator="$t('dashboard.panel.to')"
:start-placeholder="$t('dashboard.panel.startTime')"
:end-placeholder="$t('dashboard.panel.endTime')" align="right">
</el-date-picker>
</div> </div>
</template> </template>
@@ -71,77 +76,133 @@
import bus from '../../libs/bus'; import bus from '../../libs/bus';
export default { export default {
name: "calendar", name: "timePicker",
props: { props: {
}, },
data() { data() {
return { return {
isPopoverDisabled:false,
searchTime:[ searchTime:[
bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - 15),'yyyy-MM-dd hh:mm:ss'), bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - 5),'yyyy-MM-dd hh:mm:ss'),
bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss') bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss')
], ],
showTime: { showTime: {
id: 1, id: 1,
text: this.$t("dashboard.panel.lastFiveMin"), text: this.$t("dashboard.panel.lastFiveMin"),
}, },
oldTime:{
id: 1,
text: this.$t("dashboard.panel.lastFiveMin"),
},
timeData: [ timeData: [
{
id:0,
text:this.$t("dashboard.panel.customTimeRange"),
},
{ {
id:1, id:1,
text:this.$t("dashboard.panel.lastFiveMin"), text:this.$t("dashboard.panel.lastFiveMin"),
type:'minute',
value:5,
}, },
{ {
id:2, id:2,
text:this.$t("dashboard.panel.lastFifteenMin"), text:this.$t("dashboard.panel.lastFifteenMin"),
type:'minute',
value:15,
}, },
{ {
id:3, id:3,
text:this.$t("dashboard.panel.lastThirtyMin"), text:this.$t("dashboard.panel.lastThirtyMin"),
type:'minute',
value:30,
}, },
{ {
id:4, id:4,
text:this.$t("dashboard.panel.lastOneHour"), text:this.$t("dashboard.panel.lastOneHour"),
type:'hour',
value:1,
}, },
{ {
id:5, id:5,
text:this.$t("dashboard.panel.lastThreeHour"), text:this.$t("dashboard.panel.lastThreeHour"),
type:'hour',
value:3,
}, },
{ {
id:6, id:6,
text:this.$t("dashboard.panel.lastSixHour"), text:this.$t("dashboard.panel.lastSixHour"),
type:'hour',
value:6,
}, },
{ {
id:7, id:7,
text:this.$t("dashboard.panel.lastTwelveHour"), text:this.$t("dashboard.panel.lastTwelveHour"),
type:'hour',
value:12,
}, },
{ {
id:8, id:8,
text:this.$t("dashboard.panel.lastTwentyFourHour"), text:this.$t("dashboard.panel.lastTwentyFourHour"),
type:'hour',
value:24,
}, },
{ {
id:9, id:9,
text:this.$t("dashboard.panel.lastTwoDay"), text:this.$t("dashboard.panel.lastTwoDay"),
type:'date',
value:2,
}, },
{ {
id:10, id:10,
text:this.$t("dashboard.panel.lastSevenDay"), text:this.$t("dashboard.panel.lastSevenDay"),
type:'date',
value:7,
}, },
{ {
id:11, id:11,
text:this.$t("dashboard.panel.lastThirtyDay"), text:this.$t("dashboard.panel.lastThirtyDay"),
type:'date',
value:30,
} }
], ],
}; };
}, },
methods: { methods: {
timeChange(val) { timeChange(val) {
if (!val) {
//this.toAdd();
return false;
}
this.showTime = val; this.showTime = val;
//this.showPanel = val
//this.filter.panelId = this.showPanel.id; if (!val) {
//this.$emit('on-remove-chart-block', this.searchTime); return false;
}else {
let id = val.id;
if(id===0){
}else {
this.oldTime = val;
}
this.setSearchTime(val.type,val.value);
}
this.$emit('change', this.searchTime);
},
setSearchTime(type,val){
if(type==='minute'){
this.searchTime[0] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val),'yyyy-MM-dd hh:mm:ss'),
this.searchTime[1] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
}else if(type==='hour'){
this.searchTime[0] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val),'yyyy-MM-dd hh:mm:ss'),
this.searchTime[1] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
}else if(type==='date'){
this.searchTime[0] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val),'yyyy-MM-dd hh:mm:ss'),
this.searchTime[1] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
}
},
popoverClick(val){
if(val){
this.isPopoverDisabled = true;
}else{
this.isPopoverDisabled = false;
}
}, },
} }
}; };

2
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -184,7 +184,7 @@
</el-row> </el-row>
<el-form-item v-if="isUrl" :label='$t("dashboard.panel.chartForm.url")' prop="param.url" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }"> <el-form-item v-if="isUrl" :label='$t("dashboard.panel.chartForm.url")' prop="param.url" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }">
<el-input size="small" maxlength="64" show-word-limit v-model="chart.param.url"></el-input> <el-input size="small" type="textarea" maxlength="1024" show-word-limit v-model="chart.param.url"></el-input>
</el-form-item> </el-form-item>
<div v-if="!isUrl" class="right-box-sub-title">{{$t('dashboard.panel.chartForm.metric')}}</div> <div v-if="!isUrl" class="right-box-sub-title">{{$t('dashboard.panel.chartForm.metric')}}</div>

20
nezha-fronted/src/components/page/dashboard/metricPreview.vue
View File

@@ -34,7 +34,7 @@
<div class="box-content" > <div class="box-content" >
<el-row :gutter="20" class="row-width" style="height: calc(100% - 65px);"> <el-row :gutter="20" class="row-width" style="height: calc(100% - 65px);">
<el-col :span="10" > <el-col :span="10" >
<metric-set :panelData="panelData" ref="metricSet" @on-view-chart="getChartParam" @reloadPanel="getPanelData"></metric-set> <metric-set :panelData="panelData" ref="metricSet" @on-view-chart="getChartParam" @reloadPanel="getPanelData" ></metric-set>
</el-col> </el-col>
<el-col :span="0.5" ><div>&nbsp;</div></el-col> <el-col :span="0.5" ><div>&nbsp;</div></el-col>
<el-col :span="13" class="chart-preview-area" > <el-col :span="13" class="chart-preview-area" >
@@ -327,9 +327,11 @@ export default {
const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"] const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
// 设置时间-数据格式对 // 设置时间-数据格式对
const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ] const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
// 判断是否有数据 // 判断是否有数据, && tagsArr.length > 0
if (dpsArr.length > 0 && tagsArr.length > 0) { if (dpsArr.length > 0) {
host +="{"; if(queryItem.metric.__name__){
host +="{";
}
tagsArr.forEach((tag, i) => { tagsArr.forEach((tag, i) => {
if (tag !== '__name__') { if (tag !== '__name__') {
host += `${tag}="${queryItem.metric[tag]}",`; host += `${tag}="${queryItem.metric[tag]}",`;
@@ -343,8 +345,14 @@ export default {
} }
}); });
if(host.endsWith(',')){host = host.substr(0,host.length-1);} if(host.endsWith(',')){host = host.substr(0,host.length-1);}
host +="}"; if(queryItem.metric.__name__){
legend.push({name:host,alias:null}); host +="}";
}
if(!host || host===''){
host = params.metric;
}
let alias = params.metric;
legend.push({name:host,alias:alias});
// 图表中每条线的名字,去掉最后的逗号与空格 // 图表中每条线的名字,去掉最后的逗号与空格
seriesItem.theData.name = host; seriesItem.theData.name = host;

18
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -48,7 +48,8 @@
:end-placeholder="$t('dashboard.panel.endTime')" align="right"> :end-placeholder="$t('dashboard.panel.endTime')" align="right">
</el-date-picker> </el-date-picker>
<!-- <!--
<calendar ref="calendarPanel" class="nz-dashboard-picker"></calendar>
<time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>
--> -->
</div> </div>
</div> </div>
@@ -103,7 +104,7 @@
import ChartBox from "./chartBox"; import ChartBox from "./chartBox";
import ChartList from '../../charts/chart-list'; import ChartList from '../../charts/chart-list';
import bus from '../../../libs/bus'; import bus from '../../../libs/bus';
//import calendar from '../../common/calendar' //import timePicker from '../../common/timePicker'
export default { export default {
name: "panel", name: "panel",
@@ -195,7 +196,10 @@
} }
}] }]
}, },
searchTime: [new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - 1), new Date(bus.computeTimezone(new Date().getTime()))], searchTime: [
new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - 5),
new Date(bus.computeTimezone(new Date().getTime()))
],
intervalTimer: null, intervalTimer: null,
intervalList: [{ intervalList: [{
value: 0, value: 0,
@@ -274,7 +278,7 @@
components: { components: {
'chart-box': ChartBox, 'chart-box': ChartBox,
'chart-list': ChartList, 'chart-list': ChartList,
//'calendar':calendar //'time-picker':timePicker
}, },
methods: { methods: {
//刷新 //刷新
@@ -411,7 +415,7 @@
if (params.start_time === '' || params.end_time === '') { if (params.start_time === '' || params.end_time === '') {
let now = new Date(); let now = new Date();
let endTimeTmp = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss'); let endTimeTmp = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
let startTimeTmp = bus.timeFormate(now.setHours(now.getHours() - 1), 'yyyy-MM-dd hh:mm:ss'); let startTimeTmp = bus.timeFormate(now.setMinutes(now.getMinutes() - 5), 'yyyy-MM-dd hh:mm:ss');
params.start_time = startTimeTmp; params.start_time = startTimeTmp;
params.end_time = endTimeTmp; params.end_time = endTimeTmp;
} }
@@ -423,8 +427,8 @@
/*图表相关操作--end*/ /*图表相关操作--end*/
/*时间条件查询--start*/ /*时间条件查询--start*/
// 选择日期变化 // 选择日期变化
dateChange() { dateChange(val) {
//this.$refs.searchInput.select(); this.searchTime = [...val];
this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss'); this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss'); this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
this.filter.panelId = this.showPanel.id; this.filter.panelId = this.showPanel.id;