From 70b25a86b1c8f49b09c33fb2f8ba25523009d7bf Mon Sep 17 00:00:00 2001 From: zhangyu Date: Wed, 22 Dec 2021 20:06:59 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=20=E6=B7=BB=E5=8A=A0=20=E5=85=A8?= =?UTF-8?q?=E5=B1=8F=E5=90=8C=E6=AF=94(=E6=9A=82=E6=9C=AA=E8=AE=A1?= =?UTF-8?q?=E7=AE=97=E5=B7=AE=E5=80=BC)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nezha-fronted/src/components/chart/chart.vue | 6 +- .../chart/chart/chartTimeSeries.vue | 18 ++++- .../src/components/chart/chartMixin.js | 25 +++++-- .../src/components/chart/panelChart.vue | 66 +++++++++++++++---- 4 files changed, 96 insertions(+), 19 deletions(-) diff --git a/nezha-fronted/src/components/chart/chart.vue b/nezha-fronted/src/components/chart/chart.vue index 709875da0..995e2012a 100644 --- a/nezha-fronted/src/components/chart/chart.vue +++ b/nezha-fronted/src/components/chart/chart.vue @@ -10,6 +10,8 @@ :chart-info="chartInfo" :chart-option="chartOption" :is-fullscreen="isFullscreen" + :minusTime="minusTime" + :multipleTime="multipleTime" @chartIsNoData="chartIsNoData" > { + console.log(item) + const seriesName = item.seriesName.split('-')[0] if (i === 0) { const value = bus.computeTimezone(item.data[0] * 1000) const tData = new Date(value) @@ -153,6 +160,15 @@ export default { str += bus.timeFormate(tData) str += '' } + if (flag && item.seriesName.indexOf('Previous') !== -1) { + flag = false + const value = bus.computeTimezone(item.data[0] * 1000 - self.minusTime) + const tData = new Date(value) + str += '
' + str += '
' + str += bus.timeFormate(tData) + str += '
' + } const color = self.colorList[item.seriesIndex] const previousItem = params.find((series) => ('Previous ' + item.seriesName) === series.seriesName) let paramsDot = bus.countDecimals(item.data[1]) @@ -184,7 +200,7 @@ export default {
- ${item.seriesName} + ${seriesName}
${chartDataFormat.getUnit(self.chartInfo.unit ? self.chartInfo.unit : 2).compute(val, null, -1, paramsDot)} diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js index ef4b150c2..0b451367e 100644 --- a/nezha-fronted/src/components/chart/chartMixin.js +++ b/nezha-fronted/src/components/chart/chartMixin.js @@ -1,6 +1,7 @@ import lodash from 'lodash' import { getMetricTypeValue } from '@/components/common/js/tools' import { getChart, getMousePoint, setChart } from '@/components/common/js/common' +import { randomcolor } from '@/components/common/js/radomcolor/randomcolor' export default { data () { return { @@ -40,10 +41,10 @@ export default { let colorIndex = 0 originalDatas.forEach((originalData, expressionIndex) => { originalData.forEach((data, dataIndex) => { - if (colorIndex >= 20 && !this.showAllData) { - colorIndex++ - return - } + // if (colorIndex >= 20 && !this.showAllData) { + // colorIndex++ + // return + // } this.isNoData = false const s = lodash.cloneDeep(seriesTemplate) if (s) { @@ -77,8 +78,15 @@ export default { return series }, // 单个legend - handleLegend (chartInfo, data, expressionIndex, dataIndex, colorIndex) { + handleLegend (chartInfo, data, expressionIndexs, dataIndex, colorIndex) { + let expressionIndex = expressionIndexs let legend = '' // up + let alias = '' + if (expressionIndex >= chartInfo.elements.length) { + expressionIndex -= chartInfo.elements.length + legend += 'Previous ' + alias += 'Previous ' + } if (data.metric.__name__) { legend += `${data.metric.__name__}{` } @@ -98,7 +106,7 @@ export default { legend = chartInfo.elements[expressionIndex].expression } // 处理legend别名 - let alias = chartInfo.datasource === 'system' ? '' : this.handleLegendAlias(legend, chartInfo.elements[expressionIndex].legend) + alias = chartInfo.datasource === 'system' ? '' : (alias + this.handleLegendAlias(legend, chartInfo.elements[expressionIndex].legend)) if (!alias) { alias = legend } @@ -113,6 +121,11 @@ export default { return { type, value: getMetricTypeValue(data.values, type) } }) } + if (colorIndex > 20) { + const colorRandom = randomcolor() + this.colorList.push(colorRandom) + this.chartOption.color.push(colorRandom) + } this.legends.push({ name, alias, statistics, color: this.colorList[colorIndex] }) return { name, diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue index f5348bf89..7b28e59ef 100644 --- a/nezha-fronted/src/components/chart/panelChart.vue +++ b/nezha-fronted/src/components/chart/panelChart.vue @@ -35,6 +35,8 @@ :from="from" :isError="isError" :loading="loading" + :minusTime="minusTime" + :multipleTime="multipleTime" :is-fullscreen="isFullscreen" v-if="!isGroup(chartInfo.type) || !chartInfo.param.collapse" > @@ -74,7 +76,8 @@ export default { chartData: [], loading: true, isError: false, - MultipleTime: false + multipleTime: false, + minusTime: '' } }, computed: { @@ -87,8 +90,8 @@ export default { }, methods: { isGroup, - dateChange (filter, MultipleTime) { - console.log(filter, MultipleTime) + dateChange (filter, multipleTime) { + console.log(filter, multipleTime) this.loading = true // TODO assetInfo、endpointInfo、echarts等进行不同的处理 let startTime = filter.start_time @@ -97,6 +100,14 @@ export default { startTime = this.$stringTimeParseToUnix(startTime) endTime = this.$stringTimeParseToUnix(endTime) const elements = this.chartInfo.elements || [] + if (multipleTime.length) { + const minusTime = (new Date(filter.start_time).getTime() - new Date(multipleTime[0]).getTime()) + this.minusTime = minusTime + this.multipleTime = true + } else { + this.minusTime = '' + this.multipleTime = false + } this.chartInfo.loaded && this.query(elements, startTime, endTime, step) }, // 参数 isRefresh 标识是否是刷新操作 @@ -138,7 +149,7 @@ export default { } else if (this.chartInfo.datasource === 'logs') { urlPre += '/logs/loki' } - const requests = elements.map((element) => { + let requests = elements.map((element) => { if (this.from === fromRoute.chartTemp) { return chartTempData } @@ -152,15 +163,48 @@ export default { query += `&query=${element.expression}` return this.$get(query) }) - + if (this.multipleTime) { + console.log(123) + const multipleRequests = elements.map((element) => { + if (this.from === fromRoute.chartTemp) { + return chartTempData + } + let query = `${urlPre}/api/v1/query_range?start=${startTime - this.minusTime / 1000}&end=${endTime - this.minusTime / 1000}&step=${step}` + if (isTimeSeries(this.chartInfo.type)) { + query += `&nullType=${this.chartInfo.param.nullType || 'null'}` + } + // if (isChartPie(this.chartInfo.type)) { + // query += `&statistics=${this.chartInfo.param.statistics || 'last'}` + // } + query += `&query=${element.expression}` + return this.$get(query) + }) + requests = requests.concat(multipleRequests) + console.log(requests) + } const chartData = [] - axios.all(requests).then(res => { - res.forEach(r => { - if (r.status === 'success') { - chartData.push(r.data.result) + axios.all(requests).then((res) => { + res.forEach((r, rIndex) => { + if (rIndex < elements.length) { + if (r.status === 'success') { + chartData.push(r.data.result) + } else { + chartData.push({ error: r.msg || r.error || r }) + this.isError = true + } } else { - chartData.push({ error: r.msg || r.error || r }) - this.isError = true + if (r.status === 'success') { + console.log(r.data.result) + r.data.result.forEach(item => { + item.values.forEach(values => { + values[0] = values[0] + this.minusTime / 1000 + }) + }) + chartData.push(r.data.result) + } else { + chartData.push({ error: r.msg || r.error || r }) + this.isError = true + } } }) this.chartData = chartData