84702473
2023-04-12 bb19eace15bc3edceee523555fac871002b778f4
src/views/exam/paper/values.vue
@@ -1,5 +1,16 @@
<template>
   <div>
      <el-container class="app-item-contain step1" v-if="step === 'step0'">
         <el-header class="">
            <h1>{{$t('values_step_0_title')}}</h1>
         </el-header>
         <el-main class="">
            <div v-html="$t('values_step_0_content')"></div>
            <el-row class="do-align-center">
              <el-button @click="step0_next" type="primary" round>{{$t('startDo')}}</el-button>
            </el-row>
         </el-main>
      </el-container>
      <el-container class="app-item-contain step1" v-if="step === 'step1'">
         <el-header class="">
            <h1>{{$t('values_title')}}</h1>
@@ -41,33 +52,53 @@
            </div>
         </el-main>
      </el-container>
      <el-container class="app-item-contain step1" v-if="step === 'step2-0'">
         <el-header class="">
            <h1>{{$t('values_step_2_title')}}</h1>
         </el-header>
         <el-main class="">
            <div v-html="$t('values_step_2_content')"></div>
            <el-row class="do-align-center">
              <el-button @click="step2_0_next" type="primary" round>{{$t('startDo')}}</el-button>
            </el-row>
         </el-main>
      </el-container>
      <el-container class="app-item-contain step2" v-if="step === 'step2'">
         <el-main class="">
            <div>
               <div class="tag-group">
               <div class="tag-group" style="display: flex;">
                  <span class="tag-group__title"
                     style="padding-right: 20px;font-size: 26px;">{{$t('values_cur_step')}}({{step2SubStep}} /
                     style="padding-right: 10px;font-size: 26px;margin: auto 0px;">{{$t('values_cur_step')}}({{step2SubStep}} /
                     {{step2ScoreRanges.length}})</span>
                  <el-tag v-for="item in step2ScoreRanges" :key="item.itemOrder"
                     :type="getStep2StepTagType(item.step)" style="margin: 0 2px;font-size: 26px;" size="large"
                     effect="light">
                     {{ item.quantity }}
                  </el-tag>
                  <div>
                        <div style="display: flex;padding: 5px 0;">
                        <div v-for="item in step2ScoreRanges" :key="item.itemOrder" style="margin: 0 2px;font-size: 12px;width: 100px;text-align: center;" size="large">
                           {{ item.stepName }}
                        </div>
                        </div>
                        <div>
                        <el-tag v-for="item in step2ScoreRanges" :key="item.itemOrder"
                           :type="getStep2StepTagType(item.step)" style="margin: 0 2px;font-size: 26px;width: 100px;text-align: center;" size="large"
                           effect="light">
                           {{ item.quantity }}
                        </el-tag>
                        </div>
                     </div>
               </div>
               <div style="display: flex;justify-content: space-between;">
                  <div style="line-height: 50px;text-indent: 2em;">
                     <div
                        v-if="(step2SubStep == step2ScoreRanges.length) && (step2ScoreRanges.length % 2 == 1)">
                        {{$t('values_step_tips_for_3').replace('%N',getStep2StepItem(step2SubStep).quantity)}}
                        {{$t('values_step_tips_for_3').replace('%N',getStep2StepItem(step2SubStep).quantity).replace('%C',getStep2StepItem(step2SubStep).stepName)}}
                     </div>
                     <div v-else>
                        {{(step2SubStep % 2 == 1)?$t('values_step_tips_for_1').replace('%N',getStep2StepItem(step2SubStep).quantity):$t('values_step_tips_for_2').replace('%N',getStep2StepItem(step2SubStep).quantity)}}
                        {{$t('values_step_tips_for_1').replace('%N',getStep2StepItem(step2SubStep).quantity).replace('%C',getStep2StepItem(step2SubStep).stepName)}}
                     </div>
                     <div style="color: red;">
                        {{$t('values_step_tips')}}
                     </div>
                  </div>
                  <div style="">
                  <div style="margin-top: auto;">
                     <el-button type="primary" round @click="step2_pre" v-if="step2SubStep>1">{{$t('pre')}}
                     </el-button>
                     <el-button type="primary" round @click="step2_next">{{$t('next')}}</el-button>
@@ -121,7 +152,7 @@
            <div style="position: fixed;z-index: 999; width:90%; top: 56px;">
               <div style="display: flex;justify-content: flex-end;padding: 10px;background-color: #f5f7fa;">
                  <div style="padding-right: 20px;width:50%;" v-html="$t('values_pic_tmpArea_desc')"></div>
                  <div style="padding: 0 10px;">{{$t('values_pic_tmpArea')}}</div>
                  <div style="padding: 0 10px;width:80px;">{{$t('values_pic_tmpArea')}}</div>
                  <draggable animation="300" class="pic-tmparea-div"
                     style="border: 1px solid gray;padding: 10px;width: 45%;"
                     :list="step3EWEIArea[0]" :options="{group:{name:'EWEIArea',pull:'clone'}}" 
@@ -138,11 +169,11 @@
                  </el-button>
               </div>
            </div>
            <div style="display:flex;margin-top: 160px;">
               <div style="display: inline-block;min-width: 150px;text-align: right;">
            <div style="display:flex;margin-top: 200px;">
               <div style="display: inline-block;min-width: 150px;text-align: right;padding-right: 5px;">
                  <div class="mul-inlinediv-row mul-inlinediv-lineheight" 
                     v-for="(item,index) in step2ScoreRanges">
                     {{(index == 0)?$t('values_mostLikeMe'):' '}}{{(index == (step2ScoreRanges.length-1))?$t('values_mostUnLikeMe'):' '}}&nbsp;&nbsp;
                     {{item.stepName}}
                  </div>
               </div>
               <div style="display: inline-block;width: 20px;margin-top: 4px;">
@@ -150,12 +181,14 @@
                     v-for="(item,index) in step2ScoreRanges">
                  </div>
               </div>
               <!--
               <div style="display: inline-block;min-width: 20px;text-align: right;">
                  <div class="mul-inlinediv-row mul-inlinediv-lineheight" 
                     v-for="(item,index) in step2ScoreRanges">
                     {{item.deviate}}
                  </div>
               </div>
               -->
               <div class="mul-inlinediv-box">
                  <div class="mul-inlinediv" v-for="item in step2ScoreRanges">
@@ -214,7 +247,7 @@
      },
      data() {
         return {
            step: 'step1',
            step: 'step0',
            step1Start: false,
            step1SelectedNum: 0,
            step2ScoreRanges: [
@@ -233,6 +266,7 @@
               "completed": false,
               "questionReports": null,
               "step": 0,
               "stepName":'',
               "selected": 0
            }],
            step2SubStep: 1,
@@ -598,6 +632,9 @@
         window.clearInterval(this.timer)
      },
      methods: {
         step0_next(){
            this.step = "step1"
         },
         step1_start() {
            this.step = "step1"
            this.step1Start = true
@@ -609,9 +646,7 @@
            //回显,没有可选的时候,进入下一步
            let c = this.sumStep1UnSelectedNum()
            if (c <= 0 && this.itemSize > 0) {
               this.step = "step2"
               this.sortQuestions()
               this.caculateScoreRangeSelectedById(this.getStep2StepItem(this.step2SubStep).itemOrder)
               this.step1_next()
            }
         },
         step1_next() {
@@ -621,6 +656,7 @@
               this.$message.error(_this.$t('values_nextStepTips_choices_all'))
               return
            }
            /*
            this.$confirm(_this.$t('values_nextStepTips_tips'), _this.$t('prompt'), {
               confirmButtonText: _this.$t('determine'),
               cancelButtonText: _this.$t('cancel'),
@@ -632,7 +668,14 @@
        }).catch(() => {
            
        });
            */
            this.step = "step2-0"
         },
         step2_0_next(){
            let _this = this
            _this.step = "step2"
            _this.sortQuestions()
            _this.caculateScoreRangeSelectedById(this.getStep2StepItem(this.step2SubStep).itemOrder)
         },
         step2_pre() {
            if (this.step2SubStep > 1) {
@@ -990,6 +1033,10 @@
            }
            console.log('initTestData...e', this.questionItems)
         },
         /**
          * 设置step2ScoreRanges子项的步骤顺序及正负距离值
          * @param {Object} arr
          */
         initStep2ScoreRanges(arr) {
            //console.log('initStep2ScoreRanges...s', arr)
            let _this = this
@@ -1036,7 +1083,34 @@
               _this.step2ScoreRanges[i]['selected'] = 0
            }
            console.log('initStep2ScoreRanges...e', this.step2ScoreRanges)
            _this.initStep2ScoreRangesStepName()
            _this.initQuestionItems()
         },
         initStep2ScoreRangesStepName(){
            let _this = this
            let max = _this.step2ScoreRanges.length
            let splitChar = ","
            if(_this.$t('values_step_names').indexOf(",")>=0){
               splitChar = ","
            }
            let names = _this.$t('values_step_names').split(splitChar)
            console.log('initStep2ScoreRangesStepName',names)
            for (let i = 0; i < _this.step2ScoreRanges.length; i++) {
               if(_this.step2ScoreRanges[i]['step'] > names.length){
                  _this.step2ScoreRanges[i]['stepName'] = names[names.length-1]
               } else {
                  _this.step2ScoreRanges[i]['stepName'] = names[_this.step2ScoreRanges[i]['step']-1]
               }
               //设置最后的Step的StepName为固定值
               if(_this.step2ScoreRanges[i]['step'] >= max){
                  if(max % 2 == 0){//偶数
                  } else {//奇数
                     _this.step2ScoreRanges[i]['stepName'] = names[names.length-1]
                  }
               }
            }
            console.log('initStep2ScoreRangesStepName',_this.step2ScoreRanges)
         },
         initQuestionItems(){
            let _this = this
@@ -1058,6 +1132,15 @@
               return 'info'
            }
         },
         getStep2StepTagTypeName(step) {
            if (this.step2SubStep > step) {
               return ''
            } else if (this.step2SubStep == step) {
               return 'success'
            } else {
               return 'info'
            }
         },
         getStep2StepItem(step) {
            //console.log('getStep2StepItem',step,this.step2ScoreRanges)
            let _this = this