#

Junjie

2025-02-10 5bf2b51ec743cd422a0eb3277b9c93a08c700315

 src/main/webapp/views/console4.html

@@ -14,7 +14,7 @@
  <script type="text/javascript" src="../static/vue/js/vue.min.js"></script>
  <script type="text/javascript" src="../static/vue/element/element.js"></script>
  <script src="../static/js/gsap.min.js"></script>
  <script src="../static/js/pixi.min.js"></script>
  <script src="../static/js/pixi-legacy.min.js"></script>
  <style>
    *{
      margin: 0;
@@ -131,9 +131,11 @@
  let pixiShuttleMap = new Map();
  let pixiShuttleMoveAdvancePathMap = new Map();
  let pixiShuttleMoveAdvancePathList = [];
  let pixiShuttleLockPathMap = new Map();
  let pixiStaMap = new Map();
  let objectsContainer;
  let objectsContainer2;
  let objectsContainer3;
  let graphics0;
  let graphics3;
  let graphics4;
@@ -148,7 +150,7 @@
    data: {
      map: [],
      currentLev: 1,
      floorList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], //当前项目楼层
      floorList: [1, 2, 3], //当前项目楼层
      currentLevShuttleList: [],//当前楼层四向穿梭车集合
      shuttleColorList: [],//四向穿梭车颜色集合
      drawer: false,
@@ -182,7 +184,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);//恢复颜色
          }
        }
@@ -200,10 +202,10 @@
        // this.getSystemRunningStatus() //获取系统运行状态

        this.consoleInterval = setInterval(() => {
          this.getMap(this.currentLev) //获取实时地图数据
          this.getShuttleStateInfo() //获取四向穿梭车信息
          this.getLiftStateInfo() //获取提升机信息
          this.getSiteInfo() //获取输送站点数据
          this.getMap(this.currentLev) //获取实时地图数据
          // this.getCodeData()//获取条码
        }, 1000)

@@ -249,8 +251,8 @@
                const shuttle = new PIXI.Sprite(resources.shuttle.texture);
                shuttle.width = width
                shuttle.height = height
                shuttle.x = item.point.x * width;//更新坐标x
                shuttle.y = item.point.y * height;//更新坐标y
                shuttle.x = (item.wcsPoint.y - 0) * width;//更新坐标x
                shuttle.y = (item.wcsPoint.x - 1) * height;//更新坐标y
                shuttle.updateMoveStatus = true;//动画执行完成
                shuttle.interactive = true; // 必须要设置才能接收事件
                shuttle.buttonMode = true; // 让光标在hover时变为手型指针
@@ -310,6 +312,15 @@
        this.reloadMap = true
        this.reloadSta = true
        this.getMap(lev)

        //清空占用路径
        objectsContainer3.removeChildren();
        pixiShuttleLockPathMap = new Map();

        //清空预计路径
        objectsContainer2.removeChildren();
        pixiShuttleMoveAdvancePathMap = new Map();
        pixiShuttleMoveAdvancePathList = []
      },
      createMap(){
        //Create a Pixi Application
@@ -341,6 +352,10 @@
        // 创建一个容器来管理大批量的显示对象
        objectsContainer2 = new PIXI.Container();
        pixiApp.stage.addChild(objectsContainer2);

        // 创建一个容器来管理大批量的显示对象
        objectsContainer3 = new PIXI.Container();
        pixiApp.stage.addChild(objectsContainer3);

        //*******************拖动画布*******************
        let stageOriginalPos;
@@ -453,7 +468,7 @@
                  this.openDrawerLift(val)
                }else{
                  //库位
                  this.rightEvent(index, idx, e);
                  this.rightEvent(index + 1, idx, e);
                  updateColor(sprite, 0x9900ff);
                }
              });
@@ -488,24 +503,45 @@
                pixiStaMap.set(parseInt(val.data), sprite);//站点数据添加到map中
              }

              objectsContainer.addChild(sprite);
              if (val.value == -999) {
                pixiShuttleLockPathMap.set(this.getLocNoByXYZ(index + 1, idx, this.currentLev), sprite);
                objectsContainer3.addChild(sprite);
              }else {
                objectsContainer.addChild(sprite);
              }
              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) => {
            //获取old元素
            let oldSprite = pixiStageList[item.x][item.y]
            //移除old元素
            objectsContainer.removeChild(oldSprite)
            if (item.originData == -999) {
              //移除old路径元素
              objectsContainer3.removeChild(oldSprite);
            }else {
              //移除old元素
              objectsContainer.removeChild(oldSprite);
            }

            let sprite = getSprite(item.data, item.y * width, item.x * height, (e) => {
              this.rightEvent(item.x, item.y, e);
              this.rightEvent(item.x + 1, item.y, e);
              updateColor(sprite, 0x9900ff);
            });

            objectsContainer.addChild(sprite);
            if (item.data == -999) {
              //添加路径元素
              objectsContainer3.addChild(sprite);
            }else {
              //添加元素
              objectsContainer.addChild(sprite);
            }

            //保存新元素
            pixiStageList[item.x][item.y] = sprite
@@ -527,7 +563,8 @@
              diff.push({
                x: index,
                y: idx,
                data: arr2[index][idx].value
                data: arr2[index][idx].value,
                originData: val.value
              })
            }
          })
@@ -655,12 +692,12 @@
        if (shuttle.updateMoveStatus) {//动画执行完成才可继续执行动画
          shuttle.updateMoveStatus = false;//动画执行中
          // 计算两点之间的距离1
          const distance = Math.sqrt(Math.pow((item.point.x * width) - shuttle.x, 2) + Math.pow((item.point.y * height) - shuttle.y, 2));
          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.point.x * width, // 目标位置
            y: item.point.y * height, // 目标位置
            duration: distance / 100, // 动画持续时间（秒）
            x: (item.wcsPoint.y - 0) * width, // 目标位置
            y: (item.wcsPoint.x - 1) * height, // 目标位置
            duration: 0.2, // 动画持续时间（秒）
            ease: "power1.inOut", // 缓动类型
            onComplete: () => {
              shuttle.updateMoveStatus = true;//动画执行完成
@@ -676,10 +713,8 @@
        }))
      },
      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)

        // 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;
@@ -701,7 +736,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);//继承文字信息
@@ -824,7 +859,7 @@
        moveAdvancePath.forEach((path, idx) => {
          let locNo = that.getLocNoByXYZ(path.x, path.y, path.z);
          if (!pixiShuttleMoveAdvancePathMap.has(locNo)) {
            let graphics = getGraphics(0x9966ff, width, height, path.y * width, path.x * height);
            let graphics = getGraphics(0x9966ff, width, height, path.y * width, (path.x - 1) * height);
            let shuttleNos = [shuttleNo];
            // 创建文本对象
            const style = new PIXI.TextStyle({
@@ -897,6 +932,24 @@
          })
        }
      },
      resetMap() {
        //重置地图
        let that = this
        $.ajax({
          url:baseUrl+"/console/map/resetMap/" + this.currentLev,
          headers:{
            'token': localStorage.getItem('token')
          },
          data:{},
          method:'get',
          success:function (res) {
            that.$message({
              message: that.currentLev + '层地图重置完成',
              type: 'success'
            });
          }
        })
      },
    }
  })