自动化立库仓库-WCS系统
blame | 历史 | 补丁 | 提交 | 提交对比 | show whitespace
#
Junjie
6 天以前 fbb0652588cf80be06f84e1f7c9ecdc17cdf24e5 
 src/main/webapp/views/watch/console2.html


@@ -1,5 +1,6 @@


<!DOCTYPE html>


<html lang="en">




<head>


  <meta charset="UTF-8">


  <title>库位地图</title>


@@ -22,6 +23,7 @@


    }


  </style>


</head>




<body>


<div id="app">


  <div id="pixiView">


@@ -34,23 +36,14 @@


    <el-button @click="drawer = true">操作</el-button>


  </div>




  <el-drawer


          title="操作区域"


          :visible.sync="drawer"


          :with-header="true"


          :modal="false"


  >


    <el-drawer title="操作区域" :visible.sync="drawer" :with-header="true" :modal="false">


    <div class="floorBtnBox" v-for="(lev,idx) in floorList">


      <el-button :style="{background:currentLev === lev ? '#7DCDFF':''}" @click="changeFloor(lev)">{{lev}}F</el-button>


        <el-button :style="{background:currentLev === lev ? '#7DCDFF':''}"


          @click="changeFloor(lev)">{{lev}}F</el-button>


    </div>


  </el-drawer>




  <el-drawer


          title="库位详情"


          :visible.sync="drawerLocNo"


          :with-header="true"


          :modal="false"


  >


    <el-drawer title="库位详情" :visible.sync="drawerLocNo" :with-header="true" :modal="false">


    <div v-if="drawerLocNoData!=null">


      <div style="margin: 10px;">


        <div style="margin-top: 5px;">排：{{drawerLocNoData.row}}</div>


@@ -62,12 +55,7 @@


    </div>


  </el-drawer>




  <el-drawer


          title="小车信息"


          :visible.sync="drawerShuttle"


          :with-header="true"


          :modal="false"


  >


    <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>


@@ -77,12 +65,7 @@


    </div>


  </el-drawer>




  <el-drawer


          title="站点信息"


          :visible.sync="drawerSta"


          :with-header="true"


          :modal="false"


  >


    <el-drawer title="站点信息" :visible.sync="drawerSta" :with-header="true" :modal="false">


    <div v-if="drawerStaData!=null">


      <div style="margin: 10px;">


        <div style="margin-top: 5px;">站点：{{drawerStaData.siteId}}</div>


@@ -102,12 +85,7 @@


    </div>


  </el-drawer>




  <el-drawer


          title="提升机信息"


          :visible.sync="drawerLift"


          :with-header="true"


          :modal="false"


  >


    <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>


