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