244 lines
8.1 KiB
JavaScript
244 lines
8.1 KiB
JavaScript
import React, { useMemo, useState } from 'react';
|
|
import PanelBox from '../../components/PanelBox';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { Switch, FormControlLabel, InputLabel, Select, MenuItem, FormControl } from '@material-ui/core/index'
|
|
import { styled } from '@material-ui/styles';
|
|
import { TreeView, TreeItem } from '@material-ui/lab';
|
|
import { makeStyles } from '@material-ui/styles';
|
|
import ExpandMore from '@material-ui/icons/ExpandMore';
|
|
import ChevronRight from '@material-ui/icons/ChevronRight';
|
|
import FolderIcon from '@material-ui/icons/Folder';
|
|
import Box from '@material-ui/core/Box';
|
|
import Table from '@material-ui/core/Table';
|
|
import TableContainer from '@material-ui/core/TableContainer';
|
|
import TableBody from '@material-ui/core/TableBody';
|
|
import TableHead from '@material-ui/core/TableHead';
|
|
import TableRow from '@material-ui/core/TableRow';
|
|
import DpTableCell from '../../../../layouts/mui/DpTableCell';
|
|
import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
|
import config from '../../../../config';
|
|
|
|
function HDReal({ style, onSelect }) {
|
|
const dispatch = useDispatch();
|
|
const machengData = [
|
|
{
|
|
id: '420981',
|
|
name: '麻城市',
|
|
children: [
|
|
{
|
|
id: '420981001', name: '龙池桥街道',
|
|
children: [{ id: '4209810011', name: '园林社区居民委员会山洪灾害防御预案', lgtd: 115.02073188, lttd: 31.18672346 },
|
|
{ id: '4209810012', name: '城西社区居民委员会山洪灾害防御预案', lgtd: 115.02073188, lttd: 31.18672346 }
|
|
]
|
|
},
|
|
{
|
|
id: '420981002', name: '木子店镇',
|
|
children:[{id: '4209810021', name: '木子店镇山洪灾害防御预案', lgtd: 115.36181316, lttd: 31.1908325}]
|
|
},
|
|
{
|
|
id: '420981003', name: '黄土岗镇',
|
|
children:[{id: '4209810031', name: '黄土岗镇山洪灾害防御预案', lgtd: 115.07167872, lttd: 31.3749686}]
|
|
},
|
|
{
|
|
id: '420981004', name: '宋埠镇',
|
|
children:[],
|
|
},
|
|
{
|
|
id: '420981005', name: '南湖街道',
|
|
children:[],
|
|
},
|
|
],
|
|
},
|
|
];
|
|
const useStyles = makeStyles({
|
|
root: {
|
|
height: 240,
|
|
flexGrow: 1,
|
|
maxWidth: 400,
|
|
color: '#ffffff',
|
|
'& .MuiTreeItem-root': {
|
|
backgroundColor: 'transparent',
|
|
'&:hover': {
|
|
backgroundColor: 'rgba(255, 255, 255, 0.08)'
|
|
},
|
|
'&.Mui-selected': {
|
|
backgroundColor: 'rgba(255, 255, 255, 0.16)',
|
|
'&:hover': {
|
|
backgroundColor: 'rgba(255, 255, 255, 0.24)'
|
|
}
|
|
}
|
|
},
|
|
'& .MuiTreeItem-content': {
|
|
backgroundColor: 'transparent',
|
|
color: '#ffffff'
|
|
},
|
|
'& .MuiSvgIcon-root': {
|
|
color: '#ffffff'
|
|
}
|
|
},
|
|
labelRoot: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
padding: '2px 0'
|
|
},
|
|
labelIcon: {
|
|
marginRight: 8,
|
|
fontSize: 20
|
|
},
|
|
labelText: {
|
|
fontWeight: 'inherit',
|
|
flexGrow: 1
|
|
},
|
|
numberText: {
|
|
marginLeft: 8,
|
|
fontSize: '0.85em',
|
|
opacity: 0.8
|
|
}
|
|
});
|
|
const flattenArray = (data) => {
|
|
const result = [];
|
|
|
|
const flatten = (item) => {
|
|
// 保存当前节点信息
|
|
const { children, ...rest } = item;
|
|
result.push(rest);
|
|
|
|
// 递归处理子节点
|
|
if (children && children.length > 0) {
|
|
children.forEach(child => flatten(child));
|
|
}
|
|
};
|
|
|
|
// 处理根节点
|
|
data.forEach(item => flatten(item));
|
|
|
|
return result;
|
|
};
|
|
|
|
const classes = useStyles();
|
|
const renderTree = (nodes) => {
|
|
const labelContent = (
|
|
<Box className={classes.labelRoot}>
|
|
<FolderIcon className={classes.labelIcon} />
|
|
<Box className={classes.labelText}>{nodes.name}</Box>
|
|
{/* <Box className={classes.numberText}>{!nodes.children ? `(${nodes.count})`:''}</Box> */}
|
|
</Box>
|
|
);
|
|
return (
|
|
<TreeItem
|
|
key={nodes.id}
|
|
nodeId={nodes.id}
|
|
label={labelContent}
|
|
classes={{
|
|
root: classes.treeItem,
|
|
selected: classes.selected,
|
|
}}
|
|
>
|
|
{Array.isArray(nodes.children)
|
|
? nodes.children.map((node) => renderTree(node))
|
|
: null}
|
|
</TreeItem>
|
|
)
|
|
}
|
|
const dataObj = {
|
|
'420981': [{ planName: '园林社区居民委员会山洪灾害防御预案', id: '1' }, { planName: '城西社区居民委员会山洪灾害防御预案', id: '2' },
|
|
{ planName: '木子店镇山洪灾害防御预案', id: '1' }, { planName: '大堰河村村民委员会山洪灾害防御预案', id: '2' },
|
|
{ planName: '黄土岗镇山洪灾害防御预案', id: '1' }, { planName: '土城村村民委员会山洪灾害防御预案', id: '2' },
|
|
{ planName: '宋埠镇山洪灾害防御预案', id: '1' }, { planName: '拜郊村村民委员会山洪灾害防御预案', id: '2' },
|
|
{ planName: '南湖街道山洪灾害防御预案', id: '1' }, { planName: '五里墩社区居民委员会山洪灾害防御预案', id: '2' }
|
|
],
|
|
'420981001': [{ planName: '园林社区居民委员会山洪灾害防御预案', id: '1' }, { planName: '城西社区居民委员会山洪灾害防御预案', id: '2' }],
|
|
'420981002': [{ planName: '木子店镇山洪灾害防御预案', id: '1' }, { planName: '大堰河村村民委员会山洪灾害防御预案', id: '2' }],
|
|
'420981003':[{ planName: '黄土岗镇山洪灾害防御预案', id: '1' }, { planName: '土城村村民委员会山洪灾害防御预案', id: '2' }],
|
|
'420981004':[{ planName: '宋埠镇山洪灾害防御预案', id: '1' }, { planName: '拜郊村村民委员会山洪灾害防御预案', id: '2' }],
|
|
'420981005':[{ planName: '南湖街道山洪灾害防御预案', id: '1' }, { planName: '五里墩社区居民委员会山洪灾害防御预案', id: '2' }],
|
|
}
|
|
const flyTo = (record) => {
|
|
const { lgtd, lttd } = record;
|
|
if (lgtd && lttd) {
|
|
dispatch.runtime.setFeaturePop({ type: '', properties: record, coordinates: [lgtd, lttd] });
|
|
dispatch.runtime.setCameraTarget({
|
|
center: [lgtd, lttd + config.poiPositionOffsetY.drp],
|
|
zoom: 14,
|
|
pitch: config.poiPitch,
|
|
bearing: 0
|
|
});
|
|
}
|
|
}
|
|
const [tableData, setTableData] = useState([])
|
|
const handleNodeSelect = (event, nodeId) => {
|
|
setTableData(dataObj[nodeId])
|
|
const flatData = flattenArray(machengData);
|
|
const row = flatData.find(item => item.id == nodeId)
|
|
dispatch.runtime.setShksh(row)
|
|
flyTo(row)
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 获取所有节点ID的函数
|
|
const getAllNodeIds = (nodes) => {
|
|
if (Array.isArray(nodes)) {
|
|
return nodes.reduce((ids, node) => [...ids, ...getAllNodeIds(node)], []);
|
|
}
|
|
let ids = [nodes.id];
|
|
if (nodes.children) {
|
|
nodes.children.forEach(child => {
|
|
ids = [...ids, ...getAllNodeIds(child)];
|
|
});
|
|
}
|
|
return ids;
|
|
};
|
|
|
|
// 获取所有节点ID
|
|
const expandedIds = getAllNodeIds(machengData);
|
|
|
|
return (
|
|
<PanelBox
|
|
style={style}
|
|
title="山洪可视化预案"
|
|
color="green"
|
|
>
|
|
<div style={{padding:'10px 8px'}}>
|
|
<div style={{color:"#fff"}}>区域选择</div>
|
|
<TreeView
|
|
className={classes.root}
|
|
defaultCollapseIcon={<ExpandMore />}
|
|
defaultExpandIcon={<ChevronRight />}
|
|
onNodeSelect={handleNodeSelect}
|
|
defaultExpanded={expandedIds}
|
|
>
|
|
{renderTree(machengData[0])}
|
|
</TreeView>
|
|
{/* <div style={{ color: "#fff",marginBottom:20}}>预案列表</div>
|
|
<TableContainer style={{ height: '100%' }}>
|
|
<Table size="small" stickyHeader>
|
|
<TableHead>
|
|
<TableRow>
|
|
<DpTableCell style={{ width: '100%' }} align="left">预案名称</DpTableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{tableData.map((row) => (
|
|
<DpTableRow key={row.id}>
|
|
<DpTableCell align="left">
|
|
<div
|
|
className="table-ellipsis cursor-pointer"
|
|
>{row.planName}</div>
|
|
|
|
</DpTableCell>
|
|
</DpTableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer> */}
|
|
</div>
|
|
</PanelBox>
|
|
)
|
|
}
|
|
|
|
export default HDReal;
|