H5样式修改

src/components/IntroduceSwiper/index.vue

@@ -60,7 +60,7 @@
             class="read-button"
             round
             size="large"
-            type="info"
+            type="primary"
             @click="swiperRefChange"
           >
             我已知晓
@@ -118,7 +118,7 @@
               class="read-button"
               round
               size="large"
-              type="info"
+              type="primary"
               @click="swiperRefChange"
             >
               我已知晓
@@ -171,7 +171,7 @@
             class="read-button"
             round
             size="large"
-            type="info"
+            type="primary"
             @click="swiperRefChange"
           >
             我已知晓
@@ -195,7 +195,7 @@
             class="read-button"
             round
             size="large"
-            type="info"
+            type="primary"
             @click="end"
             >进入测试
           </van-button>

src/components/cognitiveTask/cognitiveTaskReport.vue

@@ -24,24 +24,39 @@
 
     <PageModule v-if="allData.ifShow.radar || allData.ifShow.table" text="得分">
       <!--雷达图-->
-      <div class="radar-warp" v-if="allData.ifShow.radar && allData.chartModule.chartType == 'radar'">
+      <div
+        v-if="allData.ifShow.radar && allData.chartModule.chartType == 'radar'"
+        class="radar-warp"
+      >
         <radarChart :data="allData.chartModule.chartBody"></radarChart>
       </div>
 
       <!--折线图-->
-      <div class="line-warp" v-if="allData.ifShow.radar && allData.chartModule.chartType == 'line'">
+      <div
+        v-if="allData.ifShow.radar && allData.chartModule.chartType == 'line'"
+        class="line-warp"
+      >
         <lineChart :data="allData.chartModule.chartBody"></lineChart>
       </div>
 
-      <template  v-if="allData.ifShow && allData.ifShow.table">
-        <table class="inner-table" border="1" v-for="(item, index) in tableData" :key="index">
+      <template v-if="allData.ifShow && allData.ifShow.table">
+        <table
+          v-for="(item, index) in tableData"
+          :key="index"
+          border="1"
+          class="inner-table"
+        >
           <tr class="table-th">
             <!--<th>评估指标</th>-->
             <!--<th>我的</th>-->
             <th v-for="(items, i) in item.columnName" :key="i">{{ items }}</th>
           </tr>
           <tr v-for="(list, j) in item.columnValue[0]" :key="j">
-            <td v-for="(tableItem, k) in item.columnValue" :key="k" class="td-result">
+            <td
+              v-for="(tableItem, k) in item.columnValue"
+              :key="k"
+              class="td-result"
+            >
               {{ tableItem[j] }}
             </td>
           </tr>
@@ -53,9 +68,19 @@
       </template>
     </PageModule>
 
-    <PageModule v-if="allData.ifShow && allData.ifShow.dimensions" text="得分解读">
-      <div class="score-interpretation-chart-warp" v-for="(item,index) in allData.dimensions" :key="index">
-        <scoreInterpretationItem :data="item" :order="index"></scoreInterpretationItem>
+    <PageModule
+      v-if="allData.ifShow && allData.ifShow.dimensions"
+      text="得分解读"
+    >
+      <div
+        v-for="(item, index) in allData.dimensions"
+        :key="index"
+        class="score-interpretation-chart-warp"
+      >
+        <scoreInterpretationItem
+          :data="item"
+          :order="index"
+        ></scoreInterpretationItem>
       </div>
     </PageModule>
 
@@ -71,20 +96,22 @@
       <!--<p class="tip-content">测评图表可快速帮您掌握报告内容；</p>-->
       <p class="tip-content">本结果仅供参考，不可作为临床诊断的依据；</p>
       <p class="tip-content">
-        如结果与你自己或他人感知的有出入，可回忆在测试时是否有事情影响了你，或自己答题时是否有所顾虑；</p>
-      <p class="tip-content">如对报告有不理解的地方，建议向专业资质人员进行咨询。</p>
+        如结果与你自己或他人感知的有出入，可回忆在测试时是否有事情影响了你，或自己答题时是否有所顾虑；
+      </p>
+      <p class="tip-content">
+        如对报告有不理解的地方，建议向专业资质人员进行咨询。
+      </p>
     </div>
-
   </div>
 </template>
 
 <script>
-import { mapGetters } from "vuex"
-import radarChart from "@/components/cognitiveTask/radarChart"
-import lineChart from "@/components/cognitiveTask/lineChart"
-import scoreInterpretationItem from "@/components/cognitiveTask/scoreInterpretation-item"
-import PageModule from "@/components/PageModule/index.vue"
-import StackedLine from "../echarts/StackedLine.vue"
+import { mapGetters } from "vuex";
+import radarChart from "@/components/cognitiveTask/radarChart";
+import lineChart from "@/components/cognitiveTask/lineChart";
+import scoreInterpretationItem from "@/components/cognitiveTask/scoreInterpretation-item";
+import PageModule from "@/components/PageModule/index.vue";
+import StackedLine from "../echarts/StackedLine.vue";
 
 export default {
   name: "cognitiveTaskReport",
@@ -124,8 +151,8 @@ export default {
       // groupThree: [],
       // groupAll: [],
       // groupLength: 0,
-      tableData: []//表格数据
-    }
+      tableData: [] //表格数据
+    };
   },
   computed: {
     ...mapGetters({
@@ -134,14 +161,14 @@ export default {
   },
   created() {
     //获取测试结果存储值
-    this.allData = JSON.parse(this.data?.userRecordEntity?.testResult)
+    this.allData = JSON.parse(this.data?.userRecordEntity?.testResult);
   },
   mounted() {
-    console.log('data: ', this.data)
+    console.log("data: ", this.data);
     if (this.allData.ifShow.table && this.allData?.tableModule) {
       //表格数据赋值处理
-      this.tableData = this.allData.tableModule
-      this.tableDataHandle()
+      this.tableData = this.allData.tableModule;
+      this.tableDataHandle();
     }
   },
   watch: {},
@@ -150,12 +177,12 @@ export default {
       //表格数据处理
       this.tableData.forEach(item => {
         item.columnValue.forEach((items, index, arr) => {
-          item.columnValue[index] = items.split(';')
-        })
-      })
+          item.columnValue[index] = items.split(";");
+        });
+      });
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -166,13 +193,13 @@ export default {
     width: calc(100% - 24px);
     margin: 0 12px;
     height: 136px;
-    background: url('~@/assets/image/bg-result-top.png') no-repeat center;
+    background: url("~@/assets/image/bg-result-top.png") no-repeat center;
     background-size: 100% 100%;
     overflow: hidden;
 
     .line-name {
       font-size: 20px;
-      color: #007EFF;
+      color: #23b701;
       padding-left: 20px;
       margin-top: 40px;
     }
@@ -205,7 +232,7 @@ export default {
     .table-th {
       height: 32px;
       font-size: 14px;
-      background: #007EFF;
+      background: #27b700;
       color: #fff;
 
       th {
@@ -220,7 +247,7 @@ export default {
       padding: 7px;
       font-size: 13px;
       width: 50%;
-      background-color: #F0F3F6;
+      background-color: #f0f3f6;
       border-bottom: 1px solid white;
       border-right: 1px solid white;
       text-align: center;
@@ -229,7 +256,7 @@ export default {
 
   .total-score {
     font-size: 13px;
-    color: #007EFF;
+    color: #23b701;
     text-align: center;
     width: 100%;
     margin-bottom: 8px;
@@ -244,10 +271,11 @@ export default {
   .score-des {
     font-size: 12px;
     color: #555555;
-    text-indent: 2em
+    text-indent: 2em;
   }
 
-  .radar-warp, .line-warp {
+  .radar-warp,
+  .line-warp {
     width: 100%;
     box-sizing: border-box;
     padding: 0 0 16px;
@@ -294,7 +322,7 @@ export default {
 .report-total-score-warp {
   width: 100%;
   /*height: 160px;*/
-  background: #F1F9FA;
+  background: #f1f9fa;
   box-sizing: border-box;
   padding: 20px;
   /*margin: 20px 0;*/
@@ -306,7 +334,8 @@ export default {
   margin-top: 20px;
 }
 
-.score-title, .note-title {
+.score-title,
+.note-title {
   width: 150px;
   height: 35px;
   font-size: 14px;
@@ -318,12 +347,14 @@ export default {
 }
 
 .score-title {
-  background: url("../../assets/congnitiveAblitity/pinggu_icon.png") no-repeat center;
+  background: url("../../assets/congnitiveAblitity/pinggu_icon.png") no-repeat
+    center;
   background-size: 100% 100%;
 }
 
 .note-title {
-  background: url("../../assets/congnitiveAblitity/jianyi_icon.png") no-repeat center;
+  background: url("../../assets/congnitiveAblitity/jianyi_icon.png") no-repeat
+    center;
   background-size: 100% 100%;
 }
 
@@ -338,7 +369,7 @@ export default {
 
 .table-warp .score-table {
   width: 100%;
-  background: #F4F4F4;
+  background: #f4f4f4;
   font-size: 16px;
 }
 
@@ -347,13 +378,14 @@ export default {
   line-height: 40px;
 }
 
-.score-table th, .score-table td {
+.score-table th,
+.score-table td {
   text-align: center;
   width: 50%;
 }
 
 .score-table th {
-  background: #9DD9E3;
+  background: #9dd9e3;
   border: none;
 }
 
@@ -382,7 +414,7 @@ export default {
   font-family: PingFang SC;
   font-weight: 500;
   color: #262626;
-  border-top: 2px solid #5CB9C9;
+  border-top: 2px solid #5cb9c9;
   /*box-sizing: border-box;*/
   /*margin: 20px 0 0;*/
 }
@@ -400,5 +432,4 @@ export default {
   box-sizing: border-box;
   padding: 10px 0 10px 25px;
 }
-
 </style>

src/components/header/index.vue

@@ -12,8 +12,8 @@ export default {
 .bg-header {
   width: 100%;
   height: 270px;
-  background: #07c160;
-  //background: url('~@/assets/image/bg-header.png') no-repeat center;
+  //background: #07c160;
+  background: url("~@/assets/image/bg-header.png") no-repeat center;
   background-size: 100% 100%;
   position: absolute;
   left: 0;

src/views/cognitiveTask/ECATAddiction.vue

@@ -122,7 +122,7 @@
             block
             round
             size="small"
-            type="info"
+            type="primary"
             @click="userClick('L')"
           >
             <van-icon name="arrow-left" />
@@ -133,7 +133,7 @@
             block
             round
             size="small"
-            type="info"
+            type="primary"
             @click="userClick('R')"
           >
             <van-icon name="arrow" />

src/views/cognitiveTask/EREC.vue

@@ -1,666 +1,683 @@
 <template>
+  <div>
+    <!--   <h1 class="txt-center">任务 4：情绪回忆任务（EREC）——情感信息的记忆</h1>
 
-    <div>
-        <!--   <h1 class="txt-center">任务 4：情绪回忆任务（EREC）——情感信息的记忆</h1>
+      <div style="width: 650px; margin: 20px auto; line-height: 2">
+        <p style="text-align: left; text-indent: 2em">
+          您好，请尽可能多地回忆在实验2中出现过的相容词，并于一定时间内在屏幕中的输入框处逐个进行输入，每输入一个形容词时请按下回车键或点击白框空白处保存当前形容词，点击右上角×号可删除已输入形容词，当您回忆完成后，可点击保存进入下一个测试。
+        </p>
+      </div> -->
+    <van-nav-bar
+      :title="subjectInfo.name"
+      left-arrow
+      left-text="返回"
+      @click-left="goBack"
+    />
 
-          <div style="width: 650px; margin: 20px auto; line-height: 2">
-            <p style="text-align: left; text-indent: 2em">
-              您好，请尽可能多地回忆在实验2中出现过的相容词，并于一定时间内在屏幕中的输入框处逐个进行输入，每输入一个形容词时请按下回车键或点击白框空白处保存当前形容词，点击右上角×号可删除已输入形容词，当您回忆完成后，可点击保存进入下一个测试。
-            </p>
-          </div> -->
-        <van-nav-bar
-                :title="subjectInfo.name"
-                left-text="返回"
-                left-arrow
-                @click-left="goBack"
-        />
+    <!--<div v-if="!testFlag" class="explan">-->
+    <!--&lt;!&ndash; LOGO  &ndash;&gt;-->
+    <!--&lt;!&ndash;<h1>情绪识别记忆任务（EREC）</h1>&ndash;&gt;-->
+    <!--<div>-->
+    <!--&lt;!&ndash;<p>请您好，请尽可能多地回忆在实验2中出现过的相容词，并于一定时间内在屏幕中的输入框处逐个进行输入，每输入一个形容词时请按下回车键或点击白框空白处保存当前形容词，点击右上角“x”号按钮可删除已输入形容词，当您回忆完成后，可点击保存进入下一个测试。</p>&ndash;&gt;-->
+    <!--<p>{{subjectInfo.mobileTestDescription}}</p>-->
+    <!--</div>-->
+    <!--<div class="btnArea">-->
+    <!--<van-button round block type="info" @click="startTest(1)">开始测试</van-button>-->
+    <!--</div>-->
+    <!--</div>-->
 
-        <!--<div v-if="!testFlag" class="explan">-->
-            <!--&lt;!&ndash; LOGO  &ndash;&gt;-->
-            <!--&lt;!&ndash;<h1>情绪识别记忆任务（EREC）</h1>&ndash;&gt;-->
-            <!--<div>-->
-                <!--&lt;!&ndash;<p>请您好，请尽可能多地回忆在实验2中出现过的相容词，并于一定时间内在屏幕中的输入框处逐个进行输入，每输入一个形容词时请按下回车键或点击白框空白处保存当前形容词，点击右上角“x”号按钮可删除已输入形容词，当您回忆完成后，可点击保存进入下一个测试。</p>&ndash;&gt;-->
-                <!--<p>{{subjectInfo.mobileTestDescription}}</p>-->
-            <!--</div>-->
-            <!--<div class="btnArea">-->
-                <!--<van-button round block type="info" @click="startTest(1)">开始测试</van-button>-->
-            <!--</div>-->
-        <!--</div>-->
-
-        <div v-if="testFlag" class="activeTask">
-
-            <p v-show="countDownShow1" class="timingBox">{{ countDownStr }}</p>
-            <div v-show="flag1" class="tabbarbox">
-                <p v-show="countDownShow" class="count-down">倒计时:{{ countDownTime }}</p>
-                <div class="eltagbox">
-                    <van-field
-                            v-if="inputVisible"
-                            v-model="inputValue"
-                            center
-                            clearable
-                            placeholder="请输入记忆的词语"
-                    >
-                        <template #button>
-                            <van-button size="small" type="info" @click="handleInputConfirm">确定</van-button>
-                        </template>
-                    </van-field>
-                    <div class="eltag">
-                        <van-tag
-                                v-for="tag in dynamicTags"
-                                :key="tag"
-                                closeable
-                                size="large"
-                                type="primary"
-                                color="#57ACBB"
-                                @close="handleClose(tag)">
-                           {{tag}}
-                        </van-tag>
-
-                    </div>
-                </div>
-                <div class="btnArea">
-                    <van-button round block type="info" @click="userClick">保存</van-button>
-                </div>
-
-            </div>
+    <div v-if="testFlag" class="activeTask">
+      <p v-show="countDownShow1" class="timingBox">{{ countDownStr }}</p>
+      <div v-show="flag1" class="tabbarbox">
+        <p v-show="countDownShow" class="count-down">
+          倒计时:{{ countDownTime }}
+        </p>
+        <div class="eltagbox">
+          <van-field
+            v-if="inputVisible"
+            v-model="inputValue"
+            center
+            clearable
+            placeholder="请输入记忆的词语"
+          >
+            <template #button>
+              <van-button
+                size="small"
+                type="primary"
+                @click="handleInputConfirm"
+                >确定</van-button
+              >
+            </template>
+          </van-field>
+          <div class="eltag">
+            <van-tag
+              v-for="tag in dynamicTags"
+              :key="tag"
+              closeable
+              color="#57ACBB"
+              size="large"
+              type="primary"
+              @close="handleClose(tag)"
+            >
+              {{ tag }}
+            </van-tag>
+          </div>
         </div>
-
+        <div class="btnArea">
+          <van-button block round type="primary" @click="userClick"
+            >保存</van-button
+          >
+        </div>
+      </div>
     </div>
-
-
+  </div>
 </template>
 
 <script>
-    export default {
-        name: "EREC",
-        data() {
-            return {
-                flag1:false,
-                subjectInfo: "", //任务详情信息
-                countDownStr: "马上开始！",
-                // countDownTime_begin: 6,
-                countDownTime_begin: 11,
-                countDownShow1:true,
-                userId: "",
-                testFlag: false,
-                testState: false,
-                button0Show: true,
-                button1Show: false,
-                countDownShow: false,
-                countDownTime: 150, //倒计时
-                dynamicTags: [],
-                inputVisible: true,
-                inputValue: "",
-                timeOne: "",
-                myInterval: "",
-                wordlist: [
-                    {
-                        index: 1,
-                        currentword: "优秀",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 2,
-                        currentword: "高尚",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 3,
-                        currentword: "聪慧",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 4,
-                        currentword: "崇高",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 5,
-                        currentword: "聪明",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 6,
-                        currentword: "杰出",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 7,
-                        currentword: "伟大",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 8,
-                        currentword: "睿智",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 9,
-                        currentword: "乐观",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 10,
-                        currentword: "渊博",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 11,
-                        currentword: "卓越",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 12,
-                        currentword: "诚实",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 13,
-                        currentword: "爽朗",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 14,
-                        currentword: "热情",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 15,
-                        currentword: "自豪",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 16,
-                        currentword: "正直",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 17,
-                        currentword: "温暖",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 18,
-                        currentword: "勤快",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 19,
-                        currentword: "坚强",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 20,
-                        currentword: "勇敢",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 21,
-                        currentword: "勤奋",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 22,
-                        currentword: "爽快",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 23,
-                        currentword: "恬静",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 24,
-                        currentword: "机智",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 25,
-                        currentword: "有趣",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 26,
-                        currentword: "豪迈",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 27,
-                        currentword: "精干",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 28,
-                        currentword: "热切",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 29,
-                        currentword: "活泼",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 30,
-                        currentword: "认真",
-                        wordtype: "positive",
-                    },
-                    {
-                        index: 31,
-                        currentword: "下贱",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 32,
-                        currentword: "卑劣",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 33,
-                        currentword: "凶狠",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 34,
-                        currentword: "窝囊",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 35,
-                        currentword: "虚伪",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 36,
-                        currentword: "自私",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 37,
-                        currentword: "丑陋",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 38,
-                        currentword: "无能",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 39,
-                        currentword: "愚蠢",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 40,
-                        currentword: "暴躁",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 41,
-                        currentword: "刻薄",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 42,
-                        currentword: "猖狂",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 43,
-                        currentword: "残酷",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 44,
-                        currentword: "狠心",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 45,
-                        currentword: "悲观",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 46,
-                        currentword: "尖刻",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 47,
-                        currentword: "阴沉",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 48,
-                        currentword: "腐朽",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 49,
-                        currentword: "无情",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 50,
-                        currentword: "消极",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 51,
-                        currentword: "自卑",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 52,
-                        currentword: "蛮横",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 53,
-                        currentword: "呆滞",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 54,
-                        currentword: "焦躁",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 55,
-                        currentword: "懒惰",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 56,
-                        currentword: "阴暗",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 57,
-                        currentword: "危险",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 58,
-                        currentword: "粗鲁",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 59,
-                        currentword: "傲慢",
-                        wordtype: "negative",
-                    },
-                    {
-                        index: 60,
-                        currentword: "自负",
-                        wordtype: "negative",
-                    },
-                ], //词语列表
-            };
-        },
-        created() {
-            this.testPlanId = this.$route.query.testPlanId || '';
-            this.userId = JSON.parse(sessionStorage.getItem("userInfo")).id;
-            this.subjectInfo = JSON.parse(sessionStorage.getItem('subjectInfo'))
-        },
-        mounted() {
-            this.$nextTick(() => {
-                this.startTest(1)
-            });
-        },
-        destroyed() {
-            clearInterval(this.myInterval);
-        },
-        methods: {
-            goBack() {
-                if(this.testPlanId) {
-                    //来自测试计划列表
-                    this.$router.push({
-                        name: "testPlanClassify",
-                        params: {
-                            testPlanId: this.testPlanId,
-                        },
-                    });
-                }else {
-                    this.$router.push("/index/cognitionTask");
-                }
-            },
-            countDown_begin() {
-                // 测试时间倒计时
-                this.myInterval = setInterval(() => {
-                    this.countDownTime_begin--;
-                    this.countDownStr = this.countDownTime_begin;
-                    if (this.countDownTime_begin == 0) {
-                        this.countDownShow1 = false;
-                        //计算测试结果
-                        this.flag1=true;
-                        this.countDownShow = true;
-                        // this.showTargetNow();
-
-                        // 清除定时器
-                        clearInterval(this.myInterval);
-                        this.countDown();
-                        // this.countDownTime_begin = 5;
-                        this.countDownTime_begin = 10;
-                    }
-                }, 1000);
-            },
-            startTest(testType) {
-                if (!sessionStorage.getItem("userInfo")) {
-                    this.$toast("请先登录！");
-                    this.$router.push("/login");
-                    return;
-                }
-                if (testType == 0) {
-                    this.testTypeCode = 0;
-                } else {
-                    this.testTypeCode = 1;
-                }
-                if (this.testTypeCode == 1) {
-
-                    this.testFlag = true;
-                    this.testState = true;
-                    this.countDownShow = true;
-                    this.countDown_begin();
-                }
-            },
-            handleClose(tag) {
-                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
-            },
-            handleInputConfirm() {
-                let inputValue = this.inputValue;
-                if(this.dynamicTags.includes(inputValue)){
-                    this.$toast.fail("重复输入");
-                    this.inputValue = "";
-                }else{
-                    if (inputValue) {
-                        this.dynamicTags.push(inputValue);
-                    }
-                    this.inputValue = "";
-                }
-            },
-            // 去除输入数组重复元素，不加入最后计算
-            newData(data) {
-                var nData = new Array();
-                for (var i = 0; i < data.length; i++) {
-                    if (nData.indexOf(data[i]) == -1) {
-                        nData.push(data[i]);
-                    }
-                }
-                return nData;
-            },
-            userClick() {
-                this.countDownShow == false;
-                this.testFlag = false;
-                this.testState = false;
-                this.button0Show = false;
-                // this.button1Show = true;
-                this.dynamicTags = this.newData(this.dynamicTags);
-                this.compareWordlist();
-                clearInterval(this.myInterval);
-                this.$toast.success('测试完成');
-            },
-            // 倒计时
-            countDown() {
-                this.myInterval = setInterval(() => {
-                    this.countDownTime--;
-                    if (this.countDownTime == 0) {
-                        this.countDownShow == false;
-                        this.testFlag = false;
-                        this.testState = false;
-                        this.button0Show = false;
-                        // this.button1Show = true;
-                        this.dynamicTags = this.newData(this.dynamicTags);
-                        this.compareWordlist();
-                        // this.exitFullscreen();
-                        clearInterval(this.myInterval);
-                        this.$toast.success('测试结束');
-                    }
-                }, 1000);
-            },
-
-            compareWordlist(){
-                // 判断用户输入结果正确率
-                var accuracy = 0;
-                let arrInter = [...this.dynamicTags].filter(x => [...this.wordlist].some(y => y.currentword === x));
-                console.log(arrInter.length );
-                accuracy = ((arrInter.length/this.wordlist.length)*100).toFixed(2);
-                console.log(accuracy);
-                // 积极词语的正确率
-                var accopp = 0;
-                var newArr = this.wordlist.slice(0,30)
-                console.log(newArr)
-                let arropp = [...this.dynamicTags].filter(x => [...newArr].some(y => y.currentword === x));
-                accopp = ((arropp.length/newArr.length)*100).toFixed(2);
-                console.log(accopp);
-                // 消极词语的正确率
-                var accneg = 0;
-                var newArrneg = this.wordlist.slice(30,60)
-                console.log(newArrneg);
-                let arrneg = [...this.dynamicTags].filter(x => [...newArrneg].some(y => y.currentword === x));
-                accneg = ((arrneg.length/newArr.length)*100).toFixed(2);
-                console.log(accneg);
-
-                //跳转
-                // this.$http.post(`/cognize/EREC`,{
-                //         userId: this.userId,
-                //         testPlanId: this.testPlanId,
-                //         data:{
-                //             totalWords: arrInter.length, //总词数
-                //             positiveWordCount: arropp.length, // 积极词语个数
-                //             negtiveWordCount: arrneg.length, //消极词语个数
-                //         },
-                //         result:{
-                //             totalCorrectRate: accuracy + "%", //总的正确率
-                //             posCorrectRate: accopp + "%", //积极词语的正确率
-                //             negCorrectRate: accneg + "%", //消极词语的正确率
-                //         }
-                // }, (response) => {
-                //     if (response?.code == 200) {
-                //         sessionStorage.setItem("resultInfo", JSON.stringify(response.data));
-                //         this.$router.push(`/cognitiveTestResult?from=1&testPlanId=${this.testPlanId}`);
-                //
-                //     } else {
-                //         this.$toast.fail(response?.msg);
-                //     }
-                //
-                // },(err) => {
-                //     this.$toast.fail(err.msg);
-                // });
+export default {
+  name: "EREC",
+  data() {
+    return {
+      flag1: false,
+      subjectInfo: "", //任务详情信息
+      countDownStr: "马上开始！",
+      // countDownTime_begin: 6,
+      countDownTime_begin: 11,
+      countDownShow1: true,
+      userId: "",
+      testFlag: false,
+      testState: false,
+      button0Show: true,
+      button1Show: false,
+      countDownShow: false,
+      countDownTime: 150, //倒计时
+      dynamicTags: [],
+      inputVisible: true,
+      inputValue: "",
+      timeOne: "",
+      myInterval: "",
+      wordlist: [
+        {
+          index: 1,
+          currentword: "优秀",
+          wordtype: "positive"
+        },
+        {
+          index: 2,
+          currentword: "高尚",
+          wordtype: "positive"
+        },
+        {
+          index: 3,
+          currentword: "聪慧",
+          wordtype: "positive"
+        },
+        {
+          index: 4,
+          currentword: "崇高",
+          wordtype: "positive"
+        },
+        {
+          index: 5,
+          currentword: "聪明",
+          wordtype: "positive"
+        },
+        {
+          index: 6,
+          currentword: "杰出",
+          wordtype: "positive"
+        },
+        {
+          index: 7,
+          currentword: "伟大",
+          wordtype: "positive"
+        },
+        {
+          index: 8,
+          currentword: "睿智",
+          wordtype: "positive"
+        },
+        {
+          index: 9,
+          currentword: "乐观",
+          wordtype: "positive"
+        },
+        {
+          index: 10,
+          currentword: "渊博",
+          wordtype: "positive"
+        },
+        {
+          index: 11,
+          currentword: "卓越",
+          wordtype: "positive"
+        },
+        {
+          index: 12,
+          currentword: "诚实",
+          wordtype: "positive"
+        },
+        {
+          index: 13,
+          currentword: "爽朗",
+          wordtype: "positive"
+        },
+        {
+          index: 14,
+          currentword: "热情",
+          wordtype: "positive"
+        },
+        {
+          index: 15,
+          currentword: "自豪",
+          wordtype: "positive"
+        },
+        {
+          index: 16,
+          currentword: "正直",
+          wordtype: "positive"
+        },
+        {
+          index: 17,
+          currentword: "温暖",
+          wordtype: "positive"
+        },
+        {
+          index: 18,
+          currentword: "勤快",
+          wordtype: "positive"
+        },
+        {
+          index: 19,
+          currentword: "坚强",
+          wordtype: "positive"
+        },
+        {
+          index: 20,
+          currentword: "勇敢",
+          wordtype: "positive"
+        },
+        {
+          index: 21,
+          currentword: "勤奋",
+          wordtype: "positive"
+        },
+        {
+          index: 22,
+          currentword: "爽快",
+          wordtype: "positive"
+        },
+        {
+          index: 23,
+          currentword: "恬静",
+          wordtype: "positive"
+        },
+        {
+          index: 24,
+          currentword: "机智",
+          wordtype: "positive"
+        },
+        {
+          index: 25,
+          currentword: "有趣",
+          wordtype: "positive"
+        },
+        {
+          index: 26,
+          currentword: "豪迈",
+          wordtype: "positive"
+        },
+        {
+          index: 27,
+          currentword: "精干",
+          wordtype: "positive"
+        },
+        {
+          index: 28,
+          currentword: "热切",
+          wordtype: "positive"
+        },
+        {
+          index: 29,
+          currentword: "活泼",
+          wordtype: "positive"
+        },
+        {
+          index: 30,
+          currentword: "认真",
+          wordtype: "positive"
+        },
+        {
+          index: 31,
+          currentword: "下贱",
+          wordtype: "negative"
+        },
+        {
+          index: 32,
+          currentword: "卑劣",
+          wordtype: "negative"
+        },
+        {
+          index: 33,
+          currentword: "凶狠",
+          wordtype: "negative"
+        },
+        {
+          index: 34,
+          currentword: "窝囊",
+          wordtype: "negative"
+        },
+        {
+          index: 35,
+          currentword: "虚伪",
+          wordtype: "negative"
+        },
+        {
+          index: 36,
+          currentword: "自私",
+          wordtype: "negative"
+        },
+        {
+          index: 37,
+          currentword: "丑陋",
+          wordtype: "negative"
+        },
+        {
+          index: 38,
+          currentword: "无能",
+          wordtype: "negative"
+        },
+        {
+          index: 39,
+          currentword: "愚蠢",
+          wordtype: "negative"
+        },
+        {
+          index: 40,
+          currentword: "暴躁",
+          wordtype: "negative"
+        },
+        {
+          index: 41,
+          currentword: "刻薄",
+          wordtype: "negative"
+        },
+        {
+          index: 42,
+          currentword: "猖狂",
+          wordtype: "negative"
+        },
+        {
+          index: 43,
+          currentword: "残酷",
+          wordtype: "negative"
+        },
+        {
+          index: 44,
+          currentword: "狠心",
+          wordtype: "negative"
+        },
+        {
+          index: 45,
+          currentword: "悲观",
+          wordtype: "negative"
+        },
+        {
+          index: 46,
+          currentword: "尖刻",
+          wordtype: "negative"
+        },
+        {
+          index: 47,
+          currentword: "阴沉",
+          wordtype: "negative"
+        },
+        {
+          index: 48,
+          currentword: "腐朽",
+          wordtype: "negative"
+        },
+        {
+          index: 49,
+          currentword: "无情",
+          wordtype: "negative"
+        },
+        {
+          index: 50,
+          currentword: "消极",
+          wordtype: "negative"
+        },
+        {
+          index: 51,
+          currentword: "自卑",
+          wordtype: "negative"
+        },
+        {
+          index: 52,
+          currentword: "蛮横",
+          wordtype: "negative"
+        },
+        {
+          index: 53,
+          currentword: "呆滞",
+          wordtype: "negative"
+        },
+        {
+          index: 54,
+          currentword: "焦躁",
+          wordtype: "negative"
+        },
+        {
+          index: 55,
+          currentword: "懒惰",
+          wordtype: "negative"
+        },
+        {
+          index: 56,
+          currentword: "阴暗",
+          wordtype: "negative"
+        },
+        {
+          index: 57,
+          currentword: "危险",
+          wordtype: "negative"
+        },
+        {
+          index: 58,
+          currentword: "粗鲁",
+          wordtype: "negative"
+        },
+        {
+          index: 59,
+          currentword: "傲慢",
+          wordtype: "negative"
+        },
+        {
+          index: 60,
+          currentword: "自负",
+          wordtype: "negative"
+        }
+      ] //词语列表
+    };
+  },
+  created() {
+    this.testPlanId = this.$route.query.testPlanId || "";
+    this.userId = JSON.parse(sessionStorage.getItem("userInfo")).id;
+    this.subjectInfo = JSON.parse(sessionStorage.getItem("subjectInfo"));
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.startTest(1);
+    });
+  },
+  destroyed() {
+    clearInterval(this.myInterval);
+  },
+  methods: {
+    goBack() {
+      if (this.testPlanId) {
+        //来自测试计划列表
+        this.$router.push({
+          name: "testPlanClassify",
+          params: {
+            testPlanId: this.testPlanId
+          }
+        });
+      } else {
+        this.$router.push("/index/cognitionTask");
+      }
+    },
+    countDown_begin() {
+      // 测试时间倒计时
+      this.myInterval = setInterval(() => {
+        this.countDownTime_begin--;
+        this.countDownStr = this.countDownTime_begin;
+        if (this.countDownTime_begin == 0) {
+          this.countDownShow1 = false;
+          //计算测试结果
+          this.flag1 = true;
+          this.countDownShow = true;
+          // this.showTargetNow();
 
-                let result = {
-                    data:{
-                        totalWords: arrInter.length, //总词数
-                        positiveWordCount: arropp.length, // 积极词语个数
-                        negtiveWordCount: arrneg.length, //消极词语个数
-                    },
-                    result:{
-                        totalCorrectRate: accuracy + "%", //总的正确率
-                        posCorrectRate: accopp + "%", //积极词语的正确率
-                        negCorrectRate: accneg + "%", //消极词语的正确率
-                    }
-                };
+          // 清除定时器
+          clearInterval(this.myInterval);
+          this.countDown();
+          // this.countDownTime_begin = 5;
+          this.countDownTime_begin = 10;
+        }
+      }, 1000);
+    },
+    startTest(testType) {
+      if (!sessionStorage.getItem("userInfo")) {
+        this.$toast("请先登录！");
+        this.$router.push("/login");
+        return;
+      }
+      if (testType == 0) {
+        this.testTypeCode = 0;
+      } else {
+        this.testTypeCode = 1;
+      }
+      if (this.testTypeCode == 1) {
+        this.testFlag = true;
+        this.testState = true;
+        this.countDownShow = true;
+        this.countDown_begin();
+      }
+    },
+    handleClose(tag) {
+      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+    },
+    handleInputConfirm() {
+      let inputValue = this.inputValue;
+      if (this.dynamicTags.includes(inputValue)) {
+        this.$toast.fail("重复输入");
+        this.inputValue = "";
+      } else {
+        if (inputValue) {
+          this.dynamicTags.push(inputValue);
+        }
+        this.inputValue = "";
+      }
+    },
+    // 去除输入数组重复元素，不加入最后计算
+    newData(data) {
+      var nData = new Array();
+      for (var i = 0; i < data.length; i++) {
+        if (nData.indexOf(data[i]) == -1) {
+          nData.push(data[i]);
+        }
+      }
+      return nData;
+    },
+    userClick() {
+      this.countDownShow == false;
+      this.testFlag = false;
+      this.testState = false;
+      this.button0Show = false;
+      // this.button1Show = true;
+      this.dynamicTags = this.newData(this.dynamicTags);
+      this.compareWordlist();
+      clearInterval(this.myInterval);
+      this.$toast.success("测试完成");
+    },
+    // 倒计时
+    countDown() {
+      this.myInterval = setInterval(() => {
+        this.countDownTime--;
+        if (this.countDownTime == 0) {
+          this.countDownShow == false;
+          this.testFlag = false;
+          this.testState = false;
+          this.button0Show = false;
+          // this.button1Show = true;
+          this.dynamicTags = this.newData(this.dynamicTags);
+          this.compareWordlist();
+          // this.exitFullscreen();
+          clearInterval(this.myInterval);
+          this.$toast.success("测试结束");
+        }
+      }, 1000);
+    },
 
-                this.$store.dispatch("setVocabularyRecall", result);
-                this.$dialog.alert({
-                    title: '提示',
-                    message: '词汇回忆任务结束，接下来进行词汇识别测试，您有十秒中的休息时间。请按确定按钮继续',
-                }).then(() => {
-                    // on close
-                    this.$router.push({name: "EMEM", params: {}})
-                });
+    compareWordlist() {
+      // 判断用户输入结果正确率
+      var accuracy = 0;
+      let arrInter = [...this.dynamicTags].filter(x =>
+        [...this.wordlist].some(y => y.currentword === x)
+      );
+      console.log(arrInter.length);
+      accuracy = ((arrInter.length / this.wordlist.length) * 100).toFixed(2);
+      console.log(accuracy);
+      // 积极词语的正确率
+      var accopp = 0;
+      var newArr = this.wordlist.slice(0, 30);
+      console.log(newArr);
+      let arropp = [...this.dynamicTags].filter(x =>
+        [...newArr].some(y => y.currentword === x)
+      );
+      accopp = ((arropp.length / newArr.length) * 100).toFixed(2);
+      console.log(accopp);
+      // 消极词语的正确率
+      var accneg = 0;
+      var newArrneg = this.wordlist.slice(30, 60);
+      console.log(newArrneg);
+      let arrneg = [...this.dynamicTags].filter(x =>
+        [...newArrneg].some(y => y.currentword === x)
+      );
+      accneg = ((arrneg.length / newArr.length) * 100).toFixed(2);
+      console.log(accneg);
 
-                this.$toast.success('测试完成');
+      //跳转
+      // this.$http.post(`/cognize/EREC`,{
+      //         userId: this.userId,
+      //         testPlanId: this.testPlanId,
+      //         data:{
+      //             totalWords: arrInter.length, //总词数
+      //             positiveWordCount: arropp.length, // 积极词语个数
+      //             negtiveWordCount: arrneg.length, //消极词语个数
+      //         },
+      //         result:{
+      //             totalCorrectRate: accuracy + "%", //总的正确率
+      //             posCorrectRate: accopp + "%", //积极词语的正确率
+      //             negCorrectRate: accneg + "%", //消极词语的正确率
+      //         }
+      // }, (response) => {
+      //     if (response?.code == 200) {
+      //         sessionStorage.setItem("resultInfo", JSON.stringify(response.data));
+      //         this.$router.push(`/cognitiveTestResult?from=1&testPlanId=${this.testPlanId}`);
+      //
+      //     } else {
+      //         this.$toast.fail(response?.msg);
+      //     }
+      //
+      // },(err) => {
+      //     this.$toast.fail(err.msg);
+      // });
 
-            },
+      let result = {
+        data: {
+          totalWords: arrInter.length, //总词数
+          positiveWordCount: arropp.length, // 积极词语个数
+          negtiveWordCount: arrneg.length //消极词语个数
         },
+        result: {
+          totalCorrectRate: accuracy + "%", //总的正确率
+          posCorrectRate: accopp + "%", //积极词语的正确率
+          negCorrectRate: accneg + "%" //消极词语的正确率
+        }
+      };
+
+      this.$store.dispatch("setVocabularyRecall", result);
+      this.$dialog
+        .alert({
+          title: "提示",
+          message:
+            "词汇回忆任务结束，接下来进行词汇识别测试，您有十秒中的休息时间。请按确定按钮继续"
+        })
+        .then(() => {
+          // on close
+          this.$router.push({ name: "EMEM", params: {} });
+        });
 
+      this.$toast.success("测试完成");
     }
+  }
+};
 </script>
 
 <style scoped>
-    .explan {
-        box-sizing: border-box;
-        padding: 46px 15px 0;
-    }
-    .explan h1 {
-        font-size: 16px;
-        color: #222222;
-        text-align: center;
-    }
-    .explan p {
-        font-size: 14px;
-        color: #666666;
-        line-height: 26px;
-        text-indent: 15px;
-        margin: 20px 0 20px;
-    }
-    .activeTask {
-        box-sizing: border-box;
-        padding-top: 46px;
-        width: 100%;
-        height: 100%;
-        background: url("../../assets/congnitiveAblitity/rememberAbilityTask.png") no-repeat center;
-        background-size: cover;
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-    }
-    .timingBox {
-        position:absolute;
-        top:50%;
-        left:50%;
-        transform:translate(-50%,-50%);
-        color:black;
-        font-size:18px;
-        text-align:center;
-        line-height:50px;
-        margin:0 auto;
-        z-index: 10;
-    }
-    .tabbarbox {
-        width: 100%;
-        box-sizing: border-box;
-        padding: 0 10px;
-    }
-    .count-down {
-        width: 100%;
-        font-size: 26px;
-        color: #000;
-        text-align: center;
-        padding: 15px 0;
-    }
-    .eltagbox {
-        background-color: white;
-        border-radius: 10px;
-        width: 100%;
-        height: 400px;
-        overflow: auto;
-        opacity: 0.8;
-    }
-    .btnArea {
-        margin-top: 10px;
-    }
+.explan {
+  box-sizing: border-box;
+  padding: 46px 15px 0;
+}
+
+.explan h1 {
+  font-size: 16px;
+  color: #222222;
+  text-align: center;
+}
+
+.explan p {
+  font-size: 14px;
+  color: #666666;
+  line-height: 26px;
+  text-indent: 15px;
+  margin: 20px 0 20px;
+}
+
+.activeTask {
+  box-sizing: border-box;
+  padding-top: 46px;
+  width: 100%;
+  height: 100%;
+  background: url("../../assets/congnitiveAblitity/rememberAbilityTask.png")
+    no-repeat center;
+  background-size: cover;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.timingBox {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: black;
+  font-size: 18px;
+  text-align: center;
+  line-height: 50px;
+  margin: 0 auto;
+  z-index: 10;
+}
+
+.tabbarbox {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 10px;
+}
+
+.count-down {
+  width: 100%;
+  font-size: 26px;
+  color: #000;
+  text-align: center;
+  padding: 15px 0;
+}
+
+.eltagbox {
+  background-color: white;
+  border-radius: 10px;
+  width: 100%;
+  height: 400px;
+  overflow: auto;
+  opacity: 0.8;
+}
 
-</style>
+.btnArea {
+  margin-top: 10px;
+}
+</style>

src/views/cognitiveTask/MMSE.vue

@@ -3,8 +3,8 @@
   <div>
     <van-nav-bar
       :title="subjectInfo.name"
-      left-text="返回"
       left-arrow
+      left-text="返回"
       @click-left="goBack"
     />
 
@@ -17,19 +17,19 @@
         <div class="drawCnt">
           <img
             v-if="questionList[current].img != ''"
+            :class="{ mr50: current == 19 }"
             :src="questionList[current].img"
             alt=""
-            :class="{ mr50: current == 19 }"
           />
           <div class="draw-canvas">
             <drawing-board
-              ref="drawingBoard"
               v-if="current == 19"
+              ref="drawingBoard"
               @canvasDown="canvasDownHandle"
               @canvasMove="canvasMoveHandle"
               @canvasUp="canvasUpHandle"
-              @setColor="setColorHandle"
               @controlCanvas="controlCanvasHandle"
+              @setColor="setColorHandle"
             ></drawing-board>
           </div>
         </div>
@@ -47,34 +47,34 @@
           <!--</el-radio-group>-->
 
           <van-radio-group
-            direction="horizontal"
             v-model="questionList[current].userAnswer"
+            direction="horizontal"
           >
             <van-radio
               v-for="(item, index) in questionList[current].answerList"
               :key="index"
               :name="item.value"
               @click="answerHandle"
-              >{{ item.name }}</van-radio
-            >
+              >{{ item.name }}
+            </van-radio>
           </van-radio-group>
         </div>
 
         <div v-show="role == 'doc'" class="btn-content">
           <van-button
-            size="small"
-            type="info"
             :disabled="current <= 0"
+            size="small"
+            type="primary"
             @click="preQuestion"
-            >上一题</van-button
-          >
+            >上一题
+          </van-button>
           <van-button
-            size="small"
-            type="info"
             :disabled="current >= 19"
+            size="small"
+            type="primary"
             @click="nextQuestion"
-            >下一题</van-button
-          >
+            >下一题
+          </van-button>
         </div>
       </div>
 
@@ -89,17 +89,17 @@
       <!--</el-radio-group>-->
 
       <van-radio-group
-        direction="horizontal"
-        @change="changeMaster"
         v-if="role == 'doc'"
-        class="contral_group"
         v-model="radio1"
+        class="contral_group"
+        direction="horizontal"
+        @change="changeMaster"
       >
         <van-radio name="patient" shape="square">用户控制</van-radio>
         <van-radio name="doc" shape="square">医生控制</van-radio>
       </van-radio-group>
 
-      <div class="cover" v-show="showCover" @click="disableHandle"></div>
+      <div v-show="showCover" class="cover" @click="disableHandle"></div>
     </div>
   </div>
 </template>
@@ -110,7 +110,7 @@ import drawingBoard from "@/components/drawingBoard";
 export default {
   name: "MMSE.vue",
   components: {
-    drawingBoard,
+    drawingBoard
   },
   data() {
     return {
@@ -129,91 +129,91 @@ export default {
           question: "今年是公元哪年？",
           answerList: [
             { value: 0, name: "错误" },
-            { value: 1, name: "正确" },
+            { value: 1, name: "正确" }
           ],
           img: "",
-          userAnswer: -1,
+          userAnswer: -1
         },
         {
           question: "现在是什么季节？",
           answerList: [
             { value: 0, name: "错误" },
-            { value: 1, name: "正确" },
+            { value: 1, name: "正确" }
           ],
           img: "",
-          userAnswer: -1,
+          userAnswer: -1
         },
         {
           question: "现在是几月份？",
           answerList: [
             { value: 0, name: "错误" },
-            { value: 1, name: "正确" },
+            { value: 1, name: "正确" }
           ],
           img: "",
-          userAnswer: -1,
+          userAnswer: -1
         },
         {
           question: "今天是几号？",
           answerList: [
             { value: 0, name: "错误" },
-            { value: 1, name: "正确" },
+            { value: 1, name: "正确" }
           ],
           img: "",
-          userAnswer: -1,
+          userAnswer: -1
         },
         {
           question: "今天是星期几？",
           answerList: [
             { value: 0, name: "错误" },
-            { value: 1, name: "正确" },
+            { value: 1, name: "正确" }
           ],
           img: "",
-          userAnswer: -1,
+          userAnswer: -1
         },
         {
           question: "咱们现在是在哪个城市？",
           answerList: [
             { value: 0, name: "错误" },
-            { value: 1, name: "正确" },
+            { value: 1, name: "正确" }
           ],
           img: "",
-          userAnswer: -1,
+          userAnswer: -1
         },
         {
           question: "咱们现在是在哪个区？",
           answerList: [
             { value: 0, name: "错误" },
-            { value: 1, name: "正确" },
+            { value: 1, name: "正确" }
           ],
           img: "",
-          userAnswer: -1,
+          userAnswer: -1
         },
         {
           question: "咱们现在是在什么街（胡同）？",
           answerList: [
             { value: 0, name: "错误" },
-            { value: 1, name: "正确" },
+            { value: 1, name: "正确" }
           ],
           img: "",
-          userAnswer: -1,
+          userAnswer: -1
         },
         {
           question: "这里是第几层楼？",
           answerList: [
             { value: 0, name: "错误" },
-            { value: 1, name: "正确" },
+            { value: 1, name: "正确" }
           ],
           img: "",
-          userAnswer: -1,
+          userAnswer: -1
         },
         {
           question: "咱们现在什么地方？",
           answerList: [
             { value: 0, name: "错误" },
-            { value: 1, name: "正确" },
+            { value: 1, name: "正确" }
           ],
           img: "",
-          userAnswer: -1,
+          userAnswer: -1
         },
         {
           question:
@@ -222,10 +222,10 @@ export default {
             { value: 0, name: "0分" },
             { value: 1, name: "1分" },
             { value: 2, name: "2分" },
-            { value: 3, name: "3分" },
+            { value: 3, name: "3分" }
           ],
           img: "",
-          userAnswer: -1,
+          userAnswer: -1
         },
         {
           question: "100-7？ 连续5次（各1分共5分）",
@@ -235,10 +235,10 @@ export default {
             { value: 2, name: "2分" },
             { value: 3, name: "3分" },
             { value: 4, name: "4分" },
-            { value: 5, name: "5分" },
+            { value: 5, name: "5分" }
           ],
           img: "",
-          userAnswer: -1,
+          userAnswer: -1
         },
         {
           question: "现在请你说出刚才我让您记住的那三种东西（各1分共3分）",
@@ -246,37 +246,37 @@ export default {
             { value: 0, name: "0分" },
             { value: 1, name: "1分" },
             { value: 2, name: "2分" },
-            { value: 3, name: "3分" },
+            { value: 3, name: "3分" }
           ],
           img: "",
-          userAnswer: -1,
+          userAnswer: -1
         },
         {
           question: "这个东西叫什么？",
           answerList: [
             { value: 0, name: "错误" },
-            { value: 1, name: "正确" },
+            { value: 1, name: "正确" }
           ],
           img: require("../../assets/congnitiveAblitity/pencil.jpg"),
-          userAnswer: -1,
+          userAnswer: -1
         },
         {
           question: "这个东西叫什么？",
           answerList: [
             { value: 0, name: "错误" },
-            { value: 1, name: "正确" },
+            { value: 1, name: "正确" }
           ],
           img: require("../../assets/congnitiveAblitity/watch.jpg"),
-          userAnswer: -1,
+          userAnswer: -1
         },
         {
           question: "请您跟着我说“大家齐心协力拉紧绳”",
           answerList: [
             { value: 0, name: "错误" },
-            { value: 1, name: "正确" },
+            { value: 1, name: "正确" }
           ],
           img: "",
-          userAnswer: -1,
+          userAnswer: -1
         },
         {
           question:
@@ -285,58 +285,58 @@ export default {
             { value: 0, name: "0分" },
             { value: 1, name: "1分" },
             { value: 2, name: "2分" },
-            { value: 3, name: "3分" },
+            { value: 3, name: "3分" }
           ],
           img: "",
-          userAnswer: -1,
+          userAnswer: -1
         },
         {
           question: "请您念一念这句话，并且按照上面的意思去做“闭上您的眼睛”",
           answerList: [
             { value: 0, name: "错误" },
-            { value: 1, name: "正确" },
+            { value: 1, name: "正确" }
           ],
           img: "",
-          userAnswer: -1,
+          userAnswer: -1
         },
         {
           question: "请您给我写一个完整的句子",
           answerList: [
             { value: 0, name: "错误" },
-            { value: 1, name: "正确" },
+            { value: 1, name: "正确" }
           ],
           img: "",
-          userAnswer: -1,
+          userAnswer: -1
         },
         {
           question: "请您参照示例图片把他画在画板上",
           answerList: [
             { value: 0, name: "错误" },
-            { value: 1, name: "正确" },
+            { value: 1, name: "正确" }
           ],
           img: require("../../assets/congnitiveAblitity/polygon.jpg"),
-          userAnswer: -1,
-        },
+          userAnswer: -1
+        }
       ],
       subjectInfo: {},
-      testPlanId: "",
+      testPlanId: ""
     };
   },
   computed: {
-    showCover: function () {
+    showCover: function() {
       return this.role == this.radio1 ? false : true;
-    },
+    }
   },
   watch: {
     current: {
       handler(newValue, oldValue) {
         this.sendMsgHandle("1001", {
           current: newValue,
-          questionList: this.questionList,
+          questionList: this.questionList
         });
       },
-      deep: true,
-    },
+      deep: true
+    }
   },
   created() {
     // this.taskId = this.$route.query.taskId;
@@ -351,8 +351,8 @@ export default {
         this.$router.push({
           name: "testPlanClassify",
           params: {
-            testPlanId: this.testPlanId,
-          },
+            testPlanId: this.testPlanId
+          }
         });
       } else {
         this.$router.push("/index/cognitionTask");
@@ -385,7 +385,7 @@ export default {
         // this.$message.warning("请先完成当前题目");
         this.$toast.fail({
           message: "请先完成当前题目",
-          position: "top",
+          position: "top"
         });
       } else {
         this.current++;
@@ -395,7 +395,6 @@ export default {
       if (!sessionStorage.getItem("userInfo")) {
         this.$toast("请先登录！");
         this.$router.push("/login");
-        return;
       } else {
         let valueOne = 0;
         let valueTwo = 0;
@@ -427,54 +426,54 @@ export default {
           data: [
             {
               key: "1",
-              value: valueOne.toString(),
+              value: valueOne.toString()
             },
             {
               key: "2",
-              value: valueTwo.toString(),
+              value: valueTwo.toString()
             },
             {
               key: "3",
-              value: this.questionList[10].userAnswer,
+              value: this.questionList[10].userAnswer
             },
             {
               key: "4",
-              value: this.questionList[11].userAnswer,
+              value: this.questionList[11].userAnswer
             },
             {
               key: "5",
-              value: this.questionList[12].userAnswer,
+              value: this.questionList[12].userAnswer
             },
             {
               key: "6",
-              value: valueSix,
+              value: valueSix
             },
             {
               key: "7",
-              value: this.questionList[15].userAnswer,
+              value: this.questionList[15].userAnswer
             },
             {
               key: "8",
-              value: this.questionList[16].userAnswer,
+              value: this.questionList[16].userAnswer
             },
             {
               key: "9",
-              value: this.questionList[17].userAnswer,
+              value: this.questionList[17].userAnswer
             },
             {
               key: "10",
-              value: this.questionList[18].userAnswer,
+              value: this.questionList[18].userAnswer
             },
             {
               key: "11",
-              value: this.questionList[19].userAnswer,
-            },
-          ],
+              value: this.questionList[19].userAnswer
+            }
+          ]
         };
 
         // console.log(this.result);
 
-        this.$http.post(`/cognize/MMSE`, this.result, (response) => {
+        this.$http.post(`/cognize/MMSE`, this.result, response => {
           if (response.code == 200) {
             // this.$message({
             //     message: "测试结束！",
@@ -482,7 +481,7 @@ export default {
             // });
             this.$toast.success({
               message: "测试结束！",
-              position: "top",
+              position: "top"
             });
             this.sendMsgHandle("1003", "");
             // this.$router.push("/welcome/CognitiveAbility")
@@ -491,8 +490,8 @@ export default {
               this.$router.push({
                 name: "testPlanClassify",
                 params: {
-                  testPlanId: this.testPlanId,
-                },
+                  testPlanId: this.testPlanId
+                }
               });
             } else {
               this.$router.push("/index/cognitionTask");
@@ -532,7 +531,7 @@ export default {
           title: "提示",
           message: "请选择你的身份，医生还是普通用户",
           confirmButtonText: "医生",
-          cancelButtonText: "普通用户",
+          cancelButtonText: "普通用户"
         })
         .then(() => {
           this.role = "doc";
@@ -550,8 +549,8 @@ export default {
         toUserId: this.toUserId,
         message: {
           msg: "角色切换",
-          master: this.radio1 == this.role,
-        },
+          master: this.radio1 == this.role
+        }
       };
       this.webSocket.send(JSON.stringify(msg));
     },
@@ -559,15 +558,15 @@ export default {
     // 创建socket连接
     creatScoket() {
       this.webSocket = new WebSocket(`${scoketUrl}${this.userId}${this.role}`);
-      this.webSocket.onerror = (event) => {
+      this.webSocket.onerror = event => {
         // alert("连接错误");
       };
 
-      this.webSocket.onopen = (event) => {
+      this.webSocket.onopen = event => {
         console.log(event);
       };
 
-      this.webSocket.onclose = (event) => {
+      this.webSocket.onclose = event => {
         console.log(event.target);
         // alert("服务不存在或者被关闭");
         setTimeout(() => {
@@ -575,7 +574,7 @@ export default {
         }, 100);
       };
 
-      this.webSocket.onmessage = (event) => {
+      this.webSocket.onmessage = event => {
         console.log(event);
         let data = JSON.parse(event.data);
         if (!data.message) {
@@ -606,7 +605,7 @@ export default {
           // this.$message({ message: "测试结束！", type: "success" });
           this.$toast.success({
             message: "测试结束！",
-            position: "top",
+            position: "top"
           });
           // this.$router.push("/welcome/CognitiveAbility");
           if (this.testPlanId) {
@@ -614,8 +613,8 @@ export default {
             this.$router.push({
               name: "testPlanClassify",
               params: {
-                testPlanId: this.testPlanId,
-              },
+                testPlanId: this.testPlanId
+              }
             });
           } else {
             this.$router.push("/index/cognitionTask");
@@ -653,8 +652,8 @@ export default {
         message: {
           msg: "发送成功",
           eventNo: No,
-          data: data,
-        },
+          data: data
+        }
       };
       this.webSocket.send(JSON.stringify(msg));
     },
@@ -663,7 +662,7 @@ export default {
       // this.$message.warning("您暂时不需要操作，请耐心等待");
       this.$toast.fail({
         message: "您暂时不需要操作，请耐心等待",
-        position: "top",
+        position: "top"
       });
     },
     // 画笔摁下
@@ -695,11 +694,11 @@ export default {
       if (this.webSocket) {
         this.webSocket.close();
         // let _this=this
-        this.webSocket.onclose = function (evt) {
+        this.webSocket.onclose = function(evt) {
           console.log("websocket已关闭");
         };
       }
-    },
+    }
   },
   beforeDestroy() {
     //卸载事件
@@ -709,7 +708,7 @@ export default {
     clearInterval(this.t);
     //关闭socket
     this.closeWebsocket();
-  },
+  }
 };
 </script>
 
@@ -730,6 +729,7 @@ export default {
   overflow-y: scroll;
   touch-action: none;
 }
+
 .modelName {
   position: absolute;
   left: 5px;
@@ -739,15 +739,18 @@ export default {
   color: #000;
   z-index: 10;
 }
+
 .question-content {
   width: 100%;
   box-sizing: border-box;
   padding: 30px 10px 0;
 }
+
 .question-des {
   font-size: 18px;
   color: #000;
 }
+
 .contral_group {
   position: fixed;
   bottom: 5%;
@@ -758,6 +761,7 @@ export default {
   width: 60%;
   justify-content: center;
 }
+
 .cover {
   position: fixed;
   top: 0;
@@ -769,6 +773,7 @@ export default {
   background: #ddd;
   opacity: 0.2;
 }
+
 .answerGroup {
   display: flex;
   flex-direction: row;
@@ -776,6 +781,7 @@ export default {
   padding: 0 10px;
   font-size: 16px;
 }
+
 .drawCnt {
   width: 100%;
   box-sizing: border-box;
@@ -785,13 +791,16 @@ export default {
   text-align: center;
   padding: 10px 0;
 }
+
 .drawCnt img {
   width: 221px;
   height: 221px;
 }
+
 .drawCnt .draw-canvas {
   width: 100%;
 }
+
 .btn-content {
   width: 100%;
   box-sizing: border-box;

src/views/cognitiveTask/VisualSpace.vue

@@ -30,7 +30,7 @@
               v-show="!startButtonFlag"
               block
               round
-              type="info"
+              type="primary"
               @click="startTest('0')"
             >
               练习测试
@@ -39,7 +39,7 @@
               v-show="startButtonFlag"
               block
               round
-              type="info"
+              type="primary"
               @click="startTest('1')"
             >
               {{ butttonName }}
@@ -359,7 +359,7 @@
                   block
                   round
                   size="small"
-                  type="info"
+                  type="primary"
                   @click="userClick('L')"
                 >
                   <van-icon name="arrow-left" />
@@ -370,7 +370,7 @@
                   block
                   round
                   size="small"
-                  type="info"
+                  type="primary"
                   @click="userClick('R')"
                 >
                   <van-icon name="arrow" />

src/views/cognitiveTask/YATAI_attentionCheck.vue

@@ -24,7 +24,7 @@
         <van-button
           round
           block
-          type="info"
+          type="primary"
           v-if="buttonShow"
           @click="startTest()"
           >{{ buttonName }}</van-button

src/views/cognitiveTask/YATAI_rememberAbilityTask.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <van-nav-bar
-      title="认知任务"
-      left-text="返回"
       left-arrow
+      left-text="返回"
+      title="认知任务"
       @click-left="goBack"
     />
     <div class="explan">
@@ -18,7 +18,7 @@
         <p>
           {{ subjectInfo.testDescription }}
         </p>
-        <div title="测试结果" v-if="saveSuccess" class="testResult">
+        <div v-if="saveSuccess" class="testResult" title="测试结果">
           <h1 style="color: red; text-align: left">测试结果:</h1>
           <ul>
             <li>
@@ -34,38 +34,45 @@
         </div>
       </div>
       <div
-        class="txt-center"
         v-if="testFlag"
         :class="{ testMainDiv: !testState, activeTask: testState }"
+        class="txt-center"
         @click="userClick()"
       >
-        <h1 style="color: rgb(240, 248, 255);text-aligin:cneter;margin-top:100px;">({{ nbackIndex }}-back)</h1>
-        <h2 v-if="countDownSpanShow" style="color: rgb(240, 248, 255);text-align:center">
+        <h1
+          style="color: rgb(240, 248, 255);text-aligin:cneter;margin-top:100px;"
+        >
+          ({{ nbackIndex }}-back)
+        </h1>
+        <h2
+          v-if="countDownSpanShow"
+          style="color: rgb(240, 248, 255);text-align:center"
+        >
           将在<span style="color: red">{{ countDownTime }}</span
           >秒后继续测试
         </h2>
-        <div class="letterCss" v-if="divShow">{{ currentLetter }}</div>
+        <div v-if="divShow" class="letterCss">{{ currentLetter }}</div>
       </div>
     </div>
 
     <div class="btnArea">
       <van-button
-        type="info"
-        round
-        block
         v-if="buttonShow"
+        block
+        round
+        type="primary"
         @click="startTest()"
-        >{{ buttonName }}</van-button
-      >
+        >{{ buttonName }}
+      </van-button>
       <van-button
-        type="info"
-        round
+        v-if="saveFlag"
         block
         class="mt10"
-        v-if="saveFlag"
+        round
+        type="info"
         @click="resultSave(1)"
-        >结果保存</van-button
-      >
+        >结果保存
+      </van-button>
     </div>
 
     <!-- 测试结果展示区域 -->
@@ -73,6 +80,7 @@
 </template>
 <script>
 import { cognitiveAbilityTaskList } from "../../utils/dict";
+
 export default {
   data() {
     return {
@@ -120,7 +128,7 @@ export default {
       nbackIndex: 0, //0,1,2:0-back,1-back,2-back
       taskName: "back0", //back0,back1,back2
       testTurnCount: 0, //正式测试轮数 1，2
-      totalTestCount:1,//每种任务测试轮数
+      totalTestCount: 1, //每种任务测试轮数
       taskId: "", // 认知任务id
       saveFlag: false, //结果保存按钮显示标志
       subjectInfo: "", //认知任务详情
@@ -140,7 +148,7 @@ export default {
       userAnswerList: {
         back0: [],
         back1: [],
-        back2: [],
+        back2: []
       }, //用户答案列表
       testState: false,
       back0SuccessRate: "",
@@ -149,12 +157,12 @@ export default {
       back0backAverageTime: "",
       back1backAverageTime: "",
       back2backAverageTime: "",
-      startMilliSecondsFroTotalTime:'',//开始测试时间：用于计算当前任务测试总时间
-      back0Time: "",//测试反应时
-      back1Time: "",//测试反应时
-      back2Time: "",//测试反应时
-      userTotalIndexResult:[],//所有指标列表
-      testAnswerList:{},//做实验的残留物，不想再改变量名，就留下了，其实没啥用，还多了行代码
+      startMilliSecondsFroTotalTime: "", //开始测试时间：用于计算当前任务测试总时间
+      back0Time: "", //测试反应时
+      back1Time: "", //测试反应时
+      back2Time: "", //测试反应时
+      userTotalIndexResult: [], //所有指标列表
+      testAnswerList: {} //做实验的残留物，不想再改变量名，就留下了，其实没啥用，还多了行代码
     };
   },
   // 页面初始化函数
@@ -164,7 +172,7 @@ export default {
     this.getServerInterfaceData();
     window.addEventListener(
       "popstate",
-      function (e) {
+      function(e) {
         clearInterval(_this.divShowInteval);
         clearInterval(_this.countDownInterval);
       },
@@ -172,12 +180,10 @@ export default {
     );
   },
   //页面销毁方法
-  destroyed(){
-     
-      //将定时器进行清除
-      clearInterval(this.divShowInteval);
-      clearInterval(this.countDownInterval);
-
+  destroyed() {
+    //将定时器进行清除
+    clearInterval(this.divShowInteval);
+    clearInterval(this.countDownInterval);
   },
   methods: {
     init(taskId) {
@@ -185,32 +191,32 @@ export default {
       this.imgUrl = this.subjectInfo.imageUrl;
     },
     getServerInterfaceData() {
-      this.$http.get("subjectInfo/getRecallChar", {}, (res) => {
+      this.$http.get("subjectInfo/getRecallChar", {}, res => {
         if (parseInt(res.code) === 200) {
           this.resultData = res.data;
         }
       });
     },
     userAnswerPost() {
-      console.log(this.userTotalIndexResult)
+      console.log(this.userTotalIndexResult);
       this.$http.post(
         "cognize/MEMORY_YATAI",
         {
           userId: this.userId,
           data: this.userAnswerList,
-          totalIndexResult:this.userTotalIndexResult,
+          totalIndexResult: this.userTotalIndexResult
         },
-        (res) => {
+        res => {
           if (parseInt(res.code) === 200) {
             this.saveSuccess = true;
-            console.log(res)
+            console.log(res);
             this.back0SuccessRate = res.data["0-back正确率"];
             this.back1SuccessRate = res.data["1-back正确率"];
             this.back2SuccessRate = res.data["2-back正确率"];
             this.userTotalIndexResult = [];
-             this.$toast({
+            this.$toast({
               message: "测试结束！",
-              type: "success",
+              type: "success"
             });
           }
         }
@@ -261,7 +267,8 @@ export default {
           successCount++;
         }
       }
-      if (//针对学生降低标准，之前的通过率为  0.9 0.8 0.6
+      if (
+        //针对学生降低标准，之前的通过率为  0.9 0.8 0.6
         (successCount >= Math.ceil(this.currentLetterList.length * 0.6) &&
           this.nbackIndex == 0) ||
         (successCount >= Math.ceil(this.currentLetterList.length * 0.6) &&
@@ -320,7 +327,7 @@ export default {
             this.currentLetter = "";
             this.$toast({
               message: "您已掌握测试规则，请点击正式测试按钮，进入正式测试！",
-              type: "success",
+              type: "success"
             });
           } else {
             //继续进行练习测试
@@ -339,7 +346,7 @@ export default {
           this.currentLetter = "";
           this.$toast({
             message: "测试未通过，请点击'重新测试'按钮继续练习！",
-            type: "warning",
+            type: "warning"
           });
         }
       } else {
@@ -350,7 +357,8 @@ export default {
         if (this.nbackIndex == 0) {
           this.userAnswerList.back0.push(this.currentLetterList);
           if (this.testTurnCount == this.totalTestCount) {
-            this.back0Time = new Date().getTime() - this.startMilliSecondsFroTotalTime;
+            this.back0Time =
+              new Date().getTime() - this.startMilliSecondsFroTotalTime;
             this.startMilliSecondsFroTotalTime = new Date().getTime();
             this.nbackIndex++;
             this.countDownSpanShow = true;
@@ -362,7 +370,8 @@ export default {
         } else if (this.nbackIndex == 1) {
           this.userAnswerList.back1.push(this.currentLetterList);
           if (this.testTurnCount == this.totalTestCount) {
-            this.back1Time = new Date().getTime() - this.startMilliSecondsFroTotalTime;
+            this.back1Time =
+              new Date().getTime() - this.startMilliSecondsFroTotalTime;
             this.startMilliSecondsFroTotalTime = new Date().getTime();
             this.nbackIndex++;
             this.countDownSpanShow = true;
@@ -374,13 +383,14 @@ export default {
         } else if (this.nbackIndex == 2) {
           this.userAnswerList.back2.push(this.currentLetterList);
           if (this.testTurnCount == this.totalTestCount) {
-            this.back2Time = new Date().getTime() - this.startMilliSecondsFroTotalTime;
+            this.back2Time =
+              new Date().getTime() - this.startMilliSecondsFroTotalTime;
             this.startMilliSecondsFroTotalTime = new Date().getTime();
             this.testState = false;
             this.testFlag = false;
             //debugger
             //计算指标值
-            this.indexRulesCompute()
+            this.indexRulesCompute();
             //用户数据保存
             this.userAnswerPost();
             clearInterval(this.countDownInterval);
@@ -391,7 +401,7 @@ export default {
             this.countDown();
           }
         }
-        console.log(this.userAnswerList)
+        console.log(this.userAnswerList);
       }
     },
     pageDataInit() {
@@ -400,8 +410,9 @@ export default {
         this.sourceLetterList = this.resultData.exerciseList[this.taskName];
       } else {
         this.startMilliSecondsFroTotalTime = new Date().getTime();
-        this.sourceLetterList =
-          this.resultData.examList[this.taskName][this.testTurnCount];
+        this.sourceLetterList = this.resultData.examList[this.taskName][
+          this.testTurnCount
+        ];
       }
       this.createCurrentLetterList(this.sourceLetterList);
     },
@@ -412,7 +423,7 @@ export default {
           letter: sourceLetterList[i],
           ifNeedClick: false,
           ifUserClick: false,
-          userResponseTime: 0,
+          userResponseTime: 0
         };
         if (i == 0 || i < this.nbackIndex) {
           this.currentLetterList.push(tempObj);
@@ -430,134 +441,164 @@ export default {
         }
       }
     },
-    indexRulesCompute(){
-      console.log(this.userAnswerList)
+    indexRulesCompute() {
+      console.log(this.userAnswerList);
       this.testAnswerList = this.userAnswerList;
       let temp = {
-          diffLevel:"低",//中 高
-          totalTestCount:0,//总测试数目
-          rightCount:0,//正确次数
-          rightCountAndNeedClick:0,//反应正确且需要点击的次数
-          rightRate:0,//正确率
-          rightResponseTime:0,//正确反应总时长
-          averageResponseTime:0,//平均反应时
-          testTotalTime:'',//测试反应时
-        }
-        // {
-        //               "letter": "G",
-        //               "ifNeedClick": false,
-        //               "ifUserClick": true,
-        //               "userResponseTime": 619
-        //           }
-        // {
-        //               "letter": "O",
-        //               "ifNeedClick": true,
-        //               "ifUserClick": true,
-        //               "userResponseTime": 464
-        //           }
-        //计算back0各项指标
-        if(this.testAnswerList.back0.length > 0){
-          let obj = {
-            diffLevel:"低",//中 高
-            totalTestCount:0,//总测试数目
-            rightCount:0,//正确次数
-            rightCountAndNeedClick:0,//反应正确且需要点击的次数
-            rightRate:0,//正确率
-            rightResponseTime:0,//正确反应总时长
-            averageResponseTime:0,//平均反应时
-            testTotalTime:'',//测试反应时
-          };
-          obj.diffLevel = "低"//难度系数
-          for(var j = 0;j<this.testAnswerList.back0.length;j++){//第i轮测试
-            obj.totalTestCount += (this.testAnswerList.back0[j].length);
-            for(var i = 0;i<this.testAnswerList.back0[j].length;i++){ 
-              if(this.testAnswerList.back0[j][i].ifNeedClick ^  this.testAnswerList.back0[j][i].ifUserClick == 0){//反应正确
-                obj.rightCount++ //正确数加1
-                if(this.testAnswerList.back0[j][i].ifNeedClick){//反应正确且需要点击，反应时长相加，用于计算平均反应时
-                    obj.rightCountAndNeedClick ++  //
-                    obj.rightResponseTime +=this.testAnswerList.back0[j][i].userResponseTime
-                }
+        diffLevel: "低", //中 高
+        totalTestCount: 0, //总测试数目
+        rightCount: 0, //正确次数
+        rightCountAndNeedClick: 0, //反应正确且需要点击的次数
+        rightRate: 0, //正确率
+        rightResponseTime: 0, //正确反应总时长
+        averageResponseTime: 0, //平均反应时
+        testTotalTime: "" //测试反应时
+      };
+      // {
+      //               "letter": "G",
+      //               "ifNeedClick": false,
+      //               "ifUserClick": true,
+      //               "userResponseTime": 619
+      //           }
+      // {
+      //               "letter": "O",
+      //               "ifNeedClick": true,
+      //               "ifUserClick": true,
+      //               "userResponseTime": 464
+      //           }
+      //计算back0各项指标
+      if (this.testAnswerList.back0.length > 0) {
+        let obj = {
+          diffLevel: "低", //中 高
+          totalTestCount: 0, //总测试数目
+          rightCount: 0, //正确次数
+          rightCountAndNeedClick: 0, //反应正确且需要点击的次数
+          rightRate: 0, //正确率
+          rightResponseTime: 0, //正确反应总时长
+          averageResponseTime: 0, //平均反应时
+          testTotalTime: "" //测试反应时
+        };
+        obj.diffLevel = "低"; //难度系数
+        for (var j = 0; j < this.testAnswerList.back0.length; j++) {
+          //第i轮测试
+          obj.totalTestCount += this.testAnswerList.back0[j].length;
+          for (var i = 0; i < this.testAnswerList.back0[j].length; i++) {
+            if (
+              this.testAnswerList.back0[j][i].ifNeedClick ^
+              (this.testAnswerList.back0[j][i].ifUserClick == 0)
+            ) {
+              //反应正确
+              obj.rightCount++; //正确数加1
+              if (this.testAnswerList.back0[j][i].ifNeedClick) {
+                //反应正确且需要点击，反应时长相加，用于计算平均反应时
+                obj.rightCountAndNeedClick++; //
+                obj.rightResponseTime += this.testAnswerList.back0[j][
+                  i
+                ].userResponseTime;
               }
             }
           }
-          //计算其他指标：
-          obj.rightRate = ((obj.rightCount)/obj.totalTestCount).toFixed(2)//正确率
-          obj.averageResponseTime = (obj.rightResponseTime/obj.rightCountAndNeedClick).toFixed(2)
-          obj.testTotalTime = this.back0Time//此时单位为分钟
-          this.userTotalIndexResult.push(obj)
         }
+        //计算其他指标：
+        obj.rightRate = (obj.rightCount / obj.totalTestCount).toFixed(2); //正确率
+        obj.averageResponseTime = (
+          obj.rightResponseTime / obj.rightCountAndNeedClick
+        ).toFixed(2);
+        obj.testTotalTime = this.back0Time; //此时单位为分钟
+        this.userTotalIndexResult.push(obj);
+      }
 
-        //计算back1各项指标
-        if(this.testAnswerList.back1.length > 0){
-          let obj1 = {
-            diffLevel:"低",//中 高
-            totalTestCount:0,//总测试数目
-            rightCount:0,//正确次数
-            rightCountAndNeedClick:0,//反应正确且需要点击的次数
-            rightRate:0,//正确率
-            rightResponseTime:0,//正确反应总时长
-            averageResponseTime:0,//平均反应时
-            testTotalTime:'',//测试反应时
-          };
-          obj1.diffLevel = "中"//难度系数
-          for(var j = 0;j<this.testAnswerList.back1.length;j++){//第i轮测试
-            obj1.totalTestCount += (this.testAnswerList.back1[j].length);
-            for(var i = 0;i<this.testAnswerList.back1[j].length;i++){ 
-              if(this.testAnswerList.back1[j][i].ifNeedClick ^  this.testAnswerList.back1[j][i].ifUserClick == 0){//反应正确
-                obj1.rightCount++ //正确数加1
-                if(this.testAnswerList.back0[j][i].ifNeedClick){//反应正确且需要点击，反应时长相加，用于计算平均反应时
-                    obj1.rightCountAndNeedClick ++  //
-                    obj1.rightResponseTime +=this.testAnswerList.back0[j][i].userResponseTime
-                }
+      //计算back1各项指标
+      if (this.testAnswerList.back1.length > 0) {
+        let obj1 = {
+          diffLevel: "低", //中 高
+          totalTestCount: 0, //总测试数目
+          rightCount: 0, //正确次数
+          rightCountAndNeedClick: 0, //反应正确且需要点击的次数
+          rightRate: 0, //正确率
+          rightResponseTime: 0, //正确反应总时长
+          averageResponseTime: 0, //平均反应时
+          testTotalTime: "" //测试反应时
+        };
+        obj1.diffLevel = "中"; //难度系数
+        for (var j = 0; j < this.testAnswerList.back1.length; j++) {
+          //第i轮测试
+          obj1.totalTestCount += this.testAnswerList.back1[j].length;
+          for (var i = 0; i < this.testAnswerList.back1[j].length; i++) {
+            if (
+              this.testAnswerList.back1[j][i].ifNeedClick ^
+              (this.testAnswerList.back1[j][i].ifUserClick == 0)
+            ) {
+              //反应正确
+              obj1.rightCount++; //正确数加1
+              if (this.testAnswerList.back0[j][i].ifNeedClick) {
+                //反应正确且需要点击，反应时长相加，用于计算平均反应时
+                obj1.rightCountAndNeedClick++; //
+                obj1.rightResponseTime += this.testAnswerList.back0[j][
+                  i
+                ].userResponseTime;
               }
             }
           }
-          //计算其他指标：
-          obj1.rightRate = ((obj1.rightCount)/obj1.totalTestCount).toFixed(2)//正确率
-          obj1.averageResponseTime = (obj1.rightResponseTime/obj1.rightCountAndNeedClick).toFixed(2)
-          obj1.testTotalTime = this.back1Time//此时单位为分钟
-          this.userTotalIndexResult.push(obj1)
         }
+        //计算其他指标：
+        obj1.rightRate = (obj1.rightCount / obj1.totalTestCount).toFixed(2); //正确率
+        obj1.averageResponseTime = (
+          obj1.rightResponseTime / obj1.rightCountAndNeedClick
+        ).toFixed(2);
+        obj1.testTotalTime = this.back1Time; //此时单位为分钟
+        this.userTotalIndexResult.push(obj1);
+      }
 
-        //计算back2各项指标
-        if(this.testAnswerList.back2.length > 0){
-          let obj2 = {
-            diffLevel:"低",//中 高
-            totalTestCount:0,//总测试数目
-            rightCount:0,//正确次数
-            rightCountAndNeedClick:0,//反应正确且需要点击的次数
-            rightRate:0,//正确率
-            rightResponseTime:0,//正确反应总时长
-            averageResponseTime:0,//平均反应时
-            testTotalTime:'',//测试反应时
-          };
-          obj2.diffLevel = "高"//难度系数
-          for(var j = 0;j<this.testAnswerList.back2.length;j++){//第i轮测试
-            obj2.totalTestCount += (this.testAnswerList.back2[j].length);//2back 需要测试的总次数为测试列表长度减去耆那两个字母
-            for(var i = 0;i<this.testAnswerList.back2[j].length;i++){ 
-              if(this.testAnswerList.back2[j][i].ifNeedClick ^  this.testAnswerList.back2[j][i].ifUserClick == 0){//反应正确
-                obj2.rightCount++ //正确数加1
-                if(this.testAnswerList.back2[j][i].ifNeedClick){//反应正确且需要点击，反应时长相加，用于计算平均反应时
-                    obj2.rightCountAndNeedClick ++  //
-                    obj2.rightResponseTime +=this.testAnswerList.back2[j][i].userResponseTime
-                }
+      //计算back2各项指标
+      if (this.testAnswerList.back2.length > 0) {
+        let obj2 = {
+          diffLevel: "低", //中 高
+          totalTestCount: 0, //总测试数目
+          rightCount: 0, //正确次数
+          rightCountAndNeedClick: 0, //反应正确且需要点击的次数
+          rightRate: 0, //正确率
+          rightResponseTime: 0, //正确反应总时长
+          averageResponseTime: 0, //平均反应时
+          testTotalTime: "" //测试反应时
+        };
+        obj2.diffLevel = "高"; //难度系数
+        for (var j = 0; j < this.testAnswerList.back2.length; j++) {
+          //第i轮测试
+          obj2.totalTestCount += this.testAnswerList.back2[j].length; //2back 需要测试的总次数为测试列表长度减去耆那两个字母
+          for (var i = 0; i < this.testAnswerList.back2[j].length; i++) {
+            if (
+              this.testAnswerList.back2[j][i].ifNeedClick ^
+              (this.testAnswerList.back2[j][i].ifUserClick == 0)
+            ) {
+              //反应正确
+              obj2.rightCount++; //正确数加1
+              if (this.testAnswerList.back2[j][i].ifNeedClick) {
+                //反应正确且需要点击，反应时长相加，用于计算平均反应时
+                obj2.rightCountAndNeedClick++; //
+                obj2.rightResponseTime += this.testAnswerList.back2[j][
+                  i
+                ].userResponseTime;
               }
             }
           }
-          //计算其他指标：
-          obj2.rightRate = ((obj2.rightCount)/obj2.totalTestCount).toFixed(2)//正确率
-          obj2.averageResponseTime = (obj2.rightResponseTime/obj2.rightCountAndNeedClick).toFixed(2)
-          obj2.testTotalTime = this.back2Time//此时单位为分钟
-          this.userTotalIndexResult.push(obj2)
         }
-        console.log("计算jiguo:"+this.userTotalIndexResult)
+        //计算其他指标：
+        obj2.rightRate = (obj2.rightCount / obj2.totalTestCount).toFixed(2); //正确率
+        obj2.averageResponseTime = (
+          obj2.rightResponseTime / obj2.rightCountAndNeedClick
+        ).toFixed(2);
+        obj2.testTotalTime = this.back2Time; //此时单位为分钟
+        this.userTotalIndexResult.push(obj2);
+      }
+      console.log("计算jiguo:" + this.userTotalIndexResult);
     },
 
     // 返回
     goBack() {
       this.$router.go(-1);
     }
-  },
+  }
 };
 </script>
 <style scoped>
@@ -614,6 +655,7 @@ export default {
   color: rgb(240, 248, 255);
   text-align: center;
 }
+
 .scaleName {
   margin-top: 70px;
   background-size: cover;

src/views/cognitiveTask/YATAI_shapeIntuition.vue

@@ -2,9 +2,9 @@
 <template>
   <div>
     <van-nav-bar
-      title="认知任务"
-      left-text="返回"
       left-arrow
+      left-text="返回"
+      title="认知任务"
       @click-left="goBack"
     />
     <!-- LOGO  -->
@@ -23,22 +23,22 @@
       </div>
       <div class="btnArea">
         <van-button
-          type="info"
-          round
-          block
           v-if="button0Show"
+          block
+          round
+          type="primary"
           @click="startTest(0)"
-          >练习测试</van-button
-        >
+          >练习测试
+        </van-button>
         <van-button
-          type="info"
-          round
+          v-if="button1Show"
           block
           class="mt10"
-          v-if="button1Show"
+          round
+          type="info"
           @click="startTest(1)"
-          >正式测试</van-button
-        >
+          >正式测试
+        </van-button>
       </div>
     </div>
     <div
@@ -54,18 +54,18 @@
         <img v-show="showDuckEgg" :src="examImgUrl" alt="" class="eggImg" />
         <img
           v-show="showWhiteFlag"
-          src="../../assets/congnitiveAblitity/whiteFlag.png"
           alt=""
           class="breakImg"
+          src="../../assets/congnitiveAblitity/whiteFlag.png"
         />
       </div>
       <div class="btnArea pointBtn">
-        <van-button class="left" round @click="userClick('L')" type="info"
-          >&nbsp;</van-button
-        >
-        <van-button class="right" round @click="userClick('R')" type="info"
-          >&nbsp;</van-button
-        >
+        <van-button class="left" round type="info" @click="userClick('L')"
+          >&nbsp;
+        </van-button>
+        <van-button class="right" round type="info" @click="userClick('R')"
+          >&nbsp;
+        </van-button>
       </div>
     </div>
   </div>
@@ -94,7 +94,7 @@ export default {
       userTestPicList: [], //用户点击图片列表
       showImage: true,
       difficultList: [10], //[0,10,30,45,60,90,120,180,360]
-      everyDiffPicCount:20,//每个难度等级展示的图片数目
+      everyDiffPicCount: 20, //每个难度等级展示的图片数目
       testPicCount: 10, //测试数目
       userRightClickDirection: "", //测试者应该点击的方向
       userRightResponseCount: 0, //测试者反应正确的次数
@@ -113,8 +113,8 @@ export default {
       timeTwo: "",
       startMilliSeconds: 0, //反应时
       userResponseRecords: [], //用户测试反应记录
-      totalIndexResult:[],//用户测试结果指标结果 
-      saveFalg: true,
+      totalIndexResult: [], //用户测试结果指标结果
+      saveFalg: true
     };
   },
   // 页面初始化函数
@@ -168,7 +168,7 @@ export default {
           index: this.imgIndex,
           rightOrWrong: userResponseStr,
           responseTime: milliSecondsCount,
-          diff: this.userTestPicList[this.imgIndex-1].diff,
+          diff: this.userTestPicList[this.imgIndex - 1].diff
         });
       }
       //console.log(this.userResponseRecords)
@@ -189,7 +189,7 @@ export default {
       this.userId = sessionStorage.getItem("b80bb7740288fda1f201890375a60c8f");
       if (this.testTypeCode == 1) {
         this.difficultList = [360, 180, 90, 60, 30, 0]; // [360,180,120,90,60,45,30,10,0]
-        
+
         this.testPicCount = 20;
         //this.countDownStr = '第'+(this.testTunrnCount+1)+'轮！'
         this.imgIndex = 0;
@@ -214,8 +214,9 @@ export default {
           if (this.testEndFlag) {
             this.computeScore();
           } else {
-            this.userRightClickDirection =
-              this.userTestPicList[this.imgIndex].imgDirection;
+            this.userRightClickDirection = this.userTestPicList[
+              this.imgIndex
+            ].imgDirection;
             this.examImgUrl = this.userTestPicList[this.imgIndex].imgUrl;
             this.showDuckEgg = true;
             this.showWhiteFlag = false;
@@ -254,7 +255,7 @@ export default {
         this.button1Show = true;
         this.$toast({
           message: "测试结束！",
-          type: "success",
+          type: "success"
         });
 
         // }else{
@@ -285,24 +286,24 @@ export default {
         this.testResultStrShow = true;
         this.button0Show = false;
         this.button1Show = false;
-        console.log(this.userResponseRecords)
+        console.log(this.userResponseRecords);
         //计算各项指标值
-        this.totalIndexRulesCompute()
+        this.totalIndexRulesCompute();
         this.$http.post(
-          `/cognize/SHAPE_YATAI`, 
+          `/cognize/SHAPE_YATAI`,
           {
             userId: this.userId,
             userScore: userScore + "%",
             userResponseRecords: this.userResponseRecords,
-            totalIndexResult:this.totalIndexResult
+            totalIndexResult: this.totalIndexResult
           },
-          (response) => {
-            console.log(response)
+          response => {
+            console.log(response);
             this.$toast({
               message: "测试结束！",
-              type: "success",
+              type: "success"
             });
-            this.totalIndexResult = []
+            this.totalIndexResult = [];
           }
         );
       }
@@ -344,18 +345,18 @@ export default {
         //.log(this.userTestPicList)
       } else {
         //随机呈现20张难度不同的图片
-        console.log(this.difficultList)
+        console.log(this.difficultList);
         for (let j = 0; j < this.difficultList.length; j++) {
           var tempList = [];
-          for (let i = 1; i <(this.everyDiffPicCount+1); i++) {
-            if(i%2==0){
+          for (let i = 1; i < this.everyDiffPicCount + 1; i++) {
+            if (i % 2 == 0) {
               imgObj = {};
               imgObj.imgUrl = require("../../assets/congnitiveAblitity/shapeIntuition/R_ELP_test_jitter" +
-              this.difficultList[j] +
-              "_s" +
-              i +
-              ".jpg");
-              imgObj.diff = this.difficultList[j]
+                this.difficultList[j] +
+                "_s" +
+                i +
+                ".jpg");
+              imgObj.diff = this.difficultList[j];
               imgObj.imgDirection = "R";
               imgObj.userClickDirection = "";
               tempList.push(imgObj);
@@ -367,7 +368,7 @@ export default {
                 ".jpg");
               imgObj.imgDirection = "L";
               imgObj.userClickDirection = "";
-              imgObj.diff = this.difficultList[j]
+              imgObj.diff = this.difficultList[j];
               tempList.push(imgObj);
             }
           }
@@ -414,37 +415,42 @@ export default {
         arr[j] = t;
       }
     },
-    getDiffIndex(diff){
-      for(var i = 0 ;i<this.difficultList.length;i++){
-        if(this.difficultList[i] == diff){
-          return 6-i
+    getDiffIndex(diff) {
+      for (var i = 0; i < this.difficultList.length; i++) {
+        if (this.difficultList[i] == diff) {
+          return 6 - i;
         }
       }
     },
-    totalIndexRulesCompute(){
-      let testUserAnswerList =this.userResponseRecords
-      if(testUserAnswerList.length>0){
-        var rightCount = 0
-        var diffIndex = 0
-        for (var i= 0;i<testUserAnswerList.length;i++) {
-          if(i !=0 && (i+1)%this.everyDiffPicCount == 0){
-            this.totalIndexResult.push({"diffIndex":this.getDiffIndex(diffIndex),"totalCount":this.everyDiffPicCount,"rightCount":rightCount,"rightRate":(rightCount/this.everyDiffPicCount).toFixed(2)})
-            rightCount=0
-          }else{
-            diffIndex = testUserAnswerList[i].diff
-            if(testUserAnswerList[i].rightOrWrong == "Right"){
-              rightCount++
+    totalIndexRulesCompute() {
+      let testUserAnswerList = this.userResponseRecords;
+      if (testUserAnswerList.length > 0) {
+        var rightCount = 0;
+        var diffIndex = 0;
+        for (var i = 0; i < testUserAnswerList.length; i++) {
+          if (i != 0 && (i + 1) % this.everyDiffPicCount == 0) {
+            this.totalIndexResult.push({
+              diffIndex: this.getDiffIndex(diffIndex),
+              totalCount: this.everyDiffPicCount,
+              rightCount: rightCount,
+              rightRate: (rightCount / this.everyDiffPicCount).toFixed(2)
+            });
+            rightCount = 0;
+          } else {
+            diffIndex = testUserAnswerList[i].diff;
+            if (testUserAnswerList[i].rightOrWrong == "Right") {
+              rightCount++;
             }
           }
         }
-        console.log(this.totalIndexResult)
+        console.log(this.totalIndexResult);
       }
     },
     // 返回
     goBack() {
       this.$router.go(-1);
-    },
-  },
+    }
+  }
 };
 </script>
 <style scoped>
@@ -544,4 +550,4 @@ export default {
   margin-bottom: 20px;
   background-size: cover;
 }
-</style>
+</style>

src/views/cognitiveTask/armyTask.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <van-nav-bar
-      title="认知任务"
-      left-text="返回"
       left-arrow
+      left-text="返回"
+      title="认知任务"
       @click-left="goBack"
     />
     <div v-if="!testResultStr" class="explan main">
@@ -16,21 +16,21 @@
       <div class="btnArea">
         <van-button
           v-if="button0Show"
-          round
           block
-          type="info"
+          round
+          type="primary"
           @click="startTest(0)"
-          >练习测试</van-button
-        >
+          >练习测试
+        </van-button>
         <van-button
           v-if="button1Show"
-          round
           block
+          round
+          style="margin-top: 15px"
           type="info"
           @click="startTest(1)"
-          style="margin-top: 15px"
-          >正式测试</van-button
-        >
+          >正式测试
+        </van-button>
       </div>
     </div>
     <div
@@ -65,7 +65,7 @@ export default {
       testFlag: false,
       testTypeCode: 1,
       mode: 0,
-      step: 1,
+      step: 1
     };
   },
   created() {
@@ -99,7 +99,7 @@ export default {
       if (this.step == 1) {
         if (i == 1) {
           let phone = sessionStorage.getItem("phone");
-          this.$http.get(`push/message/${phone}`, {}, (msg) => {});
+          this.$http.get(`push/message/${phone}`, {}, msg => {});
         }
         this.$refs.etb.startTiming(i);
       } else {
@@ -128,15 +128,15 @@ export default {
             userId: this.userId,
             testPlanId: "",
             ETB01: this.etbResult,
-            SHAPE: this.shapeResult,
+            SHAPE: this.shapeResult
           },
-          (msg) => {
+          msg => {
             this.$router.push("/index/cognitionTask");
           }
         );
       }
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -152,4 +152,4 @@ export default {
   line-height: 1.6;
   margin: 20px 0;
 }
-</style>
+</style>

src/views/cognitiveTask/bostonTask.vue

@@ -1,870 +1,901 @@
 <template>
-    <div class="boston-box">
-        <van-nav-bar
-                :title="subjectInfo.name"
-                left-text="返回"
-                left-arrow
-                @click-left="goBack"
+  <div class="boston-box">
+    <van-nav-bar
+      :title="subjectInfo.name"
+      left-arrow
+      left-text="返回"
+      @click-left="goBack"
+    />
+    <div class="boston-warp">
+      <div class="modelName">
+        {{ showCover ? "观看模式" : "控制模式" }}
+      </div>
+
+      <div v-if="timingShow" class="timing-content">
+        <!--<p class="timing-des">{{timingDes}}</p>-->
+        <p class="timing-num">{{ countDownStr }}</p>
+      </div>
+
+      <div v-if="!timingShow" class="prograss-content">
+        <!--<el-progress-->
+        <!--:text-inside="true"-->
+        <!--:stroke-width="16"-->
+        <!--color="#57ACBB"-->
+        <!--:percentage="setItemProgress(scale_index, scale_all)"-->
+        <!--v-if="!isNaN(parseInt((scale_index / scale_all) * 100))"-->
+        <!--:format="setItemText(scale_index, scale_all)"-->
+        <!--&gt;</el-progress>-->
+
+        <van-progress
+          v-if="!isNaN(parseInt((scale_index / scale_all) * 100))"
+          :percentage="setItemProgress(scale_index, scale_all)"
+          color="#f2826a"
+          pivot-text="任务进度"
         />
-        <div class="boston-warp">
-            <div
-                    class="modelName"
-            >
-                {{ showCover ? "观看模式" : "控制模式" }}
-            </div>
-
-            <div v-if="timingShow" class="timing-content">
-                <!--<p class="timing-des">{{timingDes}}</p>-->
-                <p class="timing-num">{{ countDownStr }}</p>
-            </div>
-
-            <div v-if="!timingShow" class="prograss-content">
-                <!--<el-progress-->
-                        <!--:text-inside="true"-->
-                        <!--:stroke-width="16"-->
-                        <!--color="#57ACBB"-->
-                        <!--:percentage="setItemProgress(scale_index, scale_all)"-->
-                        <!--v-if="!isNaN(parseInt((scale_index / scale_all) * 100))"-->
-                        <!--:format="setItemText(scale_index, scale_all)"-->
-                <!--&gt;</el-progress>-->
-
-                <van-progress
-                        :percentage="setItemProgress(scale_index, scale_all)"
-                        v-if="!isNaN(parseInt((scale_index / scale_all) * 100))"
-                        pivot-text="任务进度"
-                        color="#f2826a"
-                />
-            </div>
-
-
-
-            <div v-if="!timingShow" class="pic-warp">
-                <div class="pic-content">
-                    <img :src="imgUrl" alt="" />
-                </div>
-
-                <!--<div class="btn-content">-->
-                    <!--<el-radio-->
-                            <!--v-model="radio"-->
-                            <!--@change="sentChoice(1)"-->
-                            <!--:label="1"-->
-                            <!--size="small"-->
-                            <!--border-->
-                    <!--&gt;回答</el-radio>-->
-                    <!--<el-radio-->
-                            <!--v-model="radio"-->
-                            <!--@change="sentChoice(2)"-->
-                            <!--:label="2"-->
-                            <!--size="small"-->
-                            <!--border-->
-                    <!--&gt;提示</el-radio>-->
-                    <!--<el-radio-->
-                            <!--v-model="radio"-->
-                            <!--@change="sentChoice(3)"-->
-                            <!--:label="3"-->
-                            <!--size="small"-->
-                            <!--border-->
-                    <!--&gt;辨认</el-radio>-->
-                    <!--<el-radio-->
-                            <!--v-model="radio"-->
-                            <!--@change="sentChoice(4)"-->
-                            <!--:label="4"-->
-                            <!--size="small"-->
-                            <!--border-->
-                    <!--&gt;错误</el-radio>-->
-                <!--</div>-->
-                <van-radio-group v-model="radio" direction="horizontal" class="btn-content">
-                    <van-radio name="1" @click="sentChoice('1')">回答</van-radio>
-                    <van-radio name="2" @click="sentChoice('2')">提示</van-radio>
-                    <van-radio name="3" @click="sentChoice('3')">辨认</van-radio>
-                    <van-radio name="4" @click="sentChoice('4')">错误</van-radio>
-                </van-radio-group>
-            </div>
-
-            <div v-if="!timingShow && role == 'doc'" class="btn-switch-content">
-                <div>
-                    <van-button size="small" round type="info" v-if="scale_index != 1" @click="prevClick()">上一题</van-button>
-                </div>
-                <div>
-                    <van-button size="small" round type="info" v-if="scale_index != 30" @click="nextClick()">下一题</van-button>
-                </div>
-            </div>
-        </div>
+      </div>
 
-        <!--<el-radio-group-->
-                <!--@change="changeMaster"-->
-                <!--v-if="role == 'doc'"-->
-                <!--v-model="radio1"-->
-                <!--class="contral_group"-->
-        <!--&gt;-->
-            <!--<el-radio-button label="patient">用户控制</el-radio-button>-->
-            <!--<el-radio-button label="doc">医生控制</el-radio-button>-->
-        <!--</el-radio-group>-->
+      <div v-if="!timingShow" class="pic-warp">
+        <div class="pic-content">
+          <img :src="imgUrl" alt="" />
+        </div>
 
+        <!--<div class="btn-content">-->
+        <!--<el-radio-->
+        <!--v-model="radio"-->
+        <!--@change="sentChoice(1)"-->
+        <!--:label="1"-->
+        <!--size="small"-->
+        <!--border-->
+        <!--&gt;回答</el-radio>-->
+        <!--<el-radio-->
+        <!--v-model="radio"-->
+        <!--@change="sentChoice(2)"-->
+        <!--:label="2"-->
+        <!--size="small"-->
+        <!--border-->
+        <!--&gt;提示</el-radio>-->
+        <!--<el-radio-->
+        <!--v-model="radio"-->
+        <!--@change="sentChoice(3)"-->
+        <!--:label="3"-->
+        <!--size="small"-->
+        <!--border-->
+        <!--&gt;辨认</el-radio>-->
+        <!--<el-radio-->
+        <!--v-model="radio"-->
+        <!--@change="sentChoice(4)"-->
+        <!--:label="4"-->
+        <!--size="small"-->
+        <!--border-->
+        <!--&gt;错误</el-radio>-->
+        <!--</div>-->
         <van-radio-group
-                direction="horizontal"
-                @change="changeMaster"
-                v-if="role == 'doc'"
-                class="contral_group"
-                v-model="radio1">
-            <van-radio name="patient" shape="square">用户控制</van-radio>
-            <van-radio name="doc" shape="square">医生控制</van-radio>
+          v-model="radio"
+          class="btn-content"
+          direction="horizontal"
+        >
+          <van-radio name="1" @click="sentChoice('1')">回答</van-radio>
+          <van-radio name="2" @click="sentChoice('2')">提示</van-radio>
+          <van-radio name="3" @click="sentChoice('3')">辨认</van-radio>
+          <van-radio name="4" @click="sentChoice('4')">错误</van-radio>
         </van-radio-group>
-        <div class="cover" v-show="showCover" @click="disableHandle"></div>
+      </div>
+
+      <div v-if="!timingShow && role == 'doc'" class="btn-switch-content">
+        <div>
+          <van-button
+            v-if="scale_index != 1"
+            round
+            size="small"
+            type="primary"
+            @click="prevClick()"
+            >上一题</van-button
+          >
+        </div>
+        <div>
+          <van-button
+            v-if="scale_index != 30"
+            round
+            size="small"
+            type="primary"
+            @click="nextClick()"
+            >下一题
+          </van-button>
+        </div>
+      </div>
     </div>
+
+    <!--<el-radio-group-->
+    <!--@change="changeMaster"-->
+    <!--v-if="role == 'doc'"-->
+    <!--v-model="radio1"-->
+    <!--class="contral_group"-->
+    <!--&gt;-->
+    <!--<el-radio-button label="patient">用户控制</el-radio-button>-->
+    <!--<el-radio-button label="doc">医生控制</el-radio-button>-->
+    <!--</el-radio-group>-->
+
+    <van-radio-group
+      v-if="role == 'doc'"
+      v-model="radio1"
+      class="contral_group"
+      direction="horizontal"
+      @change="changeMaster"
+    >
+      <van-radio name="patient" shape="square">用户控制</van-radio>
+      <van-radio name="doc" shape="square">医生控制</van-radio>
+    </van-radio-group>
+    <div v-show="showCover" class="cover" @click="disableHandle"></div>
+  </div>
 </template>
 
 <script>
-    import { preloader } from "@/utils/utils";
-    export default {
-        name: "bostonTask",
-        data() {
-            return {
-                picList: [
-                    {
-                        index: 0,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/shu.jpg"),
-                        picName: "树",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 1,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/bi.jpg"),
-                        picName: "笔",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 2,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/jiandao.jpg"),
-                        picName: "剪刀",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 3,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/hua.jpg"),
-                        picName: "花",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 4,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/juzi.jpg"),
-                        picName: "锯子",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 5,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/saoba.jpg"),
-                        picName: "扫把",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 6,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/donggu.jpg"),
-                        picName: "冬菇",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 7,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/yijia.jpg"),
-                        picName: "衣架",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 8,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/lunyi.jpg"),
-                        picName: "轮椅",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 9,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/luotuo.jpg"),
-                        picName: "骆驼",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 10,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/yumaoqiupai.jpg"),
-                        picName: "羽毛球拍",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 11,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/woniu.jpg"),
-                        picName: "蜗牛",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 12,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/haima.jpg"),
-                        picName: "海马",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 13,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/feibiao.jpg"),
-                        picName: "飞镖",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 14,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/kouqin.jpg"),
-                        picName: "口琴",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 15,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/xiniu.jpg"),
-                        picName: "犀牛",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 16,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/bingwu.jpg"),
-                        picName: "冰屋",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 17,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/xianrenzhang.jpg"),
-                        picName: "仙人掌",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 18,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/fushoudianti.jpg"),
-                        picName: "扶手电梯",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 19,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/shuqin.jpg"),
-                        picName: "竖琴",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 20,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/tingzhenqi.jpg"),
-                        picName: "听诊器",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 21,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/jinzita.jpg"),
-                        picName: "金字塔",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 22,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/loudou.jpg"),
-                        picName: "漏斗",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 23,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/shoufengqin.jpg"),
-                        picName: "手风琴",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 24,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/yuangui.jpg"),
-                        picName: "圆规",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 25,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/sanjiaojia.jpg"),
-                        picName: "三脚架",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 26,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/qian.jpg"),
-                        picName: "钳",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 27,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/huapeng.jpg"),
-                        picName: "花棚",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 28,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/liangjiaoqi.jpg"),
-                        picName: "量角器",
-                        picChoice: 0,
-                    },
-                    {
-                        index: 29,
-                        imgUrl: require("../../assets/congnitiveAblitity/bostonTask/suanpan.jpg"),
-                        picName: "算盘",
-                        picChoice: 0,
-                    },
-                ],
-                imgUrl: "", //初始化图片地址
-                count: 0, //累加器初始化
-                subjectInfo: "",
-                userId: "",
-                taskId: "",
-                timingShow: true, //显示倒计时
-                timingFlag: null, //倒计时名称
-                countDownStr: "测试马上开始！",
-                timingNum: 5, //倒计时初始化时间
-                rightNum: [], //正确数组
-                tipNum: [], //提示数组
-                identifyNum: [], //辨认数组
-                errorNum: [], //回答错误数组
-                scale_index: 1, //初始化进度条个数
-                scale_all: 30, //进度条总个数
-                radio: "0", //选项值
-                webSocket: {},
-                role: "",
-                toUserId: "",
-                radio1: "doc",
-                testPlanId: "",
-            };
+import { preloader } from "@/utils/utils";
+
+export default {
+  name: "bostonTask",
+  data() {
+    return {
+      picList: [
+        {
+          index: 0,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/shu.jpg"),
+          picName: "树",
+          picChoice: 0
         },
-        computed: {
-            showCover: function () {
-                return this.role == this.radio1 ? false : true;
-            },
+        {
+          index: 1,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/bi.jpg"),
+          picName: "笔",
+          picChoice: 0
         },
-        watch: {
-            count(val) {
-                if (val >= 30) {
-                    this.scale_index = 30;
-                } else {
-                    this.scale_index = val + 1;
-                }
-            },
+        {
+          index: 2,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/jiandao.jpg"),
+          picName: "剪刀",
+          picChoice: 0
         },
-        created() {
-            this.chooseRole();
-            //绑定事件
-            window.addEventListener('beforeunload', e => this.closeWebsocket(e));
+        {
+          index: 3,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/hua.jpg"),
+          picName: "花",
+          picChoice: 0
         },
-        mounted() {
-            this.$nextTick(() => {
-                //屏幕常亮
-                this.noSleep()
-            });
+        {
+          index: 4,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/juzi.jpg"),
+          picName: "锯子",
+          picChoice: 0
         },
-        methods: {
-            goBack() {
-                if(this.testPlanId) {
-                    //来自测试计划列表
-                    this.$router.push({
-                        name: "testPlanClassify",
-                        params: {
-                            testPlanId: this.testPlanId,
-                        },
-                    });
-                }else {
-                    this.$router.push("/index/cognitionTask");
-                }
-            },
-            noSleep () {
-                if (/mobile/i.test(navigator.userAgent)) {
-                    document.body.style.cursor = 'pointer';
-                }
-
-                let noSleep = new this.$NoSleep();
-
-                document.addEventListener('click',
-                    function enableNoSleep () {
-                        noSleep.enable();
-                        document.removeEventListener('click', enableNoSleep, false);
-                    }, false);
-
-            },
-            init() {
-                this.testPlanId = this.$route.query.testPlanId || '';
-                this.userId = JSON.parse(sessionStorage.getItem("userInfo")).id;
-                this.subjectInfo = JSON.parse(sessionStorage.getItem('subjectInfo'));
-                this.toUserId = this.role == "doc" ? `${this.userId}patient` : `${this.userId}doc`;
-                // this.taskId = this.$route.query.taskId;
-                this.creatScoket();
-                this.startTiming();
-            },
-            setItemProgress(currentIndex, totalIndex) {
-                if (currentIndex >= totalIndex) {
-                    return 100;
-                } else {
-                    return (currentIndex / totalIndex) * 100;
-                }
-            },
-            setItemText(currentIndex, totalIndex) {
-                return () => {
-                    return currentIndex + "/" + totalIndex;
-                };
-            },
-            startTiming() {
-                // if (
-                //     sessionStorage.getItem("b80bb7740288fda1f201890375a60c8f") == "" ||
-                //     sessionStorage.getItem("b80bb7740288fda1f201890375a60c8f") == null
-                // ) {
-                //     this.$message.error("请先登录！");
-                //     return;
-                // }
-
-                this.timingFlag = setInterval(() => {
-                    if (this.timingNum == 0) {
-                        this.countDownStr = "开始";
-
-                        setTimeout(() => {
-                            //关闭倒计时提示页面
-                            this.timingShow = false;
-
-                            this.timingFlag = clearInterval(this.timingFlag);
-                            // 预加载图片后开始测试
-                            preloader(this.picList, () => {
-                                //开始第一张照片
-                                this.changePic(this.count);
-                            });
-                        }, 1000);
-
-                        this.timingFlag = clearInterval(this.timingFlag);
-                    } else {
-                        this.countDownStr = this.timingNum;
-                        this.timingNum--;
-                    }
-                }, 1000);
-            },
-            sentChoice(type) {
-                if (!sessionStorage.getItem("userInfo")) {
-                    this.$toast("请先登录！");
-                    this.$router.push("/login");
-                    return;
-                }
-
-                // 获取选项值
-                this.picList[this.count].picChoice = type;
-
-                //累加器自增
-                this.count++;
-
-                if (this.count > 29) {
-                    //统计选项各回答个数
-                    this.rightNum = [];
-                    this.tipNum = [];
-                    this.identifyNum = [];
-                    this.errorNum = [];
-
-                    this.picList.map((item, index) => {
-                        switch (item.picChoice) {
-                            case '1':
-                                this.rightNum.push(this.picList[index]);
-                                break;
-                            case '2':
-                                this.tipNum.push(this.picList[index]);
-                                break;
-                            case '3':
-                                this.identifyNum.push(this.picList[index]);
-                                break;
-                            case '4':
-                                this.errorNum.push(this.picList[index]);
-                                break;
-                        }
-                    });
-                    //调用数据统计接口
-                    this.$http.post(
-                        `/cognize/BSNTask`,
-                        {
-                            userId: this.userId,
-                            testPlanId: this.testPlanId,
-                            result: {
-                                rightNum: this.rightNum.length,
-                                tipNum: this.tipNum.length,
-                                identifyNum: this.identifyNum.length,
-                                errorNum: this.errorNum.length,
-                                picList: this.picList,
-                            },
-                        },
-                        (response) => {
-                            if (response && response.code == "200" ) {
-
-                                // let routerInfo = {
-                                //     "回答正确个数": this.rightNum.length + "",
-                                //     "提示回答个数": this.tipNum.length + "",
-                                //     "辨认回答个数": this.identifyNum.length + "",
-                                //     "回答错误个数": this.errorNum.length + "",
-                                // };
-
-                                // 向非控制端发送结束通知
-                                if (!this.showCover) {
-                                    // this.sendMsgHandle(4104, JSON.stringify(routerInfo));
-                                    this.sendMsgHandle(4104, response.data);
-                                }
-                                // 跳转到结果页面
-                                // sessionStorage.setItem("resultInfo", JSON.stringify(routerInfo));
-                                // this.$router.push(routerInfo);
-                                // this.$router.push(`/cognitiveTestResult?from=1&testPlanId=${this.testPlanId}`);
-
-                                //关闭socket
-                                this.closeWebsocket()
-                                //跳转新测试结果页面
-                                this.goTestResult(response.data);
-                            }
-                        }
-                    );
-
-                    // this.$message({
-                    //     message: "测试结束",
-                    //     type: "success",
-                    // });
-                    this.$toast.success({
-                        message: '测试结束',
-                        position: 'top',
-                    });
-                    //提交数据或跳转得分页
-                    // this.$router.push("/welcome/CognitiveAbility");
-                } else {
-                    //切换图片
-                    this.changePic(this.count);
-                    // 发送同步通知
-                    this.sendMsgHandle(4101, type);
-                }
-            },
-            // goTestResult(id){
-            //     this.$http.get(`getRecordById?id=${id}`, {}, (res) => {
-            //         if (res.code == 2001) {
-            //             this.$toast.fail(res.msg);
-            //             return;
-            //         }
-            //         if (res && res.code == 200) {
-            //             if (JSON.parse(res.data?.userRecordEntity?.testResult).versionNo == "2.0.1") {
-            //                 //跳转新测试结果模版数据暂存本地
-            //                 // sessionStorage.setItem("testResult", res.data?.userRecordEntity?.testResult);
-            //                 // this.$store.dispatch('setTestResult',JSON.parse(res.data?.userRecordEntity?.testResult));
-            //                 this.$store.dispatch('setTestResult',res?.data);
-            //                 this.$router.push({
-            //                     name: "testResultNew",
-            //                     query: {
-            //                         id: res.data?.userRecordEntity?.id,
-            //                         title: res.data?.userRecordEntity?.name,
-            //                         testPlanId: this.testPlanId || '',
-            //                         come: 1, //1-来自认知任务列表，2-测试记录列表
-            //                     },
-            //                 });
-            //             } else {
-            //                 //跳转旧测试结果模版
-            //
-            //                 let testResult=  JSON.parse(res.data?.userRecordEntity?.testResult)[0].version;
-            //
-            //                 if( testResult == 2 ) {
-            //                     this.$router.push("/testRecordsSCl?id=" + id);
-            //                 }else {
-            //                     this.$router.push("/testResult?flag=" + res.data?.userRecordEntity?.flag + "&id=" + id);
-            //                 }
-            //             }
-            //
-            //         } else {
-            //             this.$toast.fail("获取数据失败！服务器异常");
-            //         }
-            //     });
-            // },
-            changePic(param) {
-                this.imgUrl = this.picList[param].imgUrl;
-                // 绑定回答选项值
-                this.radio = this.picList[param].picChoice;
-                // console.log(this.radio, "选项值");
-            },
-            prevClick() {
-                this.count--;
-                this.changePic(this.count);
-                this.sendMsgHandle(4102, "");
-            },
-            nextClick() {
-                if (this.picList[this.count].picChoice == 0) {
-                    // this.$message.error("请先答本题！");
-                    this.$toast.fail("请先答本题！");
-                } else {
-                    this.count++;
-                    this.changePic(this.count);
-                    this.sendMsgHandle(4103, "");
-                }
-            },
-            // 选择身份
-            chooseRole() {
-                // this.$confirm("请选择你的身份，医生还是普通用户", "提示", {
-                //     distinguishCancelAndClose: true,
-                //     confirmButtonText: "医生",
-                //     cancelButtonText: "普通用户",
-                //     type: "info",
-                // })
-                //     .then(() => {
-                //         this.role = "doc";
-                //         this.init();
-                //     })
-                //     .catch(() => {
-                //         this.role = "patient";
-                //         this.init();
-                //     });
-
-                this.$dialog.confirm({
-                    title: '提示',
-                    message: '请选择你的身份，医生还是普通用户',
-                    confirmButtonText: '医生',
-                    cancelButtonText: '普通用户',
-                })
-                    .then(() => {
-                        this.role = "doc";
-                        this.init();
-                    })
-                    .catch(() => {
-                        this.role = "patient";
-                        this.init();
-                    });
-
-            },
-
-            // 切换控制权限
-            changeMaster() {
-                let msg = {
-                    toUserId: this.toUserId,
-                    message: {
-                        msg: "角色切换",
-                        master: this.radio1 == this.role,
-                    },
-                };
-                console.log(msg);
-                this.webSocket.send(JSON.stringify(msg));
-            },
-
-            // 创建socket连接
-            creatScoket() {
-                this.webSocket = new WebSocket(`${scoketUrl}${this.userId}${this.role}`);
-                console.log("连接成功");
-                this.webSocket.onerror = (event) => {
-                    alert("连接错误");
-                };
-
-                this.webSocket.onopen = (event) => {
-                    //alert("open"+event.data);
-                    //console.log(event);
-                };
-
-                this.webSocket.onclose = (event) => {
-                    alert("服务不存在或者被关闭");
-                };
-
-                this.webSocket.onmessage = (event) => {
-                    let data = JSON.parse(event.data);
-                    if (!data.message) {
-                        // if (data.code == "201") {
-                        //   this.chooseRole();
-                        //   this.$message.error(data.msg);
-                        // }
-                    } else {
-                        this.receiveMsgHandle(data.message);
-                    }
-                };
-            },
-
-            // 接收消息处理方法
-            receiveMsgHandle(res) {
-                // 切换控制权权
-                if (res.master == undefined) {
-                    if (res.eventNo == 4101) {
-                        console.log(res.data);
-                        this.sentChoice(res.data);
-                    }
-
-                    if (res.eventNo == 4102) {
-                        this.prevClick();
-                    }
-
-                    if (res.eventNo == 4103) {
-                        this.nextClick();
-                    }
-
-                    if (res.eventNo == 4104) {
-                        // sessionStorage.setItem("resultInfo", res.data);
-                        // this.$router.push(`/cognitiveTestResult?from=1&testPlanId=${this.testPlanId}`);
-                        // this.$router.push(res.data);
-                        //跳转新测试结果页面
-                        this.goTestResult(res.data);
-                    }
-                } else {
-                    this.radio1 = res.master ? "doc" : "patient";
-                }
-            },
-
-            // 发送消息处理方法
-            sendMsgHandle(No, data) {
-                let msg = {
-                    toUserId: this.toUserId,
-                    message: {
-                        msg: "发送成功",
-                        eventNo: No,
-                        data: data,
-                    },
-                };
-                this.webSocket.send(JSON.stringify(msg));
-            },
-            // 禁止操作
-            disableHandle() {
-                // this.$message.warning("您暂时不需要操作，请耐心等待");
-                this.$toast.fail({
-                    message: '您暂时不需要操作，请耐心等待',
-                    position: 'top',
-                });
-            },
-            //关闭websocket
-            closeWebsocket(e){
-                if(this.webSocket){
-                    this.webSocket.close();
-                    // let _this=this
-                    this.webSocket.onclose = function(evt) {
-                        console.log("websocket已关闭");
-                    };
-                }
-            }
+        {
+          index: 5,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/saoba.jpg"),
+          picName: "扫把",
+          picChoice: 0
+        },
+        {
+          index: 6,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/donggu.jpg"),
+          picName: "冬菇",
+          picChoice: 0
+        },
+        {
+          index: 7,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/yijia.jpg"),
+          picName: "衣架",
+          picChoice: 0
+        },
+        {
+          index: 8,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/lunyi.jpg"),
+          picName: "轮椅",
+          picChoice: 0
+        },
+        {
+          index: 9,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/luotuo.jpg"),
+          picName: "骆驼",
+          picChoice: 0
+        },
+        {
+          index: 10,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/yumaoqiupai.jpg"),
+          picName: "羽毛球拍",
+          picChoice: 0
+        },
+        {
+          index: 11,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/woniu.jpg"),
+          picName: "蜗牛",
+          picChoice: 0
+        },
+        {
+          index: 12,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/haima.jpg"),
+          picName: "海马",
+          picChoice: 0
+        },
+        {
+          index: 13,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/feibiao.jpg"),
+          picName: "飞镖",
+          picChoice: 0
+        },
+        {
+          index: 14,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/kouqin.jpg"),
+          picName: "口琴",
+          picChoice: 0
+        },
+        {
+          index: 15,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/xiniu.jpg"),
+          picName: "犀牛",
+          picChoice: 0
+        },
+        {
+          index: 16,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/bingwu.jpg"),
+          picName: "冰屋",
+          picChoice: 0
+        },
+        {
+          index: 17,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/xianrenzhang.jpg"),
+          picName: "仙人掌",
+          picChoice: 0
+        },
+        {
+          index: 18,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/fushoudianti.jpg"),
+          picName: "扶手电梯",
+          picChoice: 0
+        },
+        {
+          index: 19,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/shuqin.jpg"),
+          picName: "竖琴",
+          picChoice: 0
+        },
+        {
+          index: 20,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/tingzhenqi.jpg"),
+          picName: "听诊器",
+          picChoice: 0
+        },
+        {
+          index: 21,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/jinzita.jpg"),
+          picName: "金字塔",
+          picChoice: 0
+        },
+        {
+          index: 22,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/loudou.jpg"),
+          picName: "漏斗",
+          picChoice: 0
         },
-        beforeDestroy() {
-            //卸载事件
-            window.removeEventListener('beforeunload', e => this.closeWebsocket(e))
+        {
+          index: 23,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/shoufengqin.jpg"),
+          picName: "手风琴",
+          picChoice: 0
         },
-        destroyed() {
-            clearInterval(this.timingFlag);
-            //关闭socket
-            this.closeWebsocket()
+        {
+          index: 24,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/yuangui.jpg"),
+          picName: "圆规",
+          picChoice: 0
         },
+        {
+          index: 25,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/sanjiaojia.jpg"),
+          picName: "三脚架",
+          picChoice: 0
+        },
+        {
+          index: 26,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/qian.jpg"),
+          picName: "钳",
+          picChoice: 0
+        },
+        {
+          index: 27,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/huapeng.jpg"),
+          picName: "花棚",
+          picChoice: 0
+        },
+        {
+          index: 28,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/liangjiaoqi.jpg"),
+          picName: "量角器",
+          picChoice: 0
+        },
+        {
+          index: 29,
+          imgUrl: require("../../assets/congnitiveAblitity/bostonTask/suanpan.jpg"),
+          picName: "算盘",
+          picChoice: 0
+        }
+      ],
+      imgUrl: "", //初始化图片地址
+      count: 0, //累加器初始化
+      subjectInfo: "",
+      userId: "",
+      taskId: "",
+      timingShow: true, //显示倒计时
+      timingFlag: null, //倒计时名称
+      countDownStr: "测试马上开始！",
+      timingNum: 5, //倒计时初始化时间
+      rightNum: [], //正确数组
+      tipNum: [], //提示数组
+      identifyNum: [], //辨认数组
+      errorNum: [], //回答错误数组
+      scale_index: 1, //初始化进度条个数
+      scale_all: 30, //进度条总个数
+      radio: "0", //选项值
+      webSocket: {},
+      role: "",
+      toUserId: "",
+      radio1: "doc",
+      testPlanId: ""
+    };
+  },
+  computed: {
+    showCover: function() {
+      return this.role == this.radio1 ? false : true;
+    }
+  },
+  watch: {
+    count(val) {
+      if (val >= 30) {
+        this.scale_index = 30;
+      } else {
+        this.scale_index = val + 1;
+      }
+    }
+  },
+  created() {
+    this.chooseRole();
+    //绑定事件
+    window.addEventListener("beforeunload", e => this.closeWebsocket(e));
+  },
+  mounted() {
+    this.$nextTick(() => {
+      //屏幕常亮
+      this.noSleep();
+    });
+  },
+  methods: {
+    goBack() {
+      if (this.testPlanId) {
+        //来自测试计划列表
+        this.$router.push({
+          name: "testPlanClassify",
+          params: {
+            testPlanId: this.testPlanId
+          }
+        });
+      } else {
+        this.$router.push("/index/cognitionTask");
+      }
+    },
+    noSleep() {
+      if (/mobile/i.test(navigator.userAgent)) {
+        document.body.style.cursor = "pointer";
+      }
+
+      let noSleep = new this.$NoSleep();
+
+      document.addEventListener(
+        "click",
+        function enableNoSleep() {
+          noSleep.enable();
+          document.removeEventListener("click", enableNoSleep, false);
+        },
+        false
+      );
+    },
+    init() {
+      this.testPlanId = this.$route.query.testPlanId || "";
+      this.userId = JSON.parse(sessionStorage.getItem("userInfo")).id;
+      this.subjectInfo = JSON.parse(sessionStorage.getItem("subjectInfo"));
+      this.toUserId =
+        this.role == "doc" ? `${this.userId}patient` : `${this.userId}doc`;
+      // this.taskId = this.$route.query.taskId;
+      this.creatScoket();
+      this.startTiming();
+    },
+    setItemProgress(currentIndex, totalIndex) {
+      if (currentIndex >= totalIndex) {
+        return 100;
+      } else {
+        return (currentIndex / totalIndex) * 100;
+      }
+    },
+    setItemText(currentIndex, totalIndex) {
+      return () => {
+        return currentIndex + "/" + totalIndex;
+      };
+    },
+    startTiming() {
+      // if (
+      //     sessionStorage.getItem("b80bb7740288fda1f201890375a60c8f") == "" ||
+      //     sessionStorage.getItem("b80bb7740288fda1f201890375a60c8f") == null
+      // ) {
+      //     this.$message.error("请先登录！");
+      //     return;
+      // }
+
+      this.timingFlag = setInterval(() => {
+        if (this.timingNum == 0) {
+          this.countDownStr = "开始";
+
+          setTimeout(() => {
+            //关闭倒计时提示页面
+            this.timingShow = false;
+
+            this.timingFlag = clearInterval(this.timingFlag);
+            // 预加载图片后开始测试
+            preloader(this.picList, () => {
+              //开始第一张照片
+              this.changePic(this.count);
+            });
+          }, 1000);
+
+          this.timingFlag = clearInterval(this.timingFlag);
+        } else {
+          this.countDownStr = this.timingNum;
+          this.timingNum--;
+        }
+      }, 1000);
+    },
+    sentChoice(type) {
+      if (!sessionStorage.getItem("userInfo")) {
+        this.$toast("请先登录！");
+        this.$router.push("/login");
+        return;
+      }
+
+      // 获取选项值
+      this.picList[this.count].picChoice = type;
+
+      //累加器自增
+      this.count++;
+
+      if (this.count > 29) {
+        //统计选项各回答个数
+        this.rightNum = [];
+        this.tipNum = [];
+        this.identifyNum = [];
+        this.errorNum = [];
+
+        this.picList.map((item, index) => {
+          switch (item.picChoice) {
+            case "1":
+              this.rightNum.push(this.picList[index]);
+              break;
+            case "2":
+              this.tipNum.push(this.picList[index]);
+              break;
+            case "3":
+              this.identifyNum.push(this.picList[index]);
+              break;
+            case "4":
+              this.errorNum.push(this.picList[index]);
+              break;
+          }
+        });
+        //调用数据统计接口
+        this.$http.post(
+          `/cognize/BSNTask`,
+          {
+            userId: this.userId,
+            testPlanId: this.testPlanId,
+            result: {
+              rightNum: this.rightNum.length,
+              tipNum: this.tipNum.length,
+              identifyNum: this.identifyNum.length,
+              errorNum: this.errorNum.length,
+              picList: this.picList
+            }
+          },
+          response => {
+            if (response && response.code == "200") {
+              // let routerInfo = {
+              //     "回答正确个数": this.rightNum.length + "",
+              //     "提示回答个数": this.tipNum.length + "",
+              //     "辨认回答个数": this.identifyNum.length + "",
+              //     "回答错误个数": this.errorNum.length + "",
+              // };
+
+              // 向非控制端发送结束通知
+              if (!this.showCover) {
+                // this.sendMsgHandle(4104, JSON.stringify(routerInfo));
+                this.sendMsgHandle(4104, response.data);
+              }
+              // 跳转到结果页面
+              // sessionStorage.setItem("resultInfo", JSON.stringify(routerInfo));
+              // this.$router.push(routerInfo);
+              // this.$router.push(`/cognitiveTestResult?from=1&testPlanId=${this.testPlanId}`);
+
+              //关闭socket
+              this.closeWebsocket();
+              //跳转新测试结果页面
+              this.goTestResult(response.data);
+            }
+          }
+        );
+
+        // this.$message({
+        //     message: "测试结束",
+        //     type: "success",
+        // });
+        this.$toast.success({
+          message: "测试结束",
+          position: "top"
+        });
+        //提交数据或跳转得分页
+        // this.$router.push("/welcome/CognitiveAbility");
+      } else {
+        //切换图片
+        this.changePic(this.count);
+        // 发送同步通知
+        this.sendMsgHandle(4101, type);
+      }
+    },
+    // goTestResult(id){
+    //     this.$http.get(`getRecordById?id=${id}`, {}, (res) => {
+    //         if (res.code == 2001) {
+    //             this.$toast.fail(res.msg);
+    //             return;
+    //         }
+    //         if (res && res.code == 200) {
+    //             if (JSON.parse(res.data?.userRecordEntity?.testResult).versionNo == "2.0.1") {
+    //                 //跳转新测试结果模版数据暂存本地
+    //                 // sessionStorage.setItem("testResult", res.data?.userRecordEntity?.testResult);
+    //                 // this.$store.dispatch('setTestResult',JSON.parse(res.data?.userRecordEntity?.testResult));
+    //                 this.$store.dispatch('setTestResult',res?.data);
+    //                 this.$router.push({
+    //                     name: "testResultNew",
+    //                     query: {
+    //                         id: res.data?.userRecordEntity?.id,
+    //                         title: res.data?.userRecordEntity?.name,
+    //                         testPlanId: this.testPlanId || '',
+    //                         come: 1, //1-来自认知任务列表，2-测试记录列表
+    //                     },
+    //                 });
+    //             } else {
+    //                 //跳转旧测试结果模版
+    //
+    //                 let testResult=  JSON.parse(res.data?.userRecordEntity?.testResult)[0].version;
+    //
+    //                 if( testResult == 2 ) {
+    //                     this.$router.push("/testRecordsSCl?id=" + id);
+    //                 }else {
+    //                     this.$router.push("/testResult?flag=" + res.data?.userRecordEntity?.flag + "&id=" + id);
+    //                 }
+    //             }
+    //
+    //         } else {
+    //             this.$toast.fail("获取数据失败！服务器异常");
+    //         }
+    //     });
+    // },
+    changePic(param) {
+      this.imgUrl = this.picList[param].imgUrl;
+      // 绑定回答选项值
+      this.radio = this.picList[param].picChoice;
+      // console.log(this.radio, "选项值");
+    },
+    prevClick() {
+      this.count--;
+      this.changePic(this.count);
+      this.sendMsgHandle(4102, "");
+    },
+    nextClick() {
+      if (this.picList[this.count].picChoice == 0) {
+        // this.$message.error("请先答本题！");
+        this.$toast.fail("请先答本题！");
+      } else {
+        this.count++;
+        this.changePic(this.count);
+        this.sendMsgHandle(4103, "");
+      }
+    },
+    // 选择身份
+    chooseRole() {
+      // this.$confirm("请选择你的身份，医生还是普通用户", "提示", {
+      //     distinguishCancelAndClose: true,
+      //     confirmButtonText: "医生",
+      //     cancelButtonText: "普通用户",
+      //     type: "info",
+      // })
+      //     .then(() => {
+      //         this.role = "doc";
+      //         this.init();
+      //     })
+      //     .catch(() => {
+      //         this.role = "patient";
+      //         this.init();
+      //     });
+
+      this.$dialog
+        .confirm({
+          title: "提示",
+          message: "请选择你的身份，医生还是普通用户",
+          confirmButtonText: "医生",
+          cancelButtonText: "普通用户"
+        })
+        .then(() => {
+          this.role = "doc";
+          this.init();
+        })
+        .catch(() => {
+          this.role = "patient";
+          this.init();
+        });
+    },
+
+    // 切换控制权限
+    changeMaster() {
+      let msg = {
+        toUserId: this.toUserId,
+        message: {
+          msg: "角色切换",
+          master: this.radio1 == this.role
+        }
+      };
+      console.log(msg);
+      this.webSocket.send(JSON.stringify(msg));
+    },
+
+    // 创建socket连接
+    creatScoket() {
+      this.webSocket = new WebSocket(`${scoketUrl}${this.userId}${this.role}`);
+      console.log("连接成功");
+      this.webSocket.onerror = event => {
+        alert("连接错误");
+      };
+
+      this.webSocket.onopen = event => {
+        //alert("open"+event.data);
+        //console.log(event);
+      };
+
+      this.webSocket.onclose = event => {
+        alert("服务不存在或者被关闭");
+      };
+
+      this.webSocket.onmessage = event => {
+        let data = JSON.parse(event.data);
+        if (!data.message) {
+          // if (data.code == "201") {
+          //   this.chooseRole();
+          //   this.$message.error(data.msg);
+          // }
+        } else {
+          this.receiveMsgHandle(data.message);
+        }
+      };
+    },
+
+    // 接收消息处理方法
+    receiveMsgHandle(res) {
+      // 切换控制权权
+      if (res.master == undefined) {
+        if (res.eventNo == 4101) {
+          console.log(res.data);
+          this.sentChoice(res.data);
+        }
+
+        if (res.eventNo == 4102) {
+          this.prevClick();
+        }
+
+        if (res.eventNo == 4103) {
+          this.nextClick();
+        }
+
+        if (res.eventNo == 4104) {
+          // sessionStorage.setItem("resultInfo", res.data);
+          // this.$router.push(`/cognitiveTestResult?from=1&testPlanId=${this.testPlanId}`);
+          // this.$router.push(res.data);
+          //跳转新测试结果页面
+          this.goTestResult(res.data);
+        }
+      } else {
+        this.radio1 = res.master ? "doc" : "patient";
+      }
+    },
+
+    // 发送消息处理方法
+    sendMsgHandle(No, data) {
+      let msg = {
+        toUserId: this.toUserId,
+        message: {
+          msg: "发送成功",
+          eventNo: No,
+          data: data
+        }
+      };
+      this.webSocket.send(JSON.stringify(msg));
+    },
+    // 禁止操作
+    disableHandle() {
+      // this.$message.warning("您暂时不需要操作，请耐心等待");
+      this.$toast.fail({
+        message: "您暂时不需要操作，请耐心等待",
+        position: "top"
+      });
+    },
+    //关闭websocket
+    closeWebsocket(e) {
+      if (this.webSocket) {
+        this.webSocket.close();
+        // let _this=this
+        this.webSocket.onclose = function(evt) {
+          console.log("websocket已关闭");
+        };
+      }
     }
+  },
+  beforeDestroy() {
+    //卸载事件
+    window.removeEventListener("beforeunload", e => this.closeWebsocket(e));
+  },
+  destroyed() {
+    clearInterval(this.timingFlag);
+    //关闭socket
+    this.closeWebsocket();
+  }
+};
 </script>
 
 <style scoped>
-    .boston-box {
-        width: 100%;
-        height: 100%;
-    }
-    .boston-warp {
-        box-sizing: border-box;
-        padding-top: 46px;
-        width: 100%;
-        height: 100%;
-        background: url(../../assets/congnitiveAblitity/zhixing.png) no-repeat center;
-        background-size: cover;
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        /*display: flex;*/
-        /*flex-direction: column;*/
-        /*justify-content: center;*/
-        /*align-items: center;*/
-        /*z-index: 2;*/
-    }
-    .prograss-content {
-        position: absolute;
-        width: 100%;
-        height: 20px;
-        left: 0;
-        top: 76px;
-        box-sizing: border-box;
-        padding: 4px 10px;
-    }
-    .pic-warp {
-        width: 100%;
-        height: 430px;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-around;
-        align-items: center;
-        padding-top: 50px;
-    }
-    .pic-content {
-        width: 375px;
-        height: 375px;
-        border-radius: 5px;
-        text-align: center;
-    }
-    .pic-content img {
-        max-height: 100%;
-        max-width: 100%;
-        vertical-align: middle;
-        margin: 0 auto;
-    }
-    .btn-content {
-        width: 375px;
-        height: 50px;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-around;
-        align-items: center;
-        font-size: 16px;
-    }
-    /*.btn-content .van-radio {*/
-        /*background: #fff;*/
-        /*border-radius: 8px;*/
-        /*margin: 0 !important;*/
-    /*}*/
-    .btn-switch-content {
-        width: 375px;
-        height: 55px;
-        /*margin-top: 60px;*/
-        display: flex;
-        flex-direction: row;
-        justify-content: space-around;
-        align-items: center;
-        box-sizing: border-box;
-        padding-bottom: 25px;
-    }
-    .btn-content .el-button,
-    .btn-switch-content .el-button {
-        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: #fff;
-    }
-    .btn-content .el-button:hover,
-    .btn-switch-content .el-button:hover {
-        color: rgb(87, 172, 187);
-        background: #fff;
-        border: 2px solid rgb(87, 172, 187);
-    }
-    .timing-content {
-        width: 100%;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        color: black;
-        font-size: 18px;
-        text-align: center;
-        line-height: 100px;
-    }
-    .contral_group {
-        position: fixed;
-        bottom: 5%;
-        left: 50%;
-        transform: translateX(-50%);
-        z-index: 100;
-        font-size: 16px;
-        width: 60%;
-        justify-content: center;
-    }
-    .cover {
-        position: fixed;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        overflow: auto;
-        z-index: 99;
-        background: #ddd;
-        opacity: 0.2;
-    }
-    .modelName {
-        position: absolute;
-        left: 5px;
-        top: 50px;
-        font-size: 16px;
-        font-weight: bold;
-        color: #000;
-        z-index: 10;
-    }
+.boston-box {
+  width: 100%;
+  height: 100%;
+}
+
+.boston-warp {
+  box-sizing: border-box;
+  padding-top: 46px;
+  width: 100%;
+  height: 100%;
+  background: url(../../assets/congnitiveAblitity/zhixing.png) no-repeat center;
+  background-size: cover;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  /*display: flex;*/
+  /*flex-direction: column;*/
+  /*justify-content: center;*/
+  /*align-items: center;*/
+  /*z-index: 2;*/
+}
+
+.prograss-content {
+  position: absolute;
+  width: 100%;
+  height: 20px;
+  left: 0;
+  top: 76px;
+  box-sizing: border-box;
+  padding: 4px 10px;
+}
+
+.pic-warp {
+  width: 100%;
+  height: 430px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  padding-top: 50px;
+}
+
+.pic-content {
+  width: 375px;
+  height: 375px;
+  border-radius: 5px;
+  text-align: center;
+}
+
+.pic-content img {
+  max-height: 100%;
+  max-width: 100%;
+  vertical-align: middle;
+  margin: 0 auto;
+}
+
+.btn-content {
+  width: 375px;
+  height: 50px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  font-size: 16px;
+}
+
+/*.btn-content .van-radio {*/
+/*background: #fff;*/
+/*border-radius: 8px;*/
+/*margin: 0 !important;*/
+/*}*/
+.btn-switch-content {
+  width: 375px;
+  height: 55px;
+  /*margin-top: 60px;*/
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  box-sizing: border-box;
+  padding-bottom: 25px;
+}
+
+.btn-content .el-button,
+.btn-switch-content .el-button {
+  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: #fff;
+}
+
+.btn-content .el-button:hover,
+.btn-switch-content .el-button:hover {
+  color: rgb(87, 172, 187);
+  background: #fff;
+  border: 2px solid rgb(87, 172, 187);
+}
+
+.timing-content {
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: black;
+  font-size: 18px;
+  text-align: center;
+  line-height: 100px;
+}
+
+.contral_group {
+  position: fixed;
+  bottom: 5%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+  font-size: 16px;
+  width: 60%;
+  justify-content: center;
+}
+
+.cover {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  z-index: 99;
+  background: #ddd;
+  opacity: 0.2;
+}
+
+.modelName {
+  position: absolute;
+  left: 5px;
+  top: 50px;
+  font-size: 16px;
+  font-weight: bold;
+  color: #000;
+  z-index: 10;
+}
 </style>

src/views/cognitiveTask/goNogoTask.vue

@@ -1,72 +1,80 @@
 <template>
-  <div>
-    <van-nav-bar
-      :title="subjectInfo.name"
-      left-arrow
-      left-text="返回"
-      @click-left="goBack"
-    />
-    <div v-if="!userFinalTestStrShow" class="explan">
-      <!-- LOGO  -->
-      <!--<h1>{{subjectInfo.name}}</h1>-->
-      <div>
-        <p>{{ subjectInfo.mobileTestDescription }}</p>
-      </div>
-      <div v-if="buttonShow" class="btnArea">
-        <van-button block round type="primary" @click="startTest()"
-          >{{ buttonName }}
-        </van-button>
+  <div class="app-container">
+    <Header />
+    <div class="main-container">
+      <van-nav-bar
+        :title="subjectInfo.name"
+        left-arrow
+        left-text=""
+        @click-left="goBack"
+      />
+      <div v-if="!userFinalTestStrShow" class="explan">
+        <!-- LOGO  -->
+        <!--<h1>{{subjectInfo.name}}</h1>-->
+        <div class="main-text-div">
+          {{ subjectInfo.mobileTestDescription }}
+        </div>
+        <!--        <div>-->
+        <!--          <p>{{ subjectInfo.mobileTestDescription }}</p>-->
+        <!--        </div>-->
+        <div v-if="buttonShow" class="btnArea">
+          <van-button block round type="primary" @click="startTest()"
+            >{{ buttonName }}
+          </van-button>
+        </div>
       </div>
-    </div>
 
-    <div v-if="userFinalTestStrShow" class="t3">
-      <p v-if="userFinalTestStrShow" class="t4">
-        GO信号正确反应总时间（毫秒）：{{ goTotalResponseTime }}
-      </p>
-      <p v-if="userFinalTestStrShow" class="t5">
-        GO信号平均反应时间（毫秒）：{{
-          goTotalResponseTime == 0 ? 0 : severalGoResponseTime
-        }}
-      </p>
-      <p v-if="userFinalTestStrShow" class="t5">
-        NO-GO信号反应正确率（%）：{{ blackRightRate }}
-      </p>
-    </div>
-    <div
-      v-if="testFlag"
-      :class="{ testMainDiv: !testState, activeTask: testState }"
-      @click="userClick()"
-    >
-      <div class="taskHead">
-        <div v-if="testTypeCode == 1" class="progress-content">
-          <van-progress
-            :percentage="percentage"
-            color="#f2826a"
-            pivot-text="任务进度"
-          />
+      <div v-if="userFinalTestStrShow" class="t3">
+        <p v-if="userFinalTestStrShow" class="t4">
+          GO信号正确反应总时间（毫秒）：{{ goTotalResponseTime }}
+        </p>
+        <p v-if="userFinalTestStrShow" class="t5">
+          GO信号平均反应时间（毫秒）：{{
+            goTotalResponseTime == 0 ? 0 : severalGoResponseTime
+          }}
+        </p>
+        <p v-if="userFinalTestStrShow" class="t5">
+          NO-GO信号反应正确率（%）：{{ blackRightRate }}
+        </p>
+      </div>
+      <div
+        v-if="testFlag"
+        :class="{ testMainDiv: !testState, activeTask: testState }"
+        @click="userClick()"
+      >
+        <div class="taskHead">
+          <div v-if="testTypeCode == 1" class="progress-content">
+            <van-progress
+              :percentage="percentage"
+              color="#f2826a"
+              pivot-text="任务进度"
+            />
+          </div>
+        </div>
+        <div class="glass">
+          <span v-if="countDownSpanShow" class="countdownStr">{{
+            countDownStr
+          }}</span>
+          <div
+            v-if="divShow"
+            :style="{ background: backgroundColor }"
+            class="goNoGoTask txt-center"
+          ></div>
         </div>
       </div>
-      <div class="glass">
-        <span v-if="countDownSpanShow" class="countdownStr">{{
-          countDownStr
-        }}</span>
-        <div
-          v-if="divShow"
-          :style="{ background: backgroundColor }"
-          class="goNoGoTask txt-center"
-        ></div>
+      <div v-if="saveFlag" class="t6" @click="resultSave()">
+        <van-button class="scaleButton" type="primary">结果保存</van-button>
       </div>
     </div>
-    <div v-if="saveFlag" class="t6" @click="resultSave()">
-      <van-button class="scaleButton" type="primary">结果保存</van-button>
-    </div>
   </div>
 </template>
 <script>
 // import screenfull from "screenfull";
 // import { oSessionStorage } from "../../utils/utils";
+import Header from "@/components/header/index.vue";
 
 export default {
+  components: { Header },
   data() {
     return {
       userId: "",
@@ -440,10 +448,15 @@ export default {
   }
 };
 </script>
-<style scoped>
+<style lang="scss" scoped>
+.btnArea {
+  width: 85%;
+  margin: 50px auto 0;
+}
+
 .explan {
   box-sizing: border-box;
-  padding: 46px 15px 0;
+  padding: 16px 10px 0;
 }
 
 .explan h1 {

src/views/cognitiveTask/goNogoTask2.vue

@@ -28,7 +28,7 @@
               v-if="!showFormal"
               block
               round
-              type="info"
+              type="primary"
               @click="startTest(1)"
               >练习测试
             </van-button>

src/views/cognitiveTask/memoryTest.vue

@@ -1,186 +1,219 @@
 <template>
-  <div>
-    <van-nav-bar
+  <div class="app-container">
+    <Header />
+    <div class="main-container">
+      <van-nav-bar
         :title="subjectInfo.name"
-        left-text="返回"
         left-arrow
+        left-text=""
         @click-left="goBack"
-    />
-    <div v-if="!testResultStr" class="explan">
-      <div>
-        <p>{{ subjectInfo.mobileTestDescription }}</p>
-        <div class="desc-img">
-          <img :src="beginPic" alt="" style="width: 150px; height: 150px; margin-top: 30px" />
-          <img :src="back2beginPic" alt="" style="width: 150px; height: 150px; margin-left: 30px" />
+      />
+      <div v-if="!testResultStr" class="explan">
+        <div class="main-text-div">
+          <p>{{ subjectInfo.mobileTestDescription }}</p>
+          <div class="desc-img">
+            <img
+              :src="beginPic"
+              alt=""
+              style="width: 150px; height: 150px; margin-top: 30px"
+            />
+            <img
+              :src="back2beginPic"
+              alt=""
+              style="width: 150px; height: 150px; margin-left: 30px"
+            />
+          </div>
         </div>
-      </div>
-      <div class="btnArea">
-        <van-button
+        <div class="btnArea">
+          <van-button
             v-if="buttonShow"
-            round
             block
+            round
+            style="margin-top: 15px"
             type="info"
             @click="startTest()"
-            style="margin-top: 15px"
-        >{{ buttonName }}</van-button>
+            >{{ buttonName }}
+          </van-button>
+        </div>
       </div>
-    </div>
 
-<!--    <div class="desc_wrap" v-show="!testResultStr">-->
-<!--      <div style="-->
-<!--          width: 70%;-->
-<!--          height: 100%;-->
-<!--          background: rgb(248, 248, 248);-->
-<!--          opacity: 1;-->
-<!--          border-radius: 12px;-->
-<!--          margin: 0 auto;-->
-<!--        ">-->
-<!--        <div style="float: left; width: 50%; height: 100%">-->
-<!--          <div id="left_top">-->
-<!--            <div>-->
-<!--              <div id="setting">-->
-<!--                <img src="../../assets/9551.png" alt="" />-->
-<!--              </div>-->
-<!--              <div id="text">-->
-<!--                <span>操作提示：</span>-->
-<!--              </div>-->
-<!--            </div>-->
-<!--          </div>-->
-<!--          <div style="margin: 100px auto; width: 80%; text-align: justify;text-justify: distribute-all-lines;">-->
-<!--            <p v-html="subjectInfo.testDescription"></p>-->
-<!--            <img :src="beginPic" alt="" style="width: 150px; height: 150px; margin-top: 30px" />-->
-<!--            <img :src="back2beginPic" alt="" style="width: 150px; height: 150px; margin-left: 30px" />-->
-<!--            &lt;!&ndash; <p>{{subjectInfo.description}}</p> &ndash;&gt;-->
-<!--          </div>-->
-<!--        </div>-->
-<!--        <div class="right_part" :style="{-->
-<!--          background:-->
-<!--            'url(' + require('../../assets/page' + taskId + '.png') + ')',-->
-<!--          'background-size': '100% 100%',-->
-<!--        }">-->
-<!--          <div id="title">-->
-<!--            <span>{{ subjectInfo.name }}</span>-->
-<!--          </div>-->
-<!--          <div style="position: absolute; bottom: 30px; right: 40%">-->
-<!--            <el-button class="start" v-if="buttonShow" @click="startTest()">{{ buttonName }}</el-button>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--    </div>-->
-
-<!--    <div v-show="testResultStr" style="margin-top: 20%; font-size: 100px; text-align: -webkit-center">-->
-<!--      <table class="test_result">-->
-<!--        <tr>-->
-<!--          <th>指标名称</th>-->
-<!--          <th>测试结果</th>-->
-<!--        </tr>-->
-<!--        <tr>-->
-<!--          <td>1back正确率</td>-->
-<!--          <td>{{ finalResult.userScoreOne }}</td>-->
-<!--        </tr>-->
-<!--        <tr>-->
-<!--          <td>2back正确率</td>-->
-<!--          <td>{{ finalResult.userScoreTwo }}</td>-->
-<!--        </tr>-->
-<!--      </table>-->
-<!--    </div>-->
-
-    <div v-if="testFlag"
-         :class="{ testMainDiv: !testState, activeTask: testState }"
-         style="background-color: black"
-    >
-
-<!--      <div v-if="testTypeCode !== 0" style="width: 50%; margin-left: 25%; margin-top: 35px"></div>-->
-
-<!--      <div style="width: 50%; margin-left: 10%; margin-top: 40px">-->
-<!--        <el-progress class="main_progress" :text-inside="true" :format="format" :stroke-width="48" :percentage="(imgIndex / 18) * 100"></el-progress>-->
-<!--      </div>-->
-
-      <div v-if="testTypeCode !== 0" class="progress-content">
-        <van-progress
+      <!--    <div class="desc_wrap" v-show="!testResultStr">-->
+      <!--      <div style="-->
+      <!--          width: 70%;-->
+      <!--          height: 100%;-->
+      <!--          background: rgb(248, 248, 248);-->
+      <!--          opacity: 1;-->
+      <!--          border-radius: 12px;-->
+      <!--          margin: 0 auto;-->
+      <!--        ">-->
+      <!--        <div style="float: left; width: 50%; height: 100%">-->
+      <!--          <div id="left_top">-->
+      <!--            <div>-->
+      <!--              <div id="setting">-->
+      <!--                <img src="../../assets/9551.png" alt="" />-->
+      <!--              </div>-->
+      <!--              <div id="text">-->
+      <!--                <span>操作提示：</span>-->
+      <!--              </div>-->
+      <!--            </div>-->
+      <!--          </div>-->
+      <!--          <div style="margin: 100px auto; width: 80%; text-align: justify;text-justify: distribute-all-lines;">-->
+      <!--            <p v-html="subjectInfo.testDescription"></p>-->
+      <!--            <img :src="beginPic" alt="" style="width: 150px; height: 150px; margin-top: 30px" />-->
+      <!--            <img :src="back2beginPic" alt="" style="width: 150px; height: 150px; margin-left: 30px" />-->
+      <!--            &lt;!&ndash; <p>{{subjectInfo.description}}</p> &ndash;&gt;-->
+      <!--          </div>-->
+      <!--        </div>-->
+      <!--        <div class="right_part" :style="{-->
+      <!--          background:-->
+      <!--            'url(' + require('../../assets/page' + taskId + '.png') + ')',-->
+      <!--          'background-size': '100% 100%',-->
+      <!--        }">-->
+      <!--          <div id="title">-->
+      <!--            <span>{{ subjectInfo.name }}</span>-->
+      <!--          </div>-->
+      <!--          <div style="position: absolute; bottom: 30px; right: 40%">-->
+      <!--            <el-button class="start" v-if="buttonShow" @click="startTest()">{{ buttonName }}</el-button>-->
+      <!--          </div>-->
+      <!--        </div>-->
+      <!--      </div>-->
+      <!--    </div>-->
+
+      <!--    <div v-show="testResultStr" style="margin-top: 20%; font-size: 100px; text-align: -webkit-center">-->
+      <!--      <table class="test_result">-->
+      <!--        <tr>-->
+      <!--          <th>指标名称</th>-->
+      <!--          <th>测试结果</th>-->
+      <!--        </tr>-->
+      <!--        <tr>-->
+      <!--          <td>1back正确率</td>-->
+      <!--          <td>{{ finalResult.userScoreOne }}</td>-->
+      <!--        </tr>-->
+      <!--        <tr>-->
+      <!--          <td>2back正确率</td>-->
+      <!--          <td>{{ finalResult.userScoreTwo }}</td>-->
+      <!--        </tr>-->
+      <!--      </table>-->
+      <!--    </div>-->
+
+      <div
+        v-if="testFlag"
+        :class="{ testMainDiv: !testState, activeTask: testState }"
+        style="background-color: black"
+      >
+        <!--      <div v-if="testTypeCode !== 0" style="width: 50%; margin-left: 25%; margin-top: 35px"></div>-->
+
+        <!--      <div style="width: 50%; margin-left: 10%; margin-top: 40px">-->
+        <!--        <el-progress class="main_progress" :text-inside="true" :format="format" :stroke-width="48" :percentage="(imgIndex / 18) * 100"></el-progress>-->
+        <!--      </div>-->
+
+        <div v-if="testTypeCode !== 0" class="progress-content">
+          <van-progress
             :percentage="(imgIndex / 18) * 100"
-            pivot-text="任务进度"
             color="#f2826a"
-        />
-      </div>
+            pivot-text="任务进度"
+          />
+        </div>
 
-      <div class="glass">
-        <h1 v-show="back1Flag" class="levelTitle">(1-back)</h1>
-        <h1 v-show="back2Flag" class="levelTitle">(2-back)</h1>
-<!--        <p align="center" v-show="countDownShow" style="margin-top: 20%; font-size: 70px; color: block">-->
-<!--          {{ countDownStr }}-->
-<!--        </p>-->
-
-        <p v-show="countDownShow" class="timingBox">{{ countDownStr }}</p>
-
-        <img class="shapeImg" v-show="beginPicShow" :src="beginPic" alt="" />
-        <img class="shapeImg" v-show="beginWordsPicShow" :src="beginWordsPic" alt="" />
-        <img class="shapeImg" v-show="back2beginPicShow" :src="back2beginPic" alt="" />
-        <img class="shapeImg" v-show="testPicShow" :src="examImgUrl" alt="" />
-        <!-- <img
-          v-show="showWhiteFlag"
-          src="../../assets/congnitiveAblitity/whiteFlag-new.png"
-          alt=""
-          style="width: 71px; height: 71px; margin-top: 20%"
-        /> -->
-
-        <div class="btn-content">
-          <div class="btn-item">
-            <van-button
-                size="small"
-                round
+        <div class="glass">
+          <h1 v-show="back1Flag" class="levelTitle">(1-back)</h1>
+          <h1 v-show="back2Flag" class="levelTitle">(2-back)</h1>
+          <!--        <p align="center" v-show="countDownShow" style="margin-top: 20%; font-size: 70px; color: block">-->
+          <!--          {{ countDownStr }}-->
+          <!--        </p>-->
+
+          <p v-show="countDownShow" class="timingBox">{{ countDownStr }}</p>
+
+          <img v-show="beginPicShow" :src="beginPic" alt="" class="shapeImg" />
+          <img
+            v-show="beginWordsPicShow"
+            :src="beginWordsPic"
+            alt=""
+            class="shapeImg"
+          />
+          <img
+            v-show="back2beginPicShow"
+            :src="back2beginPic"
+            alt=""
+            class="shapeImg"
+          />
+          <img v-show="testPicShow" :src="examImgUrl" alt="" class="shapeImg" />
+          <!-- <img
+            v-show="showWhiteFlag"
+            src="../../assets/congnitiveAblitity/whiteFlag-new.png"
+            alt=""
+            style="width: 71px; height: 71px; margin-top: 20%"
+          /> -->
+
+          <div class="btn-content">
+            <div class="btn-item">
+              <van-button
                 block
+                round
+                size="small"
                 type="info"
                 @click="userClick('L')"
-            ><van-icon name="arrow-left"
-            /></van-button>
-          </div>
-          <div class="btn-item">
-            <van-button
-                size="small"
-                round
+              >
+                <van-icon name="arrow-left" />
+              </van-button>
+            </div>
+            <div class="btn-item">
+              <van-button
                 block
+                round
+                size="small"
                 type="info"
                 @click="userClick('R')"
-            ><van-icon name="arrow"
-            /></van-button>
+              >
+                <van-icon name="arrow" />
+              </van-button>
+            </div>
           </div>
         </div>
-      </div>
 
-      <h2 v-show="msgVisible && this.result" style="margin-top: 370px; color: white">
-        正确!
-      </h2>
-      <h2 v-show="msgVisible && !this.result" style="margin-top: 370px; color: white">
-        错误!
-      </h2>
-      <p v-show="msgVisible" style="margin-top: 20px; color: white">
-        反应时间：{{ second }}:{{ millSecond }}s
-      </p>
-
-    </div>
-    <div style="
+        <h2
+          v-show="msgVisible && this.result"
+          style="margin-top: 370px; color: white"
+        >
+          正确!
+        </h2>
+        <h2
+          v-show="msgVisible && !this.result"
+          style="margin-top: 370px; color: white"
+        >
+          错误!
+        </h2>
+        <p v-show="msgVisible" style="margin-top: 20px; color: white">
+          反应时间：{{ second }}:{{ millSecond }}s
+        </p>
+      </div>
+      <div
+        style="
         text-align: center;
         padding-bottom: 2rem;
         display: block;
         margin-top: 20px;
-      ">
-      <!-- <el-button
-        class="scaleButton"
-        type="primary"
-        v-if="buttonShow"
-        @click="startTest()"
-        >{{ buttonName }}</el-button
-      > -->
+      "
+      >
+        <!-- <el-button
+          class="scaleButton"
+          type="primary"
+          v-if="buttonShow"
+          @click="startTest()"
+          >{{ buttonName }}</el-button
+        > -->
+      </div>
     </div>
   </div>
 </template>
 <script>
 // import cognitiveAbilityTaskList from "@/assets/data/cognitiveAbilityData.js";
 // import { oSessionStorage } from "../../utils/utils";
-
+import Header from "@/components/header/index.vue";
 import { preloader } from "@/utils/utils";
+
 export default {
+  components: { Header },
   data() {
     return {
       count: 0,
@@ -254,7 +287,7 @@ export default {
         "本测试中，测试者需要完成 1-back和 2-back两种难度的测试。每个难度的测试都分为1组，1-back和2-back之间有10秒的休息时间。在每个组块中，屏幕上会依次呈现一个图片。 " +
         "在 1-back 任务中，测试者需要判断当前呈现的图片与前一个位置呈现的图片是否相同，相同就按左键，不相同就按右键；在 2-back 任务中，测试者需要判断当前呈现的图片与两个位置前呈现的图片是否相同，" +
         "相同就按左键，不相同就按右键。 如您已清楚测试规则，请点击“正式测试”按钮进行正式测试。",
-      testPlanId: "",
+      testPlanId: ""
     };
   },
   // 页面初始化函数
@@ -270,7 +303,7 @@ export default {
   mounted() {
     // var that = this;
     // screenfull.toggle();
-    document.onkeydown = function (e) {
+    document.onkeydown = function(e) {
       let key = window.event.keyCode;
       if (key === 122) {
         e.preventDefault();
@@ -290,8 +323,8 @@ export default {
         this.$router.push({
           name: "testPlanClassify",
           params: {
-            testPlanId: this.testPlanId,
-          },
+            testPlanId: this.testPlanId
+          }
         });
       } else {
         this.$router.push("/index/cognitionTask");
@@ -322,7 +355,7 @@ export default {
         return;
       }
 
-      this.$http.get(`subjectInfo/getRecallCharTwo`, {}, (res) => {
+      this.$http.get(`subjectInfo/getRecallCharTwo`, {}, res => {
         console.log(res.code);
         console.log(res.msg);
         console.log(res.data.examList.back1[2]);
@@ -473,7 +506,7 @@ export default {
         } else {
           if (
             this.userTestPicList[this.imgIndex - 2 - 1].imgNum ==
-            this.userTestPicList[this.imgIndex - 1].imgNum &&
+              this.userTestPicList[this.imgIndex - 1].imgNum &&
             clickFlag == "L"
           ) {
             console.log("点对了");
@@ -489,7 +522,7 @@ export default {
           }
           if (
             this.userTestPicList[this.imgIndex - 2 - 1].imgNum ==
-            this.userTestPicList[this.imgIndex - 1].imgNum &&
+              this.userTestPicList[this.imgIndex - 1].imgNum &&
             clickFlag == "R"
           ) {
             this.result = false;
@@ -504,7 +537,7 @@ export default {
           }
           if (
             this.userTestPicList[this.imgIndex - 2 - 1].imgNum !=
-            this.userTestPicList[this.imgIndex - 1].imgNum &&
+              this.userTestPicList[this.imgIndex - 1].imgNum &&
             clickFlag == "L"
           ) {
             this.result = false;
@@ -519,7 +552,7 @@ export default {
           }
           if (
             this.userTestPicList[this.imgIndex - 2 - 1].imgNum !=
-            this.userTestPicList[this.imgIndex - 1].imgNum &&
+              this.userTestPicList[this.imgIndex - 1].imgNum &&
             clickFlag == "R"
           ) {
             console.log("点对了");
@@ -648,8 +681,9 @@ export default {
                 this.count++;
               }
               console.log("count" + this.count);
-              this.userRightClickNum =
-                this.userTestPicList[this.imgIndex].imgNum;
+              this.userRightClickNum = this.userTestPicList[
+                this.imgIndex
+              ].imgNum;
               console.log("当前图片的Num为:" + this.userRightClickNum);
               console.log("上个图片的Num为：" + this.exNum);
               if (this.imgIndex != 0 && this.exNum == this.userRightClickNum) {
@@ -721,14 +755,17 @@ export default {
       console.log("对了:" + this.userRightResponseCount);
       console.log(
         "正确率为：" +
-        (
-          (this.userRightResponseCount / this.userResponseCount) *
-          100
-        ).toFixed(2)
+          (
+            (this.userRightResponseCount / this.userResponseCount) *
+            100
+          ).toFixed(2)
       );
       // userScoreTwo = userScoreTwo.toFixed(2);
       if (this.testTypeCode == 0) {
-        if ((this.userRightResponseCount / this.userResponseCount) * 100 >= 10) {
+        if (
+          (this.userRightResponseCount / this.userResponseCount) * 100 >=
+          10
+        ) {
           this.testFlag = false;
           this.testState = false;
           this.testTypeCode = 1;
@@ -742,7 +779,7 @@ export default {
           //   type: "success",
           // });
           this.$toast.success({
-            message: "测试通过！",
+            message: "测试通过！"
           });
           console.log(this.userResponseRecords);
         } else {
@@ -763,7 +800,7 @@ export default {
           //   type: "warning",
           // });
           this.$toast.fail({
-            message: "练习测试不达标，请您重新进行练习测试！",
+            message: "练习测试不达标，请您重新进行练习测试！"
           });
         }
         // this.screenExit();
@@ -797,7 +834,7 @@ export default {
           userScoreTwo: this.userScoreTwo,
           userId: this.userId,
           userResponseRecords: this.userResponseRecords,
-          testPlanId: this.$route.query.testPlanId || "",
+          testPlanId: this.$route.query.testPlanId || ""
         };
         // this.screenExit();
         // console.log(this.finalResult);
@@ -820,22 +857,21 @@ export default {
         //   <!-- {{ testResultStr }} -->
         // </div>
 
-        this.$http.post(`/cognize/MemoryTest`, this.finalResult, (response) => {
+        this.$http.post(`/cognize/MemoryTest`, this.finalResult, response => {
           // that.testFlag = false;
           // that.testState = false;
           // // this.testResultStrShow = true;
           // that.buttonShow = false;
-          if (response && response.code == '200') {
-
+          if (response && response.code == "200") {
             // this.$message({
             //   message: "测试结束！",
             //   type: "success",
             // });
             this.$toast.success({
-              message: "测试结束！",
+              message: "测试结束！"
             });
             sessionStorage.setItem("testResult", JSON.stringify(response.data));
-            this.goTestResult(response.data)
+            this.goTestResult(response.data);
             // this.$router.push({
             //     name: "testResultNew",
             //     params: {
@@ -843,10 +879,9 @@ export default {
             //         come: 1, //1-来自测试列表，2-来自测试计划，3-来自测试记录列表
             //     },
             // });
-
           } else {
             // this.$message.error("提交测试结果失败！");
-            this.$toast.fail({message: "提交测试结果失败！",});
+            this.$toast.fail({ message: "提交测试结果失败！" });
           }
         });
       }
@@ -904,7 +939,7 @@ export default {
       return numberList;
     },
     sleep(time) {
-      return new Promise((resolve) => setTimeout(resolve, time));
+      return new Promise(resolve => setTimeout(resolve, time));
     },
     countDown() {
       // 测试时间倒计时
@@ -939,20 +974,27 @@ export default {
           this.countDownTime = 6;
         }
       }, 1000);
-    },
-  },
+    }
+  }
 };
 </script>
 <style scoped>
+.btnArea {
+  width: 85%;
+  margin: 220px auto 0;
+}
+
 .explan {
   box-sizing: border-box;
   padding: 15px 15px 0;
 }
+
 .explan h1 {
   font-size: 16px;
   color: #222222;
   text-align: center;
 }
+
 .explan p {
   font-size: 14px;
   color: #666666;
@@ -960,10 +1002,12 @@ export default {
   text-indent: 15px;
   margin-bottom: 20px;
 }
+
 .activeTask {
   box-sizing: border-box;
   padding-top: 46px;
-  background: url(../../assets/congnitiveAblitity/memory-bg.png) no-repeat center;
+  background: url(../../assets/congnitiveAblitity/memory-bg.png) no-repeat
+    center;
   background-size: cover;
   /* background: black; */
   position: fixed;
@@ -1000,6 +1044,7 @@ export default {
   box-sizing: border-box;
   padding: 4px 10px;
 }
+
 .timingBox {
   position: absolute;
   top: 50%;
@@ -1012,6 +1057,7 @@ export default {
   margin: 0 auto;
   z-index: 10;
 }
+
 .shapeImg {
   width: 90%;
   position: absolute;
@@ -1019,6 +1065,7 @@ export default {
   left: 50%;
   transform: translate(-50%, -70%);
 }
+
 .btn-content {
   position: absolute;
   width: 100%;
@@ -1034,13 +1081,15 @@ export default {
   box-sizing: border-box;
   padding: 0 5px;
 }
+
 .btn-content .btn-item {
   width: 30%;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
 }
-.btn-content .btn-item /deep/.van-button {
+
+.btn-content .btn-item /deep/ .van-button {
   margin: 35px 0;
 }
 </style>

src/views/cognitiveTask/psyCapital.vue

@@ -7,7 +7,7 @@
         @click-left="onClickLeft"
       />
       <div class="main-outline">
-        <div class="template-div" v-if="showPeopleInfo">
+        <div v-if="showPeopleInfo" class="template-div">
           <div class="temp-top">
             <p class="desc">亲爱的同学:</p>
             <p class="desc">
@@ -22,7 +22,7 @@
                 </van-radio-group>
               </div>
               <div class="people_qus">
-                2、年龄：<input v-model="userInfo.age" type="number"/>岁
+                2、年龄：<input v-model="userInfo.age" type="number" />岁
               </div>
               <div class="people_qus">3、年级：</div>
               <div class="people_qus">
@@ -120,11 +120,17 @@
               </div>
             </div>
           </div>
-          <van-button class="bottom-btn" type="info" round block @click="savaPeopleInfo">
+          <van-button
+            block
+            class="bottom-btn"
+            round
+            type="info"
+            @click="savaPeopleInfo"
+          >
             提交
           </van-button>
         </div>
-        <div class="template-div" v-if="showPersuade && !showPeopleInfo">
+        <div v-if="showPersuade && !showPeopleInfo" class="template-div">
           <div class="temp-top">
             <template v-show="strongType == 1">
               <template v-if="currentLevel == 3">
@@ -155,11 +161,11 @@
               </template>
             </template>
           </div>
-          <van-button class="bottom-btn" type="info" block round @click="iKnow">
+          <van-button block class="bottom-btn" round type="info" @click="iKnow">
             继续测试
           </van-button>
         </div>
-        <div class="template-div" v-if="!showPersuade && !showPeopleInfo">
+        <div v-if="!showPersuade && !showPeopleInfo" class="template-div">
           <div class="temp-top">
             <h2 class="desc" v-html="levelInfo[currentLevel].desc"></h2>
             <p class="question">
@@ -171,9 +177,9 @@
                   <van-radio
                     v-for="(item, index) in answerList"
                     :key="index"
+                    :disabled="disableRadio"
                     :name="item"
                     @click="changeHandle"
-                    :disabled="disableRadio"
                   >
                     {{ item }}
                   </van-radio>
@@ -184,18 +190,18 @@
           <div class="bottom-btn-area flex-row">
             <van-button
               v-if="this.currentIndex < this.scaleInfo.length"
-              size="small"
-              type="info"
               round
+              size="small"
+              type="primary"
               @click.native="nextItem()"
             >
               下一题
             </van-button>
             <van-button
               v-if="this.currentIndex != 0"
-              size="small"
-              type="info"
               round
+              size="small"
+              type="primary"
               @click.native="lastItem()"
             >
               上一题
@@ -208,7 +214,7 @@
 </template>
 
 <script>
-import { dateFormat } from "../../utils/utils"
+import { dateFormat } from "../../utils/utils";
 
 export default {
   data() {
@@ -223,27 +229,32 @@ export default {
       levelInfo: [
         {
           name: "1.1",
-          desc: '亲爱的同学你好！现在假设你作为学生需要选择下学期的选修课，选修课分为简单和困难两种类型。接下来会呈现几条与之相关的信息，请认真阅读并完成相应的量表，答案没有对错之分，感谢你的配合。现在请你仔细思考下对于<span style="font-size:18px;color:red">简单</span>选修课的看法',
+          desc:
+            '亲爱的同学你好！现在假设你作为学生需要选择下学期的选修课，选修课分为简单和困难两种类型。接下来会呈现几条与之相关的信息，请认真阅读并完成相应的量表，答案没有对错之分，感谢你的配合。现在请你仔细思考下对于<span style="font-size:18px;color:red">简单</span>选修课的看法',
           flag: "20220729150211"
         },
         {
           name: "1.2",
-          desc: '亲爱的同学你好！现在假设你作为学生需要选择下学期的选修课，选修课分为简单和困难两种类型。接下来会呈现几条与之相关的信息，请认真阅读并完成相应的量表，答案没有对错之分，感谢你的配合。现在请你仔细思考下对于<span style="font-size:18px;color:red">困难</span>选修课的看法',
+          desc:
+            '亲爱的同学你好！现在假设你作为学生需要选择下学期的选修课，选修课分为简单和困难两种类型。接下来会呈现几条与之相关的信息，请认真阅读并完成相应的量表，答案没有对错之分，感谢你的配合。现在请你仔细思考下对于<span style="font-size:18px;color:red">困难</span>选修课的看法',
           flag: "20220729150211"
         },
         {
           name: "1.3",
-          desc: "下列一些题目用来考察你自已日常生活方面的一些情况，答案没有对错之分，无需花费太多时间考虑，凭第一感觉回答即可。请判断每一句陈述和您自身情况的符合程度",
+          desc:
+            "下列一些题目用来考察你自已日常生活方面的一些情况，答案没有对错之分，无需花费太多时间考虑，凭第一感觉回答即可。请判断每一句陈述和您自身情况的符合程度",
           flag: "20220729150354"
         },
         {
           name: "1.4",
-          desc: "下列一些题目用来考察你自已日常生活方面的一些情况，答案没有对错之分，无需花费太多时间考虑，凭第一感觉回答即可。请判断每一句陈述和您自身情况的符合程度",
+          desc:
+            "下列一些题目用来考察你自已日常生活方面的一些情况，答案没有对错之分，无需花费太多时间考虑，凭第一感觉回答即可。请判断每一句陈述和您自身情况的符合程度",
           flag: "20220729150354"
         },
         {
           name: "2.1",
-          desc: '在阅读了上述信息后，现在请你再次思考下对<span style="font-size:18px;color:red">简单</span>选修课的看法',
+          desc:
+            '在阅读了上述信息后，现在请你再次思考下对<span style="font-size:18px;color:red">简单</span>选修课的看法',
           flag: "20220729150211"
         },
         {
@@ -253,7 +264,8 @@ export default {
         },
         {
           name: "2.2",
-          desc: '在阅读了上述信息后，现在请你再次思考下对<span style="font-size:18px;color:red">困难</span>选修课的看法',
+          desc:
+            '在阅读了上述信息后，现在请你再次思考下对<span style="font-size:18px;color:red">困难</span>选修课的看法',
           flag: "20220729150211"
         }
       ],
@@ -269,59 +281,61 @@ export default {
       strongType: "",
       showPeopleInfo: true,
       buttonLock: false
-    }
+    };
   },
   created() {
-    this.testPlanId = this.$route.query.testPlanId || ""
-    this.userId = sessionStorage.getItem("userId")
-    this.taskMark = this.getTaskMark()
-    this.getScaleInfo()
+    this.testPlanId = this.$route.query.testPlanId || "";
+    this.userId = sessionStorage.getItem("userId");
+    this.taskMark = this.getTaskMark();
+    this.getScaleInfo();
   },
   mounted() {
     // screenfull.request();
   },
   methods: {
     getScaleInfo() {
-      let flag = this.levelInfo[this.currentLevel].flag
-      this.$http.get(`scaleInfo/${ flag }`, {}, (res) => {
-        this.scaleInfo = res.data
-        this.answerList = this.scaleInfo[0].checkItems.split("；")
-      })
+      let flag = this.levelInfo[this.currentLevel].flag;
+      this.$http.get(`scaleInfo/${flag}`, {}, res => {
+        this.scaleInfo = res.data;
+        this.answerList = this.scaleInfo[0].checkItems.split("；");
+      });
     },
 
     lastItem() {
       if (this.currentIndex != 0) {
-        this.radio = ""
-        this.percentNum -= 1
-        let lastLabel = this.testResult.pop()
-        this.currentIndex -= 1
-        this.answerList =
-          this.scaleInfo[this.currentIndex].checkItems.split("；")
-        this.radio = lastLabel.checkItems
+        this.radio = "";
+        this.percentNum -= 1;
+        let lastLabel = this.testResult.pop();
+        this.currentIndex -= 1;
+        this.answerList = this.scaleInfo[this.currentIndex].checkItems.split(
+          "；"
+        );
+        this.radio = lastLabel.checkItems;
       }
     },
 
     // 下一题
     nextItem() {
       if (this.radio == "") {
-        this.$toast.fail("请先答本题！")
-        return
+        this.$toast.fail("请先答本题！");
+        return;
       }
       let resTemp = JSON.parse(
         JSON.stringify(this.scaleInfo[this.currentIndex])
-      )
-      resTemp.checkItems = this.radio
-      this.testResult.push(resTemp)
-      this.radio = ""
-      this.percentNum++
+      );
+      resTemp.checkItems = this.radio;
+      this.testResult.push(resTemp);
+      this.radio = "";
+      this.percentNum++;
       if (this.currentIndex < this.scaleInfo.length - 1) {
-        this.currentIndex++
-        this.answerList =
-          this.scaleInfo[this.currentIndex].checkItems.split("；")
+        this.currentIndex++;
+        this.answerList = this.scaleInfo[this.currentIndex].checkItems.split(
+          "；"
+        );
       } else {
         if (!this.buttonLock) {
-          this.submitResult()
-          this.buttonLock = true
+          this.submitResult();
+          this.buttonLock = true;
         }
       }
     },
@@ -342,12 +356,12 @@ export default {
         大学期间是否获得过奖学金: this.userInfo.scholarship,
         是否担任过学生干部: this.userInfo.cadre,
         人际关系状况: this.userInfo.relation
-      }
+      };
 
       for (const item in peopleInfo) {
         if (!peopleInfo[item]) {
-          this.$notify({ type: "warning", message: `${ item }不能为空` })
-          return
+          this.$notify({ type: "warning", message: `${item}不能为空` });
+          return;
         }
       }
 
@@ -358,56 +372,56 @@ export default {
           hierarchy: "1.0",
           recordId: JSON.stringify(peopleInfo)
         },
-        (res) => {
-          this.showPeopleInfo = false
+        res => {
+          this.showPeopleInfo = false;
         }
-      )
+      );
     },
 
     submitResult() {
-      let flag = this.levelInfo[this.currentLevel].flag
+      let flag = this.levelInfo[this.currentLevel].flag;
       this.$http.post(
-        `result/${ flag }`,
+        `result/${flag}`,
         {
           scale_result: this.testResult,
           testPlanId: this.testPlanId,
           userId: this.userId
         },
-        (res) => {
-          this.saveLevel(res.data)
+        res => {
+          this.saveLevel(res.data);
         }
-      )
+      );
     },
 
     // 保存单次成绩
     saveLevel(id) {
-      let hierarchy = this.levelInfo[this.currentLevel].name
+      let hierarchy = this.levelInfo[this.currentLevel].name;
       this.$http.post(
         "psycapital/savePsycapital",
         { taskMark: this.taskMark, hierarchy: hierarchy, recordId: id },
-        (res) => {
-          this.buttonLock = false
-          this.testResult = []
-          this.answerList = []
-          this.currentIndex = 0
-          this.currentLevel++
-          this.disableRadio = false
-          this.percentNum = 0
+        res => {
+          this.buttonLock = false;
+          this.testResult = [];
+          this.answerList = [];
+          this.currentIndex = 0;
+          this.currentLevel++;
+          this.disableRadio = false;
+          this.percentNum = 0;
           if (this.currentLevel < 7) {
             if (this.currentLevel == 3) {
-              this.showPersuade = true
-              this.strongType = res.data.strongType
+              this.showPersuade = true;
+              this.strongType = res.data.strongType;
             }
             if (this.currentLevel == 5) {
-              this.showPersuade = true
+              this.showPersuade = true;
             } else {
-              this.getScaleInfo()
+              this.getScaleInfo();
             }
           } else {
-            this.saveTask()
+            this.saveTask();
           }
         }
-      )
+      );
     },
 
     // 保存任务成绩
@@ -419,8 +433,8 @@ export default {
           userId: this.userId,
           testPlanId: this.testPlanId
         },
-        (res) => {
-          this.$toast.success("测试结束")
+        res => {
+          this.$toast.success("测试结束");
           this.$router.push({
             path: "/testResult",
             params: {
@@ -430,42 +444,42 @@ export default {
               phone: sessionStorage.getItem("phone"),
               id: res.data
             }
-          })
+          });
         }
-      )
+      );
     },
 
     // 选中答案
     changeHandle() {
-      this.nextItem()
+      this.nextItem();
     },
 
     // 进度条
     setProgress() {
-      return ((this.percentNum / this.scaleInfo.length) * 100).toFixed(0)
+      return ((this.percentNum / this.scaleInfo.length) * 100).toFixed(0);
     },
 
     // 生成测试标记
     getTaskMark() {
-      let phone = sessionStorage.getItem("phone")
-      let ins = JSON.parse(sessionStorage.getItem("userInfo")).institutionNo
-      let timeSpan = dateFormat("YYmmddHHMMSS", new Date())
-      return `${ phone }-${ ins }-${ timeSpan }`
+      let phone = sessionStorage.getItem("phone");
+      let ins = JSON.parse(sessionStorage.getItem("userInfo")).institutionNo;
+      let timeSpan = dateFormat("YYmmddHHMMSS", new Date());
+      return `${phone}-${ins}-${timeSpan}`;
     },
 
     iKnow() {
-      this.currentLevel += 1
-      this.getScaleInfo()
-      this.showPersuade = false
+      this.currentLevel += 1;
+      this.getScaleInfo();
+      this.showPersuade = false;
     },
     screen() {
-      screenfull.toggle()
+      screenfull.toggle();
     },
     onClickLeft() {
-      this.$router.go(-1)
+      this.$router.go(-1);
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>

src/views/cognitiveTask/shapeIntuition.vue

@@ -1,12 +1,8 @@
 <template>
   <div class="app-container">
-    <Header/>
+    <Header />
     <div class="main-container">
-      <van-nav-bar
-        :title="subjectInfo.name"
-        left-arrow
-        @click-left="goBack"
-      />
+      <van-nav-bar :title="subjectInfo.name" left-arrow @click-left="goBack" />
       <div class="main-outline">
         <template v-if="!testResultStr">
           <div class="main-text-div">
@@ -15,23 +11,21 @@
           <div class="btnArea">
             <van-button
               v-if="button0Show"
-              round
               block
-              type="info"
+              round
+              type="primary"
               @click="startTest(0)"
-            >练习测试
-            </van-button
-            >
+              >练习测试
+            </van-button>
             <van-button
               v-if="button1Show"
-              round
               block
+              round
+              style="margin-top: 15px"
               type="info"
               @click="startTest(1)"
-              style="margin-top: 15px"
-            >正式测试
-            </van-button
-            >
+              >正式测试
+            </van-button>
           </div>
         </template>
         <div
@@ -46,18 +40,26 @@
           <div v-if="testTypeCode == 1" class="progress-content">
             <van-progress
               :percentage="(imgIndex * 100) / 120"
-              pivot-text="任务进度"
               color="#f2826a"
+              pivot-text="任务进度"
             />
           </div>
           <div class="glass">
             <p v-show="countDownShow" class="timingBox">{{ countDownStr }}</p>
 
             <div v-show="showWhiteFlag" class="look-point">
-              <img src="../../assets/congnitiveAblitity/whiteFlag-new.png" alt=""/>
+              <img
+                alt=""
+                src="../../assets/congnitiveAblitity/whiteFlag-new.png"
+              />
             </div>
 
-            <img v-show="showDuckEgg" :src="examImgUrl" alt="" class="shapeImg"/>
+            <img
+              v-show="showDuckEgg"
+              :src="examImgUrl"
+              alt=""
+              class="shapeImg"
+            />
             <!--<img-->
             <!--v-show="showWhiteFlag"-->
             <!--src="../../assets/congnitiveAblitity/whiteFlag-new.png"-->
@@ -69,29 +71,27 @@
             <!--<el-button v-show="showDuckEgg" type="primary" icon="el-icon-arrow-left" @click="userClick('L')"></el-button>-->
             <!--<el-button v-show="showDuckEgg" type="primary" @click="userClick('R')"><i class="el-icon-arrow-right el-icon&#45;&#45;right"></i></el-button>-->
             <!--</div>-->
-            <div class="btn-content" v-show="showDuckEgg">
+            <div v-show="showDuckEgg" class="btn-content">
               <div class="btn-item">
                 <van-button
-                  size="small"
-                  round
                   block
+                  round
+                  size="small"
                   type="info"
                   @click="userClick('L')"
                 >
-                  <van-icon name="arrow-left"
-                  />
+                  <van-icon name="arrow-left" />
                 </van-button>
               </div>
               <div class="btn-item">
                 <van-button
-                  size="small"
-                  round
                   block
+                  round
+                  size="small"
                   type="info"
                   @click="userClick('R')"
                 >
-                  <van-icon name="arrow"
-                  />
+                  <van-icon name="arrow" />
                 </van-button>
               </div>
             </div>
@@ -103,8 +103,8 @@
 </template>
 
 <script>
-import { preloader } from "@/utils/utils"
-import Header from "@/components/header/index.vue"
+import { preloader } from "@/utils/utils";
+import Header from "@/components/header/index.vue";
 
 export default {
   name: "shapeIntuition",
@@ -127,7 +127,7 @@ export default {
       imgIndex: 0,
       userTestPicList: [], //用户点击图片列表
       showImage: true,
-      difficultList: [ 10 ], //[0,10,30,45,60,90,120,180,360]
+      difficultList: [10], //[0,10,30,45,60,90,120,180,360]
       testPicCount: 10, //测试数目
       userRightClickDirection: "", //测试者应该点击的方向
       userRightResponseCount: 0, //测试者反应正确的次数
@@ -148,18 +148,18 @@ export default {
       userResponseRecords: [], //用户测试反应记录
       saveFalg: true,
       testPlanId: ""
-    }
+    };
   },
   // 页面初始化函数
   created() {
-    this.testPlanId = this.$route.query.testPlanId || ""
-    this.userId = JSON.parse(sessionStorage.getItem("userInfo")).id
-    this.subjectInfo = JSON.parse(sessionStorage.getItem("subjectInfo"))
+    this.testPlanId = this.$route.query.testPlanId || "";
+    this.userId = JSON.parse(sessionStorage.getItem("userInfo")).id;
+    this.subjectInfo = JSON.parse(sessionStorage.getItem("subjectInfo"));
   },
   destroyed() {
-    clearInterval(this.myInterval)
-    clearTimeout(this.timeOne)
-    clearTimeout(this.timeTwo)
+    clearInterval(this.myInterval);
+    clearTimeout(this.timeOne);
+    clearTimeout(this.timeTwo);
   },
   methods: {
     goBack() {
@@ -170,32 +170,32 @@ export default {
           params: {
             testPlanId: this.testPlanId
           }
-        })
+        });
       } else {
-        this.$router.push("/index/cognitionTask")
+        this.$router.push("/index/cognitionTask");
       }
     },
     userClick(clickFlag) {
       if (this.countDownShow || (this.showWhiteFlag && clickFlag != "NULL")) {
-        return
+        return;
       }
       if (this.testTypeCode == 0 && this.userRightClickDirection != clickFlag) {
-        this.$toast.fail("点击错误，请根据图中提示，点击鼠标")
-        return
+        this.$toast.fail("点击错误，请根据图中提示，点击鼠标");
+        return;
       }
-      this.showDuckEgg = false
-      this.showWhiteFlag = true
-      let milliSecondsCount = new Date().getTime() - this.startMilliSeconds
-      let userResponseStr = "Wrong"
-      clearTimeout(this.timeTwo)
+      this.showDuckEgg = false;
+      this.showWhiteFlag = true;
+      let milliSecondsCount = new Date().getTime() - this.startMilliSeconds;
+      let userResponseStr = "Wrong";
+      clearTimeout(this.timeTwo);
       //用户反应正确性判断
       if (
         this.userRightClickDirection == clickFlag &&
         this.userCanClick == true
       ) {
-        this.userRightResponseCount++
-        this.userCanClick = false
-        userResponseStr = "Right"
+        this.userRightResponseCount++;
+        this.userCanClick = false;
+        userResponseStr = "Right";
       }
 
       //记录用户反应
@@ -205,94 +205,95 @@ export default {
           rightOrWrong: userResponseStr,
           responseTime: milliSecondsCount,
           diff: this.userTestPicList[this.imgIndex - 1].diff
-        })
+        });
       }
       //判断是否测试结束
       if (this.imgIndex == this.userTestPicList.length) {
-        this.computeScore()
+        this.computeScore();
       } else {
         // 进入下一轮
-        this.showTargetNow()
+        this.showTargetNow();
       }
     },
     startTest(testType) {
       if (!sessionStorage.getItem("userInfo")) {
-        this.$toast("请先登录！")
-        this.$router.push("/login")
-        return
+        this.$toast("请先登录！");
+        this.$router.push("/login");
+        return;
       }
-      this.testTypeCode = testType
+      this.testTypeCode = testType;
       if (this.testTypeCode == 1) {
-        this.difficultList = [ 0, 30, 60, 90, 180, 360 ] // [360,180,120,90,60,45,30,10,0]
-        this.testPicCount = 20
-        this.countDownStr = "马上开始！"
-        this.imgIndex = 0
-        this.countDownTime = 6
-        this.testEndFlag = false
-        this.showDuckEgg = false
-        this.userTestPicList = []
+        this.difficultList = [0, 30, 60, 90, 180, 360]; // [360,180,120,90,60,45,30,10,0]
+        this.testPicCount = 20;
+        this.countDownStr = "马上开始！";
+        this.imgIndex = 0;
+        this.countDownTime = 6;
+        this.testEndFlag = false;
+        this.showDuckEgg = false;
+        this.userTestPicList = [];
       }
-      this.countDownShow = true
-      this.userTestPicListCreate()
+      this.countDownShow = true;
+      this.userTestPicListCreate();
       // 预加载图片后开始测试
       preloader(this.userTestPicList, () => {
-        this.testFlag = true
-        this.testState = true
-        this.countDown()
-      })
+        this.testFlag = true;
+        this.testState = true;
+        this.countDown();
+      });
     },
     showTargetNow() {
       // 练习间隔2~4，正式测试2~12；
-      var time = 2000 //Math.random()*2000 + 3000;
-      this.showWhiteFlag = true
-      this.showDuckEgg = false
+      var time = 2000; //Math.random()*2000 + 3000;
+      this.showWhiteFlag = true;
+      this.showDuckEgg = false;
       //鸭蛋出现的时间1000毫秒
       this.timeOne = setTimeout(() => {
-        this.userRightClickDirection =
-          this.userTestPicList[this.imgIndex].imgDirection
-        this.examImgUrl = this.userTestPicList[this.imgIndex].imgUrl
-        this.showDuckEgg = true
-        this.showWhiteFlag = false
-        this.startMilliSeconds = new Date().getTime()
-        this.userCanClick = true
-        this.imgIndex++
-      }, 1000)
+        this.userRightClickDirection = this.userTestPicList[
+          this.imgIndex
+        ].imgDirection;
+        this.examImgUrl = this.userTestPicList[this.imgIndex].imgUrl;
+        this.showDuckEgg = true;
+        this.showWhiteFlag = false;
+        this.startMilliSeconds = new Date().getTime();
+        this.userCanClick = true;
+        this.imgIndex++;
+      }, 1000);
 
       // 2000后无反应进入下一trail
       this.timeTwo = setTimeout(() => {
-        if (this.testTypeCode == 1) this.userClick("NULL")
-      }, time)
+        if (this.testTypeCode == 1) this.userClick("NULL");
+      }, time);
     },
     computeScore() {
       if (this.testTypeCode == 0) {
         //if(this.testPicCount == this.userRightResponseCount){
-        this.testFlag = false
-        this.testState = false
+        this.testFlag = false;
+        this.testState = false;
         //this.testTypeCode =1
-        this.countDownStr = "练习马上开始！"
-        this.userRightResponseCount = 0
-        this.imgIndex = 0
-        this.countDownTime = 6
-        this.testEndFlag = false
-        this.showDuckEgg = false
-        this.showWhiteFlag = false
-        this.userTestPicList = []
-        this.userResponseRecords = []
-        this.button1Show = true
+        this.countDownStr = "练习马上开始！";
+        this.userRightResponseCount = 0;
+        this.imgIndex = 0;
+        this.countDownTime = 6;
+        this.testEndFlag = false;
+        this.showDuckEgg = false;
+        this.showWhiteFlag = false;
+        this.userTestPicList = [];
+        this.userResponseRecords = [];
+        this.button1Show = true;
         this.$toast.success({
           message: "测试结束！",
           position: "top"
-        })
+        });
       } else {
         let userScore = (
           (this.userRightResponseCount / this.userResponseRecords.length) *
           100
-        ).toFixed(2)
-        this.testFlag = false
-        this.testState = false
-        this.button0Show = false
-        this.button1Show = false
-        console.log(this.userResponseRecords)
+        ).toFixed(2);
+        this.testFlag = false;
+        this.testState = false;
+        this.button0Show = false;
+        this.button1Show = false;
+        console.log(this.userResponseRecords);
         this.$http.post(
           `/cognize/SHAPE`,
           {
@@ -301,19 +302,19 @@ export default {
             userResponseRecords: this.userResponseRecords,
             testPlanId: this.testPlanId
           },
-          (response) => {
+          response => {
             if (response?.code == 200) {
               //跳转新测试结果页面
-              this.goTestResult(response.data)
+              this.goTestResult(response.data);
             } else {
-              this.$toast.fail(response?.msg)
+              this.$toast.fail(response?.msg);
             }
           },
-          (err) => {
-            this.$toast.fail(err.msg)
+          err => {
+            this.$toast.fail(err.msg);
           }
-        )
-        this.$toast.success("测试结束")
+        );
+        this.$toast.success("测试结束");
       }
     },
     // goTestResult(id) {
@@ -368,109 +369,109 @@ export default {
         // imgUrl:'',
         // imgDirection:'',
         // userClickDirection:''
-      }
+      };
 
       if (this.testTypeCode == 0) {
         //随机呈现最简单的10张图片
-        let imgIndexList = this.getRandomNumber(10, 20)
+        let imgIndexList = this.getRandomNumber(10, 20);
         for (let j = 0; j < this.difficultList.length; j++) {
           for (let i = 0; i < imgIndexList.length; i++) {
-            imgObj = {}
+            imgObj = {};
             if (i % 2 == 0) {
               imgObj.imgUrl = require("../../assets/congnitiveAblitity/shapeIntuition/R_ELP_test_jitter" +
                 this.difficultList[j] +
                 "_s" +
                 imgIndexList[i] +
-                ".jpg")
-              imgObj.imgDirection = "R"
-              imgObj.userClickDirection = ""
+                ".jpg");
+              imgObj.imgDirection = "R";
+              imgObj.userClickDirection = "";
             } else {
               imgObj.imgUrl = require("../../assets/congnitiveAblitity/shapeIntuition/ELP_test_jitter" +
                 this.difficultList[j] +
                 "_s" +
                 imgIndexList[i] +
-                ".jpg")
-              imgObj.imgDirection = "L"
-              imgObj.userClickDirection = ""
+                ".jpg");
+              imgObj.imgDirection = "L";
+              imgObj.userClickDirection = "";
             }
-            this.userTestPicList.push(imgObj)
+            this.userTestPicList.push(imgObj);
           }
         }
-        this.shuffle(this.userTestPicList)
+        this.shuffle(this.userTestPicList);
         //.log(this.userTestPicList)
       } else {
         //随机呈现20张难度不同的图片
         //  this.difficultList = [0,30,60,90,180,360];
         //this.testPicCount = 20;
         for (let j = 0; j < this.difficultList.length; j++) {
-          var tempList = []
+          var tempList = [];
           for (let i = 1; i < 11; i++) {
-            imgObj = {}
+            imgObj = {};
             imgObj.imgUrl = require("../../assets/congnitiveAblitity/shapeIntuition/R_ELP_test_jitter" +
               this.difficultList[j] +
               "_s" +
               i +
-              ".jpg")
-            imgObj.imgDirection = "R"
-            imgObj.userClickDirection = ""
-            imgObj.diff = this.difficultList[j]
-            tempList.push(imgObj)
-            imgObj = {}
+              ".jpg");
+            imgObj.imgDirection = "R";
+            imgObj.userClickDirection = "";
+            imgObj.diff = this.difficultList[j];
+            tempList.push(imgObj);
+            imgObj = {};
             imgObj.imgUrl = require("../../assets/congnitiveAblitity/shapeIntuition/ELP_test_jitter" +
               this.difficultList[j] +
               "_s" +
               i +
-              ".jpg")
-            imgObj.imgDirection = "L"
-            imgObj.userClickDirection = ""
-            imgObj.diff = this.difficultList[j]
-            tempList.push(imgObj)
+              ".jpg");
+            imgObj.imgDirection = "L";
+            imgObj.userClickDirection = "";
+            imgObj.diff = this.difficultList[j];
+            tempList.push(imgObj);
           }
-          this.shuffle(tempList)
-          this.userTestPicList = this.userTestPicList.concat(tempList)
-          this.testPicCount = this.userTestPicList.length
-          console.log(this.userTestPicList)
+          this.shuffle(tempList);
+          this.userTestPicList = this.userTestPicList.concat(tempList);
+          this.testPicCount = this.userTestPicList.length;
+          console.log(this.userTestPicList);
         }
       }
-      console.log(this.userTestPicList.length)
+      console.log(this.userTestPicList.length);
     },
     getRandomNumber(size, maxNumber) {
-      let numberList = []
+      let numberList = [];
       for (var i = 0; i < size; i++) {
-        numberList.push(Math.floor(Math.random() * maxNumber) + 1)
+        numberList.push(Math.floor(Math.random() * maxNumber) + 1);
       }
-      return numberList
+      return numberList;
     },
     countDown() {
       // 测试时间倒计时
       this.myInterval = setInterval(() => {
-        this.countDownTime--
-        this.countDownStr = this.countDownTime
+        this.countDownTime--;
+        this.countDownStr = this.countDownTime;
         if (this.countDownTime == 0) {
-          this.countDownShow = false
+          this.countDownShow = false;
           //计算测试结果
-          this.showTargetNow()
+          this.showTargetNow();
           // 清除定时器
-          this.showDuckEgg = false
-          this.showWhiteFlag = true
-          clearInterval(this.myInterval)
-          this.countDownTime = 6
+          this.showDuckEgg = false;
+          this.showWhiteFlag = true;
+          clearInterval(this.myInterval);
+          this.countDownTime = 6;
         }
-      }, 1000)
+      }, 1000);
     },
     shuffle(arr) {
       var i = arr.length,
         t,
-        j
+        j;
       while (i) {
-        j = Math.floor(Math.random() * i--)
-        t = arr[i]
-        arr[i] = arr[j]
-        arr[j] = t
+        j = Math.floor(Math.random() * i--);
+        t = arr[i];
+        arr[i] = arr[j];
+        arr[j] = t;
       }
     }
   }
-}
+};
 </script>
 <style lang="scss" scoped>
 .main-outline {
@@ -479,7 +480,6 @@ export default {
     margin: 60px auto 0;
   }
 
-
   h1 {
     font-size: 16px;
     color: #222222;
@@ -498,7 +498,8 @@ export default {
 .activeTask {
   box-sizing: border-box;
   padding-top: 46px;
-  background: url(../../assets/congnitiveAblitity/shapeIntuition.png) no-repeat center;
+  background: url(../../assets/congnitiveAblitity/shapeIntuition.png) no-repeat
+    center;
   background-size: cover;
   position: fixed;
   top: 0;

src/views/cognitiveTask/shapeIntuition2.vue

@@ -1,636 +1,681 @@
 <template>
-    <div>
-        <!--<div class="desc_wrap" v-if="!testResultStr">-->
-            <!--<div-->
-                    <!--style="-->
-          <!--width: 70%;-->
-          <!--height: 100%;-->
-          <!--background: rgb(248, 248, 248);-->
-          <!--opacity: 1;-->
-          <!--border-radius: 12px;-->
-          <!--margin: 0 auto;-->
-        <!--"-->
-            <!--&gt;-->
-                <!--<div style="float: left; width: 50%; height: 100%; overflow-y: auto">-->
-                    <!--<div id="left_top">-->
-                        <!--<div>-->
-                            <!--<div id="setting">-->
-                                <!--<img src="../../assets/9551.png" alt="" />-->
-                            <!--</div>-->
-                            <!--<div id="text">-->
-                                <!--<span>操作提示：</span>-->
-                            <!--</div>-->
-                        <!--</div>-->
-                    <!--</div>-->
-                    <!--<div style="margin: 100px auto; width: 80%; text-align: left">-->
-                        <!--<p v-html="subjectInfo.testDescription"></p>-->
-                        <!--&lt;!&ndash; <p>{{subjectInfo.description}}</p> &ndash;&gt;-->
-                    <!--</div>-->
-                <!--</div>-->
-                <!--<div-->
-                        <!--class="right_part"-->
-                        <!--:style="{-->
-                            <!--background:-->
-                              <!--'url(' + require('../../assets/page' + taskId + '.png') + ')',-->
-                            <!--'background-size': '100% 100%',-->
-                          <!--}"-->
-                <!--&gt;-->
-                    <!--<div id="title">-->
-                        <!--<span>{{ subjectInfo.name }}</span>-->
-                    <!--</div>-->
-                    <!--<div-->
-                            <!--style="-->
-              <!--position: absolute;-->
-              <!--bottom: 30px;-->
-              <!--left: 50%;-->
-              <!--transform: translateX(-50%);-->
-            <!--"-->
-                    <!--&gt;-->
-                        <!--<el-button-->
-                                <!--class="start"-->
-                                <!--type="primary"-->
-                                <!--v-if="button0Show"-->
-                                <!--@click="startTest(0)"-->
-                        <!--&gt;练习测试</el-button-->
-                        <!--&gt;-->
-                        <!--<el-button-->
-                                <!--class="start"-->
-                                <!--type="primary"-->
-                                <!--v-if="button1Show"-->
-                                <!--@click="startTest(1)"-->
-                        <!--&gt;正式测试</el-button-->
-                        <!--&gt;-->
-                    <!--</div>-->
-                <!--</div>-->
-            <!--</div>-->
-        <!--</div>-->
-
-        <van-nav-bar
-                :title="subjectInfo.name"
-                left-text="返回"
-                left-arrow
-                @click-left="goBack"
-        />
-        <div v-if="!testResultStr" class="explan">
-            <!-- LOGO  -->
-            <!--<h1>{{ subjectInfo.name }}</h1>-->
-            <div>
-                <!--<p v-html="subjectInfo.testDescription">{{ subjectInfo.testDescription }}</p>-->
-                <p>{{ subjectInfo.mobileTestDescription }}</p>
-            </div>
-            <div class="btnArea">
-                <van-button v-if="button0Show" round block type="info" @click="startTest(0)">练习测试</van-button>
-                <van-button v-if="button1Show" round block type="info" @click="startTest(1)" style="margin-top: 15px">正式测试</van-button>
-            </div>
-        </div>
-
+  <div class="app-container">
+    <Header />
+    <!--<div class="desc_wrap" v-if="!testResultStr">-->
+    <!--<div-->
+    <!--style="-->
+    <!--width: 70%;-->
+    <!--height: 100%;-->
+    <!--background: rgb(248, 248, 248);-->
+    <!--opacity: 1;-->
+    <!--border-radius: 12px;-->
+    <!--margin: 0 auto;-->
+    <!--"-->
+    <!--&gt;-->
+    <!--<div style="float: left; width: 50%; height: 100%; overflow-y: auto">-->
+    <!--<div id="left_top">-->
+    <!--<div>-->
+    <!--<div id="setting">-->
+    <!--<img src="../../assets/9551.png" alt="" />-->
+    <!--</div>-->
+    <!--<div id="text">-->
+    <!--<span>操作提示：</span>-->
+    <!--</div>-->
+    <!--</div>-->
+    <!--</div>-->
+    <!--<div style="margin: 100px auto; width: 80%; text-align: left">-->
+    <!--<p v-html="subjectInfo.testDescription"></p>-->
+    <!--&lt;!&ndash; <p>{{subjectInfo.description}}</p> &ndash;&gt;-->
+    <!--</div>-->
+    <!--</div>-->
+    <!--<div-->
+    <!--class="right_part"-->
+    <!--:style="{-->
+    <!--background:-->
+    <!--'url(' + require('../../assets/page' + taskId + '.png') + ')',-->
+    <!--'background-size': '100% 100%',-->
+    <!--}"-->
+    <!--&gt;-->
+    <!--<div id="title">-->
+    <!--<span>{{ subjectInfo.name }}</span>-->
+    <!--</div>-->
+    <!--<div-->
+    <!--style="-->
+    <!--position: absolute;-->
+    <!--bottom: 30px;-->
+    <!--left: 50%;-->
+    <!--transform: translateX(-50%);-->
+    <!--"-->
+    <!--&gt;-->
+    <!--<el-button-->
+    <!--class="start"-->
+    <!--type="primary"-->
+    <!--v-if="button0Show"-->
+    <!--@click="startTest(0)"-->
+    <!--&gt;练习测试</el-button-->
+    <!--&gt;-->
+    <!--<el-button-->
+    <!--class="start"-->
+    <!--type="primary"-->
+    <!--v-if="button1Show"-->
+    <!--@click="startTest(1)"-->
+    <!--&gt;正式测试</el-button-->
+    <!--&gt;-->
+    <!--</div>-->
+    <!--</div>-->
+    <!--</div>-->
+    <!--</div>-->
+    <div class="main-container">
+      <van-nav-bar
+        :title="subjectInfo.name"
+        left-arrow
+        left-text=""
+        @click-left="goBack"
+      />
+      <div v-if="!testResultStr" class="explan">
         <!-- LOGO  -->
-
-        <div v-show="testResultStrShow" style="width: 650px; margin: 20px auto; line-height: 2">
-            <p style="margin-top: 20%; font-size: 30px">
-                {{ testResultStr }}
-            </p>
+        <!--<h1>{{ subjectInfo.name }}</h1>-->
+        <div class="main-text-div">
+          <!--<p v-html="subjectInfo.testDescription">{{ subjectInfo.testDescription }}</p>-->
+          <p>{{ subjectInfo.mobileTestDescription }}</p>
         </div>
+        <div class="btnArea">
+          <van-button
+            v-if="button0Show"
+            block
+            round
+            type="primary"
+            @click="startTest(0)"
+            >练习测试
+          </van-button>
+          <van-button
+            v-if="button1Show"
+            block
+            round
+            style="margin-top: 15px"
+            type="primary"
+            @click="startTest(1)"
+          >
+            正式测试
+          </van-button>
+        </div>
+      </div>
 
-        <div v-if="testFlag" class="activeTask">
+      <!-- LOGO  -->
 
-            <div  v-if="testTypeCode == 1" class="progress-content">
-                <van-progress
-                        :percentage="(imgIndex * 100) / 120"
-                        pivot-text="任务进度"
-                        color="#f2826a"
-                />
-            </div>
+      <div
+        v-show="testResultStrShow"
+        style="width: 650px; margin: 20px auto; line-height: 2"
+      >
+        <p style="margin-top: 20%; font-size: 30px">
+          {{ testResultStr }}
+        </p>
+      </div>
 
-            <div class="glass">
+      <div v-if="testFlag" class="activeTask">
+        <div v-if="testTypeCode == 1" class="progress-content">
+          <van-progress
+            :percentage="(imgIndex * 100) / 120"
+            color="#f2826a"
+            pivot-text="任务进度"
+          />
+        </div>
 
-                <p v-show="countDownShow" class="timingBox">{{ countDownStr }}</p>
+        <div class="glass">
+          <p v-show="countDownShow" class="timingBox">{{ countDownStr }}</p>
 
-                <img v-show="showDuckEgg" :src="examImgUrl" alt="" class="shapeImg" />
+          <img v-show="showDuckEgg" :src="examImgUrl" alt="" class="shapeImg" />
 
-                <div class="btn-content" v-show="showDuckEgg">
-                    <div class="btn-item">
-                        <van-button size="small" round block type="info" @click="userClick('L')"><van-icon name="arrow-left" /></van-button>
-                    </div>
-                    <div class="btn-item">
-                        <van-button size="small" round block type="info" @click="userClick('R')"><van-icon name="arrow" /></van-button>
-                    </div>
-                </div>
+          <div v-show="showDuckEgg" class="btn-content">
+            <div class="btn-item">
+              <van-button
+                block
+                round
+                size="small"
+                type="info"
+                @click="userClick('L')"
+              >
+                <van-icon name="arrow-left" />
+              </van-button>
             </div>
-            <!-- <img v-show="showWhiteFlag" src='../../assets/congnitiveAblitity/whiteFlag.png' alt="" style="width: 50px; height: 50px; margin-top: 20%"> -->
-            <!-- 演示使用 -->
-            <!-- <div class="steering">
-              <el-button type="primary" icon="el-icon-arrow-left" @click="userClick('L')"></el-button>
-              <el-button type="primary" @click="userClick('R')"><i class="el-icon-arrow-right el-icon--right"></i></el-button>
-            </div> -->
+            <div class="btn-item">
+              <van-button
+                block
+                round
+                size="small"
+                type="info"
+                @click="userClick('R')"
+              >
+                <van-icon name="arrow" />
+              </van-button>
+            </div>
+          </div>
         </div>
+        <!-- <img v-show="showWhiteFlag" src='../../assets/congnitiveAblitity/whiteFlag.png' alt="" style="width: 50px; height: 50px; margin-top: 20%"> -->
+        <!-- 演示使用 -->
+        <!-- <div class="steering">
+          <el-button type="primary" icon="el-icon-arrow-left" @click="userClick('L')"></el-button>
+          <el-button type="primary" @click="userClick('R')"><i class="el-icon-arrow-right el-icon--right"></i></el-button>
+        </div> -->
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
+import { preloader } from "@/utils/utils";
+import Header from "@/components/header/index.vue";
+
+export default {
+  name: "shapeIntuition2",
+  components: { Header },
+  data() {
+    return {
+      userId: "",
+      userTestResult: {},
+      imgUrl: "",
+      examImgUrl: "",
+      taskId: "", // 认知任务id
+      testFlag: false,
+      testState: false,
+      saveFlag: false, //结果保存按钮显示标志
+      subjectInfo: "", //认知任务详情
+      button0Show: true, // 控制按钮显示隐藏
+      button1Show: false, // 控制按钮显示隐藏
+      buttonName: "开始测试", // 正式测试  // 重新练习
+      testTypeCode: 0, // 0-练习测试 1-正式测试 2-重新测试
+      imgIndex: 0,
+      userTestPicList: [], //用户点击图片列表
+      showImage: true,
+      difficultList: [0], // [0,10,30,45,60,90,120,180,360]
+      testPicCount: 10, //测试数目
+      userRightClickDirection: "", //测试者应该点击的方向
+      userRightResponseCount: 0, //测试者反应正确的次数
+      showDuckEgg: false,
+      countDownTime: 6, //开始前的倒计时
+      countDownStr: "练习马上开始！",
+      countDownShow: true,
+      testTunrnCount: 0, //正式测试轮数
+      testEndFlag: false, //测试结束标志
+      testResultStrShow: false, //测试结果展示
+      testResultStr: "", //测试成绩
+      userCanClick: true, //用户标识用户单次刺激只能点击一次
+      myInterval: "",
+      timeOne: "",
+      timeTwo: "",
+      startMilliSeconds: 0, //反应时
+      userResponseRecords: [], //用户测试反应记录
+      saveFalg: true,
+      testPlanId: ""
+    };
+  },
+  // 页面初始化函数
+  created() {
+    // this.taskId = this.$route.query.taskId;
+    this.init();
+  },
+  destroyed() {
+    clearInterval(this.myInterval);
+    clearTimeout(this.timeOne);
+    clearTimeout(this.timeTwo);
+  },
+  methods: {
+    goBack() {
+      if (this.testPlanId) {
+        //来自测试计划列表
+        this.$router.push({
+          name: "testPlanClassify",
+          params: {
+            testPlanId: this.testPlanId
+          }
+        });
+      } else {
+        this.$router.push("/index/cognitionTask");
+      }
+    },
+    init() {
+      this.testPlanId = this.$route.query.testPlanId || "";
+      this.userId = JSON.parse(sessionStorage.getItem("userInfo")).id;
+      this.subjectInfo = JSON.parse(sessionStorage.getItem("subjectInfo"));
+    },
+    userClick(clickFlag) {
+      if (this.countDownShow || !this.userCanClick) {
+        return;
+      }
+      this.userCanClick = false;
+      let milliSecondsCount = new Date().getTime() - this.startMilliSeconds;
+      let userResponseStr = "Wrong";
+      clearTimeout(this.timeOne);
+
+      //用户反应正确性判断
 
-    import { preloader } from "@/utils/utils";
-    export default {
-        name: "shapeIntuition2",
-        data() {
-            return {
-                userId: "",
-                userTestResult: {},
-                imgUrl: "",
-                examImgUrl: "",
-                taskId: "", // 认知任务id
-                testFlag: false,
-                testState: false,
-                saveFlag: false, //结果保存按钮显示标志
-                subjectInfo: "", //认知任务详情
-                button0Show: true, // 控制按钮显示隐藏
-                button1Show: false, // 控制按钮显示隐藏
-                buttonName: "开始测试", // 正式测试  // 重新练习
-                testTypeCode: 0, // 0-练习测试 1-正式测试 2-重新测试
-                imgIndex: 0,
-                userTestPicList: [], //用户点击图片列表
-                showImage: true,
-                difficultList: [0], // [0,10,30,45,60,90,120,180,360]
-                testPicCount: 10, //测试数目
-                userRightClickDirection: "", //测试者应该点击的方向
-                userRightResponseCount: 0, //测试者反应正确的次数
-                showDuckEgg: false,
-                countDownTime: 6, //开始前的倒计时
-                countDownStr: "练习马上开始！",
-                countDownShow: true,
-                testTunrnCount: 0, //正式测试轮数
-                testEndFlag: false, //测试结束标志
-                testResultStrShow: false, //测试结果展示
-                testResultStr: "", //测试成绩
-                userCanClick: true, //用户标识用户单次刺激只能点击一次
-                myInterval: "",
-                timeOne: "",
-                timeTwo: "",
-                startMilliSeconds: 0, //反应时
-                userResponseRecords: [], //用户测试反应记录
-                saveFalg: true,
-                testPlanId: "",
+      if (this.userRightClickDirection == clickFlag) {
+        this.userRightResponseCount++;
+        userResponseStr = "Right";
+      }
+      //判断是否测试结束
+      if (this.imgIndex == this.userTestPicList.length) {
+        this.testEndFlag = true;
+        clearTimeout(this.timeOne);
+      }
+      //记录用户反应
+      // console.log(this.imgIndex);
+      if (this.testTypeCode == 1) {
+        this.userResponseRecords.push({
+          index: this.imgIndex,
+          rightOrWrong: userResponseStr,
+          responseTime: milliSecondsCount,
+          diff: this.userTestPicList[this.imgIndex - 1].diff
+        });
+      }
+      // console.log(this.userResponseRecords);
+      this.showDuckEgg = false;
+      this.timeTwo = setTimeout(() => {
+        this.showTargetNow();
+      }, 500);
+    },
+    startTest(testType) {
+      if (!sessionStorage.getItem("userInfo")) {
+        this.$toast("请先登录！");
+        this.$router.push("/login");
+        return;
+      }
 
-            };
-        },
-        // 页面初始化函数
-        created() {
-            // this.taskId = this.$route.query.taskId;
-            this.init();
-        },
-        destroyed() {
-            clearInterval(this.myInterval);
-            clearTimeout(this.timeOne);
-            clearTimeout(this.timeTwo);
-        },
-        methods: {
-            goBack() {
-                if(this.testPlanId) {
-                    //来自测试计划列表
-                    this.$router.push({
-                        name: "testPlanClassify",
-                        params: {
-                            testPlanId: this.testPlanId,
-                        },
-                    });
-                }else {
-                    this.$router.push("/index/cognitionTask");
-                }
+      if (testType == 0) {
+        this.testTypeCode = 0;
+      } else {
+        this.saveFalg = true;
+        this.testTypeCode = 1;
+      }
+
+      if (this.testTypeCode == 1) {
+        this.difficultList = [360, 180, 90, 60, 30, 0]; // [360,180,90,60,30,0]
+        this.imgIndex = 0;
+        this.countDownStr = "马上开始！";
+        this.countDownTime = 6;
+        this.testEndFlag = false;
+        this.showDuckEgg = false;
+        this.userTestPicList = [];
+      }
+      this.countDownShow = true;
+      this.userTestPicListCreate();
+      // 预加载图片后开始测试
+      preloader(this.userTestPicList, () => {
+        this.testFlag = true;
+        this.testState = true;
+        this.countDown();
+      });
+    },
+    showTargetNow() {
+      // 练习间隔2~4，正式测试2~12；
+      this.showDuckEgg = false;
+      if (this.testEndFlag) {
+        this.computeScore();
+      } else {
+        this.userRightClickDirection = this.userTestPicList[
+          this.imgIndex
+        ].imgDirection;
+        this.examImgUrl = this.userTestPicList[this.imgIndex].imgUrl;
+        this.showDuckEgg = true;
+        this.imgIndex++;
+        this.startMilliSeconds = new Date().getTime();
+        this.userCanClick = true;
+
+        if (this.imgIndex == this.userTestPicList.length) {
+          this.testEndFlag = true;
+        }
+        this.timeOne = setTimeout(this.ifShowNextOne, 10 * 1000, this.imgIndex);
+        // this.timeOne = setTimeout(() => {
+        //   this.userClick('NULL')
+        // },10*1000);
+      }
+    },
+    ifShowNextOne(needClickIndex) {
+      if (needClickIndex == this.imgIndex) {
+        this.userClick("NULL");
+      }
+    },
+    computeScore() {
+      if (this.testTypeCode == 0) {
+        this.testFlag = false;
+        this.testState = false;
+        //this.testTypeCode =1
+        this.countDownStr = "练习马上开始！";
+        this.userRightResponseCount = 0;
+        this.imgIndex = 0;
+        this.countDownTime = 6;
+        this.testEndFlag = false;
+        this.showDuckEgg = false;
+        this.userTestPicList = [];
+        this.button1Show = true;
+        // this.$message({
+        //     message: "测试结束！",
+        //     type: "success",
+        // });
+        this.$toast.success({
+          message: "测试结束！",
+          position: "top"
+        });
+      } else {
+        let userScore = (
+          (this.userRightResponseCount / this.userResponseRecords.length) *
+          100
+        ).toFixed(2);
+        this.testFlag = false;
+        this.testState = false;
+        this.button0Show = false;
+        this.button1Show = false;
+        //console.log(this.userResponseRecords)
+        if (this.saveFalg) {
+          this.$http.post(
+            `/cognize/SHAPE2`,
+            {
+              userId: this.userId,
+              userScore: userScore + "%",
+              userResponseRecords: this.userResponseRecords,
+              testPlanId: this.testPlanId
             },
-            init() {
-                this.testPlanId = this.$route.query.testPlanId || '';
-                this.userId = JSON.parse(sessionStorage.getItem("userInfo")).id;
-                this.subjectInfo = JSON.parse(sessionStorage.getItem('subjectInfo'))
+            response => {
+              if (response?.code == 200) {
+                // sessionStorage.setItem("resultInfo", JSON.stringify({"测试准确率":response.data.userScore}));
+                // this.$router.push(`/cognitiveTestResult?from=1&testPlanId=${this.testPlanId}`);
+                //跳转新测试结果页面
+                this.goTestResult(response.data);
+              } else {
+                this.$toast.fail(response?.msg);
+              }
             },
-            userClick(clickFlag) {
-                if (this.countDownShow || !this.userCanClick) {
-                    return;
-                }
-                this.userCanClick = false;
-                let milliSecondsCount = new Date().getTime() - this.startMilliSeconds;
-                let userResponseStr = "Wrong";
-                clearTimeout(this.timeOne);
+            err => {
+              this.$toast.fail(err.msg);
+            }
+          );
+          this.$toast.success("测试结束！");
+          this.saveFalg = false;
+        }
+      }
+    },
+    // goTestResult(id){
+    //     this.$http.get(`getRecordById?id=${id}`, {}, (res) => {
+    //         if (res.code == 2001) {
+    //             this.$toast.fail(res.msg);
+    //             return;
+    //         }
+    //         if (res && res.code == 200) {
+    //             if (JSON.parse(res.data?.userRecordEntity?.testResult).versionNo == "2.0.1") {
+    //                 //跳转新测试结果模版数据暂存本地
+    //                 // sessionStorage.setItem("testResult", res.data?.userRecordEntity?.testResult);
+    //                 // this.$store.dispatch('setTestResult',JSON.parse(res.data?.userRecordEntity?.testResult));
+    //                 this.$store.dispatch('setTestResult',res?.data);
+    //                 this.$router.push({
+    //                     name: "testResultNew",
+    //                     query: {
+    //                         id: res.data?.userRecordEntity?.id,
+    //                         title: res.data?.userRecordEntity?.name,
+    //                         testPlanId: this.testPlanId || '',
+    //                         come: 1, //1-来自认知任务列表，2-测试记录列表
+    //                     },
+    //                 });
+    //             } else {
+    //                 //跳转旧测试结果模版
+    //
+    //                 let testResult=  JSON.parse(res.data?.userRecordEntity?.testResult)[0].version;
+    //
+    //                 if( testResult == 2 ) {
+    //                     this.$router.push("/testRecordsSCl?id=" + id);
+    //                 }else {
+    //                     this.$router.push("/testResult?flag=" + res.data?.userRecordEntity?.flag + "&id=" + id);
+    //                 }
+    //             }
+    //
+    //         } else {
+    //             this.$toast.fail("获取数据失败！服务器异常");
+    //         }
+    //     });
+    // },
+    userTestPicListCreate() {
+      let imgObj = {
+        // imgUrl:'',
+        // imgDirection:'',
+        // userClickDirection:''
+      };
+      if (this.testTypeCode == 0) {
+        //随机呈现最简单的10张图片
+        let imgIndexList = this.getRandomNumber(10, 20);
+        for (let j = 0; j < this.difficultList.length; j++) {
+          for (let i = 0; i < imgIndexList.length; i++) {
+            imgObj = {};
+            if (i % 2 == 0) {
+              imgObj.imgUrl = require("../../assets/congnitiveAblitity/shapeIntuition/R_ELP_test_jitter" +
+                this.difficultList[j] +
+                "_s" +
+                imgIndexList[i] +
+                ".jpg");
+              imgObj.imgDirection = "R";
+              imgObj.userClickDirection = "";
+            } else {
+              imgObj.imgUrl = require("../../assets/congnitiveAblitity/shapeIntuition/ELP_test_jitter" +
+                this.difficultList[j] +
+                "_s" +
+                imgIndexList[i] +
+                ".jpg");
+              imgObj.imgDirection = "L";
+              imgObj.userClickDirection = "";
+            }
+            this.userTestPicList.push(imgObj);
+          }
+        }
+        this.shuffle(this.userTestPicList);
+      } else {
+        //展示所有图片
+        for (let j = 0; j < this.difficultList.length; j++) {
+          var tempList = [];
+          for (let i = 1; i < 11; i++) {
+            imgObj = {};
+            imgObj.imgUrl = require("../../assets/congnitiveAblitity/shapeIntuition/R_ELP_test_jitter" +
+              this.difficultList[j] +
+              "_s" +
+              i +
+              ".jpg");
+            imgObj.imgDirection = "R";
+            imgObj.userClickDirection = "";
+            imgObj.diff = this.difficultList[j];
+            tempList.push(imgObj);
+            imgObj = {};
+            imgObj.imgUrl = require("../../assets/congnitiveAblitity/shapeIntuition/ELP_test_jitter" +
+              this.difficultList[j] +
+              "_s" +
+              i +
+              ".jpg");
+            imgObj.imgDirection = "L";
+            imgObj.userClickDirection = "";
+            imgObj.diff = this.difficultList[j];
+            tempList.push(imgObj);
+            //console.log(tempList)
+          }
+          this.shuffle(tempList);
+          this.userTestPicList = this.userTestPicList.concat(tempList);
+          console.log(this.userTestPicList);
+          this.testPicCount = this.userTestPicList.length;
+        }
+      }
+    },
+    getRandomNumber(size, maxNumber) {
+      let numberList = [];
+      for (var i = 0; i < size; i++) {
+        numberList.push(Math.floor(Math.random() * maxNumber) + 1);
+      }
+      return numberList;
+    },
+    countDown() {
+      // 测试时间倒计时
+      this.myInterval = setInterval(() => {
+        this.countDownTime--;
+        this.countDownStr = this.countDownTime;
+        if (this.countDownTime == 0) {
+          this.countDownShow = false;
+          //显示鸭蛋
+          this.showTargetNow();
+          // 清除定时器
+          clearInterval(this.myInterval);
+          //this.countDownTime = 5;
+        }
+      }, 1000);
+    },
+    shuffle(arr) {
+      var i = arr.length,
+        t,
+        j;
+      while (i) {
+        j = Math.floor(Math.random() * i--);
+        t = arr[i];
+        arr[i] = arr[j];
+        arr[j] = t;
+      }
+    }
+  }
+};
+</script>
 
-                //用户反应正确性判断
+<style scoped>
+.explan {
+  box-sizing: border-box;
+  padding: 15px 15px 0;
+}
 
-                if (this.userRightClickDirection == clickFlag) {
-                    this.userRightResponseCount++;
-                    userResponseStr = "Right";
-                }
-                //判断是否测试结束
-                if (this.imgIndex == this.userTestPicList.length) {
-                    this.testEndFlag = true;
-                    clearTimeout(this.timeOne);
-                }
-                //记录用户反应
-                // console.log(this.imgIndex);
-                if (this.testTypeCode == 1) {
-                    this.userResponseRecords.push({
-                        index: this.imgIndex,
-                        rightOrWrong: userResponseStr,
-                        responseTime: milliSecondsCount,
-                        diff: this.userTestPicList[this.imgIndex - 1].diff,
-                    });
-                }
-                // console.log(this.userResponseRecords);
-                this.showDuckEgg = false;
-                this.timeTwo = setTimeout(() => {
-                    this.showTargetNow();
-                }, 500);
-            },
-            startTest(testType) {
-                if (!sessionStorage.getItem("userInfo")) {
-                    this.$toast("请先登录！");
-                    this.$router.push("/login");
-                    return;
-                }
+.explan h1 {
+  font-size: 16px;
+  color: #222222;
+  text-align: center;
+}
 
-                if (testType == 0) {
-                    this.testTypeCode = 0;
-                } else {
-                    this.saveFalg = true;
-                    this.testTypeCode = 1;
-                }
+.explan p {
+  font-size: 14px;
+  color: #666666;
+  line-height: 26px;
+  text-indent: 15px;
+  margin-bottom: 20px;
+}
 
-                if (this.testTypeCode == 1) {
-                    this.difficultList = [360, 180, 90, 60, 30, 0]; // [360,180,90,60,30,0]
-                    this.imgIndex = 0;
-                    this.countDownStr = "马上开始！";
-                    this.countDownTime = 6;
-                    this.testEndFlag = false;
-                    this.showDuckEgg = false;
-                    this.userTestPicList = [];
-                }
-                this.countDownShow = true;
-                this.userTestPicListCreate();
-                // 预加载图片后开始测试
-                preloader(this.userTestPicList, () => {
-                    this.testFlag = true;
-                    this.testState = true;
-                    this.countDown();
-                });
-            },
-            showTargetNow() {
-                // 练习间隔2~4，正式测试2~12；
-                this.showDuckEgg = false;
-                if (this.testEndFlag) {
-                    this.computeScore();
-                } else {
-                    this.userRightClickDirection =
-                        this.userTestPicList[this.imgIndex].imgDirection;
-                    this.examImgUrl = this.userTestPicList[this.imgIndex].imgUrl;
-                    this.showDuckEgg = true;
-                    this.imgIndex++;
-                    this.startMilliSeconds = new Date().getTime();
-                    this.userCanClick = true;
+.activeTask {
+  box-sizing: border-box;
+  padding-top: 46px;
+  background: url(../../assets/congnitiveAblitity/shapeIntuition.png) no-repeat
+    center;
+  background-size: cover;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
 
-                    if (this.imgIndex == this.userTestPicList.length) {
-                        this.testEndFlag = true;
-                    }
-                    this.timeOne = setTimeout(this.ifShowNextOne, 10 * 1000, this.imgIndex);
-                    // this.timeOne = setTimeout(() => {
-                    //   this.userClick('NULL')
-                    // },10*1000);
-                }
-            },
-            ifShowNextOne(needClickIndex) {
-                if (needClickIndex == this.imgIndex) {
-                    this.userClick("NULL");
-                }
-            },
-            computeScore() {
+.scaleName {
+  margin-top: 70px;
+  background-size: cover;
+}
 
-                if (this.testTypeCode == 0) {
-                    this.testFlag = false;
-                    this.testState = false;
-                    //this.testTypeCode =1
-                    this.countDownStr = "练习马上开始！";
-                    this.userRightResponseCount = 0;
-                    this.imgIndex = 0;
-                    this.countDownTime = 6;
-                    this.testEndFlag = false;
-                    this.showDuckEgg = false;
-                    this.userTestPicList = [];
-                    this.button1Show = true;
-                    // this.$message({
-                    //     message: "测试结束！",
-                    //     type: "success",
-                    // });
-                    this.$toast.success({
-                        message: '测试结束！',
-                        position: 'top',
-                    });
-                } else {
-                    let userScore = (
-                        (this.userRightResponseCount / this.userResponseRecords.length) *
-                        100
-                    ).toFixed(2);
-                    this.testFlag = false;
-                    this.testState = false;
-                    this.button0Show = false;
-                    this.button1Show = false;
-                    //console.log(this.userResponseRecords)
-                    if (this.saveFalg) {
-                        this.$http.post(
-                            `/cognize/SHAPE2`,
-                            {
-                                userId: this.userId,
-                                userScore: userScore + "%",
-                                userResponseRecords: this.userResponseRecords,
-                                testPlanId: this.testPlanId,
-                            },
-                            (response) => {
+.scaleButton {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  background-size: cover;
+}
 
-                                if (response?.code == 200) {
-                                    // sessionStorage.setItem("resultInfo", JSON.stringify({"测试准确率":response.data.userScore}));
-                                    // this.$router.push(`/cognitiveTestResult?from=1&testPlanId=${this.testPlanId}`);
-                                    //跳转新测试结果页面
-                                    this.goTestResult(response.data);
+.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;
+}
 
-                                } else {
-                                    this.$toast.fail(response?.msg);
-                                }
-                            },(err) => {
-                                this.$toast.fail(err.msg);
-                            });
-                        this.$toast.success('测试结束！');
-                        this.saveFalg = false;
-                    }
-                }
-            },
-            // goTestResult(id){
-            //     this.$http.get(`getRecordById?id=${id}`, {}, (res) => {
-            //         if (res.code == 2001) {
-            //             this.$toast.fail(res.msg);
-            //             return;
-            //         }
-            //         if (res && res.code == 200) {
-            //             if (JSON.parse(res.data?.userRecordEntity?.testResult).versionNo == "2.0.1") {
-            //                 //跳转新测试结果模版数据暂存本地
-            //                 // sessionStorage.setItem("testResult", res.data?.userRecordEntity?.testResult);
-            //                 // this.$store.dispatch('setTestResult',JSON.parse(res.data?.userRecordEntity?.testResult));
-            //                 this.$store.dispatch('setTestResult',res?.data);
-            //                 this.$router.push({
-            //                     name: "testResultNew",
-            //                     query: {
-            //                         id: res.data?.userRecordEntity?.id,
-            //                         title: res.data?.userRecordEntity?.name,
-            //                         testPlanId: this.testPlanId || '',
-            //                         come: 1, //1-来自认知任务列表，2-测试记录列表
-            //                     },
-            //                 });
-            //             } else {
-            //                 //跳转旧测试结果模版
-            //
-            //                 let testResult=  JSON.parse(res.data?.userRecordEntity?.testResult)[0].version;
-            //
-            //                 if( testResult == 2 ) {
-            //                     this.$router.push("/testRecordsSCl?id=" + id);
-            //                 }else {
-            //                     this.$router.push("/testResult?flag=" + res.data?.userRecordEntity?.flag + "&id=" + id);
-            //                 }
-            //             }
-            //
-            //         } else {
-            //             this.$toast.fail("获取数据失败！服务器异常");
-            //         }
-            //     });
-            // },
-            userTestPicListCreate() {
-                let imgObj = {
-                    // imgUrl:'',
-                    // imgDirection:'',
-                    // userClickDirection:''
-                };
-                if (this.testTypeCode == 0) {
-                    //随机呈现最简单的10张图片
-                    let imgIndexList = this.getRandomNumber(10, 20);
-                    for (let j = 0; j < this.difficultList.length; j++) {
-                        for (let i = 0; i < imgIndexList.length; i++) {
-                            imgObj = {};
-                            if (i % 2 == 0) {
-                                imgObj.imgUrl = require("../../assets/congnitiveAblitity/shapeIntuition/R_ELP_test_jitter" +
-                                    this.difficultList[j] +
-                                    "_s" +
-                                    imgIndexList[i] +
-                                    ".jpg");
-                                imgObj.imgDirection = "R";
-                                imgObj.userClickDirection = "";
-                            } else {
-                                imgObj.imgUrl = require("../../assets/congnitiveAblitity/shapeIntuition/ELP_test_jitter" +
-                                    this.difficultList[j] +
-                                    "_s" +
-                                    imgIndexList[i] +
-                                    ".jpg");
-                                imgObj.imgDirection = "L";
-                                imgObj.userClickDirection = "";
-                            }
-                            this.userTestPicList.push(imgObj);
-                        }
-                    }
-                    this.shuffle(this.userTestPicList);
-                } else {
-                    //展示所有图片
-                    for (let j = 0; j < this.difficultList.length; j++) {
-                        var tempList = [];
-                        for (let i = 1; i < 11; i++) {
-                            imgObj = {};
-                            imgObj.imgUrl = require("../../assets/congnitiveAblitity/shapeIntuition/R_ELP_test_jitter" +
-                                this.difficultList[j] +
-                                "_s" +
-                                i +
-                                ".jpg");
-                            imgObj.imgDirection = "R";
-                            imgObj.userClickDirection = "";
-                            imgObj.diff = this.difficultList[j];
-                            tempList.push(imgObj);
-                            imgObj = {};
-                            imgObj.imgUrl = require("../../assets/congnitiveAblitity/shapeIntuition/ELP_test_jitter" +
-                                this.difficultList[j] +
-                                "_s" +
-                                i +
-                                ".jpg");
-                            imgObj.imgDirection = "L";
-                            imgObj.userClickDirection = "";
-                            imgObj.diff = this.difficultList[j];
-                            tempList.push(imgObj);
-                            //console.log(tempList)
-                        }
-                        this.shuffle(tempList);
-                        this.userTestPicList = this.userTestPicList.concat(tempList);
-                        console.log(this.userTestPicList);
-                        this.testPicCount = this.userTestPicList.length;
-                    }
-                }
-            },
-            getRandomNumber(size, maxNumber) {
-                let numberList = [];
-                for (var i = 0; i < size; i++) {
-                    numberList.push(Math.floor(Math.random() * maxNumber) + 1);
-                }
-                return numberList;
-            },
-            countDown() {
-                // 测试时间倒计时
-                this.myInterval = setInterval(() => {
-                    this.countDownTime--;
-                    this.countDownStr = this.countDownTime;
-                    if (this.countDownTime == 0) {
-                        this.countDownShow = false;
-                        //显示鸭蛋
-                        this.showTargetNow();
-                        // 清除定时器
-                        clearInterval(this.myInterval);
-                        //this.countDownTime = 5;
-                    }
-                }, 1000);
-            },
-            shuffle(arr) {
-                var i = arr.length,
-                    t,
-                    j;
-                while (i) {
-                    j = Math.floor(Math.random() * i--);
-                    t = arr[i];
-                    arr[i] = arr[j];
-                    arr[j] = t;
-                }
-            },
-        },
-    }
-</script>
+.steering .right {
+  width: 60px;
+  height: 60px;
+  background: url(../../assets/right.png) no-repeat center;
+  margin-left: 15px;
+}
 
-<style scoped>
-    .explan {
-        box-sizing: border-box;
-        padding: 15px 15px 0;
-    }
-    .explan h1 {
-        font-size: 16px;
-        color: #222222;
-        text-align: center;
-    }
-    .explan p {
-        font-size: 14px;
-        color: #666666;
-        line-height: 26px;
-        text-indent: 15px;
-        margin-bottom: 20px;
-    }
-    .activeTask {
-        box-sizing: border-box;
-        padding-top: 46px;
-        background: url(../../assets/congnitiveAblitity/shapeIntuition.png) no-repeat center;
-        background-size: cover;
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-    }
+.progress-content {
+  position: absolute;
+  width: 100%;
+  height: 20px;
+  left: 0;
+  top: 60px;
+  box-sizing: border-box;
+  padding: 4px 10px;
+}
 
-    .scaleName {
-        margin-top: 70px;
-        background-size: cover;
-    }
+.timingBox {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: black;
+  font-size: 18px;
+  text-align: center;
+  line-height: 50px;
+  margin: 0 auto;
+  z-index: 10;
+}
 
-    .scaleButton {
-        margin-top: 20px;
-        margin-bottom: 20px;
-        background-size: cover;
-    }
+.btn-content {
+  position: absolute;
+  width: 100%;
+  left: 50%;
+  bottom: 10%;
+  transform: translate(-50%, 0);
+  text-align: center;
+  z-index: 10;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 5px;
+}
 
-    .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;
-    }
-    .progress-content {
-        position: absolute;
-        width: 100%;
-        height: 20px;
-        left: 0;
-        top: 60px;
-        box-sizing: border-box;
-        padding: 4px 10px;
-    }
-    .timingBox {
-        position:absolute;
-        top:50%;
-        left:50%;
-        transform:translate(-50%,-50%);
-        color:black;
-        font-size:18px;
-        text-align:center;
-        line-height:50px;
-        margin:0 auto;
-        z-index: 10;
-    }
-    .btn-content {
-        position: absolute;
-        width: 100%;
-        left: 50%;
-        bottom: 10%;
-        transform:translate(-50%,0);
-        text-align: center;
-        z-index: 10;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-around;
-        align-items: center;
-        box-sizing: border-box;
-        padding: 0 5px;
-    }
-    .btn-content .btn-item {
-        width: 30%;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-around;
-    }
-    .btn-content .btn-item /deep/.van-button{
-        margin: 35px 0;
-    }
+.btn-content .btn-item {
+  width: 30%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
 
-    .imgBox {
-        font-size: 50px;
-        color: black;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
+.btn-content .btn-item /deep/ .van-button {
+  margin: 35px 0;
+}
 
-    .shapeImg {
-        width: 90%;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
+.imgBox {
+  font-size: 50px;
+  color: black;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 
-    .addImg {
-        width: 71px;
-        width: 71px;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
+.shapeImg {
+  width: 90%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 
+.addImg {
+  width: 71px;
+  width: 71px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 </style>

src/views/cognitiveTask/shapeIntuition_children.vue

@@ -67,8 +67,8 @@
 
     <van-nav-bar
       :title="subjectInfo.name"
-      left-text="返回"
       left-arrow
+      left-text="返回"
       @click-left="goBack"
     />
     <div v-if="!testResultStr" class="explan">
@@ -81,21 +81,21 @@
       <div class="btnArea">
         <van-button
           v-if="button0Show"
-          round
           block
-          type="info"
+          round
+          type="primary"
           @click="startTest(0)"
-          >练习测试</van-button
-        >
+          >练习测试
+        </van-button>
         <van-button
           v-if="button1Show"
-          round
           block
+          round
+          style="margin-top: 15px"
           type="info"
           @click="startTest(1)"
-          style="margin-top: 15px"
-          >正式测试</van-button
-        >
+          >正式测试
+        </van-button>
       </div>
     </div>
 
@@ -129,8 +129,8 @@
       <div v-if="testTypeCode == 1" class="progress-content">
         <van-progress
           :percentage="(imgIndex * 100) / 60"
-          pivot-text="任务进度"
           color="#f2826a"
+          pivot-text="任务进度"
         />
       </div>
 
@@ -144,33 +144,35 @@
         <img v-show="showDuckEgg" :src="examImgUrl" alt="" class="shapeImg" />
       </div>
 
-      <div class="btn-content" v-show="showDuckEgg">
+      <div v-show="showDuckEgg" class="btn-content">
         <div class="btn-item">
           <van-button
-            size="small"
-            round
             block
+            round
+            size="small"
             type="info"
             @click="userClick('L')"
-            ><van-icon name="arrow-left"
-          /></van-button>
+          >
+            <van-icon name="arrow-left" />
+          </van-button>
         </div>
         <div class="btn-item">
           <van-button
-            size="small"
-            round
             block
+            round
+            size="small"
             type="info"
             @click="userClick('R')"
-            ><van-icon name="arrow"
-          /></van-button>
+          >
+            <van-icon name="arrow" />
+          </van-button>
         </div>
       </div>
 
-      <div class="steering" v-show="showStop">
-        <van-button size="small" round block type="info" @click.stop="userStop"
-          >结束游戏</van-button
-        >
+      <div v-show="showStop" class="steering">
+        <van-button block round size="small" type="info" @click.stop="userStop"
+          >结束游戏
+        </van-button>
       </div>
     </div>
   </div>
@@ -221,7 +223,7 @@ export default {
       showStop: false,
       practiceCount: 10, //练习测试试次数
       perDiffTrailCount: 5, //每个难度试次数
-      testPlanId: "",
+      testPlanId: ""
     };
   },
   // 页面初始化函数
@@ -242,8 +244,8 @@ export default {
         this.$router.push({
           name: "testPlanClassify",
           params: {
-            testPlanId: this.testPlanId,
-          },
+            testPlanId: this.testPlanId
+          }
         });
       } else {
         this.$router.push("/index/cognitionTask");
@@ -273,7 +275,7 @@ export default {
           index: this.imgIndex,
           rightOrWrong: userResponseStr,
           responseTime: milliSecondsCount,
-          diff: this.userTestPicList[this.imgIndex - 1].diff,
+          diff: this.userTestPicList[this.imgIndex - 1].diff
         });
       }
       this.showDuckEgg = false;
@@ -322,8 +324,9 @@ export default {
       if (this.testEndFlag) {
         this.computeScore();
       } else {
-        this.userRightClickDirection =
-          this.userTestPicList[this.imgIndex].imgDirection;
+        this.userRightClickDirection = this.userTestPicList[
+          this.imgIndex
+        ].imgDirection;
         this.examImgUrl = this.userTestPicList[this.imgIndex].imgUrl;
         this.showDuckEgg = true;
         this.imgIndex++;
@@ -360,7 +363,7 @@ export default {
         // });
         this.$toast.success({
           message: "测试结束！",
-          position: "top",
+          position: "top"
         });
       } else {
         let userScore = (
@@ -379,9 +382,9 @@ export default {
               userId: this.userId,
               userScore: userScore + "%",
               userResponseRecords: this.userResponseRecords,
-              testPlanId: this.testPlanId,
+              testPlanId: this.testPlanId
             },
-            (response) => {
+            response => {
               if (response?.code == 200) {
                 //跳转新测试结果页面
                 this.goTestResult(response.data);
@@ -518,7 +521,7 @@ export default {
           title: "提示",
           message: "测试尚未完成，确定要提前结束?",
           confirmButtonText: "确定",
-          cancelButtonText: "取消",
+          cancelButtonText: "取消"
         })
         .then(() => {
           clearInterval(this.myInterval);
@@ -527,8 +530,8 @@ export default {
           this.computeScore();
         })
         .catch(() => {});
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -537,11 +540,13 @@ export default {
   box-sizing: border-box;
   padding: 15px 15px 0;
 }
+
 .explan h1 {
   font-size: 16px;
   color: #222222;
   text-align: center;
 }
+
 .explan p {
   font-size: 14px;
   color: #666666;
@@ -579,6 +584,7 @@ export default {
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
 .progress-content {
   position: absolute;
   width: 100%;
@@ -601,6 +607,7 @@ export default {
   margin: 0 auto;
   z-index: 10;
 }
+
 .btn-content {
   position: absolute;
   width: 100%;
@@ -616,13 +623,15 @@ export default {
   box-sizing: border-box;
   padding: 0 5px;
 }
+
 .btn-content .btn-item {
   width: 30%;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
 }
-.btn-content .btn-item /deep/.van-button {
+
+.btn-content .btn-item /deep/ .van-button {
   margin: 35px 0;
 }
-</style>
+</style>

src/views/cognitiveTask/shapeIntuition_random.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <Header/>
+    <Header />
     <div class="main-container">
       <!--    <div class="desc_wrap" v-if="!testResultStr">-->
       <!--      <div-->
@@ -68,11 +68,7 @@
       <!--    </div>-->
       <!-- LOGO  -->
 
-      <van-nav-bar
-        :title="subjectInfo.name"
-        left-arrow
-        @click-left="goBack"
-      />
+      <van-nav-bar :title="subjectInfo.name" left-arrow @click-left="goBack" />
       <div class="main-outline">
         <div v-if="!testResultStr" class="explan">
           <div class="main-text-div">
@@ -81,20 +77,20 @@
           <div class="btnArea">
             <van-button
               v-if="button0Show"
-              round
               block
-              type="info"
+              round
+              type="primary"
               @click="startTest(0)"
             >
               练习测试
             </van-button>
             <van-button
               v-if="button1Show"
-              round
               block
+              round
+              style="margin-top: 15px"
               type="info"
               @click="startTest(1)"
-              style="margin-top: 15px"
             >
               正式测试
             </van-button>
@@ -107,7 +103,10 @@
         <!--      </p>-->
         <!--    </div>-->
 
-        <div v-if="testFlag" :class="{ testMainDiv: !testState, activeTask: testState }">
+        <div
+          v-if="testFlag"
+          :class="{ testMainDiv: !testState, activeTask: testState }"
+        >
           <!--      <div class="taskHead">-->
           <!--        <div class="scale" @click.stop="screen">-->
           <!--          <img src="../../assets/small-big.png" alt="" />-->
@@ -125,8 +124,8 @@
           <div v-if="testTypeCode == 1" class="progress-content">
             <van-progress
               :percentage="(imgIndex * 100) / 120"
-              pivot-text="任务进度"
               color="#f2826a"
+              pivot-text="任务进度"
             />
           </div>
 
@@ -135,29 +134,34 @@
             <!--        <img v-show="showDuckEgg" :src="examImgUrl" alt="" class="shapeImg" />-->
 
             <p v-show="countDownShow" class="timingBox">{{ countDownStr }}</p>
-            <img v-show="showDuckEgg" :src="examImgUrl" alt="" class="shapeImg"/>
+            <img
+              v-show="showDuckEgg"
+              :src="examImgUrl"
+              alt=""
+              class="shapeImg"
+            />
           </div>
-          <div class="btn-content" v-show="showDuckEgg">
+          <div v-show="showDuckEgg" class="btn-content">
             <div class="btn-item">
               <van-button
-                size="small"
-                round
                 block
+                round
+                size="small"
                 type="info"
                 @click="userClick('L')"
               >
-                <van-icon name="arrow-left"/>
+                <van-icon name="arrow-left" />
               </van-button>
             </div>
             <div class="btn-item">
               <van-button
-                size="small"
-                round
                 block
+                round
+                size="small"
                 type="info"
                 @click="userClick('R')"
               >
-                <van-icon name="arrow"/>
+                <van-icon name="arrow" />
               </van-button>
             </div>
           </div>
@@ -169,9 +173,9 @@
 <script>
 // import cognitiveAbilityTaskList from "@/assets/data/cognitiveAbilityData.js";
 // import { oSessionStorage } from "../../utils/utils";
-import { preloader } from "@/utils/utils"
+import { preloader } from "@/utils/utils";
 // import screenfull from "screenfull";
-import Header from "@/components/header/index.vue"
+import Header from "@/components/header/index.vue";
 
 export default {
   components: { Header },
@@ -193,7 +197,7 @@ export default {
       imgIndex: 0,
       userTestPicList: [], //用户点击图片列表
       showImage: true,
-      difficultList: [ 0 ], // [0,10,30,45,60,90,120,180,360]
+      difficultList: [0], // [0,10,30,45,60,90,120,180,360]
       testPicCount: 10, //测试数目
       userRightClickDirection: "", //测试者应该点击的方向
       userRightResponseCount: 0, //测试者反应正确的次数
@@ -213,20 +217,20 @@ export default {
       userResponseRecords: [], //用户测试反应记录
       saveFalg: true,
       testPlanId: ""
-    }
+    };
   },
   // 页面初始化函数
   created() {
     // this.taskId = this.$route.query.taskId;
     // this.init(this.taskId);
-    this.testPlanId = this.$route.query.testPlanId || ""
-    this.userId = JSON.parse(sessionStorage.getItem("userInfo")).id
-    this.subjectInfo = JSON.parse(sessionStorage.getItem("subjectInfo"))
+    this.testPlanId = this.$route.query.testPlanId || "";
+    this.userId = JSON.parse(sessionStorage.getItem("userInfo")).id;
+    this.subjectInfo = JSON.parse(sessionStorage.getItem("subjectInfo"));
   },
   destroyed() {
-    clearInterval(this.myInterval)
-    clearTimeout(this.timeOne)
-    clearTimeout(this.timeTwo)
+    clearInterval(this.myInterval);
+    clearTimeout(this.timeOne);
+    clearTimeout(this.timeTwo);
   },
   methods: {
     // init(taskId) {
@@ -235,21 +239,21 @@ export default {
     // },
     userClick(clickFlag) {
       if (this.countDownShow || !this.userCanClick) {
-        return
+        return;
       }
-      this.userCanClick = false
-      let milliSecondsCount = new Date().getTime() - this.startMilliSeconds
-      let userResponseStr = "Wrong"
-      clearTimeout(this.timeOne)
+      this.userCanClick = false;
+      let milliSecondsCount = new Date().getTime() - this.startMilliSeconds;
+      let userResponseStr = "Wrong";
+      clearTimeout(this.timeOne);
 
       //用户反应正确性判断
       if (this.userRightClickDirection == clickFlag) {
-        this.userRightResponseCount++
-        userResponseStr = "Right"
+        this.userRightResponseCount++;
+        userResponseStr = "Right";
       }
       //判断是否测试结束
       if (this.imgIndex == this.userTestPicList.length) {
-        this.testEndFlag = true
+        this.testEndFlag = true;
       }
       //记录用户反应
       if (this.testTypeCode == 1) {
@@ -258,89 +262,90 @@ export default {
           rightOrWrong: userResponseStr,
           responseTime: milliSecondsCount,
           diff: this.userTestPicList[this.imgIndex - 1].diff
-        })
+        });
       }
-      this.showDuckEgg = false
+      this.showDuckEgg = false;
       this.timeTwo = setTimeout(() => {
-        this.showTargetNow()
-      }, 500)
+        this.showTargetNow();
+      }, 500);
     },
     format(percentage) {
-      return percentage === 100 ? "测试已完成" : "任务进度"
+      return percentage === 100 ? "测试已完成" : "任务进度";
     },
     // screen() {
     //   screenfull.toggle();
     // },
     startTest(testType) {
       if (!sessionStorage.getItem("userInfo")) {
-        this.$toast("请先登录！")
-        this.$router.push("/login")
-        return
+        this.$toast("请先登录！");
+        this.$router.push("/login");
+        return;
       }
 
       if (testType == 0) {
-        this.testTypeCode = 0
+        this.testTypeCode = 0;
       } else {
-        this.saveFalg = true
-        this.testTypeCode = 1
+        this.saveFalg = true;
+        this.testTypeCode = 1;
       }
       // this.userId = sessionStorage.getItem("b80bb7740288fda1f201890375a60c8f");
       if (this.testTypeCode == 1) {
-        this.difficultList = [ 360, 180, 90, 60, 30, 0 ] // [360,180,90,60,30,0]
-        this.imgIndex = 0
-        this.countDownStr = "马上开始！"
-        this.countDownTime = 6
-        this.testEndFlag = false
-        this.showDuckEgg = false
-        this.userTestPicList = []
+        this.difficultList = [360, 180, 90, 60, 30, 0]; // [360,180,90,60,30,0]
+        this.imgIndex = 0;
+        this.countDownStr = "马上开始！";
+        this.countDownTime = 6;
+        this.testEndFlag = false;
+        this.showDuckEgg = false;
+        this.userTestPicList = [];
       }
-      this.countDownShow = true
-      this.userTestPicListCreate()
+      this.countDownShow = true;
+      this.userTestPicListCreate();
       // 预加载图片后开始测试
       preloader(this.userTestPicList, () => {
-        this.testFlag = true
-        this.testState = true
-        this.countDown()
-      })
+        this.testFlag = true;
+        this.testState = true;
+        this.countDown();
+      });
     },
     showTargetNow() {
       // 练习间隔2~4，正式测试2~12；
-      this.showDuckEgg = false
+      this.showDuckEgg = false;
       if (this.testEndFlag) {
-        this.computeScore()
+        this.computeScore();
       } else {
-        this.userRightClickDirection = this.userTestPicList[this.imgIndex].imgDirection
-        this.examImgUrl = this.userTestPicList[this.imgIndex].imgUrl
-        this.showDuckEgg = true
-        this.imgIndex++
-        this.startMilliSeconds = new Date().getTime()
-        this.userCanClick = true
+        this.userRightClickDirection = this.userTestPicList[
+          this.imgIndex
+        ].imgDirection;
+        this.examImgUrl = this.userTestPicList[this.imgIndex].imgUrl;
+        this.showDuckEgg = true;
+        this.imgIndex++;
+        this.startMilliSeconds = new Date().getTime();
+        this.userCanClick = true;
 
         if (this.imgIndex == this.userTestPicList.length) {
-          this.testEndFlag = true
+          this.testEndFlag = true;
         }
-        this.timeOne = setTimeout(this.ifShowNextOne, 10 * 1000, this.imgIndex)
+        this.timeOne = setTimeout(this.ifShowNextOne, 10 * 1000, this.imgIndex);
       }
     },
     ifShowNextOne(needClickIndex) {
       if (needClickIndex == this.imgIndex) {
-        this.userClick("NULL")
+        this.userClick("NULL");
       }
     },
     computeScore() {
-
       if (this.testTypeCode == 0) {
-        this.testFlag = false
-        this.testState = false
+        this.testFlag = false;
+        this.testState = false;
         //this.testTypeCode =1
-        this.countDownStr = "练习马上开始！"
-        this.userRightResponseCount = 0
-        this.imgIndex = 0
-        this.countDownTime = 6
-        this.testEndFlag = false
-        this.showDuckEgg = false
-        this.userTestPicList = []
-        this.button1Show = true
+        this.countDownStr = "练习马上开始！";
+        this.userRightResponseCount = 0;
+        this.imgIndex = 0;
+        this.countDownTime = 6;
+        this.testEndFlag = false;
+        this.showDuckEgg = false;
+        this.userTestPicList = [];
+        this.button1Show = true;
         // this.$message({
         //   message: "测试结束！",
         //   type: "success",
@@ -349,16 +354,16 @@ export default {
         this.$toast.success({
           message: "测试结束！",
           position: "top"
-        })
+        });
       } else {
         let userScore = (
           (this.userRightResponseCount / this.userResponseRecords.length) *
           100
-        ).toFixed(2)
-        this.testFlag = false
-        this.testState = false
-        this.button0Show = false
-        this.button1Show = false
+        ).toFixed(2);
+        this.testFlag = false;
+        this.testState = false;
+        this.button0Show = false;
+        this.button1Show = false;
         //console.log(this.userResponseRecords)
         if (this.saveFalg) {
           this.$http.post(
@@ -369,18 +374,17 @@ export default {
               userResponseRecords: this.userResponseRecords,
               testPlanId: this.$route.query.testPlanId || ""
             },
-            (response) => {
-
+            response => {
               if (response?.code == 200) {
                 //跳转新测试结果页面
-                this.goTestResult(response.data)
+                this.goTestResult(response.data);
               } else {
-                this.$toast.fail(response?.msg)
+                this.$toast.fail(response?.msg);
               }
             }
-          )
-          this.$toast.success("测试结束")
-          this.saveFalg = false
+          );
+          this.$toast.success("测试结束");
+          this.saveFalg = false;
         }
       }
     },
@@ -389,104 +393,104 @@ export default {
         // imgUrl:'',
         // imgDirection:'',
         // userClickDirection:''
-      }
+      };
       if (this.testTypeCode == 0) {
         //随机呈现最简单的10张图片
-        let imgIndexList = this.getRandomNumber(10, 20)
+        let imgIndexList = this.getRandomNumber(10, 20);
         for (let j = 0; j < this.difficultList.length; j++) {
           for (let i = 0; i < imgIndexList.length; i++) {
-            imgObj = {}
+            imgObj = {};
             if (i % 2 == 0) {
               imgObj.imgUrl = require("../../assets/congnitiveAblitity/shapeIntuition/R_ELP_test_jitter" +
                 this.difficultList[j] +
                 "_s" +
                 imgIndexList[i] +
-                ".jpg")
-              imgObj.imgDirection = "R"
-              imgObj.userClickDirection = ""
+                ".jpg");
+              imgObj.imgDirection = "R";
+              imgObj.userClickDirection = "";
             } else {
               imgObj.imgUrl = require("../../assets/congnitiveAblitity/shapeIntuition/ELP_test_jitter" +
                 this.difficultList[j] +
                 "_s" +
                 imgIndexList[i] +
-                ".jpg")
-              imgObj.imgDirection = "L"
-              imgObj.userClickDirection = ""
+                ".jpg");
+              imgObj.imgDirection = "L";
+              imgObj.userClickDirection = "";
             }
-            this.userTestPicList.push(imgObj)
+            this.userTestPicList.push(imgObj);
           }
         }
-        this.shuffle(this.userTestPicList)
+        this.shuffle(this.userTestPicList);
       } else {
         //展示所有图片
         for (let j = 0; j < this.difficultList.length; j++) {
-          var tempList = []
+          var tempList = [];
           for (let i = 1; i < 11; i++) {
-            imgObj = {}
+            imgObj = {};
             imgObj.imgUrl = require("../../assets/congnitiveAblitity/shapeIntuition/R_ELP_test_jitter" +
               this.difficultList[j] +
               "_s" +
               i +
-              ".jpg")
-            imgObj.imgDirection = "R"
-            imgObj.userClickDirection = ""
-            imgObj.diff = this.difficultList[j]
-            tempList.push(imgObj)
-            imgObj = {}
+              ".jpg");
+            imgObj.imgDirection = "R";
+            imgObj.userClickDirection = "";
+            imgObj.diff = this.difficultList[j];
+            tempList.push(imgObj);
+            imgObj = {};
             imgObj.imgUrl = require("../../assets/congnitiveAblitity/shapeIntuition/ELP_test_jitter" +
               this.difficultList[j] +
               "_s" +
               i +
-              ".jpg")
-            imgObj.imgDirection = "L"
-            imgObj.userClickDirection = ""
-            imgObj.diff = this.difficultList[j]
-            tempList.push(imgObj)
+              ".jpg");
+            imgObj.imgDirection = "L";
+            imgObj.userClickDirection = "";
+            imgObj.diff = this.difficultList[j];
+            tempList.push(imgObj);
             //console.log(tempList)
           }
           //this.shuffle(tempList);
-          this.userTestPicList = this.userTestPicList.concat(tempList)
-          this.testPicCount = this.userTestPicList.length
+          this.userTestPicList = this.userTestPicList.concat(tempList);
+          this.testPicCount = this.userTestPicList.length;
         }
-        this.shuffle(this.userTestPicList)
-        console.log(this.userTestPicList)
+        this.shuffle(this.userTestPicList);
+        console.log(this.userTestPicList);
       }
     },
     getRandomNumber(size, maxNumber) {
-      let numberList = []
+      let numberList = [];
       for (var i = 0; i < size; i++) {
-        numberList.push(Math.floor(Math.random() * maxNumber) + 1)
+        numberList.push(Math.floor(Math.random() * maxNumber) + 1);
       }
-      return numberList
+      return numberList;
     },
     countDown() {
       // 测试时间倒计时
       this.myInterval = setInterval(() => {
-        this.countDownTime--
-        this.countDownStr = this.countDownTime
+        this.countDownTime--;
+        this.countDownStr = this.countDownTime;
         if (this.countDownTime == 0) {
-          this.countDownShow = false
+          this.countDownShow = false;
           //显示鸭蛋
-          this.showTargetNow()
+          this.showTargetNow();
           // 清除定时器
-          clearInterval(this.myInterval)
+          clearInterval(this.myInterval);
           //this.countDownTime = 5;
         }
-      }, 1000)
+      }, 1000);
     },
     shuffle(arr) {
       var i = arr.length,
         t,
-        j
+        j;
       while (i) {
-        j = Math.floor(Math.random() * i--)
-        t = arr[i]
-        arr[i] = arr[j]
-        arr[j] = t
+        j = Math.floor(Math.random() * i--);
+        t = arr[i];
+        arr[i] = arr[j];
+        arr[j] = t;
       }
     }
   }
-}
+};
 </script>
 <style lang="scss" scoped>
 .explan {
@@ -525,7 +529,8 @@ export default {
 }
 
 .activeTask {
-  background: url(../../assets/congnitiveAblitity/shapeIntuition.png) no-repeat center;
+  background: url(../../assets/congnitiveAblitity/shapeIntuition.png) no-repeat
+    center;
   background-size: cover;
   position: fixed;
   top: 0;

src/views/cognitiveTask/spatialOrientationAbilityNew/index.vue

@@ -126,7 +126,7 @@
             block
             class="bottom-btn"
             round
-            type="info"
+            type="primary"
             @click="startTest(0)"
           >
             练习测试

src/views/cognitiveTask/speedCognitive/formal.vue

@@ -24,7 +24,7 @@
               block
               class="start"
               round
-              type="info"
+              type="primary"
               @click="startTestFn()"
             >
               {{ practiceFlag ? "练习测试" : "正式测试" }}

src/views/cognitiveTask/taskDetail.vue

@@ -34,7 +34,7 @@
             class="bottom-btn"
             round
             size="large"
-            type="info"
+            type="primary"
             @click="goTest"
           >
             进入测试

src/views/index.vue

@@ -2,24 +2,29 @@
   <div>
     <transition name="fade">
       <keep-alive>
-        <router-view v-if="$route.meta.keepAlive" :key="$route.fullPath"/>
+        <router-view v-if="$route.meta.keepAlive" :key="$route.fullPath" />
       </keep-alive>
     </transition>
     <transition name="fade">
-      <router-view v-if="!$route.meta.keepAlive" :key="$route.fullPath"/>
+      <router-view v-if="!$route.meta.keepAlive" :key="$route.fullPath" />
     </transition>
 
-    <van-tabbar class="tab-bar" v-model="active" @change="onChange">
+    <van-tabbar v-model="active" class="tab-bar" @change="onChange">
       <van-tabbar-item
         v-for="(item, index) in tabItems"
         :key="index"
         :badge="badges[index]"
-        :class="{'badge-show': index === 2}"
+        :class="{ 'badge-show': index === 2 }"
       >
         <span>{{ item }}</span>
         <template #icon="props">
           <img
-            :src="props.active ? require('@/assets/image/icon-' + index + '-active.png') : require('@/assets/image/icon-' + index + '.png')"/>
+            :src="
+              props.active
+                ? require('@/assets/image/icon-' + index + '-active.png')
+                : require('@/assets/image/icon-' + index + '.png')
+            "
+          />
         </template>
       </van-tabbar-item>
     </van-tabbar>
@@ -27,24 +32,28 @@
     <!--提交个人手机号码弹窗-->
     <van-popup
       v-model="show"
-      round
       :close-on-click-overlay="false"
       :style="{
         width: '95%',
         padding: '20px 10px',
-        'box-sizing': 'border-box',
+        'box-sizing': 'border-box'
       }"
+      round
     >
       <div>
         <van-field
           v-model="userPhone"
+          label="手机号:"
           placeholder="请输入手机号码"
           type="tel"
-          label="手机号:"
         />
         <div class="popup-content">
-          <van-button round block size="small" type="default" @click="notAsk">不再提示</van-button>
-          <van-button round block size="small" type="info" @click="submit">提交</van-button>
+          <van-button block round size="small" type="default" @click="notAsk"
+            >不再提示
+          </van-button>
+          <van-button block round size="small" type="info" @click="submit"
+            >提交
+          </van-button>
         </div>
       </div>
       <div class="popup-tip">
@@ -55,7 +64,7 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex"
+import { mapGetters } from "vuex";
 
 export default {
   data() {
@@ -66,9 +75,9 @@ export default {
       userPhone: "",
       pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
       systemVersion: process.env.VUE_APP_VERSION,
-      tabItems: [ '量表测试', '认知任务', '测试计划', '个人中心' ],
-      badges: [ null, null, null, null ]
-    }
+      tabItems: ["量表测试", "认知任务", "测试计划", "个人中心"],
+      badges: [null, null, null, null]
+    };
   },
   computed: {
     ...mapGetters({
@@ -76,53 +85,55 @@ export default {
     })
   },
   created() {
-    let that = this
+    let that = this;
     // 监听浏览器前进后退操作
-    window.addEventListener("popstate", (e) => {
-        let routerForm = that.$router.history.current.name
+    window.addEventListener(
+      "popstate",
+      e => {
+        let routerForm = that.$router.history.current.name;
         switch (routerForm) {
           case "ScaleTest":
-            that.active = 0
-            break
+            that.active = 0;
+            break;
           case "CognitionTask":
-            that.active = 1
-            break
+            that.active = 1;
+            break;
           case "TestPlan":
-            that.active = 2
-            break
+            that.active = 2;
+            break;
           case "UserCenter":
-            that.active = 3
-            break
+            that.active = 3;
+            break;
           default:
             that.$router.push({
               name: "ScaleTest"
-            })
-            that.active = 0
+            });
+            that.active = 0;
         }
       },
       false
-    )
+    );
 
     // 监听浏览器刷新操作
-    let routerForm = this.$router.history.current.name
+    let routerForm = this.$router.history.current.name;
     switch (routerForm) {
       case "ScaleTest":
-        this.active = 0
-        break
+        this.active = 0;
+        break;
       case "CognitionTask":
-        this.active = 1
-        break
+        this.active = 1;
+        break;
       case "TestPlan":
-        this.active = 2
-        break
+        this.active = 2;
+        break;
       case "UserCenter":
-        this.active = 3
-        break
+        this.active = 3;
+        break;
       default:
         this.$router.push({
           name: "ScaleTest"
-        })
-        this.active = 0
+        });
+        this.active = 0;
     }
     //如果用户状态为4，直接返回登陆页面，未保存修改信息不允许进入其它操作页面
     // if (this.getUserInfo && this.getUserInfo.userStatus == '4') {
@@ -131,24 +142,33 @@ export default {
     //   this.$store.dispatch('setUserInfo', {})
     //   this.$router.replace({ path: '/login' })
     // }
-    this.userId = sessionStorage.getItem("userId")
-    this.show = this.getUserInfo.modelPhone == "0" && this.systemVersion != "lan"
-    this.getTestPlanNum()
+    this.userId = sessionStorage.getItem("userId");
+    this.show =
+      this.getUserInfo.modelPhone == "0" && this.systemVersion != "lan";
+    this.getTestPlanNum();
   },
   methods: {
     onChange(i) {
-      let routerList = [ "ScaleTest", "CognitionTask", "TestPlan", "UserCenter" ]
-      let routeName = routerList[i]
-      this.$router.push({
-        name: routeName
-      }, () => {
-      }, () => {
-      })
+      let routerList = ["ScaleTest", "CognitionTask", "TestPlan", "UserCenter"];
+      let routeName = routerList[i];
+      this.$router.push(
+        {
+          name: routeName
+        },
+        () => {},
+        () => {}
+      );
     },
     async getTestPlanNum() {
       // 获取测试计划角标
-      await this.$store.dispatch("getTestPlanInfo", this.userId)
-      this.$set(this.badges, 2, this.$store.getters.getTestPlanNum == 0 ? null : this.$store.state.home.testPlanNum)
+      await this.$store.dispatch("getTestPlanInfo", this.userId);
+      this.$set(
+        this.badges,
+        2,
+        this.$store.getters.getTestPlanNum == 0
+          ? null
+          : this.$store.state.home.testPlanNum
+      );
     },
     async notAsk() {
       // 不再提示
@@ -161,41 +181,41 @@ export default {
         birthday: this.getUserInfo.birthday,
         profession: this.getUserInfo.profession,
         roleType: this.getUserInfo.roleType
-      })
+      });
       if (res.code == "200") {
-        let userInfo = Object.assign({}, this.getUserInfo, res.data)
-        this.$store.dispatch("setUserInfo", userInfo)
+        let userInfo = Object.assign({}, this.getUserInfo, res.data);
+        this.$store.dispatch("setUserInfo", userInfo);
         // this.$toast("提交手机号成功");
-        this.show = false
+        this.show = false;
       } else {
-        this.$toast.fail(res.msg)
+        this.$toast.fail(res.msg);
       }
     },
     async submit() {
       if (!this.userPhone) {
-        this.$toast("请输入手机号码")
-        return
+        this.$toast("请输入手机号码");
+        return;
       } else if (!this.pattern.test(this.userPhone)) {
-        this.$toast("请输入正确的手机号码")
-        return
+        this.$toast("请输入正确的手机号码");
+        return;
       }
       let res = await this.$store.dispatch("updateUserPhone", {
         phone: this.getUserInfo.phone,
         institutionNo: this.getUserInfo.institutionNo,
         newModelPhone: this.userPhone,
         roleType: this.getUserInfo.roleType
-      })
+      });
       if (res.code == "200") {
-        let userInfo = Object.assign({}, this.getUserInfo, res.data)
-        this.$store.dispatch("setUserInfo", userInfo)
-        this.$toast("提交手机号成功")
-        this.show = false
+        let userInfo = Object.assign({}, this.getUserInfo, res.data);
+        this.$store.dispatch("setUserInfo", userInfo);
+        this.$toast("提交手机号成功");
+        this.show = false;
       } else {
-        this.$toast.fail(res.msg)
+        this.$toast.fail(res.msg);
       }
     }
   }
-}
+};
 </script>
 
 <style scoped>
@@ -219,4 +239,11 @@ export default {
   font-size: 10px;
   color: #57acbb;
 }
+
+::v-deep {
+  .van-tabbar-item--active {
+    color: #07c160;
+    background-color: #fff;
+  }
+}
 </style>

src/views/scaleDetail-old.vue

@@ -1,78 +1,175 @@
 <template>
   <div>
-    <van-nav-bar :title="scaleInfo.name" left-text="返回" left-arrow @click-left="goBack" />
+    <van-nav-bar
+      :title="scaleInfo.name"
+      left-arrow
+      left-text="返回"
+      @click-left="goBack"
+    />
     <div class="main">
       <!-- <p class="desc">{{ scaleInfo.description }}</p> -->
       <p class="num">{{ current + 1 }} / {{ questionList.length }}</p>
-      <van-swipe class="my-swipe" :show-indicators="false" ref="mySweiper" :loop="false" :touchable="false">
+      <van-swipe
+        ref="mySweiper"
+        :loop="false"
+        :show-indicators="false"
+        :touchable="false"
+        class="my-swipe"
+      >
         <!-- @change="getCurrentIndex" -->
-        <van-swipe-item v-for="(item, index) in questionList" :key="index" :autoplay="false">
+        <van-swipe-item
+          v-for="(item, index) in questionList"
+          :key="index"
+          :autoplay="false"
+        >
           <h2 class="title">{{ item.answer }}</h2>
-          <div v-if="scaleInfo.flag == '20221031110051' &&
-            current > 44 &&
-            current < 48
-            " class="imgArea">
-            <img :src="require(`../assets/scale20221031110051/${current + 1
-              }-A.png`)
-              " alt="" />
-            <img :src="require(`../assets/scale20221031110051/${current + 1
-              }-B.png`)
-              " alt="" />
+          <div
+            v-if="
+              scaleInfo.flag == '20221031110051' && current > 44 && current < 48
+            "
+            class="imgArea"
+          >
+            <img
+              :src="
+                require(`../assets/scale20221031110051/${current + 1}-A.png`)
+              "
+              alt=""
+            />
+            <img
+              :src="
+                require(`../assets/scale20221031110051/${current + 1}-B.png`)
+              "
+              alt=""
+            />
           </div>
           <!-- 单选题答案区域 -->
           <div v-if="item.questionType == 0" class="checkItem">
-            <van-radio-group v-model="anwserList[index].checkItems" @change="checkAnswer">
-              <van-radio style="margin-top: 10px" :name="check"
-                v-for="(check, checkIndex) in splitCheckItems(item.checkItems)" :key="checkIndex">{{ check }}</van-radio>
+            <van-radio-group
+              v-model="anwserList[index].checkItems"
+              @change="checkAnswer"
+            >
+              <van-radio
+                v-for="(check, checkIndex) in splitCheckItems(item.checkItems)"
+                :key="checkIndex"
+                :name="check"
+                style="margin-top: 10px"
+                >{{ check }}
+              </van-radio>
             </van-radio-group>
           </div>
           <!-- 多选题答案区域 -->
           <div v-if="item.questionType == 1" class="checkItem">
             <van-checkbox-group v-model="anwserList[index].checkItems">
-              <van-checkbox v-for="(check, checkIndex) in splitCheckItems(item.checkItems)" :key="checkIndex"
-                shape="square" style="margin-top: 10px" :name="check">{{ check }}</van-checkbox>
+              <van-checkbox
+                v-for="(check, checkIndex) in splitCheckItems(item.checkItems)"
+                :key="checkIndex"
+                :name="check"
+                shape="square"
+                style="margin-top: 10px"
+                >{{ check }}
+              </van-checkbox>
             </van-checkbox-group>
           </div>
-          <van-picker v-if="scaleInfo.flag == '20210725100704' && (index == 0 || index == 2 || index == 3)"
-            :columns="pittsburghData[current]" @change="onChange" />
+          <van-picker
+            v-if="
+              scaleInfo.flag == '20210725100704' &&
+                (index == 0 || index == 2 || index == 3)
+            "
+            :columns="pittsburghData[current]"
+            @change="onChange"
+          />
 
           <!-- 填空答案区域：单选填空混合  多选填空混合  填空 时候展示 -->
-          <div class="fillBlank"
-            v-if="item.questionType == '02' || item.questionType == '12' || item.questionType == '2'">
-
+          <div
+            v-if="
+              item.questionType == '02' ||
+                item.questionType == '12' ||
+                item.questionType == '2'
+            "
+            class="fillBlank"
+          >
             <template>
-              <img v-if="scaleInfo.flag == '20221201094019' && index == 15" style="display: block; margin: 20px auto"
-                src="../assets/color_pie16.jpg" alt="" />
-              <img v-if="scaleInfo.flag == '20221201094019' && index == 16" style="display: block; margin: 20px auto"
-                src="../assets/color_pie17.jpg" alt="" />
+              <img
+                v-if="scaleInfo.flag == '20221201094019' && index == 15"
+                alt=""
+                src="../assets/color_pie16.jpg"
+                style="display: block; margin: 20px auto"
+              />
+              <img
+                v-if="scaleInfo.flag == '20221201094019' && index == 16"
+                alt=""
+                src="../assets/color_pie17.jpg"
+                style="display: block; margin: 20px auto"
+              />
               <!--              <el-input style="margin-top: 20px; width: 60%"-->
               <!--                        v-model="radio"-->
               <!--                        :placeholder="scale_infos[scale_index].checkItems ? scale_infos[scale_index].checkItems : '请输入答案'">-->
               <!--              </el-input>-->
               <van-cell-group>
-                <van-field style="margin-top: 20px" v-model="anwserList[index].checkItems" :disabled="index != current"
-                  :placeholder="anwserList[index].checkItems ? anwserList[index].checkItems : '请输入答案'" />
+                <van-field
+                  v-model="anwserList[index].checkItems"
+                  :disabled="index != current"
+                  :placeholder="
+                    anwserList[index].checkItems
+                      ? anwserList[index].checkItems
+                      : '请输入答案'
+                  "
+                  style="margin-top: 20px"
+                />
               </van-cell-group>
             </template>
           </div>
-
         </van-swipe-item>
       </van-swipe>
       <div class="pageNation">
-        <van-button @click="prevQuestion" :disabled="current <= 0" round type="info" size="mini">上一题</van-button>
-        <van-button @click="nextQuestion" v-show="current < questionList.length - 1" round type="info"
-          size="mini">下一题</van-button>
-        <van-button @click="submitAnswer" :disabled="submitDisabled" v-show="current == questionList.length - 1 &&
-          anwserList[current].checkItems != ''
-          " type="info" size="mini">提&nbsp;&nbsp;交</van-button>
+        <van-button
+          :disabled="current <= 0"
+          round
+          size="mini"
+          type="primary"
+          @click="prevQuestion"
+          >上一题
+        </van-button>
+        <van-button
+          v-show="current < questionList.length - 1"
+          round
+          size="mini"
+          type="primary"
+          @click="nextQuestion"
+          >下一题
+        </van-button>
+        <van-button
+          v-show="
+            current == questionList.length - 1 &&
+              anwserList[current].checkItems != ''
+          "
+          :disabled="submitDisabled"
+          size="mini"
+          type="info"
+          @click="submitAnswer"
+          >提&nbsp;&nbsp;交
+        </van-button>
       </div>
     </div>
     <!-- 补充说明原因 -->
-    <van-dialog v-model="showDialog" title="补充说明" show-cancel-button @confirm="addDesc" @cancel="closeDialog">
-      <van-field v-model="message" rows="2" autosize label="原因" type="textarea" maxlength="50" placeholder="请输入原因"
-        show-word-limit />
+    <van-dialog
+      v-model="showDialog"
+      show-cancel-button
+      title="补充说明"
+      @cancel="closeDialog"
+      @confirm="addDesc"
+    >
+      <van-field
+        v-model="message"
+        autosize
+        label="原因"
+        maxlength="50"
+        placeholder="请输入原因"
+        rows="2"
+        show-word-limit
+        type="textarea"
+      />
     </van-dialog>
-
   </div>
 </template>
 
@@ -110,7 +207,7 @@ export default {
           { val: "01:30", text: "凌晨01:30" },
           { val: "02:00", text: "凌晨02:00" },
           { val: "02:30", text: "凌晨02:30" },
-          { val: "03:00", text: "凌晨03:00" },
+          { val: "03:00", text: "凌晨03:00" }
         ],
         2: [
           { val: "03:00", text: "凌晨03:00" },
@@ -128,7 +225,7 @@ export default {
           { val: "09:00", text: "上午09:00" },
           { val: "10:00", text: "上午10:00" },
           { val: "10:30", text: "上午10:30" },
-          { val: "11:00", text: "上午11:00" },
+          { val: "11:00", text: "上午11:00" }
         ],
         3: [
           { val: "00:30", text: "0.5小时" },
@@ -146,12 +243,12 @@ export default {
           { val: "06:30", text: "6.5小时" },
           { val: "07:00", text: "7小时" },
           { val: "07:30", text: "7.5小时" },
-          { val: "08:00", text: "8小时及以上" },
-        ],
+          { val: "08:00", text: "8小时及以上" }
+        ]
       },
       submitDisabled: false,
       testPlanId: "", //测试计划id,用于区分来自测试计划
-      checkItems: [],
+      checkItems: []
     };
   },
   created() {
@@ -163,10 +260,10 @@ export default {
   methods: {
     // 加载数据
     loadData() {
-      this.$http.get(`scaleInfo/${this.flag}`, {}, (msg) => {
+      this.$http.get(`scaleInfo/${this.flag}`, {}, msg => {
         // console.log(msg);
         this.questionList = msg.data;
-        msg.data.forEach((el) => {
+        msg.data.forEach(el => {
           this.anwserList.push({
             answer: el.answer,
             checkItems: el.questionType == 1 ? [] : "",
@@ -177,7 +274,7 @@ export default {
             score: el.score,
             scoreDirection: el.scoreDirection,
             serialNo: el.serialNo,
-            weight: el.weight,
+            weight: el.weight
           });
         });
       });
@@ -206,9 +303,9 @@ export default {
           return;
         }
 
-        if (this.anwserList[this.current].questionType === '0') {
-          console.log(this.current)
-          this.current++
+        if (this.anwserList[this.current].questionType === "0") {
+          console.log(this.current);
+          this.current++;
           this.$refs.mySweiper.next();
         }
       }
@@ -216,9 +313,9 @@ export default {
 
     // 选中多选题
     checkBoxFormat(arr) {
-      let temp = '';
+      let temp = "";
       for (let i = 0; i < arr.length; i++) {
-        temp += `${arr[i]};`
+        temp += `${arr[i]};`;
       }
       return temp;
     },
@@ -228,11 +325,10 @@ export default {
       this.anwserList[this.current].desc = this.message;
       if (this.message != "") {
         setTimeout(() => {
-          this.current++
+          this.current++;
           this.$refs.mySweiper.next();
         }, 300);
       } else {
-        return;
       }
     },
 
@@ -252,25 +348,25 @@ export default {
       this.submitDisabled = true;
       let userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
       this.anwserList.forEach(item => {
-        if (item.questionType === '1') {
-          item.checkItems = this.checkBoxFormat(item.checkItems)
+        if (item.questionType === "1") {
+          item.checkItems = this.checkBoxFormat(item.checkItems);
         }
-      })
+      });
       let param = {
         scale_result: this.anwserList,
         userId: userInfo.id,
-        testPlanId: this.testPlanId,
+        testPlanId: this.testPlanId
       };
       let url = `result/${this.flag}`;
       this.$http.post(
         url,
         param,
-        (msg) => {
+        msg => {
           this.submitDisabled = true;
           console.log(msg, "答案提交--");
           this.getAnswerQuestionPaymentSuccess(msg.data);
         },
-        (err) => {
+        err => {
           this.$toast.fail(err.msg);
           this.submitDisabled = true;
         }
@@ -285,8 +381,8 @@ export default {
         query: {
           id: id,
           from: 1,
-          testPlanId: this.testPlanId,
-        },
+          testPlanId: this.testPlanId
+        }
       });
 
       // _this.$http.get(`/getRecordById?id=${id}`, {}, (res) => {
@@ -323,7 +419,6 @@ export default {
       //
       //   console.log("请求数据的list", res);
       // });
-
     },
     JumpJudgment(msg) {
       if (msg.data.iconInfo || msg.data.iconInfo == "") {
@@ -332,8 +427,8 @@ export default {
           query: {
             tableData: JSON.stringify(msg.data),
             from: 1,
-            testPlanId: this.testPlanId,
-          },
+            testPlanId: this.testPlanId
+          }
         });
       } else {
         sessionStorage.setItem("resultInfo", JSON.stringify(msg.data));
@@ -369,7 +464,7 @@ export default {
         this.$toast("请选择答案");
         return;
       }
-      this.current++
+      this.current++;
       this.$refs.mySweiper.next();
     },
 
@@ -380,14 +475,14 @@ export default {
         this.$router.push({
           name: "testPlanClassify",
           params: {
-            testPlanId: this.testPlanId,
-          },
+            testPlanId: this.testPlanId
+          }
         });
       } else {
         this.$router.push("/index/scaleTest");
       }
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -431,7 +526,7 @@ export default {
 }
 
 .imgArea img {
-  height: 180PX;
-  margin-right: 1PX;
+  height: 180px;
+  margin-right: 1px;
 }
 </style>

src/views/testPlan/index.vue

@@ -270,6 +270,11 @@ export default {
 
 <style lang="scss" scoped>
 .main-outline {
+  .van-tab.van-tab--active {
+    color: #fff;
+    background-color: #07c160 !important;
+  }
+
   ::v-deep .van-tabs {
     height: 100%;
     overflow: hidden;
@@ -286,7 +291,7 @@ export default {
       align-items: center;
 
       .van-tab {
-        color: #007eff;
+        color: #929292;
         border: 0;
         height: 25px;
         margin: 0 5px;
@@ -294,7 +299,7 @@ export default {
 
         &.van-tab--active {
           color: #fff;
-          background-color: #007eff;
+          background-color: #07c160;
         }
       }
     }

src/views/testResult_new.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="app-container">
-    <Header/>
+    <Header />
     <div class="main-container">
-      <van-nav-bar title="认知任务测试" left-arrow @click-left="goBack" />
+      <van-nav-bar left-arrow title="认知任务测试" @click-left="goBack" />
       <div class="main-outline">
         <!--<cognitiveTaskReport-->
         <!--:allData="datas"-->
@@ -10,9 +10,11 @@
         <!--:userName="userName"-->
         <!--:testDate="testDate"-->
         <!--&gt;</cognitiveTaskReport>-->
-        <cognitiveTaskReport/>
+        <cognitiveTaskReport />
         <div class="btnArea">
-          <van-button type="info" size="small" round @click="downloadFile">点击下载</van-button>
+          <van-button round size="small" type="primary" @click="downloadFile"
+            >点击下载</van-button
+          >
         </div>
       </div>
     </div>
@@ -20,8 +22,8 @@
 </template>
 
 <script>
-import cognitiveTaskReport from "@/components/cognitiveTask/cognitiveTaskReport"
-import Header from "@/components/header/index.vue"
+import cognitiveTaskReport from "@/components/cognitiveTask/cognitiveTaskReport";
+import Header from "@/components/header/index.vue";
 
 export default {
   name: "testResult_new",
@@ -31,61 +33,61 @@ export default {
   },
   data() {
     return {
-      id: '', //测试记录id
-      come: 0,//1-来自认知任务列表，2-测试记录列表
-      testPlanId: '', //测试计划id来自测试计划列表
-      title: '' //标题
+      id: "", //测试记录id
+      come: 0, //1-来自认知任务列表，2-测试记录列表
+      testPlanId: "", //测试计划id来自测试计划列表
+      title: "" //标题
       // userName: '', //用户名
       // testDate: '', //测试日期
       // datas: {}, //全部数据
-    }
+    };
   },
   computed: {},
   created() {
-    this.init()
-  },
-  mounted() {
-
+    this.init();
   },
+  mounted() {},
   watch: {},
   methods: {
     init() {
-      this.id = this.$route.query.id
-      this.come = this.$route.query.come
-      this.title = this.$route.query.title
-      this.testPlanId = this.$route.query.testPlanId || ''
+      this.id = this.$route.query.id;
+      this.come = this.$route.query.come;
+      this.title = this.$route.query.title;
+      this.testPlanId = this.$route.query.testPlanId || "";
       // this.userName = this.$route.params.userName || '';
       // this.testDate = this.$route.params.testDate || '';
       // this.datas = JSON.parse(sessionStorage.getItem('testResult'));
     },
     goBack() {
-      if (this.testPlanId && this.testPlanId != '') {
+      if (this.testPlanId && this.testPlanId != "") {
         this.$router.push({
           name: "testPlanClassify",
           params: {
             testPlanId: this.testPlanId
           }
-        })
+        });
       } else if (this.come == 1) {
         //come为1来自认知任务列表
-        this.$router.push({ name: "CognitionTask", params: {} })
+        this.$router.push({ name: "CognitionTask", params: {} });
       } else if (this.come == 2) {
         //come为2来自测试记录列表
-        this.$router.push({ name: "TestRecords", params: {} })
+        this.$router.push({ name: "TestRecords", params: {} });
       } else {
         //默认匹配不到跳转认知任务列表
-        this.$router.push({ name: "CognitionTask", params: {} })
+        this.$router.push({ name: "CognitionTask", params: {} });
       }
-
     },
     downloadFile() {
       if (this.title === "画钟测试") {
-        window.open(`${ baseUrl }result/download/CDTImg?id=${ this.id }`, "_blank")
+        window.open(`${baseUrl}result/download/CDTImg?id=${this.id}`, "_blank");
       }
-      window.open(`${ baseUrl }result/download/testResult?id=${ this.id }`, "_blank")
+      window.open(
+        `${baseUrl}result/download/testResult?id=${this.id}`,
+        "_blank"
+      );
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>

src/views/user/cognitiveTaskOldTestRecord.vue

@@ -1,12 +1,8 @@
 <template>
   <div class="app-container">
-    <Header/>
+    <Header />
     <div class="main-container">
-      <van-nav-bar
-        title="测试结果"
-        left-arrow
-        @click-left="goBack"
-      />
+      <van-nav-bar left-arrow title="测试结果" @click-left="goBack" />
       <div class="main-outline">
         <div class="top-info">
           <div class="line-name">
@@ -23,8 +19,8 @@
         <PageModule text="分值">
           <table class="inner-table">
             <tr class="table-th">
-              <th> 项目</th>
-              <th> 内容</th>
+              <th>项目</th>
+              <th>内容</th>
             </tr>
             <tr v-for="(item, index) in resResult" :key="index">
               <td class="td-result">{{ item.name }}</td>
@@ -39,12 +35,17 @@
           <!--<p class="tip-content">测评图表可快速帮您掌握报告内容；</p>-->
           <p class="tip-content">本结果仅供参考，不可作为临床诊断的依据；</p>
           <p class="tip-content">
-            如结果与你自己或他人感知的有出入，可回忆在测试时是否有事情影响了你，或自己答题时是否有所顾虑；</p>
-          <p class="tip-content">如对报告有不理解的地方，建议向专业资质人员进行咨询。</p>
+            如结果与你自己或他人感知的有出入，可回忆在测试时是否有事情影响了你，或自己答题时是否有所顾虑；
+          </p>
+          <p class="tip-content">
+            如对报告有不理解的地方，建议向专业资质人员进行咨询。
+          </p>
         </div>
 
         <div class="btnArea">
-          <van-button type="info" size="small" round @click="download">下载测试结果</van-button>
+          <van-button round size="small" type="primary" @click="download"
+            >下载测试结果</van-button
+          >
         </div>
       </div>
     </div>
@@ -53,9 +54,9 @@
 
 <script>
 // import StackedLine from "@/components/echarts/StackedLine";
-import Header from "@/components/header/index.vue"
-import PageModule from "@/components/PageModule/index.vue"
-import {mapGetters} from "vuex";
+import Header from "@/components/header/index.vue";
+import PageModule from "@/components/PageModule/index.vue";
+import { mapGetters } from "vuex";
 
 export default {
   name: "cognitiveTaskOldTestRecord",
@@ -74,7 +75,7 @@ export default {
       id: "", //来自测试列表
       from: "", //1-来自首页量表,2-来自测试记录列表页
       testPlanId: "" //来自测试计划
-    }
+    };
   },
   computed: {
     ...mapGetters({
@@ -82,64 +83,63 @@ export default {
     })
   },
   created() {
-    this.id = this.$route.query.id || ''
-    this.from = this.$route.query.from || ''
-    this.testPlanId = this.$route.query.testPlanId || ''
-
+    this.id = this.$route.query.id || "";
+    this.from = this.$route.query.from || "";
+    this.testPlanId = this.$route.query.testPlanId || "";
   },
   mounted() {
-    this.inits(this.$route.query.id)
+    this.inits(this.$route.query.id);
   },
   methods: {
-
     getDataList(v) {
       // console.log("vvvvv", v);
-      v.forEach((item) => {
-        if (item && item.value[0] && item.value[0] != '') {
+      v.forEach(item => {
+        if (item && item.value[0] && item.value[0] != "") {
           this.resResult.push({
             name: item.name,
             score: item.value[0]
-          })
+          });
         }
-      })
-
+      });
     },
 
     inits(id) {
-      this.$http.get(`getRecordById?id=${ id }`, {}, (res) => {
+      this.$http.get(`getRecordById?id=${id}`, {}, res => {
         //当返回正确的话
         if (res && res.code == 200) {
-          this.type = res.data?.userRecordEntity.type
+          this.type = res.data?.userRecordEntity.type;
           // console.log(res,"认知任务返回")
 
-          const datas = res.data.userRecordEntity.testResult
+          const datas = res.data.userRecordEntity.testResult;
 
-          const resResultData = typeof datas == "string" ? JSON.parse(datas)[0].tableContext : datas[0].tableContext
+          const resResultData =
+            typeof datas == "string"
+              ? JSON.parse(datas)[0].tableContext
+              : datas[0].tableContext;
 
-          this.getDataList(resResultData)
+          this.getDataList(resResultData);
 
           //先获取到测试者
-          let str = res.data.userRecordEntity.fileName
-          let testDate = res.data.userRecordEntity.testDate
+          let str = res.data.userRecordEntity.fileName;
+          let testDate = res.data.userRecordEntity.testDate;
           let yearMonthDay = testDate
             .replace("年", "/")
             .replace("月", "/")
             .replace("日", " ")
             .replace("时", ":")
             .replace("分", ":")
-            .replace("秒", "")
+            .replace("秒", "");
 
-          this.time = yearMonthDay
-          this.tableName = res.data.userRecordEntity.name
-          let sd = str.split("/")
-          let sp = sd[sd.length - 1]
-          let a = sp.split("-")
+          this.time = yearMonthDay;
+          this.tableName = res.data.userRecordEntity.name;
+          let sd = str.split("/");
+          let sp = sd[sd.length - 1];
+          let a = sp.split("-");
 
-          this.name = res.data.userRecordEntity.phone
-          this.sex = a[4]
+          this.name = res.data.userRecordEntity.phone;
+          this.sex = a[4];
         }
-
-      })
+      });
     },
 
     //返回上一级
@@ -152,28 +152,31 @@ export default {
           params: {
             testPlanId: this.testPlanId
           }
-        })
+        });
       } else if (this.from == 1) {
         // 来自普通测试列表
-        this.$router.push("/index/cognitionTask")
+        this.$router.push("/index/cognitionTask");
       } else {
         // 来自测试记录列表
-        this.$router.push("/testRecords")
+        this.$router.push("/testRecords");
       }
     },
 
     // 下载
     download() {
-      window.location.href = `${ baseUrl }/result/download/testResult?id=${ this.id }`
+      window.location.href = `${baseUrl}/result/download/testResult?id=${this.id}`;
     },
     downloadFile() {
       if (this.tableName == "画钟测试") {
-        window.open(`${ baseUrl }result/download/CDTImg?id=${ this.id }`, "_blank")
+        window.open(`${baseUrl}result/download/CDTImg?id=${this.id}`, "_blank");
       }
-      window.open(`${ baseUrl }result/download/testResult?id=${ this.id }`, "_blank")
+      window.open(
+        `${baseUrl}result/download/testResult?id=${this.id}`,
+        "_blank"
+      );
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -184,13 +187,13 @@ export default {
     width: calc(100% - 24px);
     margin: 0 12px;
     height: 136px;
-    background: url('~@/assets/image/bg-result-top.png') no-repeat center;
+    background: url("~@/assets/image/bg-result-top.png") no-repeat center;
     background-size: 100% 100%;
     overflow: hidden;
 
     .line-name {
       font-size: 20px;
-      color: #007EFF;
+      color: #007eff;
       padding-left: 20px;
       margin-top: 40px;
     }
@@ -218,7 +221,7 @@ export default {
     .table-th {
       height: 32px;
       font-size: 14px;
-      background: #007EFF;
+      background: #007eff;
       color: #fff;
 
       th {
@@ -233,7 +236,7 @@ export default {
       padding: 7px;
       font-size: 14px;
       width: 50%;
-      background-color: #F0F3F6;
+      background-color: #f0f3f6;
       border-bottom: 1px solid white;
       border-right: 1px solid white;
       text-align: center;

src/views/user/testRecords.vue

@@ -3,7 +3,7 @@
   <div class="app-container">
     <Header />
     <div class="main-container">
-      <van-nav-bar title="测试记录" left-arrow @click-left="goBack" />
+      <van-nav-bar left-arrow title="测试记录" @click-left="goBack" />
       <!-- <van-search
         v-model="scaleName"
         show-action
@@ -16,13 +16,17 @@
           <van-list
             v-model="loading"
             :finished="finished"
+            :immediate-check="false"
             finished-text="完了，被你看光了~"
-            @load="loadData"
             offset="50"
             style="padding-bottom: 50px"
-            :immediate-check="false"
+            @load="loadData"
           >
-            <div class="card flex-row" v-for="(item, index) in recondList" :key="item.id">
+            <div
+              v-for="(item, index) in recondList"
+              :key="item.id"
+              class="card flex-row"
+            >
               <van-image :src="images[index % 8]" class="card-img" />
               <div class="right-content">
                 <div class="title van-multi-ellipsis--l2">
@@ -32,10 +36,10 @@
                   {{ item.testDate }}
                 </div>
                 <van-button
+                  class="detail-btn"
                   round
-                  type="info"
                   size="mini"
-                  class="detail-btn"
+                  type="primary"
                   @click="goResultDetail(item)"
                 >
                   报告详情
@@ -50,7 +54,7 @@
 </template>
 
 <script>
-import Header from "@/components/header/index.vue"
+import Header from "@/components/header/index.vue";
 
 export default {
   name: "TestRecords",
@@ -97,7 +101,7 @@ export default {
           this.institutionNo +
           `?pageSize=${this.pageSize}&pageNum=${this.pageNum}`,
         {},
-        (msg) => {
+        msg => {
           // 刷新时，先清空数据列表
           if (this.refreshing) {
             this.refreshing = false;
@@ -129,21 +133,22 @@ export default {
       this.goTestResult(item);
     },
     goTestResult(item) {
-      this.$http.get(`getRecordById?id=${item.id}`, {}, (res) => {
+      this.$http.get(`getRecordById?id=${item.id}`, {}, res => {
         if (res.code == 2001) {
           this.$toast.fail(res.msg);
           return;
         }
         if (res && res.code == 200) {
-          console.log(res,"认知任务返回数据版本")
+          console.log(res, "认知任务返回数据版本");
 
-          if (res.data?.userRecordEntity.type === '1') {
+          if (res.data?.userRecordEntity.type === "1") {
             // 认知任务跳转
-            let versionNo = JSON.parse(res.data?.userRecordEntity?.testResult).versionNo;
-            if (versionNo == "2.0.1" || versionNo == '2.0') {
+            let versionNo = JSON.parse(res.data?.userRecordEntity?.testResult)
+              .versionNo;
+            if (versionNo == "2.0.1" || versionNo == "2.0") {
               //跳转新测试结果模版数据暂存本地
               // sessionStorage.setItem("testResult", res.data?.userRecordEntity?.testResult);
-              this.$store.dispatch("setTestResult",res?.data);
+              this.$store.dispatch("setTestResult", res?.data);
               this.$router.push({
                 name: "testResultNew",
                 query: {
@@ -152,25 +157,25 @@ export default {
                   testPlanId: this.$route.query.testPlanId || "",
                   // userName: res.data?.userRecordEntity?.phone,
                   // testDate: res.data?.userRecordEntity?.testDate,
-                  come: 2, //1-来自认知任务列表，2-测试记录列表
-                },
+                  come: 2 //1-来自认知任务列表，2-测试记录列表
+                }
               });
             } else {
               //跳转旧测试结果模版
-              this.$router.push(`/cognitiveTaskOldTestRecord?flag=${item.flag}&id=${item.id}&from=2`);
-
+              this.$router.push(
+                `/cognitiveTaskOldTestRecord?flag=${item.flag}&id=${item.id}&from=2`
+              );
             }
-          }else {
+          } else {
             // 量表跳转
             this.$router.push({
               path: "/testRecordsSCl",
               query: {
                 id: item.id,
-                from: 2,
-              },
+                from: 2
+              }
             });
           }
-
         } else {
           this.$toast.fail("获取数据失败！服务器异常");
         }
@@ -193,8 +198,8 @@ export default {
     goBack() {
       // this.$router.go(-1);
       this.$router.push("/index/userCenter");
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -251,21 +256,25 @@ export default {
     }
   }
 }
+
 .card-top {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
+
 .card-top img {
   /*height: 10vh;*/
   width: 25%;
   padding: 0 10px;
 }
+
 .card-top-left {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
 }
+
 .card-top-left h3 {
   word-break: break-all;
   text-overflow: ellipsis;
@@ -274,6 +283,7 @@ export default {
   -webkit-line-clamp: 2;
   overflow: hidden;
 }
+
 .cardBottom {
   /*height: 6vh;*/
   padding: 5px 0;

src/views/user/testRecordsSCl.vue

@@ -1,12 +1,8 @@
 <template>
   <div class="app-container">
-    <Header/>
+    <Header />
     <div class="main-container">
-      <van-nav-bar
-        title="测试结果"
-        left-arrow
-        @click-left="goBack"
-      />
+      <van-nav-bar left-arrow title="测试结果" @click-left="goBack" />
       <div class="main-outline">
         <div class="top-info">
           <div class="line-name">
@@ -29,40 +25,68 @@
             </tr>
             <tr v-for="(item, index) in resResult" :key="index">
               <td class="td-result">{{ item.name }}</td>
-              <td class="td-result">{{ item.score }}（{{ item.reference }}）</td>
+              <td class="td-result">
+                {{ item.score }}（{{ item.reference }}）
+              </td>
             </tr>
           </table>
         </PageModule>
 
-        <PageModule v-if="symptomDescription && symptomDescription.length > 0" text="结论">
-          <div class="dimension-warp" v-for="(list,j) in symptomDescription" :key="j">
+        <PageModule
+          v-if="symptomDescription && symptomDescription.length > 0"
+          text="结论"
+        >
+          <div
+            v-for="(list, j) in symptomDescription"
+            :key="j"
+            class="dimension-warp"
+          >
             <div class="dimension-name">
               <span class="dimension-name-tag">维度名称</span>
               <span class="dimension-name-desc">{{ list.name }}</span>
             </div>
             <div class="dimension-content">
-              <div class="dimension-item" v-if="list.score && list.score !='无'">
+              <div
+                v-if="list.score && list.score != '无'"
+                class="dimension-item"
+              >
                 <div class="dimension-item-title">得分</div>
                 <div class="dimension-item-mh">：</div>
                 <div class="dimension-item-desc">{{ list.score }}</div>
               </div>
-              <div class="dimension-item" v-if="list.symptom && list.symptom !='无'">
+              <div
+                v-if="list.symptom && list.symptom != '无'"
+                class="dimension-item"
+              >
                 <div class="dimension-item-title">症状</div>
                 <div class="dimension-item-mh">：</div>
                 <div class="dimension-item-desc">{{ list.symptom }}</div>
               </div>
-              <div class="dimension-item"
-                   v-if="list.improvementSuggestions && list.improvementSuggestions !='无'">
+              <div
+                v-if="
+                  list.improvementSuggestions &&
+                    list.improvementSuggestions != '无'
+                "
+                class="dimension-item"
+              >
                 <div class="dimension-item-title">维度说明</div>
                 <div class="dimension-item-mh">：</div>
-                <div class="dimension-item-desc">{{ list.improvementSuggestions }}</div>
+                <div class="dimension-item-desc">
+                  {{ list.improvementSuggestions }}
+                </div>
               </div>
-              <div class="dimension-item" v-if="list.nameExplain && list.nameExplain !='无'">
+              <div
+                v-if="list.nameExplain && list.nameExplain != '无'"
+                class="dimension-item"
+              >
                 <div class="dimension-item-title">维度解读</div>
                 <div class="dimension-item-mh">：</div>
                 <div class="dimension-item-desc">{{ list.nameExplain }}</div>
               </div>
-              <div class="dimension-item" v-if="list.suggestion && list.suggestion !='无'">
+              <div
+                v-if="list.suggestion && list.suggestion != '无'"
+                class="dimension-item"
+              >
                 <div class="dimension-item-title">建议</div>
                 <div class="dimension-item-mh">：</div>
                 <div class="dimension-item-desc">{{ list.suggestion }}</div>
@@ -73,18 +97,27 @@
 
         <PageModule v-show="indicator && indicator.length > 0" text="你的分数">
           <StackedLine
+            :indicator="indicator"
             :reference="reference"
             :scoreList="scoreList"
-            :indicator="indicator"
           />
         </PageModule>
 
         <PageModule
-          v-if="testResultData.subject && testResultData.subject.reportReference && testResultData.subject.reportReference.length > 0"
+          v-if="
+            testResultData.subject &&
+              testResultData.subject.reportReference &&
+              testResultData.subject.reportReference.length > 0
+          "
           text="参考文献"
         >
-          <div class="fifth-floor-list"
-               v-for="(item,index) in replaceTxt(testResultData.subject.reportReference)" :key="index">
+          <div
+            v-for="(item, index) in replaceTxt(
+              testResultData.subject.reportReference
+            )"
+            :key="index"
+            class="fifth-floor-list"
+          >
             <div class="fifth-floor-list-title">[{{ index + 1 }}]</div>
             <div class="fifth-floor-list-desc">{{ item }}</div>
           </div>
@@ -95,14 +128,19 @@
           <p class="tip-desc">谢谢您的参与，阅读本报告时，请注意以下内容：</p>
           <!--<p class="tip-content">测评图表可快速帮您掌握报告内容；</p>-->
           <p class="tip-content">本结果仅供参考，不可作为临床诊断的依据；</p>
-          <p class="tip-content">如对报告有不理解的地方，建议向专业资质人员进行咨询；</p>
+          <p class="tip-content">
+            如对报告有不理解的地方，建议向专业资质人员进行咨询；
+          </p>
           <!--                <p class="tip-content">如结果与你自己或他人感知的有出入，可回忆在测试时是否有事情影响了你，或自己答题时是否有所顾虑。</p>-->
           <p class="tip-content">
-            如结果与你自己或他人的有出入，可回忆在测试时是否有事情影响到你，或自己答辩时是否有所顾虑。</p>
+            如结果与你自己或他人的有出入，可回忆在测试时是否有事情影响到你，或自己答辩时是否有所顾虑。
+          </p>
         </div>
 
         <div class="btnArea">
-          <van-button type="info" round size="large" @click="download">下载测试结果</van-button>
+          <van-button round size="large" type="primary" @click="download"
+            >下载测试结果
+          </van-button>
         </div>
       </div>
     </div>
@@ -117,11 +155,11 @@
  *  symptomDescription  测试结果表述列表
  *
  */
-import StackedLine from "../../components/echarts/StackedLine.vue"
+import StackedLine from "../../components/echarts/StackedLine.vue";
 // import StackedLineReference from "../../components/echarts/StackedLineReference.vue";
-import Header from "@/components/header/index.vue"
-import PageModule from "@/components/PageModule/index.vue"
-import {mapGetters} from "vuex";
+import Header from "@/components/header/index.vue";
+import PageModule from "@/components/PageModule/index.vue";
+import { mapGetters } from "vuex";
 
 export default {
   name: "testRecordsSCl",
@@ -155,7 +193,7 @@ export default {
       id: "", //来自测试列表
       from: "", //1-来自首页量表,2-来自测试记录列表页
       testPlanId: "" //来自测试计划
-    }
+    };
   },
   computed: {
     ...mapGetters({
@@ -163,55 +201,55 @@ export default {
     })
   },
   created() {
-    this.id = this.$route.query.id || ''
-    this.from = this.$route.query.from || ''
-    this.testPlanId = this.$route.query.testPlanId || ''
+    this.id = this.$route.query.id || "";
+    this.from = this.$route.query.from || "";
+    this.testPlanId = this.$route.query.testPlanId || "";
   },
   mounted() {
-    this.inits(this.$route.query.id)
+    this.inits(this.$route.query.id);
 
-    const swipeArea = document.querySelector('.app-container');
+    const swipeArea = document.querySelector(".app-container");
 
     let touchStartX = 0;
     let touchEndX = 0;
 
     // 触摸开始时记录起始位置
-    swipeArea.addEventListener('touchstart', (event) => {
+    swipeArea.addEventListener("touchstart", event => {
       touchStartX = event.touches[0].clientX;
     });
 
     // 触摸结束时检测滑动方向
-    swipeArea.addEventListener('touchend', (event) => {
+    swipeArea.addEventListener("touchend", event => {
       touchEndX = event.changedTouches[0].clientX;
       if (touchStartX - touchEndX > 50) {
-        console.log('Left Swipe Detected');
+        console.log("Left Swipe Detected");
         // 在这里执行左滑操作的逻辑
-        this.goBack()
+        this.goBack();
       }
-    })
+    });
   },
   methods: {
     init(v) {
-      this.totalScores = Number(parseInt(v))
-      console.log("totalScores", this.totalScores)
+      this.totalScores = Number(parseInt(v));
+      console.log("totalScores", this.totalScores);
     },
     getDataList(v) {
-      let _this = this
-      console.log("vvvvv", v)
-      v.forEach((item) => {
-        if (!item) return
-        console.log(item.name)
+      let _this = this;
+      console.log("vvvvv", v);
+      v.forEach(item => {
+        if (!item) return;
+        console.log(item.name);
         if (item.name === "总分" || item.name === "压力综合指数") {
-          _this.init(item.score)
-          _this.symptom = item.symptom
+          _this.init(item.score);
+          _this.symptom = item.symptom;
         }
         _this.resResult.push({
           name: item.name,
           score: item.score,
           reference: item.reference
-        })
+        });
         if (item.isTotalScoreExplain === "是") {
-          _this.improvementSuggestions = item.symptom
+          _this.improvementSuggestions = item.symptom;
         }
         // _this.symptomDescription.push({
         //   symptom: item.symptom,
@@ -220,21 +258,22 @@ export default {
         // });
 
         // 获取维度数据
-        this.symptomDescription.push(item)
-      })
-      console.log("symptomScore", this.symptomScore)
+        this.symptomDescription.push(item);
+      });
+      console.log("symptomScore", this.symptomScore);
     },
     getOldData(data) {
-      this.resResult = []
+      this.resResult = [];
       //获取旧版表格数据
-      let tableData = JSON.parse(data?.userRecordEntity?.testResult)[0].tableContext
-      tableData.forEach((item) => {
-        if (!item) return
+      let tableData = JSON.parse(data?.userRecordEntity?.testResult)[0]
+        .tableContext;
+      tableData.forEach(item => {
+        if (!item) return;
         this.resResult.push({
           name: item.name,
           score: item.value[0]
-        })
-      })
+        });
+      });
     },
     go1Back() {
       //管理员用户
@@ -243,115 +282,118 @@ export default {
         query: {
           phone: this.$route.query.phone
         }
-      })
+      });
     },
     backMain() {
       this.$router.push({
         name: "MainTable"
-      })
+      });
     },
     getAge(strAge) {
-      let birArr = strAge.split("-")
-      let birYear = birArr[0]
-      let birMonth = birArr[1]
-      let birDay = birArr[2]
+      let birArr = strAge.split("-");
+      let birYear = birArr[0];
+      let birMonth = birArr[1];
+      let birDay = birArr[2];
 
-      d = new Date()
-      let nowYear = d.getFullYear()
-      let nowMonth = d.getMonth() + 1 //记得加1
-      let nowDay = d.getDate()
-      let returnAge
+      d = new Date();
+      let nowYear = d.getFullYear();
+      let nowMonth = d.getMonth() + 1; //记得加1
+      let nowDay = d.getDate();
+      let returnAge;
 
       if (birArr == null) {
-        return false
+        return false;
       }
-      let d = new Date(birYear, birMonth - 1, birDay)
+      let d = new Date(birYear, birMonth - 1, birDay);
       if (
         d.getFullYear() == birYear &&
         d.getMonth() + 1 == birMonth &&
         d.getDate() == birDay
       ) {
         if (nowYear == birYear) {
-          returnAge = 0 //
+          returnAge = 0; //
         } else {
-          let ageDiff = nowYear - birYear //
+          let ageDiff = nowYear - birYear; //
           if (ageDiff > 0) {
             if (nowMonth == birMonth) {
-              let dayDiff = nowDay - birDay //
+              let dayDiff = nowDay - birDay; //
               if (dayDiff < 0) {
-                returnAge = ageDiff - 1
+                returnAge = ageDiff - 1;
               } else {
-                returnAge = ageDiff
+                returnAge = ageDiff;
               }
             } else {
-              let monthDiff = nowMonth - birMonth //
+              let monthDiff = nowMonth - birMonth; //
               if (monthDiff < 0) {
-                returnAge = ageDiff - 1
+                returnAge = ageDiff - 1;
               } else {
-                returnAge = ageDiff
+                returnAge = ageDiff;
               }
             }
           } else {
-            return "出生日期晚于今天，数据有误" //返回-1 表示出生日期输入错误 晚于今天
+            return "出生日期晚于今天，数据有误"; //返回-1 表示出生日期输入错误 晚于今天
           }
         }
-        return returnAge
+        return returnAge;
       } else {
-        return "输入的日期格式错误！"
+        return "输入的日期格式错误！";
       }
     },
 
     inits(id) {
-      let _this = this
-      _this.$http.get(`getRecordById?id=${ id }`, {}, (res) => {
+      let _this = this;
+      _this.$http.get(`getRecordById?id=${id}`, {}, res => {
         //当返回正确的话
         if (res.code == 200) {
-          console.log("雷达图上", res.data)
-          let version = JSON.parse(res.data?.userRecordEntity?.testResult)[0].version
+          console.log("雷达图上", res.data);
+          let version = JSON.parse(res.data?.userRecordEntity?.testResult)[0]
+            .version;
 
-          this.testResultData = res.data
-          this.iconInfo = res.data.subject.iconInfo
-          const datas = res.data.userRecordEntity.testResult
+          this.testResultData = res.data;
+          this.iconInfo = res.data.subject.iconInfo;
+          const datas = res.data.userRecordEntity.testResult;
 
           if (version == 2) {
             //专业报告新版
-            const resResultData = typeof datas == "string" ? JSON.parse(datas)[0].newTableContext : datas[0].newTableContext
+            const resResultData =
+              typeof datas == "string"
+                ? JSON.parse(datas)[0].newTableContext
+                : datas[0].newTableContext;
             if (resResultData.iconInfo != "") {
-              let indicatorList = resResultData.iconInfo.indicator
-              let referenceList = resResultData.iconInfo.reference || []
-              let scoreLists = resResultData.iconInfo.scoreList
-              _this.radarFuction(indicatorList, referenceList, scoreLists)
-
+              let indicatorList = resResultData.iconInfo.indicator;
+              let referenceList = resResultData.iconInfo.reference || [];
+              let scoreLists = resResultData.iconInfo.scoreList;
+              _this.radarFuction(indicatorList, referenceList, scoreLists);
             }
-            _this.resultList = resResultData.result
-            _this.getDataList(resResultData.result)
+            _this.resultList = resResultData.result;
+            _this.getDataList(resResultData.result);
           } else {
             //旧版本无专业报告
-            this.getOldData(res.data)
+            this.getOldData(res.data);
           }
 
-          console.log('res.data.userRecordEntity: ', res.data.userRecordEntity)
+          console.log("res.data.userRecordEntity: ", res.data.userRecordEntity);
 
           //先获取到测试者
-          let str = res.data.userRecordEntity.fileName
-          let testDate = res.data.userRecordEntity.testDate
+          let str = res.data.userRecordEntity.fileName;
+          let testDate = res.data.userRecordEntity.testDate;
           let yearMonthDay = testDate
             .replace("年", "/")
             .replace("月", "/")
             .replace("日", " ")
             .replace("时", ":")
             .replace("分", ":")
-            .replace("秒", "")
+            .replace("秒", "");
 
-          _this.time = yearMonthDay
-          _this.tableName = res.data.userRecordEntity.name
-          let sd = str.split("/")
-          let sp = sd[sd.length - 1]
-          let a = sp.split("-")
+          _this.time = yearMonthDay;
+          _this.tableName = res.data.userRecordEntity.name;
+          let sd = str.split("/");
+          let sp = sd[sd.length - 1];
+          let a = sp.split("-");
 
-          _this.name = res.data.userRecordEntity.phone
+          _this.name = res.data.userRecordEntity.phone;
 
-          _this.sex = a[4]
+          _this.sex = a[4];
           // let str = res.data.userRecordEntity.fileName;
           // _this.tableName = res.data.userRecordEntity.name;
           // let a = str.split("-");
@@ -388,39 +430,38 @@ export default {
           //   p[0];
           // let q = a[6].split(".");
 
-
           //新增查看记录列表页不显示页签激活状态,详情页显示对应激活状态-liwenlong-2022-04-06-start
-          _this.type = res.data?.userRecordEntity.type
+          _this.type = res.data?.userRecordEntity.type;
           _this.type == "0"
             ? (_this.$root.activeIndex = 0)
             : _this.type == "1"
-              ? (_this.$root.activeIndex = 1)
-              : (_this.$root.activeIndex = -1)
+            ? (_this.$root.activeIndex = 1)
+            : (_this.$root.activeIndex = -1);
           //新增查看记录列表页不显示页签激活状态,详情页显示对应激活状态-liwenlong-2022-04-06-end
-          _this.show = true
+          _this.show = true;
         }
 
         //if 是记忆测试，就导出多边形所需要的数据
         //表格内的数据导出
         if (_this.tableName == "记忆检查测试") {
-          console.log("resResult:")
-          let grade1 = res.data.userRecordEntity.testResults
-          console.log(res.data.userRecordEntity.testResults)
+          console.log("resResult:");
+          let grade1 = res.data.userRecordEntity.testResults;
+          console.log(res.data.userRecordEntity.testResults);
           //即时记忆总成绩
-          let grade2 = grade1.split(";")
-          console.log(grade2)
-          let grade3 = []
+          let grade2 = grade1.split(";");
+          console.log(grade2);
+          let grade3 = [];
           for (let i = 0; i < grade2.length; i++) {
-            grade3.push(grade2[i].split(":"))
+            grade3.push(grade2[i].split(":"));
           }
           //分离字符串
-          console.log(grade3)
+          console.log(grade3);
           //转换成数字
-          let grade4 = []
+          let grade4 = [];
           for (let i = 0; i < grade3.length; i++) {
-            grade4.push(parseInt(grade3[i][1]))
+            grade4.push(parseInt(grade3[i][1]));
           }
-          console.log(grade4)
+          console.log(grade4);
           _this.tabledata1 = [
             grade4[2],
             grade4[5],
@@ -429,7 +470,7 @@ export default {
             grade4[10],
             grade4[11],
             grade4[14]
-          ]
+          ];
           _this.tabledata2 = [
             grade4[20],
             grade4[23],
@@ -438,27 +479,27 @@ export default {
             grade4[28],
             0,
             0
-          ]
-          _this.drawLine()
+          ];
+          _this.drawLine();
         }
-      })
+      });
     },
     radarFuction(indicatorList, referenceList, scoreLists) {
-      let _this = this
+      let _this = this;
       if (indicatorList.length > 0) {
-        indicatorList.forEach((data) => {
-          _this.indicator.push({ text: data.text, max: Number(data.max) })
-        })
+        indicatorList.forEach(data => {
+          _this.indicator.push({ text: data.text, max: Number(data.max) });
+        });
       }
       if (referenceList.length > 0) {
-        referenceList.forEach((data) => {
-          _this.reference.push(Number(data))
-        })
+        referenceList.forEach(data => {
+          _this.reference.push(Number(data));
+        });
       }
       if (scoreLists.length > 0) {
-        scoreLists.forEach((data) => {
-          _this.scoreList.push(Number(data))
-        })
+        scoreLists.forEach(data => {
+          _this.scoreList.push(Number(data));
+        });
       }
     },
     //返回上一级
@@ -471,24 +512,24 @@ export default {
           params: {
             testPlanId: this.testPlanId
           }
-        })
-      } else if (this.from === '1') {
+        });
+      } else if (this.from === "1") {
         //来自普通测试列表
-        this.$router.push("/index/scaleTest")
+        this.$router.push("/index/scaleTest");
       } else {
         // 来自测试列表
-        this.$router.push("/testRecords")
+        this.$router.push("/testRecords");
       }
     },
     drawLine() {
       this.$nextTick(() => {
-        console.log("调用了drawLine方法")
+        console.log("调用了drawLine方法");
         // 基于准备好的dom，初始化echarts实例
         // var myChart = echarts.init(document.getElementById("myChart"));
-        let myChart = this.$echarts.init(document.getElementById("myChart"))
+        let myChart = this.$echarts.init(document.getElementById("myChart"));
         // 绘制图表
         var option = {
-          color: [ "#1AAC5C", "#FFE434" ],
+          color: ["#1AAC5C", "#FFE434"],
           title: {
             text: "记忆检查结果图：",
             x: "5%"
@@ -508,7 +549,7 @@ export default {
               },
               splitArea: {
                 areaStyle: {
-                  color: [ "#77EADF", "#26C3BE", "#64AFE9", "#428BD4" ],
+                  color: ["#77EADF", "#26C3BE", "#64AFE9", "#428BD4"],
                   shadowColor: "rgba(0, 0, 0, 0.2)",
                   shadowBlur: 10
                 }
@@ -534,14 +575,14 @@ export default {
                 { text: "视觉空间", max: 16 },
                 { text: "前瞻记忆", max: 160 }
               ],
-              center: [ "35%", "60%" ],
+              center: ["35%", "60%"],
               radius: 200,
               splitNumber: 0,
               axisName: {
                 color: "#fff",
                 backgroundColor: "#666",
                 borderRadius: 3,
-                padding: [ 3, 5 ]
+                padding: [3, 5]
               }
             }
           ],
@@ -560,8 +601,8 @@ export default {
                   },
                   label: {
                     show: true,
-                    formatter: function (params) {
-                      return params.value
+                    formatter: function(params) {
+                      return params.value;
                     }
                   },
                   areaStyle: {
@@ -582,8 +623,8 @@ export default {
                   name: "延时记忆",
                   label: {
                     show: true,
-                    formatter: function (params) {
-                      return params.value
+                    formatter: function(params) {
+                      return params.value;
                     }
                   },
                   areaStyle: {
@@ -602,28 +643,28 @@ export default {
               ]
             }
           ]
-        }
-        option && myChart.setOption(option)
-      })
+        };
+        option && myChart.setOption(option);
+      });
     },
     replaceTxt(str) {
-      return str.split("//")
+      return str.split("//");
     },
     // 下载
     download() {
-      window.location.href = `${ baseUrl }/result/download/testResult?id=${ this.id }`
+      window.location.href = `${baseUrl}/result/download/testResult?id=${this.id}`;
     },
     downloadFile() {
       if (this.tableName == "画钟测试") {
-        window.open(`${ baseUrl }result/download/CDTImg?id=${ this.id }`, "_blank")
+        window.open(`${baseUrl}result/download/CDTImg?id=${this.id}`, "_blank");
       }
       window.open(
-        `${ baseUrl }result/download/testResult?id=${ this.id }`,
+        `${baseUrl}result/download/testResult?id=${this.id}`,
         "_blank"
-      )
+      );
     }
   }
-}
+};
 </script>
 <style lang="scss" scoped>
 .main-outline {
@@ -633,13 +674,13 @@ export default {
     width: calc(100% - 24px);
     margin: 0 12px;
     height: 136px;
-    background: url('~@/assets/image/bg-result-top.png') no-repeat center;
+    background: url("~@/assets/image/bg-result-top.png") no-repeat center;
     background-size: 100% 100%;
     overflow: hidden;
 
     .line-name {
       font-size: 20px;
-      color: #007EFF;
+      color: #77cd60;
       padding-left: 20px;
       margin-top: 40px;
     }
@@ -667,7 +708,7 @@ export default {
     .table-th {
       height: 32px;
       font-size: 15px;
-      background: #007EFF;
+      background: #77cd60;
       color: #fff;
 
       th {
@@ -682,7 +723,7 @@ export default {
       padding: 7px;
       font-size: 14px;
       width: 50%;
-      background-color: #F0F3F6;
+      background-color: #f0f3f6;
       border-bottom: 1px solid white;
       border-right: 1px solid white;
       text-align: center;
@@ -697,7 +738,7 @@ export default {
       height: 27px;
       line-height: 27px;
       font-size: 15px;
-      color: #FFFFFF;
+      color: #ffffff;
       display: flex;
       flex-direction: row;
       justify-content: flex-start;
@@ -708,12 +749,12 @@ export default {
         width: 78px;
         height: 27px;
         padding-left: 8px;
-        background: #FFCD5A;
+        background: #77cd60;
         border-top-right-radius: 18px;
       }
 
       .dimension-name-desc {
-        color: #E8B643;
+        color: #77cd60;
         margin-left: 12px;
       }
     }
@@ -743,7 +784,7 @@ export default {
         .dimension-item-title::after {
           width: 100%;
           display: inline-block;
-          content: '';
+          content: "";
           /*这三个都不可以少*/
         }
 
@@ -853,7 +894,6 @@ export default {
 }
 
 .view-text {
-
   display: inline-block;
   word-break: keep-all;
   white-space: nowrap;
@@ -901,7 +941,8 @@ export default {
   /* padding: -20px; */
   width: 100%;
   /*background: #c7eaf0;*/
-  background: url('../../assets/test_result_bg.png') no-repeat center top, linear-gradient(180deg, #3ECEE6 0%, rgba(166, 232, 245, 0.63) 100%);
+  background: url("../../assets/test_result_bg.png") no-repeat center top,
+    linear-gradient(180deg, #3ecee6 0%, rgba(166, 232, 245, 0.63) 100%);
   background-size: 100% auto;
 }
 
@@ -915,7 +956,7 @@ export default {
   /*background: #ffffff;*/
   border-radius: 6px 6px 6px 6px;
   box-sizing: border-box;
-  padding: 15px 15px 50px;;
+  padding: 15px 15px 50px;
 }
 
 .test-img {
@@ -960,11 +1001,12 @@ export default {
   width: 100%;
 }
 
-.first-floor-name, .first-floor-title {
+.first-floor-name,
+.first-floor-title {
   font-size: 15px;
   font-family: PingFang SC-Bold, PingFang SC;
   font-weight: bold;
-  color: #FFFFFF;
+  color: #ffffff;
   text-align: left;
 }
 
@@ -975,20 +1017,26 @@ export default {
 .first-floor-time {
   font-size: 10px;
   font-family: Segoe UI-Regular, Segoe UI;
-  color: #FFFFFF;
+  color: #ffffff;
   text-align: left;
 }
 
-.second-floor, .third-floor, .fouth-floor, .fifth-floor {
+.second-floor,
+.third-floor,
+.fouth-floor,
+.fifth-floor {
   width: 100%;
-  background: #FFFFFF;
+  background: #ffffff;
   border-radius: 10px;
   overflow: hidden;
   box-sizing: border-box;
   padding: 0 8px 25px;
 }
 
-.second-floor-head, .third-floor-head, .fouth-floor-head, .fifth-floor-head {
+.second-floor-head,
+.third-floor-head,
+.fouth-floor-head,
+.fifth-floor-head {
   width: 100%;
   display: flex;
   flex-direction: row;
@@ -996,16 +1044,19 @@ export default {
   align-items: center;
 }
 
-.second-floor-title, .third-floor-title, .fouth-floor-title, .fifth-floor-title {
+.second-floor-title,
+.third-floor-title,
+.fouth-floor-title,
+.fifth-floor-title {
   width: 220px;
   height: 30px;
-  background: #F79ECC;
+  background: #f79ecc;
   text-align: center;
   line-height: 30px;
   font-size: 16px;
   font-family: PingFang SC-Bold, PingFang SC;
   font-weight: bold;
-  color: #FFFFFF;
+  color: #ffffff;
   border-radius: 0px 0px 10px 10px;
 }
 
@@ -1017,23 +1068,23 @@ export default {
 }
 
 .second-floor-table tr:nth-child(2n-1) {
-  background: #BFF2FC;
+  background: #bff2fc;
 }
 
 .second-floor-table tr:nth-child(2n) {
-  background: #ECFCFF;
+  background: #ecfcff;
 }
 
 .third-floor-title {
-  background: #F6A832;
+  background: #f6a832;
 }
 
 .fouth-floor-title {
-  background: #7CBF74;
+  background: #7cbf74;
 }
 
 .fifth-floor-title {
-  background: #2D9CFF;
+  background: #77cd60;
 }
 
 .third-floor-radar {

src/views/user/updatePassword.vue

@@ -1,54 +1,57 @@
 <template>
   <div class="app-container">
-    <Header/>
+    <Header />
     <div class="main-container">
-      <van-nav-bar
-        title="密码修改"
-        left-arrow
-        @click-left="goBack"
-      />
+      <van-nav-bar left-arrow title="密码修改" @click-left="goBack" />
       <div class="main-outline">
         <div class="top-field">
           <van-field
             v-model="oldPassword"
             clearable
-            type="password"
-            name="旧密码"
             label="请输入旧密码:"
-            placeholder="请输入旧密码"
             label-width="130"
+            name="旧密码"
+            placeholder="请输入旧密码"
+            type="password"
           />
           <van-field
             v-model="newPassword"
             clearable
-            type="password"
-            name="新密码"
             label="请输入新密码:"
-            placeholder="请输入新密码"
             label-width="130"
+            name="新密码"
+            placeholder="请输入新密码"
+            type="password"
           />
           <van-field
             v-model="confirmPassword"
             clearable
-            type="password"
-            name="确认密码"
             label="确认新密码:"
-            placeholder="请确认新密码"
             label-width="130"
+            name="确认密码"
+            placeholder="请确认新密码"
+            type="password"
           />
         </div>
 
-        <van-button class="btn-content" round block type="info" @click="submit">提交</van-button>
+        <van-button
+          block
+          class="btn-content"
+          round
+          type="primary"
+          @click="submit"
+          >提交</van-button
+        >
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { mapGetters } from "vuex"
-import Header from "@/components/header/index.vue"
+import { mapGetters } from "vuex";
+import Header from "@/components/header/index.vue";
 
-var md5 = require("md5")
+var md5 = require("md5");
 export default {
   name: "updatePassword",
   components: { Header },
@@ -57,70 +60,68 @@ export default {
       oldPassword: "",
       newPassword: "",
       confirmPassword: "",
-      pattern:
-        /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{8,16}$/
-    }
+      pattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{8,16}$/
+    };
   },
   computed: {
     ...mapGetters({
       getUserInfo: "getUserInfo"
     })
   },
-  created() {
-  },
+  created() {},
   methods: {
     // 返回
     goBack() {
-      this.$router.push("/index/userCenter")
+      this.$router.push("/index/userCenter");
     },
     //提交密码信息
     async submit() {
       if (!this.oldPassword) {
-        this.$toast("请输入旧密码")
-        return
+        this.$toast("请输入旧密码");
+        return;
       }
       if (!this.newPassword) {
-        this.$toast("请输入新密码")
-        return
+        this.$toast("请输入新密码");
+        return;
       } else if (this.newPassword.length < 6 || this.newPassword.length > 18) {
-        this.$toast("新密码长度需在6~18位之间")
-        return
+        this.$toast("新密码长度需在6~18位之间");
+        return;
       }
       if (!this.confirmPassword) {
-        this.$toast("请输入确认密码")
-        return
+        this.$toast("请输入确认密码");
+        return;
       } else if (
         this.confirmPassword.length < 6 ||
         this.confirmPassword.length > 18
       ) {
-        this.$toast("确认密码长度需在6~18位之间")
-        return
+        this.$toast("确认密码长度需在6~18位之间");
+        return;
       }
       if (this.confirmPassword !== this.newPassword) {
-        this.$toast("新密码两次输入不一致")
-        return
+        this.$toast("新密码两次输入不一致");
+        return;
       }
 
       let res = await this.$store.dispatch("updatePassword", {
         id: this.getUserInfo.id,
         oldPassword: md5(this.oldPassword),
         password: md5(this.newPassword)
-      })
+      });
       if (res && res.code == "200") {
         //清空本地存储数据
-        sessionStorage.clear()
-        this.$store.dispatch("setUserInfo", {})
+        sessionStorage.clear();
+        this.$store.dispatch("setUserInfo", {});
 
         this.$router.push({
           path: "/login"
-        })
-        this.$toast("密码修改成功")
+        });
+        this.$toast("密码修改成功");
       } else {
-        this.$toast.fail(res.msg)
+        this.$toast.fail(res.msg);
       }
     }
   }
-}
+};
 </script>
 
 <style scoped>

src/views/user/updateUserInfo.vue

@@ -226,7 +226,7 @@
           <!--          />-->
         </van-form>
 
-        <van-button block class="btn-bottom" type="info" @click="submitForm">
+        <van-button block class="btn-bottom" type="primary" @click="submitForm">
           提交
         </van-button>
       </div>