lishenfeng
/
mcfxkh-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: lishenfeng:89ba5856d8141e1552c728bff44c0255b13f0b7d
Branches Tags
lishenfeng:master
lishenfeng:qzc-dev
lishenfeng:lsf-dev
..
compare: lishenfeng:d101409782a50b7637f614fd084dd0ce0d9c05e6
Branches Tags
lishenfeng:master
lishenfeng:qzc-dev
lishenfeng:lsf-dev

No commits in common. "89ba5856d8141e1552c728bff44c0255b13f0b7d" and "d101409782a50b7637f614fd084dd0ce0d9c05e6" have entirely different histories.
89ba5856d8 ... d101409782

32 changed files with 34 additions and 2876 deletions
Show Stats Expand all files Collapse all files

BIN
public/assets/大石板水库大坝安全管理（防汛）应急预案（完善版）.pdf
View File

Binary file not shown.

BIN
public/assets/新河水库大坝安全管理（防汛）应急预案.pdf
View File

Binary file not shown.

BIN
public/assets/龟山镇曹家冲水库大坝安全管理（防汛）应急预案（终完善版）.pdf
View File

Binary file not shown.

BIN
public/assets/龟山镇苏家冲水库大坝安全管理（防汛）应急预案（终完善版）.pdf
View File

Binary file not shown.

7
src/models/map/index.js
View File

@ -466,13 +466,6 @@ const map = {
dispatch.runtime.setYyfa({})
}
if (id === 3) {
dispatch.map.setLayerSetting({ dom: true });
// map.setLayoutProperty('卫星图', 'visibility', 'visible');
} else {
dispatch.map.setLayerSetting({dom: false});
// map.setLayoutProperty('卫星图', 'visibility', 'none');
}
}
})

13
src/models/map/layout.js
View File

