Merge branch 'master' of http://114.132.189.42:9002/r/mes-ocea-before

zouyu

2023-12-15 2e403b0ffa43b5411161d86b9c041acfb02831a1

Merge branch 'master' of http://114.132.189.42:9002/r/mes-ocea-before

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

 src/views/common/qrCodeApp.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,244 @@
<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>
// å¼•å…¥
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.result=result
                this.$emit("ok",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: ä»…允许在安全上下文中访问摄像机。使用HTTPS或本地主机，而不是HTTP。";
                } 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>

 src/views/quality/rawMaterial/QrcodeReader.vue

ÎļþÒÑɾ³ý

 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>
@@ -266,7 +266,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" @ok="getResultInfo" @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>

@@ -279,19 +290,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:[],
@@ -364,10 +372,19 @@
      },
    },
    methods:{
      getResultInfo(data){
        // console.log("返回");
        console.log("扫描出的二维码值",data);
      },
      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) {