#

luxiaotao1123

2024-10-09 14946ddf178021fb65fdfd0cb50aba73ae0a1aa9

#

 zy-acs-flow/src/map/Device.jsx

@@ -1,11 +1,49 @@
import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
import { Drawer, Box, Typography, Card, IconButton, Stack } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import * as Common from '@/utils/common';
import { PAGE_DRAWER_WIDTH } from '@/config/setting';

const Device = (props) => {
    const {
        title = 'Drawer',
        open,
        onCancel,
        closeCallback,
        width = PAGE_DRAWER_WIDTH,
        children
    } = props;

const Device = () => {
    const handleClose = () => {
        onCancel();
        if (closeCallback) {
            closeCallback();
        }
    }

    return (
        <>

        </>
        <Drawer
            variant="persistent"
            open={open}
            anchor="right"
            onClose={handleClose}
            sx={{ zIndex: 100 }}
        >
            {open && (
                <Box pt={12} width={{ xs: '100vW', sm: width }} height={'calc(100vh - 200px);'} mt={{ xs: 2, sm: 1 }} sx={{
                }}>
                    <Stack direction="row" p={2}>
                        <Typography variant="h6" flex="1">
                            {title}
                        </Typography>
                        <IconButton onClick={handleClose} size="small">
                            <CloseIcon />
                        </IconButton>
                    </Stack>
                    {children}
                </Box>
            )}
        </Drawer>
    )
}


 zy-acs-flow/src/map/MapPage.jsx

@@ -73,13 +73,13 @@
    const switchMode = (mode) => {
        switch (mode) {
            case MapMode.OBSERVER_MODE:
                console.log('a');
                setDeviceVisible(false);
                break
            case MapMode.MOVABLE_MODE:
                console.log('b');
                setDeviceVisible(true);
                break
            case MapMode.SETTINGS_MODE:
                console.log('c');
                setDeviceVisible(false);
                break
            default:
                break
@@ -119,6 +119,7 @@
                flexDirection: 'column',
            }}
        >
            {/* header */}
            <Box
                sx={{
                    display: 'flex',
@@ -128,6 +129,7 @@
                    padding: '0 16px',
                    height: '64px',
                    flexShrink: 0, // keep height
                    zIndex: 200
                }}
            >
                <TextField
@@ -163,6 +165,7 @@
                            variant="contained"
                            color="primary"
                            sx={{ mr: 1 }}
                            onClick={() => setDeviceVisible(!deviceVisible)}
                        >
                            添加模型
                        </Button>
@@ -192,6 +195,7 @@
                    <MenuItem value={MapMode.SETTINGS_MODE}>配置模式</MenuItem>
                </Select>
            </Box>
            {/* content */}
            <Box
                sx={{
                    flexGrow: 1,    // fill remaining of map space 
@@ -232,6 +236,7 @@
                    ))}
                </SpeedDial>
            </Box>

            <Device
                open={deviceVisible}
                onCancel={() => {
@@ -239,6 +244,7 @@
                }}
                onDrop={onDrop}
            />

        </Box>
    );
}