Merge branch 'lsf-dev'

lsf-dev
李神峰 2025-06-03 19:32:08 +08:00
commit 6aaefa59f5
7 changed files with 213 additions and 41 deletions

View File

@ -211,9 +211,9 @@ const map = {
}); });
} else if (id === 6) { } else if (id === 6) {
layerVisible = { layerVisible = {
RealDrpLayer: false, RealDrpLayer: true,
RealHDLayer: false, RealHDLayer: true,
RealSkLayer: false, RealSkLayer: true,
BxSkLayer: true, BxSkLayer: true,
FzdxLayer: false, FzdxLayer: false,
WataLayer: false, WataLayer: false,

View File

@ -73,6 +73,15 @@ const useStyles = makeStyles((theme) => ({
backgroundColor: 'rgba(255,255,255,0.1)' backgroundColor: 'rgba(255,255,255,0.1)'
} }
}, },
warningRow: {
'&.pink': { backgroundColor: 'rgba(255,192,203,0.5)' },
'&.purple': { backgroundColor: 'rgba(147,112,219,0.5)' },
'&.blue': { backgroundColor: 'rgba(135,206,235,0.5)' },
'&.blue1': { backgroundColor: 'rgba(135,206,235,0.4)' },
'&.blue2': { backgroundColor: 'rgba(135,206,235,0.3)' },
'&.green': { backgroundColor: 'rgba(144,238,144,0.5)' }
},
expandedRow: { expandedRow: {
'&.pink': { backgroundColor: 'rgba(255,192,203,0.1)' }, '&.pink': { backgroundColor: 'rgba(255,192,203,0.1)' },
'&.purple': { backgroundColor: 'rgba(147,112,219,0.1)' }, '&.purple': { backgroundColor: 'rgba(147,112,219,0.1)' },
@ -103,8 +112,8 @@ export default function Overall({ style }) {
{ id: 'history', name: '历史极值站点', count: 0, color: 'pink' }, { id: 'history', name: '历史极值站点', count: 0, color: 'pink' },
{ id: '100year', name: '100年一遇以上站点', count: 0, color: 'purple' }, { id: '100year', name: '100年一遇以上站点', count: 0, color: 'purple' },
{ id: '50year', name: '50年一遇以上站点', count: 0, color: 'blue' }, { id: '50year', name: '50年一遇以上站点', count: 0, color: 'blue' },
{ id: 'special', name: '特大暴雨站点', count: 0, color: 'blue' }, { id: 'special', name: '特大暴雨站点', count: 0, color: 'blue1' },
{ id: 'heavy', name: '大暴雨站点', count: 0, color: 'blue' }, { id: 'heavy', name: '大暴雨站点', count: 0, color: 'blue2' },
{ id: 'storm', name: '暴雨站点', count: 0, color: 'green' } { id: 'storm', name: '暴雨站点', count: 0, color: 'green' }
]; ];
@ -178,7 +187,10 @@ export default function Overall({ style }) {
<TableBody> <TableBody>
{stations.map((station) => ( {stations.map((station) => (
<React.Fragment key={station.id}> <React.Fragment key={station.id}>
<TableRow className={classes.stationRow}> <TableRow
// className={classes.stationRow}
className={`${classes.warningRow} ${station.color}`}
>
<TableCell> <TableCell>
<Box display="flex" alignItems="center"> <Box display="flex" alignItems="center">
<IconButton <IconButton

View File

@ -244,10 +244,10 @@ function FzjcLayers({ style }) {
<FormControlLabel value="xz" control={<Radio />} label="行政村" /> <FormControlLabel value="xz" control={<Radio />} label="行政村" />
</RadioGroup> </RadioGroup>
</StyledFormControl> </StyledFormControl>
<CustomTextField {/* <CustomTextField
label="预案查询" label="预案查询"
style={{width:'150px'}} style={{width:'150px'}}
onChange={(e) => console.log(e.target.value)}/> onChange={(e) => console.log(e.target.value)}/> */}
</div> </div>
{ {
type == 'sh' ? type == 'sh' ?

View File

@ -75,10 +75,10 @@ const useStyles = makeStyles((theme) => ({
}, },
warningRow: { warningRow: {
'&.pink': { '&.pink': {
backgroundColor: '#fed4db' backgroundColor: 'rgba(254, 212, 219,0.5)'
}, },
'&.purple': { '&.purple': {
backgroundColor: '#fceccf' backgroundColor: 'rgba(252, 236, 207,0.5)'
} }
}, },
expandedRow: { expandedRow: {

View File

@ -42,10 +42,10 @@ const useStyles = makeStyles((theme) => ({
}, },
warningRow: { warningRow: {
'&.immediate': { '&.immediate': {
backgroundColor: '#d32f2f' backgroundColor: 'rgba(211, 47, 47,0.5)'
}, },
'&.prepare': { '&.prepare': {
backgroundColor: '#ed6c02' backgroundColor: 'rgba(237, 108, 2,0.5)'
} }
}, },
expandIcon: { expandIcon: {
@ -103,7 +103,7 @@ export default function Overall({ style }) {
{ {
type: 'immediate', type: 'immediate',
label: '立即转移', label: '立即转移',
count: 0, count: 3,
details: [] // 这里可以添加详细信息的数组 details: [] // 这里可以添加详细信息的数组
}, },
{ {
@ -146,6 +146,24 @@ export default function Overall({ style }) {
}, []) }, [])
const zyData = [
{
adnm: '石桥湾村',
tm: '2025-05-22 12:03:00',
status: '关闭预警'
},
{
adnm: '凉亭村',
tm: '2025-05-22 12:03:00',
status: '关闭预警'
},
{
adnm: '古城村',
tm: '2025-05-22 12:03:00',
status: '关闭预警'
}
]
return ( return (
<PanelBox <PanelBox
style={style} style={style}
@ -216,7 +234,25 @@ export default function Overall({ style }) {
<Collapse in={expanded[row.type]} timeout="auto" unmountOnExit> <Collapse in={expanded[row.type]} timeout="auto" unmountOnExit>
<Box className={classes.expandedContent}> <Box className={classes.expandedContent}>
{/* 这里可以添加展开后显示的详细内容 */} {/* 这里可以添加展开后显示的详细内容 */}
<Typography>暂无详细信息</Typography> {/* <Typography>暂无详细信息</Typography> */}
{
row.type == 'immediate' ? zyData.map(item => (
<TableRow>
<TableCell style={{ width: '30%' }}><div
className="table-ellipsis cursor-pointer"
>{item.adnm}</div></TableCell>
<TableCell style={{ width: '40%' }}><div
className="table-ellipsis cursor-pointer"
>{item.tm}</div></TableCell>
<TableCell style={{ width: '30%' }}><div
className="table-ellipsis cursor-pointer"
>{item.status}</div></TableCell>
</TableRow>
))
:
<Typography>暂无详细信息</Typography>
}
</Box> </Box>
</Collapse> </Collapse>
</TableCell> </TableCell>
@ -229,15 +265,15 @@ export default function Overall({ style }) {
<Box className={classes.statsSection}> <Box className={classes.statsSection}>
<Typography variant="h6" className={classes.statsTitle}> <Typography variant="h6" className={classes.statsTitle}>
预警统计: 0 预警统计: 3
</Typography> </Typography>
<Box className={classes.warningStats}> <Box className={classes.warningStats}>
{warningData.map((stat) => ( {warningData.map((stat) => (
<Box key={stat.type} className={classes.statItem}> <Box key={stat.type} className={classes.statItem}>
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<div> <div>
<WarningIcon className={`${classes.warningIcon} ${stat.type}`} /> <WarningIcon className={`${classes.warningIcon} ${stat.type}`} />
<Typography>{stat.label}</Typography> <Typography>{stat.label}</Typography>
</div> </div>
<Typography variant="h6" style={{ color: '#fff' }}>{stat.count}</Typography> <Typography variant="h6" style={{ color: '#fff' }}>{stat.count}</Typography>
</div> </div>

View File

@ -25,11 +25,28 @@ function HDReal({ style, onSelect }) {
id: '420981', id: '420981',
name: '麻城市', name: '麻城市',
children: [ children: [
{ id: '420981001', name: '龙池桥街道',lgtd:115.02073188,lttd:31.18672346,count:2 }, {
{ id: '420981002', name: '木子店镇',lgtd:115.36181316,lttd:31.1908325,count:2}, id: '420981001', name: '龙池桥街道',
{ id: '420981003', name: '黄土岗镇',lgtd:115.07167872,lttd:31.37496863,count:2 }, children: [{ id: '4209810011', name: '园林社区居民委员会山洪灾害防御预案', lgtd: 115.02073188, lttd: 31.18672346 },
{ id: '420981004', name: '宋埠镇',lgtd:114.8003577,lttd:31.07316308,count:2 }, { id: '4209810012', name: '城西社区居民委员会山洪灾害防御预案', lgtd: 115.02073188, lttd: 31.18672346 }
{ id: '420981005', name: '南湖街道',lgtd:114.99464754,lttd:31.16857964,count:2}, ]
},
{
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:[],
},
], ],
}, },
]; ];
@ -78,6 +95,25 @@ const useStyles = makeStyles({
opacity: 0.8 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 classes = useStyles();
const renderTree = (nodes) => { const renderTree = (nodes) => {
@ -85,7 +121,7 @@ const useStyles = makeStyles({
<Box className={classes.labelRoot}> <Box className={classes.labelRoot}>
<FolderIcon className={classes.labelIcon} /> <FolderIcon className={classes.labelIcon} />
<Box className={classes.labelText}>{nodes.name}</Box> <Box className={classes.labelText}>{nodes.name}</Box>
<Box className={classes.numberText}>{!nodes.children ? `(${nodes.count})`:''}</Box> {/* <Box className={classes.numberText}>{!nodes.children ? `(${nodes.count})`:''}</Box> */}
</Box> </Box>
); );
return ( return (
@ -132,7 +168,8 @@ const useStyles = makeStyles({
const [tableData, setTableData] = useState([]) const [tableData, setTableData] = useState([])
const handleNodeSelect = (event, nodeId) => { const handleNodeSelect = (event, nodeId) => {
setTableData(dataObj[nodeId]) setTableData(dataObj[nodeId])
const row = machengData[0].children.find(item => item.id == nodeId) const flatData = flattenArray(machengData);
const row = flatData.find(item => item.id == nodeId)
dispatch.runtime.setShksh(row) dispatch.runtime.setShksh(row)
flyTo(row) flyTo(row)
}; };
@ -176,13 +213,12 @@ const useStyles = makeStyles({
> >
{renderTree(machengData[0])} {renderTree(machengData[0])}
</TreeView> </TreeView>
<div style={{ color: "#fff",marginBottom:20}}>预案列表</div> {/* <div style={{ color: "#fff",marginBottom:20}}></div>
<TableContainer style={{ height: '100%' }}> <TableContainer style={{ height: '100%' }}>
<Table size="small" stickyHeader> <Table size="small" stickyHeader>
<TableHead> <TableHead>
<TableRow> <TableRow>
<DpTableCell style={{ width: '100%' }} align="left">预案名称</DpTableCell> <DpTableCell style={{ width: '100%' }} align="left">预案名称</DpTableCell>
{/* <DpTableCell align="right">警戒水位</DpTableCell> */}
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
@ -198,7 +234,7 @@ const useStyles = makeStyles({
))} ))}
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer> */}
</div> </div>
</PanelBox> </PanelBox>
) )

View File

@ -4,6 +4,8 @@ import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox'; import PanelBox from '../../components/PanelBox';
import OverallContent from './OverallContent'; import OverallContent from './OverallContent';
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/core/styles';
import { InfoPopNames } from '../../InfoPops';
import { import {
Box, Box,
Typography, Typography,
@ -20,6 +22,9 @@ import {
IconButton, IconButton,
Collapse Collapse
} from '@material-ui/core'; } from '@material-ui/core';
import { useDispatch, useSelector } from 'react-redux';
import config from '../../../../config';
import AddIcon from '@material-ui/icons/Add'; import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove'; import RemoveIcon from '@material-ui/icons/Remove';
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
@ -73,6 +78,17 @@ const useStyles = makeStyles((theme) => ({
backgroundColor: 'rgba(255,255,255,0.1)' backgroundColor: 'rgba(255,255,255,0.1)'
} }
}, },
warningRow: {
'&.pink': {
backgroundColor: 'rgba(255,192,203,0.8)'
},
'&.purple': {
backgroundColor: 'rgba(252, 236, 207,0.8)'
},
'&.blue': {
backgroundColor: 'rgba(252, 236, 207,0.5)'
}
},
expandedRow: { expandedRow: {
'&.pink': { backgroundColor: 'rgba(255,192,203,0.1)' }, '&.pink': { backgroundColor: 'rgba(255,192,203,0.1)' },
'&.purple': { backgroundColor: 'rgba(147,112,219,0.1)' }, '&.purple': { backgroundColor: 'rgba(147,112,219,0.1)' },
@ -81,6 +97,7 @@ const useStyles = makeStyles((theme) => ({
} }
})); }));
export default function Overall({ style }) { export default function Overall({ style }) {
const dispatch = useDispatch();
const classes = useStyles(); const classes = useStyles();
const [types, setTypes] = useState({ const [types, setTypes] = useState({
@ -102,7 +119,7 @@ export default function Overall({ style }) {
const stations = [ const stations = [
{ id: 'history', name: '超校核洪水位', count: 0, color: 'pink' }, { id: 'history', name: '超校核洪水位', count: 0, color: 'pink' },
{ id: '100year', name: '超设计洪水位', count: 0, color: 'purple' }, { id: '100year', name: '超设计洪水位', count: 0, color: 'purple' },
{ id: '50year', name: '超汛限水位', count: 0, color: 'blue' }, { id: 'cxx', name: '超汛限水位', count: 1, color: 'blue' },
]; ];
const toggleExpand = (id) => { const toggleExpand = (id) => {
@ -112,6 +129,62 @@ export default function Overall({ style }) {
})); }));
}; };
const skData = [{
"stcd": "716113701",
"type": "sk",
"hasRz": true,
"stnm": "永红水库",
"adcd": "421181105000",
"wscd": null,
"importancy": 0,
"lgtd": 115.120278,
"lttd": 31.183611,
"elev": 0,
"damel": 131.99,
"dsflz": 130.56,
"fsltdz": 129.9,
"ddz": 113.5,
"zcxsw": 129.9,
"drpTm": "2025-04-11T06:00:00.000Z",
"today": 0,
"h1": 0,
"h3": 0,
"h6": 0,
"h12": 0,
"h24": 0,
"h48": 0,
"drpState": 2,
"rz": 119.15,
"w": 0.444,
"a_fsltdz": -10.75,
"rzTm": "2025-04-11T06:00:00.000Z",
"rzWarning": 0,
"rzState": 2,
"pic": [
{
"stcd": "716113701",
"tm": "2023-11-16T11:19:00.000Z",
"url": "http://223.75.53.106:8891/skjgimages/2023/1116/716113701/20231116191900.jpg"
},
{
"stcd": "716113701",
"tm": "2023-11-16T09:05:00.000Z",
"url": "http://223.75.53.106:8891/skjgimages/2023/1116/716113702/20231116170500.jpg"
}
]
},]
const flyTo = () => {
const { lgtd, lttd } = skData[0];
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealSkPop, properties: skData[0], coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
zoom: config.poiPositionZoom.hd,
pitch: config.poiPitch,
});
}
}
return ( return (
<PanelBox <PanelBox
style={style} style={style}
@ -119,7 +192,7 @@ export default function Overall({ style }) {
color="green" color="green"
> >
<Box className={classes.root}> <Box className={classes.root}>
<Box className={classes.typeSection}> {/* <Box className={classes.typeSection}>
<Typography component="span">类型</Typography> <Typography component="span">类型</Typography>
<FormControlLabel <FormControlLabel
control={<Checkbox checked={types.water} onChange={handleTypeChange} name="water" />} control={<Checkbox checked={types.water} onChange={handleTypeChange} name="water" />}
@ -129,23 +202,24 @@ export default function Overall({ style }) {
control={<Checkbox checked={types.reservoir} onChange={handleTypeChange} name="reservoir" />} control={<Checkbox checked={types.reservoir} onChange={handleTypeChange} name="reservoir" />}
label="水库" label="水库"
/> />
</Box> </Box> */}
<TableContainer> <TableContainer>
<Table className={classes.table}> <Table className={classes.table}>
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell style={{ width: '50%' }}>站名</TableCell> <TableCell style={{ width: '40%' }}>站名</TableCell>
<TableCell style={{ width: '20%' }}>水位(mm)</TableCell> <TableCell style={{ width: '14%' }}>水位(mm)</TableCell>
<TableCell style={{ width: '15%' }}>所属政区</TableCell> <TableCell style={{ width: '15%' }}>所属政区</TableCell>
<TableCell style={{ width: '15%' }}>所属流域</TableCell> <TableCell style={{ width: '15%' }}>所属流域</TableCell>
<TableCell style={{ width: '16%' }}>预案</TableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{stations.map((station) => ( {stations.map((station) => (
<React.Fragment key={station.id}> <React.Fragment key={station.id}>
<TableRow className={classes.stationRow}> <TableRow className={`${classes.warningRow} ${station.color}`}>
<TableCell> <TableCell>
<Box display="flex" alignItems="center"> <Box display="flex" alignItems="center">
<IconButton <IconButton
@ -161,18 +235,32 @@ export default function Overall({ style }) {
<TableCell></TableCell> <TableCell></TableCell>
<TableCell></TableCell> <TableCell></TableCell>
<TableCell></TableCell> <TableCell></TableCell>
<TableCell></TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell colSpan={4} style={{ padding: 0 }}> <TableCell colSpan={5} style={{ padding: 0 }}>
<Collapse in={expanded[station.id]} timeout="auto" unmountOnExit> <Collapse in={expanded[station.id]} timeout="auto" unmountOnExit>
<Box className={`${classes.expandedRow} ${station.color}`}> <Box className={`${classes.expandedRow} ${station.color}`}>
{/* 展开的详细内容可以在这里添加 */} {/* 展开的详细内容可以在这里添加 */}
{/* <TableRow> {
<TableCell style={{ width: '25%' }}>站名</TableCell> station.id == "cxx" && <TableRow onClick={() => flyTo()}>
<TableCell style={{ width: '20%' }}>水位(m)</TableCell> <TableCell style={{ width: '20%' }}><div
<TableCell style={{ width: '25%' }}>所属政区</TableCell> className="table-ellipsis cursor-pointer"
<TableCell style={{ width: '30%' }}>所属流域</TableCell> >永红水库</div></TableCell>
</TableRow> */} <TableCell style={{ width: '20%' }}>119.15(0.24)</TableCell>
<TableCell style={{ width: '20%' }}><div
className="table-ellipsis cursor-pointer"
>阎家河镇</div></TableCell>
<TableCell style={{ width: '20%' }}>阎家河</TableCell>
<TableCell style={{ width: '20%' }}><a
className="table-ellipsis cursor-pointer"
onClick={() => {
dispatch?.runtime.setInfoDlg({ layerId: 'PdfLayer', properties: {planName:'麻城市山洪灾害防御预案'} })
}}
>麻城市山洪灾害防御预案</a></TableCell>
</TableRow>
}
</Box> </Box>
</Collapse> </Collapse>
</TableCell> </TableCell>