Commit 283633a80b3629b3db388b3cf5417193500208dc

Authored by fengwotao
1 parent dbf92756

perf(external/Composes): 调整大标题高度

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