From 3ab1b81f676d8a681a4b2b2695688f8cfc1c05bc Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 6 Aug 2024 17:15:38 +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=20#9566?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/TabCarouselSetting.vue             | 71 +++++++++++++++++++
 .../src/custom-component/component-list.ts    |  7 ++
 .../src/custom-component/de-tabs/Attr.vue     |  9 ++-
 .../custom-component/de-tabs/Component.vue    | 25 +++++++
 core/core-frontend/src/utils/canvasUtils.ts   |  3 +
 5 files changed, 114 insertions(+), 1 deletion(-)
 create mode 100644 core/core-frontend/src/custom-component/common/TabCarouselSetting.vue

diff --git a/core/core-frontend/src/custom-component/common/TabCarouselSetting.vue b/core/core-frontend/src/custom-component/common/TabCarouselSetting.vue
new file mode 100644
index 0000000000..37036c89ec
--- /dev/null
+++ b/core/core-frontend/src/custom-component/common/TabCarouselSetting.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed, toRefs } from 'vue'
+import { ElFormItem, ElIcon, ElInputNumber } from 'element-plus-secondary'
+import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
+import CollapseSwitchItem from '../../components/collapse-switch-item/src/CollapseSwitchItem.vue'
+import Icon from '../../components/icon-custom/src/Icon.vue'
+
+const snapshotStore = snapshotStoreWithOut()
+
+const props = withDefaults(
+  defineProps<{
+    themes?: EditorTheme
+    element: any
+  }>(),
+  {
+    themes: 'dark'
+  }
+)
+const { themes, element } = toRefs(props)
+
+const carouselInfo = computed(() => {
+  return element.value.carousel
+})
+
+const onSettingChange = () => {
+  snapshotStore.recordSnapshotCache('renderChart')
+}
+</script>
+
+<template>
+  <collapse-switch-item
+    :themes="themes"
+    v-model="carouselInfo.enable"
+    name="carouselInfo"
+    title="轮询"
+  >
+    <el-row class="custom-row">
+      <el-form label-position="top">
+        <el-form-item
+          class="form-item"
+          :class="'form-item-' + themes"
+          style="width: 50%; margin-bottom: 8px"
+        >
+          <span style="font-size: 12px">轮询时间</span>
+          <el-tooltip class="item" :effect="themes" placement="top">
+            <template #content>
+              <div>Tab轮询退出编辑模式才开生效</div>
+            </template>
+            <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
+              <Icon name="icon_info_outlined" />
+            </el-icon>
+          </el-tooltip>
+
+          <el-input
+            v-model="carouselInfo.time"
+            :effect="themes"
+            type="number"
+            :min="1"
+            :max="3600"
+            :disabled="!carouselInfo.enable"
+            @change="onSettingChange"
+          >
+            <template #append> 秒 </template>
+          </el-input>
+        </el-form-item>
+      </el-form>
+    </el-row>
+  </collapse-switch-item>
+</template>
+
+<style scoped lang="less"></style>
diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts
index 0d6da72970..193c19bbe2 100644
--- a/core/core-frontend/src/custom-component/component-list.ts
+++ b/core/core-frontend/src/custom-component/component-list.ts
@@ -8,6 +8,12 @@ export const commonStyle = {
   opacity: 1
 }
 