@ -33,7 +33,6 @@ export default function calcLayout(view, rightStack, hidePanels) {
left = [
{ key: '天气' },
{ key: '辅助决策图层', style: { flexShink: 0 } },
{ key: '辅助决策列表' },
];
} else if (view === 4) {
left = [
@ -50,7 +49,6 @@ export default function calcLayout(view, rightStack, hidePanels) {
left = [
{ key: '天气' },
{ key: '病险水库综述', style: { flexShink: 0 } },
{ key: '降雨分析', style: { flexShink: 0 } },
];
}
else if (view === 201) {
@ -222,7 +220,8 @@ export default function calcLayout(view, rightStack, hidePanels) {
rightFullHeight = true;
} else if (view === 3) {
right = [
{ key: '网格', style: { height: '40rem' } },
{ key: '警报' },
{ key: '辅助决策列表' },
]
//rightFullHeight = true;
} else if (view === 4) {
@ -236,13 +235,9 @@ export default function calcLayout(view, rightStack, hidePanels) {
];
} else if (view === 6) {
right = [
// { key: '警报' },
{ key: '山洪预警', style: { flexGrow: 1,height:'33%' } },
{ key: '水库预警', style: { flexGrow: 1,height:'34%' } },
{ key: '河道预警', style: { flexShink: 1,height:'33%'} },
{ key: '警报' },
{ key: '病险水库' },
];
rightFullHeight=true
} else if (view === 201) {
right = [
{ key: '警报' },

4
src/models/runtime/index.js
View File

@ -14,7 +14,6 @@ function initState() {
layerSetting: {
},
yyObj: {},
shkshObj:undefined,
gwobj:undefined,
markers: {}, // type -> [{ id, lgtd, lttd, elev }]
scya:undefined,
@ -32,9 +31,6 @@ const runtime = {
setYyfa(state, props) {
return { ...state, yyObj: props }
},
setShksh(state, props) {
return { ...state, shkshObj: props }
},
setGwtc(state, props) {
return { ...state, gwobj: props }
},

4
src/views/Home/InfoDlg/PdfDlg/index.js
View File

@ -21,7 +21,7 @@ function HDStDlg({ record, onClose }) {
BackdropComponent={DpBackgroundDrop}
>
<div className="boxhead"></div>
<DialogContent style={{ padding: 0, width: '60rem', overflowX: 'hidden',height:'80rem' }}>
<DialogContent style={{ padding: 0, width: '60rem', overflowX: 'hidden' }}>
<DpAppBar position="sticky">
<DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
<DpTab label="文件预览" />
@ -29,7 +29,7 @@ function HDStDlg({ record, onClose }) {
<DpCloseButton onClick={onClose} />
</DpAppBar>
<iframe src={`${process.env.PUBLIC_URL}/assets/${record.planName}.pdf`} width="100%" height="100%"></iframe>
<img src='/assets/报警列表.jpg' style={{width:'100%', height:'33rem',marginTop:'0rem'}}/>
</DialogContent>
<div className="boxfoot"></div>
</Dialog>

18
src/views/Home/PanelIndex.js
View File

@ -90,12 +90,6 @@ import Dhxs from './panels/Gwxs'
import Yjdd from './panels/Yjdd'
import Jsjc from './panels/Jsjc'
import Csjc from './panels/Csjc'
import Shksh from './panels/Shksh'
import Yawg from './panels/Yawg'
import Drpfx from './panels/Drpfx'
import ShWarn from './panels/ShWarning'
import SkWarn from './panels/SkWarning'
import HdWarn from './panels/HdWarning'
import FhxsTqyb from './panels/FhxsTqyb'
import FhxsSq from './panels/FhxsSq'
import FhxsAreaDrp from './panels/FhxsAreaDrp'
@ -149,7 +143,7 @@ export default function PanelIndex({ name, style, ...params }) {
} else if (name === '气象预警综述') {
return <Shqx style={style} />
} else if (name === '辅助决策列表') {
return <Shksh style={style} />
return <FzjcList style={style} />
} else if (name === '病险水库') {
return <BxSk style={style} />
} else if (name === '病险水库综述') {
@ -286,16 +280,6 @@ export default function PanelIndex({ name, style, ...params }) {
return <Gcxxzl style={style} />
} else if (name === '应急指挥调度') {
return <Yjdd style={style} />
} else if (name === "网格") {
return <Yawg style={style} />
} else if (name === "降雨分析") {
return <Drpfx style={style} />
} else if (name === "山洪预警") {
return <ShWarn style={style} />
} else if (name === "水库预警") {
return <SkWarn style={style} />
}else if (name === "河道预警") {
return <HdWarn style={style} />
} else if (name === '防洪形势天气预报') {
return <FhxsTqyb style={style} />
} else if (name === '防洪形势水情') {

4
src/views/Home/components/ActionDock/index.js
View File

@ -10,9 +10,9 @@ const VIEWS = [
id: 100, title: '防汛', img: '/assets/menu/防洪形势.png', children: [
{ id: 0, title: '防洪形势', img: '/assets/menu/防洪形势.png' },
{ id: 1, title: '实时数据', img: '/assets/menu/实时数据.png' },
{ id: 6, title: '预警', img: '/assets/menu/病险水库.png' },
{ id: 6, title: '水库调度', img: '/assets/menu/病险水库.png' },
{ id: 2, title: '水利设施', img: '/assets/menu/水利设施.png' },
{ id: 3, title: '预案', img: '/assets/menu/辅助决策.png' },
{ id: 3, title: '辅助决策', img: '/assets/menu/辅助决策.png' },
{ id: 4, title: '降雨中心', img: '/assets/menu/预警分析.png' },
{ id: 5, title: '天气预报', img: '/assets/menu/降雨中心.png' },
]

53
src/views/Home/index.js
View File

@ -1,5 +1,5 @@
import React,{useEffect} from 'react';
import { useSelector,useDispatch } from 'react-redux';
import React from 'react';
import { useSelector } from 'react-redux';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import './index.less';
import ActionDock from './components/ActionDock';
@ -14,36 +14,30 @@ import Calculating from './components/Calculating';
export default function Demo1() {
const dispatch = useDispatch();
const layout = useSelector(getLayout);
const hp = useSelector(hidePanels);
console.log("hp", hp);
console.log("hp",hp);
const yyRes = useSelector(s => s.runtime.yyObj);
const isSc = useSelector(s => s.runtime.scya);
const wg = useSelector(s => s.runtime.shkshObj)
console.log('wg',wg);
return (
<div className="demo1">
<div style={{ position: 'absolute', left: 0, bottom: 0, right: 0, top: 0, zIndex: 0 }}>
<div style={{ position: 'absolute', left: 0, bottom: 0, right: 0, top: 0, zIndex: 0 }}>
<MapCtrl />
</div>
{
</div>
{
yyRes.yy &&
<>
<img src={`${process.env.PUBLIC_URL}/assets/yytc.png`} alt="" style={{ zIndex: 0.1, position: 'absolute' }} />
<img src={`${process.env.PUBLIC_URL}/assets/yy.png`} alt="" style={{ zIndex: 0.2, position: 'absolute', bottom: 150, left: '32%', width: 700 }} />
<img src={`${process.env.PUBLIC_URL}/assets/yy.png`} alt="" style={{ zIndex: 0.2, position: 'absolute',bottom:150,left:'32%',width:700 }} />
</>
}
{
isSc && <img src={`${process.env.PUBLIC_URL}/assets/scdd.jpg`} alt="" style={{ zIndex: 0.1, position: 'absolute', width: '100%' }} />
isSc &&<img src={`${process.env.PUBLIC_URL}/assets/scdd.jpg`} alt="" style={{ zIndex: 0.1, position: 'absolute',width:'100%' }} />
}
<div className="bottom">
<ActionDock />
</div>
@ -68,24 +62,11 @@ export default function Demo1() {
!hp && (
<TransitionGroup className={clsx('right', 'dp-panel-container', layout.rightFullHeight && 'fullheight')}>
{
layout.right.map(({ key, ...params }) => {
if (key != '网格') {
return (
<CSSTransition key={key} unmountOnExit exit={false} timeout={500} classNames="dp-panelgroup">
<PanelIndex name={key} {...params} />
</CSSTransition>
)
} else if(wg) {
return (
<CSSTransition key={key} unmountOnExit exit={false} timeout={500} classNames="dp-panelgroup">
<PanelIndex name={key} {...params} />
</CSSTransition>
)
}
}
)
layout.right.map(({ key, ...params }) => (
<CSSTransition key={key} unmountOnExit exit={false} timeout={500} classNames="dp-panelgroup">
<PanelIndex name={key} {...params} />
</CSSTransition>
))
}
</TransitionGroup>
)

10
src/views/Home/panels/BxSkOverall/OverallContent.js
View File

@ -61,14 +61,6 @@ export default function OverallContent({ data, skAll }) {
return (
<div className={classes.root}>
<div>
<span className={classes.titleDate}>29日9时</span>至<span className={classes.titleDate}>30日9时</span>
24小时中共有<span className={classes.number}>1</span>
个站点雨量为<span className={classes.sttype}>特大暴雨</span>，雨量值
<span className={classes.number}>261mm</span>；
共产生<span className={classes.number}>3</span>个山洪预警（2个内部预警，1个外部预警），均已处置；<span className={classes.number}>1</span>个水库超汛限，已短信通知责任人；无河道预警。
</div>
{/* <div>
共有水库<span className={classes.number}>{skAll?.length || '-'}</span>坐，
病险水库共有<span className={classes.number}>{stat.all?.length || '-'}</span>坐
(
@ -78,7 +70,7 @@ export default function OverallContent({ data, skAll }) {
)
，其中超汛限<span className={classes.number}>{stat.超汛限?.length || '-'}</span>座。
</div> */}
</div>
</div>
)
}

2
src/views/Home/panels/BxSkOverall/index.js
View File

@ -13,7 +13,7 @@ export default function BxskOverall({ style }) {
return (
<PanelBox
style={style}
title="预警综述"
title="病险水库综述"
color="red"
>
{

165
src/views/Home/panels/Drpfx/OverallContent.js
View File

@ -1,165 +0,0 @@
import { Button, makeStyles } from '@material-ui/core';
import { Email } from '@material-ui/icons';
import React from 'react';
import { useDispatch } from 'react-redux';
import config from '../../../../config';
import { bxstr, drpRealGet, skRealGet } from '../../../../models/_/real';
import { strNumber } from '../../../../utils/tools';
import { InfoPopNames } from '../../InfoPops';
const useStyles = makeStyles({
root: {
padding: '1.5rem 0.75rem 0.75rem 0.75rem',
color: 'rgb(224, 246, 247)',
fontSize: '0.9rem',
lineHeight: '1.8rem',
},
titleDate: {
fontSize: '1.2rem',
margin: '0.2rem',
color: '#00deff',
},
number: {
color: '#ffd220',
fontSize: '1.2rem',
margin: '0.2rem',
},
sttype: {
color: '#92f0ff',
},
stname: {
fontWeight: 'bold',
fontSize: '1rem',
margin: '0.25rem',
cursor: 'pointer'
},
grid: {
display: 'flex',
justifyContent: 'space-around',
marginBottom: '1rem',
textAlign: 'center',
'& .value': {
fontSize: '1.8rem',
color: '#6fe9fd',
lineHeight: '2rem'
},
'& .key': {
fontSize: '0.8rem',
color: '#aaa',
},
},
action: {
textAlign: 'right',
color: '#fff',
}
})
export default function OverallContent({ data }) {
const classes = useStyles();
const dispatch = useDispatch();
const {
drpInfo,
skInfo,
tm1, tm2,
} = data || {};
const { h24, h1, h3, h6 } = drpInfo || {};
const _showRecord = (record, poptype) => {
if (record) {
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: poptype, properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd],
zoom: 15,
pitch: config.poiPitch,
});
}
}
}
const showRecord = (obj) => {
if (!obj) {
return;
}
const { type } = obj;
if (type === 'sk') {
skRealGet(obj.stcd).then((record) => {
_showRecord(record, InfoPopNames.RealSkPop)
})
} else {
drpRealGet(obj).then((record) => {
_showRecord(record, InfoPopNames.RealDrpPop)
});
}
}
const doBx = () => {
bxstr().then((data) => {
dispatch.runtime.setInfoDlg({
layerId: 'OverallSmtp',
properties: { txt: data }
})
});
}
return (
<div className={classes.root}>
<div className={classes.grid}>
<div>
<div className="value">{strNumber(h24?.drpStCount?.total, '-')}</div>
<div className="key">降雨测站</div>
</div>
<div>
<div className="value">{strNumber(skInfo?.aRz, '-')}</div>
<div className="key">超汛限水库</div>
</div>
<div>
<div className="value" style={{ fontSize: '1.5rem', cursor: 'pointer' }} onClick={() => showRecord(h24?.max)}>
{h24?.max?.stnm || '--'}
</div>
<div className="key">最大降雨测站</div>
</div>
</div>
<div>
<span className={classes.titleDate}>{tm1 || '-'}</span>至<span className={classes.titleDate}>{tm2 || '-'}</span>
24小时中共有<span className={classes.number}>{strNumber(h24?.drpStCount?.total, '-')}</span>
个降雨测站(<span className={classes.sttype}>山洪测站</span>
<span className={classes.number}>{strNumber(h24?.drpStCount?.sh, '-')}</span>
个)，其中最大降雨测站为<span onClick={() => showRecord(h24?.max)} className={classes.stname}>{h24?.max?.stnm || '-'}</span>
，降雨量<span className={classes.number}>{strNumber(h24?.max?.value, '-')}</span>mm
{h24?.cntDrp10 > 0 && (<>，<span className={classes.sttype}>10mm以下</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp10, '-')}</span>个</>)}
{h24?.cntDrp25 > 0 && (<>，<span className={classes.sttype}>10mm至25mm</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp25, '-')}</span>个</>)}
{h24?.cntDrp50 > 0 && (<>，<span className={classes.sttype}>25mm至50mm</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp50, '-')}</span>个</>)}
{h24?.cntDrp100 > 0 && (<>，<span className={classes.sttype}>50mm至100mm</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp100, '-')}</span>个</>)}
{h24?.cntDrp250 > 0 && (<>，<span className={classes.sttype}>100mm至250mm</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp250, '-')}</span>个</>)}
{h24?.cntDrpg250 > 0 && (<>，<span className={classes.sttype}>大于250mm</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrpg250, '-')}</span>个</>)}
。
{h1?.max?.value > 0 && (<><span className={classes.sttype}>前1小时</span>最大降雨测站是<span onClick={() => showRecord(h1?.max)} className={classes.stname}>{h1?.max?.stnm}</span>({h1?.max?.value}mm)，</>)}
{h3?.max?.value > 0 && (<><span className={classes.sttype}>前3小时</span>最大降雨测站是<span onClick={() => showRecord(h3?.max)} className={classes.stname}>{h3?.max?.stnm}</span>({h3?.max?.value}mm)，</>)}
{h6?.max?.value > 0 && (<><span className={classes.sttype}>前6小时</span>最大降雨测站是<span onClick={() => showRecord(h6?.max)} className={classes.stname}>{h6?.max?.stnm}</span>({h6?.max?.value}mm)，</>)}
{
!h1?.max?.value || !h3?.max?.value || !h6?.max?.value ? (
`前${[!h1?.max?.value ? '1' : null, !h3?.max?.value ? '3' : null, !h6?.max?.value ? '6' : null].filter(Boolean).join(',')}小时无降雨。`
) : null
}
超汛限水位水库数为<span className={classes.number}>{strNumber(skInfo?.aRz, '-')}</span>座。
</div>
<div className={classes.action}>
<Button startIcon={<Email />} onClick={doBx} style={{ color: '#fff' }} size="small">报讯</Button>
</div>
</div>
)
}

221
src/views/Home/panels/Drpfx/index.js
View File

@ -1,221 +0,0 @@
import React, { useState } from 'react';
import { OverallPromise } from '../../../../models/_/real';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
import OverallContent from './OverallContent';
import { makeStyles } from '@material-ui/core/styles';
import {
Box,
Typography,
Checkbox,
FormControlLabel,
ButtonGroup,
Button,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
IconButton,
Collapse
} from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove';
const useStyles = makeStyles((theme) => ({
root: {
color: '#fff',
'& .MuiTypography-root': {
color: '#fff'
},
'& .MuiCheckbox-root': {
color: '#fff',
'&.Mui-checked': {
color: '#409eff'
}
},
'& .MuiButtonGroup-root': {
marginTop: theme.spacing(2),
marginBottom: theme.spacing(3)
}
},
typeSection: {
marginBottom: theme.spacing(2)
},
timeButton: {
color: '#fff',
borderColor: 'rgba(255,255,255,0.3)',
'&.MuiButton-contained': {
backgroundColor: '#409eff',
color: '#fff',
'&:hover': {
backgroundColor: '#409eff'
}
},
'&:hover': {
backgroundColor: 'rgba(255,255,255,0.1)'
}
},
table: {
'& .MuiTableCell-root': {
color: '#fff',
borderColor: 'rgba(255,255,255,0.1)'
}
},
expandButton: {
color: '#fff'
},
stationRow: {
'&:nth-of-type(odd)': {
backgroundColor: 'rgba(255,255,255,0.05)'
},
'&:hover': {
backgroundColor: 'rgba(255,255,255,0.1)'
}
},
expandedRow: {
'&.pink': { backgroundColor: 'rgba(255,192,203,0.1)' },
'&.purple': { backgroundColor: 'rgba(147,112,219,0.1)' },
'&.blue': { backgroundColor: 'rgba(135,206,235,0.1)' },
'&.green': { backgroundColor: 'rgba(144,238,144,0.1)' }
}
}));
export default function Overall({ style }) {
const classes = useStyles();
const [types, setTypes] = useState({
mountain: true,
water: true,
weather: true,
reservoir: true
});
const [timeRange, setTimeRange] = useState('1h');
const [expanded, setExpanded] = useState({});
const handleTypeChange = (event) => {
setTypes({
...types,
[event.target.name]: event.target.checked
});
};
const stations = [
{ 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: 'storm', name: '暴雨站点', count: 0, color: 'green' }
];
const toggleExpand = (id) => {
setExpanded(prev => ({
...prev,
[id]: !prev[id]
}));
};
return (
<PanelBox
style={style}
title="降雨分析"
color="green"
>
<Box className={classes.root}>
<Box className={classes.typeSection}>
<Typography component="span">类型：</Typography>
<FormControlLabel
control={<Checkbox checked={types.mountain} onChange={handleTypeChange} name="mountain" />}
label="山洪"
/>
<FormControlLabel
control={<Checkbox checked={types.water} onChange={handleTypeChange} name="water" />}
label="水文"
/>
<FormControlLabel
control={<Checkbox checked={types.weather} onChange={handleTypeChange} name="weather" />}
label="气象"
/>
<FormControlLabel
control={<Checkbox checked={types.reservoir} onChange={handleTypeChange} name="reservoir" />}
label="水库"
/>
</Box>
<div style={{ display: 'flex', alignItems: 'center' }}>
<Typography component="div">最近时段：</Typography>
<ButtonGroup variant="outlined">
{[
{ value: '1h', label: '1小时' },
{ value: '3h', label: '3小时' },
{ value: '6h', label: '6小时' },
{ value: '12h', label: '12小时' },
{ value: '24h', label: '24小时' }
].map((item) => (
<Button
key={item.value}
className={classes.timeButton}
onClick={() => setTimeRange(item.value)}
variant={timeRange === item.value ? 'contained' : 'outlined'}
style={{ padding: '5px 10px' }}
>
{item.label}
</Button>
))}
</ButtonGroup>
</div>
<TableContainer>
<Table className={classes.table}>
<TableHead>
<TableRow>
<TableCell style={{ width: '50%' }}>站名</TableCell>
<TableCell style={{ width: '20%' }}>累计雨量(mm)</TableCell>
<TableCell style={{ width: '15%' }}>所属政区</TableCell>
<TableCell style={{ width: '15%' }}>所属流域</TableCell>
</TableRow>
</TableHead>
<TableBody>
{stations.map((station) => (
<React.Fragment key={station.id}>
<TableRow className={classes.stationRow}>
<TableCell>
<Box display="flex" alignItems="center">
<IconButton
size="small"
className={classes.expandButton}
onClick={() => toggleExpand(station.id)}
>
{expanded[station.id] ? <RemoveIcon /> : <AddIcon />}
</IconButton>
{station.name}({station.count})
</Box>
</TableCell>
<TableCell></TableCell>
<TableCell></TableCell>
<TableCell></TableCell>
</TableRow>
<TableRow>
<TableCell colSpan={4} 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> */}
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
))}
</TableBody>
</Table>
</TableContainer>
</Box>
</PanelBox>
)
}

38
src/views/Home/panels/Drpfx/index.less
View File

@ -1,38 +0,0 @@
.dppanel-overall {
padding: 0.75rem;
color: rgb(224, 246, 247);
font-size: 0.8rem;
line-height: 1.8rem;
.title-date {
font-size: 1.2rem;
margin: 0.2rem;
color: #00deff;
}
.number {
color: #ffd220;
font-size: 1.2rem;
margin: 0.2rem;
}
.sttype {
color: #92f0ff;
}
.stname {
font-weight: bold;
font-size: 1rem;
margin: 0.25rem;
}
.sycm {
height: 5rem;
padding-top: 0.75rem;
ul{ margin-left:-.5rem;margin-right:-.5rem; padding: .16rem 0;}
li{ float: left; width: 33.33%; text-align: center; position: relative}
li:before{ position:absolute; content: ""; height:30%; width: 1px; background: rgba(255,255,255,.1); right: 0; top: 15%;}
li:last-child:before{ width: 0;}
li h2{ font-size:2rem; color: #6fe9fd; margin: 0; font-family: 'electronicFont';margin-bottom: 0.5rem;}
li span{ font-size:1rem; color: #fff; opacity: .5;}
}
}

279
src/views/Home/panels/FzjcLayers/index.js
View File

@ -1,47 +1,18 @@
import React,{useState} from 'react';
import React from 'react';
import PanelBox from '../../components/PanelBox';
import { useDispatch, useSelector } from 'react-redux';
import { getLayerVisible } from '../../../../models/map/selectors';
import RowItem from './RowItem';
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 { Button, Checkbox, FormControl, FormControlLabel, FormGroup, FormLabel, InputLabel, makeStyles, MenuItem, Radio, RadioGroup, Select, TextField } from '@material-ui/core';
import { styled } from '@material-ui/styles';
import clsx from 'clsx'
import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles({
root: {
padding: '0.5rem',
}
});
const StyledFormControl = styled(FormControl)({
'& .MuiFormLabel-root': {
color: 'rgba(255, 255, 255, 0.7)',
'&.Mui-focused': {
color: '#1976d2'
}
},
'& .MuiRadio-root': {
color: 'rgba(255, 255, 255, 0.7)',
'&.Mui-checked': {
color: '#1976d2'
}
},
'& .MuiFormControlLabel-label': {
color: '#fff'
}
});
function FzjcLayers({ style }) {
const [value, setValue] = useState('');
const handleChange = (event) => {
setValue(event.target.value);
};
function FzjcLayers({ style }) {
const classes = useStyles();
const layerVisible = useSelector(getLayerVisible);
@ -57,172 +28,13 @@ function FzjcLayers({ style }) {
dispath.fzjcview.setListType(type);
}
const shData =[
{
"id": 125973,
"reviewStatus": "2",
"createTime": "2025-05-03 21:25:23",
"updateId": "187",
"updateName": "麻城市",
"updateTime": "2025-05-15 16:09:53",
"del": "0",
"planId": "421181000000000",
"planName": "麻城市山洪灾害防御预案",
"levels": "2",
"year": "2025",
"adnm": "麻城市",
"adcd": "421181000000000",
"attachUpdateTime": "2025-05-15 16:09:53",
"status": 0,
"uploadAttachStatus": "1",
"padNm": "421181000000000",
"url": "dplan/2025/421181000000000/麻城市山洪灾害防御预案.pdf"
},
{
"id": 125974,
"reviewStatus": "2",
"createTime": "2025-05-03 21:25:23",
"updateId": "187",
"updateName": "麻城市",
"updateTime": "2025-05-29 11:23:16",
"del": "0",
"planId": "421181001000000",
"planName": "龙池桥街道山洪灾害防御预案",
"levels": "1",
"year": "2025",
"adnm": "龙池桥街道",
"adcd": "421181001000000",
"attachUpdateTime": "2025-05-29 11:23:16",
"status": 0,
"uploadAttachStatus": "1",
"padNm": "421181001000000",
"url": "dplan/2025/421181001000000/龙池桥街道山洪灾害防御预案.pdf"
},
{
"id": 125975,
"reviewStatus": "2",
"createTime": "2025-05-03 21:25:23",
"updateId": "187",
"updateName": "麻城市",
"updateTime": "2025-05-29 11:39:39",
"del": "0",
"planId": "421181001001000",
"planName": "园林社区居民委员会山洪灾害防御预案",
"levels": "0",
"year": "2025",
"adnm": "园林社区居民委员会",
"adcd": "421181001001000",
"attachUpdateTime": "2025-05-29 11:39:39",
"status": 0,
"uploadAttachStatus": "1",
"padNm": "421181001001000",
"url": "dplan/2025/421181001001000/园林社区居民委员会山洪灾害防御预案.pdf"
},
{
"id": 125977,
"reviewStatus": "2",
"createTime": "2025-05-03 21:25:23",
"updateId": "187",
"updateName": "麻城市",
"updateTime": "2025-05-29 11:40:08",
"del": "0",
"planId": "421181001002000",
"planName": "城西社区居民委员会山洪灾害防御预案",
"levels": "0",
"year": "2025",
"adnm": "城西社区居民委员会",
"adcd": "421181001002000",
"attachUpdateTime": "2025-05-29 11:40:08",
"status": 0,
"uploadAttachStatus": "1",
"padNm": "421181001002000",
"url": "dplan/2025/421181001002000/城西社区居民委员会山洪灾害防御预案.pdf"
},
]
const skData = [
{
planName: '新河水库大坝安全管理（防汛）应急预案',
"updateTime": "2025-05-29 11:40:08",
},
{
planName: '龟山镇曹家冲水库大坝安全管理（防汛）应急预案（终完善版）',
"updateTime": "2025-05-29 11:40:08",
},
{
planName: '龟山镇苏家冲水库大坝安全管理（防汛）应急预案（终完善版）',
"updateTime": "2025-05-29 11:40:08",
},
{
planName: '大石板水库大坝安全管理（防汛）应急预案（完善版）',
"updateTime": "2025-05-29 11:40:08",
}
]
const dispatch = useDispatch();
const zt = {
0: '村', 1: '乡镇', 2: '区县', 3: '市', 4: '省'
}
const [type, setType] = useState('sh')
const toggleStType = (type) => {
// if (type == 'sz') {
// dispatch.map.setLayerVisible({'ShuiZhaLayer':true})
// dispatch.map.setLayerVisible({'BzLayer':false})
// } else {
// dispatch.map.setLayerVisible({'ShuiZhaLayer':false})
// dispatch.map.setLayerVisible({'BzLayer':true})
// }
setType(type)
}
const flyTo = (row) => {
dispatch?.runtime.setInfoDlg({ layerId: 'PdfLayer', properties: row })
}
const StyledTextField = styled(TextField)({
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: 'rgba(255, 255, 255, 0.23)',
},
'&:hover fieldset': {
borderColor: 'rgba(255, 255, 255, 0.5)',
},
'&.Mui-focused fieldset': {
borderColor: '#1976d2',
},
},
'& .MuiInputLabel-root': {
color: 'rgba(255, 255, 255, 0.7)',
'&.Mui-focused': {
color: '#1976d2',
},
},
'& .MuiInputBase-input': {
color: '#fff',
},
});
const CustomTextField = (props) => {
return (
<StyledTextField
variant="outlined"
// fullWidth
{...props}
/>
);
};
return (
<PanelBox
style={style}
title="预案列表"
title="辅助决策图层"
color="orange"
tabs={
<span className="button-group">
<span className={clsx({ active: type == 'sh' })} onClick={() => toggleStType('sh')}>山洪</span>
<span className={clsx({ active: type == 'sk' })} onClick={() => toggleStType('sk')}>水库</span>
</span>
}
>
{/* <div className={classes.root}>
<div className={classes.root}>
<RowItem type="placement" layerVisible={layerVisible} layerVisibleChanged={layerVisibleChanged} showList={showList} />
<RowItem type="transfer" layerVisible={layerVisible} layerVisibleChanged={layerVisibleChanged} showList={showList} />
<RowItem type="bsnssinfo" layerVisible={layerVisible} layerVisibleChanged={layerVisibleChanged} showList={showList} />
@ -230,85 +42,6 @@ function FzjcLayers({ style }) {
<RowItem type="danad" layerVisible={layerVisible} layerVisibleChanged={layerVisibleChanged} showList={showList} />
<RowItem type="wata" name="分级流域" layerName="WataLayer" layerVisible={layerVisible} layerVisibleChanged={layerVisibleChanged} showList={showList} />
<RowItem type="fzdx" name="防灾对象" layerName="FzdxLayer" layerVisible={layerVisible} layerVisibleChanged={layerVisibleChanged} showList={showList} />
</div> */}
<div className={classes.root}>
<div style={{display:'flex',columnGap:10,alignItems:'center'}}>
<StyledFormControl>
<RadioGroup
row
value={value}
onChange={handleChange}
>
<FormControlLabel value="xian" control={<Radio />} label="县" />
<FormControlLabel value="zhen" control={<Radio />} label="镇" />
<FormControlLabel value="xz" control={<Radio />} label="行政村" />
</RadioGroup>
</StyledFormControl>
<CustomTextField
label="预案查询"
style={{width:'150px'}}
onChange={(e) => console.log(e.target.value)}/>
</div>
{
type == 'sh' ?
<TableContainer style={{ height: '100%' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ width: '50%' }} align="center">预案名称</DpTableCell>
<DpTableCell style={{ width: '20%' }} align="center">预案级别</DpTableCell>
<DpTableCell align="center" style={{ width: '30%' }}>更新时间</DpTableCell>
{/* <DpTableCell align="right">警戒水位</DpTableCell> */}
</TableRow>
</TableHead>
<TableBody>
{shData.map((row) => (
<DpTableRow key={row.id} onClick={() => flyTo(row,'sz')}>
<DpTableCell align="center">
<div
className="table-ellipsis cursor-pointer"
>{row.planName}</div>
</DpTableCell>
<DpTableCell align="center">
{zt[row.levels]}
</DpTableCell>
<DpTableCell align="center">
<div
className="table-ellipsis cursor-pointer"
>{row.updateTime}</div>
</DpTableCell>
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer>
:
<TableContainer style={{ height: '100%' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ width: '60%' }} align="center">预案名称</DpTableCell>
<DpTableCell align="center" style={{ width: '30%' }}>更新时间</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{skData.map((row) => (
<DpTableRow key={row.id} onClick={() => flyTo(row,'bz')}>
<DpTableCell align="center">
<div
className="table-ellipsis cursor-pointer"
>{row.planName}</div>
</DpTableCell>
<DpTableCell align="center"> <div
className="table-ellipsis cursor-pointer"
>{row.updateTime}</div></DpTableCell>
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer>
}
</div>
</PanelBox>
)

165
src/views/Home/panels/HdWarning/OverallContent.js
View File

@ -1,165 +0,0 @@
import { Button, makeStyles } from '@material-ui/core';
import { Email } from '@material-ui/icons';
import React from 'react';
import { useDispatch } from 'react-redux';
import config from '../../../../config';
import { bxstr, drpRealGet, skRealGet } from '../../../../models/_/real';
import { strNumber } from '../../../../utils/tools';
import { InfoPopNames } from '../../InfoPops';
const useStyles = makeStyles({
root: {
padding: '1.5rem 0.75rem 0.75rem 0.75rem',
color: 'rgb(224, 246, 247)',
fontSize: '0.9rem',
lineHeight: '1.8rem',
},
titleDate: {
fontSize: '1.2rem',
margin: '0.2rem',
color: '#00deff',
},
number: {
color: '#ffd220',
fontSize: '1.2rem',
margin: '0.2rem',
},
sttype: {
color: '#92f0ff',
},
stname: {
fontWeight: 'bold',
fontSize: '1rem',
margin: '0.25rem',
cursor: 'pointer'
},
grid: {
display: 'flex',
justifyContent: 'space-around',
marginBottom: '1rem',
textAlign: 'center',
'& .value': {
fontSize: '1.8rem',
color: '#6fe9fd',
lineHeight: '2rem'
},
'& .key': {
fontSize: '0.8rem',
color: '#aaa',
},
},
action: {
textAlign: 'right',
color: '#fff',
}
})
export default function OverallContent({ data }) {
const classes = useStyles();
const dispatch = useDispatch();
const {
drpInfo,
skInfo,
tm1, tm2,
} = data || {};
const { h24, h1, h3, h6 } = drpInfo || {};
const _showRecord = (record, poptype) => {
if (record) {
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: poptype, properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd],
zoom: 15,
pitch: config.poiPitch,
});
}
}
}
const showRecord = (obj) => {
if (!obj) {
return;
}
const { type } = obj;
if (type === 'sk') {
skRealGet(obj.stcd).then((record) => {
_showRecord(record, InfoPopNames.RealSkPop)
})
} else {
drpRealGet(obj).then((record) => {
_showRecord(record, InfoPopNames.RealDrpPop)
});
}
}
const doBx = () => {
bxstr().then((data) => {
dispatch.runtime.setInfoDlg({
layerId: 'OverallSmtp',
properties: { txt: data }
})
});
}
return (
<div className={classes.root}>
<div className={classes.grid}>
<div>
<div className="value">{strNumber(h24?.drpStCount?.total, '-')}</div>
<div className="key">降雨测站</div>
</div>
<div>
<div className="value">{strNumber(skInfo?.aRz, '-')}</div>
<div className="key">超汛限水库</div>
</div>
<div>
<div className="value" style={{ fontSize: '1.5rem', cursor: 'pointer' }} onClick={() => showRecord(h24?.max)}>
{h24?.max?.stnm || '--'}
</div>
<div className="key">最大降雨测站</div>
</div>
</div>
<div>
<span className={classes.titleDate}>{tm1 || '-'}</span>至<span className={classes.titleDate}>{tm2 || '-'}</span>
24小时中共有<span className={classes.number}>{strNumber(h24?.drpStCount?.total, '-')}</span>
个降雨测站(<span className={classes.sttype}>山洪测站</span>
<span className={classes.number}>{strNumber(h24?.drpStCount?.sh, '-')}</span>
个)，其中最大降雨测站为<span onClick={() => showRecord(h24?.max)} className={classes.stname}>{h24?.max?.stnm || '-'}</span>
，降雨量<span className={classes.number}>{strNumber(h24?.max?.value, '-')}</span>mm
{h24?.cntDrp10 > 0 && (<>，<span className={classes.sttype}>10mm以下</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp10, '-')}</span>个</>)}
{h24?.cntDrp25 > 0 && (<>，<span className={classes.sttype}>10mm至25mm</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp25, '-')}</span>个</>)}
{h24?.cntDrp50 > 0 && (<>，<span className={classes.sttype}>25mm至50mm</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp50, '-')}</span>个</>)}
{h24?.cntDrp100 > 0 && (<>，<span className={classes.sttype}>50mm至100mm</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp100, '-')}</span>个</>)}
{h24?.cntDrp250 > 0 && (<>，<span className={classes.sttype}>100mm至250mm</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp250, '-')}</span>个</>)}
{h24?.cntDrpg250 > 0 && (<>，<span className={classes.sttype}>大于250mm</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrpg250, '-')}</span>个</>)}
。
{h1?.max?.value > 0 && (<><span className={classes.sttype}>前1小时</span>最大降雨测站是<span onClick={() => showRecord(h1?.max)} className={classes.stname}>{h1?.max?.stnm}</span>({h1?.max?.value}mm)，</>)}
{h3?.max?.value > 0 && (<><span className={classes.sttype}>前3小时</span>最大降雨测站是<span onClick={() => showRecord(h3?.max)} className={classes.stname}>{h3?.max?.stnm}</span>({h3?.max?.value}mm)，</>)}
{h6?.max?.value > 0 && (<><span className={classes.sttype}>前6小时</span>最大降雨测站是<span onClick={() => showRecord(h6?.max)} className={classes.stname}>{h6?.max?.stnm}</span>({h6?.max?.value}mm)，</>)}
{
!h1?.max?.value || !h3?.max?.value || !h6?.max?.value ? (
`前${[!h1?.max?.value ? '1' : null, !h3?.max?.value ? '3' : null, !h6?.max?.value ? '6' : null].filter(Boolean).join(',')}小时无降雨。`
) : null
}
超汛限水位水库数为<span className={classes.number}>{strNumber(skInfo?.aRz, '-')}</span>座。
</div>
<div className={classes.action}>
<Button startIcon={<Email />} onClick={doBx} style={{ color: '#fff' }} size="small">报讯</Button>
</div>
</div>
)
}

