wanyiwei
2 years ago
3 changed files with 181 additions and 1 deletions
@ -1,8 +1,13 @@ |
|||||
import React from 'react' |
import React from 'react' |
||||
|
import Left from './left' |
||||
|
import Right from './right' |
||||
|
|
||||
const Operation = () => { |
const Operation = () => { |
||||
return ( |
return ( |
||||
<>运营</> |
<div style={{ display: 'flex', width: '100%',height: '100%',justifyContent: 'space-between' }}> |
||||
|
<Left /> |
||||
|
<Right /> |
||||
|
</div> |
||||
) |
) |
||||
} |
} |
||||
export default Operation |
export default Operation |
@ -0,0 +1,166 @@ |
|||||
|
import React, { useMemo, useState, useEffect } from 'react'; |
||||
|
import { Col, Row, Input, Tree } from 'antd' |
||||
|
import Module from '../../public/module' |
||||
|
|
||||
|
const { Search } = Input; |
||||
|
const x = 3; |
||||
|
const y = 2; |
||||
|
const z = 1; |
||||
|
const defaultData = []; |
||||
|
|
||||
|
const generateData = (_level, _preKey, _tns) => { |
||||
|
const preKey = _preKey || '0'; |
||||
|
const tns = _tns || defaultData; |
||||
|
const children = []; |
||||
|
|
||||
|
for (let i = 0; i < x; i++) { |
||||
|
const key = `${preKey}-${i}`; |
||||
|
tns.push({ |
||||
|
title: key, |
||||
|
key, |
||||
|
}); |
||||
|
|
||||
|
if (i < y) { |
||||
|
children.push(key); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (_level < 0) { |
||||
|
return tns; |
||||
|
} |
||||
|
|
||||
|
const level = _level - 1; |
||||
|
children.forEach((key, index) => { |
||||
|
tns[index].children = []; |
||||
|
return generateData(level, key, tns[index].children); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
generateData(z); |
||||
|
const dataList = []; |
||||
|
|
||||
|
const generateList = (data) => { |
||||
|
for (let i = 0; i < data.length; i++) { |
||||
|
const node = data[i]; |
||||
|
const { key } = node; |
||||
|
dataList.push({ |
||||
|
key, |
||||
|
title: key, |
||||
|
}); |
||||
|
|
||||
|
if (node.children) { |
||||
|
generateList(node.children); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
generateList(defaultData); |
||||
|
|
||||
|
const getParentKey = (key, tree) => { |
||||
|
let parentKey; |
||||
|
|
||||
|
for (let i = 0; i < tree.length; i++) { |
||||
|
const node = tree[i]; |
||||
|
|
||||
|
if (node.children) { |
||||
|
if (node.children.some((item) => item.key === key)) { |
||||
|
parentKey = node.key; |
||||
|
} else if (getParentKey(key, node.children)) { |
||||
|
parentKey = getParentKey(key, node.children); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return parentKey; |
||||
|
}; |
||||
|
|
||||
|
const Left = () => { |
||||
|
|
||||
|
useEffect(() => { |
||||
|
|
||||
|
}, []) |
||||
|
|
||||
|
const style = { height: "97%", marginTop: "3%" } |
||||
|
const [expandedKeys, setExpandedKeys] = useState([]); |
||||
|
const [searchValue, setSearchValue] = useState(''); |
||||
|
const [autoExpandParent, setAutoExpandParent] = useState(true); |
||||
|
|
||||
|
const onExpand = (newExpandedKeys) => { |
||||
|
setExpandedKeys(newExpandedKeys); |
||||
|
setAutoExpandParent(false); |
||||
|
}; |
||||
|
|
||||
|
const onChange = (e) => { |
||||
|
const { value } = e.target; |
||||
|
const newExpandedKeys = dataList |
||||
|
.map((item) => { |
||||
|
if (item.title.indexOf(value) > -1) { |
||||
|
return getParentKey(item.key, defaultData); |
||||
|
} |
||||
|
|
||||
|
return null; |
||||
|
}) |
||||
|
.filter((item, i, self) => item && self.indexOf(item) === i); |
||||
|
setExpandedKeys(newExpandedKeys); |
||||
|
setSearchValue(value); |
||||
|
setAutoExpandParent(true); |
||||
|
}; |
||||
|
|
||||
|
const treeData = useMemo(() => { |
||||
|
const loop = (data) => |
||||
|
data.map((item) => { |
||||
|
const strTitle = item.title; |
||||
|
const index = strTitle.indexOf(searchValue); |
||||
|
const beforeStr = strTitle.substring(0, index); |
||||
|
const afterStr = strTitle.slice(index + searchValue.length); |
||||
|
const title = |
||||
|
index > -1 ? ( |
||||
|
<span> |
||||
|
{beforeStr} |
||||
|
<span className="site-tree-search-value">{searchValue}</span> |
||||
|
{afterStr} |
||||
|
</span> |
||||
|
) : ( |
||||
|
<span>{strTitle}</span> |
||||
|
); |
||||
|
|
||||
|
if (item.children) { |
||||
|
return { |
||||
|
title, |
||||
|
key: item.key, |
||||
|
children: loop(item.children), |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
title, |
||||
|
key: item.key, |
||||
|
}; |
||||
|
}); |
||||
|
|
||||
|
return loop(defaultData); |
||||
|
}, [searchValue]); |
||||
|
return ( |
||||
|
<div style={{ display: 'flex', flexDirection: 'column', width: "23%", height: "100%", marginLeft: "1%" }}> |
||||
|
<Module style={style} title={"公交车辆信息"}> |
||||
|
<div style={{width:'90%', height:'96', margin:'2% 5%',}}> |
||||
|
<Input |
||||
|
style={{ |
||||
|
marginBottom: 8, |
||||
|
}} |
||||
|
// placeholder="Search"
|
||||
|
onChange={onChange} |
||||
|
/> |
||||
|
<Tree |
||||
|
onExpand={onExpand} |
||||
|
expandedKeys={expandedKeys} |
||||
|
autoExpandParent={autoExpandParent} |
||||
|
treeData={treeData} |
||||
|
/> |
||||
|
</div> |
||||
|
</Module> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default Left; |
@ -0,0 +1,9 @@ |
|||||
|
import React from 'react' |
||||
|
|
||||
|
const Right = () => { |
||||
|
return ( |
||||
|
<div style={{ display: 'flex', flexDirection: 'column', width: "23%", height: "100%", marginRight: "1%", }}>555555555 |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
|
export default Right |
Loading…
Reference in new issue