xiaoning
/
gjerp_ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.抛丸派工

Browse Source
master
董哲奇 10 months ago
parent 76d8e11012
commit 2414b8621a
8 changed files with 888 additions and 0 deletions
Show Stats Download Patch File Download Diff File

26
src/views/zyjhzx/pwanpgong/comps/PwanPgd.vue
Unescape View File

@ -0,0 +1,26 @@
<template>
<VxeGrid v-bind="gridOptions" @cell-click="cellClick" />
</template>
<script>
import paoWanPgdConfig from './pgdTable'
export default {
name:'PwanPgd',
data(){
return{
gridOptions:{},
list:{},
}
},
created(){
const {options,columns}=paoWanPgdConfig()
this.gridOptions=options
this.gridOptions.columns=columns
},
methods:{
cellClick({row}){
this.$emit('initPgd',row)
}
}
}
</script>

19
src/views/zyjhzx/pwanpgong/comps/container.js
Unescape View File

@ -0,0 +1,19 @@
import Konva from "konva";
const container=function (width=0,height=0,container){
const stage = new Konva.Stage({
container: container,
width: width,
height: height,
});
const layer = new Konva.Layer();
stage.add(layer)
layer.draw();
return {
stage,layer
}
}
export default container

76
src/views/zyjhzx/pwanpgong/comps/dw.js
Unescape View File

@ -0,0 +1,76 @@
import Konva from "konva";
export default function (width,height){
const x=0,y=0,_width=width*0.16,_height=height*0.945
const container=function (){
const x=width*0.5+30,y=45
const group=new Konva.Group({
x:x,
y:y,
width:_width,
height:_height
})
const rect=new Konva.Rect({
x:0,
y:0,
width:_width,
height:_height,
stroke:'black',
strokeWidth:1,
})
group.add(rect)
return group
}
const dw=function (index,item={}){
const alignSize=2
const width=((_width-20)/alignSize),height=150
const x=index%alignSize*width+index%alignSize*10+5,y=height*(Math.floor(index/alignSize))+(Math.floor(index/alignSize)+1)*10
const group=new Konva.Group({
x:x,
y:y,
width:width,
height:height
})
group.on('click touchstart',function (){
callback(index,dw[index].list)
})
const rect=new Konva.Rect({
x:0,
y:0,
width:width,
height:height,
stroke:'black',
strokeWidth:1,
})
group.add(rect)
const text=new Konva.Text({
x:0,
y:0,
width: width,
height: height,
fill:'black',
text:item.name,
align:'center',
verticalAlign:'middle',
fontSize:20
})
group.add(text)
return group
}
return {
container,dw
}
}

69
src/views/zyjhzx/pwanpgong/comps/person.js
Unescape View File

@ -0,0 +1,69 @@
import Konva from "konva";
export default function (width,height){
const x=0,y=0,_width=width*0.5,_height=120
const container=function (){
const x=20,y=45
const group=new Konva.Group({
x:x,
y:y,
width:_width,
height:_height
})
const rect=new Konva.Rect({
x:0,
y:0,
width:_width,
height:_height,
stroke:'black',
strokeWidth:1,
})
group.add(rect)
return group
}
const person=function (index,persons={}){
const width=120,height=110
const x=index*120+(index+1)*5,y=5
const group=new Konva.Group({
x:x,
y:y,
width:width,
height:height
})
const rect=new Konva.Rect({
x:0,
y:0,
width:width,
height:height,
stroke:'black',
strokeWidth:1,
})
group.add(rect)
const text=new Konva.Text({
x:0,
y:0,
width:width,
height:height,
text: persons.name,
align: 'center',
verticalAlign:'middle',
fontSize:12
})
group.add(text)
return group
}
return{
container,person
}
}

513
src/views/zyjhzx/pwanpgong/comps/pgd.js
Unescape View File

