Merge pull request #860 from dataease/pr@dev@feat_panel-edit

feat:仪表板自定义刷新时间

frontend/package.json

@@ -45,6 +45,7 @@
     "vue-codemirror": "^4.0.6",
     "vue-fullscreen": "^2.5.2",
     "vue-i18n": "7.3.2",
+    "vue-power-drag": "^0.2.0",
     "vue-router": "3.0.6",
     "vue-to-pdf": "^1.0.0",
     "vue-uuid": "2.0.2",

frontend/src/components/canvas/components/Editor/Preview.vue

@@ -139,6 +139,12 @@ export default {
         this.restore()
       },
       deep: true
+    },
+    canvasStyleData: {
+      handler(newVal, oldVla) {
+        this.canvasStyleDataInit()
+      },
+      deep: true
     }
   },
   mounted() {
@@ -150,21 +156,26 @@ export default {
         _this.restore()
       })
     })
-    // 数据刷新计时器
-    let refreshTime = 300000
-    if (this.canvasStyleData.refreshTime && this.canvasStyleData.refreshTime > 0) {
-      refreshTime = this.canvasStyleData.refreshTime * 1000
-    }
-    this.timer = setInterval(() => {
-      this.searchCount++
-    }, refreshTime)
     eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
     this.$store.commit('clearLinkageSettingInfo', false)
