| | |
| | | import { API_TIMEOUT } from '@/config/setting' |
| | | import agv from '/public/img/map/agv.svg' |
| | | import shelf from '/public/img/map/shelf.png' |
| | | import point from '/public/img/map/point.svg' |
| | | |
| | | let app = null; |
| | | let mapContainer = null; |
| | | let notify = null; |
| | | let effectTick, effectHalfCircle, effectRectangle; |
| | | |
| | | export function syncApp(param) { |
| | |
| | | |
| | | export function syncMapContainer(param) { |
| | | mapContainer = param; |
| | | } |
| | | |
| | | export function syncNotify(param) { |
| | | notify = param; |
| | | } |
| | | |
| | | export function getMapContainer() { |
| | |
| | | const { width, height } = sprite; |
| | | const scale = sprite.scale.x; |
| | | const sideLen = (Math.max(width, height) + 10) * scale; |
| | | const color = 0x273c75; |
| | | const color = app.renderer.backgroundColor === '#f1f2f6' ? 0x273c75 : 0xffffff; |
| | | |
| | | effectHalfCircle = new PIXI.Graphics(); |
| | | effectHalfCircle.beginFill(color); |
| | |
| | | effectHalfCircle.scale.set(1 / scale); |
| | | |
| | | effectRectangle = new PIXI.Graphics(); |
| | | effectRectangle.lineStyle(2 * scale, color, 1); |
| | | effectRectangle.lineStyle(5 * scale, color, 1); |
| | | effectRectangle.drawRoundedRect(0, 0, sideLen, sideLen, 16 * scale); |
| | | effectRectangle.endFill(); |
| | | effectRectangle.mask = effectHalfCircle; |
| | |
| | | label: intl.formatMessage({ id: 'map.sensor.type.agv', defaultMessage: '无人小车' }) |
| | | }) |
| | | break; |
| | | case SENSOR_TYPE.POINT: |
| | | options.push({ |
| | | value: value, |
| | | label: intl.formatMessage({ id: 'map.sensor.type.point', defaultMessage: '定位点' }) |
| | | }) |
| | | break; |
| | | default: |
| | | break; |
| | | } |
| | |
| | | case SENSOR_TYPE.AGV: |
| | | sprite = PIXI.Sprite.from(agv); |
| | | break; |
| | | case SENSOR_TYPE.POINT: |
| | | sprite = PIXI.Sprite.from(point); |
| | | break; |
| | | default: |
| | | break; |
| | | } |
| | |
| | | // data |
| | | sprite.data.uuid = item.uuid; |
| | | sprite.data.no = item.no; |
| | | |
| | | // dynamical data |
| | | Object.assign(sprite.data, item.property); |
| | | |
| | | // graph |
| | | sprite.position.set(item.positionX, item.positionY); |
| | |
| | | let mapItemList = []; |
| | | mapContainer?.children.forEach(child => { |
| | | if (child.data?.uuid) { |
| | | const { type, uuid, no, ...property } = child.data; |
| | | mapItemList.push({ |
| | | // data |
| | | type: child.data.type, |
| | | uuid: child.data.uuid, |
| | | no: child.data.no, |
| | | type: type, |
| | | uuid: uuid, |
| | | no: no, |
| | | property: property, |
| | | |
| | | // graph |
| | | positionX: child.position.x, |
| | |
| | | |
| | | new TWEEDLE.Tween(mapContainer.position).easing(TWEEDLE.Easing.Quadratic.Out) |
| | | .to(targetPos, 500).start(); |
| | | } |
| | | |
| | | export const mapNotify = (msg) => { |
| | | notify.open({ |
| | | description: msg, |
| | | duration: 1.5, |
| | | style: { width: 300 }, |
| | | placement: 'bottom', |
| | | closeIcon: false, |
| | | onClick: () => { } |
| | | }); |
| | | } |