1.增加回报页

package.json

@@ -42,6 +42,7 @@
     "pizzip": "^3.1.1",
     "pl-table": "^2.7.5",
     "print-js": "^1.6.0",
+    "qrcode": "^1.5.3",
     "regenerator-runtime": "^0.13.9",
     "screenfull": "4.2.0",
     "script-loader": "0.7.2",

pnpm-lock.yaml

@@ -77,6 +77,9 @@ dependencies:
   print-js:
     specifier: ^1.6.0
     version: 1.6.0
+  qrcode:
+    specifier: ^1.5.3
+    version: 1.5.3
   regenerator-runtime:
     specifier: ^0.13.9
     version: 0.13.11
@@ -2803,7 +2806,6 @@ packages:
   /ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
-    dev: true
 
   /ansi-styles@1.0.0:
     resolution: {integrity: sha512-3iF4FIKdxaVYT3JqQuY3Wat/T2t7TRbbQ94Fu50ZUCbLy4TFbTzr90NOHQodQkNqmeEGCw8WbeP78WNi6SKYUA==}
@@ -2826,7 +2828,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       color-convert: 2.0.1
-    dev: true
 
   /any-observable@0.3.0(rxjs@6.6.7):
     resolution: {integrity: sha512-/FQM1EDkTsf63Ub2C6O7GuYFDsSXUwsaZDurV0np41ocwq0jthUAYCmhBX9f+KwlaCgIuWyr/4WlUQUBfKfZog==}
@@ -3877,7 +3878,6 @@ packages:
   /camelcase@5.3.1:
     resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
     engines: {node: '>=6'}
-    dev: true
 
   /camelcase@6.3.0:
     resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
@@ -4196,7 +4196,6 @@ packages:
       string-width: 4.2.3
       strip-ansi: 6.0.1
       wrap-ansi: 6.2.0
-    dev: true
 
   /cliui@7.0.4:
     resolution: {integrity: sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==}
@@ -4274,7 +4273,6 @@ packages:
     engines: {node: '>=7.0.0'}
     dependencies:
       color-name: 1.1.4
-    dev: true
 
   /color-name@1.1.3:
     resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
@@ -4282,7 +4280,6 @@ packages:
 
   /color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-    dev: true
 
   /color-string@1.9.1:
     resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
@@ -5069,7 +5066,6 @@ packages:
   /decamelize@1.2.0:
     resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /decode-uri-component@0.2.2:
     resolution: {integrity: sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==}
@@ -5250,6 +5246,10 @@ packages:
       randombytes: 2.1.0
     dev: true
 
+  /dijkstrajs@1.0.3:
+    resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
+    dev: false
+
   /dir-glob@2.0.0:
     resolution: {integrity: sha512-37qirFDz8cA5fimp9feo43fSuRo2gHwaIn6dXL8Ber1dGwUosDrGZeCCXq57WnIqE4aQ+u3eQZzsk1yOzhdwag==}
     engines: {node: '>=4'}
@@ -5500,7 +5500,6 @@ packages:
 
   /emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
-    dev: true
 
   /emojis-list@2.1.0:
     resolution: {integrity: sha512-knHEZMgs8BB+MInokmNTg/OyPlAddghe1YBgNwJBc5zsJi/uyIcXoSDsL/W9ymOsBoBGdPIHXYJ9+qKFwRwDng==}
@@ -5511,6 +5510,10 @@ packages:
     resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==}
     engines: {node: '>= 4'}
 
+  /encode-utf8@1.0.3:
+    resolution: {integrity: sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw==}
+    dev: false
+
   /encodeurl@1.0.2:
     resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
     engines: {node: '>= 0.8'}
@@ -6283,7 +6286,6 @@ packages:
     dependencies:
       locate-path: 5.0.0
       path-exists: 4.0.0
-    dev: true
 
   /findup-sync@2.0.0:
     resolution: {integrity: sha512-vs+3unmJT45eczmcAZ6zMJtxN3l/QXeccaXQx5cu/MeJMhewVfoWZqibRkOxPnmoR59+Zy5hjabfQc6JLSah4g==}
@@ -6534,7 +6536,6 @@ packages:
   /get-caller-file@2.0.5:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
-    dev: true
 
   /get-intrinsic@1.2.1:
     resolution: {integrity: sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==}
@@ -7546,7 +7547,6 @@ packages:
   /is-fullwidth-code-point@3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
-    dev: true
 
   /is-generator-fn@2.1.0:
     resolution: {integrity: sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==}
