commit
ff8d8a2a01
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<VxeGrid v-bind="gridOptions" @cell-click="cellClick" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import paoWanPgdConfig from './pgdTable'
|
||||
export default {
|
||||
name:'HxianPgd',
|
||||
data(){
|
||||
return{
|
||||
gridOptions:{},
|
||||
list:{},
|
||||
}
|
||||
},
|
||||
created(){
|
||||
const {options,columns}=paoWanPgdConfig()
|
||||
this.gridOptions=options
|
||||
this.gridOptions.columns=columns
|
||||
},
|
||||
methods:{
|
||||
cellClick({row}){
|
||||
this.$emit('initPgd',row)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,180 @@
|
||||
import Konva from "konva";
|
||||
|
||||
const baifang=function (option={}) {
|
||||
const width=option.width,height=option.height,slList=option.dw,image=require('@/assets/gb.png')
|
||||
const _width=width*0.232,_height=height*0.67
|
||||
const container=function (){
|
||||
const x=width*0.22+30,y=300
|
||||
|
||||
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 slGroup=container()
|
||||
|
||||
const thatHeight=height
|
||||
const gangban=function (index,str){
|
||||
const group=new Konva.Group({
|
||||
x:0,
|
||||
y:thatHeight-310-index*40,
|
||||
draggable:true
|
||||
})
|
||||
|
||||
group.setAttr('index',index)
|
||||
|
||||
slGroup.add(group)
|
||||
const {x}=group.absolutePosition()
|
||||
group.dragBoundFunc(function (pos){
|
||||
return {
|
||||
x:x,
|
||||
y:pos.y
|
||||
}
|
||||
})
|
||||
let _index=0
|
||||
|
||||
group.on('dragstart',function (){
|
||||
const {x,y}=this.absolutePosition()
|
||||
this.startPos={
|
||||
x:x,
|
||||
y:y
|
||||
}
|
||||
})
|
||||
group.on('dragmove',function (){
|
||||
if(_index===0){
|
||||
_index=this.getAttr('index')
|
||||
}
|
||||
this.zIndex(999)
|
||||
const {y:thisY}=this.absolutePosition()
|
||||
|
||||
const dir=thisY-this.startPos.y>0?-40:40
|
||||
|
||||
const children=slGroup.children
|
||||
|
||||
for (const child of children) {
|
||||
if (child===this){
|
||||
return
|
||||
}
|
||||
|
||||
const {y:thatY}=child.absolutePosition()
|
||||
const moveDir=child.getAttr('moveDir')||0
|
||||
if (thisY>=thatY&&thisY<=thatY+40&&moveDir!==dir){
|
||||
child.setAttr('moveDir',dir);
|
||||
_index+=dir>0?1:-1
|
||||
child.move({
|
||||
y:dir
|
||||
})
|
||||
this.startPos={
|
||||
x:x,
|
||||
y:thisY
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
group.on('dragend',function (){
|
||||
const index=this.getAttr('index')
|
||||
const element = slList.splice(index-1, 1)[0];
|
||||
slList.splice(_index-1, 0, element);
|
||||
this.setAttr('index',_index)
|
||||
_index=0
|
||||
slGroup.destroyChildren()
|
||||
handler(slList)
|
||||
})
|
||||
|
||||
const indexRect=new Konva.Rect({
|
||||
x:0,
|
||||
y:0,
|
||||
width:40,
|
||||
height:40,
|
||||
stroke:'black',
|
||||
strokeWidth:1,
|
||||
})
|
||||
//group.add(indexRect)
|
||||
|
||||
const indexText=new Konva.Text({
|
||||
x:0,
|
||||
y:0,
|
||||
width:40,
|
||||
height:40,
|
||||
fill:'black',
|
||||
text:index,
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
})
|
||||
group.add(indexText)
|
||||
|
||||
//层 规格,套料图 船号,上料日期,计划切割日期
|
||||
const imageObj = new Image();
|
||||
const imgSize=200
|
||||
imageObj.src = image;
|
||||
imageObj.onload = function () {
|
||||
const shape = new Konva.Image({
|
||||
x: 40,
|
||||
y: 0,
|
||||
width: imgSize,
|
||||
height:40,
|
||||
image: imageObj,
|
||||
});
|
||||
group.add(shape)
|
||||
const gbText=new Konva.Text({
|
||||
x: 40,
|
||||
y: 0,
|
||||
width: imgSize,
|
||||
height:40,
|
||||
fill:'black',
|
||||
text:str+',12*2830*13090',
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
})
|
||||
group.add(gbText)
|
||||
}
|
||||
|
||||
const concent=new Konva.Text({
|
||||
x: imgSize+60,
|
||||
y: 0,
|
||||
width: imgSize-20,
|
||||
height:40,
|
||||
fill:'black',
|
||||
text:'G175K-4,001,2302\n上料:2024/07/01,切割:2024/07/04',
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
})
|
||||
group.add(concent)
|
||||
|
||||
return group
|
||||
}
|
||||
|
||||
function handler(slList){
|
||||
for (let i = 1; i <= slList.length; i++) {
|
||||
const item=slList[i-1]
|
||||
const _group=gangban(i,item,item.length)
|
||||
slGroup.add(_group)
|
||||
}
|
||||
}
|
||||
|
||||
handler(slList)
|
||||
|
||||
return {
|
||||
container,slGroup,handler
|
||||
}
|
||||
}
|
||||
|
||||
export default baifang
|
||||
@ -0,0 +1,78 @@
|
||||
import Konva from "konva";
|
||||
|
||||
export default function (width,height,callback){
|
||||
console.log(callback)
|
||||
const x=0,y=0,_width=width*0.08,_height=height*0.67
|
||||
|
||||
const container=function (){
|
||||
const x=width*0.134+30,y=300
|
||||
|
||||
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=1
|
||||
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 (){
|
||||
console.log(item)
|
||||
callback(index,item.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
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,69 @@
|
||||
import Konva from "konva";
|
||||
|
||||
export default function (width,height){
|
||||
const _width=width*0.134,_height=height*0.67
|
||||
|
||||
const container=function (){
|
||||
const x=20,y=300
|
||||
|
||||
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 alignSize=2
|
||||
const width=(_width-20)/alignSize,height=110
|
||||
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
|
||||
})
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
|
||||
export default function () {
|
||||
const options={
|
||||
height:250,
|
||||
align:'center',
|
||||
border: true,
|
||||
resizable: true,
|
||||
keepSource:true,
|
||||
size:'mini',
|
||||
showOverflow: true,
|
||||
scrollY:{enable:true},
|
||||
data:[
|
||||
{dcCh:'G175K-6',gdh:'20240812101',dcPl:'002',dcFd:'2302','tzbh':'1231232'}
|
||||
]
|
||||
}
|
||||
const gdhFormat=function ({cellValue}){
|
||||
if (cellValue){
|
||||
return 'HX'+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: '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,
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
import Konva from "konva";
|
||||
|
||||
//传送带
|
||||
export default function (width,height){
|
||||
const x=width*0.45+37,y=300,_width=width*0.2,_height=height*0.67
|
||||
const container=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,
|
||||
})
|
||||
|
||||
container.add(rect)
|
||||
|
||||
const text=new Konva.Text({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: _width,
|
||||
height:_height,
|
||||
fill:'black',
|
||||
text:'设备',
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
})
|
||||
|
||||
container.add(text)
|
||||
|
||||
return container
|
||||
}
|
||||
@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div id="pwpg" class="pwpg" ref="pwpg"></div>
|
||||
<HxianPgd id="pwpgd" ref="pwpgd" @initPgd="initPgd" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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 drawSb from './comps/sb'
|
||||
import HxianPgd from "@/views/zyjhzx/hxianfkui/comps/HxianPgd.vue";
|
||||
|
||||
export default {
|
||||
name:'PWanFKui',
|
||||
components: {HxianPgd,},
|
||||
data(){
|
||||
return {
|
||||
title:'划 线 作 业 反 馈',
|
||||
width:0,
|
||||
height:0,
|
||||
stage:null,
|
||||
layer:null,
|
||||
pgdGroup:null,
|
||||
drawGd:null,
|
||||
dw:[
|
||||
{name:'理料垛位\n垛位1\n摆放预览',
|
||||
list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
|
||||
},
|
||||
{name:'理料垛位\n垛位2\n摆放预览',
|
||||
list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
|
||||
},
|
||||
{name:'理料垛位\n垛位2\n摆放预览',
|
||||
list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
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
|
||||
new Promise(resolve => {
|
||||
return resolve(this.dw)
|
||||
}).then(res=>{
|
||||
console.log(this)
|
||||
const {container,dw}=drawDw(this.width,this.height,that.initBaiFang)
|
||||
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)
|
||||
|
||||
const csdGroup=drawSb(this.width,this.height)
|
||||
this.layer.add(csdGroup)
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#pwpgd {
|
||||
width:66%;
|
||||
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>
|
||||
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<VxeGrid v-bind="gridOptions" @cell-click="cellClick" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import paoWanPgdConfig from './pgdTable'
|
||||
export default {
|
||||
name:'HxianPgd',
|
||||
data(){
|
||||
return{
|
||||
gridOptions:{},
|
||||
list:{},
|
||||
}
|
||||
},
|
||||
created(){
|
||||
const {options,columns}=paoWanPgdConfig()
|
||||
this.gridOptions=options
|
||||
this.gridOptions.columns=columns
|
||||
},
|
||||
methods:{
|
||||
cellClick({row}){
|
||||
this.$emit('initPgd',row)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -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
|
||||
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
|
||||
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 'HX'+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: '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,
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div id="pwpg" class="pwpg" ref="pwpg"></div>
|
||||
<HxianPgd id="pwpgd" ref="pwpgd" @initPgd="initPgd" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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 HxianPgd from "@/views/zyjhzx/hxianpgong/comps/HxianPgd.vue";
|
||||
|
||||
export default {
|
||||
name:'PWanPGong',
|
||||
components: {HxianPgd},
|
||||
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>
|
||||
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<VxeGrid v-bind="gridOptions" @cell-click="cellClick" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import paoWanPgdConfig from './pgdTable'
|
||||
export default {
|
||||
name:'LliaoPgd',
|
||||
data(){
|
||||
return{
|
||||
gridOptions:{},
|
||||
list:{},
|
||||
}
|
||||
},
|
||||
created(){
|
||||
const {options,columns}=paoWanPgdConfig()
|
||||
this.gridOptions=options
|
||||
this.gridOptions.columns=columns
|
||||
},
|
||||
methods:{
|
||||
cellClick({row}){
|
||||
this.$emit('initPgd',row)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,180 @@
|
||||
import Konva from "konva";
|
||||
|
||||
const baifang=function (option={}) {
|
||||
const width=option.width,height=option.height,slList=option.dw,image=require('@/assets/gb.png')
|
||||
const _width=width*0.25,_height=height*0.67
|
||||
const container=function (){
|
||||
const x=width*0.30+30,y=300
|
||||
|
||||
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 slGroup=container()
|
||||
|
||||
const thatHeight=height
|
||||
const gangban=function (index,str){
|
||||
const group=new Konva.Group({
|
||||
x:0,
|
||||
y:thatHeight-310-index*40,
|
||||
draggable:true
|
||||
})
|
||||
|
||||
group.setAttr('index',index)
|
||||
|
||||
slGroup.add(group)
|
||||
const {x}=group.absolutePosition()
|
||||
group.dragBoundFunc(function (pos){
|
||||
return {
|
||||
x:x,
|
||||
y:pos.y
|
||||
}
|
||||
})
|
||||
let _index=0
|
||||
|
||||
group.on('dragstart',function (){
|
||||
const {x,y}=this.absolutePosition()
|
||||
this.startPos={
|
||||
x:x,
|
||||
y:y
|
||||
}
|
||||
})
|
||||
group.on('dragmove',function (){
|
||||
if(_index===0){
|
||||
_index=this.getAttr('index')
|
||||
}
|
||||
this.zIndex(999)
|
||||
const {y:thisY}=this.absolutePosition()
|
||||
|
||||
const dir=thisY-this.startPos.y>0?-40:40
|
||||
|
||||
const children=slGroup.children
|
||||
|
||||
for (const child of children) {
|
||||
if (child===this){
|
||||
return
|
||||
}
|
||||
|
||||
const {y:thatY}=child.absolutePosition()
|
||||
const moveDir=child.getAttr('moveDir')||0
|
||||
if (thisY>=thatY&&thisY<=thatY+40&&moveDir!==dir){
|
||||
child.setAttr('moveDir',dir);
|
||||
_index+=dir>0?1:-1
|
||||
child.move({
|
||||
y:dir
|
||||
})
|
||||
this.startPos={
|
||||
x:x,
|
||||
y:thisY
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
group.on('dragend',function (){
|
||||
const index=this.getAttr('index')
|
||||
const element = slList.splice(index-1, 1)[0];
|
||||
slList.splice(_index-1, 0, element);
|
||||
this.setAttr('index',_index)
|
||||
_index=0
|
||||
slGroup.destroyChildren()
|
||||
handler(slList)
|
||||
})
|
||||
|
||||
const indexRect=new Konva.Rect({
|
||||
x:0,
|
||||
y:0,
|
||||
width:40,
|
||||
height:40,
|
||||
stroke:'black',
|
||||
strokeWidth:1,
|
||||
})
|
||||
//group.add(indexRect)
|
||||
|
||||
const indexText=new Konva.Text({
|
||||
x:0,
|
||||
y:0,
|
||||
width:40,
|
||||
height:40,
|
||||
fill:'black',
|
||||
text:index,
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
})
|
||||
group.add(indexText)
|
||||
|
||||
//层 规格,套料图 船号,上料日期,计划切割日期
|
||||
const imageObj = new Image();
|
||||
const imgSize=200
|
||||
imageObj.src = image;
|
||||
imageObj.onload = function () {
|
||||
const shape = new Konva.Image({
|
||||
x: 40,
|
||||
y: 0,
|
||||
width: imgSize,
|
||||
height:40,
|
||||
image: imageObj,
|
||||
});
|
||||
group.add(shape)
|
||||
const gbText=new Konva.Text({
|
||||
x: 40,
|
||||
y: 0,
|
||||
width: imgSize,
|
||||
height:40,
|
||||
fill:'black',
|
||||
text:str+',12*2830*13090',
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
})
|
||||
group.add(gbText)
|
||||
}
|
||||
|
||||
const concent=new Konva.Text({
|
||||
x: imgSize+60,
|
||||
y: 0,
|
||||
width: imgSize-20,
|
||||
height:40,
|
||||
fill:'black',
|
||||
text:'G175K-4,001,2302\n上料:2024/07/01,切割:2024/07/04',
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
})
|
||||
group.add(concent)
|
||||
|
||||
return group
|
||||
}
|
||||
|
||||
function handler(slList){
|
||||
for (let i = 1; i <= slList.length; i++) {
|
||||
const item=slList[i-1]
|
||||
const _group=gangban(i,item,item.length)
|
||||
slGroup.add(_group)
|
||||
}
|
||||
}
|
||||
|
||||
handler(slList)
|
||||
|
||||
return {
|
||||
container,slGroup,handler
|
||||
}
|
||||
}
|
||||
|
||||
export default baifang
|
||||
@ -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
|
||||
@ -0,0 +1,38 @@
|
||||
import Konva from "konva";
|
||||
|
||||
//传送带
|
||||
export default function (width,height){
|
||||
const x=width*0.55+40,y=45,_width=width*0.1,_height=height*0.945
|
||||
const container=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,
|
||||
})
|
||||
|
||||
container.add(rect)
|
||||
|
||||
const text=new Konva.Text({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: _width,
|
||||
height:_height,
|
||||
fill:'black',
|
||||
text:'传送带',
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
})
|
||||
|
||||
container.add(text)
|
||||
|
||||
return container
|
||||
}
|
||||
@ -0,0 +1,78 @@
|
||||
import Konva from "konva";
|
||||
|
||||
export default function (width,height,callback){
|
||||
console.log(callback)
|
||||
const x=0,y=0,_width=width*0.16,_height=height*0.67
|
||||
|
||||
const container=function (){
|
||||
const x=width*0.134+30,y=300
|
||||
|
||||
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 (){
|
||||
console.log(item)
|
||||
callback(index,item.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
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,69 @@
|
||||
import Konva from "konva";
|
||||
|
||||
export default function (width,height){
|
||||
const _width=width*0.134,_height=height*0.67
|
||||
|
||||
const container=function (){
|
||||
const x=20,y=300
|
||||
|
||||
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 alignSize=2
|
||||
const width=(_width-20)/alignSize,height=110
|
||||
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
|
||||
})
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
|
||||
export default function () {
|
||||
const options={
|
||||
height:250,
|
||||
align:'center',
|
||||
border: true,
|
||||
resizable: true,
|
||||
keepSource:true,
|
||||
size:'mini',
|
||||
showOverflow: true,
|
||||
scrollY:{enable:true},
|
||||
data:[
|
||||
{dcCh:'G175K-6',gdh:'20240812101',dcPl:'002',dcFd:'2302','tzbh':'1231232'}
|
||||
]
|
||||
}
|
||||
const gdhFormat=function ({cellValue}){
|
||||
if (cellValue){
|
||||
return 'LL'+cellValue
|
||||
}
|
||||
return ''
|
||||
}
|
||||
const columns = [
|
||||
{ type: 'checkbox', width: 40 },
|
||||
{ type: 'seq',title:'序号', width: 60 },
|
||||
{ field: 'gdh',title:'派工单号', width: 120,formatter: gdhFormat},
|
||||
{field: '', title: '垛位', width: 60},
|
||||
{field: '', title: '层数', width: 60},
|
||||
{field: 'dcCh', title: '船号', width: 80},
|
||||
{field: 'dcPl', title: '批量', width: 80},
|
||||
{field: 'kw', title: '跨位', width: 80},
|
||||
{field: 'zl', 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,
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div id="pwpg" class="pwpg" ref="pwpg"></div>
|
||||
<LliaoPgd id="pwpgd" ref="pwpgd" @initPgd="initPgd" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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 LliaoPgd from "@/views/zyjhzx/lliaofkui/comps/LliaoPgd.vue";
|
||||
|
||||
export default {
|
||||
name:'PWanFKui',
|
||||
components: {LliaoPgd},
|
||||
data(){
|
||||
return {
|
||||
title:'抛 丸 作 业 反 馈',
|
||||
width:0,
|
||||
height:0,
|
||||
stage:null,
|
||||
layer:null,
|
||||
pgdGroup:null,
|
||||
drawGd:null,
|
||||
dw:[
|
||||
{name:'理料垛位\n垛位1\n摆放预览',
|
||||
list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
|
||||
},
|
||||
{name:'理料垛位\n垛位2\n摆放预览',
|
||||
list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
|
||||
},
|
||||
{name:'理料垛位\n垛位2\n摆放预览',
|
||||
list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
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
|
||||
new Promise(resolve => {
|
||||
return resolve(this.dw)
|
||||
}).then(res=>{
|
||||
console.log(this)
|
||||
const {container,dw}=drawDw(this.width,this.height,that.initBaiFang)
|
||||
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)
|
||||
|
||||
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>
|
||||
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<VxeGrid v-bind="gridOptions" @cell-click="cellClick" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import paoWanPgdConfig from './pgdTable'
|
||||
export default {
|
||||
name:'LliaoPgd',
|
||||
data(){
|
||||
return{
|
||||
gridOptions:{},
|
||||
list:{},
|
||||
}
|
||||
},
|
||||
created(){
|
||||
const {options,columns}=paoWanPgdConfig()
|
||||
this.gridOptions=options
|
||||
this.gridOptions.columns=columns
|
||||
},
|
||||
methods:{
|
||||
cellClick({row}){
|
||||
this.$emit('initPgd',row)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -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
|
||||
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
|
||||
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 'LL'+cellValue
|
||||
}
|
||||
return ''
|
||||
}
|
||||
const columns = [
|
||||
{ type: 'checkbox', width: 40 },
|
||||
{ type: 'seq',title:'序号', width: 60 },
|
||||
{ field: 'gdh',title:'派工单号', width: 120,formatter: gdhFormat},
|
||||
{field: 'dcCh', title: '船号', width: 80},
|
||||
{field: 'dcPl', title: '批量', width: 80},
|
||||
{field: 'kw', title: '跨位', width: 80},
|
||||
{field: 'zl', 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,
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div id="pwpg" class="pwpg" ref="pwpg"></div>
|
||||
<LliaoPgd id="pwpgd" ref="pwpgd" @initPgd="initPgd" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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 LliaoPgd from "@/views/zyjhzx/lliaopgong/comps/LliaoPgd.vue";
|
||||
|
||||
export default {
|
||||
name:'PWanPGong',
|
||||
components: {LliaoPgd},
|
||||
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>
|
||||
@ -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>
|
||||
@ -0,0 +1,180 @@
|
||||
import Konva from "konva";
|
||||
|
||||
const baifang=function (option={}) {
|
||||
const width=option.width,height=option.height,slList=option.dw,image=require('@/assets/gb.png')
|
||||
const _width=width*0.25,_height=height*0.67
|
||||
const container=function (){
|
||||
const x=width*0.30+30,y=300
|
||||
|
||||
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 slGroup=container()
|
||||
|
||||
const thatHeight=height
|
||||
const gangban=function (index,str){
|
||||
const group=new Konva.Group({
|
||||
x:0,
|
||||
y:thatHeight-310-index*40,
|
||||
draggable:true
|
||||
})
|
||||
|
||||
group.setAttr('index',index)
|
||||
|
||||
slGroup.add(group)
|
||||
const {x}=group.absolutePosition()
|
||||
group.dragBoundFunc(function (pos){
|
||||
return {
|
||||
x:x,
|
||||
y:pos.y
|
||||
}
|
||||
})
|
||||
let _index=0
|
||||
|
||||
group.on('dragstart',function (){
|
||||
const {x,y}=this.absolutePosition()
|
||||
this.startPos={
|
||||
x:x,
|
||||
y:y
|
||||
}
|
||||
})
|
||||
group.on('dragmove',function (){
|
||||
if(_index===0){
|
||||
_index=this.getAttr('index')
|
||||
}
|
||||
this.zIndex(999)
|
||||
const {y:thisY}=this.absolutePosition()
|
||||
|
||||
const dir=thisY-this.startPos.y>0?-40:40
|
||||
|
||||
const children=slGroup.children
|
||||
|
||||
for (const child of children) {
|
||||
if (child===this){
|
||||
return
|
||||
}
|
||||
|
||||
const {y:thatY}=child.absolutePosition()
|
||||
const moveDir=child.getAttr('moveDir')||0
|
||||
if (thisY>=thatY&&thisY<=thatY+40&&moveDir!==dir){
|
||||
child.setAttr('moveDir',dir);
|
||||
_index+=dir>0?1:-1
|
||||
child.move({
|
||||
y:dir
|
||||
})
|
||||
this.startPos={
|
||||
x:x,
|
||||
y:thisY
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
group.on('dragend',function (){
|
||||
const index=this.getAttr('index')
|
||||
const element = slList.splice(index-1, 1)[0];
|
||||
slList.splice(_index-1, 0, element);
|
||||
this.setAttr('index',_index)
|
||||
_index=0
|
||||
slGroup.destroyChildren()
|
||||
handler(slList)
|
||||
})
|
||||
|
||||
const indexRect=new Konva.Rect({
|
||||
x:0,
|
||||
y:0,
|
||||
width:40,
|
||||
height:40,
|
||||
stroke:'black',
|
||||
strokeWidth:1,
|
||||
})
|
||||
//group.add(indexRect)
|
||||
|
||||
const indexText=new Konva.Text({
|
||||
x:0,
|
||||
y:0,
|
||||
width:40,
|
||||
height:40,
|
||||
fill:'black',
|
||||
text:index,
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
})
|
||||
group.add(indexText)
|
||||
|
||||
//层 规格,套料图 船号,上料日期,计划切割日期
|
||||
const imageObj = new Image();
|
||||
const imgSize=200
|
||||
imageObj.src = image;
|
||||
imageObj.onload = function () {
|
||||
const shape = new Konva.Image({
|
||||
x: 40,
|
||||
y: 0,
|
||||
width: imgSize,
|
||||
height:40,
|
||||
image: imageObj,
|
||||
});
|
||||
group.add(shape)
|
||||
const gbText=new Konva.Text({
|
||||
x: 40,
|
||||
y: 0,
|
||||
width: imgSize,
|
||||
height:40,
|
||||
fill:'black',
|
||||
text:str+',12*2830*13090',
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
})
|
||||
group.add(gbText)
|
||||
}
|
||||
|
||||
const concent=new Konva.Text({
|
||||
x: imgSize+60,
|
||||
y: 0,
|
||||
width: imgSize-20,
|
||||
height:40,
|
||||
fill:'black',
|
||||
text:'G175K-4,001,2302\n上料:2024/07/01,切割:2024/07/04',
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
})
|
||||
group.add(concent)
|
||||
|
||||
return group
|
||||
}
|
||||
|
||||
function handler(slList){
|
||||
for (let i = 1; i <= slList.length; i++) {
|
||||
const item=slList[i-1]
|
||||
const _group=gangban(i,item,item.length)
|
||||
slGroup.add(_group)
|
||||
}
|
||||
}
|
||||
|
||||
handler(slList)
|
||||
|
||||
return {
|
||||
container,slGroup,handler
|
||||
}
|
||||
}
|
||||
|
||||
export default baifang
|
||||
@ -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
|
||||
@ -0,0 +1,38 @@
|
||||
import Konva from "konva";
|
||||
|
||||
//传送带
|
||||
export default function (width,height){
|
||||
const x=width*0.55+40,y=45,_width=width*0.1,_height=height*0.945
|
||||
const container=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,
|
||||
})
|
||||
|
||||
container.add(rect)
|
||||
|
||||
const text=new Konva.Text({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: _width,
|
||||
height:_height,
|
||||
fill:'black',
|
||||
text:'传送带',
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
})
|
||||
|
||||
container.add(text)
|
||||
|
||||
return container
|
||||
}
|
||||
@ -0,0 +1,78 @@
|
||||
import Konva from "konva";
|
||||
|
||||
export default function (width,height,callback){
|
||||
console.log(callback)
|
||||
const x=0,y=0,_width=width*0.16,_height=height*0.67
|
||||
|
||||
const container=function (){
|
||||
const x=width*0.134+30,y=300
|
||||
|
||||
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 (){
|
||||
console.log(item)
|
||||
callback(index,item.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
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,69 @@
|
||||
import Konva from "konva";
|
||||
|
||||
export default function (width,height){
|
||||
const _width=width*0.134,_height=height*0.67
|
||||
|
||||
const container=function (){
|
||||
const x=20,y=300
|
||||
|
||||
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 alignSize=2
|
||||
const width=(_width-20)/alignSize,height=110
|
||||
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
|
||||
})
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
|
||||
export default function () {
|
||||
const options={
|
||||
height:250,
|
||||
align:'center',
|
||||
border: true,
|
||||
resizable: true,
|
||||
keepSource:true,
|
||||
size:'mini',
|
||||
showOverflow: true,
|
||||
scrollY:{enable:true},
|
||||
data:[
|
||||
{dcCh:'G175K-6',gdh:'20240812101',dcPl:'002',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,
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
@ -0,0 +1,146 @@
|
||||
<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 "./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'
|
||||
|
||||
export default {
|
||||
name:'PWanFKui',
|
||||
components: {PWanPgd},
|
||||
data(){
|
||||
return {
|
||||
title:'抛 丸 作 业 反 馈',
|
||||
width:0,
|
||||
height:0,
|
||||
stage:null,
|
||||
layer:null,
|
||||
pgdGroup:null,
|
||||
drawGd:null,
|
||||
dw:[
|
||||
{name:'预处理垛位\n垛位1\n摆放预览',
|
||||
list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
|
||||
},
|
||||
{name:'预处理垛位\n垛位2\n摆放预览',
|
||||
list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
|
||||
},
|
||||
{name:'预处理垛位\n垛位2\n摆放预览',
|
||||
list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
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
|
||||
new Promise(resolve => {
|
||||
return resolve(this.dw)
|
||||
}).then(res=>{
|
||||
console.log(this)
|
||||
const {container,dw}=drawDw(this.width,this.height,that.initBaiFang)
|
||||
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)
|
||||
|
||||
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>
|
||||
@ -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>
|
||||
@ -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
|
||||
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
@ -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,
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
@ -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\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>
|
||||
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<VxeGrid v-bind="gridOptions" @cell-click="cellClick" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import paoWanPgdConfig from './pgdTable'
|
||||
export default {
|
||||
name:'QgePgd',
|
||||
data(){
|
||||
return{
|
||||
gridOptions:{},
|
||||
list:{},
|
||||
}
|
||||
},
|
||||
created(){
|
||||
const {options,columns}=paoWanPgdConfig()
|
||||
this.gridOptions=options
|
||||
this.gridOptions.columns=columns
|
||||
},
|
||||
methods:{
|
||||
cellClick({row}){
|
||||
this.$emit('initPgd',row)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,180 @@
|
||||
import Konva from "konva";
|
||||
|
||||
const baifang=function (option={}) {
|
||||
const width=option.width,height=option.height,slList=option.dw,image=require('@/assets/gb.png')
|
||||
const _width=width*0.232,_height=height*0.67
|
||||
const container=function (){
|
||||
const x=width*0.22+30,y=300
|
||||
|
||||
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 slGroup=container()
|
||||
|
||||
const thatHeight=height
|
||||
const gangban=function (index,str){
|
||||
const group=new Konva.Group({
|
||||
x:0,
|
||||
y:thatHeight-310-index*40,
|
||||
draggable:true
|
||||
})
|
||||
|
||||
group.setAttr('index',index)
|
||||
|
||||
slGroup.add(group)
|
||||
const {x}=group.absolutePosition()
|
||||
group.dragBoundFunc(function (pos){
|
||||
return {
|
||||
x:x,
|
||||
y:pos.y
|
||||
}
|
||||
})
|
||||
let _index=0
|
||||
|
||||
group.on('dragstart',function (){
|
||||
const {x,y}=this.absolutePosition()
|
||||
this.startPos={
|
||||
x:x,
|
||||
y:y
|
||||
}
|
||||
})
|
||||
group.on('dragmove',function (){
|
||||
if(_index===0){
|
||||
_index=this.getAttr('index')
|
||||
}
|
||||
this.zIndex(999)
|
||||
const {y:thisY}=this.absolutePosition()
|
||||
|
||||
const dir=thisY-this.startPos.y>0?-40:40
|
||||
|
||||
const children=slGroup.children
|
||||
|
||||
for (const child of children) {
|
||||
if (child===this){
|
||||
return
|
||||
}
|
||||
|
||||
const {y:thatY}=child.absolutePosition()
|
||||
const moveDir=child.getAttr('moveDir')||0
|
||||
if (thisY>=thatY&&thisY<=thatY+40&&moveDir!==dir){
|
||||
child.setAttr('moveDir',dir);
|
||||
_index+=dir>0?1:-1
|
||||
child.move({
|
||||
y:dir
|
||||
})
|
||||
this.startPos={
|
||||
x:x,
|
||||
y:thisY
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
group.on('dragend',function (){
|
||||
const index=this.getAttr('index')
|
||||
const element = slList.splice(index-1, 1)[0];
|
||||
slList.splice(_index-1, 0, element);
|
||||
this.setAttr('index',_index)
|
||||
_index=0
|
||||
slGroup.destroyChildren()
|
||||
handler(slList)
|
||||
})
|
||||
|
||||
const indexRect=new Konva.Rect({
|
||||
x:0,
|
||||
y:0,
|
||||
width:40,
|
||||
height:40,
|
||||
stroke:'black',
|
||||
strokeWidth:1,
|
||||
})
|
||||
//group.add(indexRect)
|
||||
|
||||
const indexText=new Konva.Text({
|
||||
x:0,
|
||||
y:0,
|
||||
width:40,
|
||||
height:40,
|
||||
fill:'black',
|
||||
text:index,
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
})
|
||||
group.add(indexText)
|
||||
|
||||
//层 规格,套料图 船号,上料日期,计划切割日期
|
||||
const imageObj = new Image();
|
||||
const imgSize=200
|
||||
imageObj.src = image;
|
||||
imageObj.onload = function () {
|
||||
const shape = new Konva.Image({
|
||||
x: 40,
|
||||
y: 0,
|
||||
width: imgSize,
|
||||
height:40,
|
||||
image: imageObj,
|
||||
});
|
||||
group.add(shape)
|
||||
const gbText=new Konva.Text({
|
||||
x: 40,
|
||||
y: 0,
|
||||
width: imgSize,
|
||||
height:40,
|
||||
fill:'black',
|
||||
text:str+',12*2830*13090',
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
})
|
||||
group.add(gbText)
|
||||
}
|
||||
|
||||
const concent=new Konva.Text({
|
||||
x: imgSize+60,
|
||||
y: 0,
|
||||
width: imgSize-20,
|
||||
height:40,
|
||||
fill:'black',
|
||||
text:'G175K-4,001,2302\n上料:2024/07/01,切割:2024/07/04',
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
})
|
||||
group.add(concent)
|
||||
|
||||
return group
|
||||
}
|
||||
|
||||
function handler(slList){
|
||||
for (let i = 1; i <= slList.length; i++) {
|
||||
const item=slList[i-1]
|
||||
const _group=gangban(i,item,item.length)
|
||||
slGroup.add(_group)
|
||||
}
|
||||
}
|
||||
|
||||
handler(slList)
|
||||
|
||||
return {
|
||||
container,slGroup,handler
|
||||
}
|
||||
}
|
||||
|
||||
export default baifang
|
||||
@ -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
|
||||
@ -0,0 +1,78 @@
|
||||
import Konva from "konva";
|
||||
|
||||
export default function (width,height,callback){
|
||||
console.log(callback)
|
||||
const x=0,y=0,_width=width*0.08,_height=height*0.67
|
||||
|
||||
const container=function (){
|
||||
const x=width*0.134+30,y=300
|
||||
|
||||
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=1
|
||||
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 (){
|
||||
console.log(item)
|
||||
callback(index,item.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
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,69 @@
|
||||
import Konva from "konva";
|
||||
|
||||
export default function (width,height){
|
||||
const _width=width*0.134,_height=height*0.67
|
||||
|
||||
const container=function (){
|
||||
const x=20,y=300
|
||||
|
||||
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 alignSize=2
|
||||
const width=(_width-20)/alignSize,height=110
|
||||
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
|
||||
})
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
|
||||
export default function () {
|
||||
const options={
|
||||
height:250,
|
||||
align:'center',
|
||||
border: true,
|
||||
resizable: true,
|
||||
keepSource:true,
|
||||
size:'mini',
|
||||
showOverflow: true,
|
||||
scrollY:{enable:true},
|
||||
data:[
|
||||
{dcCh:'G175K-6',gdh:'20240812101',dcPl:'002',dcFd:'2302','tzbh':'1231232'}
|
||||
]
|
||||
}
|
||||
const gdhFormat=function ({cellValue}){
|
||||
if (cellValue){
|
||||
return 'QG'+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: '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,
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
import Konva from "konva";
|
||||
|
||||
//传送带
|
||||
export default function (width,height){
|
||||
const x=width*0.45+37,y=300,_width=width*0.2,_height=height*0.67
|
||||
const container=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,
|
||||
})
|
||||
|
||||
container.add(rect)
|
||||
|
||||
const text=new Konva.Text({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: _width,
|
||||
height:_height,
|
||||
fill:'black',
|
||||
text:'传送带',
|
||||
align:'center',
|
||||
verticalAlign:'middle',
|
||||
})
|
||||
|
||||
container.add(text)
|
||||
|
||||
return container
|
||||
}
|
||||
@ -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
|
||||
@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div id="pwpg" class="pwpg" ref="pwpg"></div>
|
||||
<QgePgd id="pwpgd" ref="pwpgd" @initPgd="initPgd" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PWanPgd from "./comps/QgePgd.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/sb'
|
||||
import QgePgd from "@/views/zyjhzx/qgefkui/comps/QgePgd.vue";
|
||||
|
||||
export default {
|
||||
name:'PWanFKui',
|
||||
components: {QgePgd, PWanPgd},
|
||||
data(){
|
||||
return {
|
||||
title:'切 割 作 业 反 馈',
|
||||
width:0,
|
||||
height:0,
|
||||
stage:null,
|
||||
layer:null,
|
||||
pgdGroup:null,
|
||||
drawGd:null,
|
||||
dw:[
|
||||
{name:'理料垛位\n垛位1\n摆放预览',
|
||||
list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
|
||||
},
|
||||
{name:'理料垛位\n垛位2\n摆放预览',
|
||||
list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
|
||||
},
|
||||
{name:'理料垛位\n垛位2\n摆放预览',
|
||||
list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
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
|
||||
new Promise(resolve => {
|
||||
return resolve(this.dw)
|
||||
}).then(res=>{
|
||||
console.log(this)
|
||||
const {container,dw}=drawDw(this.width,this.height,that.initBaiFang)
|
||||
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)
|
||||
|
||||
const csdGroup=drawCsd(this.width,this.height)
|
||||
this.layer.add(csdGroup)
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#pwpgd {
|
||||
width:66%;
|
||||
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>
|
||||
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<VxeGrid v-bind="gridOptions" @cell-click="cellClick" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import paoWanPgdConfig from './pgdTable'
|
||||
export default {
|
||||
name:'QgePgd',
|
||||
data(){
|
||||
return{
|
||||
gridOptions:{},
|
||||
list:{},
|
||||
}
|
||||
},
|
||||
created(){
|
||||
const {options,columns}=paoWanPgdConfig()
|
||||
this.gridOptions=options
|
||||
this.gridOptions.columns=columns
|
||||
},
|
||||
methods:{
|
||||
cellClick({row}){
|
||||
this.$emit('initPgd',row)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -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
|
||||
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
|
||||
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 'QG'+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: '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,
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div id="pwpg" class="pwpg" ref="pwpg"></div>
|
||||
<QgePgd id="pwpgd" ref="pwpgd" @initPgd="initPgd" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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 QgePgd from "@/views/zyjhzx/qgepgong/comps/QgePgd.vue";
|
||||
|
||||
export default {
|
||||
name:'PWanPGong',
|
||||
components: {QgePgd},
|
||||
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>
|
||||
@ -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
|
||||
@ -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
|
||||
Loading…
Reference in new issue