1
|
<script lang="ts" setup>
|
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
|
import { List, Button, Card } from 'ant-design-vue';
|
3
|
import { List, Button, Card } from 'ant-design-vue';
|
4
|
import { PageWrapper } from '/@/components/Page';
|
4
|
import { PageWrapper } from '/@/components/Page';
|
5
|
import { BasicTable, useTable } from '/@/components/Table';
|
5
|
import { BasicTable, useTable } from '/@/components/Table';
|
|
@@ -124,23 +124,54 @@ |
|
@@ -124,23 +124,54 @@ |
124
|
|
124
|
|
125
|
const getUnit = (record: StructJSON) => {
|
125
|
const getUnit = (record: StructJSON) => {
|
126
|
const { dataType } = record;
|
126
|
const { dataType } = record;
|
127
|
- const { specs } = dataType! || {};
|
|
|
128
|
- return isObject(specs)
|
127
|
+ const { specs, type } = dataType! || {};
|
|
|
128
|
+ const unitName = isObject(specs)
|
129
|
? (specs as Specs).unitName && (specs as Specs).unit
|
129
|
? (specs as Specs).unitName && (specs as Specs).unit
|
130
|
? `${(specs as Specs).unitName}`
|
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
|
const isStructAndTextType = (type: DataTypeEnum) => {
|
137
|
const isStructAndTextType = (type: DataTypeEnum) => {
|
136
|
return [DataTypeEnum.IS_STRUCT, DataTypeEnum.IS_STRING].includes(type);
|
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
|
async onConnected() {
|
174
|
async onConnected() {
|
141
|
- const { deviceProfileId } = props.deviceDetail;
|
|
|
142
|
- const value = await getDeviceAttrs({ deviceProfileId });
|
|
|
143
|
- socketInfo.attrKeys = isArray(value) ? value : [];
|
|
|
144
|
send(JSON.stringify(unref(getSendValue)));
|
175
|
send(JSON.stringify(unref(getSendValue)));
|
145
|
},
|
176
|
},
|
146
|
async onMessage() {
|
177
|
async onMessage() {
|
|
@@ -153,23 +184,7 @@ |
|
@@ -153,23 +184,7 @@ |
153
|
socketInfo.message[key] = value.data[key];
|
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
|
await nextTick();
|
189
|
await nextTick();
|
175
|
setTableData(socketInfo.dataSource);
|
190
|
setTableData(socketInfo.dataSource);
|
|
@@ -177,7 +192,7 @@ |
|
@@ -177,7 +192,7 @@ |
177
|
} catch (error) {}
|
192
|
} catch (error) {}
|
178
|
},
|
193
|
},
|
179
|
onDisconnected() {
|
194
|
onDisconnected() {
|
180
|
- close();
|
195
|
+ // close();
|
181
|
},
|
196
|
},
|
182
|
onError() {
|
197
|
onError() {
|
183
|
createMessage.error('webSocket连接超时,请联系管理员');
|
198
|
createMessage.error('webSocket连接超时,请联系管理员');
|
|
@@ -190,6 +205,15 @@ |
|
@@ -190,6 +205,15 @@ |
190
|
openModal(true);
|
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
|
onUnmounted(() => close());
|
217
|
onUnmounted(() => close());
|
194
|
</script>
|
218
|
</script>
|
195
|
|
219
|
|
|
@@ -228,7 +252,13 @@ |
|
@@ -228,7 +252,13 @@ |
228
|
</template>
|
252
|
</template>
|
229
|
<section class="min-h-16 flex flex-col justify-between">
|
253
|
<section class="min-h-16 flex flex-col justify-between">
|
230
|
<div class="flex font-bold text-lg mb-4 gap-2">
|
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
|
<div class="text-xs flex items-center">{{ item.unit }}</div>
|
262
|
<div class="text-xs flex items-center">{{ item.unit }}</div>
|
233
|
</div>
|
263
|
</div>
|
234
|
<div class="text-dark-800 text-xs">
|
264
|
<div class="text-dark-800 text-xs">
|