@ -0,0 +1,513 @@
import Konva from "konva";
import QRCode from 'qrcode'
export default function (width,height){
const x=width*0.66+40,y=45,_width=width*0.30,_height=height*0.945
const container=function (){
const group=new Konva.Group({
x:x,
y:y,
width:_width,
height:_height
})
const rect=new Konva.Rect({
x:0,
y:0,
width:_width,
height:_height,
stroke:'black',
strokeWidth:1,
})
group.add(rect)
return group
}
const drawGd=function (data){
// this.layer.destroyChildren();
const group=new Konva.Group({
x:0,
y:0,
width:_width,
height:_height
})
const rect=new Konva.Rect({
x:0,
y:0,
width:_width,
height:_height,
fill:'white'
})
group.add(rect)
const title=new Konva.Text({
x:0,
y:10,
width:_width,
height:35,
lineHeight:1,
stroke:'black',
strokeWidth:1.2,
text:'大连重工大连钢材加工配送有限公司',
align:'center',
fontSize:22,
})
group.add(title)
const sgdTitle=new Konva.Text({
x:0,
y:40,
width:_width,
height:25,
lineHeight:1,
stroke:'black',
strokeWidth:1,
text:'抛丸施工单',
align:'center',
fontSize:20,
})
group.add(sgdTitle)
const dhTitle=new Konva.Text({
x:0,
y:50,
width:_width-48,
height:15,
lineHeight:1,
text:'单号:PW_'+data.gdh,
align:'right',
fontSize:12,
})
group.add(dhTitle)
const group0=new Konva.Group({
x:15,
y:65,
width:_width-60,
height:_width-100,
})
group.add(group0)
const group1=drawCzbh(data)
group0.add(group1)
const group2=drawPlAndFd(data)
group0.add(group2)
const group3=drawTzbh(data)
group0.add(group3)
const group4=drawTlt(data)
group0.add(group4)
const group5=drawJs(data)
group0.add(group5)
const group6=drawHb(data)
group0.add(group6)
const group7=drawBz(data)
group0.add(group7)
const group8=drawQz(data)
group0.add(group8)
console.log(data)
generateQRCode(data.gdh,group0)
return group
}
const drawQz=function (data){
const group=new Konva.Group({
x:0,
y:620,
width:(_width-60),
height:30,
})
const jsText=new Konva.Text({
x:5,
y:1,
width:(_width-60),
height:30,
lineHeight:1,
stroke:'black',
strokeWidth:0.8,
text:'负责人:',
fontSize:18,
verticalAlign:'middle'
})
group.add(jsText)
return group
}
const drawBz=function (data){
const group=new Konva.Group({
x:0,
y:440,
width:(_width-60),
height:180,
})
const rect=new Konva.Rect({
x:0,
y:0,
width:(_width-60),
height:180,
stroke:'black',
strokeWidth:1,
})
group.add(rect)
return group
}
const drawHb=function (data){
const group=new Konva.Group({
x:0,
y:410,
width:(_width-60),
height:30,
})
const jsRect=new Konva.Rect({
x:0,
y:0,
width:(_width-60),
height:30,
stroke:'black',
strokeWidth:1,
})
group.add(jsRect)
const jsText=new Konva.Text({
x:0,
y:0,
width:(_width-60),
height:30,
lineHeight:1,
stroke:'black',
strokeWidth:0.8,
text:'回报',
fontSize:18,
align:'center',
verticalAlign:'middle'
})
group.add(jsText)
const plRect=new Konva.Rect({
x:0,
y:30,
width:(_width-60),
height:30,
stroke:'black',
strokeWidth:1,
})
group.add(plRect)
const plText=new Konva.Text({
x:0,
y:30,
width:(_width-60)/2,
height:30,
lineHeight:1,
stroke:'black',
strokeWidth:0.8,
text:data.jsr,
fontSize:18,
align:'center',
verticalAlign:'middle'
})
const fdRect=new Konva.Rect({
x:(_width-60)/2,
y:30,
width:(_width-60)/2,
height:30,
stroke:'black',
strokeWidth:1,
})
group.add(fdRect)
const fdText=new Konva.Text({
x:(_width-60)/2,
y:30,
width:(_width-60)/2,
height:30,
lineHeight:1,
stroke:'black',
strokeWidth:0.8,
text:data.jssj,
fontSize:18,
align:'center',
verticalAlign:'middle'
})
group.add(fdText)
group.add(plText)
return group
}
const drawJs=function (data){
const group=new Konva.Group({
x:0,
y:350,
width:(_width-60),
height:30,
})
const jsRect=new Konva.Rect({
x:0,
y:0,
width:(_width-60),
height:30,
stroke:'black',
strokeWidth:1,
})
group.add(jsRect)
const jsText=new Konva.Text({
x:0,
y:0,
width:(_width-60),
height:30,
lineHeight:1,
stroke:'black',
strokeWidth:0.8,
text:'接收',
fontSize:18,
align:'center',
verticalAlign:'middle'
})
group.add(jsText)
const plRect=new Konva.Rect({
x:0,
y:30,
width:(_width-60),
height:30,
stroke:'black',
strokeWidth:1,
})
group.add(plRect)
const plText=new Konva.Text({
x:0,
y:30,
width:(_width-60)/2,
height:30,
lineHeight:1,
stroke:'black',
strokeWidth:0.8,
text:data.jsr,
fontSize:18,
align:'center',
verticalAlign:'middle'
})
const fdRect=new Konva.Rect({
x:(_width-60)/2,
y:30,
width:(_width-60)/2,
height:30,
stroke:'black',
strokeWidth:1,
})
group.add(fdRect)
const fdText=new Konva.Text({
x:(_width-60)/2,
y:30,
width:(_width-60)/2,
height:30,
lineHeight:1,
stroke:'black',
strokeWidth:0.8,
text:data.jssj,
fontSize:18,
align:'center',
verticalAlign:'middle'
})
group.add(fdText)
group.add(plText)
return group
}
const drawTlt=function (data){
const group=new Konva.Group({
x:0,
y:150,
width:(_width-60),
height:200,
})
const rect=new Konva.Rect({
x:0,
y:0,
width:(_width-60),
height:200,
stroke:'black',
strokeWidth:1,
})
group.add(rect)
return group
}
const drawTzbh=function (data){
const group=new Konva.Group({
x:0,
y:120,
width:(_width-60),
height:30,
})
const rect=new Konva.Rect({
x:0,
y:0,
width:(_width-60),
height:30,
stroke:'black',
strokeWidth:1,
})
group.add(rect)
const text=new Konva.Text({
x:0,
y:0,
width:(_width-60),
height:30,
lineHeight:1,
stroke:'black',
strokeWidth:0.8,
text:data.tzbh,
fontSize:18,
align:'center',
verticalAlign:'middle'
})
group.add(text)
return group
}
const drawPlAndFd=function (data){
const group=new Konva.Group({
x:0,
y:60,
width:(_width-188),
height:60,
})
const plRect=new Konva.Rect({
x:0,
y:0,
width:(_width-188)/2,
height:60,
stroke:'black',
strokeWidth:1,
})
group.add(plRect)
const plText=new Konva.Text({
x:0,
y:0,
width:(_width-188)/2,
height:60,
lineHeight:1,
stroke:'black',
strokeWidth:0.8,
text:'批量:'+data.dcPl,
fontSize:18,
align:'center',
verticalAlign:'middle'
})
group.add(plText)
const fdRect=new Konva.Rect({
x:(_width-188)/2,
y:0,
width:(_width-188)/2,
height:60,
stroke:'black',
strokeWidth:1,
})
group.add(fdRect)
const fdText=new Konva.Text({
x:(_width-188)/2,
y:0,
width:(-width-188)/2,
height:60,
lineHeight:1,
stroke:'black',
strokeWidth:0.8,
text:'分段:'+data.dcFd,
fontSize:18,
align:'center',
verticalAlign:'middle'
})
group.add(fdText)
return group
}
const drawCzbh=function (data){
const czbhGroup=new Konva.Group({
x:0,
y:0,
width:(_width-188),
height:60,
})
const czbhRect=new Konva.Rect({
x:0,
y:0,
width:(_width-188),
height:60,
stroke:'black',
strokeWidth:1,
})
czbhGroup.add(czbhRect)
const czbhText=new Konva.Text({
x:0,
y:0,
width:(_width-188),
height:60,
lineHeight:1,
stroke:'black',
strokeWidth:0.8,
text:'船号:'+data.dcCh,
fontSize:18,
align:'center',
verticalAlign:'middle'
})
czbhGroup.add(czbhText)
return czbhGroup
}
const generateQRCode=function (text,group) {
const imgSize=118
const rect=new Konva.Rect({
x:385,
y:0,
width:128.7,
height:120,
stroke:'black',
strokeWidth:1,
})
group.add(rect)
QRCode.toDataURL(text,{width:600,height:600,margin:1})
.then(url => {
const imageObj = new Image();
imageObj.src = url;
imageObj.onload = function () {
const shape = new Konva.Image({
x: 390,
y: 1,
width: imgSize,
height: imgSize,
image: imageObj,
});
group.add(shape)
}
}).catch(err => {
console.error(err);
});
}
return {
container,drawGd
}
}

