1.完善理料、划线、切割派工及反馈功能

src/api/zyjh.js

@@ -40,9 +40,10 @@ export const getSljhPgd=function(data={}){
   })
 }
 
-export const getYcldw=function(){
+export const getYcldw=function(data={}){
   return request({
     url: '/zyjh/ycldw',
     method: 'post',
+    params:data
   })
 }

src/permission.js

@@ -8,7 +8,7 @@ import getPageTitle from '@/utils/get-page-title'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
-const whiteList = ['/menu','/login', '/auth-redirect','/kban','/sliao','/pwpg','/pwfk','/llpg','/llfk','/hxpg','/hxfk','/qgpg','/qgfl'] // no redirect whitelist
+const whiteList = ['/menu','/login', '/auth-redirect','/kban','/sliao','/pwpg','/pwfk','/llpg','/llfk','/hxpg','/hxfk','/qgpg','/qgfk'] // no redirect whitelist
 export function flatRoutes(routes) {
   let ret = [];
   routes.forEach(it => {

src/views/zyjhzx/hxianfkui/comps/HxianPgd.vue

@@ -1,11 +1,18 @@
 <template>
-  <VxeGrid v-bind="gridOptions" @cell-click="cellClick" />
+  <VxeGrid ref="hxPgd" v-bind="gridOptions" @cell-click="cellClick" @current-change="getCurrentData" />
 </template>
 
 <script>
 import paoWanPgdConfig from './pgdTable'
+import {getPgd} from "@/api/zyjh";
 export default {
   name:'HxianPgd',
+  props:{
+    workers:{
+      type:Array,
+      default:[]
+    }
+  },
   data(){
     return{
       gridOptions:{},
@@ -18,6 +25,15 @@ export default {
     this.gridOptions.columns=columns
   },
   methods:{
+    initData(worker,zt){
+      getPgd({user:worker,zt:zt,field:'hxry'}).then(res=>{
+        this.gridOptions.data=res.data
+      })
+    },
+    getCurrentData(){
+      const data= this.$refs.hxPgd.getCurrentRecord()
+      window.localStorage.setItem("hxfk",JSON.stringify(data))
+    },
     cellClick({row}){
       this.$emit('initPgd',row)
     }

src/views/zyjhzx/hxianfkui/comps/baifang.js

@@ -1,10 +1,12 @@
 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.25,_height=height*0.67
+  const _width=width*0.32,_height=height*0.713
   const container=function (){
-    const x=width*0.30+30,y=300
+    const x=width*0.16+25,y=260
 
     const group=new Konva.Group({
       x:x,
@@ -13,16 +15,34 @@ const baifang=function (option={}) {
       height:_height
     })
 
-    const rect=new Konva.Rect({
-      x:0,
-      y:0,
-      width:_width,
+    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,
-      stroke:'black',
-      strokeWidth:1,
-    })
+        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,79 @@ 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==='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
+                    }
+                    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()
@@ -60,7 +154,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 +234,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 +247,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',
     })

src/views/zyjhzx/hxianfkui/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
   }

src/views/zyjhzx/hxianfkui/comps/dw.js

@@ -1,37 +1,58 @@
 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 _width=width*0.08,_height=height*0.73
 
   const container=function (){
-    const x=width*0.134+30,y=300
+    const x=width*0.08+20,y=260
 
     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.add(group)
+    bgGroup.clipFunc(function(ctx) {
+      ctx.rect(0, 4, _width, _height*0.969);
+    });
 
-    return 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 selectedShape=null;
   const dw=function (index,item=[]){
 
-    const alignSize=2
-    const width=((_width-20)/alignSize),height=150
+    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,
@@ -40,20 +61,62 @@ 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,
+    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,
-      stroke:'black',
-      strokeWidth:1,
-    })
+        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)
+    }
 
-    group.add(rect)
+    const qgkw=JSON.parse(window.localStorage.getItem('QGKW'))
+
+    const formatName=()=>{
+      for (const it of qgkw) {
+        if (it.bm===item.tzbh){
+          return it.bmsm
+        }
+      }
+    }
 
     const text=new Konva.Text({
       x:0,
@@ -61,10 +124,10 @@ export default function (width,height,callback){
       width: width,
       height: height,
       fill:'black',
-      text:item.name,
+      text:`${formatName()}\n${item.list.length}张`,
       align:'center',
       verticalAlign:'middle',
-      fontSize:20
+      fontSize:14
     })
     group.add(text)
 

src/views/zyjhzx/hxianfkui/comps/person.js

@@ -1,36 +1,64 @@
 import Konva from "konva";
 
 export default function (width,height){
-  const _width=width*0.134,_height=height*0.67
+  const _width=width*0.075,_height=height*0.73
 
   const container=function (){
-    const x=20,y=300
+    const x=20,y=260
 
     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, 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}
+  }
 
-    group.add(rect)
+  let currentWork=null;
+  let selectedShape=null;
 
-    return group
+  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 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,
@@ -38,21 +66,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',

src/views/zyjhzx/hxianfkui/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=40,_width=width*0.30,_height=height*0.945
+  const x=width*0.66+40,y=40,_width=width*0.30,_height=height*0.95
 
   const container=function (){
     const group=new Konva.Group({
@@ -28,8 +28,22 @@ export default function (width,height){
     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:13,
@@ -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
   }
@@ -280,7 +293,7 @@ export default function (width,height){
       width:(_width-60)/2,
       height:30,
       fill:'#fff',
-      text:data.pwry,
+      text:formatWorker(data.pwry),
       fontSize:18,
       align:'center',
       verticalAlign:'middle'
@@ -486,6 +499,6 @@ export default function (width,height){
   }
 
   return {
-    container,drawGd
+    container,drawGd,setWorkers
   }
 }

src/views/zyjhzx/hxianfkui/comps/pgdTable.js

@@ -1,7 +1,7 @@
 
 export default function () {
   const options={
-    height:250,
+    height:215,
     align:'center',
     border: true,
     resizable: true,
@@ -9,6 +9,7 @@ export default function () {
     size:'mini',
     showOverflow: true,
     scrollY:{enable:true},
+    highlightCurrentRow:true,
     data:[]
   }
   const gdhFormat=function ({cellValue}){
@@ -18,7 +19,6 @@ export default function () {
     return ''
   }
   const columns = [
-    { type: 'checkbox', width: 40 },
     { type: 'seq',title:'序号', width: 60 },
     { field: 'gdh',title:'派工单号', width: 120,formatter: gdhFormat},
     {field: '', title: '抛丸位置', width: 80},

src/views/zyjhzx/hxianfkui/comps/sb.js

@@ -1,25 +1,28 @@
 import Konva from "konva";
 
-//传送带
 export default function (width,height){
-  const x=width*0.45+37,y=300,_width=width*0.2,_height=height*0.67
+  const 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 rect=new Konva.Rect({
-    x:0,
-    y:0,
-    width:_width,
+  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,
-    stroke:'black',
-    strokeWidth:1,
-  })
-
-  container.add(rect)
+      image: this,
+    });
+    container.add(shape)
+    shape.zIndex(0)
+  }
 
   const text=new Konva.Text({
     x: 0,
@@ -27,7 +30,7 @@ export default function (width,height){
     width: _width,
     height:_height,
     fill:'black',
-    text:'设备',
+    text:'划线设备',
     align:'center',
     verticalAlign:'middle',
   })

src/views/zyjhzx/hxianfkui/comps/sljh.js

@@ -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
+  }
+}

src/views/zyjhzx/hxianfkui/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

src/views/zyjhzx/hxianfkui/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <div id="pwpg" class="pwpg" ref="pwpg"></div>
-    <HxianPgd id="pwpgd" ref="pwpgd" @initPgd="initPgd" :pgd="pgd" />
+    <HxianPgd id="hxpgd" ref="hxpgd" @initPgd="initPgd" :pgd="pgd" :workers="workers" />
   </div>
 </template>
 
@@ -11,6 +11,7 @@ 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";
@@ -21,44 +22,76 @@ export default {
   components: {HxianPgd},
   data(){
     return {
-      title:'抛 丸 作 业 反 馈',
+      title:'划 线 作 业 反 馈',
       width:0,
       height:0,
       stage:null,
       layer:null,
+      sljhGroup:null,
       pgdGroup:null,
       drawGd:null,
       dw:[],
       pgd:[],
+      slGroup:null,
+      dw:[],
+      currentDw:null,
+      currentDwIndex:null,
       currentWorker:null,
+      setWorkers:null,
+      workers: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.dw[this.currentDwIndex].list.length; i++) {
+            const item=this.dw[this.currentDwIndex].list[i]
+            if (item.czbh===data.czbh&&item.pl===data.pl&&item.tlth===data.tlth){
+              this.dw[this.currentDwIndex].list.splice(i,1)
+              break
+            }
+          }
+          this.drawBaiFang(this.dw[this.currentDwIndex].list)
+          this.initDw()
+        }
+      })
+    },
     initPgd(pgd={}){
       const group=this.drawGd(pgd)
       this.pgdGroup.add(group)
     },
-    initBaiFang(index,list){
+    initBaiFang(index,item){
       if (this.slGroup){
         this.slGroup.destroyChildren()
       }
       this.canSl=true
+      this.currentDw=item
       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:item.list})
       this.slGroup=slGroup
       this.drawBaiFang=handler
       this.layer.add(slGroup)
     },
     initDw(){
       const that=this
-      getYcldw().then(res=>{
+      getYcldw({type:'llj'}).then(res=>{
         const {container,dw}=drawDw(this.width,this.height,that.initBaiFang)
-        const group=container()
+        const {bgGroup,group}=container()
 
-        this.layer.add(group)
+        this.layer.add(bgGroup)
 
         for (let i=0;i<res.data.length;i++){
           const item=res.data[i]
@@ -68,21 +101,22 @@ export default {
       })
     },
     initWorkers(){
-      const that=this
       getBzryList({resourcesCode:'4KB002'}).then(res=>{
-        const {container,person}=workers(this.width,this.height)
-        const group=container()
-        group.on('click touchstart',function (){
-          that.currentWorker=person
-          getPgd({field:'',jhrqField:'',user:that.currentWorker.userCode}).then(res=>[
-            that.pgd=res.data
-          ])
-        })
-        this.layer.add(group)
+        const {container,person,getCurrentWorker}=workers(this.width,this.height)
+        this.getCurrentWorker=getCurrentWorker
+        const {bgGroup,group}=container()
+        this.layer.add(bgGroup)
+        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=person(i,item)
+          worker.on('click touchstart',function (){
+            that.currentWorker=item
+            that.$refs.hxpgd.initData(that.currentWorker.userCode,'51')
+          })
           group.add(worker)
         }
       })
@@ -101,12 +135,13 @@ export default {
 
       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)
+      const csdGroup = drawSb(this.width, this.height)
       this.layer.add(csdGroup)
     },
   }
@@ -115,8 +150,8 @@ export default {
 </script>
 
 <style>
-#pwpgd {
-  width:55%;
+#hxpgd {
+  width:67%;
   height: auto;
   position: absolute;
   top:45px;

src/views/zyjhzx/hxianpgong/comps/HxianPgd.vue

@@ -1,13 +1,23 @@
 <template>
-  <VxeGrid v-bind="gridOptions" @cell-click="cellClick" />
+  <VxeGrid ref="vxeGrid" v-bind="gridOptions" @cell-click="cellClick" @checkbox-change="checkboxChange" @checkbox-all="checkboxAll" />
 </template>
 
 <script>
+import { VXETable } from 'vxe-table'
 import paoWanPgdConfig from './pgdTable'
+import {getPgd, zx} from "@/api/zyjh";
+
 export default {
   name:'HxianPgd',
+  props: {
+    worker:{
+      type:Function,
+      default:function (){}
+    }
+  },
   data(){
     return{
+      type:'hxpg',
       gridOptions:{},
       list:{},
     }
@@ -16,8 +26,56 @@ export default {
     const {options,columns}=paoWanPgdConfig()
     this.gridOptions=options
     this.gridOptions.columns=columns
+    this.initData()
   },
   methods:{
+    initData() {
+      getPgd({zt: '52'}).then(res => {
+        this.gridOptions.data = res.data
+      })
+    },
+    checkboxAll({checked}) {
+      const worker = this.$props.worker
+      if (!worker) {
+        this.$message.warning('请选择操作人')
+        return;
+      }
+      if (checked) {
+        this.paigong(worker)
+      }
+    },
+    checkboxChange({checked, row}) {
+      const worker = this.$props.worker()
+      if (!worker) {
+        this.$message.warning('请选择操作人')
+        return;
+      }
+      if (checked) {
+        this.paigong(worker)
+      }
+    },
+    paigong(worker) {
+      const list = this.$refs.vxeGrid.getCheckboxRecords()
+      const tmpArr = []
+      for (const item of list) {
+        const data = {
+          id: item.id,
+          hxry: worker.userCode,//抛丸施工人员姓名
+        }
+        tmpArr.push(data)
+      }
+      const data = {
+        type: this.type,
+        field: 'hxpgrq',
+        zxZtName: 'HXPG',
+        list: tmpArr
+      }
+      VXETable.modal.confirm('您确定派工吗？').then(res => {
+        res === 'confirm' && zx(data).then(res=>{
+          this.initData()
+        })
+      })
+    },
     cellClick({row}){
       this.$emit('initPgd',row)
     }

src/views/zyjhzx/hxianpgong/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
   }

src/views/zyjhzx/hxianpgong/comps/dw.js

@@ -1,30 +1,51 @@
 import Konva from "konva";
 
 export default function (width,height){
-  const x=0,y=0,_width=width*0.16,_height=height*0.945
+  const x=0,y=0,_width=width*0.16,_height=height*0.957
 
   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: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.989);
+    });
 
-    const rect=new Konva.Rect({
-      x:0,
-      y:0,
-      width:_width,
+    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,
-      stroke:'black',
-      strokeWidth:1,
-    })
-
-    group.add(rect)
+        image: this,
+      });
+      bgGroup.add(shape)
+      shape.zIndex(0)
+    }
 
-    return group
+    return {bgGroup,group}
   }
 
   const dw=function (index,item={}){
@@ -38,20 +59,31 @@ 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,
+    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,
-      stroke:'black',
-      strokeWidth:1,
-    })
+        image: this,
+      });
+      group.add(shape)
+      shape.zIndex(0)
+    }
+
+    const qgkw=JSON.parse(window.localStorage.getItem('QGKW'))
 
-    group.add(rect)
+    const formatName=()=>{
+      for (const it of qgkw) {
+        if (it.bm===item.tzbh){
+          return it.bmsm
+        }
+      }
+    }
 
     const text=new Konva.Text({
       x:0,
@@ -59,10 +91,10 @@ export default function (width,height){
       width: width,
       height: height,
       fill:'black',
-      text:item.name,
+      text:`${formatName()}\n${item.list.length}张`,
       align:'center',
       verticalAlign:'middle',
-      fontSize:20
+      fontSize:14
     })
     group.add(text)
 

src/views/zyjhzx/hxianpgong/comps/person.js

@@ -4,28 +4,12 @@ export default function (width,height){
   const _width=width*0.5,_height=120
 
   const container=function (){
-    const x=20,y=45
+    const x=14,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,
@@ -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+0.5, 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.515,
+        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,

src/views/zyjhzx/hxianpgong/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=40,_width=width*0.30,_height=height*0.945
+  const x=width*0.66+40,y=40,_width=width*0.30,_height=height*0.955
 
   const container=function (){
     const group=new Konva.Group({

src/views/zyjhzx/hxianpgong/comps/pgdTable.js

@@ -1,7 +1,7 @@
 
 export default function () {
   const options={
-    height:740,
+    height:720,
     align:'center',
     border: true,
     resizable: true,

src/views/zyjhzx/hxianpgong/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

src/views/zyjhzx/hxianpgong/index.vue

@@ -16,7 +16,7 @@ import {getYcldw} from "@/api/zyjh";
 import HxianPgd from "@/views/zyjhzx/hxianpgong/comps/HxianPgd.vue";
 
 export default {
-  name:'PWanPGong',
+  name:'HxianPGong',
   components: {HxianPgd},
   data(){
     return {
@@ -39,10 +39,10 @@ export default {
       this.pgdGroup.add(group)
     },
     initDw(){
-      getYcldw().then(res=>{
+      getYcldw({type:'llj'}).then(res=>{
         const {container,dw}=drawDw(this.width,this.height)
-        const group=container()
-        this.layer.add(group)
+        const {bgGroup,group}=container()
+        this.layer.add(bgGroup)
 
         for (let i=0;i<res.data.length;i++){
           const item=res.data[i]
@@ -98,7 +98,7 @@ export default {
   width:50%;
   height: auto;
   position: absolute;
-  top:175px;
+  top:195px;
   left:20px;
   border: none;
   margin: 0;

src/views/zyjhzx/lliaofkui/comps/LliaoPgd.vue

@@ -1,26 +0,0 @@
-<template>
-  <VxeGrid v-bind="gridOptions" @cell-click="cellClick" />
-</template>
-
-<script>
-import paoWanPgdConfig from './pgdTable'
-export default {
-  name:'LliaoPgd',
-  data(){
-    return{
-      gridOptions:{},
-      list:{},
-    }
-  },
-  created(){
-    const {options,columns}=paoWanPgdConfig()
-    this.gridOptions=options
-    this.gridOptions.columns=columns
-  },
-  methods:{
-    cellClick({row}){
-      this.$emit('initPgd',row)
-    }
-  }
-}
-</script>

src/views/zyjhzx/lliaofkui/comps/PwanPgd.vue

@@ -0,0 +1,40 @@
+<template>
+  <VxeGrid v-bind="gridOptions" @cell-click="cellClick" />
+</template>
+
+<script>
+import paoWanPgdConfig from './pgdTable'
+import {getPgd} from "@/api/zyjh";
+export default {
+  name:'LLiaoPgd',
+  props:{
+    workers:{
+      type:Array,
+      default:[]
+    }
+  },
+  data(){
+    return{
+      gridOptions:{},
+      setExt:null,
+    }
+  },
+  created(){
+    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)
+    }
+  }
+}
+</script>

src/views/zyjhzx/lliaofkui/comps/baifang.js

@@ -1,10 +1,12 @@
 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.25,_height=height*0.67
+  const _width=width*0.364,_height=height*0.712
   const container=function (){
-    const x=width*0.30+30,y=300
+    const x=width*0.30+30,y=260
 
     const group=new Konva.Group({
       x:x,
@@ -13,16 +15,34 @@ const baifang=function (option={}) {
       height:_height
     })
 
-    const rect=new Konva.Rect({
-      x:0,
-      y:0,
-      width:_width,
+    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,
-      stroke:'black',
-      strokeWidth:1,
-    })
+        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',
     })
@@ -163,6 +262,7 @@ const baifang=function (option={}) {
   }
 
   function handler(slList){
+    console.log(slList)
     for (let i = 1; i <= slList.length; i++) {
       const item=slList[i-1]
       const _group=gangban(i,item,item.length)

src/views/zyjhzx/lliaofkui/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
   }

src/views/zyjhzx/lliaofkui/comps/csd.js

@@ -1,38 +0,0 @@
-import Konva from "konva";
-
-//传送带
-export default function (width,height){
-  const x=width*0.55+40,y=45,_width=width*0.1,_height=height*0.945
-  const container=new Konva.Group({
-    x:x,
-    y:y,
-    width:_width,
-    height:_height
-  })
-
-  const rect=new Konva.Rect({
-    x:0,
-    y:0,
-    width:_width,
-    height:_height,
-    stroke:'black',
-    strokeWidth:1,
-  })
-
-  container.add(rect)
-
-  const text=new Konva.Text({
-    x: 0,
-    y: 0,
-    width: _width,
-    height:_height,
-    fill:'black',
-    text:'传送带',
-    align:'center',
-    verticalAlign:'middle',
-  })
-
-  container.add(text)
-
-  return container
-}

src/views/zyjhzx/lliaofkui/comps/dw.js

@@ -1,33 +1,54 @@
 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 _width=width*0.16,_height=height*0.73
 
   const container=function (){
-    const x=width*0.134+30,y=300
+    const x=width*0.134+30,y=260
 
     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.add(group)
+    bgGroup.clipFunc(function(ctx) {
+      ctx.rect(0, 6, _width, _height*0.965);
+    });
 
-    return 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 selectedShape=null;
   const dw=function (index,item=[]){
 
     const alignSize=2
@@ -40,20 +61,61 @@ 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,
+    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,
-      stroke:'black',
-      strokeWidth:1,
-    })
+        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)
+    }
 
-    group.add(rect)
+    const qgkw=JSON.parse(window.localStorage.getItem('QGKW'))
+    const formatName=()=>{
+      for (const it of qgkw) {
+        if (it.bm===item.tzbh){
+          return it.bmsm
+        }
+      }
+    }
 
     const text=new Konva.Text({
       x:0,
@@ -61,10 +123,10 @@ export default function (width,height,callback){
       width: width,
       height: height,
       fill:'black',
-      text:item.name,
+      text:`${formatName()}\n${item.list.length}张`,
       align:'center',
       verticalAlign:'middle',
-      fontSize:20
+      fontSize:14
     })
     group.add(text)
 

src/views/zyjhzx/lliaofkui/comps/person.js

@@ -1,36 +1,64 @@
 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.73
 
   const container=function (){
-    const x=20,y=300
+    const x=20,y=260
 
     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, 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}
+  }
 
-    group.add(rect)
+  let currentWork=null;
+  let selectedShape=null;
 
-    return group
+  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 +66,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',

src/views/zyjhzx/lliaofkui/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=40,_width=width*0.30,_height=height*0.945
+  const x=width*0.66+40,y=40,_width=width*0.30,_height=height*0.95
 
   const container=function (){
     const group=new Konva.Group({
@@ -28,8 +28,22 @@ export default function (width,height){
     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:13,
@@ -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
   }
@@ -280,7 +293,7 @@ export default function (width,height){
       width:(_width-60)/2,
       height:30,
       fill:'#fff',
-      text:data.pwry,
+      text:formatWorker(data.pwry),
       fontSize:18,
       align:'center',
       verticalAlign:'middle'
@@ -486,6 +499,6 @@ export default function (width,height){
   }
 
   return {
-    container,drawGd
+    container,drawGd,setWorkers
   }
 }

src/views/zyjhzx/lliaofkui/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
   }
 }

src/views/zyjhzx/lliaofkui/comps/sljh.js

@@ -0,0 +1,281 @@
+import Konva from "konva";
+import {shangLiao} from "@/api/zyjh";
+
+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
+  }
+}

src/views/zyjhzx/lliaofkui/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

src/views/zyjhzx/lliaofkui/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="container">
     <div id="pwpg" class="pwpg" ref="pwpg"></div>
-    <LliaoPgd id="pwpgd" ref="pwpgd" @initPgd="initPgd" :pgd="pgd" />
   </div>
 </template>
 
@@ -12,54 +11,173 @@ import workers from "./comps/person";
 import drawDw from './comps/dw'
 import drawPgd from './comps/pgd'
 import baifang from "./comps/baifang";
-import drawCsd from './comps/csd'
-import {getPgd, getYcldw} from "@/api/zyjh";
+import {sljh} from "@/views/zyjhzx/lliaofkui/comps/sljh";
+import {getPgd, getYcldw, shangLiao} from "@/api/zyjh";
 import {getBzryList} from "@/api/sjzx/bzzGL";
-import LliaoPgd from "@/views/zyjhzx/lliaofkui/comps/LliaoPgd.vue";
 
 export default {
   name:'PWanFKui',
-  components: {LliaoPgd},
   data(){
     return {
-      title:'抛 丸 作 业 反 馈',
+      title:'理 料 作 业 反 馈',
       width:0,
       height:0,
       stage:null,
       layer:null,
+      sljhItemList:[],
+      sljhGroup:null,
       pgdGroup:null,
       drawGd:null,
       dw:[],
+      dwGroup:null,
       pgd:[],
+      slGroup:null,
       currentWorker:null,
+      setWorkers:null,
+      workers:null,
+      drawItem:null,
     }
   },
   mounted() {
+    this.$socket.open()
+    this.wsSubscribe()
     this.initKonvaStage();
   },
+  created(){
+    window.addEventListener('resize', this.initKonvaStage)
+  },
+  sockets:{},
   methods:{
+    wsSubscribe() {
+      this.sockets.subscribe('llComplete', data => {
+        if (this.currentDw && this.currentDw.id === data.dwId) {
+          if (this.slGroup) {
+            this.slGroup.destroyChildren()
+          }
+          this.dw[this.currentDwIndex].list.push(data)
+          this.drawBaiFang(this.dw[this.currentDwIndex].list)
+        } else {
+          this.dw[data.dwId].list.push(data)
+        }
+        this.initDw()
+      })
+    },
     initPgd(pgd={}){
       const group=this.drawGd(pgd)
       this.pgdGroup.add(group)
     },
-    initBaiFang(index,list){
+    initBaiFang(index,item){
       if (this.slGroup){
         this.slGroup.destroyChildren()
       }
       this.canSl=true
+      this.currentDw=item
       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:item.list})
       this.slGroup=slGroup
       this.drawBaiFang=handler
       this.layer.add(slGroup)
     },
+    drawSljhItem(list){
+      if (this.sljhGroup){
+        this.sljhGroup.destroyChildren()
+      }
+      for (let i = 0; i < list.length; i++) {
+
+        const qyGroup=this.drawItem(i,list[i])
+        const _layer=this.layer
+        const _sljhGroup=this.sljhGroup;
+        let touchingFlag=false;
+        const that=this
+        qyGroup.on('click tap',function (){
+          that.initPgd(list[i])
+        })
+        qyGroup.on('mousedown touchstart',function ({evt}){
+          const worker=that.currentWorker;
+          if (!that.canSl||!worker){
+            return
+          }
+
+          const {clientX:x,clientY:y}=evt
+          touchingFlag=true;
+          const _that=this
+          setTimeout(()=>{
+            const movingFlag=_sljhGroup.isDragging()
+            if (!movingFlag){
+              if (touchingFlag){
+                _sljhGroup.draggable(false)
+                const tmpGroup=_that.clone();
+                tmpGroup.x(x-10)
+                tmpGroup.y(y-10)
+                _layer.add(tmpGroup)
+                tmpGroup.draggable(true)
+                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()
+                  const maxX=x+that.width*0.4-20
+                  const maxY=y+that.height*0.8-20
+                  if(thisX>=x&&thisY>=y&&thisX<=maxX&&thisY<=maxY){
+                    const item=this.getAttr('item')
+                    const data={
+                      ydjh:item,
+                      dwId:that.currentDw.id,
+                      ceng:that.dw[that.currentDwIndex].list.length+1,
+                      czbh:item.dcCh,
+                      pl:item.dcPl,
+                      fd:item.dcFd,
+                      kw:item.kw,
+                      zl:item.zl,
+                      tlth:item.tzbh,
+                      wph:item.wpxh,
+                      wpgg:item.wpgg,
+                      sljhrq:item.sljhrq,
+                      qgjhrq:item.qgjhrq,
+                      bfr:that.currentWorker?.userCode,
+                      type:'LLJ'
+                    }
+
+                    shangLiao(data).then(res=>{})
+
+                    this.remove()
+
+                    that.sljhItemList.splice(this.getAttr('index'),1)
+                    that.sljhGroup.destroyChildren()
+                    that.drawSljhItem(that.sljhItemList)
+                  }else{
+                    this.remove()
+                    _that.visible(true)
+                  }
+                  _sljhGroup.draggable(true)
+                })
+              }
+            }
+          },500)
+        })
+
+        qyGroup.on('touchend',function (){
+          touchingFlag=false;
+          this.draggable(false)
+          _sljhGroup.draggable(true)
+        })
+      }
+    },
     initDw(){
       const that=this
-      getYcldw().then(res=>{
+      getYcldw({type:'llj'}).then(res=>{
+        if(this.dwGroup){
+          this.dwGroup.destroyChildren()
+        }
         const {container,dw}=drawDw(this.width,this.height,that.initBaiFang)
-        const group=container()
-
-        this.layer.add(group)
+        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]
@@ -72,19 +190,23 @@ export default {
       const that=this
       getBzryList({resourcesCode:'4KB002'}).then(res=>{
         const {container,person}=workers(this.width,this.height)
-        const group=container()
-        group.on('click touchstart',function (){
-          that.currentWorker=person
-          getPgd({field:'',jhrqField:'',user:that.currentWorker.userCode}).then(res=>[
-            that.pgd=res.data
-          ])
-        })
-        this.layer.add(group)
+        const {bgGroup,group}=container()
+        this.layer.add(bgGroup)
+        this.workers=res.data
 
+        that.setWorkers(res.data)
         for (let i=0;i<res.data.length;i++){
           const item=res.data[i]
           const worker=person(i,item)
+          worker.on('click touchstart',function (){
+            that.currentWorker=item
+            getPgd({field:'llry',user:item.userCode,zt:'41'}).then(res=>{
+              that.sljhItemList=res.data
+              that.drawSljhItem(res.data)
+            })
+          })
           group.add(worker)
+          worker.zIndex(1)
         }
       })
     },
@@ -102,13 +224,17 @@ export default {
 
       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)
+      const {layer:sljhLayer,group:sljhGroup,drawItem}=sljh(this.width,this.height)
+      this.drawItem=drawItem
+      this.sljhGroup=sljhGroup
+      this.stage.add(sljhLayer)
+
     },
   }
 }

src/views/zyjhzx/lliaopgong/comps/LliaoPgd.vue

@@ -1,25 +1,83 @@
 <template>
-  <VxeGrid v-bind="gridOptions" @cell-click="cellClick" />
+  <VxeGrid ref="vxeGrid" v-bind="gridOptions" @cell-click="cellClick" @checkbox-change="checkboxChange" @checkbox-all="checkboxAll" />
 </template>
 
 <script>
+import { VXETable } from 'vxe-table'
 import paoWanPgdConfig from './pgdTable'
+import {getPgd, zx} from "@/api/zyjh";
+
 export default {
-  name:'LliaoPgd',
-  data(){
-    return{
-      gridOptions:{},
-      list:{},
+  name: 'PwanPgd',
+  props: {
+    worker:{
+      type:Function,
+      default:function (){}
+    }
+  },
+  data() {
+    return {
+      type: 'llpg',
+      gridOptions: {},
+      list: {},
+    }
+  },
+  created() {
+    const {options, columns} = paoWanPgdConfig()
+    this.gridOptions = options
+    this.gridOptions.columns = columns
+    this.initData()
+  },
+  methods: {
+    initData() {
+      getPgd({zt: '32'}).then(res => {
+        this.gridOptions.data = res.data
+      })
+    },
+    checkboxAll({checked}) {
+      const worker = this.$props.worker
+      if (!worker) {
+        this.$message.warning('请选择操作人')
+        return;
+      }
+      if (checked) {
+        this.paigong(worker)
+      }
+    },
+    checkboxChange({checked, row}) {
+      const worker = this.$props.worker()
+      if (!worker) {
+        this.$message.warning('请选择操作人')
+        return;
+      }
+      if (checked) {
+        this.paigong(worker)
       }
     },
-  created(){
-    const {options,columns}=paoWanPgdConfig()
-    this.gridOptions=options
-    this.gridOptions.columns=columns
+    paigong(worker) {
+      const list = this.$refs.vxeGrid.getCheckboxRecords()
+      const tmpArr = []
+      for (const item of list) {
+        const data = {
+          id: item.id,
+          llry: worker.userCode,//抛丸施工人员姓名
+        }
+        tmpArr.push(data)
+      }
+      const data = {
+        type: this.type,
+        field: 'llpgrq',
+        zxZtName: 'LLPG',
+        list: tmpArr
+      }
+      VXETable.modal.confirm('您确定派工吗？').then(res => {
+        res === 'confirm' && zx(data).then(res=>{
+          this.initData()
+        })
+      })
     },
-  methods:{
-    cellClick({row}){
-      this.$emit('initPgd',row)
+    cellClick({row}) {
+      this.$emit('initPgd', row)
     }
   }
 }

src/views/zyjhzx/lliaopgong/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
   }

src/views/zyjhzx/lliaopgong/comps/dw.js

@@ -1,30 +1,51 @@
 import Konva from "konva";
 
 export default function (width,height){
-  const x=0,y=0,_width=width*0.16,_height=height*0.945
+  const x=0,y=0,_width=width*0.16,_height=height*0.955
 
   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: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.989);
+    });
 
-    const rect=new Konva.Rect({
-      x:0,
-      y:0,
-      width:_width,
+    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,
-      stroke:'black',
-      strokeWidth:1,
-    })
-
-    group.add(rect)
+        image: this,
+      });
+      bgGroup.add(shape)
+      shape.zIndex(0)
+    }
 
-    return group
+    return {bgGroup,group}
   }
 
   const dw=function (index,item={}){
@@ -38,20 +59,31 @@ 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,
+    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,
-      stroke:'black',
-      strokeWidth:1,
-    })
+        image: this,
+      });
+      group.add(shape)
+      shape.zIndex(0)
+    }
+
+    const qgkw=JSON.parse(window.localStorage.getItem('QGKW'))
 
-    group.add(rect)
+    const formatName=()=>{
+      for (const it of qgkw) {
+        if (it.bm===item.tzbh){
+          return it.bmsm
+        }
+      }
+    }
 
     const text=new Konva.Text({
       x:0,
@@ -59,10 +91,10 @@ export default function (width,height){
       width: width,
       height: height,
       fill:'black',
-      text:item.name,
+      text:`${formatName()}\n${item.list.length}张`,
       align:'center',
       verticalAlign:'middle',
-      fontSize:20
+      fontSize:14
     })
     group.add(text)
 

src/views/zyjhzx/lliaopgong/comps/person.js

@@ -4,28 +4,12 @@ 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,
@@ -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+0.5, 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.515,
+        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,

src/views/zyjhzx/lliaopgong/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=40,_width=width*0.30,_height=height*0.945
+  const x=width*0.66+40,y=40,_width=width*0.30,_height=height*0.954
 
   const container=function (){
     const group=new Konva.Group({
@@ -28,6 +28,19 @@ export default function (width,height){
     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();
 
@@ -78,7 +91,7 @@ export default function (width,height){
       width:_width-48,
       height:15,
       fill:'#fff',
-      text:`单号:${data.gdh?'PW_'+data.gdh:''}`,
+      text:`单号:${data.gdh?'LL_'+data.gdh:''}`,
       align:'left',
       fontSize:12,
     })
@@ -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
   }
@@ -274,13 +286,15 @@ export default function (width,height){
     })
     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:data.pwry,
+      text:name,
       fontSize:18,
       align:'center',
       verticalAlign:'middle'
@@ -486,6 +500,6 @@ export default function (width,height){
   }
 
   return {
-    container,drawGd
+    container,drawGd,setWorkers
   }
 }

src/views/zyjhzx/lliaopgong/comps/pgdTable.js

@@ -1,7 +1,7 @@
 
 export default function () {
   const options={
-    height:740,
+    height:720,
     align:'center',
     border: true,
     resizable: true,

src/views/zyjhzx/lliaopgong/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

src/views/zyjhzx/lliaopgong/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <div id="pwpg" class="pwpg" ref="pwpg"></div>
-    <LliaoPgd id="pwpgd" ref="pwpgd" @initPgd="initPgd" :worker="getWorker" />
+    <LliaoPgd id="pwpgd" ref="llpgd" @initPgd="initPgd" :worker="getWorker" />
   </div>
 </template>
 
@@ -12,7 +12,7 @@ import workers from "./comps/person";
 import drawDw from './comps/dw'
 import drawPgd from './comps/pgd'
 import {getBzryList} from "@/api/sjzx/bzzGL";
-import {getYcldw} from "@/api/zyjh";
+import {getPgd, getYcldw} from "@/api/zyjh";
 import LliaoPgd from "@/views/zyjhzx/lliaopgong/comps/LliaoPgd.vue";
 
 export default {
@@ -20,7 +20,7 @@ export default {
   components: {LliaoPgd},
   data(){
     return {
-      title:'划 线 作 业 派 工',
+      title:'理 料 作 业 派 工',
       width:0,
       height:0,
       stage:null,
@@ -28,6 +28,8 @@ export default {
       pgdGroup:null,
       drawGd:null,
       getCurrentWorker:null,
+      workers:[],
+      setWorkers:null,
     }
   },
   mounted() {
@@ -39,10 +41,10 @@ export default {
       this.pgdGroup.add(group)
     },
     initDw(){
-      getYcldw().then(res=>{
+      getYcldw({type:'llj'}).then(res=>{
         const {container,dw}=drawDw(this.width,this.height)
-        const group=container()
-        this.layer.add(group)
+        const {bgGroup,group}=container()
+        this.layer.add(bgGroup)
 
         for (let i=0;i<res.data.length;i++){
           const item=res.data[i]
@@ -55,15 +57,22 @@ export default {
       return this.getCurrentWorker()
     },
     initWorkers(){
+      const that=this
       getBzryList({resourcesCode:'4KB002'}).then(res=>{
         const {container,person,getCurrentWorker}=workers(this.width,this.height)
         this.getCurrentWorker=getCurrentWorker
         const {layer,group}=container()
         this.stage.add(layer)
+        this.workers=res.data
 
+        that.setWorkers(res.data)
         for (let i=0;i<res.data.length;i++){
           const item=res.data[i]
           const worker=person(i,item)
+          worker.on('click touchstart',function (){
+            that.currentWorker=item
+            that.$refs.llpgd.initData(that.currentWorker.userCode,'41')
+          })
           group.add(worker)
         }
       })
@@ -82,7 +91,8 @@ export default {
 
       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)
@@ -98,7 +108,7 @@ export default {
   width:50%;
   height: auto;
   position: absolute;
-  top:175px;
+  top:195px;
   left:20px;
   border: none;
   margin: 0;

src/views/zyjhzx/pwanfkui/comps/csd.js

@@ -45,7 +45,7 @@ export default function (width,height){
   imageObj3.onload = function () {
     const shape = new Konva.Image({
       x: 0,
-      y: _height-_height*0.1,
+      y: _height-_height*0.1+1,
       width: imgSize,
       height:_height*0.1,
       image: this,

src/views/zyjhzx/pwanfkui/comps/dw.js

@@ -1,7 +1,7 @@
 import Konva from "konva";
 
 export default function (width,height,callback){
-  const x=0,y=0,_width=width*0.16,_height=height*0.67
+  const x=0,y=0,_width=width*0.16,_height=height*0.691
 
   const container=function (){
     const x=width*0.134+30,y=300
@@ -20,7 +20,7 @@ export default function (width,height,callback){
         x: 0,
         y: 0,
         width: _width,
-        height:_height,
+        height:_height*0.975,
         image: this,
       });
       group.add(shape)

src/views/zyjhzx/pwanfkui/comps/person.js

@@ -1,7 +1,7 @@
 import Konva from "konva";
 
 export default function (width,height){
-  const _width=width*0.134,_height=height*0.737
+  const _width=width*0.134,_height=height*0.691
 
   const container=function (){
     const x=20,y=300
@@ -27,7 +27,7 @@ export default function (width,height){
       height:_height,
     })
     bgGroup.clipFunc(function(ctx) {
-      ctx.rect(0, 6, _width, _height-11);
+      ctx.rect(0, 0, _width, _height*0.969);
     });
     bgGroup.add(group)
 
@@ -38,15 +38,16 @@ export default function (width,height){
         x: 0,
         y: 0,
         width: _width,
-        height:_height,
+        height:_height*0.975,
         image: this,
       });
       bgGroup.add(shape)
       shape.zIndex(0)
     }
 
-    return bgGroup
+    return {bgGroup,group}
   }
+
   let currentWork=null;
   let selectedShape=null;
 

src/views/zyjhzx/pwanfkui/index.vue

@@ -57,11 +57,8 @@ export default {
           }
           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
             }
           }
@@ -105,8 +102,8 @@ export default {
       const that=this
       getBzryList({resourcesCode:'4KB002'}).then(res=>{
         const {container,person}=workers(this.width,this.height)
-        const group=container()
-        this.layer.add(group)
+        const {bgGroup,group}=container()
+        this.layer.add(bgGroup)
         this.workers=res.data
 
         that.setWorkers(res.data)

src/views/zyjhzx/qgefkui/comps/QgePgd.vue

@@ -1,25 +1,90 @@
 <template>
-  <VxeGrid v-bind="gridOptions" @cell-click="cellClick" />
+  <VxeGrid ref="qgpgd" v-bind="gridOptions" @cell-click="cellClick" @current-change="getCurrentData" @checkbox-change="checkboxChange" @checkbox-all="checkboxAll" />
 </template>
 
 <script>
+import { VXETable } from 'vxe-table'
 import paoWanPgdConfig from './pgdTable'
+import {getPgd, zx} from "@/api/zyjh";
+
 export default {
-  name:'QgePgd',
-  data(){
-    return{
-      gridOptions:{},
-      list:{},
+  name: 'QgePgd',
+  props: {
+    worker:{
+      type:Function,
+      default:function (){}
+    }
+  },
+  data() {
+    return {
+      gridOptions: {},
+      list: {},
+      currentWorker:null,
+      zt:null,
     }
   },
-  created(){
-    const {options,columns}=paoWanPgdConfig()
-    this.gridOptions=options
-    this.gridOptions.columns=columns
+  created() {
+    const {options, columns} = paoWanPgdConfig()
+    this.gridOptions = options
+    this.gridOptions.columns = columns
+  },
+  methods: {
+    initData(worker, zt) {
+      this.currentWorker=worker
+      this.zt=zt
+      getPgd({user: worker, zt: zt, field: 'qgry'}).then(res => {
+        this.gridOptions.data = res.data
+      })
+    },
+    getCurrentData() {
+      const data = this.$refs.qgpgd.getCurrentRecord()
+      window.localStorage.setItem("qgfk", JSON.stringify(data))
+    },
+    checkboxAll({checked}) {
+      const worker = this.$props.worker
+      if (!worker) {
+        this.$message.warning('请选择操作人')
+        return;
+      }
+      if (checked) {
+        this.fankgui(worker)
+      }
+    },
+    checkboxChange({checked, row}) {
+      const worker = this.$props.worker()
+      if (!worker) {
+        this.$message.warning('请选择操作人')
+        return;
+      }
+      if (checked) {
+        this.fankgui(worker)
+      }
+    },
+    fankgui(worker) {
+      const list = this.$refs.qgpgd.getCheckboxRecords()
+      const tmpArr = []
+      for (const item of list) {
+        const data = {
+          id: item.id,
+          qgfkry: worker.userCode,
+          zt:item.zt
+        }
+        tmpArr.push(data)
+      }
+      const data = {
+        type: this.type,
+        field: 'qgfkrq',
+        zxZtName: 'QGFK',
+        list: tmpArr
+      }
+      VXETable.modal.confirm('您确定反馈吗？').then(res => {
+        res === 'confirm' && zx(data).then(res=>{
+          this.initData(this.currentWorker,this.zt)
+        })
+      })
     },
-  methods:{
-    cellClick({row}){
-      this.$emit('initPgd',row)
+    cellClick({row}) {
+      this.$emit('initPgd', row)
     }
   }
 }

src/views/zyjhzx/qgefkui/comps/baifang.js

@@ -1,10 +1,12 @@
 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.25,_height=height*0.67
+  const _width=width*0.32,_height=height*0.713
   const container=function (){
-    const x=width*0.30+30,y=300
+    const x=width*0.16+25,y=260
 
     const group=new Konva.Group({
       x:x,
@@ -13,16 +15,34 @@ const baifang=function (option={}) {
       height:_height
     })
 
-    const rect=new Konva.Rect({
-      x:0,
-      y:0,
-      width:_width,
+    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,
-      stroke:'black',
-      strokeWidth:1,
-    })
+        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,78 @@ 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&&thisX<=(x+item.attrs.width)&&thisY<=(y+item.attrs.height))&&!!worker){
+                    const info=this.getAttr('item')
+                    const zyjh=JSON.parse(window.localStorage.getItem('qgfk'))
+                    if (!zyjh){
+                      VXETable.modal.message({content: '请先选择待反馈的派工单', status: 'warning'})
+                      this.remove()
+                      that.visible(true)
+                      return
+                    }
+                    zx({
+                      field:'qgfkrq',
+                      zxZtName:'QGFK',
+                      list:[{
+                        id:zyjh.id,
+                        qgfkry: worker.userCode
+                      }],
+                      ycldwInfo:info
+                    }).then(res=>{
+                      if (res.success){
+                        window.localStorage.removeItem('qgfk')
+                        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()
@@ -60,7 +153,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 +233,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 +246,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',
     })
@@ -163,6 +256,7 @@ const baifang=function (option={}) {
   }
 
   function handler(slList){
+    console.log(slList)
     for (let i = 1; i <= slList.length; i++) {
       const item=slList[i-1]
       const _group=gangban(i,item,item.length)

src/views/zyjhzx/qgefkui/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
   }

src/views/zyjhzx/qgefkui/comps/dw.js

@@ -1,37 +1,58 @@
 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 _width=width*0.08,_height=height*0.73
 
   const container=function (){
-    const x=width*0.134+30,y=300
+    const x=width*0.08+20,y=260
 
     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.add(group)
+    bgGroup.clipFunc(function(ctx) {
+      ctx.rect(0, 5, _width, _height*0.963);
+    });
 
-    return 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 selectedShape=null;
   const dw=function (index,item=[]){
 
-    const alignSize=2
-    const width=((_width-20)/alignSize),height=150
+    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,
@@ -40,20 +61,62 @@ 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,
+    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,
-      stroke:'black',
-      strokeWidth:1,
-    })
+        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)
+    }
 
-    group.add(rect)
+    const qgkw=JSON.parse(window.localStorage.getItem('QGKW'))
+
+    const formatName=()=>{
+      for (const it of qgkw) {
+        if (it.bm===item.tzbh){
+          return it.bmsm
+        }
+      }
+    }
 
     const text=new Konva.Text({
       x:0,
@@ -61,10 +124,10 @@ export default function (width,height,callback){
       width: width,
       height: height,
       fill:'black',
-      text:item.name,
+      text:`${formatName()}\n${item.list.length}张`,
       align:'center',
       verticalAlign:'middle',
-      fontSize:20
+      fontSize:14
     })
     group.add(text)
 

src/views/zyjhzx/qgefkui/comps/person.js

@@ -1,36 +1,64 @@
 import Konva from "konva";
 
 export default function (width,height){
-  const _width=width*0.134,_height=height*0.67
+  const _width=width*0.075,_height=height*0.73
 
   const container=function (){
-    const x=20,y=300
+    const x=20,y=260
 
     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, 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}
+  }
 
-    group.add(rect)
+  let currentWork=null;
+  let selectedShape=null;
 
-    return group
+  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 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,
@@ -38,21 +66,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',
@@ -64,6 +147,6 @@ export default function (width,height){
   }
 
   return{
-    container,person
+    container,person,getCurrentWorker
   }
 }

src/views/zyjhzx/qgefkui/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.95
 
   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,
+    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,
-      stroke:'black',
-      strokeWidth:1,
-    })
-
-    group.add(rect)
+        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
   }
 }

src/views/zyjhzx/qgefkui/comps/pgdTable.js

@@ -1,7 +1,7 @@
 
 export default function () {
   const options={
-    height:250,
+    height:215,
     align:'center',
     border: true,
     resizable: true,
@@ -9,6 +9,7 @@ export default function () {
     size:'mini',
     showOverflow: true,
     scrollY:{enable:true},
+    highlightCurrentRow:true,
     data:[]
   }
   const gdhFormat=function ({cellValue}){

src/views/zyjhzx/qgefkui/comps/sb.js

@@ -1,8 +1,7 @@
 import Konva from "konva";
 
-//传送带
 export default function (width,height){
-  const x=width*0.45+37,y=300,_width=width*0.2,_height=height*0.67
+  const x=width*0.5,y=260,_width=width*0.186,_height=height*0.713
   const container=new Konva.Group({
     x:x,
     y:y,
@@ -10,16 +9,19 @@ export default function (width,height){
     height:_height
   })
 
-  const rect=new Konva.Rect({
-    x:0,
-    y:0,
-    width:_width,
+  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,
-    stroke:'black',
-    strokeWidth:1,
-  })
-
-  container.add(rect)
+      image: this,
+    });
+    container.add(shape)
+    shape.zIndex(0)
+  }
 
   const text=new Konva.Text({
     x: 0,

src/views/zyjhzx/qgefkui/comps/sljh.js

@@ -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
+  }
+}

src/views/zyjhzx/qgefkui/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

src/views/zyjhzx/qgefkui/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <div id="pwpg" class="pwpg" ref="pwpg"></div>
-    <QgePgd id="pwpgd" ref="pwpgd" @initPgd="initPgd" :pgd="pgd" />
+    <QgePgd id="pwpgd" ref="hxpgd" @initPgd="initPgd" :pgd="pgd" :worker="getWorker" />
   </div>
 </template>
 
@@ -11,102 +11,141 @@ 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 {getPgd, getYcldw, shangLiao} from "@/api/zyjh";
 import {getBzryList} from "@/api/sjzx/bzzGL";
 import QgePgd from "@/views/zyjhzx/qgefkui/comps/QgePgd.vue";
 
 export default {
-  name:'PWanFKui',
+  name: 'PWanFKui',
   components: {QgePgd},
-  data(){
+  data() {
     return {
-      title:'切 割 作 业 反 馈',
+      title: '切 割 作 业 反 馈',
       width:0,
       height:0,
       stage:null,
       layer:null,
+      sljhGroup:null,
       pgdGroup:null,
       drawGd:null,
       dw:[],
       pgd:[],
+      slGroup:null,
+      dw:[],
+      currentDw:null,
+      currentDwIndex:null,
       currentWorker:null,
+      getCurrentWorker:null,
+      setWorkers:null,
+      workers:null,
     }
   },
   mounted() {
+    this.$socket.open()
+    this.wsSubscribe()
     this.initKonvaStage();
   },
-  methods:{
-    initPgd(pgd={}){
-      const group=this.drawGd(pgd)
-      this.pgdGroup.add(group)
+  created(){
+    window.addEventListener('resize', this.initKonvaStage)
   },
-    initBaiFang(index,list){
+  sockets:{},
+  methods: {
+    wsSubscribe(){
+      this.sockets.subscribe('qgComplete', data => {
+        if (this.currentDw&&this.currentDw.id===data.dwId) {
           if (this.slGroup){
             this.slGroup.destroyChildren()
           }
-      this.canSl=true
-      this.currentDwIndex=index
-      const {slGroup,handler}= baifang({width:this.width,height:this.height,dw:list})
-      this.slGroup=slGroup
-      this.drawBaiFang=handler
+          for (let i = 0; i < this.dw[this.currentDwIndex].list.length; i++) {
+            const item=this.dw[this.currentDwIndex].list[i]
+            if (item.czbh===data.czbh&&item.pl===data.pl&&item.tlth===data.tlth){
+              this.dw[this.currentDwIndex].list.splice(i,1)
+              break
+            }
+          }
+          this.drawBaiFang(this.dw[this.currentDwIndex].list)
+          this.initDw()
+        }
+      })
+    },
+    initPgd(pgd = {}) {
+      const group = this.drawGd(pgd)
+      this.pgdGroup.add(group)
+    },
+    initBaiFang(index, item) {
+      if (this.slGroup) {
+        this.slGroup.destroyChildren()
+      }
+      this.canSl = true
+      this.currentDwIndex = index
+      const {slGroup, handler} = baifang({width: this.width, height: this.height, dw: item.list})
+      this.slGroup = slGroup
+      this.drawBaiFang = handler
       this.layer.add(slGroup)
     },
-    initDw(){
-      const that=this
-      getYcldw().then(res=>{
-        const {container,dw}=drawDw(this.width,this.height,that.initBaiFang)
-        const group=container()
+    initDw() {
+      const that = this
+      getYcldw({type:'llj'}).then(res => {
+        const {container, dw} = drawDw(this.width, this.height, that.initBaiFang)
+        const {bgGroup,group} = container()
 
-        this.layer.add(group)
+        this.layer.add(bgGroup)
 
-        for (let i=0;i<res.data.length;i++){
-          const item=res.data[i]
-          const dwGroup=dw(i,item)
+        for (let i = 0; i < res.data.length; i++) {
+          const item = res.data[i]
+          const dwGroup = dw(i, item)
           group.add(dwGroup)
         }
       })
     },
-    initWorkers(){
-      const that=this
-      getBzryList({resourcesCode:'4KB002'}).then(res=>{
-        const {container,person}=workers(this.width,this.height)
-        const group=container()
-        group.on('click touchstart',function (){
-          that.currentWorker=person
-          getPgd({user:that.currentWorker.userCode,zt:'6'}).then(res=>[
-            that.pgd=res.data
-          ])
-        })
-        this.layer.add(group)
+    getWorker(){
+      return this.getCurrentWorker()
+    },
+    initWorkers() {
+      const that = this
+      getBzryList({resourcesCode: '4KB002'}).then(res => {
+        const {container,person,getCurrentWorker}=workers(this.width,this.height)
+        this.getCurrentWorker=getCurrentWorker
+        const {bgGroup,group}=container()
+        this.layer.add(bgGroup)
+        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=person(i,item)
+          worker.on('click touchstart',function (){
+            that.currentWorker=item
+            that.$refs.hxpgd.initData(that.currentWorker.userCode,'61')
+          })
           group.add(worker)
         }
       })
     },
-    initKonvaStage(){
-      this.width=this.$refs.pwpg.clientWidth
-      this.height=this.$refs.pwpg.clientHeight
-      const {stage,layer}=container(this.width,this.height,'pwpg')
-      this.stage=stage
-      this.layer=layer
+    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)
+      const titel = drawTitle(this.width, this.height, this.title)
       this.layer.add(titel)
 
       this.initWorkers()
 
       this.initDw()
 
-      const {container:pgdContainer,drawGd}=drawPgd(this.width,this.height)
-      this.drawGd=drawGd
-      this.pgdGroup=pgdContainer()
+      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)
+      const csdGroup = drawSb(this.width, this.height)
       this.layer.add(csdGroup)
     },
   }
@@ -116,11 +155,11 @@ export default {
 
 <style>
 #pwpgd {
-  width:55%;
+  width: 67%;
   height: auto;
   position: absolute;
-  top:45px;
-  left:20px;
+  top: 45px;
+  left: 20px;
   border: none;
   margin: 0;
 }
@@ -132,7 +171,7 @@ export default {
   aspect-ratio: 16/9;
 }
 
-.container{
+.container {
   background: #ddd;
 }
 </style>

src/views/zyjhzx/qgepgong/comps/QgePgd.vue

@@ -1,13 +1,23 @@
 <template>
-  <VxeGrid v-bind="gridOptions" @cell-click="cellClick" />
+  <VxeGrid ref="vxeGrid" v-bind="gridOptions" @cell-click="cellClick" @checkbox-change="checkboxChange" @checkbox-all="checkboxAll" />
 </template>
 
 <script>
+import { VXETable } from 'vxe-table'
 import paoWanPgdConfig from './pgdTable'
+import {getPgd, zx} from "@/api/zyjh";
+
 export default {
   name:'QgePgd',
+  props: {
+    worker:{
+      type:Function,
+      default:function (){}
+    }
+  },
   data(){
     return{
+      type:'qgpg',
       gridOptions:{},
       list:{},
     }
@@ -16,8 +26,56 @@ export default {
     const {options,columns}=paoWanPgdConfig()
     this.gridOptions=options
     this.gridOptions.columns=columns
+    this.initData()
   },
   methods:{
+    initData() {
+      getPgd({zt: '52'}).then(res => {
+        this.gridOptions.data = res.data
+      })
+    },
+    checkboxAll({checked}) {
+      const worker = this.$props.worker
+      if (!worker) {
+        this.$message.warning('请选择操作人')
+        return;
+      }
+      if (checked) {
+        this.paigong(worker)
+      }
+    },
+    checkboxChange({checked, row}) {
+      const worker = this.$props.worker()
+      if (!worker) {
+        this.$message.warning('请选择操作人')
+        return;
+      }
+      if (checked) {
+        this.paigong(worker)
+      }
+    },
+    paigong(worker) {
+      const list = this.$refs.vxeGrid.getCheckboxRecords()
+      const tmpArr = []
+      for (const item of list) {
+        const data = {
+          id: item.id,
+          qgry: worker.userCode,//抛丸施工人员姓名
+        }
+        tmpArr.push(data)
+      }
+      const data = {
+        type: this.type,
+        field: 'qgpgrq',
+        zxZtName: 'QGPG',
+        list: tmpArr
+      }
+      VXETable.modal.confirm('您确定派工吗？').then(res => {
+        res === 'confirm' && zx(data).then(res=>{
+          this.initData()
+        })
+      })
+    },
     cellClick({row}){
       this.$emit('initPgd',row)
     }

src/views/zyjhzx/qgepgong/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
   }

src/views/zyjhzx/qgepgong/comps/dw.js

@@ -1,30 +1,51 @@
 import Konva from "konva";
 
 export default function (width,height){
-  const x=0,y=0,_width=width*0.16,_height=height*0.945
+  const x=0,y=0,_width=width*0.16,_height=height*0.957
 
   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: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.989);
+    });
 
-    const rect=new Konva.Rect({
-      x:0,
-      y:0,
-      width:_width,
+    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,
-      stroke:'black',
-      strokeWidth:1,
-    })
-
-    group.add(rect)
+        image: this,
+      });
+      bgGroup.add(shape)
+      shape.zIndex(0)
+    }
 
-    return group
+    return {bgGroup,group}
   }
 
   const dw=function (index,item={}){
@@ -38,20 +59,31 @@ 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,
+    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,
-      stroke:'black',
-      strokeWidth:1,
-    })
+        image: this,
+      });
+      group.add(shape)
+      shape.zIndex(0)
+    }
+
+    const qgkw=JSON.parse(window.localStorage.getItem('QGKW'))
 
-    group.add(rect)
+    const formatName=()=>{
+      for (const it of qgkw) {
+        if (it.bm===item.tzbh){
+          return it.bmsm
+        }
+      }
+    }
 
     const text=new Konva.Text({
       x:0,
@@ -59,10 +91,10 @@ export default function (width,height){
       width: width,
       height: height,
       fill:'black',
-      text:item.name,
+      text:`${formatName()}\n${item.list.length}张`,
       align:'center',
       verticalAlign:'middle',
-      fontSize:20
+      fontSize:14
     })
     group.add(text)
 

src/views/zyjhzx/qgepgong/comps/person.js

@@ -4,28 +4,12 @@ export default function (width,height){
   const _width=width*0.5,_height=120
 
   const container=function (){
-    const x=20,y=45
+    const x=14,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,
@@ -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+5, 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.515,
+        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,

src/views/zyjhzx/qgepgong/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.955
 
   const container=function (){
     const group=new Konva.Group({
@@ -12,16 +12,19 @@ export default function (width,height){
       height:_height
     })
 
-    const rect=new Konva.Rect({
-      x:0,
-      y:0,
-      width:_width,
+    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,
-      stroke:'black',
-      strokeWidth:1,
-    })
-
-    group.add(rect)
+        image: this,
+      });
+      group.add(shape)
+      shape.zIndex(0)
+    }
     return group
   }
 
@@ -29,8 +32,8 @@ export default function (width,height){
     // this.layer.destroyChildren();
 
     const group=new Konva.Group({
-      x:0,
-      y:0,
+      x:13,
+      y:12,
       width:_width,
       height:_height
     })
@@ -38,9 +41,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 +51,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 +64,7 @@ export default function (width,height){
       width:_width,
       height:25,
       lineHeight:1,
-      stroke:'black',
+      fill:'#fff',
       strokeWidth:1,
       text:'抛丸施工单',
       align:'center',
@@ -73,13 +73,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)
@@ -126,9 +126,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 +147,7 @@ export default function (width,height){
       y:0,
       width:(_width-60),
       height:180,
-      stroke:'black',
+      stroke:'#4991E5',
       strokeWidth:1,
     })
     group.add(rect)
@@ -168,7 +166,7 @@ export default function (width,height){
       y:0,
       width:(_width-60),
       height:30,
-      stroke:'black',
+      stroke:'#4991E5',
       strokeWidth:1,
     })
     group.add(jsRect)
@@ -178,9 +176,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 +189,7 @@ export default function (width,height){
       y:30,
       width:(_width-60),
       height:30,
-      stroke:'black',
+      stroke:'#4991E5',
       strokeWidth:1,
     })
     group.add(plRect)
@@ -203,9 +199,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 +211,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 +221,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 +246,7 @@ export default function (width,height){
       y:0,
       width:(_width-60),
       height:30,
-      stroke:'black',
+      stroke:'#4991E5',
       strokeWidth:1,
     })
     group.add(jsRect)
@@ -264,9 +256,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 +269,7 @@ export default function (width,height){
       y:30,
       width:(_width-60),
       height:30,
-      stroke:'black',
+      stroke:'#4991E5',
       strokeWidth:1,
     })
     group.add(plRect)
@@ -289,10 +279,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:data.pwry,
       fontSize:18,
       align:'center',
       verticalAlign:'middle'
@@ -303,7 +291,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 +301,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 +326,7 @@ export default function (width,height){
       y:0,
       width:(_width-60),
       height:200,
-      stroke:'black',
+      stroke:'#4991E5',
       strokeWidth:1,
     })
     group.add(rect)
@@ -359,7 +345,7 @@ export default function (width,height){
       y:0,
       width:(_width-60),
       height:30,
-      stroke:'black',
+      stroke:'#4991E5',
       strokeWidth:1,
     })
     group.add(rect)
@@ -369,9 +355,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 +377,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 +387,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 +400,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 +410,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 +434,7 @@ export default function (width,height){
       y:0,
       width:(_width-188),
       height:60,
-      stroke:'black',
+      stroke:'#4991E5',
       strokeWidth:1,
     })
     czbhGroup.add(czbhRect)
@@ -464,9 +444,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 +453,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)

src/views/zyjhzx/qgepgong/comps/pgdTable.js

@@ -1,7 +1,7 @@
 
 export default function () {
   const options={
-    height:740,
+    height:720,
     align:'center',
     border: true,
     resizable: true,

src/views/zyjhzx/qgepgong/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

src/views/zyjhzx/qgepgong/index.vue

@@ -39,10 +39,10 @@ export default {
       this.pgdGroup.add(group)
     },
     initDw(){
-      getYcldw().then(res=>{
+      getYcldw({type:'llj'}).then(res=>{
         const {container,dw}=drawDw(this.width,this.height)
-        const group=container()
-        this.layer.add(group)
+        const {bgGroup,group}=container()
+        this.layer.add(bgGroup)
 
         for (let i=0;i<res.data.length;i++){
           const item=res.data[i]
@@ -55,36 +55,36 @@ export default {
       return this.getCurrentWorker()
     },
     initWorkers(){
-      getBzryList({resourcesCode:'4KB002'}).then(res=>{
-        const {container,person,getCurrentWorker}=workers(this.width,this.height)
-        this.getCurrentWorker=getCurrentWorker
-        const {layer,group}=container()
+      getBzryList({resourcesCode:'4KB002'}).then(res=> {
+        const {container, person, getCurrentWorker} = workers(this.width, this.height)
+        this.getCurrentWorker = getCurrentWorker
+        const {layer, group} = container()
         this.stage.add(layer)
 
-        for (let i=0;i<res.data.length;i++){
-          const item=res.data[i]
-          const worker=person(i,item)
+        for (let i = 0; i < res.data.length; i++) {
+          const item = res.data[i]
+          const worker = person(i, item)
           group.add(worker)
         }
       })
     },
-    initKonvaStage(){
-      this.width=this.$refs.pwpg.clientWidth
-      this.height=this.$refs.pwpg.clientHeight
-      const {stage,layer}=container(this.width,this.height,'pwpg')
-      this.stage=stage
-      this.layer=layer
+    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)
+      const titel = drawTitle(this.width, this.height, this.title)
       this.layer.add(titel)
 
       this.initWorkers()
 
       this.initDw()
 
-      const {container:pgdContainer,drawGd}=drawPgd(this.width,this.height)
-      this.drawGd=drawGd
-      this.pgdGroup=pgdContainer()
+      const {container: pgdContainer, drawGd} = drawPgd(this.width, this.height)
+      this.drawGd = drawGd
+      this.pgdGroup = pgdContainer()
       this.layer.add(this.pgdGroup)
     },
 
@@ -95,11 +95,11 @@ export default {
 
 <style>
 #pwpgd {
-  width:50%;
+  width: 50.3%;
   height: auto;
   position: absolute;
-  top:175px;
-  left:20px;
+  top: 195px;
+  left: 20px;
   border: none;
   margin: 0;
 }
@@ -111,7 +111,7 @@ export default {
   aspect-ratio: 16/9;
 }
 
-.container{
+.container {
   background: #ddd;
 }
 </style>

src/views/zyjhzx/sliao/comps/liliao.js

@@ -52,6 +52,8 @@ const liliao=function (width,height,dw,callback) {
     return currentDw
   }
 
+  let selectedShape=null;
+
   const duowei=function (index,item){
     const alignSize=3
     const width=((_width-60)/alignSize),height=208
@@ -92,7 +94,6 @@ const liliao=function (width,height,dw,callback) {
     }
 
     const selectObj = new Image();
-    let selectedShape=null;
     selectObj.src = require('@/assets/sliao/selected.png');
     let selectShape=null
     const setSelectShape=function (shape){

src/views/zyjhzx/sliao/index.vue

@@ -16,7 +16,6 @@ import SliaoSearch from "@/views/zyjhzx/sliao/comps/SliaoSearch.vue";
 import liliao from "@/views/zyjhzx/sliao/comps/liliao";
 import baifang from "@/views/zyjhzx/sliao/comps/baifang";
 import {getSljhPgd, getYcldw, shangLiao} from "@/api/zyjh";
-import {formatTlt} from "@/views/zyjhzx/sliao/comps/utils";
 import {getBzryList} from "@/api/sjzx/bzzGL";
 
 export default {
@@ -62,6 +61,7 @@ export default {
         }else {
           this.dw[data.dwId].list.push(data)
         }
+        this.initYcldw();
       })
     },
     search(queryParam){
@@ -322,7 +322,8 @@ export default {
                       wpgg:item.wpgg,
                       sljhrq:item.sljhrq,
                       qgjhrq:item.qgjhrq,
-                      bfr:that.getCurrentWorker()?.userCode
+                      bfr:that.getCurrentWorker()?.userCode,
+                      type:'YCL'
                     }
 
                     shangLiao(data).then(res=>{})
@@ -352,7 +353,10 @@ export default {
       }
     },
     initYcldw(){
-      getYcldw().then(res=>{
+      getYcldw({type:'ycl'}).then(res=>{
+        if(this.ycldwGroup){
+          this.ycldwGroup.destroyChildren()
+        }
         this.dw=res.data
         const {container,getCurrentDw}= liliao(this.width,this.height,this.dw,this.initBaiFang)
         const group=container()