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