feat: 添加跑马灯组件

data-room-ui/packages/BasicComponents/Marquee/index.vue

@@ -3,82 +3,178 @@
     <div class="scroll-area">
       <!-- 设置margin，使内容 有从无到有的出现效果 -->
       <div class="marquee-container">
-        {{ content }}
+        <svg class="svg-container">
+          <defs>
+            <linearGradient
+              :id="'backgroundGradient-'+config.code"
+              :x1="0"
+              :y1="['to top right'].includes(config.customize.bgGradientDirection) ? '100%' : '0'"
+              :x2="['to right','to bottom right','to top right'].includes(config.customize.bgGradientDirection) ? '100%' : '0'"
+              :y2="['to bottom','to bottom right'].includes(config.customize.bgGradientDirection) ? '100%' : '0'"
+            >
+              <stop
+                offset="0%"
+                :stop-color="config.customize.backgroundColorType === 'pure' ? config.customize.backgroundColor : config.customize.bgGradientColor0"
+              />
+              <stop
+                offset="100%"
+                :stop-color="config.customize.backgroundColorType === 'pure' ? config.customize.backgroundColor : config.customize.bgGradientColor1"
+              />
+            </linearGradient>
+            <linearGradient
+              :id="'textGradient-'+config.code"
+              :x1="0"
+              :y1="['to top right'].includes(config.customize.textGradientDirection) ? '100%' : '0'"
+              :x2="['to right','to bottom right','to top right'].includes(config.customize.textGradientDirection) ? '100%' : '0'"
+              :y2="['to bottom','to bottom right'].includes(config.customize.textGradientDirection) ? '100%' : '0'"
+            >
+              <stop
+                offset="0%"
+                :stop-color="config.customize.textColorType === 'pure' ? config.customize.textColor : config.customize.textGradientColor0"
+              />
+              <stop
+                offset="100%"
+                :stop-color="config.customize.textColorType === 'pure' ? config.customize.textColor : config.customize.textGradientColor1"
+              />
+            </linearGradient>
+          </defs>
+          <rect
+            v-if="config.customize.backgroundColorType !== 'transparent'"
+            width="100%"
+            height="100%"
+            :fill="`url(#backgroundGradient-${config.code})`"
+          />
+          <text
+            :x="10"
+            :y="config.customize.fontSize"
+            :style="{ fontSize: config.customize.fontSize + 'px', fontWeight: config.customize.fontWeight }"
+            :fill="`url(#textGradient-${config.code})`"
+          >
+
+            <animate
+              v-if="isAnimate"
+              :attributeName="attributeName[config.customize.direction]"
+              :from="from[config.customize.direction]"
+              :to="to[config.customize.direction]"
+              :dur="config.customize.dur + 's'"
+              repeatCount="indefinite"
+            />
+            <i
+              v-if="config.customize.icon.position === 'left'"
+              :class="config.customize.icon.name"
+              :style="{ color: config.customize.icon.color, fontSize: config.customize.fontSize + 'px' }"
+            />
+            {{ config.customize.title }}
+            <i
+              v-if="config.customize.icon.position === 'right'"
+              :class="config.customize.icon.name"
+              :style="{ color: config.customize.icon.color, fontSize: config.customize.fontSize + 'px' }"
+            />
+          </text>
+        </svg>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-
+import { EventBus } from 'data-room-ui/js/utils/eventBus'
+import commonMixins from 'data-room-ui/js/mixins/commonMixins'
+import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
 export default {
-  props: { },
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
   data () {
     return {
-      content: '一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十'
+      customClass: {},
+      attributeName: {
+        right: 'x',
+        left: 'x',
+        top: 'y',
+        bottom: 'y'
+      },
+      // 动画开始
+      from: {
+        left: '-100%',
+        right: '100%',
+        top: '-100%',
+        bottom: '100%'
+      },
+      // 动画结束
+      to: {
+        left: '100%',
+        right: '-100%',
+        top: '100%',
+        bottom: '-100%'
+      },
+      isAnimate: true
     }
   },
+  mixins: [paramsMixins, commonMixins],
   mounted () {
-    this.scrollRightToLeft()
+    this.chartInit()
+    // 如果点击了生成图片，则先关闭动画
+    EventBus.$on('stopMarquee', () => {
+      this.isAnimate = false
+    })
+    // 图片生成完成后，再开启动画
+    EventBus.$on('startMarquee', () => {
+      this.isAnimate = true
+    })
+  },
+  beforeDestroy () {
+    EventBus.$off('stopMarquee')
+    EventBus.$off('startMarquee')
   },
   methods: {
-    // 从右到左滚动
-    scrollRightToLeft () {
-      // 在mounted阶段，才可以获取真实DOM节点
-      const showArea = document.querySelector('.marquee-box')
-      // 从左到右滚动，首先把滚动条置到元素的最右边
-      showArea.scrollLeft = 0
-      function f () {
-        // 如果滚动条到了元素的最左边，那么把它再初始化到最右边
-        if (showArea.scrollLeft > showArea.scrollWidth) {
-          showArea.scrollLeft = showArea.scrollWidth
-        } else {
-        // 每次滚动条向左移动2，改变speed可以调整滚动速度
-          const speed = 1
-          showArea.scrollLeft += speed
-        }
-        // 使用requestAnimationFrame，优化滚动效果
-        // requestAnimationFrame使得滚动和机器帧率同步
-        requestAnimationFrame(f)
-      }
-      requestAnimationFrame(f)
+    changeStyle () {
     },
-    // 从左到右滚动
-    scrollLeftToRight () {
-      // 在mounted阶段，才可以获取真实DOM节点
-      const showArea = document.querySelector('.marquee-box')
-      showArea.scrollLeft = showArea.scrollWidth
-      function f () {
-      // 如果滚动条到了元素的最左边，那么把它再初始化到最右边
-        if (showArea.scrollLeft < 3) {
-          showArea.scrollLeft = showArea.scrollWidth
-        } else {
-        // 每次滚动条向左移动2，改变speed可以调整滚动速度
-          const speed = 1
-          showArea.scrollLeft -= speed
-        }
-        requestAnimationFrame(f)
+    dataFormatting (config, data) {
+      // 文本数据配置原则：选择数据集则以后端返回的数据为主，否则以设置面板中标题设置为准
+      if (config.dataSource.businessKey) {
+        config.customize.title = data && data.data && data.data.length ? data.data[0][config.dataSource.metricField] : '暂无数据'
       }
-      // 使用requestAnimationFrame，优化滚动效果
-      // requestAnimationFrame使得滚动和机器帧率同步
-      requestAnimationFrame(f)
+      return config
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
- .marquee-box {
-    // height: 50px;
+.marquee-box {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+
+  .scroll-area {
+    width: 100%;
+    height: 100%;
     display: inline-block;
-    white-space: nowrap;
-    overflow: hidden;
-    .scroll-area {
-      font-size: 100px;
+
+    .marquee-container {
+      width: 100%;
+      height: 100%;
       display: inline-block;
-      .marquee-container {
+
+      .svg-container {
         display: inline-block;
+        width: 100%;
+        height: 100%;
       }
     }
   }
+}
+.el-icon-edit{
+  &:before{
+    content: '11111';
+    font-size: 20px;
+  }
+}
 </style>

data-room-ui/packages/BasicComponents/Marquee/setting.vue

@@ -34,7 +34,7 @@
       <SettingTitle>基础</SettingTitle>
       <div class="lc-field-body">
         <el-form-item
-          label="标题字体大小"
+          label="字体大小"
           label-width="100px"
         >
           <el-input
@@ -48,7 +48,7 @@
           </el-input>
         </el-form-item>
         <el-form-item
-          label="标题字体权重"
+          label="字体权重"
           label-width="100px"
         >
           <el-input-number
@@ -57,24 +57,279 @@
             placeholder="请输入标题字体权重"
           />
         </el-form-item>
-        <TextGradient v-model="config.customize.color" />
+        <!-- 走马灯走向 -->
+        <el-form-item
+          label="滚动方向"
+          label-width="100px"
+        >
+          <el-select
+            v-model="config.customize.direction"
+            class="bs-el-select"
+            popper-class="bs-el-select"
+          >
+            <el-option
+              v-for="direction in directionList"
+              :key="direction.value"
+              :label="direction.label"
+              :value="direction.value"
+            />
+          </el-select>
+        </el-form-item>
+        <!-- 滚动速度 -->
+        <el-form-item
+          label="滚动间隔"
+          label-width="100px"
+        >
+          <el-input-number
+            v-model="config.customize.dur"
+            class="bs-el-input-number"
+            placeholder="请输入滚动间隔"
+            :min="1"
+            :step="1"
+          >
+            <template slot="append">
+              s
+            </template>
+          </el-input-number>
+        </el-form-item>
+        <!-- 图标选择 -->
+        <el-form-item
+          label="图标选择"
+          label-width="100px"
+        >
+          <IconPicker v-model="config.customize.icon.name" />
+        </el-form-item>
+        <!-- 图标位置 -->
+        <el-form-item
+          v-if="config.customize.icon.name"
+          label="图标位置"
+          label-width="100px"
+        >
+          <el-select
+            v-model="config.customize.icon.position"
+            class="bs-el-select"
+            popper-class="bs-el-select"
+          >
+            <el-option
+              v-for="iconPosition in iconPositionOptions"
+              :key="iconPosition.value"
+              :label="iconPosition.label"
+              :value="iconPosition.value"
+            />
+          </el-select>
+        </el-form-item>
+        <!-- 图标颜色 -->
+        <el-form-item
+          v-if="config.customize.icon.name"
+          label="图标颜色"
+          label-width="100px"
+        >
+          <ColorPicker
+            v-model="config.customize.icon.color"
+            placeholder="请选择图标颜色"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item label="文字颜色类型">
+          <el-radio-group
+            v-model="config.customize.textColorType"
+            class="bs-el-radio-group"
+          >
+            <el-radio label="pure">
+              纯色
+            </el-radio>
+            <el-radio label="gradient">
+              渐变色
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.textColorType === 'pure'"
+          label="文字颜色"
+        >
+          <ColorPicker
+            v-model="config.customize.textColor"
+            placeholder="请选择文字颜色"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.textColorType === 'gradient'"
+          label="文字渐变色方向"
+        >
+          <el-select
+            v-model="config.customize.textGradientDirection"
+            popper-class="bs-el-select"
+            class="bs-el-select"
+          >
+            <el-option
+              v-for="direction in gradientDirection"
+              :key="direction.value"
+              :label="direction.label"
+              :value="direction.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.textColorType === 'gradient'"
+          label="文字渐变开始色"
+        >
+          <ColorPicker
+            v-model="config.customize.textGradientColor0"
+            placeholder="请选择渐变色开始色值"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.textColorType === 'gradient'"
+          label="文字渐变结束色"
+        >
+          <ColorPicker
+            v-model="config.customize.textGradientColor1"
+            placeholder="请选择渐变色结束色值"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item label="背景色类型">
+          <el-radio-group
+            v-model="config.customize.backgroundColorType"
+            class="bs-el-radio-group"
+          >
+            <el-radio label="transparent">
+              透明
+            </el-radio>
+            <el-radio label="pure">
+              纯色
+            </el-radio>
+            <el-radio label="gradient">
+              渐变色
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.backgroundColorType === 'pure'"
+          label="背景色"
+        >
+          <ColorPicker
+            v-model="config.customize.backgroundColor"
+            placeholder="请选择背景色"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.backgroundColorType === 'gradient'"
+          label="背景渐变色方向"
+        >
+          <el-select
+            v-model="config.customize.bgGradientDirection"
+            popper-class="bs-el-select"
+            class="bs-el-select"
+          >
+            <el-option
+              v-for="direction in gradientDirection"
+              :key="direction.value"
+              :label="direction.label"
+              :value="direction.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.backgroundColorType === 'gradient'"
+          label="背景渐变开始色"
+        >
+          <ColorPicker
+            v-model="config.customize.bgGradientColor0"
+            placeholder="请选择渐变色开始色值"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.backgroundColorType === 'gradient'"
+          label="背景渐变结束色"
+        >
+          <ColorPicker
+            v-model="config.customize.bgGradientColor1"
+            placeholder="请选择渐变色结束色值"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
       </div>
     </el-form>
   </div>
 </template>
 <script>
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
-import TextGradient from 'data-room-ui/BigScreenDesign/RightSetting/TextGradient/index'
+import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import IconPicker from 'data-room-ui/IconPicker/index.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
 export default {
   name: 'TextSetting',
   components: {
-    TextGradient,
     PosWhSetting,
-    SettingTitle
+    ColorPicker,
+    SettingTitle,
+    IconPicker
   },
   data () {
     return {
+      predefineThemeColors: [
+        '#007aff',
+        '#1aa97b',
+        '#ff4d53',
+        '#1890FF',
+        '#DF0E1B',
+        '#0086CC',
+        '#2B74CF',
+        '#00BC9D',
+        '#ED7D32'
+      ],
+      directionList: [
+        {
+          value: 'right',
+          label: '从右到左'
+        },
+        {
+          value: 'left',
+          label: '从左到右'
+        },
+        {
+          value: 'top',
+          label: '从上到下'
+        },
+        {
+          value: 'bottom',
+          label: '从下到上'
+        }
+      ],
+      gradientDirection: [
+        {
+          label: '从左到右',
+          value: 'to right'
+        },
+        {
+          label: '从上到下',
+          value: 'to bottom'
+        },
+
+        {
+          label: '从左上到右下',
+          value: 'to bottom right'
+        },
+        {
+          label: '从左下到右上',
+          value: 'to top right'
+        }
+      ],
+      iconPositionOptions: [
+        {
+          label: '左侧',
+          value: 'left'
+        },
+        {
+          label: '右侧',
+          value: 'right'
+        }
+      ],
       rules: {
         title: [
           { required: true, message: '请输入标题', trigger: 'blur' }
@@ -96,6 +351,7 @@ export default {
   },
   mounted () {},
   methods: {
+    changeStyle () {}
   }
 }
 </script>

data-room-ui/packages/BasicComponents/Marquee/settingConfig.js

@@ -8,7 +8,7 @@ import { commonConfig, displayOption } from 'data-room-ui/js/config'
 
 export const settingConfig = {
   theme: 'dark',
-  text: '文本标签占位符', // text内容
+  text: '跑马灯占位符', // text内容
   // 设置面板属性的显隐
   displayOption: {
     ...displayOption,
@@ -29,14 +29,42 @@ export const settingConfig = {
 const customConfig = {
   type: 'marquee',
   root: {
-    version: '2023071001',
-    url: 'https://www.runoob.com/'
+    version: '2023071001'
   },
   customize: {
-    title: '文本标签占位符',
-    fontSize: 20,
+    title: '跑马灯占位符',
+    fontSize: 40,
     fontWeight: 700,
-    color: 'left,#ffffff,#ffffff'
+    icon: {
+      name: '',
+      position: 'left',
+      color: '#fff'
+    },
+    // 文字颜色类型: 纯色、渐变
+    textColorType: 'pure',
+    // 文字颜色
+    textColor: '#fff',
+    // 文字渐变开始颜色
+    textGradientColor0: '#fff',
+    // 文字渐变结束颜色
+    textGradientColor1: '#fff',
+    // 文字渐变方向
+    textGradientDirection: 'to right',
+    // 滚动方向
+    direction: 'right',
+    // 滚动间隔
+    dur: '8',
+    // 背景色类型：纯色、渐变、透明
+    backgroundColorType: 'transparent',
+    // 背景色
+    backgroundColor: '#fff',
+    // 背景渐变色开始颜色
+    bgGradientColor0: '#fff',
+    // 背景渐变色结束颜色
+    bgGradientColor1: '#fff',
+    // 背景色渐变方向
+    bgGradientDirection: 'to right'
+
   }
 
 }

data-room-ui/packages/BigScreenDesign/PageDesignTop.vue

@@ -93,6 +93,7 @@
   </div>
 </template>
 <script>
+import { EventBus } from 'data-room-ui/js/utils/eventBus'
 import { toJpeg, toPng } from 'html-to-image'
 import { mapMutations, mapActions, mapState } from 'vuex'
 import { saveScreen } from 'data-room-ui/js/api/bigScreenApi'
@@ -448,6 +449,8 @@ export default {
     },
     createdImg () {
       this.saveAndPreviewLoading = true
+      // 暂停跑马灯动画
+      EventBus.$emit('stopMarquee')
       const node = document.querySelector('.render-theme-wrap')
       toPng(node)
         .then((dataUrl) => {
@@ -459,6 +462,8 @@ export default {
             link.remove()
           })
           this.saveAndPreviewLoading = false
+          // 恢复跑马灯动画
+          EventBus.$emit('startMarquee')
         })
         .catch(() => {
           this.$message.warning('出现未知错误，请重试')

data-room-ui/packages/assets/symbols/bigScreenIcon/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "37005716",
+      "name": "16marquee",
+      "font_class": "a-16marquee",
+      "unicode": "e621",
+      "unicode_decimal": 58913
+    },
     {
       "icon_id": "36836851",
       "name": "08z9iframe",

data-room-ui/packages/js/utils/getComponentConfig.js

@@ -8,11 +8,11 @@ export default function getComponentConfig (type) {
       return {
         name: '跑马灯',
         title: '跑马灯',
-        icon: iconNames[0],
+        icon: iconNames[16],
         className:
           'com.gccloud.dataroom.core.module.chart.components.ScreenTextChart',
         w: 150,
-        h: 30,
+        h: 100,
         x: 0,
         y: 0,
         type