tzjy-code
/
DataRoom
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
main
wu.jian2 2 years ago
parent 3e46d7c588
commit bcf54170cc
12 changed files with 399 additions and 216 deletions
Show Stats Download Patch File Download Diff File

338
data-room-ui/packages/BasicComponents/DateTimePicker/index.vue
Unescape Escape View File

@ -1,12 +1,14 @@
<template> <template>
<el-date-picker <el-date-picker
:key="config.customize.type"
v-model="config.customize.value" v-model="config.customize.value"
:picker-options="config.customize.pickerOptions" :picker-options="config.customize.pickerOptions"
type="datetimerange" :type="config.customize.type"
clearable clearable
:class="['basic-component-date-picker', `date-picker-${config.code}`]" :class="['basic-component-date-picker', `date-picker-${config.code}`]"
:popper-class="'basic-component-date-picker date-picker-popper-' + config.code" :popper-class="'basic-component-date-picker date-picker-popper-' + config.code"
:value-format="config.customize.valueFormat" :value-format="config.customize.valueFormat"
size="large"
@focus="focusEvent" @focus="focusEvent"
@change="changeValue" @change="changeValue"
@mouseenter.native="mouseenter" @mouseenter.native="mouseenter"
@ -33,7 +35,6 @@ export default {
}, },
data () { data () {
return { return {
value: '',
innerConfig: {} innerConfig: {}
} }
}, },
@ -41,9 +42,6 @@ export default {
...mapState({ ...mapState({
chartList: state => state.bigScreen.pageInfo.chartList chartList: state => state.bigScreen.pageInfo.chartList
}), }),
// placeholder () {
// },
isPreview () { isPreview () {
return (this.$route.path === window?.BS_CONFIG?.routers?.previewUrl) || (this.$route.path === '/big-screen/preview') return (this.$route.path === window?.BS_CONFIG?.routers?.previewUrl) || (this.$route.path === '/big-screen/preview')
} }
@ -52,6 +50,7 @@ export default {
config: { config: {
handler: function (val) { handler: function (val) {
if (val && val.customize && val.customize.formatType === 'custom') { if (val && val.customize && val.customize.formatType === 'custom') {
// 解决时间格式化类型为自定义时，时间格式化类型和时间格式化值数据类型不匹配的问题
this.$nextTick(() => { this.$nextTick(() => {
this.value = toString(this.value) this.value = toString(this.value)
}) })
@ -62,9 +61,9 @@ export default {
}, },
created () { }, created () { },
mounted () { mounted () {
// if (!this.isPreview) { if (!this.isPreview) {
// document.querySelector(`.date-picker-${this.config.code}`).style.pointerEvents = 'none' document.querySelector(`.date-picker-${this.config.code}`).style.pointerEvents = 'none'
// } }
this.changeStyle(this.config) this.changeStyle(this.config)
}, },
beforeDestroy () { beforeDestroy () {
@ -81,36 +80,47 @@ export default {
this.changeChartConfig(config) this.changeChartConfig(config)
this.innerConfig = config this.innerConfig = config
// 时间选择器元素 // 时间选择器元素
const timePickerEl = document.querySelector(`.date-picker-${config.code}`) const { bgColor, fontColor, fontSize } = config.customize
timePickerEl.style.backgroundColor = config.customize.backgroundColor this.$nextTick(() => {
// 时间选择器输入框元素 const timePickerEl = document.querySelector(`.date-picker-${config.code}`)
const timePickerInput = timePickerEl.querySelector('.el-input__inner') timePickerEl.style.backgroundColor = bgColor
if (timePickerInput) { // 时间选择器输入框元素
console.log(timePickerInput) const timePickerInput = timePickerEl.querySelector('.el-input__inner')
if (timePickerInput) {
// 时间选择器输入框背景颜色 // 时间选择器输入框背景颜色
timePickerInput.style.backgroundColor = config.customize.backgroundColor timePickerInput.style.backgroundColor = bgColor
// 时间选择器输入框字体颜色 // 时间选择器输入框字体颜色
timePickerInput.style.color = config.customize.fontColor timePickerInput.style.color = fontColor
// 时间选择器输入框字体大小 // 时间选择器输入框字体大小
timePickerInput.style.fontSize = config.customize.fontSize + 'px' timePickerInput.style.fontSize = fontSize + 'px'
} }
// 时间范围选择器输入框元素
// 时间范围选择器输入框元素 const timePickerRangeInput = timePickerEl.querySelectorAll('.el-range-input')
const timePickerRangeInput = timePickerEl.querySelectorAll('.el-range-input') if (timePickerRangeInput.length > 0) {
console.log(timePickerRangeInput) // 连接符
timePickerRangeInput.forEach((el) => { const timePickerRangeSeparator = timePickerEl.querySelector('.el-range-separator')
// 时间范围选择器输入框背景颜色 if (timePickerRangeSeparator) {
el.style.backgroundColor = config.customize.backgroundColor // 宽度和字体大小保持一致
// 时间范围选择器输入框字体颜色 timePickerRangeSeparator.style.width = fontSize + 'px'
el.style.color = config.customize.fontColor timePickerRangeSeparator.style.color = fontColor
// 时间范围选择器输入框字体大小 timePickerRangeSeparator.style.fontSize = fontSize + 'px'
el.style.fontSize = config.customize.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) { changeValue (val) {
@ -119,37 +129,39 @@ export default {
focusEvent () { focusEvent () {
this.$nextTick(() => { this.$nextTick(() => {
const { code } = this.innerConfig 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}`) const timePickerPopper = document.querySelector(`.date-picker-popper-${code}`)
if (timePickerPopper) { if (timePickerPopper) {
// 去除边框 // 去除边框
timePickerPopper.style.border = 'none' timePickerPopper.style.border = 'none'
// 确保下拉项的箭头颜色与下拉框的背景颜色保持一致 // 确保下拉项的箭头颜色与下拉框的背景颜色保持一致
timePickerPopper.style.color = dropDownBackgroundColor timePickerPopper.style.color = bgColor
} }
// 下拉项元素 // 下拉项元素
const pickerDropdownPanleContent = document.querySelector(`.date-picker-popper-${code}`) const pickerDropdownPanleContent = document.querySelector(`.date-picker-popper-${code}`)
console.log(pickerDropdownPanleContent)
if (pickerDropdownPanleContent) { if (pickerDropdownPanleContent) {
// 文字颜色 // 文字颜色
pickerDropdownPanleContent.style.color = dropDownFontColor pickerDropdownPanleContent.style.color = fontColor
// 背景颜色 // 背景颜色
pickerDropdownPanleContent.style.backgroundColor = dropDownBackgroundColor pickerDropdownPanleContent.style.backgroundColor = bgColor
// 下拉项添加var变量 // 下拉项添加var变量
pickerDropdownPanleContent.style.setProperty('--dropDownFontColor', dropDownFontColor) const dropdown = pickerDropdownPanleContent.style
pickerDropdownPanleContent.style.setProperty('--dropDownHoverFontColor', dropDownHoverFontColor) dropdown.setProperty('--fontColor', fontColor)
pickerDropdownPanleContent.style.setProperty('--dropDownBackgroundColor', dropDownBackgroundColor) dropdown.setProperty('--hoverFontColor', hoverFontColor)
pickerDropdownPanleContent.style.setProperty('--dropDownSelectedFontColor', dropDownSelectedFontColor) dropdown.setProperty('--bgColor', bgColor)
pickerDropdownPanleContent.style.setProperty('--dropDownHoverBackgroundColor', dropDownHoverBackgroundColor) dropdown.setProperty('--inputBgColor', inputBgColor)
dropdown.setProperty('--selectedFontColor', selectedFontColor)
dropdown.setProperty('--hoverBgColor', hoverBgColor)
dropdown.setProperty('--rangeBgColor', rangeBgColor)
// 选中项字体颜色 // 选中项字体颜色
const selectedEl = pickerDropdownPanleContent.querySelector('.selected') const selectedEl = pickerDropdownPanleContent.querySelector('.selected')
if (selectedEl) { if (selectedEl) {
selectedEl.style.color = dropDownSelectedFontColor selectedEl.style.color = selectedFontColor
} }
// 选择过的，需要将选中颜色重置 // 选择过的，需要将选中颜色重置
const pickerItemEl = document.querySelectorAll(`.date-picker-popper-${code} .el-time-spinner__item`) const pickerItemEl = document.querySelectorAll(`.date-picker-popper-${code} .el-time-spinner__item`)
pickerItemEl.forEach((el) => { pickerItemEl.forEach((el) => {
el.style.color = dropDownFontColor el.style.color = fontColor
}) })
} }
}) })
@ -173,93 +185,236 @@ export default {
<style lang="scss"> <style lang="scss">
.basic-component-date-picker { .basic-component-date-picker {
color: ''; color: '';
// 清空图标 // 清空图标
.el-icon-circle-close { .el-icon-circle-close {
width: 100% !important; display: flex ;
height: 100% !important; align-items: center ;
display: flex !important;
align-items: center !important;
} }
// 时间选择器 // 时间选择器
.el-icon-time{ .el-icon-time {
display: flex !important; display: flex ;
align-items: center !important; align-items: center ;
}
.el-time-panel {
border: none ;
background-color: var(--bgColor) ;
} }
// 选择日期 时间区域 // 选择日期 时间区域
.el-date-picker__time-header{ .el-date-picker__time-header {
border-bottom:var(--dropDownBackgroundColor) !important; border-bottom: var(--bgColor) ;
.el-input__inner{
border: none !important; .el-input__inner {
border: none ;
// 添加一点阴影 // 添加一点阴影
box-shadow: 0 0 5px 0 rgba(0,0,0,0.1) !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1) ;
background-color: red !important; color: var(--fontColor) ;
} background-color: var(--inputBgColor) ;
.el-time-panel{
border: none !important ;
background-color: var(--dropDownBackgroundColor) !important;
} }
} }
// 头部，修改文字颜色和图标颜色 // 头部，修改文字颜色和图标颜色
.el-date-picker__header{ .el-date-picker__header {
color: var(--dropDownFontColor) !important; color: var(--fontColor) ;
.el-date-picker__header-label{
color: var(--dropDownFontColor) !important; .el-date-picker__header-label {
color: var(--fontColor) ;
} }
// 左右箭头图标颜色 // 左右箭头图标颜色
.el-picker-panel__icon-btn{ .el-picker-panel__icon-btn {
color: var(--dropDownFontColor) !important; 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-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{ .el-picker-panel__footer {
background-color: var(--dropDownBackgroundColor) !important; 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 { .el-time-spinner {
margin-bottom: 0px !important; margin-bottom: 0px ;
.el-time-spinner__item { .el-time-spinner__item {
&:hover { &:hover {
color: var(--dropDownHoverFontColor) !important; color: var(--hoverFontColor) ;
background-color: var(--dropDownHoverBackgroundColor) !important; background-color: var(--hoverBgColor) ;
} }
} }
.active { .active {
color: var(--dropDownSelectedFontColor) !important; color: var(--selectedFontColor) ;
&:hover { &:hover {
color: var(--dropDownSelectedFontColor) !important; color: var(--selectedFontColor) ;
background-color: transparent !important; background-color: transparent ;
} }
} }
} }
.popper__arrow { .popper__arrow {
bottom: -6px !important; bottom: -6px ;
border-bottom-color: var(--dropDownBackgroundColor) !important; border-bottom-color: var(--bgColor) !important;
&::after { &::after {
bottom: 0px !important; bottom: 0px ;
border-bottom-color: var(--dropDownBackgroundColor) !important; border-bottom-color: var(--bgColor) !important;
} }
} }
.cancel { .cancel {
color: var(--dropDownFontColor) !important; color: var(--fontColor) ;
} }
.confirm { .confirm {
color: var(--dropDownSelectedFontColor); color: var(--selectedFontColor);
} }
.el-time-panel__footer { .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> </style>
@ -268,11 +423,13 @@ export default {
.basic-component-date-picker { .basic-component-date-picker {
width: 100%; width: 100%;
height: 100%; height: 100%;
// 范围时间选择器连接符 // 范围时间选择器连接符
::v-deep .el-range-separator{ ::v-deep .el-range-separator {
display: flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
} }
.el-input--mini ::v-deep .el-input__inner { .el-input--mini ::v-deep .el-input__inner {
height: 100% !important; height: 100% !important;
line-height: 100% !important; line-height: 100% !important;
@ -288,4 +445,7 @@ export default {
height: 100% !important; height: 100% !important;
line-height: 100% !important; line-height: 100% !important;
} }
::v-deep .el-range-input{
width: 45% !important;
}
</style> </style>

58
data-room-ui/packages/BasicComponents/DateTimePicker/setting.vue
Unescape Escape View File

@ -24,7 +24,7 @@
<!-- 选择器背景颜色 --> <!-- 选择器背景颜色 -->
<el-form-item label="背景颜色"> <el-form-item label="背景颜色">
<ColorPicker <ColorPicker
v-model="config.customize.backgroundColor" v-model="config.customize.bgColor"
:predefine="predefineThemeColors" :predefine="predefineThemeColors"
/> />
</el-form-item> </el-form-item>
@ -50,34 +50,44 @@
<div class="lc-field-body"> <div class="lc-field-body">
<el-form-item label="背景颜色"> <el-form-item label="背景颜色">
<ColorPicker <ColorPicker
v-model="config.customize.dropDownBackgroundColor" v-model="config.customize.dropDownBox.bgColor"
:predefine="predefineThemeColors" :predefine="predefineThemeColors"
/> />
</el-form-item> </el-form-item>
<el-form-item label="字体颜色"> <el-form-item label="字体颜色">
<ColorPicker <ColorPicker
v-model="config.customize.dropDownFontColor" v-model="config.customize.dropDownBox.fontColor"
:predefine="predefineThemeColors" :predefine="predefineThemeColors"
/> />
</el-form-item> </el-form-item>
<!-- 下拉项悬浮背景颜色 --> <!-- 下拉项悬浮背景颜色 -->
<el-form-item label="悬浮颜色"> <el-form-item label="悬浮颜色">
<ColorPicker <ColorPicker
v-model="config.customize.dropDownHoverBackgroundColor" v-model="config.customize.dropDownBox.hoverBgColor"
:predefine="predefineThemeColors" :predefine="predefineThemeColors"
/> />
</el-form-item> </el-form-item>
<!-- 下拉项悬浮字体颜色 --> <!-- 下拉项悬浮字体颜色 -->
<el-form-item label="悬浮字体颜色"> <el-form-item label="悬浮字体颜色">
<ColorPicker <ColorPicker
v-model="config.customize.dropDownHoverFontColor" v-model="config.customize.dropDownBox.hoverFontColor"
:predefine="predefineThemeColors" :predefine="predefineThemeColors"
/> />
</el-form-item> </el-form-item>
<!-- 激活项文字颜色 --> <!-- 激活项文字颜色 -->
<el-form-item label="选中项文字颜色"> <el-form-item label="选中项文字颜色">
<ColorPicker <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" :predefine="predefineThemeColors"
/> />
</el-form-item> </el-form-item>
@ -85,9 +95,13 @@
<SettingTitle>时间格式</SettingTitle> <SettingTitle>时间格式</SettingTitle>
<div class="lc-field-body"> <div class="lc-field-body">
<el-form-item label="显示类型"> <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 <el-option
v-for="(type) in displayType" v-for="(type) in displayTypeOptions"
:key="type.value" :key="type.value"
:label="type.label" :label="type.label"
:value="type.value" :value="type.value"
@ -114,14 +128,16 @@
v-if="config.customize.formatType === 'custom'" v-if="config.customize.formatType === 'custom'"
label="自定义时间格式" label="自定义时间格式"
> >
<!-- year/month/date/week/ datetime/datetimerange/daterange -->
<div class="time-format-description"> <div class="time-format-description">
<el-input <el-input
v-model="config.customize.valueFormat" v-model="config.customize.valueFormat"
placeholder="例如：HH:mm:ss" placeholder="例如：yyyy-MM-dd HH:mm:ss"
clearable clearable
/> />
<!-- HH表示小时（24小时制），mm表示分钟，ss表示秒 -->
<el-tooltip <el-tooltip
content="时间格式示例：HH表示小时（24小时制），mm表示分钟，ss表示秒" content="时间格式示例：yyyy表示年份，MM表示月份，dd表示日期，HH表示小时（24小时制），mm表示分钟，ss表示秒，具体可参考Element-UI官网的日期选择器的时间格式化部分"
placement="top" placement="top"
> >
<span <span
@ -181,17 +197,15 @@ export default {
{ label: '时间戳', value: 'timestamp' }, { label: '时间戳', value: 'timestamp' },
{ label: '自定义', value: 'custom' } { label: '自定义', value: 'custom' }
], ],
hourOptions: [ // 时间显示类型选项 :year/month/date/week/ datetime/datetimerange/daterange
{ label: '24小时制，不补0', value: 'H' }, displayTypeOptions: [
{ label: '24小时制，补0', value: 'HH' } { label: '年', value: 'year' },
], { label: '月', value: 'month' },
minuteOptions: [ { label: '日', value: 'date' },
{ label: '分钟，不补0', value: 'm' }, { label: '周', value: 'week' },
{ label: '分钟，补0', value: 'mm' } { label: '日期时间', value: 'datetime' },
], { label: '日期时间范围', value: 'datetimerange' },
secondOptions: [ { label: '日期范围', value: 'daterange' }
{ label: '秒，不补0', value: 's' },
{ label: '秒，补0', value: 'ss' }
] ]
} }
}, },
@ -206,7 +220,7 @@ export default {
this.config.customize.value = 0 this.config.customize.value = 0
this.config.customize.valueFormat = 'timestamp' this.config.customize.valueFormat = 'timestamp'
} else if (type === 'custom') { } else if (type === 'custom') {
this.config.customize.valueFormat = 'HH:mm:ss' this.config.customize.valueFormat = 'yyyy-MM-dd HH:mm:ss'
} }
} }
} }

31
data-room-ui/packages/BasicComponents/DateTimePicker/settingConfig.js
Unescape Escape View File

@ -24,27 +24,34 @@ const customConfig = {
customize: { customize: {
value: '', value: '',
// 选择框背景颜色 // 选择框背景颜色
backgroundColor: '#35393F', bgColor: '#35393F',
// 选择框文字颜色 // 选择框文字颜色
fontColor: '#FFFFFF', fontColor: '#FFFFFF',
// 选择框文字大小 // 选择框文字大小
fontSize: 20, fontSize: 20,
// 下拉框背景颜色
dropDownBackgroundColor: '#35393F',
// 下拉框字体颜色
dropDownFontColor: '#FFFFFF',
// 下拉项hover背景颜色 #6A7E9D
dropDownHoverBackgroundColor: 'red',
// 下拉项hover字体颜色
dropDownHoverFontColor: '#FFFFFF',
// 下拉项激活文字颜色 #409EFF
dropDownSelectedFontColor: 'yellow',
// 显示类型 year/month/date/week/ datetime/datetimerange/daterange // 显示类型 year/month/date/week/ datetime/datetimerange/daterange
type: 'datetime', type: 'datetime',
// 时间格式化类型:Date 对象（default），时间戳（timestamp），自定义（custom） // 时间格式化类型:Date 对象（default），时间戳（timestamp），自定义（custom）
formatType: 'default', formatType: 'default',
// 绑定值的格式 // 绑定值的格式
valueFormat: '' valueFormat: '',
// 下拉框
dropDownBox: {
// 下拉框背景颜色
bgColor: '#35393F',
// 下拉框输入框背景颜色
inputBgColor: '#2C3036',
// 下拉框字体颜色
fontColor: '#FFFFFF',
// 下拉项hover背景颜色
hoverBgColor: '#6A7E9D',
// 下拉项hover字体颜色
hoverFontColor: '#FFFFFF',
// 下拉项激活文字颜色
selectedFontColor: '#00BFFF',
// 范围时间选择器选中范围颜色
rangeBgColor: '#409EFF'
}
} }
} }
export const dataConfig = { export const dataConfig = {

9
data-room-ui/packages/BasicComponents/Select/index.vue
Unescape Escape View File

@ -116,7 +116,7 @@ export default {
// 组件联动 // 组件联动
selectChange (val) { selectChange (val) {
if (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) { visibleChange (val) {
@ -180,11 +180,6 @@ export default {
border-bottom-color:var(--color) !important; border-bottom-color:var(--color) !important;
} }
} }
.el-popper[x-placement^="top"] .popper__arrow{
&::after{
}
}
} }
</style> </style>
@ -204,7 +199,7 @@ export default {
// 选择器输入框样式 // 选择器输入框样式
.el-input__inner { .el-input__inner {
height: 100% !important; height: 100% !important;
border-color: var(--bs-el-border) !important; border-color: none !important;
} }
} }
.el-select-dropdown__item.hover, .el-select-dropdown__item.hover,

24
data-room-ui/packages/BasicComponents/TimePicker/index.vue
Unescape Escape View File

@ -15,7 +15,6 @@
<script> <script>
import cloneDeep from 'lodash/cloneDeep' import cloneDeep from 'lodash/cloneDeep'
import { EventBus } from 'data-room-ui/js/utils/eventBus'
import commonMixins from 'data-room-ui/js/mixins/commonMixins' import commonMixins from 'data-room-ui/js/mixins/commonMixins'
import linkageMixins from 'data-room-ui/js/mixins/linkageMixins' import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
import { getDataSetDetails } from 'data-room-ui/js/api/bigScreenApi' import { getDataSetDetails } from 'data-room-ui/js/api/bigScreenApi'
@ -62,7 +61,7 @@ export default {
created () { }, created () { },
mounted () { mounted () {
if (!this.isPreview) { 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) this.changeStyle(this.config)
}, },
@ -188,8 +187,9 @@ export default {
display: flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
} }
// 时间选择器 // 时间选择器
.el-icon-time{ .el-icon-time {
display: flex !important; display: flex !important;
align-items: center !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 { .popper__arrow {
border-bottom-color: var(--dropDownBackgroundColor) !important; border-bottom-color: var(--dropDownBackgroundColor) !important;
@ -232,7 +248,7 @@ export default {
} }
.el-time-panel__footer { .el-time-panel__footer {
border-top: 1px solid var(--dropDownFontColor) !important; border-color: 1px solid var(--dropDownFontColor) !important;
} }
} }
</style> </style>

12
data-room-ui/packages/BasicComponents/TimePicker/setting.vue
Unescape Escape View File

@ -170,18 +170,6 @@ export default {
{ label: 'Date 对象', value: 'default' }, { label: 'Date 对象', value: 'default' },
{ label: '时间戳', value: 'timestamp' }, { label: '时间戳', value: 'timestamp' },
{ label: '自定义', value: 'custom' } { 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' }
] ]
} }
}, },

33
data-room-ui/packages/BorderComponents/GcBorder14/index.vue
Unescape Escape View File

@ -14,20 +14,22 @@
border: ${width}px solid ${color}; border: ${width}px solid ${color};
opacity: ${opacity/ 100}; opacity: ${opacity/ 100};
background-image: linear-gradient(${gradientDirection}, ${ background-image: linear-gradient(${gradientDirection}, ${
gradientColor0 ? gradientColor0 : gradientColor1 gradientColor0 ? gradientColor0 : gradientColor1
} , ${gradientColor1 ? gradientColor1 : gradientColor0}) } , ${gradientColor1 ? gradientColor1 : gradientColor0})
`" `"
> >
<div class="element" <div
v-if="config.border.isTitle" v-if="config.border.isTitle"
:style="` class="element"
:style="`
color:${fontColor}; color:${fontColor};
font-size:${config.border.fontSize}px; font-size:${config.border.fontSize}px;
line-height:${config.border.titleHeight}px; line-height:${config.border.titleHeight}px;
height:${config.border.titleHeight}; height:${config.border.titleHeight};
padding:0 0 0 20px`" padding:0 0 0 20px`"
> >
{{config.title}}</div> {{ config.title }}
</div>
</div> </div>
</div> </div>
</template> </template>
@ -50,32 +52,29 @@ export default {
} }
}, },
computed: { computed: {
fontColor () { fontColor () {
return this.config.border.fontColor ? this.config.border.fontColor return this.config.border.fontColor ? this.config.border.fontColor
: '#fff' : '#fff'
}, },
color () { color () {
return this.config.border.borderColor || '' return this.config.border.borderColor || ''
}, },
width () { width () {
return this.config.border.borderWidth || 2 return this.config.border.borderWidth || 2
}, },
gradientColor0 () { gradientColor0 () {
console.log(this.config.border.gradientColor) if (this.config.border.gradientColor) {
if(this.config.border.gradientColor){ return this.config.border.gradientColor[0] || this.config.border.gradientColor[1]
return this.config.border.gradientColor[0] ||this.config.border.gradientColor[1] } else {
}else{
return 'transparent' return 'transparent'
} }
}, },
gradientColor1 () { gradientColor1 () {
console.log(this.config.border.gradientColor) if (this.config.border.gradientColor) {
if(this.config.border.gradientColor){ return this.config.border.gradientColor[1] || this.config.border.gradientColor[0]
return this.config.border.gradientColor[1] ||this.config.border.gradientColor[0] } else {
}else{
return 'transparent' return 'transparent'
} }
}, },
radiusLeftTop () { radiusLeftTop () {
return this.config.border.radiusLeftTop || 2 return this.config.border.radiusLeftTop || 2

74
data-room-ui/packages/BorderComponents/GcBorder7/index.vue
Unescape Escape View File

@ -3,22 +3,24 @@
style="width: 100%;height: 100%" style="width: 100%;height: 100%"
class="bs-design-wrap" class="bs-design-wrap"
> >
<dv-border-box-7 <dv-border-box-7
:id="'dataV' + config.code" :id="'dataV' + config.code"
:background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
:color='borderColor'
:key="updateKey" :key="updateKey"
:background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
:color="borderColor"
> >
<div class="element" <div
v-if="config.border.isTitle" v-if="config.border.isTitle"
:style="` class="element"
:style="`
color:${color}; color:${color};
font-size:${config.border.fontSize}px; font-size:${config.border.fontSize}px;
line-height:${config.border.titleHeight}px; line-height:${config.border.titleHeight}px;
height:${config.border.titleHeight}; height:${config.border.titleHeight};
padding:0 0 0 20px`" padding:0 0 0 20px`"
> >
{{config.title}}</div> {{ config.title }}
</div>
</dv-border-box-7> </dv-border-box-7>
</div> </div>
</template> </template>
@ -41,7 +43,7 @@ export default {
}, },
data () { data () {
return { return {
borderBgId: `borderBg${this.config.code}` borderBgId: `borderBg${this.config.code}`
} }
}, },
computed: { computed: {
@ -57,50 +59,52 @@ export default {
color () { color () {
return this.config.border.fontColor ? this.config.border.fontColor return this.config.border.fontColor ? this.config.border.fontColor
: '#fff' : '#fff'
}, }
}, },
watch: { watch: {
updateKey:{ updateKey: {
handler (val) { handler (val) {
this.$nextTick(()=>{ this.$nextTick(() => {
this.changeColor() this.changeColor()
}) })
}, },
deep: true deep: true
}, },
'config.border.gradientColor':{ 'config.border.gradientColor': {
handler (val) { handler (val) {
this.changeColor() this.changeColor()
},immediate: true },
immediate: true
}, },
'config.border.gradientDirection':{ 'config.border.gradientDirection': {
handler (val) { handler (val) {
this.changeColor() this.changeColor()
},immediate: true },
immediate: true
}, },
'config.border.opacity':{ 'config.border.opacity': {
handler (val) { handler (val) {
this.changeColor() this.changeColor()
},immediate: true },
immediate: true
} }
}, },
mounted () { mounted () {
this.changeColor() this.changeColor()
}, },
methods: { methods: {
changeColor(){ changeColor () {
if(!this.config.border.opacity){ if (!this.config.border.opacity) {
this.config.border.opacity=100 this.config.border.opacity = 100
} }
console.log(this.config.border.gradientColor) if (!this.config.border.gradientColor) return
if(!this.config.border.gradientColor) return
if (document.querySelector(`#dataV${this.config.code}`)) { 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') const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
if (borderElement) { if (borderElement) {
borderElement.style.opacity = (this.config.border.opacity / 100) 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]})` 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]})`
}
} }
}
} }
} }
} }

1
data-room-ui/packages/assets/images/bigScreenIcon/svg/23dateTimePicker.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

3
data-room-ui/packages/js/config/basicComponentsConfig.js
Unescape Escape View File

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

30
data-room-ui/packages/js/store/actions.js
Unescape Escape View File

@ -18,30 +18,28 @@ export default {
const pageInfo = handleResData(data) const pageInfo = handleResData(data)
// 兼容边框配置 // 兼容边框配置
pageInfo.chartList.forEach((item) => { pageInfo.chartList.forEach((item) => {
console.log(item)
if (!item.border) { 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){ if (!item.border.padding) {
item.border.padding=[0,0,0,0] item.border.padding = [0, 0, 0, 0]
} }
if (item.type == 'customComponent'){ if (item.type == 'customComponent') {
plotSettings[Symbol.iterator]=function*(){ plotSettings[Symbol.iterator] = function * () {
let keys=Object.keys(plotSettings) const keys = Object.keys(plotSettings)
for(let k of keys){ for (const k of keys) {
yield [k,plotSettings[k]] yield [k, plotSettings[k]]
} }
} }
for(let [key,value] of plotSettings){ for (const [key, value] of plotSettings) {
if (item.name == value.name) { if (item.name == value.name) {
const settings=JSON.parse(JSON.stringify(value.setting)) const settings = JSON.parse(JSON.stringify(value.setting))
item.setting=settings.map((x)=>{ item.setting = settings.map((x) => {
const index=item.setting.findIndex(y=>y.field==x.field) const index = item.setting.findIndex(y => y.field == x.field)
console.log(item.setting[index].field)
x.field = item.setting[index].field x.field = item.setting[index].field
x.value=item.setting[index].value x.value = item.setting[index].value
return x return x
}) })
} }
} }
} }

2
data-room-ui/packages/js/utils/getComponentConfig.js
Unescape Escape View File

@ -277,7 +277,7 @@ export default function getComponentConfig (type) {
return { return {
name: '日期时间选择器', name: '日期时间选择器',
title: '日期时间选择器', title: '日期时间选择器',
icon: Icon.getNameList()[22], icon: Icon.getNameList()[23],
className: 'com.gccloud.dataroom.core.module.chart.components.ScreenTimePickerChart', className: 'com.gccloud.dataroom.core.module.chart.components.ScreenTimePickerChart',
w: 260, w: 260,
h: 80, h: 80,

Write Preview
Loading…
Cancel
Save