FE_bankTeaching/src/components/case/index.vue

<template>
  <div>
    <el-container class="scrollbar" v-if="caseVisible">
      <el-header>
        <div class="flex a-center j-between">
          <div class="flex a-center" style="width: 28%">
            <p>实训项目</p>
            <el-select v-model="projectId" placeholder="请选择" class="select" :disabled="projectPermissions != 0" @change="selectProject">
              <el-option
                v-for="item in value"
                :key="item.projectId"
                :label="item.projectName"
                :value="item.projectId"
              ></el-option>
            </el-select>
          </div>
          <div class="countDownBox">
            <div style="margin-left: -40px;">
              <div :sendSync="sendSync" :autoStart="autoStart" :defaultVal="defaultVal">
                实训{{text}}时间
                <span class="timeSpan">{{day}}</span>天
                <span class="timeSpan">{{hour}}</span>小时
                <span class="timeSpan">{{minutes}}</span>分
                <span class="timeSpan">{{seconds}}</span>秒
              </div>
            </div>
          </div>
          <div class="countDownBox">
            <div>
              总得分：
              <span class="gradeSpan">{{grade}}</span>
            </div>
          </div>
          <div>
            <el-button
              style="backgroundColor: #202020;color: #d0d0d0;font-size:14px;"
              v-show="projectPermissions == 0"
              @click="reload"
            >重新开始</el-button>
            <el-button class="submit-btn" style="margin-right:7px" @click="Submit()" :disabled="isSubmit">提交</el-button>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="30%">
          <div class="aside-header">
            <div class="header_h flex a-center">
              <i class="el-icon-s-order"></i>
              <p>实验目标</p>
            </div>
            <div class="font_css">
              <div class="experimentalGoal">
                <div class="break-all" v-html="experimentalGoal"></div>
              </div>
            </div>
          </div>
          <div class="aside-footer">
            <div class="header_h flex a-center">
              <i class="el-icon-s-management"></i>
              <p>实验任务</p>
            </div>
            <div>
              <el-row>
                <el-col :span="24">
                  <el-card shadow="hover">
                    <el-table :data="tableData" :stripe="true" height="405">
                      <el-table-column type="index"></el-table-column>
                      <el-table-column prop="judgmentPointsName" label="判分标准" align="center"></el-table-column>
                      <el-table-column prop="right" label="完成结果" align="center">
                        <template slot-scope="scope">
                          <i
                            v-if="scope.row.right=='0'"
                            class="el-icon-check"
                            style="color:green;font-size:20px"
                          ></i>
                          <i
                            v-else-if="scope.row.right=='-1'"
                            class="el-icon-close"
                            style="color:red;font-size:20px"
                          ></i>
                        </template>
                      </el-table-column>
                      <el-table-column prop="score" label="得分" align="center"></el-table-column>
                    </el-table>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-aside>
        <el-main>
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="案例" name="first">
              <div class="break-all" v-html="caseDescription"></div>
            </el-tab-pane>
            <el-tab-pane label="实验要求" name="second">
              <el-collapse v-model="activeNames">
                <el-collapse-item v-for="(loop, index) in points" :key="index">
                  <template slot="title">
                    <i class="el-icon-s-ticket"></i>
                    <span style="font-size:16px">{{loop.judgmentPointsName}}</span>
                  </template>
                  <div class="break-all" v-html="loop.experimentalRequirements"></div>
                </el-collapse-item>
              </el-collapse>
            </el-tab-pane>
            <el-tab-pane label="实验提示" name="fifth" v-if="isstartexperimentSuggests">
              <div class="break-all" v-html="experimentSuggests"></div>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>
    <!-- </div> -->

    <div class="panel" :class="{active: caseVisible}">
      <div @click="toggleCase">
        <img src="../../assets/img/case/left.png" alt v-if="caseVisible" />
        <img src="../../assets/img/case/right.png" alt v-else />
      </div>
    </div>
  </div>
</template>

