修改最后一环节的操作方式，实现拖拽效果

84702473

2023-03-07 efaccf60778159aa09681754eecd0e84b50b5f17

修改最后一环节的操作方式，实现拖拽效果

 package.json

@@ -26,6 +26,7 @@
    "vue-i18n": "^8.15.3",
    "vue-router": "^3.0.3",
    "vue-template-compiler": "^2.6.10",
    "vuedraggable": "^2.24.3",
    "vuex": "3.1.0"
  },
  "devDependencies": {

 src/assets/exam-paper/good.png

 src/assets/exam-paper/no.png

 src/assets/exam-paper/nogood.png

 src/assets/exam-paper/none.png

 src/assets/exam-paper/question.png

 src/assets/exam-paper/scale.png

 src/assets/exam-paper/yes.png

 src/lang/en.js

@@ -57,6 +57,7 @@
    values_finishValuesInfo:'The test is over! All your option data have been uploaded to the server and saved. You can close the browser and exit the answer interface.',
    values_nextStepTips_del_unnecessary:'Please delete redundant selections',
    values_nextStepTips_add_enough:'Please add enough choices',
    values_nextStepTips_choices_all:'Please make all choices',
    values_title:'Pre-Sort Your Responses',
    values_title_description:'For each statement,click the pictures that aligns most with your view.',
    next:'Next Step',
@@ -71,5 +72,6 @@
    values_select_exchange:'exchange',
    values_mostLikeMe:'Most like me ',
    values_mostUnLikeMe:'Most unlike me',
    values_no_select:'No picture optional'
    values_no_select:'No picture optional',
    values_pic_tmpArea:'Picture Staging Area'
}

 src/lang/zh.js

@@ -57,6 +57,7 @@
    values_finishValuesInfo: '测试结束！您的所有选项数据已经上传至服务器，并已保存好。您可以关闭浏览器，退出答题界面。',
    values_nextStepTips_del_unnecessary:'请删除多余的选择',
    values_nextStepTips_add_enough:'请添加足够的选择',
    values_nextStepTips_choices_all:'请做出所有的选择',
    values_title:'预先排序您的回答',
    values_title_description:'对于每个语句，单击与视图最对齐的图标。',
    next:'下一步',
@@ -71,6 +72,7 @@
    values_select_exchange:'对调',
    values_mostLikeMe:'最像我',
    values_mostUnLikeMe:'最不像我',
    values_no_select:'无图可选'
    values_no_select:'无图可选',
    values_pic_tmpArea:'图片暂存区'
    
}

 src/layout/indexold.vue

@@ -4,7 +4,7 @@
      <div class="head-user">
        <el-dropdown trigger="click" placement="bottom">
          <el-badge :is-dot="messageCount!==0" >
            <el-avatar  class="el-dropdown-avatar" size="medium"  :s0rc="userInfo.imagePath === null ? require('@/assets/avatar.png') : userInfo.imagePath"></el-avatar>
            <el-avatar  class="el-dropdown-avatar" size="medium"  :src="userInfo.imagePath === null ? require('@/assets/avatar.png') : userInfo.imagePath"></el-avatar>
          </el-badge>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="$router.push({path:'/user/index'})">个人中心</el-dropdown-item>

 src/views/exam/paper/values.vue

@@ -9,17 +9,28 @@
                    {{$t('values_title_description')}}
                </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 @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="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;">
                            <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>
