feat: 添加时间选择器以及相关配置，实现组件联动

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

@@ -146,7 +146,6 @@ export default {
       selectDropdownIcon.style.fontSize = config.customize.fontSize + 'px'
       // 选择器下拉框元素
       const selectDropdownEl = document.querySelector(`.select-${config.code} .el-select-dropdown`)
-      console.log('selectDropdownEl', selectDropdownEl)
       // 箭头背景颜色和下拉框背景颜色一致
       if (selectDropdownEl) {
         // 下拉框无边框
@@ -157,7 +156,9 @@ export default {
     },
     // 组件联动
     selectChange (val) {
-      this.linkage(this.config.option.data.find(item => item[this.config.dataSource.metricField] === val))
+      if (val) {
+        this.linkage(this.config.option.data.find(item => item[this.config.dataSource.metricField] === val))
+      }
     },
     visibleChange (val) {
       if (val) {

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

@@ -0,0 +1,265 @@
+<template>
+  <el-time-picker
+    v-model="config.customize.value"
+    :picker-options="config.customize.pickerOptions"
+    placeholder="选择时间"
+    clearable
+    :class="['basic-component-time-select', `time-picker-${config.code}`]"
+    :popper-class="'basic-component-time-select time-picker-popper-' + config.code"
+    :value-format="config.customize.valueFormat"
+    @focus="focusEvent"
+    @change="changeValue"
+    @mouseenter.native="mouseenter"
+  />
+</template>
+
+<script>
+import cloneDeep from 'lodash/cloneDeep'
+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'
+import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
+import { mapState } from 'vuex'
+window.dataSetFields = []
+export default {
+  name: 'BasicComponentSelect',
+  components: {},
+  mixins: [commonMixins, linkageMixins],
+  props: {
+    // 组件配置
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      value: '',
+      innerConfig: {}
+    }
+  },
+  computed: {
+    ...mapState({
+      chartList: state => state.bigScreen.pageInfo.chartList
+    }),
+    isPreview () {
+      return (this.$route.path === window?.BS_CONFIG?.routers?.previewUrl) || (this.$route.path === '/big-screen/preview')
+    }
+  },
+  watch: {
+    config: {
+      handler: function (val) {
+        if (val && val.customize && val.customize.formatType === 'custom') {
+          this.$nextTick(() => {
+            this.value = toString(this.value)
+          })
+        }
+      },
+      deep: true
+    }
+  },
+  created () { },
+  mounted () {
+    if (!this.isPreview) {
+      document.querySelector(`.time-picker-${this.config.code}`).style.pointerEvents = 'none'
+    }
+    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) {
+      config = { ...this.config, ...config }
+      // 样式改变时更新主题配置
+      config.theme = settingToTheme(cloneDeep(config), this.customTheme)
+      this.changeChartConfig(config)
+      this.innerConfig = config
+      // 时间选择器元素
+      const timePicker = document.querySelector(`.time-picker-${config.code} .el-input__inner`)
+      // 时间选择器背景颜色
+      timePicker.style.backgroundColor = config.customize.backgroundColor
+      // 时间选择器字体颜色
+      timePicker.style.color = config.customize.fontColor
+      // 时间选择器字体大小
+      timePicker.style.fontSize = config.customize.fontSize + 'px'
+      // 时间选择器图标
+      const timePickerCloseIcon = document.querySelector(`.time-picker-${config.code} .el-input__icon`)
+      if (timePickerCloseIcon) {
+        timePickerCloseIcon.style.fontSize = config.customize.fontSize + 'px'
+      }
+    },
+    // 组件联动
+    changeValue (val) {
+      this.linkage({ [this.config.code]: val })
+    },
+    focusEvent () {
+      this.$nextTick(() => {
+        const { code } = this.innerConfig
+        const { dropDownBackgroundColor, dropDownFontColor, dropDownHoverFontColor, dropDownHoverBackgroundColor, dropDownSelectedFontColor } = this.innerConfig.customize
+        const timePickerPopper = document.querySelector(`.time-picker-popper-${code}`)
+        if (timePickerPopper) {
+          // 去除边框
+          timePickerPopper.style.border = 'none'
+          // 确保下拉项的箭头颜色与下拉框的背景颜色保持一致
+          timePickerPopper.style.color = dropDownBackgroundColor
+        }
+        // 下拉项背景颜色
+        const pickerDropdownPanleContent = document.querySelector(`.time-picker-popper-${code}`)
+        if (pickerDropdownPanleContent) {
+          // 文字颜色
+          pickerDropdownPanleContent.style.color = dropDownFontColor
+          // 背景颜色
+          pickerDropdownPanleContent.style.backgroundColor = dropDownBackgroundColor
+          // 下拉项添加var变量
+          pickerDropdownPanleContent.style.setProperty('--dropDownFontColor', dropDownFontColor)
+          pickerDropdownPanleContent.style.setProperty('--dropDownHoverFontColor', dropDownHoverFontColor)
+          pickerDropdownPanleContent.style.setProperty('--dropDownBackgroundColor', dropDownBackgroundColor)
+          pickerDropdownPanleContent.style.setProperty('--dropDownSelectedFontColor', dropDownSelectedFontColor)
+          pickerDropdownPanleContent.style.setProperty('--dropDownHoverBackgroundColor', dropDownHoverBackgroundColor)
+          // 选中项字体颜色
+          const selectedEl = pickerDropdownPanleContent.querySelector('.selected')
+          if (selectedEl) {
+            selectedEl.style.color = dropDownSelectedFontColor
+          }
+          // 选择过的，需要将选中颜色重置
+          const pickerItemEl = document.querySelectorAll(`.time-picker-popper-${code} .el-time-spinner__item`)
+          pickerItemEl.forEach((el) => {
+            el.style.color = dropDownFontColor
+          })
+        }
+      })
+    },
+    mouseenter () {
+      if (this.config.customize.value) {
+        setTimeout(() => {
+          // 清空图标
+          const timePickerCloseIcon = document.querySelector(`.time-picker-${this.innerConfig.code} .el-icon-circle-close`)
+          if (timePickerCloseIcon) {
+            timePickerCloseIcon.style.fontSize = this.innerConfig.customize.fontSize + 'px'
+          }
+        }, 25)
+      }
+    }
+  }
+
+}
+</script>
+
+<style lang="scss">
+.basic-component-time-select {
+  color: '';
+
+  // 清空图标
+  .el-icon-circle-close {
+    width: 100% !important;
+    height: 100% !important;
+    display: flex !important;
+    align-items: center !important;
+  }
+  // 时间选择器
+  .el-icon-time{
+    display: flex !important;
+    align-items: center !important;
+  }
+
+  .el-time-spinner {
+    margin-bottom: 0px !important;
+
+    .el-time-spinner__item {
+      &:hover {
+        color: var(--dropDownHoverFontColor) !important;
+        background-color: var(--dropDownHoverBackgroundColor) !important;
+      }
+    }
+
+    .active {
+      color: var(--dropDownSelectedFontColor) !important;
+
+      &:hover {
+        color: var(--dropDownSelectedFontColor) !important;
+        background-color: transparent !important;
+      }
+    }
+  }
+
+  .popper__arrow {
+    border-bottom-color: var(--dropDownBackgroundColor) !important;
+
+    &::after {
+      top: 0px !important;
+      border-bottom-color: var(--dropDownBackgroundColor) !important;
+    }
+  }
+
+  .cancel {
+    color: var(--dropDownFontColor) !important;
+  }
+
+  .confirm {
+    color: var(--dropDownSelectedFontColor);
+  }
+
+  .el-time-panel__footer {
+    border-top: 1px solid var(--dropDownFontColor) !important;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.basic-component-time-select {
+  width: 100%;
+  height: 100%;
+
+  .el-input--mini ::v-deep .el-input__inner {
+    height: 100% !important;
+    line-height: 100% !important;
+  }
+
+  .el-tag.el-tag--info {
+    color: var(--bs-el-text) !important;
+  }
+
+}
+
+::v-deep .el-input__inner {
+  height: 100% !important;
+  line-height: 100% !important;
+}
+</style>

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

@@ -0,0 +1,196 @@
+<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>
+          </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.dropDownSelectedFontColor"
+                :predefine="predefineThemeColors"
+              />
+            </el-form-item>
+          </div>
+          <SettingTitle>时间格式</SettingTitle>
+          <div class="lc-field-body">
+            <el-form-item label="时间格式化类型">
+              <el-select
+                v-model="config.customize.formatType"
+                class="bs-el-select"
+                popper-class="bs-el-select"
+                @change="selectFormatType"
+              >
+                <el-option
+                  v-for="(type) in formatTypeOptions"
+                  :key="type.value"
+                  :label="type.label"
+                  :value="type.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="config.customize.formatType === 'custom'"
+              label="自定义时间格式"
+            >
+              <el-input
+                v-model="config.customize.valueFormat"
+                placeholder="例如：HH:mm:ss"
+              />
+            </el-form-item>
+          </div>
+        </el-form>
+      </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 PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+export default {
+  name: 'Border14Setting',
+  components: {
+    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 {
+      hour: 'HH',
+      minute: 'mm',
+      second: 'ss',
+      // 时间格式化类型选项
+      formatTypeOptions: [
+        { label: 'Date 对象', value: 'default' },
+        { label: '时间戳', value: 'timestamp' },
+        { label: '自定义', value: 'custom' }
+      ],
+      hourOptions: [
+        { label: '24小时制，不补0', value: 'H' },
+        { label: '24小时制，补0', value: 'HH' }
+      ],
+      minuteOptions: [
+        { label: '分钟，不补0', value: 'm' },
+        { label: '分钟，补0', value: 'mm' }
+      ],
+      secondOptions: [
+        { label: '秒，不补0', value: 's' },
+        { label: '秒，补0', value: 'ss' }
+      ]
+    }
+  },
+  watch: {},
+  mounted () {},
+  methods: {
+    selectFormatType (val) {
+      if (val === 'default') {
+        this.config.customize.value = ''
+        this.config.customize.valueFormat = ''
+      } else if (val === 'timestamp') {
+        this.config.customize.value = 0
+        this.config.customize.valueFormat = 'timestamp'
+      }
+    }
+  }
+}
+</script>
+
+  <style lang="scss" scoped>
+  .lc-field-body {
+    width: 97%;
+    padding: 16px;
+  }
+  </style>

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

@@ -0,0 +1,50 @@
+
+import { commonConfig, displayOption } from 'data-room-ui/js/config'
+
+export const settingConfig = {
+  // text内容
+  text: '时间选择器',
+  // 设置面板属性的显隐
+  displayOption: {
+    ...displayOption,
+    dataAllocation: { enable: true },
+    dataSourceType: { enable: false },
+    params: { enable: false }
+  }
+}
+
+const customConfig = {
+  type: 'timePicker',
+  // 名称
+  title: '时间选择器',
+  root: {
+    version: '2023071001'
+  },
+  // 自定义属性
+  customize: {
+    value: '',
+    // 选择框背景颜色
+    backgroundColor: '#35393F',
+    // 选择框文字颜色
+    fontColor: '#FFFFFF',
+    // 选择框文字大小
+    fontSize: 20,
+    // 下拉框背景颜色
+    dropDownBackgroundColor: '#35393F',
+    // 下拉框字体颜色
+    dropDownFontColor: '#FFFFFF',
+    // 下拉项hover背景颜色
+    dropDownHoverBackgroundColor: '#6A7E9D',
+    // 下拉项hover字体颜色
+    dropDownHoverFontColor: '#FFFFFF',
+    // 下拉项激活文字颜色
+    dropDownSelectedFontColor: '#409EFF',
+    // 时间格式化类型:Date 对象（default），时间戳（timestamp），自定义（custom）
+    formatType: 'default',
+    // 绑定值的格式
+    valueFormat: ''
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

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

@@ -667,14 +667,15 @@ export default {
     // 映射字段
     sourceFieldList () {
       const list = this?.config?.customize?.bindComponents || this.fieldsList
-      return (
-        list?.map(field => {
-          return {
-            label: field.comment || field.fieldDesc,
-            value: field.name || field.fieldName
-          }
-        }) || []
-      )
+      const modifiedList = list?.map(field => ({
+        label: field.comment || field.fieldDesc,
+        value: field.name || field.fieldName
+      })) || []
+
+      if (this.config.type === 'timePicker') {
+        modifiedList.push({ label: '当前组件值', value: this.config.code })
+      }
+      return modifiedList
     }
   },
   watch: {

data-room-ui/packages/BorderComponents/GcBorder15/index.vue

@@ -112,7 +112,6 @@ export default {
   watch: {
   },
   mounted () {
-    console.log( this.config.border)
   },
   methods: {
   }

data-room-ui/packages/EchartsRender/index.vue

@@ -75,7 +75,6 @@ export default {
     'config.w': {
       handler (val) {
         if (val) {
-          // console.log('this.config',this.config);
           const chartDom = document.getElementById(this.chatId)
           this.observeChart(chartDom, this.chart, this.config.option)
         }
@@ -213,7 +212,6 @@ export default {
       return config
     },
     dataFormatting (config, data) {
-      console.log('dataFormatting')
       // 数据返回成功则赋值
       if (data.success) {
         data = data.data
@@ -257,7 +255,6 @@ export default {
     },
     // 格式化echarts的配置
     echartsOptionFormatting (config, data) {
-      console.log('echartsOptionFormatting');
       const option = config.option
       // 分组字段
       const xField = config.setting.find(item => item.optionField === 'xField')?.value
@@ -542,7 +539,6 @@ export default {
     },
     // 组件的样式改变，返回改变后的config
     changeStyle (config, isUpdateTheme) {
-      console.log('changeStyle');
       config = { ...this.config, ...config }
       config = this.transformSettingToOption(config, 'custom')
       // 这里定义了option和setting是为了保证在执行eval时,optionHandler、dataHandler里面可能会用到，

data-room-ui/packages/MapDataManagement/src/EditForm.vue

@@ -130,19 +130,19 @@
         slot="footer"
         class="dialog-footer"
       >
-      <el-button
-        class="bs-el-button-default"
-        @click="handleClose"
-      >
-        取消
-      </el-button>
-      <el-button
-        type="primary"
-        @click="submitForm"
-      >
-        确定
-      </el-button>
-    </span>
+        <el-button
+          class="bs-el-button-default"
+          @click="handleClose"
+        >
+          取消
+        </el-button>
+        <el-button
+          type="primary"
+          @click="submitForm"
+        >
+          确定
+        </el-button>
+      </span>
     </el-dialog>
     <input
       ref="geoJsonFile"
@@ -158,22 +158,21 @@
 <script>
 import _ from 'lodash'
 import vueJsonViewer from 'vue-json-viewer'
-import {mapUpdate, getMapChildFromGeoJson} from 'data-room-ui/js/utils/mapDataService'
+import { mapUpdate, getMapChildFromGeoJson } from 'data-room-ui/js/utils/mapDataService'
 
 export default {
-  name: "EditForm",
+  name: 'EditForm',
   components: {
     vueJsonViewer
   },
   computed: {
-    autoParseNextLevelShow() {
+    autoParseNextLevelShow () {
       // geoJson 不为空，且未上传过（说明是刚上传的）
       return !this.isWhitespace(this.mapForm.geoJson) && this.mapForm.uploadedGeoJson === 0
     }
   },
-  data() {
+  data () {
     const validateCode = (rule, value, callback) => {
-      console.log(this.mapForm.parentId)
       if (this.mapForm.parentId === '0' || this.mapForm.parentId === 0) {
         // 不需要校验
         callback()
@@ -192,7 +191,6 @@ export default {
           callback()
         }
       })
-
     }
     return {
       mapFormVisible: false,
@@ -211,40 +209,40 @@ export default {
       },
       rules: {
         mapCode: [
-          {required: true, message: '请输入地图标识', trigger: 'blur'},
+          { required: true, message: '请输入地图标识', trigger: 'blur' },
           { validator: validateCode, trigger: 'blur' }
         ],
         name: [
-          {required: true, message: '请输入地图名称', trigger: 'blur'}
+          { required: true, message: '请输入地图名称', trigger: 'blur' }
         ],
         level: [
-          {required: true, message: '请选择地图级别', trigger: 'change'}
+          { required: true, message: '请选择地图级别', trigger: 'change' }
         ],
         geoJson: [
-          {required: true, message: '请上传地图数据', trigger: 'change'}
+          { required: true, message: '请上传地图数据', trigger: 'change' }
         ]
       },
       levelList: [
-        {value: 0, label: '世界'},
-        {value: 1, label: '国家'},
-        {value: 2, label: '省份'},
-        {value: 3, label: '城市'},
-        {value: 4, label: '区县'}
+        { value: 0, label: '世界' },
+        { value: 1, label: '国家' },
+        { value: 2, label: '省份' },
+        { value: 3, label: '城市' },
+        { value: 4, label: '区县' }
       ],
       mapCodeList: []
     }
   },
   methods: {
-    init(map) {
+    init (map) {
       this.mapForm = _.cloneDeep(map)
       if (!this.isWhitespace(this.mapForm.geoJson)) {
         this.mapForm.geoJson = JSON.parse(this.mapForm.geoJson)
       }
     },
-    handleClose() {
+    handleClose () {
       this.mapFormVisible = false
     },
-    submitForm() {
+    submitForm () {
       this.$refs.mapForm.validate(valid => {
         if (!valid) {
           return false
@@ -263,27 +261,26 @@ export default {
           this.mapFormVisible = false
           this.$emit('refresh')
         })
-
       })
     },
-    isWhitespace(str) {
+    isWhitespace (str) {
       // 如果是null、undefined，返回true
       if (str == null) {
         return true
       }
-      return /^\s*$/.test(str);
+      return /^\s*$/.test(str)
     },
-    upload() {
+    upload () {
       this.$refs.geoJsonFile.click()
     },
-    handleBatchUpload(source) {
+    handleBatchUpload (source) {
       this.uploadLoading = true
       const file = source.target.files
       const reader = new FileReader() // 新建一个FileReader
       reader.readAsText(file[0], 'UTF-8') // 读取文件
 
       reader.onload = (event) => {
-        let jsonStr = event.target.result
+        const jsonStr = event.target.result
         // 读取文件内容
         try {
           this.mapForm.geoJson = JSON.parse(jsonStr)
@@ -296,12 +293,11 @@ export default {
         // input通过onchange事件来触发js代码的，由于两次文件是重复的，所以这个时候onchange事件是没有触发到的，所以需要手动清空input的值
         source.target.value = ''
       }
-    },
+    }
   }
 }
 </script>
 
-
 <style lang="scss" scoped>
 @import '../../assets/style/bsTheme.scss';
 

data-room-ui/packages/assets/images/bigScreenIcon/svg/22timePicker.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="1695262025982" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4844" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M533.333333 96c229.76 0 416 186.24 416 416S763.093333 928 533.333333 928 117.333333 741.76 117.333333 512 303.573333 96 533.333333 96z m0 64C338.922667 160 181.333333 317.589333 181.333333 512S338.922667 864 533.333333 864 885.333333 706.410667 885.333333 512 727.744 160 533.333333 160z m32 116.608v220.992l163.2 144.554667-42.410666 47.893333-184.789334-163.626667v-249.813333h64z" fill="#1677FF" p-id="4845"></path></svg>

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

@@ -31,7 +31,8 @@ const typeList = [
   'chartTab',
   'themeSwitcher',
   'themeSelect',
-  'select'
+  'select',
+  'timePicker'
 ]
 let basicConfigList = []
 basicConfigList = typeList.map((type) => {

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

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