Commit 89c96bcb authored by 旭艳's avatar 旭艳

物料确认的扫码

parent c36c9e45
...@@ -7,6 +7,19 @@ ...@@ -7,6 +7,19 @@
<DeeGlobalUpload /> <DeeGlobalUpload />
<!-- <vue-progress-bar /> --> <!-- <vue-progress-bar /> -->
<!-- canvas 做扫码用途 -->
<canvas ref="canvasScanCode" class="canvas-scan-code" />
<div class="canvas-scan-code-box">
<div class="back">
<i class="el-icon-arrow-left" />
</div>
<div class="scan-area">
<div class="mark top-left" />
<div class="mark top-right" />
<div class="mark bottom-left" />
<div class="mark bottom-right" />
</div>
</div>
</div> </div>
</template> </template>
...@@ -54,6 +67,10 @@ export default { ...@@ -54,6 +67,10 @@ export default {
} }
}, },
mounted() { mounted() {
// 用于扫码 装配任务执行中的物料确认
this.$nextTick(() => {
window['canvasScanCode'] = this.$refs.canvasScanCode
})
}, },
methods: { methods: {
judgePermission(path) { judgePermission(path) {
...@@ -142,9 +159,128 @@ export default { ...@@ -142,9 +159,128 @@ export default {
} }
</script> </script>
<style> <style lang="scss">
#id .app-layout { #id .app-layout {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.canvas-scan-code {
display: none;
box-sizing: border-box;
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
@keyframes move {
0% {
top: 0;
}
100% {
top: 100%;
}
}
.canvas-scan-code-box {
display: none;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 10000;
width: 100%;
height: 100%;
/* display: flex; */
align-items: center;
justify-content: center;
> .back {
left: 20px;
position: absolute;
top: 20px;
opacity: 1;
z-index: 10000;
> i {
cursor: pointer;
color: #ffffff;
font-size: 30px;
font-weight: bold;
}
}
.scan-area {
position: absolute;
width: 300px;
height: 300px;
box-sizing: border-box;
box-shadow: 0 0 100px 10000px rgba(0, 0, 0, 0.7);
}
.scan-area::after {
content: " ";
width: 100%;
display: block;
height: 4px;
position: absolute;
animation: move 3s linear infinite;
background: -moz-linear-gradient(
left,
rgba(76, 175, 80, 0.25) 0,
rgba(76, 175, 80, 0.25) 10%,
rgba(76, 175, 80, 1) 50%,
rgba(76, 175, 80, 0.25) 90%,
rgba(76, 175, 80, 0.25) 100%
);
background: -webkit-linear-gradient(
left,
rgba(76, 175, 80, 0.25) 0,
rgba(76, 175, 80, 0.25) 10%,
rgba(76, 175, 80, 1) 50%,
rgba(76, 175, 80, 0.25) 90%,
rgba(76, 175, 80, 0.25) 100%
);
background: linear-gradient(
to right,
rgba(76, 175, 80, 0.25) 0,
rgba(76, 175, 80, 0.25) 10%,
rgba(76, 175, 80, 1) 50%,
rgba(76, 175, 80, 0.25) 90%,
rgba(76, 175, 80, 0.25) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#404caf50', endColorstr='#404caf50', GradientType=1);
}
.scan-area .mark {
position: absolute;
width: 20px;
height: 20px;
border: 3px solid #3cb067;
background: transparent;
}
.scan-area .top-left {
top: -1px;
left: -1px;
border-color: #3cb067 transparent transparent #3cb067;
}
.scan-area .top-right {
top: -1px;
right: -1px;
border-color: #3cb067 #3cb067 transparent transparent;
}
.scan-area .bottom-left {
bottom: -1px;
left: -1px;
border-color: transparent transparent #3cb067 #3cb067;
}
.scan-area .bottom-right {
bottom: -1px;
right: -1px;
border-color: transparent #3cb067 #3cb067 transparent;
}
}
</style> </style>
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
"camunda-bpmn-moddle": "^4.4.0", "camunda-bpmn-moddle": "^4.4.0",
"csv-exportor": "^1.0.2", "csv-exportor": "^1.0.2",
"jquery": "^3.7.1", "jquery": "^3.7.1",
"jsqr": "^1.4.0",
"lodash.foreach": "^4.5.0", "lodash.foreach": "^4.5.0",
"moment": "^2.26.0", "moment": "^2.26.0",
"vue": "^2.6.10", "vue": "^2.6.10",
......
<template>
<main class="reader" @click="media">
<slot />
</main>
</template>
<script>
import jsQR from 'jsqr'
export default {
name: 'Reader',
data() {
return {
timer: null,
result: null,
isAnimation: true,
audio: Object,
video: Object,
cvsele: Object,
canvas: Object
}
},
created() {},
mounted() {
var mp3 = null
try {
mp3 = require('../../assets/tone.mp3')
this.audio = new Audio(mp3)
} catch (e) {
throw new Error('平台打包pm3文件丢失!')
}
this.cvsele = window['canvasScanCode'] // this.$refs.canvas;
this.canvas = this.cvsele.getContext('2d')
},
methods: {
draw(begin, end) {
this.canvas.beginPath()
// this.canvas.moveTo(begin.x, begin.y)
// this.canvas.lineTo(end.x, end.y)
// this.canvas.lineWidth = 3
// this.canvas.strokeStyle = 'red'
// this.canvas.moveTo(100, 100)
// // 02 划线 坐标
// this.canvas.lineTo(300, 100)
// this.canvas.lineTo(300, 300)
// this.canvas.lineTo(100, 300)
// this.canvas.lineTo(100, 100)
// this.canvas.stroke()
this.canvas.arc(begin, end, 10, 0, 360 / 180 * Math.PI)
this.canvas.fillStyle = '#3cb067'
this.canvas.lineWidth = 6
this.canvas.strokeStyle = '#fff'
this.canvas.fill()
},
quit() {
setTimeout(() => {
this.cvsele.style.display = 'none'
document.querySelector('.canvas-scan-code-box').style.display = 'none'
var MediaStreamTrack = this.video.srcObject
// var track =
MediaStreamTrack.getTracks().forEach(function(o) {
o.stop()
})
// track.stop()
clearTimeout(this.timer)
this.result = null
this.isAnimation = true
// document.removeChild('video')
// this.video.parentNode.removeChild(this.video)
this.video = Object
}, 1000)
},
sweep() {
if (this.video.readyState === this.video.HAVE_ENOUGH_DATA) {
const { videoWidth, videoHeight } = this.video
this.cvsele.width = videoWidth
this.cvsele.height = videoHeight
this.canvas.drawImage(this.video, 0, 0, videoWidth, videoHeight)
try {
const img = this.canvas.getImageData(0, 0, videoWidth, videoHeight)
this.imgurl = img
const obj = jsQR(img.data, img.width, img.height, {
inversionAttempts: 'dontInvert'
})
if (obj) {
const loc = obj.location
var x = (loc.topLeftCorner.x + loc.topRightCorner.x) / 2
var y = (loc.topRightCorner.y + loc.bottomRightCorner.y) / 2
this.draw(x, y)
// this.draw(loc.topLeftCorner, loc.topRightCorner)
// this.draw(loc.topRightCorner, loc.bottomRightCorner)
// this.draw(loc.bottomRightCorner, loc.bottomLeftCorner)
// this.draw(loc.bottomLeftCorner, loc.topLeftCorner)
// eslint-disable-next-line eqeqeq
if (this.result != obj.data) {
this.audio.play()
this.result = obj.data
this.isAnimation = false
cancelAnimationFrame(this.timer)
console.info('识别结果:', obj.data)
this.$emit('getQrCode', this.result)
this.quit()
}
} else {
// console.error('识别失败,请检查二维码是否正确!')
}
} catch (err) {
console.error('识别失败,请检查二维码是否正确!', err)
}
}
if (this.isAnimation) {
this.timer = requestAnimationFrame(() => {
this.sweep()
})
}
},
media() {
this.isAnimation = true
this.video = document.createElement('video')
this.cvsele.style.display = 'block'
var box = document.querySelector('.canvas-scan-code-box')
box.onclick = null
box.onclick = this.quit
box.style.display = 'flex'
navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia
if (navigator.mediaDevices) {
navigator.mediaDevices
.getUserMedia({
video: { facingMode: 'environment' }
})
.then((stream) => {
this.video.srcObject = stream
this.video.setAttribute('playsinline', true)
this.video.setAttribute('webkit-playsinline', true)
this.video.addEventListener('loadedmetadata', () => {
this.video.play()
this.sweep()
})
})
.catch((error) => {
console.error(
error.name + ':' + error.message + ',' + error.constraint
)
})
} else if (navigator.getUserMedia) {
navigator.getUserMedia(
{
video: { facingMode: 'environment' }
},
(stream) => {
this.video.srcObject = stream
this.video.setAttribute('playsinline', true)
this.video.setAttribute('webkit-playsinline', true)
this.video.addEventListener('loadedmetadata', () => {
this.video.play()
this.sweep()
})
},
(error) => {
console.error(
error.name + ':' + error.message + ',' + error.constraint
)
}
)
} else {
if (
navigator.userAgent.toLowerCase().match(/chrome/) &&
location.origin.indexOf('https://') < 0
) {
console.error(
'获取浏览器录音功能,因安全性问题,需要在localhost 或 127.0.0.1 或 https 下才能获取权限!'
)
} else {
alert('对不起:未识别到扫描设备!')
}
}
}
}
}
</script>
<style lang="scss">
.reader {
font-size: 16px;
.sweep {
position: relative;
margin: 20px;
padding: 12px;
width: 300px;
font-size: 18px;
cursor: pointer;
color: white;
background: #42b983;
border: 1px solid #42b983;
overflow: hidden;
input {
position: absolute;
font-size: 100px;
opacity: 0;
}
}
.imgurl {
margin: 20px;
text-align: center;
img {
margin: 20px;
padding: 10px;
border: 1px solid gray;
border-radius: 8px;
width: 280px;
height: 260px;
}
}
.result {
box-sizing: border-box;
padding: 10px;
border: 1px solid gray;
border-radius: 8px;
font-size: 16px;
}
}
</style>
...@@ -330,7 +330,13 @@ export default { ...@@ -330,7 +330,13 @@ export default {
// }) // })
// return // return
// } // }
this.tableData.forEach(item => {
if (item.id === row.id) {
row.popoverVisible = true row.popoverVisible = true
} else {
item.popoverVisible = false
}
})
this.rowId = row.id this.rowId = row.id
this.$nextTick(() => { this.$nextTick(() => {
this.$refs[row.uuid].focus() this.$refs[row.uuid].focus()
...@@ -346,8 +352,8 @@ export default { ...@@ -346,8 +352,8 @@ export default {
*/ */
getQRcode(info) { getQRcode(info) {
// 发送请求 // 发送请求
this.HttpRequest( post(
`ScanCodeRecord/saveMaterialConfirmation?stoId=${this.rowId}&scanId=${info}`, `ExtScanCodeRecord/saveMaterialConfirmation?suppId=${this.rowId}&jbOutId=${info}`,
{ {
id: info // AssignCardDetailId id: info // AssignCardDetailId
}, },
...@@ -396,12 +402,12 @@ export default { ...@@ -396,12 +402,12 @@ export default {
type: 'warning' type: 'warning'
// customClass: 'lacclaims-footer-message' // customClass: 'lacclaims-footer-message'
}).then(() => { }).then(() => {
const params = { // const params = {
id: row.scanCodeRecordVo.id, // 记实id // id: row.scanCodeRecordVo.id, // 记实id
operator: 'REMOVE' // operator: 'REMOVE'
} // }
// 发送请求 // 发送请求
this.HttpRequest('/ScanCodeRecord/recursion', params, 'post') post(`ExtScanCodeRecord/removeScanCode?id=${row.id}&reqName=${row.extMaterial.resName}`, {})
.then((res) => { .then((res) => {
if (res.message.includes('成功')) { if (res.message.includes('成功')) {
this.init() this.init()
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<span>物料配套发放:</span> <span>物料配套发放:</span>
<span>提示:当零件类型为外购成品时,实称重量/去除重量才可双击编辑!</span> <span>提示:当零件类型为外购成品时,实称重量/去除重量才可双击编辑!</span>
</p> </p>
<!-- <scan v-show="false" :id="onlyUuid" @getQrCode="getScanBar">扫码录入</scan> --> <scan v-show="false" :id="onlyUuid" @getQrCode="getScanBar">扫码录入</scan>
<div> <div>
<el-table <el-table
v-loading="loading" v-loading="loading"
...@@ -283,12 +283,12 @@ ...@@ -283,12 +283,12 @@
<script> <script>
import $ from 'jquery' import $ from 'jquery'
import { post } from '@/utils/http' import { post } from '@/utils/http'
// import scan from '@/components/scanCode/scanCode' import scan from '@/components/scanCode/scanCode'
import { v4 as uuidv4 } from 'uuid' import { v4 as uuidv4 } from 'uuid'
export default { export default {
// components: { components: {
// scan scan
// }, },
data() { data() {
return { return {
...@@ -328,11 +328,6 @@ export default { ...@@ -328,11 +328,6 @@ export default {
// 设置数据 // 设置数据
this.loading = true this.loading = true
this.tableData = [] this.tableData = []
// const params = {
// aoId: this.$parent.$parent.$parent.$parent.headerData.aoId,
// pageCurrent: this.tablePagination.currentPage,
// pageSize: 9999
// }
// 发送请求 // 发送请求
post( post(
`ExtSupportingItem/getAllMaterialConfirmation?aoId=${this.$parent.$parent.$parent.$parent.headerData.aoId}`, `ExtSupportingItem/getAllMaterialConfirmation?aoId=${this.$parent.$parent.$parent.$parent.headerData.aoId}`,
...@@ -404,15 +399,15 @@ export default { ...@@ -404,15 +399,15 @@ export default {
that.timer = null that.timer = null
}, 2000) }, 2000)
}, },
setPage($event, state) { // setPage($event, state) {
if (state) { // if (state) {
this.tablePagination.currentPage = $event // this.tablePagination.currentPage = $event
} else { // } else {
this.tablePagination.currentPage = 1 // this.tablePagination.currentPage = 1
this.tablePagination.pageSize = $event // this.tablePagination.pageSize = $event
} // }
this.init() // this.init()
}, // },
deeTableBlur(row, status) { deeTableBlur(row, status) {
var that = this var that = this
const param = { const param = {
...@@ -490,7 +485,13 @@ export default { ...@@ -490,7 +485,13 @@ export default {
}) })
return return
} }
this.tableData.forEach(item => {
if (item.id === row.id) {
row.popoverVisible = true row.popoverVisible = true
} else {
item.popoverVisible = false
}
})
this.rowId = row.id this.rowId = row.id
this.$nextTick(() => { this.$nextTick(() => {
this.$refs[row.uuid].focus() this.$refs[row.uuid].focus()
...@@ -521,10 +522,9 @@ export default { ...@@ -521,10 +522,9 @@ export default {
var count = this.typing.count var count = this.typing.count
row.popoverVisible = false row.popoverVisible = false
row.stateName = '已出库' row.stateName = '已出库'
this.HttpRequest( post(
`/ScanCodeRecord/saveMaterialConfirmationHead?stoId=${id}&scanId=${scanid}&amount=${count}`, `/ExtScanCodeRecord/saveMaterialConfirmationHead?suppId=${id}&jbOutId=${scanid}&amount=${count}`,
{}, {},
'post'
) )
.then((res) => { .then((res) => {
if (res.message.includes('成功')) { if (res.message.includes('成功')) {
...@@ -552,10 +552,9 @@ export default { ...@@ -552,10 +552,9 @@ export default {
}, },
async getScanName(value) { async getScanName(value) {
this.scanIdShow = false this.scanIdShow = false
this.HttpRequest( post(
`/JobResponseOutStorage/getModelNo?id=${value}`, `/JobResponseOutStorage/getModelNo?id=${value}`,
{}, {}
'post'
) )
.then((res) => { .then((res) => {
if (res.message.includes('成功')) { if (res.message.includes('成功')) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment