| | |
| | | pixiStageList: [], |
| | | pixiStaMap: new Map(), |
| | | pixiCrnMap: new Map(), |
| | | pixiDualCrnMap: new Map(), |
| | | pixiRgvMap: new Map(), |
| | | pixiShelfMap: new Map(), |
| | | pixiTrackMap: new Map(), |
| | |
| | | pixiCrnColorTextureMap: new Map(), |
| | | pixiRgvColorTextureMap: new Map(), |
| | | crnList: [], |
| | | dualCrnList: [], |
| | | rgvList: [], |
| | | objectsContainer: null, |
| | | objectsContainer2: null, |
| | |
| | | isSwitchingFloor: false |
| | | } |
| | | }, |
| | | mounted() { |
| | | mounted() { |
| | | this.currentLev = this.lev || 1; |
| | | this.createMap(); |
| | | this.ws = new WebSocket("ws://" + window.location.host + baseUrl + "/console/websocket"); |
| | |
| | | |
| | | this.timer = setInterval(() => { |
| | | this.getCrnInfo(); |
| | | this.getDualCrnInfo(); |
| | | this.getSiteInfo(); |
| | | this.getRgvInfo(); |
| | | }, 1000); |
| | |
| | | if (this.tracksContainer) { this.tracksContainer.removeChildren(); } |
| | | if (this.shelvesContainer) { this.shelvesContainer.removeChildren(); } |
| | | this.crnList = []; |
| | | this.dualCrnList = []; |
| | | this.rgvList = []; |
| | | this.pixiCrnMap = new Map(); |
| | | this.pixiDualCrnMap = new Map(); |
| | | this.pixiRgvMap = new Map(); |
| | | this.pixiStaMap = new Map(); |
| | | this.pixiStageList = []; |
| | |
| | | this.objectsContainer2.addChild(sprite); |
| | | }); |
| | | |
| | | this.dualCrnList.forEach((item) => { |
| | | if (this.graphicsCrn == null) { this.graphicsCrn = this.createCrnTexture(item.width * 0.9, item.height * 0.9); } |
| | | let sprite = new PIXI.Sprite(this.graphicsCrn); |
| | | const deviceNo = this.getDeviceNo(item.value); |
| | | const taskNo = this.getTaskNo(item.value); |
| | | const style = new PIXI.TextStyle({ fontFamily: 'Arial', fontSize: 12, fill: '#000000', stroke: '#ffffff', strokeThickness: 1 }); |
| | | const txt = taskNo > 0 ? (deviceNo + "(" + taskNo + ")") : String(deviceNo); |
| | | const text = new PIXI.Text(txt, style); |
| | | text.anchor.set(0.5); |
| | | text.position.set(sprite.width / 2, sprite.height / 2); |
| | | sprite.addChild(text); |
| | | sprite.textObj = text; |
| | | sprite.position.set(item.posX, item.posY); |
| | | sprite.interactive = true; |
| | | sprite.buttonMode = true; |
| | | sprite.on('pointerdown', () => { |
| | | if (window.gsap) { window.gsap.killTweensOf(sprite); } |
| | | sprite.alpha = 1; |
| | | const id = parseInt(deviceNo, 10); |
| | | this.$emit('dual-crn-click', id); |
| | | }); |
| | | let rowIndexForCrn = 0; |
| | | for (let r = 0; r < map.length; r++) { |
| | | if (map[r].length > 0) { |
| | | const rowY = map[r][0].posY; |
| | | if (Math.abs(rowY - item.posY) < 0.5) { rowIndexForCrn = r; break; } |
| | | } |
| | | } |
| | | sprite.rowIndex = rowIndexForCrn; |
| | | this.pixiDualCrnMap.set(parseInt(deviceNo), sprite); |
| | | this.objectsContainer2.addChild(sprite); |
| | | }); |
| | | |
| | | this.rgvList.forEach((item) => { |
| | | if (this.graphicsRgv == null) { this.graphicsRgv = this.createRgvTexture(item.width * 0.9, item.height * 0.9); } |
| | | let sprite = new PIXI.Sprite(this.graphicsRgv); |
| | |
| | | if (this.isSwitchingFloor) { return; } |
| | | this.sendWs(JSON.stringify({ url: "/console/latest/data/crn", data: {} })); |
| | | }, |
| | | getDualCrnInfo() { |
| | | if (this.isSwitchingFloor) { return; } |
| | | this.sendWs(JSON.stringify({ url: "/console/latest/data/dualcrn", data: {} })); |
| | | }, |
| | | getSiteInfo() { |
| | | if (this.isSwitchingFloor) { return; } |
| | | this.sendWs(JSON.stringify({ url: "/console/latest/data/station", data: {} })); |
| | |
| | | for (let c = this.map[rowIndex].length - 1; c >= 0; c--) { |
| | | const cell = this.map[rowIndex][c]; |
| | | if (cell && cell.type === 'crn') { targetCell = cell; break; } |
| | | } |
| | | } |
| | | if (!targetCell) { continue; } |
| | | const targetX = targetCell.posX + (targetCell.width - sprite.width) / 2; |
| | | const dx = Math.abs(targetX - sprite.x); |
| | | if (dx < 1) { |
| | | } else if (dx < 5) { |
| | | sprite.x = targetX; |
| | | } else if (window.gsap) { |
| | | window.gsap.killTweensOf(sprite); |
| | | window.gsap.to(sprite, { x: targetX, duration: 0.3, ease: "power1.inOut" }); |
| | | } else { |
| | | sprite.x = targetX; |
| | | } |
| | | } |
| | | this.scheduleAdjustLabels(); |
| | | }, |
| | | setDualCrnInfo(res) { |
| | | let crns = Array.isArray(res) ? res : (res && res.code === 200 ? res.data : null); |
| | | if (!crns) { return; } |
| | | for (var i = 0; i < crns.length; i++) { |
| | | const id = parseInt(crns[i].crnId); |
| | | const sprite = this.pixiDualCrnMap.get(id); |
| | | if (!sprite) { continue; } |
| | | const taskNo = crns[i].taskNo; |
| | | if (taskNo != null && taskNo > 0) { sprite.textObj.text = id + "(" + taskNo + ")"; } else { sprite.textObj.text = String(id); } |
| | | const status = crns[i].crnStatus; |
| | | const statusColor = this.getCrnStatusColor(status); |
| | | this.updateCrnTextureColor(sprite, statusColor); |
| | | let bay = parseInt(crns[i].bay, 10); |
| | | if (isNaN(bay) || bay < 1 || bay === -2) { bay = 1; } |
| | | let rowIndex = (sprite.rowIndex != null) ? sprite.rowIndex : -1; |
| | | if (rowIndex === -1) { |
| | | for (let r = 0; r < this.map.length; r++) { |
| | | if (this.map[r].length > 0) { |
| | | const rowY = this.map[r][0].posY; |
| | | if (Math.abs(rowY - sprite.y) < 0.5) { rowIndex = r; break; } |
| | | } |
| | | } |
| | | if (rowIndex === -1) { rowIndex = 0; } |
| | | } |
| | | let targetCell = null; |
| | | let crnCount = 0; |
| | | for (let c = 0; c < this.map[rowIndex].length; c++) { |
| | | const cell = this.map[rowIndex][c]; |
| | | if (cell && (cell.type === 'dualCrn' || cell.type === 'dualcrn')) { |
| | | crnCount++; |
| | | if (crnCount === bay) { targetCell = cell; break; } |
| | | } |
| | | } |
| | | if (!targetCell) { |
| | | for (let c = this.map[rowIndex].length - 1; c >= 0; c--) { |
| | | const cell = this.map[rowIndex][c]; |
| | | if (cell && (cell.type === 'dualCrn' || cell.type === 'dualcrn')) { targetCell = cell; break; } |
| | | } |
| | | } |
| | | if (!targetCell) { continue; } |
| | |
| | | this.setSiteInfo(JSON.parse(result.data)); |
| | | } else if (result.url === "/console/latest/data/crn") { |
| | | this.setCrnInfo(JSON.parse(result.data)); |
| | | } else if (result.url === "/console/latest/data/dualcrn") { |
| | | this.setDualCrnInfo(JSON.parse(result.data)); |
| | | } else if (result.url === "/console/latest/data/rgv") { |
| | | this.setRgvInfo(JSON.parse(result.data)); |
| | | } else if (typeof result.url === "string" && result.url.indexOf("/basMap/lev/") === 0) { |
| | |
| | | sprite = this.createTrackSprite(item.width, item.height); |
| | | sprite._kind = 'crn-track'; |
| | | if (this.getDeviceNo(value) > 0) { this.crnList.push(item); } |
| | | } else if (item.type == 'dualCrn') { |
| | | sprite = this.createTrackSprite(item.width, item.height); |
| | | sprite._kind = 'crn-track'; |
| | | if (this.getDeviceNo(value) > 0) { this.dualCrnList.push(item); } |
| | | } else if (item.type == 'rgv') { |
| | | sprite = this.createTrackSprite(item.width, item.height); |
| | | sprite._kind = 'rgv-track'; |
| | |
| | | const on = sx >= -margin && sy >= -margin && sx <= vw + margin && sy <= vh + margin; |
| | | textObj.visible = (s >= 0.25) && on; |
| | | }); |
| | | this.pixiDualCrnMap && this.pixiDualCrnMap.forEach((sprite) => { |
| | | const textObj = sprite && sprite.textObj; |
| | | if (!textObj) { return; } |
| | | const base = (textObj.style && textObj.style.fontSize) ? textObj.style.fontSize : 12; |
| | | let scale = minPx / (base * s); |
| | | if (!isFinite(scale)) { scale = 1; } |
| | | scale = Math.max(0.8, Math.min(scale, 3)); |
| | | textObj.scale.set(scale); |
| | | textObj.position.set(sprite.width / 2, sprite.height / 2); |
| | | const sx = pos.x + sprite.x * s; |
| | | const sy = pos.y + sprite.y * s; |
| | | const on = sx >= -margin && sy >= -margin && sx <= vw + margin && sy <= vh + margin; |
| | | textObj.visible = (s >= 0.25) && on; |
| | | }); |
| | | this.pixiRgvMap && this.pixiRgvMap.forEach((sprite) => { |
| | | const textObj = sprite && sprite.textObj; |
| | | if (!textObj) { return; } |