<script>
import util from '@/libs/util'
import Setting from '@/setting'
export default {
  data() {
    return {
      systemId: Setting.systemId,
      workbench: [],
      test: [],
      caseVisible: true,
      grade: "00",
      exampleData: "",
      codeid: "",
      codeIds: [],
      judgmentPointsIds: [],
      text: "",
      isStart: false,
      globalTimer: null, //获取setInterval对象值
      millisecond: 0,
      countVal: this.defaultVal, //获取初始值
      pauseTime: 0,
      day: 0,
      seconds: 0,
      minutes: 0,
      hour: 0,
      createTime: "", //开始时间
      actEndTime: "", //倒计时结束时间
      projectId: "", //选中后绑定的对象
      value: [],
      experimentalGoal: "", //实验目标
      caseDescription: "", //案例描述
      experimentSuggests: "", //实验提示
      judgmentPointsName: "", //	判分点名称
      points: [],
      activeNames: [],
      tableData: [],
      activeName: "first",
      schoolId: '',
      studentId: "",
      courseId: "",
      projectId: "",
      assessmentId: "",
      projectPermissions: 0, //项目权限(0、练习 1、考核 2、竞赛)
      isSubmit: false,
      entryTime: util.formatDate('yyyy-MM-dd hh:mm:ss'),
      startTime: '',
      stopTime: '',
      isSelected: false,
      userId: '',
      isstartexperimentSuggests: 1
    };
  },
  watch: {
    countVal: {
      deep: true,
      handler: function(val, oldVal) {
        let vm = this;
        if (vm.needSendSunc) {
          vm.passToParent(val);
        }
      }
    },
    needSendSunc: {
      deep: true,
      handler: function(val) {
        let vm = this;
        if (val) {
          vm.passToParent(vm.countString);
        }
      }
    }
  },
  props: {
    sendSync: {
      type: Boolean,
      default: false
    },
    autoStart: {
      type: Boolean,
      default: false
    },
    defaultVal: {
      type: Number,
      default: null
    },
    codeId: {
      type: Number,
      default: 0
    },
  },
  computed: {
    needSendSunc: function() {
      return this.sendSync;
    },
    // 倒计时
    second: function() {
      return this.num(this.seconds);
    },
    minute: function() {
      return this.num(this.minutes);
    }
  },
  mounted() {
    this.projectPermissions = this.projectId ? 1 : 0
    if(this.projectId){
      this.getQueryProject();
    }else{
      this.getProjects();
    }
    this.assessmentId && this.projectId && this.checkVer()
    this.codeId && this.codeIds.push(this.codeId)
  },
  methods: {
    checkVer() {
      let data = {
        userId: this.userId,
        id: this.assessmentId
      }
      this.$get(this.api.qualifications,data).then(res => {
        if(res.message == 'false'){
          this.isSubmit = true;
          // newmain.$emit("isSubmit", this.isSubmit);
        }
      });
    },
    //重新开始
    reload() {
      this.$post(this.api.DeleteCodes, this.codeIds).then(res => {
        this.getClearTime()
        this.grade = '00'
        this.codeIds = []
        this.isSubmit = false
        this.startCountFn()
      });
    },
    Submit() {
      if(!this.codeIds.length) return this.$message.error('请先完成实验')
      this.$confirm("此操作将视为结束考试, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          this.actEndTime = new Date().getTime();
          this.getClearTime();
          //提交代码与判分点进行判断
          this.$post(this.api.Submit, {
            // projectPermissions: 0,
            createTime: this.startTime,
            endTime: this.stopTime,
            projectId: this.projectId,
            projectPermissions: this.projectPermissions,
            // assessmentId: 1,
            assessmentId: this.assessmentId ? this.assessmentId : '',
            codeIds: this.codeIds,
            judgmentPointsIds: this.judgmentPointsIds,
            // studentId: 54,
            studentId: this.studentId,
            record: {
              courseId: 1,
              // courseId: this.courseId,
              projectId: this.projectId,
              createTime: this.startTime,
              endTime: this.stopTime,
              startTime: this.entryTime
            }
          })
            .then(res => {
              this.isSubmit = true
              // newmain.$emit("isSubmit", this.isSubmit);
              this.tableData = res.message
              //计算总分
              var s = 0;
              this.tableData.forEach(element => {
                this.test = element.score;
                s += this.test;
                this.grade = s;
              });
            })
            .catch(err => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消提交"
          });
        });
    },

    // 倒计时
    timeFormat(param) {
      return param < 10 ? "0" + param : param;
    },
    toggleCase() {
      this.caseVisible = !this.caseVisible
    },
    // 清除时间
    getClearTime() {
      // clearInterval(this.globalTimer);
      clearInterval(this.countVal);
      this.globalTimer = "";
      // if(this.projectPermissions != 0){
        this.countVal = "";
        this.day = "00";
        this.seconds = "00";
        this.minutes = "00";
        this.hour = "00";
      // }else{
      //   this.text = '所用'
      // }
    },

    handleData(project,type){
      if(!this.isSelected){
        this.value = project;
        this.projectId = project[0].projectId;
      }
      this.projectId = type == 2 ? project[0].projectId : this.projectId
      if(type == 2) this.getQueryProject(0,1)
      this.projectPermissions = type == 1 ? project[0].projectPermissions : this.projectPermissions
      this.experimentalGoal = project[0].experimentalGoal;
      this.caseDescription = project[0].caseDescription;
      this.experimentSuggests = project[0].experimentSuggests;
      this.actEndTime = project[0].endTime;
    },
    getQueryProject(projectId,type) {
      //项目名称+实验目标+案例描述+实验提示+实验要求
      this.$get(this.api.QueryProject, {
        // studentId: 54,
        // projectId: 305,
        // assessmentId: 1,
        studentId: this.studentId,
        projectId: projectId ? projectId : this.projectId,
        assessmentId: this.assessmentId
      }).then(res => {
          if(!type){
            this.handleData(res.message.project,1)
            this.projectId = res.message.project[0].projectId
          }
          this.points = res.message.points;
          this.tableData = res.message.points;
          let arr1 = this.tableData;
          let result1 = arr1.map(e => e.judgmentPointsId);
          this.judgmentPointsIds = this.judgmentPointsIds.concat(result1);
          this.isstartexperimentSuggests = !res.message.project[0].isstartexperimentSuggests //0显示，1不显示

          if (this.projectPermissions == "1") {
            this.text = "剩余";
            var interval = setInterval(() => {
              // 获取当前时间，同时得到活动结束时间数组
              let newTime = new Date().getTime();
              // 对结束时间进行处理渲染到页面
              let endTime = new Date(this.actEndTime).getTime();
              let obj = null; // 如果活动未结束，对时间进行处理
              if (endTime - newTime > 0) {
                let time = (endTime - newTime) / 1000; // 获取天、时、分、秒
                let day = parseInt(time / (60 * 60 * 24));
                let hou = parseInt((time % (60 * 60 * 24)) / 3600);
                let min = parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
                let sec = parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
                obj = {
                  day: this.timeFormat(day),
                  hou: this.timeFormat(hou),
                  min: this.timeFormat(min),
                  sec: this.timeFormat(sec)
                };
              } else {
                // 活动已结束，全部设置为'00'
                obj = {
                  day: "00",
                  hou: "00",
                  min: "00",
                  sec: "00"
                };
                clearInterval(interval);
              }
              this.day = obj.day;
              this.hour = obj.hou;
              this.minutes = obj.min;
              this.seconds = obj.sec;
            }, 1000);
          } else if (this.projectPermissions == "0") {
            this.text = "已用";
            // 获取当前时间
            this.createTime = new Date().getTime();
            //自动开始
            if (this.autoStart) {
              this.startCountFn();
            }
          }
        })
        .catch(err => {});
    },
    getProjects(){
      let data = {
          systemId: this.systemId,
          // schoolId: this.schoolId
          schoolId: ''
      }
      this.$get(`${this.api.queryTestProject}`,data).then(res => {
          this.handleData(res.message,2)
      }).catch(res => {});
    },
    selectProject(){
      this.isSelected = true
      this.assessmentId = ''
      this.judgmentPointsIds = []
      this.codeIds = []
      this.getQueryProject(this.projectId)
      this.isSubmit = false
      this.countVal = 0
      // newmain.$emit("isSubmit", this.isSubmit)
    },
    counterFn(counterTime) {
      let leave1 = counterTime % (24 * 3600 * 1); //计算天数后剩余的毫秒数
      let leave2 = leave1 % (3600 * 1); //计算小时数后剩余的毫秒数
      let leave3 = leave2 % (60 * 1); //计算分钟数后剩余的毫秒数
      let day = Math.floor(counterTime / (24 * 3600 * 1)); //计算相差天数
      let hour = Math.floor(leave1 / (3600 * 1)); //计算相差小时
      let minutes = Math.floor(leave2 / (60 * 1)); //计算相差分钟
      let seconds = Math.round(leave3 / 1); //计算相差秒
      day = day >= 10 ? day : "0" + day;
      hour = hour >= 10 ? hour : "0" + hour;
      minutes = minutes >= 10 ? minutes : "0" + minutes;
      seconds = seconds >= 10 ? seconds : "0" + seconds;
      this.day = day;
      this.hour = hour;
      this.minutes = minutes;
      this.seconds = seconds;
    },

    startCountFn() {
      if (!this.isStart) {
        this.countVal = this.countVal ? this.countVal : 0;
        let timer = setInterval(() => {
          this.counterFn(this.countVal++);
        }, 1000);
        this.globalTimer = timer;
        this.isStart = true;
      }
    },
    passToParent(data) {
      this.$emit("getDataFromChild", data);
    },
    getCookie(cookie_name) {
      //获取cookie中指定key的value
      var allcookies = document.cookie; //索引长度，开始索引的位置
      var cookie_pos = allcookies.indexOf(cookie_name); // 如果找到了索引，就代表cookie存在,否则不存在

      if (cookie_pos != -1) {
        // 把cookie_pos放在值的开始，只要给值加1即可
        //计算取cookie值得开始索引，加的1为“=”
        cookie_pos = cookie_pos + cookie_name.length + 1; //计算取cookie值得结束索引
        var cookie_end = allcookies.indexOf(";", cookie_pos);

        if (cookie_end == -1) {
          cookie_end = allcookies.length;
        } //得到想要的cookie的值
        var value = unescape(allcookies.substring(cookie_pos, cookie_end));
      }
      return value;
    }
  }
};
</script>

