feat：添加显示更多的选项

2021-12-23 10:44:30 +08:00
parent e2733f9710
commit 8c46345aa1
7 changed files with 157 additions and 100 deletions
--- a/nezha-fronted/src/components/chart/ChartScreenHeader.vue
+++ b/nezha-fronted/src/components/chart/ChartScreenHeader.vue
@@ -13,6 +13,19 @@
           </span>
          </el-popover>
    </span>
+    <span v-if="!isError&&!showAllData&&allDataLength>20" class="chart-header-error moreTitle">
+     <el-popover
+       placement="top-start"
+       :close-delay=10
+       trigger="hover"
+       popper-class="chart-warring-popper">
+          <div class="moreTitle">{{$t('dashboard.panel.moreTitle')}}{{$t('dashboard.panel.showAll')}}{{allDataLength}}</div>
+          <span slot="reference" class="panel-info-corner panel-info-corner--error"  @click="loadMore">
+            <i class="nz-icon nz-icon-warning fa"></i>
+            <span class="panel-info-corner-inner"></span>
+          </span>
+     </el-popover>
+    </span>
    <div class="chart-header__title">{{chartInfo.name}}</div>
    <div class="chart-header__tools">
      <span v-if="chartInfo.remark" class="chart-header__tool top-tool-btn-group">
@@ -33,25 +46,10 @@
 <script>
 import bus from '@/libs/bus'
 import lodash from 'lodash'
