简柏林 / thingskit-front · Commits

Commit 48104d8d5214184da3fe603f33157f3963453da1

Authored by xp.Huang
2 parents 9c3bc804 b8c05bc2

Merge branch 'fix/board-displayTime-problem' into 'main_dev' 

修改看板组件告警实时数据问题和添加是否展示时间字段

See merge request yunteng/thingskit-front!741
Inline Side-by-side
Showing 29 changed files with 252 additions and 55 deletions
@@ -213,7 +213,6 @@ @@ -213,7 +213,6 @@
213 </Tooltip> 213 </Tooltip>
214 <Tooltip title="删除"> 214 <Tooltip title="删除">
215 <DeleteOutlined 215 <DeleteOutlined
216 - v-show="dataSource.length > 1"  
217 @click="handleDelete(item)" 216 @click="handleDelete(item)"
218 class="cursor-pointer text-lg !leading-32px" 217 class="cursor-pointer text-lg !leading-32px"
219 /> 218 />
@@ -96,6 +96,7 @@ @@ -96,6 +96,7 @@
96 ); 96 );
97 97
98 const transformMessage = (cmdId: number) => { 98 const transformMessage = (cmdId: number) => {
  99 + if (props.config.option.mode == 'SELECT_PREVIEW') return;
99 currentCmdId.value = cmdId; 100 currentCmdId.value = cmdId;
100 send?.(JSON.stringify(getMessage(cmdId, unref(getDesign), unref(alarmForm)))); 101 send?.(JSON.stringify(getMessage(cmdId, unref(getDesign), unref(alarmForm))));
101 }; 102 };
@@ -139,8 +139,8 @@ @@ -139,8 +139,8 @@
139 ); 139 );
140 140
141 const transformMessage = (cmdId: number) => { 141 const transformMessage = (cmdId: number) => {
  142 + if (props.config.option.mode == 'SELECT_PREVIEW') return;
142 currentCmdId.value = cmdId; 143 currentCmdId.value = cmdId;
143 -  
144 send?.(JSON.stringify(getMessage(cmdId, unref(getDesign), unref(alarmForm)))); 144 send?.(JSON.stringify(getMessage(cmdId, unref(getDesign), unref(alarmForm))));
145 }; 145 };
146 146
@@ -13,7 +13,7 @@ export const option: PublicPresetOptions = { @@ -13,7 +13,7 @@ export const option: PublicPresetOptions = {
13 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 13 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
14 [ComponentConfigFieldEnum.UNIT]: 'm', 14 [ComponentConfigFieldEnum.UNIT]: 'm',
15 [ComponentConfigFieldEnum.FONT_COLOR]: '#fff', 15 [ComponentConfigFieldEnum.FONT_COLOR]: '#fff',
16 - [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 16 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
17 [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: { 17 [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: {
18 [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#8badcb', 18 [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#8badcb',
19 [ComponentConfigFieldEnum.WAVE_FIRST]: '#4579e2', 19 [ComponentConfigFieldEnum.WAVE_FIRST]: '#4579e2',
@@ -55,6 +55,12 @@ @@ -55,6 +55,12 @@
55 component: 'Checkbox', 55 component: 'Checkbox',
56 defaultValue: option.showDeviceName, 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 showActionButtonGroup: false, 65 showActionButtonGroup: false,
60 labelWidth: 120, 66 labelWidth: 120,
@@ -20,12 +20,13 @@ @@ -20,12 +20,13 @@
20 const getDesign = computed(() => { 20 const getDesign = computed(() => {
21 const { option, persetOption } = props.config; 21 const { option, persetOption } = props.config;
22 const { componentInfo, attribute, attributeName, attributeRename } = option; 22 const { componentInfo, attribute, attributeName, attributeRename } = option;
23 - const { flowmeterConfig, unit, fontColor } = componentInfo || {}; 23 + const { flowmeterConfig, unit, fontColor, showTime } = componentInfo || {};
24 const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {}; 24 const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {};
25 const { 25 const {
26 flowmeterConfig: presetFlowmeterConfig, 26 flowmeterConfig: presetFlowmeterConfig,
27 unit: persetUnit, 27 unit: persetUnit,
28 fontColor: presetFontColor, 28 fontColor: presetFontColor,
  29 + showTime: persetShowTime,
29 } = persetOption || {}; 30 } = persetOption || {};
30 const { 31 const {
31 backgroundColor: presetBackgroundColor, 32 backgroundColor: presetBackgroundColor,
@@ -41,6 +42,7 @@ @@ -41,6 +42,7 @@
41 unit: unit ?? persetUnit, 42 unit: unit ?? persetUnit,
42 fontColor: fontColor ?? presetFontColor, 43 fontColor: fontColor ?? presetFontColor,
43 attribute: attributeRename || attributeName || attribute, 44 attribute: attributeRename || attributeName || attribute,
  45 + showTime: showTime ?? persetShowTime,
44 }; 46 };
45 }); 47 });
46 48
@@ -76,7 +78,10 @@ @@ -76,7 +78,10 @@
76 </script> 78 </script>
77 79
78 <template> 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 <DeviceName :config="config" /> 85 <DeviceName :config="config" />
81 <svg 86 <svg
82 class="waves-rect" 87 class="waves-rect"
@@ -121,7 +126,7 @@ @@ -121,7 +126,7 @@
121 <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{ 126 <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{
122 getDesign.attribute || '属性' 127 getDesign.attribute || '属性'
123 }}</div> 128 }}</div>
124 - <UpdateTime :time="time" /> 129 + <UpdateTime v-show="getDesign.showTime" :time="time" />
125 </main> 130 </main>
126 </template> 131 </template>
127 132
@@ -11,6 +11,7 @@ import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum'; @@ -11,6 +11,7 @@ import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
11 11
12 export const option: PublicPresetOptions = { 12 export const option: PublicPresetOptions = {
13 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 13 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  14 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
14 [ComponentConfigFieldEnum.UNIT]: 'm', 15 [ComponentConfigFieldEnum.UNIT]: 'm',
15 [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: { 16 [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: {
16 [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#8badcb', 17 [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#8badcb',
@@ -55,6 +55,12 @@ @@ -55,6 +55,12 @@
55 component: 'Checkbox', 55 component: 'Checkbox',
56 defaultValue: option.showDeviceName, 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 showActionButtonGroup: false, 65 showActionButtonGroup: false,
60 labelWidth: 120, 66 labelWidth: 120,
@@ -20,12 +20,13 @@ @@ -20,12 +20,13 @@
20 const getDesign = computed(() => { 20 const getDesign = computed(() => {
21 const { option, persetOption } = props.config; 21 const { option, persetOption } = props.config;
22 const { componentInfo, attribute, attributeName, attributeRename } = option; 22 const { componentInfo, attribute, attributeName, attributeRename } = option;
23 - const { flowmeterConfig, unit, fontColor } = componentInfo || {}; 23 + const { flowmeterConfig, unit, fontColor, showTime } = componentInfo || {};
24 const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {}; 24 const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {};
25 const { 25 const {
26 flowmeterConfig: presetFlowmeterConfig, 26 flowmeterConfig: presetFlowmeterConfig,
27 unit: persetUnit, 27 unit: persetUnit,
28 fontColor: presetFontColor, 28 fontColor: presetFontColor,
  29 + showTime: persetShowTime,
29 } = persetOption || {}; 30 } = persetOption || {};
30 const { 31 const {
31 backgroundColor: presetBackgroundColor, 32 backgroundColor: presetBackgroundColor,
@@ -41,6 +42,7 @@ @@ -41,6 +42,7 @@
41 unit: unit ?? persetUnit, 42 unit: unit ?? persetUnit,
42 fontColor: fontColor ?? presetFontColor, 43 fontColor: fontColor ?? presetFontColor,
43 attribute: attributeRename || attributeName || attribute, 44 attribute: attributeRename || attributeName || attribute,
  45 + showTime: showTime ?? persetShowTime,
44 }; 46 };
45 }); 47 });
46 48
@@ -66,7 +68,10 @@ @@ -66,7 +68,10 @@
66 </script> 68 </script>
67 69
68 <template> 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 <DeviceName :config="config" /> 75 <DeviceName :config="config" />
71 <svg 76 <svg
72 class="waves-rect" 77 class="waves-rect"
@@ -114,7 +119,7 @@ @@ -114,7 +119,7 @@
114 <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{ 119 <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{
115 getDesign.attribute || '属性' 120 getDesign.attribute || '属性'
116 }}</div> 121 }}</div>
117 - <UpdateTime :time="time" /> 122 + <UpdateTime v-show="getDesign.showTime" :time="time" />
118 </main> 123 </main>
119 </template> 124 </template>
120 125
@@ -12,6 +12,7 @@ import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum'; @@ -12,6 +12,7 @@ import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
12 export const option: PublicPresetOptions = { 12 export const option: PublicPresetOptions = {
13 [ComponentConfigFieldEnum.FONT_COLOR]: '#', 13 [ComponentConfigFieldEnum.FONT_COLOR]: '#',
14 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 14 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  15 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
15 }; 16 };
16 17
17 export default class Config extends PublicConfigClass implements CreateComponentType { 18 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -19,6 +19,11 @@ @@ -19,6 +19,11 @@
19 label: '显示设备名称', 19 label: '显示设备名称',
20 component: 'Checkbox', 20 component: 'Checkbox',
21 }, 21 },
  22 + {
  23 + field: ComponentConfigFieldEnum.SHOW_TIME,
  24 + label: '显示时间',
  25 + component: 'Checkbox',
  26 + },
22 ], 27 ],
23 showActionButtonGroup: false, 28 showActionButtonGroup: false,
24 labelWidth: 120, 29 labelWidth: 120,
@@ -37,12 +37,13 @@ @@ -37,12 +37,13 @@
37 37
38 const getDesign = computed(() => { 38 const getDesign = computed(() => {
39 const { persetOption, option } = props.config; 39 const { persetOption, option } = props.config;
40 - const { fontColor: presetFontColor } = persetOption || {}; 40 + const { fontColor: presetFontColor, showTime: persetShowTime } = persetOption || {};
41 const { componentInfo, attribute, attributeName, attributeRename } = option || {}; 41 const { componentInfo, attribute, attributeName, attributeRename } = option || {};
42 - const { fontColor } = componentInfo || {}; 42 + const { fontColor, showTime } = componentInfo || {};
43 return { 43 return {
44 fontColor: fontColor ?? presetFontColor, 44 fontColor: fontColor ?? presetFontColor,
45 attribute: attributeRename || attributeName || attribute, 45 attribute: attributeRename || attributeName || attribute,
  46 + showTime: showTime ?? persetShowTime,
46 }; 47 };
47 }); 48 });
48 49
@@ -59,7 +60,10 @@ @@ -59,7 +60,10 @@
59 </script> 60 </script>
60 61
61 <template> 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 <DeviceName :config="config" /> 67 <DeviceName :config="config" />
64 <svg class="flowmeter-thermometer" viewBox="0 0 200 250" xmlns="http://www.w3.org/2000/svg"> 68 <svg class="flowmeter-thermometer" viewBox="0 0 200 250" xmlns="http://www.w3.org/2000/svg">
65 <defs> 69 <defs>
@@ -256,7 +260,7 @@ @@ -256,7 +260,7 @@
256 <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{ 260 <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{
257 getDesign.attribute || '属性' 261 getDesign.attribute || '属性'
258 }}</div> 262 }}</div>
259 - <UpdateTime :time="time" /> 263 + <UpdateTime v-show="getDesign.showTime" :time="time" />
260 </main> 264 </main>
261 </template> 265 </template>
262 266
@@ -13,6 +13,7 @@ export const option: PublicPresetOptions = { @@ -13,6 +13,7 @@ export const option: PublicPresetOptions = {
13 [ComponentConfigFieldEnum.FONT_COLOR]: '#000', 13 [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
14 [ComponentConfigFieldEnum.UNIT]: 'kw/h', 14 [ComponentConfigFieldEnum.UNIT]: 'kw/h',
15 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 15 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  16 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
16 }; 17 };
17 18
18 export default class Config extends PublicConfigClass implements CreateComponentType { 19 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -28,6 +28,12 @@ @@ -28,6 +28,12 @@
28 component: 'Checkbox', 28 component: 'Checkbox',
29 defaultValue: option.showDeviceName, 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 showActionButtonGroup: false, 38 showActionButtonGroup: false,
33 labelWidth: 120, 39 labelWidth: 120,
@@ -48,12 +48,17 @@ @@ -48,12 +48,17 @@
48 const getDesign = computed(() => { 48 const getDesign = computed(() => {
49 const { option, persetOption } = props.config; 49 const { option, persetOption } = props.config;
50 const { componentInfo, attribute, attributeRename, attributeName } = option; 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 return { 57 return {
54 unit: unit ?? presetUnit, 58 unit: unit ?? presetUnit,
55 fontColor: fontColor ?? presetFontColor, 59 fontColor: fontColor ?? presetFontColor,
56 attribute: attributeRename || attributeName || attribute, 60 attribute: attributeRename || attributeName || attribute,
  61 + showTime: showTime ?? persetShowTime,
57 }; 62 };
58 }); 63 });
59 64
@@ -71,7 +76,10 @@ @@ -71,7 +76,10 @@
71 </script> 76 </script>
72 77
73 <template> 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 <div class="flex flex-col w-full h-full"> 83 <div class="flex flex-col w-full h-full">
76 <DeviceName class="text-center" :config="config" /> 84 <DeviceName class="text-center" :config="config" />
77 85
@@ -134,7 +142,7 @@ @@ -134,7 +142,7 @@
134 <span>{{ getDesign.attribute || '电表' }}</span> 142 <span>{{ getDesign.attribute || '电表' }}</span>
135 </div> 143 </div>
136 144
137 - <UpdateTime :time="time" /> 145 + <UpdateTime v-show="getDesign.showTime" :time="time" />
138 </div> 146 </div>
139 </main> 147 </main>
140 </template> 148 </template>
@@ -12,6 +12,7 @@ import { ComponentConfigFieldEnum } from '../../../enum'; @@ -12,6 +12,7 @@ import { ComponentConfigFieldEnum } from '../../../enum';
12 export const option: PublicPresetOptions = { 12 export const option: PublicPresetOptions = {
13 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347', 13 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
14 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 14 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  15 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
15 [ComponentConfigFieldEnum.UNIT]: '℃', 16 [ComponentConfigFieldEnum.UNIT]: '℃',
16 }; 17 };
17 18
@@ -25,6 +25,12 @@ @@ -25,6 +25,12 @@
25 component: 'Checkbox', 25 component: 'Checkbox',
26 defaultValue: option.showDeviceName, 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 showActionButtonGroup: false, 35 showActionButtonGroup: false,
30 labelWidth: 120, 36 labelWidth: 120,
@@ -27,12 +27,17 @@ @@ -27,12 +27,17 @@
27 const getDesign = computed(() => { 27 const getDesign = computed(() => {
28 const { option, persetOption } = props.config; 28 const { option, persetOption } = props.config;
29 const { componentInfo, attribute, attributeRename, attributeName } = option; 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 return { 36 return {
33 unit: unit ?? presetUnit, 37 unit: unit ?? presetUnit,
34 fontColor: fontColor ?? presetFontColor, 38 fontColor: fontColor ?? presetFontColor,
35 attribute: attributeRename || attributeName || attribute, 39 attribute: attributeRename || attributeName || attribute,
  40 + showTime: persetShowTime || showTime,
36 }; 41 };
37 }); 42 });
38 43
@@ -222,12 +227,15 @@ @@ -222,12 +227,15 @@
222 </script> 227 </script>
223 228
224 <template> 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 <DeviceName :config="config" /> 234 <DeviceName :config="config" />
227 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div> 235 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
228 <div class="text-gray-500 text-xs text-center truncate">{{ 236 <div class="text-gray-500 text-xs text-center truncate">{{
229 getDesign.attribute || '温度' 237 getDesign.attribute || '温度'
230 }}</div> 238 }}</div>
231 - <UpdateTime :time="time" /> 239 + <UpdateTime v-show="getDesign.showTime" :time="time" />
232 </main> 240 </main>
233 </template> 241 </template>
@@ -29,6 +29,7 @@ export const option: PublicPresetOptions = { @@ -29,6 +29,7 @@ export const option: PublicPresetOptions = {
29 ], 29 ],
30 [ComponentConfigFieldEnum.UNIT]: 'km/h', 30 [ComponentConfigFieldEnum.UNIT]: 'km/h',
31 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 31 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  32 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
32 }; 33 };
33 34
34 export default class Config extends PublicConfigClass implements CreateComponentType { 35 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -81,6 +81,12 @@ @@ -81,6 +81,12 @@
81 component: 'Checkbox', 81 component: 'Checkbox',
82 defaultValue: option.showDeviceName, 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 showActionButtonGroup: false, 91 showActionButtonGroup: false,
86 labelWidth: 120, 92 labelWidth: 120,
@@ -112,11 +118,12 @@ @@ -112,11 +118,12 @@
112 fontColor: value[ComponentConfigFieldEnum.FONT_COLOR], 118 fontColor: value[ComponentConfigFieldEnum.FONT_COLOR],
113 unit: value[ComponentConfigFieldEnum.UNIT], 119 unit: value[ComponentConfigFieldEnum.UNIT],
114 showDeviceName: value[ComponentConfigFieldEnum.SHOW_DEVICE_NAME], 120 showDeviceName: value[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
  121 + showTime: value[ComponentConfigFieldEnum.SHOW_TIME],
115 } as ComponentInfo; 122 } as ComponentInfo;
116 }; 123 };
117 124
118 const setFormValues = (data: ComponentInfo) => { 125 const setFormValues = (data: ComponentInfo) => {
119 - const { gradientInfo, unit, fontColor, showDeviceName } = data; 126 + const { gradientInfo, unit, fontColor, showDeviceName, showTime } = data;
120 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST); 127 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
121 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND); 128 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
122 const thirdRecord = gradientInfo.find((item) => item.key === Gradient.THIRD); 129 const thirdRecord = gradientInfo.find((item) => item.key === Gradient.THIRD);
@@ -124,6 +131,7 @@ @@ -124,6 +131,7 @@
124 [ComponentConfigFieldEnum.UNIT]: unit, 131 [ComponentConfigFieldEnum.UNIT]: unit,
125 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor, 132 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
126 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName, 133 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
  134 + [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
127 [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: firstRecord?.value, 135 [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: firstRecord?.value,
128 [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color, 136 [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color,
129 [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: secondRecord?.value, 137 [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: secondRecord?.value,
@@ -36,14 +36,16 @@ @@ -36,14 +36,16 @@
36 fontColor: presetFontColor, 36 fontColor: presetFontColor,
37 unit: presetUnit, 37 unit: presetUnit,
38 gradientInfo: presetGradientInfo, 38 gradientInfo: presetGradientInfo,
  39 + showTime: persetShowTime,
39 } = persetOption || {}; 40 } = persetOption || {};
40 41
41 - const { unit, fontColor, gradientInfo } = componentInfo || {}; 42 + const { unit, fontColor, gradientInfo, showTime } = componentInfo || {};
42 return { 43 return {
43 unit: unit ?? presetUnit, 44 unit: unit ?? presetUnit,
44 fontColor: fontColor ?? presetFontColor, 45 fontColor: fontColor ?? presetFontColor,
45 gradientInfo: gradientInfo ?? presetGradientInfo, 46 gradientInfo: gradientInfo ?? presetGradientInfo,
46 attribute: attributeRename || attributeName || attribute, 47 attribute: attributeRename || attributeName || attribute,
  48 + showTime: showTime || persetShowTime,
47 }; 49 };
48 }); 50 });
49 51
@@ -205,12 +207,15 @@ @@ -205,12 +207,15 @@
205 </script> 207 </script>
206 208
207 <template> 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 <DeviceName :config="config" /> 214 <DeviceName :config="config" />
210 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div> 215 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
211 <div class="text-center text-gray-500 text-xs truncate"> 216 <div class="text-center text-gray-500 text-xs truncate">
212 {{ getDesign.attribute || '速度' }} 217 {{ getDesign.attribute || '速度' }}
213 </div> 218 </div>
214 - <UpdateTime :time="time" /> 219 + <UpdateTime v-show="getDesign.showTime" :time="time" />
215 </main> 220 </main>
216 </template> 221 </template>
@@ -24,7 +24,7 @@ @@ -24,7 +24,7 @@
24 // const time = ref<Nullable<number>>(null); 24 // const time = ref<Nullable<number>>(null);
25 25
26 const updateInterval = ref<number>(1000); //默认每秒更新一次 26 const updateInterval = ref<number>(1000); //默认每秒更新一次
27 - const maxDataPoints = ref<number>(10); //默认每秒显示10个数据点 27 + const maxDataPoints = ref<number>(30); //默认每秒显示10个数据点
28 28
29 const chartData = ref<{ time: string | number; value: number }[]>([]); 29 const chartData = ref<{ time: string | number; value: number }[]>([]);
30 const legendData = ref<string[]>(['温度']); 30 const legendData = ref<string[]>(['温度']);
@@ -51,7 +51,7 @@ @@ -51,7 +51,7 @@
51 grid: { 51 grid: {
52 top: '30%', 52 top: '30%',
53 left: '6%', 53 left: '6%',
54 - right: '16%', 54 + right: '10%',
55 bottom: '1%', 55 bottom: '1%',
56 containLabel: true, 56 containLabel: true,
57 }, 57 },
@@ -219,7 +219,7 @@ class Subscriber { @@ -219,7 +219,7 @@ class Subscriber {
219 throw error; 219 throw error;
220 } 220 }
221 } 221 }
222 - return; 222 + // return;
223 } 223 }
224 224
225 for (const item of subscriptionGroup) { 225 for (const item of subscriptionGroup) {
@@ -91,7 +91,11 @@ @@ -91,7 +91,11 @@
91 91
92 const isAlarm = computed(() => { 92 const isAlarm = computed(() => {
93 const frontId = props.sourceInfo.frontId; 93 const frontId = props.sourceInfo.frontId;
94 - if (frontId == 'DeviceAlarm' || frontId == 'DeviceAlarmHistory') { 94 + if (
  95 + frontId == 'DeviceAlarm' ||
  96 + frontId == 'DeviceAlarmHistory' ||
  97 + frontId == 'StatisticsComponent7'
  98 + ) {
95 return true; 99 return true;
96 } else { 100 } else {
97 return false; 101 return false;
@@ -20,7 +20,7 @@ export enum SchemaFiled { @@ -20,7 +20,7 @@ export enum SchemaFiled {
20 LIMIT = 'limit', 20 LIMIT = 'limit',
21 AGG = 'agg', 21 AGG = 'agg',
22 ORDER_BY = 'orderBy', 22 ORDER_BY = 'orderBy',
23 - PAGE_SIZe = 'pageSize', 23 + PAGE_SIZE = 'pageSize',
24 } 24 }
25 25
26 export enum AggregateDataEnum { 26 export enum AggregateDataEnum {
@@ -60,7 +60,7 @@ export const formSchema = (): FormSchema[] => { @@ -60,7 +60,7 @@ export const formSchema = (): FormSchema[] => {
60 }, 60 },
61 61
62 { 62 {
63 - field: SchemaFiled.PAGE_SIZe, 63 + field: SchemaFiled.PAGE_SIZE,
64 label: '分页条数', 64 label: '分页条数',
65 component: 'InputNumber', 65 component: 'InputNumber',
66 defaultValue: 20, 66 defaultValue: 20,
1 -export { default as alarmTimeModal } from './index.vue'; 1 +export { default as AlarmTimeModal } from './index.vue';
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 import { ref, unref } from 'vue'; 2 import { ref, unref } from 'vue';
3 - import { formSchema, SchemaFiled } from './config'; 3 + import { AggregateDataEnum, formSchema, QueryWay, SchemaFiled } from './config';
4 import { useForm } from '/@/components/Form'; 4 import { useForm } from '/@/components/Form';
5 import { useModalInner } from '/@/components/Modal'; 5 import { useModalInner } from '/@/components/Modal';
6 import { useGridLayout } from '/@/hooks/component/useGridLayout'; 6 import { useGridLayout } from '/@/hooks/component/useGridLayout';
@@ -8,13 +8,81 @@ @@ -8,13 +8,81 @@
8 import { BasicForm } from '/@/components/Form'; 8 import { BasicForm } from '/@/components/Form';
9 import { BasicModal } from '/@/components/Modal'; 9 import { BasicModal } from '/@/components/Modal';
10 import { nextTick } from 'vue'; 10 import { nextTick } from 'vue';
  11 + import {
  12 + getPacketIntervalByRange,
  13 + getPacketIntervalByValue,
  14 + } from '/@/views/device/localtion/cpns/TimePeriodForm/helper';
11 15
12 - const emit = defineEmits(['register', 'getAlarmForm']); 16 + const emit = defineEmits(['register', 'getAlarmForm', 'getHistoryForm']);
13 // const emit = defineEmits<{ 17 // const emit = defineEmits<{
14 // (event: 'getAlarmForm', data: WidgetDataType): void; 18 // (event: 'getAlarmForm', data: WidgetDataType): void;
15 // }>(); 19 // }>();
16 20
17 - const [registerModal, { closeModal }] = useModalInner(); 21 + const fontId = ref('');
  22 + const [registerModal, { closeModal }] = useModalInner(async (data) => {
  23 + fontId.value = unref(data).record.frontId;
  24 + method.updateSchema([
  25 + {
  26 + field: SchemaFiled.PAGE_SIZE,
  27 + ifShow: unref(fontId) !== 'StatisticsComponent7',
  28 + },
  29 + ]);
  30 + if (unref(fontId) !== 'StatisticsComponent7') return;
  31 + await nextTick();
  32 + method.appendSchemaByField(
  33 + {
  34 + field: SchemaFiled.AGG,
  35 + label: '数据聚合功能',
  36 + component: 'Select',
  37 + defaultValue: AggregateDataEnum.NONE,
  38 + componentProps: {
  39 + getPopupContainer: () => document.body,
  40 + options: [
  41 + { label: '最小值', value: AggregateDataEnum.MIN },
  42 + { label: '最大值', value: AggregateDataEnum.MAX },
  43 + { label: '平均值', value: AggregateDataEnum.AVG },
  44 + { label: '求和', value: AggregateDataEnum.SUM },
  45 + { label: '计数', value: AggregateDataEnum.COUNT },
  46 + { label: '空', value: AggregateDataEnum.NONE },
  47 + ],
  48 + },
  49 + },
  50 + SchemaFiled.DATE_RANGE
  51 + );
  52 + method.appendSchemaByField(
  53 + {
  54 + field: SchemaFiled.INTERVAL,
  55 + label: '分组间隔',
  56 + component: 'Select',
  57 + dynamicRules: ({ model }) => {
  58 + return [
  59 + {
  60 + required: model[SchemaFiled.AGG] !== AggregateDataEnum.NONE,
  61 + message: '分组间隔为必填项',
  62 + type: 'number',
  63 + },
  64 + ];
  65 + },
  66 + ifShow({ values }) {
  67 + return values[SchemaFiled.AGG] !== AggregateDataEnum.NONE;
  68 + },
  69 + componentProps({ formModel, formActionType }) {
  70 + const options =
  71 + formModel[SchemaFiled.WAY] === QueryWay.LATEST
  72 + ? getPacketIntervalByValue(formModel[SchemaFiled.START_TS])
  73 + : getPacketIntervalByRange(formModel[SchemaFiled.DATE_RANGE]);
  74 + if (formModel[SchemaFiled.AGG] !== AggregateDataEnum.NONE) {
  75 + formActionType.setFieldsValue({ [SchemaFiled.LIMIT]: null });
  76 + }
  77 + return {
  78 + options,
  79 + getPopupContainer: () => document.body,
  80 + };
  81 + },
  82 + },
  83 + SchemaFiled.AGG
  84 + );
  85 + });
18 86
19 const [register, method] = useForm({ 87 const [register, method] = useForm({
20 schemas: formSchema(), 88 schemas: formSchema(),
@@ -33,21 +101,14 @@ @@ -33,21 +101,14 @@
33 const handleCancel = () => { 101 const handleCancel = () => {
34 // destory() 102 // destory()
35 }; 103 };
36 - const alarmForm = ref({ time: 2592000000, pageSize: 10 }); //默认30天  
37 const handleSubmit = async () => { 104 const handleSubmit = async () => {
38 - const { way, pageSize, startTs, endTs } = method.getFieldsValue();  
39 - if (way == 'timePeriod') {  
40 - alarmForm.value = {  
41 - time: new Date(endTs).getTime() - new Date(startTs).getTime(),  
42 - pageSize,  
43 - }; 105 + const values = method.getFieldsValue();
  106 + if (unref(fontId) == 'StatisticsComponent7') {
  107 + emit('getHistoryForm', values);
44 } else { 108 } else {
45 - alarmForm.value = {  
46 - time: startTs,  
47 - pageSize,  
48 - }; 109 + emit('getAlarmForm', values);
49 } 110 }
50 - emit('getAlarmForm', unref(alarmForm)); 111 +
51 await nextTick(); 112 await nextTick();
52 closeModal(); 113 closeModal();
53 }; 114 };
  1 +import { Ref, inject, provide } from 'vue';
  2 +
  3 +const SymbolKey = Symbol('history-info');
  4 +interface IHistory {
  5 + [key: string]: string;
  6 +}
  7 +
  8 +export interface HistoryContextType {
  9 + historyForm: Ref<IHistory> | any;
  10 + getHistoryForm: (value: any) => void;
  11 +}
  12 +
  13 +export const createHistoryContext = (options: HistoryContextType) => {
  14 + provide(SymbolKey, options);
  15 +};
  16 +
  17 +export const useHistoryContext = () => {
  18 + return inject<HistoryContextType>(SymbolKey) || ({} as Partial<HistoryContextType>);
  19 +};
@@ -25,13 +25,14 @@ @@ -25,13 +25,14 @@
25 import { ModalParamsType } from '/#/utils'; 25 import { ModalParamsType } from '/#/utils';
26 import { DataActionModeEnum } from '/@/enums/toolEnum'; 26 import { DataActionModeEnum } from '/@/enums/toolEnum';
27 import { HistoryTrendModal } from './components/HistoryTrendModal'; 27 import { HistoryTrendModal } from './components/HistoryTrendModal';
28 - import { alarmTimeModal } from './components/alarmTimeModal'; 28 + import { AlarmTimeModal } from './components/AlarmTimeModal';
29 import { watch } from 'vue'; 29 import { watch } from 'vue';
30 import { useRootSetting } from '/@/hooks/setting/useRootSetting'; 30 import { useRootSetting } from '/@/hooks/setting/useRootSetting';
31 import { ThemeEnum } from '/@/enums/appEnum'; 31 import { ThemeEnum } from '/@/enums/appEnum';
32 import { createDataBoardContext } from './hooks/useDataBoardContext'; 32 import { createDataBoardContext } from './hooks/useDataBoardContext';
33 import { useSocket } from '/@/views/visual/packages/hook/socket/useSocket'; 33 import { useSocket } from '/@/views/visual/packages/hook/socket/useSocket';
34 import { createAlarmContext } from './hooks/useAlarmTime'; 34 import { createAlarmContext } from './hooks/useAlarmTime';
  35 + import { createHistoryContext } from './hooks/useHistoryForm';
35 36
36 const props = defineProps<{ 37 const props = defineProps<{
37 value?: Recordable; 38 value?: Recordable;
@@ -85,15 +86,46 @@ @@ -85,15 +86,46 @@
85 time: 2592000000, 86 time: 2592000000,
86 pageSize: 10, 87 pageSize: 10,
87 }); 88 });
88 - const getAlarmForm = (value) => {  
89 - alarmForm.value = {  
90 - time: value.time,  
91 - pageSize: value.pageSize,  
92 - };  
93 - };  
94 89
  90 + //告警发送数据
  91 + const getAlarmForm = (values) => {
  92 + const { way, pageSize, startTs, endTs } = values;
  93 + if (way == 'timePeriod')
  94 + alarmForm.value = {
  95 + time: new Date(endTs).getTime() - new Date(startTs).getTime(),
  96 + pageSize,
  97 + };
  98 + else
  99 + alarmForm.value = {
  100 + time: startTs,
  101 + pageSize,
  102 + };
  103 + };
95 createAlarmContext({ alarmForm: alarmForm, getAlarmForm }); 104 createAlarmContext({ alarmForm: alarmForm, getAlarmForm });
96 105
  106 + // 历史数据发送
  107 + const historyForm = ref({
  108 + startTs: 2592000000,
  109 + endTs: undefined,
  110 + agg: 'NONE',
  111 + limit: null,
  112 + interval: undefined,
  113 + way: 'latest',
  114 + });
  115 + const getHistoryForm = (values) => {
  116 + const { startTs, endTs, agg, limit, interval, way } = values;
  117 + historyForm.value = {
  118 + startTs,
  119 + endTs,
  120 + agg,
  121 + limit,
  122 + interval,
  123 + way,
  124 + };
  125 + console.log(values);
  126 + };
  127 + createHistoryContext({ historyForm: historyForm, getHistoryForm });
  128 +
97 const { send, close } = useSocket(dataSource); 129 const { send, close } = useSocket(dataSource);
98 130
99 createDataBoardContext({ send, close }); 131 createDataBoardContext({ send, close });
@@ -188,7 +220,11 @@ @@ -188,7 +220,11 @@
188 <HistoryTrendModal @register="registerTrendModal" /> 220 <HistoryTrendModal @register="registerTrendModal" />
189 221
190 <!-- 告警选择时间 --> 222 <!-- 告警选择时间 -->
191 - <alarmTimeModal @register="registerAlarmModal" @getAlarmForm="getAlarmForm" /> 223 + <AlarmTimeModal
  224 + @register="registerAlarmModal"
  225 + @getAlarmForm="getAlarmForm"
  226 + @getHistoryForm="getHistoryForm"
  227 + />
192 </section> 228 </section>
193 </template> 229 </template>
194 230