更新

chenyincheng

2023-04-10 06365e9e66d7b9b51c069698746366b0af3cbc22

 src/views/login/index.vue

@@ -1,200 +1,139 @@
<template>
   <div class="login-container">
      <div class="login-logo">
         <span>岱特智能科技</span>
      </div>
      <div class="login-content" :class="{ 'login-content-mobile': tabsActiveName === 'mobile' }">
         <el-row :gutter="0">
            <el-col :xs="0" :sm="12" :md="12" :lg="12" :xl="12">
               <div class="login-content-image">
                  <div></div>
               </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
               <div class="login-content-main">
                  <div class="login-content-title">
                     <div class="login-content-logo"></div>
                     <div class="login-title">胜透血液透析管理平台</div>
                     <div class="login-welcome">WELCOME欢迎登陆</div>
                  </div>
                  <div>
                     <Account />
                  </div>
               </div>
            </el-col>
         </el-row>
      </div>
      <div class="login-copyright">
         <div class="mb5 login-copyright-company"></div>
         <div class="login-copyright-msg"></div>
      </div>
   </div>
  <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 { confingInfoStore } from "@/stores/StoresConfing";

<script lang="ts">
import { toRefs, reactive, computed } from 'vue';
import Account from '@/views/login/component/account.vue';
export default {
   name: 'loginIndex',
   components: { Account },
   setup() {
      const state = reactive({
         tabsActiveName: 'account',
         isTabPaneShow: true,
         isScan: false,
      });
      return {
         ...toRefs(state),
      };
   },
	
};
const msg = ref<string>("没识别到人脸...");

let trackerTask: any = null;
const inputCode=ref('')
const inputRef = ref()

// 标识用的画布
const myCanvas = ref<HTMLCanvasElement | null>(null);
let imgSrc:'';
// 实例人脸检查器
const myTracker: any = new tracking.ObjectTracker("face");
myTracker.setInitialScale(4);
myTracker.setStepSize(2);
myTracker.setEdgesDensity(0.1);

// 监听人脸检查器
myTracker.on("track", (event: tracking.TrackEvent) => {
  const context = myCanvas.value?.getContext("2d") as CanvasRenderingContext2D;
  if (myCanvas.value) {
    context.clearRect(0, 0, myCanvas.value.width, myCanvas.value.height);
  }
  if (event.data.length === 0) {
    msg.value = "没识别到人脸...";
  } else if(event.data.length === 1) {
    trackerTask.stop();
    msg.value = "检测到人脸";
    const myCanvas = document.getElementById("myCanvas");// 
    const thisContext = myCanvas?.getContext("2d");
    const myVideo = document.querySelector("#myVideo") as HTMLVideoElement;
    thisContext.drawImage(myVideo, 0,0, 250, 200);
    imgSrc = myCanvas?.toDataURL('image/png');
    // 转文件
    base64toFile(imgSrc)
    setTimeout(() => {
      console.log('监测到人脸后1s')
      trackerTask.run();
    }, 3000);
    // @ts-ignore
    if (typeof window.stream === "object") {
      myVideo.srcObject = null;
      // @ts-ignore
      window.stream.getTracks().forEach((track) => track.stop());
    }
  }
});
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();
  }, 1000)
  if (isUseFaceRecogService) {
    console.log('开启人脸识别初始化')
    setTimeout(()=>{
      trackerTask = tracking.track("#myVideo", myTracker, { camera: true });
    },2000)
   
  }else{
    console.log('关闭人脸识别')
    
  }
 
 
});
</script>

<style scoped lang="scss">
.login-container {
   width: 100%;
   height: 100%;
   background: url('@/assets/imgs/login/login-background.jpg') no-repeat;
   background-size: 100% 100%;
   .login-logo {
      position: absolute;
      top: 30px;
      left: 50%;
      height: 50px;
      display: flex;
      align-items: center;
      font-size: 20px;
      color: var(--color-primary);
      letter-spacing: 2px;
      width: 90%;
      transform: translateX(-50%);
   }
   .login-content {
      width: 848px;
      // padding: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) translate3d(0, 0, 0);
      background-color: rgba(255, 255, 255, 0.99);
      // border: 5px solid var(--color-primary-light-8);
      border-radius: 10px;
      transition: height 0.2s linear;
      // height: 480px;
      overflow: hidden;
      z-index: 1;
      .login-content-image {
         padding: 40px 20px;
         width: 100%;
         height: 100%;
         background-color: #F1F7FF
      }
      .login-content-image div {
         width: 100%;
         height: 100%;
         background: url('@/assets/imgs/login/login.jpg') no-repeat;
         background-size: 100% 100%;
      }
      .login-content-main {
         margin: 75px 50px;
         // margin: 0 auto;
         // width: 80%;
         .login-content-title {
            color: #333;
            font-weight: 500;
         font-size: 22px;
            text-align: left;
            // letter-spacing: 4px;
            // margin: 15px 0 30px;
            white-space: nowrap;
            z-index: 5;
            // position: relative;
            // transition: all 0.3s ease;
            .login-content-logo {
               text-align: left;
               width: 40px;
               height: 30px;
               background: url('@/assets/imgs/login/favicon.svg') no-repeat;
               display: inline-block;
               vertical-align: middle;
            }
            .login-title {
               display: inline-block;
               width: 224px;
               height: 30px;
               font-size: 21px;
               font-family: PingFangSC-Medium, PingFang SC;
               font-weight: 500;
               color: #232426;
               line-height: 30px;
               letter-spacing: 1px;
               vertical-align: middle;
            }
            .login-welcome {
               width: 149px;
               height: 20px;
               font-size: 14px;
               font-family: PingFangSC-Medium, PingFang SC;
               font-weight: 500;
               color: #AAAAAA;
               line-height: 20px;
            }
         }
      }
      .login-content-main-sacn {
         // position: absolute;
         // top: 0;
         // right: 0;
         // width: 50px;
         // height: 50px;
         overflow: hidden;
         cursor: pointer;
         transition: all ease 0.3s;
         &-delta {
            position: absolute;
            width: 35px;
            height: 70px;
            z-index: 2;
            top: 2px;
            right: 21px;
            background: var(--el-color-white);
            transform: rotate(-45deg);
         }
         &:hover {
            opacity: 1;
            transition: all ease 0.3s;
            color: var(--color-primary);
         }
         i {
            width: 47px;
            height: 50px;
            display: inline-block;
            font-size: 48px;
            position: absolute;
            right: 2px;
            top: -1px;
         }
      }
   }
   .login-content-mobile {
      height: 418px;
   }
   .login-copyright {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 30px;
      text-align: center;
      color: var(--color-whites);
      font-size: 12px;
      opacity: 0.8;
      .login-copyright-company {
         white-space: nowrap;
      }
      .login-copyright-msg {
         @extend .login-copyright-company;
      }
   }
<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>