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.
122 lines
2.6 KiB
122 lines
2.6 KiB
<template>
|
|
<div class="container">
|
|
<div id="pwpg" class="pwpg" ref="pwpg"></div>
|
|
<PWanPgd id="pwpgd" ref="pwpgd" @initPgd="initPgd" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
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'
|
|
|
|
export default {
|
|
name:'PWanPGong',
|
|
components: {PWanPgd},
|
|
data(){
|
|
return {
|
|
title:'抛 丸 作 业 派 工',
|
|
width:0,
|
|
height:0,
|
|
stage:null,
|
|
layer:null,
|
|
pgdGroup:null,
|
|
drawGd:null,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initKonvaStage();
|
|
},
|
|
methods:{
|
|
initPgd(pgd={}){
|
|
console.log(pgd)
|
|
const group=this.drawGd(pgd)
|
|
this.pgdGroup.add(group)
|
|
},
|
|
initDw(){
|
|
new Promise(resolve => {
|
|
return resolve([
|
|
{name:'垛位1\n预览信息'},{name:'垛位2\n预览信息'},
|
|
{name:'垛位3\n预览信息'},{name:'垛位4\n预览信息'},
|
|
])
|
|
}).then(res=>{
|
|
const {container,dw}=drawDw(this.width,this.height,res)
|
|
const group=container()
|
|
this.layer.add(group)
|
|
|
|
for (let i=0;i<res.length;i++){
|
|
const item=res[i]
|
|
const dwGroup=dw(i,item)
|
|
group.add(dwGroup)
|
|
}
|
|
})
|
|
},
|
|
initWorkers(){
|
|
new Promise(resolve => {
|
|
return resolve([
|
|
{name:'张三1'},{name:'张三2'},
|
|
{name:'张三1'},{name:'张三2'},
|
|
])
|
|
}).then(res=>{
|
|
const {container,person}=workers(this.width,this.height,res)
|
|
const group=container()
|
|
this.layer.add(group)
|
|
|
|
for (let i=0;i<res.length;i++){
|
|
const item=res[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%;
|
|
height: auto;
|
|
position: absolute;
|
|
top:175px;
|
|
left:20px;
|
|
border: none;
|
|
margin: 0;
|
|
}
|
|
|
|
#pwpg {
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 100vh;
|
|
aspect-ratio: 16/9;
|
|
}
|
|
|
|
.container{
|
|
background: #ddd;
|
|
}
|
|
</style>
|