From 0c6c1c843c482212f9ca166eee943f828032c05e Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Sun, 30 Jun 2024 16:30:45 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):?=
 =?UTF-8?q?=20=E8=B7=91=E9=A9=AC=E7=81=AF=E4=BC=98=E5=8C=96=E5=88=9D?=
 =?UTF-8?q?=E5=A7=8B=E5=8C=96=E4=BD=8D=E7=BD=AE=E7=AD=89=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scroll-text/Component.vue                 | 35 ++++++++++++++++---
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/core/core-frontend/src/custom-component/scroll-text/Component.vue b/core/core-frontend/src/custom-component/scroll-text/Component.vue
index 529f9e3ca9..967be79680 100644
--- a/core/core-frontend/src/custom-component/scroll-text/Component.vue
+++ b/core/core-frontend/src/custom-component/scroll-text/Component.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { keycodes } from '@/utils/DeShortcutKey.js'
 import eventBus from '@/utils/eventBus'
-import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import { toRefs } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
@@ -12,6 +12,9 @@ const isCtrlDown = ref(false)
 
 const emit = defineEmits(['input'])
 const text = ref(null)
+const textOut = ref(null)
+const scrollScale = ref('100%')
+let timeId = null
 
 const props = defineProps({
   propValue: {
@@ -113,6 +116,10 @@ const selectText = element => {
 }
 onBeforeUnmount(() => {
   eventBus.off('componentClick', onComponentClick)
+  if (timeId) {
+    clearInterval(timeId)
+    timeId = null
+  }
 })
 
 // 滚动速度已px为单位 注意 这里的总宽度是还原到缩放前的 这样不同缩放比例下的跑马灯视觉上滚动速度（按照比例）一致
@@ -124,15 +131,33 @@ const varStyle = computed(() => [
         : (text.value.clientWidth * 100) /
           canvasStyleData.value.scale /
           element.value.style.scrollSpeed
-    }s`
+    }s`,
+    '--scroll-scale': `${scrollScale.value}`
   }
 ])
 
+const init = () => {
+  timeId = setInterval(() => {
+    if (textOut.value && text.value) {
+      const result =
+        (element.value.style.width * canvasStyleData.value.scale) / text.value.clientWidth + '%'
+      console.log('===result=' + result)
+      scrollScale.value = result
+    } else {
+      scrollScale.value = '100%'
+    }
+  }, 1000)
+}
+
 const textStyle = computed(() => {
   return {
     verticalAlign: element.value['style'].verticalAlign
   }
 })
+
+onMounted(() => {
+  init()
+})
 </script>
 
 <template>
@@ -140,6 +165,7 @@ const textStyle = computed(() => {
     v-if="editMode == 'edit'"
     :style="varStyle"
     class="v-text"
+    ref="textOut"
     @keydown="handleKeydown"
     @keyup="handleKeyup"
   >
@@ -197,15 +223,14 @@ const textStyle = computed(() => {
 }
 .marquee-txt {
   display: inline-block;
-  padding-left: 100%; /* 从右至左开始滚动 */
   animation: marqueeAnimation var(--scroll-speed) linear infinite;
 }
 @keyframes marqueeAnimation {
   0% {
-    transform: translate(100%, 0);
+    transform: translate(var(--scroll-scale), 0);
   }
   100% {
-    transform: translate(-50%, 0);
+    transform: translate(-100%, 0);
   }
 }
 </style>