1.抛丸反馈

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','/hbao','/sliao',] // no redirect whitelist
+const whiteList = ['/menu','/login', '/auth-redirect','/kban','/hbao','/sliao','/pwpg','/pwamfkui'] // no redirect whitelist
 export function flatRoutes(routes) {
   let ret = [];
   routes.forEach(it => {

src/router/index.js

@@ -60,7 +60,17 @@ export const constantRoutes = [
   },
   {
     path: '/sliao',
-    component: () => import('@/views/sliao/index'),
+    component: () => import('@/views/zyjhzx/sliao/index'),
+    hidden: true
+  },
+  {
+    path: '/pwpg',
+    component: () => import('@/views/zyjhzx/pwanpgong/index'),
+    hidden: true
+  },
+  {
+    path: '/pwfk',
+    component: () => import('@/views/zyjhzx/pwanfkui/index'),
     hidden: true
   },
   {

src/views/sliao/index.vue

@@ -1,295 +0,0 @@
-<template>
-  <div>
-    <div id="sliao" class="sliao" ref="sliao"></div>
-    <SliaoSearch @search="search" />
-  </div>
-</template>
-
-<script>
-import container from "@/views/sliao/comps/container";
-import drawTitle from "@/views/sliao/comps/title";
-import initSearch from "@/views/sliao/comps/search";
-import {sljh} from "@/views/sliao/comps/sljh";
-import workers from "@/views/sliao/comps/person";
-import SliaoSearch from "@/views/sliao/comps/SliaoSearch.vue";
-import liliao from "@/views/sliao/comps/liliao";
-import baifang from "@/views/sliao/comps/baifang";
-
-export default {
-  name:'SLiao',
-  components: {SliaoSearch},
-  data(){
-    return {
-      title:'上  料  作  业  区',
-      width:0,
-      height:0,
-      stage:null,
-      layer:null,
-      slGroup:null,
-      sljhGroup:null,
-      drawBaiFang:null,
-      canSl:false,
-      currentDwIndex:-1,
-      sljhItemList:[
-        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX006',perQy:'一区',perDw:'一剁',perCeng:'三层'},
-        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX007',perQy:'一区',perDw:'一剁',perCeng:'三层'},
-        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
-        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
-        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
-        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
-        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
-        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX096',perQy:'一区',perDw:'一剁',perCeng:'三层'},
-        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX007',perQy:'一区',perDw:'一剁',perCeng:'三层'},
-        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
-        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
-        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
-        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
-        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
-        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX006',perQy:'一区',perDw:'一剁',perCeng:'三层'},
-        {czbh:'G175K-4',pl:'001',tzbh:'B706N4PX077',perQy:'一区',perDw:'一剁',perCeng:'三层'},
-        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX098',perQy:'一区',perDw:'一剁',perCeng:'三层'},
-        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX998',perQy:'一区',perDw:'一剁',perCeng:'三层'},
-        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
-        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
-        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
-        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX098',perQy:'一区',perDw:'一剁',perCeng:'三层'},
-        {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX099',perQy:'一区',perDw:'一剁',perCeng:'三层'},
-      ],
-      dw:[
-        {name:'预处理垛位\n垛位1\n摆放预览',
-          list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
-        },
-        {name:'预处理垛位\n垛位2\n摆放预览',
-          list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
-        },
-        {name:'预处理垛位\n垛位2\n摆放预览',
-          list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
-        },
-      ]
-    }
-  },
-  mounted() {
-    this.initKonvaStage();
-  },
-  methods:{
-    search(queryParam){
-      console.log(queryParam)
-    },
-    initBaiFang(index,list){
-      this.canSl=true
-      this.currentDwIndex=index
-      const {slGroup,handler}= baifang({width:this.width,height:this.height,dw:list})
-      this.slGroup=slGroup
-      this.drawBaiFang=handler
-      this.layer.add(slGroup)
-    },
-    drawSljhItem(list){
-      const itemWith=80;
-      const itemHeight=108
-      for (let i = 0; i < list.length; i++) {
-        const item=list[i];
-        const x=(i+1)*5+i*itemWith;
-        const qyGroup=new Konva.Group({
-          x:x,
-          y:10,
-          width:itemWith,
-          height:itemHeight,
-        })
-        qyGroup.setAttr('index',i)
-
-        const _layer=this.layer
-        const _sljhGroup=this.sljhGroup;
-        let touchingFlag=false;
-        const that=this
-        qyGroup.on('touchstart',function ({evt}){
-          if (!that.canSl){
-            return
-          }
-
-          const {clientX:x,clientY:y}=evt.touches[0]
-          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.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){
-                    that.dw[that.currentDwIndex].list.push('12123')
-                    that.slGroup.destroyChildren()
-                    that.initBaiFang(that.currentDwIndex,that.dw[that.currentDwIndex].list)
-
-                    //that.drawBaiFang(that.dw[that.currentDwIndex].list)
-                    this.remove()
-
-                    that.sljhItemList.splice(this.getAttr('index'),1)
-                    that.sljhGroup.destroyChildren()
-                    that.drawSljhItem(that.sljhItemList)
-                    _sljhGroup.draggable(true)
-                  }else{
-                    this.remove()
-                    _that.visible(true)
-                  }
-                })
-                tmpGroup.startDrag()
-                _that.visible(false)
-              }
-            }
-            if (movingFlag){
-
-            }
-          },500)
-        })
-
-        qyGroup.on('touchend',function (){
-          touchingFlag=false;
-          this.draggable(false)
-        })
-
-        const rect=new Konva.Rect({
-          x:0,
-          y:0,
-          width:itemWith,
-          height:itemHeight,
-          stroke:'black',
-          strokeWidth:1,
-        })
-        qyGroup.add(rect)
-        const text=new Konva.Text({
-          x:0,
-          y:0,
-          width:itemWith,
-          height:itemHeight,
-          lineHeight:1,
-          stroke:'blue',
-          strokeWidth:0.1,
-          text:item.czbh+'\n'+item.pl+'\n'+item.tzbh+'\n建议位置\n'+item.perQy+'\n'+item.perDw+'\n'+item.perCeng,
-          align:'center',
-          verticalAlign:'middle',
-        })
-        qyGroup.add(text)
-
-        this.sljhGroup.add(qyGroup)
-      }
-    },
-    initLiLiao(){
-      new Promise(resolve => {
-        return resolve(this.dw)
-      }).then(res=>{
-        const {container}= liliao(this.width,this.height,res,this.initBaiFang)
-        const group=container()
-        this.layer.add(group)
-      })
-    },
-    initWorkers(){
-      new Promise(resolve => {
-        return resolve([
-          {name:'张三1'},{name:'张三2'},
-          {name:'张三1'},{name:'张三2'},
-        ])
-      }).then(res=>{
-        const {container}=workers(this.width,this.height,res)
-        const group=container()
-        this.layer.add(group)
-      })
-    },
-    initKonvaStage(){
-      this.width=this.$refs.sliao.clientWidth
-      this.height=this.$refs.sliao.clientHeight
-      const {stage,layer}=container(this.width,this.height,'sliao')
-      this.stage=stage
-      this.layer=layer
-
-      const titel=drawTitle(this.width,this.height,this.title)
-      this.layer.add(titel)
-
-      const {group}=initSearch()
-
-      this.layer.add(group)
-
-      const {layer:sljhLayer,group:sljhGroup}=sljh(this.width,this.height)
-      this.sljhGroup=sljhGroup
-      this.drawSljhItem(this.sljhItemList)
-      this.stage.add(sljhLayer)
-
-      this.initWorkers()
-
-      this.initLiLiao()
-
-    },
-
-  }
-}
-
-</script>
-
-<style>
-.vxe-button{
-  top: -2px;
-  width: 80px;
-  height: 27px !important;
-}
-
-.vxe-input{
-  width: 115px;
-}
-
-#searchPl {
-  position: absolute;
-  top:43px;
-  left:15px;
-  border: none;
-  margin: 0;
-}
-
-#searchPl input{
-  border: none;
-  background: none;
-  outline: none;
-}
-
-#menu {
-  display: none;
-  position: absolute;
-  width: 100px;
-  height: 180px;
-  background-color: white;
-  box-shadow: 0 0 5px grey;
-  border-radius: 3px;
-  overflow-y: auto;
-}
-
-#menu button {
-  width: 100%;
-  background-color: white;
-  border: none;
-  margin: 0;
-  font-size: 12px;
-  padding: 10px;
-}
-
-#menu button:hover {
-  background-color: lightgray;
-}
-
-#sliao {
-  background: #ddd;
-  overflow: hidden;
-  width: 100%;
-  height: 100vh;
-  aspect-ratio: 16/9;
-}
-</style>

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

