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