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 | } | ... | ... |