#

Junjie

5 天以前 46cf663385444c13b8fa8949d427d2782d26734d

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

@@ -79,21 +79,20 @@
  <script>
    let pixiApp;
    let pixiStageList = [];
    let pixiShuttleMap = new Map();
    let pixiShuttleMoveAdvancePathMap = new Map();
    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 +149,7 @@
          this.consoleInterval = setInterval(() => {
            this.getCrnInfo() //获取堆垛机数据
            this.getSiteInfo() //获取输送站点数据
            this.getRgvInfo() //获取Rgv数据
          }, 1000)

        },
@@ -196,13 +196,15 @@
        },
        changeFloor(lev) {
          this.currentLev = lev
          this.currentLevShuttleList = []
          this.getMap(lev)

          //清空预计路径
          objectsContainer.removeChildren();
          objectsContainer2.removeChildren();
          pixiShuttleMoveAdvancePathMap = new Map();
          pixiShuttleMoveAdvancePathList = []
          crnList = []
          rgvList = []
          pixiCrnMap = new Map()
          pixiRgvMap = new Map()
          pixiStaMap = new Map()
          pixiStageList = []
          this.getMap(lev)
        },
        createMap() {
          //Create a Pixi Application
@@ -219,10 +221,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();
@@ -330,7 +330,7 @@
              }
            }
          })

          
          map.forEach((item, index) => {
            for(let idx = 0;idx < item.length;idx++){
              let val = item[idx]
@@ -371,7 +371,20 @@
            }
          })

          const rowHeightScaled = bayHeightList.map(h => (h != null && h !== -1) ? (h / 8) : (height));
          const rowHeightScaled = [];
          for (let r = 0; r < map.length; r++) {
            const h = bayHeightList[r];
            if (h != null && h !== -1) {
              rowHeightScaled[r] = h / 8;
            } else {
              let fallback = 0;
              for (let c = 0; c < map[r].length; c++) {
                const v = map[r][c];
                if (v && v.type !== 'merge' && v.height != null && v.height > 0) { fallback = v.height; break; }
              }
              rowHeightScaled[r] = fallback > 0 ? fallback : 25;
            }
          }
          let yOffsets = [];
          let yCursor = 0;
          for (let r = 0; r < map.length; r++) {
@@ -480,7 +493,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();
@@ -545,34 +579,6 @@
            locSts: this.map[x][y].locSts, row: this.map[x][y].row, bay: this.map[x][y].bay, lev: this.currentLev
          };
        },
        checkStaInListDiff(sta, list) {
          //检测站点是否在集合中有变动
          if (list.length == 0) {
            return false;//集合为空
          }

          let tmp = null;
          for (var i = 0; i < list.length; i++) {
            if (sta.siteId == list[i].siteId) {
              tmp = list[i];//找到相同站点
              break
            }
          }

          if (tmp == null) {
            return false;//没有找到相同站点
          }

          if (sta.siteStatus != tmp.siteStatus) {
            return false;//站点状态不相同
          }

          if (sta.workNo != tmp.workNo) {
            return false;//站点工作号不相同
          }

          return true;//无变化
        },
        webSocketOnOpen(e) {
          console.log("open");
        },
@@ -601,31 +607,6 @@
        sendWs(message) {
          if (ws.readyState == WebSocket.OPEN) {
            ws.send(message)
          }
        },
        colorRGB() {
          //随机颜色
          const r = Math.floor(Math.random() * 256);
          const g = Math.floor(Math.random() * 256);
          const b = Math.floor(Math.random() * 256);
          return `rgb(${r},${g},${b})`;
        },
        updateShuttleXY(item) {
          const shuttle = pixiShuttleMap.get(item.shuttleNo);
          if (shuttle.updateMoveStatus) {//动画执行完成才可继续执行动画
            shuttle.updateMoveStatus = false;//动画执行中
            // 计算两点之间的距离1
            const distance = Math.sqrt(Math.pow((item.wcsPoint.x * width) - shuttle.x, 2) + Math.pow((item.wcsPoint.y * height) - shuttle.y, 2));
            gsap.killTweensOf(shuttle); // 杀死所有针对".class"的动画
            gsap.to(shuttle, {
              x: (item.wcsPoint.y - 0) * width, // 目标位置
              y: (item.wcsPoint.x - 1) * height, // 目标位置
              duration: 0.2, // 动画持续时间（秒）
              ease: "power1.inOut", // 缓动类型
              onComplete: () => {
                shuttle.updateMoveStatus = true;//动画执行完成
              }
            });
          }
        },
        setSiteInfo(res) {
@@ -657,8 +638,6 @@
              }
            }

            console.log(status);
            
            if (status === "site-auto") {
              updateColor(sta, 0x78ff81);
            } else if (status === "site-auto-run" || status === "site-auto-run-id") {
@@ -784,6 +763,81 @@
            method: 'POST',
            success: function (res) {
              that.setSiteInfo(res);
            }
          });
        },
        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);
              }
            }
          });
        },
@@ -943,6 +997,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;
@@ -955,6 +1076,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) {
@@ -997,6 +1127,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;
      }