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 />
- {translate('page.map.action.adapt')}
+ {/* {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