Showing
1 changed file
with
64 additions
and
31 deletions
@@ -15,31 +15,37 @@ | @@ -15,31 +15,37 @@ | ||
15 | import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type'; | 15 | import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type'; |
16 | 16 | ||
17 | interface IList { | 17 | interface IList { |
18 | - [key: string]: string | number; | 18 | + [key: string]: string | number | object; |
19 | } | 19 | } |
20 | 20 | ||
21 | const props = defineProps<{ | 21 | const props = defineProps<{ |
22 | config: ComponentPropsConfigType<typeof option>; | 22 | config: ComponentPropsConfigType<typeof option>; |
23 | }>(); | 23 | }>(); |
24 | 24 | ||
25 | - const [registerTable, { setTableData, setColumns, getDataSource, redoHeight, setProps }] = | ||
26 | - useTable({ showIndexColumn: false, showTableSetting: false, canResize: true, size: 'small' }); | ||
27 | - | ||
28 | - const getDesign = computed(() => { | ||
29 | - const { persetOption, option } = props.config; | ||
30 | - const { dataSource = [] } = option || {}; | ||
31 | - const { unit: presetUnit, showDeviceName: presetShowDeviceName } = persetOption || {}; | ||
32 | - const columns: BasicColumn[] = dataSource.map((item) => ({ | ||
33 | - title: item.attributeRename || item.attributeName || item.attribute, | ||
34 | - dataIndex: item.attribute, | 25 | + const columns: BasicColumn[] = [ |
26 | + { | ||
27 | + title: '设备属性', | ||
28 | + dataIndex: 'attribute', | ||
29 | + width: 80, | ||
30 | + ellipsis: true, | ||
31 | + format(text) { | ||
32 | + if (props.config.option.mode == 'SELECT_PREVIEW') return text; | ||
33 | + const { uniqueArr } = unref(getDesign); | ||
34 | + const values = uniqueArr.filter((item) => item[text])[0][text]; | ||
35 | + return values; | ||
36 | + }, | ||
37 | + }, | ||
38 | + { | ||
39 | + title: '值', | ||
40 | + dataIndex: 'value', | ||
35 | width: 80, | 41 | width: 80, |
36 | ellipsis: true, | 42 | ellipsis: true, |
37 | format(text, record) { | 43 | format(text, record) { |
38 | const value = text ? text + (record.unit || '') : ''; | 44 | const value = text ? text + (record.unit || '') : ''; |
39 | return value; | 45 | return value; |
40 | }, | 46 | }, |
41 | - })); | ||
42 | - columns.push({ | 47 | + }, |
48 | + { | ||
43 | title: '时间', | 49 | title: '时间', |
44 | dataIndex: 'time', | 50 | dataIndex: 'time', |
45 | width: 110, | 51 | width: 110, |
@@ -47,9 +53,37 @@ | @@ -47,9 +53,37 @@ | ||
47 | format(text) { | 53 | format(text) { |
48 | return formatToDateTime(text, 'YYYY-MM-DD HH:mm:ss'); | 54 | return formatToDateTime(text, 'YYYY-MM-DD HH:mm:ss'); |
49 | }, | 55 | }, |
56 | + }, | ||
57 | + ]; | ||
58 | + | ||
59 | + const [registerTable, { setTableData, getDataSource, redoHeight, setProps }] = useTable({ | ||
60 | + showIndexColumn: false, | ||
61 | + showTableSetting: false, | ||
62 | + canResize: true, | ||
63 | + size: 'small', | ||
64 | + columns, | ||
65 | + }); | ||
66 | + | ||
67 | + const getDesign = computed(() => { | ||
68 | + const { persetOption, option } = props.config; | ||
69 | + const { dataSource = [] } = option || {}; | ||
70 | + const { unit: presetUnit, showDeviceName: presetShowDeviceName } = persetOption || {}; | ||
71 | + const convert = dataSource.map((item) => { | ||
72 | + return { | ||
73 | + [item.attribute + '-' + item.deviceId]: item.deviceName + '-' + item.attributeName, | ||
74 | + id: item.deviceId, | ||
75 | + }; | ||
76 | + }); | ||
77 | + | ||
78 | + const uniqueSet = new Set(); | ||
79 | + const uniqueArr = convert.filter((obj) => { | ||
80 | + const jsonString = JSON.stringify(obj); | ||
81 | + const isUnique = !uniqueSet.has(jsonString); | ||
82 | + uniqueSet.add(jsonString); | ||
83 | + return isUnique; | ||
50 | }); | 84 | }); |
51 | return { | 85 | return { |
52 | - columns, | 86 | + uniqueArr, |
53 | dataSource: dataSource?.map((item) => { | 87 | dataSource: dataSource?.map((item) => { |
54 | const { unit, showDeviceName } = item.componentInfo || {}; | 88 | const { unit, showDeviceName } = item.componentInfo || {}; |
55 | const { attribute, attributeName, attributeRename, deviceName, deviceRename, deviceId } = | 89 | const { attribute, attributeName, attributeRename, deviceName, deviceRename, deviceId } = |
@@ -57,11 +91,9 @@ | @@ -57,11 +91,9 @@ | ||
57 | return { | 91 | return { |
58 | unit: unit ?? presetUnit, | 92 | unit: unit ?? presetUnit, |
59 | attribute, | 93 | attribute, |
60 | - attributeRename, | ||
61 | - attributeName, | 94 | + attributeName: attributeRename || attributeName, |
62 | showDeviceName: showDeviceName ?? presetShowDeviceName, | 95 | showDeviceName: showDeviceName ?? presetShowDeviceName, |
63 | - deviceName, | ||
64 | - deviceRename, | 96 | + deviceName: deviceRename || deviceName, |
65 | id: deviceId, | 97 | id: deviceId, |
66 | }; | 98 | }; |
67 | }), | 99 | }), |
@@ -73,29 +105,30 @@ | @@ -73,29 +105,30 @@ | ||
73 | 105 | ||
74 | const updateFn: MultipleDataFetchUpdateFn = async (message, deviceId, attribute) => { | 106 | const updateFn: MultipleDataFetchUpdateFn = async (message, deviceId, attribute) => { |
75 | const list: IList = {}; | 107 | const list: IList = {}; |
108 | + const list1: IList = {}; | ||
76 | forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => { | 109 | forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => { |
77 | - list[attribute] = getNumberValue(value); | 110 | + list[deviceId + attribute] = getNumberValue(value); |
78 | list.time = timespan || list.time; | 111 | list.time = timespan || list.time; |
112 | + | ||
113 | + if (timespan && value) { | ||
114 | + list1[attribute + '-' + deviceId] = { | ||
115 | + attribute: attribute + '-' + deviceId, | ||
116 | + value: value ? getNumberValue(value) : value, | ||
117 | + time: timespan, | ||
118 | + }; | ||
119 | + } | ||
79 | }); | 120 | }); |
80 | await nextTick(); | 121 | await nextTick(); |
81 | - setTableData([list, ...toRaw(unref(getDataSource()))]); | 122 | + setTableData([...Object.values(list1), ...toRaw(unref(getDataSource()))]); |
82 | }; | 123 | }; |
83 | 124 | ||
84 | useMultipleDataFetch(props, updateFn); | 125 | useMultipleDataFetch(props, updateFn); |
85 | onMounted(async () => { | 126 | onMounted(async () => { |
86 | - setColumns( | ||
87 | - props.config.option.dataSource | ||
88 | - ? unref(getDesign).columns | ||
89 | - : [ | ||
90 | - { title: '属性', dataIndex: 'attribute', width: 80, ellipsis: true }, | ||
91 | - { title: '时间', dataIndex: 'time', width: 80, ellipsis: true }, | ||
92 | - ] | ||
93 | - ); | ||
94 | !props.config.option.dataSource && | 127 | !props.config.option.dataSource && |
95 | setTableData([ | 128 | setTableData([ |
96 | - { attribute: '温度', time: '2023-06-29' }, | ||
97 | - { attribute: '湿度', time: '2023-06-29' }, | ||
98 | - { attribute: '湿度', time: '2023-06-29' }, | 129 | + { attribute: '温度', value: 1, time: '2023-06-29' }, |
130 | + { attribute: '湿度', value: 1, time: '2023-06-29' }, | ||
131 | + { attribute: '湿度', value: 1, time: '2023-06-29' }, | ||
99 | ]); | 132 | ]); |
100 | 133 | ||
101 | await nextTick(); | 134 | await nextTick(); |