196
src/views/Home/panels/HdWarning/index.js
View File

@ -1,196 +0,0 @@
import React, { useState } from 'react';
import { OverallPromise } from '../../../../models/_/real';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
import OverallContent from './OverallContent';
import { makeStyles } from '@material-ui/core/styles';
import {
Box,
Typography,
Checkbox,
FormControlLabel,
ButtonGroup,
Button,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
IconButton,
Collapse
} from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove';
const useStyles = makeStyles((theme) => ({
root: {
color: '#fff',
'& .MuiTypography-root': {
color: '#fff'
},
'& .MuiCheckbox-root': {
color: '#fff',
'&.Mui-checked': {
color: '#409eff'
}
},
'& .MuiButtonGroup-root': {
marginTop: theme.spacing(2),
marginBottom: theme.spacing(3)
}
},
typeSection: {
marginBottom: theme.spacing(2)
},
timeButton: {
color: '#fff',
borderColor: 'rgba(255,255,255,0.3)',
'&.MuiButton-contained': {
backgroundColor: '#409eff',
color: '#fff',
'&:hover': {
backgroundColor: '#409eff'
}
},
'&:hover': {
backgroundColor: 'rgba(255,255,255,0.1)'
}
},
table: {
'& .MuiTableCell-root': {
color: '#fff',
borderColor: 'rgba(255,255,255,0.1)'
}
},
expandButton: {
color: '#fff'
},
stationRow: {
'&:nth-of-type(odd)': {
backgroundColor: 'rgba(255,255,255,0.05)'
},
'&:hover': {
backgroundColor: 'rgba(255,255,255,0.1)'
}
},
warningRow: {
'&.pink': {
backgroundColor: '#fed4db'
},
'&.purple': {
backgroundColor: '#fceccf'
}
},
expandedRow: {
'&.pink': { backgroundColor: 'rgba(255,192,203,0.1)' },
'&.purple': { backgroundColor: 'rgba(147,112,219,0.1)' },
'&.blue': { backgroundColor: 'rgba(135,206,235,0.1)' },
'&.green': { backgroundColor: 'rgba(144,238,144,0.1)' }
}
}));
export default function Overall({ style }) {
const classes = useStyles();
const [types, setTypes] = useState({
mountain: true,
water: true,
weather: true,
reservoir: true
});
const [timeRange, setTimeRange] = useState('1h');
const [expanded, setExpanded] = useState({});
const handleTypeChange = (event) => {
setTypes({
...types,
[event.target.name]: event.target.checked
});
};
const stations = [
{ id: 'history', name: '超危险水位', count: 0, type: 'pink' },
{ id: '100year', name: '超警戒水位', count: 0, type: 'purple' },
];
const toggleExpand = (id) => {
setExpanded(prev => ({
...prev,
[id]: !prev[id]
}));
};
return (
<PanelBox
style={style}
title="河道预警"
color="green"
>
<Box className={classes.root}>
<Box className={classes.typeSection}>
<Typography component="span">类型：</Typography>
<FormControlLabel
control={<Checkbox checked={types.reservoir} onChange={handleTypeChange} name="reservoir" />}
label="山洪"
/>
<FormControlLabel
control={<Checkbox checked={types.water} onChange={handleTypeChange} name="water" />}
label="水文"
/>
</Box>
<TableContainer>
<Table className={classes.table}>
<TableHead>
<TableRow>
<TableCell style={{ width: '35%' }}>站名</TableCell>
<TableCell style={{ width: '30%' }}>水位(mm)</TableCell>
<TableCell style={{ width: '15%' }}>所属政区</TableCell>
<TableCell style={{ width: '15%' }}>所属流域</TableCell>
</TableRow>
</TableHead>
<TableBody>
{stations.map((station) => (
<React.Fragment key={station.id}>
<TableRow className={`${classes.warningRow} ${station.type}`}>
<TableCell>
<Box display="flex" alignItems="center">
<IconButton
size="small"
className={classes.expandButton}
onClick={() => toggleExpand(station.id)}
>
{expanded[station.id] ? <RemoveIcon /> : <AddIcon />}
</IconButton>
{station.name}({station.count})
</Box>
</TableCell>
<TableCell></TableCell>
<TableCell></TableCell>
<TableCell></TableCell>
</TableRow>
<TableRow>
<TableCell colSpan={4} 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> */}
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
))}
</TableBody>
</Table>
</TableContainer>
</Box>
</PanelBox>
)
}

