#

Junjie

5 天以前 8412259640cb8a3bb63dc187563a1a3aee936a64

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

@@ -55,16 +55,6 @@
      </div>
    </el-drawer>

    <el-drawer title="小车信息" :visible.sync="drawerShuttle" :with-header="true" :modal="false">
      <div v-if="drawerShuttleData!=null">
        <div style="margin: 10px;">
          <div style="margin-top: 5px;">小车：{{drawerShuttleData.shuttleNo}}</div>
          <div style="margin-top: 5px;">工作号：{{drawerShuttleData.wrkNo}}</div>
          <div style="margin-top: 5px;">状态：{{drawerShuttleData}}</div>
        </div>
      </div>
    </el-drawer>

    <el-drawer title="站点信息" :visible.sync="drawerSta" :with-header="true" :modal="false">
      <div v-if="drawerStaData!=null">
        <div style="margin: 10px;">
@@ -85,20 +75,8 @@
      </div>
    </el-drawer>

    <el-drawer title="提升机信息" :visible.sync="drawerLift" :with-header="true" :modal="false">
      <div v-if="drawerLiftData!=null">
        <div style="margin: 10px;">
          <div style="margin-top: 5px;">提升机：{{liftList[drawerLiftData-1].liftNo}}</div>
          <div style="margin-top: 5px;">工作号：{{liftList[drawerLiftData-1].taskNo}}</div>
          <div style="margin-top: 5px;">状态：{{liftList[drawerLiftData-1]}}</div>
        </div>
      </div>
    </el-drawer>

  </div>
  <script>
    let width = 25;
    let height = 25;
    let pixiApp;
    let pixiStageList = [];
    let pixiShuttleMap = new Map();
@@ -106,6 +84,9 @@
    let pixiShuttleMoveAdvancePathList = [];
    let pixiStaMap = new Map();
    let pixiCrnMap = new Map();
    let pixiShelfMap = new Map();
    let pixiTrackMap = new Map();
    let crnList = [];
    let objectsContainer;
    let objectsContainer2;
    let graphicsShelf;
