feat(仪表板): Tab组件支持轮播

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

@@ -103,6 +103,8 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
     }
     if (item.type === 'de-tabs') {
       item.style.fontSize = item.style.fontSize || 16
+      item.style.carouselEnable = item.style.carouselEnable || false
+      item.style.switchTime = item.style.switchTime || 5
     }
     if (item.type === 'custom') {
       item.options.manualModify = false

frontend/src/components/widget/deWidget/DeTabs.vue

@@ -272,6 +272,7 @@ export default {
   },
   data() {
     return {
+      timer: null,
       scrollLeft: 50,
       scrollTop: 10,
       // 需要展示属性设置的组件类型
@@ -393,6 +394,16 @@ export default {
     }
   },
   watch: {
+    'element.style.carouselEnable': {
+      handler(newVal, oldVla) {
+        this.initCarousel()
+      }
+    },
+    'element.style.switchTime': {
+      handler(newVal, oldVla) {
+        this.initCarousel()
+      }
+    },
     activeTabName: {
       handler(newVal, oldVla) {
         this.$store.commit('setTabActiveTabNameMap', { tabId: this.element.id, activeTabName: this.activeTabName })
@@ -439,10 +450,26 @@ export default {
     this.$store.commit('setTabActiveTabNameMap', { tabId: this.element.id, activeTabName: this.activeTabName })
     this.setContentThemeStyle()
   },
+  mounted() {
+    this.initCarousel()
+  },
   beforeDestroy() {
     bus.$off('add-new-tab', this.addNewTab)
   },
   methods: {
+    initCarousel() {
+      this.timer && clearInterval(this.timer)
+      if (this.element.style.carouselEnable) {
+        const switchTime = (this.element.style.switchTime || 5) * 1000
+        let switchCount = 1
+        // 轮播定时器
+        this.timer = setInterval(() => {
+          switchCount++
+          const nowIndex = switchCount % this.element.options.tabList.length
+          this.activeTabName = this.element.options.tabList[nowIndex].name
+        }, switchTime)
+      }
+    },
     initScroll() {
       this.scrollLeft = 50
       this.scrollTop = 10

frontend/src/components/widget/deWidget/TabStyle.vue

@@ -112,6 +112,36 @@
           <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
         </el-radio-group>
       </el-form-item>
+      <el-form-item :label="$t('panel.carousel')">
+        <el-row>
+          <el-col :span="6">
+            <el-checkbox
+              v-model="styleInfo.carouselEnable"
+              size="mini"
+            >{{ $('common.enable') }}
+            </el-checkbox>
+          </el-col>
+          <el-col
+            :span="8"
+            style="text-align: right;padding-right: 10px"
+          >
+            {{ $('panel.switch_time') }}
+          </el-col>
+          <el-col :span="10">
+            <el-input
+              v-model="styleInfo.switchTime"
+              :disabled="!styleInfo.carouselEnable"
+              type="number"
+              size="mini"
+              :min="2"
+              class="hide-icon-number"
+            >
+              <template slot="append">S</template>
+            </el-input>
+          </el-col>
+
+        </el-row>
+      </el-form-item>
     </el-form>
     <i
       slot="reference"

frontend/src/lang/en.js

@@ -1875,10 +1875,12 @@ export default {
     back_parent: 'Back to previous'
   },
   panel: {
+    carousel: 'Carousel',
+    switch_time: 'Switch time',
     position_adjust: 'Position',
     space_top: 'Top',
     space_left: 'Left',
-    space_width: 'Widht',
+    space_width: 'Width',
     space_height: 'Height',
     to_top: 'To Top',
     down: 'Down',

frontend/src/lang/tw.js

@@ -1875,6 +1875,8 @@ export default {
     back_parent: '返回上一級'
   },
   panel: {
+    carousel: '輪播',
+    switch_time: '切換時間',
     position_adjust: '位置',
     space_top: '上',
     space_left: '左',

frontend/src/lang/zh.js

@@ -1875,6 +1875,8 @@ export default {
     back_parent: '返回上一级'
   },
   panel: {
+    carousel: '轮播',
+    switch_time: '切换时间',
     position_adjust: '位置',
     space_top: '上',
     space_left: '左',

frontend/src/views/chart/view/ChartEdit.vue

@@ -192,7 +192,7 @@
                               @command="chartFieldEdit"
                             >
                               <span class="el-dropdown-link">
-                                <i class="el-icon-s-tools" />
+                                <i class="el-icon-s-tools"/>
                               </span>
                               <el-dropdown-menu slot="dropdown">
                                 <el-dropdown-item
@@ -267,7 +267,7 @@
                               @command="chartFieldEdit"
                             >
                               <span class="el-dropdown-link">
-                                <i class="el-icon-s-tools" />
+                                <i class="el-icon-s-tools"/>
                               </span>
                               <el-dropdown-menu slot="dropdown">
                                 <el-dropdown-item
@@ -362,7 +362,7 @@
                           style="padding: 6px;"
                         >
                           {{ $t('chart.change_chart_type') }}
-                          <i class="el-icon-caret-bottom" />
+                          <i class="el-icon-caret-bottom"/>
                         </el-button>
                       </el-popover>
                     </span>
@@ -490,8 +490,8 @@
                     >
                       <span class="data-area-label">
                         <span v-if="view.type && view.type.includes('table')">{{
-                          $t('chart.drag_block_table_data_column')
+                            $t('chart.drag_block_table_data_column')
-                        }}</span>
+                          }}</span>
                         <span
                           v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall' || view.type === 'area')"
                         >{{ $t('chart.drag_block_type_axis') }}</span>
@@ -499,18 +499,18 @@
                           v-else-if="view.type && view.type.includes('pie')"
                         >{{ $t('chart.drag_block_pie_label') }}</span>
                         <span v-else-if="view.type && view.type.includes('funnel')">{{
-                          $t('chart.drag_block_funnel_split')
+                            $t('chart.drag_block_funnel_split')
-                        }}</span>
+                          }}</span>
                         <span v-else-if="view.type && view.type.includes('radar')">{{
-                          $t('chart.drag_block_radar_label')
+                            $t('chart.drag_block_radar_label')
-                        }}</span>
+                          }}</span>
                         <span v-else-if="view.type && view.type === 'map'">{{ $t('chart.area') }}</span>
                         <span v-else-if="view.type && view.type.includes('treemap')">{{
-                          $t('chart.drag_block_treemap_label')
+                            $t('chart.drag_block_treemap_label')
-                        }}</span>
+                          }}</span>
                         <span v-else-if="view.type && view.type === 'word-cloud'">{{
-                          $t('chart.drag_block_word_cloud_label')
+                            $t('chart.drag_block_word_cloud_label')
-                        }}</span>
+                          }}</span>
                         <span v-else-if="view.type && view.type === 'label'">{{ $t('chart.drag_block_label') }}</span>
                         <span v-show="view.type !== 'richTextView'"> / </span>
                         <span v-if="view.type && view.type !== 'table-info'">{{ $t('chart.dimension') }}</span>