46
src/views/zyjhzx/pwanpgong/comps/pgdTable.js
Unescape View File

@ -0,0 +1,46 @@
export default function () {
const options={
height:740,
align:'center',
border: true,
resizable: true,
keepSource:true,
size:'mini',
showOverflow: true,
scrollY:{enable:true},
data:[
{dcCh:'G175K-6',gdh:'20240812101',dcPl:'001',dcFd:'2302','tzbh':'1231232'}
]
}
const gdhFormat=function ({cellValue}){
if (cellValue){
return 'PW'+cellValue
}
return ''
}
const columns = [
{ type: 'checkbox', width: 40 },
{ type: 'seq',title:'序号', width: 60 },
{ field: 'gdh',title:'派工单号', width: 120,formatter: gdhFormat},
{field: '', title: '抛丸位置', width: 80},
{field: '', title: '垛位', width: 60},
{field: '', title: '层数', width: 60},
{field: 'dcCh', title: '船号', width: 80},
{field: 'dcPl', title: '批量', width: 80},
{field: '', title: '材质', width: 80},
{field: '', title: '规格', width: 100},
{field: '', title: '炉批号', width: 100},
{field: 'tzbh', title: '套料图号', width: 100},
{field: '', title: '接收人', width: 80},
{field: '', title: '接收时间', width: 100},
{field: '', title: '反馈人', width: 80},
{field: '', title: '反馈时间', width: 100},
{field: '', title: '状态', width: 60},
]
return {
options,
columns,
}
}

18
src/views/zyjhzx/pwanpgong/comps/title.js
Unescape View File

@ -0,0 +1,18 @@
import Konva from "konva";
const title=function (width,height,title) {
return new Konva.Text({
x: 0,
y: 8,
width: width,
height: 20,
lineHeight: 1,
stroke: 'blue',
strokeWidth: 2,
text: title,
align: 'center',
fontSize: 32,
})
}
export default title

121
src/views/zyjhzx/pwanpgong/index.vue
Unescape View File

@ -0,0 +1,121 @@
<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'},{name:'垛位2'},
{name:'垛位3'},{name:'垛位4'},
])
}).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>
Write Preview
Loading…
Cancel
Save