parent
94abb9c395
commit
a473fafbb2
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,48 @@
|
|||||||
|
<template>
|
||||||
|
<VxeGrid ref="hxPgd" v-bind="gridOptions" @cell-click="cellClick" @current-change="getCurrentData" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import paoWanPgdConfig from './pgdTable'
|
||||||
|
import {getDw, getPgd} from "@/api/zyjh";
|
||||||
|
export default {
|
||||||
|
name:'HxianPgd',
|
||||||
|
props:{
|
||||||
|
workers:{
|
||||||
|
type:Array,
|
||||||
|
default:[]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
gridOptions:{},
|
||||||
|
list:{},
|
||||||
|
setExt:null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created(){
|
||||||
|
const {options,columns,setExt}=paoWanPgdConfig()
|
||||||
|
this.setExt=setExt
|
||||||
|
this.gridOptions=options
|
||||||
|
this.gridOptions.columns=columns
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
initData(worker,zt){
|
||||||
|
getDw({type:'llj'}).then(res=>{
|
||||||
|
this.gridOptions.ycldw=res.data
|
||||||
|
})
|
||||||
|
getPgd({user:worker,zt:zt,field:'hxry'}).then(res=>{
|
||||||
|
this.gridOptions.data=res.data
|
||||||
|
this.setExt('workers',this.$props.workers)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getCurrentData(){
|
||||||
|
const data= this.$refs.hxPgd.getCurrentRecord()
|
||||||
|
window.localStorage.setItem("hxfk",JSON.stringify(data))
|
||||||
|
},
|
||||||
|
cellClick({row}){
|
||||||
|
this.$emit('initPgd',row)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,276 @@
|
|||||||
|
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')
|
||||||
|
const _width=width*0.32,_height=height*0.713
|
||||||
|
const x=width*0.16+25,y=260
|
||||||
|
const bg=function (){
|
||||||
|
const group=new Konva.Group({
|
||||||
|
x:x,
|
||||||
|
y:y,
|
||||||
|
width:_width,
|
||||||
|
height:_height
|
||||||
|
})
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
const container=function (){
|
||||||
|
return new Konva.Group({
|
||||||
|
x:0,
|
||||||
|
y:0,
|
||||||
|
width:_width,
|
||||||
|
height:_height
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const bgGroup=bg();
|
||||||
|
const slGroup=container()
|
||||||
|
bgGroup.add(slGroup)
|
||||||
|
slGroup.zIndex(1)
|
||||||
|
|
||||||
|
let currSlist=null
|
||||||
|
|
||||||
|
const thatHeight=height
|
||||||
|
const gangban=function (index,item){
|
||||||
|
const group=new Konva.Group({
|
||||||
|
x:0,
|
||||||
|
y:thatHeight-310-index*40,
|
||||||
|
// draggable:true
|
||||||
|
})
|
||||||
|
|
||||||
|
group.setAttr('index',index)
|
||||||
|
group.setAttr('item',item)
|
||||||
|
|
||||||
|
slGroup.add(group)
|
||||||
|
const {x}=group.absolutePosition()
|
||||||
|
group.dragBoundFunc(function (pos){
|
||||||
|
return {
|
||||||
|
x:x,
|
||||||
|
y:pos.y
|
||||||
|
}
|
||||||
|
})
|
||||||
|
let _index=0
|
||||||
|
let touchingFlag=false;
|
||||||
|
group.on('mousedown touchstart',function (evt){
|
||||||
|
const layer=this.parent.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-50)
|
||||||
|
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==='sb'){
|
||||||
|
const {x,y}=item.absolutePosition()
|
||||||
|
const worker=JSON.parse(window.localStorage.getItem('worker'))
|
||||||
|
if ((thisX>=x&&thisY>=y&&thisX<=(x+item.attrs.width)&&thisY<=(y+item.attrs.height))&&!!worker){
|
||||||
|
const info=this.getAttr('item')
|
||||||
|
const zyjh=JSON.parse(window.localStorage.getItem('hxfk'))
|
||||||
|
console.log(zyjh)
|
||||||
|
if (!zyjh){
|
||||||
|
VXETable.modal.message({content: '请先选择待报工的派工单', status: 'warning'})
|
||||||
|
this.remove()
|
||||||
|
that.visible(true)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (zyjh.dcCh!==info.czbh&&zyjh.dcPl!==info.pl&&zyjh.dcFd!==info.fd&&zyjh.tzbh!==info.tlth){
|
||||||
|
VXETable.modal.message({content: '板材与工单未对应', status: 'warning'})
|
||||||
|
this.remove()
|
||||||
|
that.visible(true)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
zx({
|
||||||
|
field:'hxfkrq',
|
||||||
|
zxZtName:'HXFK',
|
||||||
|
list:[{
|
||||||
|
id:zyjh.id,
|
||||||
|
hxfkry: worker.userCode
|
||||||
|
}],
|
||||||
|
ycldwInfo:info
|
||||||
|
}).then(res=>{
|
||||||
|
if (res.success){
|
||||||
|
window.localStorage.removeItem('hxfk')
|
||||||
|
this.remove()
|
||||||
|
that.remove()
|
||||||
|
}else{
|
||||||
|
this.remove()
|
||||||
|
that.visible(true)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}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()
|
||||||
|
this.startPos={
|
||||||
|
x:x,
|
||||||
|
y:y
|
||||||
|
}
|
||||||
|
})
|
||||||
|
group.on('dragmove',function (){
|
||||||
|
if(_index===0){
|
||||||
|
_index=this.getAttr('index')
|
||||||
|
}
|
||||||
|
this.zIndex(7)
|
||||||
|
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 = currSlist.splice(index-1, 1)[0];
|
||||||
|
currSlist.splice(_index-1, 0, element);
|
||||||
|
this.setAttr('index',_index)
|
||||||
|
_index=0
|
||||||
|
slGroup.destroyChildren()
|
||||||
|
handler(currSlist)
|
||||||
|
})
|
||||||
|
|
||||||
|
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:`${item.wph||''},${item.wpgg}`,
|
||||||
|
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:`${item.czbh},${item.pl},${item.fd}\n上料:${item.bfrq||''},切割:${item.qgjhrq||''}`,
|
||||||
|
align:'center',
|
||||||
|
verticalAlign:'middle',
|
||||||
|
})
|
||||||
|
group.add(concent)
|
||||||
|
|
||||||
|
return group
|
||||||
|
}
|
||||||
|
|
||||||
|
function handler(slList){
|
||||||
|
currSlist=slList;
|
||||||
|
for (let i = 1; i <= slList.length; i++) {
|
||||||
|
const item=slList[i-1]
|
||||||
|
const _group=gangban(i,item,item.length)
|
||||||
|
slGroup.add(_group)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
container,slGroup,handler,bgGroup
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default baifang
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
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();
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default container
|
||||||
@ -0,0 +1,156 @@
|
|||||||
|
import Konva from "konva";
|
||||||
|
|
||||||
|
export default function (width,height,callback){
|
||||||
|
const _width=width*0.08,_height=height*0.73
|
||||||
|
|
||||||
|
const container=function (){
|
||||||
|
const x=width*0.08+20,y=260
|
||||||
|
|
||||||
|
const group=new Konva.Group({
|
||||||
|
x:0,
|
||||||
|
y:0,
|
||||||
|
width:_width,
|
||||||
|
height:_height,
|
||||||
|
draggable:true,
|
||||||
|
dragBoundFunc:function (pos){
|
||||||
|
return {
|
||||||
|
x:x,
|
||||||
|
y:pos.y
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const bgGroup=new Konva.Group({
|
||||||
|
x:x,
|
||||||
|
y:y,
|
||||||
|
width:_width,
|
||||||
|
height:_height
|
||||||
|
})
|
||||||
|
bgGroup.add(group)
|
||||||
|
bgGroup.clipFunc(function(ctx) {
|
||||||
|
ctx.rect(0, 4, _width, _height*0.969);
|
||||||
|
});
|
||||||
|
|
||||||
|
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*0.975,
|
||||||
|
image: this,
|
||||||
|
});
|
||||||
|
bgGroup.add(shape)
|
||||||
|
shape.zIndex(0)
|
||||||
|
}
|
||||||
|
|
||||||
|
return {bgGroup,group}
|
||||||
|
}
|
||||||
|
|
||||||
|
let selectedShape=null;
|
||||||
|
const dw=function (index,item=[]){
|
||||||
|
|
||||||
|
const alignSize=1
|
||||||
|
const width=((_width-5)/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 (){
|
||||||
|
if (selectedShape){
|
||||||
|
selectedShape.hide()
|
||||||
|
if (selectedShape===selectShape){
|
||||||
|
selectedShape=null
|
||||||
|
callback(null,null)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
selectedShape=selectShape
|
||||||
|
selectedShape.show()
|
||||||
|
callback(index,item)
|
||||||
|
})
|
||||||
|
|
||||||
|
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 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 formatName=()=>{
|
||||||
|
for (const it of qgkw) {
|
||||||
|
if (it.bm===item.tzbh){
|
||||||
|
return it.bmsm
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const text=new Konva.Text({
|
||||||
|
x:0,
|
||||||
|
y:0,
|
||||||
|
width: width,
|
||||||
|
height: height,
|
||||||
|
fill:'black',
|
||||||
|
text:`${formatName()}\n${item.list.length}张`,
|
||||||
|
align:'center',
|
||||||
|
verticalAlign:'middle',
|
||||||
|
fontSize:14
|
||||||
|
})
|
||||||
|
group.add(text)
|
||||||
|
|
||||||
|
return group
|
||||||
|
}
|
||||||
|
|
||||||
|
const qgkw=[
|
||||||
|
{"bmsm": "2跨超长超宽曲板", "bmlb": "QGKW", "bm": "10"},
|
||||||
|
{"bmsm": "2跨T型材腹板", "bmlb": "QGKW", "bm": "11"},
|
||||||
|
{"bmsm": "2跨激光切割板", "bmlb": "QGKW", "bm": "12"},
|
||||||
|
{"bmsm": "3跨曲板", "bmlb": "QGKW", "bm": "13"},
|
||||||
|
{"bmsm": "3跨厚板", "bmlb": "QGKW", "bm": "14"},
|
||||||
|
{"bmsm": "4跨普通板", "bmlb": "QGKW", "bm": "15"},
|
||||||
|
{"bmsm": "7跨型板", "bmlb": "QGKW", "bm": "16"},
|
||||||
|
{"bmsm": "光电", "bmlb": "QGKW", "bm": "17"},
|
||||||
|
{"bmsm": "2跨T型材面板", "bmlb": "QGKW", "bm": "5"},
|
||||||
|
{"bmsm": "3跨平铁", "bmlb": "QGKW", "bm": "6"},
|
||||||
|
{"bmsm": "1跨平直大板", "bmlb": "QGKW", "bm": "7"},
|
||||||
|
{"bmsm": "1跨进线板", "bmlb": "QGKW", "bm": "8"},
|
||||||
|
{"bmsm": "2跨超长超宽板", "bmlb": "QGKW", "bm": "9"}
|
||||||
|
]
|
||||||
|
|
||||||
|
return {
|
||||||
|
container,dw
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,152 @@
|
|||||||
|
import Konva from "konva";
|
||||||
|
|
||||||
|
export default function (width,height){
|
||||||
|
const _width=width*0.075,_height=height*0.73
|
||||||
|
|
||||||
|
const container=function (){
|
||||||
|
const x=20,y=260
|
||||||
|
|
||||||
|
const group=new Konva.Group({
|
||||||
|
x:0,
|
||||||
|
y:0,
|
||||||
|
width:_width,
|
||||||
|
height:_height,
|
||||||
|
draggable:true,
|
||||||
|
dragBoundFunc:function (pos){
|
||||||
|
return {
|
||||||
|
x:x,
|
||||||
|
y:pos.y
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const bgGroup=new Konva.Group({
|
||||||
|
x:x,
|
||||||
|
y:y,
|
||||||
|
width:_width,
|
||||||
|
height:_height,
|
||||||
|
})
|
||||||
|
bgGroup.clipFunc(function(ctx) {
|
||||||
|
ctx.rect(0, 0, _width, _height*0.969);
|
||||||
|
});
|
||||||
|
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*0.975,
|
||||||
|
image: this,
|
||||||
|
});
|
||||||
|
bgGroup.add(shape)
|
||||||
|
shape.zIndex(0)
|
||||||
|
}
|
||||||
|
|
||||||
|
return {bgGroup,group}
|
||||||
|
}
|
||||||
|
|
||||||
|
let currentWork=null;
|
||||||
|
let selectedShape=null;
|
||||||
|
|
||||||
|
const getCurrentWorker=function (){
|
||||||
|
return currentWork
|
||||||
|
}
|
||||||
|
|
||||||
|
const person=function (index,persons={}){
|
||||||
|
const alignSize=1
|
||||||
|
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,
|
||||||
|
width:width,
|
||||||
|
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: 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()
|
||||||
|
})
|
||||||
|
|
||||||
|
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:height,
|
||||||
|
width:width,
|
||||||
|
height:height*0.1,
|
||||||
|
text: persons.userName,
|
||||||
|
align: 'center',
|
||||||
|
verticalAlign:'middle',
|
||||||
|
fontSize:12
|
||||||
|
})
|
||||||
|
group.add(text)
|
||||||
|
|
||||||
|
return group
|
||||||
|
}
|
||||||
|
|
||||||
|
return{
|
||||||
|
container,person
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,505 @@
|
|||||||
|
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.95
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
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: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.djh}`,
|
||||||
|
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)
|
||||||
|
generateQRCode(data.djh,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 name=formatWorker(data.pwry)
|
||||||
|
|
||||||
|
const plText=new Konva.Text({
|
||||||
|
x:0,
|
||||||
|
y:30,
|
||||||
|
width:(_width-60)/2,
|
||||||
|
height:30,
|
||||||
|
fill:'#fff',
|
||||||
|
text:name,
|
||||||
|
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,setWorkers
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,86 @@
|
|||||||
|
|
||||||
|
export default function () {
|
||||||
|
const options={
|
||||||
|
height:215,
|
||||||
|
align:'center',
|
||||||
|
border: true,
|
||||||
|
resizable: true,
|
||||||
|
keepSource:true,
|
||||||
|
size:'mini',
|
||||||
|
showOverflow: true,
|
||||||
|
scrollY:{enable:true},
|
||||||
|
highlightCurrentRow:true,
|
||||||
|
data:[],
|
||||||
|
ycldw:null,
|
||||||
|
}
|
||||||
|
const ext={}
|
||||||
|
const setExt=function (key,value){
|
||||||
|
ext[key]=value
|
||||||
|
}
|
||||||
|
|
||||||
|
const nameFormat=function ({cellValue}){
|
||||||
|
const workers=ext.workers
|
||||||
|
for (const item of workers) {
|
||||||
|
if(item.userCode===cellValue){
|
||||||
|
return item.userName
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const gdhFormat=function ({cellValue}){
|
||||||
|
if (cellValue){
|
||||||
|
return 'PW'+cellValue
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
const dwFormat=function ({cellValue}){
|
||||||
|
console.log(cellValue)
|
||||||
|
console.log(options.ycldw)
|
||||||
|
for (const item of options.ycldw) {
|
||||||
|
if (cellValue===(item.id+"")){
|
||||||
|
for (const it of ycldw){
|
||||||
|
if (it.bm===item.tzbh){
|
||||||
|
return it.bmsm
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const columns = [
|
||||||
|
{ type: 'checkbox', width: 40 },
|
||||||
|
{ type: 'seq',title:'序号', width: 50 },
|
||||||
|
{ field: 'djh',title:'派工单号', width: 120,},
|
||||||
|
{field: 'lldw', title: '垛位', width: 80,formatter: dwFormat},
|
||||||
|
{field: 'llcs', title: '层数', width: 60},
|
||||||
|
{field: 'dcCh', title: '船号', width: 80},
|
||||||
|
{field: 'dcPl', title: '批量', width: 80},
|
||||||
|
{field: 'wpgg', title: '材质', width: 80},
|
||||||
|
{field: 'wpxh', title: '规格', width: 70},
|
||||||
|
{field: 'slwlh', title: '炉批号', width: 100},
|
||||||
|
{field: 'tzbh', title: '套料图号', width: 100},
|
||||||
|
{field: 'hxry', title: '接收人', width: 80,formatter: nameFormat},
|
||||||
|
{field: 'hxpgry', title: '派工人', width: 80,formatter: nameFormat},
|
||||||
|
{field: 'hxpgrq', title: '派工时间', width: 100},
|
||||||
|
]
|
||||||
|
|
||||||
|
const ycldw=[
|
||||||
|
{"bmsm": "2跨超长超宽曲板", "bmlb": "QGKW", "bm": "10"},
|
||||||
|
{"bmsm": "2跨T型材腹板", "bmlb": "QGKW", "bm": "11"},
|
||||||
|
{"bmsm": "2跨激光切割板", "bmlb": "QGKW", "bm": "12"},
|
||||||
|
{"bmsm": "3跨曲板", "bmlb": "QGKW", "bm": "13"},
|
||||||
|
{"bmsm": "3跨厚板", "bmlb": "QGKW", "bm": "14"},
|
||||||
|
{"bmsm": "4跨普通板", "bmlb": "QGKW", "bm": "15"},
|
||||||
|
{"bmsm": "7跨型板", "bmlb": "QGKW", "bm": "16"},
|
||||||
|
{"bmsm": "光电", "bmlb": "QGKW", "bm": "17"},
|
||||||
|
{"bmsm": "2跨T型材面板", "bmlb": "QGKW", "bm": "5"},
|
||||||
|
{"bmsm": "3跨平铁", "bmlb": "QGKW", "bm": "6"},
|
||||||
|
{"bmsm": "1跨平直大板", "bmlb": "QGKW", "bm": "7"},
|
||||||
|
{"bmsm": "1跨进线板", "bmlb": "QGKW", "bm": "8"},
|
||||||
|
{"bmsm": "2跨超长超宽板", "bmlb": "QGKW", "bm": "9"}
|
||||||
|
]
|
||||||
|
|
||||||
|
return {
|
||||||
|
options,
|
||||||
|
columns,
|
||||||
|
setExt
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
import Konva from "konva";
|
||||||
|
|
||||||
|
export default function (width,height){
|
||||||
|
const x=width*0.495,y=260,_width=width*0.186,_height=height*0.713
|
||||||
|
const container=new Konva.Group({
|
||||||
|
id:'sb',
|
||||||
|
x:x,
|
||||||
|
y:y,
|
||||||
|
width:_width,
|
||||||
|
height:_height
|
||||||
|
})
|
||||||
|
|
||||||
|
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,
|
||||||
|
});
|
||||||
|
container.add(shape)
|
||||||
|
shape.zIndex(0)
|
||||||
|
}
|
||||||
|
|
||||||
|
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,280 @@
|
|||||||
|
import Konva from "konva";
|
||||||
|
|
||||||
|
export const sljh=function (width,height){
|
||||||
|
|
||||||
|
const layer=new Konva.Layer({
|
||||||
|
id:'2',
|
||||||
|
x:20,
|
||||||
|
y:75,
|
||||||
|
})
|
||||||
|
|
||||||
|
const group=new Konva.Group({
|
||||||
|
x:0,
|
||||||
|
y:0,
|
||||||
|
width: width*0.6,
|
||||||
|
height: height*0.2-60,
|
||||||
|
draggable: true,
|
||||||
|
dragBoundFunc:function (pos){
|
||||||
|
return {
|
||||||
|
x:pos.x,
|
||||||
|
y:75
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const bgGroup=new Konva.Group({
|
||||||
|
x:34,
|
||||||
|
y:0,
|
||||||
|
})
|
||||||
|
bgGroup.clipFunc(function(ctx) {
|
||||||
|
ctx.rect(4, 0, width*0.6, 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*0.65,
|
||||||
|
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: 8,
|
||||||
|
y: 0,
|
||||||
|
width: width*0.66,
|
||||||
|
height:181,
|
||||||
|
image: this,
|
||||||
|
});
|
||||||
|
layer.add(shape)
|
||||||
|
shape.zIndex(0)
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawItem(i,item){
|
||||||
|
const itemWith=111;
|
||||||
|
const itemHeight=108
|
||||||
|
|
||||||
|
const x=(i+1)*5+i*itemWith;
|
||||||
|
const qyGroup=new Konva.Group({
|
||||||
|
x:x,
|
||||||
|
y:10,
|
||||||
|
width:itemWith,
|
||||||
|
height:itemHeight,
|
||||||
|
})
|
||||||
|
qyGroup.setAttr('index',i)
|
||||||
|
qyGroup.setAttr('item',item)
|
||||||
|
group.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)
|
||||||
|
|
||||||
|
return qyGroup
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
layer,group,drawItem
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
import Konva from "konva";
|
||||||
|
|
||||||
|
const title=function (width,height,title) {
|
||||||
|
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,
|
||||||
|
text: title,
|
||||||
|
align: 'center',
|
||||||
|
fill:'#fff',
|
||||||
|
fontSize: 32,
|
||||||
|
fontStyle:'bold'
|
||||||
|
})
|
||||||
|
group.add(text)
|
||||||
|
|
||||||
|
return group
|
||||||
|
}
|
||||||
|
|
||||||
|
export default title
|
||||||
@ -0,0 +1,216 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div id="pwpg" class="pwpg" ref="pwpg"></div>
|
||||||
|
<HxianPgd id="hxpgd" ref="hxpgd" @initPgd="initPgd" :pgd="pgd" :workers="workers" @pgdClick="pagClick" />
|
||||||
|
<ZyjhSelectComp id="selectComp" ref="selRef" @initWorkers="initWorkers"/>
|
||||||
|
</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 drawSb from './comps/sb'
|
||||||
|
import baifang from "./comps/baifang";
|
||||||
|
import {getPgd, getYcldw} from "@/api/zyjh";
|
||||||
|
import {getBzryList} from "@/api/sjzx/bzzGL";
|
||||||
|
import HxianPgd from "@/views/zyjhzx/hxianfkui/comps/HxianPgd.vue";
|
||||||
|
import ZyjhSelectComp from "@/views/zyjhzx/components/SelectComp.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name:'PWanFKui',
|
||||||
|
components: {ZyjhSelectComp, HxianPgd},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
title:'零 件 作 业 报 工',
|
||||||
|
width:0,
|
||||||
|
height:0,
|
||||||
|
stage:null,
|
||||||
|
layer:null,
|
||||||
|
sljhGroup:null,
|
||||||
|
pgdGroup:null,
|
||||||
|
drawGd:null,
|
||||||
|
dw:[],
|
||||||
|
pgd:[],
|
||||||
|
slGroup:null,
|
||||||
|
currentDw:null,
|
||||||
|
currentDwIndex:null,
|
||||||
|
currentWorker:null,
|
||||||
|
setWorkers:null,
|
||||||
|
workers:null,
|
||||||
|
dwGroup:null,
|
||||||
|
workerGroup:null,
|
||||||
|
person:null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$socket.open()
|
||||||
|
this.wsSubscribe()
|
||||||
|
this.initKonvaStage();
|
||||||
|
},
|
||||||
|
created(){
|
||||||
|
window.addEventListener('resize', this.initKonvaStage)
|
||||||
|
},
|
||||||
|
sockets:{},
|
||||||
|
methods:{
|
||||||
|
wsSubscribe(){
|
||||||
|
this.sockets.subscribe('hxComplete', data => {
|
||||||
|
if (this.currentDw&&this.currentDw.id===data.dwId) {
|
||||||
|
if (this.slGroup){
|
||||||
|
this.slGroup.destroyChildren()
|
||||||
|
}
|
||||||
|
for (let i = 0; i < this.currentDw.list.length; i++) {
|
||||||
|
const item=this.currentDw.list[i]
|
||||||
|
if (item.czbh===data.czbh&&item.pl===data.pl&&item.tlth===data.tlth){
|
||||||
|
this.currentDw.list.splice(i,1)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.drawBaiFang(this.dw[this.currentDwIndex].list)
|
||||||
|
this.initDw()
|
||||||
|
this.$refs.hxpgd.initData(this.currentWorker.userCode,'51')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.sockets.subscribe('zyjhzx', data => {
|
||||||
|
if (this.zt===data.zt){
|
||||||
|
const tmpArr=[{
|
||||||
|
id:data.zyjh.id,
|
||||||
|
hxfkry:data.zyjh.hxry
|
||||||
|
}]
|
||||||
|
this.$refs.hxpgd.paigong0(tmpArr)
|
||||||
|
}else{
|
||||||
|
this.$message.error(`工单号错误:${data.gdh}`)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
initPgd(pgd={}){
|
||||||
|
const group=this.drawGd(pgd)
|
||||||
|
this.pgdGroup.add(group)
|
||||||
|
},
|
||||||
|
pagClick(){
|
||||||
|
|
||||||
|
},
|
||||||
|
initDwInfo(index,dw){
|
||||||
|
if (this.slGroup){
|
||||||
|
this.slGroup.destroyChildren()
|
||||||
|
}
|
||||||
|
this.canSl=true
|
||||||
|
this.currentDw=dw
|
||||||
|
this.currentDwIndex=index
|
||||||
|
!!dw&&this.drawBaiFang(dw.list)
|
||||||
|
},
|
||||||
|
initBaiFang(){
|
||||||
|
const {slGroup,handler,bgGroup:slBgGroup}= baifang({width:this.width,height:this.height})
|
||||||
|
this.slGroup=slGroup
|
||||||
|
this.layer.add(slBgGroup)
|
||||||
|
this.drawBaiFang=handler
|
||||||
|
},
|
||||||
|
initDw(){
|
||||||
|
if (this.dwGroup){
|
||||||
|
this.dwGroup.destroyChildren()
|
||||||
|
}
|
||||||
|
const that=this
|
||||||
|
getYcldw({type:'llj'}).then(res=>{
|
||||||
|
const {container,dw}=drawDw(this.width,this.height,that.initDwInfo)
|
||||||
|
const {bgGroup,group}=container()
|
||||||
|
this.dwGroup=group
|
||||||
|
this.dw=res.data
|
||||||
|
this.layer.add(bgGroup)
|
||||||
|
|
||||||
|
for (let i=0;i<res.data.length;i++){
|
||||||
|
const item=res.data[i]
|
||||||
|
const dwGroup=dw(i,item)
|
||||||
|
group.add(dwGroup)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
initWorkers(bzType){
|
||||||
|
if (this.workerGroup){
|
||||||
|
this.workerGroup.destroyChildren()
|
||||||
|
}else{
|
||||||
|
const {container,person,getCurrentWorker}=workers(this.width,this.height)
|
||||||
|
this.person=person
|
||||||
|
this.getCurrentWorker=getCurrentWorker
|
||||||
|
const {bgGroup,group}=container()
|
||||||
|
this.workerGroup=group
|
||||||
|
this.layer.add(bgGroup)
|
||||||
|
|
||||||
|
}
|
||||||
|
getBzryList({zyq:this.$route.query.zyq,zt:bzType}).then(res=>{
|
||||||
|
this.workers=res.data
|
||||||
|
this.setWorkers(res.data)
|
||||||
|
const that=this
|
||||||
|
for (let i=0;i<res.data.length;i++){
|
||||||
|
const item=res.data[i]
|
||||||
|
const worker=this.person(i,item)
|
||||||
|
worker.on('click touchstart',function (){
|
||||||
|
that.currentWorker=item
|
||||||
|
that.$refs.hxpgd.initData(that.currentWorker.userCode,'51')
|
||||||
|
})
|
||||||
|
this.workerGroup.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.$refs.selRef.getData().bzType)
|
||||||
|
|
||||||
|
this.initDw()
|
||||||
|
|
||||||
|
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 = drawSb(this.width, this.height)
|
||||||
|
this.layer.add(csdGroup)
|
||||||
|
|
||||||
|
this.initBaiFang()
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#selectComp {
|
||||||
|
width:50%;
|
||||||
|
height: auto;
|
||||||
|
position: absolute;
|
||||||
|
top:10px;
|
||||||
|
left:20px;
|
||||||
|
border: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
#hxpgd {
|
||||||
|
width:67%;
|
||||||
|
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>
|
||||||
Loading…
Reference in new issue