import React, { useState, useRef, useEffect, useMemo } from "react";
|
import {
|
TextField,
|
Select,
|
MenuItem,
|
Button,
|
Box,
|
SpeedDial,
|
SpeedDialAction,
|
useTheme,
|
} from '@mui/material';
|
import {
|
MoreVert as MoreVertIcon,
|
Edit as EditIcon,
|
FileCopy as FileCopyIcon,
|
Save as SaveIcon,
|
Print as PrintIcon,
|
Share as ShareIcon,
|
} from '@mui/icons-material';
|
import Player from './player';
|
|
let player;
|
|
const MapPage = () => {
|
const mapRef = useRef();
|
const contentRef = React.useRef();
|
const [app, setApp] = useState(null);
|
const [mapContainer, setMapContainer] = React.useState(null);
|
|
const [mode, setMode] = useState('monitoring');
|
|
const theme = useTheme();
|
const themeMode = theme.palette.mode;
|
|
useEffect(() => {
|
const parentElement = document.getElementById('main-content');
|
if (parentElement && parentElement.classList.contains('RaLayout-content')) {
|
parentElement.style.paddingLeft = '0px';
|
parentElement.style.paddingRight = '0px';
|
}
|
|
const initialize = async () => {
|
player = new Player(mapRef.current, themeMode);
|
setApp(player.app);
|
setMapContainer(player.mapContainer);
|
|
}
|
initialize();
|
|
// resize
|
const handleResize = () => {
|
const width = contentRef.current.offsetWidth;
|
const height = contentRef.current.offsetHeight;
|
|
player.resize(width, height);
|
};
|
handleResize();
|
window.addEventListener('resize', handleResize);
|
|
return () => {
|
player.destroy();
|
window.removeEventListener('resize', handleResize);
|
|
if (parentElement && parentElement.classList.contains('RaLayout-content')) {
|
parentElement.style.paddingLeft = '';
|
parentElement.style.paddingRight = '';
|
}
|
};
|
}, [themeMode])
|
|
|
const handleModeChange = (event) => {
|
setMode(event.target.value);
|
};
|
|
const actions = [
|
{ icon: <FileCopyIcon />, name: '复制' },
|
{ icon: <SaveIcon />, name: '保存' },
|
{ icon: <PrintIcon />, name: '打印' },
|
{ icon: <ShareIcon />, name: '分享' },
|
{ icon: <EditIcon />, name: '编辑' },
|
];
|
|
return (
|
<Box
|
sx={{
|
height: '100%',
|
display: 'flex',
|
flexDirection: 'column',
|
}}
|
>
|
<Box
|
sx={{
|
display: 'flex',
|
alignItems: 'center',
|
backgroundColor: '#f5f5f5',
|
color: '#000',
|
padding: '0 16px',
|
height: '64px',
|
flexShrink: 0, // keep height
|
}}
|
>
|
<TextField
|
variant="outlined"
|
size="small"
|
placeholder="搜索..."
|
sx={{
|
width: '200px',
|
backgroundColor: '#fff',
|
borderRadius: 1,
|
}}
|
/>
|
<Box sx={{ flexGrow: 1 }} />
|
<Select
|
value={mode}
|
onChange={handleModeChange}
|
variant="outlined"
|
size="small"
|
sx={{
|
mr: 2,
|
backgroundColor: '#fff',
|
borderRadius: 1,
|
}}
|
>
|
<MenuItem value="monitoring">监控模式</MenuItem>
|
<MenuItem value="edit">编辑模式</MenuItem>
|
<MenuItem value="configuration">配置模式</MenuItem>
|
</Select>
|
<Button
|
variant="contained"
|
color="primary"
|
sx={{ mr: 1 }}
|
>
|
停止RCS运转
|
</Button>
|
<Button variant="contained" color="secondary">
|
模拟AGV运行
|
</Button>
|
</Box>
|
<Box
|
sx={{
|
flexGrow: 1, // fill remaining of map space
|
position: 'relative',
|
backgroundColor: '#fff',
|
}}
|
>
|
<Box
|
ref={contentRef}
|
sx={{
|
position: 'relative',
|
width: '100%',
|
height: '100%',
|
backgroundColor: '#e0e0e0',
|
}}
|
>
|
<div ref={mapRef} style={{
|
position: 'absolute',
|
top: 0,
|
left: 0,
|
width: '100%',
|
height: '100%',
|
}} />
|
</Box>
|
|
<SpeedDial
|
ariaLabel="SpeedDial 示例"
|
sx={{ position: 'absolute', bottom: 16, right: 16 }}
|
icon={<MoreVertIcon />}
|
>
|
{actions.map((action) => (
|
<SpeedDialAction
|
key={action.name}
|
icon={action.icon}
|
tooltipTitle={action.name}
|
/>
|
))}
|
</SpeedDial>
|
</Box>
|
</Box>
|
);
|
}
|
|
export default MapPage;
|
