feat: 添加跑马灯组件，支持从左往右和从右往左

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

@@ -0,0 +1,84 @@
+<template>
+  <div class="marquee-box">
+    <div class="scroll-area">
+      <!-- 设置margin，使内容 有从无到有的出现效果 -->
+      <div class="marquee-container">
+        {{ content }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: { },
+  data () {
+    return {
+      content: '一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十'
+    }
+  },
+  mounted () {
+    this.scrollRightToLeft()
+  },
+  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)
+    },
+    // 从左到右滚动
+    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)
+      }
+      // 使用requestAnimationFrame，优化滚动效果
+      // requestAnimationFrame使得滚动和机器帧率同步
+      requestAnimationFrame(f)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+ .marquee-box {
+    // height: 50px;
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    .scroll-area {
+      font-size: 100px;
+      display: inline-block;
+      .marquee-container {
+        display: inline-block;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,111 @@
+<!--
+ * @description: 标题属性设置面板
+ * @Date: 2022-08-17 16:53:28
+ * @Author: shiyi
+-->
+<template>
+  <div class="bs-setting-wrap">
+    <el-form
+      ref="form"
+      label-width="100px"
+      label-position="left"
+      :model="config"
+      :rules="rules"
+      class="bs-el-form"
+    >
+      <SettingTitle>标题</SettingTitle>
+      <div class="bs-setting-wrap">
+        <el-form-item
+          label="标题"
+          label-width="100px"
+          prop="title"
+        >
+          <el-input
+            v-model="config.customize.title"
+            placeholder="请输入标题"
+            clearable
+          />
+        </el-form-item>
+      </div>
+      <SettingTitle>位置</SettingTitle>
+      <div class="lc-field-body">
+        <PosWhSetting :config="config" />
+      </div>
+      <SettingTitle>基础</SettingTitle>
+      <div class="lc-field-body">
+        <el-form-item
+          label="标题字体大小"
+          label-width="100px"
+        >
+          <el-input
+            v-model="config.customize.fontSize"
+            placeholder="请输入标题字体大小"
+            clearable
+          >
+            <template slot="append">
+              px
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item
+          label="标题字体权重"
+          label-width="100px"
+        >
+          <el-input-number
+            v-model="config.customize.fontWeight"
+            class="bs-el-input-number"
+            placeholder="请输入标题字体权重"
+          />
+        </el-form-item>
+        <TextGradient v-model="config.customize.color" />
+      </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 PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+export default {
+  name: 'TextSetting',
+  components: {
+    TextGradient,
+    PosWhSetting,
+    SettingTitle
+  },
+  data () {
+    return {
+      rules: {
+        title: [
+          { required: true, message: '请输入标题', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  computed: {
+    config: {
+      get () {
+        return this.$store.state.bigScreen.activeItemConfig
+      },
+      set (val) {
+        this.$store.state.bigScreen.activeItemConfig = val
+      }
+    }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {
+  }
+}
+</script>
+
+  <style lang="scss" scoped>
+    @import "../../assets/style/settingWrap.scss";
+    .bs-setting-wrap{
+      padding-top: 16px;
+    }
+    .lc-field-body {
+      padding: 12px 16px;
+    }
+  </style>

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

@@ -0,0 +1,45 @@
+/*
+ * @Descripttion:
+ * @Author: liu.shiyi
+ * @Date: 2022-10-13 11:18:03
+ * @LastEditTime: 2022-10-13 13:55:11
+ */
+import { commonConfig, displayOption } from 'data-room-ui/js/config'
+
+export const settingConfig = {
+  theme: 'dark',
+  text: '文本标签占位符', // text内容
+  // 设置面板属性的显隐
+  displayOption: {
+    ...displayOption,
+    metricField: {
+      // 指标
+      label: '指标',
+      enable: true,
+      multiple: false // 是否多选
+    },
+    dimensionField: {
+      // 维度
+      label: '维度', // 维度/查询字段
+      enable: false,
+      multiple: true // 是否多选
+    }
+  }
+}
+const customConfig = {
+  type: 'marquee',
+  root: {
+    version: '2023071001',
+    url: 'https://www.runoob.com/'
+  },
+  customize: {
+    title: '文本标签占位符',
+    fontSize: 20,
+    fontWeight: 700,
+    color: 'left,#ffffff,#ffffff'
+  }
+
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

data-room-ui/packages/js/config/basicComponentsConfig.js

@@ -12,6 +12,7 @@ import getComponentConfig from 'data-room-ui/js/utils/getComponentConfig'
 // 批量引入配置文件
 import { setModules, dataModules } from 'data-room-ui/js/utils/configImport'
 const typeList = [
+  'marquee',
   'texts',
   'linkChart',
   'horizontalLine', // 横线

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

@@ -4,6 +4,19 @@ export default function getComponentConfig (type) {
   // const _type = _.upperFirst(type)
   // const className = `com.gccloud.starter.lowcode.page.bigscreen.components.${_type}Chart`
   switch (type) {
+    case 'marquee':
+      return {
+        name: '跑马灯',
+        title: '跑马灯',
+        icon: iconNames[0],
+        className:
+          'com.gccloud.dataroom.core.module.chart.components.ScreenTextChart',
+        w: 150,
+        h: 30,
+        x: 0,
+        y: 0,
+        type
+      }
     case 'texts':
       return {
         name: '文本',