|
@@ -0,0 +1,895 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div v-if="testFlag" class="desc_wrap">
|
|
|
+ <!-- 提示内容 -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-else class="activeTask">
|
|
|
+
|
|
|
+ <div style="width: 50%; margin-left: 10%; margin-top: 24px; z-index: 10">
|
|
|
+ <p v-if="testMode === 0" style='margin-top:50px'> </p>
|
|
|
+ <el-progress v-else class="main_progress" color="linear-gradient(to right, #3854f1, #92bbf0)"
|
|
|
+ :text-inside="true" :format="format" :stroke-width="48" :percentage="((cumulation) / 71) * 100">
|
|
|
+ <span style="color: #000;font-size: 20px;">{{ cumulation }}/{{ 71 }}</span>
|
|
|
+ </el-progress>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <p v-if="timingShow" class="timingBox">{{ countDownStr }}</p>
|
|
|
+
|
|
|
+ <div v-if="crossShow && !expressionShow && !buttonShow" style="text-align: center">
|
|
|
+ <img src="../assets/cognize/whiteFlag-new.png" alt=""
|
|
|
+ style="width: 50px; height: 50px; margin-top: 20%" />
|
|
|
+ </div>
|
|
|
+ <div class="shape_glass">
|
|
|
+ <img v-if="expressionShow && !crossShow" class="active-img addImg" :src="examImgUrl" alt="" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="buttonShow && !crossShow" class="btn-content">
|
|
|
+ <el-button v-for="item in emoList" :key="item.val" class="butt"
|
|
|
+ :class="{ active: item.val === resultData[cumulation]?.emoType && showGuider }"
|
|
|
+ @click="userClick(item.val)">
|
|
|
+ {{ item.name }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="guider" v-show="showGuider">
|
|
|
+ <div class="txt">
|
|
|
+ <p class="explain">
|
|
|
+ 观察图片中人物的面部表情,想象人物有着怎样的情绪。点击下方按钮,选择对应的情绪
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <CpdmMessage ref="cpdmMe" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import CpdmMessage from '../components/CpdmMessage.vue'
|
|
|
+import { format as formatTime } from 'date-fns/format';
|
|
|
+import { ref, onMounted, onUnmounted, computed } from 'vue';
|
|
|
+import { ElButton, ElProgress, ElMessage } from 'element-plus';
|
|
|
+import { oSessionStorage, preloader } from '@/utils/utils';
|
|
|
+import { useRoute, useRouter } from 'vue-router';
|
|
|
+import { userInfoStore } from '@/stores';
|
|
|
+import { error } from 'echarts/types/src/util/log.js';
|
|
|
+import { getCurrentTimeApi, saveETBApi } from '@/api/plan';
|
|
|
+import { userPlanDetailApi } from '@/api/home';
|
|
|
+import { getUnread, planNumGet } from '@/utils/test';
|
|
|
+const userInfo = userInfoStore()
|
|
|
+const route = useRoute()
|
|
|
+const router = useRouter()
|
|
|
+interface EmoItem {
|
|
|
+ name: string;
|
|
|
+ val: string;
|
|
|
+}
|
|
|
+
|
|
|
+interface ResultDataItem {
|
|
|
+ index: number;
|
|
|
+ emoType: string;
|
|
|
+ emoAmp: number;
|
|
|
+ userSelectEmoType: string;
|
|
|
+ responseTime: string;
|
|
|
+ correct: string;
|
|
|
+ imgUrl: string;
|
|
|
+}
|
|
|
+const cpdmMe = ref<any>()
|
|
|
+
|
|
|
+const testMode = ref<number | null>(null);
|
|
|
+const buttonShowTime = ref<number>(2000);
|
|
|
+const cycles = ref<number>(71);
|
|
|
+const showGuider = ref<boolean>(false);
|
|
|
+const startTime1 = ref<string>('')
|
|
|
+const testFlag = ref(true);
|
|
|
+const timingShow = ref(true);
|
|
|
+const timingNum = ref(5);
|
|
|
+const countDownStr = ref('测试马上开始!');
|
|
|
+const crossShow = ref(false);
|
|
|
+const expressionShow = ref(false);
|
|
|
+const buttonShow = ref(false);
|
|
|
+
|
|
|
+const commonTime = ref(0);
|
|
|
+const cumulation = ref(0);
|
|
|
+const examImgUrl = ref('');
|
|
|
+const arrList = ref(['01', '02', '03', '04', '05', '06', '07', '08', '09', '10']);
|
|
|
+const randomArr = ref<string[]>([]);
|
|
|
+const resultData = ref<any>([]);
|
|
|
+const emoList = ref<EmoItem[]>([
|
|
|
+ { name: '开心', val: 'happy' },
|
|
|
+ { name: '害怕', val: 'fear' },
|
|
|
+ { name: '生气', val: 'angry' },
|
|
|
+ { name: '厌恶', val: 'disgust' },
|
|
|
+ { name: '悲伤', val: 'sad' },
|
|
|
+ { name: '惊讶', val: 'surprise' },
|
|
|
+]);
|
|
|
+
|
|
|
+
|
|
|
+const userId = ref<string>('');
|
|
|
+
|
|
|
+
|
|
|
+const timingFlag = ref<any>();
|
|
|
+
|
|
|
+const timingOne = ref<any>();
|
|
|
+const timingTwo = ref<any>();
|
|
|
+const timingThree = ref<any>();
|
|
|
+const flagTime = ref<any>()
|
|
|
+
|
|
|
+const planId = ref<string>('');
|
|
|
+const planName = ref<string>('')
|
|
|
+const flag = ref<string>('');
|
|
|
+const flagName = ref<string>('');
|
|
|
+const formalTest = ref<string>('')
|
|
|
+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
|
|
|
+ // this.formalTest = this.$route.params.formalTest;
|
|
|
+
|
|
|
+ userId.value = userInfo.userInfo.id;
|
|
|
+
|
|
|
+ //测试模式
|
|
|
+ testMode.value = parseInt(route.params.formalTest as string);
|
|
|
+ // testMode.value = parseInt((window as any).$route.query.testMode || '0', 10);
|
|
|
+
|
|
|
+ if (testMode.value === 0) {
|
|
|
+ buttonShowTime.value = 20000000;
|
|
|
+ cycles.value = 6;
|
|
|
+ startTiming();
|
|
|
+ } else {
|
|
|
+ buttonShowTime.value = 2000;
|
|
|
+ cycles.value = 71;
|
|
|
+ startTiming();
|
|
|
+ getStartTime();
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const format = (percentage: number) => {
|
|
|
+ return percentage === 100 ? '任务已完成' : '任务进度';
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+const startTiming = () => {
|
|
|
+
|
|
|
+ if (!userId.value) {
|
|
|
+ ElMessage({
|
|
|
+ type: 'warning',
|
|
|
+ message: '请先登录'
|
|
|
+ })
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ testFlag.value = false;
|
|
|
+
|
|
|
+ timingFlag.value = setInterval(() => {
|
|
|
+ if (timingNum.value === 0) {
|
|
|
+ countDownStr.value = '开始';
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ timingShow.value = false;
|
|
|
+ if (timingFlag.value) clearInterval(timingFlag.value);
|
|
|
+ startTest();
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
+ if (timingFlag.value) clearInterval(timingFlag.value);
|
|
|
+ } else {
|
|
|
+ countDownStr.value = `${timingNum.value}`;
|
|
|
+ timingNum.value--;
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+};
|
|
|
+
|
|
|
+const startTime = () => {
|
|
|
+ commonTime.value = 0;
|
|
|
+ flagTime.value = setInterval(() => {
|
|
|
+ commonTime.value++;
|
|
|
+ }, 10);
|
|
|
+};
|
|
|
+
|
|
|
+const endTime = () => {
|
|
|
+ if (flagTime.value) clearInterval(flagTime.value);
|
|
|
+};
|
|
|
+
|
|
|
+const randomList = () => {
|
|
|
+ randomArr.value = [];
|
|
|
+ for (let k = 0; k < 3; k++) {
|
|
|
+ let id = Math.floor(Math.random() * 10);
|
|
|
+ if (k < 10) {
|
|
|
+ if (randomArr.value.indexOf(arrList.value[id]) === -1) {
|
|
|
+ randomArr.value.push(arrList.value[id]);
|
|
|
+ } else {
|
|
|
+ k -= 1;
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ randomArr.value.push(arrList.value[id]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const shuffle = async (arr: any[]) => {
|
|
|
+ for (let i = 1; i < arr.length; i++) {
|
|
|
+ const random = Math.floor(Math.random() * (i + 1));
|
|
|
+ [arr[i], arr[random]] = [arr[random], arr[i]];
|
|
|
+ }
|
|
|
+ return arr;
|
|
|
+};
|
|
|
+const requireImg = (name: string) => {
|
|
|
+ return new URL(`../assets/cognize/ETBnew/${name}.jpg`, import.meta.url).href
|
|
|
+}
|
|
|
+const initImgList = async (rank: number) => {
|
|
|
+ randomList();
|
|
|
+
|
|
|
+
|
|
|
+ randomArr.value.forEach((item) => {
|
|
|
+ // `${item >= '06' ? 'm' + item : 'f' + item}-happy-0${rank + 1}`
|
|
|
+ // 开心
|
|
|
+ resultData.value.push({
|
|
|
+ emoType: 'happy',
|
|
|
+ emoAmp: rank,
|
|
|
+ userSelectEmoType: '',
|
|
|
+ responseTime: '',
|
|
|
+ correct: '',
|
|
|
+ imgUrl: requireImg(`${item >= '06' ? 'm' + item : 'f' + item}-happy-0${rank + 1}`),
|
|
|
+ // imgUrl: require(`../../assets/congnitiveAblitity/ETBnew/${item >= '06' ? 'm' + item : 'f' + item}-happy-0${rank + 1}.jpg`),
|
|
|
+ });
|
|
|
+ // 害怕
|
|
|
+ resultData.value.push({
|
|
|
+ emoType: 'fear',
|
|
|
+ emoAmp: rank,
|
|
|
+ userSelectEmoType: '',
|
|
|
+ responseTime: '',
|
|
|
+ correct: '',
|
|
|
+ imgUrl: requireImg(`${item >= '06' ? 'm' + item : 'f' + item}-fear-0${rank + 1}`),
|
|
|
+ // imgUrl: require(`../../assets/congnitiveAblitity/ETBnew/${item >= '06' ? 'm' + item : 'f' + item}-fear-0${rank + 1}.jpg`),
|
|
|
+ });
|
|
|
+ // 生气
|
|
|
+ resultData.value.push({
|
|
|
+ emoType: 'angry',
|
|
|
+ emoAmp: rank,
|
|
|
+ userSelectEmoType: '',
|
|
|
+ responseTime: '',
|
|
|
+ correct: '',
|
|
|
+ imgUrl: requireImg(`${item >= '06' ? 'm' + item : 'f' + item}-angry-0${rank + 1}`),
|
|
|
+ // imgUrl: require(`../../assets/congnitiveAblitity/ETBnew/${item >= '06' ? 'm' + item : 'f' + item}-angry-0${rank + 1}.jpg`),
|
|
|
+ });
|
|
|
+ // 厌恶
|
|
|
+ resultData.value.push({
|
|
|
+ emoType: 'disgust',
|
|
|
+ emoAmp: rank,
|
|
|
+ userSelectEmoType: '',
|
|
|
+ responseTime: '',
|
|
|
+ correct: '',
|
|
|
+ imgUrl: requireImg(`${item >= '06' ? 'm' + item : 'f' + item}-disgust-0${rank + 1}`),
|
|
|
+ // imgUrl: require(`../../assets/congnitiveAblitity/ETBnew/${item >= '06' ? 'm' + item : 'f' + item}-disgust-0${rank + 1}.jpg`),
|
|
|
+ });
|
|
|
+ // 悲伤
|
|
|
+ resultData.value.push({
|
|
|
+ emoType: 'sad',
|
|
|
+ emoAmp: rank,
|
|
|
+ userSelectEmoType: '',
|
|
|
+ responseTime: '',
|
|
|
+ correct: '',
|
|
|
+ imgUrl: requireImg(`${item >= '06' ? 'm' + item : 'f' + item}-sad-0${rank + 1}`),
|
|
|
+ // imgUrl: require(`../../assets/congnitiveAblitity/ETBnew/${item >= '06' ? 'm' + item : 'f' + item}-sad-0${rank + 1}.jpg`),
|
|
|
+ });
|
|
|
+ // 惊讶
|
|
|
+ resultData.value.push({
|
|
|
+ emoType: 'surprise',
|
|
|
+ emoAmp: rank,
|
|
|
+ userSelectEmoType: '',
|
|
|
+ responseTime: '',
|
|
|
+ correct: '',
|
|
|
+ imgUrl: requireImg(`${item >= '06' ? 'm' + item : 'f' + item}-surprise-0${rank + 1}`),
|
|
|
+ // imgUrl: require(`../../assets/congnitiveAblitity/ETBnew/${item >= '06' ? 'm' + item : 'f' + item}-surprise-0${rank + 1}.jpg`),
|
|
|
+ });
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const imgListSerialize = async () => {
|
|
|
+ await initImgList(0);
|
|
|
+ await initImgList(1);
|
|
|
+ await initImgList(2);
|
|
|
+ await initImgList(3);
|
|
|
+ await shuffle(resultData.value);
|
|
|
+ resultData.value.forEach((item: { index: any; }, i: any) => {
|
|
|
+ item.index = i;
|
|
|
+ });
|
|
|
+
|
|
|
+ preloader(resultData.value, () => {
|
|
|
+ changeImg(cumulation.value);
|
|
|
+ showCross();
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const changeImg = (num: number) => {
|
|
|
+ examImgUrl.value = resultData.value[num].imgUrl;
|
|
|
+};
|
|
|
+
|
|
|
+const showCross = () => {
|
|
|
+ crossShow.value = true;
|
|
|
+ expressionShow.value = false;
|
|
|
+ buttonShow.value = false;
|
|
|
+
|
|
|
+ timingOne.value = setTimeout(() => {
|
|
|
+ showImg();
|
|
|
+ }, 750);
|
|
|
+};
|
|
|
+
|
|
|
+const showImg = () => {
|
|
|
+ crossShow.value = false;
|
|
|
+ expressionShow.value = true;
|
|
|
+ if (testMode.value === 0) {
|
|
|
+ buttonShow.value = true;
|
|
|
+ } else {
|
|
|
+ buttonShow.value = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ timingTwo.value = setTimeout(() => {
|
|
|
+ showBtn();
|
|
|
+ }, 500);
|
|
|
+};
|
|
|
+
|
|
|
+const showBtn = () => {
|
|
|
+ startTime();
|
|
|
+ crossShow.value = false;
|
|
|
+ if (testMode.value === 0) {
|
|
|
+ expressionShow.value = true;
|
|
|
+ } else {
|
|
|
+ expressionShow.value = false;
|
|
|
+ }
|
|
|
+ buttonShow.value = true;
|
|
|
+
|
|
|
+ timingThree.value = setTimeout(() => {
|
|
|
+ buttonShow.value = false;
|
|
|
+ endTime();
|
|
|
+
|
|
|
+ resultData.value[cumulation.value].userSelectEmoType = 'NO';
|
|
|
+ resultData.value[cumulation.value].responseTime = 'NULL';
|
|
|
+ resultData.value[cumulation.value].correct = 'False';
|
|
|
+
|
|
|
+ if (cumulation.value >= cycles.value) {
|
|
|
+ submitData();
|
|
|
+ } else {
|
|
|
+ cumulation.value++;
|
|
|
+ changeImg(cumulation.value);
|
|
|
+ showCross();
|
|
|
+ }
|
|
|
+ }, buttonShowTime.value);
|
|
|
+};
|
|
|
+
|
|
|
+const userClick = (param: string) => {
|
|
|
+ if (showGuider.value && resultData.value[cumulation.value]?.emoType !== param) {
|
|
|
+ ElMessage({
|
|
|
+ type: 'error',
|
|
|
+ message: '点击错误,请点击闪烁的正确选项'
|
|
|
+
|
|
|
+ })
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (timingThree.value) clearTimeout(timingThree.value);
|
|
|
+ endTime();
|
|
|
+
|
|
|
+ resultData.value[cumulation.value].userSelectEmoType = param;
|
|
|
+ resultData.value[cumulation.value].responseTime = (commonTime.value * 10).toString();
|
|
|
+ resultData.value[cumulation.value].correct = param === resultData.value[cumulation.value].emoType ? 'True' : 'False';
|
|
|
+
|
|
|
+ if (cumulation.value >= cycles.value) {
|
|
|
+ if (testMode.value === 0) {
|
|
|
+ userInfo.saveIspass(flag.value)
|
|
|
+ ElMessage({
|
|
|
+ type: 'success',
|
|
|
+ message: '引导结束'
|
|
|
+ })
|
|
|
+
|
|
|
+ router.go(-1);
|
|
|
+ } else {
|
|
|
+ submitData();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ cumulation.value++;
|
|
|
+ changeImg(cumulation.value);
|
|
|
+ showCross();
|
|
|
+ }
|
|
|
+};
|
|
|
+const submitData = async () => {
|
|
|
+ const correctNum: ResultDataItem[] = [];
|
|
|
+ const happy1: ResultDataItem[] = [];
|
|
|
+ const happy2: ResultDataItem[] = [];
|
|
|
+ const happy3: ResultDataItem[] = [];
|
|
|
+ const happy4: ResultDataItem[] = [];
|
|
|
+ const fear1: ResultDataItem[] = [];
|
|
|
+ const fear2: ResultDataItem[] = [];
|
|
|
+ const fear3: ResultDataItem[] = [];
|
|
|
+ const fear4: ResultDataItem[] = [];
|
|
|
+ const angry1: ResultDataItem[] = [];
|
|
|
+ const angry2: ResultDataItem[] = [];
|
|
|
+ const angry3: ResultDataItem[] = [];
|
|
|
+ const angry4: ResultDataItem[] = [];
|
|
|
+ const disgust1: ResultDataItem[] = [];
|
|
|
+ const disgust2: ResultDataItem[] = [];
|
|
|
+ const disgust3: ResultDataItem[] = [];
|
|
|
+ const disgust4: ResultDataItem[] = [];
|
|
|
+ const sad1: ResultDataItem[] = [];
|
|
|
+ const sad2: ResultDataItem[] = [];
|
|
|
+ const sad3: ResultDataItem[] = [];
|
|
|
+ const sad4: ResultDataItem[] = [];
|
|
|
+ const surprise1: ResultDataItem[] = [];
|
|
|
+ const surprise2: ResultDataItem[] = [];
|
|
|
+ const surprise3: ResultDataItem[] = [];
|
|
|
+ const surprise4: ResultDataItem[] = [];
|
|
|
+
|
|
|
+ resultData.value.forEach((item: ResultDataItem) => {
|
|
|
+ if (item.correct === 'True') correctNum.push(item);
|
|
|
+ });
|
|
|
+
|
|
|
+ correctNum.forEach((item) => {
|
|
|
+ if (item.emoType === 'happy' && item.emoAmp === 0) happy1.push(item);
|
|
|
+ if (item.emoType === 'happy' && item.emoAmp === 1) happy2.push(item);
|
|
|
+ if (item.emoType === 'happy' && item.emoAmp === 2) happy3.push(item);
|
|
|
+ if (item.emoType === 'happy' && item.emoAmp === 3) happy4.push(item);
|
|
|
+ if (item.emoType === 'fear' && item.emoAmp === 0) fear1.push(item);
|
|
|
+ if (item.emoType === 'fear' && item.emoAmp === 1) fear2.push(item);
|
|
|
+ if (item.emoType === 'fear' && item.emoAmp === 2) fear3.push(item);
|
|
|
+ if (item.emoType === 'fear' && item.emoAmp === 3) fear4.push(item);
|
|
|
+ if (item.emoType === 'angry' && item.emoAmp === 0) angry1.push(item);
|
|
|
+ if (item.emoType === 'angry' && item.emoAmp === 1) angry2.push(item);
|
|
|
+ if (item.emoType === 'angry' && item.emoAmp === 2) angry3.push(item);
|
|
|
+ if (item.emoType === 'angry' && item.emoAmp === 3) angry4.push(item);
|
|
|
+ if (item.emoType === 'disgust' && item.emoAmp === 0) disgust1.push(item);
|
|
|
+ if (item.emoType === 'disgust' && item.emoAmp === 1) disgust2.push(item);
|
|
|
+ if (item.emoType === 'disgust' && item.emoAmp === 2) disgust3.push(item);
|
|
|
+ if (item.emoType === 'disgust' && item.emoAmp === 3) disgust4.push(item);
|
|
|
+ if (item.emoType === 'sad' && item.emoAmp === 0) sad1.push(item);
|
|
|
+ if (item.emoType === 'sad' && item.emoAmp === 1) sad2.push(item);
|
|
|
+ if (item.emoType === 'sad' && item.emoAmp === 2) sad3.push(item);
|
|
|
+ if (item.emoType === 'sad' && item.emoAmp === 3) sad4.push(item);
|
|
|
+ if (item.emoType === 'surprise' && item.emoAmp === 0) surprise1.push(item);
|
|
|
+ if (item.emoType === 'surprise' && item.emoAmp === 1) surprise2.push(item);
|
|
|
+ if (item.emoType === 'surprise' && item.emoAmp === 2) surprise3.push(item);
|
|
|
+ if (item.emoType === 'surprise' && item.emoAmp === 3) surprise4.push(item);
|
|
|
+ });
|
|
|
+
|
|
|
+ // http.post(
|
|
|
+ // `/cognize/ETB01`,
|
|
|
+ // {
|
|
|
+ // userId: userId.value,
|
|
|
+ // testPlanId: (window as any).$route.query.testPlanId || '',
|
|
|
+ // data: resultData.value,
|
|
|
+ // result: {
|
|
|
+ // totalResult: ((correctNum.length / 72) * 100).toFixed(2) + '%',
|
|
|
+ // happy: {
|
|
|
+ // level1: ((happy1.length / 3) * 100).toFixed(2) + '%',
|
|
|
+ // level2: ((happy2.length / 3) * 100).toFixed(2) + '%',
|
|
|
+ // level3: ((happy3.length / 3) * 100).toFixed(2) + '%',
|
|
|
+ // level4: ((happy4.length / 3) * 100).toFixed(2) + '%',
|
|
|
+ // },
|
|
|
+ // fear: {
|
|
|
+ // level1: ((fear1.length / 3) * 100).toFixed(2) + '%',
|
|
|
+ // level2: ((fear2.length / 3) * 100).toFixed(2) + '%',
|
|
|
+ // level3: ((fear3.length / 3) * 100).toFixed(2) + '%',
|
|
|
+ // level4: ((fear4.length / 3) * 100).toFixed(2) + '%',
|
|
|
+ // },
|
|
|
+ // angry: {
|
|
|
+ // level1: ((angry1.length / 3) * 100).toFixed(2) + '%',
|
|
|
+ // level2: ((angry2.length / 3) * 100).toFixed(2) + '%',
|
|
|
+ // level3: ((angry3.length / 3) * 100).toFixed(2) + '%',
|
|
|
+ // level4: ((angry4.length / 3) * 100).toFixed(2) + '%',
|
|
|
+ // },
|
|
|
+ // disgust: {
|
|
|
+ // level1: ((disgust1.length / 3) * 100).toFixed(2) + '%',
|
|
|
+ // level2: ((disgust2.length / 3) * 100).toFixed(2) + '%',
|
|
|
+ // level3: ((disgust3.length / 3) * 100).toFixed(2) + '%',
|
|
|
+ // level4: ((disgust4.length / 3) * 100).toFixed(2) + '%',
|
|
|
+ // },
|
|
|
+ // sad: {
|
|
|
+ // level1: ((sad1.length / 3) * 100).toFixed(2) + '%',
|
|
|
+ // level2: ((sad2.length / 3) * 100).toFixed(2) + '%',
|
|
|
+ // level3: ((sad3.length / 3) * 100).toFixed(2) + '%',
|
|
|
+ // level4: ((sad4.length / 3) * 100).toFixed(2) + '%',
|
|
|
+ // },
|
|
|
+ // surprise: {
|
|
|
+ // level1: ((surprise1.length / 3) * 100).toFixed(2) + '%',
|
|
|
+ // level2: ((surprise2.length / 3) * 100).toFixed(2) + '%',
|
|
|
+ // level3: ((surprise3.length / 3) * 100).toFixed(2) + '%',
|
|
|
+ // level4: ((surprise4.length / 3) * 100).toFixed(2) + '%',
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // (response: { code: string; }) => {
|
|
|
+ // if (response && response.code === '200') {
|
|
|
+
|
|
|
+ // ElMessage({
|
|
|
+ // type: 'success',
|
|
|
+ // message: '测试结束'
|
|
|
+ // })
|
|
|
+
|
|
|
+ // // 跳转到结果页面
|
|
|
+ // // (window as any).$router.push({
|
|
|
+ // // name: 'TestResult',
|
|
|
+ // // params: {
|
|
|
+ // // result: [
|
|
|
+ // // {
|
|
|
+ // // name: '总正确率',
|
|
|
+ // // value: ((correctNum.length / 72) * 100).toFixed(2) + '%',
|
|
|
+ // // },
|
|
|
+ // // // 其他结果项...
|
|
|
+ // // ],
|
|
|
+ // // },
|
|
|
+ // // });
|
|
|
+ // } else {
|
|
|
+ // ElMessage({
|
|
|
+ // type: 'error',
|
|
|
+ // message: '结束数据出错'
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // );
|
|
|
+
|
|
|
+ let testResult = {
|
|
|
+
|
|
|
+ totalScore: ((correctNum.length / 72) * 100).toFixed(2),
|
|
|
+ happy: {
|
|
|
+ level1: ((happy1.length / 3) * 100).toFixed(2),
|
|
|
+ level2: ((happy2.length / 3) * 100).toFixed(2),
|
|
|
+ level3: ((happy3.length / 3) * 100).toFixed(2),
|
|
|
+ level4: ((happy4.length / 3) * 100).toFixed(2),
|
|
|
+ },
|
|
|
+ fear: {
|
|
|
+ level1: ((fear1.length / 3) * 100).toFixed(2),
|
|
|
+ level2: ((fear2.length / 3) * 100).toFixed(2),
|
|
|
+ level3: ((fear3.length / 3) * 100).toFixed(2),
|
|
|
+ level4: ((fear4.length / 3) * 100).toFixed(2),
|
|
|
+ },
|
|
|
+ angry: {
|
|
|
+ level1: ((angry1.length / 3) * 100).toFixed(2),
|
|
|
+ level2: ((angry2.length / 3) * 100).toFixed(2),
|
|
|
+ level3: ((angry3.length / 3) * 100).toFixed(2),
|
|
|
+ level4: ((angry4.length / 3) * 100).toFixed(2),
|
|
|
+ },
|
|
|
+ disgust: {
|
|
|
+ level1: ((disgust1.length / 3) * 100).toFixed(2),
|
|
|
+ level2: ((disgust2.length / 3) * 100).toFixed(2),
|
|
|
+ level3: ((disgust3.length / 3) * 100).toFixed(2),
|
|
|
+ level4: ((disgust4.length / 3) * 100).toFixed(2),
|
|
|
+ },
|
|
|
+ sad: {
|
|
|
+ level1: ((sad1.length / 3) * 100).toFixed(2),
|
|
|
+ level2: ((sad2.length / 3) * 100).toFixed(2),
|
|
|
+ level3: ((sad3.length / 3) * 100).toFixed(2),
|
|
|
+ level4: ((sad4.length / 3) * 100).toFixed(2),
|
|
|
+ },
|
|
|
+ surprise: {
|
|
|
+ level1: ((surprise1.length / 3) * 100).toFixed(2),
|
|
|
+ level2: ((surprise2.length / 3) * 100).toFixed(2),
|
|
|
+ level3: ((surprise3.length / 3) * 100).toFixed(2),
|
|
|
+ level4: ((surprise4.length / 3) * 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(resultData.value),
|
|
|
+ testResult: JSON.stringify(testResult),
|
|
|
+ type: '1',
|
|
|
+ userName: userInfo.userInfo.userName,
|
|
|
+ userNo: userInfo.userInfo.userNo,
|
|
|
+ }
|
|
|
+ let res: any = await saveETBApi(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()
|
|
|
+ // this.$router.push({ name: 'testRecord' })
|
|
|
+ }
|
|
|
+ //判断后边还有其他认知任务吗,如果有---则跳转到测试计划页面
|
|
|
+ } else {
|
|
|
+ //如果没有则调转到输入信息地方
|
|
|
+ ElMessage({
|
|
|
+ type: 'error',
|
|
|
+ message: res.msg
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // let params = {
|
|
|
+ // userId: userId.value,
|
|
|
+ // planId: planId.value,
|
|
|
+ // data: resultData.value,
|
|
|
+ // result: {
|
|
|
+ // totalScore: ((correctNum.length / 72) * 100).toFixed(2),
|
|
|
+ // happy: {
|
|
|
+ // level1: ((happy1.length / 3) * 100).toFixed(2),
|
|
|
+ // level2: ((happy2.length / 3) * 100).toFixed(2),
|
|
|
+ // level3: ((happy3.length / 3) * 100).toFixed(2),
|
|
|
+ // level4: ((happy4.length / 3) * 100).toFixed(2),
|
|
|
+ // },
|
|
|
+ // fear: {
|
|
|
+ // level1: ((fear1.length / 3) * 100).toFixed(2),
|
|
|
+ // level2: ((fear2.length / 3) * 100).toFixed(2),
|
|
|
+ // level3: ((fear3.length / 3) * 100).toFixed(2),
|
|
|
+ // level4: ((fear4.length / 3) * 100).toFixed(2),
|
|
|
+ // },
|
|
|
+ // angry: {
|
|
|
+ // level1: ((angry1.length / 3) * 100).toFixed(2),
|
|
|
+ // level2: ((angry2.length / 3) * 100).toFixed(2),
|
|
|
+ // level3: ((angry3.length / 3) * 100).toFixed(2),
|
|
|
+ // level4: ((angry4.length / 3) * 100).toFixed(2),
|
|
|
+ // },
|
|
|
+ // disgust: {
|
|
|
+ // level1: ((disgust1.length / 3) * 100).toFixed(2),
|
|
|
+ // level2: ((disgust2.length / 3) * 100).toFixed(2),
|
|
|
+ // level3: ((disgust3.length / 3) * 100).toFixed(2),
|
|
|
+ // level4: ((disgust4.length / 3) * 100).toFixed(2),
|
|
|
+ // },
|
|
|
+ // sad: {
|
|
|
+ // level1: ((sad1.length / 3) * 100).toFixed(2),
|
|
|
+ // level2: ((sad2.length / 3) * 100).toFixed(2),
|
|
|
+ // level3: ((sad3.length / 3) * 100).toFixed(2),
|
|
|
+ // level4: ((sad4.length / 3) * 100).toFixed(2),
|
|
|
+ // },
|
|
|
+ // surprise: {
|
|
|
+ // level1: ((surprise1.length / 3) * 100).toFixed(2),
|
|
|
+ // level2: ((surprise2.length / 3) * 100).toFixed(2),
|
|
|
+ // level3: ((surprise3.length / 3) * 100).toFixed(2),
|
|
|
+ // level4: ((surprise4.length / 3) * 100).toFixed(2),
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // }
|
|
|
+
|
|
|
+};
|
|
|
+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 startTest = () => {
|
|
|
+ if (testMode.value === 0) {
|
|
|
+ showGuider.value = true;
|
|
|
+ }
|
|
|
+ imgListSerialize();
|
|
|
+};
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ clearInterval(timingFlag.value);
|
|
|
+ clearInterval(flagTime.value);
|
|
|
+ clearTimeout(timingOne.value);
|
|
|
+ clearTimeout(timingTwo.value);
|
|
|
+ clearTimeout(timingThree.value);
|
|
|
+});
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.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;
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|