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

<template>
  <div>
    <div id="bfang" class="bfang" ref="bfangRef" />
    <BFangSearch />
    <BFangTable />
    <ZyjhSelectComp id="selectComp" ref="selRef"  @initWorkers="initWorkers"/>
  </div>
</template>

<script>
import container from "@/views/zyjhzx/bfang/comps/container";
import drawTitle from "@/views/zyjhzx/bfang/comps/title";
import BFangSearch from "@/views/zyjhzx/bfang/comps/BFangSearch.vue";
import initSearch from "@/views/zyjhzx/bfang/comps/search";
import SliaoSearch from "@/views/zyjhzx/components/SliaoSearch.vue";
import workers from "@/views/zyjhzx/bfang/comps/person";
import {getBzryByBz} from "@/api/zyjh";
import ZyjhSelectComp from "@/views/zyjhzx/components/SelectComp.vue";
import BFangShow from "@/views/zyjhzx/bfang/comps/BFangShow.vue";
import BFangTable from "@/views/zyjhzx/bfang/comps/BFangTable.vue";

export default {
  name: 'BFang',
  components: {BFangShow, ZyjhSelectComp, BFangTable, SliaoSearch, BFangSearch},
  data(){
    return{
      width:0,
      height:0,
      workers:[],
      title:' 配 盘 报 工',
      zyq:'',
      stage:null,
      layer:null,
    }
  },
  mounted() {
    this.zyq=this.$route.params.zyq;
    this.initKonvaStage();
  },
  created(){},
  methods:{
    search(){},
    initWorkers(bzType){
      if (this.workerGroup){
        this.workerGroup.destroyChildren()
      }else{
        const {container,person,getCurrentWorker}=workers(this.width,this.height)
        this.person=person
        this.getCurrentWorker=getCurrentWorker
        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==='班长')
        this.workers=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,'51')
          })
          this.workerGroup.add(worker)
        }
        this.workerGroup.x(0)
        this.workerGroup.y(0)
      })
    },
    initKonvaStage(){
      this.width=this.$refs.bfangRef.clientWidth
      this.height=this.$refs.bfangRef.clientHeight
      const {stage,layer}=container(this.width,this.height,'bfang')
      this.stage=stage
      this.layer=layer

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

      const {group}=initSearch()
      this.layer.add(group)

      this.initWorkers(this.$refs.selRef.getData().bzType)
    }
  }
}
</script>

<style>
#selectComp {
  width:50%;
  height: auto;
  position: absolute;
  top:10px;
  left:20px;
  border: none;
  margin: 0;
}
.vxe-button{
  top: 0px;
  width: 80px;
  height: 22px !important;
}

.vxe-input{
  width: 115px;
}

#bFangSearch {
  position: absolute;
  top:45px;
  left:15px;
  border: none;
  margin: 0;
}

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

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