Commit f25c4521b7c3af946a74017e441d90ec37616255
Merge branch 'fix/DEFECT-1362' into 'main_dev'
Fix/defect 1362 See merge request yunteng/thingskit-front!661
Showing
20 changed files
with
232 additions
and
96 deletions
... | ... | @@ -232,6 +232,11 @@ |
232 | 232 | } catch (error) { |
233 | 233 | throw error; |
234 | 234 | } finally { |
235 | + activeKey.value = TabKeyEnum.BASIC; | |
236 | + selectWidgetKeys.value = { | |
237 | + componentKey: TextComponent1Config.key, | |
238 | + categoryKey: PackagesCategoryEnum.TEXT, | |
239 | + }; | |
235 | 240 | loading.value = false; |
236 | 241 | } |
237 | 242 | }; | ... | ... |
... | ... | @@ -26,8 +26,8 @@ export const option: PublicPresetOptions = { |
26 | 26 | [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6', |
27 | 27 | [ComponentConfigFieldEnum.INSTRUMENT_PANEL_COLOR]: '#61D4C5', |
28 | 28 | [ComponentConfigFieldEnum.GRADIENT_INFO]: [ |
29 | - { key: Gradient.FIRST, value: 30, color: GradientColor.FIRST }, | |
30 | - { key: Gradient.SECOND, value: 100, color: GradientColor.SECOND }, | |
29 | + { key: Gradient.FIRST, value: 0, color: GradientColor.FIRST }, | |
30 | + { key: Gradient.SECOND, value: 1, color: GradientColor.SECOND }, | |
31 | 31 | ], |
32 | 32 | }; |
33 | 33 | ... | ... |
... | ... | @@ -55,32 +55,12 @@ |
55 | 55 | defaultValue: GradientColor.FIRST, |
56 | 56 | }, |
57 | 57 | { |
58 | - field: ComponentConfigFieldEnum.FIRST_PHASE_VALUE, | |
59 | - label: '起始阀值', | |
60 | - component: 'InputNumber', | |
61 | - componentProps: { | |
62 | - placeholder: '请输入起始阀值', | |
63 | - min: 0, | |
64 | - }, | |
65 | - }, | |
66 | - { | |
67 | 58 | field: ComponentConfigFieldEnum.SECOND_PHASE_COLOR, |
68 | 59 | label: '结尾颜色', |
69 | 60 | component: 'ColorPicker', |
70 | 61 | changeEvent: 'update:value', |
71 | 62 | defaultValue: GradientColor.SECOND, |
72 | 63 | }, |
73 | - { | |
74 | - field: ComponentConfigFieldEnum.SECOND_PHASE_VALUE, | |
75 | - label: '结尾阀值', | |
76 | - component: 'InputNumber', | |
77 | - componentProps: ({ formModel }) => { | |
78 | - return { | |
79 | - placeholder: '请输入二阶段阀值', | |
80 | - min: formModel[ComponentConfigFieldEnum.FIRST_PHASE_VALUE], | |
81 | - }; | |
82 | - }, | |
83 | - }, | |
84 | 64 | ], |
85 | 65 | showActionButtonGroup: false, |
86 | 66 | labelWidth: 120, |
... | ... | @@ -96,12 +76,12 @@ |
96 | 76 | gradientInfo: [ |
97 | 77 | { |
98 | 78 | key: Gradient.FIRST, |
99 | - value: item[ComponentConfigFieldEnum.FIRST_PHASE_VALUE], | |
79 | + value: 0, | |
100 | 80 | color: item[ComponentConfigFieldEnum.FIRST_PHASE_COLOR], |
101 | 81 | }, |
102 | 82 | { |
103 | 83 | key: Gradient.SECOND, |
104 | - value: item[ComponentConfigFieldEnum.SECOND_PHASE_VALUE], | |
84 | + value: 1, | |
105 | 85 | color: item[ComponentConfigFieldEnum.SECOND_PHASE_COLOR], |
106 | 86 | }, |
107 | 87 | ], |
... | ... | @@ -122,9 +102,9 @@ |
122 | 102 | [ComponentConfigFieldEnum.UNIT]: unit, |
123 | 103 | [ComponentConfigFieldEnum.FONT_COLOR]: fontColor, |
124 | 104 | [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName, |
125 | - [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: firstRecord?.value, | |
105 | + [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: 0, | |
126 | 106 | [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color, |
127 | - [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: secondRecord?.value, | |
107 | + [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: 1, | |
128 | 108 | [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color, |
129 | 109 | [ComponentConfigFieldEnum.POINTER_COLOR]: pointerColor, |
130 | 110 | }; | ... | ... |
... | ... | @@ -46,14 +46,19 @@ |
46 | 46 | if (!isArray(array)) { |
47 | 47 | return; |
48 | 48 | } |
49 | - const item: any = []; | |
50 | - array.forEach((value, index) => { | |
51 | - item[index] = | |
52 | - index == 0 | |
53 | - ? { offset: value.value == 100 ? 1 : 0, color: value.color } | |
54 | - : { offset: Number((value.value / 100).toFixed(1)), color: value.color }; | |
55 | - }); | |
56 | - return item; | |
49 | + // const item: any = []; | |
50 | + // array.forEach((value, index) => { | |
51 | + // item[index] = | |
52 | + // index == 0 | |
53 | + // ? { offset: value.value == 100 ? 1 : 0, color: value.color } | |
54 | + // : { offset: Number((value.value / 100).toFixed(1)), color: value.color }; | |
55 | + // }); | |
56 | + const colorList = array.map((item) => ({ | |
57 | + offset: item.value, | |
58 | + color: item.color, | |
59 | + })); | |
60 | + console.log(array, colorList); | |
61 | + return colorList as any; | |
57 | 62 | }; |
58 | 63 | |
59 | 64 | const options = (): EChartsOption => { |
... | ... | @@ -80,16 +85,6 @@ |
80 | 85 | x2: 1, |
81 | 86 | y2: 0, |
82 | 87 | colorStops: instrumentPanelColor, |
83 | - // colorStops: [ | |
84 | - // { | |
85 | - // offset: 0, | |
86 | - // color: '#07ffd6', | |
87 | - // }, | |
88 | - // { | |
89 | - // offset: 1, | |
90 | - // color: '#5eff10', | |
91 | - // }, | |
92 | - // ], | |
93 | 88 | global: false, |
94 | 89 | }, |
95 | 90 | }, |
... | ... | @@ -100,10 +95,6 @@ |
100 | 95 | width: unref(getRatio) ? 30 * unref(getRatio) : 30, |
101 | 96 | }, |
102 | 97 | }, |
103 | - // itemStyle: { | |
104 | - // // color: instrumentPanelColor, | |
105 | - // color: new graphic.LinearGradient(0, 1, 0, 0, instrumentPanelColor), | |
106 | - // }, | |
107 | 98 | axisTick: { |
108 | 99 | show: false, |
109 | 100 | }, | ... | ... |
... | ... | @@ -25,8 +25,8 @@ export const option: PublicPresetOptions = { |
25 | 25 | [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6', |
26 | 26 | [ComponentConfigFieldEnum.INSTRUMENT_PANEL_COLOR]: '#61D4C5', |
27 | 27 | [ComponentConfigFieldEnum.GRADIENT_INFO]: [ |
28 | - { key: Gradient.FIRST, value: 30, color: GradientColor.FIRST }, | |
29 | - { key: Gradient.SECOND, value: 100, color: GradientColor.SECOND }, | |
28 | + { key: Gradient.FIRST, value: 0, color: GradientColor.FIRST }, | |
29 | + { key: Gradient.SECOND, value: 1, color: GradientColor.SECOND }, | |
30 | 30 | ], |
31 | 31 | }; |
32 | 32 | ... | ... |
... | ... | @@ -47,32 +47,12 @@ |
47 | 47 | defaultValue: GradientColor.FIRST, |
48 | 48 | }, |
49 | 49 | { |
50 | - field: ComponentConfigFieldEnum.FIRST_PHASE_VALUE, | |
51 | - label: '起始阀值', | |
52 | - component: 'InputNumber', | |
53 | - componentProps: { | |
54 | - placeholder: '请输入起始阀值', | |
55 | - min: 0, | |
56 | - }, | |
57 | - }, | |
58 | - { | |
59 | 50 | field: ComponentConfigFieldEnum.SECOND_PHASE_COLOR, |
60 | 51 | label: '结尾颜色', |
61 | 52 | component: 'ColorPicker', |
62 | 53 | changeEvent: 'update:value', |
63 | 54 | defaultValue: GradientColor.SECOND, |
64 | 55 | }, |
65 | - { | |
66 | - field: ComponentConfigFieldEnum.SECOND_PHASE_VALUE, | |
67 | - label: '结尾阀值', | |
68 | - component: 'InputNumber', | |
69 | - componentProps: ({ formModel }) => { | |
70 | - return { | |
71 | - placeholder: '请输入二阶段阀值', | |
72 | - min: formModel[ComponentConfigFieldEnum.FIRST_PHASE_VALUE], | |
73 | - }; | |
74 | - }, | |
75 | - }, | |
76 | 56 | ], |
77 | 57 | showActionButtonGroup: false, |
78 | 58 | labelWidth: 120, |
... | ... | @@ -88,12 +68,12 @@ |
88 | 68 | gradientInfo: [ |
89 | 69 | { |
90 | 70 | key: Gradient.FIRST, |
91 | - value: item[ComponentConfigFieldEnum.FIRST_PHASE_VALUE], | |
71 | + value: 0, | |
92 | 72 | color: item[ComponentConfigFieldEnum.FIRST_PHASE_COLOR], |
93 | 73 | }, |
94 | 74 | { |
95 | 75 | key: Gradient.SECOND, |
96 | - value: item[ComponentConfigFieldEnum.SECOND_PHASE_VALUE], | |
76 | + value: 1, | |
97 | 77 | color: item[ComponentConfigFieldEnum.SECOND_PHASE_COLOR], |
98 | 78 | }, |
99 | 79 | ], |
... | ... | @@ -114,12 +94,13 @@ |
114 | 94 | [ComponentConfigFieldEnum.UNIT]: unit, |
115 | 95 | [ComponentConfigFieldEnum.FONT_COLOR]: fontColor, |
116 | 96 | [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName, |
117 | - [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: firstRecord?.value, | |
97 | + [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: 0, | |
118 | 98 | [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color, |
119 | - [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: secondRecord?.value, | |
99 | + [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: 1, | |
120 | 100 | [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color, |
121 | 101 | [ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE]: progressBarCircle, |
122 | 102 | }; |
103 | + console.log(value, 'value'); | |
123 | 104 | return setFieldsValue(value); |
124 | 105 | }; |
125 | 106 | ... | ... |
... | ... | @@ -48,14 +48,11 @@ |
48 | 48 | if (!isArray(array)) { |
49 | 49 | return; |
50 | 50 | } |
51 | - const item: any = []; | |
52 | - array.forEach((value, index) => { | |
53 | - item[index] = | |
54 | - index == 0 | |
55 | - ? { offset: value.value == 100 ? 1 : 0, color: value.color } | |
56 | - : { offset: Number((value.value / 100).toFixed(1)), color: value.color }; | |
57 | - }); | |
58 | - return item; | |
51 | + const colorList = array.map((item) => ({ | |
52 | + offset: item.value, | |
53 | + color: item.color, | |
54 | + })); | |
55 | + return colorList as any; | |
59 | 56 | }; |
60 | 57 | |
61 | 58 | const titleValue = ref<number>(20); | ... | ... |
... | ... | @@ -53,18 +53,19 @@ |
53 | 53 | }, |
54 | 54 | progress: { |
55 | 55 | show: true, |
56 | - width: 30, | |
56 | + width: unref(getRatio) ? 24 * unref(getRatio) : 24, | |
57 | 57 | }, |
58 | 58 | pointer: { |
59 | 59 | show: false, |
60 | 60 | }, |
61 | 61 | axisLine: { |
62 | 62 | lineStyle: { |
63 | - width: 30, | |
63 | + width: unref(getRatio) ? 24 * unref(getRatio) : 24, | |
64 | 64 | }, |
65 | 65 | }, |
66 | 66 | axisTick: { |
67 | - distance: -35, | |
67 | + distance: unref(getRatio) ? -35 * unref(getRatio) : -35, | |
68 | + length: unref(getRatio) ? 8 * unref(getRatio) : 8, | |
68 | 69 | splitNumber: 5, |
69 | 70 | lineStyle: { |
70 | 71 | width: 2, |
... | ... | @@ -72,8 +73,8 @@ |
72 | 73 | }, |
73 | 74 | }, |
74 | 75 | splitLine: { |
75 | - distance: -40, | |
76 | - length: 10, | |
76 | + distance: unref(getRatio) ? -40 * unref(getRatio) : -40, | |
77 | + length: unref(getRatio) ? 12 * unref(getRatio) : 12, | |
77 | 78 | lineStyle: { |
78 | 79 | width: 3, |
79 | 80 | color: '#999', |
... | ... | @@ -94,8 +95,8 @@ |
94 | 95 | width: '60%', |
95 | 96 | lineHeight: 10, |
96 | 97 | borderRadius: 8, |
97 | - offsetCenter: [0, '30%'], | |
98 | - fontSize: 14, | |
98 | + offsetCenter: [0, '40%'], | |
99 | + fontSize: unref(getRatio) ? 14 * unref(getRatio) : 14, | |
99 | 100 | fontWeight: 'bolder', |
100 | 101 | formatter: `{value} ${unit ?? ''}`, |
101 | 102 | color: fontColor || 'inherit', |
... | ... | @@ -186,10 +187,37 @@ |
186 | 187 | |
187 | 188 | const resize = async () => { |
188 | 189 | await nextTick(); |
190 | + unref(chartInstance)?.setOption({ | |
191 | + series: [ | |
192 | + { | |
193 | + detail: { | |
194 | + fontSize: 14 * unref(getRatio), | |
195 | + }, | |
196 | + progress: { | |
197 | + width: 24 * unref(getRatio), | |
198 | + }, | |
199 | + axisLine: { | |
200 | + lineStyle: { | |
201 | + width: 24 * unref(getRatio), | |
202 | + }, | |
203 | + }, | |
204 | + axisTick: { | |
205 | + distance: -35 * unref(getRatio), | |
206 | + length: 6 * unref(getRatio), | |
207 | + }, | |
208 | + splitLine: { | |
209 | + // 分割线与轴线距离 | |
210 | + distance: -40 * unref(getRatio), | |
211 | + length: 12 * unref(getRatio), | |
212 | + }, | |
213 | + }, | |
214 | + ], | |
215 | + }); | |
189 | 216 | unref(chartInstance)?.resize(); |
190 | 217 | }; |
191 | 218 | |
192 | 219 | useComponentScale(props, resize); |
220 | + const { getRatio } = useComponentScale(props, resize); | |
193 | 221 | </script> |
194 | 222 | |
195 | 223 | <template> | ... | ... |
1 | +import { cloneDeep } from 'lodash-es'; | |
2 | +import { PictureConfig } from '.'; | |
3 | +import { | |
4 | + ConfigType, | |
5 | + CreateComponentType, | |
6 | + PublicComponentOptions, | |
7 | + PublicPresetOptions, | |
8 | +} from '../../../index.type'; | |
9 | +import { PublicConfigClass, componentInitConfig } from '../../../publicConfig'; | |
10 | + | |
11 | +export const option: PublicPresetOptions = { | |
12 | + componetDesign: false, | |
13 | +}; | |
14 | + | |
15 | +export default class Config extends PublicConfigClass implements CreateComponentType { | |
16 | + public key: string = PictureConfig.key; | |
17 | + | |
18 | + public attr = { ...componentInitConfig }; | |
19 | + | |
20 | + public componentConfig: ConfigType = cloneDeep(PictureConfig); | |
21 | + | |
22 | + public persetOption = cloneDeep(option); | |
23 | + | |
24 | + public option: PublicComponentOptions; | |
25 | + | |
26 | + constructor(option: PublicComponentOptions) { | |
27 | + super(); | |
28 | + this.option = { ...option }; | |
29 | + } | |
30 | +} | ... | ... |
1 | +<script lang="ts" setup> | |
2 | + // import { computed } from 'vue'; | |
3 | + import { commonDataSourceSchemas } from '../../../config/common.config'; | |
4 | + import { BasicForm, useForm } from '/@/components/Form'; | |
5 | + import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type'; | |
6 | + | |
7 | + // const props = defineProps<{ | |
8 | + // values: PublicComponentDataSourceProps; | |
9 | + // }>(); | |
10 | + | |
11 | + const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({ | |
12 | + labelWidth: 0, | |
13 | + showActionButtonGroup: false, | |
14 | + layout: 'horizontal', | |
15 | + labelCol: { span: 0 }, | |
16 | + schemas: commonDataSourceSchemas(), | |
17 | + }); | |
18 | + | |
19 | + // const getBindValues = computed(() => { | |
20 | + // return props.values.bindValue; | |
21 | + // }); | |
22 | + | |
23 | + const getFormValues = () => { | |
24 | + return getFieldsValue(); | |
25 | + }; | |
26 | + | |
27 | + const setFormValues = (record: Recordable) => { | |
28 | + return setFieldsValue(record); | |
29 | + }; | |
30 | + | |
31 | + defineExpose({ | |
32 | + getFormValues, | |
33 | + setFormValues, | |
34 | + validate, | |
35 | + resetFormValues: resetFields, | |
36 | + } as PublicFormInstaceType); | |
37 | +</script> | |
38 | + | |
39 | +<template> | |
40 | + <BasicForm @register="register" /> | |
41 | +</template> | ... | ... |
1 | +import { useComponentKeys } from '../../../hook/useComponentKeys'; | |
2 | +import { ConfigType, PackagesCategoryEnum } from '../../../index.type'; | |
3 | + | |
4 | +const componentKeys = useComponentKeys('Picture'); | |
5 | +export const PictureConfig: ConfigType = { | |
6 | + ...componentKeys, | |
7 | + title: '图片组件', | |
8 | + package: PackagesCategoryEnum.OTHER, | |
9 | +}; | ... | ... |
1 | +<script lang="ts" setup> | |
2 | + import { ref } from 'vue'; | |
3 | + import { Image as AntImage } from 'ant-design-vue'; | |
4 | + import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; | |
5 | + import { useDataFetch } from '../../../hook/useSocket'; | |
6 | + import { ComponentPropsConfigType, DataFetchUpdateFn } from '../../../index.type'; | |
7 | + | |
8 | + const props = defineProps<{ | |
9 | + config: ComponentPropsConfigType; | |
10 | + }>(); | |
11 | + | |
12 | + const fallback = | |
13 | + 'data:image/png;base64,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'; | |
14 | + | |
15 | + const time = ref<Nullable<number>>(null); | |
16 | + | |
17 | + const url = ref<string>(fallback); | |
18 | + | |
19 | + // const getImagBase64 = ref(fallback); | |
20 | + | |
21 | + // const getBase64Image = (url: string) => { | |
22 | + // let canvas: Nullable<HTMLCanvasElement> = document.createElement('canvas'); | |
23 | + // const ctx = canvas.getContext('2d'); | |
24 | + // let image: Nullable<HTMLImageElement> = new Image(); | |
25 | + | |
26 | + // image.onload = function () { | |
27 | + // canvas!.height = image!.height; | |
28 | + // canvas!.width = image!.width; | |
29 | + // ctx?.drawImage(image!, 0, 0); | |
30 | + // const dataUrl = canvas!.toDataURL('image/png'); | |
31 | + // getImagBase64.value = dataUrl; | |
32 | + // console.log(dataUrl); | |
33 | + // image = null; | |
34 | + // canvas = null; | |
35 | + // }; | |
36 | + // image.setAttribute('crossOrigin', 'Anonymous'); | |
37 | + // image.src = url; | |
38 | + // }; | |
39 | + | |
40 | + const updateFn: DataFetchUpdateFn = (message, attribute) => { | |
41 | + const { data = {} } = message; | |
42 | + const [latest] = data[attribute] || []; | |
43 | + const [timespan, value] = latest; | |
44 | + time.value = timespan; | |
45 | + url.value = `${value}?timespan=${timespan}`; | |
46 | + }; | |
47 | + | |
48 | + useDataFetch(props, updateFn); | |
49 | +</script> | |
50 | + | |
51 | +<template> | |
52 | + <main class="w-full h-full flex flex-col items-center"> | |
53 | + <AntImage :src="url" :fallback="fallback" /> | |
54 | + <UpdateTime :time="time" /> | |
55 | + </main> | |
56 | +</template> | |
57 | + | |
58 | +<style scoped lang="less"> | |
59 | + :deep(.ant-image) { | |
60 | + @apply flex justify-center w-auto; | |
61 | + | |
62 | + height: calc(100% - 56px); | |
63 | + | |
64 | + img { | |
65 | + @apply w-auto h-full; | |
66 | + } | |
67 | + } | |
68 | +</style> | ... | ... |
... | ... | @@ -16,7 +16,7 @@ export enum FetchComFlagTypeEnum { |
16 | 16 | export enum PackagesCategoryNameEnum { |
17 | 17 | TEXT = '文本组件', |
18 | 18 | INSTRUMENT = '仪表组件', |
19 | - PICTURE = '图片组件', | |
19 | + // PICTURE = '图片组件', | |
20 | 20 | CONTROL = '控制组件', |
21 | 21 | MAP = '地图组件', |
22 | 22 | FLOWMETER = '流量计', |
... | ... | @@ -30,7 +30,7 @@ export enum PackagesCategoryNameEnum { |
30 | 30 | export enum PackagesCategoryEnum { |
31 | 31 | TEXT = 'TEXT', |
32 | 32 | INSTRUMENT = 'INSTRUMENT', |
33 | - PICTURE = 'PICTURE', | |
33 | + // PICTURE = 'PICTURE', | |
34 | 34 | CONTROL = 'CONTROL', |
35 | 35 | MAP = 'MAP', |
36 | 36 | FLOWMETER = 'FLOWMETER', | ... | ... |
... | ... | @@ -3,7 +3,7 @@ import { FlowmeterList } from './components/Flowmeter'; |
3 | 3 | import { InstrumentList } from './components/Instrument'; |
4 | 4 | import { MapList } from './components/Map'; |
5 | 5 | import { OtherList } from './components/Other'; |
6 | -import { PictureList } from './components/Picture'; | |
6 | +// import { PictureList } from './components/Picture'; | |
7 | 7 | import { TextList } from './components/Text'; |
8 | 8 | import { STATISTICSList } from './components/Statistics'; |
9 | 9 | import { PackagesCategoryEnum, PackagesType } from './index.type'; |
... | ... | @@ -11,7 +11,7 @@ import { PackagesCategoryEnum, PackagesType } from './index.type'; |
11 | 11 | export const packageList: PackagesType = { |
12 | 12 | [PackagesCategoryEnum.TEXT]: TextList, |
13 | 13 | [PackagesCategoryEnum.INSTRUMENT]: InstrumentList, |
14 | - [PackagesCategoryEnum.PICTURE]: PictureList, | |
14 | + // [PackagesCategoryEnum.PICTURE]: PictureList, | |
15 | 15 | [PackagesCategoryEnum.CONTROL]: ControlList, |
16 | 16 | [PackagesCategoryEnum.MAP]: MapList, |
17 | 17 | [PackagesCategoryEnum.FLOWMETER]: FlowmeterList, | ... | ... |