110 lines
2.9 KiB
JavaScript
110 lines
2.9 KiB
JavaScript
|
import { Button, makeStyles, Typography } from '@material-ui/core'
|
|||
|
|
import React, { useMemo } from 'react'
|
|||
|
|
import { WarnRespListPromise } from '../../../../models/_/warnresp';
|
|||
|
|
import { WARNRESP_COLOR } from '../../../../utils/renutils';
|
|||
|
|
import useRequest from '../../../../utils/useRequest'
|
|||
|
|
|
|||
|
|
const useStyles = makeStyles({
|
|||
|
|
root: {
|
|||
|
|
display: 'flex',
|
|||
|
|
flexGrow: 1,
|
|||
|
|
flexDirection: 'column',
|
|||
|
|
alignItems: 'stretch',
|
|||
|
|
padding: '1rem'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
item: {
|
|||
|
|
height: '25%',
|
|||
|
|
display: 'flex',
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
sep: {
|
|||
|
|
borderBottom: '1px dashed #bce9f088',
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
head: {
|
|||
|
|
width: '15%',
|
|||
|
|
display: 'flex',
|
|||
|
|
justifyContent: 'center',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
banner: {
|
|||
|
|
borderRadius: '0.25rem',
|
|||
|
|
padding: '1rem',
|
|||
|
|
color: '#fff',
|
|||
|
|
border: '2px solid #fff8',
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
content: {
|
|||
|
|
flexGrow: 1,
|
|||
|
|
padding: '0.8rem',
|
|||
|
|
overflowY: 'auto'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
action: {
|
|||
|
|
width: '10%',
|
|||
|
|
display: 'flex',
|
|||
|
|
justifyContent: 'center',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function Item({ level, classes, doStart, conf }) {
|
|||
|
|
const standards = conf?.standards || [];
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<div className={classes.head}>
|
|||
|
|
<div className={classes.banner} style={{ backgroundColor: WARNRESP_COLOR[level] }}>{`${level}级响应`}</div>
|
|||
|
|
</div>
|
|||
|
|
<div className={classes.content}>
|
|||
|
|
<Typography style={{ color: '#fff8' }} variant="body1">当发生以下情况之一时，启动防汛{level}级响应</Typography>
|
|||
|
|
{
|
|||
|
|
standards.map(o => (
|
|||
|
|
<Typography key={o.id} style={{ color: '#fffd' }} variant="body2">{o.standard}</Typography>
|
|||
|
|
))
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
<div className={classes.action}>
|
|||
|
|
<Button size="large" color="primary" onClick={() => doStart(conf)}>启动</Button>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function StartWarnRespPanel({ type, doStart }) {
|
|||
|
|
const classes = useStyles();
|
|||
|
|
|
|||
|
|
const { data: listdata } = useRequest(WarnRespListPromise.get);
|
|||
|
|
|
|||
|
|
const datas = useMemo(() => {
|
|||
|
|
if (!listdata) {
|
|||
|
|
return [null, null, null, null];
|
|||
|
|
}
|
|||
|
|
return ['Ⅰ', 'Ⅱ', 'Ⅲ', 'Ⅳ'].map(level => listdata.find(o => o.level === level && o.type === type));
|
|||
|
|
}, [listdata, type]);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className={classes.root}>
|
|||
|
|
<div className={classes.item}>
|
|||
|
|
<Item level="Ⅰ" classes={classes} doStart={doStart} conf={datas[0]} />
|
|||
|
|
</div>
|
|||
|
|
<div className={classes.sep}></div>
|
|||
|
|
<div className={classes.item}>
|
|||
|
|
<Item level="Ⅱ" classes={classes} doStart={doStart} conf={datas[1]} />
|
|||
|
|
</div>
|
|||
|
|
<div className={classes.sep}></div>
|
|||
|
|
<div className={classes.item}>
|
|||
|
|
<Item level="Ⅲ" classes={classes} doStart={doStart} conf={datas[2]} />
|
|||
|
|
</div>
|
|||
|
|
<div className={classes.sep}></div>
|
|||
|
|
<div className={classes.item}>
|
|||
|
|
<Item level="Ⅳ" classes={classes} doStart={doStart} conf={datas[3]} />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default React.memo(StartWarnRespPanel)
|