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