日常开发

src/components/OnlineFaceWindow/index.vue

@@ -3,24 +3,20 @@
     <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 class="confirmDiaWindow">
-            <div class="confirmDiaWindow-con">
-              <div class="pic" :class="{ 'pic2': faceCheckStu.id }" v-if="faceCheckStu.id"> <img
-                  :src="faceCheckStu.pic" /></div>
-              <div class="pic" v-else>
-                <div class="shine">
-                  <img src="@/assets/images/common/shine.png" />
-                </div>
-                <img src="@/assets/images/test/facePicture.png" />
-              </div>
-              <div class="name" :class="{ 'name2': faceCheckStu.id }">
-                {{ faceCheckStu.id ? faceCheckStu.name : '请举右手看摄像头进行人脸识别' }}
-              </div>
+        <div class="confirmDiaWindow">
+          <div class="confirmDiaWindow-con">
+            <div class="name">
+              请举右手看摄像头进行人脸识别
+            </div>
+            <div class="pic">
+              <img src="@/assets/images/common/onlineFace.png" />
             </div>
           </div>
-          <div @click="getCloseFace" class="close"></div>
+        </div>
+        <div @click="getCloseFace" class="close"></div>
       </div>
     </Transition>
   </div>
@@ -99,13 +95,6 @@ const getInit = async () => {
         clearTimeout(againTimer.value);
         console.log("查看人脸识别状态")
       } else {
-        let msg = "";
-        if (e.code == 102402) {
-          msg = `人脸识别模块被占用，即将重新启动`;
-        } else {
-          msg = `人脸识别模块不可用，code：${e.code}`;
-        }
-        
         //尝试多次查询人脸识别状态
         if (againNum.value <= 10) {
           againTimer.value = setTimeout(() => {
@@ -113,13 +102,19 @@ const getInit = async () => {
           }, 100)
           againNum.value++;
         } else {
-          msg = `多次失败请重试`;
+          let msg = "";
+          if (e.code == 102402) {
+            msg = `多次连接失败请重试，人脸识别模块被占用`;
+          } else {
+            msg = `多次连接失败请重试，人脸识别模块不可用，code：${e.code}`;
+          }
+          proxy?.$modal.msgWarning(msg);
           againNum.value = 0;
           againTimer.value = null;
           clearTimeout(againTimer.value);
-          getCloseFace();//直接关闭
+          getCloseFace();//直接关闭 
         }
-        proxy?.$modal.msgWarning(msg);
+
       }
     }
     if (e?.cmd == 'get_facecontroller_state') {
@@ -192,78 +187,43 @@ defineExpose({
 }
 
 .confirmDiaBg {
-  width: 37vh;
-  height: calc( 43vh + 3.2rem + 20px );
+  width: 90vh;
   position: fixed;
   left: 50%;
   top: 50%;
-  margin-left: calc( 37vh / -2 );
-  margin-top: calc( (43vh + 3.2rem + 20px) / -2 );
+  margin-left: calc(90vh / -2);
+  margin-top: calc((43vh + 3.2rem + 20px) / -2);
   display: flex;
   flex-direction: column;
   z-index: 999;
 
   .confirmDiaWindow {
-    width: 37vh;
-    height: 43vh;
     border-radius: 1.6rem;
     opacity: 1;
-    background: radial-gradient(122% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 20px;
+    background: linear-gradient(62deg, #092941 -85%, #2A484B 96%);
 
     .confirmDiaWindow-con {
-      .pic {
-        width: 25vh;
-        height: 25vh;
-        border-radius: 50%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        overflow: hidden;
-        position: relative;
-        margin: 0 auto 2vh auto;
+      padding: 25px;
 
-        .shine {
-          position: absolute;
-          left: -5vh;
-          top: 0;
-          width: 5vh;
-          height: 25vh;
-          animation: shineani 3s infinite;
-          -webkit-animation: shineani 3s infinite;
-          z-index: 1;
+      .pic {
 
-          img {
-            width: 100%;
-            height: 100%;
-          }
-        }
+        width: 100%;
 
         img {
           width: 100%;
         }
       }
 
-      .pic2 {
-        box-sizing: border-box;
-        border: 0.44rem solid rgba(26, 41, 58, 0.6315);
-      }
-
       .name {
         width: 100%;
-        color: #1A293A;
-        font-size: 2.5vh;
-      }
-
-      .name2 {
-        padding: 0 0.3rem;
-        border-radius: 1.1rem;
-        background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
-        box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.9046), inset 0px 3px 6px 0px rgba(0, 0, 0, 0.0851);
+        color: #ffffff;
+        font-size: 2.8vh;
+        margin-bottom: 30px;
       }
     }
   }
@@ -272,14 +232,4 @@ defineExpose({
     margin: 0 auto;
   }
 }
-
-@keyframes shineani {
-  0% {
-    left: -5vh;
-  }
-
-  100% {
-    left: calc(22.3vh + 5vh);
-  }
-}
 </style>

src/types/components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ChooseStudent: typeof import('./../components/ChooseStudent/index.vue')['default']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']