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

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

<script>
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 {getBzryList} from "@/api/sjzx/bzzGL";
import {getYcldw} from "@/api/zyjh";
import QgePgd from "@/views/zyjhzx/qgepgong/comps/QgePgd.vue";

export default {
  name:'PWanPGong',
  components: {QgePgd},
  data(){
    return {
      title:'切 割 作 业 派 工',
      width:0,
      height:0,
      stage:null,
      layer:null,
      pgdGroup:null,
      drawGd:null,
      getCurrentWorker:null,
    }
  },
  mounted() {
    this.$socket.open()
    this.wsSubscribe()
    this.initKonvaStage();
  },
  created(){
    window.addEventListener('resize', this.initKonvaStage)
  },
  sockets:{},
  methods:{
    wsSubscribe(){
      this.sockets.subscribe('zyjhzx', data => {
        const currentWorker=this.getCurrentWorker()
        if (!currentWorker){
          this.$message.error(`未选择指派人员`)
          return;
        }
        if (this.zt===data.zt){
          const tmpArr=[{
            id:data.zyjh.id,
            pwry:currentWorker.userCode
          }]
          this.$refs.pwpgd.paigong0(tmpArr)
        }else{
          this.$message.error(`工单号错误:${data.gdh}`)
        }
      })
    },
    initPgd(pgd={}){
      const group=this.drawGd(pgd)
      this.pgdGroup.add(group)
    },
    initDw(){
      getYcldw({type:'llj'}).then(res=>{
        const {container,dw}=drawDw(this.width,this.height)
        const {bgGroup,group}=container()
        this.layer.add(bgGroup)

        for (let i=0;i<res.data.length;i++){
          const item=res.data[i]
          const dwGroup=dw(i,item)
          group.add(dwGroup)
        }
      })
    },
    getWorker(){
      return this.getCurrentWorker()
    },
    initWorkers(){
      getBzryList({resourcesCode:'4KB002'}).then(res=> {
        const {container, person, getCurrentWorker} = workers(this.width, this.height)
        this.getCurrentWorker = getCurrentWorker
        const {layer, group} = container()
        this.stage.add(layer)

        for (let i = 0; i < res.data.length; i++) {
          const item = res.data[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)
    },

  }
}

</script>

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

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

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