75 lines
1.9 KiB
JavaScript
75 lines
1.9 KiB
JavaScript
import React from 'react';
|
|
import { Card, CardContent, Typography, Button, Box,Grid, Chip } from '@material-ui/core';
|
|
import { makeStyles } from '@material-ui/core/styles';
|
|
|
|
const useStyles = makeStyles(() => ({
|
|
card: {
|
|
marginBottom: '16px',
|
|
// backgroundColor: '#fff',
|
|
'&:hover': {
|
|
boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
|
|
}
|
|
},
|
|
statusChip: {
|
|
position: 'absolute',
|
|
right: '-10px',
|
|
top: '-30px',
|
|
backgroundColor: '#52c41a',
|
|
color: '#fff'
|
|
},
|
|
label: {
|
|
color: '#73ade8',
|
|
width: '80px',
|
|
display: 'inline-block'
|
|
},
|
|
value: {
|
|
color: '#fff',
|
|
},
|
|
buttons: {
|
|
marginTop: '16px',
|
|
'& .MuiButton-root': {
|
|
marginLeft: '8px'
|
|
}
|
|
}
|
|
}));
|
|
|
|
const WarningCard = ({ data, onDelete, onAddPlan }) => {
|
|
const classes = useStyles();
|
|
|
|
return (
|
|
<Card className={classes.card}>
|
|
<CardContent>
|
|
<Box position="relative">
|
|
<Typography variant="h6" gutterBottom style={{color:'#fff',marginTop:10}}>
|
|
{data.title}
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Grid spacing={1}>
|
|
<Box>
|
|
<span className={classes.label}>预演类别:</span>
|
|
<span className={classes.value}>{data.type}</span>
|
|
</Box>
|
|
<Box>
|
|
<span className={classes.label}>风险隐患:</span>
|
|
<span className={classes.value}>{data.risk}</span>
|
|
</Box>
|
|
<Box>
|
|
<span className={classes.label}>预演时段:</span>
|
|
<span className={classes.value}>{data.timeRange}</span>
|
|
</Box>
|
|
<Box>
|
|
<span className={classes.label}>生成时间:</span>
|
|
<span className={classes.value}>{data.createTime}</span>
|
|
</Box>
|
|
<Box>
|
|
<span className={classes.label}>创建人:</span>
|
|
<span className={classes.value}></span>
|
|
</Box>
|
|
</Grid>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default WarningCard; |