cpdm_pc/src/views/Stroop.vue

<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue'
import CpdmTask from '../components/CpdmTask.vue'
import CpdmMessage from '../components/CpdmMessage.vue'
import { useRoute, useRouter } from 'vue-router';
import { userInfoStore } from '@/stores'
import { getCurrentTimeApi, querySelectTaskApi, saveStroopApi } from '@/api/plan';
import { userPlanDetailApi } from '@/api/home';
import { getUnread, planNumGet } from '@/utils/test';
import { ElMessage } from 'element-plus';
const cpdmTask = ref<any>()
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)

const responseFlag = 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')
        //开始调用方法
    }, formalTest.value == '0' ? 2000000 : 2000);

    //
    if (formalTest.value == '0') {

        if (list.value[numberFlag.value].color == 'red') {
            needColor.value = '红色'
            needJ.value = '1'
        } else if (list.value[numberFlag.value].color == 'yellow') {
            needColor.value = '黄色'
            needJ.value = '2'

        } else if (list.value[numberFlag.value].color == 'blue') {
            needColor.value = '蓝色'
            needJ.value = '3'

        } else if (list.value[numberFlag.value].color == 'green') {
            needColor.value = '绿色'
            needJ.value = '4'

        }
    }

}


//开始显示 + 号
const showAdd = () => {
    addFlag.value = true;
    time3.value = setTimeout(() => {
        addFlag.value = false;
        clearInterval(time3.value)
        showFont()
    }, 2000)
}
//出现的颜色
const needColor = ref<string>('')
//出现需要按下的按键
const needJ = ref<string>('')

const isCom = ref<boolean>(false)

//调用当前方法
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时----就去保存了
    //修改文件
    responseFlag.value = false
    let currentP = false
    if (list.value[numberFlag.value].color == 'red') {
        needColor.value = '红色'
        needJ.value = '1'
        if (val == '1') {
            responseFlag.value = true
            currentP = true
        }
    } else if (list.value[numberFlag.value].color == 'yellow') {
        needColor.value = '黄色'
        needJ.value = '2'
        if (val == '2') {
            responseFlag.value = true
            currentP = true
        }
    } else if (list.value[numberFlag.value].color == 'blue') {
        needColor.value = '蓝色'
        needJ.value = '3'
        if (val == '3') {
            responseFlag.value = true
            currentP = true
        }
    } else if (list.value[numberFlag.value].color == 'green') {
        needColor.value = '绿色'
        needJ.value = '4'
        if (val == '4') {
            responseFlag.value = true
            currentP = true
        }
    }
    timeFun()

    let obj = {
        //按键
        key: val,
        //反应时长
        duration: useTime,
        //是否超时 --超时算是错误的
        isTimeOut: useTime > 1500 ? true : false,
        //颜色和按键是否是对上了
        isColorCorrent: currentP,
        //出现的选项
        showOptions: JSON.parse(JSON.stringify(list.value[numberFlag.value])),
        //已选的选项
    }
    //测试结果的集合
    recordResult.value.push(obj)
    //修改文本
    //88
    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) {
                ElMessage({
                    type: 'success',
                    //正确率
                    message: `正确率为${score}%`
                })

                //正确率大于60  时
                //设置通过的标志
                userInfo.saveIspass(flag.value)
                setTimeout(() => {
                    router.go(-1)
                }, 1000)

            } else {
                ElMessage({
                    type: 'info',
                    //正确率
                    message: `正确率为${score}%`
                })

                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 {

                    let res: any = await querySelectTaskApi(planId.value)

                    if (res.data.length == 0) {
                        cpdmMe.value.open()
                        planNumGet()
                        getUnread()
                    } else {
                        cpdmTask.value.open(planId.value)
                    }

                }
            } else {
                ElMessage({
                    type: 'error',
                    message: res.msg
                })
            }
        }
        //-----------------------------------
        //开始保存方法--保存成功后判断
    }




}
const errorTime = ref<any>();
const timeFun = () => {
    isCom.value = true
    errorTime.value = setTimeout(() => {
        isCom.value = false
    }, 500)
}




//组合数据
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

}
const buttonList = ref<any>([
    { name: '1', val: '1' },
    { name: '2', val: '2' },
    { name: '3', val: '3' },
    { name: '4', val: '4' }
]);

</script>

<template>

    <div class="activeTask">

        <div style="width: 50%; margin-left: 10%; margin-top: 24px; z-index: 1000">

            <el-progress class="main_progress" color="linear-gradient(to right, hwb(17 58% 9%), #99ebee)"
                :text-inside="true" :stroke-width="48" :percentage="((numberFlagTem + 1) / (allCount)) * 100">
                <span style="color: #000;font-size: 20px;">{{ numberFlagTem + 1 }}/{{ 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)"
                :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 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 style="margin-top:20px" class="tip_claFun btn-content" v-show="list.length > 0 && !timingShow && !addFlag">

            <el-button @click="clickColor('1')">1</el-button>
            <el-button @click="clickColor('2')">2</el-button>
            <el-button @click="clickColor('3')">3</el-button>
            <el-button @click="clickColor('4')">4</el-button>
        </div>
    </div>
    <div class="activeTaskTest" v-show="formalTest == '0'">
        <div style="width: 50%; margin-left: 10%; margin-top: 24px; z-index: 1000">

            <el-progress class="main_progress" color="linear-gradient(to right, hwb(17 58% 9%), #99ebee)"
                :text-inside="true" :stroke-width="48" :percentage="((numberFlagTem + 1) / (allCount)) * 100">
                <span style="color: #000;font-size: 20px;">{{ numberFlagTem + 1 }}/{{ 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)"
                :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 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 class="tip_cla" v-show="!timingShow && formalTest == '0' && !addFlag">
            1:代表红色 2:代表黄色 3:代表蓝色 4:代表绿色
        </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 style="margin-top:20px" class="tip_claFun btn-content" v-show="list.length > 0 && !timingShow && !addFlag">
            <el-button v-for="item in buttonList" :key="item.name" :class="{ active: item.name == needJ }"
                @click="clickColor(item.val)">{{ item.name }}</el-button>
            <!-- <el-button @click="clickColor('f')">F</el-button>
            <el-button @click="clickColor('g')">G</el-button>
            <el-button @click="clickColor('h')">H</el-button>
            <el-button @click="clickColor('j')">J</el-button> -->
        </div>
    </div>
    <CpdmMessage ref="cpdmMe" />
    <CpdmTask ref="cpdmTask" />
</template>





<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;
    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;
//     background-color: #000000
// }

.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: 150px;
    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: 40px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -20px;
    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;

}

.activeTaskTest {
    width: 100%;
    height: 100%;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000000;
    opacity: 0.4;
    z-index: 200;

}

.correct_txt {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100px;
    text-align: center;
}

.tip_cla {
    width: 200px;
    letter-spacing: 3px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 200px;
    text-align: center;
    z-index: 1000;
    color: #ffffff;
    border: 2px solid rgb(47, 197, 165);
    overflow-y: hidden;
}

// .tip_claFun {
//     letter-spacing: 3px;
//     position: absolute;
//     left: 50%;
//     transform: translateX(-50%);
//     bottom: 150px;
//     text-align: center;

// }</style>