#

Junjie

5 天以前 82c36e2b434fa7a1c16b0448aa4cf1483107f79c

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

@@ -84,16 +84,18 @@
    let pixiShuttleMoveAdvancePathList = [];
    let pixiStaMap = new Map();
    let pixiCrnMap = new Map();
    let pixiRgvMap = new Map();
    let pixiShelfMap = new Map();
    let pixiTrackMap = new Map();
    let pixiDevpTextureMap = new Map();
    let crnList = [];
    let rgvList = [];
    let objectsContainer;
    let objectsContainer2;
    let graphicsShelf;
    let graphicsDevp;
    let graphicsCrn;
    let graphicsCrnTrack;
    let graphicsRgvTrack;
    let graphicsRgv;
    let ws;

    var app = new Vue({
@@ -150,6 +152,7 @@
          this.consoleInterval = setInterval(() => {
            this.getCrnInfo() //获取堆垛机数据
            this.getSiteInfo() //获取输送站点数据
            this.getRgvInfo() //获取Rgv数据
          }, 1000)

        },
@@ -219,10 +222,8 @@
          pixiApp.loader.add('shuttle', '../static/images/sxcar.png');

          // 从Graphics对象创建一个纹理
          // graphicsShelf = pixiApp.renderer.generateTexture(getContainer('shelf'));
          // graphicsDevp = pixiApp.renderer.generateTexture(getContainer('devp'));
          // graphicsCrn = createCrnTexture(40,40);
          graphicsCrnTrack = createTrackTexture(25,25);
          graphicsRgvTrack = createTrackTexture(25,25);

          // 创建一个容器来管理大批量的显示对象
          objectsContainer = new PIXI.Container();
@@ -480,7 +481,28 @@
            pixiCrnMap.set(parseInt(deviceNo), sprite);
            objectsContainer2.addChild(sprite);
          })
          

          rgvList.forEach((item) => {
            if(graphicsRgv == null) {
              graphicsRgv = createRgvTexture(item.width * 0.9,item.height * 0.9);
            }
            let sprite = new PIXI.Sprite(graphicsRgv);
            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时变为手型指针
            pixiRgvMap.set(parseInt(deviceNo), sprite);
            objectsContainer2.addChild(sprite);
          })

          const b1 = objectsContainer.getLocalBounds();
          const b2 = objectsContainer2.getLocalBounds();
@@ -732,6 +754,81 @@
            }
          });
        },
        getRgvInfo() {
          let that = this
          //获取RGV数据
          $.ajax({
            url: baseUrl + "/console/latest/data/rgv",
            headers: {'token': localStorage.getItem('token')},
            method: 'POST',
            success: function (res) {
              if (res.code === 200) {
                const rgvs = res.data;
                for (let i = 0; i < rgvs.length; i++) {
                  const id = parseInt(rgvs[i].rgvNo, 10);
                  const sprite = pixiRgvMap.get(id);
                  if (!sprite) { continue; }

                  const taskNo = rgvs[i].taskNo;
                  if (sprite.textObj) {
                    if (taskNo != null && taskNo > 0) {
                      sprite.textObj.text = id + "(" + taskNo + ")";
                    } else {
                      sprite.textObj.text = String(id);
                    }
                  }

                  const statusColor = getRgvStatusColor(rgvs[i].rgvStatus);
                  updateRgvTextureColor(sprite, statusColor);

                  let trackSiteNo = parseInt(rgvs[i].trackSiteNo, 10);
                  if (!trackSiteNo || trackSiteNo <= 0) { continue; }

                  let 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;
                  for (let c = 0; c < that.map[rowIndex].length; c++) {
                    const cell = that.map[rowIndex][c];
                    if (!cell || cell.type !== 'rgv') { continue; }
                    const ts = getTrackSiteNo(cell.value);
                    if (ts === trackSiteNo) {
                      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 === 'rgv') {
                        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);
              }
            }
          });
        },
      }
    })

