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

<template>
  <div class="container">
    <div id="pwpg" class="pwpg" ref="pwpg"></div>
    <QgePgd id="qgfkpgd" v-if="pgdShow" ref="hxpgd" @initPgd="initPgd" :pgd="pgd" :worker="getWorker" :dw="dw" :workers="workers" :getSelectSbbm="getSelectSbbm" @pgdClick="pgdClick"/>
    <ZyjhSelectComp id="selectComp" ref="selRef"  @initWorkers="initWorkers" @clear="clear"/>
    <TipsComp />
    <Drawer ref="drawer"/>
  </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 drawSb from './comps/sb'
import baifang from "./comps/baifang";
import {getBzryByBz, getPgd, getYcldw, shangLiao} from "@/api/zyjh";
import {getBzryList} from "@/api/sjzx/bzzGL";
import QgePgd from "@/views/zyjhzx/qgefkui/comps/QgePgd.vue";
import ZyjhSelectComp from "@/views/zyjhzx/components/SelectComp.vue";
import TipsComp from "@/views/zyjhzx/components/TipsComp.vue";
import Drawer from "@/views/zyjhzx/components/Drawer.vue";

export default {
  name: 'QGeFKui',
  components: {Drawer, TipsComp, ZyjhSelectComp, QgePgd},
  data() {
    return {
      title: '切 割 作 业 报 工',
      pgdShow:false,
      width:0,
      height:0,
      stage:null,
      layer:null,
      sljhGroup:null,
      pgdGroup:null,
      drawGd:null,
      dw:[],
      pgd:[],
      slGroup:null,
      currentDw:null,
      currentDwIndex:null,
      currentWorker:null,
      getCurrentWorker:null,
      setWorkers:null,
      workers:null,
      dwGroup:null,
      workerGroup:null,
      person:null,
      getSelectSbbm:null,
    }
  },
  mounted() {
    this.$socket.open()
    this.wsSubscribe()
    this.initKonvaStage();
  },
  created(){
    // window.addEventListener('resize', this.initKonvaStage)
  },
  sockets:{},
  methods: {
    wsSubscribe(){
      this.sockets.subscribe('qgComplete', data => {
        if (this.currentDw&&this.currentDw.id===data.dwId) {
          if (this.slGroup){
            this.slGroup.destroyChildren()
          }
          for (let i = 0; i < this.dw[this.currentDwIndex].list.length; i++) {
            const item=this.dw[this.currentDwIndex].list[i]
            if (item.czbh===data.czbh&&item.pl===data.pl&&item.tlth===data.tlth){
              this.dw[this.currentDwIndex].list.splice(i,1)
              break
            }
          }
          this.drawBaiFang(this.dw[this.currentDwIndex].list)
          this.initDw()
          this.$refs.hxpgd.initData(this.currentWorker.userCode,'61')
        }
      })
    },
    initPgd(pgd = {}) {
      const group = this.drawGd(pgd)
      this.pgdGroup.add(group)
    },
    pgdClick(option){
      let index=-1
      let dw=null
      for (const item of this.dw) {
        index+=1
        if ((item.id+'')===option.lldw){
          dw=item
        }
      }
      this.dwGroup.children[index].selected()

      this.initDwInfo(index,dw)
      const that=this
      this.slGroup.children.forEach(item=>{
        const data=item.getAttr('item')
        if (data.czbh===option.dcCh){
          const imageObj = new Image();
          imageObj.src = require('@/assets/pwan/gbSelectBg.png');
          imageObj.onload = function () {
            const shape = new Konva.Image({
              x: 10,
              y: 0,
              offsetY:5,
              width: that.width*0.32-20,
              height:50,
              image: this,
            });
            item.add(shape)
            shape.zIndex(0)
          }
        }
      })
    },
    initDwInfo(index,dw){
      if (this.slGroup){
        this.slGroup.destroyChildren()
      }
      this.canSl=true
      this.currentDw=dw
      this.currentDwIndex=index
      !!dw&&this.drawBaiFang(dw.list)
    },
    initBaiFang(){
      const {slGroup,handler,bgGroup:slBgGroup}= baifang({width:this.width,height:this.height})
      this.slGroup=slGroup
      this.layer.add(slBgGroup)
      this.drawBaiFang=handler
    },
    initDw() {
      if (this.dwGroup){
        this.dwGroup.destroyChildren()
      }
      const that = this
      getYcldw({type:'llj'}).then(res => {
        const {container, dw} = drawDw(this.width, this.height, that.initDwInfo)
        const {bgGroup,group} = container()
        this.dwGroup=group
        this.layer.add(bgGroup)
        this.dw=res.data

        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(bzType) {
      if (this.workerGroup){
        this.workerGroup.destroyChildren()
      }else{
        const {container,person,getCurrentWorker}=workers(this.width,this.height)
        this.getCurrentWorker=getCurrentWorker
        this.person=person
        const {bgGroup,group}=container()
        this.workerGroup=group
        this.layer.add(bgGroup)
      }
      getBzryByBz({zyq:this.$route.query.zyq,zt:bzType}).then(res => {
        res.data=res.data.filter(item=>item.position==='数控'||item.position==='龙门'||item.position==='班长')
        this.workers=res.data
        this.setWorkers(res.data)
        const that=this
        for (let i=0;i<res.data.length;i++){
          const item=res.data[i]
          const worker=this.person(i,item)
          worker.on('click touchstart',function (){
            that.currentWorker=item
            that.$refs.hxpgd.initData(that.currentWorker.userCode,'61')
          })
          this.workerGroup.add(worker)
        }
        this.workerGroup.x(0)
        this.workerGroup.y(0)
      })
    },
    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)
      const that=this
      titel.on('click tap',function (){
        console.log(111)
        that.$refs.drawer.show()
      })
      this.layer.add(titel)

      this.initWorkers(this.$refs.selRef.getData().bzType)

      this.initDw()

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

      const {container:csdGroup,getSelectSbbm} = drawSb(this.width, this.height)
      this.getSelectSbbm=getSelectSbbm
      this.layer.add(csdGroup)

      this.initBaiFang()

      this.pgdShow=true
    },
    clear(){
      console.log('qgfk')
      this.stage.remove()
    }
  }
}

</script>

<style>
#selectComp {
  width:50%;
  height: auto;
  position: absolute;
  top:10px;
  left:20px;
  border: none;
  margin: 0;
}
#qgfkpgd {
  width: 67%;
  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>