修改认知任务Stroop 认知任务

src/api/plan.ts

@@ -29,6 +29,8 @@ const queryCognizeDetailUrl = '/cognitive/findByFlag'
 const getCurrentTimeUrl = '/system/getSystemTime'
 
 const saveETBUrl = '/record/saveEmotionRecord'
+
+const saveStroopUrl = '/record/saveEmotionRecord2'
 //首页API
 export const homeApi = (val: any) => {
     return http<any>(
@@ -165,5 +167,15 @@ export const saveETBApi = (val: any) => {
 
 }
 
+//保存认知任务信息
+export const saveStroopApi = (val: any) => {
+    return http<any>({
+        method: 'post',
+        url: saveStroopUrl,
+        data: { ...val }
+    })
+
+}
+
 
 

src/router/index.ts

@@ -123,6 +123,11 @@ const routes = [
     path: '/ETBexperiment_new/:planId/:planName/:flag/:flagName:/:formalTest',
     name: 'ETBexperimentNew',
     component: () => import('@/views/ETBexperiment_new.vue')
+  },
+  {
+    path: '/Stroop/:planId/:planName/:flag/:flagName:/:formalTest',
+    name: 'Stroop',
+    component: () => import('@/views/Stroop.vue')
   }
 ]
 const router = createRouter({

src/stores/modules/userInfo.ts

@@ -23,6 +23,8 @@ const userInfoStore = defineStore(
     const isPassETB01 = ref<boolean>(false)
     //这是点探测的标志
     const isPassDot = ref<boolean>(false)
+    //这是Stroop 的标志
+    const isStroop = ref<boolean>(false)
     //将通过状态改变为通过false
     const saveIspass = (flag: string) => {
       //这个是形状知觉的练习测试通过标志
@@ -31,7 +33,9 @@ const userInfoStore = defineStore(
       } else if (flag == 'ETB01') {
         isPassETB01.value = true;
       } else if (flag == 'FDOT') {
-        isPassDot.value = true
+        isPassDot.value = true;
+      } else if (flag == 'EMOTION_STROOP') {
+        isStroop.value = true;
       }
 
     }
@@ -67,7 +71,7 @@ const userInfoStore = defineStore(
       planCurrentNum.value = 0
       unreadNum.value = 0
     }
-    return { planCurrentNum, clearUserInfo, savePlanCurrentNum, token, saveToken, userInfo, saveUserInfo, isPass, isPassETB01, isPassDot, saveIspass, unreadNum, saveUnreadNum }
+    return { planCurrentNum, clearUserInfo, savePlanCurrentNum, token, saveToken, userInfo, saveUserInfo, isPass, isPassETB01, isPassDot, isStroop, saveIspass, unreadNum, saveUnreadNum }
   },
   { persist: true }
 )

src/views/Cognize.vue

@@ -41,6 +41,9 @@ onMounted(() => {
     if (flag.value == 'FDOT') {
         isPass.value = userInfoStore().isPassDot
     }
+    if (flag.value == 'EMOTION_STROOP') {
+        isPass.value = userInfoStore().isStroop
+    }
     //根据flag 查询认知任务详情
 
     //进到界面开始轮询
@@ -88,6 +91,14 @@ const startCog = (val: number) => {
             })
     }
 
+    if (flag.value == 'EMOTION_STROOP') {
+        router.push(
+            {
+                name: 'Stroop',
+                params: { planId: planId.value, planName: planName.value, flag: flag.value, flagName: cognizeDetail.value.name, formalTest: val }
+            })
+    }
+
 
 
     // if (num.value == '3') {

src/views/Stroop.vue

@@ -0,0 +1,701 @@
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue'
+import CpdmMessage from '../components/CpdmMessage.vue'
+import { useRoute, useRouter } from 'vue-router';
+import { userInfoStore } from '@/stores'
+import { arMA } from 'date-fns/locale';
+import { getCurrentTimeApi, saveStroopApi } from '@/api/plan';
+import { userPlanDetailApi } from '@/api/home';
+import { getUnread, planNumGet } from '@/utils/test';
+import { ElMessage } from 'element-plus';
+
+const route = useRoute()
+const router = useRouter()
+//获取个人信息
+const userInfo = userInfoStore()
+
+const testFlag = ref<boolean>(true)
+const planId = ref<string>('');
+const planName = ref<string>('');
+const flag = ref<string>('');
+const flagName = ref<string>('');
+
+//是否是练习测试
+const formalTest = ref<string>('')
+
+//测试总轮数
+const allCount = ref<number>(20)
+//数据列表
+const list = ref<any>({
+
+})
+
+//是否显示倒计时
+const timingShow = ref<boolean>(false)
+//倒计时字段
+const countDownStr = ref<string>('开始测试')
+
+//倒计时计时器1
+const time1 = ref<any>()
+//倒计时计时器2
+const time2 = ref<any>()
+//倒计时计时器3
+const time3 = ref<any>()
+
+const addFlag = ref<boolean>(false)
+//
+const fontFlag = ref<boolean>(false)
+
+//计时器
+const timeNum1 = ref<number>(5)
+
+//开始测试 测试到第几轮的标志
+const numberFlag = ref<number>(0)
+const numberFlagTem = ref<number>(0)
+//保存数据的格式
+const recordResult = ref<any>([])
+
+const startTime1 = ref<any>()
+
+const cpdmMe = ref<any>()
+
+const saveStart = ref<boolean>(false)
+onMounted(() => {
+    //接收参数
+    planId.value = route.params.planId as string;
+
+    planName.value = route.params.planName as string;
+
+    flag.value = route.params.flag as string
+
+    flagName.value = route.params.flagName as string
+
+    formalTest.value = route.params.formalTest as string
+
+
+    //组合数据后
+    if (formalTest.value == '0') {
+        allCount.value = 20
+    } else {
+        allCount.value = 90
+    }
+    formatterData();
+    //开始随机数据进行
+
+    //开始显示倒计时
+    countdown()
+
+    //监听电脑按键
+    document.addEventListener("keydown", listenFun)
+
+    getStartTime()
+
+})
+const getStartTime = async () => {
+    let res: any = await getCurrentTimeApi();
+    // let date = new Date()
+    startTime1.value = res.data;
+    // startTime.value = format(date, "yyyy-MM-dd HH:mm:ss");
+}
+const listenFun = (e: any) => {
+    if (list.value.length > 0 && !timingShow.value && !addFlag.value) {
+        if (e.key == 'f') {
+            clickColor(e.key)
+        }
+        if (e.key == 'g') {
+            clickColor(e.key)
+        }
+        if (e.key == 'h') {
+            clickColor(e.key)
+        }
+        if (e.key == 'j') {
+            clickColor(e.key)
+        }
+    }
+}
+onUnmounted(() => {
+    //点击测试
+    clearInterval(time1.value)
+    clearTimeout(time2.value)
+    clearTimeout(time3.value)
+
+    document.removeEventListener("keydown", listenFun)
+})
+const countdown = () => {
+    // countDownStr.value = '开始测试'
+    timingShow.value = true;
+    time1.value = setInterval(() => {
+        if (timeNum1.value == 0) {
+            countDownStr.value = `开始`;
+            //当等于0的时候                     
+            //开始调用开始数据
+            setTimeout(() => {
+                timingShow.value = false;
+
+                //调用开始方法
+                startFun()
+            }, 1000);
+            if (time1.value) clearInterval(time1.value);
+        } else {
+            countDownStr.value = `${timeNum1.value}`;
+            //时间倒计时计数器
+            timeNum1.value--
+        }
+        //倒计时
+
+    }, 1000)
+}
+
+//开始测试方法
+
+const startFun = () => {
+    fontFlag.value = true;
+    showFont()
+}
+
+//开始显示变颜色的文字
+const currentDate = ref<any>()
+const showFont = () => {
+
+    currentDate.value = new Date().getTime()
+    time2.value = setTimeout(() => {
+        clickColor('none')
+        //开始调用方法
+    }, 2000);
+}
+
+
+//开始显示 + 号
+const showAdd = () => {
+    addFlag.value = true;
+    time3.value = setTimeout(() => {
+        addFlag.value = false;
+        clearInterval(time3.value)
+        showFont()
+    }, 2000)
+}
+
+//调用当前方法
+const clickColor = async (val: string) => {
+    if (saveStart.value) {
+        return
+    }
+    let useTime = 0
+    //
+
+    if (val == 'none') {
+        useTime = 2000
+    } else {
+        // 当主动点击的时候
+        let tt = new Date().getTime()
+        useTime = tt - currentDate.value
+        //清空文件
+        clearTimeout(time2.value)
+
+    }
+
+
+    //当数是19时----就去保存了
+    //修改文件
+    let currentP = false
+    if (list.value[numberFlag.value].color == 'red') {
+        if (val == 'f') {
+            currentP = true
+        }
+    } else if (list.value[numberFlag.value].color == 'yellow') {
+        if (val == 'g') {
+            currentP = true
+        }
+    } else if (list.value[numberFlag.value].color == 'blue') {
+        if (val == 'h') {
+            currentP = true
+        }
+    } else if (list.value[numberFlag.value].color == 'green') {
+        if (val == 'j') {
+            currentP = true
+        }
+    }
+
+
+    let obj = {
+        //按键
+        key: val,
+        //反应时长
+        duration: useTime,
+        //是否超时 --超时算是错误的
+        isTimeOut: useTime > 700 ? true : false,
+        //颜色和按键是否是对上了
+        isColorCorrent: currentP,
+        //出现的选项
+        showOptions: JSON.parse(JSON.stringify(list.value[numberFlag.value])),
+        //已选的选项
+    }
+    //测试结果的集合
+    recordResult.value.push(obj)
+    //修改文本
+
+    if (numberFlag.value < allCount.value - 1) {
+        showAdd()
+        numberFlag.value++
+        numberFlagTem.value++
+    } else {
+        numberFlagTem.value++
+        //开始保存了
+        saveStart.value = true
+        //开始调用-----
+        //判断是测试还是正式测试
+        if (formalTest.value == '0') {
+            //判断测试是否通过
+            //如果正确率大于80% 就跳转到
+            //如果是测试计划的话
+            let count = 0;
+            for (let i = 0; i < recordResult.value.length; i++) {
+                // recordResult.value[i].isColorCorrent = 
+                if (recordResult.value[i].isColorCorrent) {
+                    count++
+                }
+            }
+            let score = parseInt(((count / recordResult.value.length) * 100).toFixed(2));
+
+            ElMessage({
+                type: 'info',
+                //正确率
+                message: `正确率为${score}%`
+            })
+
+
+            if (score > 60) {
+                //正确率大于60  时
+                //设置通过的标志
+                userInfo.saveIspass(flag.value)
+                setTimeout(() => {
+                    router.go(-1)
+                }, 1000)
+
+            } else {
+                setTimeout(() => {
+                    router.go(-1)
+                }, 1000)
+            }
+        } else {
+
+            let testResult = {
+                totalScore: '',
+            }
+            let count = 0
+            for (let i = 0; i < recordResult.value.length; i++) {
+                if (recordResult.value[i].isTimeOut) {
+                    count++
+                }
+            }
+            testResult.totalScore = (count / allCount.value * 100).toFixed(2)
+            let params = {
+                beginTime: startTime1.value,
+                orgName: userInfo.userInfo.orgName,
+                orgNo: userInfo.userInfo.orgNo,
+                planId: planId.value,
+                planName: planName.value,
+                taskFlag: flag.value,
+                taskName: flagName.value,
+                // testRecord: JSON.stringify(productData()),
+                testRecord: JSON.stringify(recordResult.value),
+                testResult: JSON.stringify(testResult),
+                type: '1',
+                userName: userInfo.userInfo.userName,
+                userNo: userInfo.userInfo.userNo,
+            }
+            let res: any = await saveStroopApi(params)
+
+            if (res.code == 200) {
+                let paramsCu = {
+                    planId: planId.value,
+                    userNo: userInfo.userInfo.userNo
+                }
+
+                let temp: any = await userPlanDetailApi(paramsCu)
+                let listT = temp.data;
+                let listP = []
+                listP = listT.filter((item: any) => {
+                    return item.isCompleted == '0' && item.contentType == '1'
+                })
+
+                //等--认知任务如果有未测试的话--需要跳转到测试计划页面
+                //否则--跳转到测试计划页面
+                if (listP.length > 0) {
+                    router.push({ name: 'plan' })
+                } else {
+                    cpdmMe.value.open()
+                    planNumGet()
+                    getUnread()
+                }
+            } else {
+                ElMessage({
+                    type: 'error',
+                    message: res.msg
+                })
+            }
+        }
+        //-----------------------------------
+        //开始保存方法--保存成功后判断
+    }
+
+
+
+
+}
+
+
+
+
+//组合数据
+const formatterData = () => {
+    const listGrouop = [
+        { type: 'depressed', name: '沮丧' },
+        { type: 'depressed', name: '哀伤' },
+        { type: 'depressed', name: '绝望' },
+        { type: 'depressed', name: '忧郁' },
+        { type: 'depressed', name: '孤寂' },
+        { type: 'depressed', name: '沉重' },
+        { type: 'depressed', name: '压抑' },
+        { type: 'depressed', name: '焦虑' },
+        { type: 'depressed', name: '落寞' },
+        { type: 'depressed', name: '悲观' },
+        { type: 'depressed', name: '愁苦' },
+        { type: 'depressed', name: '无力' },
+        { type: 'depressed', name: '低落' },
+        { type: 'depressed', name: '迷惘' },
+        { type: 'depressed', name: '消沉' },
+        { type: 'depressed', name: '灰心' },
+        { type: 'depressed', name: '苦楚' },
+        { type: 'depressed', name: '厌世' },
+        { type: 'depressed', name: '冷漠' },
+        { type: 'depressed', name: '苦楚' },
+
+        { type: 'anxiety', name: '紧张' },
+        { type: 'anxiety', name: '不安' },
+        { type: 'anxiety', name: '恐慌' },
+        { type: 'anxiety', name: '担忧' },
+        { type: 'anxiety', name: '烦躁' },
+        { type: 'anxiety', name: '急躁' },
+        { type: 'anxiety', name: '易怒' },
+        { type: 'anxiety', name: '焦虑' },
+        { type: 'anxiety', name: '心悸' },
+        { type: 'anxiety', name: '忐忑' },
+        { type: 'anxiety', name: '惊悸' },
+        { type: 'anxiety', name: '紧迫感' },
+        { type: 'anxiety', name: '压力' },
+        { type: 'anxiety', name: '忧虑' },
+        { type: 'anxiety', name: '惊惧' },
+        { type: 'anxiety', name: '惶恐' },
+        { type: 'anxiety', name: '恐惧' },
+        { type: 'anxiety', name: '惊慌' },
+        { type: 'anxiety', name: '畏惧' },
+        { type: 'anxiety', name: '忧烦' },
+
+
+        { type: 'neutral', name: '天空' },
+        { type: 'neutral', name: '大地' },
+        { type: 'neutral', name: '河流' },
+        { type: 'neutral', name: '树木' },
+        { type: 'neutral', name: '花朵' },
+        { type: 'neutral', name: '阳光' },
+        { type: 'neutral', name: '月亮' },
+        { type: 'neutral', name: '星星' },
+        { type: 'neutral', name: '山峰' },
+        { type: 'neutral', name: '草原' },
+        { type: 'neutral', name: '房屋' },
+        { type: 'neutral', name: '道路' },
+        { type: 'neutral', name: '书本' },
+        { type: 'neutral', name: '笔记' },
+        { type: 'neutral', name: '时间' },
+        { type: 'neutral', name: '空间' },
+        { type: 'neutral', name: '音乐' },
+        { type: 'neutral', name: '电影' },
+        { type: 'neutral', name: '旅行' },
+        { type: 'neutral', name: '工作' },
+        { type: 'neutral', name: '学习' },
+        { type: 'neutral', name: '朋友' },
+        { type: 'neutral', name: '家人' },
+        { type: 'neutral', name: '生活' },
+        { type: 'neutral', name: '动物' },
+        { type: 'neutral', name: '植物' },
+        { type: 'neutral', name: '季节' },
+        { type: 'neutral', name: '天气' },
+        { type: 'neutral', name: '日常' },
+        { type: 'neutral', name: '平静' },
+
+    ]
+
+    let listNew = []
+    // let colorList = ['红色', "黄色", "蓝色", "绿色"]
+    let colorList = ['red', "yellow", "blue", "green"]
+    for (let i = 0; i < listGrouop.length; i++) {
+        for (let j = 0; j < colorList.length; j++) {
+            let obj = {
+                type: listGrouop[i].type,
+                name: listGrouop[i].name,
+                color: colorList[j]
+            }
+            listNew.push(obj)
+        }
+    }
+
+    //随机数
+    let listRandom = []
+    for (let i = 0; i < allCount.value; i++) {
+        let a = Math.floor(Math.random() * 280);
+        listRandom.push(listNew[a])
+    }
+    // 修改文本
+    // let listRandon =[]
+    // for(let i=0;i<listNew.length;i++){
+
+    // }
+
+    //将组合好的数据
+    list.value = listRandom;
+    //长度280
+
+}
+
+</script>
+
+<template>
+
+    <div class="activeTask">
+
+        <div style="width: 50%; margin-left: 10%; margin-top: 24px; z-index: 10">
+
+            <el-progress class="main_progress" color="linear-gradient(to right, hwb(17 58% 9%), #99ebee)"
+                :text-inside="true" :stroke-width="48" :percentage="((numberFlagTem) / allCount) * 100">
+                <span style="color: #000;font-size: 20px;">{{ numberFlagTem }}/{{ allCount }}</span>
+            </el-progress>
+        </div>
+
+        <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)"
+                :style="{ color: list[numberFlag].color }">{{
+                    list[numberFlag].name }}</div>
+        </div>
+        <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>
+    <CpdmMessage ref="cpdmMe" />
+</template>
+
+
+
+
+<style lang="scss">
+.butt {
+    width: 100px;
+    text-align: center;
+    border: 1px solid rgb(87, 172, 187);
+    opacity: 1;
+    border-radius: 10px;
+}
+
+.bgAdd {
+    width: 150px;
+    height: 400px;
+    background: url("../assets/cognize/whiteFlag-new.png") no-repeat center;
+    position: absolute;
+    top: 25%;
+    left: 50%;
+    margin-left: -75px;
+}
+
+.activeTask {
+    width: 100%;
+    height: 100%;
+    background: url("../assets/cognize/rememberAbilityTask.png") no-repeat center;
+    background-size: cover;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.timingBox {
+    font-size: 50px;
+    font-weight: 700;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: black;
+    font-size: 70px;
+    text-align: center;
+    line-height: 100px;
+    margin: 0 auto;
+    z-index: 10;
+}
+
+/* .active-img {
+  position: absolute;
+  width: 450px;
+  height: 450px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+} */
+.btn-content {
+    position: absolute;
+    width: 60%;
+    left: 50%;
+    bottom: 10%;
+    transform: translate(-50%, 0);
+    text-align: center;
+    z-index: 1000;
+}
+
+.scaleName {
+    margin-top: 70px;
+    background-size: cover;
+}
+
+.scaleButton {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    background-size: cover;
+    background: rgb(87, 172, 187);
+    border: 2px solid rgb(255, 255, 255);
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+    opacity: 1;
+    border-radius: 39px;
+    color: #ffffff;
+}
+
+.steering {
+    width: 50%;
+    position: absolute;
+    bottom: 20%;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    justify-content: space-between;
+}
+
+.steering .left {
+    width: 60px;
+    height: 60px;
+    background: url(../../assets/left.png) no-repeat center;
+}
+
+.steering .right {
+    width: 60px;
+    height: 60px;
+    background: url(../../assets/right.png) no-repeat center;
+    margin-left: 15px;
+}
+
+.guider {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 999;
+    background: rgba(0, 0, 0, 0.75);
+}
+
+.addImg {
+    width: 50%;
+    height: auto;
+    z-index: 1000;
+}
+
+.shape_glass {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 50%;
+    height: auto;
+    margin: 5vh auto 0;
+}
+
+.active {
+    position: relative;
+}
+
+.active:after {
+    background-color: #2ea598;
+}
+
+/* 设置动画后颜色 */
+.active:before {
+    background-color: rgba(0, 168, 253, 0.2);
+}
+
+/* 设置动画 */
+.active:before,
+.active:after {
+    content: "";
+    width: 80px;
+    height: 40px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: -40px;
+    margin-top: -20px;
+    border-radius: 10%;
+    animation: warn 1.5s ease-out 0s infinite;
+}
+
+@keyframes warn {
+    0% {
+        transform: scale(0.5);
+        opacity: 1;
+    }
+
+    30% {
+        opacity: 1;
+    }
+
+    100% {
+        transform: scale(1.4);
+        opacity: 0;
+    }
+}
+
+.txt {
+    width: 300px;
+    font-weight: PingFang-SC-Medium;
+    margin: 0 auto;
+    font-size: 16px;
+    color: #ffffff;
+    position: absolute;
+    left: 50%;
+    top: 70%;
+    transform: translateX(-50%);
+    z-index: 1000;
+}
+
+.explain {
+    padding: 6px 8px;
+    border: 2px solid #0abdc4;
+    border-radius: 5px;
+}
+
+.main_progress {
+    padding-top: 40px;
+    padding-left: 40px;
+    color: linear-gradient(to right, #ebb19b, #99ebee);
+}
+
+.activeTask {
+    width: 100%;
+    height: 100%;
+    background: url("../assets/cognize/Stroop.png") no-repeat center;
+    background-size: cover;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+</style>