Feature: 看板中图表加入定时器，实现实时数据展示

Update: axios请求动态控制加载loading层
Bugfix: 修复一些小问题

datax-modules/data-visual-service-parent/data-visual-service-api/src/main/java/cn/datax/service/data/visual/api/dto/BoardConfig.java

@@ -11,6 +11,8 @@ public class BoardConfig implements Serializable {
 
     private static final long serialVersionUID=1L;
 
-    @NotEmpty(message = "指标不能为空")
+    @NotEmpty(message = "布局不能为空")
     private List<BoardItem> layout;
+
+    private List<BoardTimer> interval;
 }

datax-modules/data-visual-service-parent/data-visual-service-api/src/main/java/cn/datax/service/data/visual/api/dto/BoardTimer.java

+package cn.datax.service.data.visual.api.dto;
+
+import lombok.Data;
+
+import java.io.Serializable;
+
+@Data
+public class BoardTimer implements Serializable {
+
+    private static final long serialVersionUID=1L;
+
+    private String id;
+    private Integer milliseconds;
+}

datax-ui/src/api/visual/datachart.js

@@ -64,6 +64,9 @@ export function buildDataChart(data) {
 export function dataParser(data) {
   return request({
     url: '/data/visual/charts/data/parser',
+    headers: {
+      'showLoading': false
+    },
     method: 'post',
     data: data
   })

datax-ui/src/utils/request.js

@@ -18,16 +18,20 @@ service.interceptors.request.use(
     if (hasToken) {
       config.headers['Authorization'] = 'Bearer ' + hasToken
     }
-    loadingInstance = Loading.service({
-      lock: true,
-      text: '数据加载中，请稍后...',
-      spinner: 'el-icon-loading',
-      background: 'rgba(0, 0, 0, 0.7)'
-    })
+    if (config.headers.showLoading !== false) {
+      loadingInstance = Loading.service({
+        lock: true,
+        text: '数据加载中，请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+    }
     return config
   },
   error => {
-    loadingInstance.close()
+    if (error.config.headers.showLoading !== false) {
+      loadingInstance.close()
+    }
     Message.error('请求错误')
     console.log(error)
     return Promise.reject(error)
@@ -37,7 +41,9 @@ service.interceptors.request.use(
 // response interceptor
 service.interceptors.response.use(
   response => {
-    loadingInstance.close()
+    if (response.config.headers.showLoading !== false) {
+      loadingInstance.close()
+    }
     const code = response.data.code || 200
     if (code === 500) {
       Message.error(response.data.msg || '系统错误')
@@ -47,7 +53,9 @@ service.interceptors.response.use(
     }
   },
   error => {
-    loadingInstance.close()
+    if (error.config.headers.showLoading !== false) {
+      loadingInstance.close()
+    }
     console.log(error.response)
     if (error.response.status) {
       switch (error.response.status) {

datax-ui/src/views/visual/databoard/DataBoardBuild.vue

@@ -63,6 +63,7 @@
                 </div>
                 <div>
                   <i class="el-icon-delete" @click="handleDeleteChart(item.i)" />
+                  <i class="el-icon-setting" @click="handleTimerChart(item.i)" />
                 </div>
               </div>
               <chart-panel v-if="getChartItem(item.i).visible" :key="item.i" :ref="`charts${item.i}`" :chart-schema="getChartItem(item.i).chartSchema" :chart-data="getChartItem(item.i).data" :chart-style="{height: `${item.h * 30 + 10 * (item.h - 1) - 60}px`}" />
@@ -114,6 +115,7 @@ export default {
       dataBoard: {},
       dataChartList: [],
       layout: [],
+      interval: [],
       charts: [],
       drawer: false
     }
@@ -189,6 +191,24 @@ export default {
       this.charts.splice(this.charts.findIndex(item => item.id === id), 1)
       this.$set(this.dataChartList.find(item => item.id === id), 'disabled', false)
     },
+    handleTimerChart(id) {
+      this.$prompt('请输入定时时间间隔，输入0不定时（单位毫秒，1000 毫秒 = 1 秒）', '提示', {
+        showClose: false,
+        closeOnClickModal: false,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputPattern: /^(0|\+?[1-9][0-9]*)$/,
+        inputErrorMessage: '格式不正确',
+        inputValue: '5000'
+      }).then(({ value }) => {
+        const timer = this.interval.find(item => item.id === id)
+        if (timer) {
+          this.$set(timer, 'milliseconds', value)
+        } else {
+          this.interval.push({ id: id, milliseconds: value })
+        }
+      }).catch(() => {})
+    },
     handlePreview() {
       const route = this.$router.resolve({ path: `/visual/board/view/${this.dataBoard.id}` })
       window.open(route.href, '_blank')
@@ -213,7 +233,8 @@ export default {
         id: this.dataBoard.id,
         boardThumbnail: this.dataBoard.boardThumbnail,
         boardConfig: {
-          layout: this.layout
+          layout: this.layout,
+          interval: this.interval
         }
       }
       buildDataBoard(data).then(response => {
@@ -227,7 +248,6 @@ export default {
       window.close()
     },
     handleResize(i, newH, newW, newHPx, newWPx) {
-      console.log('handleResize', i)
       if (this.charts.find(chart => chart.id === i).visible) {
         this.$refs[`charts${i}`][0].$children[0].$emit('resized')
       }

datax-ui/src/views/visual/databoard/DataBoardView.vue

@@ -57,7 +57,9 @@ export default {
     return {
       dataBoard: {},
       layout: [],
-      charts: []
+      interval: [],
+      charts: [],
+      timers: []
     }
   },
   created() {
@@ -69,11 +71,15 @@ export default {
         if (response.success) {
           this.dataBoard = response.data
           this.layout = this.dataBoard.boardConfig ? JSON.parse(JSON.stringify(this.dataBoard.boardConfig.layout)) : []
+          this.interval = this.dataBoard.boardConfig ? JSON.parse(JSON.stringify(this.dataBoard.boardConfig.interval)) : []
           const charts = this.dataBoard.charts ? JSON.parse(JSON.stringify(this.dataBoard.charts)) : []
           charts.forEach((item, index, arr) => {
             this.parserChart(item)
           })
           this.charts = charts
+          this.$nextTick(() => {
+            this.initTimer()
+          })
         }
       })
     },
@@ -94,7 +100,29 @@ export default {
     },
     getChartItem(id) {
       return this.charts.find(chart => chart.id === id)
+    },
+    initTimer() {
+      this.interval.forEach((item, index) => {
+        if (item.milliseconds && item.milliseconds > 0) {
+          const timer = setInterval(() => {
+            const chart = this.charts.find(chart => chart.id === item.id)
+            if (chart.chartConfig) {
+              dataParser(JSON.parse(chart.chartConfig)).then(response => {
+                if (response.success) {
+                  this.$set(chart, 'data', response.data.data)
+                }
+              })
+            }
+          }, item.milliseconds)
+          this.timers.push(timer)
+        }
+      })
     }
+  },
+  beforeDestroy() {
+    this.timers.map((item) => {
+      clearInterval(item)
+    })
   }
 }
 </script>