初始化
This commit is contained in:
砂糖
585
frontend/packages/BasicComponents/DateTimePicker/index.vue
Normal file
585
frontend/packages/BasicComponents/DateTimePicker/index.vue
Normal file
@@ -0,0 +1,585 @@
|
||||
<template>
|
||||
<el-date-picker
|
||||
:key="config.customize.type"
|
||||
v-model="value"
|
||||
:picker-options="config.customize.pickerOptions"
|
||||
: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.format"
|
||||
:format="config.customize.format"
|
||||
:default-value="value"
|
||||
size="large"
|
||||
@focus="focusEvent"
|
||||
@change="changeValue"
|
||||
@mouseenter.native="mouseenter"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import commonMixins from 'data-room-ui/js/mixins/commonMixins'
|
||||
import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
|
||||
import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
|
||||
import { mapState } from 'vuex'
|
||||
window.dataSetFields = []
|
||||
export default {
|
||||
name: 'BasicComponentsDateTimePicker',
|
||||
components: {},
|
||||
mixins: [commonMixins, linkageMixins],
|
||||
props: {
|
||||
// 组件配置
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
value: '',
|
||||
innerConfig: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
chartList: state => state.bigScreen.pageInfo.chartList
|
||||
}),
|
||||
isPreview () {
|
||||
return (this.$route.path === window?.BS_CONFIG?.routers?.previewUrl) || (this.$route.path === '/big-screen/preview')
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'config.customize.formatType': {
|
||||
handler (val) {
|
||||
const newFomat = this.config.customize.format.replace(/y/g, 'Y').replace(/d/g, 'D')
|
||||
if (val === 'timestamp') {
|
||||
// this.value = 0
|
||||
if (['year', 'month', 'date', 'week', 'datetime'].includes(this.config.customize.type)) {
|
||||
this.value = moment(new Date()).format(newFomat)
|
||||
} else {
|
||||
this.value = [
|
||||
moment(new Date()).subtract(7, 'days').valueOf(),
|
||||
moment(new Date()).valueOf()
|
||||
]
|
||||
}
|
||||
} else if (val === 'custom') {
|
||||
if (['year', 'month', 'date', 'week', 'datetime'].includes(this.config.customize.type)) {
|
||||
this.value = moment(new Date()).format(newFomat)
|
||||
} else {
|
||||
this.value = [
|
||||
moment(new Date()).subtract(7, 'days').format(newFomat),
|
||||
moment(new Date()).format(newFomat)
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
'config.customize.type': {
|
||||
handler (val) {
|
||||
this.$nextTick(() => {
|
||||
if (!this.isPreview) {
|
||||
document.querySelector(`.date-picker-${this.config.code}`).style.pointerEvents = 'none'
|
||||
}
|
||||
})
|
||||
const newFomat = this.config.customize.format.replace(/y/g, 'Y').replace(/d/g, 'D')
|
||||
if (['year', 'month', 'date', 'week', 'datetime'].includes(val)) {
|
||||
if (this.config.customize.formatType === 'timestamp') {
|
||||
this.value = moment(new Date()).valueOf()
|
||||
} else {
|
||||
this.value = moment(new Date()).format(newFomat)
|
||||
}
|
||||
} else {
|
||||
if (this.config.customize.formatType === 'timestamp') {
|
||||
this.value = [
|
||||
moment(new Date()).subtract(7, 'days').valueOf(),
|
||||
moment(new Date()).valueOf()
|
||||
]
|
||||
} else {
|
||||
this.value = [
|
||||
moment(new Date()).subtract(7, 'days').format(newFomat),
|
||||
moment(new Date()).format(newFomat)
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
'config.customize.format': {
|
||||
handler (val) {
|
||||
this.$nextTick(() => {
|
||||
if (!this.isPreview) {
|
||||
document.querySelector(`.date-picker-${this.config.code}`).style.pointerEvents = 'none'
|
||||
}
|
||||
})
|
||||
const newFomat = val?.replace(/y/g, 'Y')?.replace(/d/g, 'D')
|
||||
if (['year', 'month', 'date', 'week', 'datetime'].includes(this.config.customize.type)) {
|
||||
this.value = moment(new Date()).format(newFomat)
|
||||
if (this.config.customize.formatType === 'timestamp') {
|
||||
this.value = moment(new Date()).valueOf()
|
||||
} else {
|
||||
this.value = moment(new Date()).format(newFomat)
|
||||
}
|
||||
} else {
|
||||
if (this.config.customize.formatType === 'timestamp') {
|
||||
this.value = [
|
||||
moment(new Date()).subtract(7, 'days').valueOf(),
|
||||
moment(new Date()).valueOf()
|
||||
]
|
||||
} else {
|
||||
this.value = [
|
||||
moment(new Date()).subtract(7, 'days').format(newFomat),
|
||||
moment(new Date()).format(newFomat)
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created () { },
|
||||
mounted () {
|
||||
if (!this.isPreview) {
|
||||
document.querySelector(`.date-picker-${this.config.code}`).style.pointerEvents = 'none'
|
||||
}
|
||||
this.changeStyle(this.config)
|
||||
if (this.value === '') {
|
||||
const newFomat = this.config.customize.format.replace(/y/g, 'Y').replace(/d/g, 'D')
|
||||
this.value = [
|
||||
moment(new Date()).subtract(7, 'days').format(newFomat),
|
||||
moment(new Date()).format(newFomat)
|
||||
]
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
},
|
||||
methods: {
|
||||
dataFormatting (config, data) {
|
||||
config.option.data = []
|
||||
return config
|
||||
},
|
||||
changeStyle (config) {
|
||||
config = { ...this.config, ...config }
|
||||
// 样式改变时更新主题配置
|
||||
config.theme = settingToTheme(cloneDeep(config), this.customTheme)
|
||||
this.changeChartConfig(config)
|
||||
this.innerConfig = config
|
||||
// 时间选择器元素
|
||||
const { 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 = 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'
|
||||
}
|
||||
})
|
||||
},
|
||||
// 组件联动
|
||||
changeValue (val) {
|
||||
// 判断如果val是数组，需要将它转成字符串
|
||||
if (Array.isArray(val)) {
|
||||
val = val.join(',')
|
||||
}
|
||||
this.linkage({ [this.config.code]: val })
|
||||
},
|
||||
focusEvent () {
|
||||
this.$nextTick(() => {
|
||||
const { code } = this.innerConfig
|
||||
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 = bgColor
|
||||
}
|
||||
// 下拉项元素
|
||||
const pickerDropdownPanleContent = document.querySelector(`.date-picker-popper-${code}`)
|
||||
if (pickerDropdownPanleContent) {
|
||||
// 文字颜色
|
||||
pickerDropdownPanleContent.style.color = fontColor
|
||||
// 背景颜色
|
||||
pickerDropdownPanleContent.style.backgroundColor = bgColor
|
||||
// 下拉项添加var变量
|
||||
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 = selectedFontColor
|
||||
}
|
||||
// 选择过的，需要将选中颜色重置
|
||||
const pickerItemEl = document.querySelectorAll(`.date-picker-popper-${code} .el-time-spinner__item`)
|
||||
pickerItemEl.forEach((el) => {
|
||||
el.style.color = fontColor
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
mouseenter () {
|
||||
if (this.value) {
|
||||
setTimeout(() => {
|
||||
// 清空图标
|
||||
const timePickerCloseIcon = document.querySelector(`.date-picker-${this.innerConfig.code} .el-icon-circle-close`)
|
||||
if (timePickerCloseIcon) {
|
||||
timePickerCloseIcon.style.fontSize = this.innerConfig.customize.fontSize + 'px'
|
||||
}
|
||||
}, 25)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.basic-component-date-picker {
|
||||
color: '';
|
||||
|
||||
// 清空图标
|
||||
.el-icon-circle-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// 时间选择器
|
||||
.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(--bgColor);
|
||||
|
||||
.el-input__inner {
|
||||
border: none;
|
||||
// 添加一点阴影
|
||||
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(--fontColor);
|
||||
|
||||
.el-date-picker__header-label {
|
||||
color: var(--fontColor);
|
||||
}
|
||||
|
||||
// 左右箭头图标颜色
|
||||
.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 {
|
||||
.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 {
|
||||
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;
|
||||
|
||||
.el-time-spinner__item {
|
||||
&:hover {
|
||||
color: var(--hoverFontColor);
|
||||
background-color: var(--hoverBgColor);
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
color: var(--selectedFontColor);
|
||||
|
||||
&:hover {
|
||||
color: var(--selectedFontColor);
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popper__arrow {
|
||||
bottom: -6px;
|
||||
border-bottom-color: var(--bgColor) !important;
|
||||
border-top-color: var(--bgColor) !important;
|
||||
|
||||
&::after {
|
||||
bottom: 0px;
|
||||
border-bottom-color: var(--bgColor) !important;
|
||||
border-top-color: var(--bgColor) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel {
|
||||
color: var(--fontColor);
|
||||
}
|
||||
|
||||
.confirm {
|
||||
color: var(--selectedFontColor);
|
||||
}
|
||||
|
||||
.el-time-panel__footer {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 上月 下月 字体颜色置灰
|
||||
.prev-month {
|
||||
span {
|
||||
color: #999 !important;
|
||||
|
||||
&:hover {
|
||||
color: var(--hoverFontColor) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.next-month {
|
||||
span {
|
||||
color: #999 !important;
|
||||
|
||||
&:hover {
|
||||
color: var(--hoverFontColor) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.basic-component-date-picker {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
|
||||
// 范围时间选择器连接符
|
||||
::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;
|
||||
}
|
||||
|
||||
.el-tag.el-tag--info {
|
||||
color: var(--bs-el-text) !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
height: 100% !important;
|
||||
line-height: 100% !important;
|
||||
}
|
||||
|
||||
::v-deep .el-range-input {
|
||||
width: 45% !important;
|
||||
}</style>
|
||||
330
frontend/packages/BasicComponents/DateTimePicker/setting.vue
Normal file
330
frontend/packages/BasicComponents/DateTimePicker/setting.vue
Normal file
@@ -0,0 +1,330 @@
|
||||
<template>
|
||||
<div class="bs-setting-wrap">
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="config"
|
||||
label-width="100px"
|
||||
label-position="left"
|
||||
class="setting-body bs-el-form"
|
||||
>
|
||||
<div>
|
||||
<slot name="top" />
|
||||
<el-form
|
||||
:model="config.customize"
|
||||
label-position="left"
|
||||
class="setting-body bs-el-form"
|
||||
label-width="100px"
|
||||
>
|
||||
<SettingTitle>位置</SettingTitle>
|
||||
<div class="lc-field-body">
|
||||
<PosWhSetting :config="config" />
|
||||
</div>
|
||||
<SettingTitle>旋转</SettingTitle>
|
||||
<div class="lc-field-body">
|
||||
<RotateSetting
|
||||
:config="config"
|
||||
/>
|
||||
</div>
|
||||
<SettingTitle>基础</SettingTitle>
|
||||
<div class="lc-field-body">
|
||||
<el-form-item label="组件类型">
|
||||
<el-select
|
||||
v-model="config.customize.type"
|
||||
class="bs-el-select"
|
||||
popper-class="bs-el-select"
|
||||
@change="changeType"
|
||||
>
|
||||
<el-option
|
||||
v-for="(type) in displayTypeOptions"
|
||||
:key="type.value"
|
||||
:label="type.label"
|
||||
:value="type.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 选择器背景颜色 -->
|
||||
<el-form-item label="背景颜色">
|
||||
<ColorPicker
|
||||
v-model="config.customize.bgColor"
|
||||
:predefine="predefineThemeColors"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 字体大小 -->
|
||||
<el-form-item label="字体大小">
|
||||
<el-input-number
|
||||
v-model="config.customize.fontSize"
|
||||
class="bs-el-input-number"
|
||||
:min="12"
|
||||
:max="100"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 字体颜色 -->
|
||||
<el-form-item label="字体颜色">
|
||||
<ColorPicker
|
||||
v-model="config.customize.fontColor"
|
||||
:predefine="predefineThemeColors"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<SettingTitle>下拉项</SettingTitle>
|
||||
<!-- 选择器下拉框背景颜色 -->
|
||||
<div class="lc-field-body">
|
||||
<el-form-item label="背景颜色">
|
||||
<ColorPicker
|
||||
v-model="config.customize.dropDownBox.bgColor"
|
||||
:predefine="predefineThemeColors"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="字体颜色">
|
||||
<ColorPicker
|
||||
v-model="config.customize.dropDownBox.fontColor"
|
||||
:predefine="predefineThemeColors"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 下拉项悬浮背景颜色 -->
|
||||
<!-- <el-form-item label="悬浮背景颜色">
|
||||
<ColorPicker
|
||||
v-model="config.customize.dropDownBox.hoverBgColor"
|
||||
:predefine="predefineThemeColors"
|
||||
/>
|
||||
</el-form-item> -->
|
||||
<!-- 下拉项悬浮字体颜色 -->
|
||||
<el-form-item label="悬浮字体颜色">
|
||||
<ColorPicker
|
||||
v-model="config.customize.dropDownBox.hoverFontColor"
|
||||
:predefine="predefineThemeColors"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 激活项文字颜色 -->
|
||||
<el-form-item label="选中项文字颜色">
|
||||
<ColorPicker
|
||||
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>
|
||||
</div>
|
||||
<SettingTitle>日期时间格式</SettingTitle>
|
||||
<div class="lc-field-body">
|
||||
<!-- <el-form-item label="时间显示格式化">
|
||||
<div class="description">
|
||||
<el-input
|
||||
v-model="config.customize.format"
|
||||
placeholder="例如：yyyy-MM-dd HH:mm:ss"
|
||||
clearable
|
||||
/>
|
||||
<el-tooltip placement="top">
|
||||
<span
|
||||
class="el-icon-question"
|
||||
style="color:#9e9e9e"
|
||||
/>
|
||||
<div slot="content">
|
||||
年：yyyy，表示年份，例如：2017<br>
|
||||
月：M，表示月份，不补0，例如：1<br>
|
||||
月：MM，表示月份，补0，例如：01<br>
|
||||
日：d，表示日期，不补0，例如：2<br>
|
||||
日：dd，表示日期，补0，例如：02<br>
|
||||
小时：H，表示小时（24小时制），不补0，例如：3<br>
|
||||
小时：HH，表示小时（24小时制），补0，例如：03<br>
|
||||
小时：h，表示小时（12小时制），须和 A 或 a 使用，不补0，例如：3<br>
|
||||
小时：hh，表示小时（12小时制），须和 A 或 a 使用，补0，例如：03<br>
|
||||
分钟：m，表示分钟，不补0，例如：4<br>
|
||||
分钟：mm，表示分钟，补0，例如：04<br>
|
||||
秒：s，表示秒钟，不补0，例如：5<br>
|
||||
秒：ss，表示秒钟，补0，例如：05<br>
|
||||
AM/PM：A，仅 format 可用，大写，例如：AM<br>
|
||||
am/pm：a，仅 format 可用，小写，例如：am<br>
|
||||
JS时间戳：timestamp，仅 value-format 可用，组件绑定值为number类型，例如：1483326245000<br>
|
||||
不需要格式化字符：[MM]，使用方括号标识不需要格式化的字符，例如：MM<br>
|
||||
具体的时间格式化字符和使用方式，可以参考Element-UI官网的日期选择器的时间格式化部分。
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="时间类型">
|
||||
<div class="description">
|
||||
<el-select
|
||||
v-model="config.customize.formatType"
|
||||
class="bs-el-select"
|
||||
popper-class="bs-el-select"
|
||||
clearable
|
||||
@change="changeFormatType"
|
||||
>
|
||||
<el-option
|
||||
v-for="(type) in formatTypeOptions"
|
||||
:key="type.value"
|
||||
:label="type.label"
|
||||
:value="type.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-tooltip placement="top">
|
||||
<span
|
||||
class="el-icon-question"
|
||||
style="color:#9e9e9e"
|
||||
/>
|
||||
<div slot="content">
|
||||
时间戳：从1970年1月1日开始计算的秒数，数据类型为数值型，例如：1483326245000。<br>
|
||||
自定义：通过输入特定的格式字符串来指定时间的数据格式，例如：yyyy-MM-dd HH:mm:ss对应数据为 2023-10-08 09:30:00。<br>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="config.customize.formatType === 'custom'"
|
||||
label="时间格式"
|
||||
>
|
||||
<!-- year/month/date/week/ datetime/datetimerange/daterange -->
|
||||
<div class="description">
|
||||
<el-input
|
||||
v-model="config.customize.format"
|
||||
placeholder="例如：yyyy-MM-dd HH:mm:ss"
|
||||
clearable
|
||||
/>
|
||||
<!-- HH表示小时（24小时制），mm表示分钟，ss表示秒 -->
|
||||
<el-tooltip placement="top">
|
||||
<span
|
||||
class="el-icon-question"
|
||||
style="color:#9e9e9e"
|
||||
/>
|
||||
<div slot="content">
|
||||
<div slot="content">
|
||||
年：yyyy，表示年份，例如：2017<br>
|
||||
月：M，表示月份，不补0，例如：1<br>
|
||||
月：MM，表示月份，补0，例如：01<br>
|
||||
日：d，表示日期，不补0，例如：2<br>
|
||||
日：dd，表示日期，补0，例如：02<br>
|
||||
小时：H，表示小时（24小时制），不补0，例如：3<br>
|
||||
小时：HH，表示小时（24小时制），补0，例如：03<br>
|
||||
小时：h，表示小时（12小时制），须和 A 或 a 使用，不补0，例如：3<br>
|
||||
小时：hh，表示小时（12小时制），须和 A 或 a 使用，补0，例如：03<br>
|
||||
分钟：m，表示分钟，不补0，例如：4<br>
|
||||
分钟：mm，表示分钟，补0，例如：04<br>
|
||||
秒：s，表示秒钟，不补0，例如：5<br>
|
||||
秒：ss，表示秒钟，补0，例如：05<br>
|
||||
AM/PM：A，仅 format 可用，大写，例如：AM<br>
|
||||
am/pm：a，仅 format 可用，小写，例如：am<br>
|
||||
JS时间戳：timestamp，仅 value-format 可用，组件绑定值为number类型，例如：1483326245000<br>
|
||||
不需要格式化字符：[MM]，使用方括号标识不需要格式化的字符，例如：MM<br>
|
||||
具体的时间格式化字符和使用方式，可以参考Element-UI官网的日期选择器的时间格式化部分。
|
||||
</div>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
|
||||
import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
|
||||
import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
|
||||
import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
|
||||
import {predefineColors} from "data-room-ui/js/utils/colorList";
|
||||
export default {
|
||||
name: 'DateTimePickerSetting',
|
||||
components: {
|
||||
ColorPicker,
|
||||
PosWhSetting,
|
||||
SettingTitle,
|
||||
RotateSetting
|
||||
},
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
predefineThemeColors: {
|
||||
type: Array,
|
||||
default: () => predefineColors
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
hour: 'HH',
|
||||
minute: 'mm',
|
||||
second: 'ss',
|
||||
// 时间格式化类型选项
|
||||
formatTypeOptions: [
|
||||
{ label: '时间戳', value: 'timestamp' },
|
||||
{ label: '自定义格式', value: 'custom' }
|
||||
],
|
||||
// 时间显示类型选项 :year/month/date/week/ datetime/datetimerange/daterange
|
||||
displayTypeOptions: [
|
||||
{ label: '年', value: 'year' },
|
||||
{ label: '月', value: 'month' },
|
||||
{ label: '日', value: 'date' },
|
||||
{ label: '日期时间', value: 'datetime' },
|
||||
{ label: '日期时间范围', value: 'datetimerange' },
|
||||
{ label: '日期范围', value: 'daterange' }
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
mounted () { },
|
||||
methods: {
|
||||
changeType (val) {
|
||||
if (val === 'year') {
|
||||
if (this.config.customize.formatType === 'custom') {
|
||||
this.config.customize.format = 'yyyy'
|
||||
}
|
||||
} else if (val === 'month') {
|
||||
if (this.config.customize.formatType === 'custom') {
|
||||
this.config.customize.format = 'yyyy-MM'
|
||||
}
|
||||
} else if (val === 'date') {
|
||||
if (this.config.customize.formatType === 'custom') {
|
||||
this.config.customize.format = 'yyyy-MM-dd'
|
||||
}
|
||||
} else if (val === 'datetime') {
|
||||
if (this.config.customize.formatType === 'custom') {
|
||||
this.config.customize.format = 'yyyy-MM-dd HH:mm:ss'
|
||||
}
|
||||
} else if (val === 'datetimerange') {
|
||||
if (this.config.customize.formatType === 'custom') {
|
||||
this.config.customize.format = 'yyyy-MM-dd HH:mm:ss'
|
||||
}
|
||||
} else if (val === 'daterange') {
|
||||
if (this.config.customize.formatType === 'custom') {
|
||||
this.config.customize.format = 'yyyy-MM-dd'
|
||||
}
|
||||
}
|
||||
},
|
||||
changeFormatType (val) {
|
||||
if (val === 'timestamp') {
|
||||
this.config.customize.format = 'timestamp'
|
||||
} else if (val === 'custom') {
|
||||
this.config.customize.format = 'yyyy-MM-dd HH:mm:ss'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.lc-field-body {
|
||||
width: 97%;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.description {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.el-tooltip {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,69 @@
|
||||
|
||||
import { commonConfig, displayOption } from 'data-room-ui/js/config'
|
||||
|
||||
export const settingConfig = {
|
||||
// text内容
|
||||
text: '时间选择器',
|
||||
// 设置面板属性的显隐
|
||||
displayOption: {
|
||||
...displayOption,
|
||||
dataAllocation: { enable: true },
|
||||
dataSourceType: { enable: false },
|
||||
params: { enable: false }
|
||||
}
|
||||
}
|
||||
|
||||
const customConfig = {
|
||||
type: 'dateTimePicker',
|
||||
// 名称
|
||||
title: '日期时间选择器',
|
||||
root: {
|
||||
version: '2023092101',
|
||||
// 绕x轴旋转角度
|
||||
rotateX: 0,
|
||||
// 绕y轴旋转角度
|
||||
rotateY: 0,
|
||||
// 绕z轴旋转角度
|
||||
rotateZ: 0,
|
||||
// 透视距离
|
||||
perspective: 0,
|
||||
skewX: 0,
|
||||
skewY: 0
|
||||
},
|
||||
// 自定义属性
|
||||
customize: {
|
||||
// 选择框背景颜色
|
||||
bgColor: '#00000000',
|
||||
// 选择框文字颜色
|
||||
fontColor: '#FFFFFF',
|
||||
// 选择框字体大小
|
||||
fontSize: 14,
|
||||
// 显示类型 year/month/date/ datetime/datetimerange/daterange
|
||||
type: 'datetimerange',
|
||||
// 时间格式化类型:时间戳（timestamp），自定义（custom）
|
||||
formatType: 'custom',
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
// 时间数据格式
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
// 下拉框
|
||||
dropDownBox: {
|
||||
// 下拉框背景颜色
|
||||
bgColor: '#35393F',
|
||||
// 下拉框输入框背景颜色
|
||||
inputBgColor: '#2C3036',
|
||||
// 下拉框字体颜色
|
||||
fontColor: '#FFFFFF',
|
||||
// 下拉项hover背景颜色
|
||||
hoverBgColor: '#6A7E9D',
|
||||
// 下拉项hover字体颜色
|
||||
hoverFontColor: '#FFFFFF',
|
||||
// 下拉项激活文字颜色
|
||||
selectedFontColor: '#00BFFF',
|
||||
// 范围时间选择器选中范围颜色
|
||||
rangeBgColor: '#409EFF'
|
||||
}
|
||||
}
|
||||
}
|
||||
export const dataConfig = {
|
||||
...commonConfig(customConfig)
|
||||
}
|
||||
Reference in New Issue
Block a user