简柏林 / thingskit-front · Commits

Commit c63ac5d2eb38d4960e32484664f733681526f639

Authored by ww
1 parent fd12ae03

perf: extract code about how to render updatetime

Inline Side-by-side
Showing 5 changed files with 23 additions and 70 deletions
@@ -7,22 +7,21 @@ @@ -7,22 +7,21 @@
7 DashboardComponentLayout, 7 DashboardComponentLayout,
8 DashBoardValue, 8 DashBoardValue,
9 instrumentComponent1, 9 instrumentComponent1,
10 - InstrumentComponentType,  
11 update_instrument_1_font, 10 update_instrument_1_font,
12 update_instrument_2_font, 11 update_instrument_2_font,
13 update_instrument_1_value, 12 update_instrument_1_value,
14 update_instrument_2_value, 13 update_instrument_2_value,
15 } from './dashBoardComponent.config'; 14 } from './dashBoardComponent.config';
16 - import { dateUtil } from '/@/utils/dateUtil';  
17 import { 15 import {
18 DEFAULT_RADIO_RECORD, 16 DEFAULT_RADIO_RECORD,
19 RadioRecord, 17 RadioRecord,
20 - DEFAULT_DATE_FORMAT,  
21 fontSize, 18 fontSize,
  19 + getUpdateTime,
22 } from '../../detail/config/util'; 20 } from '../../detail/config/util';
23 import { Tooltip } from 'ant-design-vue'; 21 import { Tooltip } from 'ant-design-vue';
24 import { useThrottleFn } from '@vueuse/shared'; 22 import { useThrottleFn } from '@vueuse/shared';
25 import { buildUUID } from '/@/utils/uuid'; 23 import { buildUUID } from '/@/utils/uuid';
  24 + import { FrontComponent } from '../help';
