物料确认的扫码

applications/architecture-dee/src/App.vue

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

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

+<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

@@ -330,7 +330,13 @@ export default {
       //   })
       //   return
       // }
+      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

@@ -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
       }
+      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('成功')) {