| | |
| | | <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> |
| | | </el-header> |
| | | <el-main class="" style="padding-top: 3%;"> |
| | | <div v-html="$t('values_title_description')"> |
| | | <el-main class=""> |
| | | <div> |
| | | <div v-html="$t('values_title_description')"></div> |
| | | <div>{{$t('values_title_description_1')}}<img class="tools-button" src="@/assets/exam-paper/good.png" style="width: 15px;"/></div> |
| | | <div>{{$t('values_title_description_2')}}<img class="tools-button" src="@/assets/exam-paper/nogood.png" style="width: 15px;"/></div> |
| | | <div>{{$t('values_title_description_3')}}<img class="tools-button" src="@/assets/exam-paper/question.png" style="width: 15px;"/></div> |
| | | <div>{{$t('values_title_description_4')}}<img class="tools-button" src="@/assets/exam-paper/scale.png" style="width: 15px;"/>{{$t('values_title_description_4_2')}}</div> |
| | | </div> |
| | | |
| | | <div style="display: flex;justify-content: flex-start;padding: 10px 0;"> |
| | | <el-button @click="step1_start" type="primary" round v-if="!step1Start">{{$t('start')}}</el-button> |
| | | <el-button style="margin-top: 12px;" @click="step1_start" type="primary" round v-if="!step1Start">{{$t('start')}}</el-button> |
| | | <el-button style="margin-top: 12px;" type="primary" round @click="step1_next" |
| | | v-if="(step1Start && itemSize>0)"> |
| | | {{$t('next')}} |
| | |
| | | </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;"> |
| | | <span |
| | | <div |
| | | v-if="(step2SubStep == step2ScoreRanges.length) && (step2ScoreRanges.length % 2 == 1)"> |
| | | {{$t('values_step_tips_for_3').replace('%N',getStep2StepItem(step2SubStep).quantity)}} |
| | | </span> |
| | | <span 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)}} |
| | | </span> |
| | | {{$t('values_step_tips_for_3').replace('%N',getStep2StepItem(step2SubStep).quantity).replace('%C',getStep2StepItem(step2SubStep).stepName)}} |
| | | </div> |
| | | <div v-else> |
| | | {{$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="display: flex;justify-content: flex-end;"> |
| | | <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> |
| | |
| | | <el-main class=""> |
| | | <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;" v-html="$t('values_pic_tmpArea_desc')"></div> |
| | | <div style="padding: 0 10px;">{{$t('values_pic_tmpArea')}}</div> |
| | | <div style="padding-right: 20px;width:50%;" v-html="$t('values_pic_tmpArea_desc')"></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: 50%;" |
| | | style="border: 1px solid gray;padding: 10px;width: 45%;" |
| | | :list="step3EWEIArea[0]" :options="{group:{name:'EWEIArea',pull:'clone'}}" |
| | | @start="ev=>step3TmpAreaStart(ev,0)" |
| | | @end="step3TmpAreaMoveEnd"> |
| | |
| | | </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'):' '}} |
| | | {{item.stepName}} |
| | | </div> |
| | | </div> |
| | | <div style="display: inline-block;width: 20px;margin-top: 4px;"> |
| | |
| | | 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"> |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | step: 'step1', |
| | | step: 'step0', |
| | | step1Start: false, |
| | | step1SelectedNum: 0, |
| | | step2ScoreRanges: [ |
| | |
| | | "completed": false, |
| | | "questionReports": null, |
| | | "step": 0, |
| | | "stepName":'', |
| | | "selected": 0 |
| | | }], |
| | | step2SubStep: 1, |
| | |
| | | window.clearInterval(this.timer) |
| | | }, |
| | | methods: { |
| | | step0_next(){ |
| | | this.step = "step1" |
| | | }, |
| | | step1_start() { |
| | | this.step = "step1" |
| | | this.step1Start = true |
| | |
| | | //回显,没有可选的时候,进入下一步 |
| | | 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() { |
| | |
| | | this.$message.error(_this.$t('values_nextStepTips_choices_all')) |
| | | return |
| | | } |
| | | this.step = "step2" |
| | | this.sortQuestions() |
| | | this.caculateScoreRangeSelectedById(this.getStep2StepItem(this.step2SubStep).itemOrder) |
| | | /* |
| | | this.$confirm(_this.$t('values_nextStepTips_tips'), _this.$t('prompt'), { |
| | | confirmButtonText: _this.$t('determine'), |
| | | cancelButtonText: _this.$t('cancel'), |
| | | type: 'warning' |
| | | }).then(() => { |
| | | _this.step = "step2" |
| | | _this.sortQuestions() |
| | | _this.caculateScoreRangeSelectedById(this.getStep2StepItem(this.step2SubStep).itemOrder) |
| | | }).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) { |
| | |
| | | } |
| | | console.log('initTestData...e', this.questionItems) |
| | | }, |
| | | /** |
| | | * 设置step2ScoreRanges子项的步骤顺序及正负距离值 |
| | | * @param {Object} arr |
| | | */ |
| | | initStep2ScoreRanges(arr) { |
| | | //console.log('initStep2ScoreRanges...s', arr) |
| | | let _this = this |
| | |
| | | _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 |
| | |
| | | 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 |