From c4315986bc6ff814b0d8975699d9e89ab75961a2 Mon Sep 17 00:00:00 2001
From: chenyc <501753378@qq.com>
Date: 星期五, 13 十月 2023 10:19:35 +0800
Subject: [PATCH] 更新体重秤通讯
---
src/views/login/index.vue | 273 ++++++++++++++---------------------------------------
1 files changed, 74 insertions(+), 199 deletions(-)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index f4065ca..025c168 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,200 +1,75 @@
-<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>
-</template>
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import {base64toFile} from '@/samples/faceApi'
+import { formatDate } from "@/utils/formatTime";
+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),
- };
- },
-
-};
-</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>
+const msg = ref<string>("没识别到人脸...");
+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:'';
+// 实例人脸检查器
+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');
+ // 转文件
+ // 识别框显示才能到传阿里云识别
+ if(dialogVisible.value){
+ base64toFile(imgSrc)
+ }
+ setTimeout(() => {
+ console.log('监测到人脸后3s')
+ trackerTask.run();
+ }, 3000);
+ // @ts-ignore
+ if (typeof window.stream === "object") {
+ myVideo.srcObject = null;
+ // @ts-ignore
+ window.stream.getTracks().forEach((track) => track.stop());
+ }
+ }
+});
+onMounted(() => {
+ // 触发人脸检查器
+ console.log('人脸识别初始化')
+ const isUseFaceRecogService = confingInfoStore().confingInfo.isUseFaceRecogService
+ console.log('人脸识别',isUseFaceRecogService)
+ setInterval(function () {
+ date.value= formatDate(new Date(),'YYYY-mm-dd HH:MM')
+ }, 1000)
+ if (isUseFaceRecogService) {
+ console.log('开启人脸识别初始化')
+ setTimeout(()=>{
+ trackerTask = tracking.track("#myVideo", myTracker, { camera: true });
+ },2000)
+
+ }else{
+ console.log('关闭人脸识别')
+
+ }
+
+
+});
+</script>
\ No newline at end of file
--
Gitblit v1.8.0