From bb19eace15bc3edceee523555fac871002b778f4 Mon Sep 17 00:00:00 2001 From: 84702473 <84702473@qq.com> Date: 星期三, 12 四月 2023 18:07:57 +0800 Subject: [PATCH] 增加提示页面,增加提示栏目信息 --- src/views/exam/paper/values.vue | 139 +++++++++++++++++++++++++++++++++++++-------- 1 files changed, 113 insertions(+), 26 deletions(-) diff --git a/src/views/exam/paper/values.vue b/src/views/exam/paper/values.vue index 7a4c865..59dc52e 100644 --- a/src/views/exam/paper/values.vue +++ b/src/views/exam/paper/values.vue @@ -1,15 +1,27 @@ <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=""> <div> - <div>{{$t('values_title_description')}}</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;"> @@ -40,30 +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;"> - <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> @@ -116,10 +151,10 @@ <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"> @@ -134,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'):' '}} + {{item.stepName}} </div> </div> <div style="display: inline-block;width: 20px;margin-top: 4px;"> @@ -146,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"> @@ -210,7 +247,7 @@ }, data() { return { - step: 'step1', + step: 'step0', step1Start: false, step1SelectedNum: 0, step2ScoreRanges: [ @@ -229,6 +266,7 @@ "completed": false, "questionReports": null, "step": 0, + "stepName":'', "selected": 0 }], step2SubStep: 1, @@ -594,6 +632,9 @@ window.clearInterval(this.timer) }, methods: { + step0_next(){ + this.step = "step1" + }, step1_start() { this.step = "step1" this.step1Start = true @@ -605,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() { @@ -617,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'), @@ -628,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) { @@ -986,6 +1033,10 @@ } console.log('initTestData...e', this.questionItems) }, + /** + * 璁剧疆step2ScoreRanges瀛愰」鐨勬楠ら『搴忓強姝h礋璺濈鍊� + * @param {Object} arr + */ initStep2ScoreRanges(arr) { //console.log('initStep2ScoreRanges...s', arr) let _this = this @@ -1032,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鐨凷tepName涓哄浐瀹氬�� + 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 @@ -1054,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 -- Gitblit v1.9.1