#

Junjie

17 小时以前 253e9b3735533c4d8c69cf5e6983d5fa1e984ae9

 src/main/webapp/views/console4.html

@@ -43,12 +43,6 @@
    <div class="floorBtnBox" v-for="(lev,idx) in floorList">
      <el-button :style="{background:currentLev === lev ? '#7DCDFF':''}" @click="changeFloor(lev)">{{lev}}F</el-button>
    </div>
    <div>
      <el-button @click="testMove()">测试移动车</el-button>
    </div>
    <div style="margin-top: 10px;">
      <el-button @click="resetMap()">重置地图</el-button>
    </div>
  </el-drawer>

  <el-drawer
@@ -63,6 +57,8 @@
        <div style="margin-top: 5px;">Y：{{drawerLocNoData.y}}</div>
        <div style="margin-top: 5px;">Z：{{drawerLocNoData.z}}</div>
        <div style="margin-top: 5px;">库位号：{{drawerLocNoData.locNo}}</div>
        <div style="margin-top: 5px;">预计路径车辆：{{drawerLocNoData.moveAdvancePath}}</div>
        <div style="margin-top: 5px;">路径锁定车辆：{{drawerLocNoData.lockPathShuttleNo}}</div>
      </div>
    </div>
  </el-drawer>
@@ -130,9 +126,9 @@
  let pixiStageList = [];
  let pixiShuttleMap = new Map();
  let pixiShuttleMoveAdvancePathMap = new Map();
  let pixiShuttleMoveAdvancePathList = [];
  let pixiShuttleLockPathMap = new Map();
  let pixiStaMap = new Map();
  let lockPathInfoMap = new Map();
  let objectsContainer;
  let objectsContainer2;
  let objectsContainer3;
@@ -150,7 +146,7 @@
    data: {
      map: [],
      currentLev: 1,
      floorList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], //当前项目楼层
      floorList: [], //当前项目楼层
      currentLevShuttleList: [],//当前楼层四向穿梭车集合
      shuttleColorList: [],//四向穿梭车颜色集合
      drawer: false,
@@ -184,7 +180,7 @@
        deep: true,
        handler(val) {
          if (!val) {
            var sprite = pixiStageList[this.drawerLocNoData.x][this.drawerLocNoData.y];
            var sprite = pixiStageList[this.drawerLocNoData.x - 1][this.drawerLocNoData.y];
            updateColor(sprite, 0xFFFFFF);//恢复颜色
          }
        }
@@ -199,6 +195,7 @@
        ws.onclose = this.webSocketClose

        this.getMap(this.currentLev)
        this.initLev()//初始化楼层信息
        // this.getSystemRunningStatus() //获取系统运行状态

        this.consoleInterval = setInterval(() => {
@@ -206,7 +203,8 @@
          this.getShuttleStateInfo() //获取四向穿梭车信息
          this.getLiftStateInfo() //获取提升机信息
          this.getSiteInfo() //获取输送站点数据
          // this.getCodeData()//获取条码
          this.getMoveAdvancePath(this.currentLev)
          this.getLockPath(this.currentLev)
        }, 1000)

      },
@@ -251,8 +249,8 @@
                const shuttle = new PIXI.Sprite(resources.shuttle.texture);
                shuttle.width = width
                shuttle.height = height
                shuttle.x = (item.wcsPoint.y - 0) * width;//更新坐标x
                shuttle.y = (item.wcsPoint.x - 1) * height;//更新坐标y
                shuttle.x = (item.point.y - 0) * width;//更新坐标x
                shuttle.y = (item.point.x - 1) * height;//更新坐标y
                shuttle.updateMoveStatus = true;//动画执行完成
                shuttle.interactive = true; // 必须要设置才能接收事件
                shuttle.buttonMode = true; // 让光标在hover时变为手型指针
