DeviceDetailDrawer.vue
4.26 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
125
126
127
<template>
<BasicDrawer
v-bind="$attrs"
isDetail
@register="register"
destroyOnClose
@close="closeDrawer"
:title="deviceDetail.alias || deviceDetail.name"
width="80%"
>
<Tabs v-model:activeKey="activeKey" :size="size">
<TabPane key="1" tab="详情">
<Detail
ref="deviceDetailRef"
:deviceDetail="deviceDetail"
@open-gateway-device="handleOpenGatewayDevice"
/>
</TabPane>
<TabPane key="modelOfMatter" tab="物模型数据">
<ModelOfMatter :deviceDetail="deviceDetail" />
</TabPane>
<!-- <TabPane key="2" tab="实时数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'">
<RealTimeData :deviceDetail="deviceDetail" />
</TabPane>
<TabPane key="7" tab="历史数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'">
<HistoryData :deviceDetail="deviceDetail" />
</TabPane> -->
<TabPane key="5" tab="命令下发" v-if="deviceDetail?.deviceType !== 'SENSOR'">
<CommandIssuance :deviceDetail="deviceDetail" />
</TabPane>
<TabPane key="3" tab="告警"><Alarm :id="deviceDetail.id" /></TabPane>
<TabPane key="4" tab="子设备" v-if="deviceDetail?.deviceType === 'GATEWAY'">
<ChildDevice
:fromId="deviceDetail?.tbDeviceId"
@openTbDeviceDetail="handleOpenTbDeviceDetail"
/>
</TabPane>
<TabPane key="7" tab="命令下发记录">
<CommandRecord :fromId="deviceDetail?.tbDeviceId" />
</TabPane>
<!-- 网关设备并且场家是TBox -->
<TabPane
key="6"
tab="TBox"
v-if="deviceDetail?.deviceType === 'GATEWAY' && deviceDetail?.brand == 'TBox'"
>
<TBoxDetail :deviceDetail="deviceDetail" />
</TabPane>
<!-- 网关设备并且是TBox -->
</Tabs>
</BasicDrawer>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { Tabs } from 'ant-design-vue';
import Detail from '../tabs/Detail.vue';
// import RealTimeData from '../tabs/RealTimeData.vue';
import Alarm from '../tabs/Alarm.vue';
import ChildDevice from '../tabs/ChildDevice.vue';
import TBoxDetail from '../tabs/TBoxDetail.vue';
import CommandIssuance from '../tabs/CommandIssuance.vue';
import { CommandRecord } from '../tabs/commandRecord/index';
import { getDeviceDetail } from '/@/api/device/deviceManager';
// import HistoryData from '../tabs/HistoryData.vue';
import ModelOfMatter from '../tabs/ModelOfMatter.vue';
export default defineComponent({
name: 'DeviceModal',
components: {
BasicDrawer,
Tabs,
TabPane: Tabs.TabPane,
Detail,
// RealTimeData,
Alarm,
ChildDevice,
CommandIssuance,
TBoxDetail,
// HistoryData,
ModelOfMatter,
CommandRecord,
},
emits: ['reload', 'register', 'openTbDeviceDetail', 'openGatewayDeviceDetail'],
setup(_props, { emit }) {
const activeKey = ref('1');
const size = ref('small');
const deviceDetailRef = ref();
const deviceDetail = ref<any>({});
const tbDeviceId = ref('');
// 详情回显
const [register] = useDrawerInner(async (data) => {
const { id } = data;
// 设备详情
const res = await getDeviceDetail(id);
deviceDetail.value = res;
const { latitude, longitude, address } = res.deviceInfo;
if (latitude) {
deviceDetailRef.value.initMap(longitude, latitude, address);
}
});
const closeDrawer = () => {
activeKey.value = '1';
};
const handleOpenTbDeviceDetail = (data: { id: string; tbDeviceId: string }) => {
emit('openTbDeviceDetail', data);
};
const handleOpenGatewayDevice = (data: { gatewayId: string; tbDeviceId: string }) => {
emit('openGatewayDeviceDetail', { id: data.gatewayId });
};
return {
size,
activeKey,
register,
closeDrawer,
deviceDetail,
deviceDetailRef,
tbDeviceId,
handleOpenTbDeviceDetail,
handleOpenGatewayDevice,
};
},
});
</script>