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) {
layerVisible = {
RealDrpLayer: false,
RealHDLayer: false,
RealSkLayer: false,
RealDrpLayer: true,
RealHDLayer: true,
RealSkLayer: true,
BxSkLayer: true,
FzdxLayer: false,
WataLayer: false,

View File

@ -73,6 +73,15 @@ const useStyles = makeStyles((theme) => ({
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: {
'&.pink': { backgroundColor: 'rgba(255,192,203,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: '100year', name: '100年一遇以上站点', count: 0, color: 'purple' },
{ id: '50year', name: '50年一遇以上站点', count: 0, color: 'blue' },
{ id: 'special', name: '特大暴雨站点', count: 0, color: 'blue' },
{ id: 'heavy', name: '大暴雨站点', count: 0, color: 'blue' },
{ id: 'special', name: '特大暴雨站点', count: 0, color: 'blue1' },
{ id: 'heavy', name: '大暴雨站点', count: 0, color: 'blue2' },
{ id: 'storm', name: '暴雨站点', count: 0, color: 'green' }
];
@ -178,7 +187,10 @@ export default function Overall({ style }) {
<TableBody>
{stations.map((station) => (
<React.Fragment key={station.id}>
<TableRow className={classes.stationRow}>
<TableRow
// className={classes.stationRow}
className={`${classes.warningRow} ${station.color}`}
>
<TableCell>
<Box display="flex" alignItems="center">
<IconButton

View File

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

View File

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

View File

@ -42,10 +42,10 @@ const useStyles = makeStyles((theme) => ({
},
warningRow: {
'&.immediate': {
backgroundColor: '#d32f2f'
backgroundColor: 'rgba(211, 47, 47,0.5)'
},
'&.prepare': {
backgroundColor: '#ed6c02'
backgroundColor: 'rgba(237, 108, 2,0.5)'
}
},
expandIcon: {
@ -103,7 +103,7 @@ export default function Overall({ style }) {
{
type: 'immediate',
label: '立即转移',
count: 0,
count: 3,
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 (
<PanelBox
style={style}
@ -216,7 +234,25 @@ export default function Overall({ style }) {
<Collapse in={expanded[row.type]} timeout="auto" unmountOnExit>
<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>
</Collapse>
</TableCell>
@ -229,15 +265,15 @@ export default function Overall({ style }) {
<Box className={classes.statsSection}>
<Typography variant="h6" className={classes.statsTitle}>
预警统计: 0
预警统计: 3
</Typography>
<Box className={classes.warningStats}>
{warningData.map((stat) => (
<Box key={stat.type} className={classes.statItem}>
<div style={{ display: 'flex' }}>
<div>
<WarningIcon className={`${classes.warningIcon} ${stat.type}`} />
<Typography>{stat.label}</Typography>
<WarningIcon className={`${classes.warningIcon} ${stat.type}`} />
<Typography>{stat.label}</Typography>
</div>
<Typography variant="h6" style={{ color: '#fff' }}>{stat.count}</Typography>
</div>

View File

@ -25,11 +25,28 @@ function HDReal({ style, onSelect }) {
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},
{
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:[],
},
],
},
];
@ -78,6 +95,25 @@ const useStyles = makeStyles({
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) => {
@ -85,7 +121,7 @@ const useStyles = makeStyles({
<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 className={classes.numberText}>{!nodes.children ? `(${nodes.count})`:''}</Box> */}
</Box>
);
return (
@ -132,7 +168,8 @@ const useStyles = makeStyles({
const [tableData, setTableData] = useState([])
const handleNodeSelect = (event, 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)
flyTo(row)
};
@ -176,13 +213,12 @@ const useStyles = makeStyles({
>
{renderTree(machengData[0])}
</TreeView>
<div style={{ color: "#fff",marginBottom:20}}>预案列表</div>
{/* <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>
@ -198,7 +234,7 @@ const useStyles = makeStyles({
))}
</TableBody>
</Table>
</TableContainer>
</TableContainer> */}
</div>
</PanelBox>
)

View File

@ -4,6 +4,8 @@ import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
import OverallContent from './OverallContent';
import { makeStyles } from '@material-ui/core/styles';
import { InfoPopNames } from '../../InfoPops';
import {
Box,
Typography,
@ -20,6 +22,9 @@ import {
IconButton,
Collapse
} from '@material-ui/core';
import { useDispatch, useSelector } from 'react-redux';
import config from '../../../../config';
import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove';
const useStyles = makeStyles((theme) => ({
@ -73,6 +78,17 @@ const useStyles = makeStyles((theme) => ({
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: {
'&.pink': { backgroundColor: 'rgba(255,192,203,0.1)' },
'&.purple': { backgroundColor: 'rgba(147,112,219,0.1)' },
@ -81,6 +97,7 @@ const useStyles = makeStyles((theme) => ({
}
}));
export default function Overall({ style }) {
const dispatch = useDispatch();
const classes = useStyles();
const [types, setTypes] = useState({
@ -102,7 +119,7 @@ export default function Overall({ style }) {
const stations = [
{ id: 'history', name: '超校核洪水位', count: 0, color: 'pink' },
{ id: '100year', name: '超设计洪水位', count: 0, color: 'purple' },
{ id: '50year', name: '超汛限水位', count: 0, color: 'blue' },
{ id: 'cxx', name: '超汛限水位', count: 1, color: 'blue' },
];
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 (
<PanelBox
style={style}
@ -119,7 +192,7 @@ export default function Overall({ style }) {
color="green"
>
<Box className={classes.root}>
<Box className={classes.typeSection}>
{/* <Box className={classes.typeSection}>
<Typography component="span">类型</Typography>
<FormControlLabel
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" />}
label="水库"
/>
</Box>
</Box> */}
<TableContainer>
<Table className={classes.table}>
<TableHead>
<TableRow>
<TableCell style={{ width: '50%' }}>站名</TableCell>
<TableCell style={{ width: '20%' }}>水位(mm)</TableCell>
<TableCell style={{ width: '40%' }}>站名</TableCell>
<TableCell style={{ width: '14%' }}>水位(mm)</TableCell>
<TableCell style={{ width: '15%' }}>所属政区</TableCell>
<TableCell style={{ width: '15%' }}>所属流域</TableCell>
<TableCell style={{ width: '16%' }}>预案</TableCell>
</TableRow>
</TableHead>
<TableBody>
{stations.map((station) => (
<React.Fragment key={station.id}>
<TableRow className={classes.stationRow}>
<TableRow className={`${classes.warningRow} ${station.color}`}>
<TableCell>
<Box display="flex" alignItems="center">
<IconButton
@ -161,18 +235,32 @@ export default function Overall({ style }) {
<TableCell></TableCell>
<TableCell></TableCell>
<TableCell></TableCell>
<TableCell></TableCell>
</TableRow>
<TableRow>
<TableCell colSpan={4} style={{ padding: 0 }}>
<TableCell colSpan={5} style={{ padding: 0 }}>
<Collapse in={expanded[station.id]} timeout="auto" unmountOnExit>
<Box className={`${classes.expandedRow} ${station.color}`}>
{/* 展开的详细内容可以在这里添加 */}
{/* <TableRow>
<TableCell style={{ width: '25%' }}>站名</TableCell>
<TableCell style={{ width: '20%' }}>水位(m)</TableCell>
<TableCell style={{ width: '25%' }}>所属政区</TableCell>
<TableCell style={{ width: '30%' }}>所属流域</TableCell>
</TableRow> */}
{
station.id == "cxx" && <TableRow onClick={() => flyTo()}>
<TableCell style={{ width: '20%' }}><div
className="table-ellipsis cursor-pointer"
>永红水库</div></TableCell>
<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>
</Collapse>
</TableCell>