feat: 添加日期时间选择器，以及相关配置，完善组件样式渲染

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>

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'
       }
     }
   }

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 = {

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,

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>

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' }
       ]
     }
   },

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

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]})`
         }
+      }
     }
   }
 }

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) => {

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
-               })
+                })
               }
             }
           }

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,