82 lines
2.1 KiB
JavaScript
82 lines
2.1 KiB
JavaScript
import React from 'react';
|
|
import { makeStyles } from '@material-ui/core/styles';
|
|
import Box from '@material-ui/core/Box';
|
|
import Paper from '@material-ui/core/Paper';
|
|
import Typography from '@material-ui/core/Typography';
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
root: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '20px',
|
|
},
|
|
row: {
|
|
display: 'flex',
|
|
gap: '20px',
|
|
justifyContent: 'flex-start',
|
|
},
|
|
card: {
|
|
width: '200px',
|
|
height: '100px',
|
|
padding: '16px',
|
|
// background: 'linear-gradient(135deg, rgba(9, 70, 113,0.5) 0%, rgba(9, 70, 113,0.8) 100%)',
|
|
background:'rgba(6, 43, 78,.5)',
|
|
border: '1px solid rgba(9, 70, 113,1)',
|
|
borderRadius: '8px',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'space-between',
|
|
alignItems:'center',
|
|
backdropFilter: 'blur(10px)',
|
|
},
|
|
title: {
|
|
color: '#fff',
|
|
fontSize: '16px',
|
|
fontWeight: 'normal',
|
|
},
|
|
count: {
|
|
color: '#04f21c',
|
|
fontSize: '24px',
|
|
fontWeight: 'bold',
|
|
},
|
|
}));
|
|
|
|
const PatrolStatistics = () => {
|
|
const classes = useStyles();
|
|
|
|
const patrolTypes = [
|
|
{ title: '日常巡查', count: 456 },
|
|
{ title: '汛期巡查', count: 32 },
|
|
{ title: '特别巡查', count: 3 },
|
|
];
|
|
|
|
const patrolStatus = [
|
|
{ title: '已完成', count: 456 },
|
|
{ title: '未完成', count: 32 },
|
|
{ title: '进行中', count: 3 },
|
|
];
|
|
|
|
const StatCard = ({ title, count }) => (
|
|
<Paper className={classes.card}>
|
|
<Typography className={classes.title}>{title}</Typography>
|
|
<Typography className={classes.count}>{count} <span style={{fontSize:16,color:"#fff",fontWeight:'normal'}}>次</span></Typography>
|
|
</Paper>
|
|
);
|
|
|
|
return (
|
|
<Box className={classes.root}>
|
|
<Box className={classes.row}>
|
|
{patrolTypes.map((item, index) => (
|
|
<StatCard key={`type-${index}`} {...item} />
|
|
))}
|
|
</Box>
|
|
<Box className={classes.row}>
|
|
{patrolStatus.map((item, index) => (
|
|
<StatCard key={`status-${index}`} {...item} />
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default PatrolStatistics; |