添加刷脸识别

chenyincheng

2022-12-28 995f645c1f9d7c9bdc7462806c2506820397cf65

添加刷脸识别

 package.json

@@ -18,8 +18,10 @@
    "@types/stompjs": "^2.3.5",
    "@vitejs/plugin-vue": "^2.3.3",
    "electron": "^19.0.3",
    "less": "4.1.2",
        "less-loader": "10.2.0",
    "electron-builder": "^23.0.3",
    "sass": "^1.53.0",
    "sass": "^1.57.1",
    "stylelint": "^14.9.1",
    "stylelint-scss": "^4.2.0",
    "typescript": "^4.7.3",
@@ -49,6 +51,8 @@
    "koa": "^2.13.4",
    "koa-body": "^5.0.0",
    "koa-router": "^12.0.0",
    "less": "^4.1.3",
    "node-sass": "^8.0.0",
    "pinia": "^2.0.14",
    "sound-play": "^1.1.0",
    "stompjs": "^2.3.3",

 src/router/index.ts

@@ -4,8 +4,8 @@
import { Session } from '@/utils/storage'

const routes: Array<RouteRecordRaw> = [
    // { path: '/', name: 'Home', component: () => import('@/views/home/index.vue')},
    { path: '/', name: 'login', component: () => import('@/views/login/index.vue')},
    { path: '/', name: 'Home', component: () => import('@/views/home/index.vue')},
    { path: '/login', name: 'login', component: () => import('@/views/login/index.vue')},
]

