Skip to content

T
TF-MOM-WEB
Commit 89c96bcb authored by 旭艳's avatar 旭艳
Browse files
Options

物料确认的扫码

parent c36c9e45
Hide whitespace changes
Inline Side-by-side
Showing with 405 additions and 35 deletions
applications/architecture-dee/src/App.vue
View file @ 89c96bcb
......@@ -7,6 +7,19 @@
<DeeGlobalUpload />
<!-- <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>
</template>
......@@ -54,6 +67,10 @@ export default {
}
},
mounted() {
// 用于扫码 装配任务执行中的物料确认
this.$nextTick(() => {
window['canvasScanCode'] = this.$refs.canvasScanCode
})
},
methods: {
judgePermission(path) {
......@@ -142,9 +159,128 @@ export default {
}
</script>
<style>
<style lang="scss">
#id .app-layout {
width: 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>
applications/dee-mes/package.json
View file @ 89c96bcb
......@@ -13,6 +13,7 @@
"camunda-bpmn-moddle": "^4.4.0",
"csv-exportor": "^1.0.2",
"jquery": "^3.7.1",
"jsqr": "^1.4.0",
"lodash.foreach": "^4.5.0",
"moment": "^2.26.0",
"vue": "^2.6.10",
......
applications/dee-mes/src/components/scanCode/scanCode.vue 0 → 100644
View file @ 89c96bcb
<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>
applications/dee-mes/src/views/taskExecution/components/ConfirmMaterial/footer.vue
View file @ 89c96bcb
......@@ -330,7 +330,13 @@ export default {
// })
// return
// }
row.popoverVisible = true
this.tableData.forEach(item => {
if (item.id === row.id) {
row.popoverVisible = true
} else {
item.popoverVisible = false
}
})
this.rowId = row.id
this.$nextTick(() => {
this.$refs[row.uuid].focus()
......@@ -346,8 +352,8 @@ export default {
*/
getQRcode(info) {
// 发送请求
this.HttpRequest(
`ScanCodeRecord/saveMaterialConfirmation?stoId=${this.rowId}&scanId=${info}`,
post(
`ExtScanCodeRecord/saveMaterialConfirmation?suppId=${this.rowId}&jbOutId=${info}`,
{
id: info // AssignCardDetailId
},
......@@ -396,12 +402,12 @@ export default {
type: 'warning'
// customClass: 'lacclaims-footer-message'
}).then(() => {
const params = {
id: row.scanCodeRecordVo.id, // 记实id
operator: 'REMOVE'
}
// const params = {
// id: row.scanCodeRecordVo.id, // 记实id
// operator: 'REMOVE'
// }
// 发送请求
this.HttpRequest('/ScanCodeRecord/recursion', params, 'post')
post(`ExtScanCodeRecord/removeScanCode?id=${row.id}&reqName=${row.extMaterial.resName}`, {})
.then((res) => {
if (res.message.includes('成功')) {
this.init()
......
applications/dee-mes/src/views/taskExecution/components/ConfirmMaterial/header.vue
View file @ 89c96bcb
......@@ -4,7 +4,7 @@
<span>物料配套发放：</span>
<span>提示：当零件类型为外购成品时,实称重量/去除重量才可双击编辑!</span>
</p>
<!-- <scan v-show="false" :id="onlyUuid" @getQrCode="getScanBar">扫码录入</scan> -->
<scan v-show="false" :id="onlyUuid" @getQrCode="getScanBar">扫码录入</scan>
<div>
<el-table
v-loading="loading"
......@@ -283,12 +283,12 @@
<script>
import $ from 'jquery'
import { post } from '@/utils/http'
// import scan from '@/components/scanCode/scanCode'
import scan from '@/components/scanCode/scanCode'
import { v4 as uuidv4 } from 'uuid'
export default {
// components: {
// scan
// },
components: {
scan
},
data() {
return {
......@@ -328,11 +328,6 @@ export default {
// 设置数据
this.loading = true
this.tableData = []
// const params = {
// aoId: this.$parent.$parent.$parent.$parent.headerData.aoId,
// pageCurrent: this.tablePagination.currentPage,
// pageSize: 9999
// }
// 发送请求
post(
`ExtSupportingItem/getAllMaterialConfirmation?aoId=${this.$parent.$parent.$parent.$parent.headerData.aoId}`,
......@@ -404,15 +399,15 @@ export default {
that.timer = null
}, 2000)
},
setPage($event, state) {
if (state) {
this.tablePagination.currentPage = $event
} else {
this.tablePagination.currentPage = 1
this.tablePagination.pageSize = $event
}
this.init()
},
// setPage($event, state) {
// if (state) {
// this.tablePagination.currentPage = $event
// } else {
// this.tablePagination.currentPage = 1
// this.tablePagination.pageSize = $event
// }
// this.init()
// },
deeTableBlur(row, status) {
var that = this
const param = {
......@@ -490,7 +485,13 @@ export default {
})
return
}
row.popoverVisible = true
this.tableData.forEach(item => {
if (item.id === row.id) {
row.popoverVisible = true
} else {
item.popoverVisible = false
}
})
this.rowId = row.id
this.$nextTick(() => {
this.$refs[row.uuid].focus()
......@@ -521,10 +522,9 @@ export default {
var count = this.typing.count
row.popoverVisible = false
row.stateName = '已出库'
this.HttpRequest(
`/ScanCodeRecord/saveMaterialConfirmationHead?stoId=${id}&scanId=${scanid}&amount=${count}`,
post(
`/ExtScanCodeRecord/saveMaterialConfirmationHead?suppId=${id}&jbOutId=${scanid}&amount=${count}`,
{},
'post'
)
.then((res) => {
if (res.message.includes('成功')) {
......@@ -552,10 +552,9 @@ export default {
},
async getScanName(value) {
this.scanIdShow = false
this.HttpRequest(
post(
`/JobResponseOutStorage/getModelNo?id=${value}`,
{},
'post'
{}
)
.then((res) => {
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