From bcf54170ccb632b9f0bd14b5661209b565dc9aad Mon Sep 17 00:00:00 2001
From: "wu.jian2" <distantmtn@gmail.com>
Date: Fri, 22 Sep 2023 17:52:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=97=A5=E6=9C=9F?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E9=80=89=E6=8B=A9=E5=99=A8=EF=BC=8C=E4=BB=A5?=
 =?UTF-8?q?=E5=8F=8A=E7=9B=B8=E5=85=B3=E9=85=8D=E7=BD=AE=EF=BC=8C=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BasicComponents/DateTimePicker/index.vue  | 338 +++++++++++++-----
 .../DateTimePicker/setting.vue                |  58 +--
 .../DateTimePicker/settingConfig.js           |  31 +-
 .../packages/BasicComponents/Select/index.vue |   9 +-
 .../BasicComponents/TimePicker/index.vue      |  24 +-
 .../BasicComponents/TimePicker/setting.vue    |  12 -
 .../BorderComponents/GcBorder14/index.vue     |  33 +-
 .../BorderComponents/GcBorder7/index.vue      |  74 ++--
 .../bigScreenIcon/svg/23dateTimePicker.svg    |   1 +
 .../js/config/basicComponentsConfig.js        |   3 +-
 data-room-ui/packages/js/store/actions.js     |  30 +-
 .../packages/js/utils/getComponentConfig.js   |   2 +-
 12 files changed, 399 insertions(+), 216 deletions(-)
 create mode 100644 data-room-ui/packages/assets/images/bigScreenIcon/svg/23dateTimePicker.svg

diff --git a/data-room-ui/packages/BasicComponents/DateTimePicker/index.vue b/data-room-ui/packages/BasicComponents/DateTimePicker/index.vue
index 72ed4a6b..17b51ce6 100644
--- a/data-room-ui/packages/BasicComponents/DateTimePicker/index.vue
+++ b/data-room-ui/packages/BasicComponents/DateTimePicker/index.vue
@@ -1,12 +1,14 @@
 <template>
   <el-date-picker
+    :key="config.customize.type"
     v-model="config.customize.value"
     :picker-options="config.customize.pickerOptions"
-    type="datetimerange"
+    :type="config.customize.type"
     clearable
     :class="['basic-component-date-picker', `date-picker-${config.code}`]"
     :popper-class="'basic-component-date-picker date-picker-popper-' + config.code"
     :value-format="config.customize.valueFormat"
+    size="large"
     @focus="focusEvent"
     @change="changeValue"
     @mouseenter.native="mouseenter"
@@ -33,7 +35,6 @@ export default {
   },
   data () {
     return {
-      value: '',
       innerConfig: {}
     }
   },
