日常开发

src/utils/animate.ts

@@ -29,6 +29,13 @@ const foul = {
   leave: animatePrefix + 'animate__fadeOut'
 };
 
+const report = {
+  enter: animatePrefix + 'animate__fadeInDown',
+  leave: animatePrefix + 'animate__fadeOutUp'
+  // enter: animatePrefix + 'animate__fadeInRight',
+  // leave: animatePrefix + 'animate__fadeOutRight'
+};
+
 const error = {
   enter: animatePrefix + 'animate__shakeX'
 };
@@ -39,5 +46,6 @@ export default {
   face,
   page,
   foul,
+  report,
   error
 };

src/views/train/multiple.vue

@@ -28,6 +28,20 @@
       <template v-else>
         <div class="btn startBtn" @click="getReady" v-if="examState == 43">开始测试</div>
       </template>
+      <div class="btn" :class="{ testRecordBtn: showReportList }" @click="getTestRecord"
+        v-if="![43, 42].includes(examState)">
+        {{ showReportList ? '关闭记录' : '测试记录' }}
+      </div>
+      <!--测试记录开始-->
+      <transition :enter-active-class="proxy?.animate.mask.enter" :leave-active-class="proxy?.animate.mask.leave">
+        <div class="mask mask2" v-show="showReportList" @click="getTestRecord"></div>
+      </transition>
+      <transition :enter-active-class="proxy?.animate.report.enter" :leave-active-class="proxy?.animate.report.leave">
+        <div class="main-right" v-show="showReportList">
+          <ReportList ref="reportListRef" :parameter="parameter" :showQRCode="false" />
+        </div>
+      </transition>
+      <!--测试记录结束-->
     </div>
     <!--倒计时开始-->
     <div>
@@ -55,6 +69,7 @@ import { initWs, examEnds, openOneTest, startFace, stopFace, faceConfirmOnly, st
 const { proxy } = getCurrentInstance() as any;
 const router = useRouter();
 const route = useRoute();
+const reportListRef = ref();
 const data = reactive<any>({
   timerManager: {},//计时器管理
   parameter: {},//参数
@@ -70,8 +85,9 @@ const data = reactive<any>({
   testList: [],//获取区列表
   multipleItemRefList: [],//获取区列表
   styleType: null,//展示样式1：1-5个，2：6-10个，3：10个以上
+  showReportList: false,//显示隐藏测试记录
 });
-const { timerManager, parameter, time, userInfo, examState, needStart, showTestAgain, testList, multipleItemRefList, styleType } = toRefs(data);
+const { timerManager, parameter, time, userInfo, examState, needStart, showTestAgain, testList, multipleItemRefList, styleType, showReportList } = toRefs(data);
 
 /**
  * 创建组件实例
@@ -406,6 +422,18 @@ const testListArr = computed(() => {
   return list;
 });
 
+/**
+ * 将测试列表转为多行
+*/
+const getTestRecord = () => {
+  if (showReportList.value) {
+    showReportList.value = false;
+  } else {
+    reportListRef.value.getIniReportList();
+    showReportList.value = true;
+  }
+};
+
 onBeforeMount(() => {
   parameter.value = route.query;
   let project = parameter.value.project;
@@ -500,8 +528,6 @@ $waiPadding: 6.51rem;
   display: flex;
   overflow: hidden;
   flex-direction: column;
-
-
 }
 
 .mask {
@@ -514,6 +540,10 @@ $waiPadding: 6.51rem;
   z-index: 998;
 }
 
+.mask2 {
+  background: rgba(0, 0, 0, 0.68);
+}
+
 .confirmDiaBg {
   width: 100%;
   height: 100vh;
@@ -558,7 +588,6 @@ $waiPadding: 6.51rem;
   }
 }
 
-
 .footerBtn {
   width: 100%;
   padding: 0 calc(13.02rem /2);
@@ -595,6 +624,27 @@ $waiPadding: 6.51rem;
       background: #F99F02;
     }
   }
+
+  .testRecordBtn {
+    position: relative;
+    z-index: 999;
+  }
+}
+
+.main-right {
+  width: 22.7%;
+  height: 80vh;
+  border-radius: 1.6rem;
+  // background: linear-gradient(29deg, #092941 -82%, #2A484B 94%);
+  background-color: rgba(9, 41, 65, 0.8);
+  box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.4);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: absolute;
+  z-index: 999;
+  bottom: 6.5vh;
+  right: calc(13.02rem /2);
 }
 
 //列表样式写在此父组件里，子组件尽量减少个性化class和style，多样性以父组件控制类型

src/views/train/test.vue

@@ -21,14 +21,14 @@
               :leave-active-class="proxy?.animate.dialog.leave">
               <div class="time" v-show="needStart && [42].includes(examState)">{{
                 time.countdownNum
-                }}</div>
+              }}</div>
             </transition>
             <div class="tips" v-if="examState == 41">
               <img v-if="parameter.gesture" src="@/assets/images/test/ready1.png" />
               <img v-if="!parameter.gesture" src="@/assets/images/test/ready2.png" />
             </div>
             <div class="complete" :class="{ 'complete2': needStart && [42].includes(examState) }"
-              v-if="faceCheckStu.student_id && time.ready <= 0 && examState != 43">
+              v-if="faceCheckStu.student_id && time.ready <= 0 && examState != 43 && examState != 41">
               <div class="scoreBox" v-if="['basketballv1'].includes(parameter.project)">
                 <div class="score">{{ currentResultObj.count || 0 }}</div>
               </div>