@@ -0,0 +1,26 @@
+<template>
+  <VxeGrid v-bind="gridOptions" @cell-click="cellClick" />
+</template>
+
+<script>
+import paoWanPgdConfig from './pgdTable'
+export default {
+  name:'PwanPgd',
+  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/pwanfkui/comps/baifang.js

@@ -2,9 +2,9 @@ import Konva from "konva";
 
 const baifang=function (option={}) {
   const width=option.width,height=option.height,slList=option.dw,image=require('@/assets/gb.png')
-  const _width=width*0.4-50,_height=height*0.81
+  const _width=width*0.25,_height=height*0.67
   const container=function (){
-    const x=width*0.6+40,y=190
+    const x=width*0.30+30,y=300
 
     const group=new Konva.Group({
       x:x,
@@ -33,7 +33,7 @@ const baifang=function (option={}) {
   const gangban=function (index,str){
     const group=new Konva.Group({
       x:0,
-      y:thatHeight-260-index*40,
+      y:thatHeight-310-index*40,
       draggable:true
     })
 
@@ -127,7 +127,7 @@ const baifang=function (option={}) {
     imageObj.src = image;
     imageObj.onload = function () {
       const shape = new Konva.Image({
-        x: 60,
+        x: 40,
         y: 0,
         width: imgSize,
         height:40,
@@ -135,7 +135,7 @@ const baifang=function (option={}) {
       });
       group.add(shape)
       const gbText=new Konva.Text({
-        x: 60,
+        x: 40,
         y: 0,
         width: imgSize,
         height:40,
@@ -150,7 +150,7 @@ const baifang=function (option={}) {
     const concent=new Konva.Text({
       x: imgSize+60,
       y: 0,
-      width: imgSize+40,
+      width: imgSize-20,
       height:40,
       fill:'black',
       text:'G175K-4,001,2302\n上料:2024/07/01,切割:2024/07/04',

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

@@ -0,0 +1,38 @@
+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/pwanfkui/comps/dw.js

@@ -0,0 +1,78 @@
+import Konva from "konva";
+
+export default function (width,height,callback){
+  console.log(callback)
+  const x=0,y=0,_width=width*0.16,_height=height*0.67
+
+  const container=function (){
+    const x=width*0.134+30,y=300
+
+    const group=new Konva.Group({
+      x:x,
+      y:y,
+      width:_width,
+      height:_height
+    })
+
+    const rect=new Konva.Rect({
+      x:0,
+      y:0,
+      width:_width,
+      height:_height,
+      stroke:'black',
+      strokeWidth:1,
+    })
+
+    group.add(rect)
+
+    return group
+  }
+
+  const dw=function (index,item=[]){
+
+    const alignSize=2
+    const width=((_width-20)/alignSize),height=150
+    const x=index%alignSize*width+index%alignSize*10+5,y=height*(Math.floor(index/alignSize))+(Math.floor(index/alignSize)+1)*10
+    const group=new Konva.Group({
+      x:x,
+      y:y,
+      width:width,
+      height:height
+    })
+    group.on('click touchstart',function (){
+      console.log(item)
+      callback(index,item.list)
+    })
+
+    const rect=new Konva.Rect({
+      x:0,
+      y:0,
+      width:width,
+      height:height,
+      stroke:'black',
+      strokeWidth:1,
+    })
+
+    group.add(rect)
+
+    const text=new Konva.Text({
+      x:0,
+      y:0,
+      width: width,
+      height: height,
+      fill:'black',
+      text:item.name,
+      align:'center',
+      verticalAlign:'middle',
+      fontSize:20
+    })
+    group.add(text)
+
+    return group
+  }
+
+  return {
+    container,dw
+  }
+
+}

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

@@ -0,0 +1,69 @@
+import Konva from "konva";
+
+export default function (width,height){
+  const _width=width*0.134,_height=height*0.67
+
+  const container=function (){
+    const x=20,y=300
+
+    const group=new Konva.Group({
+      x:x,
+      y:y,
+      width:_width,
+      height:_height
+    })
+
+    const rect=new Konva.Rect({
+      x:0,
+      y:0,
+      width:_width,
+      height:_height,
+      stroke:'black',
+      strokeWidth:1,
+    })
+
+    group.add(rect)
+
+    return group
+  }
+
+  const person=function (index,persons={}){
+    const 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 group=new Konva.Group({
+      x:x,
+      y:y,
+      width:width,
+      height:height
+    })
+
+    const rect=new Konva.Rect({
+      x:0,
+      y:0,
+      width:width,
+      height:height,
+      stroke:'black',
+      strokeWidth:1,
+    })
+    group.add(rect)
+
+    const text=new Konva.Text({
+      x:0,
+      y:0,
+      width:width,
+      height:height,
+      text: persons.name,
+      align: 'center',
+      verticalAlign:'middle',
+      fontSize:12
+    })
+    group.add(text)
+
+    return group
+  }
+
+  return{
+    container,person
+  }
+}

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

@@ -0,0 +1,513 @@
+import Konva from "konva";
+import QRCode from 'qrcode'
+
+export default function (width,height){
+  const x=width*0.66+40,y=45,_width=width*0.30,_height=height*0.945
+
+  const container=function (){
+    const group=new Konva.Group({
+      x:x,
+      y:y,
+      width:_width,
+      height:_height
+    })
+
+    const rect=new Konva.Rect({
+      x:0,
+      y:0,
+      width:_width,
+      height:_height,
+      stroke:'black',
+      strokeWidth:1,
+    })
+
+    group.add(rect)
+    return group
+  }
+
+  const drawGd=function (data){
+    // this.layer.destroyChildren();
+
+    const group=new Konva.Group({
+      x:0,
+      y:0,
+      width:_width,
+      height:_height
+    })
+
+    const rect=new Konva.Rect({
+      x:0,
+      y:0,
+      width:_width,
+      height:_height,
+      fill:'white'
+    })
+    group.add(rect)
+
+    const title=new Konva.Text({
+      x:0,
+      y:10,
+      width:_width,
+      height:35,
+      lineHeight:1,
+      stroke:'black',
+      strokeWidth:1.2,
+      text:'大连重工大连钢材加工配送有限公司',
+      align:'center',
+      fontSize:22,
+    })
+    group.add(title)
+
+    const sgdTitle=new Konva.Text({
+      x:0,
+      y:40,
+      width:_width,
+      height:25,
+      lineHeight:1,
+      stroke:'black',
+      strokeWidth:1,
+      text:'抛丸施工单',
+      align:'center',
+      fontSize:20,
+    })
+    group.add(sgdTitle)
+
+    const dhTitle=new Konva.Text({
+      x:0,
+      y:50,
+      width:_width-48,
+      height:15,
+      lineHeight:1,
+      text:'单号:PW_'+data.gdh,
+      align:'right',
+      fontSize:12,
+    })
+    group.add(dhTitle)
+
+    const group0=new Konva.Group({
+      x:15,
+      y:65,
+      width:_width-60,
+      height:_width-100,
+    })
+    group.add(group0)
+
+    const group1=drawCzbh(data)
+    group0.add(group1)
+    const group2=drawPlAndFd(data)
+    group0.add(group2)
+    const group3=drawTzbh(data)
+    group0.add(group3)
+    const group4=drawTlt(data)
+    group0.add(group4)
+    const group5=drawJs(data)
+    group0.add(group5)
+    const group6=drawHb(data)
+    group0.add(group6)
+    const group7=drawBz(data)
+    group0.add(group7)
+    const group8=drawQz(data)
+    group0.add(group8)
+    console.log(data)
+    generateQRCode(data.gdh,group0)
+    return group
+  }
+
+  const drawQz=function (data){
+    const group=new Konva.Group({
+      x:0,
+      y:620,
+      width:(_width-60),
+      height:30,
+    })
+
+    const jsText=new Konva.Text({
+      x:5,
+      y:1,
+      width:(_width-60),
+      height:30,
+      lineHeight:1,
+      stroke:'black',
+      strokeWidth:0.8,
+      text:'负责人:',
+      fontSize:18,
+      verticalAlign:'middle'
+    })
+    group.add(jsText)
+    return group
+  }
+  const drawBz=function (data){
+    const group=new Konva.Group({
+      x:0,
+      y:440,
+      width:(_width-60),
+      height:180,
+    })
+
+    const rect=new Konva.Rect({
+      x:0,
+      y:0,
+      width:(_width-60),
+      height:180,
+      stroke:'black',
+      strokeWidth:1,
+    })
+    group.add(rect)
+    return group
+  }
+  const drawHb=function (data){
+    const group=new Konva.Group({
+      x:0,
+      y:410,
+      width:(_width-60),
+      height:30,
+    })
+
+    const jsRect=new Konva.Rect({
+      x:0,
+      y:0,
+      width:(_width-60),
+      height:30,
+      stroke:'black',
+      strokeWidth:1,
+    })
+    group.add(jsRect)
+
+    const jsText=new Konva.Text({
+      x:0,
+      y:0,
+      width:(_width-60),
+      height:30,
+      lineHeight:1,
+      stroke:'black',
+      strokeWidth:0.8,
+      text:'回报',
+      fontSize:18,
+      align:'center',
+      verticalAlign:'middle'
+    })
+    group.add(jsText)
+
+    const plRect=new Konva.Rect({
+      x:0,
+      y:30,
+      width:(_width-60),
+      height:30,
+      stroke:'black',
+      strokeWidth:1,
+    })
+    group.add(plRect)
+
+    const plText=new Konva.Text({
+      x:0,
+      y:30,
+      width:(_width-60)/2,
+      height:30,
+      lineHeight:1,
+      stroke:'black',
+      strokeWidth:0.8,
+      text:data.jsr,
+      fontSize:18,
+      align:'center',
+      verticalAlign:'middle'
+    })
+
+    const fdRect=new Konva.Rect({
+      x:(_width-60)/2,
+      y:30,
+      width:(_width-60)/2,
+      height:30,
+      stroke:'black',
+      strokeWidth:1,
+    })
+    group.add(fdRect)
+
+    const fdText=new Konva.Text({
+      x:(_width-60)/2,
+      y:30,
+      width:(_width-60)/2,
+      height:30,
+      lineHeight:1,
+      stroke:'black',
+      strokeWidth:0.8,
+      text:data.jssj,
+      fontSize:18,
+      align:'center',
+      verticalAlign:'middle'
+    })
+    group.add(fdText)
+
+    group.add(plText)
+
+    return group
+  }
+  const drawJs=function (data){
+    const group=new Konva.Group({
+      x:0,
+      y:350,
+      width:(_width-60),
+      height:30,
+    })
+
+    const jsRect=new Konva.Rect({
+      x:0,
+      y:0,
+      width:(_width-60),
+      height:30,
+      stroke:'black',
+      strokeWidth:1,
+    })
+    group.add(jsRect)
+
+    const jsText=new Konva.Text({
+      x:0,
+      y:0,
+      width:(_width-60),
+      height:30,
+      lineHeight:1,
+      stroke:'black',
+      strokeWidth:0.8,
+      text:'接收',
+      fontSize:18,
+      align:'center',
+      verticalAlign:'middle'
+    })
+    group.add(jsText)
+
+    const plRect=new Konva.Rect({
+      x:0,
+      y:30,
+      width:(_width-60),
+      height:30,
+      stroke:'black',
+      strokeWidth:1,
+    })
+    group.add(plRect)
+
+    const plText=new Konva.Text({
+      x:0,
+      y:30,
+      width:(_width-60)/2,
+      height:30,
+      lineHeight:1,
+      stroke:'black',
+      strokeWidth:0.8,
+      text:data.jsr,
+      fontSize:18,
+      align:'center',
+      verticalAlign:'middle'
+    })
+
+    const fdRect=new Konva.Rect({
+      x:(_width-60)/2,
+      y:30,
+      width:(_width-60)/2,
+      height:30,
+      stroke:'black',
+      strokeWidth:1,
+    })
+    group.add(fdRect)
+
+    const fdText=new Konva.Text({
+      x:(_width-60)/2,
+      y:30,
+      width:(_width-60)/2,
+      height:30,
+      lineHeight:1,
+      stroke:'black',
+      strokeWidth:0.8,
+      text:data.jssj,
+      fontSize:18,
+      align:'center',
+      verticalAlign:'middle'
+    })
+    group.add(fdText)
+
+    group.add(plText)
+
+    return group
+  }
+  const drawTlt=function (data){
+    const group=new Konva.Group({
+      x:0,
+      y:150,
+      width:(_width-60),
+      height:200,
+    })
+
+    const rect=new Konva.Rect({
+      x:0,
+      y:0,
+      width:(_width-60),
+      height:200,
+      stroke:'black',
+      strokeWidth:1,
+    })
+    group.add(rect)
+    return group
+  }
+  const drawTzbh=function (data){
+    const group=new Konva.Group({
+      x:0,
+      y:120,
+      width:(_width-60),
+      height:30,
+    })
+
+    const rect=new Konva.Rect({
+      x:0,
+      y:0,
+      width:(_width-60),
+      height:30,
+      stroke:'black',
+      strokeWidth:1,
+    })
+    group.add(rect)
+
+    const text=new Konva.Text({
+      x:0,
+      y:0,
+      width:(_width-60),
+      height:30,
+      lineHeight:1,
+      stroke:'black',
+      strokeWidth:0.8,
+      text:data.tzbh,
+      fontSize:18,
+      align:'center',
+      verticalAlign:'middle'
+    })
+    group.add(text)
+    return group
+  }
+  const drawPlAndFd=function (data){
+    const group=new Konva.Group({
+      x:0,
+      y:60,
+      width:(_width-188),
+      height:60,
+    })
+
+    const plRect=new Konva.Rect({
+      x:0,
+      y:0,
+      width:(_width-188)/2,
+      height:60,
+      stroke:'black',
+      strokeWidth:1,
+    })
+    group.add(plRect)
+
+    const plText=new Konva.Text({
+      x:0,
+      y:0,
+      width:(_width-188)/2,
+      height:60,
+      lineHeight:1,
+      stroke:'black',
+      strokeWidth:0.8,
+      text:'批量:'+data.dcPl,
+      fontSize:18,
+      align:'center',
+      verticalAlign:'middle'
+    })
+    group.add(plText)
+
+    const fdRect=new Konva.Rect({
+      x:(_width-188)/2,
+      y:0,
+      width:(_width-188)/2,
+      height:60,
+      stroke:'black',
+      strokeWidth:1,
+    })
+    group.add(fdRect)
+
+    const fdText=new Konva.Text({
+      x:(_width-188)/2,
+      y:0,
+      width:(-width-188)/2,
+      height:60,
+      lineHeight:1,
+      stroke:'black',
+      strokeWidth:0.8,
+      text:'分段:'+data.dcFd,
+      fontSize:18,
+      align:'center',
+      verticalAlign:'middle'
+    })
+    group.add(fdText)
+
+
+    return group
+  }
+  const drawCzbh=function (data){
+    const czbhGroup=new Konva.Group({
+      x:0,
+      y:0,
+      width:(_width-188),
+      height:60,
+    })
+
+    const czbhRect=new Konva.Rect({
+      x:0,
+      y:0,
+      width:(_width-188),
+      height:60,
+      stroke:'black',
+      strokeWidth:1,
+    })
+    czbhGroup.add(czbhRect)
+
+    const czbhText=new Konva.Text({
+      x:0,
+      y:0,
+      width:(_width-188),
+      height:60,
+      lineHeight:1,
+      stroke:'black',
+      strokeWidth:0.8,
+      text:'船号:'+data.dcCh,
+      fontSize:18,
+      align:'center',
+      verticalAlign:'middle'
+    })
+    czbhGroup.add(czbhText)
+    return czbhGroup
+  }
+  const generateQRCode=function (text,group) {
+    const imgSize=118
+    const rect=new Konva.Rect({
+      x:385,
+      y:0,
+      width:128.7,
+      height:120,
+      stroke:'black',
+      strokeWidth:1,
+    })
+    group.add(rect)
+    QRCode.toDataURL(text,{width:600,height:600,margin:1})
+      .then(url => {
+        const imageObj = new Image();
+        imageObj.src = url;
+        imageObj.onload = function () {
+
+          const shape = new Konva.Image({
+            x: 390,
+            y: 1,
+            width: imgSize,
+            height: imgSize,
+            image: imageObj,
+          });
+          group.add(shape)
+        }
+
+      }).catch(err => {
+      console.error(err);
+    });
+  }
+
+  return {
+    container,drawGd
+  }
+}

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

@@ -0,0 +1,46 @@
+
+export default function () {
+  const options={
+    height:250,
+    align:'center',
+    border: true,
+    resizable: true,
+    keepSource:true,
+    size:'mini',
+    showOverflow: true,
+    scrollY:{enable:true},
+    data:[
+      {dcCh:'G175K-6',gdh:'20240812101',dcPl:'002',dcFd:'2302','tzbh':'1231232'}
+    ]
+  }
+  const gdhFormat=function ({cellValue}){
+    if (cellValue){
+      return 'PW'+cellValue
+    }
+    return ''
+  }
+  const columns = [
+    { type: 'checkbox', width: 40 },
+    { type: 'seq',title:'序号', width: 60 },
+    { field: 'gdh',title:'派工单号', width: 120,formatter: gdhFormat},
+    {field: '', title: '抛丸位置', width: 80},
+    {field: '', title: '垛位', width: 60},
+    {field: '', title: '层数', width: 60},
+    {field: 'dcCh', title: '船号', width: 80},
+    {field: 'dcPl', title: '批量', width: 80},
+    {field: '', title: '材质', width: 80},
+    {field: '', title: '规格', width: 100},
+    {field: '', title: '炉批号', width: 100},
+    {field: 'tzbh', title: '套料图号', width: 100},
+    {field: '', title: '接收人', width: 80},
+    {field: '', title: '接收时间', width: 100},
+    {field: '', title: '反馈人', width: 80},
+    {field: '', title: '反馈时间', width: 100},
+    {field: '', title: '状态', width: 60},
+  ]
+
+  return {
+    options,
+    columns,
+  }
+}

src/views/zyjhzx/pwanfkui/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="container">
+    <div id="pwpg" class="pwpg" ref="pwpg"></div>
+    <PWanPgd id="pwpgd" ref="pwpgd" @initPgd="initPgd" />
+  </div>
+</template>
+
+<script>
+import PWanPgd from "./comps/PwanPgd.vue";
+import container from "./comps/container";
+import drawTitle from './comps/title'
+import workers from "./comps/person";
+import drawDw from './comps/dw'
+import drawPgd from './comps/pgd'
+import baifang from "./comps/baifang";
+import drawCsd from './comps/csd'
+
+export default {
+  name:'PWanFKui',
+  components: {PWanPgd},
+  data(){
+    return {
+      title:'抛 丸 作 业 反 馈',
+      width:0,
+      height:0,
+      stage:null,
+      layer:null,
+      pgdGroup:null,
+      drawGd:null,
+      dw:[
+        {name:'预处理垛位\n垛位1\n摆放预览',
+          list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
+        },
+        {name:'预处理垛位\n垛位2\n摆放预览',
+          list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
+        },
+        {name:'预处理垛位\n垛位2\n摆放预览',
+          list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
+        },
+      ]
+    }
+  },
+  mounted() {
+    this.initKonvaStage();
+  },
+  methods:{
+    initPgd(pgd={}){
+      const group=this.drawGd(pgd)
+      this.pgdGroup.add(group)
+    },
+    initBaiFang(index,list){
+      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
+      this.layer.add(slGroup)
+    },
+    initDw(){
+      const that=this
+      new Promise(resolve => {
+        return resolve(this.dw)
+      }).then(res=>{
+        console.log(this)
+        const {container,dw}=drawDw(this.width,this.height,that.initBaiFang)
+        const group=container()
+
+        this.layer.add(group)
+
+        for (let i=0;i<res.length;i++){
+          const item=res[i]
+          const dwGroup=dw(i,item)
+          group.add(dwGroup)
+        }
+      })
+    },
+    initWorkers(){
+      new Promise(resolve => {
+        return resolve([
+          {name:'张三1'},{name:'张三2'},
+          {name:'张三1'},{name:'张三2'},
+        ])
+      }).then(res=>{
+        const {container,person}=workers(this.width,this.height,res)
+        const group=container()
+        this.layer.add(group)
+
+        for (let i=0;i<res.length;i++){
+          const item=res[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
+
+      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()
+      this.layer.add(this.pgdGroup)
+
+      const csdGroup=drawCsd(this.width,this.height)
+      this.layer.add(csdGroup)
+    },
+  }
+}
+
+</script>
+
+<style>
+#pwpgd {
+  width:55%;
+  height: auto;
+  position: absolute;
+  top:45px;
+  left:20px;
+  border: none;
+  margin: 0;
+}
+
+#pwpg {
+  overflow: hidden;
+  width: 100%;
+  height: 100vh;
+  aspect-ratio: 16/9;
+}
+
+.container{
+  background: #ddd;
+}
+</style>