38
src/views/Home/panels/HdWarning/index.less
View File

@ -1,38 +0,0 @@
.dppanel-overall {
padding: 0.75rem;
color: rgb(224, 246, 247);
font-size: 0.8rem;
line-height: 1.8rem;
.title-date {
font-size: 1.2rem;
margin: 0.2rem;
color: #00deff;
}
.number {
color: #ffd220;
font-size: 1.2rem;
margin: 0.2rem;
}
.sttype {
color: #92f0ff;
}
.stname {
font-weight: bold;
font-size: 1rem;
margin: 0.25rem;
}
.sycm {
height: 5rem;
padding-top: 0.75rem;
ul{ margin-left:-.5rem;margin-right:-.5rem; padding: .16rem 0;}
li{ float: left; width: 33.33%; text-align: center; position: relative}
li:before{ position:absolute; content: ""; height:30%; width: 1px; background: rgba(255,255,255,.1); right: 0; top: 15%;}
li:last-child:before{ width: 0;}
li h2{ font-size:2rem; color: #6fe9fd; margin: 0; font-family: 'electronicFont';margin-bottom: 0.5rem;}
li span{ font-size:1rem; color: #fff; opacity: .5;}
}
}

165
src/views/Home/panels/ShWarning/OverallContent.js
View File

@ -1,165 +0,0 @@
import { Button, makeStyles } from '@material-ui/core';
import { Email } from '@material-ui/icons';
import React from 'react';
import { useDispatch } from 'react-redux';
import config from '../../../../config';
import { bxstr, drpRealGet, skRealGet } from '../../../../models/_/real';
import { strNumber } from '../../../../utils/tools';
import { InfoPopNames } from '../../InfoPops';
const useStyles = makeStyles({
root: {
padding: '1.5rem 0.75rem 0.75rem 0.75rem',
color: 'rgb(224, 246, 247)',
fontSize: '0.9rem',
lineHeight: '1.8rem',
},
titleDate: {
fontSize: '1.2rem',
margin: '0.2rem',
color: '#00deff',
},
number: {
color: '#ffd220',
fontSize: '1.2rem',
margin: '0.2rem',
},
sttype: {
color: '#92f0ff',
},
stname: {
fontWeight: 'bold',
fontSize: '1rem',
margin: '0.25rem',
cursor: 'pointer'
},
grid: {
display: 'flex',
justifyContent: 'space-around',
marginBottom: '1rem',
textAlign: 'center',
'& .value': {
fontSize: '1.8rem',
color: '#6fe9fd',
lineHeight: '2rem'
},
'& .key': {
fontSize: '0.8rem',
color: '#aaa',
},
},
action: {
textAlign: 'right',
color: '#fff',
}
})
export default function OverallContent({ data }) {
const classes = useStyles();
const dispatch = useDispatch();
const {
drpInfo,
skInfo,
tm1, tm2,
} = data || {};
const { h24, h1, h3, h6 } = drpInfo || {};
const _showRecord = (record, poptype) => {
if (record) {
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: poptype, properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd],
zoom: 15,
pitch: config.poiPitch,
});
}
}
}
const showRecord = (obj) => {
if (!obj) {
return;
}
const { type } = obj;
if (type === 'sk') {
skRealGet(obj.stcd).then((record) => {
_showRecord(record, InfoPopNames.RealSkPop)
})
} else {
drpRealGet(obj).then((record) => {
_showRecord(record, InfoPopNames.RealDrpPop)
});
}
}
const doBx = () => {
bxstr().then((data) => {
dispatch.runtime.setInfoDlg({
layerId: 'OverallSmtp',
properties: { txt: data }
})
});
}
return (
<div className={classes.root}>
<div className={classes.grid}>
<div>
<div className="value">{strNumber(h24?.drpStCount?.total, '-')}</div>
<div className="key">降雨测站</div>
</div>
<div>
<div className="value">{strNumber(skInfo?.aRz, '-')}</div>
<div className="key">超汛限水库</div>
</div>
<div>
<div className="value" style={{ fontSize: '1.5rem', cursor: 'pointer' }} onClick={() => showRecord(h24?.max)}>
{h24?.max?.stnm || '--'}
</div>
<div className="key">最大降雨测站</div>
</div>
</div>
<div>
<span className={classes.titleDate}>{tm1 || '-'}</span>至<span className={classes.titleDate}>{tm2 || '-'}</span>
24小时中共有<span className={classes.number}>{strNumber(h24?.drpStCount?.total, '-')}</span>
个降雨测站(<span className={classes.sttype}>山洪测站</span>
<span className={classes.number}>{strNumber(h24?.drpStCount?.sh, '-')}</span>
个)，其中最大降雨测站为<span onClick={() => showRecord(h24?.max)} className={classes.stname}>{h24?.max?.stnm || '-'}</span>
，降雨量<span className={classes.number}>{strNumber(h24?.max?.value, '-')}</span>mm
{h24?.cntDrp10 > 0 && (<>，<span className={classes.sttype}>10mm以下</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp10, '-')}</span>个</>)}
{h24?.cntDrp25 > 0 && (<>，<span className={classes.sttype}>10mm至25mm</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp25, '-')}</span>个</>)}
{h24?.cntDrp50 > 0 && (<>，<span className={classes.sttype}>25mm至50mm</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp50, '-')}</span>个</>)}
{h24?.cntDrp100 > 0 && (<>，<span className={classes.sttype}>50mm至100mm</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp100, '-')}</span>个</>)}
{h24?.cntDrp250 > 0 && (<>，<span className={classes.sttype}>100mm至250mm</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp250, '-')}</span>个</>)}
{h24?.cntDrpg250 > 0 && (<>，<span className={classes.sttype}>大于250mm</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrpg250, '-')}</span>个</>)}
。
{h1?.max?.value > 0 && (<><span className={classes.sttype}>前1小时</span>最大降雨测站是<span onClick={() => showRecord(h1?.max)} className={classes.stname}>{h1?.max?.stnm}</span>({h1?.max?.value}mm)，</>)}
{h3?.max?.value > 0 && (<><span className={classes.sttype}>前3小时</span>最大降雨测站是<span onClick={() => showRecord(h3?.max)} className={classes.stname}>{h3?.max?.stnm}</span>({h3?.max?.value}mm)，</>)}
{h6?.max?.value > 0 && (<><span className={classes.sttype}>前6小时</span>最大降雨测站是<span onClick={() => showRecord(h6?.max)} className={classes.stname}>{h6?.max?.stnm}</span>({h6?.max?.value}mm)，</>)}
{
!h1?.max?.value || !h3?.max?.value || !h6?.max?.value ? (
`前${[!h1?.max?.value ? '1' : null, !h3?.max?.value ? '3' : null, !h6?.max?.value ? '6' : null].filter(Boolean).join(',')}小时无降雨。`
) : null
}
超汛限水位水库数为<span className={classes.number}>{strNumber(skInfo?.aRz, '-')}</span>座。
</div>
<div className={classes.action}>
<Button startIcon={<Email />} onClick={doBx} style={{ color: '#fff' }} size="small">报讯</Button>
</div>
</div>
)
}

