From 45f5bf6c7dbda64bed8429c10ff51fbb64b33c9c Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期二, 08 十月 2024 09:55:09 +0800 Subject: [PATCH] # --- zy-acs-flow/src/page/dashboard/Dashboard.jsx | 10 ++-- zy-acs-flow/src/map/MapPage.jsx | 104 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 109 insertions(+), 5 deletions(-) diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx new file mode 100644 index 0000000..0b33b74 --- /dev/null +++ b/zy-acs-flow/src/map/MapPage.jsx @@ -0,0 +1,104 @@ +import React from 'react'; +import { + AppBar, + Toolbar, + 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 ( + <div> + {/* 鑿滃崟鏍� */} + <AppBar position="static"> + <Toolbar> + {/* 宸︿晶鎼滅储妗� */} + <TextField + variant="outlined" + size="small" + placeholder="鎼滅储..." + style={{ marginRight: 'auto' }} + /> + {/* 妯″紡閫夋嫨涓嬫媺妗� */} + <Select + value={mode} + onChange={handleModeChange} + variant="outlined" + size="small" + style={{ marginRight: 16 }} + > + <MenuItem value="monitoring">鐩戞帶妯″紡</MenuItem> + <MenuItem value="edit">缂栬緫妯″紡</MenuItem> + <MenuItem value="configuration">閰嶇疆妯″紡</MenuItem> + </Select> + {/* 鍔熻兘鎸夐挳 */} + <Button variant="contained" color="primary" style={{ marginRight: 8 }}> + 鍋滄RCS杩愯浆 + </Button> + <Button variant="contained" color="secondary"> + 妯℃嫙AGV杩愯 + </Button> + </Toolbar> + </AppBar> + {/* 鍦板浘鍖哄煙 */} + <Box + sx={{ + height: 'calc(100vh - 64px)', // 鍑忓幓AppBar鐨勯珮搴� + position: 'relative', + }} + > + {/* 鍦板浘鍗犱綅绗� */} + <Box + sx={{ + width: '100%', + height: '100%', + backgroundColor: '#f0f0f0', + }} + /> + {/* 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> + </div> + ); +} + +export default MapPage; diff --git a/zy-acs-flow/src/page/dashboard/Dashboard.jsx b/zy-acs-flow/src/page/dashboard/Dashboard.jsx index 1b969f0..d5b9bd2 100644 --- a/zy-acs-flow/src/page/dashboard/Dashboard.jsx +++ b/zy-acs-flow/src/page/dashboard/Dashboard.jsx @@ -1,20 +1,20 @@ import React, { useState, useRef, useEffect, useMemo } from "react"; +import MapPage from "../../map/MapPage"; import Player from "../../map/player"; -let player; + const Dashboard = () => { const mapRef = React.useRef(); - useEffect(() => { - player = new Player(mapRef.current) + // let player = new Player(mapRef.current) }, []) return ( <> - <h1>Hello World</h1> - <div ref={mapRef} ></div> + <MapPage /> + {/* <div ref={mapRef} ></div> */} </> ) } -- Gitblit v1.9.1