feat(仪表板): 仪表板视图刷新增加开关控制

frontend/src/components/canvas/DeCanvas.vue

@@ -8,7 +8,7 @@
     @mouseup="deselectCurComponent"
     @scroll="canvasScroll"
   >
-    <slot name="optBar"/>
+    <slot name="optBar" />
     <de-editor
       :ref="editorRefName"
       :canvas-style-data="canvasStyleData"

frontend/src/components/canvas/components/editor/EditBar.vue

@@ -137,7 +137,7 @@
           :target="curComponent.hyperlinks.openMode "
           :href="curComponent.hyperlinks.content "
         >
-          <i class="icon iconfont icon-com-jump"/>
+          <i class="icon iconfont icon-com-jump" />
         </a>
       </span>
 

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

@@ -428,19 +428,21 @@ export default {
     },
     canvasStyleDataInit() {
       // 数据刷新计时器
-      this.searchCount = 0
+      if (this.canvasStyleData.refreshViewEnable) {
-      this.timer && clearInterval(this.timer)
+        this.searchCount = 0
-      let refreshTime = 300000
+        this.timer && clearInterval(this.timer)
-      if (this.canvasStyleData.refreshTime && this.canvasStyleData.refreshTime > 0) {
+        let refreshTime = 300000
-        if (this.canvasStyleData.refreshUnit === 'second') {
+        if (this.canvasStyleData.refreshTime && this.canvasStyleData.refreshTime > 0) {
-          refreshTime = this.canvasStyleData.refreshTime * 1000
+          if (this.canvasStyleData.refreshUnit === 'second') {
-        } else {
+            refreshTime = this.canvasStyleData.refreshTime * 1000
-          refreshTime = this.canvasStyleData.refreshTime * 60000
+          } else {
+            refreshTime = this.canvasStyleData.refreshTime * 60000
+          }
         }
+        this.timer = setInterval(() => {
+          this.searchCount++
+        }, refreshTime)
       }
-      this.timer = setInterval(() => {
-        this.searchCount++
-      }, refreshTime)
     },
     changeStyleWithScale,
     getStyle,

frontend/src/components/canvas/utils/utils.js

@@ -1,11 +1,10 @@
 import {
-  BASE_MOBILE_STYLE, COMMON_BACKGROUND_NONE,
+  BASE_MOBILE_STYLE,
+  COMMON_BACKGROUND_NONE,
   HYPERLINKS
 } from '@/components/canvas/customComponent/component-list'
 
-import {
+import { ApplicationContext } from '@/utils/ApplicationContext'
-  ApplicationContext
-} from '@/utils/ApplicationContext'
 import { uuid } from 'vue-uuid'
 import store from '@/store'
 import { AIDED_DESIGN, PANEL_CHART_INFO, TAB_COMMON_STYLE } from '@/views/panel/panel'
@@ -49,6 +48,7 @@ export function toTop(arr, i, j) {
 export function toBottom(arr, i) {
   arr.unshift(arr.splice(i, 1)[0])
 }
+
 export function $(selector) {
   return document.querySelector(selector)
 }
@@ -80,6 +80,7 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
   componentStyle.refreshTime = (componentStyle.refreshTime || 5)
   componentStyle.refreshViewLoading = (componentStyle.refreshViewLoading || false)
   componentStyle.refreshUnit = (componentStyle.refreshUnit || 'minute')
+  componentStyle.refreshViewEnable = (componentStyle.refreshViewEnable === undefined ? true : componentStyle.refreshViewEnable)
   componentStyle.aidedDesign = (componentStyle.aidedDesign || deepCopy(AIDED_DESIGN))
   componentStyle.chartInfo = (componentStyle.chartInfo || deepCopy(PANEL_CHART_INFO))
   componentStyle.chartInfo.tabStyle = (componentStyle.chartInfo.tabStyle || deepCopy(TAB_COMMON_STYLE))
@@ -209,8 +210,11 @@ export function exportImg(imgName) {
 }
 
 export function dataURLToBlob(dataurl) { // ie 图片转格式
-  const arr = dataurl.split(','); const mime = arr[0].match(/:(.*?);/)[1]
+  const arr = dataurl.split(',')
-  const bstr = atob(arr[1]); let n = bstr.length; const u8arr = new Uint8Array(n)
+  const mime = arr[0].match(/:(.*?);/)[1]
+  const bstr = atob(arr[1])
+  let n = bstr.length
+  const u8arr = new Uint8Array(n)
   while (n--) {
     u8arr[n] = bstr.charCodeAt(n)
   }

frontend/src/lang/en.js

@@ -1865,6 +1865,18 @@ export default {
     sure_bt: 'Confirm'
   },
   panel: {
+    board: 'Border',
+    text: 'Text',
+    board_background: 'Background',
+    title_color: 'Title color',
+    input_style: 'Input box style (color)',
+    overall_setting: 'Overall setting',
+    panel_background: 'Panel background',
+    component_color: 'Component color',
+    chart_title: 'Chart title',
+    filter_component: 'Filter component',
+    enable_refresh_view: 'Enable refresh',
+    enable_view_loading: 'View loading prompt',
     image_size_tips: 'Please do not exceed 15M in the picture',
     image_add_tips: 'Only pictures can be inserted',
     watermark: 'Watermark',

frontend/src/lang/tw.js

@@ -1865,6 +1865,18 @@ export default {
     sure_bt: '確定'
   },
   panel: {
+    board: '邊框',
+    text: '文字',
+    board_background: '背景',
+    title_color: '標題顏色',
+    input_style: '輸入框樣式(顏色)',
+    overall_setting: '整體配置',
+    panel_background: '儀表板背景',
+    component_color: '組件配色',
+    chart_title: '圖表標題',
+    filter_component: '過濾組件',
+    enable_refresh_view: '開啟刷新',
+    enable_view_loading: '視圖加載提示',
     image_size_tips: '圖片請不要大於15M',
     image_add_tips: '只能插入圖片',
     watermark: '水印',

frontend/src/lang/zh.js

@@ -1865,6 +1865,18 @@ export default {
     sure_bt: '确定'
   },
   panel: {
+    board: '边框',
+    text: '文字',
+    board_background: '背景',
+    title_color: '标题颜色',
+    input_style: '输入框样式(颜色)',
+    overall_setting: '整体配置',
+    panel_background: '仪表板背景',
+    component_color: '组件配色',
+    chart_title: '图表标题',
+    filter_component: '过滤组件',
+    enable_refresh_view: '开启刷新',
+    enable_view_loading: '视图加载提示',
     image_size_tips: '图片请不要大于15M',
     image_add_tips: '只能插入图片',
     watermark: '水印',

frontend/src/views/panel/panel.js

@@ -2,6 +2,7 @@
 import { DEFAULT_COLOR_CASE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 import { deepCopy } from '@/components/canvas/utils/utils'
 import { COMMON_BACKGROUND_BASE } from '@/components/canvas/customComponent/component-list'
+
 export const TAB_COMMON_STYLE = {
   headFontColor: '#000000',
   headFontActiveColor: '#000000',
@@ -60,6 +61,7 @@ export const CANVAS_STYLE = {
     showGrid: false,
     matrixBase: 4 // 当前matrix的基数 （是pcMatrixCount的几倍）
   }, // 辅助设计
+  refreshViewEnable: true, // 开启视图刷新（默认开启）
   refreshViewLoading: true, // 仪表板视图loading提示
   refreshUnit: 'minute', // 仪表板刷新时间带外 默认 分钟
   refreshTime: 5, // 仪表板刷新时间 默认5分钟

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

@@ -21,7 +21,7 @@
           @change="handleChange"
         >
           <el-collapse-item
-            :title="'整体配置'"
+            :title="$t('panel.overall_setting')"
             name="panel"
           >
             <el-row class="selector-div">
@@ -29,31 +29,31 @@
             </el-row>
           </el-collapse-item>
           <el-collapse-item
-            :title="'仪表板背景'"
+            :title="$t('panel.panel_background')"
             name="panelBackground"
           >
             <background-selector />
           </el-collapse-item>
           <el-collapse-item
-            :title="'组件样式'"
+            :title="$t('panel.component_style')"
             name="componentStyle"
           >
             <component-style />
           </el-collapse-item>
           <el-collapse-item
-            :title="'组件配色'"
+            :title="$t('panel.component_color')"
             name="graphical"
           >
             <panel-color-selector @onColorChange="onColorChange" />
           </el-collapse-item>
           <el-collapse-item
-            :title="'图表标题'"
+            :title="$t('panel.chart_title')"
             name="table"
           >
             <view-title @onTextChange="onTextChange" />
           </el-collapse-item>
           <el-collapse-item
-            :title="'过滤组件'"
+            :title="$t('panel.filter_component')"
             name="filterComponent"
           >
             <FilterStyleSelector />
@@ -204,21 +204,21 @@ export default {
   font-weight: 700
 }
 
-.theme-slider-position{
+.theme-slider-position {
   height: 1px;
   position: absolute;
   left: 15px;
   right: 15px;
   top: 40px;
-  box-sizing:border-box;
+  box-sizing: border-box;
   border-bottom: 1px solid #e8eaed
 }
 
-::v-deep .el-collapse-item__header{
+::v-deep .el-collapse-item__header {
-  font-weight: 500!important;
+  font-weight: 500 !important;
-  font-size: 14px!important;
+  font-size: 14px !important;
   color: var(--TextPrimary, #1F2329);
-  padding: 0!important;
+  padding: 0 !important;
 }
 
 </style>

frontend/src/views/panel/subjectSetting/panelStyle/BackgroundSelector.vue

@@ -45,7 +45,7 @@
           :on-remove="handleRemove"
           :file-list="fileList"
         >
-          <i class="el-icon-plus"/>
+          <i class="el-icon-plus" />
         </el-upload>
         <el-dialog
           top="25vh"

frontend/src/views/panel/subjectSetting/panelStyle/FilterStyleSelector.vue

@@ -21,7 +21,8 @@
               <el-radio-button
                 :disabled="filterForm.vertical === 'center'"
                 label="center"
-              >{{ $t('chart.text_pos_center') }}</el-radio-button>
+              >{{ $t('chart.text_pos_center') }}
+              </el-radio-button>
               <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
@@ -38,11 +39,12 @@
               <el-radio-button
                 :disabled="filterForm.horizontal === 'center'"
                 label="center"
-              >{{ $t('chart.text_pos_center') }}</el-radio-button>
+              >{{ $t('chart.text_pos_center') }}
+              </el-radio-button>
             </el-radio-group>
           </el-form-item>
           <el-form-item
-            :label="'标题颜色'"
+            :label="$t('panel.title_color')"
             class="form-item"
           >
             <el-color-picker
@@ -52,13 +54,13 @@
               @change="themeChange('color')"
             />
           </el-form-item>
-          <el-divider>输入框样式(颜色)</el-divider>
+          <el-divider>{{ $t('panel.input_style') }}</el-divider>
           <el-row style="height: 40px;overflow: hidden;">
             <el-col
               :span="4"
               style="padding-left: 10px;padding-top: 8px"
             >
-              边框
+              {{ $t('panel.board') }}
             </el-col>
             <el-col
               :span="4"
@@ -76,7 +78,7 @@
               :span="4"
               style="padding-left: 10px;padding-top: 8px"
             >
-              文字
+              {{ $t('panel.text') }}
             </el-col>
             <el-col
               :span="4"
@@ -94,7 +96,7 @@
               :span="4"
               style="padding-left: 10px;padding-top: 8px"
             >
-              背景
+              {{ $t('panel.board_background') }}
             </el-col>
             <el-col
               :span="4"
@@ -123,8 +125,7 @@ import bus from '@/utils/bus'
 
 export default {
   name: 'FilterStyleSelector',
-  props: {
+  props: {},
-  },
   data() {
     return {
       filterForm: {},
@@ -159,7 +160,7 @@ export default {
 </script>
 
 <style scoped>
-.shape-item{
+.shape-item {
   padding: 6px;
   border: none;
   width: 100%;
@@ -167,33 +168,40 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-.form-item-slider ::v-deep .el-form-item__label{
+
+.form-item-slider ::v-deep .el-form-item__label {
   font-size: 12px;
   line-height: 38px;
 }
-.form-item ::v-deep .el-form-item__label{
+
+.form-item ::v-deep .el-form-item__label {
   font-size: 12px;
 }
-.el-select-dropdown__item{
+
+.el-select-dropdown__item {
   padding: 0 20px;
 }
-span{
+
+span {
   font-size: 12px
 }
-.el-form-item{
+
+.el-form-item {
   margin-bottom: 6px;
 }
 
-.switch-style{
+.switch-style {
   position: absolute;
   right: 10px;
   margin-top: -4px;
 }
-.color-picker-style{
+
+.color-picker-style {
   cursor: pointer;
   z-index: 1003;
 }
-.el-divider__text{
+
+.el-divider__text {
   font-size: 8px;
   font-weight: 400;
   color: rgb(144, 147, 153);

frontend/src/views/panel/subjectSetting/panelStyle/OverallSetting.vue

@@ -38,12 +38,20 @@
       <el-row class="margin-top20">
         <el-row class="custom-item-text-row">
           <span class="custom-item-text bl"> {{ $t('panel.refresh_frequency') }}</span>
+          <span class="custom-item-text bl">
+            <el-checkbox
+              v-model="overallSettingForm.refreshViewEnable"
+              class="el-input-refresh-loading"
+              @change="themeChange"
+            >{{ $t('panel.enable_refresh_view') }}</el-checkbox>
+          </span>
           <span class="custom-item-text br">
             <el-checkbox
               v-model="overallSettingForm.refreshViewLoading"
               class="el-input-refresh-loading"
+              :disabled="!overallSettingForm.refreshViewEnable"
               @change="themeChange"
-            >视图加载提示</el-checkbox>
+            >{{ $t('panel.enable_view_loading') }}</el-checkbox>
           </span>
         </el-row>
         <el-row class="function-area">
@@ -55,12 +63,14 @@
             controls-position="right"
             :min="1"
             :max="3600"
+            :disabled="!overallSettingForm.refreshViewEnable"
             @change="themeChange"
           />
           <el-select
             v-model="overallSettingForm.refreshUnit"
             class="el-input-refresh-unit margin-left8"
             size="mini"
+            :disabled="!overallSettingForm.refreshViewEnable"
             @change="themeChange"
           >
             <el-option