From c587f3499ca5eebf81374cf77ed1e0694f8c236b Mon Sep 17 00:00:00 2001
From: chenyc <501753378@qq.com>
Date: 星期一, 21 四月 2025 15:13:05 +0800
Subject: [PATCH] gx

---
 src/views/deviceWindoes2.vue |   54 ++++++++++++++++++++++++++-
 package-lock.json            |   12 ++++++
 package.json                 |    1 
 3 files changed, 65 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4f4628d..c983d51 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "echarts": "^5.6.0",
         "element-plus": "^2.9.2",
         "event-source-polyfill": "^1.0.31",
+        "jsqr": "^1.4.0",
         "vue": "^3.5.13",
         "vue-router": "^4.0.13"
       },
@@ -1317,6 +1318,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/jsqr": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/jsqr/-/jsqr-1.4.0.tgz",
+      "integrity": "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A==",
+      "license": "Apache-2.0"
+    },
     "node_modules/less": {
       "version": "4.2.1",
       "resolved": "https://registry.npmmirror.com/less/-/less-4.2.1.tgz",
@@ -2570,6 +2577,11 @@
       "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
       "dev": true
     },
+    "jsqr": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/jsqr/-/jsqr-1.4.0.tgz",
+      "integrity": "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A=="
+    },
     "less": {
       "version": "4.2.1",
       "resolved": "https://registry.npmmirror.com/less/-/less-4.2.1.tgz",
diff --git a/package.json b/package.json
index 6732866..605929f 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "echarts": "^5.6.0",
     "element-plus": "^2.9.2",
     "event-source-polyfill": "^1.0.31",
+    "jsqr": "^1.4.0",
     "vue": "^3.5.13",
     "vue-router": "^4.0.13"
   },
diff --git a/src/views/deviceWindoes2.vue b/src/views/deviceWindoes2.vue
index 8ba1ec3..1ed4985 100644
--- a/src/views/deviceWindoes2.vue
+++ b/src/views/deviceWindoes2.vue
@@ -766,10 +766,15 @@
             </el-form-item>
           </el-space>
         </el-form>
+        <video ref="video" width="300" height="300" autoplay></video>
+        <input type="text" v-model="codeResult" placeholder="扫描结果将会显示在这里">
       </span>
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="centerDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="shaoma">
+            扫码录入
+          </el-button>
           <el-button type="primary" @click="saveSet">
             确认
           </el-button>
@@ -793,6 +798,7 @@
   import cljd from '../img/cljd.png'
   import tizhong from '../img/tizhong.png'
   import {EventSourcePolyfill} from 'event-source-polyfill';
+  import jsQR from 'jsqr';
   import { computed, getCurrentInstance, onBeforeMount, onMounted, ref, watch, watchEffect } from "vue";
   import { Local } from '../utils/storage';
   import * as echarts from "echarts";
@@ -983,8 +989,12 @@
     ],
   });
   // 告警提示
-  const textbaojing = ref("");
-  const iscomfig = ref(false);
+  // 识别窗口
+  const video = ref<HTMLVideoElement | null>(null);
+  // 识别文本
+  const codeResult = ref<string>('');
+  // 识别数据流
+  let stream: MediaStream | null = null;
   const centerDialogVisible = ref(false);
   const background = ref("");
   const txztText = ref("");
@@ -1176,6 +1186,46 @@
       ElMessage.warning('请先输入设备编号')
     }
   }
+  function captureFrame() {
+    if (!video.value) return;
+    
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    if (!context || !video.value) return;
+    
+    canvas.width = video.value.videoWidth;
+    canvas.height = video.value.videoHeight;
+    context.drawImage(video.value, 0, 0, canvas.width, canvas.height);
+    const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+
+    // 解析二维码
+    const code = jsQR(imageData.data, imageData.width, imageData.height);
+    if (code) {
+      codeResult.value = code.data;
+    }
+
+    // 定期捕获帧
+    setTimeout(captureFrame, 500);
+  }
+  const  startCamera=async()=> {
+  if (video.value) {
+    try {
+      stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } });
+      if (video.value) {
+        video.value.srcObject = stream;
+        video.value.play();
+
+        // 开始捕获帧
+        captureFrame();
+      }
+    } catch (e) {
+      console.error("无法访问摄像头", e);
+    }
+  }
+}
+  const shaoma=()=>{
+    startCamera()
+  }
   watch(
     () => deviceData.value.设备变化,
     () => {

--
Gitblit v1.8.0