登录用户名提示修改为姓名

Administrator

2022-05-09 c7735db135f9c3c99224d8b5d2157926efde0977

 src/views/exam/startexam.vue

@@ -1,12 +1,7 @@
/*
 * @Author: Morpheus
 * @Date: 2021-07-31 16:31:54
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-07-18 17:09:52
 * menu-name 考试管理
 */
/* * @Author: Morpheus * @Date: 2021-07-31 16:31:54 * @Last Modified by: liu *
@Last Modified time: 2021-12-13 14:37:49 * menu-name 考试管理 */
<template>
    <div class="exam">
  <!-- <div class="exam">
        <button class="logout" 
          onmouseover="this.style.backgroundColor='red';" 
          onmouseout="this.style.backgroundColor='';"
@@ -15,40 +10,120 @@
        <div class="no" v-if="!pageDisable">
          <span>没有找到相应的考试信息</span>
        </div>
    </div> -->
  <div class="startexam">
    <div class="startexam_heard">
      {{ option.data[0].title ? option.data[0].title : "保安员证考试" }}
    </div>
    
    <div class="startexam_main">
      <div class="s_m_img">
        <img src="/img/exam/startbg.jpg" alt="" />
      </div>
      <div class="s_m_value" v-if="option.data[0].list.length != 0">
        <div v-for="(item, index) in option.data[0].list" :key="index">
          <span class="s_m_v_title">{{ item.title }}</span>
          <span>{{ item.value }}</span>
        </div>
        <div class="startButs">
          <el-button :type="option.data[0].color" round @click="startExam">{{
            option.data[0].subtext
          }}</el-button>
          <div class="time-remain startButsdown">
            <div class="time-remain_title" v-show="option.data[0].isExam == 3">
              剩余时间 :
            </div>

            <div class="time" v-show="option.data[0].isExam == 3">
              <count-down
                v-on:start_callback="countDownS_c(1)"
                v-on:end_callback="countDownE_c(1)"
                :current-time="currentTime"
                :start-time="startTime"
                :end-time="endTime"
                :tip-text="'距离考试开始'"
                :tip-text-end="'距离考试结束'"
                :end-text="'考试结束'"
                :hourTxt="':'"
                :minutesTxt="':'"
                :secondsTxt="''"
              >
              </count-down>
            </div>
          </div>
        </div>
      </div>
      <div class="s_m_value" v-else>没有找到相应的考试信息</div>
    </div>
  </div>
</template>


