1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
| import React from 'react';
| import {
| TextField,
| Select,
| MenuItem,
| Button,
| Box,
| SpeedDial,
| SpeedDialAction,
| } 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';
|
| function MapPage() {
| const [mode, setMode] = React.useState('monitoring');
|
| 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={{
| margin: '0 -8px', // 抵消父容器的左右内边距
| height: '100%',
| display: 'flex',
| flexDirection: 'column',
| }}
| >
| {/* 菜单栏 */}
| <Box
| sx={{
| display: 'flex',
| alignItems: 'center',
| backgroundColor: '#f5f5f5', // 浅色背景
| color: '#000',
| padding: '0 16px',
| height: '64px', // 固定高度
| flexShrink: 0,
| }}
| >
| {/* 左侧搜索框 */}
| <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,
| position: 'relative',
| backgroundColor: '#fff', // 地图区域背景色
| }}
| >
| {/* 地图占位符 */}
| <Box
| sx={{
| width: '100%',
| height: '100%',
| backgroundColor: '#e0e0e0',
| }}
| />
| {/* Speed Dial组件 */}
| <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;
|
|
