| | |
| | | } |
| | | |
| | | export function createAgvJobPanel(parentContainer, text) { |
| | | const panelScale = 4; |
| | | |
| | | const panel = new PIXI.Container(); |
| | | |
| | | const sideLen = 50; |
| | | const sideLen = 50 * panelScale; |
| | | const halfCircle = new PIXI.Graphics(); |
| | | halfCircle.beginFill(themeMode === 'light' ? '#5c5a5a' : '#eee'); |
| | | halfCircle.lineStyle(2, themeMode === 'light' ? '#5c5a5a' : '#eee'); |
| | | halfCircle.beginFill(themeMode === 'light' ? '#333333' : '#eee'); |
| | | halfCircle.lineStyle(2 * panelScale, themeMode === 'light' ? '#333333' : '#eee'); |
| | | halfCircle.arc(0, 0, sideLen, 0, Math.PI); |
| | | halfCircle.endFill(); |
| | | |
| | | const rectangle = new PIXI.Graphics(); |
| | | rectangle.lineStyle(2, themeMode === 'light' ? '#5c5a5a' : '#eee', 1); |
| | | rectangle.lineStyle(2 * panelScale, themeMode === 'light' ? '#333333' : '#eee', .8); |
| | | rectangle.drawRoundedRect( |
| | | -sideLen / 2, // 左上角 x |
| | | -sideLen / 2, // 左上角 y |
| | | sideLen, // 宽 |
| | | sideLen - 20, // 高 (留一点空间,看起来更像半圆容器) |
| | | 16 // 圆角 |
| | | sideLen - (20 * panelScale), // 高 (留一点空间,看起来更像半圆容器) |
| | | 16 * panelScale // 圆角 |
| | | ); |
| | | rectangle.endFill(); |
| | | rectangle.mask = halfCircle; |
| | |
| | | |
| | | const msg = new PIXI.Text(text, { |
| | | fill: themeMode === 'light' ? '#2b2b2b' : '#eee', |
| | | fontSize: 12, |
| | | fontSize: 12 * panelScale, |
| | | fontFamily: 'MicrosoftYaHei', |
| | | fontWeight: 'bold', |
| | | fontWeight: 'bolder', |
| | | align: 'center', |
| | | }); |
| | | msg.anchor.set(0.5); |
| | | msg.position.set(0, -10); |
| | | msg.position.set(0, -10 * panelScale); |
| | | |
| | | panel.addChild(msg); |
| | | panel.scale.set(3); |
| | | parentContainer.addChild(panel); |
| | | |
| | | let phase = 0; |
| | | function onTick(delta) { |
| | | phase += delta / 8; // 旋转速度可调 |
| | | phase += delta / 6; // 旋转速度可调 |
| | | phase %= (Math.PI * 2); |
| | | halfCircle.rotation = phase; |
| | | } |
| | |
| | | const agvRotationOffset = rotationParseNum(agvRotationOffsetDegrees); |
| | | |
| | | const showAgvSprite = (curZone, agvVo, setCurSprite) => { |
| | | const { agvNo, code, direction, battery, jobType, backpack: backpackCount, error } = agvVo; |
| | | const { agvNo, code, direction, battery, jobType, backpack: backpackCount, slots, error } = agvVo; |
| | | if (!code) { return; } |
| | | const codeSprite = querySprite(DEVICE_TYPE.POINT, code); |
| | | if (!codeSprite) { return; } |
| | | if (agvNo === '12') { |
| | | console.log(backpackCount); |
| | | } |
| | | |
| | | |
| | | const targetRotation = rotationParseNum(direction); |
| | | // const backpackCount = backpack?.filter(item => item.loaded === true).length || 0; |
| | | |
| | |
| | | // job effect |
| | | if (jobType) { |
| | | if (!agvSprite.data.jobEffect) { |
| | | agvSprite.data.jobEffect = createAgvJobPanel(agvSprite, jobType); |
| | | agvSprite.data.jobEffect = createAgvJobPanel(agvSprite, jobType + " (" + backpackCount + "/" + slots + ")"); |
| | | agvSprite.data.jobEffect.x = -80; |
| | | agvSprite.data.jobEffect.y = 0; |
| | | } |