From 022b2aa0384cefbed58939998659a1ee15adfdf0 Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期四, 17 十月 2024 17:01:33 +0800 Subject: [PATCH] # --- zy-acs-flow/package.json | 5 zy-acs-flow/src/map/insight/agv/useCoolHook.js | 48 ++++++++++++ zy-acs-flow/package-lock.json | 1 zy-acs-flow/src/map/insight/agv/AgvControl.jsx | 132 ++++++++++++++++++++++++++------ 4 files changed, 157 insertions(+), 29 deletions(-) diff --git a/zy-acs-flow/package-lock.json b/zy-acs-flow/package-lock.json index 4c03f3e..e6cdf6a 100644 --- a/zy-acs-flow/package-lock.json +++ b/zy-acs-flow/package-lock.json @@ -14,6 +14,7 @@ "@tweenjs/tween.js": "^21.0.0", "axios": "^1.7.4", "date-fns": "^3.6.0", + "lodash": "^4.17.21", "papaparse": "^5.4.1", "pixi.js": "^7.4.0", "react": "^18.3.0", diff --git a/zy-acs-flow/package.json b/zy-acs-flow/package.json index a65f9a4..4340f1b 100644 --- a/zy-acs-flow/package.json +++ b/zy-acs-flow/package.json @@ -15,8 +15,10 @@ "@mui/icons-material": "^5.16.7", "@mui/material": "^5.16.7", "@mui/x-tree-view": "^7.16.0", + "@tweenjs/tween.js": "^21.0.0", "axios": "^1.7.4", "date-fns": "^3.6.0", + "lodash": "^4.17.21", "papaparse": "^5.4.1", "pixi.js": "^7.4.0", "react": "^18.3.0", @@ -26,7 +28,6 @@ "react-router-dom": "^6.26.1", "react-syntax-highlighter": "^15.5.0", "three": "^0.155.0", - "@tweenjs/tween.js": "^21.0.0", "tweedle.js": "^2.1.0" }, "devDependencies": { @@ -45,4 +46,4 @@ "vite": "^5.3.5" }, "name": "cool-admin-flow" -} \ No newline at end of file +} diff --git a/zy-acs-flow/src/map/insight/agv/AgvControl.jsx b/zy-acs-flow/src/map/insight/agv/AgvControl.jsx index 39f3ced..c6225ef 100644 --- a/zy-acs-flow/src/map/insight/agv/AgvControl.jsx +++ b/zy-acs-flow/src/map/insight/agv/AgvControl.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useTranslate } from "react-admin"; import { useForm, Controller } from 'react-hook-form'; import { Button, @@ -8,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: '', }, }); @@ -53,12 +71,21 @@ } }; + const { + options: codeOptions, + setInputValue: setCodeInputValue, + } = useCoolHook('/code/page', 'data'); + return ( - <Box display="flex" height="100%" p={2}> + <> <form onSubmit={handleSubmit(onSubmit)}> - <Grid container spacing={2}> + <Box display="flex" flexDirection="row" height="100%" justifyContent="space-around" p={2}> {/* left */} - <Grid item xs={4}> + <Box + position="relative" + width="35%" + height="100%" + > <Controller name="taskMode" control={control} @@ -83,10 +110,14 @@ </ToggleButtonGroup> )} /> - </Grid> + </Box> {/* right */} - <Grid item xs={8}> + <Box + position="relative" + width="55%" + height="100%" + > <Grid container spacing={2}> {showField('startCode') && ( <Grid item xs={12}> @@ -112,16 +143,27 @@ <Controller name="endCode" control={control} - rules={{ required: '鐩爣鍦伴潰鐮佷笉鑳戒负绌�' }} - render={({ field, fieldState }) => ( - <TextField - {...field} - fullWidth - label="鐩爣鍦伴潰鐮�" - error={!!fieldState.error} - helperText={fieldState.error?.message} - /> - )} + render={({ field, fieldState }) => { + return ( + <Autocomplete + options={codeOptions} + onInputChange={(event, value) => { + setCodeInputValue(value); + }} + onChange={(event, value) => { + field.onChange(value?.id); + }} + renderInput={(params) => ( + <TextField + {...params} + label="鐩爣鍦伴潰鐮�" + error={!!fieldState.error} + helperText={fieldState.error?.message} + /> + )} + /> + ); + }} /> </Grid> )} @@ -202,20 +244,56 @@ </Grid> )} - {/* button group */} - <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'flex-end', mt: 2 }}> - <Button variant="contained" color="primary" type="submit" sx={{ mr: 2 }}> - 纭 - </Button> - <Button variant="outlined" color="secondary" onClick={() => reset()}> - 閲嶇疆 - </Button> - </Grid> </Grid> - </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" + 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="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> - </Box> + </> ); } diff --git a/zy-acs-flow/src/map/insight/agv/useCoolHook.js b/zy-acs-flow/src/map/insight/agv/useCoolHook.js new file mode 100644 index 0000000..f741bd7 --- /dev/null +++ b/zy-acs-flow/src/map/insight/agv/useCoolHook.js @@ -0,0 +1,48 @@ +import { useState, useEffect, useCallback } from 'react'; +import { debounce } from 'lodash'; +import request from '@/utils/request'; + +const useCoolHook = (url, label) => { + const [options, setOptions] = useState([]); + const [inputValue, setInputValue] = useState(''); + + const fetchData = async (condition) => { + try { + const res = await request.post(url, { + condition: condition, + pageSize: 20 + }).catch(error => { + console.error(error.message); + }); + const { code, msg, data: { records } } = res.data; + if (code === 200) { + setOptions(records.map(item => ({ + label: item[label], + id: item.id + }))) + } else { + console.error(msg); + } + } catch (error) { + console.error(error.message); + setOptions([]); + } + } + + const debouncedFetch = useCallback(debounce(fetchData, 300), [url]); + + useEffect(() => { + if (inputValue) { + debouncedFetch(inputValue); + } else { + setOptions([]); + } + }, [inputValue, debouncedFetch]); + + return { + options, + setInputValue, + }; +} + +export default useCoolHook; \ No newline at end of file -- Gitblit v1.9.1