Skip to content

D
dataease
Unverified 提交 42a36b10 authored 作者: fit2cloud-chenyw's avatar fit2cloud-chenyw 提交者： GitHub
浏览文件
操作

Merge pull request #976 from dataease/pr@dev@feat_panel_show_date

feat: 增加仪表板时间组件
上级 66f3d43c 1bf3f1d5
隐藏空白字符变更
内嵌 并排
正在显示 包含 1028 行增加 和 21 行删除
frontend/src/components/canvas/components/Editor/DateFormat.vue 0 → 100644
浏览文件 @ 42a36b10
<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>
frontend/src/components/canvas/components/Editor/index.vue
浏览文件 @ 42a36b10
......@@ -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()
}
},
......
frontend/src/components/canvas/components/TextAttr.vue
浏览文件 @ 42a36b10
......@@ -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,
......
frontend/src/components/canvas/custom-component/component-list.js
浏览文件 @ 42a36b10
......@@ -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',
......
frontend/src/components/widget/DeWidget/DeShowDate.vue 0 → 100644
浏览文件 @ 42a36b10
<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>
frontend/src/components/widget/DeWidget/TimeComplex.vue 0 → 100644
浏览文件 @ 42a36b10
<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>
frontend/src/components/widget/DeWidget/TimeDefault.vue 0 → 100644
浏览文件 @ 42a36b10
<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>
frontend/src/components/widget/DeWidget/TimeElec.vue 0 → 100644
浏览文件 @ 42a36b10
<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>
frontend/src/components/widget/DeWidget/TimeSimple.vue 0 → 100644
浏览文件 @ 42a36b10
<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>
frontend/src/lang/en.js
浏览文件 @ 42a36b10
......@@ -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'
}
}
frontend/src/lang/zh.js
浏览文件 @ 42a36b10
......@@ -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: '请选择时间格式'
}
}
frontend/src/main.js
浏览文件 @ 42a36b10
......@@ -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)
......
frontend/src/styles/deicon/iconfont.css
浏览文件 @ 42a36b10
@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";
}
......
frontend/src/styles/deicon/iconfont.js
浏览文件 @ 42a36b10
This source diff could not be displayed because it is too large. You can view the blob instead.
frontend/src/styles/deicon/iconfont.json
浏览文件 @ 42a36b10
......@@ -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": "洗浴",
......
frontend/src/utils/DateUtil.js 0 → 100644
浏览文件 @ 42a36b10
/* 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
}
frontend/src/views/panel/AssistComponent/index.vue
浏览文件 @ 42a36b10
......@@ -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: {
......
frontend/src/views/panel/edit/index.vue
浏览文件 @ 42a36b10
......@@ -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
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论