#

Junjie

5 天以前 8412259640cb8a3bb63dc187563a1a3aee936a64

 src/main/webapp/views/watch/console2.html

@@ -85,6 +85,8 @@
    let pixiStaMap = new Map();
    let pixiCrnMap = new Map();
    let pixiShelfMap = new Map();
    let pixiTrackMap = new Map();
    let crnList = [];
    let objectsContainer;
    let objectsContainer2;
    let graphicsShelf;
@@ -147,13 +149,9 @@
            that.getMap(this.currentLev)
          }, 1000);

          // this.consoleInterval = setInterval(() => {
          //   this.getMap(this.currentLev) //获取实时地图数据
          //   this.getShuttleStateInfo() //获取四向穿梭车信息
          //   this.getLiftStateInfo() //获取提升机信息
          //   this.getSiteInfo() //获取输送站点数据
          //   // this.getCodeData()//获取条码
          // }, 1000)
          this.consoleInterval = setInterval(() => {
            this.getCrnInfo() //获取堆垛机数据
          }, 1000)

        },
        initLev() {
@@ -225,7 +223,7 @@
          // 从Graphics对象创建一个纹理
          // graphicsShelf = pixiApp.renderer.generateTexture(getContainer('shelf'));
          // graphicsDevp = pixiApp.renderer.generateTexture(getContainer('devp'));
          graphicsCrn = createCrnTexture(25,25);
          // graphicsCrn = createCrnTexture(40,40);
          graphicsCrnTrack = createTrackTexture(25,25);

          // 创建一个容器来管理大批量的显示对象
@@ -334,38 +332,97 @@
          pixiStaMap = new Map();//重置
          objectsContainer.removeChildren()

          let bayWidthList = this.initWidth(map)
          map.forEach((item, index) => {
            for(let idx = 0;idx < item.length;idx++){
              let val = item[idx];
              if(val.cellWidth == undefined || val.cellWidth === ''){
                val.cellWidth = bayWidthList[idx];
              }
            }
          })

          let bayHeightList = this.initHeight(map);
          let bayWidthList = this.initWidth(map)
          map.forEach((item, index) => {
            for(let idx = 0;idx < item.length;idx++){
              let val = item[idx];
              if(val.cellHeight == undefined || val.cellHeight === ''){
                val.cellHeight = bayHeightList[index];
              }
              if(val.cellWidth == undefined || val.cellWidth === ''){
                val.cellWidth = bayWidthList[idx];
              }
            }
          })

          map.forEach((item, index) => {
            for(let idx = 0;idx < item.length;idx++){
              let val = item[idx];
              // 计算合并单元格的实际宽高
              let val = item[idx]
              let cellWidth = val.cellWidth / 40;
              let cellHeight = val.cellHeight / 8;

              val.width = cellWidth;
              val.height = cellHeight;

              val.posX = idx * cellWidth;
              val.posY = index * cellHeight;
              let mergeHeight = cellHeight;
              if(val.rowSpan  > 1) {
                for(let i = 1;i < val.rowSpan;i++){
                  let nextMerge = map[index + i][idx];
                  if(nextMerge.type != 'merge'){
                    continue;
                  }
                  
                  let mergeCellHeight = nextMerge.cellHeight / 8;
                  mergeHeight += mergeCellHeight;
                }
                
                val.height = mergeHeight;
              }

              let mergeWidth = cellWidth;
              if(val.colSpan  > 1) {
                for(let i = 1;i < val.colSpan;i++){
                  let nextMerge = map[index][idx + i];
                  if (!nextMerge) { continue; }
                  
                  let mergeCellWidth = nextMerge.cellWidth / 40;
                  mergeWidth += mergeCellWidth;
                  nextMerge.isMergedPart = true;
                }
                
                val.width = mergeWidth;
              }
            }
          })

          const rowHeightScaled = bayHeightList.map(h => (h != null && h !== -1) ? (h / 8) : (height));
          let yOffsets = [];
          let yCursor = 0;
          for (let r = 0; r < map.length; r++) {
            yOffsets[r] = yCursor;
            yCursor += (rowHeightScaled[r] || 0);
          }

          map.forEach((row, rowIndex) => {
            let xCursor = 0;
            let anchorX = 0;
            for (let colIndex = 0; colIndex < row.length; colIndex++) {
              let val = row[colIndex];

              let cellWidth = val.width;
              let cellHeight = val.height;

              if (val.isMergedPart) {
                val.posX = anchorX;
                val.posY = yOffsets[rowIndex];
                continue;
              }

              val.posX = xCursor;
              val.posY = yOffsets[rowIndex];
              anchorX = xCursor;

              if (val.colSpan > 1) {
                for (let i = 1; i < val.colSpan; i++) {
                  const next = row[colIndex + i];
                  if (!next) { break; }
                  next.posX = anchorX;
                  next.posY = yOffsets[rowIndex];
                }
              }

              xCursor += cellWidth;
            }
          })

@@ -403,6 +460,41 @@
            }
          });

          crnList.forEach((item) => {
            if(graphicsCrn == null) {
              graphicsCrn = createCrnTexture(item.width * 0.9,item.height * 0.9);
            }
            let sprite = new PIXI.Sprite(graphicsCrn);
            const deviceNo = getDeviceNo(item.value);
            const taskNo = getTaskNo(item.value);
            const style = new PIXI.TextStyle({ fontFamily: 'Arial', fontSize: 12, fill: '#ffffff', stroke: '#000000', strokeThickness: 2 });
            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.zIndex = 1;

            sprite.position.set(item.posX, item.posY);
            sprite.interactive = true; // 必须要设置才能接收事件
            sprite.buttonMode = true; // 让光标在hover时变为手型指针

            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;

            pixiCrnMap.set(parseInt(deviceNo), sprite);
            objectsContainer2.addChild(sprite);
          })
          

          //视角居中
