xiaoning
/
gjerp_ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.增加回报页

Browse Source
master
董哲奇 10 months ago
parent dca798b3f2
commit 81e8e1a52a
7 changed files with 338 additions and 88 deletions
Show Stats Download Patch File Download Diff File

1
package.json
Unescape View File

@ -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",

76
pnpm-lock.yaml
Unescape View File

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

2
src/views/hbao/comps/HTable.vue
Unescape View File

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

76
src/views/hbao/comps/Hcq.vue
Unescape View File

@ -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;
const height=this.$refs.hgx.clientHeight;
this.width=this.$refs.hcq.clientWidth;
this.height=this.$refs.hcq.clientHeight;
this.stage = new Konva.Stage({
container: "hgx",
width: this.$refs.hgx.clientWidth,
height: this.$refs.hgx.clientHeight,
container: "hcq",
width: this.width,
height: this.height,
});
//pointer
//this.stage.container().style.cursor = "sw-resize";
this.layer = new Konva.Layer({
width:width,
height:height,
});
this.layer = new Konva.Layer();
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%;

75
src/views/hbao/comps/Hgd.vue
Unescape View File

@ -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;
const height=this.$refs.hgx.clientHeight;
this.width=this.$refs.hgd.clientWidth;
this.height=this.$refs.hgd.clientHeight;
this.stage = new Konva.Stage({
container: "hgx",
width: this.$refs.hgx.clientWidth,
height: this.$refs.hgx.clientHeight,
container: "hgd",
width: this.width,
height: this.height,
});
//pointer
//this.stage.container().style.cursor = "sw-resize";
this.layer = new Konva.Layer({
width:width,
height:height,
});
this.layer = new Konva.Layer({});
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>

70
src/views/hbao/comps/Hgx.vue
Unescape View File

@ -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;
const height=this.$refs.hgx.clientHeight;
this.width=this.$refs.hgx.clientWidth;
this.height=this.$refs.hgx.clientHeight;
this.stage = new Konva.Stage({
container: "hgx",
width: this.$refs.hgx.clientWidth,
height: this.$refs.hgx.clientHeight,
width: this.width,
height: this.height,
});
//pointer
//this.stage.container().style.cursor = "sw-resize";
this.layer = new Konva.Layer({
width:width,
height:height,
});
this.layer = new Konva.Layer();
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,
y:0,
width:60,
height:80
x:10,
y:10+index*140+(index*15),
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,
y:60,
width:60,
y:imgSize+3,
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(),
height: _that.stage.height(),
width: imgSize,
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%;
}

126
src/views/hbao/comps/Hlj.vue
Unescape View File

@ -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;
const height=this.$refs.hgx.clientHeight;
this.width=this.$refs.hlj.clientWidth;
this.height=this.$refs.hlj.clientHeight;
this.stage = new Konva.Stage({
container: "hgx",
width: this.$refs.hgx.clientWidth,
height: this.$refs.hgx.clientHeight,
container: "hlj",
width: this.width,
height: this.height,
});
//pointer
//this.stage.container().style.cursor = "sw-resize";
this.layer = new Konva.Layer({
width:width,
height:height,
});
this.layer = new Konva.Layer();
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%;

Write Preview
Loading…
Cancel
Save