初始化
This commit is contained in:
砂糖
138
frontend/packages/BasicComponents/CurrentTime/index.vue
Normal file
138
frontend/packages/BasicComponents/CurrentTime/index.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div
|
||||
class="bs-design-wrap"
|
||||
:class="`bs-current-time-${customTheme}`"
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
'time',
|
||||
{
|
||||
'light-theme': customTheme === 'light',
|
||||
'auto-theme': customTheme == 'auto',
|
||||
'dark-theme': customTheme == 'dark'
|
||||
}
|
||||
]"
|
||||
class="time-text-box"
|
||||
:style="
|
||||
'font-size:' +
|
||||
config.customize.fontSize +
|
||||
'px;color:' +
|
||||
config.customize.color +
|
||||
';font-weight:' +
|
||||
config.customize.fontWeight+
|
||||
';font-family:' +
|
||||
config.customize.fontFamily
|
||||
"
|
||||
>
|
||||
{{ nowTime }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
|
||||
import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { mapMutations, mapState } from 'vuex'
|
||||
export default {
|
||||
name: 'CurrentTime',
|
||||
mixins: [paramsMixins],
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
customTheme: state => state.bigScreen.pageInfo.pageConfig.customTheme,
|
||||
activeCode: state => state.bigScreen.activeCode
|
||||
})
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
nowTime: '',
|
||||
time: new Date(),
|
||||
currentTime: new Date()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getCurrentTime(this.config.dateFormat)
|
||||
},
|
||||
// 销毁定时器
|
||||
destroyed () {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer) // 关闭
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
changeChartConfig: 'bigScreen/changeChartConfig',
|
||||
changeActiveItemConfig: 'bigScreen/changeActiveItemConfig'
|
||||
}),
|
||||
changeStyle (config) {
|
||||
this.getCurrentTime(config.dateFormat)
|
||||
config = { ...this.config, ...config }
|
||||
// 样式改变时更新主题配置
|
||||
config.theme = settingToTheme(cloneDeep(config), this.customTheme)
|
||||
this.changeChartConfig(config)
|
||||
if (config.code === this.activeCode) {
|
||||
this.changeActiveItemConfig(config)
|
||||
}
|
||||
},
|
||||
// 实时显示当前系统时间
|
||||
getCurrentTime (dateFormat) {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
}
|
||||
this.dateFormat(dateFormat)
|
||||
this.timer = setInterval(() => {
|
||||
this.dateFormat(dateFormat)
|
||||
}, 1000)
|
||||
},
|
||||
// 格式化时间
|
||||
dateFormat () {
|
||||
this.nowTime = moment(new Date().getTime()).format(
|
||||
this.config.dateFormat
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../BasicComponents/fonts/index.css";
|
||||
@import "../../assets/fonts/numberFont/stylesheet.css";
|
||||
.bs-design-wrap{
|
||||
width: 100%;
|
||||
}
|
||||
.time {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.light-theme {
|
||||
background-color: #ffffff;
|
||||
color: #000000;
|
||||
}
|
||||
.dark-theme {
|
||||
background-color:transparent;
|
||||
color: #ffffff;
|
||||
}
|
||||
.auto-theme {
|
||||
background-color: transparent;
|
||||
color: #000000;
|
||||
}
|
||||
.time-text-box{
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
white-space:nowrap;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
176
frontend/packages/BasicComponents/CurrentTime/setting.vue
Normal file
176
frontend/packages/BasicComponents/CurrentTime/setting.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<!--
|
||||
* @description: 指标组件案例设计面板
|
||||
* @Date: 2022-08-17 16:53:28
|
||||
* @Author: xingheng
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<el-form
|
||||
ref="form"
|
||||
label-width="100px"
|
||||
label-position="left"
|
||||
:model="config"
|
||||
class="bs-el-form"
|
||||
>
|
||||
<SettingTitle>标题</SettingTitle>
|
||||
<div class="setting-wrap">
|
||||
<el-form-item
|
||||
label="标题"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-input
|
||||
v-model="config.title"
|
||||
placeholder="请输入标题"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<SettingTitle>位置</SettingTitle>
|
||||
<div class="setting-wrap">
|
||||
<PosWhSetting :config="config" />
|
||||
</div>
|
||||
<SettingTitle v-if="config.border">边框</SettingTitle>
|
||||
<div class="lc-field-body">
|
||||
<BorderSetting
|
||||
v-if="config.border"
|
||||
label-width="100px"
|
||||
:config="config.border"
|
||||
:bigTitle='config.title'
|
||||
/>
|
||||
</div>
|
||||
<SettingTitle>旋转</SettingTitle>
|
||||
<div class="lc-field-body">
|
||||
<RotateSetting
|
||||
:config="config"
|
||||
/>
|
||||
</div>
|
||||
<SettingTitle>基础</SettingTitle>
|
||||
<div class="setting-wrap">
|
||||
<el-form-item
|
||||
label="字体大小"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="config.customize.fontSize"
|
||||
class="bs-el-input-number"
|
||||
placeholder="请输入字体大小"
|
||||
:min="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="字体权重"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="config.customize.fontWeight"
|
||||
class="bs-el-input-number"
|
||||
:min="0"
|
||||
:step="100"
|
||||
placeholder="请输入字体权重"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="字体类型"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-select
|
||||
v-model="config.customize.fontFamily"
|
||||
popper-class="bs-el-select"
|
||||
class="bs-el-select"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in fontFamilyList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="字体颜色"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-color-picker
|
||||
v-model="config.customize.color"
|
||||
class="bs-el-color-picker"
|
||||
popper-class="bs-el-color-picker"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="时间格式"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-select
|
||||
v-model="config.dateFormat"
|
||||
placeholder="请选择时间格式"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in dateFormatList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
|
||||
import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
|
||||
import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
|
||||
import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
|
||||
import fontList from 'data-room-ui/js/utils/fontList'
|
||||
export default {
|
||||
name: 'CurrentTimeSetting',
|
||||
components: {
|
||||
PosWhSetting,
|
||||
SettingTitle,
|
||||
BorderSetting,
|
||||
RotateSetting
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
fontFamilyList: fontList,
|
||||
activeName: 'data',
|
||||
dateFormatList: [
|
||||
{ label: '年-月-日 时:分:秒', value: 'YYYY-MM-DD HH:mm:ss' },
|
||||
{ label: '年/月/日 时/分/秒', value: 'YYYY/MM/DD HH/mm/ss' }
|
||||
],
|
||||
HeaderFontSizeList: [
|
||||
{ label: '正常', value: 16 },
|
||||
{ label: '较小', value: 14 },
|
||||
{ label: '较大', value: 30 }
|
||||
],
|
||||
numberFormatList: [
|
||||
{ label: '原始数据', value: 'value' },
|
||||
{ label: '千位分隔', value: 'kilobit' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
config: {
|
||||
get () {
|
||||
return this.$store.state.bigScreen.activeItemConfig
|
||||
},
|
||||
set (val) {
|
||||
this.$store.state.bigScreen.activeItemConfig = val
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
mounted () {},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../assets/style/settingWrap.scss";
|
||||
@import "../../assets/style/bsTheme.scss";
|
||||
.setting-wrap{
|
||||
padding: 12px 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,41 @@
|
||||
import { commonConfig } from '../../js/config'
|
||||
|
||||
export const settingConfig = {
|
||||
time: '',
|
||||
theme: 'dark',
|
||||
// 设置面板属性的显隐
|
||||
displayOption: {
|
||||
dataAllocation: {
|
||||
// 是否存在数据配置
|
||||
enable: false
|
||||
}
|
||||
}
|
||||
}
|
||||
const customConfig = {
|
||||
|
||||
type: 'currentTime',
|
||||
root: {
|
||||
version: '2023071001',
|
||||
dateFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
// 绕x轴旋转角度
|
||||
rotateX: 0,
|
||||
// 绕y轴旋转角度
|
||||
rotateY: 0,
|
||||
// 绕z轴旋转角度
|
||||
rotateZ: 0,
|
||||
// 透视距离
|
||||
perspective: 0,
|
||||
skewX: 0,
|
||||
skewY: 0
|
||||
},
|
||||
customize: {
|
||||
fontSize: 14,
|
||||
fontWeight: 300,
|
||||
fontFamily: 'ds-digitalbold', // 字体类型
|
||||
color: '#ffffff'
|
||||
}
|
||||
|
||||
}
|
||||
export const dataConfig = {
|
||||
...commonConfig(customConfig)
|
||||
}
|
||||
Reference in New Issue
Block a user