252
src/views/Home/panels/ShWarning/index.js
View File

@ -1,252 +0,0 @@
import React, { useState, useEffect } from 'react';
import { OverallPromise } from '../../../../models/_/real';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
import OverallContent from './OverallContent';
import { makeStyles } from '@material-ui/core/styles';
import {
Box,
Typography,
Checkbox,
FormControlLabel,
ButtonGroup,
Button,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
IconButton,
Collapse,
Paper
} from '@material-ui/core';
// import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove';
import WarningIcon from '@material-ui/icons/Warning';
import AddIcon from '@material-ui/icons/Add';
import { DatePicker } from 'antd';
import moment from 'moment';
const { RangePicker } = DatePicker;
const useStyles = makeStyles((theme) => ({
root: {
color: '#fff'
},
table: {
'& .MuiTableCell-root': {
color: '#fff',
borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
}
},
warningRow: {
'&.immediate': {
backgroundColor: '#d32f2f'
},
'&.prepare': {
backgroundColor: '#ed6c02'
}
},
expandIcon: {
marginRight: theme.spacing(1),
fontSize: 20,
cursor: 'pointer',
transition: 'transform 0.3s',
'&.expanded': {
transform: 'rotate(180deg)'
}
},
warningCount: {
marginLeft: theme.spacing(1)
},
expandedContent: {
backgroundColor: 'rgba(0, 0, 0, 0.2)',
padding: theme.spacing(2)
},
statsSection: {
marginTop: theme.spacing(4)
},
statsTitle: {
color: '#1976d2',
marginBottom: theme.spacing(3)
},
warningStats: {
display: 'flex',
justifyContent: 'space-around',
marginTop: theme.spacing(2)
},
statItem: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center'
},
warningIcon: {
fontSize: 40,
marginBottom: theme.spacing(1),
'&.immediate': {
color: '#d32f2f'
},
'&.prepare': {
color: '#ed6c02'
}
}
}));
export default function Overall({ style }) {
const classes = useStyles();
const [timeRange, setTimeRange] = useState('1h');
const [expanded, setExpanded] = useState({});
const warningData = [
{
type: 'immediate',
label: '立即转移',
count: 0,
details: [] // 这里可以添加详细信息的数组
},
{
type: 'prepare',
label: '准备转移',
count: 0,
details: [] // 这里可以添加详细信息的数组
}
];
const handleExpand = (type) => {
setExpanded(prev => ({
...prev,
[type]: !prev[type]
}));
};
const [params, setParams] = useState({ tm: [] })
const searchTm = (e) => {
setParams({
...params,
stm: e[0].format("YYYY-MM-DD HH:mm"),
etm: e[1].format("YYYY-MM-DD HH:mm"),
tm: e,
})
};
useEffect(() => {
let options = "";
options = {
etm: moment().add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm"),
stm: moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm"),
tm: [
moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }),
moment().add(1, 'hour').set({ minute: 0, second: 0 }),
],
}
setParams(options)
}, [])
return (
<PanelBox
style={style}
title="山洪预警"
color="green"
>
<Box className={classes.root}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ color: "#fff" }}>时段选择：</div>
<div className='tm' style={{ position: "relative", zIndex: 999999, color: "#fff", width: "60%", margin: '10px' }}>
<RangePicker
// width="100%"
className='time-picker'
style={{
flex: 1,
background: "transparent",
border: "none",
color: "#fff",
}}
onChange={searchTm}
allowClear
format="YYYY-MM-DD HH:mm"
showTime={{
format: 'HH:mm',
}}
value={params.tm}
getPopupContainer={trigger => trigger.parentElement}
/>
</div>
</div>
<TableContainer component={Paper} style={{ backgroundColor: 'transparent' }}>
<Table className={classes.table}>
<TableHead>
<TableRow>
<TableCell>乡镇</TableCell>
<TableCell>预警时间</TableCell>
<TableCell>预警状态</TableCell>
</TableRow>
</TableHead>
<TableBody>
{warningData.map((row) => (
<React.Fragment key={row.type}>
<TableRow className={`${classes.warningRow} ${row.type}`}>
<TableCell>
<Box display="flex" alignItems="center">
{expanded[row.type] ? (
<RemoveIcon
className={`${classes.expandIcon} expanded`}
onClick={() => handleExpand(row.type)}
/>
) : (
<AddIcon
className={classes.expandIcon}
onClick={() => handleExpand(row.type)}
/>
)}
{row.label}
</Box>
</TableCell>
<TableCell></TableCell>
<TableCell>
{row.count}个乡镇
</TableCell>
</TableRow>
<TableRow>
<TableCell colSpan={3} style={{ padding: 0 }}>
<Collapse in={expanded[row.type]} timeout="auto" unmountOnExit>
<Box className={classes.expandedContent}>
{/* 这里可以添加展开后显示的详细内容 */}
<Typography>暂无详细信息</Typography>
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
))}
</TableBody>
</Table>
</TableContainer>
<Box className={classes.statsSection}>
<Typography variant="h6" className={classes.statsTitle}>
预警统计: 共 0 条
</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>
</div>
<Typography variant="h6" style={{ color: '#fff' }}>{stat.count}</Typography>
</div>
</Box>
))}
</Box>
</Box>
</Box>
</PanelBox>
)
}

