DeviceDetailDrawer.vue
4.24 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
<template>
<BasicDrawer
v-bind="$attrs"
isDetail
@register="register"
destroyOnClose
@close="closeDrawer"
:title="drawerTitle"
width="80%"
>
<Tabs v-model:activeKey="activeKey" :size="size">
<Tabs.TabPane key="1" tab="详情">
<Detail
ref="deviceDetailRef"
:deviceDetail="deviceDetail"
@open-gateway-device="handleOpenGatewayDevice"
/>
</Tabs.TabPane>
<Tabs.TabPane key="modelOfMatter" tab="物模型数据">
<ModelOfMatter :deviceDetail="deviceDetail" />
</Tabs.TabPane>
<Tabs.TabPane key="3">
<template #tab>
<Badge :offset="[2, -5]" style="color: inherit">
<span>告警</span>
<template #count>
<div
:style="{ visibility: deviceDetail.alarmStatus ? 'visible' : 'hidden' }"
class="w-3.5 h-3.5 !flex justify-center items-center rounded-1 border-red-400 border"
>
<Icon icon="mdi:bell-warning" color="#f46161" :size="12" class="!mr-0" />
</div>
</template>
</Badge>
</template>
<AlarmLog :device-id="deviceDetail.id" class="bg-gray-100" />
</Tabs.TabPane>
<Tabs.TabPane key="4" tab="子设备" v-if="deviceDetail?.deviceType === 'GATEWAY'">
<ChildDevice
:fromId="deviceDetail?.tbDeviceId"
@openTbDeviceDetail="handleOpenTbDeviceDetail"
/>
</Tabs.TabPane>
<Tabs.TabPane key="7" tab="命令下发记录">
<CommandRecord :deviceDetail="deviceDetail" :fromId="deviceDetail?.tbDeviceId" />
</Tabs.TabPane>
<!-- 网关设备并且场家是TBox -->
<Tabs.TabPane
key="6"
tab="TBox"
v-if="deviceDetail?.deviceType === 'GATEWAY' && deviceDetail?.brand == 'TBox'"
>
<TBoxDetail :deviceDetail="deviceDetail" />
</Tabs.TabPane>
<Tabs.TabPane key="eventManage" tab="事件管理">
<EventManage :tbDeviceId="deviceDetail.tbDeviceId" />
</Tabs.TabPane>
<Tabs.TabPane key="task" tab="任务">
<Task :tbDeviceId="deviceDetail.tbDeviceId" />
</Tabs.TabPane>
</Tabs>
</BasicDrawer>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { Tabs, Badge } from 'ant-design-vue';
import Detail from '../tabs/Detail.vue';
import ChildDevice from '../tabs/ChildDevice.vue';
import TBoxDetail from '../tabs/TBoxDetail.vue';
import { CommandRecord } from '../tabs/commandRecord/index';
import { getDeviceDetail } from '/@/api/device/deviceManager';
import ModelOfMatter from '../tabs/ModelOfMatter.vue';
import EventManage from '../tabs/EventManage/index.vue';
import { DeviceRecord } from '/@/api/device/model/deviceModel';
import Task from '../tabs/Task.vue';
import AlarmLog from '/@/views/alarm/log/index.vue';
import { Icon } from '/@/components/Icon';
const emit = defineEmits(['reload', 'register', 'openTbDeviceDetail', 'openGatewayDeviceDetail']);
const activeKey = ref('1');
const size = ref('small');
const deviceDetailRef = ref();
const deviceDetail = ref<DeviceRecord>({} as unknown as DeviceRecord);
const isTransportType = ref<Boolean>(false); //获取产品是不是GB/T 28181
// 详情回显
const [register] = useDrawerInner(async (data) => {
const { id, transportType, deviceType } = data || {};
isTransportType.value =
transportType == 'GB/T28181' && deviceType == 'DIRECT_CONNECTION' ? true : false;
// 设备详情
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 });
};
const drawerTitle = computed(() => {
return deviceDetail.value?.alias || deviceDetail.value?.name;
});
</script>