From 9f4a1cf5f91f85c49d3e609f19c9e833a08ca8ee Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期五, 22 三月 2024 08:29:48 +0800 Subject: [PATCH] # --- zy-asrs-flow/src/pages/map/utils.js | 231 +++++++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 191 insertions(+), 40 deletions(-) diff --git a/zy-asrs-flow/src/pages/map/utils.js b/zy-asrs-flow/src/pages/map/utils.js index 9db5e6d..227f565 100644 --- a/zy-asrs-flow/src/pages/map/utils.js +++ b/zy-asrs-flow/src/pages/map/utils.js @@ -1,7 +1,15 @@ import * as PIXI from 'pixi.js'; +import * as TWEEDLE from 'tweedle.js'; +import Http from '@/utils/http'; +import { message } from 'antd'; +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) { @@ -10,6 +18,10 @@ export function syncMapContainer(param) { mapContainer = param; +} + +export function syncNotify(param) { + notify = param; } export function getMapContainer() { @@ -22,6 +34,7 @@ export const SENSOR_TYPE = Object.freeze({ SHELF: "SHELF", + POINT: "POINT", AGV: "AGV", }) @@ -43,6 +56,21 @@ }; } +// show sprite feature from sprite click event +export const viewFeature = (sprite, setCurSPrite) => { + sprite.off('pointerup'); + sprite.off('pointermove'); + sprite.off('pointerdown'); + sprite.off('click'); + + sprite.on("click", onClick); + + function onClick(event) { + setCurSPrite(sprite); + } + +} + // sprite be movable from sprite click event export const beMovable = (sprite, setDidClickSprite) => { sprite.off('pointerup'); @@ -54,13 +82,15 @@ let dragTarget; function onDragStart(event) { - setDidClickSprite(true); - dragTarget = event.currentTarget; - mapContainer.parent.off('pointermove'); - mapContainer.parent.on('pointermove', onDragMove, dragTarget); + if (event.button === 0) { + setDidClickSprite(true); + dragTarget = event.currentTarget; + mapContainer.parent.off('pointermove'); + mapContainer.parent.on('pointermove', onDragMove, dragTarget); - mapContainer.parent.off('pointerup'); - mapContainer.parent.on('pointerup', onDragEnd.bind(mapContainer)); + mapContainer.parent.off('pointerup'); + mapContainer.parent.on('pointerup', onDragEnd.bind(mapContainer)); + } } function onDragMove(event) { @@ -82,7 +112,7 @@ } // sprite be beSettings from sprite click event -export const beSettings = (sprite, setSpriteBySettings, setDidClickSprite) => { +export const beSettings = (sprite, setSpriteBySettings) => { sprite.off('pointerup'); sprite.off('pointermove'); sprite.off('pointerdown'); @@ -92,18 +122,18 @@ function onClick(event) { setSpriteBySettings(sprite); - // setDidClickSprite(true); } } // sprites be movable from select box // the scale was dynamic -export const spriteListBeMovable = (selectedSprites, scale, resetFn) => { +export const spriteListBeMovable = (selectedSprites, resetFn) => { if (selectedSprites && selectedSprites.length > 0) { let batchMove = false; let batchMoveStartPos = null; const batchMoving = (event) => { + const scale = mapContainer.scale.x; if (batchMove && batchMoveStartPos) { // offset move val var mouseMovement = { @@ -111,8 +141,8 @@ y: (event.global.y - batchMoveStartPos.y) / scale }; for (let sprite of selectedSprites) { - sprite.position.x = sprite.data.batchMoveStartPos.x + mouseMovement.x; - sprite.position.y = sprite.data.batchMoveStartPos.y + mouseMovement.y; + sprite.position.x = sprite.batchMoveStartPos.x + mouseMovement.x; + sprite.position.y = sprite.batchMoveStartPos.y + mouseMovement.y; } } } @@ -128,13 +158,15 @@ mapContainer.parent.off('mousemove'); mapContainer.parent.off('mouseup'); - resetFn(); + if (resetFn) { + resetFn(); + } } const batchMoveStart = (event) => { batchMoveStartPos = { x: event.data.global.clone().x, y: event.data.global.clone().y }; selectedSprites.forEach(child => { - child.data.batchMoveStartPos = { x: child.position.x, y: child.position.y }; + child.batchMoveStartPos = { x: child.position.x, y: child.position.y }; }) batchMove = true; @@ -164,7 +196,7 @@ 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); @@ -175,7 +207,7 @@ 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; @@ -250,6 +282,20 @@ } } +export const rotationToNum = (rotation) => { + let res = rotation * 180 / Math.PI; + if (res < 0) { + res += 360; + } else if (res > 360) { + res -= 360; + } + return res; +} + +export const rotationParseNum = (num) => { + return num * Math.PI / 180; +} + export const findSpriteByUuid = (uuid) => { return mapContainer?.children?.find(child => child?.data?.uuid === uuid); } @@ -270,6 +316,12 @@ 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; } @@ -278,39 +330,138 @@ return options; } -export const adaptScreen = () => { - if (!mapContainer || !app) { - return; - } - if (mapContainer.children.length === 0) { +export const fetchMapData = async (curFloor) => { + clearMapData(); + await Http.doPostPromise('api/map/list', { floor: curFloor }, (res) => { + const mapItemList = eval(res.data); + mapItemList.forEach(item => { + let sprite; + switch (item.type) { + case SENSOR_TYPE.SHELF: + sprite = PIXI.Sprite.from(shelf); + break; + case SENSOR_TYPE.AGV: + sprite = PIXI.Sprite.from(agv); + break; + case SENSOR_TYPE.POINT: + sprite = PIXI.Sprite.from(point); + break; + default: + break; + } + if (sprite) { + initSprite(sprite, item.type); + // 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); + sprite.scale.set(item.scaleX, item.scaleY); + sprite.rotation = rotationParseNum(item.rotation); + mapContainer.addChild(sprite); + } + }) + + }).catch((error) => { + console.error(error); + }) + +} + +export const saveMapData = async (intl, floor) => { + if (!mapContainer) { return; } - let minX, maxX, minY, maxY; - for (let sprite of mapContainer.children) { - let bounds = sprite.getBounds(); - minX = minX !== undefined ? Math.min(minX, bounds.x) : bounds.x; - minY = minY !== undefined ? Math.min(minY, bounds.y) : bounds.y; - maxX = maxX !== undefined ? Math.max(maxX, bounds.x + bounds.width) : bounds.x + bounds.width; - maxY = maxY !== undefined ? Math.max(maxY, bounds.y + bounds.height) : bounds.y + bounds.height; + let mapItemList = []; + mapContainer?.children.forEach(child => { + if (child.data?.uuid) { + const { type, uuid, no, ...property } = child.data; + mapItemList.push({ + // data + type: type, + uuid: uuid, + no: no, + property: property, + + // graph + positionX: child.position.x, + positionY: child.position.y, + scaleX: child.scale.x, + scaleY: child.scale.y, + rotation: rotationToNum(child.rotation) + }) + } + }) + + const closeLoading = message.loading({ content: intl.formatMessage({ id: 'common.loading.api.message', defaultMessage: '绛夊緟鏈嶅姟鍣�......' }), duration: API_TIMEOUT }); + await Http.doPostPromise('api/map/save', { + itemList: mapItemList, + floor: floor + }, (res) => { + closeLoading(); + }).catch((error) => { + closeLoading(); + console.error(error); + }) +} + +export const clearMapData = (intl) => { + if (!mapContainer) { + return; + } + let childList = []; + mapContainer.children.forEach(child => { + if (child.data?.uuid) { + childList.push(child); + } + }) + if (childList.length > 0) { + childList.forEach(child => { + mapContainer.removeChild(child); + child.destroy({ children: true, texture: false, baseTexture: false }); + }) + childList.forEach((child, index) => { + childList[index] = null; + }); + childList = []; + } +} + +export const beCenter = (sprite) => { + if (!sprite || !app || !mapContainer) { + return; } - // 鐭╁舰涓績 + mapContainer.scale.set(1); + mapContainer.position.set(0, 0); + + let bounds = sprite.getBounds(); let centerPoint = { - x: (minX + maxX) / 2 * mapContainer.scale.x, - y: (minY + maxY) / 2 * mapContainer.scale.y + x: bounds.x + bounds.width / 2, + y: bounds.y + bounds.height / 2 }; - let newScale = Math.min( - app.renderer.width / (maxX - minX) * 0.9, // 90%鐨勫搴� - app.renderer.height / (maxY - minY) * 0.9 // 90%鐨勯珮搴� - ); + let targetPos = { + x: app.renderer.width / 3 - centerPoint.x * mapContainer.scale.x, + y: app.renderer.height / 3 - centerPoint.y * mapContainer.scale.y + }; - mapContainer.scale.set(newScale); + new TWEEDLE.Tween(mapContainer.position).easing(TWEEDLE.Easing.Quadratic.Out) + .to(targetPos, 500).start(); +} - // 璁╁湴鍥惧鍣ㄧ殑涓績鐐瑰畾浣嶅埌灞忓箷鐨勪腑蹇� - mapContainer.position.set( - app.renderer.width / 2 - centerPoint.x * newScale, - app.renderer.height / 2 - centerPoint.y * newScale - ); +export const mapNotify = (msg) => { + notify.open({ + description: msg, + duration: 1.5, + style: { width: 300 }, + placement: 'bottom', + closeIcon: false, + onClick: () => { } + }); } \ No newline at end of file -- Gitblit v1.9.1