+    this.canvasStyleDataInit()
   },
   beforeDestroy() {
     clearInterval(this.timer)
   },
   methods: {
+    canvasStyleDataInit() {
+      // 数据刷新计时器
+      this.searchCount = 0
+      this.timer && clearInterval(this.timer)
+      let refreshTime = 300000
+      if (this.canvasStyleData.refreshTime && this.canvasStyleData.refreshTime > 0) {
+        refreshTime = this.canvasStyleData.refreshTime * 60000
+      }
+      this.timer = setInterval(() => {
+        this.searchCount++
+      }, refreshTime)
+    },
     changeStyleWithScale,
     getStyle,
     restore() {

frontend/src/lang/en.js

@@ -1199,6 +1199,8 @@ export default {
     gap: 'Gap',
     no_gap: 'No Gap',
     component_gap: 'Component Gap',
+    refresh_time: 'Refresh Time',
+    minute: 'minute',
     photo: 'Photo',
     default_panel: 'Default Dashboard',
     create_public_links: 'Create public links',

frontend/src/lang/tw.js

@@ -1202,6 +1202,8 @@ export default {
     gap: '有間隙',
     no_gap: '無間隙',
     component_gap: '組件間隙',
+    refresh_time: '刷新时间',
+    minute: '分钟',
     photo: '圖片',
     default_panel: '默認儀表板',
     create_public_links: '創建公共鏈接',

frontend/src/lang/zh.js

@@ -1207,6 +1207,8 @@ export default {
     gap: '有间隙',
     no_gap: '无间隙',
     component_gap: '组件间隙',
+    refresh_time: '刷新时间',
+    minute: '分钟',
     photo: '图片',
     default_panel: '默认仪表板',
     create_public_links: '创建公共链接',

frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentGap.vue

@@ -23,7 +23,7 @@ import { mapState } from 'vuex'
 import { deepCopy } from '@/components/canvas/utils/utils'
 
 export default {
-  name: 'BackgroundSelector',
+  name: 'ComponentGap',
   props: {
   },
   data() {

frontend/src/views/panel/SubjectSetting/PanelStyle/PanelRefreshTime.vue

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <div style="width: 100%;">
+      <el-popover
+        placement="right"
+        width="400"
+        trigger="click"
+      >
+        <el-col>
+          <el-form ref="colorForm" label-width="80px" size="mini">
+            <el-form-item :label="$t('panel.minute')" class="form-item form-item-slider">
+              <el-slider v-model="canvasStyleData.refreshTime" show-input :show-input-controls="false" input-size="mini" :min="1" :max="60" @change="onChangePanelStyle" />
+            </el-form-item>
+          </el-form>
+        </el-col>
+        <el-button slot="reference" size="mini" class="shape-item">{{ $t('panel.refresh_time') }} <i class="el-icon-setting el-icon--right" /></el-button>
+      </el-popover>
+    </div>
+  </div>
+</template>
+
+<script>
+// eslint-disable-next-line no-unused-vars
+import { deepCopy } from '@/components/canvas/utils/utils'
+import {
+  CANVAS_STYLE
+} from '@/views/panel/panel'
+
+export default {
+  name: 'PanelRefreshTime',
+  props: {
+  },
+  computed: {
+    canvasStyleData() {
+      return this.$store.state.canvasStyleData
+    }
+  },
+  created() {
+    // 初始化赋值
+    if (!this.canvasStyleData.refreshTime) {
+      this.canvasStyleData['refreshTime'] = CANVAS_STYLE.refreshTime
+    }
+  },
+  methods: {
+    onChangePanelStyle() {
+      this.$store.state.styleChangeTimes++
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .avatar-uploader>>>.el-upload {
+    width: 100px;
+    height: 60px;
+    line-height: 70px;
+  }
+  .avatar-uploader>>>.el-upload-list li{
+    width: 100px !important;
+    height: 60px !important;
+  }
+  .disabled>>>.el-upload--picture-card {
+    display: none;
+  }
+  .shape-item{
+    padding: 6px;
+    border: none;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .form-item-slider>>>.el-form-item__label{
+    font-size: 12px;
+    line-height: 38px;
+  }
+  .form-item>>>.el-form-item__label{
+    font-size: 12px;
+  }
+  .el-select-dropdown__item{
+    padding: 0 20px;
+  }
+  span{
+    font-size: 12px
+  }
+  .el-form-item{
+    margin-bottom: 6px;
+  }
+</style>

frontend/src/views/panel/SubjectSetting/index.vue

@@ -12,6 +12,7 @@
           <el-row style="background-color: #f7f8fa; margin: 5px">
             <background-selector class="attr-selector" />
             <component-gap class="attr-selector" />
+            <Panel-Refresh-Time class="attr-selector" />
           </el-row>
         </el-collapse-item>
         <el-collapse-item :title="$t('chart.module_style')" name="component">
@@ -41,6 +42,7 @@ import BackgroundSelector from './PanelStyle/BackgroundSelector'
 import PanelBackgroundColorSelector from './PanelStyle/PanelBackgroundColorSelector'
 import PanelColorSelector from './PanelStyle/PanelColorSelector'
 import ComponentGap from './PanelStyle/ComponentGap'
+import PanelRefreshTime from './PanelStyle/PanelRefreshTime'
 
 import { mapState } from 'vuex'
 import { deepCopy } from '@/components/canvas/utils/utils'
@@ -52,7 +54,8 @@ export default {
     BackgroundSelector,
     ComponentGap,
     PanelColorSelector,
-    PanelBackgroundColorSelector
+    PanelBackgroundColorSelector,
+    PanelRefreshTime
   },
   data() {
     return {
@@ -135,7 +138,7 @@ export default {
       chart.customFilter = JSON.stringify(this.chart.customFilter)
       canvasStyleData.chart = chart
       this.$store.commit('setCanvasStyle', canvasStyleData)
-      this.$store.commit('recordSnapshot','save')
+      this.$store.commit('recordSnapshot', 'save')
     }
   }
 }

frontend/src/views/panel/panel.js

@@ -19,7 +19,8 @@ export const CANVAS_STYLE = {
   selfAdaption: true,
   auxiliaryMatrix: true,
   openCommonStyle: true,
-  panel: DEFAULT_PANEL_STYLE
+  panel: DEFAULT_PANEL_STYLE,
+  refreshTime: 5 // 仪表板刷新时间 默认五分钟
 }
 
 export const DEFAULT_COMMON_CANVAS_STYLE_STRING = {