38
src/views/Home/panels/ShWarning/index.less
View File

@ -1,38 +0,0 @@
.dppanel-overall {
padding: 0.75rem;
color: rgb(224, 246, 247);
font-size: 0.8rem;
line-height: 1.8rem;
.title-date {
font-size: 1.2rem;
margin: 0.2rem;
color: #00deff;
}
.number {
color: #ffd220;
font-size: 1.2rem;
margin: 0.2rem;
}
.sttype {
color: #92f0ff;
}
.stname {
font-weight: bold;
font-size: 1rem;
margin: 0.25rem;
}
.sycm {
height: 5rem;
padding-top: 0.75rem;
ul{ margin-left:-.5rem;margin-right:-.5rem; padding: .16rem 0;}
li{ float: left; width: 33.33%; text-align: center; position: relative}
li:before{ position:absolute; content: ""; height:30%; width: 1px; background: rgba(255,255,255,.1); right: 0; top: 15%;}
li:last-child:before{ width: 0;}
li h2{ font-size:2rem; color: #6fe9fd; margin: 0; font-family: 'electronicFont';margin-bottom: 0.5rem;}
li span{ font-size:1rem; color: #fff; opacity: .5;}
}
}

51
src/views/Home/panels/Shksh/Setting.js
View File

@ -1,51 +0,0 @@
import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
import { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
import { useDispatch, useSelector } from 'react-redux';
import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
function Setting({ onClose }) {
const layerVisible = useSelector(getLayerVisible);
const layerSetting = useSelector(getLayerSetting);
const dispath = useDispatch();
return (
<Dialog
open={true}
onClose={onClose}
maxWidth="xl"
style={{ borderRadius: 0 }}
PaperComponent={DpPaperComponent}
BackdropComponent={DpBackgroundDrop}
>
<div className="boxhead"></div>
<DpDialogTitle>河道水位显示设置</DpDialogTitle>
<DialogContent>
<div style={{ width: 320, padding: '1rem 0' }}>
<FormGroup>
<div style={{ marginBottom: '1rem' }}>
<Typography variant="subtitle2">显示河道水位图层</Typography>
<Switch
checked={!!layerVisible.RealHDLayer}
color="primary"
edge="start"
onChange={(e) => dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })}
/>
</div>
</FormGroup>
</div>
</DialogContent>
<div className="boxfoot"></div>
</Dialog>
)
}
export default Setting;

207
src/views/Home/panels/Shksh/index.js
View File

@ -1,207 +0,0 @@
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;

165
src/views/Home/panels/SkWarning/OverallContent.js
View File

@ -1,165 +0,0 @@
import { Button, makeStyles } from '@material-ui/core';
import { Email } from '@material-ui/icons';
import React from 'react';
import { useDispatch } from 'react-redux';
import config from '../../../../config';
import { bxstr, drpRealGet, skRealGet } from '../../../../models/_/real';
import { strNumber } from '../../../../utils/tools';
import { InfoPopNames } from '../../InfoPops';
const useStyles = makeStyles({
root: {
padding: '1.5rem 0.75rem 0.75rem 0.75rem',
color: 'rgb(224, 246, 247)',
fontSize: '0.9rem',
lineHeight: '1.8rem',
},
titleDate: {
fontSize: '1.2rem',
margin: '0.2rem',
color: '#00deff',
},
number: {
color: '#ffd220',
fontSize: '1.2rem',
margin: '0.2rem',
},
sttype: {
color: '#92f0ff',
},
stname: {
fontWeight: 'bold',
fontSize: '1rem',
margin: '0.25rem',
cursor: 'pointer'
},
grid: {
display: 'flex',
justifyContent: 'space-around',
marginBottom: '1rem',
textAlign: 'center',
'& .value': {
fontSize: '1.8rem',
color: '#6fe9fd',
lineHeight: '2rem'
},
'& .key': {
fontSize: '0.8rem',
color: '#aaa',
},
},
action: {
textAlign: 'right',
color: '#fff',
}
})
export default function OverallContent({ data }) {
const classes = useStyles();
const dispatch = useDispatch();
const {
drpInfo,
skInfo,
tm1, tm2,
} = data || {};
const { h24, h1, h3, h6 } = drpInfo || {};
const _showRecord = (record, poptype) => {
if (record) {
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: poptype, properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd],
zoom: 15,
pitch: config.poiPitch,
});
}
}
}
const showRecord = (obj) => {
if (!obj) {
return;
}
const { type } = obj;
if (type === 'sk') {
skRealGet(obj.stcd).then((record) => {
_showRecord(record, InfoPopNames.RealSkPop)
})
} else {
drpRealGet(obj).then((record) => {
_showRecord(record, InfoPopNames.RealDrpPop)
});
}
}
const doBx = () => {
bxstr().then((data) => {
dispatch.runtime.setInfoDlg({
layerId: 'OverallSmtp',
properties: { txt: data }
})
});
}
return (
<div className={classes.root}>
<div className={classes.grid}>
<div>
<div className="value">{strNumber(h24?.drpStCount?.total, '-')}</div>
<div className="key">降雨测站</div>
</div>
<div>
<div className="value">{strNumber(skInfo?.aRz, '-')}</div>
<div className="key">超汛限水库</div>
</div>
<div>
<div className="value" style={{ fontSize: '1.5rem', cursor: 'pointer' }} onClick={() => showRecord(h24?.max)}>
{h24?.max?.stnm || '--'}
</div>
<div className="key">最大降雨测站</div>
</div>
</div>
<div>
<span className={classes.titleDate}>{tm1 || '-'}</span>至<span className={classes.titleDate}>{tm2 || '-'}</span>
24小时中共有<span className={classes.number}>{strNumber(h24?.drpStCount?.total, '-')}</span>
个降雨测站(<span className={classes.sttype}>山洪测站</span>
<span className={classes.number}>{strNumber(h24?.drpStCount?.sh, '-')}</span>
个)，其中最大降雨测站为<span onClick={() => showRecord(h24?.max)} className={classes.stname}>{h24?.max?.stnm || '-'}</span>
，降雨量<span className={classes.number}>{strNumber(h24?.max?.value, '-')}</span>mm
{h24?.cntDrp10 > 0 && (<>，<span className={classes.sttype}>10mm以下</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp10, '-')}</span>个</>)}
{h24?.cntDrp25 > 0 && (<>，<span className={classes.sttype}>10mm至25mm</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp25, '-')}</span>个</>)}
{h24?.cntDrp50 > 0 && (<>，<span className={classes.sttype}>25mm至50mm</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp50, '-')}</span>个</>)}
{h24?.cntDrp100 > 0 && (<>，<span className={classes.sttype}>50mm至100mm</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp100, '-')}</span>个</>)}
{h24?.cntDrp250 > 0 && (<>，<span className={classes.sttype}>100mm至250mm</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp250, '-')}</span>个</>)}
{h24?.cntDrpg250 > 0 && (<>，<span className={classes.sttype}>大于250mm</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrpg250, '-')}</span>个</>)}
。
{h1?.max?.value > 0 && (<><span className={classes.sttype}>前1小时</span>最大降雨测站是<span onClick={() => showRecord(h1?.max)} className={classes.stname}>{h1?.max?.stnm}</span>({h1?.max?.value}mm)，</>)}
{h3?.max?.value > 0 && (<><span className={classes.sttype}>前3小时</span>最大降雨测站是<span onClick={() => showRecord(h3?.max)} className={classes.stname}>{h3?.max?.stnm}</span>({h3?.max?.value}mm)，</>)}
{h6?.max?.value > 0 && (<><span className={classes.sttype}>前6小时</span>最大降雨测站是<span onClick={() => showRecord(h6?.max)} className={classes.stname}>{h6?.max?.stnm}</span>({h6?.max?.value}mm)，</>)}
{
!h1?.max?.value || !h3?.max?.value || !h6?.max?.value ? (
`前${[!h1?.max?.value ? '1' : null, !h3?.max?.value ? '3' : null, !h6?.max?.value ? '6' : null].filter(Boolean).join(',')}小时无降雨。`
) : null
}
超汛限水位水库数为<span className={classes.number}>{strNumber(skInfo?.aRz, '-')}</span>座。
</div>
<div className={classes.action}>
<Button startIcon={<Email />} onClick={doBx} style={{ color: '#fff' }} size="small">报讯</Button>
</div>
</div>
)
}

