From 7fb7d2233d0bbe03871dd01c35433601efe0c865 Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期三, 16 十月 2024 08:56:43 +0800 Subject: [PATCH] # --- zy-acs-flow/src/i18n/en.js | 4 + zy-acs-flow/src/map/insight/index.jsx | 2 zy-acs-flow/src/map/tool.js | 91 +++++++++++++++++------------ zy-acs-flow/src/i18n/zh.js | 4 + zy-acs-flow/src/map/player.js | 2 zy-acs-flow/src/map/MapPage.jsx | 38 +++++++++++- 6 files changed, 96 insertions(+), 45 deletions(-) diff --git a/zy-acs-flow/src/i18n/en.js b/zy-acs-flow/src/i18n/en.js index 4d8fb5f..332ae42 100644 --- a/zy-acs-flow/src/i18n/en.js +++ b/zy-acs-flow/src/i18n/en.js @@ -646,6 +646,10 @@ movable: 'MOVABLE', settings: 'SETTINGS', }, + insight: { + title: 'Insight', + + }, settings: { title: 'Settings', map: { diff --git a/zy-acs-flow/src/i18n/zh.js b/zy-acs-flow/src/i18n/zh.js index 3a7ea00..ccfa33f 100644 --- a/zy-acs-flow/src/i18n/zh.js +++ b/zy-acs-flow/src/i18n/zh.js @@ -644,6 +644,10 @@ movable: '缂栬緫妯″紡', settings: '閰嶇疆妯″紡', }, + insight: { + title: '璇︽儏', + + }, settings: { title: '璁剧疆', map: { diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx index 4974549..45ea3bb 100644 --- a/zy-acs-flow/src/map/MapPage.jsx +++ b/zy-acs-flow/src/map/MapPage.jsx @@ -48,13 +48,15 @@ const [app, setApp] = useState(null); const [mapContainer, setMapContainer] = useState(null); - const [mode, setMode] = useState(MAP_MODE.OBSERVER_MODE); + const [mode, setMode] = useState(null); const [dataFetched, setDataFetched] = useState(false); const [insightVisible, setInsightVisible] = useState(false); const [deviceVisible, setDeviceVisible] = useState(false); const [settingsVisible, setSettingsVisible] = useState(false); const [batchSelectionVisible, setBatchSelectionVisible] = useState(false); + const [curSprite, setCurSprite] = useState(null); + const prevCurSpriteRef = useRef(); const [spriteSettings, setSpriteSettings] = useState(null); const prevSpriteSettingsRef = useRef(); const [batchSprites, setBatchSprites] = useState([]); @@ -87,13 +89,15 @@ await Http.fetchMapData(); websocket.connect(); websocket.onMessage = (wsMsg) => { - Tool.generateDynamicGraphic(curZone, JSON.parse(wsMsg)); + Tool.generateDynamicGraphic(curZone, JSON.parse(wsMsg), () => { + setDataFetched(true); + setMode(MAP_MODE.OBSERVER_MODE); + }); } setTimeout(() => { player.adaptScreen(); notify.info(translate('page.map.welcome')); - setDataFetched(true); }, 200) } initialize(); @@ -141,6 +145,9 @@ setBatchSprites(selectedSprites); }); + mapContainer.children.forEach(child => { + Tool.beInsight(child, setCurSprite); + }) break case MAP_MODE.MOVABLE_MODE: player.showGridLines(); @@ -189,6 +196,26 @@ mapContainer.addChild(sprite); Tool.beMovable(sprite); }; + + // watch curSprite + React.useEffect(() => { + if (!mapContainer) { + return; + } + prevCurSpriteRef.current = curSprite; + if (curSprite && prevCurSprite !== curSprite) { + Tool.removeSelectedEffect(); + } + if (curSprite) { + if (mode === MAP_MODE.OBSERVER_MODE) { + Tool.showSelectedEffect(curSprite) + setInsightVisible(true) + } + } else { + Tool.removeSelectedEffect(); + } + }, [curSprite]); + const prevCurSprite = prevCurSpriteRef.current; // watch spriteSettings useEffect(() => { @@ -327,7 +354,7 @@ )} <Select - value={mode} + value={mode ?? ''} onChange={(event) => { setMode(event.target.value); }} @@ -415,7 +442,8 @@ onCancel={() => { setInsightVisible(false); }} - width={378} + sprite={curSprite} + width={570} /> <Device diff --git a/zy-acs-flow/src/map/insight/index.jsx b/zy-acs-flow/src/map/insight/index.jsx index 41155ec..bb95ea9 100644 --- a/zy-acs-flow/src/map/insight/index.jsx +++ b/zy-acs-flow/src/map/insight/index.jsx @@ -32,7 +32,7 @@ }}> <Stack direction="row" p={2}> <Typography variant="h6" flex="1"> - {title || translate('page.map.settings.title')} + {title || translate('page.map.insight.title')} </Typography> <IconButton onClick={handleClose} size="small"> <CloseIcon /> diff --git a/zy-acs-flow/src/map/player.js b/zy-acs-flow/src/map/player.js index e527e34..b5b60f9 100644 --- a/zy-acs-flow/src/map/player.js +++ b/zy-acs-flow/src/map/player.js @@ -406,7 +406,7 @@ }) app.stage.eventMode = 'static'; app.stage.hitArea = app.screen; - app.stage.interactive = true; + app.view.addEventListener('contextmenu', (event) => { event.preventDefault(); }); diff --git a/zy-acs-flow/src/map/tool.js b/zy-acs-flow/src/map/tool.js index de1f008..17ab6bb 100644 --- a/zy-acs-flow/src/map/tool.js +++ b/zy-acs-flow/src/map/tool.js @@ -141,43 +141,6 @@ sprite.alpha = 1; } -export const beMovable = (sprite) => { - sprite.off('pointerup'); - sprite.off('pointermove'); - sprite.off('pointerdown'); - sprite.off('click'); - - sprite.on("pointerdown", onDragStart); - - let dragTarget; - function onDragStart(event) { - if (event.button === 0) { - dragTarget = event.currentTarget; - mapContainer.parent.off('pointermove'); - mapContainer.parent.on('pointermove', onDragMove, dragTarget); - - mapContainer.parent.off('pointerup'); - mapContainer.parent.on('pointerup', onDragEnd.bind(mapContainer)); - } - } - - function onDragMove(event) { - if (this) { - this.parent.toLocal(event.global, null, this.position); - } - } - - function onDragEnd() { - if (dragTarget) { - this.parent.off('pointermove'); - this.parent.off('pointerup'); - dragTarget.alpha = 1; - dragTarget = null; - } - } - -} - export const spriteListBeMovable = (selectedSprites, endFn) => { if (selectedSprites && selectedSprites.length > 0) { let batchMove = false; @@ -252,6 +215,57 @@ && spriteBounds.x < boxBounds.x + boxBounds.width && spriteBounds.y + spriteBounds.height > boxBounds.y && spriteBounds.y < boxBounds.y + boxBounds.height; +} + +export const beInsight = (sprite, setCurSprite) => { + sprite.off('pointerup'); + sprite.off('pointermove'); + sprite.off('pointerdown'); + sprite.off('click'); + + sprite.on("click", onClick); + + function onClick(event) { + setCurSprite(sprite); + } + +} + +export const beMovable = (sprite) => { + sprite.off('pointerup'); + sprite.off('pointermove'); + sprite.off('pointerdown'); + sprite.off('click'); + + sprite.on("pointerdown", onDragStart); + + let dragTarget; + function onDragStart(event) { + if (event.button === 0) { + dragTarget = event.currentTarget; + mapContainer.parent.off('pointermove'); + mapContainer.parent.on('pointermove', onDragMove, dragTarget); + + mapContainer.parent.off('pointerup'); + mapContainer.parent.on('pointerup', onDragEnd.bind(mapContainer)); + } + } + + function onDragMove(event) { + if (this) { + this.parent.toLocal(event.global, null, this.position); + } + } + + function onDragEnd() { + if (dragTarget) { + this.parent.off('pointermove'); + this.parent.off('pointerup'); + dragTarget.alpha = 1; + dragTarget = null; + } + } + } export const beSettings = (sprite, setSpriteSettings) => { @@ -482,13 +496,14 @@ // dynamic graphic ---------------- -export const generateDynamicGraphic = (curZone, data) => { +export const generateDynamicGraphic = (curZone, data, callback) => { // console.log("ws", curZone, data); for (const agvVo of data.agvVos) { showAgvSprite(curZone, agvVo) } + callback(); } const showAgvSprite = (curZone, agvVo) => { -- Gitblit v1.9.1