From 60895d33e11e8b9408a8cfd3e754f60de183782d Mon Sep 17 00:00:00 2001 From: wangwenrui Date: Fri, 19 Feb 2021 17:59:10 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E8=A1=A5=E5=85=85preview=E5=AE=9E?= =?UTF-8?q?=E7=8E=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/charts/chart-table.vue | 6 +- .../src/components/charts/chartPreview.vue | 106 ++++++++++++++++-- .../src/components/common/js/tools.js | 1 - .../components/page/dashboard/chartBox.vue | 5 +- 4 files changed, 103 insertions(+), 15 deletions(-) diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue index fa5363f00..24b0ceb1a 100644 --- a/nezha-fronted/src/components/charts/chart-table.vue +++ b/nezha-fronted/src/components/charts/chart-table.vue @@ -399,13 +399,13 @@ if(chartItem.param && chartItem.param.valueMapping && chartItem.param.valueMapping.type){ let type=chartItem.param.valueMapping.type; let mappings=chartItem.param.valueMapping.mapping?chartItem.param.valueMapping.mapping:[]; - let value = item.value; + let value = Number(item.value); let mapping; if(type == 'value'){ - mapping=mappings.find(t=>{return t.value == value}) + mapping=mappings.find(t=>{return Number(t.value) == value}) }else{ - mapping=mappings.find(t=>{return t.from <= value&& t.to >= value}); + mapping=mappings.find(t=>{return Number(t.from) <= value&& Number(t.to) >= value}); } this.mapping=mapping; item.mapping=mapping; diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue index be1d4ad56..bee77b243 100644 --- a/nezha-fronted/src/components/charts/chartPreview.vue +++ b/nezha-fronted/src/components/charts/chartPreview.vue @@ -403,9 +403,9 @@ const axiosArr = chartItem.elements.map((ele) => { const filterItem = ele; let query = encodeURIComponent(filterItem.expression); - if(chartItem.type === 'table'&&chartItem.param&&chartItem.param.last == 1){ - return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step); - } + // if(chartItem.type === 'table'&&chartItem.param&&chartItem.param.last == 1){ + // return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step); + // } return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step); }); // 一个图表的所有element单独获取数据 @@ -528,13 +528,13 @@ // 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],//数值 + // time: timeTmp,//采集时间 + // value: dpsItem[1],//数值 + data:[dpsItem[0] * 1000, dpsItem[1]] }); return [dpsItem[0] * 1000, dpsItem[1]]; }); if(chartItem.type === 'pie'){ - console.log(chartItem.param.statistics,seriesItem.theData.data) pieSeries.data.push({value:bus.getSingleStatRlt(chartItem.param.statistics,seriesItem.theData.data),name:host + resInnerPos}) }else{ series.push(seriesItem.theData); @@ -1182,19 +1182,20 @@ }, // 设置数据 setTableData(seriesItem) { - console.log('set table data',this.chart) this.unit = chartDataFormat.getUnit(this.chart.unit); + let statistics = this.chart.param.statistics; + seriesItem = this.getStatisticsResult(statistics,seriesItem) seriesItem=seriesItem.map(item=>{ if(this.chart.param.valueMapping && this.chart.param.valueMapping.type){ let type=this.chart.param.valueMapping.type; let mappings=this.chart.param.valueMapping.mapping?this.chart.param.valueMapping.mapping:[]; - let value = item.value; + let value = Number(item.value); let mapping; if(type == 'value'){ - mapping=mappings.find(t=>{return t.value == value}) + mapping=mappings.find(t=>{return Number(t.value) == value}) }else{ - mapping=mappings.find(t=>{return t.from <= value&& t.to >= value}); + mapping=mappings.find(t=>{return Number(t.from) <= value&& Number(t.to) >= value}); } this.mapping=mapping; item.mapping=mapping; @@ -1210,6 +1211,91 @@ this.tableShow = true; this.$refs.loadingPreview.endLoading(); }, + getStatisticsResult(statistics,seriesItem){ + let copy=JSON.parse(JSON.stringify(seriesItem)); + let last,result; + last=copy.sort((x,y)=>{return parseFloat(y[0]) - parseFloat(x[0])})[0]; + switch (statistics) { + case 'null': + return copy.map(item=>{ + return { + element:item.element, + time:bus.timeFormate(new Date(item.data[0]), 'yyyy-MM-dd hh:mm:ss'), + value:item.data[1] + } + }) + case 'min': + result= copy.sort((x,y)=>{return parseFloat(x.data[1]) - parseFloat(y.data[1])})[0]; + result = [{ + element:result.element, + time:bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'), + value:result.data[1], + }] + break; + case 'max': + result= copy.sort((x,y)=>{return parseFloat(y.data[1]) - parseFloat(x.data[1])})[0]; + result = [{ + element:result.element, + time:bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'), + value:result.data[1], + }] + break; + case 'average': + copy = copy.map(t=>parseFloat(t.data[1])); + let sum = eval(copy.join('+')); + let avg = sum / copy.length; + result=[{ + element:last.element, + time:bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'), + value:avg + }] + break; + case 'total': + copy = copy.map(t=>parseFloat(t.data[1])); + let total = eval(copy.join('+')); + result=[{ + element:last.element, + time:bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'), + value:total + }] + break; + case 'first': + result=copy.sort((x,y)=>{return parseFloat(y.data[0]) - parseFloat(x.data[0])})[copy.length-1] + result = [{ + element:result.element, + time:bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'), + value:result.data[1], + }] + break; + case 'last': + result=last; + result = [{ + element:result.element, + time:bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'), + value:result.data[1], + }] + break; + case 'range': + let sort = copy.sort((x,y)=>{return parseFloat(y.data[1]) - parseFloat(x.data[1])}) + let max = sort[0] + let min = sort[sort.length-1] + result=[{ + element:last.element, + time:bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'), + value:max.data[1] - min.data[1] + }] + break; + case 'different': + let first = copy.sort((x,y)=>{return parseFloat(y.data[0]) - parseFloat(x.data[0])})[copy.length-1]; + result = [{ + element:last.element, + time:bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'), + value:last.data[1] - first.data[1] + }] + break; + } + return result; + }, clearChart(){ if(this.echartModalStore){ this.echartModalStore.clear(); diff --git a/nezha-fronted/src/components/common/js/tools.js b/nezha-fronted/src/components/common/js/tools.js index e9feb6cb4..4cc4504c5 100644 --- a/nezha-fronted/src/components/common/js/tools.js +++ b/nezha-fronted/src/components/common/js/tools.js @@ -373,7 +373,6 @@ export const chartResizeTool = { let mouseY = e.clientY; //调整resize-box的宽高 box.style.width = `${originalWidth+(mouseX-mouseOriginalX)-chartBlankWidth}px`; - console.log(originalHeight,mouseY,mouseOriginalY,(mouseY-mouseOriginalY),chartBlankHeight,(originalHeight+(mouseY-mouseOriginalY)-chartBlankHeight)) box.style.height = `${originalHeight+(mouseY-mouseOriginalY)-chartBlankHeight}px`; //监听宽高的变化，变化量每达到step的50%时改变resize-shadow的尺寸并重绘resize-box内容 let remainderWidth = (box.offsetWidth+chartBlankWidth-shadowNewWidth)%stepWidth; //宽的余数 diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue index 3a7ac4dc7..d8be939ed 100644 --- a/nezha-fronted/src/components/page/dashboard/chartBox.vue +++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue @@ -1247,6 +1247,9 @@ this.editChart.param.url = data.param.url; this.setIsUrl(); //this.elements = [1]; + }else if(this.editChart.type==='table'){ + this.statisticsList=JSON.parse(JSON.stringify(this.$CONSTANTS.statisticsList)) + this.statisticsList.push({value: "null", label: i18n.t("dashboard.panel.chartForm.statisticsVal.null")},); }else if(this.editChart.type==='alertList'){ this.editChart.param = data.param; this.setIsAlertList(); @@ -1380,7 +1383,7 @@ } } this.showPicker=[{bac:false,text:false}]; - this.statisticsList = JSON.parse(JSON.stringify(this.statisticsList)); + this.statisticsList = JSON.parse(JSON.stringify(this.$CONSTANTS.statisticsList)); this.statisticsList.push({value: "null", label: i18n.t("dashboard.panel.chartForm.statisticsVal.null")},); }