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

2 years ago · bcf54170cc
parent 3e46d7c588
commit bcf54170cc
12 changed files with 399 additions and 216 deletions
--- 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>
--- 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'
      }
    }
  }
--- 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 = {
--- 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,
--- 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>
--- 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' }
      ]
    }
  },
--- 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
--- 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]})`
        }
+      }
    }
  }
 }
--- a/data-room-ui/packages/assets/images/bigScreenIcon/svg/23dateTimePicker.svg
+++ b/data-room-ui/packages/assets/images/bigScreenIcon/svg/23dateTimePicker.svg
--- 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) => {
--- 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
-               })
+                })
              }
            }
          }
--- 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,