| | |
| | | DEVICE_SELECTED_EFFECT_PADDING, |
| | | DEVICE_SELECTED_EFFECT_COLOR, |
| | | POINT_ROUTE_DIRECTION, |
| | | DEVICE_SPRITE_TINT_DARK, |
| | | } from './constants'; |
| | | import { getRouteList } from './http'; |
| | | import PointRoute from "./PointRoute"; |
| | |
| | | |
| | | export function setThemeMode(param) { |
| | | themeMode = param; |
| | | if (mapContainer) { |
| | | // mapContainer.children.forEach(child => { |
| | | // const deviceType = child.data?.type; |
| | | // if (deviceType) { |
| | | // if (themeMode === 'dark') { |
| | | // const tint = DEVICE_SPRITE_TINT_DARK[deviceType] |
| | | // if (tint) { |
| | | // child.tint = tint; |
| | | // } |
| | | // } else { |
| | | // DEVICE_SPRITE_TINT[deviceType] != null && (child.tint = DEVICE_SPRITE_TINT[deviceType]); |
| | | // } |
| | | // } |
| | | // }) |
| | | } |
| | | } |
| | | |
| | | |
| | |
| | | default: |
| | | break; |
| | | } |
| | | DEVICE_SPRITE_TINT[deviceType] != null && (sprite.tint = DEVICE_SPRITE_TINT[deviceType]); |
| | | const tintType = themeMode === 'dark' ? DEVICE_SPRITE_TINT_DARK : DEVICE_SPRITE_TINT; |
| | | tintType[deviceType] != null && (sprite.tint = tintType[deviceType]); |
| | | |
| | | if (sprite && deviceType !== DEVICE_TYPE.AGV) { |
| | | sprite.blendMode = PIXI.BLEND_MODES.MULTIPLY; |
| | |
| | | const pointRoute = new PointRoute(POINT_ROUTE_DIRECTION[route.direction]); |
| | | pointRoute.setPoint(startPoint, endPoint); |
| | | pointRoute.clear(); |
| | | pointRoute.lineStyle(8, themeMode === 'light' ? '#2d3436' : '#dcdde1'); |
| | | pointRoute.lineStyle(Math.max(7, 1.5 * (1 / mapContainer.scale.x)), themeMode === 'light' ? '#ced6e0' : '#535c68'); |
| | | pointRoute.moveTo(startPoint.position.x, startPoint.position.y); |
| | | pointRoute.lineTo(endPoint.position.x, endPoint.position.y); |
| | | pointRoute.alpha = 1; |
| | |
| | | export const generateDynamicGraphic = (curZone, data, setCurSprite) => { |
| | | // console.log("ws", curZone, data); |
| | | |
| | | for (const agv of data.agvVos) { |
| | | showAgvSprite(curZone, agv, setCurSprite) |
| | | for (const agvVo of data.agvVos) { |
| | | // console.log(agvVo); |
| | | showAgvSprite(curZone, agvVo, setCurSprite); |
| | | drawerAgvPath(curZone, agvVo); |
| | | } |
| | | |
| | | } |
| | | |
| | | const showAgvSprite = (curZone, agv, setCurSprite) => { |
| | | const { agvNo, code, direction, backpack, battery, ...rest } = agv; |
| | | const showAgvSprite = (curZone, agvVo, setCurSprite) => { |
| | | const { agvNo, code, direction, backpack, dynamicRoute, battery, ...rest } = agvVo; |
| | | if (!code) { return } |
| | | const codeSprite = querySprite(DEVICE_TYPE.POINT, code); |
| | | if (!codeSprite) { return } |
| | |
| | | beInsight(agvSprite, setCurSprite); |
| | | // agv no on sprite |
| | | } |
| | | } |
| | | |
| | | const drawerAgvPath = (curZone, agvVo) => { |
| | | if (!mapContainer) { |
| | | return; |
| | | } |
| | | const { agvNo, code: curCode, dynamicRoute } = agvVo; |
| | | if (dynamicRoute?.length <= 1) { |
| | | return; |
| | | } |
| | | |
| | | const agvPathName = 'agvPath-' + agvNo; |
| | | let agvPath = mapContainer.getChildByName(agvPathName); |
| | | if (agvPath) { |
| | | mapContainer.removeChild(agvPath); |
| | | } |
| | | agvPath = new PIXI.Graphics(); |
| | | agvPath.name = agvPathName; |
| | | agvPath.lineStyle(Math.max(20, 4 * (1 / mapContainer.scale.x)), 0x2f68ac, 0.8); |
| | | agvPath.zIndex = DEVICE_Z_INDEX.DYNAMIC_ROUTE; |
| | | agvPath.blendMode = PIXI.BLEND_MODES.NORMAL; |
| | | |
| | | let firstNode = true; |
| | | for (let i = Math.max(0, dynamicRoute.indexOf(curCode)); i < dynamicRoute.length; i++) { |
| | | const node = dynamicRoute[i]; |
| | | const codeSprite = querySprite(DEVICE_TYPE.POINT, node); |
| | | if (!codeSprite) { continue }; |
| | | const { x, y } = codeSprite.position; |
| | | if (firstNode) { |
| | | agvPath.moveTo(x, y); |
| | | firstNode = false; |
| | | } else { |
| | | agvPath.lineTo(x, y); |
| | | } |
| | | } |
| | | |
| | | mapContainer.addChild(agvPath); |
| | | } |