@@ -126,18 +104,13 @@


  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;


  let graphics5;


  let graphics9;


  let graphics67;


  let graphicsLock;


    let graphicsShelf;


    let graphicsDevp;


    let graphicsCrn;


    let graphicsCrnTrack;


  let ws;




  var app = new Vue({


@@ -236,7 +209,7 @@


      getMap(lev) {


        let that = this;


          $.ajax({


              url: baseUrl + "/console/map/" + lev + "/auth",


            url: baseUrl + "/basMap/lev/" + this.currentLev + "/auth",


              headers: {


                  'token': localStorage.getItem('token')


              },


@@ -245,7 +218,8 @@


              success: function(res) {


                //获取地图数据


                let data = res.data


                that.createMapData(data)


              let mapData = JSON.parse(data)


              that.createMapData(mapData)


              }


          })


      },


@@ -255,10 +229,6 @@


        this.reloadMap = true


        this.reloadSta = true


        this.getMap(lev)




        //清空占用路径


        objectsContainer3.removeChildren();


        pixiShuttleLockPathMap = new Map();




        //清空预计路径


        objectsContainer2.removeChildren();


@@ -280,14 +250,10 @@


        pixiApp.loader.add('shuttle', '../static/images/sxcar.png');




        // 从Graphics对象创建一个纹理


          graphicsF = pixiApp.renderer.generateTexture(getContainer(1000));


        graphics0 = pixiApp.renderer.generateTexture(getContainer(0));


        graphics3 = pixiApp.renderer.generateTexture(getContainer(3));


        graphics4 = pixiApp.renderer.generateTexture(getContainer(4));


        graphics5 = pixiApp.renderer.generateTexture(getContainer(5));


        graphics9 = pixiApp.renderer.generateTexture(getContainer(9));


        graphics67 = pixiApp.renderer.generateTexture(getContainer(67));


        graphicsLock = pixiApp.renderer.generateTexture(getContainer(-999));


          graphicsShelf = pixiApp.renderer.generateTexture(getContainer('shelf'));


          graphicsDevp = pixiApp.renderer.generateTexture(getContainer('devp'));


          graphicsCrn = pixiApp.renderer.generateTexture(getContainer('crn'));


          graphicsCrnTrack = createTrackTexture();




        // 创建一个容器来管理大批量的显示对象


        objectsContainer = new PIXI.Container();


@@ -296,10 +262,6 @@


        // 创建一个容器来管理大批量的显示对象


        objectsContainer2 = new PIXI.Container();


        pixiApp.stage.addChild(objectsContainer2);




        // 创建一个容器来管理大批量的显示对象


        objectsContainer3 = new PIXI.Container();


        pixiApp.stage.addChild(objectsContainer3);




        //*******************拖动画布*******************


        let stageOriginalPos;


@@ -398,60 +360,69 @@


            pixiStageList[index] = [item.length]


            for (let idx = 0; idx < item.length; idx++) {


              let val = item[idx]


              if (val.value < 0 && (val.value != -999)) {




                // 跳过合并单元格的占位符


                if (val.type === 'merge') {


                continue;


              }




              let sprite = getSprite(val.value, idx * width, index * height, 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 (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中


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


                  continue;


              }




              if (val.value == -999) {


                pixiShuttleLockPathMap.set(val.locNo, sprite);


                objectsContainer3.addChild(sprite);


              }else {


                // 计算合并单元格的实际宽高


                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


            }


          });


@@ -465,26 +436,22 @@


          diff.forEach((item, index) => {


            //获取old元素


            let oldSprite = pixiStageList[item.x][item.y]


            if (item.originData == -999) {


              //移除old路径元素


              objectsContainer3.removeChild(oldSprite);


            }else {


              if (!oldSprite) return; // 跳过不存在的元素




              //移除old元素


              objectsContainer.removeChild(oldSprite);


            }




            let sprite = getSprite(item.data, item.y * width, item.x * height, item, (e) => {


              // 计算合并单元格的实际宽高


              let cellWidth = item.colSpan ? item.colSpan * width : width;


              let cellHeight = item.rowSpan ? item.rowSpan * height : height;




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


            });




            if (item.data == -999) {


              //添加路径元素


              objectsContainer3.addChild(sprite);


            }else {


              //添加元素


              objectsContainer.addChild(sprite);


            }




            //保存新元素


            pixiStageList[item.x][item.y] = sprite


@@ -495,8 +462,10 @@


      },


      rightEvent(x, y, e) {


        this.drawerLocNo = true


        this.drawerLocNoData =  {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};


          this.drawerLocNoData = {


            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 = []


@@ -858,7 +827,54 @@


    }


  })




  function getContainer(value) {


    function getContainer(type) {


      let graphics = new PIXI.Graphics();


      let drawBorder = true;


      if (type == 'shelf') {


        graphics.beginFill(0x55aaff);


      } else if (type == 'devp') {


        graphics.beginFill(0xffff00);


        graphics.visible = true;


      } else if (type == 'crn') {


        graphics.beginFill(0xaaffff);


      }


      if (drawBorder) {


        graphics.lineStyle(1, 0xffffff, 1);


        graphics.drawRect(0, 0, width, height);


      }


      graphics.endFill();




      return graphics;


    }




    function createTrackTexture() {


      const g = new PIXI.Graphics();


      const t = Math.max(2, Math.round(height * 0.08));


      const gap = Math.round(height * 0.30);


      const mid = Math.round(height / 2);


      const y1 = mid - Math.round(gap / 2);


      const y2 = mid + Math.round(gap / 2);


      const tHalf = Math.round(t / 2);


      const topRailTopY = y1 - tHalf;


      const bottomRailTopY = y2 - tHalf;


      g.beginFill(0x666666);


      g.drawRect(0, topRailTopY, width, t);


      g.drawRect(0, bottomRailTopY, width, t);


      g.endFill();


      g.beginFill(0x777777);


      const sTop = topRailTopY + t;


      const sBottom = bottomRailTopY;


      const sHeight = Math.max(1, sBottom - sTop);


      for (let i = 0; i < width; i += 5) {


        g.drawRect(i, sTop, 2, sHeight);


      }


      g.endFill();


      const rt = PIXI.RenderTexture.create({ width: width, 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);


@@ -881,7 +897,7 @@


     graphics.beginFill(0xf83333);


   }


    graphics.lineStyle(1, 0xffffff, 1);


    graphics.drawRect(0, 0, width, height);


      graphics.drawRect(0, 0, w, h);


    graphics.endFill();




    return graphics;


@@ -899,32 +915,49 @@




  function getSprite(value, x, y, item, pointerDownEvent) {


    let sprite;


    if (value == 0) {


      if(item.locSts == 'O') {


        sprite = new PIXI.Sprite(graphics0);


      }else if(item.locSts == 'F') {


        sprite = new PIXI.Sprite(graphicsF);


      console.log(item.type);


      if (item.type == 'shelf') {


        sprite = new PIXI.Sprite(graphicsShelf);


      } else if (item.type == 'devp') {


        sprite = new PIXI.Sprite(graphicsDevp);


      } else if (item.type == 'crn') {


        if (getDeviceNo(value) == -1) {


          sprite = new PIXI.Sprite(graphicsCrnTrack);


      }else {


        sprite = new PIXI.Sprite(graphics0);


          sprite = new PIXI.Sprite(graphicsCrn);


      }


    } else if (value == 3) {


      sprite = new PIXI.Sprite(graphics3);


    } else if (value == 4) {


      sprite = new PIXI.Sprite(graphics4);


    } else if (value == 5) {


      sprite = new PIXI.Sprite(graphics5);


    } else if (value == 9) {


      sprite = new PIXI.Sprite(graphics9);


    } else if (value == 67) {


      sprite = new PIXI.Sprite(graphics67);


    } else if (value == -999) {


      sprite = new PIXI.Sprite(graphicsLock);


      } else if (item.type == 'crnTrack') {


        sprite = new PIXI.Sprite(graphicsCrnTrack);


    } else {


      sprite = new PIXI.Sprite(graphics0);


        return null;


    }


    sprite.position.set(x, y);


    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)


@@ -943,6 +976,51 @@


    sprite.tint = color;


  }




    function isJson(str) {


      try {


        JSON.parse(str);


        return true;


      } catch (e) {


        return false;


      }


    }




    function getDeviceNo(obj) {


      if (this.isJson(obj)) {


        let data = JSON.parse(obj)


        if (data.deviceNo == null || data.deviceNo == undefined) {


          return -1;


        }


        return data.deviceNo;


      } else {


        return -1;


      }


    }




    function getStationId(obj) {


      if (this.isJson(obj)) {


        let data = JSON.parse(obj)


        if (data.stationId == null || data.stationId == undefined) {


          return -1;


        }


        return data.stationId;


      } else {


        return -1;


      }


    }




    function getTrackSiteNo(obj) {


      if (this.isJson(obj)) {


        let data = JSON.parse(obj)


        if (data.trackSiteNo == null || data.trackSiteNo == undefined) {


          return -1;


        }


        return data.trackSiteNo;


      } else {


        return -1;


      }


    }




</script>


</body>


</html>