日常开发

src/components/OnlineFaceWindow/index.vue

@@ -3,10 +3,8 @@
     <Transition :enter-active-class="proxy?.animate.mask.enter">
       <div class="mask" v-if="faceState"></div>
     </Transition>
-    <Transition :enter-active-class="proxy?.animate.rankingWindow.enter"
-      :leave-active-class="proxy?.animate.rankingWindow.leave">
+    <Transition :enter-active-class="proxy?.animate.rankingWindow.enter" :leave-active-class="proxy?.animate.rankingWindow.leave">
       <div class="confirmDiaBg" v-if="faceState">
-        <div>
           <div class="confirmDiaWindow">
             <div class="confirmDiaWindow-con">
               <div class="pic" :class="{ 'pic2': faceCheckStu.id }" v-if="faceCheckStu.id"> <img
@@ -23,13 +21,13 @@
             </div>
           </div>
           <div @click="getCloseFace" class="close"></div>
-        </div>
       </div>
     </Transition>
   </div>
 
 </template>
 <script setup lang="ts">
+import { initSpeech, speckText, playMusic, controlMusic, speckCancel, chineseNumber } from '@/utils/speech';
 import { useWebSocket } from '@/utils/faceWs';
 const { proxy } = getCurrentInstance() as any;
 const router = useRouter();
@@ -65,6 +63,7 @@ const getInit = async () => {
     return false;
   }
   faceState.value = true;
+  speckText("请举右手看摄像头进行人脸识别");
   if (wsState.value) {
     proxy?.$modal.msgWarning(`操作过快，请稍后重试`);
     setTimeout(() => {
@@ -106,7 +105,7 @@ const getInit = async () => {
         } else {
           msg = `人脸识别模块不可用，code：${e.code}`;
         }
-        //getCloseFace();//直接关闭
+        
         //尝试多次查询人脸识别状态
         if (againNum.value <= 10) {
           againTimer.value = setTimeout(() => {
@@ -114,10 +113,11 @@ const getInit = async () => {
           }, 100)
           againNum.value++;
         } else {
-          msg = `多次失败，请联系管理员`;
+          msg = `多次失败请重试`;
           againNum.value = 0;
           againTimer.value = null;
           clearTimeout(againTimer.value);
+          getCloseFace();//直接关闭
         }
         proxy?.$modal.msgWarning(msg);
       }
@@ -172,6 +172,7 @@ const getCloseFace = () => {
   let handcontroller_id = deviceInfo.value.handcontroller_id;
   terminateFace(handcontroller_id);
   faceState.value = false;
+  speckCancel(); //停止播报
 };
 
 //暴露给父组件用
@@ -191,18 +192,19 @@ defineExpose({
 }
 
 .confirmDiaBg {
-  width: 100%;
-  height: 100vh;
+  width: 37vh;
+  height: calc( 43vh + 3.2rem + 20px );
   position: fixed;
-  left: 0;
-  top: 0;
+  left: 50%;
+  top: 50%;
+  margin-left: calc( 37vh / -2 );
+  margin-top: calc( (43vh + 3.2rem + 20px) / -2 );
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-direction: column;
   z-index: 999;
 
   .confirmDiaWindow {
-    width: 30vh;
+    width: 37vh;
     height: 43vh;
     border-radius: 1.6rem;
     opacity: 1;

src/types/components.d.ts

@@ -8,8 +8,11 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ChooseStudent: typeof import('./../components/ChooseStudent/index.vue')['default']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     FaceWindow: typeof import('./../components/FaceWindow/index.vue')['default']
     Header: typeof import('./../components/Header/index.vue')['default']
     JumpRopeGame: typeof import('./../components/JumpRopeGame/index.vue')['default']