index.vue
4.12 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<script lang="ts" setup>
import { computed, unref } from 'vue';
import { ComponentPropsConfigType } from '../../../index.type';
import { option } from './config';
import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
import { useReceiveMessage } from '../../../hook/useReceiveMessage';
import { useReceiveValue } from '../../../hook/useReceiveValue';
import { formatToDateTime } from '/@/utils/dateUtil';
import { nextTick } from 'vue';
import { onMounted } from 'vue';
import { toRaw } from 'vue';
import { useComponentScale } from '../../../hook/useComponentScale';
import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
interface IList {
[key: string]: string | number;
}
const props = defineProps<{
config: ComponentPropsConfigType<typeof option>;
}>();
const [registerTable, { setTableData, setColumns, getDataSource, redoHeight, setProps }] =
useTable({ showIndexColumn: false, showTableSetting: false, canResize: true, size: 'small' });
const getDesign = computed(() => {
const { persetOption, option } = props.config;
const { dataSource = [] } = option || {};
const { unit: presetUnit, showDeviceName: presetShowDeviceName } = persetOption || {};
const columns: BasicColumn[] = dataSource.map((item) => ({
title: item.attributeRename || item.attributeName || item.attribute,
dataIndex: item.attribute,
width: 80,
ellipsis: true,
format(text, record) {
const value = text ? text + (record.unit || '') : '';
return value;
},
}));
columns.push({
title: '时间',
dataIndex: 'time',
width: 110,
ellipsis: true,
format(text) {
return formatToDateTime(text, 'YYYY-MM-DD HH:mm:ss');
},
});
return {
columns,
dataSource: dataSource?.map((item) => {
const { unit, showDeviceName } = item.componentInfo || {};
const { attribute, attributeName, attributeRename, deviceName, deviceRename, deviceId } =
item;
return {
unit: unit ?? presetUnit,
attribute,
attributeRename,
attributeName,
showDeviceName: showDeviceName ?? presetShowDeviceName,
deviceName,
deviceRename,
id: deviceId,
};
}),
};
});
const { forEachGroupMessage } = useReceiveMessage();
const { getNumberValue } = useReceiveValue();
const updateFn: MultipleDataFetchUpdateFn = async (message, deviceId, attribute) => {
const list: IList = {};
forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => {
list[attribute] = getNumberValue(value);
list.time = timespan || list.time;
});
await nextTick();
setTableData([list, ...toRaw(unref(getDataSource()))]);
};
useMultipleDataFetch(props, updateFn);
onMounted(async () => {
setColumns(
props.config.option.dataSource
? unref(getDesign).columns
: [
{ title: '属性', dataIndex: 'attribute', width: 80, ellipsis: true },
{ title: '时间', dataIndex: 'time', width: 80, ellipsis: true },
]
);
!props.config.option.dataSource &&
setTableData([
{ attribute: '温度', time: '2023-06-29' },
{ attribute: '湿度', time: '2023-06-29' },
{ attribute: '湿度', time: '2023-06-29' },
]);
await nextTick();
resize();
});
const resize = async () => {
const { height } = unref(getContainerSize);
height && setProps({ scroll: { x: 190, y: height - 120 } });
await nextTick();
redoHeight();
};
const { getContainerSize } = useComponentScale(props, resize);
</script>
<template>
<main class="flex flex-col justify-center items-center w-full h-full">
<DeviceName :config="config" />
<div class="w-full h-full">
<!-- <PageWrapper> -->
<BasicTable autoCreateKey style="flex: auto" @register="registerTable" />
<!-- </PageWrapper> -->
</div>
</main>
</template>