diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue index 3d2447d39..1d9098703 100644 --- a/nezha-fronted/src/components/charts/chart-list.vue +++ b/nezha-fronted/src/components/charts/chart-list.vue @@ -298,8 +298,9 @@ export default { let t_date = new Date(dpsItem[0] * 1000); let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss'); tableData.push({//表格数据 - label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label - metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列 + // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label + // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列 + element:{element:host,alias:alias}, time: timeTmp,//采集时间 value: dpsItem[1],//数值 }); @@ -378,6 +379,7 @@ export default { }).catch((error) => { if (error) { this.$message.error(error.toString()); + console.error(error) } }); }); @@ -395,9 +397,12 @@ export default { let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){ let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2) let reg=new RegExp(label+'=".+?"') - let find=legend.match(reg)[0]; - let value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1); - return value; + let value=null; + if(reg.test(legend)){ + let find=legend.match(reg)[0]; + value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1); + } + return value?value:label; }) return labelValue }else{ diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue index 1047a4684..e6f96e372 100644 --- a/nezha-fronted/src/components/charts/chart-table.vue +++ b/nezha-fronted/src/components/charts/chart-table.vue @@ -26,9 +26,14 @@
- - - + + + + + +
@@ -43,9 +48,14 @@ - - - + + + + + + @@ -116,17 +126,24 @@ export default { firstShow: false, // 默认不显示操作按钮, divFirstShow:false, //tableLoading: false, - columns: [{ - title: 'metric', - key: 'metric', - width: 200, - sortable: true, - }, { - title: 'Label', //tag - key: 'name', - minWidth: 200, - sortable: true, - }, { + columns: [ + // { + // title: 'metric', + // key: 'metric', + // width: 200, + // sortable: true, + // }, { + // title: 'Label', //tag + // key: 'name', + // minWidth: 200, + // sortable: true, + // } + { + title:'Element', + key:'element', + sortable: true + } + , { title: '采集时间', key: 'time', width: 160, @@ -300,8 +317,9 @@ export default { this.seriesItemScreen = []; for(let i=0;i<8;i++){ this.seriesItemScreen.push({//表格数据 - label: '',//label - metric: '',//metric列 + // label: '',//label + // metric: '',//metric列 + element:'', time: '',//采集时间 value: '',//数值 }); diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue index 530569634..5f0bd6ede 100644 --- a/nezha-fronted/src/components/charts/line-chart-block.vue +++ b/nezha-fronted/src/components/charts/line-chart-block.vue @@ -244,7 +244,7 @@ if (this.data.type === 'line' || this.data.type === 'bar' || this.data.type === 4) { return true; } - return false; + return false; }, */ }, @@ -254,23 +254,114 @@ this.divFirstShow = showDiv; }, clickLegend(legendName,index){ - if (this.echartStore) { - this.echartStore.dispatchAction({ - type: 'legendToggleSelect', - name: legendName - }); - let isGreyTmp = this.isGrey[index]; - this.$set(this.isGrey, index, !isGreyTmp); + // if (this.echartStore) { + // this.echartStore.dispatchAction({ + // type: 'legendToggleSelect', + // name: legendName + // }); + // let isGreyTmp = this.isGrey[index]; + // this.$set(this.isGrey, index, !isGreyTmp); + // } + + //点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部 + let curIsGrey=this.isGrey[index]; + if(this.echartStore){ + this.legendList.forEach((item,i)=>{ + let isGrey = this.isGrey[i]; + if(index != i){ + if(!curIsGrey && !isGrey){ + this.echartStore.dispatchAction({ + type: 'legendUnSelect', + name: item.name + }); + }else if(!curIsGrey && isGrey){ + this.echartStore.dispatchAction({ + type: 'legendSelect', + name: item.name + }); + }else{ + this.echartStore.dispatchAction({ + type: 'legendUnSelect', + name: item.name + }); + } + }else { + this.echartStore.dispatchAction({ + type: 'legendSelect', + name: item.name + }); + } + }) + this.isGrey.forEach((item,i)=>{ + if(index != i){ + if(!curIsGrey && !item){ + this.$set(this.isGrey, i, true); + }else if(!curIsGrey && item){ + this.$set(this.isGrey, i, false); + }else{ + this.$set(this.isGrey, i, true); + } + }else{ + if(item === true){ + this.$set(this.isGrey, i, false); + } + } + }) } }, clickScreenLegend(legendName,index){ - if (this.echartModalStore) { - this.echartModalStore.dispatchAction({ - type: 'legendToggleSelect', - name: legendName - }); - let isGreyTmp = this.isGreyScreen[index]; - this.$set(this.isGreyScreen, index, !isGreyTmp); + // if (this.echartModalStore) { + // this.echartModalStore.dispatchAction({ + // type: 'legendToggleSelect', + // name: legendName + // }); + // let isGreyTmp = this.isGreyScreen[index]; + // this.$set(this.isGreyScreen, index, !isGreyTmp); + // } + //点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部 + let curIsGrey=this.isGreyScreen[index]; + if(this.echartModalStore){ + this.screenLegendList.forEach((item,i)=>{ + let isGrey = this.isGreyScreen[i]; + if(index != i){ + if(!curIsGrey && !isGrey){ + this.echartModalStore.dispatchAction({ + type: 'legendUnSelect', + name: item.name + }); + }else if(!curIsGrey && isGrey){ + this.echartModalStore.dispatchAction({ + type: 'legendSelect', + name: item.name + }); + }else{ + this.echartModalStore.dispatchAction({ + type: 'legendUnSelect', + name: item.name + }); + } + }else { + this.echartModalStore.dispatchAction({ + type: 'legendSelect', + name: item.name + }); + } + }) + this.isGreyScreen.forEach((item,i)=>{ + if(index != i){ + if(!curIsGrey && !item){ + this.$set(this.isGreyScreen, i, true); + }else if(!curIsGrey && item){ + this.$set(this.isGreyScreen, i, false); + }else{ + this.$set(this.isGreyScreen, i, true); + } + }else{ + if(item === true){ + this.$set(this.isGreyScreen, i, false); + } + } + }) } }, clearData(){ @@ -406,6 +497,9 @@ //display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; let str = `
`; params.forEach((item, i) => { + let tip=legend.find((element)=>{ + return element.name == item.seriesName; + }) if(i===0){ let t_date = new Date(item.data[0]); str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " " @@ -446,7 +540,7 @@ */ str += `
`; - str +=`${item.seriesName}: `; + str +=`${tip.alias?tip.alias:tip.name}: `; str +=`
`; str += `
`; str +=val; diff --git a/nezha-fronted/src/components/common/js/common.js b/nezha-fronted/src/components/common/js/common.js new file mode 100644 index 000000000..4f5179441 --- /dev/null +++ b/nezha-fronted/src/components/common/js/common.js @@ -0,0 +1,10 @@ +export function resetZIndex(e){ + let popId=e.target.getAttribute('aria-describedby');//这里获取的属性 在包含slot='reference' + if(!popId){ + popId=e.target.parentNode.getAttribute('aria-describedby'); + } + let pop=document.getElementById(popId); + setTimeout(function(){ + pop.style.zIndex=999999; + },100) +} diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js index c65fdd1ca..f721c87ea 100644 --- a/nezha-fronted/src/components/common/language/en.js +++ b/nezha-fronted/src/components/common/language/en.js @@ -85,6 +85,8 @@ const en = { chartId:"ID", chartName:"Chart Name", type:"Type", + 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.', typeVal:{ line:{ label:'Line Chart' //"曲线图" @@ -104,6 +106,7 @@ const en = { chartTableColumn:{ metric:'Metric', //'指标' label:'Label', //'标签' + element:'Element', time:'Time', //'时间' value:'Value', //'值' }, diff --git a/nezha-fronted/src/components/page/asset/accountConfig.vue b/nezha-fronted/src/components/page/asset/accountConfig.vue index a45778d5d..0884b4d6a 100644 --- a/nezha-fronted/src/components/page/asset/accountConfig.vue +++ b/nezha-fronted/src/components/page/asset/accountConfig.vue @@ -90,6 +90,7 @@ export default { clearPrivateKey:function(){ this.account.privateKey=null; }, + handleChange(file,fileList) { if (fileList.length > 0) { this.uploadFileList = [fileList[fileList.length - 1]] diff --git a/nezha-fronted/src/components/page/asset/endpointStatusPop.vue b/nezha-fronted/src/components/page/asset/endpointStatusPop.vue index dc59877cf..21fba96b5 100644 --- a/nezha-fronted/src/components/page/asset/endpointStatusPop.vue +++ b/nezha-fronted/src/components/page/asset/endpointStatusPop.vue @@ -38,7 +38,7 @@
-
+
@@ -59,6 +59,7 @@