gx

chenyc

2025-04-21 c587f3499ca5eebf81374cf77ed1e0694f8c236b

gx

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

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

 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.设备变化,
    () => {