diff --git a/src/assets/pwan/csd0.png b/src/assets/pwan/csd0.png new file mode 100644 index 0000000..7c83b80 Binary files /dev/null and b/src/assets/pwan/csd0.png differ diff --git a/src/assets/pwan/csd1.png b/src/assets/pwan/csd1.png new file mode 100644 index 0000000..e1899c4 Binary files /dev/null and b/src/assets/pwan/csd1.png differ diff --git a/src/assets/pwan/csdbg.png b/src/assets/pwan/csdbg.png new file mode 100644 index 0000000..5f69714 Binary files /dev/null and b/src/assets/pwan/csdbg.png differ diff --git a/src/assets/pwan/gbSelectBg.png b/src/assets/pwan/gbSelectBg.png new file mode 100644 index 0000000..0cb7878 Binary files /dev/null and b/src/assets/pwan/gbSelectBg.png differ diff --git a/src/assets/pwan/personbg.png b/src/assets/pwan/personbg.png new file mode 100644 index 0000000..5f69714 Binary files /dev/null and b/src/assets/pwan/personbg.png differ diff --git a/src/assets/pwan/pgdbg.png b/src/assets/pwan/pgdbg.png new file mode 100644 index 0000000..1e604c5 Binary files /dev/null and b/src/assets/pwan/pgdbg.png differ diff --git a/src/assets/sliao/headImage.png b/src/assets/sliao/headImage.png new file mode 100644 index 0000000..ee96591 Binary files /dev/null and b/src/assets/sliao/headImage.png differ diff --git a/src/assets/sliao/left12.png b/src/assets/sliao/left12.png new file mode 100644 index 0000000..d1452d8 Binary files /dev/null and b/src/assets/sliao/left12.png differ diff --git a/src/assets/sliao/left2.png b/src/assets/sliao/left2.png new file mode 100644 index 0000000..46e64a3 Binary files /dev/null and b/src/assets/sliao/left2.png differ diff --git a/src/assets/sliao/nameBg1.png b/src/assets/sliao/nameBg1.png new file mode 100644 index 0000000..2835b59 Binary files /dev/null and b/src/assets/sliao/nameBg1.png differ diff --git a/src/assets/sliao/nameBg2.png b/src/assets/sliao/nameBg2.png new file mode 100644 index 0000000..e74c0b1 Binary files /dev/null and b/src/assets/sliao/nameBg2.png differ diff --git a/src/assets/sliao/personbg.png b/src/assets/sliao/personbg.png new file mode 100644 index 0000000..47d0ab1 Binary files /dev/null and b/src/assets/sliao/personbg.png differ diff --git a/src/assets/sliao/personbg1.png b/src/assets/sliao/personbg1.png new file mode 100644 index 0000000..8a70cfd Binary files /dev/null and b/src/assets/sliao/personbg1.png differ diff --git a/src/assets/sliao/persongb2.png b/src/assets/sliao/persongb2.png new file mode 100644 index 0000000..da706f5 Binary files /dev/null and b/src/assets/sliao/persongb2.png differ diff --git a/src/assets/sliao/right1.png b/src/assets/sliao/right1.png new file mode 100644 index 0000000..3f578e6 Binary files /dev/null and b/src/assets/sliao/right1.png differ diff --git a/src/assets/sliao/right2.png b/src/assets/sliao/right2.png new file mode 100644 index 0000000..6b1d1dc Binary files /dev/null and b/src/assets/sliao/right2.png differ diff --git a/src/assets/sliao/selected.png b/src/assets/sliao/selected.png new file mode 100644 index 0000000..9c814f6 Binary files /dev/null and b/src/assets/sliao/selected.png differ diff --git a/src/assets/sliao/sljhItemBg.png b/src/assets/sliao/sljhItemBg.png new file mode 100644 index 0000000..9b5ae39 Binary files /dev/null and b/src/assets/sliao/sljhItemBg.png differ diff --git a/src/assets/sliao/sljhItemBg1.png b/src/assets/sliao/sljhItemBg1.png new file mode 100644 index 0000000..0e88473 Binary files /dev/null and b/src/assets/sliao/sljhItemBg1.png differ diff --git a/src/views/jhzx/symxCX.vue b/src/views/jhzx/symxCX.vue index d961540..190591a 100644 --- a/src/views/jhzx/symxCX.vue +++ b/src/views/jhzx/symxCX.vue @@ -26,7 +26,7 @@ - +
月度计划排产 获取排产结果 @@ -59,7 +59,7 @@
- +
月度计划排产 生成月度计划 diff --git a/src/views/jhzx/ydjhzxGL.vue b/src/views/jhzx/ydjhzxGL.vue index 95c4cd8..6dedaa0 100644 --- a/src/views/jhzx/ydjhzxGL.vue +++ b/src/views/jhzx/ydjhzxGL.vue @@ -25,7 +25,7 @@
- 汇总 + 准备检查 import paoWanPgdConfig from './pgdTable' +import {getPgd} from "@/api/zyjh"; export default { name:'PwanPgd', + props:{ + workers:{ + type:Array, + default:[] + } + }, data(){ return{ gridOptions:{}, - list:{}, + setExt:null, } }, created(){ - const {options,columns}=paoWanPgdConfig() + const {options,columns,setExt}=paoWanPgdConfig() + this.setExt=setExt this.gridOptions=options this.gridOptions.columns=columns }, methods:{ + initData(worker,zt){ + getPgd({user:worker,zt:zt,field:'pwry'}).then(res=>{ + this.gridOptions.data=res.data + this.setExt('workers',this.$props.workers) + }) + }, cellClick({row}){ this.$emit('initPgd',row) } diff --git a/src/views/zyjhzx/pwanfkui/comps/baifang.js b/src/views/zyjhzx/pwanfkui/comps/baifang.js index cd20411..34dba20 100644 --- a/src/views/zyjhzx/pwanfkui/comps/baifang.js +++ b/src/views/zyjhzx/pwanfkui/comps/baifang.js @@ -1,4 +1,6 @@ import Konva from "konva"; +import {zx} from "@/api/zyjh"; +import { VXETable } from 'vxe-table' const baifang=function (option={}) { const width=option.width,height=option.height,slList=option.dw,image=require('@/assets/gb.png') @@ -13,16 +15,34 @@ const baifang=function (option={}) { height:_height }) - const rect=new Konva.Rect({ - x:0, - y:0, - width:_width, - height:_height, - stroke:'black', - strokeWidth:1, - }) + const imageObj = new Image(); + imageObj.src = require('@/assets/sliao/personbg.png'); + imageObj.onload = function () { + const shape = new Konva.Image({ + x: 0, + y: 0, + width: _width, + height:_height, + image: this, + }); + group.add(shape) + shape.zIndex(0) + } - group.add(rect) + const selectObj = new Image(); + selectObj.src = require('@/assets/pwan/gbSelectBg.png'); + selectObj.onload = function () { + const shape = new Konva.Image({ + x: 0, + y: 0, + width: _width, + height:_height, + image: this, + visible:false + }); + group.add(shape) + shape.zIndex(0) + } return group } @@ -30,7 +50,7 @@ const baifang=function (option={}) { const slGroup=container() const thatHeight=height - const gangban=function (index,str){ + const gangban=function (index,item){ const group=new Konva.Group({ x:0, y:thatHeight-310-index*40, @@ -38,6 +58,7 @@ const baifang=function (option={}) { }) group.setAttr('index',index) + group.setAttr('item',item) slGroup.add(group) const {x}=group.absolutePosition() @@ -48,6 +69,84 @@ const baifang=function (option={}) { } }) let _index=0 + let touchingFlag=false; + group.on('mousedown touchstart',function (evt){ + const layer=evt.currentTarget.parent.parent + touchingFlag=true + const {x,y}=evt.evt + setTimeout(()=>{ + const moving=this.isDragging() + if (!moving){ + if (touchingFlag){ + this.draggable(false) + + const tmpGroup=this.clone() + tmpGroup.x(x-10) + tmpGroup.y(y-10) + layer.add(tmpGroup) + tmpGroup.draggable(true) + tmpGroup.dragBoundFunc(function (pos){ + return{...pos} + }) + tmpGroup.startDrag() + + const that=this + tmpGroup.on('dragend',function (){ + const {x:thisX,y:thisY}=this.absolutePosition() + for (const item of layer.children) { + if(item.attrs.id==='csd'){ + const {x,y}=item.absolutePosition() + const worker=JSON.parse(window.localStorage.getItem('worker')) + if ((thisX>=x&&thisY>=y)&&!!worker){ + const info=this.getAttr('item') + const zyjh=JSON.parse(window.localStorage.getItem('zyjh')) + if (!zyjh){ + VXETable.modal.message({content: '请先选择待反馈的派工单', status: 'warning'}) + this.remove() + that.visible(true) + return + } + zx({ + field:'pwfkrq', + zxZtName:'PWFK', + list:[{ + id:zyjh.id, + pwfkry: worker.userCode + }], + ycldwInfo:info + }).then(res=>{ + if (res.success){ + window.localStorage.removeItem('zyjh') + } + }) + this.scaleX(0.7) + const image=this.find('Image')[0] + image.x(5) + image.y(800) + image.scaleX(0.90) + image.moveTo(item.children[0].children[0]) + // this.moveTo(item.children[0].children[0]) + image.zIndex(2) + image.setAttr('_ad','sdf') + this.remove() + that.remove() + }else{ + this.remove() + that.visible(true) + } + } + } + }) + this.visible(false) + } + } + },500) + + }) + + group.on('mouseup touchend',function (){ + touchingFlag=false + }) group.on('dragstart',function (){ const {x,y}=this.absolutePosition() @@ -60,7 +159,7 @@ const baifang=function (option={}) { if(_index===0){ _index=this.getAttr('index') } - this.zIndex(999) + this.zIndex(7) const {y:thisY}=this.absolutePosition() const dir=thisY-this.startPos.y>0?-40:40 @@ -140,7 +239,7 @@ const baifang=function (option={}) { width: imgSize, height:40, fill:'black', - text:str+',12*2830*13090', + text:`${item.wph||''},${item.wpgg}`, align:'center', verticalAlign:'middle', }) @@ -153,7 +252,7 @@ const baifang=function (option={}) { width: imgSize-20, height:40, fill:'black', - text:'G175K-4,001,2302\n上料:2024/07/01,切割:2024/07/04', + text:`${item.czbh},${item.pl},${item.fd}\n上料:${item.bfrq||''},切割:${item.qgjhrq||''}`, align:'center', verticalAlign:'middle', }) diff --git a/src/views/zyjhzx/pwanfkui/comps/container.js b/src/views/zyjhzx/pwanfkui/comps/container.js index 6df3bde..068159b 100644 --- a/src/views/zyjhzx/pwanfkui/comps/container.js +++ b/src/views/zyjhzx/pwanfkui/comps/container.js @@ -11,6 +11,21 @@ const container=function (width=0,height=0,container){ stage.add(layer) layer.draw(); + const imageObj = new Image(); + const imgSize=width + imageObj.src = require('@/assets/kban/bg.png'); + imageObj.onload = function () { + const shape = new Konva.Image({ + x: 0, + y: 0, + width: imgSize, + height:this.height, + image: imageObj, + }); + layer.add(shape) + shape.zIndex(0) + } + return { stage,layer } diff --git a/src/views/zyjhzx/pwanfkui/comps/csd.js b/src/views/zyjhzx/pwanfkui/comps/csd.js index 858185b..1eda187 100644 --- a/src/views/zyjhzx/pwanfkui/comps/csd.js +++ b/src/views/zyjhzx/pwanfkui/comps/csd.js @@ -4,35 +4,115 @@ 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({ + id:'csd', x:x, y:y, width:_width, height:_height }) - const rect=new Konva.Rect({ + // const imageObj = new Image(); + const imgSize=_width + // imageObj.src = require('@/assets/pwan/csdbg.png'); + // imageObj.onload = function () { + // const shape = new Konva.Image({ + // x: 0, + // y: 0, + // width: imgSize, + // height:_height, + // image: imageObj, + // }); + // container.add(shape) + // shape.zIndex(0) + // } + + const imageObj1 = new Image(); + imageObj1.src = require('@/assets/pwan/csd0.png'); + imageObj1.onload = function () { + const shape = new Konva.Image({ + x: 0, + y: 0, + width: imgSize, + height:_height*0.1, + image: this, + }); + container.add(shape) + shape.zIndex(1) + } + + const imageObj3 = new Image(); + imageObj3.src = require('@/assets/pwan/csd0.png'); + imageObj3.onload = function () { + const shape = new Konva.Image({ + x: 0, + y: _height-_height*0.1, + width: imgSize, + height:_height*0.1, + image: this, + }); + container.add(shape) + shape.zIndex(1) + } + + const group=new Konva.Group({ x:0, - y:0, - width:_width, - height:_height, - stroke:'black', - strokeWidth:1, + y:_height*0.1, + width: imgSize, + height:_height-_height*0.1, }) + container.add(group) + group.clipFunc(function(ctx) { + ctx.rect(0, 0, imgSize, _height-_height*0.1); + }); - container.add(rect) - - const text=new Konva.Text({ - x: 0, - y: 0, - width: _width, - height:_height, - fill:'black', - text:'传送带', - align:'center', - verticalAlign:'middle', - }) + initCsd() + + function initCsd() { + const imageObj2 = new Image(); + imageObj2.src = require('@/assets/pwan/csd1.png'); + imageObj2.onload = function () { + play(this,imgSize,_height) + } + } + + function play(img,imgSize,_height){ + const csdGroup=new Konva.Group({ + x: 0, + y: 0, + width: imgSize, + height: _height, + image: img, + }) + group.add(csdGroup) + const shape = new Konva.Image({ + x: 0, + y: 0, + width: imgSize, + height: _height, + image: img, + }); + csdGroup.add(shape) + shape.zIndex(0) - container.add(text) + const shape1 = new Konva.Image({ + x: 0, + y: _height, + width: imgSize, + height: _height, + image: img, + }); + csdGroup.add(shape1) + shape1.zIndex(1) + csdGroup.to({ + x: 0, + y: -876, + duration: 20, //持续时间 + onFinish() { + csdGroup.remove() + play(img,imgSize,_height) + } + }) + } return container } diff --git a/src/views/zyjhzx/pwanfkui/comps/dw.js b/src/views/zyjhzx/pwanfkui/comps/dw.js index 4516c4d..1392440 100644 --- a/src/views/zyjhzx/pwanfkui/comps/dw.js +++ b/src/views/zyjhzx/pwanfkui/comps/dw.js @@ -1,7 +1,6 @@ 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 (){ @@ -14,20 +13,24 @@ export default function (width,height,callback){ height:_height }) - const rect=new Konva.Rect({ - x:0, - y:0, - width:_width, - height:_height, - stroke:'black', - strokeWidth:1, - }) - - group.add(rect) + const imageObj = new Image(); + imageObj.src = require('@/assets/sliao/personbg.png'); + imageObj.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 } + let selectedShape=null; const dw=function (index,item=[]){ const alignSize=2 @@ -40,20 +43,52 @@ export default function (width,height,callback){ height:height }) group.on('click touchstart',function (){ - console.log(item) - callback(index,item.list) + if (selectedShape){ + selectedShape.hide() + if (selectedShape===selectShape){ + selectedShape=null + return + } + } + selectedShape=selectShape + selectedShape.show() + callback(index,item) }) - const rect=new Konva.Rect({ - x:0, - y:0, - width:width, - height:height, - stroke:'black', - strokeWidth:1, - }) + const bgObj = new Image(); + bgObj.src = require('@/assets/sliao/personbg1.png'); + bgObj.onload = function () { + const shape = new Konva.Image({ + x: 0, + y: 0, + offsetX:4, + width: width, + height:height, + image: this, + }); + group.add(shape) + shape.zIndex(0) + } - group.add(rect) + const selectObj = new Image(); + selectObj.src = require('@/assets/sliao/selected.png'); + let selectShape=null + const setSelectShape=function (shape){ + selectShape=shape + } + selectObj.onload = function () { + const shape = new Konva.Image({ + x: width-width*0.31, + y: 4, + width: width*0.25, + height:width*0.25, + image: this, + visible:false + }); + group.add(shape) + shape.zIndex(0) + setSelectShape(shape) + } const text=new Konva.Text({ x:0, @@ -61,10 +96,10 @@ export default function (width,height,callback){ width: width, height: height, fill:'black', - text:item.name, + text:`${item.name}\n${item.list.length}张`, align:'center', verticalAlign:'middle', - fontSize:20 + fontSize:18 }) group.add(text) diff --git a/src/views/zyjhzx/pwanfkui/comps/person.js b/src/views/zyjhzx/pwanfkui/comps/person.js index 7528657..956a94a 100644 --- a/src/views/zyjhzx/pwanfkui/comps/person.js +++ b/src/views/zyjhzx/pwanfkui/comps/person.js @@ -1,36 +1,63 @@ import Konva from "konva"; export default function (width,height){ - const _width=width*0.134,_height=height*0.67 + const _width=width*0.134,_height=height*0.737 const container=function (){ const x=20,y=300 const group=new Konva.Group({ - x:x, - y:y, + x:0, + y:0, width:_width, - height:_height + height:_height, + draggable:true, + dragBoundFunc:function (pos){ + return { + x:x, + y:pos.y + } + }, }) - const rect=new Konva.Rect({ - x:0, - y:0, + const bgGroup=new Konva.Group({ + x:x, + y:y, width:_width, height:_height, - stroke:'black', - strokeWidth:1, }) + bgGroup.clipFunc(function(ctx) { + ctx.rect(0, 6, _width, _height-11); + }); + bgGroup.add(group) - group.add(rect) + const imageObj = new Image(); + imageObj.src = require('@/assets/sliao/personbg.png'); + imageObj.onload = function () { + const shape = new Konva.Image({ + x: 0, + y: 0, + width: _width, + height:_height, + image: this, + }); + bgGroup.add(shape) + shape.zIndex(0) + } - return group + return bgGroup + } + let currentWork=null; + let selectedShape=null; + + const getCurrentWorker=function (){ + return currentWork } 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 width=(_width-5)/alignSize,height=110 + const x=index%alignSize*width+index%alignSize+5,y=height*(Math.floor(index/alignSize))+(Math.floor(index/alignSize)+1)*10 const group=new Konva.Group({ x:x, y:y, @@ -38,21 +65,76 @@ export default function (width,height){ height:height }) - const rect=new Konva.Rect({ - x:0, - y:0, - width:width, - height:height, - stroke:'black', - strokeWidth:1, + const selectObj = new Image(); + selectObj.src = require('@/assets/sliao/selected.png'); + let selectShape=null + const setSelectShape=function (shape){ + selectShape=shape + } + selectObj.onload = function () { + const shape = new Konva.Image({ + x: width-width*0.3, + y: 2, + width: width*0.25, + height:height*0.25, + image: this, + visible:false + }); + group.add(shape) + shape.zIndex(0) + setSelectShape(shape) + } + + group.on('click touchstart',function (){ + currentWork=persons + window.localStorage.setItem('worker',JSON.stringify(currentWork)) + if (selectedShape){ + selectedShape.hide() + if (selectedShape===selectShape){ + selectedShape=null + return + } + } + selectedShape=selectShape + selectedShape.show() }) - group.add(rect) + + const bgObj = new Image(); + bgObj.src = require('@/assets/sliao/personbg1.png'); + bgObj.onload = function () { + const shape = new Konva.Image({ + x: 0, + y: 0, + offsetX:4, + width: width, + height:height, + image: this, + }); + group.add(shape) + shape.zIndex(0) + } + + const imageObj = new Image(); + imageObj.src = require('@/assets/sliao/headImage.png'); + imageObj.onload = function () { + const shape = new Konva.Image({ + x: 0, + y: 0, + offsetX:-4, + offsetY:-10, + width: width*0.89, + height:height*0.85, + image: this, + }); + group.add(shape) + shape.zIndex(0) + } const text=new Konva.Text({ x:0, - y:0, + y:height, width:width, - height:height, + height:height*0.1, text: persons.userName, align: 'center', verticalAlign:'middle', diff --git a/src/views/zyjhzx/pwanfkui/comps/pgd.js b/src/views/zyjhzx/pwanfkui/comps/pgd.js index efd3864..63412cc 100644 --- a/src/views/zyjhzx/pwanfkui/comps/pgd.js +++ b/src/views/zyjhzx/pwanfkui/comps/pgd.js @@ -2,7 +2,7 @@ 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 x=width*0.66+40,y=40,_width=width*0.30,_height=height*0.945 const container=function (){ const group=new Konva.Group({ @@ -12,25 +12,42 @@ export default function (width,height){ height:_height }) - const rect=new Konva.Rect({ - x:0, - y:0, - width:_width, - height:_height, - stroke:'black', - strokeWidth:1, - }) - - group.add(rect) + 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 } + let workers=[] + const setWorkers=function (persons){ + workers=persons + } + + const formatWorker=function (code){ + for (const item of workers) { + if(item.userCode===code){ + return item.userName + } + } + } + const drawGd=function (data){ // this.layer.destroyChildren(); + window.localStorage.setItem('zyjh',JSON.stringify(data)) const group=new Konva.Group({ - x:0, - y:0, + x:13, + y:12, width:_width, height:_height }) @@ -38,9 +55,8 @@ export default function (width,height){ const rect=new Konva.Rect({ x:0, y:0, - width:_width, - height:_height, - fill:'white' + width:_width-25, + height:_height-20, }) group.add(rect) @@ -49,9 +65,7 @@ export default function (width,height){ y:10, width:_width, height:35, - lineHeight:1, - stroke:'black', - strokeWidth:1.2, + fill:'#fff', text:'大连重工大连钢材加工配送有限公司', align:'center', fontSize:22, @@ -64,7 +78,7 @@ export default function (width,height){ width:_width, height:25, lineHeight:1, - stroke:'black', + fill:'#fff', strokeWidth:1, text:'抛丸施工单', align:'center', @@ -73,13 +87,13 @@ export default function (width,height){ group.add(sgdTitle) const dhTitle=new Konva.Text({ - x:0, + x:_width*0.7, y:50, width:_width-48, height:15, - lineHeight:1, - text:'单号:PW_'+data.gdh, - align:'right', + fill:'#fff', + text:`单号:${data.gdh?'PW_'+data.gdh:''}`, + align:'left', fontSize:12, }) group.add(dhTitle) @@ -108,7 +122,6 @@ export default function (width,height){ group0.add(group7) const group8=drawQz(data) group0.add(group8) - console.log(data) generateQRCode(data.gdh,group0) return group } @@ -126,9 +139,7 @@ export default function (width,height){ y:1, width:(_width-60), height:30, - lineHeight:1, - stroke:'black', - strokeWidth:0.8, + fill:'#fff', text:'负责人:', fontSize:18, verticalAlign:'middle' @@ -149,7 +160,7 @@ export default function (width,height){ y:0, width:(_width-60), height:180, - stroke:'black', + stroke:'#4991E5', strokeWidth:1, }) group.add(rect) @@ -168,7 +179,7 @@ export default function (width,height){ y:0, width:(_width-60), height:30, - stroke:'black', + stroke:'#4991E5', strokeWidth:1, }) group.add(jsRect) @@ -178,9 +189,7 @@ export default function (width,height){ y:0, width:(_width-60), height:30, - lineHeight:1, - stroke:'black', - strokeWidth:0.8, + fill:'#fff', text:'回报', fontSize:18, align:'center', @@ -193,7 +202,7 @@ export default function (width,height){ y:30, width:(_width-60), height:30, - stroke:'black', + stroke:'#4991E5', strokeWidth:1, }) group.add(plRect) @@ -203,9 +212,7 @@ export default function (width,height){ y:30, width:(_width-60)/2, height:30, - lineHeight:1, - stroke:'black', - strokeWidth:0.8, + fill:'#fff', text:data.jsr, fontSize:18, align:'center', @@ -217,7 +224,7 @@ export default function (width,height){ y:30, width:(_width-60)/2, height:30, - stroke:'black', + stroke:'#4991E5', strokeWidth:1, }) group.add(fdRect) @@ -227,10 +234,8 @@ export default function (width,height){ y:30, width:(_width-60)/2, height:30, - lineHeight:1, - stroke:'black', - strokeWidth:0.8, - text:data.jssj, + fill:'#fff', + text:data.pwfkrq, fontSize:18, align:'center', verticalAlign:'middle' @@ -254,7 +259,7 @@ export default function (width,height){ y:0, width:(_width-60), height:30, - stroke:'black', + stroke:'#4991E5', strokeWidth:1, }) group.add(jsRect) @@ -264,9 +269,7 @@ export default function (width,height){ y:0, width:(_width-60), height:30, - lineHeight:1, - stroke:'black', - strokeWidth:0.8, + fill:'#fff', text:'接收', fontSize:18, align:'center', @@ -279,7 +282,7 @@ export default function (width,height){ y:30, width:(_width-60), height:30, - stroke:'black', + stroke:'#4991E5', strokeWidth:1, }) group.add(plRect) @@ -289,10 +292,8 @@ export default function (width,height){ y:30, width:(_width-60)/2, height:30, - lineHeight:1, - stroke:'black', - strokeWidth:0.8, - text:data.jsr, + fill:'#fff', + text:formatWorker(data.pwry), fontSize:18, align:'center', verticalAlign:'middle' @@ -303,7 +304,7 @@ export default function (width,height){ y:30, width:(_width-60)/2, height:30, - stroke:'black', + stroke:'#4991E5', strokeWidth:1, }) group.add(fdRect) @@ -313,10 +314,8 @@ export default function (width,height){ y:30, width:(_width-60)/2, height:30, - lineHeight:1, - stroke:'black', - strokeWidth:0.8, - text:data.jssj, + fill:'#fff', + text:data.pwpgrq||'', fontSize:18, align:'center', verticalAlign:'middle' @@ -340,7 +339,7 @@ export default function (width,height){ y:0, width:(_width-60), height:200, - stroke:'black', + stroke:'#4991E5', strokeWidth:1, }) group.add(rect) @@ -359,7 +358,7 @@ export default function (width,height){ y:0, width:(_width-60), height:30, - stroke:'black', + stroke:'#4991E5', strokeWidth:1, }) group.add(rect) @@ -369,9 +368,7 @@ export default function (width,height){ y:0, width:(_width-60), height:30, - lineHeight:1, - stroke:'black', - strokeWidth:0.8, + fill:'#fff', text:data.tzbh, fontSize:18, align:'center', @@ -393,7 +390,7 @@ export default function (width,height){ y:0, width:(_width-188)/2, height:60, - stroke:'black', + stroke:'#4991E5', strokeWidth:1, }) group.add(plRect) @@ -403,9 +400,7 @@ export default function (width,height){ y:0, width:(_width-188)/2, height:60, - lineHeight:1, - stroke:'black', - strokeWidth:0.8, + fill:'#fff', text:'批量:'+data.dcPl, fontSize:18, align:'center', @@ -418,7 +413,7 @@ export default function (width,height){ y:0, width:(_width-188)/2, height:60, - stroke:'black', + stroke:'#4991E5', strokeWidth:1, }) group.add(fdRect) @@ -428,9 +423,7 @@ export default function (width,height){ y:0, width:(-width-188)/2, height:60, - lineHeight:1, - stroke:'black', - strokeWidth:0.8, + fill:'#fff', text:'分段:'+data.dcFd, fontSize:18, align:'center', @@ -454,7 +447,7 @@ export default function (width,height){ y:0, width:(_width-188), height:60, - stroke:'black', + stroke:'#4991E5', strokeWidth:1, }) czbhGroup.add(czbhRect) @@ -464,9 +457,7 @@ export default function (width,height){ y:0, width:(_width-188), height:60, - lineHeight:1, - stroke:'black', - strokeWidth:0.8, + fill:'#fff', text:'船号:'+data.dcCh, fontSize:18, align:'center', @@ -475,14 +466,14 @@ export default function (width,height){ czbhGroup.add(czbhText) return czbhGroup } - const generateQRCode=function (text,group) { + const generateQRCode=function (text='',group) { const imgSize=118 const rect=new Konva.Rect({ x:385, y:0, width:128.7, height:120, - stroke:'black', + stroke:'#4991E5', strokeWidth:1, }) group.add(rect) @@ -508,6 +499,6 @@ export default function (width,height){ } return { - container,drawGd + container,drawGd,setWorkers } } diff --git a/src/views/zyjhzx/pwanfkui/comps/pgdTable.js b/src/views/zyjhzx/pwanfkui/comps/pgdTable.js index e6b16ac..0e597f1 100644 --- a/src/views/zyjhzx/pwanfkui/comps/pgdTable.js +++ b/src/views/zyjhzx/pwanfkui/comps/pgdTable.js @@ -11,12 +11,31 @@ export default function () { scrollY:{enable:true}, data:[] } + const ext={} + const setExt=function (key,value){ + ext[key]=value + } const gdhFormat=function ({cellValue}){ if (cellValue){ return 'PW'+cellValue } return '' } + const nameFormat=function ({cellValue}){ + const workers=ext.workers + for (const item of workers) { + if(item.userCode===cellValue){ + return item.userName + } + } + } + const ztFormat=function ({cellValue}){ + return ztEnmu[cellValue] + } + const ztEnmu={ + '31':'派工', + '32':'反馈' + } const columns = [ { type: 'checkbox', width: 40 }, { type: 'seq',title:'序号', width: 60 }, @@ -30,15 +49,16 @@ export default function () { {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}, + {field: 'pwry', title: '接收人', width: 80,formatter:nameFormat}, + {field: 'pwpgrq', title: '接收时间', width: 100}, + {field: 'pwfkr', title: '反馈人', width: 80,formatter:nameFormat}, + {field: 'pwfkrq', title: '反馈时间', width: 100}, + {field: 'zt', title: '状态', width: 60,formatter:ztFormat}, ] return { options, columns, + setExt } } diff --git a/src/views/zyjhzx/pwanfkui/comps/title.js b/src/views/zyjhzx/pwanfkui/comps/title.js index 711a4ae..67e1866 100644 --- a/src/views/zyjhzx/pwanfkui/comps/title.js +++ b/src/views/zyjhzx/pwanfkui/comps/title.js @@ -1,18 +1,40 @@ import Konva from "konva"; const title=function (width,height,title) { - return new Konva.Text({ + const group=new Konva.Group({ + x: 0, + y: 0, + width: width, + height: 20, + }) + + const imageObj = new Image(); + imageObj.src = require('@/assets/kban/logo.png'); + imageObj.onload = function () { + const shape = new Konva.Image({ + x: 0, + y: 0, + width: width*0.86, + height:41, + image: imageObj, + }); + group.add(shape) + } + + const text=new Konva.Text({ x: 0, y: 8, width: width, height: 20, - lineHeight: 1, - stroke: 'blue', - strokeWidth: 2, text: title, align: 'center', + fill:'#fff', fontSize: 32, + fontStyle:'bold' }) + group.add(text) + + return group } export default title diff --git a/src/views/zyjhzx/pwanfkui/index.vue b/src/views/zyjhzx/pwanfkui/index.vue index 20c546c..5ae08bd 100644 --- a/src/views/zyjhzx/pwanfkui/index.vue +++ b/src/views/zyjhzx/pwanfkui/index.vue @@ -1,7 +1,7 @@ @@ -14,8 +14,7 @@ import drawDw from './comps/dw' import drawPgd from './comps/pgd' import baifang from "./comps/baifang"; import drawCsd from './comps/csd' -import {getPgd, getYcldw} from "@/api/zyjh"; -import liliao from "@/views/zyjhzx/sliao/comps/liliao"; +import { getYcldw} from "@/api/zyjh"; import {getBzryList} from "@/api/sjzx/bzzGL"; export default { @@ -32,24 +31,56 @@ export default { drawGd:null, dw:[], pgd:[], + currentDw:'', + currentDwIndex:'', currentWorker:null, + setWorkers:null, + workers:null, + slGroup:null, } }, mounted() { + this.$socket.open() + this.wsSubscribe() this.initKonvaStage(); }, + sockets:{}, + created(){ + window.addEventListener('resize', this.initKonvaStage) + }, methods:{ + wsSubscribe(){ + this.sockets.subscribe('pwComplete', data => { + if (this.currentDw&&this.currentDw.id===data.dwId) { + if (this.slGroup){ + this.slGroup.destroyChildren() + } + for (let i = 0; i < this.dw[this.currentDwIndex].list.length; i++) { + const item=this.dw[this.currentDwIndex].list[i] + console.log(123) + console.log(item.czbh===data.czbh&&item.pl===data.pl&&item.tlth===data.tlth) + if (item.czbh===data.czbh&&item.pl===data.pl&&item.tlth===data.tlth){ + this.dw[this.currentDwIndex].list.splice(i,1) + console.log(this.dw[this.currentDwIndex].list) + break + } + } + this.drawBaiFang(this.dw[this.currentDwIndex].list) + } + }) + }, initPgd(pgd={}){ const group=this.drawGd(pgd) this.pgdGroup.add(group) }, - initBaiFang(index,list){ + initBaiFang(index,dw){ if (this.slGroup){ this.slGroup.destroyChildren() } this.canSl=true + this.currentDw=dw this.currentDwIndex=index - const {slGroup,handler}= baifang({width:this.width,height:this.height,dw:list}) + const {slGroup,handler}= baifang({width:this.width,height:this.height,dw:dw.list}) this.slGroup=slGroup this.drawBaiFang=handler this.layer.add(slGroup) @@ -62,6 +93,7 @@ export default { this.layer.add(group) + this.dw=res.data for (let i=0;i[ - that.pgd=res.data - ]) + that.$refs.pwpgd.initData(that.currentWorker.userCode,'31') }) group.add(worker) + worker.zIndex(1) } }) }, @@ -99,17 +132,18 @@ export default { 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) + const {container:pgdContainer,drawGd,setWorkers}=drawPgd(this.width,this.height) + this.setWorkers=setWorkers this.drawGd=drawGd this.pgdGroup=pgdContainer() this.layer.add(this.pgdGroup) const csdGroup=drawCsd(this.width,this.height) this.layer.add(csdGroup) + + this.initWorkers() }, } } diff --git a/src/views/zyjhzx/pwanpgong/comps/PwanPgd.vue b/src/views/zyjhzx/pwanpgong/comps/PwanPgd.vue index 56131f3..d2e4654 100644 --- a/src/views/zyjhzx/pwanpgong/comps/PwanPgd.vue +++ b/src/views/zyjhzx/pwanpgong/comps/PwanPgd.vue @@ -60,7 +60,7 @@ export default { for (const item of list) { const data={ id:item.id, - pwsgr:worker.userCode,//抛丸施工人员姓名 + pwry:worker.userCode,//抛丸施工人员姓名 } tmpArr.push(data) } diff --git a/src/views/zyjhzx/pwanpgong/comps/container.js b/src/views/zyjhzx/pwanpgong/comps/container.js index 6df3bde..068159b 100644 --- a/src/views/zyjhzx/pwanpgong/comps/container.js +++ b/src/views/zyjhzx/pwanpgong/comps/container.js @@ -11,6 +11,21 @@ const container=function (width=0,height=0,container){ stage.add(layer) layer.draw(); + const imageObj = new Image(); + const imgSize=width + imageObj.src = require('@/assets/kban/bg.png'); + imageObj.onload = function () { + const shape = new Konva.Image({ + x: 0, + y: 0, + width: imgSize, + height:this.height, + image: imageObj, + }); + layer.add(shape) + shape.zIndex(0) + } + return { stage,layer } diff --git a/src/views/zyjhzx/pwanpgong/comps/dw.js b/src/views/zyjhzx/pwanpgong/comps/dw.js index 45c30f9..5d308bd 100644 --- a/src/views/zyjhzx/pwanpgong/comps/dw.js +++ b/src/views/zyjhzx/pwanpgong/comps/dw.js @@ -4,7 +4,7 @@ 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 x=width*0.5+30,y=40 const group=new Konva.Group({ x:x, @@ -13,16 +13,19 @@ export default function (width,height){ height:_height }) - const rect=new Konva.Rect({ - x:0, - y:0, - width:_width, - height:_height, - stroke:'black', - strokeWidth:1, - }) - - group.add(rect) + const imageObj = new Image(); + imageObj.src = require('@/assets/sliao/personbg.png'); + imageObj.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 } @@ -38,20 +41,21 @@ export default function (width,height){ 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 bgObj = new Image(); + bgObj.src = require('@/assets/sliao/personbg1.png'); + bgObj.onload = function () { + const shape = new Konva.Image({ + x: 0, + y: 0, + offsetX:4, + width: width, + height:height, + image: this, + }); + group.add(shape) + shape.zIndex(0) + } const text=new Konva.Text({ x:0, @@ -59,10 +63,10 @@ export default function (width,height){ width: width, height: height, fill:'black', - text:item.name, + text:`${item.name}\n${item.list.length}张`, align:'center', verticalAlign:'middle', - fontSize:20 + fontSize:18 }) group.add(text) diff --git a/src/views/zyjhzx/pwanpgong/comps/person.js b/src/views/zyjhzx/pwanpgong/comps/person.js index 67f9b99..0742999 100644 --- a/src/views/zyjhzx/pwanpgong/comps/person.js +++ b/src/views/zyjhzx/pwanpgong/comps/person.js @@ -4,29 +4,13 @@ export default function (width,height){ const _width=width*0.5,_height=120 const container=function (){ - const x=20,y=45 + const x=13,y=45 const layer=new Konva.Layer({ x:x, y:y, - width:_width, - height:_height - }) - layer.clipFunc(function(ctx) { - ctx.rect(0, 0, _width, _height); - }); - - const rect=new Konva.Rect({ - x:0, - y:0, - width:_width, - height:_height, - stroke:'black', - strokeWidth:1, }) - layer.add(rect) - const group=new Konva.Group({ x:0, y:0, @@ -40,13 +24,39 @@ export default function (width,height){ } }, }) - layer.add(group) + const bgGroup=new Konva.Group({ + x:0, + y:0, + }) + bgGroup.clipFunc(function(ctx) { + ctx.rect(6, 0, width*0.5+1, 182); + }); + + const imageObj = new Image(); + imageObj.src = require('@/assets/pwan/personbg.png'); + imageObj.onload = function () { + const shape = new Konva.Image({ + x: 0, + y: 0, + offsetX:6, + width: width*0.52-14, + height:182*0.8, + image: this, + }); + bgGroup.add(shape) + shape.zIndex(0) + } + + layer.add(bgGroup) + bgGroup.zIndex(0) + bgGroup.add(group) return {layer,group} } let currentWork=null; + let selectedShape=null; const getCurrentWorker=function (){ return currentWork @@ -55,7 +65,7 @@ export default function (width,height){ const person=function (index,persons={}){ const width=120,height=110 - const x=index*120+(index+1)*5,y=5 + const x=index*125+(index+1)+14,y=5 const group=new Konva.Group({ x:x, y:y, @@ -67,19 +77,72 @@ export default function (width,height){ currentWork=persons }) - const rect=new Konva.Rect({ - x:0, - y:0, - width:width, - height:height, - stroke:'black', - strokeWidth:1, + const selectObj = new Image(); + selectObj.src = require('@/assets/sliao/selected.png'); + let selectShape=null + const setSelectShape=function (shape){ + selectShape=shape + } + selectObj.onload = function () { + const shape = new Konva.Image({ + x: 83, + y: 0, + width: 39, + height:39, + image: this, + visible:false + }); + group.add(shape) + shape.zIndex(0) + setSelectShape(shape) + } + + group.on('click touchstart',function (){ + currentWork=persons + if (selectedShape){ + selectedShape.hide() + if (selectedShape===selectShape){ + selectedShape=null + return + } + } + selectedShape=selectShape + selectedShape.show() }) - group.add(rect) + const bgObj = new Image(); + bgObj.src = require('@/assets/sliao/personbg1.png'); + bgObj.onload = function () { + const shape = new Konva.Image({ + x: 0, + y: 0, + offsetX:4, + width: 137*0.95, + height:155*0.80, + image: this, + }); + group.add(shape) + shape.zIndex(0) + } + + const imageObj = new Image(); + imageObj.src = require('@/assets/sliao/headImage.png'); + imageObj.onload = function () { + const shape = new Konva.Image({ + x: 0, + y: 0, + offsetX:-4, + offsetY:-10, + width: 126*0.9, + height:134*0.80, + image: this, + }); + group.add(shape) + shape.zIndex(0) + } const text=new Konva.Text({ x:0, - y:0, + y:75, width:width, height:height, text: persons.userName, diff --git a/src/views/zyjhzx/pwanpgong/comps/pgd.js b/src/views/zyjhzx/pwanpgong/comps/pgd.js index efd3864..b15b707 100644 --- a/src/views/zyjhzx/pwanpgong/comps/pgd.js +++ b/src/views/zyjhzx/pwanpgong/comps/pgd.js @@ -2,7 +2,7 @@ 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 x=width*0.66+40,y=40,_width=width*0.30,_height=height*0.945 const container=function (){ const group=new Konva.Group({ @@ -12,25 +12,41 @@ export default function (width,height){ height:_height }) - const rect=new Konva.Rect({ - x:0, - y:0, - width:_width, - height:_height, - stroke:'black', - strokeWidth:1, - }) - - group.add(rect) + 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 } + let workers=[] + const setWorkers=function (persons){ + workers=persons + } + + const formatWorker=function (code){ + for (const item of workers) { + if(item.userCode===code){ + return item.userName + } + } + } + const drawGd=function (data){ // this.layer.destroyChildren(); const group=new Konva.Group({ - x:0, - y:0, + x:13, + y:12, width:_width, height:_height }) @@ -38,9 +54,8 @@ export default function (width,height){ const rect=new Konva.Rect({ x:0, y:0, - width:_width, - height:_height, - fill:'white' + width:_width-25, + height:_height-20, }) group.add(rect) @@ -49,9 +64,7 @@ export default function (width,height){ y:10, width:_width, height:35, - lineHeight:1, - stroke:'black', - strokeWidth:1.2, + fill:'#fff', text:'大连重工大连钢材加工配送有限公司', align:'center', fontSize:22, @@ -64,7 +77,7 @@ export default function (width,height){ width:_width, height:25, lineHeight:1, - stroke:'black', + fill:'#fff', strokeWidth:1, text:'抛丸施工单', align:'center', @@ -73,13 +86,13 @@ export default function (width,height){ group.add(sgdTitle) const dhTitle=new Konva.Text({ - x:0, + x:_width*0.7, y:50, width:_width-48, height:15, - lineHeight:1, - text:'单号:PW_'+data.gdh, - align:'right', + fill:'#fff', + text:`单号:${data.gdh?'PW_'+data.gdh:''}`, + align:'left', fontSize:12, }) group.add(dhTitle) @@ -108,7 +121,6 @@ export default function (width,height){ group0.add(group7) const group8=drawQz(data) group0.add(group8) - console.log(data) generateQRCode(data.gdh,group0) return group } @@ -126,9 +138,7 @@ export default function (width,height){ y:1, width:(_width-60), height:30, - lineHeight:1, - stroke:'black', - strokeWidth:0.8, + fill:'#fff', text:'负责人:', fontSize:18, verticalAlign:'middle' @@ -149,7 +159,7 @@ export default function (width,height){ y:0, width:(_width-60), height:180, - stroke:'black', + stroke:'#4991E5', strokeWidth:1, }) group.add(rect) @@ -168,7 +178,7 @@ export default function (width,height){ y:0, width:(_width-60), height:30, - stroke:'black', + stroke:'#4991E5', strokeWidth:1, }) group.add(jsRect) @@ -178,9 +188,7 @@ export default function (width,height){ y:0, width:(_width-60), height:30, - lineHeight:1, - stroke:'black', - strokeWidth:0.8, + fill:'#fff', text:'回报', fontSize:18, align:'center', @@ -193,7 +201,7 @@ export default function (width,height){ y:30, width:(_width-60), height:30, - stroke:'black', + stroke:'#4991E5', strokeWidth:1, }) group.add(plRect) @@ -203,9 +211,7 @@ export default function (width,height){ y:30, width:(_width-60)/2, height:30, - lineHeight:1, - stroke:'black', - strokeWidth:0.8, + fill:'#fff', text:data.jsr, fontSize:18, align:'center', @@ -217,7 +223,7 @@ export default function (width,height){ y:30, width:(_width-60)/2, height:30, - stroke:'black', + stroke:'#4991E5', strokeWidth:1, }) group.add(fdRect) @@ -227,10 +233,8 @@ export default function (width,height){ y:30, width:(_width-60)/2, height:30, - lineHeight:1, - stroke:'black', - strokeWidth:0.8, - text:data.jssj, + fill:'#fff', + text:data.pwfkrq, fontSize:18, align:'center', verticalAlign:'middle' @@ -254,7 +258,7 @@ export default function (width,height){ y:0, width:(_width-60), height:30, - stroke:'black', + stroke:'#4991E5', strokeWidth:1, }) group.add(jsRect) @@ -264,9 +268,7 @@ export default function (width,height){ y:0, width:(_width-60), height:30, - lineHeight:1, - stroke:'black', - strokeWidth:0.8, + fill:'#fff', text:'接收', fontSize:18, align:'center', @@ -279,20 +281,20 @@ export default function (width,height){ y:30, width:(_width-60), height:30, - stroke:'black', + stroke:'#4991E5', strokeWidth:1, }) group.add(plRect) + const name=formatWorker(data.pwry) + 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, + fill:'#fff', + text:name, fontSize:18, align:'center', verticalAlign:'middle' @@ -303,7 +305,7 @@ export default function (width,height){ y:30, width:(_width-60)/2, height:30, - stroke:'black', + stroke:'#4991E5', strokeWidth:1, }) group.add(fdRect) @@ -313,10 +315,8 @@ export default function (width,height){ y:30, width:(_width-60)/2, height:30, - lineHeight:1, - stroke:'black', - strokeWidth:0.8, - text:data.jssj, + fill:'#fff', + text:data.pwpgrq||'', fontSize:18, align:'center', verticalAlign:'middle' @@ -340,7 +340,7 @@ export default function (width,height){ y:0, width:(_width-60), height:200, - stroke:'black', + stroke:'#4991E5', strokeWidth:1, }) group.add(rect) @@ -359,7 +359,7 @@ export default function (width,height){ y:0, width:(_width-60), height:30, - stroke:'black', + stroke:'#4991E5', strokeWidth:1, }) group.add(rect) @@ -369,9 +369,7 @@ export default function (width,height){ y:0, width:(_width-60), height:30, - lineHeight:1, - stroke:'black', - strokeWidth:0.8, + fill:'#fff', text:data.tzbh, fontSize:18, align:'center', @@ -393,7 +391,7 @@ export default function (width,height){ y:0, width:(_width-188)/2, height:60, - stroke:'black', + stroke:'#4991E5', strokeWidth:1, }) group.add(plRect) @@ -403,9 +401,7 @@ export default function (width,height){ y:0, width:(_width-188)/2, height:60, - lineHeight:1, - stroke:'black', - strokeWidth:0.8, + fill:'#fff', text:'批量:'+data.dcPl, fontSize:18, align:'center', @@ -418,7 +414,7 @@ export default function (width,height){ y:0, width:(_width-188)/2, height:60, - stroke:'black', + stroke:'#4991E5', strokeWidth:1, }) group.add(fdRect) @@ -428,9 +424,7 @@ export default function (width,height){ y:0, width:(-width-188)/2, height:60, - lineHeight:1, - stroke:'black', - strokeWidth:0.8, + fill:'#fff', text:'分段:'+data.dcFd, fontSize:18, align:'center', @@ -454,7 +448,7 @@ export default function (width,height){ y:0, width:(_width-188), height:60, - stroke:'black', + stroke:'#4991E5', strokeWidth:1, }) czbhGroup.add(czbhRect) @@ -464,9 +458,7 @@ export default function (width,height){ y:0, width:(_width-188), height:60, - lineHeight:1, - stroke:'black', - strokeWidth:0.8, + fill:'#fff', text:'船号:'+data.dcCh, fontSize:18, align:'center', @@ -475,14 +467,14 @@ export default function (width,height){ czbhGroup.add(czbhText) return czbhGroup } - const generateQRCode=function (text,group) { + const generateQRCode=function (text='',group) { const imgSize=118 const rect=new Konva.Rect({ x:385, y:0, width:128.7, height:120, - stroke:'black', + stroke:'#4991E5', strokeWidth:1, }) group.add(rect) @@ -508,6 +500,6 @@ export default function (width,height){ } return { - container,drawGd + container,drawGd,setWorkers } } diff --git a/src/views/zyjhzx/pwanpgong/comps/pgdTable.js b/src/views/zyjhzx/pwanpgong/comps/pgdTable.js index 9062517..2daeed0 100644 --- a/src/views/zyjhzx/pwanpgong/comps/pgdTable.js +++ b/src/views/zyjhzx/pwanpgong/comps/pgdTable.js @@ -1,7 +1,7 @@ export default function () { const options={ - height:740, + height:706, align:'center', border: true, resizable: true, diff --git a/src/views/zyjhzx/pwanpgong/comps/title.js b/src/views/zyjhzx/pwanpgong/comps/title.js index 711a4ae..67e1866 100644 --- a/src/views/zyjhzx/pwanpgong/comps/title.js +++ b/src/views/zyjhzx/pwanpgong/comps/title.js @@ -1,18 +1,40 @@ import Konva from "konva"; const title=function (width,height,title) { - return new Konva.Text({ + const group=new Konva.Group({ + x: 0, + y: 0, + width: width, + height: 20, + }) + + const imageObj = new Image(); + imageObj.src = require('@/assets/kban/logo.png'); + imageObj.onload = function () { + const shape = new Konva.Image({ + x: 0, + y: 0, + width: width*0.86, + height:41, + image: imageObj, + }); + group.add(shape) + } + + const text=new Konva.Text({ x: 0, y: 8, width: width, height: 20, - lineHeight: 1, - stroke: 'blue', - strokeWidth: 2, text: title, align: 'center', + fill:'#fff', fontSize: 32, + fontStyle:'bold' }) + group.add(text) + + return group } export default title diff --git a/src/views/zyjhzx/pwanpgong/index.vue b/src/views/zyjhzx/pwanpgong/index.vue index 7ffef7b..c63ed31 100644 --- a/src/views/zyjhzx/pwanpgong/index.vue +++ b/src/views/zyjhzx/pwanpgong/index.vue @@ -28,11 +28,15 @@ export default { pgdGroup:null, drawGd:null, getCurrentWorker:null, + setWorkers:null, } }, mounted() { this.initKonvaStage(); }, + created(){ + window.addEventListener('resize', this.initKonvaStage) + }, methods:{ initPgd(pgd={}){ const group=this.drawGd(pgd) @@ -61,6 +65,7 @@ export default { const {layer,group}=container() this.stage.add(layer) + this.setWorkers(res.data) for (let i=0;i[ + getPgd({user:that.currentWorker.userCode,zt:'6'}).then(res=>[ that.pgd=res.data ]) }) diff --git a/src/views/zyjhzx/sliao/_index.vue b/src/views/zyjhzx/sliao/_index.vue index 14b0d31..c974848 100644 --- a/src/views/zyjhzx/sliao/_index.vue +++ b/src/views/zyjhzx/sliao/_index.vue @@ -52,7 +52,6 @@ export default { { message: "fn1", // message消息与func函数执行为映射关系 func: (params1, params2) => { - console.log("params参数-->", params1, params2); function fib(n) { if ((n == 1) | (n == 2)) { return 1; @@ -95,17 +94,12 @@ export default { this.worker = this.$worker.create(actions); }, mounted() { - console.time("多个线程计算用时1") this.worker .postAll() .then((res) => { - console.timeEnd("多个线程计算用时1"); - console.log("res", res); // 结果是一个数组 [267914296, 433494437, 701408733] this.loadingOne = false; }) .catch((err) => { - console.timeEnd("多个线程计算用时1"); - console.log("err", err); this.loadingOne = false; }); @@ -315,7 +309,6 @@ export default { }) group.add(text) group.on('click touchstart',(evt)=>{ - console.log(evt.target) this.slGroup.destroyChildren() this.drawSlItem(dw.list||[]) }) @@ -332,7 +325,6 @@ export default { stroke:'blue', strokeWidth:1, }) - console.log(111) const size=120; for (let i = 0; i < this.qyList.length; i++) { const qy=this.qyList[i] @@ -364,7 +356,6 @@ export default { }) group.add(text) group.on('click touchstart',(evt)=>{ - console.log(evt.target) this.drawDw(qyGroup,qy,size) }) qyGroup.add(group) @@ -381,7 +372,6 @@ export default { strokeWidth:1, }) qyGroup.on('click touchstart',(evt)=>{ - console.log(evt) }) this.sljhGroup=qyGroup }, diff --git a/src/views/zyjhzx/sliao/comps/baifang.js b/src/views/zyjhzx/sliao/comps/baifang.js index 63a3759..5dd8c8c 100644 --- a/src/views/zyjhzx/sliao/comps/baifang.js +++ b/src/views/zyjhzx/sliao/comps/baifang.js @@ -2,9 +2,9 @@ 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.4-50,_height=height*0.81 + const _width=width*0.4-50,_height=height*0.737 const container=function (){ - const x=width*0.6+40,y=190 + const x=width*0.6+40,y=262 const group=new Konva.Group({ x:x, @@ -13,8 +13,19 @@ const baifang=function (option={}) { height:_height }) - // const rect=createRect(x,y) - // group.add(rect) + const imageObj = new Image(); + imageObj.src = require('@/assets/sliao/personbg.png'); + imageObj.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 } @@ -37,7 +48,7 @@ const baifang=function (option={}) { const gangban=function (index,item){ const group=new Konva.Group({ x:0, - y:thatHeight-260-index*40, + y:thatHeight-280-index*40, draggable:true }) @@ -61,6 +72,7 @@ const baifang=function (option={}) { y:y } }) + const movedList=[] group.on('dragmove',function (){ if(_index===0){ @@ -108,7 +120,7 @@ const baifang=function (option={}) { for (const it of movedList) { mList.push(it.getAttr('item')) } - console.log(mList) + //todo 倒剁 const data={ id:item.id, lastCeng:item.ceng, @@ -122,6 +134,7 @@ const baifang=function (option={}) { this.setAttr('index',_index) _index=0 handler(slList) + //todo 倒剁 // daoduo(data).then(res=>{ // if (res.success){ // const element = slList.splice(index-1, 1)[0]; diff --git a/src/views/zyjhzx/sliao/comps/liliao.js b/src/views/zyjhzx/sliao/comps/liliao.js index 5e7f01e..15067c3 100644 --- a/src/views/zyjhzx/sliao/comps/liliao.js +++ b/src/views/zyjhzx/sliao/comps/liliao.js @@ -2,27 +2,41 @@ import Konva from "konva"; const liliao=function (width,height,dw,callback) { - const _width=width*0.4,_height=height*0.81 + const _width=width*0.4,_height=height*0.737 const container=function (){ - const x=width*0.2+30,y=190 + const x=width*0.2+30,y=262 const group=new Konva.Group({ - x:x, - y:y, + x:0, + y:0, width:_width, height:_height }) - const rect=new Konva.Rect({ - x:0, - y:0, + const bgGroup=new Konva.Group({ + x:x, + y:y, width:_width, height:_height, - stroke:'black', - strokeWidth:1, }) + bgGroup.clipFunc(function(ctx) { + ctx.rect(0, 6, _width, _height-11); + }); + bgGroup.add(group) - group.add(rect) + const imageObj = new Image(); + imageObj.src = require('@/assets/sliao/personbg.png'); + imageObj.onload = function () { + const shape = new Konva.Image({ + x: 0, + y: 0, + width: _width, + height:_height, + image: this, + }); + bgGroup.add(shape) + shape.zIndex(0) + } for (let i = 0; i < dw.length; i++) { const item=dw[i] @@ -30,7 +44,7 @@ const liliao=function (width,height,dw,callback) { group.add(_group) } - return group + return bgGroup } let currentDw=null @@ -49,28 +63,62 @@ const liliao=function (width,height,dw,callback) { height:height }) group.on('click touchstart',function (){ + if (selectedShape){ + selectedShape.hide() + if (selectedShape===selectShape){ + selectedShape=null + return + } + } + selectedShape=selectShape + selectedShape.show() currentDw=item callback(index,dw[index]) }) - const rect=new Konva.Rect({ - x:0, - y:0, - width:width, - height:height, - stroke:'black', - strokeWidth:1, - }) + const bgObj = new Image(); + bgObj.src = require('@/assets/sliao/personbg1.png'); + bgObj.onload = function () { + const shape = new Konva.Image({ + x: 0, + y: 0, + offsetX:4, + width: width, + height:height, + image: this, + }); + group.add(shape) + shape.zIndex(0) + } - group.add(rect) + const selectObj = new Image(); + let selectedShape=null; + selectObj.src = require('@/assets/sliao/selected.png'); + let selectShape=null + const setSelectShape=function (shape){ + selectShape=shape + } + selectObj.onload = function () { + const shape = new Konva.Image({ + x: width-width*0.30, + y: 4, + width: width*0.25, + height:width*0.25, + image: this, + visible:false + }); + group.add(shape) + shape.zIndex(0) + setSelectShape(shape) + } const text=new Konva.Text({ x:0, y:0, width: width, height: height, - fill:'black', - text:item.name, + fill:'#fff', + text:`${item.name}\n${item.list.length}张钢板`, align:'center', verticalAlign:'middle', fontSize:20 diff --git a/src/views/zyjhzx/sliao/comps/person.js b/src/views/zyjhzx/sliao/comps/person.js index 7af6426..ca9ed44 100644 --- a/src/views/zyjhzx/sliao/comps/person.js +++ b/src/views/zyjhzx/sliao/comps/person.js @@ -2,27 +2,48 @@ import Konva from "konva"; const workers=function (width,height,persons) { - const _width=width*0.2,_height=height*0.81 + const _width=width*0.2,_height=height*0.737 const container=function (){ - const x=20,y=190 + const x=20,y=262 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, + draggable:true, + dragBoundFunc:function (pos){ + return { + x:x, + y:pos.y + } + }, }) - group.add(rect) + const bgGroup=new Konva.Group({ + x:x, + y:y, + width:_width, + height:_height, + }) + bgGroup.clipFunc(function(ctx) { + ctx.rect(0, 6, _width, _height-11); + }); + bgGroup.add(group) + + const imageObj = new Image(); + imageObj.src = require('@/assets/sliao/personbg.png'); + imageObj.onload = function () { + const shape = new Konva.Image({ + x: 0, + y: 0, + width: _width, + height:_height, + image: this, + }); + bgGroup.add(shape) + shape.zIndex(0) + } for (let i = 0; i < persons.length; i++) { const item=persons[i] @@ -30,17 +51,18 @@ const workers=function (width,height,persons) { group.add(_group) } - return group + return bgGroup } let currentWork=null; + let selectedShape=null; const getCurrentWorker=function (){ return currentWork } const person=function (index,item){ const alignSize=2 - const width=((_width-30)/alignSize),height=108 + const width=((_width-30)/alignSize),height=135 const x=index%alignSize*width+(index%alignSize+1)*10,y=height*(Math.floor(index/alignSize))+(Math.floor(index/alignSize)+1)*10 const group=new Konva.Group({ x:x, @@ -49,24 +71,73 @@ const workers=function (width,height,persons) { height:height }) + const selectObj = new Image(); + selectObj.src = require('@/assets/sliao/selected.png'); + let selectShape=null + const setSelectShape=function (shape){ + selectShape=shape + } + selectObj.onload = function () { + const shape = new Konva.Image({ + x: 83, + y: 0, + width: 39, + height:39, + image: this, + visible:false + }); + group.add(shape) + shape.zIndex(0) + setSelectShape(shape) + } + group.on('click touchstart',function (){ currentWork=item + if (selectedShape){ + selectedShape.hide() + if (selectedShape===selectShape){ + selectedShape=null + return + } + } + selectedShape=selectShape + selectedShape.show() }) - const rect=new Konva.Rect({ - x:0, - y:0, - width:width, - height:height, - stroke:'black', - strokeWidth:1, - }) + const bgObj = new Image(); + bgObj.src = require('@/assets/sliao/personbg1.png'); + bgObj.onload = function () { + const shape = new Konva.Image({ + x: 0, + y: 0, + offsetX:4, + width: 137*0.95, + height:155*0.80, + image: this, + }); + group.add(shape) + shape.zIndex(0) + } - group.add(rect) + const imageObj = new Image(); + imageObj.src = require('@/assets/sliao/headImage.png'); + imageObj.onload = function () { + const shape = new Konva.Image({ + x: 0, + y: 0, + offsetX:-4, + offsetY:-10, + width: 126*0.9, + height:134*0.80, + image: this, + }); + group.add(shape) + shape.zIndex(0) + } const text=new Konva.Text({ x:0, - y:0, + y:70, width: width, height: height, fill:'black', diff --git a/src/views/zyjhzx/sliao/comps/search.js b/src/views/zyjhzx/sliao/comps/search.js index 90dc4aa..17e0180 100644 --- a/src/views/zyjhzx/sliao/comps/search.js +++ b/src/views/zyjhzx/sliao/comps/search.js @@ -3,7 +3,7 @@ import Konva from "konva"; const search=function (){ const group=new Konva.Group({ x:20, - y:50 + y:52 }) const selectRect=new Konva.Rect({ x: 0, diff --git a/src/views/zyjhzx/sliao/comps/sljh.js b/src/views/zyjhzx/sliao/comps/sljh.js index d47c78c..58bb9eb 100644 --- a/src/views/zyjhzx/sliao/comps/sljh.js +++ b/src/views/zyjhzx/sliao/comps/sljh.js @@ -4,42 +4,87 @@ export const sljh=function (width,height){ const layer=new Konva.Layer({ id:'2', - x:15, - y:65, + x:20, + y:75, }) - layer.clipFunc(function(ctx) { - ctx.rect(0, 0, width-30, height*0.2-60); - }); - - const imageObj = new Image(); - imageObj.src = require('@/assets/sliao/sljhbg.png'); - imageObj.onload = function () { - const shape = new Konva.Image({ - x: 0, - y: 0, - width: width-30, - height:189, - image: imageObj, - }); - layer.add(shape) - shape.zIndex(0) - } const group=new Konva.Group({ x:0, y:0, - width: width-30, + width: width-74, height: height*0.2-60, draggable: true, dragBoundFunc:function (pos){ return { x:pos.x, - y:65 + y:75 } }, }); - layer.add(group) - group.zIndex(2) + + const bgGroup=new Konva.Group({ + x:34, + y:0, + }) + bgGroup.clipFunc(function(ctx) { + ctx.rect(4, 0, width-114, height*0.2-10); + }); + + layer.add(bgGroup) + bgGroup.zIndex(0) + bgGroup.add(group) + + const left2ImageObj=new Image() + left2ImageObj.src = require('@/assets/sliao/left2.png'); + left2ImageObj.onload = function () { + const shape1 = new Konva.Image({ + x: 0, + y: 35, + width: 32, + height:120, + image: this, + }); + layer.add(shape1) + shape1.zIndex(1) + shape1.on('click touchstart',function (){ + group.move({ + x:-116 + }) + }) + } + + const right2ImageObj=new Image() + right2ImageObj.src = require('@/assets/sliao/right2.png'); + right2ImageObj.onload = function () { + const shape1 = new Konva.Image({ + x: width-72, + y: 35, + width: 32, + height:120, + image: this, + }); + layer.add(shape1) + shape1.zIndex(1) + shape1.on('click touchstart',function (){ + group.move({ + x:116 + }) + }) + } + + const imageObj = new Image(); + imageObj.src = require('@/assets/sliao/sljhbg.png'); + imageObj.onload = function () { + const shape = new Konva.Image({ + x: 0, + y: 0, + width: width-60, + height:181, + image: this, + }); + layer.add(shape) + shape.zIndex(0) + } return { layer,group diff --git a/src/views/zyjhzx/sliao/comps/title.js b/src/views/zyjhzx/sliao/comps/title.js index a048572..67e1866 100644 --- a/src/views/zyjhzx/sliao/comps/title.js +++ b/src/views/zyjhzx/sliao/comps/title.js @@ -3,7 +3,7 @@ import Konva from "konva"; const title=function (width,height,title) { const group=new Konva.Group({ x: 0, - y: 8, + y: 0, width: width, height: 20, }) diff --git a/src/views/zyjhzx/sliao/index.vue b/src/views/zyjhzx/sliao/index.vue index 126db7d..28c1e22 100644 --- a/src/views/zyjhzx/sliao/index.vue +++ b/src/views/zyjhzx/sliao/index.vue @@ -53,7 +53,7 @@ export default { methods:{ wsSubscribe(){ this.sockets.subscribe('slComplete', data => { - if (this.currentDw&&this.currentDwIndex&&this.currentDw.id===data.dwId) { + if (this.currentDw&&this.currentDw.id===data.dwId) { if (this.slGroup){ this.slGroup.destroyChildren() } @@ -86,8 +86,9 @@ export default { if (this.sljhGroup){ this.sljhGroup.destroyChildren() } - const itemWith=85; + const itemWith=111; const itemHeight=108 + for (let i = 0; i < list.length; i++) { const item=list[i]; const x=(i+1)*5+i*itemWith; @@ -99,12 +100,183 @@ export default { }) qyGroup.setAttr('index',i) qyGroup.setAttr('item',item) + this.sljhGroup.add(qyGroup) + + const imageObj = new Image(); + imageObj.src = require('@/assets/sliao/sljhItemBg.png'); + imageObj.onload = function () { + const shape = new Konva.Image({ + x: 0, + y: 0, + width: 111, + height:163, + image: this, + }); + qyGroup.add(shape) + shape.zIndex(0) + } + + const tlth=new Konva.Text({ + x: 0, + y: 0, + width: 111, + height:34, + fontSize:12, + fontStyle:'bold', + fill:'#fff', + align:'center', + verticalAlign:'middle', + text:item.tzbh + }) + qyGroup.add(tlth) + + const nameGroup=new Konva.Group({ + x: 5, + y: 43, + width: 38, + height:105, + }) + + const nameImageObj1 = new Image(); + nameImageObj1.src = require('@/assets/sliao/nameBg1.png'); + nameImageObj1.onload = function () { + const shape = new Konva.Image({ + x: 0, + y: 0, + width: 38, + height:105, + image: this, + }); + nameGroup.add(shape) + shape.zIndex(0) + } + qyGroup.add(nameGroup) + + const name1=new Konva.Text({ + x: 0, + y: 0, + width: 38, + height:20, + fontSize:12, + fontStyle:'bold', + fill:'#fff', + align:'center', + verticalAlign:'middle', + text:'船号' + }) + nameGroup.add(name1) + + const name2=new Konva.Text({ + x: 0, + y: 21, + width: 38, + height:20, + fontSize:12, + fontStyle:'bold', + fill:'#fff', + align:'center', + verticalAlign:'middle', + text:'批量' + }) + nameGroup.add(name2) + + const name3=new Konva.Text({ + x: 0, + y: 43, + width: 38, + height:20, + fontSize:12, + fontStyle:'bold', + fill:'#fff', + align:'center', + verticalAlign:'middle', + text:'规格' + }) + nameGroup.add(name3) + + const name4=new Konva.Text({ + x: 0, + y: 64.5, + width: 38, + height:20, + fontSize:12, + fontStyle:'bold', + fill:'#fff', + align:'center', + verticalAlign:'middle', + text:'垛位' + }) + nameGroup.add(name4) + + const name5=new Konva.Text({ + x: 0, + y: 86.5, + width: 38, + height:20, + fontSize:12, + fontStyle:'bold', + fill:'#fff', + align:'center', + verticalAlign:'middle', + text:'层数' + }) + nameGroup.add(name5) + + const infoGroup=new Konva.Group({ + x: 43, + y: 43, + width: 65, + height:105, + }) + qyGroup.add(infoGroup) + + const info1=new Konva.Text({ + x: 0, + y: 0, + width: 65, + height:20, + fontSize:12, + fontStyle:'bold', + fill:'#fff', + align:'center', + verticalAlign:'middle', + text:item.dcCh + }) + infoGroup.add(info1) + + const info2=new Konva.Text({ + x: 0, + y: 21, + width: 65, + height:20, + fontSize:12, + fontStyle:'bold', + fill:'#fff', + align:'center', + verticalAlign:'middle', + text:item.dcPl + }) + infoGroup.add(info2) + + const info3=new Konva.Text({ + x: 0, + y: 43, + width: 65, + height:20, + fontSize:9, + fontStyle:'bold', + fill:'#fff', + align:'center', + verticalAlign:'middle', + text:item.wpgg + }) + infoGroup.add(info3) const _layer=this.layer const _sljhGroup=this.sljhGroup; let touchingFlag=false; const that=this - qyGroup.on('touchstart',function ({evt}){ + qyGroup.on('click touchstart',function ({evt}){ const worker=that.getCurrentWorker(); if (!that.canSl||!worker){ return @@ -126,6 +298,9 @@ export default { tmpGroup.dragBoundFunc(function (pos){ return{...pos} }) + tmpGroup.startDrag() + _that.visible(false) + tmpGroup.on('dragend',function (){ const {x:thisX,y:thisY}=this.absolutePosition() const {x,y}=that.slGroup.absolutePosition() @@ -150,9 +325,7 @@ export default { bfr:that.getCurrentWorker()?.userCode } - shangLiao(data).then(res=>{ - console.log(res) - }) + shangLiao(data).then(res=>{}) this.remove() @@ -165,8 +338,6 @@ export default { } _sljhGroup.draggable(true) }) - tmpGroup.startDrag() - _that.visible(false) } } },500) @@ -178,30 +349,6 @@ export default { _sljhGroup.draggable(true) }) - const rect=new Konva.Rect({ - x:0, - y:0, - width:itemWith, - height:itemHeight, - stroke:'black', - strokeWidth:1, - }) - qyGroup.add(rect) - const text=new Konva.Text({ - x:0, - y:0, - width:itemWith, - height:itemHeight, - lineHeight:1, - stroke:'blue', - strokeWidth:0.1, - text:item.dcCh+'\n'+item.dcPl+'\n'+item.dcFd+'\n'+item.tzbh+'\n'+formatTlt(item.kw,this.tlt), - align:'center', - verticalAlign:'middle', - }) - qyGroup.add(text) - - this.sljhGroup.add(qyGroup) } }, initYcldw(){ @@ -255,9 +402,9 @@ export default {