247 lines
9.1 KiB
Vue
247 lines
9.1 KiB
Vue
<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="背景颜色">
|
||
<ColorPicker
|
||
v-model="config.customize.backgroundColor"
|
||
: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.dropDownBackgroundColor"
|
||
:predefine="predefineThemeColors"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="字体颜色">
|
||
<ColorPicker
|
||
v-model="config.customize.dropDownFontColor"
|
||
:predefine="predefineThemeColors"
|
||
/>
|
||
</el-form-item>
|
||
<!-- 下拉项悬浮背景颜色 -->
|
||
<el-form-item label="悬浮颜色">
|
||
<ColorPicker
|
||
v-model="config.customize.dropDownHoverBackgroundColor"
|
||
:predefine="predefineThemeColors"
|
||
/>
|
||
</el-form-item>
|
||
<!-- 下拉项悬浮字体颜色 -->
|
||
<el-form-item label="悬浮字体颜色">
|
||
<ColorPicker
|
||
v-model="config.customize.dropDownHoverFontColor"
|
||
:predefine="predefineThemeColors"
|
||
/>
|
||
</el-form-item>
|
||
<!-- 激活项文字颜色 -->
|
||
<el-form-item label="选中项文字颜色">
|
||
<ColorPicker
|
||
v-model="config.customize.dropDownSelectedFontColor"
|
||
: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="例如：HH:mm:ss"
|
||
clearable
|
||
/>
|
||
<el-tooltip placement="top">
|
||
<span
|
||
class="el-icon-question"
|
||
style="color:#9e9e9e"
|
||
/>
|
||
<div slot="content">
|
||
小时：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>
|
||
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"
|
||
@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>
|
||
自定义：通过输入特定的格式字符串来指定时间的数据格式，例如：HH:mm:ss对应数据为 09:30:00。<br>
|
||
</div>
|
||
</el-tooltip>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item
|
||
v-if="config.customize.formatType === 'custom'"
|
||
label="时间格式"
|
||
>
|
||
<div class="description">
|
||
<el-input
|
||
v-model="config.customize.format"
|
||
placeholder="例如：HH:mm:ss"
|
||
clearable
|
||
/>
|
||
<el-tooltip placement="top">
|
||
<span
|
||
class="el-icon-question"
|
||
style="color:#9e9e9e"
|
||
/>
|
||
<div slot="content">
|
||
小时：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>
|
||
JS时间戳：timestamp，仅 value-format 可用，组件绑定值为number类型，例如：1483326245000<br>
|
||
不需要格式化字符：[MM]，使用方括号标识不需要格式化的字符，例如：MM<br>
|
||
具体的时间格式化字符和使用方式，可以参考Element-UI官网的日期选择器的时间格式化部分。
|
||
</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: 'TimePickerSetting',
|
||
components: {
|
||
ColorPicker,
|
||
PosWhSetting,
|
||
SettingTitle,
|
||
RotateSetting
|
||
},
|
||
props: {
|
||
config: {
|
||
type: Object,
|
||
required: true
|
||
},
|
||
predefineThemeColors: {
|
||
type: Array,
|
||
default: () => predefineColors
|
||
}
|
||
},
|
||
watch: {},
|
||
data () {
|
||
return {
|
||
// 时间格式化类型选项
|
||
formatTypeOptions: [
|
||
{ label: '时间戳', value: 'timestamp' },
|
||
{ label: '自定义格式', value: 'custom' }
|
||
]
|
||
}
|
||
},
|
||
mounted () { },
|
||
methods: {
|
||
changeFormatType (val) {
|
||
if (val === 'timestamp') {
|
||
this.config.customize.format = 'timestamp'
|
||
} else if (val === 'custom') {
|
||
this.config.customize.format = '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>
|