From ca8eccf05bbc84c549859d29f0a97cb047b70638 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期一, 14 十月 2024 09:55:20 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/map/MapPage.jsx | 132 ++++++++++++++++++++++++++++++++++++++------
1 files changed, 114 insertions(+), 18 deletions(-)
diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx
index 527f79d..2d5e439 100644
--- a/zy-acs-flow/src/map/MapPage.jsx
+++ b/zy-acs-flow/src/map/MapPage.jsx
@@ -1,5 +1,5 @@
import React, { useState, useRef, useEffect, useMemo } from "react";
-import { useTranslate } from "react-admin";
+import { useTranslate, useRefresh, useSidebarState } from "react-admin";
import {
TextField,
Select,
@@ -9,7 +9,7 @@
SpeedDial,
SpeedDialAction,
useTheme,
- Snackbar,
+ Fab,
} from '@mui/material';
import {
MoreVert as MoreVertIcon,
@@ -25,14 +25,19 @@
import Insight from "./insight";
import Device from "./Device";
import Settings from "./settings";
+import Batch from "./batch";
import * as Http from './http';
import WebSocketClient from './websocket'
+import ConfirmButton from "../page/components/ConfirmButton";
+import { FitScreen } from '@mui/icons-material';
+
let player;
let websocket;
const Map = () => {
const notify = useNotification();
+ const [sidebarOpen] = useSidebarState();
const translate = useTranslate();
const theme = useTheme();
const themeMode = theme.palette.mode;
@@ -46,9 +51,22 @@
const [insightVisible, setInsightVisible] = useState(false);
const [deviceVisible, setDeviceVisible] = useState(false);
const [settingsVisible, setSettingsVisible] = useState(false);
+ const [batchSelectionVisible, setBatchSelectionVisible] = useState(false);
const [spriteSettings, setSpriteSettings] = useState(null);
- const prevSpriteSettingsRef = React.useRef();
+ const prevSpriteSettingsRef = useRef();
+ const [batchSprites, setBatchSprites] = useState([]);
+
+ const [curZone, setCurZone] = useState(() => {
+ const storedValue = localStorage.getItem('curZone');
+ return storedValue !== null ? JSON.parse(storedValue) : null;
+ });
+
+ const handleResize = () => {
+ const width = contentRef.current.offsetWidth;
+ const height = contentRef.current.offsetHeight;
+ player.resize(width, height);
+ };
useEffect(() => {
Tool.patchRaLayout('0px');
@@ -60,9 +78,16 @@
Tool.setMapContainer(player.mapContainer);
Tool.setThemeMode(themeMode);
Http.setNotify(notify);
+ Http.setMapContainer(player.mapContainer);
// websocket = new WebSocketClient('/ws/map/websocket');
- await Http.fetchMapData(0);
+ await Http.fetchMapData();
+
+ setTimeout(() => {
+ player.adaptScreen();
+ notify.info('Welcome to Rcs');
+ }, 200)
+
// websocket.connect();
// websocket.onMessage = (data) => {
// Tool.updateMapStatusInRealTime(data, () => curFloorRef.current, setCurSPrite);
@@ -72,16 +97,8 @@
initialize();
// resize
- const handleResize = () => {
- const width = contentRef.current.offsetWidth;
- const height = contentRef.current.offsetHeight;
-
- player.resize(width, height);
- };
handleResize();
window.addEventListener('resize', handleResize);
-
- notify.info('Welcome to Rcs');
return () => {
if (websocket) {
@@ -92,6 +109,15 @@
window.removeEventListener('resize', handleResize);
Tool.patchRaLayout('');
};
+ }, [])
+
+ useEffect(() => {
+ setTimeout(handleResize, 300)
+ }, [sidebarOpen]);
+
+ useEffect(() => {
+ player.setTheme(themeMode);
+ Tool.setThemeMode(themeMode);
}, [themeMode])
const switchMode = (mode) => {
@@ -99,8 +125,10 @@
setDeviceVisible(false);
setSettingsVisible(false);
+ setBatchSelectionVisible(false);
setSpriteSettings(null);
+ setBatchSprites([]);
switch (mode) {
case MapMode.OBSERVER_MODE:
@@ -121,6 +149,10 @@
restartFn();
});
});
+
+ mapContainer.children.forEach(child => {
+ Tool.beMovable(child);
+ })
break
case MapMode.SETTINGS_MODE:
player.hideGridLines();
@@ -185,6 +217,7 @@
return (
<Box
sx={{
+ width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
@@ -200,7 +233,7 @@
padding: '0 16px',
height: '64px',
flexShrink: 0, // keep height
- zIndex: 200
+ zIndex: 200,
}}
>
<TextField
@@ -220,18 +253,35 @@
<Button
variant="contained"
color="primary"
- sx={{ mr: 1 }}
+ sx={{ mr: 2 }}
>
鍋滄RCS杩愯浆
</Button>
- <Button variant="contained" color="secondary">
- 妯℃嫙AGV杩愯
+ <Button variant="contained" color="primary">
+ 绯荤粺鎶ュ憡
</Button>
</>
)}
{mode === MapMode.MOVABLE_MODE && (
<>
+ <Button
+ variant="outlined"
+ sx={{ mr: 2 }}
+ onClick={() => {
+ Tool.clearMapData();
+ }}
+ >
+ {translate('page.map.action.clear')}
+ </Button>
+ <ConfirmButton
+ label="page.map.action.save"
+ variant="contained"
+ sx={{ mr: 2 }}
+ onConfirm={() => {
+ Http.saveMapData(curZone);
+ }}
+ />
<Button
variant="contained"
color="primary"
@@ -245,6 +295,22 @@
{mode === MapMode.SETTINGS_MODE && (
<>
+ <Button
+ variant="outlined"
+ sx={{ mr: 2 }}
+ onClick={() => {
+ Tool.clearMapData();
+ }}
+ >
+ {translate('page.map.action.clear')}
+ </Button>
+ <ConfirmButton
+ label="page.map.action.save"
+ variant="contained"
+ onConfirm={() => {
+ Http.saveMapData(curZone);
+ }}
+ />
</>
)}
@@ -293,7 +359,7 @@
}} />
</Box>
- <SpeedDial
+ {/* <SpeedDial
ariaLabel="SpeedDial 绀轰緥"
sx={{ position: 'absolute', bottom: 16, right: 16 }}
icon={<MoreVertIcon />}
@@ -305,7 +371,30 @@
tooltipTitle={action.name}
/>
))}
- </SpeedDial>
+ </SpeedDial> */}
+
+ <Box
+ sx={{
+ position: 'absolute',
+ left: 35,
+ bottom: 30,
+ display: 'flex',
+ flexDirection: 'column',
+ gap: 1
+ }}
+ >
+ <Fab
+ variant="extended"
+ color="primary"
+ size="medium"
+ onClick={() => {
+ player.adaptScreen();
+ }}
+ >
+ <FitScreen />
+ {translate('page.map.action.adapt')}
+ </Fab>
+ </Box>
</Box>
<Insight
@@ -336,6 +425,13 @@
width={570}
/>
+ <Batch
+ open={batchSelectionVisible}
+ onCancel={() => {
+ setBatchSelectionVisible(false);
+ }}
+ />
+
</Box>
);
}
--
Gitblit v1.9.1