From 5991e9c11f4df6ce6f5e7118001c9152842bc32b Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Tue, 22 Nov 2022 10:51:08 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20Tab?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=94=AF=E6=8C=81=E8=BD=AE=E6=92=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/canvas/utils/utils.js | 2 + .../src/components/widget/deWidget/DeTabs.vue | 27 ++++++++ .../components/widget/deWidget/TabStyle.vue | 30 +++++++++ frontend/src/lang/en.js | 4 +- frontend/src/lang/tw.js | 2 + frontend/src/lang/zh.js | 2 + frontend/src/views/chart/view/ChartEdit.vue | 62 +++++++++---------- 7 files changed, 96 insertions(+), 33 deletions(-) diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js index c81866fc7b..86918cf2e4 100644 --- a/frontend/src/components/canvas/utils/utils.js +++ b/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 diff --git a/frontend/src/components/widget/deWidget/DeTabs.vue b/frontend/src/components/widget/deWidget/DeTabs.vue index 99d655a4a2..b7560db60e 100644 --- a/frontend/src/components/widget/deWidget/DeTabs.vue +++ b/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 diff --git a/frontend/src/components/widget/deWidget/TabStyle.vue b/frontend/src/components/widget/deWidget/TabStyle.vue index a95cdae96b..e7d1d3d15f 100644 --- a/frontend/src/components/widget/deWidget/TabStyle.vue +++ b/frontend/src/components/widget/deWidget/TabStyle.vue @@ -112,6 +112,36 @@ {{ $t('chart.text_pos_right') }} + + + + {{ $('common.enable') }} + + + + {{ $('panel.switch_time') }} + + + + + + + + + - + - + {{ $t('chart.change_chart_type') }} - + @@ -490,8 +490,8 @@ > {{ - $t('chart.drag_block_table_data_column') - }} + $t('chart.drag_block_table_data_column') + }} {{ $t('chart.drag_block_type_axis') }} @@ -499,18 +499,18 @@ v-else-if="view.type && view.type.includes('pie')" >{{ $t('chart.drag_block_pie_label') }} {{ - $t('chart.drag_block_funnel_split') - }} + $t('chart.drag_block_funnel_split') + }} {{ - $t('chart.drag_block_radar_label') - }} + $t('chart.drag_block_radar_label') + }} {{ $t('chart.area') }} {{ - $t('chart.drag_block_treemap_label') - }} + $t('chart.drag_block_treemap_label') + }} {{ - $t('chart.drag_block_word_cloud_label') - }} + $t('chart.drag_block_word_cloud_label') + }} {{ $t('chart.drag_block_label') }} / {{ $t('chart.dimension') }} @@ -633,8 +633,8 @@ > {{ - $t('chart.drag_block_table_data_column') - }} + $t('chart.drag_block_table_data_column') + }} {{ $t('chart.drag_block_value_axis') }} @@ -642,30 +642,30 @@ v-else-if="view.type && view.type.includes('pie')" >{{ $t('chart.drag_block_pie_angel') }} {{ - $t('chart.drag_block_funnel_width') - }} + $t('chart.drag_block_funnel_width') + }} {{ - $t('chart.drag_block_radar_length') - }} + $t('chart.drag_block_radar_length') + }} {{ - $t('chart.drag_block_gauge_angel') - }} + $t('chart.drag_block_gauge_angel') + }} {{ $t('chart.drag_block_label_value') }} {{ $t('chart.chart_data') }} {{ - $t('chart.drag_block_treemap_size') - }} + $t('chart.drag_block_treemap_size') + }} {{ - $t('chart.drag_block_value_axis_main') - }} + $t('chart.drag_block_value_axis_main') + }} {{ $t('chart.drag_block_progress') }} {{ - $t('chart.drag_block_word_cloud_size') - }} + $t('chart.drag_block_word_cloud_size') + }} / {{ $t('chart.quota') }} - + @@ -1268,7 +1268,7 @@ width="800px" class="dialog-css" > - +