1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
| import * as React from 'react';
| import { FC, createElement } from 'react';
| import { Card, Box, Typography, Divider, Stack } from '@mui/material';
| import { useTranslate } from 'react-admin';
|
| import { Link } from 'react-router-dom';
|
| const CardWithIcon = ({ icon, title, subtitle, to, children, statistic, type }) => {
| const translate = useTranslate();
| return (
| <Card
| sx={{
| width: '100%',
| maxHeight: 1025,
| minHeight: 52,
| flexDirection: 'column',
| flex: '1',
| '& a': {
| textDecoration: 'none',
| color: 'inherit',
| },
| }}
| >
| <Box
| sx={{
| position: 'relative',
| overflow: 'hidden',
| padding: '16px',
| display: 'flex',
| justifyContent: 'space-between',
| alignItems: 'center',
| '& .icon': {
| color: 'primary.main',
| },
| '&:before': {
| position: 'absolute',
| top: '50%',
| left: 0,
| display: 'block',
| content: `''`,
| height: '200%',
| aspectRatio: '1',
| transform: 'translate(-30%, -60%)',
| borderRadius: '50%',
| backgroundColor: 'primary.main',
| opacity: 0.15,
| },
| }}
| >
| <Box width="3em" className="icon">
| {createElement(icon, { fontSize: 'large' })}
| </Box>
| <Box textAlign="right">
| <Typography variant="h5" component="h2">
| {subtitle || ' '}
| </Typography>
| {type ? <Box sx={{ display: "flex" }}>
| <Box sx={{ display: 'flex', padding: '1em' }}>
| <Typography color="textSecondary">{translate("page.dashboard.header.planQty")}：</Typography>
| <Typography color="textSecondary">{statistic?.inAnf}</Typography>
| </Box>
| {!children && <Box sx={{ display: "flex" }}>
| <Box sx={{ display: 'flex', padding: '1em' }}>
| <Typography color="textSecondary">{translate("page.dashboard.header.realQty")}：</Typography>
| <Typography color="textSecondary">{statistic?.taskIn}</Typography>
| </Box>
| <Box sx={{ display: 'flex', padding: '1em' }}>
| <Typography color="textSecondary">{type == 'in' ? translate("page.dashboard.header.waitQty") : translate("page.dashboard.header.waitOutQty")}：</Typography>
| <Typography color="textSecondary">{type == 'in' ? statistic?.taskIn : statistic?.taskOut}</Typography>
| </Box>
| </Box>}
| </Box> : <Box>
| <Typography sx={{ display: 'flex', padding: '1em' }}>
| { title }
| </Typography>
| </Box>}
| </Box>
| </Box>
| {children && <Divider />}
| {children}
| </Card>
|
| )
| };
|
| export default CardWithIcon;
|
|
