From 14946ddf178021fb65fdfd0cb50aba73ae0a1aa9 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期三, 09 十月 2024 11:17:15 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/map/MapPage.jsx | 12 +++++++++---
zy-acs-flow/src/map/Device.jsx | 46 ++++++++++++++++++++++++++++++++++++++++++----
2 files changed, 51 insertions(+), 7 deletions(-)
diff --git a/zy-acs-flow/src/map/Device.jsx b/zy-acs-flow/src/map/Device.jsx
index e65cf4e..56a2ebb 100644
--- a/zy-acs-flow/src/map/Device.jsx
+++ b/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>
)
}
diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx
index b205b29..1681ed6 100644
--- a/zy-acs-flow/src/map/MapPage.jsx
+++ b/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>
);
}
--
Gitblit v1.9.1