From 6feb890e5da515d9edd367fe7b210066c19c1dbe Mon Sep 17 00:00:00 2001
From: "wu.jian2" <distantmtn@gmail.com>
Date: Fri, 18 Aug 2023 09:38:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=B7=91=E9=A9=AC?=
 =?UTF-8?q?=E7=81=AF=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=94=AF=E6=8C=81=E4=BB=8E?=
 =?UTF-8?q?=E5=B7=A6=E5=BE=80=E5=8F=B3=E5=92=8C=E4=BB=8E=E5=8F=B3=E5=BE=80?=
 =?UTF-8?q?=E5=B7=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BasicComponents/Marquee/index.vue         |  84 +++++++++++++
 .../BasicComponents/Marquee/setting.vue       | 111 ++++++++++++++++++
 .../BasicComponents/Marquee/settingConfig.js  |  45 +++++++
 .../js/config/basicComponentsConfig.js        |   1 +
 .../packages/js/utils/getComponentConfig.js   |  13 ++
 5 files changed, 254 insertions(+)
 create mode 100644 data-room-ui/packages/BasicComponents/Marquee/index.vue
 create mode 100644 data-room-ui/packages/BasicComponents/Marquee/setting.vue
 create mode 100644 data-room-ui/packages/BasicComponents/Marquee/settingConfig.js

diff --git a/data-room-ui/packages/BasicComponents/Marquee/index.vue b/data-room-ui/packages/BasicComponents/Marquee/index.vue
new file mode 100644
index 00000000..40814123
--- /dev/null
+++ b/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>
diff --git a/data-room-ui/packages/BasicComponents/Marquee/setting.vue b/data-room-ui/packages/BasicComponents/Marquee/setting.vue
new file mode 100644
index 00000000..b90acbdd
--- /dev/null
+++ b/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>
diff --git a/data-room-ui/packages/BasicComponents/Marquee/settingConfig.js b/data-room-ui/packages/BasicComponents/Marquee/settingConfig.js
new file mode 100644
index 00000000..e7502fd2
--- /dev/null
+++ b/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)
+}
diff --git a/data-room-ui/packages/js/config/basicComponentsConfig.js b/data-room-ui/packages/js/config/basicComponentsConfig.js
index 4c9b5019..af2db7ef 100644
--- a/data-room-ui/packages/js/config/basicComponentsConfig.js
+++ b/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', // 横线
diff --git a/data-room-ui/packages/js/utils/getComponentConfig.js b/data-room-ui/packages/js/utils/getComponentConfig.js
index 5b8d1c6e..cb27fd92 100644
--- a/data-room-ui/packages/js/utils/getComponentConfig.js
+++ b/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: '文本',