@@ -649,6 +741,87 @@
            }
          })
        },
        getCrnInfo() {
          let that = this
          //获取堆垛机数据
          $.ajax({
            url: baseUrl + "/console/latest/data/crn",
            headers: {'token': localStorage.getItem('token')},
            method: 'POST',
            success: function (res) {
              if (res.code === 200) {
                var crns = res.data;
                for (var i = 0; i < crns.length; i++) {
                  const id = parseInt(crns[i].crnId);
                  const sprite = pixiCrnMap.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 = getCrnStatusColor(status);
                  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 < that.map.length; r++) {
                      if (that.map[r].length > 0) {
                        const rowY = that.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 < that.map[rowIndex].length; c++) {
                    const cell = that.map[rowIndex][c];
                    if (cell && cell.type === 'crn') {
                      crnCount++;
                      if (crnCount === bay) {
                        targetCell = cell;
                        break;
                      }
                    }
                  }
                  if (!targetCell) {
                    for (let c = that.map[rowIndex].length - 1; c >= 0; c--) {
                      const cell = that.map[rowIndex][c];
                      if (cell && cell.type === 'crn') {
                        targetCell = cell;
                        break;
                      }
                    }
                  }
                  if (!targetCell) { continue; }

                  const targetX = targetCell.posX + (targetCell.width - sprite.width) / 2;

                  gsap.killTweensOf(sprite);
                  gsap.to(sprite, { x: targetX, duration: 0.5, ease: "power1.inOut" });
                }
              } else if (res.code === 403) {
                parent.location.href = baseUrl + "/login";
              } else {
                console.log(res.msg);
              }
            }
          });
        },
      }
    })

