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