gjerp_ui/src/views/zyjhzx/sliao/index_sliao.vue

<template>
  <div id="sliao" class="sliao" ref="sliao"></div>
</template>

<script>
import Konva from "konva";
import sliao from "@/views/zyjhzx/sliao/draw";

export default {
  name:'SLiao',
  data(){
    return {
      title:'上  料  作  业  区',
      stage:null,

      layer:null,
      width:'',
      height:'',
      gbImage:require('@/assets/gb.png'),

      mountGroup:null,
      sljhStage:null,
      sljhLayer:null,
      sljhGroup:null,
      sljhList:[],//上料计划

      canSl:false,

      slGroup:'',
      slList:'',
      dwGroup:'',
      qyList:[//区域,每个内部包含垛位信息
        {
          name:'一区',
          dw:[
            {
              name:'一剁',
              list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
            },
            {
              name:'二剁',
              list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
            }
          ]
        },
        {
          name:'二区',
          dw:[
            {
              name:'一剁',
              list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
            }
          ]
        },
      ],
      sljhItemList:[
        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX006',perQy:'一区',perDw:'一剁',perCeng:'三层'},
        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX007',perQy:'一区',perDw:'一剁',perCeng:'三层'},
        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX096',perQy:'一区',perDw:'一剁',perCeng:'三层'},
        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX007',perQy:'一区',perDw:'一剁',perCeng:'三层'},
        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX006',perQy:'一区',perDw:'一剁',perCeng:'三层'},
        {czbh:'G175K-4',pl:'001',tzbh:'B706N4PX077',perQy:'一区',perDw:'一剁',perCeng:'三层'},
        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX098',perQy:'一区',perDw:'一剁',perCeng:'三层'},
        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX998',perQy:'一区',perDw:'一剁',perCeng:'三层'},
        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX098',perQy:'一区',perDw:'一剁',perCeng:'三层'},
        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX099',perQy:'一区',perDw:'一剁',perCeng:'三层'},
      ],
      msg:'板材1放入一剁三层',
      worker:null,
      startMoveX:0,
      startMoveTime:0,
      isMoving:false,
      currentQyIndex:-1,
      currentDwIndex:-1,
      removeSljhItemIndex:-1,
    }
  },
  created(){},
  mounted() {
    this.initKonvaStage();
    //fixme 调试用
    this.drawMsg()
    this.drawSljhItem(this.sljhItemList)
  },
  methods: {
    //料场垛位实际情况
    drawSlItem(slList={}){
      for (let i = 1; i <=slList.length; i++) {
        const gb=slList[i-1]
        const group=new Konva.Group({
          x:0,
          y:this.height-260-i*40,
          draggable:true
        })

        group.setAttr('index',i)

        const that=this
        this.slGroup.add(group)
        const {x}=group.absolutePosition()
        group.dragBoundFunc(function (pos){
          return {
            x:x,
            y:pos.y
          }
        })
        let _index=0

        group.on('dragstart',function (){
          const {x,y}=this.absolutePosition()
          this.startPos={
            x:x,
            y:y
          }
        })
        group.on('dragmove',function (){
          if(_index===0){
            _index=this.getAttr('index')
          }
          this.zIndex(999)
          const {y:thisY}=this.absolutePosition()

          const dir=thisY-this.startPos.y>0?-40:40

          const children=that.slGroup.children

          for (const child of children) {
            if (child===this){
              return
            }

            const {y:thatY}=child.absolutePosition()
            const moveDir=child.getAttr('moveDir')||0
            if (thisY>=thatY&&thisY<=thatY+40&&moveDir!==dir){
              child.setAttr('moveDir',dir);
              _index+=dir>0?1:-1
              child.move({
                y:dir
              })
              this.startPos={
                x:x,
                y:thisY
              }
            }

          }
        })

        group.on('dragend',function (){
          console.log(_index)
          const index=this.getAttr('index')
          const element = slList.splice(index-1, 1)[0];
          slList.splice(_index-1, 0, element);
          this.setAttr('index',_index)
          _index=0
          that.slGroup.destroyChildren()
          that.drawSlItem(slList)
        })

        const indexRect=new Konva.Rect({
          x:0,
          y:0,
          width:40,
          height:40,
          stroke:'black',
          strokeWidth:1,
        })
        //group.add(indexRect)

        const indexText=new Konva.Text({
          x:0,
          y:0,
          width:40,
          height:40,
          fill:'black',
          text:i,
          align:'center',
          verticalAlign:'middle',
        })
        group.add(indexText)

        //层  规格,套料图 船号,上料日期,计划切割日期
        const imageObj = new Image();
        const imgSize=300
        imageObj.src = this.gbImage;
        imageObj.onload = function () {
          const shape = new Konva.Image({
            x: 60,
            y: 0,
            width: imgSize,
            height:40,
            image: imageObj,
          });
          group.add(shape)
          const gbText=new Konva.Text({
            x: 60,
            y: 0,
            width: imgSize,
            height:40,
            fill:'black',
            text:gb+',12*2830*13090',
            align:'center',
            verticalAlign:'middle',
          })
          group.add(gbText)
        }

        const concent=new Konva.Text({
          x: imgSize+40,
          y: 0,
          width: imgSize,
          height:40,
          fill:'black',
          text:'G175K-4,上料:2024/07/01,切割:2024/07/04',
          align:'center',
          verticalAlign:'middle',
        })
        group.add(concent)
      }
    },
    //绘制上料计划钢板信息
    drawSljhItem(list){
      const itemWith=80;
      const itemHeight=108
      this.sljhList=[]
      for (let i = 0; i < list.length; i++) {
        const item=list[i];
        const x=(i+1)*5+i*itemWith;
        const qyGroup=new Konva.Group({
          x:x,
          y:10,
          width:itemWith,
          height:itemHeight,
        })
        qyGroup.setAttr('index',i)

        const _layer=this.layer
        const _sljhGroup=this.sljhGroup;
        const _dwGroup=this.dwGroup
        let touchingFlag=false;
        const that=this
        qyGroup.on('touchstart',function ({evt}){
          if (!that.canSl){
            return
          }

          const {clientX:x,clientY:y}=evt.touches[0]
          touchingFlag=true;
          const _that=this
          setTimeout(()=>{
            const movingFlag=_sljhGroup.isDragging()
            if (!movingFlag){
              if (touchingFlag){
                _sljhGroup.draggable(false)
                const tmpGroup=_that.clone();
                tmpGroup.x(x-10)
                tmpGroup.y(y-10)
                _layer.add(tmpGroup)
                tmpGroup.draggable(true)
                tmpGroup.dragBoundFunc(function (pos){
                  const {x,y}=that.slGroup.absolutePosition()
                  const maxX=x+that.width*0.4-20
                  const maxY=y+that.height*0.8-20
                  if(pos.x>=x&&pos.y>=y&&pos.x<=maxX&&pos.y<=maxY){

                  }
                  return{
                    x:pos.x,
                    y:pos.y
                  }
                })
                tmpGroup.on('dragend',function (){
                  const {x:thisX,y:thisY}=this.absolutePosition()
                  const {x,y}=that.slGroup.absolutePosition()
                  const maxX=x+that.width*0.4-20
                  const maxY=y+that.height*0.8-20
                  if(thisX>=x&&thisY>=y&&thisX<=maxX&&thisY<=maxY){
                    that.qyList[that.currentQyIndex].dw[that.currentDwIndex].list.push('12123')
                    that.slGroup.destroyChildren()
                    that.drawSlItem(that.qyList[that.currentQyIndex].dw[that.currentDwIndex].list)
                    this.remove()
                    that.sljhItemList.splice(this.getAttr('index'),1)
                    that.sljhGroup.destroyChildren()
                    that.drawSljhItem(that.sljhItemList)
                    _sljhGroup.draggable(true)
                  }else{
                    this.remove()
                    _that.visible(true)
                  }
                })
                tmpGroup.startDrag()
                _that.visible(false)
              }
            }
            if (movingFlag){

            }
          },500)
        })

        qyGroup.on('touchend',function (){
          touchingFlag=false;
          this.draggable(false)
        })

        const rect=new Konva.Rect({
          x:0,
          y:0,
          width:itemWith,
          height:itemHeight,
          stroke:'black',
          strokeWidth:1,
        })
        qyGroup.add(rect)
        const text=new Konva.Text({
          x:0,
          y:0,
          width:itemWith,
          height:itemHeight,
          lineHeight:1,
          stroke:'blue',
          strokeWidth:0.1,
          text:item.czbh+'\n'+item.pl+'\n'+item.tzbh+'\n建议位置\n'+item.perQy+'\n'+item.perDw+'\n'+item.perCeng,
          align:'center',
          verticalAlign:'middle',
        })
        qyGroup.add(text)

        this.sljhList.push(qyGroup)
        this.sljhGroup.add(qyGroup)
        // this.mountGroup.add(qyGroup)
      }
    },

    //绘制移垛记录区
    drawYd(){
      this.drawContainer({
        x:15+this.width*0.6-15+5,
        y:this.height-this.height*0.8+10,
        width: this.width*0.4-20,
        height: this.height*0.8-20,
        stroke:'blue',
        strokeWidth:1,
      })
    },
    //绘制上料功能区
    drawSl(){
      const {qyGroup}=this.drawContainer({
        x:15+this.width*0.2+5,
        y:this.height-this.height*0.8+10,
        width: this.width*0.4-20,
        height: this.height*0.8-20,
        stroke:'blue',
        strokeWidth:1,
      })
      this.slGroup=qyGroup
    },
    drawDw(qyGroup,qy,size){
      if (this.dwGroup){
        this.dwGroup.destroyChildren()
      }
      const _group=this.dwGroup=new Konva.Group({
        x:54+size,
        y:15,
        width: size,
        height: size,
      })
      qyGroup.add(_group)
      for (let i = 0; i < qy.dw.length; i++) {
        const dw=qy.dw[i]
        const group=new Konva.Group({
          x:0,
          y:i*5+i*size,
          width: size,
          height: size,
        })
        const rect=new Konva.Rect({
          x:0,
          y:0,
          width: size,
          height: size,
          stroke:'black',
          strokeWidth:1,
        })
        group.add(rect)
        const text=new Konva.Text({
          x:0,
          y:0,
          width: size,
          height: size,
          fill:'black',
          text:qy.name+'\n'+dw.name,
          align:'center',
          verticalAlign:'middle',
          fontSize:20
        })
        group.add(text)
        group.on('click touchstart',(evt)=>{
          this.slGroup.destroyChildren()
          this.canSl=true
          this.currentDwIndex=i
          this.drawSlItem(dw.list)
        })
        _group.add(group)
      }
    },
    //绘制垛位选择区
    drawQy(){
      const {quRet,qyGroup}=this.drawContainer({
        x:15,
        y:this.height-this.height*0.8+10,
        width: this.width*0.2,
        height: this.height*0.8-20,
        stroke:'blue',
        strokeWidth:1,
      })
      const size=120;
      for (let i = 0; i < this.qyList.length; i++) {
        const qy=this.qyList[i]
        const group=new Konva.Group({
          x:23,
          y:15+i*5+i*size,
          width: size,
          height: size,
        })
        const rect=new Konva.Rect({
          x:0,
          y:0,
          width: size,
          height: size,
          stroke:'black',
          strokeWidth:1,
        })
        group.add(rect)
        const text=new Konva.Text({
          x:0,
          y:0,
          width: size,
          height: size,
          fill:'black',
          text:qy.name,
          align:'center',
          verticalAlign:'middle',
          fontSize:20
        })
        group.add(text)
        group.on('click touchstart',(evt)=>{
          this.currentQyIndex=i
          this.drawDw(qyGroup,qy,size)
        })
        qyGroup.add(group)
      }
    },
    //上料计划选择区
    drawSljh(){
      // this.sljhStage = new Konva.Stage({
      //   container: "sliao",
      //   x:15,
      //   y:65,
      //   width: this.width-30,
      //   height: this.height*0.2-60,
      // });
      // this.sljhStage.container().style.cursor = "drag";

      this.sljhLayer = new Konva.Layer();
      this.stage.add(this.sljhLayer)
      this.sljhLayer.draw();

      const qyGroup=new Konva.Group({
        x:15,
        y:65,
        width: this.width-30,
        height: this.height*0.2-60,
        stroke:'blue',
        strokeWidth:1,
        draggable: true,
        dragBoundFunc:function (pos){
          return {
            x:pos.x,
            y:65
          }
        },
      });

      qyGroup.on('dragmove',function (){
        const itemWidth=80
        const itemHeight=108;
        // this.getChildren((node)=>{
        //   const {x,y}=node.absolutePosition();
        //   if(x+itemWidth<20){
        //     node.visible(false)
        //   }else if(x+15<20){
        //     node.clipFunc((ctx)=>{
        //       ctx.rect(itemWidth-20, 0, itemWidth, itemHeight)
        //     })
        //   }
        //
        //   if (x+15>=this.width){
        //     node.visible(false)
        //   }
        //
        //   if (x+15<this.width&&x+15+itemWidth>this.width&&node.visible()){
        //     node.clipFunc((ctx)=>{
        //       ctx.rect(0, 0, this.width-30-x, itemHeight)
        //     })
        //   }
        // })
      })

      this.sljhLayer.add(qyGroup)

      // const {quRet,qyGroup}=this.drawContainer({
      //   x:15,
      //   y:65,
      //   width: this.width-30,
      //   height: this.height*0.2-60,
      //   stroke:'blue',
      //   strokeWidth:1,
      //   draggable: true,
      // })
      // quRet.on('touchmove',({evt})=>{
      //   const speed=0.15
      //   const time=evt.timeStamp
      //   const x=evt.targetTouches[0].clientX
      //   if (this.startMoveTime===0){
      //     this.startMoveTime=time
      //     this.startMoveX=x
      //   }
      //
      //   const _time=time-this.startMoveTime
      //   const dirX=x-this.startMoveX
      //
      //   if (!this.isMoving){
      //     this.isMoving=true
      //     this.sljhList.forEach(item=>{
      //       item.move({
      //         x:speed*_time*(dirX>0?1:-1)
      //       })
      //     })
      //     this.startMoveTime=0
      //     this.startMoveX=0
      //     this.isMoving=false
      //   }else{
      //     this.startMoveTime=time
      //     this.startMoveX=x
      //     this.isMoving=false
      //   }
      // })

      this.sljhGroup=qyGroup
      // this.mountGroup=this.drawGroup({
      //   x:15,
      //   y:this.height-this.height*0.8+10,
      //   width: this.width*0.2,
      //   height: this.height*0.8-20,
      //   stroke:'blue',
      //   strokeWidth:1,
      // })
      // this.layer.add(this.mountGroup)
    },
    drawMsg(){
      this.drawText({
        x:15,
        y:50,
        width:this.width-30,
        height:20,
        lineHeight:1,
        stroke:'black',
        strokeWidth:0.1,
        text:this.msg,
        align:'center',
      })
    },

    drawText(option){
      const text=new Konva.Text(option)
      this.layer.add(text)
      return text
    },

    initKonvaStage(){
      this.width=this.$refs.sliao.clientWidth
      this.height=this.$refs.sliao.clientHeight
      const options={
        width:this.width,
        height:this.height
      }
      const {drawTitle}=sliao(options)

      this.stage = new Konva.Stage({
        container: "sliao",
        width: this.width,
        height: this.height,
      });
      //this.stage.container().style.cursor = "sw-resize";

      this.layer = new Konva.Layer();
      this.stage.add(this.layer)
      this.layer.draw();

      const title=drawTitle(this.width,0,this.title)
      this.layer.add(title)

      //构建布局区域
      //上料计划显示区
      this.drawSljh()
      //区域垛位选择区
      this.drawQy()
      //上料功能区
      this.drawSl();
      //移垛记录区
      this.drawYd();
    },
    //绘制区域
    drawContainer(option){
      const quRet=this.drawRect(option)
      const qyGroup=this.drawGroup(option)
      return {
        quRet,qyGroup
      }
    },
    drawGroup(option){
      const qyGroup=new Konva.Group(option);
      this.layer.add(qyGroup)
      return qyGroup
    },
    drawRect(option){
      const quRet=new Konva.Rect(option);
      this.layer.add(quRet)
      return quRet
    }
  }
}

</script>

<style>
#sliao {
  background: #ddd;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  aspect-ratio: 16/9;
}
</style>