+// 轮询设置
+export const BASE_CAROUSEL = {
+  enable: false,
+  time: 10
+}
+
 export const BASE_EVENTS = {
   checked: false,
   showTips: false,
@@ -200,6 +206,7 @@ export const commonAttr = {
   animations: [],
   canvasId: 'canvas-main',
   events: BASE_EVENTS,
+  carousel: BASE_CAROUSEL,
   multiDimensional: MULTI_DIMENSIONAL, // 3d 设置
   groupStyle: {}, // 当一个组件成为 Group 的子组件时使用
   isLock: false, // 是否锁定组件
diff --git a/core/core-frontend/src/custom-component/de-tabs/Attr.vue b/core/core-frontend/src/custom-component/de-tabs/Attr.vue
index 067e109e56..3a4563ab17 100644
--- a/core/core-frontend/src/custom-component/de-tabs/Attr.vue
+++ b/core/core-frontend/src/custom-component/de-tabs/Attr.vue
@@ -3,6 +3,7 @@ import CommonAttr from '@/custom-component/common/CommonAttr.vue'
 import { toRefs } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
+import TabCarouselSetting from '@/custom-component/common/TabCarouselSetting.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -25,7 +26,13 @@ const { curComponent } = storeToRefs(dvMainStore)
       :element="curComponent"
       :background-color-picker-width="197"
       :background-border-select-width="197"
-    />
+    >
+      <TabCarouselSetting
+        v-if="curComponent && curComponent.carousel"
+        :element="curComponent"
+        :themes="themes"
+      ></TabCarouselSetting>
+    </CommonAttr>
   </div>
 </template>
 
diff --git a/core/core-frontend/src/custom-component/de-tabs/Component.vue b/core/core-frontend/src/custom-component/de-tabs/Component.vue
index 98b2ae0e0d..a3f7f6534b 100644
--- a/core/core-frontend/src/custom-component/de-tabs/Component.vue
+++ b/core/core-frontend/src/custom-component/de-tabs/Component.vue
@@ -124,6 +124,7 @@ import { getPanelAllLinkageInfo } from '@/api/visualization/linkage'
 const dvMainStore = dvMainStoreWithOut()
 const { tabMoveInActiveId, bashMatrixInfo, editMode, mobileInPc } = storeToRefs(dvMainStore)
 const tabComponentRef = ref(null)
+let carouselTimer = null
 
 const props = defineProps({
   canvasStyleData: {
@@ -401,6 +402,25 @@ const reShow = () => {
   })
 }
 
+const initCarousel = () => {
+  carouselTimer && clearInterval(carouselTimer)
+  carouselTimer = null
+  if (!isEditMode.value) {
+    if (element.value.carousel?.enable) {
+      const switchTime = (element.value.carousel.time || 5) * 1000
+      let switchCount = 1
+      // 轮播定时器
+      carouselTimer = setInterval(() => {
+        const nowIndex = switchCount % element.value.propValue.length
+        switchCount++
+        nextTick(() => {
+          editableTabsValue.value = element.value.propValue[nowIndex].name
+        })
+      }, switchTime)
+    }
+  }
+}
+
 onMounted(() => {
   if (element.value.propValue.length > 0) {
     editableTabsValue.value = element.value.propValue[0].name
@@ -410,12 +430,17 @@ onMounted(() => {
   eventBus.on('onTabMoveOut-' + element.value.id, componentMoveOut)
   eventBus.on('onTabSortChange-' + element.value.id, reShow)
   currentInstance = getCurrentInstance()
+  initCarousel()
 })
 
 onBeforeMount(() => {
   eventBus.off('onTabMoveIn-' + element.value.id, componentMoveIn)
   eventBus.off('onTabMoveOut-' + element.value.id, componentMoveOut)
   eventBus.off('onTabSortChange-' + element.value.id, reShow)
+  if (carouselTimer) {
+    clearInterval(carouselTimer)
+    carouselTimer = null
+  }
 })
 </script>
 <style lang="less" scoped>
diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts
index 2bc98ab938..9f65374438 100644
--- a/core/core-frontend/src/utils/canvasUtils.ts
+++ b/core/core-frontend/src/utils/canvasUtils.ts
@@ -1,6 +1,7 @@
 import { cloneDeep } from 'lodash-es'
 import componentList, {
   ACTION_SELECTION,
+  BASE_CAROUSEL,
   BASE_EVENTS,
   COMMON_COMPONENT_BACKGROUND_DARK,
   COMMON_COMPONENT_BACKGROUND_LIGHT,
@@ -153,9 +154,11 @@ export function historyAdaptor(
     if (componentItem.component === 'Picture') {
       componentItem.style['adaptation'] = componentItem.style['adaptation'] || 'adaptation'
     }
+    // public
     componentItem['maintainRadio'] = componentItem['maintainRadio'] || false
     componentItem['multiDimensional'] =
       componentItem['multiDimensional'] || deepCopy(MULTI_DIMENSIONAL)
+    componentItem['carousel'] = componentItem['carousel'] || deepCopy(BASE_CAROUSEL)
     componentItem['aspectRatio'] = componentItem['aspectRatio'] || 1
     if (componentItem.component === 'UserView') {
       componentItem.actionSelection = componentItem.actionSelection || deepCopy(ACTION_SELECTION)