1.抛丸派工

src/views/zyjhzx/pwanpgong/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/pwanpgong/comps/container.js

@@ -0,0 +1,19 @@
+import Konva from "konva";
+
+const container=function (width=0,height=0,container){
+  const stage = new Konva.Stage({
+    container: container,
+    width: width,
+    height: height,
+  });
+
+  const layer = new Konva.Layer();
+  stage.add(layer)
+  layer.draw();
+
+  return {
+    stage,layer
+  }
+}
+
+export default container

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

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

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

@@ -0,0 +1,69 @@
+import Konva from "konva";
+
+export default function (width,height){
+  const x=0,y=0,_width=width*0.5,_height=120
+
+  const container=function (){
+    const x=20,y=45
+
+    const group=new Konva.Group({
+      x:x,
+      y:y,
+      width:_width,
+      height:_height
+    })
+
+    const rect=new Konva.Rect({
+      x:0,
+      y:0,
+      width:_width,
+      height:_height,
+      stroke:'black',
+      strokeWidth:1,
+    })
+
+    group.add(rect)
+
+    return group
+  }
+
+  const person=function (index,persons={}){
+
+    const width=120,height=110
+    const x=index*120+(index+1)*5,y=5
+    const group=new Konva.Group({
+      x:x,
+      y:y,
+      width:width,
+      height:height
+    })
+
+    const rect=new Konva.Rect({
+      x:0,
+      y:0,
+      width:width,
+      height:height,
+      stroke:'black',
+      strokeWidth:1,
+    })
+    group.add(rect)
+
+    const text=new Konva.Text({
+      x:0,
+      y:0,
+      width:width,
+      height:height,
+      text: persons.name,
+      align: 'center',
+      verticalAlign:'middle',
+      fontSize:12
+    })
+    group.add(text)
+
+    return group
+  }
+
+  return{
+    container,person
+  }
+}

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

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

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

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

src/views/zyjhzx/pwanpgong/comps/title.js

@@ -0,0 +1,18 @@
+import Konva from "konva";
+
+const title=function (width,height,title) {
+  return new Konva.Text({
+    x: 0,
+    y: 8,
+    width: width,
+    height: 20,
+    lineHeight: 1,
+    stroke: 'blue',
+    strokeWidth: 2,
+    text: title,
+    align: 'center',
+    fontSize: 32,
+  })
+}
+
+export default title

src/views/zyjhzx/pwanpgong/index.vue

@@ -0,0 +1,121 @@
+<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 "@/views/zyjhzx/pwanpgong/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'
+
+export default {
+  name:'PWanPGong',
+  components: {PWanPgd},
+  data(){
+    return {
+      title:'抛 丸 作 业 派 工',
+      width:0,
+      height:0,
+      stage:null,
+      layer:null,
+      pgdGroup:null,
+      drawGd:null,
+    }
+  },
+  mounted() {
+    this.initKonvaStage();
+  },
+  methods:{
+    initPgd(pgd={}){
+      console.log(pgd)
+      const group=this.drawGd(pgd)
+      this.pgdGroup.add(group)
+    },
+    initDw(){
+      new Promise(resolve => {
+        return resolve([
+          {name:'垛位1'},{name:'垛位2'},
+          {name:'垛位3'},{name:'垛位4'},
+        ])
+      }).then(res=>{
+        const {container,dw}=drawDw(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 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)
+    },
+
+  }
+}
+
+</script>
+
+<style>
+#pwpgd {
+  width:50%;
+  height: auto;
+  position: absolute;
+  top:175px;
+  left:20px;
+  border: none;
+  margin: 0;
+}
+
+#pwpg {
+  overflow: hidden;
+  width: 100%;
+  height: 100vh;
+  aspect-ratio: 16/9;
+}
+
+.container{
+  background: #ddd;
+}
+</style>