diff --git a/src/views/zyjhzx/pwanpgong/comps/PwanPgd.vue b/src/views/zyjhzx/pwanpgong/comps/PwanPgd.vue new file mode 100644 index 0000000..06eb16c --- /dev/null +++ b/src/views/zyjhzx/pwanpgong/comps/PwanPgd.vue @@ -0,0 +1,26 @@ + + + diff --git a/src/views/zyjhzx/pwanpgong/comps/container.js b/src/views/zyjhzx/pwanpgong/comps/container.js new file mode 100644 index 0000000..6df3bde --- /dev/null +++ b/src/views/zyjhzx/pwanpgong/comps/container.js @@ -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 diff --git a/src/views/zyjhzx/pwanpgong/comps/dw.js b/src/views/zyjhzx/pwanpgong/comps/dw.js new file mode 100644 index 0000000..45c30f9 --- /dev/null +++ b/src/views/zyjhzx/pwanpgong/comps/dw.js @@ -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 + } + +} diff --git a/src/views/zyjhzx/pwanpgong/comps/person.js b/src/views/zyjhzx/pwanpgong/comps/person.js new file mode 100644 index 0000000..e661e58 --- /dev/null +++ b/src/views/zyjhzx/pwanpgong/comps/person.js @@ -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 + } +} diff --git a/src/views/zyjhzx/pwanpgong/comps/pgd.js b/src/views/zyjhzx/pwanpgong/comps/pgd.js new file mode 100644 index 0000000..efd3864 --- /dev/null +++ b/src/views/zyjhzx/pwanpgong/comps/pgd.js @@ -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 + } +} diff --git a/src/views/zyjhzx/pwanpgong/comps/pgdTable.js b/src/views/zyjhzx/pwanpgong/comps/pgdTable.js new file mode 100644 index 0000000..4bf00c5 --- /dev/null +++ b/src/views/zyjhzx/pwanpgong/comps/pgdTable.js @@ -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, + } +} diff --git a/src/views/zyjhzx/pwanpgong/comps/title.js b/src/views/zyjhzx/pwanpgong/comps/title.js new file mode 100644 index 0000000..711a4ae --- /dev/null +++ b/src/views/zyjhzx/pwanpgong/comps/title.js @@ -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 diff --git a/src/views/zyjhzx/pwanpgong/index.vue b/src/views/zyjhzx/pwanpgong/index.vue new file mode 100644 index 0000000..843f1df --- /dev/null +++ b/src/views/zyjhzx/pwanpgong/index.vue @@ -0,0 +1,121 @@ + + + + +