+import chartHeaderMixin from "@/components/chart/chartHeaderMixin";
 export default {
  name: 'ChartScreenHeader',
-  props: {
-    chartInfo: Object,
-    from: String,
-    isGroup: {
-      type: Boolean,
-      default: false
-    },
-    error: {
-      type: String,
-      default: ''
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    chartData: {}
-  },
+  mixins: [chartHeaderMixin],
  computed: {
    timeRange () {
      return this.$store.getters.getTimeRange
@@ -134,14 +132,6 @@ export default {
    }
  },
  watch: {
-    isError: {
-      immediate: true,
-      handler (n) {
-        if (n) {
-          this.errorText = this.chartData.filter(item => item.error).map(item => item.error).join('\n')
-        }
-      }
-    },
    timeRange: {
      immediate: true,
      handler (n) {
--- a/nezha-fronted/src/components/chart/chart.vue
+++ b/nezha-fronted/src/components/chart/chart.vue
@@ -12,6 +12,7 @@
        :is-fullscreen="isFullscreen"
        :minusTime="minusTime"
        :multipleTime="multipleTime"
+        :showAllData="showAllData"
        @chartIsNoData="chartIsNoData"
      ></chart-time-series>
      <chart-pie
@@ -226,7 +227,11 @@ export default {
    isError: Boolean,
    filter: {},
    multipleTime: {},
-    minusTime: {}
+    minusTime: {},
+    showAllData: {
+      type: Boolean,
+      default: false
+    }
  },
  data () {
    return {
--- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
@@ -69,6 +69,7 @@ export default {
  },
  methods: {
    initChart (chartOption = this.chartOption) {
+      console.log(123)
      this.legends = []
      chartOption.series = this.handleTimeSeries(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
      if (this.isNoData) {
@@ -151,7 +152,6 @@ export default {
        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)
--- a/nezha-fronted/src/components/chart/chartHeader.vue
+++ b/nezha-fronted/src/components/chart/chartHeader.vue
@@ -13,6 +13,19 @@
           </span>
          </el-popover>
    </span>
+    <span v-if="!isError&&!showAllData&&allDataLength>10" class="chart-header-error moreTitle">
+     <el-popover
+       placement="top-start"
+       :close-delay=10
+       trigger="hover"
+       popper-class="chart-warring-popper">
+          <div class="moreTitle">{{$t('dashboard.panel.moreTitle')}}{{$t('dashboard.panel.showAll')}}{{allDataLength}}</div>
+          <span slot="reference" class="panel-info-corner panel-info-corner--error"  @click="loadMore">
+            <i class="nz-icon nz-icon-warning fa"></i>
+            <span class="panel-info-corner-inner"></span>
+          </span>
+     </el-popover>
+    </span>
    <div class="chart-header__title" v-if="!isGroup">{{chartInfo.name}}</div>
    <div class="chart-header__title" v-else >
      <span @click="groupShow"> <i class="nz-icon" :class="chartInfo.param.collapse ? 'nz-icon-arrow-down': 'nz-icon-arrow-right'"></i></span>
@@ -63,73 +76,9 @@
 </template>

 <script>
+import chartHeaderMixin from '@/components/chart/chartHeaderMixin'
 export default {
  name: 'chartHeader',
-  props: {
-    chartInfo: Object,
-    from: String,
-    isGroup: {
-      type: Boolean,
-      default: false
-    },
-    error: {
-      type: String,
-      default: ''
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    chartData: {}
-  },
-  data () {
-    return {
-      dropdownMenuShow: false,
-      errorText: ''
-    }
-  },
-  methods: {
-    showFullscreen () {
-      this.$emit('showFullscreen', true)
-    },
-    refreshChart () {
-      this.$emit('refresh')
-    },
-    editChart () {
-      // this.$emit('edit-chart', this.chartInfo)
-      this.$store.dispatch('dispatchEditChart', {
-        chart: this.chartInfo,
-        type: 'edit'
-      })
-    },
-    removeChart () {
-      this.$store.dispatch('dispatchDelChart', {
-        chart: this.chartInfo,
-        type: 'delete'
-      })
-    },
-    duplicate () {
-      this.$store.dispatch('dispatchEditChart', {
-        chart: this.chartInfo,
-        type: 'duplicate'
-      })
-    },
-    clickos () {
-      this.dropdownMenuShow = false
-    },
-    groupShow () {
-      this.$emit('groupShow', !this.chartInfo.param.collapse)
-    }
-  },
-  watch: {
-    isError: {
-      immediate: true,
-      handler (n) {
-        if (n) {
-          this.errorText = this.chartData.filter(item => item.error).map(item => item.error).join('\n')
-        }
-      }
-    }
-  }
+  mixins: [chartHeaderMixin],
 }
 </script>
--- a/nezha-fronted/src/components/chart/chartHeaderMixin.js
+++ b/nezha-fronted/src/components/chart/chartHeaderMixin.js
@@ -0,0 +1,79 @@
+export default {
+  props: {
+    chartInfo: Object,
+    from: String,
+    isGroup: {
+      type: Boolean,
+      default: false
+    },
+    error: {
+      type: String,
+      default: ''
+    },
+    isError: {
+      type: Boolean,
+      default: false
+    },
+    chartData: {},
+    showAllData: {
+      type: Boolean,
+      default: false
+    },
+    allDataLength: {
+      type: Number,
+      default: 0
+    }
+  },
+  data () {
+    return {
+      dropdownMenuShow: false,
+      errorText: ''
+    }
+  },
+  methods: {
+    showFullscreen () {
+      this.$emit('showFullscreen', true)
+    },
+    refreshChart () {
+      this.$emit('refresh')
+    },
+    editChart () {
+      // this.$emit('edit-chart', this.chartInfo)
+      this.$store.dispatch('dispatchEditChart', {
+        chart: this.chartInfo,
+        type: 'edit'
+      })
+    },
+    removeChart () {
+      this.$store.dispatch('dispatchDelChart', {
+        chart: this.chartInfo,
+        type: 'delete'
+      })
+    },
+    duplicate () {
+      this.$store.dispatch('dispatchEditChart', {
+        chart: this.chartInfo,
+        type: 'duplicate'
+      })
+    },
+    clickos () {
+      this.dropdownMenuShow = false
+    },
+    groupShow () {
+      this.$emit('groupShow', !this.chartInfo.param.collapse)
+    },
+    loadMore () {
+      this.$emit('loadMore')
+    }
+  },
+  watch: {
+    isError: {
+      immediate: true,
+      handler (n) {
+        if (n) {
+          this.errorText = this.chartData.filter(item => item.error).map(item => item.error).join('\n')
+        }
+      }
+    }
+  }
+}
--- a/nezha-fronted/src/components/chart/chartMixin.js
+++ b/nezha-fronted/src/components/chart/chartMixin.js
@@ -15,14 +15,17 @@ export default {
      },
      chartId: '',
      isNoData: true,
-      showAllData: false
    }
  },
  props: {
    chartInfo: Object,
    chartData: Array,
    chartOption: Object,
-    isFullscreen: Boolean
+    isFullscreen: Boolean,
+    showAllData: {
+      type: Boolean,
+      default: false
+    }
  },
  computed: {
    filterTime () {
@@ -41,10 +44,11 @@ export default {
      let colorIndex = 0
      originalDatas.forEach((originalData, expressionIndex) => {
        originalData.forEach((data, dataIndex) => {
-          // if (colorIndex >= 20 && !this.showAllData) {
-          //   colorIndex++
-          //   return
-          // }
+          console.log(this.showAllData)
+          if (colorIndex >= 20 && !this.showAllData) {
+            colorIndex++
+            return
+          }
          this.isNoData = false
          const s = lodash.cloneDeep(seriesTemplate)
          if (s) {
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -8,6 +8,9 @@
      :isError="isError"
      :chartData="chartData"
      :chart-info="chartInfo"
+      :showAllData.sync="showAllData"
+      :allDataLength="allDataLength"
+      @loadMore="loadMore"
      @edit-chart="$emit('edit-chart', chartInfo)"
      @refresh="refresh"
      @groupShow="groupShow"
@@ -20,6 +23,9 @@
      :isError="isError"
      :chartData="chartData"
      :chart-info="chartInfo"
+      :showAllData.sync="showAllData"
+      :allDataLength="allDataLength"
+      @loadMore="loadMore"
      @refresh="refresh"
      @dateChange="dateChange"
      @close="showFullscreen"
@@ -38,6 +44,7 @@
      :minusTime="minusTime"
      :multipleTime="multipleTime"
      :is-fullscreen="isFullscreen"
+      :showAllData="showAllData"
      v-if="!isGroup(chartInfo.type) || !chartInfo.param.collapse"
    ></chart>
  </div>
@@ -77,7 +84,9 @@ export default {
      loading: true,
      isError: false,
      multipleTime: false,
-      minusTime: ''
+      minusTime: '',
+      showAllData: false,
+      allDataLength: 0
    }
  },
  computed: {
@@ -139,6 +148,7 @@ export default {
    },
    query (elements, startTime, endTime, step) {
      this.isError = false
+      this.allDataLength = 0
      try {
        switch (this.chartInfo.datasource) {
          case 'metrics':
@@ -187,6 +197,9 @@ export default {
              res.forEach((r, rIndex) => {
                if (rIndex < elements.length) {
                  if (r.status === 'success') {
+                    r.data.result.forEach(item => {
+                      this.allDataLength++
+                    })
                    chartData.push(r.data.result)
                  } else {
                    chartData.push({ error: r.msg || r.error || r })
@@ -196,6 +209,7 @@ export default {
                  if (r.status === 'success') {
                    console.log(r.data.result)
                    r.data.result.forEach(item => {
+                      this.allDataLength++
                      item.values.forEach(values => {
                        values[0] = values[0] + this.minusTime / 1000
                      })
@@ -360,6 +374,21 @@ export default {
      this.groupInit()
      bus.$emit('groupMove', '', '', true)
      this.$emit('groupShow', this.chartInfo)
+    },
+    showMultiple (type) {
+      switch (type) {
+        case 'line' :
+        case 'area' :
+        case 'point' :
+          return true
+        default: return false
+      }
+    },
+    loadMore () {
+      this.showAllData = true
+      this.$nextTick(() => {
+        this.$refs.chart && this.$refs.chart.$refs['chart' + this.chartInfo.id].initChart()
+      })
    }
  },
  watch: {
@@ -378,6 +407,7 @@ export default {
  },
  mounted () {
    this.chartInfo.loaded && this.getChartData()
+    this.showAllData = !this.showMultiple(this.chartInfo.type)
  }
 }
 </script>