@@ -663,11 +836,21 @@
      return new PIXI.Sprite(texture);
    }

    function createTrackSprite(width, height) {
      let idx = width + "-" + height;
      let texture = pixiTrackMap.get(idx);
      if (texture == undefined) {
        texture = createTrackTexture(width, height);
        pixiTrackMap.set(idx, texture);
      }
      return new PIXI.Sprite(texture);
    }

    function getContainer(type, width, height) {
      let graphics = new PIXI.Graphics();
      let drawBorder = true;
      if (type == 'shelf') {
        graphics.beginFill(0x55aaff);
        graphics.beginFill(0xb6e2e2);
      } else if (type == 'devp') {
        graphics.beginFill(0x00ff7f);
        graphics.visible = true;
@@ -748,6 +931,56 @@
      return rt;
    }

    function createCrnTextureColoredDevice(deviceWidth, height, color) {
      const g = new PIXI.Graphics();
      const yTop = Math.round(height * 0.1);
      g.beginFill(0x999999);
      g.drawRect(2, yTop, 3, height - yTop - 2);
      g.drawRect(deviceWidth - 5, yTop, 3, height - yTop - 2);
      g.endFill();
      g.beginFill(0x999999);
      g.drawRect(0, yTop, deviceWidth, 3);
      g.endFill();
      const cabW = Math.round(deviceWidth * 0.68);
      const cabH = Math.round(height * 0.38);
      const cabX = Math.round((deviceWidth - cabW) / 2);
      const cabY = Math.round(height * 0.52 - cabH / 2);
      g.beginFill(color);
      g.drawRect(cabX, cabY, cabW, cabH);
      g.endFill();
      const winW = Math.round(cabW * 0.6);
      const winH = Math.round(cabH * 0.45);
      const winX = cabX + Math.round((cabW - winW) / 2);
      const winY = cabY + Math.round((cabH - winH) / 2);
      g.beginFill(0xd0e8ff);
      g.drawRect(winX, winY, winW, winH);
      g.endFill();
      const forkW = Math.round(deviceWidth * 0.8);
      const forkH = Math.max(2, Math.round(height * 0.08));
      const forkX = Math.round((deviceWidth - forkW) / 2);
      const forkY = cabY + cabH;
      g.beginFill(0x666666);
      g.drawRect(forkX, forkY, forkW, forkH);
      g.endFill();
      const rt = PIXI.RenderTexture.create({ width: deviceWidth, height: height });
      pixiApp.renderer.render(g, rt);
      return rt;
    }

    function updateCrnTextureColor(sprite, color) {
      const tex = createCrnTextureColoredDevice(sprite.width, sprite.height, color);
      sprite.texture = tex;
    }

    function getCrnStatusColor(status) {
      if (status === "machine-auto") { return 0x21BA45; }
      if (status === "machine-un-auto") { return 0xBBBBBB; }
      if (status === "machine-error") { return 0xDB2828; }
      if (status === "machine-pakin") { return 0x30bffc; }
      if (status === "machine-pakout") { return 0x97b400; }
      return 0xBBBBBB;
    }

    function getGraphics(color, width, height, x, y) {
      let graphics = new PIXI.Graphics();
      graphics.beginFill(color);
@@ -781,22 +1014,11 @@
          pixiStaMap.set(parseInt(siteId), sprite);
        }
      } else if (item.type == 'crn') {
        if (getDeviceNo(value) == -1) {
          sprite = new PIXI.Sprite(graphicsCrnTrack);
          sprite.zIndex = 0;
        } else {
          sprite = new PIXI.Sprite(graphicsCrn);
          const deviceNo = getDeviceNo(value);
          const taskNo = getTaskNo(value);
          const style = new PIXI.TextStyle({ fontFamily: 'Arial', fontSize: 12, fill: '#ffffff', stroke: '#000000', strokeThickness: 2 });
          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;
          pixiCrnMap.set(parseInt(deviceNo), sprite);
          sprite.zIndex = 1;
        sprite = createTrackSprite(item.width, item.height);
        sprite.zIndex = 0;

        if(getDeviceNo(value) > 0){
          crnList.push(item);
        }
      } else {
        return null;