Merge pull request #9855 from dataease/pr@dev-v2@feat_scroll-text2

feat(数据大屏): 优化跑马灯组件

core/core-frontend/src/assets/svg/dv-style-scroll-speed.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716538241941" class="icon" viewBox="0 0 1166 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4799" xmlns:xlink="http://www.w3.org/1999/xlink" width="227.734375" height="200"><path d="M1016.603881 149.959255A508.396905 508.396905 0 0 0 661.880392 0H47.123419a42.206376 42.206376 0 0 0-42.206376 42.206376 42.206376 42.206376 0 0 0 42.206376 42.206376h607.45527c235.764818 0 427.571694 191.806877 427.571695 427.571695S890.343507 939.577245 654.578689 939.577245s-427.571694-191.82798-427.571694-427.592798h105.51594a42.206376 42.206376 0 0 0 42.206376-42.206376 42.206376 42.206376 0 0 0-42.206376-42.206377H42.206376a42.206376 42.206376 0 0 0-42.206376 42.206377 42.206376 42.206376 0 0 0 42.206376 42.206376h100.387866a511.984447 511.984447 0 0 0 874.009639 362.046295 512.00555 512.00555 0 0 0 0-724.071487z" p-id="4800"></path><path d="M411.237827 298.166945a42.206376 42.206376 0 0 0 42.206376-42.206376 42.206376 42.206376 0 0 0-42.206376-42.206377H120.857958a42.206376 42.206376 0 0 0-42.206376 42.206377 42.206376 42.206376 0 0 0 42.206376 42.206376zM635.205962 232.388308a42.311892 42.311892 0 0 0-42.206376 42.206376v290.379868a42.311892 42.311892 0 0 0 42.206376 42.206377h228.737456a42.206376 42.206376 0 0 0 42.206377-42.206377 42.206376 42.206376 0 0 0-42.206377-42.206376h-186.657699V274.573581A42.206376 42.206376 0 0 0 635.205962 232.388308z" p-id="4801"></path></svg>

core/core-frontend/src/custom-component/common/CommonStyleSet.vue

@@ -84,7 +84,7 @@
                 @change="changeStyle"
               >
                 <template #prefix>
-                  <el-icon>
+                  <el-icon :class="{ 'dark-icon': themes === 'dark' }">
                     <Icon :name="styleOptionKey.icon" />
                   </el-icon>
                 </template>
@@ -266,12 +266,28 @@ const styleMounted = ref({
   opacity: 1,
   fontSize: 22,
   activeFontSize: 22,
+  letterSpacing: 0,
+  scrollSpeed: 0,
   fontWeight: 'normal',
   fontStyle: 'normal',
   textAlign: 'center',
   color: '#000000'
 })
 
