Merge pull request #12282 from dataease/pr@dev-v2@feat_picture-group-carouse

Pr@dev v2@feat picture group carouse

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>

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>

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;
   }
 }
 

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,37 @@ 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(() => 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 +182,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 +209,7 @@ const calcData = (view: Chart, callback) => {
           dvMainStore.setViewDataDetails(element.value.id, res)
           initReady.value = true
           initCurFields(res)
+          initCarousel()
         }
         callback?.()
         nextTick(() => {
@@ -197,6 +244,13 @@ const renderChart = viewInfo => {
   //do renderView
 }
 
+onBeforeMount(() => {
+  if (carouselTimer) {
+    clearInterval(carouselTimer)
+    carouselTimer = null
+  }
+})
+
 defineExpose({
   calcData,
   renderChart

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>