@@ -8881,7 +8881,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       p-locate: 4.1.0
-    dev: true
 
   /lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
@@ -9924,7 +9923,6 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       p-try: 2.2.0
-    dev: true
 
   /p-locate@2.0.0:
     resolution: {integrity: sha512-nQja7m7gSKuewoVRen45CtVfODR3crN3goVQ0DDZ9N3yHxgpkuBhZqsaiotSQRrADUrne346peY7kT3TSACykg==}
@@ -9945,7 +9943,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       p-limit: 2.3.0
-    dev: true
 
   /p-map@1.2.0:
     resolution: {integrity: sha512-r6zKACMNhjPJMTl8KcFH4li//gkrXWfbD6feV8l6doRHlzljFWGJ2AP6iKaCJXyZmAUMOPtvbW7EXkbWO/pLEA==}
@@ -9984,7 +9981,6 @@ packages:
   /p-try@2.2.0:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
-    dev: true
 
   /pako@1.0.11:
     resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
@@ -10140,7 +10136,6 @@ packages:
   /path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
-    dev: true
 
   /path-is-absolute@1.0.1:
     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
@@ -10341,6 +10336,11 @@ packages:
     resolution: {integrity: sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==}
     dev: true
 
+  /pngjs@5.0.0:
+    resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
+    engines: {node: '>=10.13.0'}
+    dev: false
+
   /pnp-webpack-plugin@1.7.0:
     resolution: {integrity: sha512-2Rb3vm+EXble/sMXNSu6eoBx8e79gKqhNq9F5ZWW6ERNCTE/Q0wQNne5541tE5vKjfM8hpNCYL+LGc1YTfI0dg==}
     engines: {node: '>=6'}
@@ -10923,6 +10923,17 @@ packages:
     engines: {node: '>=0.6.0', teleport: '>=0.2.0'}
     dev: true
 
+  /qrcode@1.5.3:
+    resolution: {integrity: sha512-puyri6ApkEHYiVl4CFzo1tDkAZ+ATcnbJrJ6RiBM1Fhctdn/ix9MTE3hRph33omisEbC/2fcfemsseiKgBPKZg==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    dependencies:
+      dijkstrajs: 1.0.3
+      encode-utf8: 1.0.3
+      pngjs: 5.0.0
+      yargs: 15.4.1
+    dev: false
+
   /qs@6.11.0:
     resolution: {integrity: sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==}
     engines: {node: '>=0.6'}
@@ -11268,7 +11279,6 @@ packages:
   /require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /require-main-filename@1.0.1:
     resolution: {integrity: sha512-IqSUtOVP4ksd1C/ej5zeEh/BIP2ajqpn8c5x+q99gvcIG/Qf0cud5raVnE/Dwd0ua9TXYDoDc0RE5hBSdz22Ug==}
@@ -11276,7 +11286,6 @@ packages:
 
   /require-main-filename@2.0.0:
     resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
-    dev: true
 
   /requires-port@1.0.0:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
@@ -11694,7 +11703,6 @@ packages:
 
   /set-blocking@2.0.0:
     resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
-    dev: true
 
   /set-value@2.0.1:
     resolution: {integrity: sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==}
@@ -12166,7 +12174,6 @@ packages:
       emoji-regex: 8.0.0
       is-fullwidth-code-point: 3.0.0
       strip-ansi: 6.0.1
-    dev: true
 
   /string.prototype.trim@1.2.7:
     resolution: {integrity: sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==}
@@ -12243,7 +12250,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       ansi-regex: 5.0.1
-    dev: true
 
   /strip-bom@2.0.0:
     resolution: {integrity: sha512-kwrX1y7czp1E69n2ajbG65mIo9dqvJ+8aBQXOGVxqwvNbsXdFM6Lq37dLAY3mknUwru8CfcCbfOLL/gMo+fi3g==}
@@ -13613,7 +13619,6 @@ packages:
 
   /which-module@2.0.1:
     resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
-    dev: true
 
   /which-typed-array@1.1.9:
     resolution: {integrity: sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==}
@@ -13681,7 +13686,6 @@ packages:
       ansi-styles: 4.3.0
       string-width: 4.2.3
       strip-ansi: 6.0.1
-    dev: true
 
   /wrap-ansi@7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
@@ -13787,7 +13791,6 @@ packages:
 
   /y18n@4.0.3:
     resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
-    dev: true
 
   /y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
@@ -13819,6 +13822,14 @@ packages:
       decamelize: 1.2.0
     dev: true
 
+  /yargs-parser@18.1.3:
+    resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      camelcase: 5.3.1
+      decamelize: 1.2.0
+    dev: false
+
   /yargs-parser@20.2.9:
     resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
     engines: {node: '>=10'}
@@ -13839,6 +13850,23 @@ packages:
       yargs-parser: 13.1.2
     dev: true
 
+  /yargs@15.4.1:
+    resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
+    engines: {node: '>=8'}
+    dependencies:
+      cliui: 6.0.0
+      decamelize: 1.2.0
+      find-up: 4.1.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      require-main-filename: 2.0.0
+      set-blocking: 2.0.0
+      string-width: 4.2.3
+      which-module: 2.0.1
+      y18n: 4.0.3
+      yargs-parser: 18.1.3
+    dev: false
+
   /yargs@16.2.0:
     resolution: {integrity: sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==}
     engines: {node: '>=10'}

src/views/hbao/comps/HTable.vue

@@ -49,7 +49,7 @@ export default {
   },
   methods:{
     getHeight() {
-      this.options.height = window.innerHeight*0.7
+      this.options.height = window.innerHeight*0.71
     },
   }
 }

src/views/hbao/comps/Hcq.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="hgx" ref="hgx">出勤情况显示区</div>
+  <div id="hcq" ref="hcq">出勤情况显示区</div>
 </template>
 
 <script>
@@ -7,40 +7,88 @@ export default {
   name:'Hcq',
   data(){
     return {
-
+      stage:'',
+      layer:'',
+      width:'',
+      height:'',
+      cqList:[
+        {name:'张三01',imgSrc:require("@/assets/user.png"),yhdm:'张三01'},
+        {name:'张三02',imgSrc:require("@/assets/user.png"),yhdm:'张三02'},
+        {name:'张三03',imgSrc:require("@/assets/user.png"),yhdm:'张三03'},
+        {name:'张三04',imgSrc:require("@/assets/user.png"),yhdm:'张三04'}
+      ]
     }
   },
   mounted() {
     this.initKonvaStage();
+    for (let i = 0; i < this.cqList.length; i++) {
+      const cq=this.cqList[i];
+      this.drawImage(cq,i)
+    }
   },
   methods:{
     initKonvaStage(){
-      const width=this.$refs.hgx.clientWidth;
+      this.width=this.$refs.hcq.clientWidth;
-      const height=this.$refs.hgx.clientHeight;
+      this.height=this.$refs.hcq.clientHeight;
 
       this.stage = new Konva.Stage({
-        container: "hgx",
+        container: "hcq",
-        width: this.$refs.hgx.clientWidth,
+        width: this.width,
-        height: this.$refs.hgx.clientHeight,
+        height: this.height,
       });
-      //pointer
-      //this.stage.container().style.cursor = "sw-resize";
 
-      this.layer = new Konva.Layer({
+      this.layer = new Konva.Layer();
-        width:width,
-        height:height,
-      });
       this.stage.add(this.layer)
 
       this.layer.draw();
     },
+    drawImage(cq,index){
+      const imgSize= this.height*0.7
+      const group=new Konva.Group({
+        x:index*imgSize+(index*15),
+        y:10,
+        width:imgSize,
+        height:imgSize+20
+      })
+      group.on('click',()=>{
+        //加载工序对应的工单
+        console.log(cq.name)
+      })
 
+      const text=new Konva.Text({
+        x:0,
+        y:imgSize+3,
+        width:imgSize,
+        height:20,
+        lineHeight:1,
+        stroke:'white',
+        strokeWidth:1.5,
+        text:cq.name,
+        align:'center',
+        fontSize:20
+      })
+      group.add(text)
+      const imageObj = new Image();
+      imageObj.src = cq.imgSrc;
+      imageObj.onload = function () {
+        const shape = new Konva.Image({
+          x: 0,
+          y: 0,
+          width: imgSize,
+          height: imgSize,
+          image: imageObj,
+        });
+        group.add(shape)
+      }
+
+      this.layer.add(group)
+    }
   }
 }
 </script>
 
 <style scoped>
-#hgx {
+#hcq {
   background: none;
   overflow: hidden;
   width: 100%;

src/views/hbao/comps/Hgd.vue

@@ -1,13 +1,33 @@
 <template>
-  <div id="hgx" ref="hgx">施工单显示区</div>
+  <div id="hgd" ref="hgd">施工单显示区</div>
 </template>
 
 <script>
+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:''
     }
   },
   mounted() {
@@ -15,37 +35,64 @@ export default {
   },
   methods:{
     initKonvaStage(){
-      const width=this.$refs.hgx.clientWidth;
+      this.width=this.$refs.hgd.clientWidth;
-      const height=this.$refs.hgx.clientHeight;
+      this.height=this.$refs.hgd.clientHeight;
 
       this.stage = new Konva.Stage({
-        container: "hgx",
+        container: "hgd",
-        width: this.$refs.hgx.clientWidth,
+        width: this.width,
-        height: this.$refs.hgx.clientHeight,
+        height: this.height,
       });
       //pointer
       //this.stage.container().style.cursor = "sw-resize";
 
-      this.layer = new Konva.Layer({
+      this.layer = new Konva.Layer({});
-        width:width,
-        height:height,
-      });
       this.stage.add(this.layer)
 
       this.layer.draw();
+
+      const group=new Konva.Group({
+        x:15,
+        y:20,
+      })
+
+      const rect=new Konva.Rect({
+        x:0,
+        y:0,
+        width:this.width-30,
+        height:this.height-30,
+        fill:'white'
+      })
+      group.add(rect)
+
+      const title=new Konva.Text({
+        x:0,
+        y:10,
+        width:this.width-30,
+        height:35,
+        lineHeight:1,
+        stroke:'black',
+        strokeWidth:1.1,
+        text:this.$props.gd.title,
+        align:'center',
+        fontSize:28,
+      })
+      group.add(title)
+      this.layer.add(group)
     },
+    generateQRCode() {
 
+    }
   }
 }
 </script>
 
 <style>