+const scrollSpeedList = [
+  { name: '停止', value: 0 },
+  { name: '1', value: 20 },
+  { name: '2', value: 18 },
+  { name: '3', value: 16 },
+  { name: '4', value: 14 },
+  { name: '5', value: 12 },
+  { name: '6', value: 10 },
+  { name: '7', value: 8 },
+  { name: '8', value: 6 },
+  { name: '9', value: 4 },
+  { name: '10', value: 2 }
+]
+
 const opacitySizeList = [
   { name: '0.1', value: 0.1 },
   { name: '0.2', value: 0.2 },
@@ -310,6 +326,17 @@ const styleColorKeyArray = [
   { value: 'backgroundColor', label: '背景色', width: 90, icon: 'dv-style-backgroundColor' }
 ]
 
+const letterSpacingList = computed(() => {
+  const arr = []
+  for (let i = 0; i <= 60; i = i + 1) {
+    arr.push({
+      name: i + '',
+      value: i
+    })
+  }
+  return arr
+})
+
 const fontSizeList = computed(() => {
   const arr = []
   for (let i = 10; i <= 60; i = i + 1) {
@@ -351,6 +378,13 @@ const borderStyleList = [
 
 //大小随画布缩放动态变化
 const styleOptionMountedKeyArray = [
+  {
+    value: 'letterSpacing',
+    label: '字间距',
+    customOption: letterSpacingList.value,
+    width: '90px',
+    icon: 'dv-style-letterSpacing'
+  },
   {
     value: 'fontSize',
     label: '字体大小',
@@ -369,6 +403,13 @@ const styleOptionMountedKeyArray = [
 
 //大小不变
 const styleOptionKeyArray = [
+  {
+    value: 'scrollSpeed',
+    label: '滚动速度',
+    customOption: scrollSpeedList,
+    width: '90px',
+    icon: 'dv-style-scroll-speed'
+  },
   {
     value: 'opacity',
     label: '不透明度',

core/core-frontend/src/custom-component/component-group/TextGroup.vue

@@ -11,7 +11,7 @@ const props = defineProps({
   },
   dvModel: {
     type: String,
-    default: 'dv'
+    default: 'dataV'
   },
   element: {
     type: Object,
@@ -52,6 +52,7 @@ const newComponent = (componentName, innerType) => {
       v-on:click="newComponent('UserView', 'rich-text')"
     ></drag-component>
     <drag-component
+      v-if="dvModel === 'dataV'"
       :themes="themes"
       icon="dv-scroll-text"
       label="跑马灯"

core/core-frontend/src/custom-component/component-list.ts

@@ -386,7 +386,7 @@ const list = [
   },
   {
     component: 'CanvasBoard',
-    name: '图形',
+    name: '边框',
     label: '边框',
     propValue: '',
     icon: 'other_material_board',
@@ -497,7 +497,8 @@ const list = [
       letterSpacing: 0,
       color: '',
       padding: 4,
-      verticalAlign: 'middle'
+      verticalAlign: 'middle',
+      scrollSpeed: 0
     }
   }
 ]

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 { nextTick, onBeforeUnmount, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
 import { toRefs } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
@@ -112,17 +112,30 @@ const selectText = element => {
 onBeforeUnmount(() => {
   eventBus.off('componentClick', onComponentClick)
 })
+
+const varStyle = computed(() => [{ '--scroll-speed': `${element.value.style.scrollSpeed}s` }])
+
+const textStyle = computed(() => {
+  return {
+    verticalAlign: element.value['style'].verticalAlign
+  }
+})
 </script>
 
 <template>
-  <div v-if="editMode == 'edit'" class="v-text" @keydown="handleKeydown" @keyup="handleKeyup">
+  <div
+    v-if="editMode == 'edit'"
+    :style="varStyle"
+    class="v-text"
+    @keydown="handleKeydown"
+    @keyup="handleKeyup"
+  >
     <div
       ref="text"
-      class="marquee-txt"
       :contenteditable="canEdit"
-      :class="{ 'can-edit': canEdit }"
+      :class="{ 'can-edit': canEdit, 'marquee-txt': !canEdit }"
       tabindex="0"
-      :style="{ verticalAlign: element['style'].verticalAlign }"
+      :style="textStyle"
       @dblclick="setEdit"
       @paste="clearStyle"
       @mousedown="handleMousedown"
@@ -132,11 +145,7 @@ onBeforeUnmount(() => {
     ></div>
   </div>
   <div v-else class="v-text preview">
-    <div
+    <div class="marquee-txt" :style="textStyle" v-html="element['propValue']"></div>
-      class="marquee-txt"
-      :style="{ verticalAlign: element['style'].verticalAlign }"
-      v-html="element['propValue']"
-    ></div>
   </div>
 </template>
 
@@ -175,7 +184,7 @@ onBeforeUnmount(() => {
 .marquee-txt {
   display: inline-block;
   padding-left: 100%; /* 从右至左开始滚动 */
-  animation: marqueeAnimation 10s linear infinite;
+  animation: marqueeAnimation var(--scroll-speed) linear infinite;
 }
 @keyframes marqueeAnimation {
   0% {

core/core-frontend/src/utils/changeComponentsSizeWithScale.ts

@@ -7,7 +7,7 @@ import { groupSizeStyleAdaptor } from '@/utils/style'
 const dvMainStore = dvMainStoreWithOut()
 const { componentData, curComponentIndex, canvasStyleData } = storeToRefs(dvMainStore)
 
-const needToChangeAttrs = ['top', 'left', 'width', 'height', 'fontSize']
+const needToChangeAttrs = ['top', 'left', 'width', 'height', 'fontSize', 'letterSpacing']
 
 export function changeSizeWithScale(scale) {
   return changeComponentsSizeWithScale(scale)