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

@@ -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,