#

vincentlu

2 天以前 878ba960dd6ea01fc9c434d49ea902efc2cb8f24

#

 zy-acs-flow/src/map/insight/code/CodeMain.jsx

@@ -8,6 +8,7 @@
    Grid,
    Chip,
    Button,
    Divider,
    Skeleton,
    useTheme,
} from '@mui/material';
@@ -465,8 +466,9 @@
                }
            />
        </Box>
        <Divider />
        {loading ? (
            <Skeleton variant="rounded" height={220} />
            <Skeleton variant="rounded" height={188} />
        ) : (
            <DirectionRuleCompass rules={rules} translate={translate} />
        )}
@@ -476,78 +478,81 @@
const DirectionRuleCompass = ({ rules, translate }) => {
    const theme = useTheme();
    const enabledCount = rules.filter(rule => rule.enabled).length;
    const placement = {
        0: { gridColumn: '2 / span 3', gridRow: 1 },
        90: { gridColumn: '4 / span 2', gridRow: 2 },
        180: { gridColumn: '2 / span 3', gridRow: 3 },
        270: { gridColumn: '1 / span 2', gridRow: 2 },
    };
    const topRule = rules.find(rule => rule.angle === 0);
    const rightRule = rules.find(rule => rule.angle === 90);
    const bottomRule = rules.find(rule => rule.angle === 180);
    const leftRule = rules.find(rule => rule.angle === 270);

    return (
        <Stack spacing={0.85} alignItems="center">
            <DirectionRuleCard rule={topRule} translate={translate} />
            <Stack direction="row" spacing={0.6} alignItems="center" justifyContent="center">
                <DirectionRuleCard rule={leftRule} translate={translate} />
        <Box
            sx={{
                display: 'grid',
                gridTemplateColumns: 'repeat(5, minmax(0, 1fr))',
                gridTemplateRows: 'repeat(3, minmax(44px, auto))',
                gap: 1,
                alignItems: 'stretch',
            }}
        >
            <Box
                sx={{
                    gridColumn: 3,
                    gridRow: 2,
                    borderRadius: 3,
                        width: 52,
                        height: 42,
                        borderRadius: 2.5,
                    border: '1px dashed',
                    borderColor: 'divider',
                    backgroundColor: alpha(theme.palette.primary.main, 0.04),
                    px: 1,
                    py: 0.5,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    textAlign: 'center',
                        flexShrink: 0,
                }}
            >
                <Typography variant="h6" sx={{ lineHeight: 1.1, fontWeight: 700 }}>
                    <Typography variant="h5" sx={{ lineHeight: 1, fontWeight: 700, fontSize: '0.98rem' }}>
                    {enabledCount}/{rules.length}
                </Typography>
            </Box>
            {rules.map(rule => {
                const position = placement[rule.angle] || { gridColumn: 'auto', gridRow: 'auto' };
                <DirectionRuleCard rule={rightRule} translate={translate} />
            </Stack>
            <DirectionRuleCard rule={bottomRule} translate={translate} />
        </Stack>
    );
};

const DirectionRuleCard = ({ rule, translate }) => {
    const theme = useTheme();

    if (!rule) {
        return null;
    }

                const statusText = translate(
                    rule.enabled ? 'page.code.dirRule.status.enabled' : 'page.code.dirRule.status.disabled'
                );

                return (
                    <Box
                        key={rule.angle}
                        sx={{
                            ...position,
                            borderRadius: 3,
                width: 68,
                height: 42,
                borderRadius: 2.5,
                            border: '1px solid',
                            borderColor: rule.enabled ? 'success.light' : 'error.light',
                            backgroundColor: rule.enabled
                                ? alpha(theme.palette.success.main, 0.08)
                                : alpha(theme.palette.error.main, 0.08),
                            px: 1.25,
                            py: 0.5,
                            minHeight: 46,
                px: 0.5,
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            textAlign: 'center',
                flexShrink: 0,
                        }}
                    >
                        <Stack spacing={0.35}>
                            <Typography variant="subtitle2" sx={{ fontWeight: 700, lineHeight: 1 }}>
            <Stack spacing={0.1}>
                <Typography variant="subtitle2" sx={{ fontWeight: 700, lineHeight: 1, fontSize: '0.88rem' }}>
                                {rule.angle}°
                            </Typography>
                            <Typography
                                variant="caption"
                                sx={{
                                    lineHeight: 1.1,
                                    fontSize: '0.73rem',
                        lineHeight: 1.05,
                        fontSize: '0.64rem',
                                    color: rule.enabled ? 'success.dark' : 'error.dark',
                                    fontWeight: 600,
                                }}
@@ -555,9 +560,6 @@
                                {statusText}
                            </Typography>
                        </Stack>
                    </Box>
                );
            })}
        </Box>
    );
};