@@ -30,7 +41,7 @@
                <div>
                    <div class="tag-group">
                        <span class="tag-group__title"
                            style="padding-right: 20px;">{{$t('values_cur_step')}}（{{step2SubStep}} /
                            style="padding-right: 20px;font-size: 26px;">{{$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"
@@ -40,7 +51,8 @@
                    </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)">
                            <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>
@@ -48,8 +60,9 @@
                            </span>
                        </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>
                            <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,44 +72,65 @@
                            / {{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" 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/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 style="height: auto;overflow: auto;">
                            <div class="mullinediv" style="" v-if="questionItems && questionItems.length>0">
                                <div v-for="question in questionItems" 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> -->
                                    </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 class="mullinediv" style="" v-if="sumUnSelectedNum()<=0">
                                {{$t('values_no_select')}}
                            </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 style="position: fixed;z-index: 999; width:90%; top: 56px;">
                    <div style="display: flex;justify-content: flex-end;">
                        <div style="padding: 0 10px;">{{$t('values_pic_tmpArea')}}</div>
                        <draggable animation="300" class="pic-tmparea-div"
                            style="background-color: #f5f7fa;border: 1px solid gray;padding: 10px;width: 50%;"
                            :list="step3EWEIArea[0]" group="article" @start="step3TmpAreaStart"
                            @end="step3MoveFromTmpAreaEnd">
                            <div v-for="q in step3EWEIArea[0]" :key="q.id" class="mullinediv-item2"
                                :qId="q.id">
                                <el-image :src="q.imgUrl" lazy :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;margin-top: 160px;">
                    <div style="display: inline-block;min-width: 150px;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'):''}}
@@ -104,28 +138,28 @@
                        </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>
                                <draggable animation="300" :class="item.itemOrder"
                                    :list="step3EWEIArea[item.itemOrder]"
                                    :options="{group:{name:'article'}}" filter=".undraggable"
                                    @end="step3MoveToTmpAreaEnd" :scoreRangeId="item.itemOrder">
                                    <div v-for="q in step3EWEIArea[item.itemOrder]" :key="q.id"
                                        class="mul-inlinediv-item" :qId="q.id">
                                        <el-image :src="q.imgUrl" lazy :preview-src-list="[q.imgUrl]" v-if="q.imgUrl">
                                        </el-image>
                                    </div>
                                </div>
                                    <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>
                                </draggable>
                            </div>
                        </div>

                    </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>
            </el-main>
        </el-container>
@@ -150,9 +184,13 @@
    import examPaperApi from '@/api/examPaper'
    import examPaperAnswerApi from '@/api/examPaperAnswer'
    import demographyApi from '@/api/demography'
    import draggable from 'vuedraggable'

    export default {
        name: 'values',
        components: {
            draggable
        },
        data() {
            return {
                step: 'step1',
@@ -181,6 +219,7 @@
                    "id": null,
                    "subjectId": null,
                },
                step3EWEIArea: [1],
                form: {
                    "id": 92,
                    "level": 1,
@@ -421,7 +460,6 @@
            }
        },
        created: function() {
            console.log("created......", this.$route.query.formDo)
            //console.log(".....................Test. config start......................")
            //if(this.memberToken == '' || this.memberToken == undefined) this.setMemberTocken("4bdcf437-185c-4f4e-9528-382c99509ea6")
            //console.log(".....................Test. config ednd.......................")
@@ -430,6 +468,7 @@
            _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
@@ -455,6 +494,7 @@
                        }
                        // 加载题目
                        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
@@ -528,6 +568,10 @@
        },
        mounted() {
            //console.log("mounted......")
            document.body.ondrop = function(event) {
                event.preventDefault();
                event.stopPropagation();
            }
        },
        beforeDestroy() {
            window.clearInterval(this.timer)
@@ -539,9 +583,23 @@
                this.questionItems.sort(function(i2, i1) {
                    return (i2.id - i1.id)
                })
                //console.log('step1_start...',this.questionItems)
                //test
                //this.initTestData()
                //回显，没有可选的时候，进入下一步
                let c = this.sumStep1UnSelectedNum()
                if (c <= 0 && this.itemSize > 0) {
                    this.step = "step2"
                    this.sortQuestions()
                    this.caculateScoreRangeSelectedById(this.getStep2StepItem(this.step2SubStep).itemOrder)
                }
            },
            step1_next() {
                let _this = this
                let c = this.sumStep1UnSelectedNum()
                if (c > 0) {
                    this.$message.error(_this.$t('values_nextStepTips_choices_all'))
                    return
                }
                this.step = "step2"
                this.sortQuestions()
                this.caculateScoreRangeSelectedById(this.getStep2StepItem(this.step2SubStep).itemOrder)
@@ -554,16 +612,18 @@
            step2_next() {
                let _this = this
                let stepItem = this.getStep2StepItem(this.step2SubStep)
                if (stepItem.selected == stepItem.quantity || this.sumUnSelectedNum() == 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,12 +638,12 @@
                }
            },
            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) {
                //console.log("step2Add....",value,qid,sid)
                this.resetQuestionItemsValueById(qid, "subjectId", sid) //借用subjectId，存储
                this.resetQuestionItemsSubjectIdById(qid, sid) //借用subjectId，存储
                this.caculateScoreRangeSelectedById(sid, 1)
            },
            step3Change(value, question) {
@@ -599,9 +659,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，存储
                    }
                    //清理
@@ -612,7 +672,50 @@
                    }
                }
            },
            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)
            },

            step3TmpAreaStart(ev) {
                //console.log('step3TmpAreaStart', ev)
            },
            step3MoveFromTmpAreaEnd(ev) {
                //console.log('step3MoveFromTmpAreaEnd s', ev, ev.to)
                // let options,qId
                // qId = ev.item.attributes.qId.value
                // for(let p of ev.to){
                //     if(this.isNotEmpty(p['options'])) {
                //         options = p['options']
                //         break
                //     }
                // }
                // let scoreRangeId = options.scoreRangeId
            },

            step3MoveToTmpAreaEnd(ev) {
                //console.log('step3MoveToTmpAreaEnd')
                //let qId = ev.item.attributes.qId.value
                //console.log('step3MoveToTmpAreaEnd end', this.step3EWEIArea)
            },

            sumStep2UnSelectedNum() {
                let count = 0
                for (let item of this.questionItems) {
                    if (this.isNull(item['subjectId'])) {
@@ -621,8 +724,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
@@ -631,6 +750,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) {
@@ -669,45 +789,64 @@
                switch (type) {
                    case 0: //0:最像我
                        this.questionItems.sort(function(i2, i1) {
                            return (i2.analyze == 'Like') ? -1 : 1
                            return (i2.content == 0) ? -1 : 1
                        })
                        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
                            return (i2.content == 2) ? -1 : 1
                        })
                        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) {
                        item["subjectId"] = value
                        item['content'] = this.getLikeTypeByScoreRangeItemOrder(value)
                    }
                }
                //console.log('resetQuestionItems...', id, value, this.questionItems)
            },
            //设置所有未有归属步骤（subjectId）的QuestionItems为新的归属步骤（subjectId）
            resetAllQuestionItemsValueByKeyWhenNull(key, value) {
                for (let item of this.questionItems) {
                    if (this.isNull(item[key])) {
@@ -719,6 +858,39 @@
                }
                //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) {
@@ -727,339 +899,33 @@
                    }
                }
                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)
            },
            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