@@ -264,28 +262,12 @@
                pixiShuttleMap.set(item.shuttleNo, shuttle);
              })

              if (item.moveAdvancePath != null && item.moveAdvancePath.length > 0) {//存在预计路径，进行渲染
                this.addMoveAdvancePath(item.moveAdvancePath, item.shuttleNo);//添加预计路径
              }

            })
          }else {
            //小车不存在变动，渲染小车位置
            currentLevShuttle.forEach((item,index) => {
              this.updateShuttleXY(item)
            })

            const resultPath = this.findShuttlePathDiffList(JSON.parse(JSON.stringify(this.currentLevShuttleList)), JSON.parse(JSON.stringify(currentLevShuttle)));
            if (!resultPath) {
              //预计路径存在变动，渲染路径
              currentLevShuttle.forEach((item,index) => {
                //删除预计路径
                this.removeMoveAdvancePath(item.shuttleNo);
                if (item.moveAdvancePath != null && item.moveAdvancePath.length > 0) {//存在预计路径，进行渲染
                  this.addMoveAdvancePath(item.moveAdvancePath, item.shuttleNo);//添加预计路径
                }
              })
            }
          }
          that.currentLevShuttleList = currentLevShuttle;
        }
@@ -320,7 +302,6 @@
        //清空预计路径
        objectsContainer2.removeChildren();
        pixiShuttleMoveAdvancePathMap = new Map();
        pixiShuttleMoveAdvancePathList = []
      },
      createMap(){
        //Create a Pixi Application
@@ -504,7 +485,7 @@
              }

              if (val.value == -999) {
                pixiShuttleLockPathMap.set(this.getLocNoByXYZ(index + 1, idx, this.currentLev), sprite);
                pixiShuttleLockPathMap.set(this.getLocNoByXYZ(val.row, val.bay, this.currentLev), sprite);
                objectsContainer3.addChild(sprite);
              }else {
                objectsContainer.addChild(sprite);
@@ -512,6 +493,11 @@
              pixiStageList[index][idx] = sprite
            }
          });

          //视角居中
          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) => {
@@ -545,11 +531,32 @@

        this.map = map;
      },
      rightEvent(x, y, e) {
        this.drawerLocNo = true
        let locNo = this.getLocNoByXYZ(x, y, this.currentLev);
        this.drawerLocNoData =  {x:x, y: y, z: this.currentLev, locNo: locNo};
      },
        rightEvent(x, y, e) {
            this.drawerLocNo = true
            let locNo = this.getLocNoByXYZ(x, y, this.currentLev);
            let tmpData = {
                x: x,
                y: y,
                z: this.currentLev,
                locNo: locNo
            };

            let moveAdvancePath = pixiShuttleMoveAdvancePathMap.get(locNo)
            if (moveAdvancePath == null || moveAdvancePath == undefined) {
                moveAdvancePath = "";
            }else {
                moveAdvancePath = JSON.stringify(moveAdvancePath.shuttleNos);
            }
            tmpData.moveAdvancePath = moveAdvancePath;

            let lockPathShuttleNo = lockPathInfoMap.get(locNo)
            if (lockPathShuttleNo == null || lockPathShuttleNo == undefined) {
                lockPathShuttleNo = "";
            }
            tmpData.lockPathShuttleNo = lockPathShuttleNo;

            this.drawerLocNoData = tmpData;
        },
      findDiffList(arr1, arr2) {
        let diff = []
        arr1.forEach((item,index) => {
@@ -587,37 +594,6 @@
        });

        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) {
        //检测站点是否在集合中有变动
@@ -663,9 +639,36 @@
          this.setSiteInfo(JSON.parse(result.data))
        }else if (result.url == "/console/map/auth") {
          this.setMap(JSON.parse(result.data))
        }else if (result.url == "/console/barcode/output/site") {
          this.setCodeData(JSON.parse(result.data))
        }else if (result.url == "/console/getMoveAdvancePath/auth") {
            this.setMoveAdvancePath(JSON.parse(result.data))
        }else if (result.url == "/console/getLockPath/auth") {
            this.setLockPath(JSON.parse(result.data))
        }
      },
      getMoveAdvancePath(lev) {
          this.sendWs(JSON.stringify({
              "url": "/console/getMoveAdvancePath/auth",
              "data": lev
          }))
      },
      setMoveAdvancePath(res) {
          let data = res.data;
          this.addMoveAdvancePath(data)
      },
      getLockPath(lev) {
        this.sendWs(JSON.stringify({
            "url": "/console/getLockPath/auth",
            "data": lev
        }))
      },
      setLockPath(res) {
          let data = res.data;
          let tmpMap = new Map();
          data.forEach((item) => {
              let locNo = this.getLocNoByXYZ(item.x,item.y,item.z)
              tmpMap.set(locNo, item.shuttleNo);
          })
          lockPathInfoMap = tmpMap;
      },
      webSocketClose(e) {
        console.log("close");
@@ -687,11 +690,11 @@
        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));
          const distance = Math.sqrt(Math.pow((item.point.x * width) - shuttle.x, 2) + Math.pow((item.point.y * height) - shuttle.y, 2));
          gsap.killTweensOf(shuttle); // 杀死所有针对".class"的动画
          gsap.to(shuttle, {
            x: (item.wcsPoint.y - 0) * width, // 目标位置
            y: (item.wcsPoint.x - 1) * height, // 目标位置
            x: (item.point.y - 0) * width, // 目标位置
            y: (item.point.x - 1) * height, // 目标位置
            duration: 0.2, // 动画持续时间（秒）
            ease: "power1.inOut", // 缓动类型
            onComplete: () => {
@@ -731,7 +734,7 @@
                    objectsContainer.removeChild(sta.statusObj)
                    sta.statusObj = null;
                  }
                }else if (item.siteStatus == "site-auto-run") {
                }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);//继承文字信息
