#

Junjie

5 天以前 82c36e2b434fa7a1c16b0448aa4cf1483107f79c

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

@@ -84,15 +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({
@@ -101,15 +104,12 @@
        map: [],
        currentLev: 1,
        floorList: [], //当前项目楼层
        currentLevShuttleList: [],//当前楼层四向穿梭车集合
        shuttleColorList: [],//四向穿梭车颜色集合
        drawer: false,
        drawerLocNo: false,
        drawerLocNoData: null,
        drawerLocDetls: [],
        mapFps: 0,
        currentLevStaList: [],//当前楼层站点list
        reloadSta: true,
        drawerSta: false,
        drawerStaData: null,
      },
@@ -151,6 +151,8 @@

          this.consoleInterval = setInterval(() => {
            this.getCrnInfo() //获取堆垛机数据
            this.getSiteInfo() //获取输送站点数据
            this.getRgvInfo() //获取Rgv数据
          }, 1000)

        },
@@ -198,7 +200,6 @@
        changeFloor(lev) {
          this.currentLev = lev
          this.currentLevShuttleList = []
          this.reloadSta = true
          this.getMap(lev)

          //清空预计路径
@@ -221,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();
@@ -288,29 +287,16 @@
          pixiApp.view.addEventListener('wheel', (event) => {
            event.stopPropagation();
            event.preventDefault();
            // 因为画布是充满视窗的，所以clientX等于mouse point在renderer上的x坐标
            const globalPos = [event.clientX, event.clientY];
            const delta = event.deltaY;
            const sx = event.clientX;
            const sy = event.clientY;
            const oldZoom = pixiApp.stage.scale.x;
            const delta = event.deltaY;
            let newZoom = oldZoom * 0.999 ** delta;

            // const oldStageMatrix = app.stage.localTransform.clone();
            // const oldStagePos = oldStageMatrix.applyInverse(pointerGlobalPos);
            const oldStagePos = globalPos;
            const dx = oldStagePos[0] * oldZoom - oldStagePos[0] * newZoom;
            const dy = oldStagePos[1] * oldZoom - oldStagePos[1] * newZoom;

            pixiApp.stage.setTransform(
              pixiApp.stage.position.x + dx,
              pixiApp.stage.position.y + dy,
              newZoom,
              newZoom,
              0,
              0,
              0,
              0,
              0
            );
            const worldX = (sx - pixiApp.stage.position.x) / oldZoom;
            const worldY = (sy - pixiApp.stage.position.y) / oldZoom;
            const newPosX = sx - worldX * newZoom;
            const newPosY = sy - worldY * newZoom;
            pixiApp.stage.setTransform(newPosX, newPosY, newZoom, newZoom, 0, 0, 0, 0, 0);

          });
          //*******************缩放画布*******************
@@ -495,12 +481,44 @@
            pixiCrnMap.set(parseInt(deviceNo), sprite);
            objectsContainer2.addChild(sprite);
          })
          

          //视角居中
          let containerWidth = (pixiApp.view.width - objectsContainer.width) / 2;
          let containerHeight = (pixiApp.view.height - objectsContainer.height) / 2;
          pixiApp.stage.position.set(containerWidth, containerHeight);
          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();
          const minX = Math.min(b1.x, b2.x);
          const minY = Math.min(b1.y, b2.y);
          const maxX = Math.max(b1.x + b1.width, b2.x + b2.width);
          const maxY = Math.max(b1.y + b1.height, b2.y + b2.height);
          const contentW = Math.max(0, maxX - minX);
          const contentH = Math.max(0, maxY - minY);
          const vw = pixiApp.view.width;
          const vh = pixiApp.view.height;
          let scale = Math.min(vw / contentW, vh / contentH) * 0.95;
          if (!isFinite(scale) || scale <= 0) { scale = 1; }
          const posX = (vw - contentW * scale) / 2 - minX * scale;
          const posY = (vh - contentH * scale) / 2 - minY * scale;
          pixiApp.stage.setTransform(posX, posY, scale, scale, 0, 0, 0, 0, 0);

          this.map = map;
        },
@@ -549,34 +567,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");
        },
