You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
143 lines
3.3 KiB
143 lines
3.3 KiB
<template>
|
|
<div class="container">
|
|
<div id="pwpg" class="pwpg" ref="pwpg"></div>
|
|
<PWanPgd id="pwpgd" ref="pwpgd" @initPgd="initPgd" :pgd="pgd" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import PWanPgd from "./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 baifang from "./comps/baifang";
|
|
import drawCsd from './comps/csd'
|
|
import {getPgd, getYcldw} from "@/api/zyjh";
|
|
import liliao from "@/views/zyjhzx/sliao/comps/liliao";
|
|
import {getBzryList} from "@/api/sjzx/bzzGL";
|
|
|
|
export default {
|
|
name:'PWanFKui',
|
|
components: {PWanPgd},
|
|
data(){
|
|
return {
|
|
title:'抛 丸 作 业 反 馈',
|
|
width:0,
|
|
height:0,
|
|
stage:null,
|
|
layer:null,
|
|
pgdGroup:null,
|
|
drawGd:null,
|
|
dw:[],
|
|
pgd:[],
|
|
currentWorker:null,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initKonvaStage();
|
|
},
|
|
created(){
|
|
window.addEventListener('resize', 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
|
|
getYcldw().then(res=>{
|
|
const {container,dw}=drawDw(this.width,this.height,that.initBaiFang)
|
|
const group=container()
|
|
|
|
this.layer.add(group)
|
|
|
|
for (let i=0;i<res.data.length;i++){
|
|
const item=res.data[i]
|
|
const dwGroup=dw(i,item)
|
|
group.add(dwGroup)
|
|
}
|
|
})
|
|
},
|
|
initWorkers(){
|
|
const that=this
|
|
getBzryList({resourcesCode:'4KB002'}).then(res=>{
|
|
const {container,person}=workers(this.width,this.height)
|
|
const group=container()
|
|
this.layer.add(group)
|
|
|
|
for (let i=0;i<res.data.length;i++){
|
|
const item=res.data[i]
|
|
const worker=person(i,item)
|
|
worker.on('click touchstart',function (){
|
|
that.currentWorker=item
|
|
that.$refs.pwpgd.initData(that.currentWorker.userCode,'31')
|
|
})
|
|
group.add(worker)
|
|
worker.zIndex(1)
|
|
}
|
|
})
|
|
},
|
|
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:55%;
|
|
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>
|