Browse Source

修改文本之用户端

plg 3 tháng trước cách đây
mục cha
commit
8ae3be176b
4 tập tin đã thay đổi với 210 bổ sung17 xóa
  1. 1 0
      src/stores/modules/userInfo.ts
  2. 92 6
      src/views/CognizeFaceDot.vue
  3. 4 4
      src/views/Report.vue
  4. 113 7
      src/views/Stroop.vue

+ 1 - 0
src/stores/modules/userInfo.ts

@@ -68,6 +68,7 @@ const userInfoStore = defineStore(
       isPass.value = false
       isPassETB01.value = false
       isPassDot.value = false
+      isStroop.value = false
       planCurrentNum.value = 0
       unreadNum.value = 0
     }

+ 92 - 6
src/views/CognizeFaceDot.vue

@@ -59,6 +59,8 @@ const currentType = ref(0)
 //当前测试的轮数
 const turnsNumber = ref<number>(0)
 
+const responseFlag = ref<boolean>(false)
+
 //引入静态资源的方法
 // vue3+vite   实现动态加载图片
 const requireImg = (name: string) => {
@@ -327,7 +329,7 @@ const recordUserResponse = () => {
                 }
             }
         }
-    }, 2000);
+    }, formalTest.value == '0' ? 2000000 : 2000);
 }
 const endTime = () => {
     flag.value = clearInterval(flag.value);
@@ -505,11 +507,15 @@ const submitData = async () => {
     neutralResponse2.map((item) => {
         neutralAllTime2 += item.responseTime;
     });
+    let scoreFin = blockRight1.length / turnsNumber.value * 100
+    if (scoreFin > 60) {
+        userInfo.saveIspass('FDOT')
+    }
+
 
-    userInfo.saveIspass('FDOT')
     if (!currentType.value) {
         ElMessage({
-            message: `正确率为${((blockRight1.length / turnsNumber.value) * 100).toFixed(2)}%`,
+            message: `正确率为${(scoreFin).toFixed(2)}%`,
             type: "info"
         })
         setTimeout(() => {
@@ -868,26 +874,39 @@ const randomList = () => {
     //获取12个人,随机重复两个人
     randomArr.value = randomArr.value.concat(arrList.value);
 }
+const responseF = ref<boolean>(false)
+const responseFTime = ref<any>()
+const errorFlagFun = () => {
+    responseF.value = true
+    responseFTime.value = setTimeout(() => {
+        responseF.value = false
+    }, 500)
+}
 const userClick = (param: any) => {
     if (disableClick.value) {
         // 播放错误点击声音并阻止此次点击事件
-        banClickVoice.value.play();
+        // banClickVoice.value.play();
         return;
     }
     //如果两秒内用户点击了选项按钮
     timingThree.value = clearTimeout(timingThree.value);
     // 播放正确点击声音
-    clickVoice.value.play();
+    // clickVoice.value.play();
     //关闭提示点显示
     dotShow.value = false;
     //关闭计时器
     endTime();
+    errorFlagFun
+    responseFlag.value = (param == activeBlock.value.dotType) ? true : false;
+    errorFlagFun()
 
     if (activeBlock.value.type == 0) {
         blockList1.value[cumulation.value].responseTime = commonTime.value * 10; //反应时(ms)
         blockList1.value[cumulation.value].correct =
             param == activeBlock.value.dotType ? 1 : 0; //反应是否正确
 
+
+
         //切换数组二
         activeBlock.value = blockList2.value[cumulation.value];
         changeImg("2", cumulation.value);
@@ -898,6 +917,7 @@ const userClick = (param: any) => {
         blockList2.value[cumulation.value].correct =
             param == activeBlock.value.dotType ? 1 : 0; //反应是否正确
 
+
         if (cumulation.value >= turnsNumber.value) {
             //调用接口,跳转页面
             submitData();
@@ -938,6 +958,10 @@ const userClick = (param: any) => {
             :stroke-width="48" :percentage="(cumulation / turnsNumber) * 100" style="width: 50%">
             <span style="color: #000;font-size: 20px;"> {{ cumulation }}/{{ turnsNumber }}</span>
         </el-progress>
+        <p class="correct_txt" v-show="responseF && formalTest == '0'">
+            <img src="../assets/cognize/correct.png" alt="" v-show="responseFlag">
+            <img src="../assets/cognize/wrong.png" v-show="!responseFlag" alt=""><span></span>
+        </p>
         <!-- <Transition name="fade"> -->
         <p :key="countDownStr" v-if="countDownShow" class="countdownStr">{{ countDownStr }}</p>
         <!-- </Transition> -->
@@ -951,6 +975,7 @@ const userClick = (param: any) => {
             <img class="faceImg mt100" :src="bottomImg" alt="" />
         </div>
         <div class="imgBox" v-show="dotShow">
+            <!-- {{ activeBlock }} -->
             <div class="target">
                 {{ activeBlock?.dotPos == "0" ? activeBlock?.dot : "" }}
             </div>
@@ -958,10 +983,55 @@ const userClick = (param: any) => {
                 {{ activeBlock?.dotPos == "1" ? activeBlock?.dot : "" }}
             </div>
         </div>
+        <div class="tip_cla" v-show="dotShow && formalTest == '0'">
+            <span class="font_one" v-show="activeBlock?.dotType == '0'">当前显示为 <span class="font_one_sub sbclass">
+                    :</span>
+                ,请点击<span class="font_two_sub sbclass">左键</span></span>
+            <span class='font_one' v-show="activeBlock?.dotType == '1'">当前显示为 <span class="font_one_sub sbclass">
+                    ..</span>,请点击鼠标<span class="font_two_sub sbclass">右键</span></span>
+        </div>
         <CpdmMessage ref="cpdmMe" />
     </div>
 </template>
-<style lang="scss">
+<style scoped>
+.sbclass {
+
+    animation-duration: 1s;
+    animation-name: slidein;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+}
+
+@keyframes slidein {
+    from {
+        /* margin-left: 100%; */
+        /* width: 300%; */
+        font-size: 20px;
+    }
+
+    to {
+        /* margin-left: 0%;
+    width: 100%; */
+        font-size: 30px;
+    }
+}
+</style>
+<style lang="scss" scoped>
+.font_one {
+    letter-spacing: 3px;
+}
+
+.font_one_sub {
+    font-size: 50px;
+    font-weight: 700;
+}
+
+.font_two_sub {
+    color: red;
+    font-size: 35px;
+    font-weight: 700;
+}
+
 .cognize_plu {
     width: 100%;
     height: 100vh;
@@ -1069,4 +1139,20 @@ const userClick = (param: any) => {
     bottom: 0;
     margin: auto;
 }
+
+.correct_txt {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 100px;
+    text-align: center;
+}
+
+.tip_cla {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 200px;
+    text-align: center;
+}
 </style>

+ 4 - 4
src/views/Report.vue

@@ -261,7 +261,8 @@ onUnmounted(() => {
                             </div>
                         </div>
                         <div class="report_echarts_out">
-                            <div ref="echarts_ld" style="width:400px;height:300px" v-show="goFlag != 'SHAPE_RANDOM'">
+                            <div ref="echarts_ld" style="width:400px;height:300px"
+                                v-show="!(goFlag == 'SHAPE_RANDOM' || goFlag == 'ETB01' || goFlag == 'FDOT' || goFlag == 'EMOTION_STROOP')">
 
                             </div>
                             <div
@@ -281,9 +282,8 @@ onUnmounted(() => {
 
                             </div>
                         </div>
-                        <!-- v-show="goFlag=="SHAPE_RANDOM"" -->
-                        <div v-show="goFlag != 'SHAPE_RANDOM'" v-for="item, index in echarts_name_list"
-                            style="padding-top:20px">
+                        <div v-show="!(goFlag == 'SHAPE_RANDOM' || goFlag == 'ETB01' || goFlag == 'FDOT' || goFlag == 'EMOTION_STROOP')"
+                            v-for="item, index in echarts_name_list" style="padding-top:20px">
                             <div class="des_zhishu">{{ item.name }}</div>
                             <div class="report_des_out">
                                 <div class="score" style="display: flex;align-items: center;margin-bottom: 20px;">

+ 113 - 7
src/views/Stroop.vue

@@ -60,6 +60,8 @@ const startTime1 = ref<any>()
 const cpdmMe = ref<any>()
 
 const saveStart = ref<boolean>(false)
+
+const responseFlag = ref<boolean>(false)
 onMounted(() => {
     //接收参数
     planId.value = route.params.planId as string;
@@ -161,7 +163,29 @@ const showFont = () => {
     time2.value = setTimeout(() => {
         clickColor('none')
         //开始调用方法
-    }, 2000);
+    }, formalTest.value == '0' ? 2000000 : 2000);
+
+    //
+    if (formalTest.value == '0') {
+
+        if (list.value[numberFlag.value].color == 'red') {
+            needColor.value = '红色'
+            needJ.value = 'F键'
+        } else if (list.value[numberFlag.value].color == 'yellow') {
+            needColor.value = '黄色'
+            needJ.value = 'G键'
+
+        } else if (list.value[numberFlag.value].color == 'blue') {
+            needColor.value = '蓝色'
+            needJ.value = 'H键'
+
+        } else if (list.value[numberFlag.value].color == 'green') {
+            needColor.value = '绿色'
+            needJ.value = 'J键'
+
+        }
+    }
+
 }
 
 
@@ -174,6 +198,12 @@ const showAdd = () => {
         showFont()
     }, 2000)
 }
+//出现的颜色
+const needColor = ref<string>('')
+//出现需要按下的按键
+const needJ = ref<string>('')
+
+const isCom = ref<boolean>(false)
 
 //调用当前方法
 const clickColor = async (val: string) => {
@@ -193,29 +223,40 @@ const clickColor = async (val: string) => {
         clearTimeout(time2.value)
 
     }
-
-
     //当数是19时----就去保存了
     //修改文件
+    responseFlag.value = false
     let currentP = false
     if (list.value[numberFlag.value].color == 'red') {
+        needColor.value = '红色'
+        needJ.value = 'F键'
         if (val == 'f') {
+            responseFlag.value = true
             currentP = true
         }
     } else if (list.value[numberFlag.value].color == 'yellow') {
+        needColor.value = '黄色'
+        needJ.value = 'G键'
         if (val == 'g') {
+            responseFlag.value = true
             currentP = true
         }
     } else if (list.value[numberFlag.value].color == 'blue') {
+        needColor.value = '蓝色'
+        needJ.value = 'H键'
         if (val == 'h') {
+            responseFlag.value = true
             currentP = true
         }
     } else if (list.value[numberFlag.value].color == 'green') {
+        needColor.value = '绿色'
+        needJ.value = 'J键'
         if (val == 'j') {
+            responseFlag.value = true
             currentP = true
         }
     }
-
+    timeFun()
 
     let obj = {
         //按键
@@ -264,7 +305,7 @@ const clickColor = async (val: string) => {
             })
 
 
-            if (score > 60) {
+            if (score >= 60) {
                 //正确率大于60  时
                 //设置通过的标志
                 userInfo.saveIspass(flag.value)
@@ -343,6 +384,13 @@ const clickColor = async (val: string) => {
 
 
 }
+const errorTime = ref<any>();
+const timeFun = () => {
+    isCom.value = true
+    errorTime.value = setTimeout(() => {
+        isCom.value = false
+    }, 500)
+}
 
 
 
@@ -471,7 +519,10 @@ const formatterData = () => {
                 <span style="color: #000;font-size: 20px;">{{ numberFlagTem }}/{{ allCount }}</span>
             </el-progress>
         </div>
-
+        <p class="correct_txt" v-show="formalTest == '0' && isCom">
+            <img src="../assets/cognize/correct.png" alt="" v-show="responseFlag">
+            <img src="../assets/cognize/wrong.png" v-show="!responseFlag" alt=""><span></span>
+        </p>
         <p v-if="timingShow" class="timingBox">{{ countDownStr }}</p>
         <div v-if="list.length > 0 && !timingShow" class="timingBox">
             <div v-if="(formalTest == '0' && numberFlag <= 19 && !addFlag) || (formalTest == '1' && numberFlag <= 89 && !addFlag)"
@@ -481,6 +532,11 @@ const formatterData = () => {
         <div v-if="addFlag" style="text-align: center" class="timingBox">
             <img src="../assets/cognize/whiteFlag-new.png" alt="" style="width: 50px; height: 50px; margin-top: 20%" />
         </div>
+        <div class="tip_cla" v-show="!timingShow && formalTest == '0' && !addFlag">
+            当前颜色为<span class="font_sub_one sbclass">{{ needColor }}</span>,请按下键盘 <span class="font_sub_two sbclass">{{
+                needJ }}</span>
+
+        </div>
     </div>
     <CpdmMessage ref="cpdmMe" />
 </template>
@@ -488,7 +544,40 @@ const formatterData = () => {
 
 
 
-<style lang="scss">
+
+<style lang="scss" scoped>
+.sbclass {
+    animation-duration: 1s;
+    animation-name: slidein;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+}
+
+@keyframes slidein {
+    from {
+        /* margin-left: 100%; */
+        /* width: 300%; */
+        font-size: 20px;
+    }
+
+    to {
+        /* margin-left: 0%;
+    width: 100%; */
+        font-size: 30px;
+    }
+}
+
+.font_sub_one {
+
+    font-size: 35px;
+    font-weight: 700;
+}
+
+.font_sub_two {
+    font-size: 35px;
+    font-weight: 700;
+}
+
 .butt {
     width: 100px;
     text-align: center;
@@ -698,4 +787,21 @@ const formatterData = () => {
     right: 0;
     bottom: 0;
 }
+
+.correct_txt {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 100px;
+    text-align: center;
+}
+
+.tip_cla {
+    letter-spacing: 3px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 200px;
+    text-align: center;
+}
 </style>