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
| 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, // 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
| sx={{
| width: '100%',
| height: '100%',
| backgroundColor: '#e0e0e0',
| }}
| />
| <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;
|
|
