From 1ca6a7156163dc9d489a7b0bbff77f1b84933178 Mon Sep 17 00:00:00 2001
From: chenyc <501753378@qq.com>
Date: 星期六, 17 六月 2023 14:45:36 +0800
Subject: [PATCH] 更新页面展示
---
src/views/login/index.vue | 88 ++++----------------------------------------
1 files changed, 8 insertions(+), 80 deletions(-)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 8be8141..025c168 100644
--- a/src/views/login/index.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.8.0