feat(数据大屏): 跑马灯组件支持首位衔接滚动 #10197

core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue

@@ -1586,6 +1586,7 @@ defineExpose({
         @input="handleInput"
         :dv-info="dvInfo"
         :canvas-active="canvasActive"
+        :show-position="'edit'"
       />
       <component
         v-else-if="item.component.includes('Svg')"
@@ -1603,6 +1604,7 @@ defineExpose({
         :dv-info="dvInfo"
         :active="item.id === curComponentId"
         :canvas-active="canvasActive"
+        :show-position="'edit'"
       />
       <component
         v-else
@@ -1620,6 +1622,7 @@ defineExpose({
         :dv-info="dvInfo"
         :active="item.id === curComponentId"
         :canvas-active="canvasActive"
+        :show-position="'edit'"
       />
     </Shape>
     <!-- 右击菜单 -->

core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue

@@ -122,6 +122,7 @@ const {
 let currentInstance
 const component = ref(null)
 const emits = defineEmits(['userViewEnlargeOpen', 'datasetParamsInit', 'onPointClick'])
+const wrapperId = 'wrapper-outer-id-' + config.value.id
 
 const viewDemoInnerId = computed(() => 'enlarge-inner-content-' + config.value.id)
 const htmlToImage = () => {
@@ -343,6 +344,7 @@ const deepScale = computed(() => scale.value / 100)
   <div
     class="wrapper-outer"
     :class="showPosition + '-' + config.component"
+    :id="wrapperId"
     @mousedown="handleInnerMouseDown"
     @mouseenter="onMouseEnter"
     v-loading="downLoading"

core/core-frontend/src/custom-component/scroll-text/Component.vue

@@ -31,10 +31,15 @@ const props = defineProps({
         propValue: ''
       }
     }
+  },
+  showPosition: {
+    required: false,
+    type: String,
+    default: 'preview'
   }
 })
 
-const { element } = toRefs(props)
+const { element, showPosition } = toRefs(props)
 const dvMainStore = dvMainStoreWithOut()
 const { editMode, curComponent, canvasStyleData } = storeToRefs(dvMainStore)
 
@@ -140,17 +145,16 @@ const varStyle = computed(() => [
 
 const init = () => {
   timeId = setInterval(() => {
-    if (textOut.value && text.value) {
+    const outerId =
-      const textValue = text.value.clientWidth * 100
+      showPosition.value === 'edit'
-      const fontLength = document.getElementsByClassName('marquee-txt')[0]?.innerText?.length
+        ? 'shape-id-' + element.value.id
-      const fontSizeLength = fontLength * element.value.style.fontSize * canvasStyleData.value.scale
+        : 'wrapper-outer-id-' + element.value.id
-      if (textValue < fontSizeLength) {
+    const componentOut = document.getElementById(outerId)
-        scrollScale0.value = (textValue * 100) / textValue + '%'
+    if (componentOut && text.value) {
-        scrollScale100.value = '100%'
+      const textValue = text.value.clientWidth
-      } else {
+      const textOutValue = componentOut.clientWidth
-        scrollScale0.value = '100%'
+      scrollScale0.value = (textOutValue * 100) / textValue + '%'
-        scrollScale100.value = (-(fontSizeLength + 5000) * 100) / textValue + '%'
+      scrollScale100.value = '-100%'
-      }
     } else {
       scrollScale0.value = '100%'
       scrollScale100.value = '-100%'