Showing
1 changed file
with
59 additions
and
19 deletions
| ... | ... | @@ -39,6 +39,7 @@ |
| 39 | 39 | type?: string; |
| 40 | 40 | boolClose?: string; |
| 41 | 41 | boolOpen?: string; |
| 42 | + name?: string; | |
| 42 | 43 | detail: DeviceModelOfMatterAttrs; |
| 43 | 44 | } |
| 44 | 45 | |
| ... | ... | @@ -61,23 +62,27 @@ |
| 61 | 62 | showQuickJumper: true, |
| 62 | 63 | hideOnSinglePage: false, |
| 63 | 64 | showTotal: (total: number) => `共${total}条数据`, |
| 64 | - onChange: handleChange, | |
| 65 | - onShowSizeChange: handleChange, | |
| 65 | + onChange: handleFilterChange, | |
| 66 | + onShowSizeChange: handleFilterChange, | |
| 66 | 67 | }); |
| 67 | 68 | |
| 68 | 69 | const socketInfo = reactive({ |
| 69 | 70 | cmdId: 0, |
| 70 | 71 | origin: `${socketUrl}${token}`, |
| 71 | 72 | attr: undefined as string | undefined, |
| 72 | - originData: [] as DataSource[], | |
| 73 | 73 | dataSource: [] as DataSource[], |
| 74 | 74 | message: {} as ReceiveMessage['data'], |
| 75 | 75 | attrKeys: [] as DeviceModelOfMatterAttrs[], |
| 76 | + filterAttrKeys: [] as DeviceModelOfMatterAttrs[], | |
| 76 | 77 | }); |
| 77 | 78 | |
| 78 | 79 | const getPaginationAttrkey = computed<DeviceModelOfMatterAttrs[]>(() => { |
| 79 | 80 | const { current = 1, pageSize = 10 } = pagination; |
| 80 | - return socketInfo.attrKeys.slice(current * pageSize - pageSize, current * pageSize); | |
| 81 | + return ( | |
| 82 | + socketInfo.filterAttrKeys && socketInfo.filterAttrKeys.length | |
| 83 | + ? socketInfo.filterAttrKeys | |
| 84 | + : socketInfo.attrKeys | |
| 85 | + ).slice(current * pageSize - pageSize, current * pageSize); | |
| 81 | 86 | }); |
| 82 | 87 | |
| 83 | 88 | function createUnsubscribeMessage(cmdId: number) { |
| ... | ... | @@ -107,6 +112,22 @@ |
| 107 | 112 | }; |
| 108 | 113 | }); |
| 109 | 114 | |
| 115 | + const getFilterSendValue = computed(() => { | |
| 116 | + return { | |
| 117 | + tsSubCmds: [ | |
| 118 | + { | |
| 119 | + entityType: 'DEVICE', | |
| 120 | + entityId: props.deviceDetail!.tbDeviceId, | |
| 121 | + scope: 'LATEST_TELEMETRY', | |
| 122 | + cmdId: socketInfo.cmdId, | |
| 123 | + keys: unref(getPaginationAttrkey) | |
| 124 | + .map((item) => item.identifier) | |
| 125 | + .join(','), | |
| 126 | + }, | |
| 127 | + ], | |
| 128 | + }; | |
| 129 | + }); | |
| 130 | + | |
| 110 | 131 | const [registerForm, { getFieldsValue }] = useForm({ |
| 111 | 132 | schemas: [ |
| 112 | 133 | { |
| ... | ... | @@ -125,20 +146,29 @@ |
| 125 | 146 | submitFunc: async () => { |
| 126 | 147 | try { |
| 127 | 148 | const { value } = getFieldsValue() || {}; |
| 128 | - if (!value) setTableData(socketInfo.originData); | |
| 129 | - const data = unref(socketInfo.originData).filter( | |
| 130 | - (item) => item.key?.includes(value) || item.value?.includes(value) | |
| 131 | - ); | |
| 149 | + | |
| 150 | + pagination.current = 1; | |
| 151 | + | |
| 152 | + socketInfo.filterAttrKeys = value | |
| 153 | + ? unref(socketInfo.attrKeys).filter( | |
| 154 | + (item) => | |
| 155 | + item.identifier?.toUpperCase().includes(value.toUpperCase()) || | |
| 156 | + item.name?.toUpperCase().includes(value.toUpperCase()) | |
| 157 | + ) | |
| 158 | + : socketInfo.attrKeys; | |
| 159 | + | |
| 132 | 160 | await nextTick(); |
| 133 | - socketInfo.dataSource = data; | |
| 134 | 161 | |
| 135 | - setTableData(data); | |
| 162 | + handleFilterChange(); | |
| 163 | + | |
| 164 | + unref(mode) === EnumTableCardMode.TABLE && setTableData(socketInfo.dataSource); | |
| 136 | 165 | } catch (error) {} |
| 137 | 166 | }, |
| 138 | 167 | resetFunc: async () => { |
| 139 | 168 | try { |
| 140 | - socketInfo.dataSource = socketInfo.originData; | |
| 141 | - setTableData(socketInfo.originData); | |
| 169 | + socketInfo.filterAttrKeys = []; | |
| 170 | + handleFilterChange(); | |
| 171 | + unref(mode) === EnumTableCardMode.TABLE && setTableData(socketInfo.dataSource); | |
| 142 | 172 | } catch (error) {} |
| 143 | 173 | }, |
| 144 | 174 | }); |
| ... | ... | @@ -148,15 +178,19 @@ |
| 148 | 178 | showTableSetting: true, |
| 149 | 179 | pagination: pagination as any, |
| 150 | 180 | bordered: true, |
| 181 | + resizeHeightOffset: 16, | |
| 151 | 182 | showIndexColumn: false, |
| 152 | 183 | }); |
| 153 | 184 | |
| 154 | - function handleChange(page: number, pageSize: number) { | |
| 185 | + function handleFilterChange( | |
| 186 | + page: number = pagination.current || 1, | |
| 187 | + pageSize: number = pagination.pageSize || 10 | |
| 188 | + ) { | |
| 155 | 189 | pagination.current = page; |
| 156 | 190 | pagination.pageSize = pageSize; |
| 157 | 191 | send(JSON.stringify(createUnsubscribeMessage(socketInfo.cmdId))); |
| 158 | 192 | socketInfo.cmdId = socketInfo.cmdId + 1; |
| 159 | - send(JSON.stringify(unref(getSendValue))); | |
| 193 | + send(JSON.stringify(unref(getFilterSendValue))); | |
| 160 | 194 | } |
| 161 | 195 | |
| 162 | 196 | const [registerModal, { openModal }] = useModal(); |
| ... | ... | @@ -166,8 +200,8 @@ |
| 166 | 200 | const switchMode = async (value: EnumTableCardMode) => { |
| 167 | 201 | mode.value = value; |
| 168 | 202 | await nextTick(); |
| 169 | - setTableData(socketInfo.originData); | |
| 170 | - socketInfo.dataSource = socketInfo.originData; | |
| 203 | + unref(mode) === EnumTableCardMode.TABLE && setTableData(socketInfo.dataSource); | |
| 204 | + socketInfo.filterAttrKeys = []; | |
| 171 | 205 | }; |
| 172 | 206 | |
| 173 | 207 | const { createMessage } = useMessage(); |
| ... | ... | @@ -190,10 +224,15 @@ |
| 190 | 224 | }; |
| 191 | 225 | |
| 192 | 226 | const setDataSource = () => { |
| 193 | - socketInfo.originData = socketInfo.dataSource = socketInfo.attrKeys.map((item) => { | |
| 227 | + socketInfo.dataSource = ( | |
| 228 | + socketInfo.filterAttrKeys && socketInfo.filterAttrKeys.length | |
| 229 | + ? socketInfo.filterAttrKeys | |
| 230 | + : socketInfo.attrKeys | |
| 231 | + ).map((item) => { | |
| 194 | 232 | const { identifier: key, name, detail, accessMode } = item; |
| 195 | 233 | const { unit, boolClose, boolOpen, type } = getUnit(detail); |
| 196 | - const dataInfo = socketInfo.attrKeys.find((item) => item.identifier === key); | |
| 234 | + const dataInfo = socketInfo.filterAttrKeys.find((item) => item.identifier === key); | |
| 235 | + | |
| 197 | 236 | let time: number | undefined; |
| 198 | 237 | let value: any | undefined; |
| 199 | 238 | const message = socketInfo.message[key]; |
| ... | ... | @@ -240,7 +279,8 @@ |
| 240 | 279 | setDataSource(); |
| 241 | 280 | |
| 242 | 281 | await nextTick(); |
| 243 | - setTableData(socketInfo.dataSource); | |
| 282 | + | |
| 283 | + unref(mode) === EnumTableCardMode.TABLE && setTableData(socketInfo.dataSource); | |
| 244 | 284 | } |
| 245 | 285 | } catch (error) {} |
| 246 | 286 | }, | ... | ... |