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