From 4efd8e4d44d06fd7aa52ae1e9f6633dd158ff4e5 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期六, 19 十月 2024 17:06:15 +0800
Subject: [PATCH] #

---
 zy-acs-flow/src/map/PointRoute.js |   94 +++++++++++++++++++++++++++++++
 zy-acs-flow/src/map/constants.js  |    9 ++
 zy-acs-flow/src/map/http.js       |    2 
 zy-acs-flow/src/map/tool.js       |   31 ++++++++++
 zy-acs-flow/src/map/MapPage.jsx   |   28 ++++++---
 5 files changed, 152 insertions(+), 12 deletions(-)

diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx
index 8d073f3..050c0a3 100644
--- a/zy-acs-flow/src/map/MapPage.jsx
+++ b/zy-acs-flow/src/map/MapPage.jsx
@@ -19,7 +19,7 @@
 import * as Http from './http';
 import WebSocketClient from './websocket'
 import ConfirmButton from "../page/components/ConfirmButton";
-import { FitScreen } from '@mui/icons-material';
+import { FitScreen, AltRoute } from '@mui/icons-material';
 import MapSearch from "./header/MapSearch";
 import { startupOrShutdown } from "./http";
 import PulseSignal from "../page/components/PulseSignal";
@@ -51,6 +51,7 @@
     const [batchSprites, setBatchSprites] = useState([]);
 
     const [rcsStatus, setRcsStatus] = useState(null);
