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

<template>
  <div class="container">
    <div id="pwpg" class="pwpg" ref="pwpg"></div>
    <PWanPgd id="pwpgd" ref="pwpgd" @initPgd="initPgd" :height="height" :worker="getWorker" :workers="workers"/>
    <PwanSgd id="pwsgd" ref="pwsgd" :worker="getWorker" />
    <ZyjhSelectComp id="selectComp" ref="selRef"  @initWorkers="initWorkers"/>
    <div id="pdf" class="pdf" :style="{height:height,overflowY:'auto'}" v-if="pdfShow">
      <pdf v-for="i in numPages" :key="i" :page="i" :src="pdfUrl" />
    </div>
    <TipsComp />
    <Drawer ref="drawer"/>
  </div>
</template>

<script>
// import * as pdfjsLib from 'pdfjs-dist';
import PWanPgd from "@/views/zyjhzx/pwanpgong/comps/PwanPgd.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 {getForeman, getYcldw} from "@/api/zyjh";
import ZyjhSelectComp from "@/views/zyjhzx/components/SelectComp.vue";
import TipsComp from "@/views/zyjhzx/components/TipsComp.vue";
import Drawer from "@/views/zyjhzx/components/Drawer.vue";
import pdf from "vue-pdf";
import PwanSgd from "@/views/zyjhzx/pwanpgong/comps/PwanSgd.vue";

export default {
  name:'PWanPGong',
  components: {PwanSgd, Drawer, TipsComp, ZyjhSelectComp, PWanPgd,pdf},
  data(){
    return {
      title:'抛 丸 作 业 派 工',
      width:0,
      height:0,
      stage:null,
      layer:null,
      pgdGroup:null,
      drawGd:null,
      getCurrentWorker:null,
      setWorkers:null,
      workers:null,
      tlt:null,
      zt:'21',
      workerGroup:null,
      person:null,
      zyq:null,
      deviceId:null,
      dwGroup:null,
      pdfShow:false,
      pdfUrl:null,
      numPages:null,
    }
  },
  mounted() {
    this.$socket.open()
    this.initKonvaStage();
  },
  created(){
    this.zyq=this.$route.query.zyq
    this.deviceId=this.$route.query.deviceId||''
    window.addEventListener('resize', this.initKonvaStage)
  },
  sockets:{
    slComplete(){
      this.initDw()
      this.$refs.pwpgd.initData()
    }
  },
  methods:{
    // loadPdf(url){
    //   this.pdfShow=false
    //   this.pdfUrl=null
    //   this.numPages=null
    //   this.pdfUrl=pdf.createLoadingTask(url)
    //   this.pdfUrl.promise.then((pdf) => {
    //       this.numPages = pdf.numPages;
    //       this.pdfShow=true
    //     });
    // },
    // loadPdf(url) {
    //   const loadingTask = pdfjsLib.getDocument(url);
    //   loadingTask.promise.then(pdf => {
    //     pdf.getPage(3).then(page => {
    //       const viewport = page.getViewport();
    //       const canvas = document.createElement('canvas');
    //       const context = canvas.getContext('2d');
    //       canvas.height = this.height;
    //       canvas.width = this.width/3;
    //       context.setTransform(1, 0, 0, -1, 0, canvas.height)
    //
    //       const renderContext = {
    //         canvasContext: context,
    //         viewport: viewport
    //       };
    //
    //       page.render(renderContext).promise.then(() => {
    //
    //         const image = new Konva.Image({
    //           x: 10,
    //           y: 10,
    //           image: canvas,
    //           width: canvas.width / (window.devicePixelRatio || 1),
    //           height: canvas.height / (window.devicePixelRatio || 1)
    //         });
    //         image.scale({
    //           x:0.6,
    //           y:0.6
    //         });
    //         image.rotation(90)
    //         image.offsetY(image.width()*1.45)
    //         this.pgdGroup.add(image);
    //       });
    //     }).catch(err => {
    //       console.error('Cannot load page', err);
    //     });
    //   }).catch(err => {
    //     console.error('Cannot load PDF document', err);
    //   });
    // },
    initPgd(pgd={}){
      const group=this.drawGd(pgd)
      this.pgdGroup.add(group)
    },
    initDw(){
      if (this.dwGroup){
        this.dwGroup.destroyChildren()
      }
      getYcldw({type:'ycl'}).then(res=>{
        console.log(res)

        const {container,dw}=drawDw(this.width,this.height)
        const {bgGroup,group}=container()
        this.dwGroup=group;
        this.layer.add(bgGroup)

        const that=this
        for (let i=0;i<res.data.length;i++){
          const item=res.data[i]
          const dwGroup=dw(i,item)
          dwGroup.on('click tap',function (){
            that.$refs.pwpgd.showData(item.list,true)
          })
          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 {layer,group}=container()
        this.workerGroup=group
        this.stage.add(layer)
      }
      this.workerGroup.x(0)
      this.workerGroup.y(0)

      getForeman({zyq:this.zyq}).then(res => {
        this.workers=res.data
        this.$refs.pwpgd.setWorkers(this.workers)
        for (let i=0;i<res.data.length;i++){
          const item=res.data[i]
          item.userName="班组长:"+item.userName
          const worker=this.person(i,item)
          this.workerGroup.add(worker)
        }
      })
      // getBzryList({zyq:this.$route.query.zyq,zt:bzType}).then(res=>{
      //   this.workers=res.data
      //   this.$refs.pwpgd.setWorkers(this.workers)
      //   for (let i=0;i<res.data.length;i++){
      //     const item=res.data[i]
      //     const worker=this.person(i,item)
      //     this.workerGroup.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)
      const that=this
      titel.on('click tap',function (){
        that.$refs.drawer.show()
      })
      this.layer.add(titel)

      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)

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

  }
}

</script>

<style>
#pdf {
  width:28.8%;
  height: 93.5vh;
  position: absolute;
  top:50px;
  right:2.5%;
  border: none;
  margin: 0;
}

#selectComp {
  width:30%;
  height: auto;
  position: absolute;
  top:10px;
  left:20px;
  border: none;
  margin: 0;
}

#pwpgd {
  width:50%;
  height: auto;
  position: absolute;
  top:200px;
  left:20px;
  border: none;
  margin: 0;
}

#pwsgd {
  width:31.5%;
  height: 93.5vh;
  position: absolute;
  top:20px;
  right:10px;
  border: none;
  margin: 0;
}

#pwpg {
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

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