1.完善回报页展示内容

src/utils/EventBus.js

@@ -0,0 +1,3 @@
+import Vue from 'vue';
+
+export default new Vue();

src/views/hbao/comps/HTable.vue

@@ -1,5 +1,6 @@
 <template>
   <vxe-grid
+    id="grid"
     class="vxe-table"
     resizable
     keep-source
@@ -9,13 +10,14 @@
     :columns="options.columns"
     :auto-resize="true"
     :custom-config="{ storage: true }"
+    @cell-click="cellClick"
     show-overflow
   >
   </vxe-grid>
 </template>
 
 <script>
-
+import eventBus from "@/utils/EventBus";
 export default {
   name: 'HTable',
   data(){
@@ -23,7 +25,7 @@ export default {
       options:{
         align:'center',
         data:[
-          {dcCh:'123'}
+          {dcCh:'G175K-4',dcPl:'006',dcFd:'1132',tzbh:'B006N4PX006',gdh:'20240717001',gx:'切割',jsr:'张三',jssj:'2024/07/17 8:00',hbr:'张三',hbsj:'2024/07/17 8:30',zt:'已回报'},
         ],
         height:'500px',
         columns:[
@@ -33,12 +35,13 @@ export default {
           { field: 'dcPl', title: '批量', width: 100},
           { field: 'dcFd', title: '分段', width: 100},
           { field: 'tzbh', title: '套料图号', width: 150},
-          { field: '', title: '工单号', width: 150},
+          { field: 'gdh', title: '工单号', width: 150},
-          { field: '', title: '接收人', width: 100},
+          { field: 'gx', title: '工序', width: 100},
-          { field: '', title: '接收时间', width: 150},
+          { field: 'jsr', title: '接收人', width: 100},
-          { field: '', title: '回报人', width: 100},
+          { field: 'jssj', title: '接收时间', width: 150},
-          { field: '', title: '回报时间', width: 150},
+          { field: 'hbr', title: '回报人', width: 100},
-          { field: '', title: '状态'},
+          { field: 'hbsj', title: '回报时间', width: 150},
+          { field: 'zt', title: '状态'},
         ]
       }
     }
@@ -48,6 +51,10 @@ export default {
     this.getHeight()
   },
   methods:{
+    cellClick({row,column}){
+      console.log(row)
+      eventBus.$emit('share',row)
+    },
     getHeight() {
       this.options.height = window.innerHeight*0.71
     },

src/views/hbao/comps/Hgd.vue

@@ -3,33 +3,24 @@
 </template>
 
 <script>
+import eventBus from "@/utils/EventBus";
 import QRCode from 'qrcode'
 export default {
   name:'Hgd',
-  props:{
-    gd:{
-      type:Object,
-      default:function(){
-        return{
-          title:'XX施工单',
-          tzbh:'',
-          dh:'QG202407160001',
-          jsr:'',
-          jssj:'',
-          hbr:'',
-          hbsj:''
-        }
-      }
-    }
-  },
   data(){
     return {
       stage:'',
       layer:'',
       width:'',
-      height:''
+      height:'',
+      containerGroup:'',
     }
   },
+  created(){
+    eventBus.$on('share',val=>{
+      this.drawGd(val)
+    })
+  },
   mounted() {
     this.initKonvaStage();
   },
@@ -51,20 +42,26 @@ export default {
 
       this.layer.draw();
 
-      const group=new Konva.Group({
+    },
+    drawGd(data){
+      this.layer.destroyChildren();
+
+      this.containerGroup=new Konva.Group({
         x:15,
         y:20,
       })
+      this.layer.add(this.containerGroup)
 
-      const rect=new Konva.Rect({
+      const containerRect=new Konva.Rect({
         x:0,
         y:0,
         width:this.width-30,
         height:this.height-30,
         fill:'white'
       })
-      group.add(rect)
+      this.containerGroup.add(containerRect)
 
+      console.log(data)
       const title=new Konva.Text({
         x:0,
         y:10,
@@ -73,15 +70,450 @@ export default {
         lineHeight:1,
         stroke:'black',
         strokeWidth:1.1,
-        text:this.$props.gd.title,
+        text:'大连重工大连钢材加工配送有限公司',
+        align:'center',
+        fontSize:20,
+      })
+      this.containerGroup.add(title)
+
+      const sgdTitle=new Konva.Text({
+        x:0,
+        y:40,
+        width:this.width-30,
+        height:25,
+        lineHeight:1,
+        stroke:'black',
+        strokeWidth:1.1,
+        text:data.title||'施工单',
+        align:'center',
+        fontSize:22,
+      })
+      this.containerGroup.add(sgdTitle)
+
+      const dhTitle=new Konva.Text({
+        x:0,
+        y:50,
+        width:this.width-60,
+        height:15,
+        lineHeight:1,
+        stroke:'black',
+        strokeWidth:0.8,
+        text:'单号:'+data.gdh,
+        align:'right',
+        fontSize:12,
+      })
+      this.containerGroup.add(dhTitle)
+
+      const group=new Konva.Group({
+        x:15,
+        y:65,
+        width:this.width-60,
+        height:this.height-100,
+      })
+
+      const rect=new Konva.Rect({
+        x:0,
+        y:0,
+        width:this.width-60,
+        height:this.height-100,
+        stroke:'black',
+        strokeWidth:1,
+      })
+      group.add(rect)
+
+      this.drawCzbh(group,data)
+      this.drawPlAndFd(group,data)
+      this.drawTzbh(group,data)
+      this.drawTlt(group,data)
+      this.drawJs(group,data)
+      this.drawHb(group,data)
+      this.drawBz(group,data)
+      this.drawQz(group,data)
+
+      this.containerGroup.add(group)
+
+      this.generateQRCode(data.gdh,group)
+    },
+    drawQz($group,data){
+      const group=new Konva.Group({
+        x:0,
+        y:620,
+        width:(this.width-60),
+        height:30,
+      })
+      $group.add(group)
+
+      const jsText=new Konva.Text({
+        x:5,
+        y:1,
+        width:(this.width-60),
+        height:30,
+        lineHeight:1,
+        stroke:'black',
+        strokeWidth:0.8,
+        text:'负责人:',
+        fontSize:18,
+        verticalAlign:'middle'
+      })
+      group.add(jsText)
+      $group.add(group)
+    },
+    drawBz($group,data){
+      const group=new Konva.Group({
+        x:0,
+        y:440,
+        width:(this.width-60),
+        height:180,
+      })
+      $group.add(group)
+
+      const rect=new Konva.Rect({
+        x:0,
+        y:0,
+        width:(this.width-60),
+        height:180,
+        stroke:'black',
+        strokeWidth:1,
+      })
+      group.add(rect)
+    },
+    drawHb($group,data){
+      const group=new Konva.Group({
+        x:0,
+        y:410,
+        width:(this.width-60),
+        height:30,
+      })
+
+      const jsRect=new Konva.Rect({
+        x:0,
+        y:0,
+        width:(this.width-60),
+        height:30,
+        stroke:'black',
+        strokeWidth:1,
+      })
+      group.add(jsRect)
+
+      const jsText=new Konva.Text({
+        x:0,
+        y:0,
+        width:(this.width-60),
+        height:30,
+        lineHeight:1,
+        stroke:'black',
+        strokeWidth:0.8,
+        text:'回报',
+        fontSize:18,
         align:'center',
-        fontSize:28,
+        verticalAlign:'middle'
       })
-      group.add(title)
+      group.add(jsText)
-      this.layer.add(group)
+
+      const plRect=new Konva.Rect({
+        x:0,
+        y:30,
+        width:(this.width-60),
+        height:30,
+        stroke:'black',
+        strokeWidth:1,
+      })
+      group.add(plRect)
+
+      const plText=new Konva.Text({
+        x:0,
+        y:30,
+        width:(this.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:(this.width-60)/2,
+        y:30,
+        width:(this.width-60)/2,
+        height:30,
+        stroke:'black',
+        strokeWidth:1,
+      })
+      group.add(fdRect)
+
+      const fdText=new Konva.Text({
+        x:(this.width-60)/2,
+        y:30,
+        width:(this.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)
+      $group.add(group)
     },
-    generateQRCode() {
+    drawJs($group,data){
+      const group=new Konva.Group({
+        x:0,
+        y:350,
+        width:(this.width-60),
+        height:30,
+      })
 
+      const jsRect=new Konva.Rect({
+        x:0,
+        y:0,
+        width:(this.width-60),
+        height:30,
+        stroke:'black',
+        strokeWidth:1,
+      })
+      group.add(jsRect)
+
+      const jsText=new Konva.Text({
+        x:0,
+        y:0,
+        width:(this.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:(this.width-60),
+        height:30,
+        stroke:'black',
+        strokeWidth:1,
+      })
+      group.add(plRect)
+
+      const plText=new Konva.Text({
+        x:0,
+        y:30,
+        width:(this.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:(this.width-60)/2,
+        y:30,
+        width:(this.width-60)/2,
+        height:30,
+        stroke:'black',
+        strokeWidth:1,
+      })
+      group.add(fdRect)
+
+      const fdText=new Konva.Text({
+        x:(this.width-60)/2,
+        y:30,
+        width:(this.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)
+      $group.add(group)
+    },
+    drawTlt($group,data){
+      const group=new Konva.Group({
+        x:0,
+        y:150,
+        width:(this.width-60),
+        height:200,
+      })
+      $group.add(group)
+
+      const rect=new Konva.Rect({
+        x:0,
+        y:0,
+        width:(this.width-60),
+        height:200,
+        stroke:'black',
+        strokeWidth:1,
+      })
+      group.add(rect)
+    },
+    drawTzbh($group,data){
+      const group=new Konva.Group({
+        x:0,
+        y:120,
+        width:(this.width-60),
+        height:30,
+      })
+
+      const rect=new Konva.Rect({
+        x:0,
+        y:0,
+        width:(this.width-60),
+        height:30,
+        stroke:'black',
+        strokeWidth:1,
+      })
+      group.add(rect)
+
+      const text=new Konva.Text({
+        x:0,
+        y:0,
+        width:(this.width-60),
+        height:30,
+        lineHeight:1,
+        stroke:'black',
+        strokeWidth:0.8,
+        text:data.tzbh,
+        fontSize:18,
+        align:'center',
+        verticalAlign:'middle'
+      })
+      group.add(text)
+      $group.add(group)
+    },
+    drawPlAndFd($group,data){
+      const group=new Konva.Group({
+        x:0,
+        y:60,
+        width:(this.width-188),
+        height:60,
+      })
+
+      const plRect=new Konva.Rect({
+        x:0,
+        y:0,
+        width:(this.width-188)/2,
+        height:60,
+        stroke:'black',
+        strokeWidth:1,
+      })
+      group.add(plRect)
+
+      const plText=new Konva.Text({
+        x:0,
+        y:0,
+        width:(this.width-188)/2,
+        height:60,
+        lineHeight:1,
+        stroke:'black',
+        strokeWidth:0.8,
+        text:'批量:'+data.dcPl,
+        fontSize:18,
+        align:'center',
+        verticalAlign:'middle'
+      })
+
+      const fdRect=new Konva.Rect({
+        x:(this.width-188)/2,
+        y:0,
+        width:(this.width-188)/2,
+        height:60,
+        stroke:'black',
+        strokeWidth:1,
+      })
+      group.add(fdRect)
+
+      const fdText=new Konva.Text({
+        x:(this.width-188)/2,
+        y:0,
+        width:(this.width-188)/2,
+        height:60,
+        lineHeight:1,
+        stroke:'black',
+        strokeWidth:0.8,
+        text:'分段:'+data.dcFd,
+        fontSize:18,
+        align:'center',
+        verticalAlign:'middle'
+      })
+      group.add(fdText)
+
+      group.add(plText)
+      $group.add(group)
+    },
+    drawCzbh($group,data){
+      const czbhGroup=new Konva.Group({
+        x:0,
+        y:0,
+        width:(this.width-188),
+        height:60,
+      })
+
+      const czbhRect=new Konva.Rect({
+        x:0,
+        y:0,
+        width:(this.width-188),
+        height:60,
+        stroke:'black',
+        strokeWidth:1,
+      })
+      czbhGroup.add(czbhRect)
+
+      const czbhText=new Konva.Text({
+        x:0,
+        y:0,
+        width:(this.width-188),
+        height:60,
+        lineHeight:1,
+        stroke:'black',
+        strokeWidth:0.8,
+        text:'船号:'+data.dcCh,
+        fontSize:18,
+        align:'center',
+        verticalAlign:'middle'
+      })
+      czbhGroup.add(czbhText)
+      $group.add(czbhGroup)
+    },
+    generateQRCode(text,group) {
+      QRCode.toDataURL(text,{width:600,height:600,margin:1})
+        .then(url => {
+          const imageObj = new Image();
+          imageObj.src = url;
+          imageObj.onload = function () {
+            const imgSize=118
+            const shape = new Konva.Image({
+              x: 255,
+              y: 1,
+              width: imgSize,
+              height: imgSize,
+              image: imageObj,
+            });
+            group.add(shape)
+          }
+
+        }).catch(err => {
+          console.error(err);
+        });
     }
   }
 }

src/views/hbao/comps/Hgx.vue

@@ -18,11 +18,13 @@ export default {
         {name:'理料',imgSrc: require("@/assets/icon/btn_em.jpg"),},
         {name:'划线',imgSrc: require("@/assets/icon/btn_em.jpg"),},
         {name:'切割',imgSrc: require("@/assets/icon/btn_em.jpg"),},
-      ]
+      ],
+      txGroupList:[]
     }
   },
   mounted() {
     this.initKonvaStage();
+    this.txGroupList=[]
     for (let i = 0; i < this.gxList.length; i++) {
       const gx=this.gxList[i];
       this.drawGx(gx,i)
@@ -53,10 +55,7 @@ export default {
         width:this.width,
         height:this.height/this.gxList.length-25
       })
-      group.on('click',()=>{
+
-        //加载工序对应的工单
-        console.log(gx.name)
-      })
       const imgSize= this.width*0.89
       const text=new Konva.Text({
         x:0,
@@ -64,12 +63,24 @@ export default {
         width:this.width,
         height:20,
         lineHeight:1,
-        stroke:'white',
+        fill:'white',
+        // stroke:'white',
         strokeWidth:1.5,
         text:gx.name,
         align:'center',
         fontSize:20
       })
+      this.txGroupList.push(text);
+      text.setAttr('name',gx.name)
+      text.on('click',(evt)=>{
+        //加载工序对应的工单
+        this.txGroupList.forEach(item=>{
+          if(item.getAttr('name')!==evt.target.getAttr('name')){
+            item.fill('white')
+          }
+        })
+        evt.target.fill('blue')
+      })
 
       const imageObj = new Image();
       imageObj.src = gx.imgSrc;