bug修复

skyouc

7 天以前 543d35f102cc067ba1178ff177881e68110bda72

 rsf-admin/src/page/components/CardWithIcon.jsx

@@ -1,60 +1,86 @@
import * as React from 'react';
import { FC, createElement } from 'react';
import { Card, Box, Typography, Divider } from '@mui/material';
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 }) => (
    <Card
        sx={{
            minHeight: 52,
            display: 'flex',
            flexDirection: 'column',
            flex: '1',
            '& a': {
                textDecoration: 'none',
                color: 'inherit',
            },
        }}
    >
        <Box
const CardWithIcon = ({ icon, title, subtitle, to, children, statistic, type }) => {
    const translate = useTranslate();
    return (
        <Card
            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,
                width: '100%',
                maxHeight: 1025,
                minHeight: 52,
                flexDirection: 'column',
                flex: '1',
                '& a': {
                    textDecoration: 'none',
                    color: 'inherit',
                },
            }}
        >
            <Box width="3em" className="icon">
                {createElement(icon, { fontSize: 'large' })}
            <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>
            <Box textAlign="right">
                <Typography color="textSecondary">{title}</Typography>
                <Typography variant="h5" component="h2">
                    {subtitle || ' '}
                </Typography>
            </Box>
        </Box>
        {children && <Divider />}
        {children}
    </Card>
);
            {children && <Divider />}
            {children}
        </Card>

    )
};

export default CardWithIcon;