mcfxkh-Web/src/views/Home/panels/Shksh/index.js

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: '龙池桥街道',lgtd:115.02073188,lttd:31.18672346,count:2 },
        { id: '420981002', name: '木子店镇',lgtd:115.36181316,lttd:31.1908325,count:2},
        { id: '420981003', name: '黄土岗镇',lgtd:115.07167872,lttd:31.37496863,count:2 },
        { id: '420981004', name: '宋埠镇',lgtd:114.8003577,lttd:31.07316308,count:2 },
        { id: '420981005', name: '南湖街道',lgtd:114.99464754,lttd:31.16857964,count:2},
      ],
    },
  ];
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 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: 13,
          pitch: config.poiPitch,
          bearing: 0
        });
      }
    }
  const [tableData, setTableData] = useState([])
  const handleNodeSelect = (event, nodeId) => {
    setTableData(dataObj[nodeId])
    const row = machengData[0].children.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>
              {/* <DpTableCell align="right">警戒水位</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;