TAI_OTS_BROWSER.git

			@@ -1,55 +1,120 @@
			<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 class="text-line" 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%;">
			<el-main class="">
			<div>
			{{$t('values_title_description')}}
			<div class="text-line" v-html="$t('values_title_description')"></div>
			<div class="text-line">{{$t('values_title_description_1')}}<img class="tools-button" src="@/assets/exam-paper/good.png" style="width: 15px;position: absolute;margin-top: 6px"/><span style="margin-left: 20px;">{{$t('values_title_description_1_2')}}</span></div>
			<div class="text-line">{{$t('values_title_description_2')}}<img class="tools-button" src="@/assets/exam-paper/nogood.png" style="width: 15px;position: absolute;margin-top: 6px"/><span style="margin-left: 20px;">{{$t('values_title_description_2_2')}}</span></div>
			<div class="text-line">{{$t('values_title_description_3')}}<img class="tools-button" src="@/assets/exam-paper/question.png" style="width: 15px;position: absolute;margin-top: 6px"/><span style="margin-left: 20px;">{{$t('values_title_description_3_2')}}</span></div>
			<div class="text-line">{{$t('values_title_description_4')}}<img class="tools-button" src="@/assets/exam-paper/scale.png" style="width: 15px;height: 15px;position: absolute;margin-top: 6px"/><span style="margin-left: 20px;">{{$t('values_title_description_4_2')}}</span></div>
			<div class="text-line">{{$t('values_title_description_5')}}</div>
			</div>

			<div style="display: flex;justify-content: flex-start;padding: 10px 0;">
			<el-button @click="step1_start" type="primary" v-if="!step1Start">{{$t('start')}}</el-button>
			<el-button style="margin-top: 12px;" @click="step1_next" v-if="(step1Start && itemSize>0)">
			{{$t('next')}}</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')}}
			</el-button>
			</div>
			<div class="selectCount">
			{{ questionItems.filter(obj=>obj.content===null).length + $t('values_title_description_6') }}
			</div>
			<div class="mullinediv" v-if="step1Start">
			<div v-for="question in questionItems" class="mullinediv-item" v-if="isNull(question.analyze)">
			<el-image :src="question.imgUrl" lazy :preview-src-list="[question.imgUrl]"></el-image>
			<div style="display: flex; justify-content: space-between;padding: 5px 10px;margin-top: -5px;">
			<i class="el-icon-success" @click="likeMe(question.id)"></i>
			<i class="el-icon-question" @click="iAmNotSure(question.id)"></i>
			<i class="el-icon-error" @click="unLikeMe(question.id)"></i>
			<div v-for="(question,index1) in questionItems" class="mullinediv-item"
			v-if="isNull(question.content)">
			<div style="display: flex; justify-content: flex-end;margin-right: -20px;margin-top: -10px;">
			<el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
			@click="previewImg('qImg'+question.id,question.id)"></el-image>
			</div>
			<el-image :ref="'qImg'+question.id" :src="question.imgUrl" lazy
			:preview-src-list="[question.imgUrl]"></el-image>
			<div style="display: flex; justify-content: space-between;">
			<el-image class="tools-button" :src="require('@/assets/exam-paper/nogood.png')"
			@click="unLikeMe(question.id)"></el-image>
			<el-image class="tools-button" :src="require('@/assets/exam-paper/question.png')"
			@click="iAmNotSure(question.id)"></el-image>
			<el-image class="tools-button" :src="require('@/assets/exam-paper/good.png')"
			@click="likeMe(question.id)"></el-image>
			</div>
			</div>
			</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-header class="">
			<h1>{{$t('values_step_2_title')}}</h1>
			</el-header>
			<el-main class="">
			<div>
			<div class="tag-group">
			<!-- <div class="tag-group" style="display: flex;">
			<span class="tag-group__title"
			style="padding-right: 20px;">{{$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>
			<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 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>
			<div class="text-line" style="text-indent: 2em;">
			<div v-if="step2SubStep == 1">
			{{ $t('values_step_tips_for_1') }}
			</div>
			<div
			v-if="(step2SubStep == step2ScoreRanges.length) && (step2ScoreRanges.length % 2 == 1)">
			{{$t('values_step_tips_for_0').replace('%N',getStep2StepItem(step2SubStep).quantity).replace('%C',getStep2StepItem(step2SubStep).stepName.toUpperCase())}}
			</div>
			<div v-else>
			{{$t('values_step_tips_for_2').replace('%N',getStep2StepItem(step2SubStep).quantity).replace('%C',getStep2StepItem(step2SubStep).stepName.toLowerCase())}}
			</div>
			<div class="text-line">{{$t('values_step_tips_for_3')}}<img class="tools-button" src="@/assets/exam-paper/yes.png" style="width: 15px;position: absolute;margin-top: 6px;margin-left: 5px;"/><span style="margin-left: 22px;">{{$t('values_step_tips_for_3_1')}}</span></div>
			<div class="text-line">{{$t('values_step_tips_for_4')}}<img class="tools-button" src="@/assets/exam-paper/no.png" style="width: 15px;position: absolute;margin-top: 6px;margin-left: 5px;"/><span style="margin-left: 22px;">{{$t('values_step_tips_for_4_1')}}</span></div>
			<div class="text-line">{{$t('values_step_tips_for_5')}}<img class="tools-button" src="@/assets/exam-paper/scale.png" style="width: 15px;position: absolute;margin-top: 6px;margin-left: 5px;"/><span style="margin-left: 22px;">{{$t('values_step_tips_for_5_1')}}</span></div>
			<div style="color: red;">
			{{$t('values_step_tips').replace('%N',getStep2StepItem(step2SubStep).quantity)}}
			</div>
			</div>
			<div style="display: flex;justify-content: flex-end;">
			<el-button style="" @click="step2_pre" v-if="step2SubStep>1">{{$t('pre')}}</el-button>
			<el-button style="" @click="step2_next">{{$t('next')}}</el-button>
			<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>
			</div>
			</div>
			</div>
			@@ -59,73 +124,268 @@
			/ {{getStep2StepItem(step2SubStep).quantity}}</span> </el-divider>
			<div style="">
			<div class="inlinediv">
			<div v-for="question in questionItems" class="mullinediv-item"
			<div v-for="(question,index2) in questionItems" class="mullinediv-item"
			v-if="getStep2StepItem(step2SubStep).itemOrder == question.subjectId">
			<el-image :src="question.imgUrl" lazy :preview-src-list="[question.imgUrl]"></el-image>
			<div style="display: flex;justify-content: center;padding: 5px 10px;">
			<!--/background-color: #c8c3c3;/-->
			<i class="el-icon-delete"
			@click="step2Delete(question.id,getStep2StepItem(step2SubStep).itemOrder)"></i>
			<!-- <i class="el-icon-zoom-in"></i> -->
			<el-image :ref="'q2SelectImg'+question.id" :src="question.imgUrl" :preview-src-list="[question.imgUrl]"></el-image>
			<div style="display: flex; justify-content: space-between;">
			<el-image class="tools-button" :src="require('@/assets/exam-paper/no.png')"
			@click="step2Delete(question.id,getStep2StepItem(step2SubStep).itemOrder)">
			</el-image>
			<el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
			@click="previewImg('q2SelectImg'+question.id)"></el-image>
			</div>
			</div>
			</div>
			</div>
			<el-divider content-position="left">{{$t('values_select_tips')}}</el-divider>




			<!-- 选择相似的图片 -->
			<div v-if="step2SubStep % 2 >= 1">
			<!-- 与我相似 -->
			<el-divider content-position="left">{{$t('values_select_tips_like')}}</el-divider>
			<div style="height: auto;overflow: auto;">
			<div class="mullinediv" style="" v-if="questionItems && questionItems.length>0">
			<div v-for="question in questionItems" class="mullinediv-item"
			<div class="mullinediv" style="" v-if="questionItems && questionItems.filter(obj=>Number(obj.content)===0).length>0">
			<div v-for="(question,index3) in questionItems.filter(obj=>Number(obj.content)===0)" class="mullinediv-item"
			v-if="isNull(question.subjectId)">
			<el-image :src="question.imgUrl" lazy :preview-src-list="[question.imgUrl]"></el-image>
			<div style="display: flex; justify-content: center;padding: 5px 10px;margin-top: -5px;">
			<el-checkbox
			@change="checked=>step2Add(checked,question.id,getStep2StepItem(step2SubStep).itemOrder)">
			{{$t('values_select')}}</el-checkbox>
			<!-- <i class="el-icon-check"></i> -->
			<!-- <i class="el-icon-zoom-in"></i> -->
			<el-image :ref="'q2Img'+question.id" :src="question.imgUrl" lazy
			:preview-src-list="[question.imgUrl]"></el-image>
			<div style="display: flex; justify-content: space-between;">
			<el-image class="tools-button" :src="require('@/assets/exam-paper/yes.png')"
			@click="step2Add(question.id,getStep2StepItem(step2SubStep).itemOrder)">
			</el-image>
			<el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
			@click="previewImg('q2Img'+question.id)"></el-image>
			</div>
			</div>
			</div>
			<div class="mullinediv" style="" v-if="sumUnSelectedNum()<=0">
			<div class="noSelect" style="" v-if="questionItems.filter(obj=>Number(obj.content)===0 && obj.subjectId===null).length==0">
			{{$t('values_no_select')}}
			</div>
			</div>

			<!-- 不确定 -->
			<el-divider content-position="left">{{$t('values_select_tips_neutral')}}</el-divider>
			<div style="height: auto;overflow: auto;">
			<div class="mullinediv" style="" v-if="questionItems && questionItems.filter(obj=>Number(obj.content)===1).length>0">
			<div v-for="(question,index3) in questionItems.filter(obj=>Number(obj.content)===1)" class="mullinediv-item"
			v-if="isNull(question.subjectId)">
			<el-image :ref="'q2Img'+question.id" :src="question.imgUrl" lazy
			:preview-src-list="[question.imgUrl]"></el-image>
			<div style="display: flex; justify-content: space-between;">
			<el-image class="tools-button" :src="require('@/assets/exam-paper/yes.png')"
			@click="step2Add(question.id,getStep2StepItem(step2SubStep).itemOrder)">
			</el-image>
			<el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
			@click="previewImg('q2Img'+question.id)"></el-image>
			</div>
			</div>
			</div>
			<div class="noSelect" style="" v-if="questionItems.filter(obj=>Number(obj.content)===1 && obj.subjectId===null).length==0">
			{{$t('values_no_select')}}
			</div>
			</div>

			<!-- 与我不相似 -->
			<el-divider content-position="left">{{$t('values_select_tips_unlike')}}</el-divider>
			<div style="height: auto;overflow: auto;">
			<div class="mullinediv" style="" v-if="questionItems && questionItems.filter(obj=>obj.content===2).length>0">
			<div v-for="(question,index3) in questionItems.filter(obj=>obj.content===2)" class="mullinediv-item"
			v-if="isNull(question.subjectId)">
			<el-image :ref="'q2Img'+question.id" :src="question.imgUrl" lazy
			:preview-src-list="[question.imgUrl]"></el-image>
			<div style="display: flex; justify-content: space-between;">
			<el-image class="tools-button" :src="require('@/assets/exam-paper/yes.png')"
			@click="step2Add(question.id,getStep2StepItem(step2SubStep).itemOrder)">
			</el-image>
			<el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
			@click="previewImg('q2Img'+question.id)"></el-image>
			</div>
			</div>
			</div>
			<!-- <div class="mullinediv" style="" v-if="sumStep2UnSelectedNum()<=0">
			{{$t('values_no_select')}}
			</div> -->
			<div class="noSelect" style="" v-if="questionItems.filter(obj=>Number(obj.content)===2 && obj.subjectId===null).length==0">
			{{$t('values_no_select')}}
			</div>
			</div>
			</div>

			<!-- 选择不相似的图片 -->
			<div v-if="step2SubStep % 2 == 0">
			<!-- 与我不相似 -->
			<el-divider content-position="left">{{$t('values_select_tips_unlike')}}</el-divider>
			<div style="height: auto;overflow: auto;">
			<div class="mullinediv" style="" v-if="questionItems && questionItems.filter(obj=>Number(obj.content)===2).length>0">
			<div v-for="(question,index3) in questionItems.filter(obj=>Number(obj.content)===2)" class="mullinediv-item"
			v-if="isNull(question.subjectId)">
			<el-image :ref="'q2Img'+question.id" :src="question.imgUrl" lazy
			:preview-src-list="[question.imgUrl]"></el-image>
			<div style="display: flex; justify-content: space-between;">
			<el-image class="tools-button" :src="require('@/assets/exam-paper/yes.png')"
			@click="step2Add(question.id,getStep2StepItem(step2SubStep).itemOrder)">
			</el-image>
			<el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
			@click="previewImg('q2Img'+question.id)"></el-image>
			</div>
			</div>
			</div>
			<div class="noSelect" style="" v-if="questionItems.filter(obj=>Number(obj.content)===2 && obj.subjectId===null).length==0">
			{{$t('values_no_select')}}
			</div>
			</div>

			<!-- 不确定 -->
			<el-divider content-position="left">{{$t('values_select_tips_neutral')}}</el-divider>
			<div style="height: auto;overflow: auto;">
			<div class="mullinediv" style="" v-if="questionItems && questionItems.filter(obj=>Number(obj.content)===1).length>0">
			<div v-for="(question,index3) in questionItems.filter(obj=>Number(obj.content)===1)" class="mullinediv-item"
			v-if="isNull(question.subjectId)">
			<el-image :ref="'q2Img'+question.id" :src="question.imgUrl" lazy
			:preview-src-list="[question.imgUrl]"></el-image>
			<div style="display: flex; justify-content: space-between;">
			<el-image class="tools-button" :src="require('@/assets/exam-paper/yes.png')"
			@click="step2Add(question.id,getStep2StepItem(step2SubStep).itemOrder)">
			</el-image>
			<el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
			@click="previewImg('q2Img'+question.id)"></el-image>
			</div>
			</div>
			</div>
			<div class="noSelect" style="" v-if="questionItems.filter(obj=>Number(obj.content)===1 && obj.subjectId===null).length==0">
			{{$t('values_no_select')}}
			</div>
			</div>

			<!-- 与我相似 -->
			<el-divider content-position="left">{{$t('values_select_tips_like')}}</el-divider>
			<div style="height: auto;overflow: auto;">
			<div class="mullinediv" style="" v-if="questionItems && questionItems.filter(obj=>Number(obj.content)===0).length>0">
			<div v-for="(question,index3) in questionItems.filter(obj=>Number(obj.content)===0)" class="mullinediv-item"
			v-if="isNull(question.subjectId)">
			<el-image :ref="'q2Img'+question.id" :src="question.imgUrl" lazy
			:preview-src-list="[question.imgUrl]"></el-image>
			<div style="display: flex; justify-content: space-between;">
			<el-image class="tools-button" :src="require('@/assets/exam-paper/yes.png')"
			@click="step2Add(question.id,getStep2StepItem(step2SubStep).itemOrder)">
			</el-image>
			<el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
			@click="previewImg('q2Img'+question.id)"></el-image>
			</div>
			</div>
			</div>
			<div class="noSelect" style="" v-if="questionItems.filter(obj=>Number(obj.content)===0 && obj.subjectId===null).length==0">
			{{$t('values_no_select')}}
			</div>
			</div>
			</div>
			<!-- <el-divider content-position="left">{{$t('values_select_tips')}}</el-divider>
			<div style="height: auto;overflow: auto;">
			<div class="mullinediv" style="" v-if="questionItems && questionItems.length>0">
			<div v-for="(question,index3) in questionItems" class="mullinediv-item"
			v-if="isNull(question.subjectId)">
			<el-image :ref="'q2Img'+question.id" :src="question.imgUrl" lazy
			:preview-src-list="[question.imgUrl]"></el-image>
			<div style="display: flex; justify-content: space-between;">
			<el-image class="tools-button" :src="require('@/assets/exam-paper/yes.png')"
			@click="step2Add(question.id,getStep2StepItem(step2SubStep).itemOrder)">
			</el-image>
			<el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
			@click="previewImg('q2Img'+question.id)"></el-image>
			</div>
			</div>
			</div>
			<div class="mullinediv" style="" v-if="sumStep2UnSelectedNum()<=0">
			{{$t('values_no_select')}}
			</div>
			</div> -->
			</div>
			</el-main>
			</el-container>
			<el-container class="app-item-contain step3" v-if="step === 'step3'">
			<el-main class="">
			<div style="display:flex;">
			<div style="display: inline-block;min-width: 110px;text-align: right;">
			<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.deviate}}
			</div>
			</div>
			<div class="mul-inlinediv-box">
			<div class="mul-inlinediv" v-for="item in step2ScoreRanges">
			<div class="mul-inlinediv-row">
			<div v-for="question in questionItems" class="mullinediv-item"
			v-if="question.subjectId == item.itemOrder">
			<el-image :src="question.imgUrl" lazy :preview-src-list="[question.imgUrl]">
			</el-image>
			<div style="display: flex;justify-content: center;padding: 5px 10px;">
			<!--/background-color: #c8c3c3;/-->
			<el-checkbox v-model="question['checked']"
			@change="checked=>step3Change(checked,question)"
			:disabled="(step3ChangeSrc.subjectId != question.subjectId \|\| step3ChangeSrc.id == question.id)?false:true">
			{{(step3ChangeSrc.id==null)?$t('values_select'):(question.id==step3ChangeSrc.id)?$t('values_select'):$t('values_select_exchange')}}
			</el-checkbox>
			</div>
			</div>
			<div style="position: fixed;z-index: 999; width:90%; top: 50px;">
			<div style="display: flex;justify-content: flex-end;padding: 10px;background-color: #f5f7fa;">
			<div class="text-line" style="padding-right: 20px;width:50%;">
			<div v-html="$t('values_pic_tmpArea_desc')">

			</div>
			<el-button type="primary" round style="height: fit-content;margin-top:5px"
			@click="step3_commit" :disabled="submitDisable">
			{{$t('commit')}}
			</el-button>
			</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'}}"
			@start="ev=>step3TmpAreaStart(ev,0)"
			@end="step3TmpAreaMoveEnd">
			<div v-for="q in step3EWEIArea[0]" :key="q.id" class="mullinediv-item2"
			:questionID="q.id" :questionIMGURL="q.imgUrl">
			<el-image :src="q.imgUrl" :preview-src-list="[q.imgUrl]" fit="fill"></el-image>
			</div>
			</draggable>
			<!-- <el-button type="primary" round style="height: fit-content;margin: 0 10px;"
			@click="step3_commit" :disabled="submitDisable">
			{{$t('commit')}}
			</el-button> -->
			</div>
			</div>
			<div style="display: flex;justify-content: center;">
			<el-button style="margin-top: 12px;" @click="step3_commit" :disabled="submitDisable">
			{{$t('commit')}}</el-button>
			<div style="display:flex;margin-top: 200px;">
			<div style="display: inline-block;min-width: 160px;text-align: right;padding-right: 5px;">
			<div class="mul-inlinediv-row mul-inlinediv-lineheight"
			v-for="(item,index) in step2ScoreRanges">
			<span v-if="item.stepName=='不确定是否相似'">
			不确定是否与你相似 <span v-if="item.step<step2ScoreRanges.length">{{$t('values_step_names_unit')}}</span>
			</span>
			<span v-else>
			{{$t('values_step_names_unit_pre')}}{{item.stepName}} <span v-if="item.step<step2ScoreRanges.length">{{$t('values_step_names_unit')}}</span>
			</span>
			</div>
			</div>
			<div style="display: inline-block;width: 20px;margin-top: 4px;">
			<div class="mul-inlinediv-row mul-inlinediv-lineheight mul-inlinediv-down"
			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">
			{{$t('values_step_names_unit')}}
			</div>
			</div>
			-->
			<div class="mul-inlinediv-box">

			<div class="mul-inlinediv" v-for="item in step2ScoreRanges">
			<div class="mul-inlinediv-row">
			<draggable animation="300" classa="pic-eweiarea-div" :class="'pic-eweiarea-div-'+item.itemOrder"
			:list="step3EWEIArea[item.itemOrder]"
			:options="{group:{name:'EWEIArea',pull:'clone'}}" filter=".undraggable"
			@end="ev=>step3EWEIAreaMoveEnd(ev,item.itemOrder)" :scoreRangeId="item.itemOrder">
			<div v-for="q in step3EWEIArea[item.itemOrder]" :key="q.id"
			class="mul-inlinediv-item" :questionID="q.id" :questionIMGURL="q.imgUrl">
			<el-image :src="q.imgUrl" :preview-src-list="[q.imgUrl]" v-if="q.imgUrl">
			</el-image>
			</div>
			<div v-if="item.quantity >= step3EWEIArea[item.itemOrder].length">
			<div class="mul-inlinediv-item"
			v-for="c in (item.quantity - step3EWEIArea[item.itemOrder].length)">
			<el-image :src="require('@/assets/exam-paper/none.png')" class="undraggable">
			</el-image>
			</div>
			</div>
			</draggable>
			</div>
			</div>

			</div>
			</div>
			</el-main>
			</el-container>
			@@ -150,12 +410,17 @@
			import examPaperApi from '@/api/examPaper'
			import examPaperAnswerApi from '@/api/examPaperAnswer'
			import demographyApi from '@/api/demography'
			import draggable from 'vuedraggable'
			import seedrandom from 'seedrandom'

			export default {
			name: 'values',
			components: {
			draggable
			},
			data() {
			return {
			step: 'step1',
			step: 'step0',
			step1Start: false,
			step1SelectedNum: 0,
			step2ScoreRanges: [
			@@ -174,6 +439,7 @@
			"completed": false,
			"questionReports": null,
			"step": 0,
			"stepName":'',
			"selected": 0
			}],
			step2SubStep: 1,
			@@ -181,210 +447,8 @@
			"id": null,
			"subjectId": null,
			},
			form: {
			"id": 92,
			"level": 1,
			"subjectId": null,
			"paperType": 1,
			"name": "VAQ",
			"suggestTime": null,
			"limitDateTime": null,
			"titleItems": [{
			"guide": "",
			"name": "",
			"description": "",
			"permanentId": null,
			"questionOrder": 0,
			"questionReport": null,
			"questionItems": [{
			"id": 786,
			"questionType": 1,
			"subjectId": null,
			"title": "麻将桌",
			"gradeLevel": null,
			"items": [{
			"prefix": "1",
			"content": "0",
			"score": "0"
			}],
			"analyze": null,
			"correctArray": null,
			"correct": null,
			"score": "0",
			"difficult": null,
			"itemOrder": 1,
			"questionOrder": 0,
			"permanentId": "VAQ00001",
			"questionReport": null,
			"startTime": null,
			"endTime": null,
			"partOrder": 1,
			"parentQuestionId": null,
			"template": null,
			"questionNumber": null,
			"content": null,
			"imgUrl": "http://127.0.0.1:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
			},
			{
			"id": 787,
			"questionType": 1,
			"subjectId": null,
			"title": "麻将桌2",
			"gradeLevel": null,
			"items": [{
			"prefix": "1",
			"content": "0",
			"score": "0"
			}],
			"analyze": null,
			"correctArray": null,
			"correct": null,
			"score": "0",
			"difficult": null,
			"itemOrder": 2,
			"questionOrder": 1,
			"permanentId": "VAQ00002",
			"questionReport": null,
			"startTime": null,
			"endTime": null,
			"partOrder": 2,
			"parentQuestionId": null,
			"template": null,
			"questionNumber": null,
			"content": null,
			"imgUrl": "http://127.0.0.1:8090/profile/images/2022/12/26/123f79ad0cc38507368c22b8a7ec9b09.jpg"
			},
			{
			"id": 788,
			"questionType": 1,
			"subjectId": null,
			"title": "测试1",
			"gradeLevel": null,
			"items": [{
			"prefix": "1",
			"content": "0",
			"score": "0"
			}],
			"analyze": null,
			"correctArray": null,
			"correct": null,
			"score": "0",
			"difficult": null,
			"itemOrder": 3,
			"questionOrder": 2,
			"permanentId": "VAQ00003",
			"questionReport": null,
			"startTime": null,
			"endTime": null,
			"partOrder": 3,
			"parentQuestionId": null,
			"template": null,
			"questionNumber": null,
			"content": null,
			"imgUrl": "http://127.0.0.1:8090/profile/images/2023/01/09/6b80baab47a9eba6ceeec5a723397109.jpg"
			},
			{
			"id": 789,
			"questionType": 1,
			"subjectId": null,
			"title": "测试2",
			"gradeLevel": null,
			"items": [{
			"prefix": "1",
			"content": "0",
			"score": "0"
			}],
			"analyze": null,
			"correctArray": null,
			"correct": null,
			"score": "0",
			"difficult": null,
			"itemOrder": 4,
			"questionOrder": 3,
			"permanentId": "VAQ00004",
			"questionReport": null,
			"startTime": null,
			"endTime": null,
			"partOrder": 4,
			"parentQuestionId": null,
			"template": null,
			"questionNumber": null,
			"content": null,
			"imgUrl": "http://127.0.0.1:8090/profile/images/2023/01/09/3f8e18280f1d47362c69b18e80ddf1a3.jpg"
			},
			{
			"id": 790,
			"questionType": 1,
			"subjectId": null,
			"title": "测试3",
			"gradeLevel": null,
			"items": [{
			"prefix": "1",
			"content": "0",
			"score": "0"
			}],
			"analyze": null,
			"correctArray": null,
			"correct": null,
			"score": "0",
			"difficult": null,
			"itemOrder": 5,
			"questionOrder": 4,
			"permanentId": "VAQ00005",
			"questionReport": null,
			"startTime": null,
			"endTime": null,
			"partOrder": 5,
			"parentQuestionId": null,
			"template": null,
			"questionNumber": null,
			"content": null,
			"imgUrl": "http://127.0.0.1:8090/profile/images/2023/01/09/447616cb14745241f0ac700b56d0770b.jpg"
			}
			],
			"startTime": null,
			"endTime": null,
			"parts": [],
			"scoreRanges": [{
			"itemOrder": 1,
			"quantity": 2,
			"score": 5,
			"completed": false,
			"questionReports": null
			},
			{
			"itemOrder": 2,
			"quantity": 1,
			"score": 10,
			"completed": false,
			"questionReports": null
			},
			{
			"itemOrder": 3,
			"quantity": 2,
			"score": 5,
			"completed": false,
			"questionReports": null
			}
			]
			}],
			"score": null,
			"guide": "VAQ",
			"questionOrder": [
			0,
			1,
			2,
			3,
			4
			],
			"parts": [],
			"questionTemplateId": "values",
			"reportTemplateId": "61",
			"memberName": "test4",
			"optionOrder": null,
			"timeOut": null,
			"jobDescriptionFile": null
			},
			step3EWEIArea: [1],
			form:{},
			formLoading: false,
			answer: {
			questionId: null,
			@@ -420,8 +484,9 @@

			}
			},
			created: function() {
			console.log("created......", this.$route.query.formDo, typeof(this.$route.query.formDo))
			//created: function() {
			mounted: function() {
			console.log(".....................mounted start......................")
			//console.log(".....................Test. config start......................")
			//if(this.memberToken == '' \|\| this.memberToken == undefined) this.setMemberTocken("4bdcf437-185c-4f4e-9528-382c99509ea6")
			//console.log(".....................Test. config ednd.......................")
			@@ -430,12 +495,17 @@
			_this.setLangFlag(false)
			_this.form = this.$route.query.formDo
			if (_this.form !== {} && _this.form !== undefined && typeof(_this.form) !== "string") {
			console.log("created......get from query", _this.form)
			_this.formLoading = true
			_this.remainTime = _this.form.suggestTime * 60
			_this.titleItemsLength = _this.form.titleItems.length
			_this.titleItems.push(_this.form.titleItems[0])
			_this.questionItem = _this.form.titleItems[0].questionItems[0]
			_this.questionItems = _this.form.titleItems[0].questionItems

			// 使用token生成随机数排序数组
			_this.tokenSort(_this.questionItems)

			_this.partOrder = _this.questionItem.partOrder
			_this.itemOrder = _this.form.titleItems[0].questionItems[0].itemOrder
			_this.itemSize = _this.form.titleItems[0].questionItems.length
			@@ -446,15 +516,18 @@
			_this.initStep2ScoreRanges(_this.form.titleItems[0].scoreRanges)

			} else {
			console.log(".....................mounted 刷新......................")
			_this.formLoading = true
			// 防止刷新成了不同的语言
			demographyApi.queryDemographyParamInfo(_this.memberToken).then(
			re => {
			if (re.response[0].langType !== null \|\| re.response[0].langType.trim() !== '') {
			_this.setLangType(re.response[0].langType)
			console.log("lang type",re.response[0].langType,_this.langType)
			}
			// 加载题目
			examPaperApi.select(_this.memberToken, _this.langType).then(re => {
			console.log("created......get from db", re.response)
			_this.form = re.response
			_this.remainTime = re.response.suggestTime * 60
			_this.titleItemsLength = _this.form.titleItems.length
			@@ -463,6 +536,10 @@
			_this.itemSize = _this.form.titleItems[0].questionItems.length
			_this.questionItem = _this.form.titleItems[0].questionItems[_this.order]
			_this.questionItems = _this.form.titleItems[0].questionItems

			// 使用token生成随机数排序数组
			_this.tokenSort(_this.questionItems)

			_this.partOrder = _this.questionItem.partOrder
			_this.initAnswer()
			_this.formLoading = false
			@@ -525,26 +602,78 @@
			}
			).catch(e => {})
			}

			document.body.ondrop = function(event) {
			event.preventDefault();
			event.stopPropagation();
			}
			},
			mounted() {
			//console.log("mounted......")
			},
			// mounted() {
			// //console.log("mounted......")
			// document.body.ondrop = function(event) {
			// event.preventDefault();
			// event.stopPropagation();
			// }
			// },
			beforeDestroy() {
			window.clearInterval(this.timer)
			},
			methods: {
			// 根据token生成随机数并根据随机数排序questionItems
			tokenSort(array) {
			// 使用token创建随机数生成器
			let rng = seedrandom(this.memberToken)
			if (array) {
			array.sort((a,b)=>{
			return rng() - 0.5
			})
			}
			console.log("list:", this.questionItems)
			},
			step0_next(){
			this.step = "step1"
			},
			step1_start() {
			this.step = "step1"
			this.step1Start = true
			this.questionItems.sort(function(i2, i1) {
			return (i2.id - i1.id)
			})
			//console.log('step1_start...',this.questionItems)
			// this.questionItems.sort(function(i2, i1) {
			// return (i2.id - i1.id)
			// })
			//test
			//this.initTestData()
			//回显，没有可选的时候，进入下一步
			let c = this.sumStep1UnSelectedNum()
			if (c <= 0 && this.itemSize > 0) {
			this.step1_next()
			}
			},
			step1_next() {
			this.step = "step2"
			this.sortQuestions()
			this.caculateScoreRangeSelectedById(this.getStep2StepItem(this.step2SubStep).itemOrder)
			let _this = this
			let c = this.sumStep1UnSelectedNum()
			if (c > 0) {
			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'),
			type: 'warning'
			}).then(() => {
			_this.step = "step2"
			_this.sortQuestions()
			_this.caculateScoreRangeSelectedById(this.getStep2StepItem(this.step2SubStep).itemOrder)
			}).catch(() => {

			});
			*/
			this.step2_0_next()
			},
			step2_0_next(){
			let _this = this
			_this.step = "step2"
			_this.sortQuestions()
			_this.caculateScoreRangeSelectedById(this.getStep2StepItem(this.step2SubStep).itemOrder)
			},
			step2_pre() {
			if (this.step2SubStep > 1) {
			@@ -554,16 +683,19 @@
			step2_next() {
			let _this = this
			let stepItem = this.getStep2StepItem(this.step2SubStep)
			if (stepItem.selected == stepItem.quantity \|\| this.sumUnSelectedNum() == 0) {
			console.log("questionItems.filter(obj=>Number(obj.content)===0)", this.questionItems.filter(obj=>Number(obj.content)===0))
			if (stepItem.selected == stepItem.quantity \|\| this.sumStep2UnSelectedNum() == 0) {
			_this.answer.verifyStatus = 2
			_this.submitSubAnswer()

			this.step2SubStep = this.step2SubStep + 1
			if(this.step2SubStep == this.step2ScoreRanges.length){//进入最后一步骤
			this.resetAllQuestionItemsValueByKeyWhenNull("subjectId",this.getStep2StepItem(this.step2SubStep).itemOrder)
			if (this.step2SubStep == this.step2ScoreRanges.length) { //进入最后一步骤
			this.resetAllQuestionItemsValueByKeyWhenNull("subjectId", this.getStep2StepItem(this.step2SubStep)
			.itemOrder)
			}
			if (this.step2SubStep > this.step2ScoreRanges.length) {//完成最后一步骤
			if (this.step2SubStep > this.step2ScoreRanges.length) { //完成最后一步骤
			this.step = "step3"
			this.buildStep3EWEIArea()
			}

			this.sortQuestions()
			@@ -578,16 +710,20 @@
			}
			},
			step2Delete(qid, sid) {
			this.resetQuestionItemsValueById(qid, "subjectId", null) //借用subjectId，存储
			this.resetQuestionItemsSubjectIdById(qid, null) //借用subjectId，存储
			this.caculateScoreRangeSelectedById(sid, -1)
			},
			step2Add(value, qid, sid) {
			step2Add(qid, sid) {
			let stepItem = this.getStep2StepItem(this.step2SubStep)
			if (stepItem.selected == stepItem.quantity \|\| this.sumStep2UnSelectedNum() == 0) {
			this.$message.error(this.$t('values_nextStepTips_del_unnecessary'))
			return;
			}
			//console.log("step2Add....",value,qid,sid)
			this.resetQuestionItemsValueById(qid, "subjectId", sid) //借用subjectId，存储
			this.resetQuestionItemsSubjectIdById(qid, sid) //借用subjectId，存储
			this.caculateScoreRangeSelectedById(sid, 1)
			},
			step3Change(value, question) {
			console.log('step3Change...', this.step3ChangeSrc)
			if (this.step3ChangeSrc.id == null) {
			//首次点击，临时存储
			this.step3ChangeSrc.id = question.id
			@@ -600,9 +736,9 @@
			//对调自己
			} else {
			//对调
			this.resetQuestionItemsValueById(this.step3ChangeSrc.id, "subjectId", question
			this.resetQuestionItemsSubjectIdById(this.step3ChangeSrc.id, question
			.subjectId) //借用subjectId，存储
			this.resetQuestionItemsValueById(question.id, "subjectId", this.step3ChangeSrc
			this.resetQuestionItemsSubjectIdById(question.id, this.step3ChangeSrc
			.subjectId) //借用subjectId，存储
			}
			//清理
			@@ -613,7 +749,88 @@
			}
			}
			},
			sumUnSelectedNum() {
			/**
			* 根据QuestionItems，构建二维图表数据
			*/
			buildStep3EWEIArea() {
			this.step3EWEIArea = [this.step2ScoreRanges.length + 1]
			this.step3EWEIArea[0] = []
			this.$set(this.step3EWEIArea, 0, this.step3EWEIArea[0])
			for (let item of this.step2ScoreRanges) {
			this.step3EWEIArea[item.itemOrder] = []
			for (let q = 1; q <= item.quantity; q++) {
			let t = this.getQuestionItemsByKey("subjectId", item.itemOrder, q)
			if (t.id) {
			this.step3EWEIArea[item.itemOrder].push(t)
			}
			}
			this.$set(this.step3EWEIArea, item.itemOrder, this.step3EWEIArea[item
			.itemOrder])
			}
			console.log('buildStep3EWEIArea', this.step3EWEIArea)
			},
			addStep3EWEIArea(index,question){
			//console.log('addStep3EWEIArea',index,question)
			this.step3EWEIArea[index].push(question)
			this.$set(this.step3EWEIArea, index, this.step3EWEIArea[index])
			},
			delStep3EWEIArea(index,question){
			//console.log('delStep3EWEIArea s',index,question,this.step3EWEIArea[index])
			for(let i=0;i<this.step3EWEIArea[index].length;i++){
			if(question.id == this.step3EWEIArea[index][i].id){
			this.step3EWEIArea[index].splice(i,1)
			}
			}
			this.$set(this.step3EWEIArea, index, this.step3EWEIArea[index])
			//console.log('delStep3EWEIArea e',this.step3EWEIArea[index])
			},
			hasStep3EWEIAreaOverflow(index,question){
			//console.log('hasStep3EWEIAreaOverflow e',this.step3EWEIArea[index])
			if(this.step3EWEIArea[index].length>this.step2ScoreRanges[index-1].quantity){
			return true
			}
			return false
			},

			step3TmpAreaStart(ev,i) {
			console.log('step3TmpAreaStart', ev,i)
			},
			step3TmpAreaMoveAdd(ev) {
			console.log('step3TmpAreaMoveAdd', ev)
			return false
			},
			step3TmpAreaMoveEnd(ev) {
			console.log('step3TmpAreaMoveEnd s', ev)
			console.log('step3TmpAreaMoveEnd from,to', ev.from.className,ev.to.className)
			let to = ev.to.className.replace("pic-eweiarea-div-","")
			let qId = ev.item.attributes.questionID.value
			let qImg = ev.item.attributes.questionIMGURL.value
			if("pic-tmparea-div"===ev.to.className){
			//this.delStep3EWEIArea(to,{'id':qId,'imgUrl':qImg})
			} else {
			let of = this.hasStep3EWEIAreaOverflow(to,{'id':qId,'imgUrl':qImg})
			if(of){
			this.delStep3EWEIArea(to,{'id':qId,'imgUrl':qImg})
			} else {
			this.delStep3EWEIArea(0,{'id':qId,'imgUrl':qImg})
			}
			}
			},

			step3EWEIAreaMoveEnd(ev,fid) {
			console.log('step3EWEIAreaMoveEnd',ev)
			console.log('step3EWEIAreaMoveEnd from,to,id', ev.from.className,ev.to.className,fid)
			let to = ev.to.className.replace("pic-eweiarea-div-","")
			let qId = ev.item.attributes.questionID.value
			let qImg = ev.item.attributes.questionIMGURL.value
			if("pic-tmparea-div"===ev.to.className){
			this.delStep3EWEIArea(fid,{'id':qId,'imgUrl':qImg})
			} else {
			if(fid != to) this.delStep3EWEIArea(to,{'id':qId,'imgUrl':qImg})
			}
			},

			sumStep2UnSelectedNum() {
			let count = 0
			for (let item of this.questionItems) {
			if (this.isNull(item['subjectId'])) {
			@@ -622,8 +839,24 @@
			}
			return count
			},
			sumStep1UnSelectedNum() {
			let count = 0
			for (let item of this.questionItems) {
			if (this.isNull(item['content'])) {
			count = count + 1
			}
			}
			return count
			},
			step3_commit() {
			let _this = this

			if (_this.step3EWEIArea[0].length > 0) {
			this.$message.error(_this.$t('values_nextStepTips_choices_all'))
			return
			}
			_this.resetAllQuestionItemsValueByEWEIArea()

			window.clearInterval(_this.timer)
			_this.submitDisable = true
			_this.formLoading = true
			@@ -632,6 +865,7 @@
			_this.submitAnswer(_this.$t('values_finishValuesInfo'))
			},
			getLikeTypeByScoreRangeItemOrder(itemOrder) {
			if (this.isNull(itemOrder)) return null;
			let step = 0
			for (let item of this.step2ScoreRanges) {
			if (item.itemOrder === itemOrder) {
			@@ -668,58 +902,124 @@
			sortQuestions() {
			let type = this.getLikeType(this.step2SubStep)
			switch (type) {
			case 0: //0:最像我
			this.questionItems.sort(function(i2, i1) {
			return (i2.analyze == 'Like') ? -1 : 1
			case 0: //0:最像我数字排序（数字和升序）
			this.questionItems.sort(function(a, b) {
			return a.content - b.content
			})
			break
			case 1: //1:有疑问
			this.questionItems.sort(function(i2, i1) {
			return (i2.analyze == 'NotSure') ? -1 : 1
			return (i2.content == 1) ? -1 : 1
			})
			break
			case 2: //2:最不像我
			this.questionItems.sort(function(i2, i1) {
			return (i2.analyze == 'UnLike') ? -1 : 1
			case 2: //2:最不像我数字排序（数字和降序）
			this.questionItems.sort(function(a, b) {
			return b.content - a.content
			})
			break
			}
			},

			likeMe(id) {
			let _this = this
			this.step1SelectedNum = this.step1SelectedNum + 1
			this.resetQuestionItemsValueById(id, "analyze", "Like") //借用analyze，存储
			this.resetQuestionItemsContentById(id, 0) //借用analyze，存储"Like"

			_this.answer.verifyStatus = 2
			_this.submitSubAnswer()
			},
			iAmNotSure(id) {
			let _this = this
			this.step1SelectedNum = this.step1SelectedNum + 1
			this.resetQuestionItemsValueById(id, "analyze", "NotSure")
			this.resetQuestionItemsContentById(id, 1) //"NotSure"

			_this.answer.verifyStatus = 2
			_this.submitSubAnswer()
			},
			unLikeMe(id) {
			let _this = this
			this.step1SelectedNum = this.step1SelectedNum + 1
			this.resetQuestionItemsValueById(id, "analyze", "UnLike")
			this.resetQuestionItemsContentById(id, 2) //"UnLike"

			_this.answer.verifyStatus = 2
			_this.submitSubAnswer()
			},
			resetQuestionItemsValueById(id, key, value) {
			resetQuestionItemsContentById(id, value) {
			for (let item of this.questionItems) {
			if (item.id === id) {
			item[key] = value
			if ("subjectId" == key) {
			item['content'] = this.getLikeTypeByScoreRangeItemOrder(value)
			}
			if (item.id == id) {
			item["content"] = value
			}
			}
			//console.log('resetQuestionItems...',id,key,value,this.questionItems)
			//console.log('resetQuestionItems...', id, value, this.questionItems)
			},
			resetQuestionItemsSubjectIdById(id, value) {
			for (let item of this.questionItems) {
			if (item.id == id) {
			// 如果为null，就是从选择中取消
			if (value == null) {
			item["subjectId"] = value
			item['content'] = item['tempContent']
			} else {
			if (item['content'] != null && item['content'] != undefined) {
			item['tempContent'] = item['content']
			}
			item["subjectId"] = value
			item['content'] = this.getLikeTypeByScoreRangeItemOrder(value)
			}

			console.log("更改content:", item)
			}
			}
			//console.log('resetQuestionItems...', id, value, this.questionItems)
			},
			//设置所有未有归属步骤（subjectId）的QuestionItems为新的归属步骤（subjectId）
			resetAllQuestionItemsValueByKeyWhenNull(key, value) {
			for (let item of this.questionItems) {
			if (this.isNull(item[key])) {
			item[key] = value
			if ("subjectId" == key) {
			if (item['content'] != null && item['content'] != undefined) {
			item['tempContent'] = item['content']
			}
			item['content'] = this.getLikeTypeByScoreRangeItemOrder(value)
			}
			}
			}
			//console.log('resetQuestionItems...',id,key,value,this.questionItems)
			},
			//根据二维图表数据重设QuestionItems的归属步骤（subjectId）
			resetAllQuestionItemsValueByEWEIArea() {
			for (let i = 1; i < this.step3EWEIArea.length; i++) {
			for (let q of this.step3EWEIArea[i]) {
			this.resetQuestionItemsSubjectIdById(q.id, i)
			}
			}
			console.log('resetQuestionItems...by EWEIArea', this.questionItems)
			},
			getQuestionItemsByKey(key, stepOrder, index) {
			let arr = []
			for (let item of this.questionItems) {
			if (!this.isNull(item[key])) {
			if (item[key] == stepOrder) {
			arr.push(item)
			}
			}
			}
			//console.log('getQuestionItemsByKey',key,stepOrder,index,arr,this.questionItems)
			if (index <= arr.length) {
			return arr[index - 1]
			}
			return {
			id: null,
			imgUrl: null,
			subjectId: null
			}
			},
			/**
			* 计算步骤id的已选择数量
			* @param {Object} id
			* @param {Object} value
			*/
			caculateScoreRangeSelectedById(id, value) {
			let sum = 0
			for (let item of this.questionItems) {
			@@ -728,339 +1028,37 @@
			}
			}
			for (let item of this.step2ScoreRanges) {
			if (item.itemOrder === id) {
			if (item.itemOrder == id) {
			item['selected'] = sum
			}
			}
			},
			initTestData() {
			let _this = this
			//for test
			_this.step2ScoreRanges = [].concat([{
			"itemOrder": 1,
			"quantity": 1,
			"score": 5,
			"completed": false,
			"questionReports": null
			},
			{
			"itemOrder": 2,
			"quantity": 2,
			"score": 5,
			"completed": false,
			"questionReports": null
			},
			{
			"itemOrder": 3,
			"quantity": 10,
			"score": 5,
			"completed": false,
			"questionReports": null
			},
			{
			"itemOrder": 4,
			"quantity": 2,
			"score": 5,
			"completed": false,
			"questionReports": null
			},
			{
			"itemOrder": 5,
			"quantity": 1,
			"score": 5,
			"completed": false,
			"questionReports": null
			},
			// {
			// "itemOrder": 6,
			// "quantity": 2,
			// "score": 5,
			// "completed": false,
			// "questionReports": null
			// },
			// {
			// "itemOrder": 7,
			// "quantity": 2,
			// "score": 5,
			// "completed": false,
			// "questionReports": null
			// },
			// {
			// "itemOrder": 8,
			// "quantity": 2,
			// "score": 5,
			// "completed": false,
			// "questionReports": null
			// },
			])

			_this.questionItems = _this.questionItems.concat([{
			"id": 100,
			"questionType": 1,
			"subjectId": 3,
			"title": "麻将桌",
			"gradeLevel": null,
			"items": [{
			"prefix": "1",
			"content": "0",
			"score": "0"
			}],
			"analyze": "Like",
			"correctArray": null,
			"correct": null,
			"score": "0",
			"difficult": null,
			"itemOrder": 1,
			"questionOrder": 0,
			"permanentId": "VAQ00001",
			"questionReport": null,
			"startTime": null,
			"endTime": null,
			"partOrder": 1,
			"parentQuestionId": null,
			"template": null,
			"questionNumber": null,
			"content": null,
			"imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
			},
			{
			"id": 101,
			"questionType": 1,
			"subjectId": 3,
			"title": "麻将桌",
			"gradeLevel": null,
			"items": [{
			"prefix": "1",
			"content": "0",
			"score": "0"
			}],
			"analyze": "UnLike",
			"correctArray": null,
			"correct": null,
			"score": "0",
			"difficult": null,
			"itemOrder": 1,
			"questionOrder": 0,
			"permanentId": "VAQ00001",
			"questionReport": null,
			"startTime": null,
			"endTime": null,
			"partOrder": 1,
			"parentQuestionId": null,
			"template": null,
			"questionNumber": null,
			"content": null,
			"imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
			},
			{
			"id": 102,
			"questionType": 1,
			"subjectId": 3,
			"title": "麻将桌",
			"gradeLevel": null,
			"items": [{
			"prefix": "1",
			"content": "0",
			"score": "0"
			}],
			"analyze": "NotSure",
			"correctArray": null,
			"correct": null,
			"score": "0",
			"difficult": null,
			"itemOrder": 1,
			"questionOrder": 0,
			"permanentId": "VAQ00001",
			"questionReport": null,
			"startTime": null,
			"endTime": null,
			"partOrder": 1,
			"parentQuestionId": null,
			"template": null,
			"questionNumber": null,
			"content": null,
			"imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
			},
			{
			"id": 103,
			"questionType": 1,
			"subjectId": 3,
			"title": "麻将桌",
			"gradeLevel": null,
			"items": [{
			"prefix": "1",
			"content": "0",
			"score": "0"
			}],
			"analyze": "Like",
			"correctArray": null,
			"correct": null,
			"score": "0",
			"difficult": null,
			"itemOrder": 1,
			"questionOrder": 0,
			"permanentId": "VAQ00001",
			"questionReport": null,
			"startTime": null,
			"endTime": null,
			"partOrder": 1,
			"parentQuestionId": null,
			"template": null,
			"questionNumber": null,
			"content": null,
			"imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
			},
			{
			"id": 104,
			"questionType": 1,
			"subjectId": 3,
			"title": "麻将桌",
			"gradeLevel": null,
			"items": [{
			"prefix": "1",
			"content": "0",
			"score": "0"
			}],
			"analyze": "UnLike",
			"correctArray": null,
			"correct": null,
			"score": "0",
			"difficult": null,
			"itemOrder": 1,
			"questionOrder": 0,
			"permanentId": "VAQ00001",
			"questionReport": null,
			"startTime": null,
			"endTime": null,
			"partOrder": 1,
			"parentQuestionId": null,
			"template": null,
			"questionNumber": null,
			"content": null,
			"imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
			},
			{
			"id": 105,
			"questionType": 1,
			"subjectId": 1,
			"title": "麻将桌",
			"gradeLevel": null,
			"items": [{
			"prefix": "1",
			"content": "0",
			"score": "0"
			}],
			"analyze": "NotSure",
			"correctArray": null,
			"correct": null,
			"score": "0",
			"difficult": null,
			"itemOrder": 1,
			"questionOrder": 0,
			"permanentId": "VAQ00001",
			"questionReport": null,
			"startTime": null,
			"endTime": null,
			"partOrder": 1,
			"parentQuestionId": null,
			"template": null,
			"questionNumber": null,
			"content": null,
			"imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
			},
			{
			"id": 106,
			"questionType": 1,
			"subjectId": 1,
			"title": "麻将桌",
			"gradeLevel": null,
			"items": [{
			"prefix": "1",
			"content": "0",
			"score": "0"
			}],
			"analyze": "Like",
			"correctArray": null,
			"correct": null,
			"score": "0",
			"difficult": null,
			"itemOrder": 1,
			"questionOrder": 0,
			"permanentId": "VAQ00001",
			"questionReport": null,
			"startTime": null,
			"endTime": null,
			"partOrder": 1,
			"parentQuestionId": null,
			"template": null,
			"questionNumber": null,
			"content": null,
			"imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
			},
			{
			"id": 107,
			"questionType": 1,
			"subjectId": 2,
			"title": "麻将桌",
			"gradeLevel": null,
			"items": [{
			"prefix": "1",
			"content": "0",
			"score": "0"
			}],
			"analyze": "NotSure",
			"correctArray": null,
			"correct": null,
			"score": "0",
			"difficult": null,
			"itemOrder": 1,
			"questionOrder": 0,
			"permanentId": "VAQ00001",
			"questionReport": null,
			"startTime": null,
			"endTime": null,
			"partOrder": 1,
			"parentQuestionId": null,
			"template": null,
			"questionNumber": null,
			"content": null,
			"imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
			},
			{
			"id": 108,
			"questionType": 1,
			"subjectId": 2,
			"title": "麻将桌",
			"gradeLevel": null,
			"items": [{
			"prefix": "1",
			"content": "0",
			"score": "0"
			}],
			"analyze": "NotSure",
			"correctArray": null,
			"correct": null,
			"score": "0",
			"difficult": null,
			"itemOrder": 1,
			"questionOrder": 0,
			"permanentId": "VAQ00001",
			"questionReport": null,
			"startTime": null,
			"endTime": null,
			"partOrder": 1,
			"parentQuestionId": null,
			"template": null,
			"questionNumber": null,
			"content": null,
			"imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
			},
			])
			//console.log('initTestData...s',this.questionItems)
			for (let item of this.questionItems) {
			item['content'] = 1
			}
			for (let i = 0; i < this.step2ScoreRanges.length; i++) {
			for (let j = 1; j <= this.step2ScoreRanges[i].quantity; j++) {
			//console.log('for',i,j,this.step2ScoreRanges,this.questionItems)
			for (let item of this.questionItems) {
			if (this.isNull(item["subjectId"])) {
			item["subjectId"] = this.step2ScoreRanges[i].itemOrder
			break
			}
			}
			}
			}
			console.log('initTestData...e', this.questionItems)
			},
			/**
			* 设置step2ScoreRanges子项的步骤顺序及正负距离值
			* @param {Object} arr
			*/
			initStep2ScoreRanges(arr) {
			//console.log('initStep2ScoreRanges...s', arr)
			let _this = this
			_this.step2ScoreRanges = _this.step2ScoreRanges.concat(arr)
			//this.initTestData()
			let s = 1
			let a = 2 //-2
			let max = _this.step2ScoreRanges.length
			@@ -1090,19 +1088,70 @@
			//设置每项step偏离最后step的正负距离值（奇数step正偏离，偶数step负偏离）
			if (_this.step2ScoreRanges[i]['step'] % 2 == 0) { //偶数
			deviate = (max4O - _this.step2ScoreRanges[i]['step']) - (max4O - _this.step2ScoreRanges[i][
			'step']) / 2
			'step'
			]) / 2
			_this.step2ScoreRanges[i]['deviate'] = 0 - deviate
			} else {
			deviate = (max4J - _this.step2ScoreRanges[i]['step']) - (max4J - _this.step2ScoreRanges[i][
			'step']) / 2
			'step'
			]) / 2
			_this.step2ScoreRanges[i]['deviate'] = deviate
			}
			//设置每项已选择的数量
			_this.step2ScoreRanges[i]['selected'] = 0
			}
			console.log('initStep2ScoreRanges...', this.step2ScoreRanges)
			//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 = "，"
			}
			//console.log('lang type',_this.langType)
			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
			for (let sr of _this.step2ScoreRanges) {
			if(_this.isNotEmpty(sr['questionReports'])){
			for(let q of sr.questionReports){
			_this.resetQuestionItemsSubjectIdById(q.questionId,sr.itemOrder)
			}
			}
			}
			console.log('initQuestionItems...e', this.questionItems)
			},
			getStep2StepTagType(step) {
			if (this.step2SubStep > step) {
			return ''
			} else if (this.step2SubStep == step) {
			return 'success'
			} else {
			return 'info'
			}
			},
			getStep2StepTagTypeName(step) {
			if (this.step2SubStep > step) {
			return ''
			} else if (this.step2SubStep == step) {
			@@ -1134,24 +1183,7 @@
			++_this.answer.doTime
			}, 1000)
			},
			questionCompleted(completed) {
			return this.enumFormat(this.doCompletedTag, completed)
			},
			goAnchor(selector) {
			let _this = this
			let num = parseInt(selector.substr(10)) - 1
			this.itemOrder = _this.form.titleItems[0].questionItems[num].itemOrder
			this.questionItem = _this.form.titleItems[0].questionItems[num]
			_this.order = num
			setTimeout(function() {
			_this.$el.querySelector(selector).scrollIntoView({
			behavior: 'instant',
			block: 'center',
			inline: 'nearest'
			})
			}, 200)
			_this.$refs['popovertag'].doClose()
			},

			initAnswer() {
			this.answer.id = this.form.id
			this.answer.questionOrder = this.form.questionOrder
			@@ -1181,7 +1213,7 @@

			// 初始化开始时间，设置第一个时间
			for (let i = 0; i < this.answer.answerItems.length; i++) {
			if (this.answer.answerItems[i].startTime == null \|\| this.answer.answerItems[i].startTime.trim() ===
			if (this.answer.answerItems[i].startTime == null \|\| this.answer.answerItems[i].startTime.trim() ==
			'') {
			this.answer.answerItems[i].startTime = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
			break
			@@ -1255,6 +1287,16 @@
			isEmpty(obj) {
			return !this.isNotEmpty(obj)
			},
			getContentByQuestionId(id) {
			let cont
			for (let item of this.questionItems) {
			if (item.id == id) {
			cont = item.content
			break
			}
			}
			return cont;
			},
			getSubmitAnswerValue(nowPartOrder) {
			let _this = this
			let answerSubmit = JSON.parse(JSON.stringify(_this.answer))
			@@ -1265,7 +1307,8 @@
			answerItem.startTime = ''
			}
			answerItem.completed = true
			//answerItem.content = this.getLikeTypeByScoreRangeItemOrder(answerItem.subjectId)
			answerItem.content = this.getContentByQuestionId(answerItem.questionId)
			//this.getLikeTypeByScoreRangeItemOrder(answerItem.subjectId)
			answerItem.questionReport = {
			questionOrder: answerItem.questionId,
			questionTitle: answerItem.title,
			@@ -1283,22 +1326,23 @@
			answerSubmit.partOrder = nowPartOrder
			answerSubmit.itemOrder = _this.itemOrder
			//add scoreRanges
			if (_this.step2SubStep >= _this.step2ScoreRanges.length) {
			if (_this.step2SubStep >= _this.step2ScoreRanges.length \|\| true) {//传递全部
			answerSubmit['scoreRanges'] = _this.form.titleItems[0].scoreRanges
			} else {
			let item = _this.getStep2StepItem(_this.step2SubStep)
			console.log('getStep2StepItem', _this.step2SubStep, item)
			//console.log('getStep2StepItem', _this.step2SubStep, item)
			answerSubmit['scoreRanges'] = []
			answerSubmit['scoreRanges'].push(item)
			}
			console.log('answerSubmit.scoreRanges=', answerSubmit['scoreRanges'])
			//console.log('answerSubmit.scoreRanges=', answerSubmit['scoreRanges'])
			for (let item of answerSubmit['scoreRanges']) {
			item['completed'] = true
			item['questionReports'] = []
			for (let question of _this.questionItems) {
			if (question.subjectId === item.itemOrder) {
			if (question.subjectId == item.itemOrder) {
			item['questionReports'].push({
			questionOrder: question.questionOrder, //题目ID
			questionId: question.id, //题目ID
			questionOrder: question.questionOrder, //题目序号
			questionTitle: question.questionTitle, //题目标题
			permanentId: question.permanentId, //题目永久编号
			startTime: question.startTime, //答题开始时间
			@@ -1306,35 +1350,35 @@
			langType: question.langType, //答题语言
			partOrder: question.partOrder, //分片
			imgUrl: question.imgUrl, //图片地址
			answer: question.content //题目答案
			answer: question.content //题目答案
			})
			}
			}
			}
			return answerSubmit
			},

			/*
			* 过程中的提交
			*/
			submitSubAnswer: function() {
			console.log('submitSubAnswer...')
			let _this = this
			this.answer.answerItems[_this.order].endTime = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
			//this.answer.answerItems[_this.order].endTime = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
			// 提交部分
			let answerSubmit = _this.getSubmitAnswerValue(_this.partOrder)
			let loading = _this.$loading({
			lock: false,
			text: _this.$t('uploadInfo'),
			spinner: 'el-icon-loading'
			})
			examPaperAnswerApi.answerSubmit(answerSubmit, _this.memberToken).then(re => {
			loading.close()
			if (re.code === 1) {
			console.log('answerSubmit...', re)
			//console.log('answerSubmit...', re)
			}
			_this.formLoading = false
			}).catch(e => {
			_this.reloadPage(e)
			loading.close()
			})
			},
			/**
			* 最后环节的提交
			* @param {Object} mess
			*/
			submitAnswer: function(mess) {
			let _this = this
			this.answer.answerItems[_this.order].endTime = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
			@@ -1401,8 +1445,6 @@
			} else {
			mes = JSON.stringify(e) + ',' + 'order:' + _this.order + ',' + e.message
			}
			// 调试用
			// _this.$router.push({ path: '/exam/exception', query: { name: _this.form.name, content: _this.$t('submitExceptionInfo') + '<br>' + mes } })
			_this.$router.push({
			path: '/exam/exception',
			query: {
			@@ -1414,20 +1456,22 @@
			_this.submitDisable = false
			},
			isForFinish(i) {
			return i === this.answer.answerItems.length - 1 && (this.answer.answerItems[i].content !== null && this
			.answer.answerItems[i].content !== '')
			return false
			//return i === this.answer.answerItems.length - 1 && (this.answer.answerItems[i].content !== null && this.answer.answerItems[i].content !== '')
			},
			isDiffPartOrder: function() {
			let _this = this
			return _this.form.titleItems[0].questionItems[_this.order].partOrder !== _this.form.titleItems[0]
			.questionItems[_this.order - 1].partOrder
			},
			previewImg(refName) {
			this.$refs[refName][0].showViewer = true
			},
			...mapMutations('user', ['setMemberTocken']),
			...mapMutations('user', ['setLangType']),
			...mapMutations('user', ['setLangFlag'])
			},
			computed: {
			...mapGetters('enumItem', ['enumFormat']),
			...mapState('enumItem', {
			doCompletedTag: state => state.exam.question.answer.doCompletedTag
			}),
			@@ -1451,43 +1495,68 @@
			.app-item-contain {
			margin-top: 45px;
			}

			.text-line {
			line-height: 1.5em;
			}

			.footer {
			position: absolute;
			position: fixed;
			z-index: 1000;
			bottom: 0px;
			}


			.mul-inlinediv-box {
			overflow: auto;
			display: block;
			-webkit-box-flex: 1;
			margin-left: 10px;
			}

			.mul-inlinediv {
			overflow-y: hidden;
			overflow-x: auto;
			white-space: nowrap;
			border: 1px solid gray;
			padding: 10px 0;
			//border: 1px solid gray;
			padding: 2px 0;
			width: fit-content;
			}

			.mul-inlinediv div div {
			display: inline-table;
			vertical-align: top;
			width: 180px;
			margin: 0 2px;
			width: 80px;
			height: 80px;
			min-width: 80px;
			min-height: 80px;
			margin: 0px;
			}

			.mul-inlinediv-row {
			min-height: 210px;
			margin: 0 10px;
			min-height: 100px;
			//margin: 0 10px;
			}

			.mul-inlinediv-lineheight {
			line-height: 210px;
			padding: 10px 0;
			line-height: 106px;
			//margin: 3px 0 4px 0;
			//margin: 2px 0;
			}

			.mul-inlinediv-item {
			display: flex;
			display: inline-block;
			border: 1px solid gray;
			width: 100px;
			height: 100px;
			padding: 10px;

			.tools-button {
			width: 20px;
			height: 20px;
			cursor: pointer;
			}
			}

			.inlinediv {
			@@ -1495,37 +1564,72 @@
			overflow-x: auto;
			white-space: nowrap;
			min-height: 180px;
			display: flex;
			padding: 10px 0px;
			//display: flex;
			}

			.inlinediv div {
			display: inline-table;
			vertical-align: top;
			width: 100px;
			margin: auto 2px;
			//display: inline-table;
			//vertical-align: top;
			//width: 360px;
			// margin: auto 2px;
			}

			.pic-tmparea-div {
			overflow-y: hidden;
			overflow-x: auto;
			white-space: nowrap;
			min-height: 180px;
			padding: 10px 0px;
			//display: flex;
			}

			.mullinediv {
			display: contents;
			width:100%;
			}
			.noSelect {
			width: 100%;
			text-align: center;
			color: #9f9f9f;
			font-size: 14px;
			}

			.mullinediv-item {
			display: flex;
			display:
			inline-block;
			width: 180px;
			margin: 5px 4px;
			display: inline-block;
			width: 360px;
			margin: 5px 20px 20px 5px;
			padding: 30px 30px 10px 30px;
			box-shadow: 1px 1px 1px grey, 0 0 5px grey, 0 0 10px grey;

			.tools-button {
			width: 20px;
			height: 20px;
			cursor: pointer;
			}
			}

			.mullinediv-item:hover {}
			.mullinediv-item2 {
			display: inline-block;
			width: 180px;
			height: 180px;
			// margin: 5px 4px;
			padding: 10px;
			box-shadow: 1px 1px 1px grey, 0 0 5px grey, 0 0 10px grey;

			div {
			height: 160px;
			}
			}

			img:hover {
			transform: scale(2);
			-ms-transform: scale(2);
			-webkit-transform: scale(2);
			-o-transform: scale(2);
			-moz-transform: scale(2);
			transition-duration: 0.5s;
			// transform: scale(2);
			// -ms-transform: scale(2);
			// -webkit-transform: scale(2);
			// -o-transform: scale(2);
			// -moz-transform: scale(2);
			// transition-duration: 0.5s;
			}

			.container {
			@@ -1535,4 +1639,43 @@
			width: 600px;
			}
			}

			.wrapper {
			display: flex;
			justify-content: center;
			width: 100%;
			}

			.mul-inlinediv-down {
			min-width: 16px;
			//line-height: 106px;
			height: 106px;
			background-size: 80% 100%;
			background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAABoCAYAAAAAYos6AAAACXBIWXMAABnWAAAZ1gEY0crtAAAGsGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIzLTAzLTIxVDIxOjM3OjQzKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMy0wMy0yMVQyMzowNDowMiswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMy0wMy0yMVQyMzowNDowMiswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowNjdjODYwZS1iZjZkLTNjNDUtYTllYi1jZTcxOTExMGRmZjMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDk3NTgwYjgtMDUwYy1jMDQ5LTk1ZDgtZmIwNmU1OTFjMTBlIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6MDk3NTgwYjgtMDUwYy1jMDQ5LTk1ZDgtZmIwNmU1OTFjMTBlIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDowOTc1ODBiOC0wNTBjLWMwNDktOTVkOC1mYjA2ZTU5MWMxMGUiIHN0RXZ0OndoZW49IjIwMjMtMDMtMjFUMjE6Mzc6NDMrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4wIChXaW5kb3dzKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YjlhZDEyMjEtM2MzOC0yMDQ5LTlhOWQtMmJjZjk4NmU5NTFhIiBzdEV2dDp3aGVuPSIyMDIzLTAzLTIxVDIyOjMxOjI4KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjA2N2M4NjBlLWJmNmQtM2M0NS1hOWViLWNlNzE5MTEwZGZmMyIgc3RFdnQ6d2hlbj0iMjAyMy0wMy0yMVQyMzowNDowMiswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ph/lkloAAAEzSURBVGiB7ZlBDoMwDASdXuBNPI+P8pTtpb3R2FUWaw1ZiUuFmBJ7HZsYAItc+77DzE6vbdsQecbLCGqthe6jwKIKwY7jWADkwFjSgzGWMAxjAaNvtg6TojBPdX1mlhuzYVAYxgLqxQzAkgZjSS9mHqi2qdNgAOZOzYHJpD4V5qmuz+6b+t8pJAXG0sNhAFaZmJU2dR6MBdRbxlRYekc8d+rLYVFJxkwjG1truTGjwqRSnwrr7dTRJQzDPE1TD2djus+i0ksQmZEp3WdpMHo23ncY9LIxzdS1q/4zR6baVV+mSb0E9kuX1EYPSINFgFQYQ8OnubVro5lIk0qH9YC1a6Mnekc89G/+gX2Ap7/TfTYPWCmwXpNavzYypPdmvZHpvpMnHSZzpFX7SypLtb4WyNbGN9sG+pv7TY3OAAAAAElFTkSuQmCC);
			}
			.mul-inlinediv-down:first-child {
			margin-top: 44px;
			height: 62px;
			min-height: 62px;
			background-size: 80% 100%;
			background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAABoCAYAAAAAYos6AAAACXBIWXMAABnWAAAZ1gEY0crtAAAGsGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIzLTAzLTIxVDIxOjM3OjQzKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMy0wMy0yMVQyMzowNDowMiswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMy0wMy0yMVQyMzowNDowMiswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowNjdjODYwZS1iZjZkLTNjNDUtYTllYi1jZTcxOTExMGRmZjMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDk3NTgwYjgtMDUwYy1jMDQ5LTk1ZDgtZmIwNmU1OTFjMTBlIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6MDk3NTgwYjgtMDUwYy1jMDQ5LTk1ZDgtZmIwNmU1OTFjMTBlIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDowOTc1ODBiOC0wNTBjLWMwNDktOTVkOC1mYjA2ZTU5MWMxMGUiIHN0RXZ0OndoZW49IjIwMjMtMDMtMjFUMjE6Mzc6NDMrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4wIChXaW5kb3dzKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YjlhZDEyMjEtM2MzOC0yMDQ5LTlhOWQtMmJjZjk4NmU5NTFhIiBzdEV2dDp3aGVuPSIyMDIzLTAzLTIxVDIyOjMxOjI4KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjA2N2M4NjBlLWJmNmQtM2M0NS1hOWViLWNlNzE5MTEwZGZmMyIgc3RFdnQ6d2hlbj0iMjAyMy0wMy0yMVQyMzowNDowMiswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ph/lkloAAAEzSURBVGiB7ZlBDoMwDASdXuBNPI+P8pTtpb3R2FUWaw1ZiUuFmBJ7HZsYAItc+77DzE6vbdsQecbLCGqthe6jwKIKwY7jWADkwFjSgzGWMAxjAaNvtg6TojBPdX1mlhuzYVAYxgLqxQzAkgZjSS9mHqi2qdNgAOZOzYHJpD4V5qmuz+6b+t8pJAXG0sNhAFaZmJU2dR6MBdRbxlRYekc8d+rLYVFJxkwjG1truTGjwqRSnwrr7dTRJQzDPE1TD2djus+i0ksQmZEp3WdpMHo23ncY9LIxzdS1q/4zR6baVV+mSb0E9kuX1EYPSINFgFQYQ8OnubVro5lIk0qH9YC1a6Mnekc89G/+gX2Ap7/TfTYPWCmwXpNavzYypPdmvZHpvpMnHSZzpFX7SypLtb4WyNbGN9sG+pv7TY3OAAAAAElFTkSuQmCC);
			}
			.mul-inlinediv-down:last-child {
			background-size: 82% 60%;
			background-repeat: no-repeat;
			background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAA4CAYAAAAM7IPNAAAACXBIWXMAABnWAAAZ1gEY0crtAAAGrWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIzLTAzLTIxVDIxOjQxOjE3KzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMy0wMy0yMVQyMzowMzoyNyswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMy0wMy0yMVQyMzowMzoyNyswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxMzgzOTg1Zi03OGUwLTU2NGQtYmVlZi1mNmI5YjNkMDRmOWMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ZTY2NWMzZTQtYjM4Yi05MjQ0LThiNTUtYTczMTQ4NGQzN2UwIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZTY2NWMzZTQtYjM4Yi05MjQ0LThiNTUtYTczMTQ4NGQzN2UwIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplNjY1YzNlNC1iMzhiLTkyNDQtOGI1NS1hNzMxNDg0ZDM3ZTAiIHN0RXZ0OndoZW49IjIwMjMtMDMtMjFUMjE6NDE6MTcrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4wIChXaW5kb3dzKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MDQyZDFjNWEtOTZmZS1lMzQ1LTlkN2EtM2NhY2I4YjAyODA3IiBzdEV2dDp3aGVuPSIyMDIzLTAzLTIxVDIyOjQyKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjEzODM5ODVmLTc4ZTAtNTY0ZC1iZWVmLWY2YjliM2QwNGY5YyIgc3RFdnQ6d2hlbj0iMjAyMy0wMy0yMVQyMzowMzoyNyswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pn/gmj0AAAR7SURBVFiF7ZffSyNXFMfPmNikE7OpP5BUEidmmMmMEyc6Mkj8kUSxIT745ItPBQsFoQ99Kbj9A4pKn31SVrq4rKAvSgpFqBCMoaQ0mmgslm7UWA3+qCVZTVC33j64W3RN4kSnUpb9wn2Ye+bezz33Hu49BxBCcFsbHx//3OPxIAC40ViWRQMDAxNS5imCB5QkGEJIgRB6GFg+YRgGGIY9DKwQSd3Gh4PJBZQcILlsr8/sb9lgckmWbXw3o1GqV5JhEoCvZIXJIVlCX1bYa2BOm6zRKNt1FY1GyycnJ3uj0Wj5XSe57Qbxer2fLC8vf6xMJpOV0Wj0eSQSearX638jSTJoMplCHMf9KRGUtX9hYcG2sbHRuLm5KaTT6Y9cLteosri4+Oz09HRyYmLiU4VCAXV1deByuYaOjo4m29rawgAAp6en2ouLi6yTIoTg/Pwcf/O9tLRkWFtb6/D5fJ8Fg0Hn1tYWuN1uaGtr+04piuKLg4ODUa/X2xuLxSAQCMDq6urj6enpxxaLJWS325+vr6+3ptPprLCzszPY2dlhx8bGvohEIp6VlRX39vb2B6lUCk5OTkCr1YLD4fiapmm/EgCAJMmfWZZ9cXR0RO7t7UEymYT9/X1IJBJCPB4XUqkU7O/vZ4UdHh5CKBQSdnd3hXg8DolEAo6PjwEAQKPRgMlkAqvVOkdRVObfzGd4eHiwqakpawZ110YQBOrv7/8xFosprmVXDodjnKbpUNbl31FGoxE6OztHampqLqP1al43ODj4rcFgQEql8t5e6XQ61NfXF8iZN9I07ed5HlQq1b29MplMwLKs72rfNZjFYvE7nc4hHMfhvhJF0V9fX//9tc63U+S5ublWq9WKVCrVnbZPoVAgHMfRyMjIV7em3wRB/GKz2cJlZWV38kir1QLHcUBR1E9v227AaJrOtLe3jxoMhjvBKisrwe12PzEYDKs3jNmqjfX19Q97enp+LzQqMQxDTqfzVSAQYCVXMTRNZxiG8VVXVxfklV6vB4vF4rfb7b9ms+d8z3ie/4Hn+YJgNE2DzWbz5rLnhDU2Ns7Y7fahQmCiKE61tLQ8KxhGkuQZTdOLDMNASUlJXoharQaCIIBl2XmbzZYoGAYAQBDEcmtrq7+8PP8jrtVqQRAEIEkymO+/vLCGhoY/uru7v9Hr9XlhFRUV0NXV9aXRaAzn/VFK4d3b27ui0+myhrtGo0Fut/uvcDhcKUsBX1tb6yMIIqutqqoKOI6b53k+++t6RZJgoihO1dfXZz0PjuOgubk5ZwQWDPN4PD6r1TqP4zgUFV0OwTAM1Go11NbWPhUEYUY2GAAARVGLLMuCRqMBAIDi4mKgKAosFovPbDbLW3mazeZgV1fXk4qKCgAAwHEcOjo6Zmia9kudQ1I0vmk+n88miiIqKipCVVVVaHZ21lPIeKXkVQGAw+EIMwwTymQygl6vf0lR1GIh4wuCAVzemY8ePRJKS0unGIZ5+Z/CmpubnzEM41Or1QWBAAAwucohKfr/lbnvYe9h7x7sHwGftes0162GAAAAAElFTkSuQmCC);
			}

			.selectCount {
			width: 100%;
			height: 40px;
			line-height: 40px;
			background: #3c8dbc;
			border-radius: 5px;
			text-align: center;
			font-size: 18px;
			color: #fff;
			font-weight: bold;
			margin-bottom: 20px;
			}
			</style>