NEZ-1280 feat: 图表刷新

nezha-fronted/src/assets/css/components/chart/chart.scss

@@ -82,6 +82,7 @@
 }
 
 .nz-chart {
+  position: relative;
   height: 100%;
 
   .nz-chart__component {

nezha-fronted/src/components/chart/chart.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="nz-chart">
+    <loading :loading="loading"></loading>
     <chart-no-data v-if="isNoData"></chart-no-data>
     <template v-else>
       <chart-time-series
@@ -21,6 +22,7 @@
 </template>
 
 <script>
+import loading from '@/components/common/loading'
 import chartAssetInfo from './chart/chartAssetInfo'
 import chartBar from './chart/chartBar'
 import chartClock from './chart/chartClock'
@@ -45,6 +47,7 @@ import lodash from 'lodash'
 export default {
   name: 'chart',
   components: {
+    loading,
     chartAssetInfo,
     chartBar,
     chartClock,
@@ -68,11 +71,8 @@ export default {
     chartInfo: Object,
     chartData: [Object, Array, String], // 数据查询后传入chart组件，chart组件内不查询，只根据接传递的数据来渲染
     customChartOption: Object, // 需要自定义echarts的option时传入，非必须；传入该值时仍需传对应格式的chartData
-    isFullscreen: Boolean
-  },
-  data () {
-    return {
-    }
+    isFullscreen: Boolean,
+    loading: Boolean
   },
   computed: {
     isNoData () {
@@ -97,7 +97,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-
-</style>

nezha-fronted/src/components/chart/chart/chartTimeSeries.vue

@@ -80,7 +80,7 @@ export default {
       setTimeout(() => {
         const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId)
         myChart.setOption(chartOption)
-        setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿
+        this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿
         this.isInit = false
       }, 200)
     },

nezha-fronted/src/components/chart/chartHeader.vue

@@ -62,7 +62,7 @@ export default {
       this.$emit('showFullscreen', true)
     },
     refreshChart () {
-
+      this.$emit('refresh')
     },
     editChart () {
 

nezha-fronted/src/components/chart/panelChart.vue

@@ -5,6 +5,7 @@
     <chart-header
       v-if="!isFullscreen"
       :chart-info="chartInfo"
+      @refresh="refresh"
       @showFullscreen="showFullscreen"
     ></chart-header>
     <!-- chart -->
@@ -14,6 +15,7 @@
       :chart-data="chartData"
       :chart-info="chartInfo"
       :is-fullscreen="isFullscreen"
+      :loading="loading"
     ></chart>
   </div>
 </template>
@@ -40,12 +42,14 @@ export default {
   },
   data () {
     return {
-      chartData: []
+      chartData: [],
+      loading: true
     }
   },
   methods: {
     // 参数 isRefresh 标识是否是刷新操作
     getChartData (isRefresh) {
+      this.loading = true
       // TODO assetInfo、endpointInfo、echarts等进行不同的处理
       let startTime = ''
       let endTime = ''
@@ -54,7 +58,7 @@ export default {
         const origin = new Date(this.timeRange[1])
         const numInterval = now.getTime() - origin.getTime()
         if (numInterval >= 60000) { // 大于1分钟，则start、end均往后移numInterval，否则时间不变
-          startTime = this.getNewTime(this.timeRange[0], numInterval)
+          startTime = bus.getNewTime(this.timeRange[0], numInterval)
           endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss')
         } else {
           startTime = this.timeRange[0]
@@ -72,6 +76,7 @@ export default {
       this.query(elements, startTime, endTime, step)
     },
     query (elements, startTime, endTime, step) {
+      try {
         switch (this.chartInfo.dataSource) {
           case 1:
           case 2: {
@@ -103,21 +108,29 @@ export default {
                 }
               })
               this.chartData = chartData
+            }).finally(() => {
+              this.loading = false
             })
             break
           }
           case 3: {
+            this.loading = false
             break
           }
           case 4: {
             if (this.chartInfo.type === 'hexagonFigure') {
               this.getHexagonFigureData().then(res => {
                 this.chartData = res
+              }).finally(() => {
+                this.loading = false
               })
             }
             break
           }
         }
+      } catch (e) {
+        this.loading = false
+      }
     },
     getHexagonFigureData () {
       return new Promise(resolve => {
@@ -149,10 +162,21 @@ export default {
     resize () {
       this.$refs.chart.resize()
     },
+    refresh () {
+      this.getChartData(true)
+    },
     showFullscreen (show) {
       this.$emit('showFullscreen', show, this.chartInfo)
     }
   },
+  watch: {
+    timeRange: {
+      deep: true,
+      handler (n) {
+        this.refresh()
+      }
+    }
+  },
   mounted () {
     this.getChartData()
   }

nezha-fronted/src/components/common/loading.vue

@@ -9,7 +9,7 @@
 export default {
   name: 'loading',
   props: {
-
+    loading: Boolean
   },
   data () {
     return {
@@ -23,6 +23,11 @@ export default {
     endLoading () {
       this.showLoading = false
     }
+  },
+  watch: {
+    loading (n) {
+      this.showLoading = n
+    }
   }
 }
 </script>

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -95,7 +95,6 @@
                 @on-remove-chart="delChart"
                 @on-add-group-item-chart="addGroupItem"
               ></chart-list>
-              <chart-list ref="chartList" :class="{'show-top':showTopBtn}" :from="fromRoute.panel" :nowTimeType="nowTimeType" :panel-lock="panelLock" @on-edit-chart="editChart" @on-refresh-time="refreshTime"  @on-remove-chart="delChart" @on-add-group-item-chart="addGroupItem"></chart-list>
             </div>
           </div>
         </div>

nezha-fronted/src/libs/bus.js

@@ -290,6 +290,19 @@ export default new Vue({
         new Date(this.computeTimezone(new Date().getTime()))
       ]
     },
+    getRefreshTimeByTimeRange (timeRange) {
+      const interval = timeRange[1] - timeRange[0]
+      const newTime = new Date().getTime()
+      return [
+        new Date(new Date(this.computeTimezone(newTime - interval))),
+        new Date(this.computeTimezone(newTime))
+      ]
+    },
+    getNewTime (time, num) {
+      const date = new Date(time)
+      const newDate = new Date(parseInt(date.getTime(), 10) + num)
+      return this.timeFormate(newDate, 'yyyy-MM-dd hh:mm:ss')
+    },
     getOffsetTimezoneData (offset = 0) {
       return new Date(this.computeTimezone(new Date().getTime())).setHours(new Date(this.computeTimezone(new Date().getTime())).getHours() + offset)
     },