123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153 |
- <template>
- <el-row class="p20">
- <el-col :span="6">
- <img :src="tpl.tb" width="200px" style="border-radius: 20px;" />
- </el-col>
- <el-col :span="6">
- <div>
- <p style="font-size: 24px;"> 课程信息 </p>
- <p class="mt10">岗位名称:{{tpl.name}} </p>
- <p class="mt10">课程学时:<strong style="color: red;">{{tpl.xs/10}} </strong>学时
- </p>
- <p class="mt10" v-if="tpl.examGroupId">课程年度:
- <strong style="color: red;">{{tpl.nd}} </strong>
- </p>
- <p class="mt10">学习情况:
- 完成 <strong style="color: red;">{{info.getXs/10}} </strong>
- 共计 <strong style="color: red;">{{info.totalXs/10}}</strong>
- </p>
- <p class="mt10" v-if="tpl.examGroupId">最高分数:
- <strong style="color: red;">{{info.score}} </strong>
- 分
- </p>
- <p class="mt10" v-if="tpl.examGroupId">开始时间:
- <strong style="color: red;">{{info.startDate}} </strong>
- </p>
- <p class="mt10" >考试备注:<br>
- <span style="padding:0 2rem;color: red;">
- 考试开始,三天内必须完成
- </span>
- <span style="padding:0 2rem;color: red;">
- 报名成功,80天内完成学习
- </span>
- </p>
- <p class="mt10">
- 学习截至时间:
- <strong style="color: red;">
- {{info.startDate|add80Date}}
- </strong>
- </p>
- <p class="mt10">
- 剩余考试时间:
- <span v-if="info.examTime>0">
- <span v-if="end.d>0">
- <span style="color: red;">{{end.d}}</span>
- 天
- </span>
- <span style="color: red;">{{end.h}}</span>
- 时
- <span style="color: red;">{{end.m}}</span>
- 分
- <span v-if="end.d==0">
- <span style="color: red;">{{end.s}}</span>
- 秒
- </span>
- </span>
- <span v-else>
- 还未开考
- </span>
- </p>
- </div>
- </el-col>
- <el-col :span="9">
- <div>
- <p style="font-size: 24px;"> 考试情况 </p>
- <section v-for="(item,index) in setting.examList">
- <span style="width:240px;margin: 0px;padding: 0px;">
- {{item}}: <strong style="color: red;">{{info['score'+index]}} </strong>分
- </span>
- <el-button @click="startExam(index)" type="text">开始考试</el-button>
- </section>
- </div>
- </el-col>
- <el-col :span="3">
- <div>
- <el-button type="primary" style="font-size: 14px;margin-top: ;" @click="printCert">
- 学时证明
- </el-button>
- </div>
- </el-col>
- </el-row>
- </template>
- <script>
- import setting from '@/setting';
- import { getTime,packTime,toDate } from "@/utils/date";
- export default {
- name: "iCourseInfoTest",
- data() {
- return {
- setting,
- timer: 0,
- end: {
- d: 0,
- h: 0,
- m: 0,
- s: 0
- }
- }
- },
- props: ['tpl', 'info'],
- destroyed(){
- this.timer && window.clearInterval(this.timer)
- },
- created(){
- this.initTimer()
- },
- filters:{
- add80Date( date ){
- let val = new Date(date).getTime() + 80*86400*1000;
- return toDate( val )
- }
- },
- methods: {
- initTimer() {
- if (this.timer) {
- window.clearInterval(this.timer);
- }
- this.tickTimer();
- this.timer = window.setInterval(() => {
- this.tickTimer();
- }, 1000);
- },
- tickTimer( ) {
- let nowSec = getTime();
- let timeLast = this.info.examTime -nowSec;
- this.end = packTime(timeLast);
- if (timeLast < 0) {
- window.clearInterval(this.timer);
- }
- },
- startExam(index) {
- if( this.end.v <=0 ) {
- this.$message.errorMsg("开考超过三天,不能继续考试")
- return;
- }
- if( this.tpl.isClosed ==1 ) {
- this.$message.errorMsg("课程已经关闭", 2)
- return;
- }
- this.$emit("startExam", +index)
- },
- printCert() {
- this.$emit("printCert")
- }
- }
- }
- </script>
|