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)
|