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

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>

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, // 是否锁定组件

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>
 

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>

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)