From 7f70cb15d035f0c233b9e62b9e43aa985317c908 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期一, 04 十一月 2024 10:22:45 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/map/insight/agv/AgvControl.jsx | 436 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 432 insertions(+), 4 deletions(-)
diff --git a/zy-acs-flow/src/map/insight/agv/AgvControl.jsx b/zy-acs-flow/src/map/insight/agv/AgvControl.jsx
index 53a9c1d..a350946 100644
--- a/zy-acs-flow/src/map/insight/agv/AgvControl.jsx
+++ b/zy-acs-flow/src/map/insight/agv/AgvControl.jsx
@@ -1,11 +1,439 @@
+import React, { useEffect } from 'react';
+import { useTranslate } from "react-admin";
+import { useForm, Controller } from 'react-hook-form';
+import {
+ Button,
+ TextField,
+ Grid,
+ Box,
+ ToggleButton,
+ ToggleButtonGroup,
+ Typography,
+ Divider,
+ Toolbar,
+ useTheme,
+ Autocomplete,
+ CircularProgress,
+} from '@mui/material';
+import CheckOutlinedIcon from '@mui/icons-material/CheckOutlined';
+import RestartAltIcon from '@mui/icons-material/RestartAlt';
+import useCoolHook from './useCoolHook';
+import { handleControlAgv } from '../../http';
-const AgvControl = () => {
+function AgvControl(props) {
+ const { curAgvNo } = props;
+ const theme = useTheme();
+ const translate = useTranslate();
+ const { control, handleSubmit, reset, watch, setValue } = useForm({
+ defaultValues: {
+ taskMode: 'MOVE',
+ startCode: '',
+ endCode: '',
+ startLocNo: '',
+ endLocNo: '',
+ startStaNo: '',
+ endStaNo: '',
+ },
+ });
+
+ const taskModes = [
+ { value: 'MOVE', label: translate('page.map.insight.control.type.MOVE') },
+ { value: 'TO_CHARGE', label: translate('page.map.insight.control.type.TO_CHARGE') },
+ { value: 'TO_STANDBY', label: translate('page.map.insight.control.type.TO_STANDBY') },
+ { value: 'LOC_TO_LOC', label: translate('page.map.insight.control.type.LOC_TO_LOC') },
+ { value: 'LOC_TO_STA', label: translate('page.map.insight.control.type.LOC_TO_STA') },
+ { value: 'STA_TO_LOC', label: translate('page.map.insight.control.type.STA_TO_LOC') },
+ { value: 'STA_TO_STA', label: translate('page.map.insight.control.type.STA_TO_STA') },
+ ];
+
+ useEffect(() => {
+ reset();
+ }, [curAgvNo, reset]);
+
+ const onSubmit = (data) => {
+ if (curAgvNo) {
+ handleControlAgv({ agvNo: curAgvNo, ...data }, () => {
+
+ });
+ }
+ };
+
+ const taskMode = watch('taskMode');
+
+ const showField = (field) => {
+ const mode = taskMode;
+ switch (field) {
+ case 'startCode':
+ return false;
+ case 'endCode':
+ return ['MOVE'].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;
+ }
+ };
+
+ const {
+ options: endCodeOptions,
+ setInputValue: setEndCodeInputValue,
+ resetInput: resetEndCodeInput,
+ } = useCoolHook('/code/page', 'data');
+
+ const {
+ options: startLocOptions,
+ setInputValue: setStartLocInputValue,
+ resetInput: resetStartLocInput,
+ } = useCoolHook('/loc/page', 'locNo');
+
+ const {
+ options: endLocOptions,
+ setInputValue: setEndLocInputValue,
+ resetInput: resetEndLocInput,
+ } = useCoolHook('/loc/page', 'locNo');
+
+ const {
+ options: startStaOptions,
+ setInputValue: setStartStaInputValue,
+ resetInput: resetStartStaInput,
+ } = useCoolHook('/sta/page', 'staNo');
+
+ const {
+ options: endStaOptions,
+ setInputValue: setEndStaInputValue,
+ resetInput: resetEndStaInput,
+ } = useCoolHook('/sta/page', 'staNo');
+
+ useEffect(() => {
+ const fieldsToClear = ['endCode', 'startLocNo', 'endLocNo', 'startStaNo', 'endStaNo'];
+
+ fieldsToClear.forEach(field => {
+ if (!showField(field)) {
+ setValue(field, '');
+
+ switch (field) {
+ case 'endCode':
+ resetEndCodeInput();
+ break;
+ case 'startLocNo':
+ resetStartLocInput();
+ break;
+ case 'endLocNo':
+ resetEndLocInput();
+ break;
+ case 'startStaNo':
+ resetStartStaInput();
+ break;
+ case 'endStaNo':
+ resetEndStaInput();
+ break;
+ default:
+ break;
+ }
+ }
+ });
+ }, [
+ taskMode,
+ setValue,
+ showField,
+ resetEndCodeInput,
+ resetStartLocInput,
+ resetEndLocInput,
+ resetStartStaInput,
+ resetEndStaInput
+ ]);
return (
<>
- <h1>Control</h1>
+ <form onSubmit={handleSubmit(onSubmit)}>
+ <Box display="flex" flexDirection="row" height="100%" justifyContent="space-around" p={2}>
+ {/* left */}
+ <Box
+ position="relative"
+ width="35%"
+ height="100%"
+ >
+ <Controller
+ name="taskMode"
+ control={control}
+ render={({ field }) => (
+ <ToggleButtonGroup
+ {...field}
+ orientation="vertical"
+ exclusive
+ fullWidth
+ color="primary"
+ onChange={(e, value) => {
+ if (value !== null) {
+ field.onChange(value);
+ }
+ }}
+ >
+ {taskModes.map((mode) => (
+ <ToggleButton key={mode.value} value={mode.value} sx={{ textAlign: 'left' }}>
+ {mode.label}
+ </ToggleButton>
+ ))}
+ </ToggleButtonGroup>
+ )}
+ />
+ </Box>
+
+ {/* right */}
+ <Box
+ position="relative"
+ width="55%"
+ height="100%"
+ >
+ <Grid container spacing={2}>
+ {showField('startCode') && (
+ <Grid item xs={12}>
+ <Controller
+ name="startCode"
+ control={control}
+ rules={{ required: translate('ra.validation.required') }}
+ render={({ field, fieldState }) => (
+ <TextField
+ {...field}
+ fullWidth
+ label={translate('page.map.insight.control.startCode')}
+ error={!!fieldState.error}
+ helperText={fieldState.error?.message}
+ />
+ )}
+ />
+ </Grid>
+ )}
+
+ {showField('endCode') && (
+ <Grid item xs={12}>
+ <Controller
+ name="endCode"
+ control={control}
+ rules={{ required: translate('ra.validation.required') }}
+ render={({ field, fieldState }) => {
+ const selectedOption = endCodeOptions.find(option => option.id === field.value) || null;
+ return (
+ <Autocomplete
+ options={endCodeOptions}
+ getOptionLabel={(option) => option.label}
+ isOptionEqualToValue={(option, value) => option.id === value.id}
+ value={selectedOption}
+ onInputChange={(event, value) => {
+ setEndCodeInputValue(value);
+ }}
+ onChange={(event, value) => {
+ field.onChange(value ? value.id : null);
+ }}
+ renderInput={(params) => (
+ <TextField
+ {...params}
+ label={translate('page.map.insight.control.endCode')}
+ error={!!fieldState.error}
+ helperText={fieldState.error?.message}
+ />
+ )}
+ />
+ );
+ }}
+ />
+ </Grid>
+ )}
+
+ {showField('startLocNo') && (
+ <Grid item xs={12}>
+ <Controller
+ name="startLocNo"
+ control={control}
+ rules={{ required: translate('ra.validation.required') }}
+ render={({ field, fieldState }) => {
+ const selectedOption = startLocOptions.find(option => option.id === field.value) || null;
+ return (
+ <Autocomplete
+ options={startLocOptions}
+ getOptionLabel={(option) => option.label}
+ isOptionEqualToValue={(option, value) => option.id === value.id}
+ value={selectedOption}
+ onInputChange={(event, value) => {
+ setStartLocInputValue(value);
+ }}
+ onChange={(event, value) => {
+ field.onChange(value ? value.id : null);
+ }}
+ renderInput={(params) => (
+ <TextField
+ {...params}
+ label={translate('page.map.insight.control.startLoc')}
+ error={!!fieldState.error}
+ helperText={fieldState.error?.message}
+ />
+ )}
+ />
+ );
+ }}
+ />
+ </Grid>
+ )}
+
+ {showField('endLocNo') && (
+ <Grid item xs={12}>
+ <Controller
+ name="endLocNo"
+ control={control}
+ rules={{ required: translate('ra.validation.required') }}
+ render={({ field, fieldState }) => {
+ const selectedOption = endLocOptions.find(option => option.id === field.value) || null;
+ return (
+ <Autocomplete
+ options={endLocOptions}
+ getOptionLabel={(option) => option.label}
+ isOptionEqualToValue={(option, value) => option.id === value.id}
+ value={selectedOption}
+ onInputChange={(event, value) => {
+ setEndLocInputValue(value);
+ }}
+ onChange={(event, value) => {
+ field.onChange(value ? value.id : null);
+ }}
+ renderInput={(params) => (
+ <TextField
+ {...params}
+ label={translate('page.map.insight.control.endLoc')}
+ error={!!fieldState.error}
+ helperText={fieldState.error?.message}
+ />
+ )}
+ />
+ );
+ }}
+ />
+ </Grid>
+ )}
+
+ {showField('startStaNo') && (
+ <Grid item xs={12}>
+ <Controller
+ name="startStaNo"
+ control={control}
+ rules={{ required: translate('ra.validation.required') }}
+ render={({ field, fieldState }) => {
+ const selectedOption = startStaOptions.find(option => option.id === field.value) || null;
+ return (
+ <Autocomplete
+ options={startStaOptions}
+ getOptionLabel={(option) => option.label}
+ isOptionEqualToValue={(option, value) => option.id === value.id}
+ value={selectedOption}
+ onInputChange={(event, value) => {
+ setStartStaInputValue(value);
+ }}
+ onChange={(event, value) => {
+ field.onChange(value ? value.id : null);
+ }}
+ renderInput={(params) => (
+ <TextField
+ {...params}
+ label={translate('page.map.insight.control.startSta')}
+ error={!!fieldState.error}
+ helperText={fieldState.error?.message}
+ />
+ )}
+ />
+ );
+ }}
+ />
+ </Grid>
+ )}
+
+ {showField('endStaNo') && (
+ <Grid item xs={12}>
+ <Controller
+ name="endStaNo"
+ control={control}
+ rules={{ required: translate('ra.validation.required') }}
+ render={({ field, fieldState }) => {
+ const selectedOption = endStaOptions.find(option => option.id === field.value) || null;
+ return (
+ <Autocomplete
+ options={endStaOptions}
+ getOptionLabel={(option) => option.label}
+ isOptionEqualToValue={(option, value) => option.id === value.id}
+ value={selectedOption}
+ onInputChange={(event, value) => {
+ setEndStaInputValue(value);
+ }}
+ onChange={(event, value) => {
+ field.onChange(value ? value.id : null);
+ }}
+ renderInput={(params) => (
+ <TextField
+ {...params}
+ label={translate('page.map.insight.control.endSta')}
+ error={!!fieldState.error}
+ helperText={fieldState.error?.message}
+ />
+ )}
+ />
+ );
+ }}
+ />
+ </Grid>
+ )}
+
+ </Grid>
+ </Box>
+ </Box>
+ <Box pl={5} pr={5}>
+ <Divider sx={{
+ marginBottom: '16px'
+ }} />
+ <Toolbar sx={{
+ display: 'flex',
+ justifyContent: 'space-between',
+ minHeight: { sm: 0 },
+ }}>
+ <Button
+ variant="outlined"
+ color="primary"
+ type="submit"
+ sx={{
+ borderColor: theme => theme.palette.primary.main,
+ color: theme => theme.palette.primary.main,
+ }}
+ startIcon={
+ <CheckOutlinedIcon sx={{ color: theme => theme.palette.primary.main }} />
+ }
+ >
+ {translate('ra.action.confirm')}
+ </Button>
+
+ <Button
+ variant="outlined"
+ color="primary"
+ onClick={() => {
+ reset();
+ }}
+ sx={{
+ borderColor: theme => theme.palette.warning.main,
+ color: theme => theme.palette.warning.main,
+ }}
+ startIcon={
+ <RestartAltIcon sx={{ color: theme => theme.palette.warning.main }} />
+ }
+ >
+ {translate('common.action.reset')}
+ </Button>
+ </Toolbar>
+ </Box>
+ </form>
</>
- )
+ );
}
-export default AgvControl;
\ No newline at end of file
+export default AgvControl;
--
Gitblit v1.9.1