Showing
1 changed file
with
59 additions
and
42 deletions
| 1 | 1 | <template> |
| 2 | 2 | <div class="go-text-box"> |
| 3 | - <n-grid :style="{'background-image': 'url('+option.configOption.bgSrc+')'}" class="go-n-grid" :x-gap="12" :y-gap="3" | |
| 4 | - :cols="3" layout-shift-disabled> | |
| 3 | + <n-grid | |
| 4 | + :style="{ 'background-image': 'url(' + option.configOption.bgSrc + ')', height: h + 'px' }" | |
| 5 | + class="go-n-grid" | |
| 6 | + :x-gap="12" | |
| 7 | + :y-gap="3" | |
| 8 | + :cols="3" | |
| 9 | + layout-shift-disabled | |
| 10 | + > | |
| 5 | 11 | <n-grid-item> |
| 6 | 12 | <!-- 占位--> |
| 7 | 13 | <div></div> |
| 8 | 14 | </n-grid-item> |
| 9 | 15 | <n-grid-item> |
| 10 | 16 | <span |
| 11 | - style="position:relative" | |
| 12 | - :style="{ top:option.configOption.y+'px',marginLeft:option.configOption.x+'px',color: option.configOption.textColor, fontSize: option.configOption.fontSize + 'px' }">{{ | |
| 13 | - option.configOption.dataset | |
| 14 | - }}</span> | |
| 17 | + style="position: relative" | |
| 18 | + :style="{ | |
| 19 | + top: option.configOption.y + 'px', | |
| 20 | + marginLeft: option.configOption.x + 'px', | |
| 21 | + color: option.configOption.textColor, | |
| 22 | + fontSize: option.configOption.fontSize + 'px' | |
| 23 | + }" | |
| 24 | + >{{ option.configOption.dataset }}</span | |
| 25 | + > | |
| 15 | 26 | </n-grid-item> |
| 16 | 27 | <n-grid-item> |
| 17 | - <span style="position:relative" v-if="option.configOption.showRight" | |
| 18 | - :style="{ top:option.configOption.yT+'px',marginLeft:option.configOption.xT+'px',color: option.configOption.textRightSizeColor, fontSize: option.configOption.textRightFontSize + 'px' }">{{ | |
| 19 | - newData | |
| 20 | - }}</span> | |
| 28 | + <span | |
| 29 | + style="position: relative" | |
| 30 | + v-if="option.configOption.showRight" | |
| 31 | + :style="{ | |
| 32 | + top: option.configOption.yT + 'px', | |
| 33 | + marginLeft: option.configOption.xT + 'px', | |
| 34 | + color: option.configOption.textRightSizeColor, | |
| 35 | + fontSize: option.configOption.textRightFontSize + 'px' | |
| 36 | + }" | |
| 37 | + >{{ newData }}</span | |
| 38 | + > | |
| 21 | 39 | </n-grid-item> |
| 22 | 40 | </n-grid> |
| 23 | 41 | </div> |
| 24 | 42 | </template> |
| 25 | 43 | <script setup lang="ts"> |
| 26 | -import {PropType, toRefs, shallowReactive, watch, onMounted, onUnmounted, ref} from 'vue' | |
| 27 | -import {CreateComponentType} from '@/packages/index.d' | |
| 28 | -import {useChartDataFetch} from '@/hooks' | |
| 29 | -import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore' | |
| 30 | -import {option as configOption} from './config' | |
| 44 | +import { PropType, toRefs, shallowReactive, watch, onMounted, onUnmounted, ref } from 'vue' | |
| 45 | +import { CreateComponentType } from '@/packages/index.d' | |
| 46 | +import { useChartDataFetch } from '@/hooks' | |
| 47 | +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' | |
| 48 | +import { option as configOption } from './config' | |
| 31 | 49 | |
| 32 | 50 | const props = defineProps({ |
| 33 | 51 | chartConfig: { |
| ... | ... | @@ -47,42 +65,40 @@ let nowData = ref('08:00:00') |
| 47 | 65 | let newData = ref('2021-2-3 08:00:00') |
| 48 | 66 | |
| 49 | 67 | let timer: any = null |
| 68 | +const { w, h } = toRefs(props.chartConfig.attr) | |
| 50 | 69 | |
| 51 | 70 | //修改默认宽高 |
| 52 | -props.chartConfig.attr.w=1920 | |
| 53 | -props.chartConfig.attr.h=180 | |
| 54 | - | |
| 71 | +props.chartConfig.attr.w = 1920 | |
| 72 | +props.chartConfig.attr.h = 100 | |
| 55 | 73 | |
| 56 | 74 | watch( |
| 57 | - () => props.chartConfig.option, | |
| 58 | - (newData: any) => { | |
| 59 | - option.configOption = newData | |
| 60 | - }, | |
| 61 | - { | |
| 62 | - immediate: true, | |
| 63 | - deep: false | |
| 64 | - } | |
| 75 | + () => props.chartConfig.option, | |
| 76 | + (newData: any) => { | |
| 77 | + option.configOption = newData | |
| 78 | + }, | |
| 79 | + { | |
| 80 | + immediate: true, | |
| 81 | + deep: false | |
| 82 | + } | |
| 65 | 83 | ) |
| 66 | 84 | |
| 67 | 85 | useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => { |
| 68 | 86 | option.configOption = newData |
| 69 | 87 | }) |
| 70 | 88 | |
| 71 | - | |
| 72 | 89 | //TODO待封装 这里和原作者时间通用获取当前时间代码一样 |
| 73 | 90 | onMounted(() => { |
| 74 | -//格式化当前时间 | |
| 91 | + //格式化当前时间 | |
| 75 | 92 | timer = setInterval(() => { |
| 76 | - const | |
| 77 | - weeks = { | |
| 78 | - "0": '星期日', | |
| 79 | - "1": '星期一', | |
| 80 | - "2": '星期二', | |
| 81 | - "3": '星期三', | |
| 82 | - "4": '星期四', | |
| 83 | - "5": '星期五', | |
| 84 | - "6": '星期六', | |
| 85 | - } as any | |
| 93 | + const weeks = { | |
| 94 | + '0': '星期日', | |
| 95 | + '1': '星期一', | |
| 96 | + '2': '星期二', | |
| 97 | + '3': '星期三', | |
| 98 | + '4': '星期四', | |
| 99 | + '5': '星期五', | |
| 100 | + '6': '星期六' | |
| 101 | + } as any | |
| 86 | 102 | const datetime = new Date() |
| 87 | 103 | const year = datetime.getFullYear() |
| 88 | 104 | const month = datetime.getMonth() + 1 < 10 ? '0' + (datetime.getMonth() + 1) : datetime.getMonth() + 1 |
| ... | ... | @@ -90,7 +106,7 @@ onMounted(() => { |
| 90 | 106 | const hh = datetime.getHours() // 时 |
| 91 | 107 | const mm = datetime.getMinutes() // 分 |
| 92 | 108 | const ss = datetime.getSeconds() // 分 |
| 93 | - let weekIndex = datetime.getDay(); | |
| 109 | + let weekIndex = datetime.getDay() | |
| 94 | 110 | let time = '' |
| 95 | 111 | if (hh < 10) time += '0' |
| 96 | 112 | time += hh + ':' |
| ... | ... | @@ -106,14 +122,15 @@ onMounted(() => { |
| 106 | 122 | onUnmounted(() => { |
| 107 | 123 | clearInterval(timer) |
| 108 | 124 | }) |
| 109 | - | |
| 110 | 125 | </script> |
| 111 | 126 | |
| 112 | 127 | <style lang="scss" scoped> |
| 113 | 128 | @include go('text-box') { |
| 129 | + width: v-bind('w+"px"'); | |
| 130 | + height: v-bind('h+"px"'); | |
| 114 | 131 | display: flex; |
| 115 | - align-items: center; | |
| 116 | - justify-content: center; | |
| 132 | + align-items: start; | |
| 133 | + justify-content: start; | |
| 117 | 134 | .n-gradient-text { |
| 118 | 135 | white-space: initial; |
| 119 | 136 | } | ... | ... |