@@ -607,118 +597,49 @@
            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;//动画执行完成
              }
            });
          }
        },
        getSiteInfo() {
          //获取输送站点数据
          this.sendWs(JSON.stringify({
            "url": "/console/latest/data/site",
            "data": {}
          }))
        },
        setSiteInfo(res) {
          // var test = "{\"msg\":\"操作成功\",\"code\":200,\"data\":[{\"siteId\":\"300\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"301\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"302\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"303\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"304\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"305\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"306\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"307\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"308\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"309\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"310\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"311\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"312\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"313\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"314\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"315\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"316\",\"siteStatus\":\"site-auto-run\",\"workNo\":0},{\"siteId\":\"317\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"318\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"319\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"320\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"321\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"322\",\"siteStatus\":\"site-auto-run\",\"workNo\":0},{\"siteId\":\"323\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"324\",\"siteStatus\":\"site-auto-run\",\"workNo\":0},{\"siteId\":\"325\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"326\",\"siteStatus\":\"site-auto-id\",\"workNo\":5451},{\"siteId\":\"327\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"200\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"328\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"201\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"329\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"202\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"330\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"203\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"331\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"204\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"332\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"205\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"333\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"334\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"335\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"336\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"337\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"338\",\"siteStatus\":\"site-auto-run\",\"workNo\":0},{\"siteId\":\"339\",\"siteStatus\":\"site-auto-run-id\",\"workNo\":5447},{\"siteId\":\"340\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"341\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"342\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"343\",\"siteStatus\":\"site-auto-run\",\"workNo\":0},{\"siteId\":\"344\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"345\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"346\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"100\",\"siteStatus\":\"site-auto-run-id\",\"workNo\":8851},{\"siteId\":\"101\",\"siteStatus\":\"site-auto-run-id\",\"workNo\":8855},{\"siteId\":\"102\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"103\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"104\",\"siteStatus\":\"site-auto-run\",\"workNo\":0},{\"siteId\":\"105\",\"siteStatus\":\"site-auto\",\"workNo\":0}]}";
          // res = JSON.parse(test)
          //获取输送站点数据
          if (res.code === 200) {
            var sites = res.data;
            if (this.reloadSta && pixiStaMap.size > 0) {
              //重新渲染所有输送站点
              this.currentLevStaList = sites;
              this.reloadSta = false;
              sites.forEach((item, index) => {
                let sta = pixiStaMap.get(parseInt(item.siteId));
                if (sta != undefined) {
                  if (item.workNo > 0) {
                    sta.textObj.text = item.siteId + "(" + item.workNo + ")";
                  }

                  //创建遮罩层
                  if (item.siteStatus == "site-auto") {
                    //自动状态，移除遮罩层
                    if (sta.statusObj != null) {
                      objectsContainer.removeChild(sta.statusObj)
                      sta.statusObj = null;
                    }
                  } else if (item.siteStatus == "site-auto-run" || item.siteStatus == "site-auto-run-id") {
                    //自动有物
                    let graphics = getGraphics(0xfa51f6, width, height, sta.x, sta.y);
                    graphics.addChild(sta.textObj);//继承文字信息
                    sta.statusObj = graphics;
                    objectsContainer.addChild(graphics);
                  } else if (item.siteStatus == "site-unauto") {
                    //非自动
                    let graphics = getGraphics(0xb8b8b8, width, height, sta.x, sta.y);
                    graphics.addChild(sta.textObj);//继承文字信息
                    sta.statusObj = graphics;
                    objectsContainer.addChild(graphics);
                  }
                }
              });
            } else {
              //检测不相同站点进行局部更新
              this.currentLevStaList.forEach((item, index) => {
                let result = this.checkStaInListDiff(item, sites);
                if (!result) {
                  //需要更新
                  let sta = pixiStaMap.get(parseInt(item.siteId));
                  if (item.workNo > 0) {
                    sta.textObj.text = item.siteId + "(" + item.workNo + ")";
                  } else {
                    sta.textObj.text = item.siteId;
                  }

                  //创建遮罩层
                  if (item.siteStatus == "site-auto") {
                    //自动状态，移除遮罩层
                    if (sta.statusObj != null) {
                      objectsContainer.removeChild(sta.statusObj)
                      sta.statusObj = null;
                    }
                  } else if (item.siteStatus == "site-auto-run") {
                    //自动有物
                    let graphics = getGraphics(0xfa51f6, width, height, sta.x, sta.y);
                    graphics.addChild(sta.textObj);//继承文字信息
                    sta.statusObj = graphics;
                    objectsContainer.addChild(graphics);
                  } else if (item.siteStatus == "site-unauto") {
                    //非自动
                    let graphics = getGraphics(0xb8b8b8, width, height, sta.x, sta.y);
                    graphics.addChild(sta.textObj);//继承文字信息
                    sta.statusObj = graphics;
                    objectsContainer.addChild(graphics);
                  }
                }
              });
            }
          } else if (res.code === 403) {
            parent.location.href = baseUrl + "/login";
          } else {
            console.log(res.msg);
          let sites = Array.isArray(res) ? res : (res && res.code === 200 ? res.data : null);
          if (res && !Array.isArray(res)) {
            if (res.code === 403) { parent.location.href = baseUrl + "/login"; return; }
            if (res.code !== 200) { console.log(res.msg); return; }
          }
          if (!sites) { return; }
          this.currentLevStaList = sites;
          sites.forEach((item) => {
            let id = item.siteId != null ? item.siteId : item.stationId;
            let status = item.siteStatus != null ? item.siteStatus : item.stationStatus;
            let workNo = item.workNo != null ? item.workNo : item.taskNo;
            if (id == null) { return; }
            let sta = pixiStaMap.get(parseInt(id));
            if (sta == undefined) { return; }
            if (workNo != null && workNo > 0) {
              sta.textObj.text = id + "(" + workNo + ")";
            } else {
              sta.textObj.text = String(id);
            }
            if (sta.statusObj) {
              objectsContainer.removeChild(sta.statusObj);
              sta.statusObj = null;
              if (sta.textObj.parent !== sta) {
                sta.addChild(sta.textObj);
                sta.textObj.position.set(sta.width / 2, sta.height / 2);
              }
            }

            if (status === "site-auto") {
              updateColor(sta, 0x78ff81);
            } else if (status === "site-auto-run" || status === "site-auto-run-id") {
              updateColor(sta, 0xfa51f6);
            } else if (status === "site-unauto") {
              updateColor(sta, 0xb8b8b8);
            } else if (status === "machine-pakin") {
              updateColor(sta, 0x30bffc);
            } else if (status === "machine-pakout") {
              updateColor(sta, 0x97b400);
            } else {
              updateColor(sta, 0xb8b8b8);
            }
          });
        },
        openDrawerSta(data) {
          let that = this
@@ -764,17 +685,8 @@
                  }

                  const status = crns[i].crnStatus;
                  if (status === "machine-auto") {
                    sprite.tint = 0x21BA45;
                  } else if (status === "machine-un-auto") {
                    sprite.tint = 0xBBBBBB;
                  } else if (status === "machine-error") {
                    sprite.tint = 0xDB2828;
                  } else if (status === "machine-p-move") {
                    sprite.tint = 0xF2C037;
                  } else {
                    sprite.tint = 0xFFFFFF;
                  }
                  const statusColor = getCrnStatusColor(status);
                  updateCrnTextureColor(sprite, statusColor);

                  let bay = parseInt(crns[i].bay, 10);
                  if (isNaN(bay) || bay < 1 || bay === -2) {
@@ -831,6 +743,92 @@
            }
          });
        },
        getSiteInfo() {
          let that = this;
          $.ajax({
            url: baseUrl + "/console/latest/data/station",
            headers: {'token': localStorage.getItem('token')},
            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);
              }
            }
          });
        },
      }
    })