const router = createRouter({

 src/samples/node-api.ts

@@ -2,8 +2,10 @@
import { cwd } from 'process'
import { ipcRenderer } from 'electron'
import {creatorClient} from './sockteStomp'
import {connect} from './socketClient'
import {sockteStore} from '@/stores/sockteInfo'
import { patientInfoStore } from '@/stores/patient'
import { confingInfoStore } from '@/stores/StoresConfing'
import os from 'os'
// import internetAvailable  from "internet-available"
var internetAvailable = require("internet-available")
@@ -44,6 +46,9 @@
      clientCode=args[0].clientCode
      // 建立sockte 通讯
      deviceList=args[0].deviceList
      // 存放conging到仓库
      confingInfoStore().setconfingInfo(args[0])
      connect()
      creatorClient(args[0])
  
    }

 src/samples/socketClient.ts

New file
@@ -0,0 +1,51 @@

import { confingInfoStore } from '@/stores/StoresConfing'
const net =require('net');


const client = new net.Socket()
var intervalConnect = false;

const connect=()=> {
    const cong=confingInfoStore().confingInfo
    console.log('获取congf',cong.faceRecogServicePort,cong.faceRecogServiceUrl)
    client.connect({
        port:cong.faceRecogServicePort,
        host:cong.faceRecogServiceUrl
    })
}

function launchIntervalConnect() {
    if(false != intervalConnect) return
    intervalConnect = setInterval(connect, 5000)
}

function clearIntervalConnect() {
    if(false == intervalConnect) return
    clearInterval(intervalConnect)
    intervalConnect = false
}
// 发送数据到服务端
const  sundSocket=(mas:string)=>{
    console.log('发送图片到服务端')
    client.write(mas)
}
client.on('connect', () => {
    clearIntervalConnect()
    console.log('socket链接成功', 'TCP')
    client.write('CLIENT connected');
})

client.on('data',(data:any)=>{
    console.log('收到socket的数据')
    console.log(`${data}`)
})
client.on('error', (err:any) => {
    console.log(err.code, 'TCP ERROR')
    launchIntervalConnect()
})
client.on('close', launchIntervalConnect)
client.on('end', launchIntervalConnect)


export {connect,sundSocket}

 src/samples/sockteStomp.ts

@@ -3,7 +3,7 @@
import { ipcRenderer } from 'electron'
let stompClient: Stomp.Client | null=null

import { userInfoStore } from '@/stores/userInfo'
import { confingInfoStore } from '@/stores/StoresConfing'
import { patientInfoStore } from '@/stores/patient'
import {sockteStore} from '@/stores/sockteInfo'
import { result } from 'lodash'

 src/stores/StoresConfing.ts

New file
@@ -0,0 +1,13 @@
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const confingInfoStore =defineStore('confingInfo',()=>{
    const confingInfo=ref({})
    /**
     * 更新用户选择角色
     * @param roleText 角色名称
     */
    function setconfingInfo(info:any){
        confingInfo.value=info
    }
    return {confingInfo,setconfingInfo}
})

 src/stores/sockteInfo.ts

@@ -48,14 +48,14 @@
    }
    /**
     * 更新体重秤结果
     * @param info 体重结果
     * @param infoObj 体重结果
     */
    function setweightSockte(info:weightInfo){
        console.log(info,'入参')
        weightSockte.value.deviceName=info.deviceName
        weightSockte.value.result=info.result
        weightSockte.value.resultTime=info.resultTime
        weightSockte.value.state=info.state
    function setweightSockte(infoObj:info){
        console.log(infoObj,'入参')
        weightSockte.value.deviceName=infoObj.deviceName
        weightSockte.value.result=infoObj.result
        weightSockte.value.resultTime=infoObj.resultTime
        weightSockte.value.state=infoObj.state
        console.log('体重秤更新')
    }
     /**

 src/utils/meuns.ts

File was deleted

 src/views/home/index.vue

@@ -18,10 +18,15 @@
import step2 from '@/assets/mp3/step2.mp3'
import step1 from '@/assets/mp3/step1.mp3'
import step7 from '@/assets/mp3/chongfuchengzhong.mp3'
import login from '@/views/login/index.vue'
import { confingInfoStore } from '@/stores/StoresConfing'

export default {
    name: 'hoem',
    components: { login },
    setup() {
        let timer: any = 0
        const loginRef = ref();
        const user = userInfoStore()
        const sockte = sockteStore()
        const inputRef = ref()
@@ -33,7 +38,7 @@
        const AudioRef5=ref()
        const AudioRef7=ref()
        let patientCodeLs=''
        
        const isUseFaceRecogService=ref(false)
        const isLink = computed(() => {
            return !sockte.isLink
        })
@@ -135,6 +140,7 @@
              console.log('患者信息变化',patientInfo.value)
              patientCodeLs=''
              console.log(patientCodeLs,'患者codec初始化')
             
                if (patientInfo.value.id !== 0) {
                    AudioRef.value.play();
                    sockteStore().setweightSockte({
@@ -154,12 +160,20 @@
                    settime()

                }
              // 没有找到患者
                else if(patientInfo.value.name===''){
                    AudioRef4.value.play();
                  if(isUseFaceRecogService.value){
                    state.dialogVisible=true
                  }
                    return
                  }
                // 没有排班
                else if(patientInfo.value.isScheduled===0){
                      AudioRef5.value.play();
                    if(isUseFaceRecogService.value){
                      state.dialogVisible=true
                    }
                      return
                }
            }
@@ -239,6 +253,7 @@
        watch(
            () => dkqInfo.value.resultTime,
            () => {
              state.dialogVisible=false
              console.log(dkqInfo.value,'读卡器')
                if (dkqInfo.value.result !== ''&&dkqInfo.value.result !== undefined) {
                  const code=dkqInfo.value.result.split(",")[0]
@@ -267,6 +282,12 @@
        }
        onMounted(() => {
            console.log('页面初始化', os.hostname())
            console.log('页面初始化读取配置文件',confingInfoStore().confingInfo)
            // 是否开启脸识别
            isUseFaceRecogService.value=confingInfoStore().confingInfo.isUseFaceRecogService
            if(isUseFaceRecogService.value){
              state.dialogVisible=true
            }
            state.haodu=(document.documentElement.clientHeight-180)/2+'px'
            state.clockNum = patientInfoStore().viewNumber
            setInterval(function () {
@@ -276,13 +297,23 @@
            
        })
        return {
            ...toRefs(state), guyanbi,isLink, netLink, weightInfo, patientInfo, xyjInfo, inputRef, AudioRef0, AudioRef, AudioRef4,AudioRef5, AudioRef2, AudioRef3,AudioRef7, inputChabge
            ...toRefs(state), guyanbi, loginRef,isLink, netLink, weightInfo, patientInfo, xyjInfo, inputRef, AudioRef0, AudioRef, AudioRef4,AudioRef5, AudioRef2, AudioRef3,AudioRef7, inputChabge
        }
    }
}
</script>
<template>
    <div >
    <div class="pagehome">
        <el-dialog v-model="dialogVisible" width="80%" center :show-close="false">
          <template>
            <div class="my-header">
              <h4>人脸识别中。。。</h4>
            </div>
          </template>
          <login ref="loginRef" />
        </el-dialog>
      </div>
         <!-- 提醒刷卡 -->
        <audio :src="step1" ref="AudioRef0" id="eventAudio1"></audio>
        <!-- 患者信息读取成功 -->
@@ -303,6 +334,9 @@
        <el-dialog title="提示" v-model="isLink" width="30%">
            <span>sockte连接失败正在重连。。。。。。</span>
        </el-dialog>
        <!-- <div>
          <el-button type="primary" @click="dialogVisible=true"  size="small">测试</el-button>
        </div> -->
        <el-row class="header">
          <el-col :span="8">
              <img 
@@ -492,7 +526,7 @@
    </div>

</template>
<style  scoped>
<style lang="less"  scoped>
body{
  background: #F3F6FE;
  padding: 0;
@@ -603,4 +637,5 @@




</style>

 src/views/login/index.vue

@@ -1,27 +1,28 @@
<template>
    <teleport to="body">
      <div class="mask">
        <el-header class="go">
          <div>
            请把头移动到摄像头能拍到的位置，不要动 ！
      <div class="go">
        <div class="titleH" style="color: white;">
          <h3>请把头移动到摄像头能拍到的位置，不要动 ！</h3>
          </div>
          <div class="box">
            <video id="videoCamera" class="canvas" :width="videoWidth" :height="videoHeight" autoPlay></video>
            <canvas id="canvasCamera" class="canvas" :width="300" :height="300"></canvas>
          <video id="videoCamera" class="canvas1" :width="videoWidth" :height="videoHeight" autoPlay></video>
          <br/>
          <canvas id="canvasCamera" class="canvas2"  :width="300" :height="300"></canvas>
          </div>
          <div class="footer">
        <!-- <div class="footer">
            <el-button @click="getCompetence" icon="el-icon-video-camera"> 打开摄像头 </el-button>
            <el-button @click="drawImage" icon="el-icon-camera"> 拍照 </el-button>
            <el-button @click="stopNavigator" icon="el-icon-switch-button"> 关闭摄像头 </el-button>
            <el-button @click="resetCanvas" icon="el-icon-refresh"> 重置 </el-button>
        </div> -->
          </div>
        </el-header>
      </div>
    </teleport>
  </template>
  <script lang="ts" setup>
  import { ref, reactive, inject, toRefs, nextTick } from "vue";
  import { ref, reactive, onMounted, toRefs, nextTick } from "vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import {sundSocket} from "@/samples/socketClient"
  import { confingInfoStore } from '@/stores/StoresConfing'
  const loading = ref(false);
  const os = ref(false); //控制摄像头开关
  let thisVideo = ref("");
@@ -89,6 +90,8 @@
            thisVideo.src = window.URL.createObjectURL(stream);
          }
          thisVideo.onloadedmetadata = function (e) {
            console.log('摄像头打开了')
            SendTime()
            thisVideo.play();
          };
        })
@@ -100,14 +103,15 @@
   
  //绘制图片
  const drawImage = () => {
    getCompetence();
    thisCancas = document.getElementById("canvasCamera");
    thisContext = thisCancas.getContext("2d");
    thisVideo = document.getElementById("videoCamera");
     thisContext.drawImage(thisVideo, 0, 0, 300, 300);
    //获取图片地址
    queryParams.imgSrc = thisCancas.toDataURL('image/png');
    console.log(queryParams.imgSrc);
    // console.log(queryParams.imgSrc);
    const str=`<STX>{"photo":"${queryParams.imgSrc}"}<ETX>`
    sundSocket(str)
  };
   
  //清空画布
@@ -123,6 +127,9 @@
    queryParams.imgSrc = "";
    clearCanvas("canvasCamera");
  };
  const SendTime=()=>{
    setInterval(drawImage,confingInfoStore().confingInfo.faceRecogDetectInterval*1000)
  }
   
  //关闭摄像头
  const stopNavigator = () => {
@@ -134,52 +141,49 @@
      ElMessage.error("没有开启摄像头权限或浏览器版本不兼容");
    }
  };
  onMounted(()=>{
    console.log('页面初始化读取配置文件',confingInfoStore().confingInfo)
    getCompetence()
  })
  defineExpose({
    stopNavigator,
  });
  </script>
  <style scoped>
  .footer {
    width: 959px;
    height: 50px;
    background-color: white;
    justify-content: space-between;
    float: left;
    margin-top: 217px;
    z-index: 1999;
  }
   
  
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }
  .closeBtn {
    float: right;
  }
  .box {
    width: 959px;
    height: 700px;
    margin-top: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    /* float: left !important; */
    padding-top: 100px;
    text-align: center;
  }
  .go {
    width: 1000px;
    height: 800px;
    background-color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    background-color:#409EFF;
    text-align: center;
    display: inline-block;
  }
  .box {
    width: 100%;
    text-align: center;

    background-color: #d9ecff;
  }
  .canvas1{
    margin-top: 100px;
    border: 2px solid #409EFF;
    border-radius: 10%;

  }
  .canvas2{
    visibility:hidden;
  }
 
   
  </style>

 test.js

