From 5a5fa07eb8f4b96dc1978718b69fff536313be17 Mon Sep 17 00:00:00 2001
From: Fixiaobai <fixiaobai@163.com>
Date: 星期四, 14 十二月 2023 22:58:56 +0800
Subject: [PATCH] modified: package.json new file: src/views/common/qrCodeApp.vue deleted: src/views/quality/rawMaterial/QrcodeReader.vue modified: src/views/quality/rawMaterial/rawMaterial-form.vue
---
src/views/quality/rawMaterial/rawMaterial-form.vue | 45 ++++--
/dev/null | 76 ----------
package.json | 2
src/views/common/qrCodeApp.vue | 245 +++++++++++++++++++++++++++++++++++
4 files changed, 275 insertions(+), 93 deletions(-)
diff --git a/package.json b/package.json
index 1bd2008..56764cc 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
"vue-json-editor": "^1.2.3",
"vue-json-tree-view": "^2.1.4",
"vue-qr": "^4.0.9",
- "vue-qrcode-reader": "^5.4.1",
+ "vue-qrcode-reader": "^3.1.0",
"vue-quill-editor": "3.0.6",
"vue-router": "^3.0.2",
"vuedraggable": "^2.24.3",
diff --git a/src/views/common/qrCodeApp.vue b/src/views/common/qrCodeApp.vue
new file mode 100644
index 0000000..c50d1d4
--- /dev/null
+++ b/src/views/common/qrCodeApp.vue
@@ -0,0 +1,245 @@
+<template>
+ <div class="scan" style="height: 100%; width: 100%;">
+ <qrcode-stream v-show="isShow" :camera="camera" @decode="onDecode" @init="onInit"
+ style="height: 100%;">
+ <div>
+ <div class="qr-scanner">
+ <div style="display: flex;justify-content: end;">
+ <el-button plain @click="switchCamera">鍙嶈浆鐩告満</el-button>
+ <el-button plain @click="cancelCode">閫�鍑烘壂鐮�</el-button>
+ </div>
+ <div class="box">
+ <div class="line"></div>
+ <div class="angle"></div>
+ </div>
+ </div>
+ </div>
+ </qrcode-stream>
+ </div>
+</template>
+<script>
+// 涓嬭浇鎻掍欢
+// cnpm install --save vue-qrcode-reader
+// 寮曞叆
+import { QrcodeStream } from "vue-qrcode-reader";
+export default {
+ name: "codeCompont",
+ // 娉ㄥ唽
+ components: { QrcodeStream },
+ data() {
+ return {
+ isShow: true,
+ camera: "front",
+ result: "", // 鎵爜缁撴灉淇℃伅
+ error: "" // 閿欒淇℃伅
+ };
+ },
+ created() { },
+ methods: {
+ openCamera(){
+ this.camera="front"
+ },
+ //鍥炶皟鎵弿缁撴灉
+ onDecode(result) {
+ console.log(result);
+ if (result !== "") {
+ this.$emit("onDecode", result);
+ alert(result)
+ }
+ },
+ // 鐩告満鍙嶈浆
+ switchCamera() {
+ switch (this.camera) {
+ //鍓嶇疆
+ case 'front':
+ //杞�
+ this.camera = 'rear'
+ break
+ //鍙嶄箣
+ case 'rear':
+ this.camera = 'front'
+ break
+ default:
+ this.$toast('閿欒')
+ }
+ },
+ // 鍏抽棴鐩告満
+ turnCameraOff() {
+ this.camera = 'off'
+ },
+ cancelCode() {
+ this.turnCameraOff()
+ this.$emit("cancelCodeDialog")
+ },
+ // 妫�鏌ユ槸鍚﹁皟鐢ㄦ憚鍍忓ご
+ async onInit(promise) {
+ try {
+ const { capabilities } = await promise;
+ console.log(
+ "馃殌 ~ file: cameracomponent.vue:47 ~ onInit ~ capabilities",
+ capabilities
+ );
+ } catch (error) {
+ // console.log()
+ this.$toast(error.name);
+ if (error.name === "NotAllowedError") {
+ this.error = "ERROR: 鎮ㄩ渶瑕佹巿浜堢浉鏈鸿闂潈闄�";
+ } else if (error.name === "NotFoundError") {
+ this.error = "ERROR: 杩欎釜璁惧涓婃病鏈夋憚鍍忓ご";
+ } else if (error.name === "NotSupportedError") {
+ this.error = "ERROR: 鎵�闇�鐨勫畨鍏ㄤ笂涓嬫枃(HTTPS銆佹湰鍦颁富鏈�)";
+ } else if (error.name === "NotReadableError") {
+ this.error = "ERROR: 鐩告満琚崰鐢�";
+ } else if (error.name === "OverconstrainedError") {
+ this.error = "ERROR: 瀹夎鎽勫儚澶翠笉鍚堥��";
+ } else if (error.name === "StreamApiNotSupportedError") {
+ this.error = "ERROR: 姝ゆ祻瑙堝櫒涓嶆敮鎸佹祦API";
+ } else if (error.name === "InsecureContextError") {
+ this.error =
+ "ERROR: 浠呭厑璁稿湪瀹夊叏涓婁笅鏂囦腑璁块棶鎽勫儚鏈恒�備娇鐢℉TTPS鎴栨湰鍦颁富鏈猴紝鑰屼笉鏄疕TTP銆�";
+ } else {
+ this.error = "ERROR:鎽勫儚鏈洪敊璇�";
+ }
+
+ this.$emit("err", this.error);
+ }
+ }
+ },
+ watch: {
+ "result": {
+ handler(newVal) {
+ console.log('鎵弿鍊�' + newVal);
+ },
+ deep: true
+ }
+ }
+};
+</script>
+<style scoped>
+.error {
+ font-weight: bold;
+ color: red;
+}
+</style>
+<style scoped>
+.scan {
+ width: 100%;
+ height: 100%;
+ border-color: #585858;
+ position: fixed;
+ top: 0;
+ left: 0;
+}
+
+.qrcode-stream-camera {
+ width: 100%;
+ height: 100%;
+ display: block;
+ -o-object-fit: cover;
+ object-fit: cover;
+ position: absolute;
+ top: 0%;
+ left: 0%;
+}
+
+.qr-scanner {
+ background-image: linear-gradient(0deg,
+ transparent 24%,
+ rgba(32, 255, 77, 0.1) 25%,
+ rgba(32, 255, 77, 0.1) 26%,
+ transparent 27%,
+ transparent 74%,
+ rgba(32, 255, 77, 0.1) 75%,
+ rgba(32, 255, 77, 0.1) 76%,
+ transparent 77%,
+ transparent),
+ linear-gradient(90deg,
+ transparent 24%,
+ rgba(32, 255, 77, 0.1) 25%,
+ rgba(32, 255, 77, 0.1) 26%,
+ transparent 27%,
+ transparent 74%,
+ rgba(32, 255, 77, 0.1) 75%,
+ rgba(32, 255, 77, 0.1) 76%,
+ transparent 77%,
+ transparent);
+ background-size: 3rem 3rem;
+ background-position: -1rem -1rem;
+ width: 100%;
+ /* height: 100%; */
+ height: 100vh;
+ position: relative;
+ /* background-color: #1110;*/
+
+ /* background-color: #111; */
+}
+
+.qr-scanner .box {
+ width: 213px;
+ height: 213px;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ overflow: hidden;
+ border: 0.1rem solid rgba(0, 255, 51, 0.2);
+ /* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */
+}
+
+.qr-scanner .line {
+ height: calc(100% - 2px);
+ width: 100%;
+ /* background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%); */
+ border-bottom: 3px solid #00ff33;
+ transform: translateY(-100%);
+ animation: radar-beam 2s infinite alternate;
+ animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
+ animation-delay: 1.4s;
+}
+
+.qr-scanner .box:after,
+.qr-scanner .box:before,
+.qr-scanner .angle:after,
+.qr-scanner .angle:before {
+ content: "";
+ display: block;
+ position: absolute;
+ width: 3vw;
+ height: 3vw;
+ border: 0.2rem solid transparent;
+}
+
+.qr-scanner .box:after,
+.qr-scanner .box:before {
+ top: 0;
+ border-top-color: #00ff33;
+}
+
+.qr-scanner .angle:after,
+.qr-scanner .angle:before {
+ bottom: 0;
+ border-bottom-color: #00ff33;
+}
+
+.qr-scanner .box:before,
+.qr-scanner .angle:before {
+ left: 0;
+ border-left-color: #00ff33;
+}
+
+.qr-scanner .box:after,
+.qr-scanner .angle:after {
+ right: 0;
+ border-right-color: #00ff33;
+}
+
+@keyframes radar-beam {
+ 0% {
+ transform: translateY(-100%);
+ }
+
+ 100% {
+ transform: translateY(0);
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/quality/rawMaterial/QrcodeReader.vue b/src/views/quality/rawMaterial/QrcodeReader.vue
deleted file mode 100644
index ddf5450..0000000
--- a/src/views/quality/rawMaterial/QrcodeReader.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
- <div class="qrcode">
- <div class="code">
- <!-- decode鏄壂鎻忕粨鏋滅殑鍑芥暟锛宼orch鐢ㄤ簬鏄惁闇�瑕佹墦寮�鎵嬬數绛掞紝init鐢ㄤ簬妫�鏌ヨ璁惧鏄惁鑳藉璋冪敤鎽勫儚澶寸殑鏉冮檺锛宑amera鍙敤浜庢墦寮�鍓嶉潰鎴栬�呭悗闈㈡憚鍍忓ご -->
- <qrcode-drop-zone @decode="onDecode">
- <qrcode-stream @decode="onDecode" :torch="torchActive" @init="onInit" :camera="camera" />
- </qrcode-drop-zone>
- <div class="code-button">
- <button @click="switchCamera">鐩告満鍙嶈浆</button>
- <button @click="ClickFlash">鎵撳紑鎵嬬數绛�</button>
- <button @click="turnCameraOff">鍏抽棴鐩告満</button>
- </div>
- </div>
- </div>
- </template>
-
- <script>
- // 寮曠敤vue-qrcode-reader鎻掍欢
- import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'vue-qrcode-reader'
-
- export default {
- name: 'Approve',
- props: {
- camera: {
- type: String,
- default: 'rear',
- },
- torchActive: {
- type: Boolean,
- default: false,
- },
- qrcode: {
- type: Boolean,
- default: false,
- },
- noStreamApiSupport: {
- type: Boolean,
- default: false,
- },
- },
- data() {
- return {}
- },
- created() {
- },
-
- components: {
- // 娉ㄥ唽缁勪欢
- QrcodeStream,
- QrcodeDropZone,
- QrcodeCapture,
- },
- methods: {
- // 鎵爜缁撴灉鍥炶皟
- onDecode(result) {
- this.$emit('onDecode', result)
- },
- // 鐩告満鍙嶈浆
- switchCamera() {
- this.$emit('switchCamera')
- },
- // 鍏抽棴鐩告満锛燂紵锛燂紵锛燂紵
- turnCameraOff() {
- this.$emit('turnCameraOff')
- },
- // 鎵撳紑鎵嬬數绛�
- ClickFlash() {
- this.$emit('ClickFlash')
- },
- // 妫�鏌ユ槸鍚﹁皟鐢ㄦ憚鍍忓ご
- onInit(promise) {
- this.$emit('onInit', promise)
- },
- },
- }
- </script>
\ No newline at end of file
diff --git a/src/views/quality/rawMaterial/rawMaterial-form.vue b/src/views/quality/rawMaterial/rawMaterial-form.vue
index 1d38bdc..ed15c3b 100644
--- a/src/views/quality/rawMaterial/rawMaterial-form.vue
+++ b/src/views/quality/rawMaterial/rawMaterial-form.vue
@@ -29,16 +29,16 @@
<el-col :span="6">
<el-form-item label="闆朵欢鍙�" prop="code">
<el-input v-model="dataForm.code" :disabled="resultVal!=null && dataForm.id!=null">
- <el-button
+ <!-- <el-button
slot="append"
icon="el-icon-search"
:disabled="resultVal!=null && dataForm.id!=null"
- @click="queryCode()"></el-button>
- <!-- <el-button
+ @click="queryCode()"></el-button> -->
+ <el-button
slot="append"
icon="el-icon-full-screen"
:disabled="resultVal!=null && dataForm.id!=null"
- @click="Turnonthecamera"></el-button> -->
+ @click="Turnonthecamera"></el-button>
</el-input>
</el-form-item>
</el-col>
@@ -265,7 +265,18 @@
<el-button type="primary" @click="submitSave()">纭� 瀹�</el-button>
</span>
</el-dialog>
- <!-- <qrcode :qrcode="qrcode" v-show="qrcode" :camera="camera" /> -->
+ <el-dialog
+ title="鎵弿"
+ :visible.sync="qrcode"
+ width="60%">
+ <div style="height: 100vh;width: 100%;">
+ <qr-code-app ref="codeCompont" @cancelCodeDialog="cancelCodeDialog"></qr-code-app>
+ </div>
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="qrcode = false">鍙� 娑�</el-button>
+ <el-button type="primary" @click="qrcode = false">纭� 瀹�</el-button>
+ </span>
+</el-dialog>
</div>
</template>
@@ -278,19 +289,16 @@
updateRawInspectsById,
updateDeviceById, } from '@/api/quality/rawMaterial'
import rawMaterialPartDialog from '@/views/common/rawMaterial-part'
- // import qrcode from './QrcodeReader.vue'
-export default {
+ import qrCodeApp from '@/views/common/qrCodeApp'
+ export default {
+ components:{
+ rawMaterialPartDialog,
+ qrCodeApp
+ },
computed:{},
- components:{
- rawMaterialPartDialog,
- // qrcode
- // qrcode: () => import('./QrcodeReader.vue'),
- },
data(){
return{
qrcode: false,
- torchActive: false,
- camera: 'off',
userdata:[],
currentRow:[],
userlist:[],
@@ -363,10 +371,15 @@
},
},
methods:{
+ cancelCodeDialog(){
+ this.qrcode = false
+ },
// 鎵撳紑鐩告満
Turnonthecamera() {
- this.qrcode = true
- this.camera = 'rear'
+ console.log("鎵ц");
+ this.qrcode = true
+ this.$refs.codeCompont.openCamera()
+ // this.camera = 'rear'
},
// 鎵爜缁撴灉鍥炶皟
// onDecode(result) {
--
Gitblit v1.9.3