@@ -633,8 +633,8 @@
                     >
                       <span class="data-area-label">
                         <span v-if="view.type && view.type.includes('table')">{{
-                          $t('chart.drag_block_table_data_column')
+                            $t('chart.drag_block_table_data_column')
-                        }}</span>
+                          }}</span>
                         <span
                           v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'waterfall' || view.type === 'area')"
                         >{{ $t('chart.drag_block_value_axis') }}</span>
@@ -642,30 +642,30 @@
                           v-else-if="view.type && view.type.includes('pie')"
                         >{{ $t('chart.drag_block_pie_angel') }}</span>
                         <span v-else-if="view.type && view.type.includes('funnel')">{{
-                          $t('chart.drag_block_funnel_width')
+                            $t('chart.drag_block_funnel_width')
-                        }}</span>
+                          }}</span>
                         <span v-else-if="view.type && view.type.includes('radar')">{{
-                          $t('chart.drag_block_radar_length')
+                            $t('chart.drag_block_radar_length')
-                        }}</span>
+                          }}</span>
                         <span v-else-if="view.type && view.type.includes('gauge')">{{
-                          $t('chart.drag_block_gauge_angel')
+                            $t('chart.drag_block_gauge_angel')
-                        }}</span>
+                          }}</span>
                         <span
                           v-else-if="view.type && view.type.includes('text')"
                         >{{ $t('chart.drag_block_label_value') }}</span>
                         <span v-else-if="view.type && view.type === 'map'">{{ $t('chart.chart_data') }}</span>
                         <span v-else-if="view.type && view.type.includes('tree')">{{
-                          $t('chart.drag_block_treemap_size')
+                            $t('chart.drag_block_treemap_size')
-                        }}</span>
+                          }}</span>
                         <span v-else-if="view.type && view.type === 'chart-mix'">{{
-                          $t('chart.drag_block_value_axis_main')
+                            $t('chart.drag_block_value_axis_main')
-                        }}</span>
+                          }}</span>
                         <span
                           v-else-if="view.type && view.type === 'liquid'"
                         >{{ $t('chart.drag_block_progress') }}</span>
                         <span v-else-if="view.type && view.type === 'word-cloud'">{{
-                          $t('chart.drag_block_word_cloud_size')
+                            $t('chart.drag_block_word_cloud_size')
-                        }}</span>
+                          }}</span>
                         <span v-show="view.type !== 'richTextView'"> / </span>
                         <span>{{ $t('chart.quota') }}</span>
                         <i
@@ -1116,7 +1116,7 @@
           class="padding-tab"
           style="width: 350px;"
         >
-          <position-adjust />
+          <position-adjust/>
         </el-tab-pane>
 
       </el-tabs>
@@ -1268,7 +1268,7 @@
       width="800px"
       class="dialog-css"
     >
-      <quota-filter-editor :item="quotaItem" />
+      <quota-filter-editor :item="quotaItem"/>
       <div
         slot="footer"
         class="dialog-footer"
@@ -1295,7 +1295,7 @@
       width="800px"
       class="dialog-css"
     >
-      <dimension-filter-editor :item="dimensionItem" />
+      <dimension-filter-editor :item="dimensionItem"/>
       <div
         slot="footer"
         class="dialog-footer"
@@ -1655,14 +1655,12 @@ import ScrollCfg from '@/views/chart/components/senior/ScrollCfg'
 import ChartFieldEdit from '@/views/chart/view/ChartFieldEdit'
 import CalcChartFieldEdit from '@/views/chart/view/CalcChartFieldEdit'
 import { equalsAny } from '@/utils/StringUtils'
-import MarginSelector from '@/views/chart/components/componentStyle/MarginSelector'
 import PositionAdjust from '@/views/chart/view/PositionAdjust'
 
 export default {
   name: 'ChartEdit',
   components: {
     PositionAdjust,
-    MarginSelector,
     ScrollCfg,
     CalcChartFieldEdit,
     ChartFieldEdit,