New file
@@ -0,0 +1,39 @@
/* Client connection */
/* --------------------------------------------------------------------------------- */
const net =require('net');

const client = new net.Socket()
var intervalConnect = false;

function connect() {
    client.connect({
        port: 9010,
        host: "company.leon056.com"
    })
}

function launchIntervalConnect() {
    if(false != intervalConnect) return
    intervalConnect = setInterval(connect, 5000)
}

function clearIntervalConnect() {
    if(false == intervalConnect) return
    clearInterval(intervalConnect)
    intervalConnect = false
}

client.on('connect', () => {
    clearIntervalConnect()
    console.log('connected to server', 'TCP')
    client.write('CLIENT connected');
})

client.on('error', (err) => {
    console.log(err.code, 'TCP ERROR')
    launchIntervalConnect()
})
client.on('close', launchIntervalConnect)
client.on('end', launchIntervalConnect)

connect()

 vite.config.ts

@@ -47,18 +47,6 @@
    // 是否开启 https
    https: false,
  },
  proxy: {
    '/api1': {
      // 后台地址
      target: 'http://127.0.0.1:3131/',
      changeOrigin: true,
    },
    '/api2': {
      // 后台地址
      target: 'http://127.0.0.1:3132/',
      changeOrigin: true,
    }
  },
  resolve:{
    alias: {
        '@': pathResolve('./src'),  // 设置 `@` 指向 `src` 目录