fix：添加全屏同比(暂未计算差值)

2021-12-22 20:06:59 +08:00
parent 0b7efe0f2a
commit 70b25a86b1
4 changed files with 96 additions and 19 deletions
--- 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"
      ></chart-time-series>
      <chart-pie
@@ -222,7 +224,9 @@ export default {
    panelLock: Boolean,
    from: String,
    isError: Boolean,
-    filter: {}
+    filter: {},
+    multipleTime: {},
+    minusTime: {}
  },
  data () {
    return {
--- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
@@ -33,6 +33,10 @@ export default {
  components: {
    chartLegend: legend
  },
+  props: {
+    multipleTime: {},
+    minusTime: {}
+  },
  mixins: [chartMixin],
  data () {
    return {
@@ -145,7 +149,10 @@ export default {
      return function (params) {
        let str = '<div class="nz-chart__tooltip">'
        let sum = 0
+        let flag = true
        params.forEach((item, i) => {
+          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 += '</div>'
          }
+          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 += '<div style="border: 1px solid #EEEEEE"></div>'
+            str += '<div style="margin-top: 5px;margin-bottom: 5px">'
+            str += bus.timeFormate(tData)
+            str += '</div>'
+          }
          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 {
            <div class="tooltip__row">
              <div class="row__label">
                <span class="row__color-block" style="background-color: ${color}"></span>
-                <span>${item.seriesName}</span>
+                <span>${seriesName}</span>
              </div>
              <div class="row__value">
                <span>${chartDataFormat.getUnit(self.chartInfo.unit ? self.chartInfo.unit : 2).compute(val, null, -1, paramsDot)}</span>
--- 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,
--- 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"
    ></chart>
@@ -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