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') }}
+
+
+
+ S
+
+
+
+
+
-
+
-
+
{{ $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"
>
-
+