| | |
| | | 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 ', |
| | |
| | | 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 ', |
| | |
| | | <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> |
| | | |
| | |
| | | const langType = this.$route.query.langType |
| | | if (langType && (langType === 'Chinese' || langType === 'English' || langType === 'Thai')) { |
| | | this.setLangType(langType) |
| | | } else { |
| | | this.setLangType('English') |
| | | } |
| | | }, |
| | | beforeDestroy () { |
| | |
| | | _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')) |
| | | }) |
| | |
| | | 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 () { |
| | |
| | | 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' } }) |
| | |
| | | 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 |
| | | } |
| | | |
| | |
| | | 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' |
| | |
| | | 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')) |
| | | }) |
| | |
| | | <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+' '+question.title" style="font-size: x-large"/> |
| | | <div class="q-title" v-if="question.template==='intelligence_title'" @click="showPopup(qLabel+' '+question.title)" v-html="qLabel+' '+question.title" style="font-size: x-large"/> |
| | | <div class="q-title" v-else v-html="qLabel+' '+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}"> |
| | |
| | | </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">×</span> |
| | | <div v-html="popupHtmlContent" class="popup-html"></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | </template> |
| | |
| | | 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' } |
| | | } |
| | | }, |
| | |
| | | default: 'block' |
| | | } |
| | | }, |
| | | mounted () { |
| | | |
| | | }, |
| | | methods: { |
| | | jumpNext () { |
| | | let _this = this |
| | |
| | | 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() |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | .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> |
| | |
| | | <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> |
| | |
| | | |
| | | </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> |
| | | |
| | |
| | | }) |
| | | } |
| | | }, |
| | | 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) |
| | |
| | | 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)) { |
| | |
| | | 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> |