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

<template>
  <div class="container">
    <div id="pwpg" class="pwpg" ref="pwpg"></div>
    <QgePgd id="pwpgd" ref="pwpgd" @initPgd="initPgd" />
  </div>
</template>

<script>
import PWanPgd from "./comps/QgePgd.vue";
import container from "./comps/container";
import drawTitle from './comps/title'
import workers from "./comps/person";
import drawDw from './comps/dw'
import drawPgd from './comps/pgd'
import baifang from "./comps/baifang";
import drawCsd from './comps/sb'
import QgePgd from "@/views/zyjhzx/qgefkui/comps/QgePgd.vue";

export default {
  name:'PWanFKui',
  components: {QgePgd, PWanPgd},
  data(){
    return {
      title:'切 割 作 业 反 馈',
      width:0,
      height:0,
      stage:null,
      layer:null,
      pgdGroup:null,
      drawGd:null,
      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:{
    initPgd(pgd={}){
      const group=this.drawGd(pgd)
      this.pgdGroup.add(group)
    },
    initBaiFang(index,list){
      if (this.slGroup){
        this.slGroup.destroyChildren()
      }
      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)
    },
    initDw(){
      const that=this
      new Promise(resolve => {
        return resolve(this.dw)
      }).then(res=>{
        console.log(this)
        const {container,dw}=drawDw(this.width,this.height,that.initBaiFang)
        const group=container()

        this.layer.add(group)

        for (let i=0;i<res.length;i++){
          const item=res[i]
          const dwGroup=dw(i,item)
          group.add(dwGroup)
        }
      })
    },
    initWorkers(){
      new Promise(resolve => {
        return resolve([
          {name:'张三1'},{name:'张三2'},
          {name:'张三1'},{name:'张三2'},
        ])
      }).then(res=>{
        const {container,person}=workers(this.width,this.height,res)
        const group=container()
        this.layer.add(group)

        for (let i=0;i<res.length;i++){
          const item=res[i]
          const worker=person(i,item)
          group.add(worker)
        }
      })
    },
    initKonvaStage(){
      this.width=this.$refs.pwpg.clientWidth
      this.height=this.$refs.pwpg.clientHeight
      const {stage,layer}=container(this.width,this.height,'pwpg')
      this.stage=stage
      this.layer=layer

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

      this.initWorkers()

      this.initDw()

      const {container:pgdContainer,drawGd}=drawPgd(this.width,this.height)
      this.drawGd=drawGd
      this.pgdGroup=pgdContainer()
      this.layer.add(this.pgdGroup)

      const csdGroup=drawCsd(this.width,this.height)
      this.layer.add(csdGroup)
    },
  }
}

</script>

<style>
#pwpgd {
  width:66%;
  height: auto;
  position: absolute;
  top:45px;
  left:20px;
  border: none;
  margin: 0;
}

#pwpg {
  overflow: hidden;
  width: 100%;
  height: 100vh;
  aspect-ratio: 16/9;
}

.container{
  background: #ddd;
}
</style>