From c6230b5765eb0b8ac69f8a17c191cc5757d42b18 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期五, 18 十月 2024 12:56:49 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/map/insight/agv/AgvControl.jsx | 335 ++++++++++++++++++++++++++++++++++---------------------
1 files changed, 208 insertions(+), 127 deletions(-)
diff --git a/zy-acs-flow/src/map/insight/agv/AgvControl.jsx b/zy-acs-flow/src/map/insight/agv/AgvControl.jsx
index 5f0d918..09aec4c 100644
--- a/zy-acs-flow/src/map/insight/agv/AgvControl.jsx
+++ b/zy-acs-flow/src/map/insight/agv/AgvControl.jsx
@@ -1,7 +1,7 @@
import React from 'react';
-import { useForm, Controller, useWatch } from 'react-hook-form';
+import { useTranslate } from "react-admin";
+import { useForm, Controller } from 'react-hook-form';
import {
- Drawer,
Button,
TextField,
Grid,
@@ -9,12 +9,29 @@
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';
function AgvControl({ open, onClose }) {
+ const theme = useTheme();
+ const translate = useTranslate();
+
const { control, handleSubmit, reset, watch } = useForm({
defaultValues: {
taskMode: 'MOVE',
+ startCode: '',
+ endCode: '',
+ startLocNo: '',
+ endLocNo: '',
+ startStaNo: '',
+ endStaNo: '',
},
});
@@ -30,19 +47,17 @@
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);
+ return false;
case 'endCode':
- return ['MOVE', 'LOC_TO_LOC', 'LOC_TO_STA', 'STA_TO_LOC', 'STA_TO_STA'].includes(mode);
+ return ['MOVE'].includes(mode);
case 'startLocNo':
return ['LOC_TO_LOC', 'LOC_TO_STA'].includes(mode);
case 'endLocNo':
@@ -56,21 +71,28 @@
}
};
+ const {
+ options: codeOptions,
+ setInputValue: setCodeInputValue,
+ } = useCoolHook('/code/page', 'data');
+
return (
- <Box sx={{ width: 578, p: 3 }}>
- <Typography variant="h6" gutterBottom>
- 浠诲姟涓嬪彂
- </Typography>
+ <>
<form onSubmit={handleSubmit(onSubmit)}>
- <Grid container spacing={2}>
- {/* 浠诲姟鏂瑰紡閫夋嫨 */}
- <Grid item xs={12}>
+ <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"
@@ -81,142 +103,201 @@
}}
>
{taskModes.map((mode) => (
- <ToggleButton key={mode.value} value={mode.value}>
+ <ToggleButton key={mode.value} value={mode.value} sx={{ textAlign: 'left' }}>
{mode.label}
</ToggleButton>
))}
</ToggleButtonGroup>
)}
/>
- </Grid>
+ </Box>
- {/* 鍔ㄦ�佹覆鏌撹〃鍗曞瓧娈� */}
- {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}
+ {/* 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: '璧峰鍦伴潰鐮佷笉鑳戒负绌�' }}
+ render={({ field, fieldState }) => (
+ <TextField
+ {...field}
+ fullWidth
+ label="璧峰鍦伴潰鐮�"
+ error={!!fieldState.error}
+ helperText={fieldState.error?.message}
+ />
+ )}
/>
- )}
- />
- </Grid>
- )}
+ </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}
+ {showField('endCode') && (
+ <Grid item xs={12}>
+ <Controller
+ name="endCode"
+ control={control}
+ render={({ field, fieldState }) => {
+ const selectedOption = codeOptions.find(option => option.id === field.value) || null;
+ return (
+ <Autocomplete
+ options={codeOptions}
+ getOptionLabel={(option) => option.label}
+ isOptionEqualToValue={(option, value) => option.id === value.id}
+ value={selectedOption}
+ onInputChange={(event, value) => {
+ setCodeInputValue(value);
+ }}
+ onChange={(event, value) => {
+ field.onChange(value ? value.id : null);
+ }}
+ renderInput={(params) => (
+ <TextField
+ {...params}
+ label="鐩爣鍦伴潰鐮�"
+ error={!!fieldState.error}
+ helperText={fieldState.error?.message}
+ />
+ )}
+ />
+ );
+ }}
/>
- )}
- />
- </Grid>
- )}
+ </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}
+ {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>
- )}
+ </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}
+ {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>
- )}
+ </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}
+ {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>
- )}
+ </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}
+ {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>
+ )}
- {/* 鎸夐挳 */}
- <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'space-between', mt: 2 }}>
- <Button variant="contained" color="primary" type="submit">
- 纭
+ </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"
+ onClick={() => {
+
+ }}
+ 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="secondary" onClick={() => reset()}>
- 閲嶇疆
+
+ <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>
- </Grid>
- </Grid>
+ </Toolbar>
+ </Box>
</form>
- </Box>
+ </>
);
}
--
Gitblit v1.9.1