fix:添加自定义组件

src/scui.js

@@ -27,6 +27,7 @@ import scEcharts from './components/scEcharts'
 import scStatusIndicator from './components/scMini/scStatusIndicator'
 import scTrend from './components/scMini/scTrend'
 import scFire from './components/scOpl/scFire'
+import scScanner from './components/scScanner'
 
 import auth from './directives/auth'
 import auths from './directives/auths'
@@ -73,6 +74,7 @@ export default {
 		app.component('scFire', scFire);
 		app.component('scIconSelect', scIconSelect);
 		app.component('scEcharts', scEcharts);
+		app.component('scScanner', scScanner);
 
 		//注册全局指令
 		app.directive('auth', auth)

src/views/wpm_bx/QRCodeScanner.vue

@@ -1,105 +0,0 @@
-
-<template>
-  <div style="position: relative">
-    <h1>扫描二维码</h1>
-    <video ref="videoElement" width="500" autoplay></video>
-    <canvas ref="canvasElement" style="display:none;position: absolute;left: 510px;"></canvas>
-    <div class="result">
-      <el-button @click="scanQRCode">识别二维码</el-button>
-      <h3>扫描结果：</h3>
-      <p>{{ scannedResult }}</p>
-    </div>
-  </div>
-</template>
-
-<script>
-import jsQR from 'jsqr';
-
-export default {
-  data() {
-    return {
-      scannedResult: null, // 存储扫描到的二维码数据
-      videoStream: null, // 视频流对象
-    };
-  },
-  mounted() {
-    this.startScanning();
-  },
-  methods: {
-    // 启动摄像头并开始扫描
-    async startScanning() {
-      if(navigator.mediaDevices&&navigator.mediaDevices.getUserMedia){
-        alert("摄像头可用");
-         // 请求用户的摄像头权限并获取视频流
-         const stream = await navigator.mediaDevices.getUserMedia({
-          video: { facingMode: 'environment' }, // 使用后置摄像头
-        });
-
-        this.videoStream = stream;
-        this.$refs.videoElement.srcObject = stream;
-        alert("准备就绪");
-        setTimeout(() => {
-          this.scanQRCode();
-        },1000)
-      }else{
-        alert("摄像头不可用:浏览器不支持getUserMedia");
-      }
-      // try {
-      //   alert("启动摄像头");
-      //   // 请求用户的摄像头权限并获取视频流
-      //   const stream = await navigator.mediaDevices.getUserMedia({
-      //     video: { facingMode: 'environment' }, // 使用后置摄像头
-      //   });
-
-      //   this.videoStream = stream;
-      //   this.$refs.videoElement.srcObject = stream;
-      //   alert("准备就绪");
-      //   setTimeout(() => {
-      //     this.scanQRCode();
-      //   },1000)
-      // } catch (error) {
-      //   console.error('无法访问摄像头:', error);
-      // }
-    },
-
-    // 从视频流中提取每一帧图像并识别二维码
-    scanQRCode() {
-      alert("解析二维码");
-      let videoElement = this.$refs.videoElement;
-      let canvas = this.$refs.canvasElement;
-      let context = canvas.getContext('2d');
-      let widths = videoElement.videoWidth;
-      let heights = videoElement.videoHeight;
-      canvas.width = videoElement.videoWidth;
-      canvas.height = videoElement.videoHeight;
-      context.drawImage(videoElement, 0, 0, widths, heights);
-      // 获取当前帧的图像数据
-      let imageData = context.getImageData(0, 0, widths,heights);
-      // 使用 jsQR 库识别二维码
-      console.log("imageData", imageData);
-      let qrCode = jsQR(imageData.data, widths,heights);
-      console.log("qrCode", qrCode);
-      if (qrCode) {
-        this.scannedResult = qrCode.data; // 显示扫描到的二维码内容
-      } else {
-        this.scannedResult = null; // 如果未识别到二维码，则清空结果
-      }
-    },
-  },
-  beforeUnmount() {
-    // 在组件销毁时，停止视频流
-    if (this.videoStream) {
-      const tracks = this.videoStream.getTracks();
-      tracks.forEach(track => track.stop());
-    }
-  },
-};
-</script>
-
-<style scoped>
-.result {
-  margin-top: 10px;
-  font-size: 16px;
-  color: green;
-}
-</style>