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"> | ... | ... |