Showing
2 changed files
with
57 additions
and
26 deletions
1 | 1 | <script lang="ts" setup> |
2 | - import { nextTick, onUnmounted, reactive, ref, unref } from 'vue'; | |
2 | + import { nextTick, onMounted, onUnmounted, reactive, ref, unref } from 'vue'; | |
3 | 3 | import { List, Button, Card } from 'ant-design-vue'; |
4 | 4 | import { PageWrapper } from '/@/components/Page'; |
5 | 5 | import { BasicTable, useTable } from '/@/components/Table'; |
... | ... | @@ -124,23 +124,54 @@ |
124 | 124 | |
125 | 125 | const getUnit = (record: StructJSON) => { |
126 | 126 | const { dataType } = record; |
127 | - const { specs } = dataType! || {}; | |
128 | - return isObject(specs) | |
127 | + const { specs, type } = dataType! || {}; | |
128 | + const unitName = isObject(specs) | |
129 | 129 | ? (specs as Specs).unitName && (specs as Specs).unit |
130 | 130 | ? `${(specs as Specs).unitName}` |
131 | 131 | : '' |
132 | 132 | : ''; |
133 | + const { boolClose, boolOpen } = (specs || {}) as Specs; | |
134 | + return { unit: unitName, boolClose, boolOpen, type }; | |
133 | 135 | }; |
134 | 136 | |
135 | 137 | const isStructAndTextType = (type: DataTypeEnum) => { |
136 | 138 | return [DataTypeEnum.IS_STRUCT, DataTypeEnum.IS_STRING].includes(type); |
137 | 139 | }; |
138 | 140 | |
139 | - const { send, close, data } = useWebSocket(socketInfo.origin, { | |
141 | + const setDataSource = () => { | |
142 | + socketInfo.originData = socketInfo.dataSource = socketInfo.attrKeys.map((item) => { | |
143 | + const { identifier: key, name, detail } = item; | |
144 | + const { unit, boolClose, boolOpen, type } = getUnit(detail); | |
145 | + const dataInfo = socketInfo.attrKeys.find((item) => item.identifier === key); | |
146 | + let time: number | undefined; | |
147 | + let value: any | undefined; | |
148 | + const message = socketInfo.message[key]; | |
149 | + if (message) { | |
150 | + const [attrTime, attrValue] = message.at(0) || []; | |
151 | + time = attrTime; | |
152 | + value = attrValue; | |
153 | + } | |
154 | + | |
155 | + return { | |
156 | + key, | |
157 | + value, | |
158 | + time, | |
159 | + name, | |
160 | + unit, | |
161 | + type, | |
162 | + boolClose, | |
163 | + boolOpen, | |
164 | + showHistoryDataButton: !isStructAndTextType( | |
165 | + dataInfo?.detail.dataType?.type as unknown as DataTypeEnum | |
166 | + ), | |
167 | + }; | |
168 | + }); | |
169 | + }; | |
170 | + | |
171 | + const { send, close, data, open } = useWebSocket(socketInfo.origin, { | |
172 | + immediate: false, | |
173 | + autoReconnect: true, | |
140 | 174 | async onConnected() { |
141 | - const { deviceProfileId } = props.deviceDetail; | |
142 | - const value = await getDeviceAttrs({ deviceProfileId }); | |
143 | - socketInfo.attrKeys = isArray(value) ? value : []; | |
144 | 175 | send(JSON.stringify(unref(getSendValue))); |
145 | 176 | }, |
146 | 177 | async onMessage() { |
... | ... | @@ -153,23 +184,7 @@ |
153 | 184 | socketInfo.message[key] = value.data[key]; |
154 | 185 | }); |
155 | 186 | |
156 | - socketInfo.originData = socketInfo.dataSource = socketInfo.attrKeys.map((item) => { | |
157 | - const { identifier: key, name, detail } = item; | |
158 | - const unit = getUnit(detail); | |
159 | - const [time, value] = socketInfo.message[key].at(0) || []; | |
160 | - const dataInfo = socketInfo.attrKeys.find((item) => item.identifier === key); | |
161 | - | |
162 | - return { | |
163 | - key, | |
164 | - value, | |
165 | - time, | |
166 | - name, | |
167 | - unit, | |
168 | - showHistoryDataButton: !isStructAndTextType( | |
169 | - dataInfo?.detail.dataType?.type as unknown as DataTypeEnum | |
170 | - ), | |
171 | - }; | |
172 | - }); | |
187 | + setDataSource(); | |
173 | 188 | |
174 | 189 | await nextTick(); |
175 | 190 | setTableData(socketInfo.dataSource); |
... | ... | @@ -177,7 +192,7 @@ |
177 | 192 | } catch (error) {} |
178 | 193 | }, |
179 | 194 | onDisconnected() { |
180 | - close(); | |
195 | + // close(); | |
181 | 196 | }, |
182 | 197 | onError() { |
183 | 198 | createMessage.error('webSocket连接超时,请联系管理员'); |
... | ... | @@ -190,6 +205,15 @@ |
190 | 205 | openModal(true); |
191 | 206 | }; |
192 | 207 | |
208 | + onMounted(async () => { | |
209 | + const { deviceProfileId } = props.deviceDetail; | |
210 | + const value = await getDeviceAttrs({ deviceProfileId }); | |
211 | + socketInfo.attrKeys = isArray(value) ? value : []; | |
212 | + console.log(socketInfo); | |
213 | + setDataSource(); | |
214 | + open(); | |
215 | + }); | |
216 | + | |
193 | 217 | onUnmounted(() => close()); |
194 | 218 | </script> |
195 | 219 | |
... | ... | @@ -228,7 +252,13 @@ |
228 | 252 | </template> |
229 | 253 | <section class="min-h-16 flex flex-col justify-between"> |
230 | 254 | <div class="flex font-bold text-lg mb-4 gap-2"> |
231 | - <div>{{ item.value || '--' }}</div> | |
255 | + <div>{{ | |
256 | + item.type === DataTypeEnum.IS_BOOL | |
257 | + ? !!Number(item.value) | |
258 | + ? item.boolOpen | |
259 | + : item.boolClose | |
260 | + : item.value || '--' | |
261 | + }}</div> | |
232 | 262 | <div class="text-xs flex items-center">{{ item.unit }}</div> |
233 | 263 | </div> |
234 | 264 | <div class="text-dark-800 text-xs"> | ... | ... |