feat: 添加选择器组件

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

@@ -0,0 +1,208 @@
+<template>
+  <el-select
+    :key="config.code"
+    v-model="selectValue"
+    :popper-class="'basic-component-select selct-popper-' + config.code"
+    :class="['basic-component-select', `selct-${config.code}`]"
+    :placeholder="`请选择${placeholder}`"
+    filterable
+    clearable
+    @visible-change="visibleChange"
+    @change="selectChange"
+  >
+    <el-option
+      v-for="(option, key) in config.option.data"
+      :key="key"
+      :label="option[config.dataSource.dimensionField]"
+      :value="option[config.dataSource.metricField]"
+    />
+  </el-select>
+</template>
+
+<script>
+import { EventBus } from 'data-room-ui/js/utils/eventBus'
+import commonMixins from 'data-room-ui/js/mixins/commonMixins'
+import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
+import { getDataSetDetails } from 'data-room-ui/js/api/bigScreenApi'
+window.dataSetFields = []
+export default {
+  name: 'BasicComponentSelect',
+  components: {},
+  mixins: [commonMixins, linkageMixins],
+  props: {
+    // 组件配置
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      selectValue: '',
+      innerConfig: {}
+    }
+  },
+  computed: {
+    placeholder () {
+      return window.dataSetFields.find(field => field.value === this.config.dataSource.dimensionField)?.label || ''
+    }
+  },
+  watch: { },
+  created () { },
+  mounted () {
+    this.changeStyle(this.config)
+    EventBus.$on('changeBusinessKey', () => {
+      window.dataSetFields = []
+    })
+  },
+  beforeDestroy () {
+    EventBus.$off('changeBusinessKey')
+  },
+  methods: {
+    dataFormatting (config, data) {
+      // 数据返回成功则赋值
+      if (data.success) {
+        data = data.data
+        // 获取到后端返回的数据，有则赋值
+        if (config.dataHandler) {
+          try {
+            // 此处函数处理data
+            eval(config.dataHandler)
+          } catch (e) {
+            console.info(e)
+          }
+        }
+        config.option.data = data
+        config.customize.title = config.option.data[config.dataSource.dimensionField] || config.customize.title
+        if (window.dataSetFields.length === 0) {
+          getDataSetDetails(this.config.dataSource.businessKey).then(res => {
+            window.dataSetFields = res.fields.map(field => {
+              return {
+                label: field.comment || field.fieldDesc,
+                value: field.name || field.fieldName
+              }
+            })
+          })
+        }
+        // 语音播报
+      } else {
+        // 数据返回失败则赋前端的模拟数据
+        config.option.data = []
+      }
+      return config
+    },
+    changeStyle (config) {
+      this.innerConfig = config
+      // 选择器元素
+      const selectInputEl = document.querySelector(`.selct-${config.code} .el-input__inner`)
+      // 背景颜色
+      selectInputEl.style.backgroundColor = config.customize.backgroundColor
+      // 字体大小
+      selectInputEl.style.fontSize = config.customize.fontSize + 'px'
+      // 字体颜色
+      selectInputEl.style.color = config.customize.fontColor
+      // 选择器下拉框元素
+      const selectDropdownEl = document.querySelector(`.selct-${config.code} .el-select-dropdown`)
+      // 箭头背景颜色和下拉框背景颜色一致
+      if (selectDropdownEl) {
+        // 下拉框无边框
+        selectDropdownEl.style.border = 'none'
+        // 背景颜色
+        selectDropdownEl.style.backgroundColor = config.customize.dropDownBackgroundColor
+        // 下拉项hover颜色
+        const selectDropdownItemEl = document.querySelectorAll(`.selct-${this.innerConfig.code} .el-select-dropdown__item`)
+        selectDropdownItemEl.forEach(item => {
+          // 下拉项字体颜色
+          item.style.color = this.innerConfig.customize.dropDownFontColor
+          item.addEventListener('mouseenter', () => {
+            item.style.color = this.innerConfig.customize.dropDownHoverFontColor
+            item.style.backgroundColor = this.innerConfig.customize.dropDownHoverBackgroundColor
+          })
+          item.addEventListener('mouseleave', () => {
+            item.style.color = this.innerConfig.customize.dropDownFontColor
+            item.style.backgroundColor = this.innerConfig.customize.dropDownBackgroundColor
+          })
+        })
+      }
+    },
+    // 组件联动
+    selectChange (val) {
+      this.linkage(this.config.option.data.find(item => item[this.config.dataSource.metricField] === val))
+    },
+    visibleChange (val) {
+      if (val) {
+        // 修改下拉框背景颜色，让下拉框背景颜色和箭头背景颜色一致
+        const selectDropdownEl = document.querySelector(`.selct-popper-${this.innerConfig.code}`)
+        selectDropdownEl.style.color = this.innerConfig.customize.dropDownBackgroundColor
+        // 空状态
+        const selectDropdownEmptyEl = document.querySelector(`.selct-popper-${this.innerConfig.code} .el-select-dropdown__empty`)
+        if (selectDropdownEmptyEl) {
+          selectDropdownEmptyEl.style.backgroundColor = this.innerConfig.customize.dropDownBackgroundColor
+        }
+        // 激活项
+        const selectDropdownItemSelectedEl = document.querySelectorAll(`.selct-popper-${this.innerConfig.code} .el-select-dropdown__item.selected`)
+        selectDropdownItemSelectedEl.forEach(item => {
+          item.style.color = this.innerConfig.customize.activeFontColor
+          item.style.backgroundColor = this.innerConfig.customize.activeBackgroundColor
+        })
+      }
+      // 不是激活项的还是使用背景颜色
+      const selectDropdownItemEl = document.querySelectorAll(`.selct-popper-${this.innerConfig.code} .el-select-dropdown__item`)
+      selectDropdownItemEl.forEach(item => {
+        // 检查是否是激活项，不是则使用背景颜色
+        if (!item.classList.contains('selected')) {
+          item.style.color = this.innerConfig.customize.dropDownFontColor
+          item.style.backgroundColor = this.innerConfig.customize.dropDownBackgroundColor
+        }
+      })
+    }
+  }
+
+}
+</script>
+
+<style lang="scss">
+.basic-component-select{
+  color: '';
+  .el-select-dropdown__wrap {
+    margin-bottom: 0px !important;
+  }
+  .el-select-group__wrap:not(:last-of-type)::after {
+    background-color: transparent !important;
+  }
+  .popper__arrow{
+    border-bottom-color:var(--color) !important;
+    &::after{
+      border-bottom-color:var(--color) !important;
+    }
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.basic-component-select {
+  width: 100%;
+  height: 100%;
+  ::v-deep .el-input {
+    height: 100% !important;
+
+    //  选择器输入框样式
+    .el-input__inner {
+      height: 100% !important;
+      border-color: var(--bs-el-border) !important;
+    }
+  }
+
+  .el-tag.el-tag--info {
+    color: var(--bs-el-text) !important;
+  }
+
+  .popper__arrow {
+    bottom: 0 !important;
+
+    &:after {
+      bottom: 0 !important;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,172 @@
+<template>
+  <div class="bs-setting-wrap">
+    <el-form
+      ref="form"
+      :model="config"
+      label-width="100px"
+      label-position="left"
+      class="setting-body bs-el-form"
+    >
+      <div>
+        <slot name="top" />
+        <el-form
+          :model="config.customize"
+          label-position="left"
+          class="setting-body bs-el-form"
+          label-width="100px"
+        >
+          <SettingTitle>位置</SettingTitle>
+          <div class="lc-field-body">
+            <PosWhSetting :config="config" />
+          </div>
+          <SettingTitle>基础</SettingTitle>
+          <div class="lc-field-body">
+            <!-- 选择器背景颜色 -->
+            <el-form-item label="背景颜色">
+              <ColorPicker
+                v-model="config.customize.backgroundColor"
+                :predefine="predefineThemeColors"
+              />
+            </el-form-item>
+            <!-- 字体大小 -->
+            <el-form-item label="字体大小">
+              <el-input-number
+                v-model="config.customize.fontSize"
+                class="bs-el-input-number"
+                :min="12"
+                :max="100"
+              />
+            </el-form-item>
+            <!-- 字体颜色 -->
+            <el-form-item label="字体颜色">
+              <ColorPicker
+                v-model="config.customize.fontColor"
+                :predefine="predefineThemeColors"
+              />
+            </el-form-item>
+            <!-- 下拉框是否需要边框 -->
+            <!-- <el-form-item label="下拉框边框">
+              <el-switch v-model="config.customize.dropDownBorder" />
+            </el-form-item> -->
+            <!-- 下拉框如果有边框，再选择边框颜色 -->
+            <!-- <el-form-item
+              v-if="config.customize.dropDownBorder"
+              label="下拉框边框颜色"
+            >
+              <ColorPicker
+                v-model="config.customize.dropDownBorderColor"
+                :predefine="predefineThemeColors"
+              />
+            </el-form-item> -->
+            <!-- hover 颜色 -->
+            <!-- 下拉框字体大小 -->
+            <!-- <el-form-item label="下拉框字体大小">
+              <el-input-number
+                v-model="config.customize.dropDownFontSize"
+                class="bs-el-input-number"
+                :min="12"
+                :max="100"
+              />
+            </el-form-item> -->
+            <!-- 下拉框字体颜色 -->
+          </div>
+          <SettingTitle>下拉项</SettingTitle>
+          <!-- 选择器下拉框背景颜色 -->
+          <div class="lc-field-body">
+            <el-form-item label="背景颜色">
+              <ColorPicker
+                v-model="config.customize.dropDownBackgroundColor"
+                :predefine="predefineThemeColors"
+              />
+            </el-form-item>
+            <el-form-item label="字体颜色">
+              <ColorPicker
+                v-model="config.customize.dropDownFontColor"
+                :predefine="predefineThemeColors"
+              />
+            </el-form-item>
+            <!-- 下拉项悬浮背景颜色 -->
+            <el-form-item label="悬浮颜色">
+              <ColorPicker
+                v-model="config.customize.dropDownHoverBackgroundColor"
+                :predefine="predefineThemeColors"
+              />
+            </el-form-item>
+            <!-- 下拉项悬浮字体颜色 -->
+            <el-form-item label="悬浮字体颜色">
+              <ColorPicker
+                v-model="config.customize.dropDownHoverFontColor"
+                :predefine="predefineThemeColors"
+              />
+            </el-form-item>
+            <!-- 激活项背景颜色 -->
+            <el-form-item label="激活项背景颜色">
+              <ColorPicker
+                v-model="config.customize.activeBackgroundColor"
+                :predefine="predefineThemeColors"
+              />
+            </el-form-item>
+            <!-- 激活项文字颜色 -->
+            <el-form-item label="激活项文字颜色">
+              <ColorPicker
+                v-model="config.customize.activeFontColor"
+                :predefine="predefineThemeColors"
+              />
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script>
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+// import IconPicker from 'data-room-ui/IconPicker/index.vue'
+import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+export default {
+  name: 'Border14Setting',
+  components: {
+    // IconPicker,
+    ColorPicker,
+    PosWhSetting,
+    SettingTitle
+  },
+  props: {
+    config: {
+      type: Object,
+      required: true
+    },
+    predefineThemeColors: {
+      type: Array,
+      default: () => {
+        return [
+          '#007aff',
+          '#1aa97b',
+          '#ff4d53',
+          '#1890FF',
+          '#DF0E1B',
+          '#0086CC',
+          '#2B74CF',
+          '#00BC9D',
+          '#ED7D32'
+        ]
+      }
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  watch: {},
+  mounted () {},
+  methods: {}
+}
+</script>
+
+  <style lang="scss" scoped>
+  .lc-field-body {
+    width: 97%;
+    padding: 16px;
+  }
+  </style>

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

@@ -0,0 +1,56 @@
+
+import { commonConfig, displayOption } from 'data-room-ui/js/config'
+
+export const settingConfig = {
+  // text内容
+  text: '选择器',
+  // 设置面板属性的显隐
+  displayOption: {
+    ...displayOption,
+    dimensionField: {
+      // 维度
+      label: '选项的标签', // 维度/查询字段
+      enable: true,
+      multiple: false // 是否多选
+    },
+    metricField: {
+      // 指标
+      label: '绑定值',
+      enable: true,
+      multiple: false // 是否多选
+    }
+  }
+}
+
+const customConfig = {
+  type: 'select',
+  // 名称
+  title: '下拉框',
+  root: {
+    version: '2023071001'
+  },
+  // 自定义属性
+  customize: {
+    // 输入框背景颜色
+    backgroundColor: '#35393F',
+    // 输入框字体大小
+    fontSize: 20,
+    // 输入框字体颜色
+    fontColor: '#FFFFFF',
+    // 下拉框背景颜色
+    dropDownBackgroundColor: '#35393F',
+    // 下拉框字体颜色
+    dropDownFontColor: '#FFFFFF',
+    // 下拉项hover背景颜色
+    dropDownHoverBackgroundColor: '#6A7E9D',
+    // 下拉项hover字体颜色
+    dropDownHoverFontColor: '#FFFFFF',
+    // 激活项背景颜色
+    activeBackgroundColor: '#6A7E9D',
+    // 激活项字体颜色
+    activeFontColor: '#FFFFFF'
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

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

@@ -29,9 +29,7 @@
         trigger="click"
         class="align-list-dropdown"
       >
-        <CusBtn
-          type="primary"
-        >
+        <CusBtn type="primary">
           对齐方式<i class="el-icon-arrow-down el-icon--right" />
         </CusBtn>
         <el-dropdown-menu
@@ -39,7 +37,7 @@
           class="align-dropdown-menu"
         >
           <el-dropdown-item
-            v-for="(mode,index) in alignList"
+            v-for="(mode, index) in alignList"
             :key="mode.value"
             @click.native="setAlign(mode.value)"
           >
@@ -58,9 +56,7 @@
       >
         设计分工
       </CusBtn>
-      <CusBtn
-        @click.native="showHostory"
-      >
+      <CusBtn @click.native="showHostory">
         历史操作
       </CusBtn>
       <CusBtn
@@ -369,71 +365,64 @@ export default {
     },
     // 预览
     async execRun () {
-      this.save('saveAndPreviewLoading').then((res) => {
-        this.preview()
+      this.save('preview').then((res) => {
+        this.preview(res)
       })
     },
     // 预览
-    preview () {
+    preview (previewCode) {
       const { href } = this.$router.resolve({
         path: window.BS_CONFIG?.routers?.previewUrl || '/big-screen/preview',
         query: {
-          code: this.pageCode
+          code: previewCode || this.pageCode
         }
       })
       window.open(href, '_blank')
     },
     // 保存
-    save (loadingType = 'saveLoading', hasPageTemplateId = false) {
+    async save (type, hasPageTemplateId = false) {
       const pageInfo = cloneDeep(this.handleSaveData())
       // 保存页面
-      this[loadingType] = true
-      return new Promise((resolve, reject) => {
+      try {
         if (!hasPageTemplateId) {
           delete pageInfo.pageTemplateId
         }
-        const node = document.querySelector('.render-theme-wrap')
-        toJpeg(node, { quality: 0.2 })
-          .then((dataUrl) => {
-            const that = this
-            if (showSize(dataUrl) > 200) {
-              const url = dataURLtoBlob(dataUrl)
-              // 压缩到500KB,这里的500就是要压缩的大小,可自定义
-              imageConversion
-                .compressAccurately(url, {
-                  size: 200, // 图片大小压缩到100kb
-                  width: 1280, // 宽度压缩到1280
-                  height: 720 // 高度压缩到720
-                })
-                .then((res) => {
-                  translateBlobToBase64(res, function (e) {
-                    pageInfo.coverPicture = e.result
-                    saveScreen(pageInfo)
-                      .then((res) => {
-                        that.$message.success('保存成功')
-                        resolve(res)
-                      })
-                      .finally(() => {
-                        that[loadingType] = false
-                      })
-                  })
-                })
-            } else {
-              pageInfo.coverPicture = dataUrl
-              saveScreen(pageInfo)
-                .then((res) => {
-                  this.$message.success('保存成功')
-                  resolve(res)
-                })
-                .finally(() => {
-                  this[loadingType] = false
-                })
-            }
-          })
-          .catch(() => {
-            this[loadingType] = false
-          })
-      })
+        if (type === 'preview') {
+          pageInfo.isPreview = true
+          const res = await saveScreen(pageInfo)
+          return res
+        } else {
+          pageInfo.isPreview = false
+          this.saveLoading = true
+          const node = document.querySelector('.render-theme-wrap')
+          const dataUrl = await toJpeg(node, { quality: 0.2 })
+          if (showSize(dataUrl) > 200) {
+            const url = dataURLtoBlob(dataUrl)
+            // 压缩到500KB,这里的500就是要压缩的大小,可自定义
+            const imgRes = await imageConversion.compressAccurately(url, {
+              size: 200, // 图片大小压缩到100kb
+              width: 1280, // 宽度压缩到1280
+              height: 720 // 高度压缩到720
+            })
+            const base64 = await translateBlobToBase64(imgRes)
+            pageInfo.coverPicture = base64.result
+            const res = await saveScreen(pageInfo)
+            this.$message.success('保存成功')
+            return res
+          } else {
+            pageInfo.coverPicture = dataUrl
+            const res = await saveScreen(pageInfo)
+            this.$message.success('保存成功')
+            return res
+          }
+        }
+      } catch (error) {
+        console.error(error)
+        this.saveLoading = false
+        throw error
+      } finally {
+        this.saveLoading = false
+      }
     },
     goBack (path) {
       this.$router.push({
@@ -520,6 +509,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '../BigScreenDesign/fonts/iconfont.css';
+
 .default-layout-box {
   display: flex;
   flex-wrap: wrap;
@@ -585,6 +575,7 @@ export default {
     display: flex;
     margin-left: 50px;
     align-items: center;
+
     i {
       font-size: 14px;
     }
@@ -620,27 +611,34 @@ export default {
       text-overflow: ellipsis;
     }
   }
-  .theme-switch{
+
+  .theme-switch {
     margin-right: 10px;
-    /deep/.el-switch__label{
-      color: #bcc9d4!important;
+
+    /deep/.el-switch__label {
+      color: #bcc9d4 !important;
     }
-    /deep/.el-switch__label.is-active{
-      color: var(--bs-el-color-primary)!important;
+
+    /deep/.el-switch__label.is-active {
+      color: var(--bs-el-color-primary) !important;
     }
   }
-  .align-list-dropdown{
+
+  .align-list-dropdown {
     width: 100px !important;
-    color: #ffffff!important;
+    color: #ffffff !important;
   }
 
 }
+
 // 自定义dropdown的样式
-.align-dropdown-menu{
-  background-color: var(--bs-background-2)!important;
+.align-dropdown-menu {
+  background-color: var(--bs-background-2) !important;
   border: 1px solid var(--bs-border-1);
-  /deep/ .el-dropdown-menu__item{
-    background-color: var(--bs-background-2)!important;
+
+  /deep/ .el-dropdown-menu__item {
+    background-color: var(--bs-background-2) !important;
+
     &:hover {
       color: var(--bs-el-color-primary) !important;
       background-color: var(--bs-el-background-3) !important;
@@ -648,6 +646,7 @@ export default {
   }
 
 }
+
 ::v-deep .el-input__inner,
 ::v-deep .el-color-picker__color-inner,
 ::v-deep .el-input-number--mini,
@@ -658,6 +657,7 @@ export default {
   border: 0 !important;
   width: 100px;
 }
+
 // .bs-el-input-number{
 
 // }

data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue

@@ -578,6 +578,7 @@
 </template>
 <script>
 import ElDragSelect from './ElDragSelect.vue'
+import { EventBus } from 'data-room-ui/js/utils/eventBus'
 // import { isEmpty, cloneDeep } from 'lodash'
 import isEmpty from 'lodash/isEmpty'
 import cloneDeep from 'lodash/cloneDeep'
@@ -736,6 +737,7 @@ export default {
       if (id) {
         this.config.dataSource.businessKey = id
         getDataSetDetails(id).then(res => {
+          EventBus.$emit('changeBusinessKey')
           this.fieldsList = res.fields
           // 初始化时以组件本来的参数设置为主
           if (type === 'initial') {

data-room-ui/packages/assets/images/bigScreenIcon/svg/20themeSelect.svg

@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1693807714061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13871" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M912.6912 205.380267H110.3872A109.397333 109.397333 0 0 0 1.024 314.7776v364.680533a109.397333 109.397333 0 0 0 109.397333 109.397334H912.725333a109.397333 109.397333 0 0 0 109.397334-109.397334V314.7776a109.397333 109.397333 0 0 0-109.397334-109.397333z m36.4544 455.816533c0 30.208-24.507733 54.715733-54.715733 54.715733H128.682667a54.715733 54.715733 0 0 1-54.715734-54.715733V333.0048c0-30.208 24.4736-54.715733 54.715734-54.715733h765.781333c30.208 0 54.715733 24.507733 54.715733 54.715733v328.192z" fill="#3366FF" p-id="13872"></path><path d="M850.670933 490.530133a18.2272 18.2272 0 0 0-13.858133-29.9008h-119.6032a18.2272 18.2272 0 0 0-13.858133 29.9008l59.8016 70.0416a18.2272 18.2272 0 0 0 27.716266 0l59.8016-70.0416z" fill="#32EDCC" p-id="13873"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1694587929030" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5108" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M692.095 184C663.52 255.494 593.655 306 512 306s-151.52-50.506-180.095-122h-98.308l-68.71 90.491 64.29 49.346a104.021 104.021 0 0 1 40.678 82.518V840h484.29V406.355a104.021 104.021 0 0 1 40.677-82.518l64.291-49.346L790.403 184h-98.308z m-71.9 0h-216.39c23.288 34.964 63.053 58 108.195 58 45.142 0 84.907-23.036 108.194-58z m-406.431-72h596.472a31.975 31.975 0 0 1 25.466 12.642l104.78 137.996c10.65 14.026 7.969 34.027-6 44.748l-95.863 73.579a32.007 32.007 0 0 0-12.516 25.39V880c0 17.673-14.318 32-31.981 32H229.878c-17.663 0-31.981-14.327-31.981-32V406.355c0-9.95-4.626-19.334-12.516-25.39l-95.863-73.579c-13.969-10.721-16.65-30.722-6-44.748l104.78-137.996A31.975 31.975 0 0 1 213.764 112z" fill="#5090F1" p-id="5109"></path></svg>

data-room-ui/packages/assets/images/bigScreenIcon/svg/21select.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1693807714061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13871" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M912.6912 205.380267H110.3872A109.397333 109.397333 0 0 0 1.024 314.7776v364.680533a109.397333 109.397333 0 0 0 109.397333 109.397334H912.725333a109.397333 109.397333 0 0 0 109.397334-109.397334V314.7776a109.397333 109.397333 0 0 0-109.397334-109.397333z m36.4544 455.816533c0 30.208-24.507733 54.715733-54.715733 54.715733H128.682667a54.715733 54.715733 0 0 1-54.715734-54.715733V333.0048c0-30.208 24.4736-54.715733 54.715734-54.715733h765.781333c30.208 0 54.715733 24.507733 54.715733 54.715733v328.192z" fill="#3366FF" p-id="13872"></path><path d="M850.670933 490.530133a18.2272 18.2272 0 0 0-13.858133-29.9008h-119.6032a18.2272 18.2272 0 0 0-13.858133 29.9008l59.8016 70.0416a18.2272 18.2272 0 0 0 27.716266 0l59.8016-70.0416z" fill="#32EDCC" p-id="13873"></path></svg>

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

@@ -28,9 +28,10 @@ const typeList = [
   'input',
   'button',
   'marquee',
-  'themeSwitcher',
   'chartTab',
-  'themeSelect'
+  'themeSwitcher',
+  'themeSelect',
+  'select'
 ]
 let basicConfigList = []
 basicConfigList = typeList.map((type) => {
@@ -40,10 +41,10 @@ basicConfigList = basicConfigList.map((item) => {
   return basicComponentsConfig(item)
 })
 // 生成基本配置
-export function basicComponentsConfig(item) {
+export function basicComponentsConfig (item) {
   return {
     ...item,
-    border:{type:''},
+    border: { type: '' },
     option: cloneDeep(setModules[item.type]),
     ...cloneDeep(dataModules[item.type])
   }

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

@@ -249,6 +249,18 @@ export default function getComponentConfig (type) {
         y: 0,
         type
       }
+    case 'select':
+      return {
+        name: '选择器',
+        title: '选择器',
+        icon: Icon.getNameList()[21],
+        className: 'com.gccloud.dataroom.core.module.chart.components.ScreenSelectChart',
+        w: 200,
+        h: 100,
+        x: 0,
+        y: 0,
+        type
+      }
     default:
       return {}
   }