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 | 193 ++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 171 insertions(+), 22 deletions(-)
diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx
index 33081e6..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,
@@ -22,16 +22,24 @@
import Player from './player';
import * as Tool from './tool';
import { NotificationProvider, useNotification } from './Notification';
+import Insight from "./insight";
import Device from "./Device";
+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;
- const notify = useNotification();
- const translate = useTranslate();
const mapRef = useRef();
const contentRef = useRef();
@@ -39,8 +47,23 @@
const [mapContainer, setMapContainer] = useState(null);
const [mode, setMode] = useState(MapMode.OBSERVER_MODE);
- const [deviceVisible, setDeviceVisible] = React.useState(false);
+ const [insightVisible, setInsightVisible] = useState(false);
+ const [deviceVisible, setDeviceVisible] = useState(false);
+ const [settingsVisible, setSettingsVisible] = useState(false);
+ const [spriteSettings, setSpriteSettings] = useState(null);
+ 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');
@@ -50,37 +73,62 @@
setMapContainer(player.mapContainer);
Tool.setApp(player.app);
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);
+ // }
}
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) {
+ websocket.onMessage = () => { }
+ websocket.close();
+ }
player.destroy();
window.removeEventListener('resize', handleResize);
Tool.patchRaLayout('');
};
+ }, [])
+
+ useEffect(() => {
+ setTimeout(handleResize, 300)
+ }, [sidebarOpen]);
+
+ useEffect(() => {
+ player.setTheme(themeMode);
+ Tool.setThemeMode(themeMode);
}, [themeMode])
const switchMode = (mode) => {
+ Tool.removeSelectedEffect();
+
+ setDeviceVisible(false);
+ setSettingsVisible(false);
+
+ setSpriteSettings(null);
+
switch (mode) {
case MapMode.OBSERVER_MODE:
- setDeviceVisible(false);
player.hideGridLines();
+ player.hideStarryBackground();
player.activateMapMultiSelect((selectedSprites, restartFn) => {
console.log(selectedSprites);
@@ -89,20 +137,29 @@
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();
- setDeviceVisible(false);
+ player.showStarryBackground(); // 0x2f68ac
player.activateMapMultiSelect((selectedSprites, restartFn) => {
console.log(selectedSprites);
});
+
+ mapContainer.children.forEach(child => {
+ Tool.beSettings(child, setSpriteSettings);
+ })
break
default:
break
@@ -114,11 +171,9 @@
return
}
switchMode(mode);
- }, [mode]);
+ }, [mode, mapContainer]);
const onDrop = (sprite, type, x, y) => {
- console.log(sprite, type, x, y);
-
const { mapX, mapY } = Tool.getRealPosition(x, y);
sprite.x = mapX;
sprite.y = mapY;
@@ -127,6 +182,24 @@
mapContainer.addChild(sprite);
Tool.beMovable(sprite);
};
+
+ // watch spriteSettings
+ useEffect(() => {
+ if (!mapContainer) {
+ return;
+ }
+ prevSpriteSettingsRef.current = spriteSettings;
+ if (spriteSettings && prevSpriteSettings !== spriteSettings) {
+ Tool.removeSelectedEffect();
+ }
+ if (spriteSettings) {
+ Tool.showSelectedEffect(spriteSettings)
+ setSettingsVisible(true);
+ } else {
+ Tool.removeSelectedEffect();
+ }
+ }, [spriteSettings, mapContainer])
+ const prevSpriteSettings = prevSpriteSettingsRef.current;
const actions = [
{ icon: <FileCopyIcon />, name: '澶嶅埗' },
@@ -139,6 +212,7 @@
return (
<Box
sx={{
+ width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
@@ -154,7 +228,7 @@
padding: '0 16px',
height: '64px',
flexShrink: 0, // keep height
- zIndex: 200
+ zIndex: 200,
}}
>
<TextField
@@ -187,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 }}
@@ -199,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);
+ }}
+ />
</>
)}
@@ -247,7 +354,7 @@
}} />
</Box>
- <SpeedDial
+ {/* <SpeedDial
ariaLabel="SpeedDial 绀轰緥"
sx={{ position: 'absolute', bottom: 16, right: 16 }}
icon={<MoreVertIcon />}
@@ -259,8 +366,39 @@
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
+ open={insightVisible}
+ onCancel={() => {
+ setInsightVisible(false);
+ }}
+ width={378}
+ />
<Device
open={deviceVisible}
@@ -271,6 +409,17 @@
width={378}
/>
+ <Settings
+ open={settingsVisible}
+ onCancel={() => {
+ setSpriteSettings(null);
+ setSettingsVisible(false);
+ }}
+ sprite={spriteSettings}
+ setSpriteSettings={setSpriteSettings}
+ width={570}
+ />
+
</Box>
);
}
--
Gitblit v1.9.1