-#hgx {
+#hgd {
   background: none;
   overflow: hidden;
-  width: 90%;
+  width: 100%;
   height: 75.5vh;
   aspect-ratio: 16/9;
-  margin-left: 4%;
 }
 </style>

src/views/hbao/comps/Hgx.vue

@@ -3,66 +3,88 @@
 </template>
 
 <script>
+import Konva from "konva";
+
 export default {
   name:'Hgx',
   data(){
     return {
+      stage:'',
+      layer:'',
+      width:'',
+      height:'',
       gxList:[
-        {name:'',imgSrc:'',code:''},
+        {name:'抛丸',imgSrc: require("@/assets/icon/btn_em.jpg"),},
+        {name:'理料',imgSrc: require("@/assets/icon/btn_em.jpg"),},
+        {name:'划线',imgSrc: require("@/assets/icon/btn_em.jpg"),},
+        {name:'切割',imgSrc: require("@/assets/icon/btn_em.jpg"),},
       ]
     }
   },
   mounted() {
     this.initKonvaStage();
+    for (let i = 0; i < this.gxList.length; i++) {
+      const gx=this.gxList[i];
+      this.drawGx(gx,i)
+    }
   },
   methods:{
     initKonvaStage(){
-      const width=this.$refs.hgx.clientWidth;
+      this.width=this.$refs.hgx.clientWidth;
-      const height=this.$refs.hgx.clientHeight;
+      this.height=this.$refs.hgx.clientHeight;
 
       this.stage = new Konva.Stage({
         container: "hgx",
-        width: this.$refs.hgx.clientWidth,
+        width: this.width,
-        height: this.$refs.hgx.clientHeight,
+        height: this.height,
       });
       //pointer
       //this.stage.container().style.cursor = "sw-resize";
 
-      this.layer = new Konva.Layer({
+      this.layer = new Konva.Layer();
-        width:width,
-        height:height,
-      });
       this.stage.add(this.layer)
 
       this.layer.draw();
     },
     drawGx(gx,index){
-      const _that=this
-      const imageObj = new Image();
-      imageObj.src = gx.imgSrc;
       const group=new Konva.Group({
-        x:0,
+        x:10,
-        y:0,
+        y:10+index*140+(index*15),
-        width:60,
+        width:this.width,
-        height:80
+        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,
-        y:60,
+        y:imgSize+3,
-        width:60,
+        width:this.width,
         height:20,
-
+        lineHeight:1,
+        stroke:'white',
+        strokeWidth:1.5,
+        text:gx.name,
+        align:'center',
+        fontSize:20
       })
+
+      const imageObj = new Image();
+      imageObj.src = gx.imgSrc;
       imageObj.onload = function () {
-        _that.shape = new Konva.Image({
+        const shape = new Konva.Image({
           x: 0,
           y: 0,
-          width: _that.stage.width(),
+          width: imgSize,
-          height: _that.stage.height(),
+          height: imgSize,
           image: imageObj,
         });
-
+        // group.add(shape)
       }
+      group.add(text)
+      this.layer.add(group)
     }
   }
 }
@@ -73,7 +95,7 @@ export default {
   background: none;
   overflow: hidden;
   width: 90%;
-  height: 74vh;
+  height: 75.5vh;
   aspect-ratio: 16/9;
   margin-left: 4%;
 }

src/views/hbao/comps/Hlj.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="hgx" ref="hgx">当前蓝牙连接人显示区</div>
+  <div id="hlj" ref="hlj">当前蓝牙连接人显示区</div>
 </template>
 
 <script>
@@ -7,40 +7,144 @@ export default {
   name:'Hlj',
   data(){
     return {
+      stage:'',
+      layer:'',
+      width:'',
+      height:'',
+      msgList:[
 
+      ],
+      ljList:[
+        {name:'张三01',imgSrc:require("@/assets/user.png"),yhdm:'张三01'},
+      ]
     }
   },
+  watch:{
+    msgList:{
+      handler(newVal,oldVal){
+        if (this.layer){
+          this.drawMsg()
+        }
+      },
+      immediate:true,
+      deep:true
+    },
+    // msgList:function (newVal,oldVal){
+    //   console.log(newVal)
+    //   this.drawMsg()
+    //
+    // }
+  },
   mounted() {
     this.initKonvaStage();
+    //模拟当前蓝牙连接人显示
+    // for (let i = 0; i < this.ljList.length; i++) {
+    //   const lj=this.ljList[i];
+    //   this.drawLj(lj,i)
+    // }
+    this.drawMsg()
+    let s=0;
+    const msgList=[
+      '8:08,张三接收了切割任务','8:30,张三回报了切割任务',
+      '8:31,张三接收了切割任务','9:30,张三回报了切割任务',
+      '9:31,张三接收了切割任务','10:00,张三回报了切割任务',
+      '10:08,张三接收了切割任务','11:30,张三回报了切割任务',
+    ]
+    setInterval(()=>{
+      if(s<msgList.length-1){
+        this.layer.destroyChildren();
+        this.msgList.push(msgList[s++])
+      }
+    },2000)
   },
   methods:{
     initKonvaStage(){
-      const width=this.$refs.hgx.clientWidth;
+      this.width=this.$refs.hlj.clientWidth;
-      const height=this.$refs.hgx.clientHeight;
+      this.height=this.$refs.hlj.clientHeight;
 
       this.stage = new Konva.Stage({
-        container: "hgx",
+        container: "hlj",
-        width: this.$refs.hgx.clientWidth,
+        width: this.width,
-        height: this.$refs.hgx.clientHeight,
+        height: this.height,
       });
       //pointer
       //this.stage.container().style.cursor = "sw-resize";
 
-      this.layer = new Konva.Layer({
+      this.layer = new Konva.Layer();
-        width:width,
+
-        height:height,
-      });
       this.stage.add(this.layer)
 
       this.layer.draw();
     },
+    drawMsg(){
+      const size=this.msgList.length
+      for (let i = size; i >=0; i--) {
+        const msg=this.msgList[i];
+        const y=this.height-20*(size-i)
+        const text=new Konva.Text({
+          x:0,
+          y:y,
+          width:this.width,
+          height:15,
+          lineHeight:1,
+          stroke:'white',
+          strokeWidth:1.1,
+          text:msg,
+          align:'center',
+          fontSize:14,
+          visible:y >= 0
+        })
+        this.layer.add(text)
+      }
+    },
+    drawLj(lj,index){
+      const imgSize= this.height*0.7
+      const group=new Konva.Group({
+        x:index*imgSize+(index*15),
+        y:10,
+        width:imgSize,
+        height:imgSize+20
+      })
+      group.on('click',()=>{
+        //加载工序对应的工单
+        console.log(lj.name)
+      })
+
+      const text=new Konva.Text({
+        x:0,
+        y:imgSize+3,
+        width:imgSize,
+        height:20,
+        lineHeight:1,
+        stroke:'white',
+        strokeWidth:1.5,
+        text:lj.name,
+        align:'center',
+        fontSize:20
+      })
+      group.add(text)
+      const imageObj = new Image();
+      imageObj.src = lj.imgSrc;
+      imageObj.onload = function () {
+        const shape = new Konva.Image({
+          x: 0,
+          y: 0,
+          width: imgSize,
+          height: imgSize,
+          image: imageObj,
+        });
+        group.add(shape)
+      }
+
+      this.layer.add(group)
+    },
 
   }
 }
 </script>
 
 <style scoped>
-#hgx {
+#hlj {
   background: none;
   overflow: hidden;
   width: 95%;