@@ -888,6 +985,73 @@
      return rt;
    }

    function createRgvTexture(width, height) {
      const g = new PIXI.Graphics();
      const bodyW = Math.round(width * 0.8);
      const bodyH = Math.round(height * 0.55);
      const bodyX = Math.round((width - bodyW) / 2);
      const bodyY = Math.round((height - bodyH) / 2);
      g.beginFill(0x245a9a);
      g.drawRect(bodyX, bodyY, bodyW, bodyH);
      g.endFill();
      const winW = Math.round(bodyW * 0.55);
      const winH = Math.round(bodyH * 0.45);
      const winX = bodyX + Math.round((bodyW - winW) / 2);
      const winY = bodyY + Math.round((bodyH - winH) / 2);
      g.beginFill(0xd0e8ff);
      g.drawRect(winX, winY, winW, winH);
      g.endFill();
      const wheelW = Math.max(2, Math.round(width * 0.12));
      const wheelH = Math.max(2, Math.round(height * 0.1));
      const wheelY = bodyY + bodyH;
      const wheelGap = Math.round((width - wheelW * 2) / 3);
      const wheelX1 = wheelGap;
      const wheelX2 = width - wheelGap - wheelW;
      g.beginFill(0x333333);
      g.drawRect(wheelX1, wheelY - Math.round(wheelH / 2), wheelW, wheelH);
      g.drawRect(wheelX2, wheelY - Math.round(wheelH / 2), wheelW, wheelH);
      g.endFill();
      const rt = PIXI.RenderTexture.create({ width: width, height: height });
      pixiApp.renderer.render(g, rt);
      return rt;
    }

    function createRgvTextureColoredDevice(width, height, color) {
      const g = new PIXI.Graphics();
      const bodyW = Math.round(width * 0.8);
      const bodyH = Math.round(height * 0.55);
      const bodyX = Math.round((width - bodyW) / 2);
      const bodyY = Math.round((height - bodyH) / 2);
      g.beginFill(color);
      g.drawRect(bodyX, bodyY, bodyW, bodyH);
      g.endFill();
      const winW = Math.round(bodyW * 0.55);
      const winH = Math.round(bodyH * 0.45);
      const winX = bodyX + Math.round((bodyW - winW) / 2);
      const winY = bodyY + Math.round((bodyH - winH) / 2);
      g.beginFill(0xd0e8ff);
      g.drawRect(winX, winY, winW, winH);
      g.endFill();
      const wheelW = Math.max(2, Math.round(width * 0.12));
      const wheelH = Math.max(2, Math.round(height * 0.1));
      const wheelY = bodyY + bodyH;
      const wheelGap = Math.round((width - wheelW * 2) / 3);
      const wheelX1 = wheelGap;
      const wheelX2 = width - wheelGap - wheelW;
      g.beginFill(0x333333);
      g.drawRect(wheelX1, wheelY - Math.round(wheelH / 2), wheelW, wheelH);
      g.drawRect(wheelX2, wheelY - Math.round(wheelH / 2), wheelW, wheelH);
      g.endFill();
      const rt = PIXI.RenderTexture.create({ width: width, height: height });
      pixiApp.renderer.render(g, rt);
      return rt;
    }

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

    function updateCrnTextureColor(sprite, color) {
      const tex = createCrnTextureColoredDevice(sprite.width, sprite.height, color);
      sprite.texture = tex;
@@ -900,6 +1064,15 @@
      if (status === "machine-pakin") { return 0x30bffc; }
      if (status === "machine-pakout") { return 0x97b400; }
      return 0xBBBBBB;
    }

    function getRgvStatusColor(status) {
      if (status === "idle") { return 0x21BA45; }
      if (status === "working") { return 0xffd60b; }
      if (status === "waiting") { return 0xffd60b; }
      if (status === "fetching") { return 0xffd60b; }
      if (status === "putting") { return 0xffd60b; }
      return 0xb8b8b8;
    }

    function getGraphics(color, width, height, x, y) {
@@ -942,6 +1115,13 @@
        if(getDeviceNo(value) > 0){
          crnList.push(item);
        }
      } else if (item.type == 'rgv') {
        sprite = createTrackSprite(item.width, item.height);
        sprite.zIndex = 0;

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