188
src/views/Home/panels/SkWarning/index.js
View File

@ -1,188 +0,0 @@
import React, { useState } from 'react';
import { OverallPromise } from '../../../../models/_/real';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
import OverallContent from './OverallContent';
import { makeStyles } from '@material-ui/core/styles';
import {
Box,
Typography,
Checkbox,
FormControlLabel,
ButtonGroup,
Button,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
IconButton,
Collapse
} from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove';
const useStyles = makeStyles((theme) => ({
root: {
color: '#fff',
'& .MuiTypography-root': {
color: '#fff'
},
'& .MuiCheckbox-root': {
color: '#fff',
'&.Mui-checked': {
color: '#409eff'
}
},
'& .MuiButtonGroup-root': {
marginTop: theme.spacing(2),
marginBottom: theme.spacing(3)
}
},
typeSection: {
marginBottom: theme.spacing(2)
},
timeButton: {
color: '#fff',
borderColor: 'rgba(255,255,255,0.3)',
'&.MuiButton-contained': {
backgroundColor: '#409eff',
color: '#fff',
'&:hover': {
backgroundColor: '#409eff'
}
},
'&:hover': {
backgroundColor: 'rgba(255,255,255,0.1)'
}
},
table: {
'& .MuiTableCell-root': {
color: '#fff',
borderColor: 'rgba(255,255,255,0.1)'
}
},
expandButton: {
color: '#fff'
},
stationRow: {
'&:nth-of-type(odd)': {
backgroundColor: 'rgba(255,255,255,0.05)'
},
'&:hover': {
backgroundColor: 'rgba(255,255,255,0.1)'
}
},
expandedRow: {
'&.pink': { backgroundColor: 'rgba(255,192,203,0.1)' },
'&.purple': { backgroundColor: 'rgba(147,112,219,0.1)' },
'&.blue': { backgroundColor: 'rgba(135,206,235,0.1)' },
'&.green': { backgroundColor: 'rgba(144,238,144,0.1)' }
}
}));
export default function Overall({ style }) {
const classes = useStyles();
const [types, setTypes] = useState({
mountain: true,
water: true,
weather: true,
reservoir: true
});
const [timeRange, setTimeRange] = useState('1h');
const [expanded, setExpanded] = useState({});
const handleTypeChange = (event) => {
setTypes({
...types,
[event.target.name]: event.target.checked
});
};
const stations = [
{ id: 'history', name: '超校核洪水位', count: 0, color: 'pink' },
{ id: '100year', name: '超设计洪水位', count: 0, color: 'purple' },
{ id: '50year', name: '超汛限水位', count: 0, color: 'blue' },
];
const toggleExpand = (id) => {
setExpanded(prev => ({
...prev,
[id]: !prev[id]
}));
};
return (
<PanelBox
style={style}
title="水库预警"
color="green"
>
<Box className={classes.root}>
<Box className={classes.typeSection}>
<Typography component="span">类型：</Typography>
<FormControlLabel
control={<Checkbox checked={types.water} onChange={handleTypeChange} name="water" />}
label="水文"
/>
<FormControlLabel
control={<Checkbox checked={types.reservoir} onChange={handleTypeChange} name="reservoir" />}
label="水库"
/>
</Box>
<TableContainer>
<Table className={classes.table}>
<TableHead>
<TableRow>
<TableCell style={{ width: '50%' }}>站名</TableCell>
<TableCell style={{ width: '20%' }}>水位(mm)</TableCell>
<TableCell style={{ width: '15%' }}>所属政区</TableCell>
<TableCell style={{ width: '15%' }}>所属流域</TableCell>
</TableRow>
</TableHead>
<TableBody>
{stations.map((station) => (
<React.Fragment key={station.id}>
<TableRow className={classes.stationRow}>
<TableCell>
<Box display="flex" alignItems="center">
<IconButton
size="small"
className={classes.expandButton}
onClick={() => toggleExpand(station.id)}
>
{expanded[station.id] ? <RemoveIcon /> : <AddIcon />}
</IconButton>
{station.name}({station.count})
</Box>
</TableCell>
<TableCell></TableCell>
<TableCell></TableCell>
<TableCell></TableCell>
</TableRow>
<TableRow>
<TableCell colSpan={4} 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> */}
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
))}
</TableBody>
</Table>
</TableContainer>
</Box>
</PanelBox>
)
}

38
src/views/Home/panels/SkWarning/index.less
View File