@@ -859,7 +857,7 @@
      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;
@@ -940,6 +938,143 @@
      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 createDevpTextureColoredRect(width, height, color) {
      const g = new PIXI.Graphics();
      g.beginFill(color);
      g.lineStyle(1, 0xffffff, 1);
      g.drawRect(0, 0, width, height);
      g.endFill();
      const rt = PIXI.RenderTexture.create({ width: width, height: height });
      pixiApp.renderer.render(g, rt);
      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;
    }

    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 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) {
      let graphics = new PIXI.Graphics();
      graphics.beginFill(color);
@@ -959,6 +1094,7 @@
        const graphics = getContainer('devp', item.width, item.height);
        const texture = pixiApp.renderer.generateTexture(graphics);
        sprite = new PIXI.Sprite(texture);
        sprite._kind = 'devp';
        let siteId = getStationId(value);
        if (siteId === -1) {
          siteId = item.data;
@@ -979,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;
      }
@@ -998,9 +1141,21 @@
     * 更新颜色
     */
    function updateColor(sprite, color) {
      // graphics.clear()
      // graphics.beginFill(color);
      // graphics.drawRect(0, 0, width, height);
      if (sprite && sprite._kind === 'devp') {
        const key = sprite.width + '-' + sprite.height + '-' + color;
        let texture = pixiDevpTextureMap.get(key);
        if (!texture) {
          texture = createDevpTextureColoredRect(Math.round(sprite.width), Math.round(sprite.height), color);
          pixiDevpTextureMap.set(key, texture);
        }
        const textObj = sprite.textObj;
        sprite.texture = texture;
        if (textObj) {
          if (textObj.parent !== sprite) { sprite.addChild(textObj); }
          textObj.position.set(sprite.width / 2, sprite.height / 2);
        }
        return;
      }
      sprite.tint = color;
    }