[测评系统]--前端(用户答题页面)
yj
2024-11-25 a778d5e53e74b2170e37607b2536a957dbc1d664
合并本地修改
8个文件已修改
172 ■■■■ 已修改文件
src/lang/en.js 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/lang/th.js 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/layout/index.vue 4 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/demography/index.vue 5 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/demography/langOption.vue 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/demography/login.vue 14 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/exam/components/QuestionIntelligenceEdit.vue 78 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/exam/paper/intelligence.vue 65 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/lang/en.js
@@ -29,7 +29,7 @@
  finishSubmit: 'You have completed the work behavior questionnaire, and the data has been successfully uploaded to the server and saved. Thank you.',
  selectData: 'Date',
  startDo: 'Next',
  openJobDesc: '问卷作答说明',
  openJobDesc: 'Job Description',
  startDo_apifan: 'Start the Test',
  second: ' second ',
  min: ' minute ',
src/lang/th.js
@@ -29,7 +29,7 @@
  finishSubmit: 'You have completed the work behavior questionnaire, and the data has been successfully uploaded to the server and saved. Thank you.',
  selectData: 'Date',
  startDo: 'Start the Test',
  openJobDesc: '问卷作答说明',
  openJobDesc: 'Job Description',
  startDo_apifan: 'Start the Test',
  second: ' second ',
  min: ' minute ',
src/layout/index.vue
@@ -25,8 +25,8 @@
    <el-main class="student-main" style="margin-top:20px;">
      <router-view/>
    </el-main>
    <el-footer height="340" class="student-footer">
    </el-footer>
    <!-- <el-footer height="340" class="student-footer">
    </el-footer> -->
  </el-container>
</template>
src/views/demography/index.vue
@@ -116,6 +116,8 @@
    const langType = this.$route.query.langType
    if (langType && (langType === 'Chinese' || langType === 'English' || langType === 'Thai')) {
      this.setLangType(langType)
    } else {
      this.setLangType('English')
    }
  },
  beforeDestroy () {
@@ -155,8 +157,7 @@
                  _this.$router.push({ path: '/exam/' + _this.doUrl })
                  return
                }
                // _this.$router.push({ path: '/guide/index', query: { formDo: _this.formDo } })
                _this.$router.push({ path: '/guide/index' })
                _this.$router.push({ path: '/guide/index', query: { formDo: _this.formDo } })
              }).catch(e => {
                _this.$message.error(_this.$t('noquestionMsg'))
              })
