You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
492 lines
9.0 KiB
492 lines
9.0 KiB
import Konva from "konva";
|
|
import QRCode from 'qrcode'
|
|
|
|
export default function (width,height){
|
|
const x=width*0.66+40,y=40,_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 bgObj = new Image();
|
|
bgObj.src = require('@/assets/pwan/pgdbg.png');
|
|
bgObj.onload = function () {
|
|
const shape = new Konva.Image({
|
|
x: 0,
|
|
y: 0,
|
|
width: _width,
|
|
height:_height,
|
|
image: this,
|
|
});
|
|
group.add(shape)
|
|
shape.zIndex(0)
|
|
}
|
|
return group
|
|
}
|
|
|
|
const drawGd=function (data){
|
|
// this.layer.destroyChildren();
|
|
|
|
const group=new Konva.Group({
|
|
x:13,
|
|
y:12,
|
|
width:_width,
|
|
height:_height
|
|
})
|
|
|
|
const rect=new Konva.Rect({
|
|
x:0,
|
|
y:0,
|
|
width:_width-25,
|
|
height:_height-20,
|
|
})
|
|
group.add(rect)
|
|
|
|
const title=new Konva.Text({
|
|
x:0,
|
|
y:10,
|
|
width:_width,
|
|
height:35,
|
|
fill:'#fff',
|
|
text:'大连重工大连钢材加工配送有限公司',
|
|
align:'center',
|
|
fontSize:22,
|
|
})
|
|
group.add(title)
|
|
|
|
const sgdTitle=new Konva.Text({
|
|
x:0,
|
|
y:40,
|
|
width:_width,
|
|
height:25,
|
|
lineHeight:1,
|
|
fill:'#fff',
|
|
strokeWidth:1,
|
|
text:'抛丸施工单',
|
|
align:'center',
|
|
fontSize:20,
|
|
})
|
|
group.add(sgdTitle)
|
|
|
|
const dhTitle=new Konva.Text({
|
|
x:_width*0.7,
|
|
y:50,
|
|
width:_width-48,
|
|
height:15,
|
|
fill:'#fff',
|
|
text:`单号:${data.gdh?'PW_'+data.gdh:''}`,
|
|
align:'left',
|
|
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,
|
|
fill:'#fff',
|
|
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:'#4991E5',
|
|
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:'#4991E5',
|
|
strokeWidth:1,
|
|
})
|
|
group.add(jsRect)
|
|
|
|
const jsText=new Konva.Text({
|
|
x:0,
|
|
y:0,
|
|
width:(_width-60),
|
|
height:30,
|
|
fill:'#fff',
|
|
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:'#4991E5',
|
|
strokeWidth:1,
|
|
})
|
|
group.add(plRect)
|
|
|
|
const plText=new Konva.Text({
|
|
x:0,
|
|
y:30,
|
|
width:(_width-60)/2,
|
|
height:30,
|
|
fill:'#fff',
|
|
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:'#4991E5',
|
|
strokeWidth:1,
|
|
})
|
|
group.add(fdRect)
|
|
|
|
const fdText=new Konva.Text({
|
|
x:(_width-60)/2,
|
|
y:30,
|
|
width:(_width-60)/2,
|
|
height:30,
|
|
fill:'#fff',
|
|
text:data.pwfkrq,
|
|
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:'#4991E5',
|
|
strokeWidth:1,
|
|
})
|
|
group.add(jsRect)
|
|
|
|
const jsText=new Konva.Text({
|
|
x:0,
|
|
y:0,
|
|
width:(_width-60),
|
|
height:30,
|
|
fill:'#fff',
|
|
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:'#4991E5',
|
|
strokeWidth:1,
|
|
})
|
|
group.add(plRect)
|
|
|
|
const plText=new Konva.Text({
|
|
x:0,
|
|
y:30,
|
|
width:(_width-60)/2,
|
|
height:30,
|
|
fill:'#fff',
|
|
text:data.pwry,
|
|
fontSize:18,
|
|
align:'center',
|
|
verticalAlign:'middle'
|
|
})
|
|
|
|
const fdRect=new Konva.Rect({
|
|
x:(_width-60)/2,
|
|
y:30,
|
|
width:(_width-60)/2,
|
|
height:30,
|
|
stroke:'#4991E5',
|
|
strokeWidth:1,
|
|
})
|
|
group.add(fdRect)
|
|
|
|
const fdText=new Konva.Text({
|
|
x:(_width-60)/2,
|
|
y:30,
|
|
width:(_width-60)/2,
|
|
height:30,
|
|
fill:'#fff',
|
|
text:data.pwpgrq||'',
|
|
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:'#4991E5',
|
|
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:'#4991E5',
|
|
strokeWidth:1,
|
|
})
|
|
group.add(rect)
|
|
|
|
const text=new Konva.Text({
|
|
x:0,
|
|
y:0,
|
|
width:(_width-60),
|
|
height:30,
|
|
fill:'#fff',
|
|
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:'#4991E5',
|
|
strokeWidth:1,
|
|
})
|
|
group.add(plRect)
|
|
|
|
const plText=new Konva.Text({
|
|
x:0,
|
|
y:0,
|
|
width:(_width-188)/2,
|
|
height:60,
|
|
fill:'#fff',
|
|
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:'#4991E5',
|
|
strokeWidth:1,
|
|
})
|
|
group.add(fdRect)
|
|
|
|
const fdText=new Konva.Text({
|
|
x:(_width-188)/2,
|
|
y:0,
|
|
width:(-width-188)/2,
|
|
height:60,
|
|
fill:'#fff',
|
|
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:'#4991E5',
|
|
strokeWidth:1,
|
|
})
|
|
czbhGroup.add(czbhRect)
|
|
|
|
const czbhText=new Konva.Text({
|
|
x:0,
|
|
y:0,
|
|
width:(_width-188),
|
|
height:60,
|
|
fill:'#fff',
|
|
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:'#4991E5',
|
|
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
|
|
}
|
|
}
|