26 25
27 const props = defineProps({ 26 const props = defineProps({
28 add: { 27 add: {
@@ -61,7 +60,6 @@ @@ -61,7 +60,6 @@
61 } 60 }
62 61
63 const getRadio = computed(() => { 62 const getRadio = computed(() => {
64 - // const { radio } = props.radio;  
65 return props.radio; 63 return props.radio;
66 }); 64 });
67 65
@@ -69,7 +67,6 @@ @@ -69,7 +67,6 @@
69 const realWidth = unref(chartRef)?.getWidth(); 67 const realWidth = unref(chartRef)?.getWidth();
70 const realHeight = unref(chartRef)?.getHeight(); 68 const realHeight = unref(chartRef)?.getHeight();
71 const radioRecord = props.radio; 69 const radioRecord = props.radio;
72 - // const widht  
73 return { 70 return {
74 ...radioRecord, 71 ...radioRecord,
75 height: realHeight || radioRecord.height, 72 height: realHeight || radioRecord.height,
@@ -77,7 +74,7 @@ @@ -77,7 +74,7 @@
77 }; 74 };
78 }); 75 });
79 76
80 - const beforeUpdateFn = (componentType: InstrumentComponentType) => { 77 + const beforeUpdateFn = (componentType: FrontComponent) => {
81 if (componentType === 'instrument-component-1') return update_instrument_1_font; 78 if (componentType === 'instrument-component-1') return update_instrument_1_font;
82 if (componentType === 'instrument-component-2') return update_instrument_2_font; 79 if (componentType === 'instrument-component-2') return update_instrument_2_font;
83 return (_radio: RadioRecord) => {}; 80 return (_radio: RadioRecord) => {};
@@ -89,7 +86,7 @@ @@ -89,7 +86,7 @@
89 unref(chartRef)?.resize(); 86 unref(chartRef)?.resize();
90 } 87 }
91 88
92 - const getUpdateValueFn = (componentType: InstrumentComponentType) => { 89 + const getUpdateValueFn = (componentType: FrontComponent) => {
93 if (componentType === 'instrument-component-1') return update_instrument_1_value; 90 if (componentType === 'instrument-component-1') return update_instrument_1_value;
94 if (componentType === 'instrument-component-2') return update_instrument_2_value; 91 if (componentType === 'instrument-component-2') return update_instrument_2_value;
95 return (_radio: DashBoardValue) => {}; 92 return (_radio: DashBoardValue) => {};
@@ -164,22 +161,11 @@ @@ -164,22 +161,11 @@
164 color: '#999', 161 color: '#999',
165 }" 162 }"
166 > 163 >
167 - <Tooltip  
168 - placement="top"  
169 - :title="  
170 - props.value?.updateTime  
171 - ? dateUtil(props?.value?.updateTime).format(DEFAULT_DATE_FORMAT)  
172 - : '暂无更新时间'  
173 - "  
174 - > 164 + <Tooltip placement="top" :title="getUpdateTime(props.value?.updateTime)">
175 <div class="truncate"> 165 <div class="truncate">
176 <span class="mr-2">更新时间:</span> 166 <span class="mr-2">更新时间:</span>
177 <span> 167 <span>
178 - {{  
179 - props.value?.updateTime  
180 - ? dateUtil(props?.value?.updateTime).format(DEFAULT_DATE_FORMAT)  
181 - : '暂无更新时间'  
182 - }} 168 + {{ getUpdateTime(props.value?.updateTime) }}
183 </span> 169 </span>
184 </div> 170 </div>
185 </Tooltip> 171 </Tooltip>
@@ -6,11 +6,10 @@ @@ -6,11 +6,10 @@
6 DigitalDashBoardLayout, 6 DigitalDashBoardLayout,
7 DigitalDashBoardValue, 7 DigitalDashBoardValue,
8 } from './digitalDashBoard.config'; 8 } from './digitalDashBoard.config';
9 - import { dateUtil } from '/@/utils/dateUtil';  
10 import { 9 import {
11 fontSize, 10 fontSize,
12 RadioRecord, 11 RadioRecord,
13 - DEFAULT_DATE_FORMAT, 12 + getUpdateTime,
14 DEFAULT_RADIO_RECORD, 13 DEFAULT_RADIO_RECORD,
15 DEFAULT_ANIMATION_INTERVAL, 14 DEFAULT_ANIMATION_INTERVAL,
16 } from '../../detail/config/util'; 15 } from '../../detail/config/util';
@@ -59,8 +58,6 @@ @@ -59,8 +58,6 @@
59 }); 58 });
60 59
61 const getRadio = computed(() => { 60 const getRadio = computed(() => {
62 - // const { radio } = props.radio || DEFAULT_RADIO_RECORD;  
63 - // return radio;  
64 return props.radio || DEFAULT_RADIO_RECORD; 61 return props.radio || DEFAULT_RADIO_RECORD;
65 }); 62 });
66 63
@@ -166,22 +163,11 @@ @@ -166,22 +163,11 @@
166 color: '#999', 163 color: '#999',
167 }" 164 }"
168 > 165 >
169 - <Tooltip  
170 - placement="top"  
171 - :title="  
172 - props.value?.updateTime  
173 - ? dateUtil(props?.value?.updateTime).format(DEFAULT_DATE_FORMAT)  
174 - : '暂无更新时间'  
175 - "  
176 - > 166 + <Tooltip placement="top" :title="getUpdateTime(props.value?.updateTime)">
177 <div class="truncate"> 167 <div class="truncate">
178 <span class="mr-1">更新时间:</span> 168 <span class="mr-1">更新时间:</span>
179 <span> 169 <span>
180 - {{  
181 - props.value?.updateTime  
182 - ? dateUtil(props?.value?.updateTime).format(DEFAULT_DATE_FORMAT)  
183 - : '暂无更新时间'  
184 - }} 170 + {{ getUpdateTime(props.value?.updateTime) }}
185 </span> 171 </span>
186 </div> 172 </div>
187 </Tooltip> 173 </Tooltip>
@@ -2,16 +2,15 @@ @@ -2,16 +2,15 @@
2 import { computed, ref, watch } from 'vue'; 2 import { computed, ref, watch } from 'vue';
3 import { Tooltip, Image as AntImage } from 'ant-design-vue'; 3 import { Tooltip, Image as AntImage } from 'ant-design-vue';
4 import { 4 import {
5 - DEFAULT_DATE_FORMAT, 5 + getUpdateTime,
6 DEFAULT_RADIO_RECORD, 6 DEFAULT_RADIO_RECORD,
7 fontSize, 7 fontSize,
8 RadioRecord, 8 RadioRecord,
9 } from '../../detail/config/util'; 9 } from '../../detail/config/util';
10 - import { PictureComponentLayout, PictureComponentValue } from './pictureComponent.config';  
11 - import { dateUtil } from '/@/utils/dateUtil'; 10 + import { PictureComponentValue } from './pictureComponent.config';
12 11
13 const props = defineProps<{ 12 const props = defineProps<{
14 - layout?: PictureComponentLayout; 13 + layout?: Recordable;
15 value?: PictureComponentValue; 14 value?: PictureComponentValue;
16 radio?: RadioRecord; 15 radio?: RadioRecord;
17 }>(); 16 }>();
@@ -69,21 +68,10 @@ @@ -69,21 +68,10 @@
69 class="w-full text-center truncate p-5" 68 class="w-full text-center truncate p-5"
70 :style="{ fontSize: fontSize({ radioRecord: getRadio, basic: 12, max: 12 }), color: '#999' }" 69 :style="{ fontSize: fontSize({ radioRecord: getRadio, basic: 12, max: 12 }), color: '#999' }"
71 > 70 >
72 - <Tooltip  
73 - placement="top"  
74 - :title="  
75 - props.value?.updateTime  
76 - ? dateUtil(props?.value?.updateTime).format(DEFAULT_DATE_FORMAT)  
77 - : '暂无更新时间'  
78 - "  
79 - > 71 + <Tooltip placement="top" :title="getUpdateTime(props.value?.updateTime)">
80 <span class="mr-1">更新时间:</span> 72 <span class="mr-1">更新时间:</span>
81 <span class="truncate"> 73 <span class="truncate">
82 - {{  
83 - props.value?.updateTime  
84 - ? dateUtil(props?.value?.updateTime).format(DEFAULT_DATE_FORMAT)  
85 - : '暂无更新时间'  
86 - }} 74 + {{ getUpdateTime(props.value?.updateTime) }}
87 </span> 75 </span>
88 </Tooltip> 76 </Tooltip>
89 </div> 77 </div>
@@ -2,14 +2,13 @@ @@ -2,14 +2,13 @@
2 import { computed } from 'vue'; 2 import { computed } from 'vue';
3 import { Statistic, Tooltip } from 'ant-design-vue'; 3 import { Statistic, Tooltip } from 'ant-design-vue';
4 import { 4 import {
  5 + getUpdateTime,
5 fontSize, 6 fontSize,
6 RadioRecord, 7 RadioRecord,
7 DEFAULT_RADIO_RECORD, 8 DEFAULT_RADIO_RECORD,
8 - DEFAULT_DATE_FORMAT,  
9 } from '../../detail/config/util'; 9 } from '../../detail/config/util';
10 import { TextComponentDefaultConfig, TextComponentLayout, TextComponentValue } from './config'; 10 import { TextComponentDefaultConfig, TextComponentLayout, TextComponentValue } from './config';
11 import { SvgIcon } from '/@/components/Icon'; 11 import { SvgIcon } from '/@/components/Icon';
12 - import { dateUtil } from '/@/utils/dateUtil';  
13 const props = defineProps({ 12 const props = defineProps({
14 layout: { 13 layout: {
15 type: Object as PropType<TextComponentLayout>, 14 type: Object as PropType<TextComponentLayout>,
@@ -89,26 +88,14 @@ @@ -89,26 +88,14 @@
89 </div> 88 </div>
90 89
91 <div class="text-center text-xs truncate p-5" style="color: #999"> 90 <div class="text-center text-xs truncate p-5" style="color: #999">
92 - <Tooltip  
93 - v-if="getShowUpdate"  
94 - placement="top"  
95 - :title="  
96 - props.value?.updateTime  
97 - ? dateUtil(props?.value?.updateTime).format(DEFAULT_DATE_FORMAT)  
98 - : '暂无更新时间'  
99 - "  
100 - > 91 + <Tooltip v-if="getShowUpdate" placement="top" :title="getUpdateTime(props.value?.updateTime)">
101 <div 92 <div
102 :style="{ fontSize: fontSize({ radioRecord: getRadio, basic: 12, max: 12 }) }" 93 :style="{ fontSize: fontSize({ radioRecord: getRadio, basic: 12, max: 12 }) }"
103 class="truncate" 94 class="truncate"
104 > 95 >
105 <span class="mr-1">更新时间:</span> 96 <span class="mr-1">更新时间:</span>
106 <span class="truncate"> 97 <span class="truncate">
107 - {{  
108 - props.value?.updateTime  
109 - ? dateUtil(props?.value?.updateTime).format(DEFAULT_DATE_FORMAT)  
110 - : '暂无更新时间'  
111 - }} 98 + {{ getUpdateTime(props.value?.updateTime) }}
112 </span> 99 </span>
113 </div> 100 </div>
114 </Tooltip> 101 </Tooltip>
  1 +import { dateUtil } from '/@/utils/dateUtil';
  2 +
1 export interface RadioRecord { 3 export interface RadioRecord {
2 width: number; 4 width: number;
3 height: number; 5 height: number;
@@ -16,6 +18,10 @@ export const DEFAULT_RADIO_RECORD: RadioRecord = { @@ -16,6 +18,10 @@ export const DEFAULT_RADIO_RECORD: RadioRecord = {
16 18
17 export const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss'; 19 export const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss';
18 20
  21 +export const getUpdateTime = (updateTime?: string) => {
  22 + return updateTime ? dateUtil(updateTime).format(DEFAULT_DATE_FORMAT) : '暂无更新时间';
  23 +};
  24 +
19 export const calcScale = ( 25 export const calcScale = (
20 width: number, 26 width: number,
21 height: number, 27 height: number,