+    const [showRoutes, setShowRoutes] = useState(false);
     const [curZone, setCurZone] = useState(() => {
         const storedValue = localStorage.getItem('curZone');
         return storedValue !== null ? JSON.parse(storedValue) : null;
@@ -118,6 +119,7 @@
 
     const switchMode = (mode) => {
         Tool.removeSelectedEffect();
+        player.hideGridLines();
 
         setInsightVisible(false);
         setDeviceVisible(false);
@@ -129,9 +131,6 @@
 
         switch (mode) {
             case MAP_MODE.OBSERVER_MODE:
-                player.hideGridLines();
-                player.hideStarryBackground();
-
                 player.activateMapMultiSelect((selectedSprites, restartFn) => {
                     Tool.multipleSelectEnhancer(selectedSprites, setCurSprite, setBatchSprites);
                 });
@@ -142,7 +141,7 @@
                 break
             case MAP_MODE.MOVABLE_MODE:
                 player.showGridLines();
-                player.hideStarryBackground();
+                Tool.hideRoutes(curZone, setShowRoutes);
 
                 player.activateMapMultiSelect((selectedSprites, restartFn) => {
                     Tool.spriteListBeMovable(selectedSprites, () => {
@@ -155,9 +154,6 @@
                 })
                 break
             case MAP_MODE.SETTINGS_MODE:
-                player.hideGridLines();
-                // player.showStarryBackground(); // 0x2f68ac
-
                 player.activateMapMultiSelect((selectedSprites, restartFn) => {
                     Tool.multipleSelectEnhancer(selectedSprites, setCurSprite, setBatchSprites);
                 });
@@ -403,16 +399,28 @@
                         gap: 1
                     }}
                 >
+                    {mode !== MAP_MODE.MOVABLE_MODE && (
+                        <Fab
+                            variant="extended"
+                            color={showRoutes ? 'inherit' : 'primary'}
+                            size="small"
+                            onClick={() => {
+                                showRoutes ? Tool.hideRoutes(curZone, setShowRoutes) : Tool.showRoutes(curZone, setShowRoutes)
+                            }}
+                        >
+                            <AltRoute />
+                        </Fab>
+                    )}
                     <Fab
                         variant="extended"
                         color="primary"
-                        size="medium"
+                        size="small"
                         onClick={() => {
                             player.adaptScreen();
                         }}
                     >
                         <FitScreen />
-                        &nbsp;{translate('page.map.action.adapt')}
+                        {/* &nbsp;{translate('page.map.action.adapt')} */}
                     </Fab>
                 </Box>
             </Box>
diff --git a/zy-acs-flow/src/map/PointRoute.js b/zy-acs-flow/src/map/PointRoute.js
new file mode 100644
index 0000000..1fd7fdf
--- /dev/null
+++ b/zy-acs-flow/src/map/PointRoute.js
@@ -0,0 +1,94 @@
+import * as PIXI from 'pixi.js';
+import { DEVICE_TYPE, POINT_ROUTE_DIRECTION } from "./constants";
+
+export default class PointRoute extends PIXI.Graphics {
+
+    startSprite;
+    endSprite;
+
+    direction;
+
+    type;
+    no;
+
+    constructor(direction) {
+        super();
+        this.direction = direction ? direction : POINT_ROUTE_DIRECTION.OUT_OF_ORDER;
+        // this.data = {
+        //     type: DEVICE_TYPE.ROUTE
+        // };
+        this.type = DEVICE_TYPE.ROUTE;
+    }
+
+    style() {
+        const scale = 1;
+        this.clear();
+        this.lineStyle(1.5, 0x2d3436);
+        this.moveTo(this.startSprite.x * scale, this.startSprite.y * scale);
+        this.lineTo(this.endSprite.x * scale, this.endSprite.y * scale);
+    }
+
+    setPoint(startSprite, endSprite) {
+        this.startSprite = startSprite;
+        this.endSprite = endSprite;
+        // this.data.no = this.startSprite?.data?.no + "-" + this.endSprite?.data?.no;
+        this.no = this.startSprite?.data?.no + "-" + this.endSprite?.data?.no;
+    }
+
+    update(dragSprite) {
+        const scale = 1;
+        this.clear();
+        this.lineStyle(1.5, 0x2d3436);
+        if (dragSprite === this.startSprite) {
+            this.moveTo(dragSprite.position.x * scale, dragSprite.position.y * scale);
+        } else {
+            this.moveTo(this.startSprite.position.x * scale, this.startSprite.position.y * scale);
+        }
+        if (dragSprite === this.endSprite) {
+            this.lineTo(dragSprite.position.x * scale, dragSprite.position.y * scale);
+        } else {
+            this.lineTo(this.endSprite.position.x * scale, this.endSprite.position.y * scale);
+        }
+    }
+
+    about(sprite) {
+        return sprite === this.startSprite || sprite === this.endSprite;
+    }
+
+    has(startSprite, endSprite) {
+        let res = false;
+        switch (this.direction) {
+            case POINT_ROUTE_DIRECTION.OUT_OF_ORDER:
+                if (startSprite === this.startSprite) {
+                    if (endSprite === this.endSprite) {
+                        res = true;
+                    }
+                }
+                if (startSprite === this.endSprite) {
+                    if (endSprite === this.startSprite) {
+                        res = true;
+                    }
+                }
+                break
+            case POINT_ROUTE_DIRECTION.ORDER:
+                if (startSprite === this.startSprite) {
+                    if (endSprite === this.endSprite) {
+                        res = true;
+                    }
+                }
+                break
+            case POINT_ROUTE_DIRECTION.REVERSE_ORDER:
+                if (startSprite === this.endSprite) {
+                    if (endSprite === this.startSprite) {
+                        res = true;
+                    }
+                }
+                break
+            default:
+                break
+        }
+        return res;
+    }
+
+}
+
diff --git a/zy-acs-flow/src/map/constants.js b/zy-acs-flow/src/map/constants.js
index e30e4c5..3c4c9a4 100644
--- a/zy-acs-flow/src/map/constants.js
+++ b/zy-acs-flow/src/map/constants.js
@@ -4,7 +4,6 @@
     OBSERVER_MODE: "1",
     MOVABLE_MODE: "2",
     SETTINGS_MODE: "3",
-    ROADMAP_MODE: "4",
 })
 
 export const DEVICE_TYPE = Object.freeze({
@@ -15,6 +14,8 @@
 
     AGV: "AGV",
     POINT: "POINT",
+
+    ROUTE: "ROUTE",
 })
 
 export const DEVICE_Z_INDEX = Object.freeze({
@@ -64,4 +65,10 @@
     LOADED_NO_BATTERY: 4,
     LOADED_HALF_BATTERY: 5,
     LOADED_FULL_BATTERY: 6,
+})
+
+export const POINT_ROUTE_DIRECTION = Object.freeze({
+    OUT_OF_ORDER: 0,
+    ORDER: 1,
+    REVERSE_ORDER: 2,
 })
\ No newline at end of file
diff --git a/zy-acs-flow/src/map/http.js b/zy-acs-flow/src/map/http.js
index f78cfe5..895a3b4 100644
--- a/zy-acs-flow/src/map/http.js
+++ b/zy-acs-flow/src/map/http.js
@@ -75,7 +75,7 @@
     mapContainer.children.forEach(child => {
         if (child.data?.uuid) {
             const { type, uuid, no, ...property } = child.data;
-            if (type !== DEVICE_TYPE.AGV && type !== DEVICE_TYPE.POINT) {
+            if (type !== DEVICE_TYPE.AGV && type !== DEVICE_TYPE.POINT && type !== DEVICE_TYPE.ROUTE) {
                 sprites.push({
                     // graph
                     positionX: child.position.x,
diff --git a/zy-acs-flow/src/map/tool.js b/zy-acs-flow/src/map/tool.js
index b7de3e7..e47361a 100644
--- a/zy-acs-flow/src/map/tool.js
+++ b/zy-acs-flow/src/map/tool.js
@@ -7,7 +7,10 @@
     DEVICE_SPRITE_TINT,
     DEVICE_SELECTED_EFFECT_PADDING,
     DEVICE_SELECTED_EFFECT_COLOR,
+    POINT_ROUTE_DIRECTION,
 } from './constants';
+import { getRouteList } from './http';
+import PointRoute from "./PointRoute";
 
 import shelf from '/map/shelf.svg';
 import charge from '/map/charge.svg';
@@ -467,6 +470,34 @@
     effectCircle.position.set(selectedSprite.x, selectedSprite.y);
 };
 
+export const showRoutes = (curZone, setShowRoutes) => {
+    setShowRoutes(true);
+    getRouteList(curZone, (routeList) => {
+        routeList.forEach(route => {
+            const startPoint = querySprite(DEVICE_TYPE.POINT, route.startCodeStr);
+            const endPoint = querySprite(DEVICE_TYPE.POINT, route.endCodeStr);
+            const pointRoute = new PointRoute(POINT_ROUTE_DIRECTION[route.direction]);
+            pointRoute.setPoint(startPoint, endPoint);
+            pointRoute.clear();
+            pointRoute.lineStyle(10, 0x2d3436);
+            pointRoute.moveTo(startPoint.position.x, startPoint.position.y);
+            pointRoute.lineTo(endPoint.position.x, endPoint.position.y);
+            pointRoute.alpha = 1;
+            mapContainer.addChild(pointRoute);
+        })
+    })
+};
+
+export const hideRoutes = (curZone, setShowRoutes) => {
+    setShowRoutes(false);
+    for (let i = mapContainer.children.length - 1; i >= 0; i--) {
+        const child = mapContainer.children[i];
+        if (child?.type === DEVICE_TYPE.ROUTE) {
+            mapContainer.removeChild(child);
+        }
+    }
+}
+
 export const multipleSelectEnhancer = (selectedSprites, setCurSprite, setBatchSprites) => {
     selectedSprites = selectedSprites.filter(sprite => sprite.data?.type);
 

--
Gitblit v1.9.1