<script>
import { mapState } from 'vuex';
import {getExamDetail} from "@/api/examapi/examination";
import {updateApplyStatus} from "@/api/examapi/applyexam";
import CountDown from "vue2-countdown";
import { getCurrentTime } from "@/api/exam/examRecord";
import { mapState } from "vuex";
import {
  getExamDetail,
  getNowTime,
  calculations
} from "@/api/examapi/examination";
import { updateApplyStatus } from "@/api/examapi/applyexam";
import moment from "moment";
import {
  messageSuccess,
  messageFail,
  messageWarn,
  isNotEmpty
} from "@/util/util";
export default {
  
  data(){
  components: {
    CountDown
  },
  data() {
    return {
      resData:null,
      sex:"",
      pageDisable:false,
      scoreId: "",
      //继续考试时间
      currentTime: 0,
      startTime: 0,
      endTime: 0,
      //继续考试时间
      resData: null,
      sex: "",
      pageDisable: false,
      isTime: 2,
      option: {
        span: 8,
        data: []
      },
    }
        data: [
          {
            list: []
          }
        ]
      }
    };
  },
  computed: {
        ...mapState({
            userInfo: state => state.user.userInfo
        })
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  mounted() {
      //获取数据
      this.getUserInfoBYExam();
      window.startExam=this.startExam;
    //获取数据
    this.getUserInfoBYExam();
    window.startExam = this.startExam;
  },
  methods: {
    //继续考试时间
    countDownS_c: function() {
      // console.log(12112);
      messageSuccess(this, "请继续考试");
      // this.startTime = this.getCurrentTimes();
    },
  methods:{
    //退出登录 
    countDownE_c: function() {
      messageWarn(this, "考试结束123");
      this.overExam();
      //   this.disableSubmit = true;
      // this.submitExam("over");
    },
    //退出登录
    handleLogout() {
      this.$confirm("是否退出系统, 是否继续?", "提示", {
        confirmButtonText: "确定",
@@ -61,128 +136,393 @@
      });
    },
    //开始考试跳转
    startExam () {
    startExam() {
      var that = this;
      if (that.option.data[0].isExam == 3) {
        that.resData["examScoreId"] = that.scoreId;
        console.log(that.resData);
        that.$router.push({
          path: `/startexam/${that.resData.scoreId}`,
          query: that.resData
        });
        return;
      }
      //判断是否到了考试时间
      if (this.isTime == 3) {
        this.$message({
          type: "warning",
          message: "未到考试时间!"
        });
        return;
      }
      //已超过考试截止时间
      if (this.isTime == 1) {
        this.$message({
          type: "warning",
          message: "已过考试时间!"
        });
        return;
      }

      //去修改考试状态
      var data = {
        id:that.resData.applyId,
        examType:this.resData.examType
      }
      updateApplyStatus(data).then(() => {
      })
      this.$router.push({
        id: that.resData.applyId,
        examType: this.resData.examType,
        examId: this.resData.id,
        userId: this.userInfo.user_id,
        candidateNo: this.resData.candidateNo
      };
      // this.$notify({
      //   message:
      //     "考试期间切勿退出登入、关闭浏览器， 否则考试成绩无效， 如有问题及时联系管理人员！",
      //   duration: 6000,
      //   showClose: false,
      //   customClass: "beginS",
      //   // type: "warning",
      // });
      // return;
      updateApplyStatus(data).then(res => {
        that.resData["examScoreId"] = res.data.id;
        this.$store.commit("SetScoreId", res.data.id);
        // console.log(res.data.id, "ididididiidididididid");
        window.name = "";
        this.$notify({
          message:
            "考试期间切勿退出登入、关闭浏览器， 否则考试成绩无效， 如有问题及时联系管理人员！",
          duration: 6000,
          showClose: false,
          customClass: "beginS"
          // type: "warning",
        });
        that.$router.push({
          path: `/startexam/${that.resData.id}`,
          query: that.resData
      })
        });
      });
    },
    getUserInfoBYExam(){
       var that = this;
       getExamDetail(this.userInfo.user_id).then((res) => {
            that.resData = res.data.data[0];
            var data = res.data.data[0];
            // debugger;
            if(res.data.data.length>0){
              that.pageDisable = true;
                if(data.sex==1){
                  that.sex = "男"
                }
                if(data.sex==2){
                  that.sex = "女"
                }
                that.option.data = [
                    {
                    title: that.resData.examName,
                    color: '#ffa820',
                    subtext: '开始考试',
                    click: function () {
                      window.parent.startExam();
                    },
                    list: [
                      {
                        title: '姓名：     '+that.resData.realName,
                        check: true,
                      },
                      {
                        title: '准考证号：    '+that.resData.candidateNo,
                        check: true,
                      },
                      {
                        title: '身份证号：     '+that.resData.idCardNo,
                        check: true,
                      },
                      {
                        title: '性别：     '+that.sex,
                        check: true,
                      }
                    ]
                  }
                ]
    getUserInfoBYExam() {
      var that = this;
      let setData = ({ color, subtext, isExam }) => {
        that.option.data = [
          {
            title: that.resData.examName,
            color: color,
            isExam: isExam,
            subtext: subtext,
            click: function() {
              window.parent.startExam();
            },
            list: [
              {
                title: "姓名：     ",
                value: that.resData.realName,
                check: true
              },
              {
                title: "准考证号：    ",
                value: that.resData.candidateNo,
                check: true
              },
              {
                title: "身份证号：     ",
                value: that.resData.idCardNo,
                check: true
              },
              {
                title: "性别：     ",
                value: that.sex,
                check: true
              }
            ]
          }
        ];
        that.$store.commit("SetexamUserData", that.option.data[0]);
      };
      var duibiTime = function(newTime, oldTime) {
        var newYear = newTime.split(" ")[0],
          newDat = newTime.split(" ")[1],
          oldYear = oldTime.split(" ")[0],
          oldDat = oldTime.split(" ")[1];
        if (newYear !== oldYear) {
          return false;
        } else {
          let newD = {
            s: +newDat.split(":")[0],
            f: +newDat.split(":")[1],
            m: +newDat.split(":")[2]
          };
          let oldD = {
            s: +oldDat.split(":")[0],
            f: +oldDat.split(":")[1],
            m: +oldDat.split(":")[2]
          };
          if (newD.s - oldD.s > 1) {
            return false;
          } else if (newD.s - oldD.s == 1) {
            if (newD.f < oldD.f) {
              return oldD.f - newD.f;
            } else {
              return false;
            }
            
          } else if (newD.s == oldD.s) {
            return 60 - (newD.f - oldD.f);
          }
          // return [newD, oldD];
          return false;
        }
        // return false;
      };

      var data = {
        userId: this.userInfo.user_id
      };
      getExamDetail(data).then(
        res => {
          that.resData = res.data.data[0];

          var data = res.data.data[0];
          // console.log(data,333);
          //当前时间
          var nowD,
            startD = new Date(data.startTime),
            //考试截止时间
            endD = new Date(data.endTime);
          getNowTime().then(res => {
            nowD = new Date(res.data.data);
            //对比时间
            //getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。
            if (nowD.getTime() > startD.getTime()) {
              if (endD.getTime() < nowD.getTime()) {
                that.isTime = 1;
              } else {
                that.isTime = 2;
              }
            } else {
              that.isTime = 3;
            }
            if (res.data.data.length > 0) {
              that.pageDisable = true;
              if (data.sex == 1) {
                that.sex = "男";
              }
              if (data.sex == 2) {
                that.sex = "女";
              }
            }
            // console.log(data, 123456);
            if (data.isExam == 3) {
              this.scoreId = data.scoreId;
              setData({ color: "success", subtext: "继续考试", isExam: 3 });
              const currentTimeSTART = moment(data.examStartTime);
              const currentSTART = currentTimeSTART.valueOf();
              getCurrentTime().then(response => {
                that.currentTime = currentSTART;
                that.startTime = currentSTART;
                var listTime = duibiTime(
                  response.data.data,
                  currentTimeSTART._i
                );
                // console.log(listTime, 4564444);
                if (listTime) {
                  that.endTime = currentSTART + listTime * 60 * 1000;
                } else {
                  that.overExam();
                }
                return;
              });

              // if (FZtime(data.examStartTime) > 60) {
              //   that.overExam();
              // }
              // that.endTime =
              //   current + (60 - FZtime(data.examStartTime)) * 60 * 1000;
            } else {
              setData({ color: "primary", subtext: "开始考试" });
            }
          });
        },

        (error) => {
        error => {
          window.console.log(error);
        }
      );
    },
    overExam() {
      let that = this;
      let scoreId = window.localStorage.getItem("scoreId");
      this.$alert("该考试已结束！", "提示", {
        confirmButtonText: "确定",
        callback: () => {
          calculations(scoreId)
            .then(response => {
              messageSuccess(that, "提交成功");
              if (response) {
                that.$store.commit("DEL_TAG", that.$store.state.tags.tag);
                var obj = {
                  userId: that.userInfo.user_id,
                  examId: that.$route.query.id
                };
                that.$router.push({
                  path: `/singleperformance/index`,
                  query: obj
                });
              }
            })
            .catch(() => {
              that.disableSubmit = false;
              messageFail(that, "提交题目失败");
            });
        }
      });
    }
  }
};
</script>
<style lang="scss">
.startButs {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.startButsdown {
  position: relative;
  top: -25px;
  left: 45px;
}
$fontSize3: 40px;
$fontSize2: 20px;
.time-remain_title {
  font-size: $fontSize2;
}
.time-remain .time {
  display: block;
  font-size: $fontSize3;
  line-height: $fontSize3;
  color: #ff0000;
  font-weight: 400;
  position: relative;
  //   top: -20px;
}
.startexam {
  //登入页面样式
  // border: 1px solid red;
  width: calc(100% - 100px);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .startexam_heard {
    font-size: 34px;
    color: rgb(240, 114, 29);
    margin-bottom: 5%;
    // position: absolute;
    // top: 10%;
  }
  .startexam_main {
    width: 960px;
    height: 300px;
    // border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    box-shadow: 0px 0px 5px 3px rgba($color: #797979, $alpha: 0.2);
    .s_m_img {
      width: 50%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 90%;
        height: 90%;
      }
    }
    .s_m_value {
      width: 50%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      div {
        width: 90%;
        height: 15%;
        font-size: 17px;
        .s_m_v_title {
          display: inline-block;
          width: 100px;
        }
      }
    }
  }
}
</script>
<style lang="scss">
    .exam{
        width: 100%;
        height: 100%;
        position: fixed;
        align-items:  center;
        justify-items: center;
    }

    .avue-data-pay .item {
        margin-left: 100% !important;
        width: 100% !important;
        min-height: 400px;
        margin-top: 240px;
    }

    .list {
        margin-left: 28% !important;
    }

    .avue-data-pay .img {
        display: none;
    }

    .avue-data-pay .title {
        padding: 40px 0 10px;
    }


   .no {
    background-color: #fff;
    width: 30%;
    height: 200px;
    border-radius: 5px;
    margin: 0 auto;
    margin-top: 15%;
    text-align: center;
    line-height: 200px;

      span{
            letter-spacing: 1px;
            color: blueviolet;
            font-size: 15px;
//最终
.startexamOld {
  // width: 100%;
  // height: 100%;
  // border: 1px solid red;
  width: calc(100% - 100px);
  height: 89%;
  margin: 2.5% 50px;
  background-color: rgba($color: #fff, $alpha: 1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .startexam_heard {
    font-size: 34px;
    color: rgb(240, 114, 29);
    position: absolute;
    top: 10%;
  }
  .startexam_main {
    width: 960px;
    height: 300px;
    // border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 0px 5px 3px rgba($color: #797979, $alpha: 0.2);
    .s_m_img {
      width: 50%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 90%;
        height: 90%;
      }
    }

    .logout{
      border: 0px;
      margin-left: 92%;
      margin-top: 30px;
      border-radius: 5px;
      font-size: 14px;
      width: 80px;
      height: 30px;
      letter-spacing: 1px;
    .s_m_value {
      width: 50%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      div {
        width: 90%;
        height: 15%;
        font-size: 17px;
        .s_m_v_title {
          display: inline-block;
          width: 100px;
        }
      }
    }
  }
}

.beginS {
  height: 180px;
  width: 500px;
}
.el-notification__content {
  font-size: 90px !important;
  line-height: 44px !important;
}
</style>