Merge remote-tracking branch 'origin/master'

data-room-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcpaas/data-room-ui",
-  "version": "1.0.1-2023081701-Alpha",
+  "version": "1.0.1-2023082201-Alpha",
   "description": "自定义大屏",
   "author": "gcpaas",
   "license": "MIT",

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

@@ -0,0 +1,174 @@
+<template>
+  <div class="marquee-box">
+    <div class="scroll-area">
+      <!-- 设置margin，使内容 有从无到有的出现效果 -->
+      <div class="marquee-container">
+        <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: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      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.chartInit()
+    // 如果点击了生成图片，则先关闭动画
+    EventBus.$on('stopMarquee', () => {
+      this.isAnimate = false
+    })
+    // 图片生成完成后，再开启动画
+    EventBus.$on('startMarquee', () => {
+      this.isAnimate = true
+    })
+  },
+  beforeDestroy () {
+    EventBus.$off('stopMarquee')
+    EventBus.$off('startMarquee')
+  },
+  methods: {
+    changeStyle () {
+    },
+    dataFormatting (config, data) {
+      // 文本数据配置原则：选择数据集则以后端返回的数据为主，否则以设置面板中标题设置为准
+      if (config.dataSource.businessKey) {
+        config.customize.title = data && data.data && data.data.length ? data.data[0][config.dataSource.metricField] : '暂无数据'
+      }
+      return config
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.marquee-box {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+
+  .scroll-area {
+    width: 100%;
+    height: 100%;
+    display: inline-block;
+
+    .marquee-container {
+      width: 100%;
+      height: 100%;
+      display: inline-block;
+
+      .svg-container {
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,367 @@
+<!--
+ * @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>
+        <!-- 走马灯走向 -->
+        <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 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: {
+    PosWhSetting,
+    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' }
+        ]
+      }
+    }
+  },
+  computed: {
+    config: {
+      get () {
+        return this.$store.state.bigScreen.activeItemConfig
+      },
+      set (val) {
+        this.$store.state.bigScreen.activeItemConfig = val
+      }
+    }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {
+    changeStyle () {}
+  }
+}
+</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,73 @@
+/*
+ * @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'
+  },
+  customize: {
+    title: '跑马灯占位符',
+    fontSize: 40,
+    fontWeight: 700,
+    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'
+
+  }
+
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

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/ComponentList/index.vue

@@ -391,7 +391,7 @@ export default {
         .catch()
     },
     copy (screen) {
-      const url = this.catalogInfo === 'component' ? `/bigScreen/design/copy/${screen.code}` : `/Component/copy/${screen.code}`
+      const url = this.catalogInfo === 'component' ? `/bigScreen/design/copy/${screen.code}` : `/bigScreen/bizComponent/copy/${screen.code}`
       this.$confirm('确定复制该组件', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',

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/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[16],
+        className:
+          'com.gccloud.dataroom.core.module.chart.components.ScreenTextChart',
+        w: 150,
+        h: 100,
+        x: 0,
+        y: 0,
+        type
+      }
     case 'texts':
       return {
         name: '文本',

data-room-ui/public/config/index-development.js

@@ -1,6 +1,6 @@
 window.ENV = 'development'
 var developmentConfig = {
-  baseUrl: 'http://127.0.0.1:8081/bigScreenServer'
+  baseUrl: 'http://gcpaas.gccloud.com/bigScreenServer'
 }
 // 必须的
 window.CONFIG = configDeepMerge(window.CONFIG, developmentConfig)