#

luxiaotao1123

2024-10-17 a2cd787d41975c35d3ddaaa78271e04dbd15087f

#

 zy-acs-flow/src/map/insight/agv/AgvControl.jsx

@@ -1,11 +1,223 @@
import React from 'react';
import { useForm, Controller, useWatch } from 'react-hook-form';
import {
    Drawer,
    Button,
    TextField,
    Grid,
    Box,
    ToggleButton,
    ToggleButtonGroup,
    Typography,
} from '@mui/material';

const AgvControl = () => {
function AgvControl({ open, onClose }) {
    const { control, handleSubmit, reset, watch } = useForm({
        defaultValues: {
            taskMode: 'MOVE',
        },
    });

    const taskModes = [
        { value: 'MOVE', label: '移动' },
        { value: 'TO_CHARGE', label: '去充电' },
        { value: 'TO_STANDBY', label: '去待机位' },
        { value: 'LOC_TO_LOC', label: '库位到库位' },
        { value: 'LOC_TO_STA', label: '库位到站点' },
        { value: 'STA_TO_LOC', label: '站点到库位' },
        { value: 'STA_TO_STA', label: '站点到站点' },
    ];

    const onSubmit = (data) => {
        console.log(data);
        // 提交表单数据的逻辑
    };

    const taskMode = watch('taskMode');

    // 根据任务方式确定需要显示的字段
    const showField = (field) => {
        const mode = taskMode;
        switch (field) {
            case 'startCode':
                return ['MOVE', 'LOC_TO_LOC', 'LOC_TO_STA', 'STA_TO_LOC', 'STA_TO_STA'].includes(mode);
            case 'endCode':
                return ['MOVE', 'LOC_TO_LOC', 'LOC_TO_STA', 'STA_TO_LOC', 'STA_TO_STA'].includes(mode);
            case 'startLocNo':
                return ['LOC_TO_LOC', 'LOC_TO_STA'].includes(mode);
            case 'endLocNo':
                return ['LOC_TO_LOC', 'STA_TO_LOC'].includes(mode);
            case 'startStaNo':
                return ['STA_TO_LOC', 'STA_TO_STA'].includes(mode);
            case 'endStaNo':
                return ['LOC_TO_STA', 'STA_TO_STA'].includes(mode);
            default:
                return false;
        }
    };

    return (
        <>
            <h1>Control</h1>
        </>
    )
        <Box sx={{ width: 578, p: 3 }}>
            <Typography variant="h6" gutterBottom>
                任务下发
            </Typography>
            <form onSubmit={handleSubmit(onSubmit)}>
                <Grid container spacing={2}>
                    {/* 任务方式选择 */}
                    <Grid item xs={12}>
                        <Controller
                            name="taskMode"
                            control={control}
                            render={({ field }) => (
                                <ToggleButtonGroup
                                    {...field}
                                    exclusive
                                    fullWidth
                                    color="primary"
                                    onChange={(e, value) => {
                                        if (value !== null) {
                                            field.onChange(value);
                                        }
                                    }}
                                >
                                    {taskModes.map((mode) => (
                                        <ToggleButton key={mode.value} value={mode.value}>
                                            {mode.label}
                                        </ToggleButton>
                                    ))}
                                </ToggleButtonGroup>
                            )}
                        />
                    </Grid>

                    {/* 动态渲染表单字段 */}
                    {showField('startCode') && (
                        <Grid item xs={12}>
                            <Controller
                                name="startCode"
                                control={control}
                                rules={{ required: '起始地面码不能为空' }}
                                render={({ field, fieldState }) => (
                                    <TextField
                                        {...field}
                                        fullWidth
                                        label="起始地面码"
                                        error={!!fieldState.error}
                                        helperText={fieldState.error?.message}
                                    />
                                )}
                            />
                        </Grid>
                    )}

                    {showField('endCode') && (
                        <Grid item xs={12}>
                            <Controller
                                name="endCode"
                                control={control}
                                rules={{ required: '目标地面码不能为空' }}
                                render={({ field, fieldState }) => (
                                    <TextField
                                        {...field}
                                        fullWidth
                                        label="目标地面码"
                                        error={!!fieldState.error}
                                        helperText={fieldState.error?.message}
                                    />
                                )}
                            />
                        </Grid>
                    )}

                    {showField('startLocNo') && (
                        <Grid item xs={12}>
                            <Controller
                                name="startLocNo"
                                control={control}
                                rules={{ required: '起始库位不能为空' }}
                                render={({ field, fieldState }) => (
                                    <TextField
                                        {...field}
                                        fullWidth
                                        label="起始库位"
                                        error={!!fieldState.error}
                                        helperText={fieldState.error?.message}
                                    />
                                )}
                            />
                        </Grid>
                    )}

                    {showField('endLocNo') && (
                        <Grid item xs={12}>
                            <Controller
                                name="endLocNo"
                                control={control}
                                rules={{ required: '目标库位不能为空' }}
                                render={({ field, fieldState }) => (
                                    <TextField
                                        {...field}
                                        fullWidth
                                        label="目标库位"
                                        error={!!fieldState.error}
                                        helperText={fieldState.error?.message}
                                    />
                                )}
                            />
                        </Grid>
                    )}

                    {showField('startStaNo') && (
                        <Grid item xs={12}>
                            <Controller
                                name="startStaNo"
                                control={control}
                                rules={{ required: '起始站点不能为空' }}
                                render={({ field, fieldState }) => (
                                    <TextField
                                        {...field}
                                        fullWidth
                                        label="起始站点"
                                        error={!!fieldState.error}
                                        helperText={fieldState.error?.message}
                                    />
                                )}
                            />
                        </Grid>
                    )}

                    {showField('endStaNo') && (
                        <Grid item xs={12}>
                            <Controller
                                name="endStaNo"
                                control={control}
                                rules={{ required: '目标站点不能为空' }}
                                render={({ field, fieldState }) => (
                                    <TextField
                                        {...field}
                                        fullWidth
                                        label="目标站点"
                                        error={!!fieldState.error}
                                        helperText={fieldState.error?.message}
                                    />
                                )}
                            />
                        </Grid>
                    )}

                    {/* 按钮 */}
                    <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'space-between', mt: 2 }}>
                        <Button variant="contained" color="primary" type="submit">
                            确认
                        </Button>
                        <Button variant="outlined" color="secondary" onClick={() => reset()}>
                            重置
                        </Button>
                    </Grid>
                </Grid>
            </form>
        </Box>
    );
}

export default AgvControl;
export default AgvControl;

 zy-acs-flow/src/map/insight/agv/AgvMain.jsx

@@ -110,6 +110,10 @@
        return endThree;
    }, [info]);

    const handleReset = () => {
        alert(1)
    }

    return (
        <Box display="flex" height="100%">
            <Box
@@ -178,7 +182,7 @@
                                    color="primary"
                                    variant="contained"
                                    onConfirm={() => {
                                        alert(1)
                                        handleReset();
                                    }}
                                />
                                {info && (