日常开发

src/components/MultipleItem/index.vue

@@ -416,6 +416,7 @@ const getAchievement = (data: any) => {
   data.count = count || "0";
   data.score = data.score || "0";
   currentResultObj.value = data;
+  //成绩返回给列表
   emit('returnData', { count: data.count, area: area });
   //违规处理
   let arr = backReason.value;

src/components/MultipleItemRanking/index.vue

@@ -1,52 +1,65 @@
 <template>
   <div>
-    <Transition :enter-active-class="proxy?.animate.face.enter" :leave-active-class="proxy?.animate.face.right">
-      <div class="mask" v-if="windowState" @click="close">
+    <Transition :enter-active-class="proxy?.animate.mask.enter" :leave-active-class="proxy?.animate.mask.leave">
+      <div class="mask" v-if="windowState" @click="close"></div>
+    </Transition>
+    <Transition :enter-active-class="proxy?.animate.rankingWindow.enter"
+      :leave-active-class="proxy?.animate.rankingWindow.leave">
+      <div class="multipleItemRanking" v-if="windowState" @click="close">
         <div class="rankingBox">
           <div class="top">
             <div class="item two">
               <div>
                 <div class="userInfo">
-                  <div class="maozi maozi2">2</div>
+                  <div class="maozi maozi2">
+                    <div class="num">2</div>
+                  </div>
                   <div class="touxiang">
-                    <img :src="twoObj.faceCheckStu.face_pic || twoObj.faceCheckStu.logo_url" v-if="twoObj.faceCheckStu.face_pic || twoObj.faceCheckStu.logo_url" />
+                    <img :src="twoObj?.faceCheckStu.face_pic || twoObj?.faceCheckStu?.logo_url"
+                      v-if="twoObj?.faceCheckStu?.face_pic || twoObj?.faceCheckStu?.logo_url" />
                     <img src="@/assets/images/test/profilePicture2.png" v-else />
                   </div>
                   <div class="name">
-                    {{ twoObj.faceCheckStu.name }}
+                    {{ twoObj?.faceCheckStu?.name || "名字" }}
                   </div>
                 </div>
-                <div class="score">{{ twoObj.count || 0 }}</div>
+                <div class="score">{{ twoObj.count || 0 }} <span>{{unit}}</span></div>
               </div>
             </div>
             <div class="item one">
               <div>
                 <div class="userInfo">
-                  <div class="maozi maozi1">1</div>
+                  <div class="maozi maozi1">
+                    <div class="num">1</div>
+                  </div>
                   <div class="touxiang">
-                    <img :src="oneObj.faceCheckStu.face_pic || oneObj.faceCheckStu.logo_url" v-if="oneObj.faceCheckStu.face_pic || oneObj.faceCheckStu.logo_url" />
+                    <img :src="oneObj.faceCheckStu?.face_pic || oneObj?.faceCheckStu?.logo_url"
+                      v-if="oneObj?.faceCheckStu?.face_pic || oneObj?.faceCheckStu?.logo_url" />
                     <img src="@/assets/images/test/profilePicture2.png" v-else />
                   </div>
                   <div class="name">
-                     {{ oneObj.faceCheckStu.name }}
+                    {{ twoObj?.faceCheckStu?.name || "名字" }}
                   </div>
                 </div>
-                <div class="score">{{ oneObj.count || 0 }}</div>
+                <div class="score">{{ oneObj.count || 0 }} <span>{{unit}}</span></div>
               </div>
             </div>
             <div class="item three">
               <div>
                 <div class="userInfo">
-                  <div class="maozi maozi3">3</div>
+                  <div class="maozi maozi3">
+                    <div class="num">3</div>
+                  </div>
                   <div class="touxiang">
-                    <img :src="threeObj.faceCheckStu.face_pic || threeObj.faceCheckStu.logo_url" v-if="threeObj.faceCheckStu.face_pic || threeObj.faceCheckStu.logo_url" />
+                    <img :src="threeObj?.faceCheckStu?.face_pic || threeObj?.faceCheckStu?.logo_url"
+                      v-if="threeObj?.faceCheckStu?.face_pic || threeObj?.faceCheckStu?.logo_url" />
                     <img src="@/assets/images/test/profilePicture2.png" v-else />
                   </div>
                   <div class="name">
-                    {{ threeObj.faceCheckStu.name }}
+                    {{ twoObj?.faceCheckStu?.name || "名字" }}
                   </div>
                 </div>
-                <div class="score">{{ threeObj.count || 0 }}</div>
+                <div class="score">{{ threeObj.count || 0 }} <span>{{unit}}</span></div>
               </div>
             </div>
           </div>
@@ -58,7 +71,10 @@
 
 </template>
 <script setup lang="ts">
+const route = useRoute();
+import dataDictionary from "@/utils/dataDictionary"
 const { proxy } = getCurrentInstance() as any;
+let project: any = route.query.project;
 
 //父值
 const props = defineProps({
@@ -69,37 +85,38 @@ const props = defineProps({
 });
 
 const data = reactive<any>({
+  unit: "",//单位
   windowState: false,//窗口状态
   oneObj: {},
   twoObj: {},
   threeObj: {},
 });
 
-const { windowState, oneObj, twoObj, threeObj } = toRefs(data);
+const {unit, windowState, oneObj, twoObj, threeObj } = toRefs(data);
 
 //打开
 const open = () => {
   let list = JSON.parse(JSON.stringify(props.testList))
-  list.sort((a:any, b:any) => Number(b.count) - Number(a.count));
-  if(list[0]){
+  list.sort((a: any, b: any) => Number(b.count) - Number(a.count));
+  if (list[0]) {
     oneObj.value = list[0];
   }
-  if(list[1]){
+  if (list[1]) {
     twoObj.value = list[1];
   }
-  if(list[2]){
+  if (list[2]) {
     threeObj.value = list[2]
   }
   windowState.value = true;
 };
 
 //关闭
-const close = (data?: any) => {
+const close = () => {
   windowState.value = false;
 };
 
 /**
- * 播报时间
+ * 定时关闭
  */
 watch(
   () => windowState.value,
@@ -109,12 +126,17 @@ watch(
         if (windowState.value == true) {
           close();
         }
-      }, 8000)
+      }, 6000)
     }
   },
   { immediate: true }
 );
 
+onMounted(() => {
+  let dic: any = dataDictionary;
+  unit.value = dic.unit[project];
+})
+
 //暴露给父组件用
 defineExpose({
   open,
@@ -128,15 +150,24 @@ defineExpose({
   width: 100vw;
   top: 0;
   left: 0;
-  background: rgba(0, 0, 0, 0.8);
+  background: rgba(0, 0, 0, 0.78);
   z-index: 998;
+}
+
+.multipleItemRanking {
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  top: 0;
+  left: 0;
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
+  z-index: 999;
 }
 
 .rankingBox {
-  width: 50%;
+  width: 80%;
 
   .top {
     display: flex;
@@ -151,12 +182,20 @@ defineExpose({
         flex-direction: column;
 
         .maozi {
-          width: 60px;
-          height: 40px;
-          line-height: 40px;
-          text-align: center;
-          font-size: 20px;
+          width: 3.5vw;
+          height: 2.2vw;
+          margin-bottom: 3px;
           color: #ffffff;
+          font-family: 'Saira-ExtraBold';
+          display: flex;
+          align-items: flex-end;
+          justify-content: center;
+
+          .num {
+            font-size: 1.1vw;
+            line-height: 1.1vw;
+            padding-top: 0.5vw;
+          }
         }
 
         .maozi1 {
@@ -175,21 +214,41 @@ defineExpose({
         }
 
         .touxiang {
-          width: 180px;
-          height: 180px;
+          width: 12.5vw;
+          height: 12.5vw;
+          box-sizing: border-box;
+          border-radius: 50%;
+          position: relative;
+          margin-bottom: 5px;
+          overflow: hidden;
 
           img {
             width: 100%;
             height: 100%;
           }
+
+          &::before {
+            content: "";
+            width: 12.5vw;
+            height: 12.5vw;
+            box-sizing: border-box;
+            border: 0.5vw solid rgba(26, 41, 58, 0.6);
+            border-radius: 50%;
+            position: absolute;
+            left: 0;
+            top: 0;
+          }
         }
 
         .name {
+          font-size: 1.8vw;
           color: #000000;
-          height: 50px;
-          line-height: 50px;
-          border-radius: 25px;
-          padding: 0 20px;
+          width: 12.5vw;
+          height: 2.8vw;
+          line-height: 2.8vw;
+          border-radius: 1.5vw;
+          box-sizing: border-box;
+          text-align: center;
           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);
         }
@@ -197,25 +256,35 @@ defineExpose({
 
       .score {
         color: #ffffff;
-        font-size: 24px;
+        font-size: 3vw;
         text-align: center;
+        height: 5vw;
+        line-height: 5vw;
+        font-family: 'Saira-ExtraBold';
+        display: flex;
+        justify-content: center;
+        span{
+          font-size: 2vw;
+          display: block;
+          margin-left: 5px;
+        }
       }
     }
 
     .two {
       position: relative;
-      bottom: -34px;
+      bottom: -3vw;
     }
 
     .three {
       position: relative;
-      bottom: -70px;
+      bottom: -4.5vw;
     }
   }
 
   .bottom {
     width: 100%;
-    height: 30vh;
+    height: 15vw;
     background: url('@/assets/images/ranking/jiangtai.png') center center no-repeat;
     background-size: 100% 100%;
   }

src/utils/speech.ts

@@ -101,25 +101,28 @@ export const speckText = (text: any) => {
     { lable: '各就位!', value: 'longRun.mp3' },//长跑口令
     { lable: '跑', value: 'run.mp3' },
     { lable: '哨声', value: 'shaosheng.mp3' },
-    { lable: '哨声2', value: 'shaosheng2.mp3' }
+    { lable: '哨声2', value: 'shaosheng2.mp3' },
+    { lable: '预备2', value: 'Ready2.mp3' },
   ];
   speechText = '';
-  console.log('播报', text);
   let obj = list.find((item: any) => {
     return item.lable == text;
   });
   if (obj != undefined) {
+    console.log('音频播报', text);
     //用本地文件
     let url = `./static/audio/${obj.value}`;
     myAudio = new Audio(url);
     myAudio.play();
   } else {
     if (browserSupport == true) {
+      console.log('TTS播报', text);
       //用TTS
       speech.speak({ text: text.toString() }).then(() => {
         speech.cancel(); //播放结束后调用
       });
     } else {
+      console.log('百度播报', text);
       //用百度语音
       let tok = localStorage.getItem('tok') || '';
       let url = `https://tsn.baidu.com/text2audio?tex=${encodeURI(text)}&tok=${tok}&cuid=baike&lan=ZH&ctp=1&vol=15&rate=32&per=0&spd=7&pit=4`;

src/views/train/multiple.vue

@@ -4,7 +4,7 @@
     <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, 'time4': styleType == 4, }"
-        v-show="(needStart && [42].includes(examState))">
+        v-show="(needStart && [42].includes(examState)) || (['situp', 'jumprope', 'jumpingjack', 'highknees', 'verticaljump', 'pullup', 'sidepullup', 'squat', 'jumpleftright', 'crossjump', 'kneeupclap'].includes(parameter.project) && [42].includes(examState))">
         {{
           time.countdownNum
         }}
@@ -34,11 +34,11 @@
       </template>
       <template v-else>
         <template v-if="examState == 43">
-          <!-- <div class="btn startBtn" @click="getReady" v-if="['jumprope', 'jumpingjack', 'highknees', 'situp'].includes(parameter.project)">
+          <div class="btn startBtn" @click="getReady"
+            v-if="['situp', 'jumprope', 'jumpingjack', 'highknees', 'verticaljump', 'pullup', 'sidepullup', 'squat', 'jumpleftright', 'crossjump', 'kneeupclap'].includes(parameter.project)">
             开始测试
           </div>
-          <div class="btn startBtn" @click="getStartOneTest" v-else>开始测试</div> -->
-          <div class="btn startBtn" @click="getStartOneTest">开始测试</div>
+          <div class="btn startBtn" @click="getStartOneTest" v-else>开始测试</div>
         </template>
       </template>
       <div class="btn" :class="{ testRecordBtn: showReportList }" @click="getTestRecord"
@@ -64,14 +64,16 @@
         <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 class="lable">倒计时</div>
+              <div class="value" :class="{ 'transparent': time.ready > 5 }">{{ time.ready }}</div> -->
+              <div class="lable2">预 备</div>
             </div>
           </div>
         </div>
       </Transition>
     </div>
     <!--倒计时结束-->
+    <!--选择学生-->
     <ChooseStudent ref="chooseStudentRef" @returnData="returnStudent" />
     <!--排行榜-->
     <MultipleItemRanking ref="multipleItemRankingRef" :testList="testList"></MultipleItemRanking>
@@ -398,7 +400,7 @@ const returnData = (data: any) => {
   });
   let obj = Object.assign(testList.value[index], data);
   testList.value[index] = JSON.parse(JSON.stringify(obj));
-  console.log('testList.value', testList.value);
+  // console.log('testList.value', testList.value);
 
   if (examState.value == 0) {
     let flag = false;
@@ -418,7 +420,7 @@ const returnData = (data: any) => {
         if (handcontroller && ctrl) {
           speckText(`请${ctrl}区举左手开始识别`);
         } else {
-          //proxy?.$modal.msgWarning(`请点击右下角的【开始识别】`);
+          proxy?.$modal.msgWarning(`请点击右下角的【开始识别】`);
         }
       }
     }
@@ -515,6 +517,7 @@ const returnData = (data: any) => {
     if (flag) {
       console.log('变更状态：', 3);
       examState.value = 3;
+      //打开排行榜
       multipleItemRankingRef.value.open();
     }
   }
@@ -562,6 +565,7 @@ const getReady = () => {
       multipleItemRefList.value[i].getStopFace();
     }
   }
+  speckText("预备2");
   time.value.ready = 6;
   timerManager.value.readyTimer = setInterval(() => {
     time.value.ready--;
@@ -569,7 +573,7 @@ const getReady = () => {
       getClearTimer('readyTimer');
       getStartOneTest();
     } else {
-      speckText(time.value.ready);
+      //speckText(time.value.ready);
     }
   }, 1000);
 };
@@ -820,7 +824,7 @@ const initHand = () => {
 watch(
   () => time.value.countdownNum,
   (newData) => {
-    if (examState.value != 42 || !needStart.value) {
+    if (examState.value != 42) {
       return false;
     }
     if (newData >= 30 && newData < time.value.testTime) {
@@ -868,7 +872,7 @@ const testListArr = computed(() => {
       }
     }
   }
-  console.log('list', list);
+  // console.log('list', list);
   return list;
 });
 
@@ -924,7 +928,7 @@ onBeforeMount(() => {
   }
   //需要开始按钮的项目
   let myList = ['situp', 'jumprope', 'jumpingjack', 'highknees', 'verticaljump', 'pullup', 'sidepullup', 'squat', 'jumpleftright', 'crossjump', 'kneeupclap'];
-  if (myList.includes(project)) {
+  if (myList.includes(project) && styleType.value == 3) {
     needStart.value = true;
   }
   //加载音乐
@@ -1080,6 +1084,10 @@ $waiPadding: 6.51rem;
       .transparent {
         opacity: 0;
       }
+
+      .lable2 {
+        font-size: 4.5rem;
+      }
     }
   }
 }