@@ -41,9 +42,6 @@ export default {
     ...mapState({
       chartList: state => state.bigScreen.pageInfo.chartList
     }),
-    // placeholder () {
-
-    // },
     isPreview () {
       return (this.$route.path === window?.BS_CONFIG?.routers?.previewUrl) || (this.$route.path === '/big-screen/preview')
     }
@@ -52,6 +50,7 @@ export default {
     config: {
       handler: function (val) {
         if (val && val.customize && val.customize.formatType === 'custom') {
+          // 解决时间格式化类型为自定义时，时间格式化类型和时间格式化值数据类型不匹配的问题
           this.$nextTick(() => {
             this.value = toString(this.value)
           })
@@ -62,9 +61,9 @@ export default {
   },
   created () { },
   mounted () {
-    // if (!this.isPreview) {
-    //   document.querySelector(`.date-picker-${this.config.code}`).style.pointerEvents = 'none'
-    // }
+    if (!this.isPreview) {
+      document.querySelector(`.date-picker-${this.config.code}`).style.pointerEvents = 'none'
+    }
     this.changeStyle(this.config)
   },
   beforeDestroy () {
@@ -81,36 +80,47 @@ export default {
       this.changeChartConfig(config)
       this.innerConfig = config
       // 时间选择器元素
-      const timePickerEl = document.querySelector(`.date-picker-${config.code}`)
-      timePickerEl.style.backgroundColor = config.customize.backgroundColor
-      // 时间选择器输入框元素
-      const timePickerInput = timePickerEl.querySelector('.el-input__inner')
-      if (timePickerInput) {
-        console.log(timePickerInput)
+      const { bgColor, fontColor, fontSize } = config.customize
+      this.$nextTick(() => {
+        const timePickerEl = document.querySelector(`.date-picker-${config.code}`)
+        timePickerEl.style.backgroundColor = bgColor
+        // 时间选择器输入框元素
+        const timePickerInput = timePickerEl.querySelector('.el-input__inner')
+        if (timePickerInput) {
         // 时间选择器输入框背景颜色
-        timePickerInput.style.backgroundColor = config.customize.backgroundColor
-        // 时间选择器输入框字体颜色
-        timePickerInput.style.color = config.customize.fontColor
-        // 时间选择器输入框字体大小
-        timePickerInput.style.fontSize = config.customize.fontSize + 'px'
-      }
-
-      // 时间范围选择器输入框元素
-      const timePickerRangeInput = timePickerEl.querySelectorAll('.el-range-input')
-      console.log(timePickerRangeInput)
-      timePickerRangeInput.forEach((el) => {
-        // 时间范围选择器输入框背景颜色
-        el.style.backgroundColor = config.customize.backgroundColor
-        // 时间范围选择器输入框字体颜色
-        el.style.color = config.customize.fontColor
-        // 时间范围选择器输入框字体大小
-        el.style.fontSize = config.customize.fontSize + 'px'
+          timePickerInput.style.backgroundColor = bgColor
+          // 时间选择器输入框字体颜色
+          timePickerInput.style.color = fontColor
+          // 时间选择器输入框字体大小
+          timePickerInput.style.fontSize = fontSize + 'px'
+        }
+        // 时间范围选择器输入框元素
+        const timePickerRangeInput = timePickerEl.querySelectorAll('.el-range-input')
+        if (timePickerRangeInput.length > 0) {
+        // 连接符
+          const timePickerRangeSeparator = timePickerEl.querySelector('.el-range-separator')
+          if (timePickerRangeSeparator) {
+            // 宽度和字体大小保持一致
+            timePickerRangeSeparator.style.width = fontSize + 'px'
+            timePickerRangeSeparator.style.color = fontColor
+            timePickerRangeSeparator.style.fontSize = fontSize + 'px'
+          }
+          timePickerRangeInput.forEach((el) => {
+          // 时间范围选择器输入框背景颜色
+            el.style.backgroundColor = bgColor
+            // 时间范围选择器输入框字体颜色
+            el.style.color = fontColor
+            // 时间范围选择器输入框字体大小
+            el.style.fontSize = fontSize + 'px'
+          })
+        }
+        // 时间选择器图标
+        const timePickerIcon = timePickerEl.querySelector('.el-input__icon')
+        if (timePickerIcon) {
+          timePickerIcon.style.width = fontSize + 'px'
+          timePickerIcon.style.fontSize = fontSize + 'px'
+        }
       })
-      // 时间选择器图标
-      const timePickerCloseIcon = timePickerEl.querySelector('.el-input__icon')
-      if (timePickerCloseIcon) {
-        timePickerCloseIcon.style.fontSize = config.customize.fontSize + 'px'
-      }
     },
     // 组件联动
     changeValue (val) {
@@ -119,37 +129,39 @@ export default {
     focusEvent () {
       this.$nextTick(() => {
         const { code } = this.innerConfig
-        const { dropDownBackgroundColor, dropDownFontColor, dropDownHoverFontColor, dropDownHoverBackgroundColor, dropDownSelectedFontColor } = this.innerConfig.customize
+        const { bgColor, fontColor, hoverFontColor, hoverBgColor, selectedFontColor, rangeBgColor, inputBgColor } = this.innerConfig.customize.dropDownBox
         const timePickerPopper = document.querySelector(`.date-picker-popper-${code}`)
         if (timePickerPopper) {
           // 去除边框
           timePickerPopper.style.border = 'none'
           // 确保下拉项的箭头颜色与下拉框的背景颜色保持一致
-          timePickerPopper.style.color = dropDownBackgroundColor
+          timePickerPopper.style.color = bgColor
         }
         // 下拉项元素
         const pickerDropdownPanleContent = document.querySelector(`.date-picker-popper-${code}`)
-        console.log(pickerDropdownPanleContent)
         if (pickerDropdownPanleContent) {
           // 文字颜色
-          pickerDropdownPanleContent.style.color = dropDownFontColor
+          pickerDropdownPanleContent.style.color = fontColor
           // 背景颜色
-          pickerDropdownPanleContent.style.backgroundColor = dropDownBackgroundColor
+          pickerDropdownPanleContent.style.backgroundColor = bgColor
           // 下拉项添加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 dropdown = pickerDropdownPanleContent.style
+          dropdown.setProperty('--fontColor', fontColor)
+          dropdown.setProperty('--hoverFontColor', hoverFontColor)
+          dropdown.setProperty('--bgColor', bgColor)
+          dropdown.setProperty('--inputBgColor', inputBgColor)
+          dropdown.setProperty('--selectedFontColor', selectedFontColor)
+          dropdown.setProperty('--hoverBgColor', hoverBgColor)
+          dropdown.setProperty('--rangeBgColor', rangeBgColor)
           // 选中项字体颜色
           const selectedEl = pickerDropdownPanleContent.querySelector('.selected')
           if (selectedEl) {
-            selectedEl.style.color = dropDownSelectedFontColor
+            selectedEl.style.color = selectedFontColor
           }
           // 选择过的，需要将选中颜色重置
           const pickerItemEl = document.querySelectorAll(`.date-picker-popper-${code} .el-time-spinner__item`)
           pickerItemEl.forEach((el) => {
-            el.style.color = dropDownFontColor
+            el.style.color = fontColor
           })
         }
       })
@@ -173,93 +185,236 @@ export default {
 <style lang="scss">
 .basic-component-date-picker {
   color: '';
-
   // 清空图标
   .el-icon-circle-close {
-    width: 100% !important;
-    height: 100% !important;
-    display: flex !important;
-    align-items: center !important;
+    display: flex ;
+    align-items: center ;
   }
+
   // 时间选择器
-  .el-icon-time{
-    display: flex !important;
-    align-items: center !important;
+  .el-icon-time {
+    display: flex ;
+    align-items: center ;
+  }
+
+  .el-time-panel {
+    border: none ;
+    background-color: var(--bgColor) ;
   }
 
   // 选择日期 时间区域
-  .el-date-picker__time-header{
-    border-bottom:var(--dropDownBackgroundColor) !important;
-    .el-input__inner{
-      border: none !important;
+  .el-date-picker__time-header {
+    border-bottom: var(--bgColor) ;
+
+    .el-input__inner {
+      border: none ;
       // 添加一点阴影
-      box-shadow: 0 0 5px 0 rgba(0,0,0,0.1) !important;
-      background-color: red !important;
-    }
-    .el-time-panel{
-      border: none !important ;
-      background-color: var(--dropDownBackgroundColor) !important;
+      box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1) ;
+      color: var(--fontColor) ;
+      background-color: var(--inputBgColor) ;
     }
+
   }
+
   // 头部，修改文字颜色和图标颜色
-  .el-date-picker__header{
-    color: var(--dropDownFontColor) !important;
-    .el-date-picker__header-label{
-      color: var(--dropDownFontColor) !important;
+  .el-date-picker__header {
+    color: var(--fontColor) ;
+
+    .el-date-picker__header-label {
+      color: var(--fontColor) ;
     }
+
     // 左右箭头图标颜色
-    .el-picker-panel__icon-btn{
-      color: var(--dropDownFontColor) !important;
+    .el-picker-panel__icon-btn {
+      color: var(--fontColor) ;
     }
   }
+  // datetimerange
+  .el-date-range-picker__time-header {
+    border-color: var(--fontColor);
+
+    // 中间箭头图标颜色
+    .el-icon-arrow-right {
+      color: var(--fontColor) ;
+    }
+    // 时间选择器输入框
+    .el-input__inner{
+      border: none;
+      color: var(--fontColor);
+      // 添加一点阴影
+      background-color: var(--inputBgColor) ;
+      box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1) ;
+    }
+  }
+  // datetimerange
   .el-picker-panel__content{
-    // 第一行tr 文字颜色
+    .el-icon-d-arrow-left{
+      color: var(--fontColor) ;
+      &:after{
+        color: var(--fontColor) ;
+      }
+    }
+    .el-icon-arrow-left{
+      color: var(--fontColor) ;
+      &:after{
+        color: var(--fontColor) ;
+      }
+    }
+    .el-icon-d-arrow-right{
+      color: var(--fontColor) ;
+      &:after{
+        color: var(--fontColor) ;
+      }
+    }
+    .el-icon-arrow-right{
+      color: var(--fontColor) ;
+      &:after{
+        color: var(--fontColor) ;
+      }
+    }
+  }
+  .el-date-range-picker__content.is-left{
+    border-color: var(--fontColor) ;
+  }
+  .el-date-table{
+    th{
+      border-color: var(--fontColor) ;
+    }
+    td{
+      div{
+        color: var(--fontColor) ;
+        &:hover{
+          color: var(--hoverFontColor) ;
+        }
+      }
+    }
+  }
+
+  // 范围选择器背景颜色
+  .in-range {
+    div {
+      // 下拉范围选中背景颜色
+      background-color: var(--rangeBgColor) !important;
+    }
+  }
+
+  .today {
+    span {
+      color: var(--selectedFontColor) !important;
+    }
+  }
+
+  .el-time-panel__content::before {
+    content: "";
+    top: 50%;
+    position: absolute;
+    margin-top: -15px;
+    height: 32px;
+    z-index: 1;
+    left: 0;
+    right: 0;
+    box-sizing: border-box;
+    padding-top: 6px;
+    text-align: left;
+    border-top: 1px solid var(--fontColor);
+    border-bottom: 1px solid var(--fontColor);
   }
   // 脚部
-  .el-picker-panel__footer{
-    background-color: var(--dropDownBackgroundColor) !important;
+  .el-picker-panel__footer {
+    border-color: var(--fontColor);
+    background-color: var(--bgColor) ;
+
+    // 清空按钮
+    .el-picker-panel__link-btn {
+      span {
+        color: var(--fontColor) ;
+      }
+    }
+
+    // 确定按钮
+    .el-button--default {
+      border: none ;
+      color: var(--fontColor) ;
+      background-color: var(--bgColor) ;
+    }
+
+    .is-disabled {
+      span {
+        color: #999 ;
+      }
+    }
   }
 
   .el-time-spinner {
-    margin-bottom: 0px !important;
+    margin-bottom: 0px ;
 
     .el-time-spinner__item {
       &:hover {
-        color: var(--dropDownHoverFontColor) !important;
-        background-color: var(--dropDownHoverBackgroundColor) !important;
+        color: var(--hoverFontColor) ;
+        background-color: var(--hoverBgColor) ;
       }
     }
 
     .active {
-      color: var(--dropDownSelectedFontColor) !important;
+      color: var(--selectedFontColor) ;
 
       &:hover {
-        color: var(--dropDownSelectedFontColor) !important;
-        background-color: transparent !important;
+        color: var(--selectedFontColor) ;
+        background-color: transparent ;
       }
     }
   }
 
   .popper__arrow {
-    bottom: -6px !important;
-    border-bottom-color: var(--dropDownBackgroundColor) !important;
+    bottom: -6px ;
+    border-bottom-color: var(--bgColor) !important;
 
     &::after {
-      bottom: 0px !important;
-      border-bottom-color: var(--dropDownBackgroundColor) !important;
+      bottom: 0px ;
+      border-bottom-color: var(--bgColor) !important;
     }
   }
 
   .cancel {
-    color: var(--dropDownFontColor) !important;
+    color: var(--fontColor) ;
   }
 
   .confirm {
-    color: var(--dropDownSelectedFontColor);
+    color: var(--selectedFontColor);
   }
 
   .el-time-panel__footer {
-    border-top: 1px solid var(--dropDownFontColor) !important;
+    border-top: 1px solid var(--fontColor) ;
+    .cancel {
+      span {
+        color: var(--fontColor) ;
+      }
+    }
+
+    // 确定按钮
+    .confirm {
+      border: none ;
+      color: var(--fontColor) ;
+      background-color: var(--bgColor) ;
+    }
+  }
+  // 年选择器
+  .el-year-table {
+    a{
+      color: var(--fontColor) ;
+      &:hover{
+        color: var(--hoverFontColor) ;
+      }
+    }
+  }
+  // 月选择器
+  .el-month-table {
+    a{
+      color: var(--fontColor) ;
+      &:hover{
+        color: var(--hoverFontColor) ;
+      }
+    }
   }
 }
 </style>
@@ -268,11 +423,13 @@ export default {
 .basic-component-date-picker {
   width: 100%;
   height: 100%;
+
   // 范围时间选择器连接符
-  ::v-deep .el-range-separator{
+  ::v-deep .el-range-separator {
     display: flex !important;
     align-items: center !important;
   }
+
   .el-input--mini ::v-deep .el-input__inner {
     height: 100% !important;
     line-height: 100% !important;
@@ -288,4 +445,7 @@ export default {
   height: 100% !important;
   line-height: 100% !important;
 }
+::v-deep .el-range-input{
+  width: 45% !important;
+}
 </style>
diff --git a/data-room-ui/packages/BasicComponents/DateTimePicker/setting.vue b/data-room-ui/packages/BasicComponents/DateTimePicker/setting.vue
index 05959523..ff6a547b 100644
--- a/data-room-ui/packages/BasicComponents/DateTimePicker/setting.vue
+++ b/data-room-ui/packages/BasicComponents/DateTimePicker/setting.vue
@@ -24,7 +24,7 @@
             <!-- 选择器背景颜色 -->
             <el-form-item label="背景颜色">
               <ColorPicker
-                v-model="config.customize.backgroundColor"
+                v-model="config.customize.bgColor"
                 :predefine="predefineThemeColors"
               />
             </el-form-item>
@@ -50,34 +50,44 @@
           <div class="lc-field-body">
             <el-form-item label="背景颜色">
               <ColorPicker
-                v-model="config.customize.dropDownBackgroundColor"
+                v-model="config.customize.dropDownBox.bgColor"
                 :predefine="predefineThemeColors"
               />
             </el-form-item>
             <el-form-item label="字体颜色">
               <ColorPicker
-                v-model="config.customize.dropDownFontColor"
+                v-model="config.customize.dropDownBox.fontColor"
                 :predefine="predefineThemeColors"
               />
             </el-form-item>
             <!-- 下拉项悬浮背景颜色 -->
             <el-form-item label="悬浮颜色">
               <ColorPicker
-                v-model="config.customize.dropDownHoverBackgroundColor"
+                v-model="config.customize.dropDownBox.hoverBgColor"
                 :predefine="predefineThemeColors"
               />
             </el-form-item>
             <!-- 下拉项悬浮字体颜色 -->
             <el-form-item label="悬浮字体颜色">
               <ColorPicker
-                v-model="config.customize.dropDownHoverFontColor"
+                v-model="config.customize.dropDownBox.hoverFontColor"
                 :predefine="predefineThemeColors"
               />
             </el-form-item>
             <!-- 激活项文字颜色 -->
             <el-form-item label="选中项文字颜色">
               <ColorPicker
-                v-model="config.customize.dropDownSelectedFontColor"
+                v-model="config.customize.dropDownBox.selectedFontColor"
+                :predefine="predefineThemeColors"
+              />
+            </el-form-item>
+            <!-- 选中范围背景颜色 -->
+            <el-form-item
+              v-if="['daterange','datetimerange'].includes(config.customize.type)"
+              label="范围背景颜色"
+            >
+              <ColorPicker
+                v-model="config.customize.dropDownBox.rangeBgColor"
                 :predefine="predefineThemeColors"
               />
             </el-form-item>
@@ -85,9 +95,13 @@
           <SettingTitle>时间格式</SettingTitle>
           <div class="lc-field-body">
             <el-form-item label="显示类型">
-              <el-select v-model="config.customize.type">
+              <el-select
+                v-model="config.customize.type"
+                class="bs-el-select"
+                popper-class="bs-el-select"
+              >
                 <el-option
-                  v-for="(type) in displayType"
+                  v-for="(type) in displayTypeOptions"
                   :key="type.value"
                   :label="type.label"
                   :value="type.value"
@@ -114,14 +128,16 @@
               v-if="config.customize.formatType === 'custom'"
               label="自定义时间格式"
             >
+              <!-- year/month/date/week/ datetime/datetimerange/daterange -->
               <div class="time-format-description">
                 <el-input
                   v-model="config.customize.valueFormat"
-                  placeholder="例如：HH:mm:ss"
+                  placeholder="例如：yyyy-MM-dd HH:mm:ss"
                   clearable
                 />
+                <!-- HH表示小时（24小时制），mm表示分钟，ss表示秒 -->
                 <el-tooltip
-                  content="时间格式示例：HH表示小时（24小时制），mm表示分钟，ss表示秒"
+                  content="时间格式示例：yyyy表示年份，MM表示月份，dd表示日期，HH表示小时（24小时制），mm表示分钟，ss表示秒，具体可参考Element-UI官网的日期选择器的时间格式化部分"
                   placement="top"
                 >
                   <span
@@ -181,17 +197,15 @@ export 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' }
+      // 时间显示类型选项 :year/month/date/week/ datetime/datetimerange/daterange
+      displayTypeOptions: [
+        { label: '年', value: 'year' },
+        { label: '月', value: 'month' },
+        { label: '日', value: 'date' },
+        { label: '周', value: 'week' },
+        { label: '日期时间', value: 'datetime' },
+        { label: '日期时间范围', value: 'datetimerange' },
+        { label: '日期范围', value: 'daterange' }
       ]
     }
   },
@@ -206,7 +220,7 @@ export default {
         this.config.customize.value = 0
         this.config.customize.valueFormat = 'timestamp'
       } else if (type === 'custom') {
-        this.config.customize.valueFormat = 'HH:mm:ss'
+        this.config.customize.valueFormat = 'yyyy-MM-dd HH:mm:ss'
       }
     }
   }
diff --git a/data-room-ui/packages/BasicComponents/DateTimePicker/settingConfig.js b/data-room-ui/packages/BasicComponents/DateTimePicker/settingConfig.js
index c85ec70a..aeb80e2d 100644
--- a/data-room-ui/packages/BasicComponents/DateTimePicker/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/DateTimePicker/settingConfig.js
@@ -24,27 +24,34 @@ const customConfig = {
   customize: {
     value: '',
     // 选择框背景颜色
-    backgroundColor: '#35393F',
+    bgColor: '#35393F',
     // 选择框文字颜色
     fontColor: '#FFFFFF',
     // 选择框文字大小
     fontSize: 20,
-    // 下拉框背景颜色
-    dropDownBackgroundColor: '#35393F',
-    // 下拉框字体颜色
-    dropDownFontColor: '#FFFFFF',
-    // 下拉项hover背景颜色 #6A7E9D
-    dropDownHoverBackgroundColor: 'red',
-    // 下拉项hover字体颜色
-    dropDownHoverFontColor: '#FFFFFF',
-    // 下拉项激活文字颜色 #409EFF
-    dropDownSelectedFontColor: 'yellow',
     // 显示类型 year/month/date/week/ datetime/datetimerange/daterange
     type: 'datetime',
     // 时间格式化类型:Date 对象（default），时间戳（timestamp），自定义（custom）
     formatType: 'default',
     // 绑定值的格式
-    valueFormat: ''
+    valueFormat: '',
+    // 下拉框
+    dropDownBox: {
+      // 下拉框背景颜色
+      bgColor: '#35393F',
+      // 下拉框输入框背景颜色
+      inputBgColor: '#2C3036',
+      // 下拉框字体颜色
+      fontColor: '#FFFFFF',
+      // 下拉项hover背景颜色
+      hoverBgColor: '#6A7E9D',
+      // 下拉项hover字体颜色
+      hoverFontColor: '#FFFFFF',
+      // 下拉项激活文字颜色
+      selectedFontColor: '#00BFFF',
+      // 范围时间选择器选中范围颜色
+      rangeBgColor: '#409EFF'
+    }
   }
 }
 export const dataConfig = {
diff --git a/data-room-ui/packages/BasicComponents/Select/index.vue b/data-room-ui/packages/BasicComponents/Select/index.vue
index adfe864b..30fe8e05 100644
--- a/data-room-ui/packages/BasicComponents/Select/index.vue
+++ b/data-room-ui/packages/BasicComponents/Select/index.vue
@@ -116,7 +116,7 @@ export default {
     // 组件联动
     selectChange (val) {
       if (val) {
-        this.linkage(this.config.option.data.find(item => item[this.config.dataSource.metricField] === val))
+        this.linkage(this.optionData.find(item => item[this.config.dataSource.metricField] === val))
       }
     },
     visibleChange (val) {
@@ -180,11 +180,6 @@ export default {
       border-bottom-color:var(--color) !important;
     }
   }
-  .el-popper[x-placement^="top"] .popper__arrow{
-
-    &::after{
-    }
-  }
 }
 </style>
 
@@ -204,7 +199,7 @@ export default {
     //  选择器输入框样式
     .el-input__inner {
       height: 100% !important;
-      border-color: var(--bs-el-border) !important;
+      border-color: none !important;
     }
   }
   .el-select-dropdown__item.hover,
diff --git a/data-room-ui/packages/BasicComponents/TimePicker/index.vue b/data-room-ui/packages/BasicComponents/TimePicker/index.vue
index 7760be4c..67fd912c 100644
--- a/data-room-ui/packages/BasicComponents/TimePicker/index.vue
+++ b/data-room-ui/packages/BasicComponents/TimePicker/index.vue
@@ -15,7 +15,6 @@
 
 <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'
@@ -62,7 +61,7 @@ export default {
   created () { },
   mounted () {
     if (!this.isPreview) {
-      document.querySelector(`.time-picker-${this.config.code}`).style.pointerEvents = 'none'
+      // document.querySelector(`.time-picker-${this.config.code}`).style.pointerEvents = 'none'
     }
     this.changeStyle(this.config)
   },
@@ -188,8 +187,9 @@ export default {
     display: flex !important;
     align-items: center !important;
   }
+
   // 时间选择器
-  .el-icon-time{
+  .el-icon-time {
     display: flex !important;
     align-items: center !important;
   }
@@ -214,6 +214,22 @@ export default {
     }
   }
 
+  .el-time-panel__content::before {
+    content: "";
+    top: 50%;
+    position: absolute;
+    margin-top: -15px;
+    height: 32px;
+    z-index: 1;
+    left: 0;
+    right: 0;
+    box-sizing: border-box;
+    padding-top: 6px;
+    text-align: left;
+    border-top: 1px solid var(--dropDownFontColor);
+    border-bottom: 1px solid var(--dropDownFontColor);
+  }
+
   .popper__arrow {
     border-bottom-color: var(--dropDownBackgroundColor) !important;
 
@@ -232,7 +248,7 @@ export default {
   }
 
   .el-time-panel__footer {
-    border-top: 1px solid var(--dropDownFontColor) !important;
+    border-color: 1px solid var(--dropDownFontColor) !important;
   }
 }
 </style>
diff --git a/data-room-ui/packages/BasicComponents/TimePicker/setting.vue b/data-room-ui/packages/BasicComponents/TimePicker/setting.vue
index d1a5cbc8..ca05e8fd 100644
--- a/data-room-ui/packages/BasicComponents/TimePicker/setting.vue
+++ b/data-room-ui/packages/BasicComponents/TimePicker/setting.vue
@@ -170,18 +170,6 @@ export default {
         { 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' }
       ]
     }
   },
diff --git a/data-room-ui/packages/BorderComponents/GcBorder14/index.vue b/data-room-ui/packages/BorderComponents/GcBorder14/index.vue
index 7cd9caf3..52a988a7 100644
--- a/data-room-ui/packages/BorderComponents/GcBorder14/index.vue
+++ b/data-room-ui/packages/BorderComponents/GcBorder14/index.vue
@@ -14,20 +14,22 @@
         border: ${width}px solid ${color};
         opacity: ${opacity/ 100};
         background-image: linear-gradient(${gradientDirection}, ${
-          gradientColor0 ? gradientColor0 : gradientColor1
-        } , ${gradientColor1 ? gradientColor1 : gradientColor0})
+        gradientColor0 ? gradientColor0 : gradientColor1
+      } , ${gradientColor1 ? gradientColor1 : gradientColor0})
       `"
     >
-    <div class="element"
-      v-if="config.border.isTitle"
-      :style="`
+      <div
+        v-if="config.border.isTitle"
+        class="element"
+        :style="`
       color:${fontColor};
       font-size:${config.border.fontSize}px;
       line-height:${config.border.titleHeight}px;
       height:${config.border.titleHeight};
       padding:0 0 0 20px`"
       >
-      {{config.title}}</div>
+        {{ config.title }}
+      </div>
     </div>
   </div>
 </template>
@@ -50,32 +52,29 @@ export default {
     }
   },
   computed: {
-     fontColor () {
+    fontColor () {
       return this.config.border.fontColor ? this.config.border.fontColor
         : '#fff'
     },
-     color () {
+    color () {
       return this.config.border.borderColor || ''
     },
     width () {
       return this.config.border.borderWidth || 2
     },
     gradientColor0 () {
-      console.log(this.config.border.gradientColor)
-      if(this.config.border.gradientColor){
-        return this.config.border.gradientColor[0] ||this.config.border.gradientColor[1]
-      }else{
+      if (this.config.border.gradientColor) {
+        return this.config.border.gradientColor[0] || this.config.border.gradientColor[1]
+      } else {
         return 'transparent'
       }
     },
     gradientColor1 () {
-      console.log(this.config.border.gradientColor)
-      if(this.config.border.gradientColor){
-        return this.config.border.gradientColor[1] ||this.config.border.gradientColor[0]
-      }else{
+      if (this.config.border.gradientColor) {
+        return this.config.border.gradientColor[1] || this.config.border.gradientColor[0]
+      } else {
         return 'transparent'
       }
-
     },
     radiusLeftTop () {
       return this.config.border.radiusLeftTop || 2
diff --git a/data-room-ui/packages/BorderComponents/GcBorder7/index.vue b/data-room-ui/packages/BorderComponents/GcBorder7/index.vue
index d73ac33c..c914c4d4 100644
--- a/data-room-ui/packages/BorderComponents/GcBorder7/index.vue
+++ b/data-room-ui/packages/BorderComponents/GcBorder7/index.vue
@@ -3,22 +3,24 @@
     style="width: 100%;height: 100%"
     class="bs-design-wrap"
   >
-     <dv-border-box-7
+    <dv-border-box-7
       :id="'dataV' + config.code"
-      :background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
-      :color='borderColor'
       :key="updateKey"
+      :background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
+      :color="borderColor"
     >
-    <div class="element"
-    v-if="config.border.isTitle"
-    :style="`
+      <div
+        v-if="config.border.isTitle"
+        class="element"
+        :style="`
     color:${color};
     font-size:${config.border.fontSize}px;
     line-height:${config.border.titleHeight}px;
     height:${config.border.titleHeight};
     padding:0 0 0 20px`"
-    >
-    {{config.title}}</div>
+      >
+        {{ config.title }}
+      </div>
     </dv-border-box-7>
   </div>
 </template>
@@ -41,7 +43,7 @@ export default {
   },
   data () {
     return {
-    borderBgId: `borderBg${this.config.code}`
+      borderBgId: `borderBg${this.config.code}`
     }
   },
   computed: {
@@ -57,50 +59,52 @@ export default {
     color () {
       return this.config.border.fontColor ? this.config.border.fontColor
         : '#fff'
-    },
+    }
   },
   watch: {
-    updateKey:{
+    updateKey: {
       handler (val) {
-        this.$nextTick(()=>{
+        this.$nextTick(() => {
           this.changeColor()
         })
       },
       deep: true
     },
-    'config.border.gradientColor':{
-         handler (val) {
-          this.changeColor()
-      },immediate: true
+    'config.border.gradientColor': {
+      handler (val) {
+        this.changeColor()
+      },
+      immediate: true
     },
-    'config.border.gradientDirection':{
-         handler (val) {
-          this.changeColor()
-      },immediate: true
+    'config.border.gradientDirection': {
+      handler (val) {
+        this.changeColor()
+      },
+      immediate: true
     },
-    'config.border.opacity':{
-         handler (val) {
-          this.changeColor()
-      },immediate: true
+    'config.border.opacity': {
+      handler (val) {
+        this.changeColor()
+      },
+      immediate: true
     }
   },
   mounted () {
     this.changeColor()
   },
   methods: {
-     changeColor(){
-      if(!this.config.border.opacity){
-              this.config.border.opacity=100
-        }
-        console.log(this.config.border.gradientColor)
-      if(!this.config.border.gradientColor) return
+    changeColor () {
+      if (!this.config.border.opacity) {
+        this.config.border.opacity = 100
+      }
+      if (!this.config.border.gradientColor) return
       if (document.querySelector(`#dataV${this.config.code}`)) {
-          const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
-          if (borderElement) {
-              borderElement.style.opacity = (this.config.border.opacity / 100)
-              borderElement.style.background = `linear-gradient(${this.config.border.gradientDirection},${this.config.border.gradientColor[0]?this.config.border.gradientColor[0]:this.config.border.gradientColor[1]}, ${this.config.border.gradientColor[1]?this.config.border.gradientColor[1]:this.config.border.gradientColor[0]})`
-          }
+        const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
+        if (borderElement) {
+          borderElement.style.opacity = (this.config.border.opacity / 100)
+          borderElement.style.background = `linear-gradient(${this.config.border.gradientDirection},${this.config.border.gradientColor[0] ? this.config.border.gradientColor[0] : this.config.border.gradientColor[1]}, ${this.config.border.gradientColor[1] ? this.config.border.gradientColor[1] : this.config.border.gradientColor[0]})`
         }
+      }
     }
   }
 }
diff --git a/data-room-ui/packages/assets/images/bigScreenIcon/svg/23dateTimePicker.svg b/data-room-ui/packages/assets/images/bigScreenIcon/svg/23dateTimePicker.svg
new file mode 100644
index 00000000..c6686d3a
--- /dev/null
+++ b/data-room-ui/packages/assets/images/bigScreenIcon/svg/23dateTimePicker.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="1695376220028" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1684" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M880.88 831.26H142.81c-43.71 0-79.47-35.76-79.47-79.47V270c0-43.71 35.76-79.47 79.47-79.47h738.08c43.71 0 79.47 35.76 79.47 79.47v481.78c-0.01 43.72-35.77 79.48-79.48 79.48z m15.4-129.88V320.41c0-36.2-29.61-65.81-65.81-65.81H193.22c-36.2 0-65.81 29.61-65.81 65.81v380.96c0 36.2 29.61 65.81 65.81 65.81h637.26c36.19 0.01 65.8-29.61 65.8-65.8z" fill="#1677FF" p-id="1685"></path><path d="M180.27 405.66h83.29c36.73 0 64.71 10.36 83.94 31.08 17.94 19.22 26.91 46.99 26.91 83.29 0 35.67-9.19 63.54-27.55 83.62-19.22 20.5-47.2 30.75-83.94 30.75h-82.65V405.66z m34.92 29.79V604.6h41.33c29.04 0 50.3-6.94 63.75-20.82 13.24-13.88 19.86-35.13 19.86-63.75 0-29.04-6.52-50.4-19.54-64.07-13.46-13.67-34.6-20.5-63.43-20.5h-41.97z" fill="#1677FF" p-id="1686"></path><path d="M262.92 639.4h-87.65V400.66h88.29c38.01 0 67.48 10.99 87.6 32.67 18.74 20.08 28.25 49.25 28.25 86.7 0 36.79-9.71 66.06-28.86 86.99-20.16 21.5-49.63 32.38-87.63 32.38z m-77.65-10h77.65c35.13 0 62.14-9.82 80.29-29.17 17.37-18.99 26.2-45.98 26.2-80.2 0-34.83-8.6-61.71-25.57-79.88-18.16-19.57-45.17-29.49-80.28-29.49h-78.29V629.4z m71.24-19.8h-46.33V430.45h46.97c30.08 0 52.63 7.4 67 22 13.94 14.63 20.98 37.35 20.98 67.58 0 29.81-7.15 52.42-21.24 67.2-14.4 14.85-37.06 22.37-67.38 22.37z m-36.32-10h36.33c27.51 0 47.75-6.49 60.16-19.3 12.24-12.83 18.45-33.12 18.45-60.27 0-27.58-6.11-47.97-18.16-60.62-12.36-12.56-32.51-18.95-59.81-18.95h-36.97V599.6zM535.23 482.54c10.04 10.68 15.06 26.06 15.06 46.13V634.4h-31.4v-23.39c-6.2 8.12-14.31 14.85-24.35 20.18-10.89 5.13-23.6 7.69-38.12 7.69-17.09 0-30.65-4.38-40.69-13.13-10.25-8.97-15.38-20.82-15.38-35.56 0-20.93 8.22-36.41 24.67-46.45 13.88-8.54 32.04-12.81 54.46-12.81l37.16-0.32v-4.17c0-23.07-12.49-34.6-37.48-34.6-11.75 0-20.72 2.14-26.91 6.41-7.48 4.92-11.85 12.17-13.14 21.78h-33.64c2.56-19.65 10.89-34.17 24.99-43.57 11.96-8.11 28.94-12.17 50.94-12.17 24.36-0.01 42.3 6.08 53.83 18.25z m-18.58 74.01l-34.92 0.32c-30.97 0-46.45 10.79-46.45 32.36 0 6.62 2.45 12.07 7.37 16.34 4.91 4.28 12.06 6.41 21.46 6.41 15.16 0 27.87-4.27 38.12-12.81 9.61-8.75 14.42-20.07 14.42-33.96v-8.66z" fill="#1677FF" p-id="1687"></path><path d="M456.42 643.88c-18.25 0-33.04-4.83-43.97-14.37-11.34-9.92-17.09-23.16-17.09-39.33 0-22.69 9.11-39.76 27.06-50.72 14.6-8.99 33.81-13.55 57.07-13.55l32.16-0.28c-0.27-19.65-10.61-28.81-32.48-28.81-10.66 0-18.76 1.86-24.07 5.52l-0.09 0.06c-6.26 4.12-9.83 10.09-10.93 18.27l-0.58 4.34h-43.71l0.74-5.65c2.75-21.05 11.89-36.89 27.17-47.08 12.72-8.63 30.8-13.01 53.71-13.01 25.66 0 44.99 6.67 57.45 19.82l0.01 0.02c10.89 11.59 16.41 28.26 16.41 49.56V639.4h-41.4v-15.62c-4.96 4.49-10.64 8.45-17 11.83l-0.22 0.11c-11.5 5.41-25.04 8.16-40.24 8.16z m22.75-157.05c35.11 0 42.48 21.53 42.48 39.6v9.12l-42.12 0.36c-21.42 0-38.86 4.06-51.88 12.07-15 9.16-22.29 22.96-22.29 42.19 0 13.35 4.47 23.75 13.67 31.8 9.05 7.89 21.63 11.9 37.39 11.9 13.66 0 25.74-2.41 35.88-7.16 9.3-4.96 16.9-11.27 22.61-18.74l8.97-11.76v33.18h21.4V528.68c0-18.66-4.61-33.02-13.69-42.7-10.5-11.08-27.38-16.69-50.19-16.69-20.88 0-37.07 3.81-48.13 11.31-11.61 7.75-18.81 19.04-21.91 34.43h23.59c2.13-8.96 7-15.98 14.5-20.93 7.03-4.82 17.02-7.27 29.72-7.27z m-15.06 130.14c-10.6 0-18.93-2.57-24.75-7.64-6.03-5.24-9.08-12-9.08-20.11 0-17.04 8.93-37.36 51.45-37.36l39.92-0.37v13.7c0 15.29-5.4 27.95-16.05 37.66l-0.17 0.14c-11.12 9.28-25.02 13.98-41.32 13.98z m47.54-55.38l-29.87 0.27c-37.2 0-41.5 15.61-41.5 27.36 0 5.15 1.85 9.26 5.65 12.56 3.95 3.44 10.07 5.18 18.19 5.18 14.05 0 25.44-3.79 34.84-11.58 8.55-7.82 12.7-17.7 12.7-30.19v-3.6z" fill="#1677FF" p-id="1688"></path><path d="M639.34 415.27v53.5h37.8v28.19h-37.8v96.11c0 4.28 0.96 7.58 2.88 9.93 2.13 2.14 5.13 3.2 8.97 3.2h21.78v28.19h-27.23c-14.31 0-24.67-3.73-31.08-11.21-6.2-6.83-9.29-16.87-9.29-30.11v-96.11h-30.75v-28.19h30.75v-39.4l33.97-14.1z" fill="#1677FF" p-id="1689"></path><path d="M677.98 639.4h-32.23c-15.74 0-27.46-4.34-34.83-12.91-6.99-7.75-10.54-18.99-10.54-33.42v-91.11h-30.75v-38.19h30.75v-37.74l43.96-18.25v55.99h37.8v38.19h-37.8v91.11c0 2.93 0.54 5.14 1.6 6.57 1.17 1.05 2.89 1.57 5.25 1.57h26.78v38.19z m-98.35-147.44h30.75v101.11c0 11.9 2.69 20.91 7.99 26.76l0.09 0.11c5.38 6.28 14.56 9.47 27.28 9.47h22.23V611.2H651.2c-5.21 0-9.42-1.57-12.51-4.67l-0.33-0.37c-2.66-3.25-4.01-7.66-4.01-13.1v-101.1h37.8v-18.19h-37.8v-51.01l-23.96 9.95v41.07h-30.75v18.18z" fill="#1677FF" p-id="1690"></path><path d="M836.36 491.83c13.03 16.87 19.65 39.94 19.86 69.2H730.64c1.28 16.45 5.66 28.83 13.13 37.16 7.9 8.54 18.47 12.81 31.72 12.81 11.74 0 21.35-2.77 28.83-8.33 5.34-4.05 10.36-11.21 15.06-21.46h33.96c-4.06 15.81-11.64 28.73-22.75 38.76-14.53 12.6-32.79 18.9-54.78 18.9-24.56 0-43.89-7.58-57.99-22.75-15.38-16.02-23.07-37.59-23.07-64.71 0-24.77 7.26-45.38 21.78-61.83 14.1-16.87 33.42-25.31 57.99-25.31 27.35 0.01 47.96 9.2 61.84 27.56z m-91.3 11.54c-7.26 7.69-11.85 18.37-13.78 32.04h89.38c-3.2-28.83-18.26-43.25-45.17-43.25-12.81-0.01-22.96 3.73-30.43 11.21z" fill="#1677FF" p-id="1691"></path><path d="M775.81 643.88c-25.89 0-46.64-8.19-61.65-24.34-16.17-16.85-24.4-39.79-24.4-68.12 0-25.89 7.74-47.79 22.99-65.09 15.03-17.95 35.81-27.05 61.78-27.05 28.85 0 50.99 9.93 65.8 29.52 13.64 17.68 20.67 41.97 20.89 72.2l0.04 5.04H736.18c1.64 12.6 5.44 22.28 11.31 28.82 6.92 7.49 16.1 11.16 28 11.16 10.59 0 19.29-2.47 25.85-7.34 4.61-3.5 9.16-10.08 13.49-19.54l1.34-2.92h43.61l-1.6 6.24c-4.29 16.7-12.44 30.57-24.24 41.23l-0.08 0.07c-15.38 13.35-34.91 20.12-58.05 20.12z m-1.28-174.6c-23.21 0-40.93 7.69-54.15 23.52l-0.09 0.1c-13.62 15.43-20.53 35.12-20.53 58.52 0 25.66 7.29 46.27 21.67 61.25 13.28 14.29 31.05 21.21 54.38 21.21 20.64 0 37.95-5.94 51.47-17.64 8.8-7.97 15.3-18.05 19.36-30.02h-24.1c-4.69 9.55-9.68 16.26-15.19 20.45-8.36 6.21-19.07 9.35-31.86 9.35-14.64 0-26.54-4.85-35.39-14.42-8.24-9.18-13.08-22.67-14.45-40.17l-0.42-5.39h125.88c-0.89-25.65-7.18-46.2-18.72-61.14l-0.03-0.04c-12.99-17.21-31.91-25.58-57.83-25.58z m51.72 71.12H725.53l0.8-5.7c2.06-14.66 7.14-26.35 15.09-34.77l0.1-0.1c8.41-8.41 19.84-12.68 33.97-12.68 29.33 0 46.67 16.49 50.14 47.7l0.62 5.55z m-89.01-10h77.66c-4.06-22.65-16.7-33.25-39.4-33.25-11.51 0-20.29 3.17-26.85 9.7-5.46 5.8-9.29 13.71-11.41 23.55z" fill="#1677FF" p-id="1692"></path></svg>
\ No newline at end of file
diff --git a/data-room-ui/packages/js/config/basicComponentsConfig.js b/data-room-ui/packages/js/config/basicComponentsConfig.js
index 087c04c9..ce8ab29d 100644
--- a/data-room-ui/packages/js/config/basicComponentsConfig.js
+++ b/data-room-ui/packages/js/config/basicComponentsConfig.js
@@ -32,7 +32,8 @@ const typeList = [
   'themeSwitcher',
   'themeSelect',
   'select',
-  'timePicker'
+  'timePicker',
+  'dateTimePicker'
 ]
 let basicConfigList = []
 basicConfigList = typeList.map((type) => {
diff --git a/data-room-ui/packages/js/store/actions.js b/data-room-ui/packages/js/store/actions.js
index 71c61b3d..a16edc2f 100644
--- a/data-room-ui/packages/js/store/actions.js
+++ b/data-room-ui/packages/js/store/actions.js
@@ -18,30 +18,28 @@ export default {
         const pageInfo = handleResData(data)
         // 兼容边框配置
         pageInfo.chartList.forEach((item) => {
-          console.log(item)
           if (!item.border) {
-            item.border={type:'',titleHeight:60,fontSize:30,isTitle:true,padding:[0,0,0,0]}
+            item.border = { type: '', titleHeight: 60, fontSize: 30, isTitle: true, padding: [0, 0, 0, 0] }
           }
-          if(!item.border.padding){
-            item.border.padding=[0,0,0,0]
+          if (!item.border.padding) {
+            item.border.padding = [0, 0, 0, 0]
           }
-          if (item.type == 'customComponent'){
-            plotSettings[Symbol.iterator]=function*(){
-              let keys=Object.keys(plotSettings)
-              for(let k of keys){
-                yield [k,plotSettings[k]]
+          if (item.type == 'customComponent') {
+            plotSettings[Symbol.iterator] = function * () {
+              const keys = Object.keys(plotSettings)
+              for (const k of keys) {
+                yield [k, plotSettings[k]]
               }
             }
-            for(let [key,value] of plotSettings){
+            for (const [key, value] of plotSettings) {
               if (item.name == value.name) {
-                const settings=JSON.parse(JSON.stringify(value.setting))
-                item.setting=settings.map((x)=>{
-                  const index=item.setting.findIndex(y=>y.field==x.field)
-                  console.log(item.setting[index].field)
+                const settings = JSON.parse(JSON.stringify(value.setting))
+                item.setting = settings.map((x) => {
+                  const index = item.setting.findIndex(y => y.field == x.field)
                   x.field = item.setting[index].field
-                  x.value=item.setting[index].value
+                  x.value = item.setting[index].value
                   return x
-               })
+                })
               }
             }
           }
diff --git a/data-room-ui/packages/js/utils/getComponentConfig.js b/data-room-ui/packages/js/utils/getComponentConfig.js
index 4b4f7954..293d7e57 100644
--- a/data-room-ui/packages/js/utils/getComponentConfig.js
+++ b/data-room-ui/packages/js/utils/getComponentConfig.js
@@ -277,7 +277,7 @@ export default function getComponentConfig (type) {
       return {
         name: '日期时间选择器',
         title: '日期时间选择器',
-        icon: Icon.getNameList()[22],
+        icon: Icon.getNameList()[23],
         className: 'com.gccloud.dataroom.core.module.chart.components.ScreenTimePickerChart',
         w: 260,
         h: 80,