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

<template>
  <div>
    <div id="sliao" class="sliao" ref="sliao"></div>
    <SliaoSearch @search="search" />
  </div>
</template>

<script>
import container from "@/views/zyjhzx/sliao/comps/container";
import drawTitle from "@/views/zyjhzx/sliao/comps/title";
import initSearch from "@/views/zyjhzx/sliao/comps/search";
import {sljh} from "@/views/zyjhzx/sliao/comps/sljh";
import workers from "@/views/zyjhzx/sliao/comps/person";
import SliaoSearch from "@/views/zyjhzx/sliao/comps/SliaoSearch.vue";
import liliao from "@/views/zyjhzx/sliao/comps/liliao";
import baifang from "@/views/zyjhzx/sliao/comps/baifang";

export default {
  name:'SLiao',
  components: {SliaoSearch},
  data(){
    return {
      title:'上  料  作  业  区',
      width:0,
      height:0,
      stage:null,
      layer:null,
      slGroup:null,
      sljhGroup:null,
      drawBaiFang:null,
      canSl:false,
      currentDwIndex:-1,
      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:'三层'},
      ],
      dw:[
        {name:'预处理垛位\n垛位1\n摆放预览',
          list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
        },
        {name:'预处理垛位\n垛位2\n摆放预览',
          list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
        },
        {name:'预处理垛位\n垛位2\n摆放预览',
          list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
        },
      ]
    }
  },
  mounted() {
    this.initKonvaStage();
  },
  methods:{
    search(queryParam){
      console.log(queryParam)
    },
    initBaiFang(index,list){
      this.canSl=true
      this.currentDwIndex=index
      const {slGroup,handler}= baifang({width:this.width,height:this.height,dw:list})
      this.slGroup=slGroup
      this.drawBaiFang=handler
      this.layer.add(slGroup)
    },
    drawSljhItem(list){
      const itemWith=80;
      const itemHeight=108
      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;
        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){
                  return{...pos}
                })
                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.dw[that.currentDwIndex].list.push('12123')
                    that.slGroup.destroyChildren()
                    that.initBaiFang(that.currentDwIndex,that.dw[that.currentDwIndex].list)

                    //that.drawBaiFang(that.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.sljhGroup.add(qyGroup)
      }
    },
    initLiLiao(){
      new Promise(resolve => {
        return resolve(this.dw)
      }).then(res=>{
        const {container}= liliao(this.width,this.height,res,this.initBaiFang)
        const group=container()
        this.layer.add(group)
      })
    },
    initWorkers(){
      new Promise(resolve => {
        return resolve([
          {name:'张三1'},{name:'张三2'},
          {name:'张三1'},{name:'张三2'},
        ])
      }).then(res=>{
        const {container}=workers(this.width,this.height,res)
        const group=container()
        this.layer.add(group)
      })
    },
    initKonvaStage(){
      this.width=this.$refs.sliao.clientWidth
      this.height=this.$refs.sliao.clientHeight
      const {stage,layer}=container(this.width,this.height,'sliao')
      this.stage=stage
      this.layer=layer

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

      const {group}=initSearch()

      this.layer.add(group)

      const {layer:sljhLayer,group:sljhGroup}=sljh(this.width,this.height)
      this.sljhGroup=sljhGroup
      this.drawSljhItem(this.sljhItemList)
      this.stage.add(sljhLayer)

      this.initWorkers()

      this.initLiLiao()

    },

  }
}

</script>

<style>
.vxe-button{
  top: -2px;
  width: 80px;
  height: 27px !important;
}

.vxe-input{
  width: 115px;
}

#searchPl {
  position: absolute;
  top:43px;
  left:15px;
  border: none;
  margin: 0;
}

#searchPl input{
  border: none;
  background: none;
  outline: none;
}

#menu {
  display: none;
  position: absolute;
  width: 100px;
  height: 180px;
  background-color: white;
  box-shadow: 0 0 5px grey;
  border-radius: 3px;
  overflow-y: auto;
}

#menu button {
  width: 100%;
  background-color: white;
  border: none;
  margin: 0;
  font-size: 12px;
  padding: 10px;
}

#menu button:hover {
  background-color: lightgray;
}

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