DeviceDetailDrawer.vue
4.31 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
128
129
130
131
132
133
134
<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 -->
<TabPane key="eventManage" tab="事件管理">
<EventManage />
</TabPane>
</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';
import EventManage from '../tabs/EventManage/index.vue';
export default defineComponent({
name: 'DeviceModal',
components: {
BasicDrawer,
Tabs,
TabPane: Tabs.TabPane,
Detail,
// RealTimeData,
Alarm,
ChildDevice,
CommandIssuance,
TBoxDetail,
// HistoryData,
ModelOfMatter,
CommandRecord,
EventManage,
},
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>