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
import React, { memo, useState } from 'react'
import { Card, Divider, Spin } from 'antd'
import DirectoryTree from '@/components/DirectoryTree'
import { ApartmentOutlined, SearchOutlined } from '@ant-design/icons'
import style from '../index.less'
const SlideTree = (props) => {
const {
onSelect,
data: list,
loading
} = props;
const [expandedKeys, setExpandedKeys] = useState([])
const [autoExpandParent, setAutoExpandParent] = useState(false)
const createSystemTree = (data) => {
if (!data || data?.length === 0) return [];
return data.map((item) => {
const users = item?.deviceList || []
const meters = item.meterList || []
let children = createSystemTree(item.subList);
// if (item?.meterList) {
// const arr = createSystemTree(item?.meterList)
// children = children?.length > 0 ? children.concat(arr) : arr
// }
// if (item?.deviceList) {
// const arr = createSystemTree(item?.deviceList)
// children = children?.length > 0 ? children.concat(arr) : arr
// }
if (users.length > 0) {
const deviceList = users.map((user) => {
const child = user?.meterList?.map(items => ({
title: items?.name,
key: `meter-${items.id}`,
code: items?.code,
icon: <svg className="icon" aria-hidden="true" style={{width: '50%',height: '100%',marginRight: 5}}>
<use xlinkHref="#icon-yibiao"></use>
</svg>,
selectable: true
}))
return {
title: user.name,
key: `device-${user.id}`,
code: user?.code,
icon: <svg className="icon" aria-hidden="true" style={{width: '50%',height: '100%',marginRight: 5}}>
<use xlinkHref="#icon-shebeiguanli1"></use>
</svg>,
children: child,
selectable: true
}
})
children = children?.length > 0 ? children.concat(deviceList) : deviceList
}
if (meters?.length > 0) {
const meterList = meters.map((meter) => ({
title: meter.name,
key: `meter-${meter.id}`,
code: meter?.code,
icon: <svg className="icon" aria-hidden="true" style={{width: '50%',height: '100%',marginRight: 5}}>
<use xlinkHref="#icon-yibiao"></use>
</svg>,
selectable: true
}))
children = children?.length > 0 ? children.concat(meterList) : meterList
}
return {
title: item.name,
key: item.id,
children,
selectable: false,
icon: <svg className="icon" aria-hidden="true" style={{width: '50%',height: '100%',marginRight: 5}}>
<use xlinkHref="#icon-xitongpeizhi"></use>
</svg>
}
})
};
const selectNodeAction = (selectedKeys, e) => {
const { node, selected } = e
if (onSelect) {
onSelect({ keys: selectedKeys, key: node.key, title: node.title, selected })
}
}
const onExpand = expandedKeys => {
setExpandedKeys(expandedKeys)
setAutoExpandParent(false)
};
const treeData = createSystemTree(list)
return (
<Card className={style.tree} style={{ marginRight: 16 }} bodyStyle={{padding: 0}}>
<h3 className={style.h3_title} style={{ borderLeft: '2px solid #479038' }}>系统拓扑</h3>
<Divider style={{ margin: 0 }} />
<div style={{height: '80vh', overflowY: "auto"}}>
<Spin spinning={loading || false}>
<DirectoryTree
// className={style.slideTree}
// style={{ width: 290, overflow: 'auto' }}
directoryData={treeData}
blockNode={true}
onSelect={selectNodeAction}
onExpand={onExpand}
expandedKeys={expandedKeys}
autoExpandParent={autoExpandParent}
searchCode={true}
/>
</Spin>
</div>
</Card>
)
}
export default memo(SlideTree);