@ -1,38 +0,0 @@
.dppanel-overall {
padding: 0.75rem;
color: rgb(224, 246, 247);
font-size: 0.8rem;
line-height: 1.8rem;
.title-date {
font-size: 1.2rem;
margin: 0.2rem;
color: #00deff;
}
.number {
color: #ffd220;
font-size: 1.2rem;
margin: 0.2rem;
}
.sttype {
color: #92f0ff;
}
.stname {
font-weight: bold;
font-size: 1rem;
margin: 0.25rem;
}
.sycm {
height: 5rem;
padding-top: 0.75rem;
ul{ margin-left:-.5rem;margin-right:-.5rem; padding: .16rem 0;}
li{ float: left; width: 33.33%; text-align: center; position: relative}
li:before{ position:absolute; content: ""; height:30%; width: 1px; background: rgba(255,255,255,.1); right: 0; top: 15%;}
li:last-child:before{ width: 0;}
li h2{ font-size:2rem; color: #6fe9fd; margin: 0; font-family: 'electronicFont';margin-bottom: 0.5rem;}
li span{ font-size:1rem; color: #fff; opacity: .5;}
}
}

51
src/views/Home/panels/Yawg/Setting.js
View File

@ -1,51 +0,0 @@
import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
import { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
import { useDispatch, useSelector } from 'react-redux';
import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
function Setting({ onClose }) {
const layerVisible = useSelector(getLayerVisible);
const layerSetting = useSelector(getLayerSetting);
const dispath = useDispatch();
return (
<Dialog
open={true}
onClose={onClose}
maxWidth="xl"
style={{ borderRadius: 0 }}
PaperComponent={DpPaperComponent}
BackdropComponent={DpBackgroundDrop}
>
<div className="boxhead"></div>
<DpDialogTitle>河道水位显示设置</DpDialogTitle>
<DialogContent>
<div style={{ width: 320, padding: '1rem 0' }}>
<FormGroup>
<div style={{ marginBottom: '1rem' }}>
<Typography variant="subtitle2">显示河道水位图层</Typography>
<Switch
checked={!!layerVisible.RealHDLayer}
color="primary"
edge="start"
onChange={(e) => dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })}
/>
</div>
</FormGroup>
</div>
</DialogContent>
<div className="boxfoot"></div>
</Dialog>
)
}
export default Setting;

267
src/views/Home/panels/Yawg/constatData.js
View File

@ -1,267 +0,0 @@
const showData = [
{
"mvalue": null,
"wainWasoType": null,
"updserRsn": null,
"gtctrTp": null,
"updDate": "2025-01-07",
"chanCode": "420802001350",
"engStat": null,
"desTotInsCap": null,
"gateSize": "3*3*2，4*4*2",
"wagaCode": "HP0074208020000170",
"adCode": "420802102000000",
"adCode_dictText": "漳河镇",
"lgtd": 112.075597 +2.9619,
"updserInvst": null,
"engGrad": null,
"runStat": "1",
"irrCode_dictText": "水库枢纽",
"flow": null,
"bnch": "0+000",
"startLat": null,
"engScal": null,
"chanCode_dictText": "总干渠",
"lockDisc": null,
"wagaUse": null,
"engManCode_dictText": "副坝管理所",
"irrCode": "D00001300",
"sort": 1001,
"stcd": "4262630017",
"dsfl": 121,
"admDep": null,
"startDate": null,
"note": "年久失修，需配套更新",
"inEle": 110,
"pwrTp": "2",
"updserDate": null,
"engManCode": "ENG100051",
"chidCount": null,
"whthInWat_dictText": "是",
"lttd": 30.961122 +0.2002,
"whthInWat": "1",
"hasImg": false,
"stfl": 131,
"endLat": null,
"wagaType": "6",
"endLong": null,
"gtctrTlmtCd": null,
"outEle": 110,
"pwrTp_dictText": "电动",
"wagaName": "渠首闸",
"wagaType_dictText": "进水闸",
"hdgrTp": "7",
"compDate": null,
"startLong": null,
"gaorNum": 8,
"runStat_dictText": "在用良好",
"gateTp": "平板钢闸门",
"hdgrTp_dictText": "7",
"insPow": null,
"collDate": "2022-09-15"
},
{
"mvalue": null,
"wainWasoType": null,
"engGrad_dictText": "Ⅱ",
"updserRsn": "闸门漏水严重",
"gtctrTp": null,
"updDate": "2023-03-22",
"chanCode": "420802001350",
"engStat": null,
"desTotInsCap": null,
"gateSize": "5.6*3",
"wagaCode": "HP007420804000188X",
"adCode": "420804004213000",
"adCode_dictText": "车桥村",
"lgtd": 112.118889 +2.9619,
"updserInvst": 20,
"engGrad": "2",
"runStat": "1",
"irrCode_dictText": "总干渠",
"flow": null,
"bnch": "7+670",
"startLat": null,
"engScal": "2",
"chanCode_dictText": "总干渠",
"lockDisc": null,
"wagaUse": null,
"engManCode_dictText": "车桥管理段",
"irrCode": "D00000290",
"sort": 1003,
"stcd": "4263630188",
"dsfl": 140,
"admDep": null,
"startDate": null,
"note": null,
"inEle": 109.33,
"pwrTp": "3",
"updserDate": "2010-01-01",
"engManCode": "ENG100037",
"chidCount": null,
"whthInWat_dictText": "否",
"lttd": 30.974167 +0.2002,
"whthInWat": "2",
"hasImg": false,
"stfl": 5,
"endLat": null,
"wagaType": "2",
"endLong": null,
"gtctrTlmtCd": null,
"outEle": 99.5,
"pwrTp_dictText": "手电两用",
"wagaName": "车桥泄洪闸",
"wagaType_dictText": "泄洪闸",
"hdgrTp": "2",
"compDate": "1963-06-01",
"startLong": null,
"gaorNum": 4,
"runStat_dictText": "在用良好",
"gateTp": null,
"hdgrTp_dictText": "螺杆式",
"insPow": null,
"collDate": "2022-09-15"
},
]
const bzData = [
{
"note": null,
"inEle": null,
"mainBuildGrad": null,
"pustType": null,
"updserDate": null,
"engManCode": "ENG200038",
"wasuRang": "生态用水",
"wainWasoType": null,
"lttd": 30.97131 +0.2002,
"updserRsn": null,
"updDate": "2023-03-21",
"pustCode": "HP0104208040001543",
"chanCode": "420802001350",
"engStat": null,
"startRunDate": null,
"pustName": "生态取水点1",
"stfl": 0.1,
"adCode": "420804004000000",
"adCode_dictText": "双喜街道办事处",
"lgtd": 112.18575 +2.9619,
"actIrrA": null,
"updserInvst": null,
"engGrad": null,
"irrCode_dictText": "总干渠",
"engTask": null,
"bnch": "16+870",
"engScal": null,
"pumpSetNum": 2,
"insFlow": null,
"chanCode_dictText": "总干渠",
"desIrrA": null,
"engManCode_dictText": "村(镇)",
"pumpNum": null,
"irrCode": "D00000290",
"sort": 101,
"desHead": 15,
"compDate": "2013-11-01",
"totInsCap": 8,
"serCod": "正常",
"dsfl": 0.1,
"insPow": null,
"admDep": null,
"startDate": null,
"collDate": "2022-08-23"
},
{
"note": null,
"inEle": null,
"mainBuildGrad": null,
"pustType": null,
"updserDate": null,
"engManCode": "ENG200038",
"wasuRang": "生态用水",
"wainWasoType": null,
"lttd": 30.96613 -0.2002,
"updserRsn": null,
"updDate": "2023-03-21",
"pustCode": "HP0104208040001558",
"chanCode": "420802001350",
"engStat": null,
"startRunDate": null,
"pustName": "生态取水点2",
"stfl": 0.1,
"adCode": "420804001003000",
"adCode_dictText": "白石坡社区",
"lgtd": 112.19441 +2.9619,
"actIrrA": null,
"updserInvst": null,
"engGrad": null,
"irrCode_dictText": "总干渠",
"engTask": null,
"bnch": "18+000",
"engScal": null,
"pumpSetNum": 3,
"insFlow": null,
"chanCode_dictText": "总干渠",
"desIrrA": null,
"engManCode_dictText": "村(镇)",
"pumpNum": null,
"irrCode": "D00000290",
"sort": 102,
"desHead": 15,
"compDate": "2009-08-01",
"totInsCap": 22.5,
"serCod": "正常",
"dsfl": 0.1,
"insPow": null,
"admDep": null,
"startDate": null,
"collDate": "2022-08-23"
},
{
"note": "年久失修",
"inEle": null,
"mainBuildGrad": null,
"pustType": null,
"updserDate": null,
"engManCode": "ENG200038",
"wasuRang": "车桥三组",
"wainWasoType": null,
"lttd": 30.972222 -0.2002,
"updserRsn": null,
"updDate": "2023-03-21",
"pustCode": "HP0104208040001467",
"chanCode": "420802001350",
"engStat": null,
"startRunDate": null,
"pustName": "车桥泵站1 ",
"stfl": 0.1,
"adCode": "420804004213000",
"adCode_dictText": "车桥村",
"lgtd": 112.121667 - 2.9619,
"actIrrA": 40,
"updserInvst": null,
"engGrad": null,
"irrCode_dictText": "总干渠",
"engTask": null,
"bnch": "8+155",
"engScal": null,
"pumpSetNum": 1,
"insFlow": null,
"chanCode_dictText": "总干渠",
"desIrrA": null,
"engManCode_dictText": "村(镇)",
"pumpNum": null,
"irrCode": "D00000290",
"sort": 103,
"desHead": 8,
"compDate": "1982-07-01",
"totInsCap": 4,
"serCod": "异常",
"dsfl": 0.1,
"insPow": null,
"admDep": null,
"startDate": null,
"collDate": "2022-08-23"
},
]
export { showData,bzData }

194
src/views/Home/panels/Yawg/index.js
View File

@ -1,194 +0,0 @@
import React, { useMemo, useState,useEffect } from 'react';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
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 { useDispatch, useSelector } from 'react-redux';
import useRefresh from '../../../../utils/useRefresh';
import { HDRealPromise } from '../../../../models/_/real';
import clsx from 'clsx';
import { renderHDRz } from '../../../../utils/renutils';
import Setting from './Setting';
import { InfoPopNames } from '../../InfoPops';
import config from '../../../../config';
import { showData,bzData} from './constatData'
import './index.less'
function rzRender(rz, base) {
return (
<DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
{typeof base === 'number' ? base.toFixed(2) : ''}
</DpTableCell>
);
}
function HDReal({ style }) {
const dispatch = useDispatch();
const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
// const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
// let { data } = useRequest(HDRealPromise.get, t);
const [setting, showSetting] = useState(false);
const flyTo = (record, type) => {
toggleStType(type)
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type, properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
zoom: config.poiPositionZoom.hd,
pitch: config.poiPitch,
});
}
}
const wgData = [
{
}
]
const [type, setType] = useState('fx')
const toggleStType = (type) => {
setType(type)
}
const toggleAutoRefresh = () => {
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
}
useEffect(() => {
return () => {
dispatch.runtime.setShksh(undefined)
}
}, [])
return (
<PanelBox
style={style}
title=""
color="green"
tabs={
<span className="button-group">
<span className={clsx({ active: type == 'fx' })} onClick={() => toggleStType('fx')}>风险网格</span>
<span className={clsx({ active: type == 'jg' })} onClick={() => toggleStType('jg')}>结构化预案</span>
</span>
}
extra={
<>
<i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
{/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
</>
}
>
{type == 'fx' ? <div style={{color:'#fff',margin:'5px 10px'}}>山洪灾害防治区及重点防治区内需转移人员基本情况</div> : null}
{
type == 'fx' ?
<>
<TableContainer style={{ height: '50%' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ width: '25%' }} align="center">户主</DpTableCell>
<DpTableCell style={{ width: '25%' }} align="center">家庭人口</DpTableCell>
<DpTableCell align="center" style={{ width: '25%' }}>宅基高程(m)</DpTableCell>
<DpTableCell align="center" style={{ width: '25%' }}>房屋面积(m²)</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{[].map((row) => (
<DpTableRow key={row.id} onClick={() => flyTo(row, 'bz')}>
<DpTableCell align="center">
{row.pustName}
</DpTableCell>
<DpTableCell align="center">
{row.pustType}
</DpTableCell>
<DpTableCell align="center">{row.irrCode_dictText}</DpTableCell>
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer>
<div style={{ color: '#fff', margin: '5px 10px' }}>风险统计</div>
<div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', columnGap: 40 }}>
<div style={{ padding: 10, width: 130, background: "linear-gradient(to bottom, #001529, #003366)" }}>
<div className="value" style={{ color: '#5ecd45' }}>35</div>
<div className="key" style={{ color: '#fff', fontSize: 16 }}>危险区面积</div>
</div>
<div style={{ padding: 10, width: 130, background: "linear-gradient(to bottom, #001529, #003366)" }}>
<div className="value" style={{ color: '#5ecd45' }}>35</div>
<div className="key" style={{ color: '#fff', fontSize: 16 }}>危险区户数</div>
</div>
<div style={{ padding: 10, width: 130, background: "linear-gradient(to bottom, #001529, #003366)" }}>
<div className="value" style={{ color: '#5ecd45' }}>35</div>
<div className="key" style={{ color: '#fff', fontSize: 16 }}>风险点(个)</div>
</div>
<div style={{ padding: 10, width: 130, background: "linear-gradient(to bottom, #001529, #003366)" }}>
<div
className="value"
style={{ cursor: 'pointer', color: '#5ecd45' }}
>
15
</div>
<div className="key" style={{ color: '#fff', fontSize: 16 }}>危险区人口(人)</div>
</div>
</div>
</>
: <div className="basic-info">
<div className="section-title">基本情况</div>
<div className="info-content">
<div className="info-row">
<div className="info-item">
<span className="label">威胁对象：</span>
<span className="value">18</span>
</div>
<div className="info-item">
<span className="label">威胁人口：</span>
<span className="value">75</span>
</div>
</div>
<div className="info-item">
<span className="label">安置点：</span>
<span className="value">2组,3组</span>
</div>
<div className="divider"></div>
<div className="section-title">预警指标</div>
<div className="warning-item">
<span className="label">准备转移：</span>
<span className="value">1小时-mm; 3小时-mm; 6小时-mm</span>
</div>
<div className="warning-item">
<span className="label">立即转移：</span>
<span className="value">1小时-mm; 3小时-mm; 6小时-mm</span>
</div>
<div className="divider"></div>
<div className="section-title">防汛值班电话</div>
<div className="phone-item">
<div className="label">市汛期值班电话：</div>
</div>
<div className="phone-item" style={{display:'flex'}}>
<div className="label">县汛期值班电话：</div>
<a href="tel:0718-3225026" className="phone-number">0718-3225026</a>
</div>
</div>
</div>
}
{/* {
setting && <Setting onClose={() => showSetting(false)} />
} */}
</PanelBox>
)
}
export default HDReal;

77
src/views/Home/panels/Yawg/index.less
View File

@ -1,77 +0,0 @@
.basic-info {
color: #fff;
padding: 16px;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
.info-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 16px;
}
.info-content {
font-size: 14px;
}
.info-row {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
}
.info-item {
margin-bottom: 12px;
}
.warning-item {
margin-bottom: 8px;
}
.label {
color: rgba(255, 255, 255, 0.7);
}
.value {
margin-left: 8px;
}
.divider {
height: 1px;
background-color: rgba(255, 255, 255, 0.12);
margin: 16px 0;
}
.section-title {
font-size: 16px;
font-weight: bold;
margin: 16px 0;
color: #1976d2;
position: relative;
padding-left: 12px;
}
.section-title::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 16px;
background-color: #1976d2;
}
.phone-item {
margin-bottom: 8px;
}
.phone-number {
color: #4fc3f7;
text-decoration: none;
}
.phone-number:hover {
text-decoration: underline;
}