日常开发

src/components/MultipleItem/index.vue

@@ -41,6 +41,10 @@ const emit = defineEmits(['returnData', 'getChooseStudent']);
 
 //父值
 const props = defineProps({
+  parentMethod: {
+    type: Object,
+    default: {}
+  },
   area: {
     type: String,
     default: ""
@@ -170,10 +174,10 @@ const getOpenOneTestAndStartFace = async () => {
   }
   console.log("examId", examId)
   if (examState.value > 3) {
-    await closeOneTest(examId);
+    await props.parentMethod.closeOneTest(examId);
   }
-  await openOneTest(examId);
-  await startFace(examId);
+  await props.parentMethod.openOneTest(examId);
+  await props.parentMethod.startFace(examId);
 };
 
 /**
@@ -188,7 +192,7 @@ const getStopFace = async () => {
   //   return false;
   // }
   if (examState.value == 41) {
-    await stopFace(examId);
+    await props.parentMethod.stopFace(examId);
   }
   if (faceCheckStu.value.student_id) {
     getFaceConfirmOnly();
@@ -202,7 +206,7 @@ const getFaceConfirmOnly = (data?: any) => {
   if (data) {
     faceCheckStu.value = data;
   }
-  faceConfirmOnly({
+  props.parentMethod.faceConfirmOnly({
     exam_id: examId,
     result_id: resultId.value,
     student_id: faceCheckStu.value.student_id,
@@ -221,14 +225,14 @@ const getRetestFace = () => {
   proxy?.$modal.confirm("确定重新识别吗？").then(() => {
     if (props.needStart == false) {
       //自动流程项目重新识别直接返回3
-      closeOneTest(examId);
+      props.parentMethod.closeOneTest(examId);
     } else {
       //手动流程项目重新识别43返回41,42返回3
       if (examState.value == 43) {
         cleanData();
-        startFace(examId);
+        props.parentMethod.startFace(examId);
       } else {
-        closeOneTest(examId);
+        props.parentMethod.closeOneTest(examId);
       }
     }
   }).finally(() => {
@@ -245,7 +249,7 @@ const getStartOneTest = () => {
   if (examState.value != 43 || !faceCheckStu.value.student_id) {
     return false;
   }
-  startOneTest(examId, () => { })
+  props.parentMethod.startOneTest(examId, () => { })
 };
 
 /**
@@ -259,16 +263,16 @@ const getAgain = async () => {
   let student = JSON.parse(JSON.stringify(faceCheckStu.value));
   //测试中
   if (examState.value == 42) {
-    await finishOneTest(examId);
+    await props.parentMethod.finishOneTest(examId);
   }
   //其他状态
   if (examState.value > 3) {
-    await closeOneTest(examId);
+    await props.parentMethod.closeOneTest(examId);
   }
   //重新走一次流程
-  await openOneTest(examId);
-  await startFace(examId);
-  await stopFace(examId);
+  await props.parentMethod.openOneTest(examId);
+  await props.parentMethod.startFace(examId);
+  await props.parentMethod.stopFace(examId);
   if (student.student_id) {
     getFaceConfirmOnly(student);
   }
@@ -283,11 +287,11 @@ const getAllRetestFace = async () => {
   }
   //测试中
   if (examState.value == 42) {
-    await finishOneTest(examId);
+    await props.parentMethod.finishOneTest(examId);
   }
   //其他状态
   if (examState.value > 3) {
-    await closeOneTest(examId);
+    await props.parentMethod.closeOneTest(examId);
   }
   //重新走一次流程
   await getOpenOneTestAndStartFace();
@@ -515,6 +519,7 @@ watch(() => props.examState, (newVal, oldVal) => {
 }, { deep: true });
 
 onMounted(() => {
+  console.log("props.parentMethod",props.parentMethod)
   let dic: any = dataDictionary;
   unit.value = dic.unit[project];
   ctrl.value = route.query.ctrl;

src/views/train/multiple copy.vue

@@ -1,1833 +0,0 @@
-<template>
-  <div>
-    <Header @confirmExit="confirmExit"></Header>
-    <Transition :enter-active-class="proxy?.animate.dialog.enter" :leave-active-class="proxy?.animate.dialog.leave">
-      <div class="time" :class="{ 'time1': styleType == 1, 'time2': styleType == 2, 'time3': styleType == 3 }"
-        v-show="needStart && [42].includes(examState)">{{
-          time.countdownNum
-        }}</div>
-    </Transition>
-    <div class="main">
-      <div class="testBox"
-        :class="{ 'testBox1': styleType == 1, 'testBox2': styleType == 2, 'testBox3': styleType == 3 }">
-        <div class="ul"
-          :class="{ 'overlap': (examState == 43 && time.ready) || [42].includes(examState) || (showTestAgain && ![41].includes(examState)), 'ready': [41].includes(examState), 'hands': parameter.gesture }"
-          v-for="(items, indexs) in testListArr " :key="indexs">
-          <MultipleItem :ref="(el: any) => { multipleItemRef(el, item.itemNumber, item.area) }"
-            v-for="(item, index) in items" :query="parameter" :area="item.area" :key="index" @returnData="returnData"
-            @getChooseStudent="getChooseStudent" :examState="examState" :needStart="needStart" :styleType="styleType" />
-        </div>
-      </div>
-    </div>
-    <div class="footerBtn">
-      <template v-if="needStart">
-        <div class="btn" @click="getAgain" v-if="examState == 42 || showTestAgain">再测一次</div>
-        <div class="btn" @click="getOpenOneTestAndStartFace" v-if="examState < 41">开始识别</div>
-        <div class="btn" @click="getStopFace" v-if="examState == 41">停止人脸识别</div>
-        <div class="btn startBtn" @click="getReady" v-if="examState == 43">开始测试</div>
-        <div class="btn" @click="getAllRetestFace" v-if="examState == 43 || examState == 42">重新识别</div>
-      </template>
-      <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="true" />
-        </div>
-      </Transition>
-      <!--测试记录结束-->
-    </div>
-    <!--倒计时开始-->
-    <div>
-      <Transition :enter-active-class="proxy?.animate.mask.enter" :leave-active-class="proxy?.animate.mask.leave">
-        <div class="mask" v-show="examState == 43 && time.ready"></div>
-      </Transition>
-      <Transition :enter-active-class="proxy?.animate.face.enter" :leave-active-class="proxy?.animate.face.leave2">
-        <div class="confirmDiaBg" v-show="examState == 43 && time.ready">
-          <div class="confirmDiaWindow">
-            <div class="readyBox">
-              <div class="lable">倒计时</div>
-              <div class="value" :class="{ 'transparent': time.ready > 5 }">{{ time.ready }}</div>
-            </div>
-          </div>
-        </div>
-      </Transition>
-    </div>
-    <!--倒计时结束-->
-    <ChooseStudent ref="chooseStudentRef" @returnData="returnStudent" />
-  </div>
-</template>
-
-<script setup name="Multiple" lang="ts">
-import { useWs } from '@/utils/trainWs';
-// import { initWs, examEnds, openOneTest, startFace, stopFace, faceConfirmOnly, startOneTest, finishOneTest, closeOneTest, suspendFaceRecognitionChannels, resumeFaceRecognitionChannels } from '@/utils/ws'
-import { initSpeech, speckText, playMusic, controlMusic, speckCancel, chineseNumber } from '@/utils/speech'
-import { useWebSocket } from '@/utils/handWs';
-const { handWs, startDevice, startHand, stateHand } = useWebSocket();
-const { initWs, examEnds, openOneTest, startFace, stopFace, faceConfirmOnly, startOneTest, finishOneTest, closeOneTest, suspendFaceRecognitionChannels, resumeFaceRecognitionChannels } = useWs();
-const { proxy } = getCurrentInstance() as any;
-const router = useRouter();
-const route = useRoute();
-const reportListRef = ref();
-const chooseStudentRef = ref();
-const data = reactive<any>({
-  timerManager: {},//计时器管理
-  parameter: {},//参数
-  time: {
-    testTime: 60,//时长
-    countdownNum: 0,//计时
-    ready: 0,//预备
-    exit: 0,//退出倒计时
-  },
-  userInfo: {},//用户信息
-  examState: 0,//当前状态
-  needStart: false,//是否需要按钮
-  showTestAgain: false,//再测一次按钮
-  testList: [],//获取区列表
-  multipleItemRefList: [],//获取区列表
-  styleType: null,//展示样式1：1-5个，2：6-10个，3：10个以上
-  showReportList: false,//显示隐藏测试记录
-  exit: 0,//退出响应次数
-  sid: null,//WS的id
-  chooseStudentArea: '',//弹出手动选择对应的区号
-  device_info: {},//设备信息
-});
-const { timerManager, parameter, time, userInfo, examState, needStart, showTestAgain, testList, multipleItemRefList, styleType, showReportList, exit, sid, chooseStudentArea, device_info } = toRefs(data);
-
-/**
- * 创建组件实例
-*/
-const multipleItemRef = (el: any, index: number, area: any) => {
-  el.area = area;
-  multipleItemRefList.value[index - 1] = el;
-}
-
-/**
- * 开始识别
-*/
-const getOpenOneTestAndStartFace = () => {
-  cleanData();
-  examState.value = 41;
-  // for (let i: any = 0; i < multipleItemRefList.value.length; i++) {
-  //   multipleItemRefList.value[i].getOpenOneTestAndStartFace()
-  // }
-  for (let i: any = 0; i < testList.value.length; i++) {
-    getOpenOneTestAndStartFaceList(testList.value[i])
-  }
-};
-
-/**
- * 开始识别
-*/
-const getOpenOneTestAndStartFaceList = async (data: any) => {
-  let project: any = parameter.value.project;
-  let area: any = data.area;
-  let examId: string = `${project}_${area}`; //项目+区
-  if (area == null || area == "") {
-    return false;
-  }
-  console.log("examId", examId)
-  if (examState.value > 3) {
-    await closeOneTest(examId);
-  }
-  await openOneTest(examId);
-  await startFace(examId);
-};
-
-/**
- * 停止人脸识别
-*/
-const getStopFace = async () => {
-  let flag = false;
-  for (let i = 0; i < testList.value.length; i++) {
-    if (testList.value[i] && testList.value[i].faceCheckStu?.student_id) {
-      flag = true;
-    }
-  }
-  if (!flag) {
-    proxy?.$modal.msgWarning("请选择人员！");
-    return false;
-  }
-  examState.value = 43;
-  // for (let i: any = 0; i < multipleItemRefList.value.length; i++) {
-  //   multipleItemRefList.value[i].getStopFace()
-  // }
-  for (let i: any = 0; i < testList.value.length; i++) {
-    getStopFaceList(testList.value[i])
-  }
-};
-
-/**
- * 停止人脸识别
-*/
-const getStopFaceList = async (data: any) => {
-  let project: any = parameter.value.project;
-  let area: any = data.area;
-  let examId: string = `${project}_${area}`; //项目+区
-  if (area == null || area == "") {
-    return false;
-  }
-  // 旧版识别成功直接43了这里先屏蔽
-  // if (examState.value != 41) {
-  //   return false;
-  // }
-  if (data.examState == 41) {
-    await stopFace(examId);
-  }
-  if (data.faceCheckStu.student_id) {
-    getFaceConfirmOnlyList(data);
-  }
-};
-
-/**
- * 确定人脸信息
-*/
-const getFaceConfirmOnlyList = (data?: any) => {
-  let project: any = parameter.value.project;
-  let area: any = data.area;
-  let examId: string = `${project}_${area}`; //项目+区
-  if (area == null || area == "") {
-    return false;
-  }
-  faceConfirmOnly({
-    exam_id: examId,
-    result_id: data.resultId,
-    student_id: data.faceCheckStu.student_id,
-    gender: data.faceCheckStu.gender
-  }, () => {
-  });
-};
-
-/**
- * 开始测试
-*/
-const getStartOneTest = () => {
-  if (examState.value != 43) {
-    return false;
-  }
-  let flag = false;
-  for (let i = 0; i < testList.value.length; i++) {
-    if (testList.value[i] && testList.value[i].faceCheckStu?.student_id) {
-      flag = true;
-    }
-  }
-  if (!flag) {
-    proxy?.$modal.msgWarning("请选择人员！");
-    return false;
-  }
-  getClearTimer("readyTimer");
-  time.value.ready = 0;
-  examState.value = 42;
-  // for (let i: any = 0; i < multipleItemRefList.value.length; i++) {
-  //   if (testList.value[i].examState == 41) {
-  //     //正在识别的停止识别
-  //     multipleItemRefList.value[i].getStopFace()
-  //   }
-  //   if (testList.value[i].examState == 43) {
-  //     multipleItemRefList.value[i].getStartOneTest()
-  //   }
-  // }
-  for (let i: any = 0; i < testList.value.length; i++) {
-    if (testList.value[i].examState == 41) {
-      //正在识别的停止识别
-      getStopFaceList(testList.value[i])
-    }
-    if (testList.value[i].examState == 43) {
-      getStartOneTestList(testList.value[i])
-    }
-  }
-  speckText("哨声");
-  if (parameter.value.music) {
-    playMusic(parameter.value.music);
-  }
-  //显示再测一次按钮
-  showTestAgain.value = true;
-  //时间为0的为正计时，大于0的为倒计时
-  if (time.value.testTime == 0) {
-    getCounting("+");
-  } else {
-    getCounting("-");
-  }
-};
-
-/**
- * 开始测试
-*/
-const getStartOneTestList = (data?:any) => {
-  let project: any = parameter.value.project;
-  let area: any = data.area;
-  let examId: string = `${project}_${area}`; //项目+区
-  if (area == null || area == "") {
-    return false;
-  }
-  if (data.examState != 43 || !data.faceCheckStu.student_id) {
-    return false;
-  }
-  startOneTest(examId, () => { })
-};
-
-/**
- * 再测一次
-*/
-const getAgain = () => {
-  let loading = ElLoading.service({ text: '请稍等...', background: 'rgba(0, 0, 0, 0.8)', customClass: `sports ${parameter.value.project}` });
-  cleanData();
-  examState.value = 41;
-  // for (let i: any = 0; i < multipleItemRefList.value.length; i++) {
-  //   multipleItemRefList.value[i].getAgain()
-  // }
-  for (let i: any = 0; i < testList.value.length; i++) {
-    getAgainList()
-  }
-  timerManager.value.againTimer = setInterval(() => {
-    if (examState.value == 43) {
-      getClearTimer("againTimer");
-      loading?.close();
-    }
-  }, 300);
-  let loadingTime = setTimeout(() => {
-    if (examState.value <= 41) {
-      loading?.close();
-      clearTimeout(loadingTime);
-      getClearTimer("againTimer");
-    }
-  }, 10000);
-};
-
-/**
- * 再测一次
-*/
-const getAgainList = async (data?:any) => {
-  let project: any = parameter.value.project;
-  let area: any = data.area;
-  let examId: string = `${project}_${area}`; //项目+区
-  if (area == null || area == "") {
-    return false;
-  }
-  //预存测试人员
-  let student = JSON.parse(JSON.stringify(data.faceCheckStu));
-  //测试中
-  if (data.examState == 42) {
-    await finishOneTest(examId);
-  }
-  //其他状态
-  if (data.examState > 3) {
-    await closeOneTest(examId);
-  }
-  //重新走一次流程
-  await openOneTest(examId);
-  await startFace(examId);
-  await stopFace(examId);
-  let index = testList.value.findIndex((item: any) => {
-    return area == item.area;
-  })
-  multipleItemRefList.value[index]?.returnStudent(student);
-  if (student.student_id) {
-    getFaceConfirmOnlyList(data);
-  }
-};
-
-/**
- * 重新识别
-*/
-const getAllRetestFace = async () => {
-  let loading = ElLoading.service({ text: '请稍等...', background: 'rgba(0, 0, 0, 0.8)', customClass: `sports ${parameter.value.project}` });
-  showTestAgain.value = false;
-  examState.value = 3;
-  // for (let i: any = 0; i < multipleItemRefList.value.length; i++) {
-  //   multipleItemRefList.value[i].getAllRetestFace()
-  // }
-  for (let i: any = 0; i < testList.value.length; i++) {
-    getAllRetestFaceList(data)
-  }
-  timerManager.value.allRetestFaceTimer = setInterval(() => {
-    if (examState.value == 41) {
-      getClearTimer("allRetestFaceTimer");
-      loading?.close();
-    }
-  }, 300);
-  let loadingTime = setTimeout(() => {
-    if (examState.value <= 3) {
-      loading?.close();
-      clearTimeout(loadingTime);
-      getClearTimer("allRetestFaceTimer");
-    }
-  }, 10000);
-};
-
-/**
- * 重新识别
-*/
-const getAllRetestFaceList = async (data?:any) => {
-  let project: any = parameter.value.project;
-  let area: any = data.area;
-  let examId: string = `${project}_${area}`; //项目+区
-  if (area == null || area == "") {
-    return false;
-  }
-  //测试中
-  if (data.examState == 42) {
-    await finishOneTest(examId);
-  }
-  //其他状态
-  if (data.examState > 3) {
-    await closeOneTest(examId);
-  }
-  //重新走一次流程
-  await getOpenOneTestAndStartFace();
-};
-
-/**
- * 确认退出
-*/
-const confirmExit = () => {
-  let handcontroller_id = parameter.value.handcontroller;
-  proxy?.$modal.confirm(handcontroller_id ? `请举左手确认退出` : `确定退出吗？`).then(() => {
-    getExit();
-  }).finally(() => {
-  });
-};
-
-/**
- * 退出
-*/
-const getExit = () => {
-  getClearTimer();//清除计时器
-  examEnds();//通知工作站关闭
-  speckCancel();//停止播报
-  window.onbeforeunload = null;//移除事件处理器
-  let handcontroller_id = parameter.value.handcontroller;
-  if (handcontroller_id) {
-    router.push({ path: '/gesture' });//跳转
-  } else {
-    router.push({ path: '/' });//跳转
-  }
-};
-
-/**
- * 清空定时任务
-*/
-const getClearTimer = (data?: any) => {
-  if (data) {
-    //清除指定
-    clearInterval(timerManager.value[data])
-    timerManager.value[data] = null;
-  } else {
-    //清除全部
-    for (let key in timerManager.value) {
-      if (timerManager.value.hasOwnProperty(key)) {
-        clearInterval(timerManager.value[key])
-        timerManager.value[key] = null;
-      }
-    }
-  }
-};
-
-/**
- * 清除历史记录
-*/
-const cleanData = () => {
-  getClearTimer("countdownTimer");
-  time.value.countdownNum = time.value.testTime;
-  showTestAgain.value = false;
-};
-
-/**
- * 时间转换
-*/
-// const countdownNumFormat = computed(() => {
-//   return time.value.countdownNum;
-//   //return proxy?.$utils.timeFormat(time.value.countdownNum);
-// });
-
-/**
- * 倒计时
-*/
-const getCounting = (type: string) => {
-  timerManager.value.countdownTimer = setInterval(() => {
-    //正计时
-    if (type == "+") {
-      time.value.countdownNum++;
-    }
-    //倒计时
-    if (type == "-") {
-      if (time.value.countdownNum <= 0) {
-        getClearTimer("countdownTimer");
-      } else {
-        time.value.countdownNum--;
-      }
-    }
-  }, 1000);
-};
-
-/**
- * 子组件选择学生
-*/
-const getChooseStudent = (data: any) => {
-  console.log("data", data)
-  chooseStudentArea.value = data;
-  chooseStudentRef.value.open();
-}
-
-/**
- * 返回被选学生
-*/
-const returnStudent = (data: any) => {
-  console.log("data", data)
-  let area = chooseStudentArea.value.area;
-  let index = testList.value.findIndex((item: any) => {
-    return area == item.area;
-  })
-  // console.log("index", index)
-  multipleItemRefList.value[index]?.returnStudent(data);
-};
-
-/**
- * 子组件返回数据
-*/
-const returnData = (data: any) => {
-  let index = testList.value.findIndex((item: any) => {
-    return item.area == data.area;
-  });
-  let obj = Object.assign(testList.value[index], data);
-  testList.value[index] = JSON.parse(JSON.stringify(obj));
-  console.log("testList.value", testList.value)
-
-  if (examState.value == 0) {
-    let flag = false;
-    //只监听人脸识别的区
-    let newList = testList.value;
-    for (let i = 0; i < newList.length; i++) {
-      if (newList[i] && newList[i].examState == 3) {
-        flag = true;
-      }
-    }
-    if (flag) {
-      console.log("变更状态：", 3)
-      examState.value = 3;
-      if (needStart.value) {
-        let handcontroller = parameter.value.handcontroller;
-        let ctrl = parameter.value.ctrl;
-        if (handcontroller && ctrl) {
-          speckText(`请${ctrl}区举左手开始识别`);
-        } else {
-          proxy?.$modal.msgWarning(`请点击右下角的【开始识别】`);
-        }
-      }
-    }
-  }
-
-  if (examState.value == 3) {
-    let flag = false;
-    //只监听人脸识别的区
-    let newList = testList.value;
-    for (let i = 0; i < newList.length; i++) {
-      if (newList[i] && newList[i].examState == 40) {
-        flag = true;
-      }
-    }
-    if (flag) {
-      console.log("变更状态：", 40)
-      examState.value = 40;
-    }
-  }
-
-  if (examState.value == 40) {
-    let flag = false;
-    //只监听人脸识别的区
-    let newList = testList.value;
-    for (let i = 0; i < newList.length; i++) {
-      if (newList[i] && newList[i].examState == 41) {
-        flag = true;
-      }
-    }
-    if (flag) {
-      console.log("变更状态：", 41)
-      examState.value = 41;
-      let txt = parameter.value.gesture ? "请举右手看摄像头人脸识别" : "请看摄像头进行人脸识别";
-      speckText(txt);
-      //如果过段时候后仍在识别中就提示停止识别
-      // setTimeout(() => {
-      //   if (examState.value == 41) {
-      //     let handcontroller = parameter.value.handcontroller;
-      //     let ctrl = parameter.value.ctrl;
-      //     if (handcontroller && ctrl) {
-      //       speckText(`各就位后请${ctrl}区举左手停止识别`);
-      //     } else {
-      //       proxy?.$modal.msgWarning(`各就位后请点击右下角的【停止人脸识别】`);
-      //     }
-      //   }
-      // }, 15000)
-    }
-  }
-
-  if (examState.value == 41) {
-    let flag = false;
-    //只监听人脸识别的区
-    let newList = testList.value.filter((item: any) => {
-      return item?.faceCheckStu?.student_id;
-    })
-    for (let i = 0; i < newList.length; i++) {
-      if (newList[i] && newList[i].faceCheckStu?.student_id && newList[i].examState == 43) {
-        flag = true;
-      }
-    }
-    if (flag) {
-      console.log("变更状态：", 43)
-      examState.value = 43;
-      cleanData();
-      //如果过段时候后仍在识别中就提示停止识别
-      // setTimeout(() => {
-      //   if (examState.value == 43) {
-      //     let handcontroller = parameter.value.handcontroller;
-      //     let ctrl = parameter.value.ctrl;
-      //     if (handcontroller && ctrl) {
-      //       speckText(`请${ctrl}区举左手开始测试`);
-      //     } else {
-      //       proxy?.$modal.msgWarning(`请点击右下角的【开始测试】`);
-      //     }
-      //   }
-      // }, 10000)
-    }
-  }
-
-  //测试完成后回退状态
-  if (examState.value == 42) {
-    let flag = false;
-    //只监听人脸识别的区
-    let newList = testList.value.filter((item: any) => {
-      return item?.faceCheckStu?.student_id;
-    })
-    for (let i = 0; i < newList.length; i++) {
-      if (newList[i] && newList[i].faceCheckStu?.student_id && newList[i].examState == 3) {
-        flag = true;
-      } else {
-        return false;
-      }
-    }
-    if (flag) {
-      console.log("变更状态：", 3)
-      examState.value = 3;
-    }
-  }
-
-  //如果全部状态为0就退出
-  if (examState.value >= 0) {
-    let flag = false;
-    //只监听人脸识别的区
-    let newList = testList.value;
-    for (let i = 0; i < newList.length; i++) {
-      if (newList[i] && newList[i].examState == 0) {
-        flag = true;
-      } else {
-        return false;
-      }
-    }
-    if (flag) {
-      examState.value = 0;
-      getExit();
-    }
-  }
-};
-
-
-/**
- * 准备开始
-*/
-const getReady = () => {
-  if (examState.value != 43) {
-    return false;
-  }
-  if (time.value.ready) {
-    return false;
-  }
-  let flag = false;
-  for (let i = 0; i < testList.value.length; i++) {
-    if (testList.value[i] && testList.value[i].faceCheckStu?.student_id) {
-      flag = true;
-    }
-  }
-  if (!flag) {
-    proxy?.$modal.msgWarning("请选择人员！");
-    return false;
-  }
-  //停止播报;
-  speckCancel()
-  //正在识别的停止识别
-  // for (let i: any = 0; i < multipleItemRefList.value.length; i++) {
-  //   if (testList.value[i].examState == 41) {
-  //     multipleItemRefList.value[i].getStopFace()
-  //   }
-  // }
-  for (let i: any = 0; i < testList.value.length; i++) {
-    if (testList.value[i].examState == 41) {
-      getStopFaceList((testList.value[i]))
-    }
-  }
-  time.value.ready = 6;
-  timerManager.value.readyTimer = setInterval(() => {
-    time.value.ready--;
-    if (time.value.ready <= 0) {
-      getClearTimer("readyTimer");
-      getStartOneTest();
-    } else {
-      speckText(time.value.ready);
-    }
-  }, 1000);
-};
-
-/**
- * 将测试列表转为多行
-*/
-const testListArr = computed(() => {
-  let list: any = [];
-  let num = 0;
-  if (styleType.value == 1) {
-    num = 3
-  }
-  if (styleType.value == 2) {
-    num = 5
-  }
-  if (styleType.value == 3) {
-    num = 10
-  }
-  let myLength = Math.ceil(testList.value.length / num);
-  for (let i = 0; i < myLength; i++) {
-    list[i] = [];
-    for (let j = 0; j < testList.value.length; j++) {
-      if (j >= i * num && j < (i + 1) * num) {
-        list[i].push(testList.value[j])
-      }
-    }
-  }
-  return list;
-});
-
-/**
- * 将测试列表转为多行
-*/
-const getTestRecord = () => {
-  if (showReportList.value) {
-    showReportList.value = false;
-  } else {
-    reportListRef.value.getIniReportList();
-    showReportList.value = true;
-  }
-};
-
-/**
- * 自动填补空缺
-*/
-const getAddTestList = (num: number) => {
-  let list = parameter.value.area.split(',');
-  let myLength = num - list.length;
-  for (let i = 0; i < myLength; i++) {
-    let obj = {
-      area: "",
-      itemNumber: list.length + (i + 1)
-    }
-    testList.value.push(
-      obj
-    )
-  }
-};
-
-/**
- * 获取设备项目
-*/
-const getDevice = async () => {
-  let deviceid = localStorage.getItem("deviceid") || '';
-  if (deviceid) {
-    startDevice({ deviceid: deviceid })
-  } else {
-    proxy?.$modal.msgError(`缺少设备信息请重新登录！`);
-    await proxy?.$http.common.logout({}).then((res: any) => {
-    });
-    proxy?.$modal?.closeLoading()
-    //清空缓存
-    localStorage.clear();
-    //跳转
-    router.push({ path: '/login/qrcode' });
-  }
-};
-
-/**
- * 加载手势WS
-*/
-const initHand = () => {
-  handWs((e: any) => {
-    if (router.currentRoute.value.path != '/train/multiple' || parameter.value.handcontroller == undefined) {
-      return false;
-    }
-    console.log("eeeee", e)
-    if (e?.wksid) {
-      //获取设备项目
-      getDevice()
-    }
-    //接收设备信息
-    if (e?.device_info) {
-      device_info.value = e.device_info;
-      let handcontroller_id = device_info.value.handcontroller_id;
-      stateHand(handcontroller_id);
-    }
-    //获取手势状态
-    if (e?.cmd == 'get_handcontroller_state' && e?.state == 0) {
-      let handcontroller_id = device_info.value.handcontroller_id;
-      startHand(handcontroller_id);
-    }
-    //刷新
-    if (e?.data?.result == "refresh") {
-      getExit();
-      //刷新
-      window.location.reload()
-    }
-    //没初始化完成不监听手势动作
-    if (examState.value == 0) {
-      return false;
-    }
-    //左滑动
-    if (e?.data?.result == "next_item") {
-    }
-    //举左手
-    if (e?.data?.result == "left_hand") {
-      //举左手确认退出
-      // if (exit.value) {
-      //   exit.value = 0;
-      //   //确认退出
-      //   let keyEvent: any = null;
-      //   keyEvent = new KeyboardEvent('keydown', {
-      //     key: 'Enter', // 键值
-      //     code: 'Enter', // 键盘代码
-      //     keyCode: 13, // 旧的键盘代码
-      //     which: 13, // 新的键盘代码
-      //     shiftKey: false, // 是否按下Shift键
-      //     ctrlKey: false, // 是否按下Ctrl键
-      //     metaKey: false, // 是否按下Meta键（Win键或Command键）
-      //     bubbles: true, // 事件是否冒泡
-      //     cancelable: true // 是否可以取消事件的默认行为
-      //   });
-      //   document.activeElement?.dispatchEvent(keyEvent);
-      //   return false;
-      // }
-      //开始识别
-      if (needStart.value && examState.value < 41) {
-        getOpenOneTestAndStartFace();
-        return false;
-      }
-      //停止人脸识别
-      if (needStart.value && examState.value == 41) {
-        getStopFace();
-        return false;
-      }
-      //开始测试
-      if (examState.value == 43) {
-        getReady()
-        return false;
-      }
-    }
-    //退出
-    if (e?.data?.result == "exit") {
-      // console.log("exit.value", exit.value)
-      if (exit.value == 0) {
-        speckText("请保持两秒确认退出");
-        //第一次才弹出
-        confirmExit();
-        setTimeout(() => {
-          let keyEvent: any = null;
-          let myKey = null;
-          //如果交叉手两秒后返回超过4次就确认退出
-          if (exit.value >= 4) {
-            myKey = 'Enter';
-          } else {
-            myKey = 'Esc';
-            exit.value = 0;
-          }
-          if (myKey == 'Esc') {
-            keyEvent = new KeyboardEvent('keydown', {
-              key: 'Escape', // 键值
-              code: 'Escape', // 键盘代码
-              keyCode: 27, // 旧的键盘代码
-              which: 27, // 新的键盘代码
-              shiftKey: false, // 是否按下Shift键
-              ctrlKey: false, // 是否按下Ctrl键
-              metaKey: false, // 是否按下Meta键（Win键或Command键）
-              bubbles: true, // 事件是否冒泡
-              cancelable: true // 是否可以取消事件的默认行为
-            });
-          }
-          if (myKey == 'Enter') {
-            keyEvent = new KeyboardEvent('keydown', {
-              key: 'Enter', // 键值
-              code: 'Enter', // 键盘代码
-              keyCode: 13, // 旧的键盘代码
-              which: 13, // 新的键盘代码
-              shiftKey: false, // 是否按下Shift键
-              ctrlKey: false, // 是否按下Ctrl键
-              metaKey: false, // 是否按下Meta键（Win键或Command键）
-              bubbles: true, // 事件是否冒泡
-              cancelable: true // 是否可以取消事件的默认行为
-            });
-          }
-          document.activeElement?.dispatchEvent(keyEvent);
-        }, 2500)
-      }
-      exit.value = exit.value + 1
-    }
-    // if (e?.data?.result == "exit") {
-    //   console.log("exit.value", exit.value)
-    //   if (exit.value == 0) {
-    //     exit.value = 1
-    //     speckText("请5秒内举左手确认退出");
-    //     //第一次才弹出
-    //     confirmExit();
-    //     time.value.exit = 6;
-    //     timerManager.value.exitTimer = setInterval(() => {
-    //       time.value.exit--;
-    //       console.log("取消倒计时", time.value.exit)
-    //       proxy?.$modal.msgWarning(`取消倒计时：${time.value.exit}`)
-    //       if (time.value.exit == 0) {
-    //         exit.value = 0;
-    //         getClearTimer("exitTimer");
-    //         let keyEvent: any = null;
-    //         keyEvent = new KeyboardEvent('keydown', {
-    //           key: 'Escape', // 键值
-    //           code: 'Escape', // 键盘代码
-    //           keyCode: 27, // 旧的键盘代码
-    //           which: 27, // 新的键盘代码
-    //           shiftKey: false, // 是否按下Shift键
-    //           ctrlKey: false, // 是否按下Ctrl键
-    //           metaKey: false, // 是否按下Meta键（Win键或Command键）
-    //           bubbles: true, // 事件是否冒泡
-    //           cancelable: true // 是否可以取消事件的默认行为
-    //         });
-    //         document.activeElement?.dispatchEvent(keyEvent);
-    //       }
-    //     }, 1000);
-    //   }
-    // }
-  });
-};
-
-/**
- * 播报时间
-*/
-watch(() => time.value.countdownNum, (newData) => {
-  if (examState.value != 42) {
-    return false;
-  }
-  if (newData >= 30) {
-    if (newData % 30 == 0) {
-      speckText(
-        `还有${newData}秒`
-      );
-    }
-  }
-  if (newData == 10) {
-    speckText("还有10秒");
-  }
-  if (newData <= 5) {
-    speckText(newData);
-  }
-  if (newData == 0) {
-    speckText("哨声");
-  }
-}, { immediate: true });
-
-onBeforeMount(() => {
-  parameter.value = route.query;
-  let project = parameter.value.project;
-  let area = parameter.value.area;
-  if (parameter.value.time) {
-    time.value.testTime = parameter.value.time
-  }
-  time.value.countdownNum = time.value.testTime;
-  let myInfo: any = localStorage.getItem("userInfo");
-  userInfo.value = JSON.parse(myInfo);
-  if (parameter.value.gesture == 'true') {
-    parameter.value.gesture = true
-  } else {
-    parameter.value.gesture = false
-  }
-  let list = area.split(',');
-  testList.value = list.map((item: any, index: number) => {
-    let obj = {
-      area: item,
-      itemNumber: index + 1
-    }
-    return obj;
-  });
-
-  //展示样式控制
-  if (testList.value.length <= 5) {
-    styleType.value = 1;
-    //填补空缺
-    getAddTestList(5)
-  }
-  if (testList.value.length > 5 && testList.value.length <= 10) {
-    styleType.value = 2;
-    //填补空缺
-    getAddTestList(10)
-  }
-  if (testList.value.length > 10) {
-    styleType.value = 3;
-  }
-
-  //需要开始按钮的项目
-  let myList = ['situp', 'jumprope', 'jumpingjack', 'footballv1', 'basketballv1', 'volleyball', 'pingpong'];
-  if (myList.includes(project) && styleType.value == 3) {
-    needStart.value = true;
-  }
-})
-
-onMounted(() => {
-  //加载WS
-  let project = parameter.value.project;
-  initWs({ parameter: parameter.value, testTime: time.value.testTime, version: "v2" }, (data: any) => {
-    //获取sid
-    if (data.cmd === 'mySid') {
-      console.log("data.data.sid", data.data.sid)
-      sid.value = data.data.sid;
-    }
-    let index = testList.value.findIndex((item: any) => {
-      let examId = `${project}_${item.area}`;
-      return examId == data.exam_id;
-    })
-    multipleItemRefList.value[index]?.getMessage(data);
-  });
-  //初始化语音
-  initSpeech();
-  //初始化手势
-  initHand();
-  setTimeout(() => {
-    //10秒还在0状态就算超时
-    if (examState.value == 0) {
-      getExit();
-    }
-  }, 10000);
-  //刷新关闭
-  window.onbeforeunload = function (e) {
-    var confirmationMessage = "刷新/关闭页面将会关闭页面,是否确认退出页面?";
-    (e || window.event).returnValue = confirmationMessage; // 兼容 Gecko + IE
-
-    testList.value.forEach((item: any) => {
-      let examId = item.exam_id;
-      let bUrl = import.meta.env.VITE_APP_BASE_API;
-      let classId = parameter.value.classes;
-      let mySid = sid.value;
-      let token: any = localStorage.getItem("token")
-      let formData = new FormData();
-      formData.append("exam_id", examId);
-      formData.append("class_id", classId);
-      formData.append("token", token);
-      formData.append("sid", mySid);
-      navigator.sendBeacon(bUrl + "/exam/close_exam", formData)
-    })
-    return confirmationMessage; // 兼容 Gecko + Webkit, Safari, Chrome
-  };
-})
-
-onBeforeUnmount(() => {
-  getExit();
-})
-</script>
-
-<style scoped lang="scss">
-$waiPadding: 6.51rem;
-
-.time {
-  width: 20vh;
-  height: 20vh;
-  line-height: 20vh;
-  border-radius: 50%;
-  color: #FF9402;
-  font-size: 8vh;
-  text-align: center;
-  background-image: url("@/assets/images/test/time.png");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  position: absolute;
-  right: 50%;
-  top: -4vh;
-  margin-right: -10vh;
-  font-family: 'Saira-BlackItalic';
-}
-
-.time1 {
-  width: 26vh;
-  height: 26vh;
-  line-height: 26vh;
-  font-size: 10.3vh;
-  right: auto;
-  left: 50%;
-  top: 0vh;
-  margin-left: 8vw;
-  margin-right: auto;
-}
-
-.main {
-  width: calc(100% - ($waiPadding * 2));
-  height: 78vh;
-  padding-top: 10rem;
-  margin: 0 auto;
-  display: flex;
-  overflow: hidden;
-  flex-direction: column;
-}
-
-.mask {
-  position: fixed;
-  height: 100vh;
-  width: 100vw;
-  top: 0;
-  left: 0;
-  background: rgba(0, 0, 0, 0.3);
-  z-index: 998;
-}
-
-.mask2 {
-  background: rgba(0, 0, 0, 0.68);
-}
-
-.confirmDiaBg {
-  width: 100%;
-  height: 100vh;
-  position: fixed;
-  left: 0;
-  top: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 999;
-
-  .confirmDiaWindow {
-    width: 40%;
-    height: 43.4%;
-    border-radius: 1.6rem;
-    opacity: 1;
-    box-sizing: border-box;
-    border: 0.55rem solid #13ED84;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: fixed;
-    background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
-
-    .readyBox {
-      text-align: center;
-      color: #1A293A;
-
-      .lable {
-        font-size: 4.3rem;
-        line-height: 1;
-        margin-bottom: 1.5rem;
-      }
-
-
-      .value {
-        font-size: 10rem;
-        line-height: 1;
-        font-family: 'Saira-BlackItalic';
-      }
-
-      .transparent {
-        opacity: 0;
-      }
-
-    }
-
-  }
-}
-
-.footerBtn {
-  width: 100%;
-  padding: 0 calc(13.02rem /2);
-  box-sizing: border-box;
-  position: fixed;
-  bottom: 3vh;
-  display: flex;
-  justify-content: end;
-
-  .btn {
-    width: 14.6vw;
-    height: 6.1vh;
-    line-height: 6.1vh;
-    font-size: 3vh;
-    color: #1A293A;
-    text-align: center;
-    border-radius: 1vh;
-    cursor: pointer;
-    margin-left: 10px;
-    background: radial-gradient(159% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
-    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1874), inset 0px 1px 0px 1px rgba(255, 255, 255, 0.3);
-
-    &:hover {
-      background: #8EFFA9;
-    }
-  }
-
-  .startBtn {
-    color: #ffffff;
-    background: radial-gradient(159% 126% at 5% 93%, #F99F02 0%, #ED7905 100%);
-    box-shadow: 3px 6px 4px 1px rgba(0, 0, 0, 0.1874), inset 0px 1px 0px 2px rgba(255, 255, 255, 0.3);
-
-    &:hover {
-      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，多样性以父组件控制类型
-::v-deep(.testBox1) {
-  $listMargin: 10vw;
-  $listWidth: calc((100vw - ($waiPadding * 2) - $listMargin) / 5);
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-
-  .ul {
-    width: 100%;
-    height: 36vh;
-    display: flex;
-
-
-    .li {
-      width: $listWidth;
-      position: relative;
-
-      .ready {
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-items: center;
-
-        img {
-          width: 100%;
-        }
-      }
-
-      .userInfo {
-        width: 100%;
-        height: 100%;
-        border-radius: 1.6rem;
-        background: radial-gradient(122% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
-        text-align: center;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        margin-bottom: 3px;
-
-        .userInfo-center {
-          .pic {
-            width: calc(36vh * 0.62);
-            height: calc(36vh * 0.62);
-            border-radius: 50%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            overflow: hidden;
-            margin: 0 auto 2vh auto;
-            position: relative;
-
-            .area {
-              position: absolute;
-              top: calc(36vh * 0.18);
-              color: #203C52;
-              font-size: 5vh;
-              line-height: 1;
-              font-family: 'Saira-ExtraBold';
-              text-align: center;
-
-            }
-
-            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.21rem;
-          }
-
-          .name2 {
-            box-sizing: border-box;
-            padding: 0.1rem 0.4rem;
-            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);
-          }
-
-          .ctrlBox {
-            position: absolute;
-            left: 0;
-            top: 0;
-            border: 5px solid #ffffff;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            background: rgba(0, 0, 0, 0.8);
-            z-index: 2;
-            width: 100%;
-            height: 100%;
-            box-sizing: border-box;
-            border-radius: 1.6rem;
-
-            img {
-              max-width: 100%;
-              max-height: 70%;
-              margin: 10% 0 5% 0;
-            }
-
-            .lable {
-              text-align: center;
-              font-size: 2rem;
-              color: #ffffff
-            }
-          }
-        }
-      }
-
-      .score {
-        height: 18vh;
-        line-height: 18vh;
-        font-size: 12vh;
-        font-family: 'Saira-BlackItalic';
-        border: 0.55rem solid #13ED84;
-        text-align: center;
-        border-radius: 1.6rem;
-        box-sizing: content-box;
-        color: #1A293A;
-        position: relative;
-        background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
-        display: none;
-
-        &::before {
-          content: "";
-          width: 2vw;
-          height: 2vw;
-          display: block;
-          position: absolute;
-          top: -1.5vw;
-          left: 50%;
-          margin-left: -1vw;
-          background-image: url("@/assets/images/test/yuan.png");
-          background-position: center;
-          background-repeat: no-repeat;
-          background-size: 100% 100%;
-          border-radius: 50%;
-          flex-shrink: 0;
-          transition: all 0.5s;
-        }
-      }
-    }
-
-    .disable {
-
-      .userInfo,
-      .score {
-        opacity: 0.5;
-      }
-    }
-
-    .wait {
-
-      .userInfo,
-      .score {
-        opacity: 0.5;
-      }
-    }
-
-
-    &:nth-child(1) {
-      justify-content: space-between;
-    }
-
-    &:nth-child(2) {
-      justify-content: space-evenly;
-
-      .li {
-        margin-left: calc($listMargin/4);
-        margin-right: calc($listMargin/4);
-      }
-    }
-  }
-
-  .ready.ul {
-
-    &:nth-child(1) {
-      .li:nth-child(2) {
-        &::after {
-          content: "";
-          position: absolute;
-          height: 100%;
-          width: 100%;
-          display: block;
-          background-image: url("@/assets/images/test/ready3.png");
-          background-position: center center;
-          background-repeat: no-repeat;
-          background-size: 100%;
-        }
-      }
-    }
-
-    &:nth-child(2) {
-      .li {
-        &::after {
-          content: "";
-          position: absolute;
-          height: 100%;
-          width: 100%;
-          display: block;
-          background-image: url("@/assets/images/test/ready3.png");
-          background-position: center center;
-          background-repeat: no-repeat;
-          background-size: 100%;
-          top: -100%;
-        }
-      }
-    }
-  }
-
-  .hands.ul {
-
-    &:nth-child(1) {
-      .li:nth-child(2) {
-        &::after {
-          background-image: url("@/assets/images/test/ready4.png");
-        }
-      }
-    }
-
-    &:nth-child(2) {
-      .li {
-        &::after {
-          background-image: url("@/assets/images/test/ready4.png");
-        }
-      }
-    }
-  }
-
-  .overlap.ul {
-    transition: all 0.5s;
-
-    .li {
-      .score {
-        display: block;
-      }
-    }
-
-    &:nth-child(1) {
-      margin-top: 5vh;
-
-      .li {
-        &::before {
-          display: none
-        }
-
-        &::after {
-          display: none
-        }
-      }
-    }
-
-    &:nth-child(2) {
-      margin-top: -20vh;
-
-      .li {
-        &::before {
-          display: none
-        }
-
-        &::after {
-          display: none
-        }
-      }
-    }
-  }
-}
-
-::v-deep(.testBox2) {
-  $listMargin: 10vw;
-  $listWidth: calc((100% - $listMargin) / 5);
-
-  .ul {
-    width: 100%;
-    height: 34vh;
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 4vh;
-
-    .li {
-      width: $listWidth;
-      position: relative;
-      height: 100%;
-      border-radius: 3vh;
-      padding: 0.6vw;
-      background: radial-gradient(122% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      box-sizing: border-box;
-
-      .userInfo {
-        width: 100%;
-        height: 100%;
-        border-radius: 1.6rem;
-        background: radial-gradient(122% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
-        text-align: center;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        position: relative;
-
-        .userInfo-center {
-          .pic {
-            width: calc(36vh * 0.62);
-            height: calc(36vh * 0.62);
-            border-radius: 50%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            overflow: hidden;
-            margin: 0 auto 2vh auto;
-            position: relative;
-
-            .area {
-              position: absolute;
-              top: calc(36vh * 0.18);
-              color: #203C52;
-              font-size: 5vh;
-              line-height: 1;
-              font-family: 'Saira-ExtraBold';
-              text-align: center;
-
-            }
-
-            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.21rem;
-          }
-
-          .ctrlBox {
-            position: absolute;
-            left: 0;
-            top: 0;
-            border: 5px solid #ffffff;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            background: rgba(0, 0, 0, 0.8);
-            z-index: 2;
-            width: 100%;
-            height: 100%;
-            box-sizing: border-box;
-            border-radius: 1.6rem;
-
-            img {
-              max-width: 100%;
-              max-height: 70%;
-              margin: 10% 0 5% 0;
-            }
-
-            .lable {
-              text-align: center;
-              font-size: 2rem;
-              color: #ffffff
-            }
-          }
-        }
-      }
-
-      .score {
-        height: 14vh;
-        line-height: 14vh;
-        font-size: 9vh;
-        font-family: 'Saira-BlackItalic';
-        background: #ffffff;
-        box-sizing: border-box;
-        border: 0.55rem solid #13ED84;
-        text-align: center;
-        border-radius: 1.6rem;
-        box-sizing: content-box;
-        color: #1A293A;
-        position: relative;
-        display: none;
-
-        &::before {
-          content: "";
-          width: 2vw;
-          height: 2vw;
-          display: block;
-          position: absolute;
-          top: -1.3vw;
-          left: 50%;
-          margin-left: -1vw;
-          background-image: url("@/assets/images/test/yuan.png");
-          background-position: center;
-          background-repeat: no-repeat;
-          background-size: 100% 100%;
-          border-radius: 50%;
-          flex-shrink: 0;
-          transition: all 0.5s;
-        }
-      }
-    }
-
-    .disable {
-      opacity: 0.5;
-    }
-
-    .wait {
-      opacity: 0.5;
-    }
-  }
-
-  .overlap {
-    .li {
-      .userInfo {
-        height: 6.2vw;
-
-        .userInfo-center {
-          width: 100%;
-          text-align: center;
-          display: flex;
-          align-items: center;
-          cursor: pointer;
-
-          .pic {
-            width: 6.2vw;
-            height: 6.2vw;
-            border-radius: 50%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            overflow: hidden;
-            position: relative;
-            flex-shrink: 0;
-            margin: 0;
-
-            .area {
-              position: absolute;
-              top: 0;
-              left: 0;
-              width: 100%;
-              height: 100%;
-              line-height: 6.2vw;
-              color: #ffffff;
-              font-size: 2.5vw;
-              font-family: 'Saira-ExtraBold';
-              text-align: center;
-              background: rgba(#000000, 0.4)
-            }
-
-            img {
-              width: 100%;
-            }
-          }
-
-
-          .pic2 {
-            box-sizing: border-box;
-            border: 2px solid rgba(26, 41, 58, 0.6315);
-          }
-
-          .name {
-            width: 100%;
-            color: #1A293A;
-            font-size: 1.8rem;
-            border-radius: 2vw;
-            padding: 0.5rem 0;
-            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);
-          }
-        }
-
-      }
-
-      .score {
-        display: block;
-      }
-    }
-  }
-}
-
-::v-deep(.testBox3) {
-  $listMargin: 5vw;
-  $listWidth: calc((100% - $listMargin) / 10);
-
-  .ul {
-    width: 100%;
-    height: 14vh;
-    display: flex;
-    justify-content: space-around;
-    margin-bottom: calc($listMargin / 10);
-
-    .li {
-      width: $listWidth;
-      position: relative;
-      height: 100%;
-      border-radius: 5vh;
-      background: radial-gradient(122% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
-
-      .userInfo {
-        padding: 2vh 0.6vw 0 0.6vw;
-        margin-bottom: 0.8vh;
-
-        .userInfo-center {
-          text-align: center;
-          display: flex;
-          align-items: center;
-          cursor: pointer;
-          border-radius: 1.3vw;
-          height: 2.6vw;
-          background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.6571) 100%);
-          border: 1px solid #FFFFFF;
-
-          .pic {
-            width: 2.6vw;
-            height: 2.6vw;
-            border-radius: 50%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            overflow: hidden;
-            position: relative;
-            flex-shrink: 0;
-
-            .area {
-              position: absolute;
-              top: 0;
-              left: 0;
-              width: 100%;
-              height: 100%;
-              line-height: 2.6vw;
-              color: #ffffff;
-              font-size: 1.4vw;
-              font-family: 'Saira-ExtraBold';
-              text-align: center;
-              background: rgba(#000000, 0.4)
-            }
-
-            img {
-              width: 100%;
-            }
-          }
-
-
-          .pic2 {
-            box-sizing: border-box;
-            border: 2px solid rgba(26, 41, 58, 0.6315);
-          }
-
-          .name {
-            color: #1A293A;
-            font-size: 1rem;
-            margin-left: 0.5vw;
-          }
-
-          .ctrlBox {
-            position: absolute;
-            left: 0;
-            top: 0;
-            border: 5px solid #ffffff;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            background: rgba(0, 0, 0, 0.8);
-            z-index: 2;
-            width: 100%;
-            height: 100%;
-            box-sizing: border-box;
-            border-radius: 5vh;
-
-            img {
-              max-width: 100%;
-              max-height: 60%;
-              margin: 5% 0 5% 0;
-            }
-
-            .lable {
-              text-align: center;
-              font-size: 1rem;
-              color: #ffffff
-            }
-          }
-        }
-      }
-
-      .score {
-        font-size: 3rem;
-        font-family: 'Saira-BlackItalic';
-        text-align: center;
-        color: #1A293A;
-        line-height: 1;
-      }
-    }
-
-    .disable {
-      opacity: 0.5;
-    }
-
-    .wait {
-      opacity: 0.75;
-    }
-
-    .startedAlready {
-      background: #15ef96;
-    }
-  }
-}
-</style>

src/views/train/multiple.vue

@@ -15,7 +15,8 @@
           v-for="(items, indexs) in testListArr " :key="indexs">
           <MultipleItem :ref="(el) => { multipleItemRef(el, item.itemNumber, item.area) }"
             v-for="(item, index) in items" :query="parameter" :area="item.area" :key="index" @returnData="returnData"
-            @getChooseStudent="getChooseStudent" :examState="examState" :needStart="needStart" :styleType="styleType" />
+            @getChooseStudent="getChooseStudent" :examState="examState" :needStart="needStart" :styleType="styleType"
+            :parentMethod="{ initWs, examEnds, openOneTest, startFace, stopFace, faceConfirmOnly, startOneTest, finishOneTest, closeOneTest, suspendFaceRecognitionChannels, resumeFaceRecognitionChannels }" />
         </div>
       </div>
     </div>
@@ -67,12 +68,12 @@
 </template>
 
 <script setup name="Multiple" lang="ts">
-// import { useWs } from '@/utils/trainWs';
-import { initWs, examEnds, openOneTest, startFace, stopFace, faceConfirmOnly, startOneTest, finishOneTest, closeOneTest, suspendFaceRecognitionChannels, resumeFaceRecognitionChannels } from '@/utils/ws'
+import { useWs } from '@/utils/trainWs';
+// import { initWs, examEnds, openOneTest, startFace, stopFace, faceConfirmOnly, startOneTest, finishOneTest, closeOneTest, suspendFaceRecognitionChannels, resumeFaceRecognitionChannels } from '@/utils/ws'
 import { initSpeech, speckText, playMusic, controlMusic, speckCancel, chineseNumber } from '@/utils/speech'
 import { useWebSocket } from '@/utils/handWs';
 const { handWs, startDevice, startHand, stateHand } = useWebSocket();
-// const { initWs, examEnds, openOneTest, startFace, stopFace, faceConfirmOnly, startOneTest, finishOneTest, closeOneTest, suspendFaceRecognitionChannels, resumeFaceRecognitionChannels } = useWs();
+const { initWs, examEnds, openOneTest, startFace, stopFace, faceConfirmOnly, startOneTest, finishOneTest, closeOneTest, suspendFaceRecognitionChannels, resumeFaceRecognitionChannels } = useWs();
 const { proxy } = getCurrentInstance() as any;
 const router = useRouter();
 const route = useRoute();

src/views/train/test.vue

@@ -113,14 +113,14 @@
 </template>
 
 <script setup name="TrainTest" lang="ts">
-// import { useWs } from '@/utils/trainWs';
-import { initWs, examEnds, openOneTest, startFace, stopFace, faceConfirmOnly, startOneTest, finishOneTest, closeOneTest, suspendFaceRecognitionChannels, resumeFaceRecognitionChannels } from '@/utils/ws'
+import { useWs } from '@/utils/trainWs';
+// import { initWs, examEnds, openOneTest, startFace, stopFace, faceConfirmOnly, startOneTest, finishOneTest, closeOneTest, suspendFaceRecognitionChannels, resumeFaceRecognitionChannels } from '@/utils/ws'
 import { initSpeech, speckText, playMusic, controlMusic, speckCancel, chineseNumber } from '@/utils/speech'
 import { useWebSocket } from '@/utils/handWs';
 import dayjs from 'dayjs'
 import dataDictionary from "@/utils/dataDictionary"
 const { handWs, startDevice, startHand, stateHand } = useWebSocket();
-// const { initWs, examEnds, openOneTest, startFace, stopFace, faceConfirmOnly, startOneTest, finishOneTest, closeOneTest, suspendFaceRecognitionChannels, resumeFaceRecognitionChannels } = useWs();
+const { initWs, examEnds, openOneTest, startFace, stopFace, faceConfirmOnly, startOneTest, finishOneTest, closeOneTest, suspendFaceRecognitionChannels, resumeFaceRecognitionChannels } = useWs();
 const { proxy } = getCurrentInstance() as any;
 const router = useRouter();
 const route = useRoute();