src/views/demography/langOption.vue
@@ -77,7 +77,7 @@
    submitLangOption: function () {
      let _this = this
      _this.setLangType(_this.langSelectValue)
      _this.$router.push({ path: '/demography/fill/index', query: { demographyMenber: _this.memberToken, isStart: false, langType: _this.langSelectValue } })
      _this.$router.push({ path: '/demography/fill/index', query: { demographyMenber: _this.memberToken, isStart: false, langType: _this.langType } })
      window.clearInterval(this.timer)
    },
    getLangAndRportTemplateId () {
src/views/demography/login.vue
@@ -62,7 +62,7 @@
        reParam => {
          if (reParam.code !== 1) {
            // 职业兴趣报告特殊化处理 只有中文
            if (_this.doUrl === 'career_interests' || _this.doUrl === 'job') {
            if (_this.doUrl === 'career_interests') {
              _this.$i18n.locale = 'zh'
              _this.setLangType('Chinese')
              _this.$router.push({ path: '/demography/fill/index', query: { demographyMenber: _this.memberToken, isStart: false, langType: 'Chinese' } })
@@ -73,7 +73,7 @@
            if (_this.reportTemplateType === 'API_Fan') {
              _this.$i18n.locale = 'zh'
              _this.setLangType('Chinese')
              _this.$router.push({ path: '/demography/fill/logo', query: { demographyMenber: _this.memberToken, isStart: false } })
              _this.$router.push({ path: '/demography/fill/logo', query: { demographyMenber: _this.memberToken, isStart: false, langType: 'Chinese' } })
              return
            }
@@ -85,6 +85,9 @@
          if (reParam.response[0].langType === 'Chinese') {
            this.$i18n.locale = 'zh'
            _this.setLangType('Chinese')
          } else if (reParam.response[0].langType === 'Thai') {
            _this.setLangType('Thai')
            this.$i18n.locale = 'th'
          } else {
            _this.setLangType('English')
            this.$i18n.locale = 'en'
@@ -95,10 +98,11 @@
            let answered = re.response.examItemOrderAndContentList
            if (answered === null) {
              examPaperApi.select(_this.memberToken, _this.langType).then(re => {
                _this.setFormDo(re.response)
                // _this.setFormDo(re.response)
                _this.formDo = re.response
                _this.setDoUrl(re.response.questionTemplateId)
                // _this.$router.push({ path: '/guide/index', query: { formDo: _this.formDo } })
                _this.$router.push({ path: '/guide/index' })
                _this.$router.push({ path: '/guide/index', query: { formDo: _this.formDo } })
                // _this.$router.push({ path: '/guide/index' })
              }).catch(e => {
                _this.$message.error(_this.$t('noquestionMsg'))
              })
src/views/exam/components/QuestionIntelligenceEdit.vue
@@ -1,7 +1,8 @@
<template>
  <div style="line-height:1.8">
  <div style="line-height:1.8" :class="question.template==='intelligence_title'?'fixed-div':''">
    <div v-if="qType==1" v-loading="qLoading">
      <div class="q-title" v-html="qLabel+'&nbsp;&nbsp;'+question.title" style="font-size: x-large"/>
      <div class="q-title" v-if="question.template==='intelligence_title'" @click="showPopup(qLabel+'&nbsp;&nbsp;'+question.title)" v-html="qLabel+'&nbsp;&nbsp;'+question.title" style="font-size: x-large"/>
      <div class="q-title" v-else v-html="qLabel+'&nbsp;&nbsp;'+question.title" style="font-size: x-large"/>
      <div class="q-content" :hidden="question.template==='intelligence_title'">
        <el-radio-group v-model="answer.content" @change="answer.completed = true">
          <el-radio class="intelligence-el_radio"  v-for="(item, index) in question.items"  :key="item.prefix"  :label="item.prefix" @change="jumpNext" :disabled="answer.readOnly" :style="{display:displayVal}">
@@ -49,6 +50,13 @@
    </div>
    <div v-else>
    </div>
    <!-- 弹窗 -->
    <div v-if="isPopupVisible" id="content-popup" class="popup" @click="closePopupOnOutsideClick">
      <div class="popup-content">
        <span class="close" @click="closePopup">&times;</span>
        <div v-html="popupHtmlContent" class="popup-html"></div>
      </div>
    </div>
  </div>
</template>
@@ -58,7 +66,8 @@
  name: 'QuestionIntelligenceShow',
  data () {
    return {
      abcValue: { 1: 'A', 2: 'B', 3: 'C', 4: 'D', 5: 'E', 6: 'F' }
      abcValue: { 1: 'A', 2: 'B', 3: 'C', 4: 'D', 5: 'E', 6: 'F' },
      isPopupVisible: false
      // abcValue: { '1': 'A', '2': 'B', '3': 'C', '4': 'D', '5': 'E', '6': 'F' }
    }
  },
@@ -96,6 +105,9 @@
      default: 'block'
    }
  },
  mounted () {
  },
  methods: {
    jumpNext () {
      let _this = this
@@ -106,6 +118,30 @@
      setTimeout(function () {
        _this.$emit('callNextSubject', [_this.order])
      }, 500)
    },
    showPopup (content) {
      this.popupHtmlContent = content
      this.isPopupVisible = true
      this.$nextTick(() => {
        const popupElements = document.querySelectorAll('.popup-html p img')
        popupElements.forEach(popupElement => {
          if (popupElement) {
            if (popupElements.length > 1) {
              popupElement.style.width = '50%'
            } else {
              popupElement.style.width = '100%'
            }
          }
        })
      })
    },
    closePopup () {
      this.isPopupVisible = false
    },
    closePopupOnOutsideClick (event) {
      if (event.target.id === 'content-popup') {
        this.closePopup()
      }
    }
  }
}
@@ -118,4 +154,40 @@
  .intelligence-el_radio {
    margin-right: 60px;
  }
  .popup {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
  }
  .popup-content {
    position: relative;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    overflow-y: auto;
  }
  .close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: #000;
    cursor: pointer;
  }
  .thumbnail {
    margin-bottom: 10px;
    cursor: pointer;
  }
  .popup-html {
    font-size: 16px;
    color: #333;
  }
</style>
src/views/exam/paper/intelligence.vue
@@ -4,18 +4,18 @@
      <el-header class="align-center" v-if="guide">
        <h1></h1>
      </el-header>
      <el-main style="padding-top: 3%;">
      <el-main style="">
        <div v-html="guideDescirption" v-if="guide" :style="ismobile?'padding-top: 2%;':'padding-top: 2%;margin: 0 auto;width:66%'"></div>
        <el-row class="do-align-center" v-if="guide">
          <el-button @click="startDo" type="primary" :disable="startDoDisable">{{$t('start')}}</el-button>
        </el-row >
        <el-form :model="form" ref="form" v-loading="formLoading" label-width="100%" v-else>
          <el-row :key="index"  v-for="(titleItem,index) in titleItems">
          <el-row :key="index"  v-for="(titleItem,index) in titleItems" ref="titleItem">
            <div class="q-content">{{titleItem.description}}</div>
            <el-card class="exampaper-item-box" style="border:2px solid #2b90ff;">
              <div class="align-center"><span style="font-size: small; float: left">{{$t('examinee')}}{{memberName}}</span><span style="margin-top: 0px;padding-right: 11%">●{{form.name}}●</span><span style="font-size: small; float: right">{{$t('partRemailTime')}}{{formatSecondsG(remainTime,$t('hour'),$t('min'),$t('second'))}}</span></div>
              <hr style="border : 1px dashed #b3d8ff;" />
              <el-form-item :key="index" label-width="1px" v-for="(questionItem, index) in questionItems">
            <el-card class="exampaper-item-box" style="border:2px solid #2b90ff;" :body-style="{padding: '0px 20px 20px 20px' }">
              <div class="align-center" style="padding-top:20px;height:50px;position: sticky;top: 0px; z-index: 1; background-color: white;"><span style="font-size: small; float: left">{{$t('examinee')}}{{memberName}}</span><span style="margin-top: 0px;padding-right: 11%">●{{form.name}}●</span><span style="font-size: small; float: right">{{$t('partRemailTime')}}{{formatSecondsG(remainTime,$t('hour'),$t('min'),$t('second'))}}</span></div>
              <hr style="margin:0px;border : 1px dashed #b3d8ff;position: sticky;top: 50px; z-index: 1; background-color: white;" />
              <el-form-item :class="(questionItem.questionType==1 && questionItem.template==='intelligence_title')?'fixed-div':''"  :key="index" label-width="1px" v-for="(questionItem, index) in questionItems">
                <QuestionIntelligenceEdit @callNextSubject="onChoice" :qType="questionItem.questionType" :question="questionItem"
                              :answer="answer.answerItems[questionItem.itemOrder-1]" :qLabel="questionItem.questionNumber" :order = "questionItem.itemOrder-1" :displayVal="displayVal"/>
              </el-form-item>
@@ -36,15 +36,15 @@
      </el-main>
    </el-container>
    <el-row class="do-exam-title footer">
      <el-col :span="24">
    <!-- <el-row class="do-exam-title footer"> -->
      <!-- <el-col :span="24"> -->
        <!--测试的时候打开-->
        <!--<span class="do-exam-time">-->
          <!--<label>{{$t('remainingTime')}}</label>-->
          <!--<label>{{formatSecondsG(remainTime,$t('hour'),$t('min'),$t('second'))}}</label>-->
        <!--</span>-->
      </el-col>
    </el-row>
      <!-- </el-col> -->
    <!-- </el-row> -->
  </div>
</template>
@@ -179,7 +179,15 @@
      })
    }
  },
  mounted () {
  updated () {
    // const elements = document.querySelectorAll('.exampaper-item-box')
    // if (elements) {
    //   elements.forEach(element => {
    //     if (element) {
    //       element.addEventListener('scroll', this.handleCardScroll, true)
    //     }
    //   })
    // }
  },
  beforeDestroy () {
    window.clearInterval(this.timer)
@@ -188,6 +196,27 @@
    window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
  },
  methods: {
    handleCardScroll (e) {
      const scrollTop = e.target.scrollTop;
      const elements = e.target.querySelectorAll('.q-title p img')
      if (scrollTop > 200) {
        elements.forEach(element => {
          element.style.transition = 'width 0.5s ease-in-out'
          element.style.width = '30%'
        })
      }
      if (scrollTop === 0) {
        elements.forEach(element => {
          if (elements.length > 1) {
            element.style.transition = 'width 0.5s ease-in-out'
            element.style.width = '50%'
          } else {
            element.style.transition = 'width 0.5s ease-in-out'
            element.style.width = '50%'
          }
        })
      }
    },
    beforeunloadFn (e) {
      if (!this.isSubmiting) {
        if (this.isLastQuestionOrderNum(this.order)) {
@@ -816,4 +845,18 @@
    z-index: 1000;
    bottom: 0px;
  }
  .exampaper-item-box {
    position: relative;
    overflow-y: auto; /* 允许内容滚动 */
    height: calc(100vh - 110px); /* 根据需要设置盒子的最大高度 */
  }
  .fixed-div {
    position: sticky;
    top: 51px; /* 固定在盒子的顶部 */
    background-color: white; /* 背景颜色以覆盖滚动内容 */
    z-index: 1; /* 确保标题在滚动时高于其他内容 */
    border-bottom: 1px dotted #ccc;
  }
</style>