@@ -827,40 +830,23 @@
        }
      },
      getLocNoByXYZ(x, y, z) {
        let locNo = "";
        if (x < 10) {
          locNo += "0" + x;
        }else {
          locNo += x;
        }

        if (y < 100) {
          locNo += "0" + y;
        }else if (y < 10) {
          locNo += "00" + y;
        }else {
          locNo += y;
        }

        if (z < 10) {
          locNo += "0" + z;
        }else {
          locNo += z;
        }
        return locNo;
          let locNo = x + "-" + y + "-" + z;
          return locNo;
      },
      addMoveAdvancePath(moveAdvancePath, shuttleNo) {//添加预计路径
        let that = this;
      addMoveAdvancePath(moveAdvancePath) {//添加预计路径
        //清空预计路径
        objectsContainer2.removeChildren();
        pixiShuttleMoveAdvancePathMap = new Map();
        moveAdvancePath.forEach((path, idx) => {
          let locNo = that.getLocNoByXYZ(path.x, path.y, path.z);
          if (!pixiShuttleMoveAdvancePathMap.has(locNo)) {
            let locNo = this.getLocNoByXYZ(path.x, path.y, path.z);
            let shuttleNos = path.shuttleNoList;
            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',
                fontFamily: 'Arial',
                fontSize: 10,
                fill: '#000000',
            });
            const text = new PIXI.Text(JSON.stringify(shuttleNos), style);
            text.anchor.set(0.5); // 设置文本锚点为中心点
@@ -870,62 +856,35 @@
            graphics.textObj = text;
            objectsContainer2.addChild(graphics)
            pixiShuttleMoveAdvancePathMap.set(locNo, {
              path: path,
              sprite: graphics,
              textObj: text,
              shuttleNos: shuttleNos
                path: path,
                sprite: graphics,
                textObj: text,
                shuttleNos: shuttleNos
            })

            if (pixiShuttleMoveAdvancePathList[shuttleNo] == null) {
              let locNos = new Set()
              locNos.add(locNo);
              pixiShuttleMoveAdvancePathList[shuttleNo] = locNos;
            }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);
            }
          }
        });
      },
      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);
      initLev(){
            let that = this
            $.ajax({
                url: baseUrl + "/console/map/lev/list",
                headers: {
                    'token': localStorage.getItem('token')
                },
                data: {},
                method: 'get',
                success: function(res) {
                    if (res.code === 200) {
                        that.floorList = res.data;
                    } else if (res.code === 403) {
                        parent.location.href = baseUrl + "/login";
                    } else {
                        that.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                }
              });

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