From 83a12f86f4f963b8a1e6741fd18a5f9dcbd60eb8 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期六, 12 十月 2024 16:08:01 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/map/MapPage.jsx | 124 ++++++++++++++++++++++++++++++++++++-----
1 files changed, 108 insertions(+), 16 deletions(-)
diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx
index baca6d7..4c11c7d 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,
@@ -27,12 +27,16 @@
import Settings from "./settings";
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;
@@ -48,7 +52,18 @@
const [settingsVisible, setSettingsVisible] = useState(false);
const [spriteSettings, setSpriteSettings] = useState(null);
- const prevSpriteSettingsRef = React.useRef();
+ const prevSpriteSettingsRef = useRef();
+
+ 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 +75,16 @@
Tool.setMapContainer(player.mapContainer);
Tool.setThemeMode(themeMode);
Http.setNotify(notify);
- websocket = new WebSocketClient('/ws/map/websocket');
+ 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 +94,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('Welcome to Rcs', 'info');
return () => {
if (websocket) {
@@ -92,6 +106,15 @@
window.removeEventListener('resize', handleResize);
Tool.patchRaLayout('');
};
+ }, [])
+
+ useEffect(() => {
+ setTimeout(handleResize, 300)
+ }, [sidebarOpen]);
+
+ useEffect(() => {
+ player.setTheme(themeMode);
+ Tool.setThemeMode(themeMode);
}, [themeMode])
const switchMode = (mode) => {
@@ -105,6 +128,7 @@
switch (mode) {
case MapMode.OBSERVER_MODE:
player.hideGridLines();
+ player.hideStarryBackground();
player.activateMapMultiSelect((selectedSprites, restartFn) => {
console.log(selectedSprites);
@@ -113,15 +137,21 @@
break
case MapMode.MOVABLE_MODE:
player.showGridLines();
+ player.hideStarryBackground();
player.activateMapMultiSelect((selectedSprites, restartFn) => {
Tool.spriteListBeMovable(selectedSprites, () => {
restartFn();
});
});
+
+ mapContainer.children.forEach(child => {
+ Tool.beMovable(child);
+ })
break
case MapMode.SETTINGS_MODE:
player.hideGridLines();
+ player.showStarryBackground(); // 0x2f68ac
player.activateMapMultiSelect((selectedSprites, restartFn) => {
console.log(selectedSprites);
@@ -182,6 +212,7 @@
return (
<Box
sx={{
+ width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
@@ -197,7 +228,7 @@
padding: '0 16px',
height: '64px',
flexShrink: 0, // keep height
- zIndex: 200
+ zIndex: 200,
}}
>
<TextField
@@ -230,6 +261,23 @@
{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"
sx={{ mr: 1 }}
@@ -242,6 +290,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);
+ }}
+ />
</>
)}
@@ -290,7 +354,7 @@
}} />
</Box>
- <SpeedDial
+ {/* <SpeedDial
ariaLabel="SpeedDial 绀轰緥"
sx={{ position: 'absolute', bottom: 16, right: 16 }}
icon={<MoreVertIcon />}
@@ -302,7 +366,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
@@ -310,6 +397,7 @@
onCancel={() => {
setInsightVisible(false);
}}
+ width={378}
/>
<Device
@@ -324,8 +412,12 @@
<Settings
open={settingsVisible}
onCancel={() => {
+ setSpriteSettings(null);
setSettingsVisible(false);
}}
+ sprite={spriteSettings}
+ setSpriteSettings={setSpriteSettings}
+ width={570}
/>
</Box>
--
Gitblit v1.9.1