From ffbe884e10222d441bf21c397730e93e00dbae38 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期三, 09 十月 2024 12:58:01 +0800
Subject: [PATCH] #

---
 zy-acs-flow/src/map/MapPage.jsx |   85 ++++++++++++++++++++++++++++++++++--------
 1 files changed, 68 insertions(+), 17 deletions(-)

diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx
index decde65..01df102 100644
--- a/zy-acs-flow/src/map/MapPage.jsx
+++ b/zy-acs-flow/src/map/MapPage.jsx
@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect, useMemo } from "react";
+import { useTranslate } from "react-admin";
 import {
     TextField,
     Select,
@@ -21,20 +22,24 @@
 import Player from './player';
 import * as Tool from './tool';
 import { NotificationProvider, useNotification } from './Notification';
+import Device from "./Device";
 
 let player;
 
 const Map = () => {
+    const theme = useTheme();
+    const themeMode = theme.palette.mode;
+    const notify = useNotification();
+    const translate = useTranslate();
+
     const mapRef = useRef();
     const contentRef = useRef();
     const [app, setApp] = useState(null);
     const [mapContainer, setMapContainer] = useState(null);
-    const notify = useNotification();
 
     const [mode, setMode] = useState(MapMode.OBSERVER_MODE);
+    const [deviceVisible, setDeviceVisible] = React.useState(false);
 
-    const theme = useTheme();
-    const themeMode = theme.palette.mode;
 
     useEffect(() => {
         Tool.patchRaLayout('0px');
@@ -70,13 +75,12 @@
     const switchMode = (mode) => {
         switch (mode) {
             case MapMode.OBSERVER_MODE:
-                console.log('a');
+                setDeviceVisible(false);
                 break
             case MapMode.MOVABLE_MODE:
-                console.log('b');
                 break
             case MapMode.SETTINGS_MODE:
-                console.log('c');
+                setDeviceVisible(false);
                 break
             default:
                 break
@@ -89,6 +93,16 @@
         }
         switchMode(mode);
     }, [mode]);
+
+    const onDrop = (sprite, type, x, y) => {
+        const { mapX, mapY } = Tool.getRealPosition(x, y);
+        sprite.x = mapX;
+        sprite.y = mapY;
+
+        // Utils.initSprite(sprite, type);
+        // mapContainer.addChild(sprite);
+        // Utils.beMovable(sprite);
+    };
 
     const actions = [
         { icon: <FileCopyIcon />, name: '澶嶅埗' },
@@ -106,6 +120,7 @@
                 flexDirection: 'column',
             }}
         >
+            {/* header */}
             <Box
                 sx={{
                     display: 'flex',
@@ -115,6 +130,7 @@
                     padding: '0 16px',
                     height: '64px',
                     flexShrink: 0, // keep height
+                    zIndex: 200
                 }}
             >
                 <TextField
@@ -128,6 +144,40 @@
                     }}
                 />
                 <Box sx={{ flexGrow: 1 }} />
+
+                {mode === MapMode.OBSERVER_MODE && (
+                    <>
+                        <Button
+                            variant="contained"
+                            color="primary"
+                            sx={{ mr: 1 }}
+                        >
+                            鍋滄RCS杩愯浆
+                        </Button>
+                        <Button variant="contained" color="secondary">
+                            妯℃嫙AGV杩愯
+                        </Button>
+                    </>
+                )}
+
+                {mode === MapMode.MOVABLE_MODE && (
+                    <>
+                        <Button
+                            variant="contained"
+                            color="primary"
+                            sx={{ mr: 1 }}
+                            onClick={() => setDeviceVisible(!deviceVisible)}
+                        >
+                            娣诲姞妯″瀷
+                        </Button>
+                    </>
+                )}
+
+                {mode === MapMode.SETTINGS_MODE && (
+                    <>
+                    </>
+                )}
+
                 <Select
                     value={mode}
                     onChange={(event) => {
@@ -136,7 +186,7 @@
                     variant="outlined"
                     size="small"
                     sx={{
-                        mr: 2,
+                        ml: 2,
                         backgroundColor: '#fff',
                         borderRadius: 1,
                     }}
@@ -145,17 +195,8 @@
                     <MenuItem value={MapMode.MOVABLE_MODE}>缂栬緫妯″紡</MenuItem>
                     <MenuItem value={MapMode.SETTINGS_MODE}>閰嶇疆妯″紡</MenuItem>
                 </Select>
-                <Button
-                    variant="contained"
-                    color="primary"
-                    sx={{ mr: 1 }}
-                >
-                    鍋滄RCS杩愯浆
-                </Button>
-                <Button variant="contained" color="secondary">
-                    妯℃嫙AGV杩愯
-                </Button>
             </Box>
+            {/* content */}
             <Box
                 sx={{
                     flexGrow: 1,    // fill remaining of map space 
@@ -196,6 +237,16 @@
                     ))}
                 </SpeedDial>
             </Box>
+
+            <Device
+                open={deviceVisible}
+                onCancel={() => {
+                    setDeviceVisible(false);
+                }}
+                onDrop={onDrop}
+                width={378}
+            />
+
         </Box>
     );
 }

--
Gitblit v1.9.1