<style lang="scss" scoped>
  /deep/.el-container {
    height: 80%;
    &.is-vertical{
      position: fixed;
      top: 200px;
      bottom: 20px;
      left: 0;
      width: 85%;
      height: 70%;
      background-color: #f5f5f5;
    }
    .el-header{
      color: #333;
      padding: 0 12px 0 20px;
      .el-button {
        background-color: $main-color;
        color: #fff;
        border: none;
        margin: 5px 0px 5px 5px;
        font-size: 16px;
      }
      .submit-btn{
        padding-left: 30px;
        padding-right: 30px;
        background: $main-color url(../../assets/img/case/btn.png) 0 0/100% 100% no-repeat;
      }
    }
    .el-aside{
      color: #333;
      [class*=" el-icon-"],[class^="el-icon-"]{
        line-height: 40px;
        font-size: 16px;
      }
    }
    .el-main {
      width: 60%;
      background-color: #fff;
      color: #333;
      padding: 0;
      font-size: 16px;
      margin: 0px 20px 10px 10px;
      white-space: pre-wrap;
      background: #fff url(../../assets/img/case/bg.png) top right no-repeat;
    }
    .aside-header {
      margin: 0px 10px 10px 10px;
      background-color: #fff;
    }
    .aside-footer {
      margin: 0px 10px 10px 10px;
      background-color: #fff;
    }
    .header_h {
      height: 50px;
      background: url(../../assets/img/case/header.png) 0 0/100% 100% no-repeat;
      justify-content: center;
      i{
        color: #fff;
      }
      p {
        line-height: 40px;
        font-size: 16px;
        color: #fff;
        padding-left: 10px;
      }
    }
    .el-card{
      border: 0;
      border-radius: 0;
      .el-card__body {
        padding: 0;
      }
    }
    .select{
      flex: 1;
      input::-webkit-input-placeholder {
        color: #333;
      }
      .el-input__icon {
        line-height: 60px;
      }
      .el-select__caret:before {
        content: "\e78f";
        font-size: 16px;
        padding: 3px;
        background-color: $main-color;
        border-radius: 50%;
        color: #ffffff;
      }
      .el-input--suffix .el-input__inner {
        color: #333;
        font-size: 14px;
        border-radius: 30px;
        border: none;
        background-color: #fff;
        margin-left: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .el-input {
        padding: 10px 0;
      }
    }

    .font_css {
      margin: 0 10px;
      text-indent: 2em;
      font-size: 14px;
      padding: 10px 0;
    }
    
    .countDownBox {
      font-size: 16px;
      margin: 0 10px;
      padding: 20px 0;
    }
    .timeSpan {
      color: #333333;
      padding: 5px 15px;
      font-size: 14px;
      background: #ffffff;
      border-radius: 18px;
      margin: 0 5px;
      text-align: center;
    }
    .gradeSpan {
      color: #878787;
      padding: 10px;
      font-size: 14px;
      background: #e0e0e0;
      border-radius: 6px;
      text-align: center;
    }
    .el-header /deep/.el-button:hover,
    .el-button:focus,
    .el-button:active {
      background-color: $main-color;
      color: #fff;
    }
    
    .el-table{
      font-size: 12px;
      color: #202020;
      .el-table--striped .el-table__body tr.el-table__row--striped td {
        background: #eef7ff;
      }
      .el-table td,.el-table th.is-leaf{
        border-bottom: 0;
      }
      thead{
        color: #ffffff;
        font-size: 10px;
        th{
          padding: 5px 0;
        }
      }
      th > .cell{
        font-weight: 100;
      }
      th,tr{
        background-color: #badfff;
      }
    }
    .el-collapse-item__content{
      padding-left: 10px;
      padding-right: 10px;
    }
    .el-collapse-item__wrap {
      border-bottom: none;
    }
    .el-collapse-item__header {
      border-bottom: none;
    }
    .el-tabs__content {
      margin: 0 20px;
    }
    .el-icon-s-ticket:before {
      font-size: 16px;
      padding: 5px;
      color: $main-color;
    }
    .el-collapse-item__arrow {
      margin: 0 5px 0 0;
    }
    .el-icon-arrow-right:before {
      font-size: 12px;
      padding: 1px;
      margin-left: 10px;
      background-color: $main-color;
      border-radius: 50%;
      color: #ffffff;
    }
    .el-tabs__item {
      font-size: 16px;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__nav {
      border: none;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__item {
      border-left: none;
    }
    .el-tabs--card > .el-tabs__header {
      border-bottom: none;
    }
    .el-collapse {
      border-bottom: none;
      border-top: none;
      height: 500px;
      overflow: hidden;
      overflow-y: auto;
    }
    .el-tabs__item.is-active {
      color: #fff;
      background-color: $main-color;
    }
    .el-tabs__header {
      padding: 5px 20px;
    }
  }
  .break-all{
    word-break: break-all;
  }
  .panel{
    position: fixed;
    top: 50%;
    &.active{
      left: 85%;
    }
    img{
      height: 150px;
      cursor: pointer;
    }
  }
</style>