Showing
19 changed files
with
104 additions
and
27 deletions
... | ... | @@ -13,7 +13,7 @@ export const option: PublicPresetOptions = { |
13 | 13 | [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, |
14 | 14 | [ComponentConfigFieldEnum.UNIT]: 'm', |
15 | 15 | [ComponentConfigFieldEnum.FONT_COLOR]: '#fff', |
16 | - [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, | |
16 | + [ComponentConfigFieldEnum.SHOW_TIME]: false, | |
17 | 17 | [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: { |
18 | 18 | [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#8badcb', |
19 | 19 | [ComponentConfigFieldEnum.WAVE_FIRST]: '#4579e2', | ... | ... |
... | ... | @@ -55,6 +55,12 @@ |
55 | 55 | component: 'Checkbox', |
56 | 56 | defaultValue: option.showDeviceName, |
57 | 57 | }, |
58 | + { | |
59 | + field: ComponentConfigFieldEnum.SHOW_TIME, | |
60 | + label: '显示时间', | |
61 | + component: 'Checkbox', | |
62 | + defaultValue: option.showDeviceName, | |
63 | + }, | |
58 | 64 | ], |
59 | 65 | showActionButtonGroup: false, |
60 | 66 | labelWidth: 120, | ... | ... |
... | ... | @@ -20,12 +20,13 @@ |
20 | 20 | const getDesign = computed(() => { |
21 | 21 | const { option, persetOption } = props.config; |
22 | 22 | const { componentInfo, attribute, attributeName, attributeRename } = option; |
23 | - const { flowmeterConfig, unit, fontColor } = componentInfo || {}; | |
23 | + const { flowmeterConfig, unit, fontColor, showTime } = componentInfo || {}; | |
24 | 24 | const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {}; |
25 | 25 | const { |
26 | 26 | flowmeterConfig: presetFlowmeterConfig, |
27 | 27 | unit: persetUnit, |
28 | 28 | fontColor: presetFontColor, |
29 | + showTime: persetShowTime, | |
29 | 30 | } = persetOption || {}; |
30 | 31 | const { |
31 | 32 | backgroundColor: presetBackgroundColor, |
... | ... | @@ -41,6 +42,7 @@ |
41 | 42 | unit: unit ?? persetUnit, |
42 | 43 | fontColor: fontColor ?? presetFontColor, |
43 | 44 | attribute: attributeRename || attributeName || attribute, |
45 | + showTime: showTime ?? persetShowTime, | |
44 | 46 | }; |
45 | 47 | }); |
46 | 48 | |
... | ... | @@ -76,7 +78,10 @@ |
76 | 78 | </script> |
77 | 79 | |
78 | 80 | <template> |
79 | - <main class="w-full h-full flex flex-col justify-center items-center relative"> | |
81 | + <main | |
82 | + class="w-full h-full flex flex-col justify-center items-center relative" | |
83 | + :class="!getDesign.showTime && 'p-5'" | |
84 | + > | |
80 | 85 | <DeviceName :config="config" /> |
81 | 86 | <svg |
82 | 87 | class="waves-rect" |
... | ... | @@ -121,7 +126,7 @@ |
121 | 126 | <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{ |
122 | 127 | getDesign.attribute || '属性' |
123 | 128 | }}</div> |
124 | - <UpdateTime :time="time" /> | |
129 | + <UpdateTime v-show="getDesign.showTime" :time="time" /> | |
125 | 130 | </main> |
126 | 131 | </template> |
127 | 132 | ... | ... |
... | ... | @@ -11,6 +11,7 @@ import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum'; |
11 | 11 | |
12 | 12 | export const option: PublicPresetOptions = { |
13 | 13 | [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, |
14 | + [ComponentConfigFieldEnum.SHOW_TIME]: false, | |
14 | 15 | [ComponentConfigFieldEnum.UNIT]: 'm', |
15 | 16 | [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: { |
16 | 17 | [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#8badcb', | ... | ... |
... | ... | @@ -55,6 +55,12 @@ |
55 | 55 | component: 'Checkbox', |
56 | 56 | defaultValue: option.showDeviceName, |
57 | 57 | }, |
58 | + { | |
59 | + field: ComponentConfigFieldEnum.SHOW_TIME, | |
60 | + label: '显示时间', | |
61 | + component: 'Checkbox', | |
62 | + defaultValue: option.showTime, | |
63 | + }, | |
58 | 64 | ], |
59 | 65 | showActionButtonGroup: false, |
60 | 66 | labelWidth: 120, | ... | ... |
... | ... | @@ -20,12 +20,13 @@ |
20 | 20 | const getDesign = computed(() => { |
21 | 21 | const { option, persetOption } = props.config; |
22 | 22 | const { componentInfo, attribute, attributeName, attributeRename } = option; |
23 | - const { flowmeterConfig, unit, fontColor } = componentInfo || {}; | |
23 | + const { flowmeterConfig, unit, fontColor, showTime } = componentInfo || {}; | |
24 | 24 | const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {}; |
25 | 25 | const { |
26 | 26 | flowmeterConfig: presetFlowmeterConfig, |
27 | 27 | unit: persetUnit, |
28 | 28 | fontColor: presetFontColor, |
29 | + showTime: persetShowTime, | |
29 | 30 | } = persetOption || {}; |
30 | 31 | const { |
31 | 32 | backgroundColor: presetBackgroundColor, |
... | ... | @@ -41,6 +42,7 @@ |
41 | 42 | unit: unit ?? persetUnit, |
42 | 43 | fontColor: fontColor ?? presetFontColor, |
43 | 44 | attribute: attributeRename || attributeName || attribute, |
45 | + showTime: showTime ?? persetShowTime, | |
44 | 46 | }; |
45 | 47 | }); |
46 | 48 | |
... | ... | @@ -66,7 +68,10 @@ |
66 | 68 | </script> |
67 | 69 | |
68 | 70 | <template> |
69 | - <main class="w-full h-full flex flex-col justify-center items-center relative"> | |
71 | + <main | |
72 | + class="w-full h-full flex flex-col justify-center items-center relative" | |
73 | + :class="!getDesign.showTime && 'p-5'" | |
74 | + > | |
70 | 75 | <DeviceName :config="config" /> |
71 | 76 | <svg |
72 | 77 | class="waves-rect" |
... | ... | @@ -114,7 +119,7 @@ |
114 | 119 | <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{ |
115 | 120 | getDesign.attribute || '属性' |
116 | 121 | }}</div> |
117 | - <UpdateTime :time="time" /> | |
122 | + <UpdateTime v-show="getDesign.showTime" :time="time" /> | |
118 | 123 | </main> |
119 | 124 | </template> |
120 | 125 | ... | ... |
... | ... | @@ -12,6 +12,7 @@ import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum'; |
12 | 12 | export const option: PublicPresetOptions = { |
13 | 13 | [ComponentConfigFieldEnum.FONT_COLOR]: '#', |
14 | 14 | [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, |
15 | + [ComponentConfigFieldEnum.SHOW_TIME]: false, | |
15 | 16 | }; |
16 | 17 | |
17 | 18 | export default class Config extends PublicConfigClass implements CreateComponentType { | ... | ... |
... | ... | @@ -37,12 +37,13 @@ |
37 | 37 | |
38 | 38 | const getDesign = computed(() => { |
39 | 39 | const { persetOption, option } = props.config; |
40 | - const { fontColor: presetFontColor } = persetOption || {}; | |
40 | + const { fontColor: presetFontColor, showTime: persetShowTime } = persetOption || {}; | |
41 | 41 | const { componentInfo, attribute, attributeName, attributeRename } = option || {}; |
42 | - const { fontColor } = componentInfo || {}; | |
42 | + const { fontColor, showTime } = componentInfo || {}; | |
43 | 43 | return { |
44 | 44 | fontColor: fontColor ?? presetFontColor, |
45 | 45 | attribute: attributeRename || attributeName || attribute, |
46 | + showTime: showTime ?? persetShowTime, | |
46 | 47 | }; |
47 | 48 | }); |
48 | 49 | |
... | ... | @@ -59,7 +60,10 @@ |
59 | 60 | </script> |
60 | 61 | |
61 | 62 | <template> |
62 | - <main class="w-full h-full flex flex-col justify-center items-center relative"> | |
63 | + <main | |
64 | + class="w-full h-full flex flex-col justify-center items-center relative" | |
65 | + :class="!getDesign.showTime && 'p-5'" | |
66 | + > | |
63 | 67 | <DeviceName :config="config" /> |
64 | 68 | <svg class="flowmeter-thermometer" viewBox="0 0 200 250" xmlns="http://www.w3.org/2000/svg"> |
65 | 69 | <defs> |
... | ... | @@ -256,7 +260,7 @@ |
256 | 260 | <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{ |
257 | 261 | getDesign.attribute || '属性' |
258 | 262 | }}</div> |
259 | - <UpdateTime :time="time" /> | |
263 | + <UpdateTime v-show="getDesign.showTime" :time="time" /> | |
260 | 264 | </main> |
261 | 265 | </template> |
262 | 266 | ... | ... |
... | ... | @@ -13,6 +13,7 @@ export const option: PublicPresetOptions = { |
13 | 13 | [ComponentConfigFieldEnum.FONT_COLOR]: '#000', |
14 | 14 | [ComponentConfigFieldEnum.UNIT]: 'kw/h', |
15 | 15 | [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, |
16 | + [ComponentConfigFieldEnum.SHOW_TIME]: false, | |
16 | 17 | }; |
17 | 18 | |
18 | 19 | export default class Config extends PublicConfigClass implements CreateComponentType { | ... | ... |
... | ... | @@ -28,6 +28,12 @@ |
28 | 28 | component: 'Checkbox', |
29 | 29 | defaultValue: option.showDeviceName, |
30 | 30 | }, |
31 | + { | |
32 | + field: ComponentConfigFieldEnum.SHOW_TIME, | |
33 | + label: '显示时间', | |
34 | + component: 'Checkbox', | |
35 | + defaultValue: option.showDeviceName, | |
36 | + }, | |
31 | 37 | ], |
32 | 38 | showActionButtonGroup: false, |
33 | 39 | labelWidth: 120, | ... | ... |
... | ... | @@ -48,12 +48,17 @@ |
48 | 48 | const getDesign = computed(() => { |
49 | 49 | const { option, persetOption } = props.config; |
50 | 50 | const { componentInfo, attribute, attributeRename, attributeName } = option; |
51 | - const { fontColor: presetFontColor, unit: presetUnit } = persetOption || {}; | |
52 | - const { unit, fontColor } = componentInfo || {}; | |
51 | + const { | |
52 | + fontColor: presetFontColor, | |
53 | + unit: presetUnit, | |
54 | + showTime: persetShowTime, | |
55 | + } = persetOption || {}; | |
56 | + const { unit, fontColor, showTime } = componentInfo || {}; | |
53 | 57 | return { |
54 | 58 | unit: unit ?? presetUnit, |
55 | 59 | fontColor: fontColor ?? presetFontColor, |
56 | 60 | attribute: attributeRename || attributeName || attribute, |
61 | + showTime: showTime ?? persetShowTime, | |
57 | 62 | }; |
58 | 63 | }); |
59 | 64 | |
... | ... | @@ -71,7 +76,10 @@ |
71 | 76 | </script> |
72 | 77 | |
73 | 78 | <template> |
74 | - <main class="w-full h-full flex flex-col justify-center items-center"> | |
79 | + <main | |
80 | + class="w-full h-full flex flex-col justify-center items-center" | |
81 | + :class="!getDesign.showTime && 'p-5'" | |
82 | + > | |
75 | 83 | <div class="flex flex-col w-full h-full"> |
76 | 84 | <DeviceName class="text-center" :config="config" /> |
77 | 85 | |
... | ... | @@ -134,7 +142,7 @@ |
134 | 142 | <span>{{ getDesign.attribute || '电表' }}</span> |
135 | 143 | </div> |
136 | 144 | |
137 | - <UpdateTime :time="time" /> | |
145 | + <UpdateTime v-show="getDesign.showTime" :time="time" /> | |
138 | 146 | </div> |
139 | 147 | </main> |
140 | 148 | </template> | ... | ... |
... | ... | @@ -12,6 +12,7 @@ import { ComponentConfigFieldEnum } from '../../../enum'; |
12 | 12 | export const option: PublicPresetOptions = { |
13 | 13 | [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347', |
14 | 14 | [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, |
15 | + [ComponentConfigFieldEnum.SHOW_TIME]: false, | |
15 | 16 | [ComponentConfigFieldEnum.UNIT]: '℃', |
16 | 17 | }; |
17 | 18 | ... | ... |
... | ... | @@ -25,6 +25,12 @@ |
25 | 25 | component: 'Checkbox', |
26 | 26 | defaultValue: option.showDeviceName, |
27 | 27 | }, |
28 | + { | |
29 | + field: ComponentConfigFieldEnum.SHOW_TIME, | |
30 | + label: '显示时间', | |
31 | + component: 'Checkbox', | |
32 | + defaultValue: option.showTime, | |
33 | + }, | |
28 | 34 | ], |
29 | 35 | showActionButtonGroup: false, |
30 | 36 | labelWidth: 120, | ... | ... |
... | ... | @@ -27,12 +27,17 @@ |
27 | 27 | const getDesign = computed(() => { |
28 | 28 | const { option, persetOption } = props.config; |
29 | 29 | const { componentInfo, attribute, attributeRename, attributeName } = option; |
30 | - const { fontColor: presetFontColor, unit: presetUnit } = persetOption || {}; | |
31 | - const { unit, fontColor } = componentInfo || {}; | |
30 | + const { | |
31 | + fontColor: presetFontColor, | |
32 | + unit: presetUnit, | |
33 | + showTime: persetShowTime, | |
34 | + } = persetOption || {}; | |
35 | + const { unit, fontColor, showTime } = componentInfo || {}; | |
32 | 36 | return { |
33 | 37 | unit: unit ?? presetUnit, |
34 | 38 | fontColor: fontColor ?? presetFontColor, |
35 | 39 | attribute: attributeRename || attributeName || attribute, |
40 | + showTime: persetShowTime || showTime, | |
36 | 41 | }; |
37 | 42 | }); |
38 | 43 | |
... | ... | @@ -222,12 +227,15 @@ |
222 | 227 | </script> |
223 | 228 | |
224 | 229 | <template> |
225 | - <main class="w-full h-full flex flex-col justify-center items-center"> | |
230 | + <main | |
231 | + class="w-full h-full flex flex-col justify-center items-center" | |
232 | + :class="!getDesign.showTime && 'p-5'" | |
233 | + > | |
226 | 234 | <DeviceName :config="config" /> |
227 | 235 | <div ref="chartRefEl" class="flex-1 w-full h-full"> </div> |
228 | 236 | <div class="text-gray-500 text-xs text-center truncate">{{ |
229 | 237 | getDesign.attribute || '温度' |
230 | 238 | }}</div> |
231 | - <UpdateTime :time="time" /> | |
239 | + <UpdateTime v-show="getDesign.showTime" :time="time" /> | |
232 | 240 | </main> |
233 | 241 | </template> | ... | ... |
... | ... | @@ -29,6 +29,7 @@ export const option: PublicPresetOptions = { |
29 | 29 | ], |
30 | 30 | [ComponentConfigFieldEnum.UNIT]: 'km/h', |
31 | 31 | [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, |
32 | + [ComponentConfigFieldEnum.SHOW_TIME]: false, | |
32 | 33 | }; |
33 | 34 | |
34 | 35 | export default class Config extends PublicConfigClass implements CreateComponentType { | ... | ... |
... | ... | @@ -81,6 +81,12 @@ |
81 | 81 | component: 'Checkbox', |
82 | 82 | defaultValue: option.showDeviceName, |
83 | 83 | }, |
84 | + { | |
85 | + field: ComponentConfigFieldEnum.SHOW_TIME, | |
86 | + label: '显示时间', | |
87 | + component: 'Checkbox', | |
88 | + defaultValue: option.showTime, | |
89 | + }, | |
84 | 90 | ], |
85 | 91 | showActionButtonGroup: false, |
86 | 92 | labelWidth: 120, |
... | ... | @@ -112,11 +118,12 @@ |
112 | 118 | fontColor: value[ComponentConfigFieldEnum.FONT_COLOR], |
113 | 119 | unit: value[ComponentConfigFieldEnum.UNIT], |
114 | 120 | showDeviceName: value[ComponentConfigFieldEnum.SHOW_DEVICE_NAME], |
121 | + showTime: value[ComponentConfigFieldEnum.SHOW_TIME], | |
115 | 122 | } as ComponentInfo; |
116 | 123 | }; |
117 | 124 | |
118 | 125 | const setFormValues = (data: ComponentInfo) => { |
119 | - const { gradientInfo, unit, fontColor, showDeviceName } = data; | |
126 | + const { gradientInfo, unit, fontColor, showDeviceName, showTime } = data; | |
120 | 127 | const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST); |
121 | 128 | const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND); |
122 | 129 | const thirdRecord = gradientInfo.find((item) => item.key === Gradient.THIRD); |
... | ... | @@ -124,6 +131,7 @@ |
124 | 131 | [ComponentConfigFieldEnum.UNIT]: unit, |
125 | 132 | [ComponentConfigFieldEnum.FONT_COLOR]: fontColor, |
126 | 133 | [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName, |
134 | + [ComponentConfigFieldEnum.SHOW_TIME]: showTime, | |
127 | 135 | [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: firstRecord?.value, |
128 | 136 | [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color, |
129 | 137 | [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: secondRecord?.value, | ... | ... |
... | ... | @@ -36,14 +36,16 @@ |
36 | 36 | fontColor: presetFontColor, |
37 | 37 | unit: presetUnit, |
38 | 38 | gradientInfo: presetGradientInfo, |
39 | + showTime: persetShowTime, | |
39 | 40 | } = persetOption || {}; |
40 | 41 | |
41 | - const { unit, fontColor, gradientInfo } = componentInfo || {}; | |
42 | + const { unit, fontColor, gradientInfo, showTime } = componentInfo || {}; | |
42 | 43 | return { |
43 | 44 | unit: unit ?? presetUnit, |
44 | 45 | fontColor: fontColor ?? presetFontColor, |
45 | 46 | gradientInfo: gradientInfo ?? presetGradientInfo, |
46 | 47 | attribute: attributeRename || attributeName || attribute, |
48 | + showTime: showTime || persetShowTime, | |
47 | 49 | }; |
48 | 50 | }); |
49 | 51 | |
... | ... | @@ -205,12 +207,15 @@ |
205 | 207 | </script> |
206 | 208 | |
207 | 209 | <template> |
208 | - <main class="w-full h-full flex flex-col justify-center items-center"> | |
210 | + <main | |
211 | + class="w-full h-full flex flex-col justify-center items-center" | |
212 | + :class="!getDesign.showTime && 'p-5'" | |
213 | + > | |
209 | 214 | <DeviceName :config="config" /> |
210 | 215 | <div ref="chartRefEl" class="flex-1 w-full h-full"> </div> |
211 | 216 | <div class="text-center text-gray-500 text-xs truncate"> |
212 | 217 | {{ getDesign.attribute || '速度' }} |
213 | 218 | </div> |
214 | - <UpdateTime :time="time" /> | |
219 | + <UpdateTime v-show="getDesign.showTime" :time="time" /> | |
215 | 220 | </main> |
216 | 221 | </template> | ... | ... |
1 | 1 | import { Ref, inject, provide } from 'vue'; |
2 | 2 | |
3 | -const SymbolKey = Symbol('alarm-info'); | |
3 | +const SymbolKey = Symbol('history-info'); | |
4 | 4 | interface IHistory { |
5 | 5 | [key: string]: string; |
6 | 6 | } |
7 | 7 | |
8 | -export interface AlarmContextType { | |
8 | +export interface HistoryContextType { | |
9 | 9 | historyForm: Ref<IHistory> | any; |
10 | 10 | getHistoryForm: (value: any) => void; |
11 | 11 | } |
12 | 12 | |
13 | -export const createHistoryContext = (options: AlarmContextType) => { | |
13 | +export const createHistoryContext = (options: HistoryContextType) => { | |
14 | 14 | provide(SymbolKey, options); |
15 | 15 | }; |
16 | 16 | |
17 | 17 | export const useHistoryContext = () => { |
18 | - return inject<AlarmContextType>(SymbolKey) || ({} as Partial<AlarmContextType>); | |
18 | + return inject<HistoryContextType>(SymbolKey) || ({} as Partial<HistoryContextType>); | |
19 | 19 | }; | ... | ... |