diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue index 2a4934481..5d2df31a5 100644 --- a/nezha-fronted/src/components/page/project/project.vue +++ b/nezha-fronted/src/components/page/project/project.vue @@ -158,8 +158,8 @@ -
-
+
+
-
+
    -
  • metric : {{scope.row.metricTip.metric}}
    • -
  • type : {{scope.row.metricTip.type}}
    • -
  • help : {{scope.row.metricTip.help}}
    • -
  • unit : {{scope.row.metricTip.unit}}
    • +
  • metric : {{scope.row.metricTip.metric?scope.row.metricTip.metric:'--'}}
    • +
  • type : {{scope.row.metricTip.type?scope.row.metricTip.type:'unknown'}}
    • +
  • help : {{scope.row.metricTip.help?scope.row.metricTip.help:'--'}}
    • +
  • unit : {{scope.row.metricTip.unit?scope.row.metricTip.unit:'--'}}
@@ -249,10 +251,11 @@ ref="elementset" > -
@@ -272,7 +275,13 @@
-
+
+
+
+ {{item.name}} +
+
+
@@ -422,7 +431,7 @@ formatTime:'',//查询endpoint的时间， selectedEndpoints:[],//选中的metric{label='value'} chartDatas:[],//从query_range查询到的数据 - lenged:[],//echart lenged + legend:[],//echart legend graphChart:null,//图标对象 graphShow:false, searchTime:[], @@ -509,6 +518,7 @@ }] }, chartOptions:{ + color: this.bgColorList, title: { text: "" }, @@ -516,9 +526,9 @@ trigger: 'axis', }, legend: { + show:false, type:'scroll', height:80, - show:true, icon:"roundRect", itemHeight:5, itemWidth:15, @@ -570,7 +580,7 @@ //height:"50%", //top: '13%', containLabel: false, - bottom:156 + bottom:70,//156 }, dataZoom: [{ type: 'slider', @@ -579,7 +589,7 @@ start: 0, end: 100, height:25, - bottom:96 + bottom:10//96 }], xAxis: { @@ -636,10 +646,64 @@ useUTC: false,//使用本地时间 series: [] }, + legendList:[], + screenLegendList:[], + isGrey:[], + isGreyScreen:[], + bgColorList: ['#7bbfea', '#b3424a', '#f05b72', '#596032', '#bd6758', + '#cd9a5b', '#918597', '#70a19f', '#005344', '#FF00FF', + '#f7acbc', '#5f5d46', '#66ffff', '#ccFF66', '#f47920', + '#769149', '#1d953f', '#abc88b', '#7f7522', '#9b95c9', + '#f3715c', '#ea66a6', '#d1c7b7', '#9d9087', '#77787b', + '#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc', + '#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e', + ], panelData: [], //chart-box的panel下拉框数据 } }, methods: { + clickLegend(legendName,index){ + if (this.graphChart) { + this.graphChart.dispatchAction({ + type: 'legendToggleSelect', + name: legendName + }); + let isGreyTmp = this.isGrey[index]; + this.$set(this.isGrey, index, !isGreyTmp); + } + }, + formatLegend(name,chartWidth){ + if(!name){ + return ''; + } + if(!chartWidth){ + this.$refs.viewGraphChart.clientWidth; + } + //计算宽度 + var span = document.createElement("span"); + var result = {}; + result.width = span.offsetWidth; + result.height = span.offsetHeight; + span.style.visibility = "hidden"; + span.style.fontSize = 14; + span.style.fontFamily = "Arial"; + span.style.display = "inline-block"; + document.body.appendChild(span); + if(typeof span.textContent != "undefined"){ + span.textContent = name; + }else{ + span.innerText = name; + } + var txtWidth = parseFloat(window.getComputedStyle(span).width) - result.width; + document.body.removeChild(span); + + if(txtWidth < chartWidth){ + return name; + }else { + var charNum = `${(chartWidth-100)/(txtWidth/name.length)}`; + return name.slice(0,charNum)+'...'; + } + }, saveChart() { //新增chart this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle")); this.$refs.addChartModal.show(true); @@ -947,12 +1011,14 @@ for (let result of results){ // {"metric":{"instance":"192.168.40.126:9100","__name__":"scrape_duration_seconds","module":"node_exporter","project":"kafka","asset":"192.168.40.126","job":"ed_1","dc":"dc5"},"value":[1580782176.522,"0.000560761"]} let temp=result.metric.__name__; - let metricTip=null; + let metricTip={}; let queryInfos=(this.elementMetricDatas.filter((item)=>{ return item.metric===temp; })); if(queryInfos&&queryInfos.length>0){ metricTip=queryInfos[0]; + }else{ + metricTip.metric=temp; } delete result.metric.__name__; temp+="{"; @@ -1029,7 +1095,7 @@ let current=year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second; return current; }, - selectRow:function(selection, row){//selection 选中的row的数组 row 选中的当前行 + selectChange:function(selection){//selection 选中的row的数组 this.selectedEndpoints=selection; }, selectable:function(row,index){ @@ -1039,13 +1105,19 @@ return true; } }, + clearSelectedMetrics:function(){ + this.$refs.metricInfoTab.clearSelection(); + }, viewGraph:function(){ + if(this.selectedEndpoints.length<1){ + return ; + } if(this.graphChart){ this.graphChart.clear(); } this.chartDatas=[]; - this.lenged=[]; + this.legend=[]; this.queryChartDate(); this.graphShow=true; @@ -1093,7 +1165,13 @@ }) chartData.name=chartData.name.charAt(chartData.name.length-1) == ","?chartData.name.substr(0,chartData.name.length-1):chartData.name; chartData.name+="}"; - this.lenged.push(chartData.name); + let legend={ + name:chartData.name, + showText:this.formatLegend(chartData.name) + } + this.legend.push(legend); + this.screenLegendList.push(legend); + this.isGreyScreen.push(false); chartData.data=queryData.values.map((dpsItem, dpsIndex) => { return [dpsItem[0] * 1000, Number(dpsItem[1])]; }); @@ -1107,15 +1185,24 @@ this.graphChart.clear(); } this.queryChartDate(); - this.chartOptions.legend.data=this.lenged; + // this.chartOptions.legend.data=this.legend; this.chartOptions.series=this.chartDatas; this.graphChart.setOption(this.chartOptions);//创建图表 }, initDialog:function(){ this.graphChart = echarts.init(document.getElementById('viewGraphChart')); - this.chartOptions.legend.data=this.lenged; + // this.chartOptions.legend.data=this.legend; this.chartOptions.series=this.chartDatas; this.graphChart.setOption(this.chartOptions);//创建图表 + // let legendHeight = this.$refs.legendArea.offsetHeight; + // let dialogDom=document.getElementById('viewGraphDialog'); + // let dialogWidth=dialogDom.offsetWidth + // let dialogHeight=dialogDom.offsetHeight + // console.log(legendHeight+":"+dialogWidth+":"+dialogHeight) + // let chartWidth=dialogWidth-130; + // let chartHeight=dialogHeight-58-legendHeight-60; + // console.log(chartWidth + ":"+chartHeight) + // this.graphChart.resize({height:300,width:chartWidth}) }, cellClass(row){ //给复选框那一列添加 类名为 ‘disabledCheck’ if (row.columnIndex === 0) { @@ -1275,6 +1362,7 @@ this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path) ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)) : this.endpointTableTitle; + }, computed: { currentProjectChange() { @@ -1554,7 +1642,8 @@ display: none !important; } .el-table .disabledCheck .cell::before{ - content: ''; + /*content: '\e627';*/ + /*font-family: 'nz-icon';*/ text-align: center; line-height: 37px; } @@ -1590,4 +1679,27 @@ line-height: 26px; font-weight: bold; } + .table-header-inner{ + position: absolute; + z-index: 1; + top: 60px; + left: 25px; + } + .control-icon-unchecked{ + color: #e5e5e5; + } + .control-icon-checked{ + color:#666; + } + .legend-container{ + width: calc(100% - 335px); + max-height:80px; + min-height:40px; + overflow-y: auto; + font-size:12px; + text-align:left; + margin:0 auto; + line-height: 18px; + font-family: Roboto,Helvetica Neue,Arial,sans-serif; + }