Commit b8c05bc2a5e4a121123d570d32ff264a8a62d065

Authored by loveumiko
1 parent 230c7e9a

fix: 看板组件添加是否显示时间字段选择

... ... @@ -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 {
... ...
... ... @@ -19,6 +19,11 @@
19 19 label: '显示设备名称',
20 20 component: 'Checkbox',
21 21 },
  22 + {
  23 + field: ComponentConfigFieldEnum.SHOW_TIME,
  24 + label: '显示时间',
  25 + component: 'Checkbox',
  26 + },
22 27 ],
23 28 showActionButtonGroup: false,
24 29 labelWidth: 120,
... ...
... ... @@ -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 };
... ...