Merge pull request #976 from dataease/pr@dev@feat_panel_show_date
feat: 增加仪表板时间组件
This commit is contained in:
fit2cloud-chenyw
GitHub
commit
42a36b1096
181
frontend/src/components/canvas/components/Editor/DateFormat.vue
Normal file
181
frontend/src/components/canvas/components/Editor/DateFormat.vue
Normal file
@ -0,0 +1,181 @@
|
||||
<template>
|
||||
|
||||
<el-popover
|
||||
ref="popover"
|
||||
width="340"
|
||||
trigger="click"
|
||||
>
|
||||
<el-row>
|
||||
<el-form ref="form" :inline="true" size="mini" label-width="70px">
|
||||
|
||||
<el-form-item :label="$t('deshowdate.open_mode')">
|
||||
|
||||
<el-select
|
||||
v-model="formatInfo.openMode"
|
||||
:placeholder="$t('deshowdate.select_openMode')"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in modelOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('deshowdate.show_week')">
|
||||
<el-switch v-model="formatInfo.showWeek" size="mini" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('deshowdate.show_date')">
|
||||
<el-switch v-model="formatInfo.showDate" size="mini" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-show="formatInfo.showDate" :label="$t('deshowdate.date_format')">
|
||||
<el-select
|
||||
v-model="formatInfo.dateFormat"
|
||||
:placeholder="$t('deshowdate.select_date_format')"
|
||||
style="width: 100%;"
|
||||
>
|
||||
|
||||
<el-option
|
||||
v-for="item in dateOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('deshowdate.time_format')">
|
||||
<el-select
|
||||
v-model="formatInfo.timeFormat"
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
:placeholder="$t('deshowdate.select_time_format')"
|
||||
style="width: 100%;"
|
||||
>
|
||||
|
||||
<el-option
|
||||
v-for="item in timeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">{{ $t('panel.confirm') }}</el-button>
|
||||
<el-button @click="onClose">{{ $t('panel.cancel') }}</el-button>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
</el-row>
|
||||
<i slot="reference" class="icon iconfont icon-shijiangeshizhuanhuan" />
|
||||
</el-popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import { deepCopy } from '@/components/canvas/utils/utils'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
formatInfo: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timeOptions: [
|
||||
|
||||
{ value: 'hh:mm:ss', label: 'hh:mm:ss' },
|
||||
{ value: 'hh时mm分ss秒', label: 'hh时mm分ss秒' }
|
||||
],
|
||||
dateOptions: [
|
||||
{ value: 'yyyy-MM-dd', label: 'yyyy-MM-dd' },
|
||||
{ value: 'yyyy/MM/dd', label: 'yyyy/MM/dd' },
|
||||
{ value: 'yyyy年MM月dd日', label: 'yyyy年MM月dd日' }
|
||||
],
|
||||
modelOptions: [
|
||||
{ value: '0', label: this.$t('deshowdate.m_default') },
|
||||
{ value: '1', label: this.$t('deshowdate.m_elec') },
|
||||
{ value: '2', label: this.$t('deshowdate.m_simple') }
|
||||
/* { value: '3', label: this.$t('deshowdate.m_complex') } */
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState([
|
||||
'curComponent'
|
||||
])
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
this.curComponent.formatInfo = deepCopy(this.formatInfo)
|
||||
this.popoverClose()
|
||||
},
|
||||
onClose() {
|
||||
this.$emit('close')
|
||||
this.popoverClose()
|
||||
},
|
||||
popoverClose() {
|
||||
this.$refs.popover.showPopper = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.slot-class{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.ellip{
|
||||
/*width: 100%;*/
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
overflow: hidden;/*超出部分隐藏*/
|
||||
white-space: nowrap;/*不换行*/
|
||||
text-overflow:ellipsis;/*超出部分文字以...显示*/
|
||||
background-color: #f7f8fa;
|
||||
color: #3d4d66;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.select-filed{
|
||||
/*width: 100%;*/
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
overflow: hidden;/*超出部分隐藏*/
|
||||
white-space: nowrap;/*不换行*/
|
||||
text-overflow:ellipsis;/*超出部分文字以...显示*/
|
||||
color: #3d4d66;
|
||||
font-size: 12px;
|
||||
line-height: 35px;
|
||||
height: 35px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
>>>.el-popover{
|
||||
height: 200px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1351,7 +1351,7 @@ export default {
|
||||
},
|
||||
|
||||
resizeView(index, item) {
|
||||
if (item.type === 'view') {
|
||||
if (item.type === 'view' || item.type === 'de-show-date') {
|
||||
this.$refs.wrapperChild[index].chartResize()
|
||||
}
|
||||
},
|
||||
|
||||
@ -77,8 +77,12 @@
|
||||
</div>
|
||||
|
||||
<div style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;">
|
||||
<el-tooltip content="超链接">
|
||||
<Hyperlinks :link-info="this.curComponent.hyperlinks" />
|
||||
<el-tooltip v-if="curComponent.hyperlinks" content="超链接">
|
||||
<Hyperlinks :link-info="curComponent.hyperlinks" />
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip v-if="curComponent.type === 'de-show-date'" content="日期格式">
|
||||
<date-format :format-info="curComponent.formatInfo" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
@ -89,9 +93,10 @@
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import Hyperlinks from '@/components/canvas/components/Editor/Hyperlinks'
|
||||
import DateFormat from '@/components/canvas/components/Editor/DateFormat'
|
||||
|
||||
export default {
|
||||
components: { Hyperlinks },
|
||||
components: { Hyperlinks, DateFormat },
|
||||
props: {
|
||||
scrollLeft: {
|
||||
type: Number,
|
||||
|
||||
@ -43,6 +43,7 @@ export const assistList = [
|
||||
icon: 'iconfont icon-tabs',
|
||||
defaultClass: 'text-filter'
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
export const pictureList = [
|
||||
@ -56,6 +57,17 @@ export const pictureList = [
|
||||
}
|
||||
]
|
||||
|
||||
export const dateList = [
|
||||
{
|
||||
id: '30001',
|
||||
component: 'de-show-date',
|
||||
type: 'de-show-date',
|
||||
label: '时间',
|
||||
icon: 'iconfont icon-shijian',
|
||||
defaultClass: 'text-filter'
|
||||
}
|
||||
]
|
||||
|
||||
// 编辑器左侧组件列表
|
||||
const list = [
|
||||
{
|
||||
@ -203,6 +215,43 @@ const list = [
|
||||
sizex: 10,
|
||||
sizey: 10
|
||||
},
|
||||
{
|
||||
id: '30001',
|
||||
component: 'de-show-date',
|
||||
label: '时间',
|
||||
propValue: '',
|
||||
icon: 'shijian',
|
||||
type: 'de-show-date',
|
||||
style: {
|
||||
width: 250,
|
||||
height: 100,
|
||||
fontSize: 22,
|
||||
|
||||
fontWeight: 400,
|
||||
lineHeight: '',
|
||||
letterSpacing: 0,
|
||||
textAlign: 'center',
|
||||
color: '#000000',
|
||||
verticalAlign: 'middle',
|
||||
backgroundColor: '#ffffff',
|
||||
|
||||
borderStyle: 'solid',
|
||||
borderWidth: 1,
|
||||
borderColor: '#000000',
|
||||
borderRadius: 0
|
||||
},
|
||||
formatInfo: {
|
||||
openMode: '0',
|
||||
showWeek: false,
|
||||
showDate: true,
|
||||
dateFormat: 'yyyy年-MM月-dd日',
|
||||
timeFormat: 'hh:mm:ss'
|
||||
},
|
||||
x: 1,
|
||||
y: 1,
|
||||
sizex: 10,
|
||||
sizey: 2
|
||||
},
|
||||
{
|
||||
id: '20001',
|
||||
component: 'picture-add',
|
||||
|
||||
38
frontend/src/components/widget/DeWidget/DeShowDate.vue
Normal file
38
frontend/src/components/widget/DeWidget/DeShowDate.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div style="height: 100%">
|
||||
<time-default v-if="element.formatInfo.openMode === '0'" :ref="element.id" :element="element" />
|
||||
|
||||
<time-elec v-if="element.formatInfo.openMode === '1'" :ref="element.id" :element="element" />
|
||||
|
||||
<time-simple v-if="element.formatInfo.openMode === '2'" :ref="element.id" :element="element" />
|
||||
|
||||
<time-complex v-if="element.formatInfo.openMode === '3'" :ref="element.id" :element="element" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TimeDefault from './TimeDefault'
|
||||
import TimeElec from './TimeElec'
|
||||
import TimeSimple from './TimeSimple'
|
||||
import TimeComplex from './TimeComplex'
|
||||
export default {
|
||||
name: 'DeShowDate',
|
||||
components: { TimeDefault, TimeElec, TimeSimple, TimeComplex },
|
||||
props: {
|
||||
element: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
chartResize() {
|
||||
// console.log('11111')
|
||||
this.$nextTick(() => {
|
||||
this.$refs[this.element.id] && this.$refs[this.element.id].resize && this.$refs[this.element.id].resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
261
frontend/src/components/widget/DeWidget/TimeComplex.vue
Normal file
261
frontend/src/components/widget/DeWidget/TimeComplex.vue
Normal file
@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<div>
|
||||
<canvas id="canvas" width="500" height="500" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var milliseconds = 0
|
||||
var minutes = 0
|
||||
var hour = 0
|
||||
var date = ''
|
||||
export default {
|
||||
name: 'TimeComplex',
|
||||
props: {
|
||||
element: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
time: '',
|
||||
date: '',
|
||||
week: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
|
||||
canvas: null,
|
||||
ctx: null,
|
||||
ctxBack: null,
|
||||
numBack: null,
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.canvas = document.getElementById('canvas')
|
||||
this.initCtx()
|
||||
this.initCtxBack()
|
||||
this.initNumBack()
|
||||
this.currentTime()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer) // 在Vue实例销毁前，清除时间定时器
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
currentTime() {
|
||||
this.timer = setInterval(this.pageInit, 500)
|
||||
},
|
||||
initCtx() {
|
||||
this.ctx = this.canvas.getContext('2d')
|
||||
this.ctx.strokeStyle = '#7FFFD4'
|
||||
this.ctx.lineWidth = 3
|
||||
this.ctx.shadowBlur = 5
|
||||
this.ctx.shadowColor = '#7FFFD4'
|
||||
},
|
||||
initCtxBack() {
|
||||
this.ctxBack = this.canvas.getContext('2d')
|
||||
this.ctxBack.lineWidth = 1
|
||||
this.ctxBack.shadowBlur = 0
|
||||
this.ctxBack.shadowColor = '#F0F8FF'
|
||||
},
|
||||
initNumBack() {
|
||||
this.numBack = this.canvas.getContext('2d')
|
||||
},
|
||||
pageInit() {
|
||||
this.showTime()
|
||||
this.showBack()
|
||||
this.drawSecPin()
|
||||
this.drawMinPin()
|
||||
this.drawHouPin()
|
||||
this.setPoint()
|
||||
this.setNum()
|
||||
},
|
||||
|
||||
setNum() {
|
||||
this.numBack.save()
|
||||
this.numBack.translate(250, 250)
|
||||
this.numBack.beginPath()
|
||||
this.numBack.fillStyle = '#7FFFD4'
|
||||
this.numBack.font = '30px Helvetica'
|
||||
for (var i = 0; i < 60; i++) {
|
||||
if (i % 5 === 0) {
|
||||
this.numBack.lineWidth = 5
|
||||
var xPoint = Math.sin(i * 6 * 2 * Math.PI / 360) * 195
|
||||
var yPoint = -Math.cos(i * 6 * 2 * Math.PI / 360) * 195
|
||||
this.numBack.fillText(i === 0 ? 12 : i / 5, i === 0 ? -15 : xPoint - 10, i === 0 ? -185 : i <= 30 ? yPoint + 5 : yPoint + 10)
|
||||
}
|
||||
}
|
||||
this.numBack.stroke()
|
||||
this.numBack.closePath()
|
||||
this.numBack.restore()
|
||||
},
|
||||
|
||||
drawSecPin() {
|
||||
this.ctxBack.save()
|
||||
this.ctxBack.translate(250, 250)
|
||||
this.ctxBack.rotate(milliseconds / 60 * 2 * Math.PI)
|
||||
this.ctxBack.beginPath()
|
||||
this.ctxBack.strokeStyle = '#AFEEEE'
|
||||
this.ctxBack.lineWidth = 1
|
||||
this.ctxBack.lineJoin = 'bevel'
|
||||
this.ctxBack.miterLimit = 10
|
||||
this.ctxBack.moveTo(0, 30)
|
||||
this.ctxBack.lineTo(3, -175)
|
||||
this.ctxBack.lineTo(13, -165)
|
||||
this.ctxBack.lineTo(0, -210)
|
||||
this.ctxBack.lineTo(-13, -165)
|
||||
this.ctxBack.lineTo(-3, -175)
|
||||
this.ctxBack.lineTo(0, 30)
|
||||
this.ctxBack.stroke()
|
||||
this.ctxBack.closePath()
|
||||
this.ctxBack.restore()
|
||||
},
|
||||
|
||||
drawMinPin() {
|
||||
this.ctxBack.save()
|
||||
this.ctxBack.translate(250, 250)
|
||||
this.ctxBack.rotate(minutes * 6 * Math.PI / 180)
|
||||
this.ctxBack.beginPath()
|
||||
this.ctxBack.strokeStyle = '#20B2AA'
|
||||
this.ctxBack.lineWidth = 1
|
||||
this.ctxBack.lineJoin = 'bevel'
|
||||
this.ctxBack.miterLimit = 10
|
||||
this.ctxBack.moveTo(0, 20)
|
||||
this.ctxBack.lineTo(3, -145)
|
||||
this.ctxBack.lineTo(10, -135)
|
||||
this.ctxBack.lineTo(0, -180)
|
||||
this.ctxBack.lineTo(-10, -135)
|
||||
this.ctxBack.lineTo(-3, -145)
|
||||
this.ctxBack.lineTo(0, 20)
|
||||
this.ctxBack.stroke()
|
||||
this.ctxBack.closePath()
|
||||
this.ctxBack.restore()
|
||||
},
|
||||
|
||||
drawHouPin() {
|
||||
this.ctxBack.save()
|
||||
this.ctxBack.translate(250, 250)
|
||||
this.ctxBack.rotate(hour * 30 * Math.PI / 180)
|
||||
this.ctxBack.beginPath()
|
||||
this.ctxBack.strokeStyle = '#87CEFA'
|
||||
this.ctxBack.lineWidth = 1
|
||||
this.ctxBack.lineJoin = 'bevel'
|
||||
this.ctxBack.miterLimit = 10
|
||||
this.ctxBack.moveTo(0, 20)
|
||||
this.ctxBack.lineTo(3, -110)
|
||||
this.ctxBack.lineTo(10, -100)
|
||||
this.ctxBack.lineTo(0, -150)
|
||||
this.ctxBack.lineTo(-10, -100)
|
||||
this.ctxBack.lineTo(-3, -110)
|
||||
this.ctxBack.lineTo(0, 20)
|
||||
this.ctxBack.stroke()
|
||||
this.ctxBack.closePath()
|
||||
this.ctxBack.restore()
|
||||
},
|
||||
|
||||
setPoint() {
|
||||
this.ctxBack.beginPath()
|
||||
this.ctxBack.fillStyle = 'black'
|
||||
this.ctxBack.arc(250, 250, 3, 0, 2 * Math.PI)
|
||||
this.ctxBack.stroke()
|
||||
},
|
||||
|
||||
showBack() {
|
||||
for (var i = 0; i < 60; i++) {
|
||||
this.ctxBack.save()
|
||||
this.ctxBack.translate(250, 250)
|
||||
this.ctxBack.rotate(i / 60 * 2 * Math.PI)
|
||||
this.ctxBack.beginPath()
|
||||
this.ctxBack.strokeStyle = '#7FFFD4'
|
||||
this.ctxBack.moveTo(0, -250)
|
||||
this.ctxBack.lineWidth = i % 5 === 0 ? 5 : 2
|
||||
this.ctxBack.lineTo(0, -230)
|
||||
this.ctxBack.stroke()
|
||||
this.ctxBack.closePath()
|
||||
this.ctxBack.restore()
|
||||
}
|
||||
this.ctxBack.beginPath()
|
||||
this.ctxBack.arc(250, 250, 230, 0, 2 * Math.PI)
|
||||
this.ctxBack.stroke()
|
||||
},
|
||||
|
||||
degToRad(degree) {
|
||||
var result
|
||||
var factor = Math.PI / 180
|
||||
if (degree === 0) {
|
||||
result = 270 * factor
|
||||
} else {
|
||||
result = degree * factor
|
||||
}
|
||||
return result
|
||||
},
|
||||
|
||||
showTime() {
|
||||
var now = new Date()
|
||||
var today = now.toLocaleDateString()
|
||||
var time = now.toLocaleTimeString()
|
||||
var day = now.getDay()
|
||||
var hrs = now.getHours()
|
||||
var min = now.getMinutes()
|
||||
var sec = now.getSeconds()
|
||||
var mil = now.getMilliseconds()
|
||||
var smoothsec = sec + (mil / 1000)
|
||||
var smoothmin = min + (smoothsec / 60)
|
||||
var hours = hrs + (smoothmin / 60)
|
||||
milliseconds = smoothsec
|
||||
minutes = smoothmin
|
||||
hour = hours
|
||||
switch (day) {
|
||||
case 1:
|
||||
date = '一'
|
||||
break
|
||||
case 2:
|
||||
date = '二'
|
||||
break
|
||||
case 3:
|
||||
date = '三'
|
||||
break
|
||||
case 4:
|
||||
date = '四'
|
||||
break
|
||||
case 5:
|
||||
date = '五'
|
||||
break
|
||||
case 6:
|
||||
date = '六'
|
||||
break
|
||||
case 0:
|
||||
date = '日'
|
||||
break
|
||||
}
|
||||
const gradient = this.ctx.createRadialGradient(250, 250, 5, 250, 250, 300)
|
||||
gradient.addColorStop(0, '#03303a')
|
||||
gradient.addColorStop(1, 'black')
|
||||
this.ctx.fillStyle = gradient
|
||||
this.ctx.fillRect(0, 0, 500, 500)
|
||||
this.ctx.beginPath()
|
||||
this.ctx.strokeStyle = '#87CEFA'
|
||||
this.ctx.arc(250, 250, 215, this.degToRad(0), this.degToRad((hours * 30) - 90))
|
||||
this.ctx.stroke()
|
||||
this.ctx.beginPath()
|
||||
this.ctx.strokeStyle = '#20B2AA'
|
||||
this.ctx.arc(250, 250, 220, this.degToRad(0), this.degToRad(smoothmin * 6 - 90))
|
||||
this.ctx.stroke()
|
||||
this.ctx.beginPath()
|
||||
this.ctx.strokeStyle = '#AFEEEE'
|
||||
this.ctx.arc(250, 250, 225, this.degToRad(0), this.degToRad(smoothsec * 6 - 90))
|
||||
this.ctx.stroke()
|
||||
this.ctx.font = '25px Helvetica Bold'
|
||||
this.ctx.fillStyle = '#7FFFD4'
|
||||
this.ctx.fillText(today + '/星期' + date, 150, 230)
|
||||
this.ctx.font = '23px Helvetica Bold'
|
||||
this.ctx.fillStyle = '#7FFFD4'
|
||||
this.ctx.fillText(time, 190, 280)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
58
frontend/src/components/widget/DeWidget/TimeDefault.vue
Normal file
58
frontend/src/components/widget/DeWidget/TimeDefault.vue
Normal file
@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<span>{{ nowDate }}</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
element: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nowDate: '', // 当前日期
|
||||
nowWeek: '',
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.currentTime()
|
||||
},
|
||||
// 销毁定时器
|
||||
beforeDestroy() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer) // 在Vue实例销毁前，清除时间定时器
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
currentTime() {
|
||||
this.timer = setInterval(this.formatDate, 500)
|
||||
},
|
||||
formatDate() {
|
||||
const weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
||||
let timeFormat = this.element.formatInfo.timeFormat || 'hh:mm:ss'
|
||||
const showWeek = this.element.formatInfo.showWeek
|
||||
const showDate = this.element.formatInfo.showDate
|
||||
const dateFormat = this.element.formatInfo.dateFormat || 'yyyy-MM-dd'
|
||||
if (showDate && dateFormat) {
|
||||
timeFormat = dateFormat + ' ' + timeFormat
|
||||
}
|
||||
|
||||
const date = new Date()
|
||||
|
||||
this.nowDate = date.format(timeFormat)
|
||||
|
||||
if (showWeek) {
|
||||
this.nowWeek = weekArr[date.getDay()]
|
||||
this.nowDate = this.nowDate + ' ' + this.nowWeek
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
112
frontend/src/components/widget/DeWidget/TimeElec.vue
Normal file
112
frontend/src/components/widget/DeWidget/TimeElec.vue
Normal file
@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<div id="clock" :style="{'--varBg': varBg}">
|
||||
<p class="date">{{ date }}</p>
|
||||
<p class="time" :style="{'fontSize': (parseInt(element.style.fontSize) * 3) + 'px'}">{{ time }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getThemeCluster } from '@/utils/style'
|
||||
export default {
|
||||
name: 'TimeElec',
|
||||
props: {
|
||||
element: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
time: '',
|
||||
date: '',
|
||||
week: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
varBg() {
|
||||
const color = this.element.style.color
|
||||
const styleCluster = getThemeCluster(color.replace('#', ''))
|
||||
if (styleCluster.length > 2) {
|
||||
const len = styleCluster.length
|
||||
const val = styleCluster[len - 2]
|
||||
return val
|
||||
}
|
||||
return ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.bigFontSize = (parseInt(this.element.style.fontSize) * 3) + 'px'
|
||||
},
|
||||
mounted() {
|
||||
// this.bigFontSize = this.element.style.fontSize + ''
|
||||
this.currentTime()
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
if (this.updateTime) {
|
||||
clearInterval(this.updateTime) // 在Vue实例销毁前，清除时间定时器
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
currentTime() {
|
||||
setInterval(this.updateTime, 500)
|
||||
},
|
||||
zeroPadding(num, digit) {
|
||||
var zero = ''
|
||||
for (var i = 0; i < digit; i++) {
|
||||
zero += '0'
|
||||
}
|
||||
return (zero + num).slice(-digit)
|
||||
},
|
||||
updateTime() {
|
||||
var cd = new Date()
|
||||
const timeFormat = this.element.formatInfo.timeFormat || 'hh:mm:ss'
|
||||
const showWeek = this.element.formatInfo.showWeek
|
||||
const showDate = this.element.formatInfo.showDate
|
||||
const dateFormat = this.element.formatInfo.dateFormat || 'yyyy-MM-dd'
|
||||
let nowDate = ''
|
||||
if (showDate && dateFormat) {
|
||||
nowDate = cd.format(dateFormat)
|
||||
}
|
||||
const nowWeek = this.week[cd.getDay()]
|
||||
|
||||
this.time = cd.format(timeFormat)
|
||||
this.date = showWeek ? (nowDate + ' ' + nowWeek) : nowDate
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#clock {
|
||||
font-family: "Share Tech Mono", monospace;
|
||||
// color: #ffffff;
|
||||
// text-align: center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
// color: #daf6ff;
|
||||
// text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
|
||||
text-shadow: 0 0 20px var(--varBg), 0 0 20px rgba(10, 175, 230, 0);
|
||||
}
|
||||
#clock .time {
|
||||
letter-spacing: 0.05em;
|
||||
font-size: 80px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
#clock .date {
|
||||
letter-spacing: 0.1em;
|
||||
//font-size: 24px;
|
||||
}
|
||||
#clock .text {
|
||||
letter-spacing: 0.1em;
|
||||
font-size: 12px;
|
||||
padding: 20px 0 0;
|
||||
}
|
||||
</style>
|
||||
199
frontend/src/components/widget/DeWidget/TimeSimple.vue
Normal file
199
frontend/src/components/widget/DeWidget/TimeSimple.vue
Normal file
@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<div style="height: 100%">
|
||||
<div class="time-s-class" style="height: calc(100% - 100px);">
|
||||
<canvas id="canvas" class="de-canvas" :width="element.style.width" :height="element.style.height - 100" />
|
||||
</div>
|
||||
<div style="height: 100px;">
|
||||
<p id="fulltime" :style="{'fontSize': (parseInt(element.style.fontSize) * 2) + 'px', 'color':element.style.color}" style="width:100%;margin:auto;" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TimeSimple',
|
||||
props: {
|
||||
element: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
time: '',
|
||||
date: '',
|
||||
week: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
|
||||
canvas: null,
|
||||
draw: null,
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.canvas = document.getElementById('canvas')
|
||||
this.draw = this.canvas.getContext('2d')
|
||||
this.currentTime()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer) // 在Vue实例销毁前，清除时间定时器
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resize() {
|
||||
this.$forceUpdate()
|
||||
},
|
||||
currentTime() {
|
||||
this.timer = setInterval(this.canvass, 500)
|
||||
},
|
||||
canvass() {
|
||||
const timeFormat = this.element.formatInfo.timeFormat || 'hh:mm:ss'
|
||||
const dateFormat = this.element.formatInfo.dateFormat || 'yyyy-MM-dd'
|
||||
const showWeek = this.element.formatInfo.showWeek
|
||||
const showDate = this.element.formatInfo.showDate
|
||||
|
||||
const canvas_w = this.element.style.width
|
||||
|
||||
const canvas_h = this.element.style.height - 100
|
||||
|
||||
const side_length = Math.min(canvas_w, canvas_h)
|
||||
|
||||
const draws = this.draw
|
||||
// 获取时间
|
||||
var time = new Date()
|
||||
|
||||
var w = time.getDay()
|
||||
var englishWeek = ''
|
||||
var h = time.getHours()
|
||||
|
||||
var min = time.getMinutes()
|
||||
|
||||
var s = time.getSeconds()
|
||||
|
||||
if (w === 0) {
|
||||
englishWeek = 'Sunday'
|
||||
} else if (w === 1) {
|
||||
englishWeek = 'Monday'
|
||||
} else if (w === 2) {
|
||||
englishWeek = 'Tuesday'
|
||||
} else if (w === 3) {
|
||||
englishWeek = 'Wednesday'
|
||||
} else if (w === 4) {
|
||||
englishWeek = 'Thursday'
|
||||
} else if (w === 5) {
|
||||
englishWeek = 'Friday'
|
||||
} else {
|
||||
englishWeek = 'Saturday'
|
||||
}
|
||||
|
||||
const simpleTime = time.format(timeFormat)
|
||||
let nowDate = ''
|
||||
if (showDate && dateFormat) {
|
||||
nowDate = time.format(dateFormat)
|
||||
}
|
||||
const nowWeek = this.week[time.getDay()]
|
||||
var fullTime = showWeek ? (nowDate + ' ' + nowWeek) : nowDate
|
||||
var fullDoc = document.getElementById('fulltime')
|
||||
fullDoc.innerHTML = fullTime
|
||||
|
||||
const draw = draws
|
||||
draw.clearRect(0, 0, canvas_w, canvas_h)
|
||||
|
||||
draw.fillStyle = this.element.style.color
|
||||
draw.font = this.element.style.fontSize + 'px 黑体'
|
||||
draw.fillText(simpleTime, canvas_w / 2 - 33, canvas_h / 2 + 50)
|
||||
showWeek && draw.fillText(englishWeek, canvas_w / 2 - 25, canvas_h / 2 + 70)
|
||||
for (var i = 0; i < 12; i++) {
|
||||
draw.save()
|
||||
|
||||
draw.lineWidth = 4
|
||||
draw.strokeStyle = this.element.style.color
|
||||
draw.translate(canvas_w / 2, canvas_h / 2)
|
||||
draw.rotate(i * 30 * Math.PI / 180)
|
||||
|
||||
draw.beginPath()
|
||||
|
||||
draw.moveTo(0, side_length / 2 - 70)
|
||||
draw.lineTo(0, side_length / 2 - 50)
|
||||
draw.closePath()
|
||||
draw.stroke()
|
||||
draw.restore()
|
||||
}
|
||||
// 分刻度
|
||||
for (let i = 0; i < 60; i++) {
|
||||
draw.save()
|
||||
// draw.translate(250, 250)
|
||||
draw.translate(this.element.style.width / 2, (this.element.style.height - 100) / 2)
|
||||
draw.rotate(i * 6 * Math.PI / 180)
|
||||
draw.lineWidth = 2
|
||||
draw.strokeStyle = this.element.style.color
|
||||
draw.beginPath()
|
||||
|
||||
// draw.moveTo(0, 190)
|
||||
draw.lineTo(0, side_length / 2 - 50)
|
||||
// draw.lineTo(0, 180)
|
||||
draw.lineTo(0, side_length / 2 - 60)
|
||||
draw.closePath()
|
||||
draw.stroke()
|
||||
|
||||
draw.restore()
|
||||
}
|
||||
|
||||
// 画时阵
|
||||
draw.save()
|
||||
draw.strokeStyle = this.element.style.color
|
||||
// draw.translate(250, 250)
|
||||
draw.translate(this.element.style.width / 2, (this.element.style.height - 100) / 2)
|
||||
const hourzs = h + min / 60// 获取浮点类型的小时
|
||||
draw.rotate(hourzs * 30 * Math.PI / 180)
|
||||
draw.lineWidth = 6
|
||||
draw.beginPath()
|
||||
draw.moveTo(0, 0)
|
||||
draw.lineTo(0, -(side_length / 2 - 60) / 3)
|
||||
draw.closePath()
|
||||
draw.stroke()
|
||||
draw.restore()
|
||||
// 画分针
|
||||
draw.save()
|
||||
// draw.translate(250, 250)
|
||||
draw.translate(this.element.style.width / 2, (this.element.style.height - 100) / 2)
|
||||
|
||||
draw.rotate(min * 6 * Math.PI / 180)
|
||||
draw.strokeStyle = this.element.style.color
|
||||
draw.lineWidth = 3
|
||||
draw.beginPath()
|
||||
draw.moveTo(0, 0)
|
||||
draw.lineTo(0, -(side_length / 2 - 60) * 3 / 5)
|
||||
draw.closePath()
|
||||
draw.stroke()
|
||||
draw.restore()
|
||||
// 画秒针
|
||||
draw.save()
|
||||
// draw.translate(250, 250)
|
||||
draw.translate(this.element.style.width / 2, (this.element.style.height - 100) / 2)
|
||||
draw.rotate(s * 6 * Math.PI / 180)
|
||||
draw.strokeStyle = this.element.style.color
|
||||
draw.lineWidth = 1
|
||||
draw.beginPath()
|
||||
draw.moveTo(0, 15)
|
||||
// draw.lineTo(0, -180)
|
||||
draw.lineTo(0, -(side_length / 2 - 60))
|
||||
draw.closePath()
|
||||
draw.stroke()
|
||||
draw.restore()
|
||||
|
||||
// 画中心原点
|
||||
// draw.fillStyle = 'rgba(255,255,255,1)'
|
||||
draw.lineWidth = 2
|
||||
draw.beginPath()
|
||||
// draw.arc(250, 250, 4, 0, 360, false)
|
||||
draw.arc(this.element.style.width / 2, (this.element.style.height - 100) / 2, 4, 0, 360, false)
|
||||
draw.closePath()
|
||||
draw.fill()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -1522,5 +1522,22 @@ export default {
|
||||
deyear: {
|
||||
label: 'Year',
|
||||
placeholder: 'Please select year'
|
||||
},
|
||||
deshowdate: {
|
||||
label: 'Time',
|
||||
show_week: 'Show week',
|
||||
show_date: 'Show date',
|
||||
time_format: 'Time format',
|
||||
date_format: 'Date format',
|
||||
custom: 'Custom format',
|
||||
open_mode: 'Time category',
|
||||
m_default: 'Default',
|
||||
m_elec: 'Electronic clock',
|
||||
m_simple: 'Simple clock',
|
||||
m_complex: 'Complex clock',
|
||||
select_openMode: 'Please select time category',
|
||||
select_time_format: 'Please select time format',
|
||||
select_date_format: 'Please select date format'
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -1543,5 +1543,22 @@ export default {
|
||||
deyear: {
|
||||
label: '年份',
|
||||
placeholder: '请选择年份'
|
||||
},
|
||||
deshowdate: {
|
||||
label: '时间',
|
||||
show_week: '显示星期',
|
||||
show_date: '显示日期',
|
||||
time_format: '时间格式',
|
||||
date_format: '日期格式',
|
||||
custom: '自定义格式',
|
||||
open_mode: '展示风格',
|
||||
m_default: '简单风格',
|
||||
m_elec: '电子时钟',
|
||||
m_simple: '简单表盘',
|
||||
m_complex: '复杂表盘',
|
||||
select_openMode: '请选择展示风格',
|
||||
select_time_format: '请选择时间格式',
|
||||
select_date_format: '请选择时间格式'
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,6 +23,8 @@ import './utils/dialog'
|
||||
import DeComplexInput from '@/components/business/condition-table/DeComplexInput'
|
||||
import DeComplexSelect from '@/components/business/condition-table/DeComplexSelect'
|
||||
import '@/components/canvas/custom-component' // 注册自定义组件
|
||||
|
||||
import '@/utils/DateUtil'
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(VueClipboard)
|
||||
Vue.use(widgets)
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 2459092 */
|
||||
src: url('iconfont.woff2?t=1634191971474') format('woff2'),
|
||||
url('iconfont.woff?t=1634191971474') format('woff'),
|
||||
url('iconfont.ttf?t=1634191971474') format('truetype');
|
||||
src: url('iconfont.woff2?t=1634625523445') format('woff2'),
|
||||
url('iconfont.woff?t=1634625523445') format('woff'),
|
||||
url('iconfont.ttf?t=1634625523445') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@ -13,6 +13,18 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-tabs:before {
|
||||
content: "\e9a8";
|
||||
}
|
||||
|
||||
.icon-shijian:before {
|
||||
content: "\e665";
|
||||
}
|
||||
|
||||
.icon-shijiangeshizhuanhuan:before {
|
||||
content: "\e6fb";
|
||||
}
|
||||
|
||||
.icon-chaolianjie:before {
|
||||
content: "\e9b2";
|
||||
}
|
||||
@ -45,10 +57,6 @@
|
||||
content: "\e8e6";
|
||||
}
|
||||
|
||||
.icon-tabs:before {
|
||||
content: "\e62a";
|
||||
}
|
||||
|
||||
.icon-xiyu:before {
|
||||
content: "\e619";
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -5,6 +5,27 @@
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "11982148",
|
||||
"name": "tabs",
|
||||
"font_class": "tabs",
|
||||
"unicode": "e9a8",
|
||||
"unicode_decimal": 59816
|
||||
},
|
||||
{
|
||||
"icon_id": "658039",
|
||||
"name": "时间",
|
||||
"font_class": "shijian",
|
||||
"unicode": "e665",
|
||||
"unicode_decimal": 58981
|
||||
},
|
||||
{
|
||||
"icon_id": "8691950",
|
||||
"name": "时间格式转换",
|
||||
"font_class": "shijiangeshizhuanhuan",
|
||||
"unicode": "e6fb",
|
||||
"unicode_decimal": 59131
|
||||
},
|
||||
{
|
||||
"icon_id": "3229030",
|
||||
"name": "超链接",
|
||||
@ -61,13 +82,6 @@
|
||||
"unicode": "e8e6",
|
||||
"unicode_decimal": 59622
|
||||
},
|
||||
{
|
||||
"icon_id": "15196968",
|
||||
"name": "44.tabs",
|
||||
"font_class": "tabs",
|
||||
"unicode": "e62a",
|
||||
"unicode_decimal": 58922
|
||||
},
|
||||
{
|
||||
"icon_id": "23570269",
|
||||
"name": "洗浴",
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
21
frontend/src/utils/DateUtil.js
Normal file
21
frontend/src/utils/DateUtil.js
Normal file
@ -0,0 +1,21 @@
|
||||
/* eslint-disable no-extend-native */
|
||||
Date.prototype.format = function(fmt) {
|
||||
var o = {
|
||||
'M+': this.getMonth() + 1, // 月份
|
||||
'd+': this.getDate(), // 日
|
||||
'h+': this.getHours(), // 小时
|
||||
'm+': this.getMinutes(), // 分
|
||||
's+': this.getSeconds(), // 秒
|
||||
'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
|
||||
'S': this.getMilliseconds() // 毫秒
|
||||
}
|
||||
if (/(y+)/.test(fmt)) {
|
||||
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
|
||||
}
|
||||
for (var k in o) {
|
||||
if (new RegExp('(' + k + ')').test(fmt)) {
|
||||
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
|
||||
}
|
||||
}
|
||||
return fmt
|
||||
}
|
||||
@ -48,6 +48,30 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="widget-subject">
|
||||
<div class="filter-header">
|
||||
<div class="filter-header-text">
|
||||
<span>其他</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-widget-content">
|
||||
<div
|
||||
v-for="(item, index) in dateList"
|
||||
:key="index"
|
||||
:data-id="item.id"
|
||||
:data-index="index"
|
||||
draggable
|
||||
:class="'filter-widget '+ (item.defaultClass || '')"
|
||||
>
|
||||
<div class="filter-widget-icon">
|
||||
<i :class="(item.icon || 'el-icon-setting') + ' widget-icon-i'" />
|
||||
</div>
|
||||
<div class="filter-widget-text">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input id="input" ref="files" type="file" hidden @change="handleFileChange">
|
||||
|
||||
</div>
|
||||
@ -55,7 +79,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import componentList, { assistList, pictureList } from '@/components/canvas/custom-component/component-list'
|
||||
import componentList, { assistList, pictureList, dateList } from '@/components/canvas/custom-component/component-list'
|
||||
import toast from '@/components/canvas/utils/toast'
|
||||
import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
|
||||
import generateID from '@/components/canvas/utils/generateID'
|
||||
@ -68,7 +92,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
assistList,
|
||||
pictureList
|
||||
pictureList,
|
||||
dateList
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
@ -163,7 +163,7 @@
|
||||
|
||||
<!--矩形样式组件-->
|
||||
<RectangleAttr v-if="curComponent&&(curComponent.type==='rect-shape'||curComponent.type==='de-tabs')" :scroll-left="scrollLeft" :scroll-top="scrollTop" />
|
||||
<TextAttr v-if="curComponent&&curComponent.type==='v-text'" :scroll-left="scrollLeft" :scroll-top="scrollTop" />
|
||||
<TextAttr v-if="curComponent && (curComponent.type==='v-text' || curComponent.type==='de-show-date')" :scroll-left="scrollLeft" :scroll-top="scrollTop" />
|
||||
<FilterTextAttr v-if="curComponent&&curComponent.type==='custom'&&curComponent.options.attrs.title" :scroll-left="scrollLeft" :scroll-top="scrollTop" />
|
||||
<!--复用ChartGroup组件 不做显示-->
|
||||
<ChartGroup
|
||||
|
||||
Loading…
Reference in New Issue
Block a user