Merge pull request #10224 from dataease/pr@dev-v2@refactor_scroll-text-speed2

refactor(数据大屏): 优化跑马灯的滚动速度计算方式，以px为单位同时兼顾缩放的效果

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

@@ -508,6 +508,7 @@ const handleMouseDownOnShape = e => {
       dashboardActive.value &&
       (isFirst || (!tabMoveInActiveId.value && !tabCollisionActiveId.value))
     ) {
+      element.value['dragging'] = true
       emit('onDragging', e)
     }
 
@@ -543,6 +544,7 @@ const handleMouseDownOnShape = e => {
 
   const up = () => {
     dashboardActive.value && emit('onMouseUp')
+    element.value['dragging'] = false
     hasMove && snapshotStore.recordSnapshotCache('shape-handleMouseDownOnShape-up')
     // 触发元素停止移动事件，用于隐藏标线
     eventBus.emit('unMove')
@@ -699,6 +701,7 @@ const handleMouseDownOnPoint = (point, e) => {
     dvMainStore.setShapeStyle(style, areaData.value.components, 'resize', baseGroupComponentsRadio)
     // 矩阵逻辑 如果当前是仪表板（矩阵模式）则要进行矩阵重排
     dashboardActive.value && emit('onResizing', moveEvent)
+    element.value['resizing'] = true
     //如果当前组件是Group分组 则要进行内部组件深度计算
     element.value.component === 'Group' && groupSizeStyleAdaptor(element.value)
     //如果当前画布是Group内部画布 则对应组件定位在resize时要还原到groupStyle中
@@ -712,6 +715,7 @@ const handleMouseDownOnPoint = (point, e) => {
 
   const up = () => {
     dashboardActive.value && emit('onMouseUp')
+    element.value['resizing'] = false
     document.removeEventListener('mousemove', move)
     document.removeEventListener('mouseup', up)
     needSave && snapshotStore.recordSnapshotCache('shape-handleMouseDownOnPoint-up')

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

@@ -316,16 +316,16 @@ const fontFamilyList = [
 
 const scrollSpeedList = [
   { name: '停止', value: 0 },
-  { name: '1', value: 80 },
-  { name: '2', value: 60 },
-  { name: '3', value: 40 },
-  { name: '4', value: 30 },
-  { name: '5', value: 20 },
-  { name: '6', value: 15 },
-  { name: '7', value: 10 },
-  { name: '8', value: 8 },
-  { name: '9', value: 6 },
-  { name: '10', value: 3 }
+  { name: '10', value: 10 },
+  { name: '20', value: 20 },
+  { name: '30', value: 30 },
+  { name: '40', value: 40 },
+  { name: '50', value: 50 },
+  { name: '60', value: 60 },
+  { name: '70', value: 70 },
+  { name: '80', value: 80 },
+  { name: '90', value: 90 },
+  { name: '100', value: 100 }
 ]
 
 const opacitySizeList = [

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

@@ -165,6 +165,9 @@ export const commonAttr = {
   maintainRadio: false, // 布局时保持宽高比例
   aspectRatio: 1, // 锁定时的宽高比例
   isShow: true, // 是否显示组件
+  // 当前组件动作
+  dragging: false,
+  resizing: false,
   collapseName: [
     'position',
     'background',

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

@@ -32,7 +32,7 @@ const props = defineProps({
 
 const { element } = toRefs(props)
 const dvMainStore = dvMainStoreWithOut()
-const { editMode, curComponent } = storeToRefs(dvMainStore)
+const { editMode, curComponent, canvasStyleData } = storeToRefs(dvMainStore)
 
 const onComponentClick = () => {
   if (curComponent.value.id !== element.value.id) {
@@ -94,6 +94,10 @@ const handleBlur = e => {
   canEdit.value = false
 }
 
+const marqueeTxt = computed(
+  () => !canEdit.value && !element.value['resizing'] && !element.value['dragging']
+)
+
 const setEdit = () => {
   if (element.value['isLock']) return
   canEdit.value = true
@@ -111,7 +115,18 @@ onBeforeUnmount(() => {
   eventBus.off('componentClick', onComponentClick)
 })
 
-const varStyle = computed(() => [{ '--scroll-speed': `${element.value.style.scrollSpeed}s` }])
+// 滚动速度已px为单位 注意 这里的总宽度是还原到缩放前的 这样不同缩放比例下的跑马灯视觉上滚动速度（按照比例）一致
+const varStyle = computed(() => [
+  {
+    '--scroll-speed': `${
+      element.value.style.scrollSpeed === 0 || !text.value
+        ? 0
+        : (text.value.clientWidth * 100) /
+          canvasStyleData.value.scale /
+          element.value.style.scrollSpeed
+    }s`
+  }
+])
 
 const textStyle = computed(() => {
   return {
@@ -131,7 +146,7 @@ const textStyle = computed(() => {
     <div
       ref="text"
       :contenteditable="canEdit"
-      :class="{ 'can-edit': canEdit, 'marquee-txt': !canEdit }"
+      :class="{ 'can-edit': canEdit, 'marquee-txt': marqueeTxt }"
       tabindex="0"
       :style="textStyle"
       @dblclick="setEdit"

core/core-frontend/src/store/modules/data-visualization/dvMain.ts

@@ -232,6 +232,8 @@ export const dvMainStore = defineStore('dataVisualization', {
     setCurComponent({ component, index }) {
       if (!component && this.curComponent) {
         this.curComponent['editing'] = false
+        this.curComponent['resizing'] = false
+        this.curComponent['dragging'] = false
         this.curComponent['canvasActive'] = false
         // 如果当前组件不在主画布中 对应的分组的canvasActive 也要设置为false
         if (this.curComponent.canvasId !== 'canvas-main') {