From 7a1f17f68b8dceaece48ebcd32da96f34355ed96 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 19 Sep 2024 13:30:36 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E7=BB=84=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

---
 ...arouselSetting.vue => CarouselSetting.vue} |  3 +-
 .../custom-component/common/CommonAttr.vue    |  8 +--
 .../custom-component/picture-group/Attr.vue   |  2 +-
 .../picture-group/Component.vue               | 64 +++++++++++++++++--
 .../editor/editor-senior/Senior.vue           |  9 ++-
 5 files changed, 73 insertions(+), 13 deletions(-)
 rename core/core-frontend/src/custom-component/common/{TabCarouselSetting.vue => CarouselSetting.vue} (93%)

diff --git a/core/core-frontend/src/custom-component/common/TabCarouselSetting.vue b/core/core-frontend/src/custom-component/common/CarouselSetting.vue
similarity index 93%
rename from core/core-frontend/src/custom-component/common/TabCarouselSetting.vue
rename to core/core-frontend/src/custom-component/common/CarouselSetting.vue
index dd97e27503..f7e52aaea4 100644
--- a/core/core-frontend/src/custom-component/common/TabCarouselSetting.vue
+++ b/core/core-frontend/src/custom-component/common/CarouselSetting.vue
@@ -61,7 +61,8 @@ const handleInput = value => {
           <span style="font-size: 12px">轮播时间（秒）</span>
           <el-tooltip class="item" :effect="themes" placement="top">
             <template #content>
-              <div>Tab轮播退出编辑模式才开生效</div>
+              <div>轮播退出编辑模式才开生效</div>
+              <div v-if="element.innerType === 'picture-group'">启用条件样式后，轮播失效</div>
             </template>
             <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
               <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
diff --git a/core/core-frontend/src/custom-component/common/CommonAttr.vue b/core/core-frontend/src/custom-component/common/CommonAttr.vue
index ad5de576e3..6b72fd10dc 100644
--- a/core/core-frontend/src/custom-component/common/CommonAttr.vue
+++ b/core/core-frontend/src/custom-component/common/CommonAttr.vue
@@ -10,7 +10,7 @@ import elementResizeDetectorMaker from 'element-resize-detector'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import CommonStyleSet from '@/custom-component/common/CommonStyleSet.vue'
 import CommonEvent from '@/custom-component/common/CommonEvent.vue'
-import TabCarouselSetting from '@/custom-component/common/TabCarouselSetting.vue'
+import CarouselSetting from '@/custom-component/common/CarouselSetting.vue'
 import CommonBorderSetting from '@/custom-component/common/CommonBorderSetting.vue'
 import CollapseSwitchItem from '../../components/collapse-switch-item/src/CollapseSwitchItem.vue'
 const snapshotStore = snapshotStoreWithOut()
@@ -197,11 +197,7 @@ const stopEvent = e => {
           @onStyleAttrChange="onStyleAttrChange"
         ></common-border-setting>
       </collapse-switch-item>
-      <TabCarouselSetting
-        v-if="carouselShow"
-        :element="element"
-        :themes="themes"
-      ></TabCarouselSetting>
+      <CarouselSetting v-if="carouselShow" :element="element" :themes="themes"></CarouselSetting>
     </el-collapse>
   </div>
 </template>
diff --git a/core/core-frontend/src/custom-component/picture-group/Attr.vue b/core/core-frontend/src/custom-component/picture-group/Attr.vue
index edc64b1053..a318a73ae0 100644
--- a/core/core-frontend/src/custom-component/picture-group/Attr.vue
+++ b/core/core-frontend/src/custom-component/picture-group/Attr.vue
@@ -310,7 +310,7 @@ onBeforeUnmount(() => {
 
 .form-item-custom {
   .ed-radio {
-    margin-right: 4px !important;
+    margin-right: 2px !important;
   }
 }
 
diff --git a/core/core-frontend/src/custom-component/picture-group/Component.vue b/core/core-frontend/src/custom-component/picture-group/Component.vue
index 1b43374342..5ed5b64754 100644
--- a/core/core-frontend/src/custom-component/picture-group/Component.vue
+++ b/core/core-frontend/src/custom-component/picture-group/Component.vue
@@ -10,7 +10,17 @@
 </template>
 
 <script setup lang="ts">
-import { CSSProperties, computed, nextTick, toRefs, reactive, ref, PropType } from 'vue'
+import {
+  CSSProperties,
+  computed,
+  nextTick,
+  toRefs,
+  reactive,
+  ref,
+  PropType,
+  watch,
+  onBeforeMount
+} from 'vue'
 import { imgUrlTrans } from '@/utils/imgUtils'
 import eventBus from '@/utils/eventBus'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
@@ -19,14 +29,15 @@ import { parseJson } from '@/views/chart/components/js/util'
 import { mappingColor } from '@/views/chart/components/js/panel/common/common_table'
 import { storeToRefs } from 'pinia'
 const dvMainStore = dvMainStoreWithOut()
-const { canvasViewInfo } = storeToRefs(dvMainStore)
+const { canvasViewInfo, editMode, mobileInPc } = storeToRefs(dvMainStore)
 const state = reactive({
   emptyValue: '-',
   data: null,
   viewDataInfo: null,
   showUrl: null,
   firstRender: true,
-  previewFirstRender: true
+  previewFirstRender: true,
+  curImgList: []
 })
 const initReady = ref(true)
 const props = defineProps({
@@ -38,6 +49,11 @@ const props = defineProps({
       }
     }
   },
+  showPosition: {
+    required: false,
+    type: String,
+    default: 'preview'
+  },
   view: {
     type: Object as PropType<ChartObj>,
     default() {
@@ -52,8 +68,39 @@ const errMsg = ref('')
 const dataRowSelect = ref({})
 const dataRowNameSelect = ref({})
 const dataRowFiledName = ref([])
+let carouselTimer = null
+const { element, view, showPosition } = toRefs(props)
 
-const { element, view } = toRefs(props)
+const isEditMode = computed(
+  () => editMode.value === 'edit' && !showPosition.value.includes('canvas') && !mobileInPc.value
+)
+
+watch(
+  () => isEditMode.value,
+  () => {
+    initCarousel()
+  }
+)
+
+const initCarousel = () => {
+  carouselTimer && clearInterval(carouselTimer)
+  carouselTimer = null
+  const picLength = element.value.propValue.urlList?.length || 0
+  const { threshold } = parseJson(view.value.senior)
+  // 非编辑状态 未启用条件样式 存在图片 启用轮播
+  if (!isEditMode.value && !threshold.enable && picLength > 0 && element.value.carousel?.enable) {
+    const switchTime = (element.value.carousel.time || 5) * 1000
+    let switchCount = 1
+    // 轮播定时器
+    carouselTimer = setInterval(() => {
+      const nowIndex = switchCount % element.value.propValue.urlList.length
+      switchCount++
+      nextTick(() => {
+        state.showUrl = element.value.propValue.urlList[nowIndex].url
+      })
+    }, switchTime)
+  }
+}
 
 const imageAdapter = computed(() => {
   const style = {
@@ -137,6 +184,7 @@ const withInit = () => {
   if (element.value.propValue['urlList'] && element.value.propValue['urlList'].length > 0) {
     state.showUrl = element.value.propValue['urlList'][0].url
   }
+  initCarousel()
 }
 
 const calcData = (view: Chart, callback) => {
@@ -163,6 +211,7 @@ const calcData = (view: Chart, callback) => {
           dvMainStore.setViewDataDetails(element.value.id, res)
           initReady.value = true
           initCurFields(res)
+          initCarousel()
         }
         callback?.()
         nextTick(() => {
@@ -197,6 +246,13 @@ const renderChart = viewInfo => {
   //do renderView
 }
 
+onBeforeMount(() => {
+  if (carouselTimer) {
+    clearInterval(carouselTimer)
+    carouselTimer = null
+  }
+})
+
 defineExpose({
   calcData,
   renderChart
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue
index 5a0d2f5040..4565d4ef29 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue
@@ -31,9 +31,11 @@ import { BASE_VIEW_CONFIG } from '../util/chart'
 import { cloneDeep, defaultsDeep } from 'lodash-es'
 import BubbleAnimateCfg from '@/views/chart/components/editor/editor-senior/components/BubbleAnimateCfg.vue'
 import { XpackComponent } from '@/components/plugin'
+import CarouselSetting from '@/custom-component/common/CarouselSetting.vue'
 const dvMainStore = dvMainStoreWithOut()
 
-const { nowPanelTrackInfo, nowPanelJumpInfo, dvInfo, componentData } = storeToRefs(dvMainStore)
+const { nowPanelTrackInfo, nowPanelJumpInfo, dvInfo, componentData, curComponent } =
+  storeToRefs(dvMainStore)
 
 const { t } = useI18n()
 const linkJumpRef = ref(null)
@@ -422,6 +424,11 @@ const removeJumpSenior = () => {
               @onBubbleAnimateChange="onBubbleAnimateChange"
             />
           </collapse-switch-item>
+          <carousel-setting
+            v-if="curComponent?.innerType === 'picture-group'"
+            :element="curComponent"
+            :themes="themes"
+          ></carousel-setting>
         </el-collapse>
       </el-row>
     </div>

From 8dad50b4dab5b145ed9afb9213311b031736cbbc Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 19 Sep 2024 13:37:52 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E7=BB=84=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

---
 .../src/custom-component/picture-group/Component.vue          | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/core/core-frontend/src/custom-component/picture-group/Component.vue b/core/core-frontend/src/custom-component/picture-group/Component.vue
index 5ed5b64754..9668c91c9c 100644
--- a/core/core-frontend/src/custom-component/picture-group/Component.vue
+++ b/core/core-frontend/src/custom-component/picture-group/Component.vue
@@ -71,9 +71,7 @@ const dataRowFiledName = ref([])
 let carouselTimer = null
 const { element, view, showPosition } = toRefs(props)
 
-const isEditMode = computed(
-  () => editMode.value === 'edit' && !showPosition.value.includes('canvas') && !mobileInPc.value
-)
+const isEditMode = computed(() => showPosition.value.includes('canvas') && !mobileInPc.value)
 
 watch(
   () => isEditMode.value,