@@ -126,17 +107,11 @@
        drawerLocNo: false,
        drawerLocNoData: null,
        drawerLocDetls: [],
        reloadMap: true,
        mapFps: 0,
        drawerShuttle: false,
        drawerShuttleData: null,
        currentLevStaList: [],//当前楼层站点list
        reloadSta: true,
        drawerSta: false,
        drawerStaData: null,
        drawerLift: false,
        drawerLiftData: null,
        liftList: [],
      },
      mounted() {
        this.init()
@@ -174,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() {
@@ -227,7 +198,6 @@
        changeFloor(lev) {
          this.currentLev = lev
          this.currentLevShuttleList = []
          this.reloadMap = true
          this.reloadSta = true
          this.getMap(lev)

@@ -251,10 +221,10 @@
          pixiApp.loader.add('shuttle', '../static/images/sxcar.png');

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

          // 创建一个容器来管理大批量的显示对象
          objectsContainer = new PIXI.Container();
@@ -263,6 +233,12 @@
          // 创建一个容器来管理大批量的显示对象
          objectsContainer2 = new PIXI.Container();
          pixiApp.stage.addChild(objectsContainer2);

          pixiApp.stage.sortableChildren = true;
          objectsContainer.sortableChildren = true;
          objectsContainer2.sortableChildren = true;
          objectsContainer.zIndex = 10;
          objectsContainer2.zIndex = 20;

          //*******************拖动画布*******************
          let stageOriginalPos;
@@ -352,114 +328,219 @@

        },
        createMapData(map) {
          if (this.reloadMap) {
            this.reloadMap = false
            pixiStageList = [map.length]//初始化列表
            pixiStaMap = new Map();//重置
            objectsContainer.removeChildren()
            map.forEach((item, index) => {
              pixiStageList[index] = [item.length]
              for (let idx = 0; idx < item.length; idx++) {
                let val = item[idx]
          pixiStageList = [map.length]//初始化列表
          pixiStaMap = new Map();//重置
          objectsContainer.removeChildren()

                // 跳过合并单元格的占位符
                if (val.type === 'merge') {
                  continue;
                }

                if (val.type == undefined || val.type === 'none') {
                  continue;
                }

                // 计算合并单元格的实际宽高
                let cellWidth = val.colSpan ? val.colSpan * width : width;
                let cellHeight = val.rowSpan ? val.rowSpan * height : height;

                let sprite = getSpriteWithSize(val.value, idx * width, index * height, cellWidth, cellHeight, val, (e) => {
                  // if (val.value == 4) {
                  //   //站点
                  //   this.openDrawerSta(val)
                  // } else if (val.value == 67) {
                  //   //提升机
                  //   this.openDrawerLift(val)
                  // } else {
                  //   //库位
                  //   this.rightEvent(index, idx, e);
                  //   updateColor(sprite, 0x9900ff);
                  // }
                });

                if (sprite == null) {
                  continue;
                }

                // if (val.value == 4) {
                //   // 创建文本对象
                //   const style = new PIXI.TextStyle({
                //     fontFamily: 'Arial',
                //     fontSize: 10,
                //     fill: '#000000',
                //   });
                //   const text = new PIXI.Text(val.data, style);
                //   text.anchor.set(0.5); // 设置文本锚点为中心点
                //   text.position.set(sprite.width / 2, sprite.height / 2); // 将文本位置设置为Graphics对象的中心点
                //   // 将文本对象添加到Graphics对象中
                //   sprite.addChild(text);
                //   sprite.textObj = text;
                //   pixiStaMap.set(parseInt(val.data), sprite);//站点数据添加到map中
                // }else if (val.value == 67) {
                //   // 创建提升机文本对象
                //   const style = new PIXI.TextStyle({
                //     fontFamily: 'Arial',
                //     fontSize: 10,
                //     fill: '#000000',
                //   });
                //   const text = new PIXI.Text(val.data, style);
                //   text.anchor.set(0.5); // 设置文本锚点为中心点
                //   text.position.set(sprite.width / 2, sprite.height / 2); // 将文本位置设置为Graphics对象的中心点
                //   // 将文本对象添加到Graphics对象中
                //   sprite.addChild(text);
                //   sprite.textObj = text;
                //   pixiStaMap.set(parseInt(val.data), sprite);//站点数据添加到map中
                // }

                objectsContainer.addChild(sprite);
                pixiStageList[index][idx] = sprite
          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];
              }
            }
          })

            //视角居中
            let containerWidth = (pixiApp.view.width - objectsContainer.width) / 2;
            let containerHeight = (pixiApp.view.height - objectsContainer.height) / 2;
            pixiApp.stage.position.set(containerWidth, containerHeight);
          } else {
            let diff = this.findDiffList(this.map, map);
            diff.forEach((item, index) => {
              //获取old元素
              let oldSprite = pixiStageList[item.x][item.y]
              if (!oldSprite) return; // 跳过不存在的元素
          map.forEach((item, index) => {
            for(let idx = 0;idx < item.length;idx++){
              let val = item[idx]
              let cellWidth = val.cellWidth / 40;
              let cellHeight = val.cellHeight / 8;

              //移除old元素
              objectsContainer.removeChild(oldSprite);
              val.width = cellWidth;
              val.height = cellHeight;

              // 计算合并单元格的实际宽高
              let cellWidth = item.colSpan ? item.colSpan * width : width;
              let cellHeight = item.rowSpan ? item.rowSpan * height : height;
              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 sprite = getSpriteWithSize(item.data, item.y * width, item.x * height, cellWidth, cellHeight, item, (e) => {
                this.rightEvent(item.x, item.y, e);
                updateColor(sprite, 0x9900ff);
              });
              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;
              }
            }
          })

              //添加元素
              objectsContainer.addChild(sprite);

              //保存新元素
              pixiStageList[item.x][item.y] = sprite
            });
          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;
            }
          })

          map.forEach((item, index) => {
            pixiStageList[index] = [item.length]
            for (let idx = 0; idx < item.length; idx++) {
              let val = item[idx]

              // 跳过合并单元格的占位符
              if (val.type === 'merge') {
                continue;
              }

              if (val.type == undefined || val.type === 'none') {
                continue;
              }

              let sprite = getSprite(val, (e) => {
                // if (val.value == 4) {
                //   //站点
                //   this.openDrawerSta(val)
                // } else {
                //   //库位
                //   this.rightEvent(index, idx, e);
                //   updateColor(sprite, 0x9900ff);
                // }
              });

              if (sprite == null) {
                continue;
              }

              objectsContainer.addChild(sprite);
              pixiStageList[index][idx] = sprite
            }
          });

          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);
          })
          

          //视角居中
          let containerWidth = (pixiApp.view.width - objectsContainer.width) / 2;
          let containerHeight = (pixiApp.view.height - objectsContainer.height) / 2;
          pixiApp.stage.position.set(containerWidth, containerHeight);

          this.map = map;
        },
        initWidth(map) {
          let maxRow = map.length;
          let maxBay = map[0].length;

          let bayWidthList = [];
          for(let bay = 0;bay < maxBay;bay++){
            let bayWidth = -1;
            for(let row = 0;row < maxRow;row++){
              let val = map[row][bay];
              if (val.cellWidth == undefined || val.cellWidth === '') {
                continue;
              }
              bayWidth = Math.max(bayWidth, val.cellWidth);
              break;
            }
            bayWidthList.push(bayWidth);
          }
          return bayWidthList;
        },
        initHeight(map) {
          let maxRow = map.length;
          let maxBay = map[0].length;

          let bayHeightList = [];
          for(let row = 0;row < maxRow;row++){
            let bayHeight = -1;
            for(let bay = 0;bay < maxBay;bay++){
              let val = map[row][bay];
              if (val.cellHeight == undefined || val.cellHeight === '') {
                continue;
              }
              bayHeight = Math.max(bayHeight, val.cellHeight);
              break;
            }
            bayHeightList.push(bayHeight);
          }
          return bayHeightList;
        },
        rightEvent(x, y, e) {
          this.drawerLocNo = true
@@ -467,76 +548,6 @@
            x: x, y: y, z: this.currentLev, locNo: this.map[x][y].locNo,
            locSts: this.map[x][y].locSts, row: this.map[x][y].row, bay: this.map[x][y].bay, lev: this.currentLev
          };
        },
        findDiffList(arr1, arr2) {
          let diff = []
          arr1.forEach((item, index) => {
            item.forEach((val, idx) => {
              if (val.value != arr2[index][idx].value) {
                diff.push({
                  x: index,
                  y: idx,
                  data: arr2[index][idx].value,
                  originData: val.value,
                  locSts: val.locSts
                })
              }
            })
          })

          return diff;
        },
        findShuttleDiffList(list1, list2) {
          //检测集合1里面的小车是否在集合2中有变动
          if (list1.length == 0) {
            return false;//集合为空
          }
          if (list1.length != list2.length) {
            return false;//两个集合长度不一致
          }

          let flag = false;
          list1.forEach((item, index) => {
            for (var i = 0; i < list2.length; i++) {
              if (item.shuttleNo == list2[i].shuttleNo) {
                flag = true;
                break;
              }
            }
          });

          return flag;
        },
        findShuttlePathDiffList(list1, list2) {
          //检测集合1里面的小车预计路径是否在集合2中有变动
          if (list1.length == 0) {
            return false;//集合为空
          }
          if (list1.length != list2.length) {
            return false;//两个集合长度不一致
          }

          for (var index = 0; index < list1.length; index++) {
            let item = list1[index];
            for (var i = 0; i < list2.length; i++) {
              if (item.shuttleNo != list2[i].shuttleNo) {
                continue;//找不到小车号
              }

              if (item.moveAdvancePath == null) {
                item.moveAdvancePath = [];
              }

              if (list2[i].moveAdvancePath == null) {
                list2[i].moveAdvancePath = [];
              }

              if (!(item.moveAdvancePath.length == list2[i].moveAdvancePath.length)) {
                return false;//小车预计路径长度不一致
              }
            }
          }
          return true;
        },
        checkStaInListDiff(sta, list) {
          //检测站点是否在集合中有变动
@@ -730,111 +741,118 @@
            }
          })
        },
        openDrawerLift(data) {
          this.drawerLift = true;
          this.drawerLiftData = parseInt(data.data)
        },
        getLiftStateInfo() {
          // 提升机信息表获取
          this.sendWs(JSON.stringify({
            "url": "/lift/table/lift/state",
            "data": {}
          }))
        },
        setLiftStateInfo(res) {
          // 提升机信息表获取
          if (res.code == 200) {
            this.liftList = res.data
          }
        },
        addMoveAdvancePath(moveAdvancePath, shuttleNo) {//添加预计路径
          let that = this;
          moveAdvancePath.forEach((path, idx) => {
            let locNo = this.map[path.x, path.y];
            if (!pixiShuttleMoveAdvancePathMap.has(locNo)) {
              let graphics = getGraphics(0x9966ff, width, height, path.y * width, (path.x - 1) * height);
              let shuttleNos = [shuttleNo];
              // 创建文本对象
              const style = new PIXI.TextStyle({
                fontFamily: 'Arial',
                fontSize: 10,
                fill: '#000000',
              });
              const text = new PIXI.Text(JSON.stringify(shuttleNos), style);
              text.anchor.set(0.5); // 设置文本锚点为中心点
              text.position.set(graphics.width / 2, graphics.height / 2); // 将文本位置设置为Graphics对象的中心点
              // 将文本对象添加到Graphics对象中
              graphics.addChild(text);
              graphics.textObj = text;
              objectsContainer2.addChild(graphics)
              pixiShuttleMoveAdvancePathMap.set(locNo, {
                path: path,
                sprite: graphics,
                textObj: text,
                shuttleNos: shuttleNos
              })
        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; }

              if (pixiShuttleMoveAdvancePathList[shuttleNo] == null) {
                let locNos = new Set()
                locNos.add(locNo);
                pixiShuttleMoveAdvancePathList[shuttleNo] = locNos;
                  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 {
                pixiShuttleMoveAdvancePathList[shuttleNo].add(locNo);
              }
            } else {
              let pathMap = pixiShuttleMoveAdvancePathMap.get(locNo)
              let shuttleNos = pathMap.shuttleNos;
              shuttleNos.push(shuttleNo);
              pathMap.textObj.text = JSON.stringify(shuttleNos);
              pixiShuttleMoveAdvancePathMap.set(locNo, pathMap);
              if (pixiShuttleMoveAdvancePathList[shuttleNo] == null) {
                let locNos = new Set()
                locNos.add(locNo);
                pixiShuttleMoveAdvancePathList[shuttleNo] = locNos;
              } else {
                pixiShuttleMoveAdvancePathList[shuttleNo].add(locNo);
                console.log(res.msg);
              }
            }
          });
        },
        removeMoveAdvancePath(shuttleNo) {//删除预计路径
          let locNos = pixiShuttleMoveAdvancePathList[shuttleNo];
          if (locNos != null) {
            locNos.forEach((locNo, index) => {
              let pathMap = pixiShuttleMoveAdvancePathMap.get(locNo);
              if (pathMap != null) {
                let shuttleNos = pathMap.shuttleNos;
                let shuttleNosNew = [];
                shuttleNos.forEach((shuttle, idx) => {
                  if (shuttle != shuttleNo) {
                    shuttleNosNew.push(shuttle);
                  }
                });

                if (shuttleNosNew.length === 0) {
                  //预计路径没有小车，直接删除路径
                  objectsContainer2.removeChild(pathMap.sprite);
                  pixiShuttleMoveAdvancePathMap.delete(locNo)
                } else {
                  //预计路径存在其他小车，更新文字信息
                  pathMap.textObj.text = JSON.stringify(shuttleNosNew);
                  pathMap.shuttleNos = shuttleNosNew;
                  pixiShuttleMoveAdvancePathMap.set(locNo, pathMap);
                }
              }
            })
          }
        },
      }
    })

    function getContainer(type) {
    function createShelfSprite(width, height) {
      let idx = width + "-" + height;
      let texture = pixiShelfMap.get(idx);
      if (texture == undefined) {
        let graphics = getContainer('shelf', width, height);
        texture = pixiApp.renderer.generateTexture(graphics);
        pixiShelfMap.set(idx, texture);
      }
      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(0xffff00);
        graphics.beginFill(0x00ff7f);
        graphics.visible = true;
      } else if (type == 'crn') {
        graphics.beginFill(0xaaffff);
@@ -848,7 +866,7 @@
      return graphics;
    }

    function createTrackTexture() {
    function createTrackTexture(width, height) {
      const g = new PIXI.Graphics();
      const t = Math.max(2, Math.round(height * 0.08));
      const gap = Math.round(height * 0.30);
@@ -875,21 +893,23 @@
      return rt;
    }

    function createCrnTexture() {
    function createCrnTexture(width, height) {
      const g = new PIXI.Graphics();
      const yTop = Math.round(height * 0.1);
      let deviceWidth  = width * 2;

      g.beginFill(0x999999);
      g.drawRect(2, yTop, 3, height - yTop - 2);
      g.drawRect(width - 5, yTop, 3, height - yTop - 2);
      g.drawRect(deviceWidth - 5, yTop, 3, height - yTop - 2);
      g.endFill();
      g.beginFill(0x999999);
      g.drawRect(0, yTop, width, 3);
      g.drawRect(0, yTop, deviceWidth, 3);
      g.endFill();
      const cabW = Math.round(width * 0.42);
      const cabW = Math.round(deviceWidth * 0.68);
      const cabH = Math.round(height * 0.38);
      const cabX = Math.round((width - cabW) / 2);
      const cabX = Math.round((deviceWidth - cabW) / 2);
      const cabY = Math.round(height * 0.52 - cabH / 2);
      g.beginFill(0x3a78c2);
      g.beginFill(0x245a9a);
      g.drawRect(cabX, cabY, cabW, cabH);
      g.endFill();
      const winW = Math.round(cabW * 0.6);
@@ -899,45 +919,66 @@
      g.beginFill(0xd0e8ff);
      g.drawRect(winX, winY, winW, winH);
      g.endFill();
      const forkW = Math.round(width * 0.5);
      const forkW = Math.round(deviceWidth * 0.8);
      const forkH = Math.max(2, Math.round(height * 0.08));
      const forkX = Math.round((width - forkW) / 2);
      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: width, height: height });
      const rt = PIXI.RenderTexture.create({ width: deviceWidth, height: height });
      pixiApp.renderer.render(g, rt);
      return rt;
    }

    function getContainerWithSize(value, w, h) {
      let graphics = new PIXI.Graphics();
      if (value === 0) {
        graphics.beginFill(0x55aaff);
      } else if (value === 3) {//母轨道
        graphics.beginFill(0x00ff7f);
        graphics.visible = true;
      } else if (value === 4) {//站点
        graphics.beginFill(0xffff00);
        graphics.visible = true;
      } else if (value === 5) {//充电桩
        graphics.beginFill(0xffaa7f);
        graphics.visible = true;
      } else if (value === 9) {//轨迹
        graphics.beginFill(0xff0000);
      } else if (value === 67) {//提升机
        graphics.beginFill(0xaaffff);
      } else if (value === -999) {//路径锁定
        graphics.beginFill(0xf83333);
      } else if (value === 1000) {//满库位
        graphics.beginFill(0xf83333);
      }
      graphics.lineStyle(1, 0xffffff, 1);
      graphics.drawRect(0, 0, w, h);
      graphics.endFill();
    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;
    }

      return graphics;
    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) {
@@ -950,59 +991,42 @@
      return graphics;
    }

    function getSprite(value, x, y, item, pointerDownEvent) {
    function getSprite(item, pointerDownEvent) {
      let sprite;
      console.log(item.type);
      let value = item.value;
      if (item.type == 'shelf') {
        sprite = new PIXI.Sprite(graphicsShelf);
        sprite = createShelfSprite(item.width, item.height);
      } else if (item.type == 'devp') {
        sprite = new PIXI.Sprite(graphicsDevp);
        const graphics = getContainer('devp', item.width, item.height);
        const texture = pixiApp.renderer.generateTexture(graphics);
        sprite = new PIXI.Sprite(texture);
        let siteId = getStationId(value);
        if (siteId === -1) {
          siteId = item.data;
        }
        const style = new PIXI.TextStyle({ fontFamily: 'Arial', fontSize: 10, fill: '#ffffff', stroke: '#000000', strokeThickness: 2 });
        const text = new PIXI.Text(String(siteId), style);
        text.anchor.set(0.5);
        text.position.set(sprite.width / 2, sprite.height / 2);
        sprite.addChild(text);
        sprite.textObj = text;
        if (siteId != null && siteId !== -1) {
          pixiStaMap.set(parseInt(siteId), sprite);
        }
      } else if (item.type == 'crn') {
        if (getDeviceNo(value) == -1) {
          sprite = new PIXI.Sprite(graphicsCrnTrack);
        } else {
          sprite = new PIXI.Sprite(graphicsCrn);
          const deviceNo = getDeviceNo(value);
          const taskNo = getTaskNo(value);
          const style = new PIXI.TextStyle({ fontFamily: 'Arial', fontSize: 10, fill: '#000000' });
          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 = createTrackSprite(item.width, item.height);
        sprite.zIndex = 0;

        if(getDeviceNo(value) > 0){
          crnList.push(item);
        }
      } else {
        return null;
      }
      sprite.position.set(x, y);

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

      sprite.on('pointerdown', (e) => {
        pointerDownEvent(e)
      })

      return sprite;
    }

    function getSpriteWithSize(value, x, y, w, h, item, pointerDownEvent) {
      let sprite;

      // 如果是标准尺寸，使用缓存的纹理
      if (w === width && h === height) {
        return getSprite(value, x, y, item, pointerDownEvent);
      }

      // 合并单元格需要动态创建纹理
      let graphics = getContainerWithSize(value, w, h);
      let texture = pixiApp.renderer.generateTexture(graphics);
      sprite = new PIXI.Sprite(texture);

      sprite.position.set(x, y);
      sprite.interactive = true;
      sprite.buttonMode = true;

      sprite.on('pointerdown', (e) => {
        pointerDownEvent(e)