From 62774ce5aa3f92f8aae12fb38fe773fd63bceb2a Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期三, 09 十月 2024 13:10:47 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/map/constants.js | 17 ++++
zy-acs-flow/src/map/tool.js | 34 ++++++++
zy-acs-flow/src/map/MapPage.jsx | 4
zy-acs-flow/src/map/Device.jsx | 140 ++++++++++++++++++----------------
4 files changed, 129 insertions(+), 66 deletions(-)
diff --git a/zy-acs-flow/src/map/Device.jsx b/zy-acs-flow/src/map/Device.jsx
index 207953e..cdece93 100644
--- a/zy-acs-flow/src/map/Device.jsx
+++ b/zy-acs-flow/src/map/Device.jsx
@@ -4,6 +4,7 @@
import CloseIcon from '@mui/icons-material/Close';
import * as Common from '@/utils/common';
import { PAGE_DRAWER_WIDTH } from '@/config/setting';
+import * as Tool from './tool';
import shelf from '/map/shelf.svg';
import charge from '/map/charge.svg';
@@ -24,8 +25,13 @@
width = PAGE_DRAWER_WIDTH,
children
} = props;
-
+ const theme = useTheme();
+ const themeMode = theme.palette.mode;
const translate = useTranslate();
+
+ const [dragging, setDragging] = useState(false);
+ const [dragSprite, setDragSprite] = useState(null);
+ const [dragSpriteType, setDragSpriteType] = useState(null);
const handleClose = () => {
onCancel();
@@ -33,6 +39,26 @@
closeCallback();
}
}
+
+ const onDragStart = (e, type) => {
+ setDragging(true);
+ const sprite = Tool.generateSprite(type);
+ setDragSprite(sprite);
+ setDragSpriteType(type);
+ };
+
+ useEffect(() => {
+ const handleMouseMove = (e) => {
+ if (dragging) {
+ props.onDrop(dragSprite, dragSpriteType, e.clientX, e.clientY);
+ setDragging(false);
+ setDragSpriteType(null);
+ }
+ };
+ window.addEventListener('mousemove', handleMouseMove);
+ return () => window.removeEventListener('mousemove', handleMouseMove);
+ }, [dragging, props.onDrop, props.onCancel]);
+
return (
<Drawer
@@ -53,73 +79,57 @@
<CloseIcon />
</IconButton>
</Stack>
- <DeviceContent />
+ <Box p={3}>
+ <Grid container spacing={0} sx={{
+ borderTop: themeMode === 'light' ? '1px solid #f0f0f0' : '1px solid #303030',
+ borderLeft: themeMode === 'light' ? '1px solid #f0f0f0' : '1px solid #303030',
+ }}>
+ {items.map((item, index) => {
+ return (
+ <Grid
+ key={index}
+ item
+ xs={4}
+ onDragStart={(e) => onDragStart(e, item.type)}
+ draggable="true"
+ >
+ <Box
+ sx={{
+ height: '100px',
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ p: 2,
+ cursor: 'pointer',
+ borderRight: themeMode === 'light' ? '1px solid #f0f0f0' : '1px solid #303030',
+ borderBottom: themeMode === 'light' ? '1px solid #f0f0f0' : '1px solid #303030',
+ borderColor: 'divider',
+ '&:hover': {
+ boxShadow: themeMode === 'light' ? '0px 5px 5px rgba(0, 0, 0, 0.15)' : '0px 5px 5px rgba(63, 63, 63, 0.8)',
+ transition: 'all 0.3s ease !important',
+ },
+ }}
+ >
+ <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '70%' }}>
+ <img src={item.src} alt={item.label} width="50px" style={{
+ transform: `scale(${item.scale || 1})`,
+ }} />
+ </Box>
+ <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '30%' }}>
+ <Typography variant="body2" sx={{ mt: 2.5, textAlign: 'center' }}>
+ {translate(item.label)}
+ </Typography>
+ </Box>
+ </Box>
+ </Grid>
+ )
+ })}
+ </Grid>
+ </Box>
</Box>
)}
</Drawer>
- )
-}
-
-const DeviceContent = (props) => {
- const theme = useTheme();
- const themeMode = theme.palette.mode;
- const translate = useTranslate();
-
- const onDragStart = (e, type) => {
- // setDragging(true);
- // setDragSpriteType(type);
- // 鏍规嵁闇�瑕佸鐞嗘嫋鎷介�昏緫
- };
-
- return (
- <Box p={3}>
- <Grid container spacing={0} sx={{
- borderTop: themeMode === 'light' ? '1px solid #f0f0f0' : '1px solid #303030',
- borderLeft: themeMode === 'light' ? '1px solid #f0f0f0' : '1px solid #303030',
- }}>
- {items.map((item, index) => {
- return (
- <Grid
- key={index}
- item
- xs={4}
- onDragStart={(e) => onDragStart(e, item.type)}
- draggable="true"
- >
- <Box
- sx={{
- height: '100px',
- display: 'flex',
- flexDirection: 'column',
- justifyContent: 'center',
- alignItems: 'center',
- p: 2,
- cursor: 'pointer',
- borderRight: themeMode === 'light' ? '1px solid #f0f0f0' : '1px solid #303030',
- borderBottom: themeMode === 'light' ? '1px solid #f0f0f0' : '1px solid #303030',
- borderColor: 'divider',
- '&:hover': {
- boxShadow: themeMode === 'light' ? '0px 5px 5px rgba(0, 0, 0, 0.15)' : '0px 5px 5px rgba(63, 63, 63, 0.8)',
- transition: 'all 0.3s ease !important',
- },
- }}
- >
- <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '70%' }}>
- <img src={item.src} alt={item.label} width="50px" style={{
- transform: `scale(${item.scale || 1})`,
- }} />
- </Box>
- <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '30%' }}>
- <Typography variant="body2" sx={{ mt: 2.5, textAlign: 'center' }}>
- {translate(item.label)}
- </Typography>
- </Box>
- </Box>
- </Grid>
- )
- })}
- </Grid>
- </Box>
)
}
diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx
index 01df102..8761047 100644
--- a/zy-acs-flow/src/map/MapPage.jsx
+++ b/zy-acs-flow/src/map/MapPage.jsx
@@ -95,6 +95,8 @@
}, [mode]);
const onDrop = (sprite, type, x, y) => {
+ console.log(sprite, type, x, y);
+
const { mapX, mapY } = Tool.getRealPosition(x, y);
sprite.x = mapX;
sprite.y = mapY;
@@ -168,7 +170,7 @@
sx={{ mr: 1 }}
onClick={() => setDeviceVisible(!deviceVisible)}
>
- 娣诲姞妯″瀷
+ {translate('page.map.devices.title')}
</Button>
</>
)}
diff --git a/zy-acs-flow/src/map/constants.js b/zy-acs-flow/src/map/constants.js
new file mode 100644
index 0000000..b7b90ae
--- /dev/null
+++ b/zy-acs-flow/src/map/constants.js
@@ -0,0 +1,17 @@
+
+
+export const DEVICE_TYPE = Object.freeze({
+ SHELF: "SHELF",
+ AGV: "AGV",
+ CHARGE: 'CHARGE',
+ DIRECTION: 'DIRECTION',
+ POINT: "POINT",
+})
+
+export const DEVICE_Z_INDEX = Object.freeze({
+ SHELF: 1,
+ AGV: 1,
+ CHARGE: 1,
+ DIRECTION: 1,
+ POINT: 1
+})
diff --git a/zy-acs-flow/src/map/tool.js b/zy-acs-flow/src/map/tool.js
index b78e7e4..8c2376b 100644
--- a/zy-acs-flow/src/map/tool.js
+++ b/zy-acs-flow/src/map/tool.js
@@ -1,5 +1,13 @@
import * as PIXI from 'pixi.js';
import * as TWEEDLE from 'tweedle.js';
+import {
+ DEVICE_TYPE,
+ DEVICE_Z_INDEX,
+} from './constants';
+
+import shelf from '/map/shelf.svg';
+import charge from '/map/charge.svg';
+import direction from '/map/direction.svg';
let app, mapContainer;
@@ -27,6 +35,32 @@
}
}
+export const generateSprite = (deviceType) => {
+ let sprite;
+ switch (deviceType) {
+ case DEVICE_TYPE.SHELF:
+ sprite = new PIXI.Sprite(PIXI.Texture.from(shelf, { resourceOptions: { scale: 5 } }));
+ sprite.width = 50;
+ sprite.height = 50;
+ sprite.zIndex = DEVICE_Z_INDEX.SHELF;
+ break;
+ case DEVICE_TYPE.CHARGE:
+ sprite = new PIXI.Sprite(PIXI.Texture.from(charge, { resourceOptions: { scale: 1 } }));
+ sprite.width = 60;
+ sprite.height = 60;
+ sprite.zIndex = DEVICE_Z_INDEX.CHARGE;
+ break;
+ case DEVICE_TYPE.DIRECTION:
+ sprite = new PIXI.Sprite(PIXI.Texture.from(direction, { resourceOptions: { scale: 5 } }));
+ sprite.width = 112;
+ sprite.height = 63;
+ sprite.zIndex = DEVICE_Z_INDEX.DIRECTION;
+ break;
+ default:
+ break;
+ }
+ return sprite;
+}
export const patchRaLayout = (param) => {
const parentElement = document.getElementById('main-content');
--
Gitblit v1.9.1