初始化
This commit is contained in:
砂糖
198
frontend/packages/BasicComponents/TimeCountDown/index.vue
Normal file
198
frontend/packages/BasicComponents/TimeCountDown/index.vue
Normal file
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<div
|
||||
class="bs-design-wrap"
|
||||
:class="`bs-time-count-down-${customTheme}`"
|
||||
>
|
||||
<span
|
||||
v-if="isPast"
|
||||
style="color: #ea0b30"
|
||||
>(已过期)</span>
|
||||
<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
|
||||
"
|
||||
>
|
||||
{{ dateDiff }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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: 'TimeCountDown',
|
||||
mixins: [paramsMixins],
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
timer: '',
|
||||
allTime: 0,
|
||||
date: '',
|
||||
time: new Date().getTime()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
customTheme: state => state.bigScreen.pageInfo.pageConfig.customTheme,
|
||||
activeCode: state => state.bigScreen.activeCode
|
||||
}),
|
||||
isPast: {
|
||||
get () {
|
||||
if (new Date(this.config.endTime).getTime() - this.time < 0) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
dateDiff: {
|
||||
// eslint-disable-next-line vue/return-in-computed-property
|
||||
get () {
|
||||
if (this.config.endTime) {
|
||||
return this.dateFormat(
|
||||
new Date(this.config.endTime).getTime() - this.time
|
||||
)
|
||||
}
|
||||
},
|
||||
set (val) {
|
||||
this.allTime = val
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'config.endTime': {
|
||||
handler () {
|
||||
this.getTime()
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.changeStyle()
|
||||
},
|
||||
// 销毁定时器
|
||||
destroyed () {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer) // 关闭
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapMutations({
|
||||
changeChartConfig: 'bigScreen/changeChartConfig',
|
||||
changeActiveItemConfig: 'bigScreen/changeActiveItemConfig'
|
||||
}),
|
||||
changeStyle (config) {
|
||||
this.config.endTime = this.config.endTime
|
||||
? new Date(this.config.endTime).getTime()
|
||||
: new Date().getTime() + 3 * 3600 * 1000 * 24 - 1000
|
||||
this.getTime()
|
||||
config = { ...this.config, ...config }
|
||||
// 样式改变时更新主题配置
|
||||
config.theme = settingToTheme(cloneDeep(config), this.customTheme)
|
||||
this.changeChartConfig(config)
|
||||
if (this.config.code === this.activeCode) {
|
||||
this.changeActiveItemConfig(config)
|
||||
}
|
||||
},
|
||||
getTime () {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
}
|
||||
this.timer = setInterval(() => {
|
||||
this.time = this.time + 1000
|
||||
if (this.dateDiff <= 0) {
|
||||
clearInterval(this.timer)
|
||||
}
|
||||
}, 1000)
|
||||
},
|
||||
// 格式化时间
|
||||
dateFormat (dateDiff) {
|
||||
if (dateDiff < 0) {
|
||||
dateDiff = -dateDiff
|
||||
}
|
||||
const dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)) // 计算出相差天数
|
||||
const leave1 = dateDiff % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数
|
||||
const hours = Math.floor(leave1 / (3600 * 1000)) // 计算出小时数
|
||||
// 计算相差分钟数
|
||||
const leave2 = leave1 % (3600 * 1000) // 计算小时数后剩余的毫秒数
|
||||
const minutes = Math.floor(leave2 / (60 * 1000)) // 计算相差分钟数
|
||||
// 计算相差秒数
|
||||
const leave3 = leave2 % (60 * 1000) // 计算分钟数后剩余的毫秒数
|
||||
const seconds = Math.round(leave3 / 1000)
|
||||
// const leave4=leave3%(60*1000) //计算分钟数后剩余的毫秒数
|
||||
// const minseconds=Math.round(leave4/1000)
|
||||
const timeFn =
|
||||
dayDiff +
|
||||
' 天 ' +
|
||||
hours +
|
||||
' 小时 ' +
|
||||
minutes +
|
||||
' 分钟 ' +
|
||||
seconds +
|
||||
' 秒'
|
||||
return timeFn
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../BasicComponents/fonts/index.css";
|
||||
@import "../../assets/fonts/numberFont/stylesheet.css";
|
||||
.bs-design-wrap{
|
||||
width: 100%;
|
||||
}
|
||||
.time {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: auto;
|
||||
}
|
||||
.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;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
187
frontend/packages/BasicComponents/TimeCountDown/setting.vue
Normal file
187
frontend/packages/BasicComponents/TimeCountDown/setting.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<!--
|
||||
* @description: 指标组件案例设计面板
|
||||
* @Date: 2022-08-17 16:53:28
|
||||
* @Author: xingheng
|
||||
-->
|
||||
<template>
|
||||
<div class="setting-wrap">
|
||||
<el-form
|
||||
ref="form"
|
||||
label-width="100px"
|
||||
label-position="left"
|
||||
:model="config"
|
||||
class="bs-el-form"
|
||||
>
|
||||
<SettingTitle>标题</SettingTitle>
|
||||
<el-form-item
|
||||
class="lc-field-body"
|
||||
label="标题"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-input
|
||||
v-model="config.title"
|
||||
placeholder="请输入标题"
|
||||
/>
|
||||
</el-form-item>
|
||||
<SettingTitle>位置</SettingTitle>
|
||||
<div class="lc-field-body">
|
||||
<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="lc-field-body">
|
||||
<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"
|
||||
popper-class="bs-el-color-picker"
|
||||
class="bs-el-color-picker"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="结束日期"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="config.endTime"
|
||||
style="position: relative;"
|
||||
popper-class="bs-el-date-picker"
|
||||
type="datetime"
|
||||
align="left"
|
||||
size="mini"
|
||||
placeholder="请选择结束日期"
|
||||
:picker-options="pickerOptions"
|
||||
value-format="timestamp"
|
||||
:append-to-body="false"
|
||||
/>
|
||||
</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: 'TimeCountDownSetting',
|
||||
components: {
|
||||
PosWhSetting,
|
||||
SettingTitle,
|
||||
BorderSetting,
|
||||
RotateSetting
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
fontFamilyList: fontList,
|
||||
pickerOptions: {
|
||||
disabledDate (time) {
|
||||
return time.getTime() < Date.now() - 8.64e7
|
||||
}
|
||||
},
|
||||
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 () {
|
||||
this.initEndTime()
|
||||
},
|
||||
methods: {
|
||||
initEndTime () {
|
||||
if (this.config.endTime) {
|
||||
this.config.endTime = new Date(this.config.endTime).getTime()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../assets/style/settingWrap.scss";
|
||||
.setting-wrap {
|
||||
padding-top: 16px;
|
||||
}
|
||||
.el-date-editor.el-input,
|
||||
.el-date-editor.el-input__inner {
|
||||
width: 100%;
|
||||
}
|
||||
.lc-field-body {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,40 @@
|
||||
import { commonConfig } from '../../js/config'
|
||||
|
||||
export const settingConfig = {
|
||||
time: '',
|
||||
theme: 'dark',
|
||||
// 设置面板属性的显隐
|
||||
displayOption: {
|
||||
dataAllocation: {
|
||||
// 是否存在数据配置
|
||||
enable: false
|
||||
}
|
||||
}
|
||||
}
|
||||
const customConfig = {
|
||||
type: 'timeCountDown',
|
||||
root: {
|
||||
version: '2023071001',
|
||||
endTime: '',
|
||||
// 绕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