更新页面展示

chenyc

2023-06-17 1ca6a7156163dc9d489a7b0bbff77f1b84933178

 src/views/login/index.vue

@@ -1,41 +1,15 @@
<template>
  <div class="wrapp">
    <div class="inpu">
      <el-input v-model="inputCode" ref="inputRef" id="inputCode" class="inputCode" @change="inputChabge"
        placeholder="请输入患者卡号或扫描条码" />
    </div>
    <div
        class="status"
        :style="{ color: msg === '检测到人脸' ? 'green' : 'red' }">
      {{ msg }}
    </div>
    <div class="rWrapp">
      <video id="myVideo" preload="preload" autoplay loop muted />
      <canvas ref="myCanvas" id="myCanvas" class="myCanvas" width="200" height="200" ></canvas>
    </div>
    <div v-if="imgSrc" class="img_bg_camera">
      <p>效果预览</p>
      <img :src="imgSrc"  class="tx_img" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import {faceShibie,base64toFile} from '@/samples/faceApi'
import { sendPationCodeApi } from '../../samples/httpApi'
import { computed, onMounted, ref } from "vue";
import {base64toFile} from '@/samples/faceApi'
import { formatDate } from "@/utils/formatTime";
import { confingInfoStore } from "@/stores/StoresConfing";

const msg = ref<string>("没识别到人脸...");
const props = defineProps({
  dialogVisible:{
    type:Boolean,
    default:false
  }
})
const dialogVisible=ref(true)
const date=ref('')
let trackerTask: any = null;
const inputCode=ref('')
const inputRef = ref()

// 标识用的画布
const myCanvas = ref<HTMLCanvasElement | null>(null);
let imgSrc:'';
@@ -44,7 +18,6 @@
myTracker.setInitialScale(4);
myTracker.setStepSize(2);
myTracker.setEdgesDensity(0.1);

// 监听人脸检查器
myTracker.on("track", (event: tracking.TrackEvent) => {
  const context = myCanvas.value?.getContext("2d") as CanvasRenderingContext2D;
@@ -63,7 +36,7 @@
    imgSrc = myCanvas?.toDataURL('image/png');
    // 转文件
    // 识别框显示才能到传阿里云识别
    if(props.dialogVisible){
    if(dialogVisible.value){
      base64toFile(imgSrc)
    }
    setTimeout(() => {
@@ -78,19 +51,13 @@
    }
  }
});
const inputChabge = () => {
  sendPationCodeApi(inputCode.value)
  setTimeout(function () {
    inputCode.value = ''
  }, 1000)
}
onMounted(() => {
  // 触发人脸检查器
  console.log('人脸识别初始化')
  const  isUseFaceRecogService = confingInfoStore().confingInfo.isUseFaceRecogService
  console.log('人脸识别',isUseFaceRecogService)
  setInterval(function () {
    inputRef.value.focus();
    date.value= formatDate(new Date(),'YYYY-mm-dd HH:MM')
  }, 1000)
  if (isUseFaceRecogService) {
    console.log('开启人脸识别初始化')
@@ -105,43 +72,4 @@
 
 
});
</script>
<style lang="less" scoped>
.wrapp {
  height: 100%;
  background-size: 100% 100%;
  padding-top: 10px;
  .rWrapp {
    width: 500px;
    height: 500px;
    margin: auto;
    // margin-top: 30px;
    position: relative;
    .myCanvas {
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 50%;
      width: 100%;
      height: 100%;
    }
    #myVideo {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
    }
  }
  .status {
    //margin-top: 100px;
    text-align: center;
  }
  .img_bg_camera{
    position: absolute;
    top: -500px;
    
    z-index: -999;
  }
}
</style>

</script>