@@ -1089,17 +955,31 @@
                    //设置每项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.initQuestionItems()
            },
            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) {
@@ -1180,7 +1060,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
@@ -1254,6 +1134,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))
@@ -1264,7 +1154,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,
@@ -1295,9 +1186,10 @@
                    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, //答题开始时间
@@ -1314,6 +1206,7 @@
            },

            submitSubAnswer: function() {
                console.log('submitSubAnswer...')
                let _this = this
                this.answer.answerItems[_this.order].endTime = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
                // 提交部分
@@ -1413,6 +1306,7 @@
                _this.submitDisable = false
            },
            isForFinish(i) {
                return false
                return i === this.answer.answerItems.length - 1 && (this.answer.answerItems[i].content !== null && this
                    .answer.answerItems[i].content !== '')
            },
@@ -1420,6 +1314,9 @@
                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']),
@@ -1450,13 +1347,14 @@
    .app-item-contain {
        margin-top: 45px;
    }

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

    .mul-inlinediv-box {
        overflow: auto;
        display: block;
@@ -1467,26 +1365,44 @@
        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;
        min-height: 100px;
        margin: 0 10px;
    }

    .mul-inlinediv-lineheight {
        line-height: 210px;
        padding: 10px 0;
        line-height: 100px;
        margin: 3px 0 4px 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 {
@@ -1494,14 +1410,24 @@
        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 {
@@ -1510,21 +1436,39 @@

    .mullinediv-item {
        display: flex;
        display:
            inline-block;
        width: 180px;
        display: inline-block;
        width: 360px;
        margin: 5px 4px;
        padding: 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 {
@@ -1534,4 +1478,10 @@
            width: 600px;
        }
    }

    .wrapper {
        display: flex;
        justify-content: center;
        width: 100%;
    }
</style>