forked from github/dataease
Merge pull request #8487 from dataease/pr@dev-v2@feat_time-clock
feat(数据大屏): 增加时钟组件
This commit is contained in:
王嘉豪
GitHub
commit
52860c678b
213
core/core-frontend/src/custom-component/de-date/Attr.vue
Normal file
213
core/core-frontend/src/custom-component/de-date/Attr.vue
Normal file
@ -0,0 +1,213 @@
|
||||
<script setup lang="ts">
|
||||
import CommonAttr from '@/custom-component/common/CommonAttr.vue'
|
||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
||||
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { ElIcon, ElMessage } from 'element-plus-secondary'
|
||||
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
|
||||
import { beforeUploadCheck, uploadFileResult } from '@/api/staticResource'
|
||||
import { imgUrlTrans } from '@/utils/imgUtils'
|
||||
import eventBus from '@/utils/eventBus'
|
||||
import ImgViewDialog from '@/custom-component/ImgViewDialog.vue'
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
themes?: EditorTheme
|
||||
}>(),
|
||||
{
|
||||
themes: 'dark'
|
||||
}
|
||||
)
|
||||
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
const snapshotStore = snapshotStoreWithOut()
|
||||
|
||||
const { curComponent } = storeToRefs(dvMainStore)
|
||||
|
||||
const fileList = ref([])
|
||||
const dialogImageUrl = ref('')
|
||||
const dialogVisible = ref(false)
|
||||
const uploadDisabled = ref(false)
|
||||
const files = ref(null)
|
||||
const maxImageSize = 15000000
|
||||
|
||||
const handlePictureCardPreview = file => {
|
||||
dialogImageUrl.value = file.url
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleRemove = (_, fileList) => {
|
||||
uploadDisabled.value = false
|
||||
curComponent.value.propValue.url = null
|
||||
fileList.value = []
|
||||
snapshotStore.recordSnapshotCache()
|
||||
}
|
||||
async function upload(file) {
|
||||
uploadFileResult(file.file, fileUrl => {
|
||||
snapshotStore.recordSnapshotCache()
|
||||
curComponent.value.propValue.url = fileUrl
|
||||
})
|
||||
}
|
||||
|
||||
const goFile = () => {
|
||||
files.value.click()
|
||||
}
|
||||
|
||||
const reUpload = e => {
|
||||
const file = e.target.files[0]
|
||||
if (file.size > maxImageSize) {
|
||||
sizeMessage()
|
||||
}
|
||||
uploadFileResult(file, fileUrl => {
|
||||
snapshotStore.recordSnapshotCache()
|
||||
curComponent.value.propValue.url = fileUrl
|
||||
fileList.value = [{ url: imgUrlTrans(curComponent.value.propValue.url) }]
|
||||
})
|
||||
}
|
||||
|
||||
const sizeMessage = () => {
|
||||
ElMessage.success('图片大小不符合')
|
||||
}
|
||||
const init = () => {
|
||||
if (curComponent.value.propValue.url) {
|
||||
fileList.value = [{ url: imgUrlTrans(curComponent.value.propValue.url) }]
|
||||
} else {
|
||||
fileList.value = []
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => curComponent.value.propValue.url,
|
||||
() => {
|
||||
init()
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
eventBus.on('uploadImg', goFile)
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
eventBus.off('uploadImg', goFile)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="attr-list de-collapse-style">
|
||||
<CommonAttr
|
||||
:themes="themes"
|
||||
:element="curComponent"
|
||||
:background-color-picker-width="197"
|
||||
:background-border-select-width="197"
|
||||
>
|
||||
</CommonAttr>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.de-collapse-style {
|
||||
:deep(.ed-collapse-item__header) {
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
font-size: 12px !important;
|
||||
padding: 0 !important;
|
||||
font-weight: 500 !important;
|
||||
|
||||
.ed-collapse-item__arrow {
|
||||
margin: 0 6px 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ed-collapse-item__content) {
|
||||
padding: 16px 8px 0;
|
||||
}
|
||||
:deep(.ed-form-item) {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
:deep(.ed-form-item__label) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.disabled :deep(.el-upload--picture-card) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.avatar-uploader :deep(.ed-upload) {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
line-height: 90px;
|
||||
}
|
||||
|
||||
.avatar-uploader :deep(.ed-upload-list li) {
|
||||
width: 80px !important;
|
||||
height: 80px !important;
|
||||
}
|
||||
|
||||
:deep(.ed-upload--picture-card) {
|
||||
background: #eff0f1;
|
||||
border: 1px dashed #dee0e3;
|
||||
border-radius: 4px;
|
||||
|
||||
.ed-icon {
|
||||
color: #1f2329;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.ed-icon {
|
||||
color: var(--ed-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
.img-area {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
|
||||
&.img-area_dark {
|
||||
:deep(.ed-upload-list__item).is-success {
|
||||
border-color: #434343;
|
||||
}
|
||||
:deep(.ed-upload--picture-card) {
|
||||
background: #373737;
|
||||
border-color: #434343;
|
||||
.ed-icon {
|
||||
color: #ebebeb;
|
||||
}
|
||||
&:hover {
|
||||
.ed-icon {
|
||||
color: var(--ed-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.img-area_light {
|
||||
:deep(.ed-upload-list__item).is-success {
|
||||
border-color: #dee0e3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-hint {
|
||||
color: #8f959e;
|
||||
size: 14px;
|
||||
line-height: 22px;
|
||||
font-weight: 400;
|
||||
margin-top: 2px;
|
||||
&.image-hint_dark {
|
||||
color: #757575;
|
||||
}
|
||||
}
|
||||
|
||||
.re-update-span {
|
||||
cursor: pointer;
|
||||
color: var(--ed-color-primary);
|
||||
size: 14px;
|
||||
line-height: 22px;
|
||||
font-weight: 400;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,53 @@
|
||||
<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 setup lang="ts">
|
||||
import { computed, nextTick, toRefs } from 'vue'
|
||||
import { getCurrentInstance, onMounted } from 'vue/dist/vue'
|
||||
const props = defineProps({
|
||||
element: {
|
||||
type: Object
|
||||
}
|
||||
})
|
||||
const { element } = toRefs(props)
|
||||
|
||||
|
||||
let currentInstance
|
||||
const timeMargin = computed(() => {
|
||||
return element.value.style.time_margin
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
currentInstance = getCurrentInstance()
|
||||
})
|
||||
|
||||
const chartResize = () => {
|
||||
const dataRefs = currentInstance.proxy
|
||||
nextTick(() => {
|
||||
dataRefs.$refs[element.value.id] &&
|
||||
dataRefs.$refs[element.value.id].resize &&
|
||||
dataRefs.$refs[element.value.id].resize()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
257
core/core-frontend/src/custom-component/de-date/TimeComplex.vue
Normal file
257
core/core-frontend/src/custom-component/de-date/TimeComplex.vue
Normal file
@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<div>
|
||||
<canvas :id="'complex_canvas' + element.id" width="500" height="500" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { toRefs } from 'vue/dist/vue'
|
||||
import { getCurrentInstance, onMounted, reactive } from 'vue'
|
||||
|
||||
let milliseconds = 0
|
||||
let minutes = 0
|
||||
let hour = 0
|
||||
let date = ''
|
||||
|
||||
const props = defineProps({
|
||||
element: {
|
||||
type: Object
|
||||
}
|
||||
})
|
||||
const { element } = toRefs(props)
|
||||
|
||||
const state = reactive({
|
||||
time: '',
|
||||
date: '',
|
||||
week: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
|
||||
canvas: null,
|
||||
ctx: null,
|
||||
ctxBack: null,
|
||||
numBack: null,
|
||||
timer: null
|
||||
})
|
||||
|
||||
const currentTime = () => {
|
||||
state.timer = setInterval(pageInit, 500)
|
||||
}
|
||||
const initCtx = () => {
|
||||
state.ctx = state.canvas.getContext('2d')
|
||||
state.ctx.strokeStyle = '#7FFFD4'
|
||||
state.ctx.lineWidth = 3
|
||||
state.ctx.shadowBlur = 5
|
||||
state.ctx.shadowColor = '#7FFFD4'
|
||||
}
|
||||
const initCtxBack = () => {
|
||||
state.ctxBack = state.canvas.getContext('2d')
|
||||
state.ctxBack.lineWidth = 1
|
||||
state.ctxBack.shadowBlur = 0
|
||||
state.ctxBack.shadowColor = '#F0F8FF'
|
||||
}
|
||||
const initNumBack = () => {
|
||||
state.numBack = state.canvas.getContext('2d')
|
||||
}
|
||||
const pageInit = () => {
|
||||
showTime()
|
||||
showBack()
|
||||
drawSecPin()
|
||||
drawMinPin()
|
||||
drawHouPin()
|
||||
setPoint()
|
||||
setNum()
|
||||
},
|
||||
setNum = () => {
|
||||
state.numBack.save()
|
||||
state.numBack.translate(250, 250)
|
||||
state.numBack.beginPath()
|
||||
state.numBack.fillStyle = '#7FFFD4'
|
||||
state.numBack.font = '30px Helvetica'
|
||||
for (let i = 0; i < 60; i++) {
|
||||
if (i % 5 === 0) {
|
||||
state.numBack.lineWidth = 5
|
||||
let xPoint = Math.sin((i * 6 * 2 * Math.PI) / 360) * 195
|
||||
let yPoint = -Math.cos((i * 6 * 2 * Math.PI) / 360) * 195
|
||||
state.numBack.fillText(
|
||||
i === 0 ? 12 : i / 5,
|
||||
i === 0 ? -15 : xPoint - 10,
|
||||
i === 0 ? -185 : i <= 30 ? yPoint + 5 : yPoint + 10
|
||||
)
|
||||
}
|
||||
}
|
||||
state.numBack.stroke()
|
||||
state.numBack.closePath()
|
||||
state.numBack.restore()
|
||||
}
|
||||
|
||||
const drawSecPin = () => {
|
||||
state.ctxBack.save()
|
||||
state.ctxBack.translate(250, 250)
|
||||
state.ctxBack.rotate((milliseconds / 60) * 2 * Math.PI)
|
||||
state.ctxBack.beginPath()
|
||||
state.ctxBack.strokeStyle = '#AFEEEE'
|
||||
state.ctxBack.lineWidth = 1
|
||||
state.ctxBack.lineJoin = 'bevel'
|
||||
state.ctxBack.miterLimit = 10
|
||||
state.ctxBack.moveTo(0, 30)
|
||||
state.ctxBack.lineTo(3, -175)
|
||||
state.ctxBack.lineTo(13, -165)
|
||||
state.ctxBack.lineTo(0, -210)
|
||||
state.ctxBack.lineTo(-13, -165)
|
||||
state.ctxBack.lineTo(-3, -175)
|
||||
state.ctxBack.lineTo(0, 30)
|
||||
state.ctxBack.stroke()
|
||||
state.ctxBack.closePath()
|
||||
state.ctxBack.restore()
|
||||
}
|
||||
|
||||
const drawMinPin = () => {
|
||||
state.ctxBack.save()
|
||||
state.ctxBack.translate(250, 250)
|
||||
state.ctxBack.rotate((minutes * 6 * Math.PI) / 180)
|
||||
state.ctxBack.beginPath()
|
||||
state.ctxBack.strokeStyle = '#20B2AA'
|
||||
state.ctxBack.lineWidth = 1
|
||||
state.ctxBack.lineJoin = 'bevel'
|
||||
state.ctxBack.miterLimit = 10
|
||||
state.ctxBack.moveTo(0, 20)
|
||||
state.ctxBack.lineTo(3, -145)
|
||||
state.ctxBack.lineTo(10, -135)
|
||||
state.ctxBack.lineTo(0, -180)
|
||||
state.ctxBack.lineTo(-10, -135)
|
||||
state.ctxBack.lineTo(-3, -145)
|
||||
state.ctxBack.lineTo(0, 20)
|
||||
state.ctxBack.stroke()
|
||||
state.ctxBack.closePath()
|
||||
state.ctxBack.restore()
|
||||
}
|
||||
|
||||
const drawHouPin = () => {
|
||||
state.ctxBack.save()
|
||||
state.ctxBack.translate(250, 250)
|
||||
state.ctxBack.rotate((hour * 30 * Math.PI) / 180)
|
||||
state.ctxBack.beginPath()
|
||||
state.ctxBack.strokeStyle = '#87CEFA'
|
||||
state.ctxBack.lineWidth = 1
|
||||
state.ctxBack.lineJoin = 'bevel'
|
||||
state.ctxBack.miterLimit = 10
|
||||
state.ctxBack.moveTo(0, 20)
|
||||
state.ctxBack.lineTo(3, -110)
|
||||
state.ctxBack.lineTo(10, -100)
|
||||
state.ctxBack.lineTo(0, -150)
|
||||
state.ctxBack.lineTo(-10, -100)
|
||||
state.ctxBack.lineTo(-3, -110)
|
||||
state.ctxBack.lineTo(0, 20)
|
||||
state.ctxBack.stroke()
|
||||
state.ctxBack.closePath()
|
||||
state.ctxBack.restore()
|
||||
}
|
||||
|
||||
const setPoint = () => {
|
||||
state.ctxBack.beginPath()
|
||||
state.ctxBack.fillStyle = 'black'
|
||||
state.ctxBack.arc(250, 250, 3, 0, 2 * Math.PI)
|
||||
state.ctxBack.stroke()
|
||||
}
|
||||
|
||||
const showBack = () => {
|
||||
for (let i = 0; i < 60; i++) {
|
||||
state.ctxBack.save()
|
||||
state.ctxBack.translate(250, 250)
|
||||
state.ctxBack.rotate((i / 60) * 2 * Math.PI)
|
||||
state.ctxBack.beginPath()
|
||||
state.ctxBack.strokeStyle = '#7FFFD4'
|
||||
state.ctxBack.moveTo(0, -250)
|
||||
state.ctxBack.lineWidth = i % 5 === 0 ? 5 : 2
|
||||
state.ctxBack.lineTo(0, -230)
|
||||
state.ctxBack.stroke()
|
||||
state.ctxBack.closePath()
|
||||
state.ctxBack.restore()
|
||||
}
|
||||
state.ctxBack.beginPath()
|
||||
state.ctxBack.arc(250, 250, 230, 0, 2 * Math.PI)
|
||||
state.ctxBack.stroke()
|
||||
}
|
||||
|
||||
const degToRad = degree => {
|
||||
let result
|
||||
let factor = Math.PI / 180
|
||||
if (degree === 0) {
|
||||
result = 270 * factor
|
||||
} else {
|
||||
result = degree * factor
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
const showTime = () => {
|
||||
let now = new Date()
|
||||
let today = now.toLocaleDateString()
|
||||
let time = now.toLocaleTimeString()
|
||||
let day = now.getDay()
|
||||
let hrs = now.getHours()
|
||||
let min = now.getMinutes()
|
||||
let sec = now.getSeconds()
|
||||
let mil = now.getMilliseconds()
|
||||
let smoothsec = sec + mil / 1000
|
||||
let smoothmin = min + smoothsec / 60
|
||||
let 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 = state.ctx.createRadialGradient(250, 250, 5, 250, 250, 300)
|
||||
gradient.addColorStop(0, '#03303a')
|
||||
gradient.addColorStop(1, 'black')
|
||||
state.ctx.fillStyle = gradient
|
||||
state.ctx.fillRect(0, 0, 500, 500)
|
||||
state.ctx.beginPath()
|
||||
state.ctx.strokeStyle = '#87CEFA'
|
||||
state.ctx.arc(250, 250, 215, degToRad(0), degToRad(hours * 30 - 90))
|
||||
state.ctx.stroke()
|
||||
state.ctx.beginPath()
|
||||
state.ctx.strokeStyle = '#20B2AA'
|
||||
state.ctx.arc(250, 250, 220, degToRad(0), degToRad(smoothmin * 6 - 90))
|
||||
state.ctx.stroke()
|
||||
state.ctx.beginPath()
|
||||
state.ctx.strokeStyle = '#AFEEEE'
|
||||
state.ctx.arc(250, 250, 225, degToRad(0), degToRad(smoothsec * 6 - 90))
|
||||
state.ctx.stroke()
|
||||
state.ctx.font = '25px Helvetica Bold'
|
||||
state.ctx.fillStyle = '#7FFFD4'
|
||||
state.ctx.fillText(today + '/星期' + date, 150, 230)
|
||||
state.ctx.font = '23px Helvetica Bold'
|
||||
state.ctx.fillStyle = '#7FFFD4'
|
||||
state.ctx.fillText(time, 190, 280)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
state.canvas = document.getElementById('complex_canvas' + element.value.id)
|
||||
initCtx()
|
||||
initCtxBack()
|
||||
initNumBack()
|
||||
currentTime()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div
|
||||
style="display: flex; align-items: center"
|
||||
:style="{ height: containerHeight, margin: timeMargin + 'px' }"
|
||||
>
|
||||
<p style="width: 100%; margin: auto">{{ nowDate }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, getCurrentInstance, onMounted, onUnmounted, reactive, toRefs } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
element: {
|
||||
type: Object
|
||||
}
|
||||
})
|
||||
|
||||
const { element } = toRefs(props)
|
||||
const state = reactive({
|
||||
nowDate: '', // 当前日期
|
||||
nowWeek: '',
|
||||
timer: null
|
||||
})
|
||||
const timeMargin = computed(() => {
|
||||
return element.value.style.time_margin
|
||||
})
|
||||
|
||||
const containerHeight = computed(() => {
|
||||
return 'calc(100% - ' + element.value.style.time_margin * 2 + 'px)'
|
||||
})
|
||||
|
||||
const currentTime = () => {
|
||||
state.timer = setInterval(formatDate, 500)
|
||||
}
|
||||
const formatDate = () => {
|
||||
const weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
||||
let timeFormat = element.value.formatInfo.timeFormat
|
||||
const showWeek = element.value.formatInfo.showWeek
|
||||
const showDate = element.value.formatInfo.showDate
|
||||
const dateFormat = element.value.formatInfo.dateFormat || 'yyyy-MM-dd'
|
||||
if (showDate && dateFormat) {
|
||||
timeFormat = dateFormat + ' ' + timeFormat
|
||||
}
|
||||
|
||||
const date = new Date()
|
||||
|
||||
state.nowDate = date.format(timeFormat)
|
||||
|
||||
if (showWeek) {
|
||||
state.nowWeek = weekArr[date.getDay()]
|
||||
state.nowDate = state.nowDate + ' ' + state.nowWeek
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
currentTime()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (state.timer) {
|
||||
clearInterval(state.timer) // 在Vue实例销毁前，清除时间定时器
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
Loading…
Reference in New Issue
Block a user