FE_python_trial/src/views/Home.vue

<template>
  <div>
    <div class="flex header" :class="{hh: $config.isHh}">
      <img v-if="$config.isHh" src="../assets/img/logo-hh.png" alt="" class="logo">
      <p v-else>{{$config.title}}</p>
      <div class="bt">
        <el-button type="primary" @click="back">退出实验</el-button>
      </div>
    </div>

    <div class="flex center">
      <p v-if="$config.isHh" style="font-size: 18px">{{$config.title}}</p>
      <p>编程语言</p>
      <el-input placeholder="请输入内容" v-model="language" :disabled="true"></el-input>
    </div>

    <div class="tab">
      <el-tabs v-model="curTab" type="card">
        <el-tab-pane
          v-for="item in workbench"
          :key="item.judgmentId"
          :label="item.name"
          :value="item.judgmentId"
        >
          <codemirror
            :key="codeKey"
            :projectId.sync="projectId"
            :code.sync="item.code"
            :workbench1="item.judgmentId"
            :codeId.sync="item.codeId"
            :answer.sync="item.answer"
            @cache="leavePage"
          ></codemirror>
        </el-tab-pane>
      </el-tabs>
    </div>

    <div class="menu">
      <testPanel
        @tell="getQueryIndex"
        @recoveryCode="recoveryCode"
        ref="mainindex"
        :workbench.sync="workbench"
      ></testPanel>
    </div>
  </div>
</template>

<script>
import testPanel from "../components/TestPanel";
import codemirror from "../components/codemirror";
import util from '@/util'
export default {
  data() {
    return {
      courseId: util.getCookie("courseId"), // 课程id
      assessmentId: util.getCookie("assessmentId"), // 考核id
      projectPermissions: 0, // 项目权限(0、练习 1、考核 2、竞赛)
      language: 'Python', // 编程语言
      curTab: '', // 选中后绑定的对象
      workbench: [], // 判分点切换列表
      codeKey: 1 // 编辑器索引
    };
  },
  components: {
    codemirror,
    testPanel
  },
  mounted() {
    this.autoLogout()
    // 绑定页面离开监听
    window.onbeforeunload = () => {
      this.leavePage()
    }
  },
  methods: {
    // 页面离开的时候缓存未提交的代码（只有未提交状态下才会调用该接口）
    leavePage(){
      const list = this.workbench
      if(!this.$refs.mainindex.isSubmit && list.length && list.some(e => e.code)){
        const cache = {
          projectId: this.projectId,
          judgmentId: list[Number(this.curTab)].judgmentId
        }
        localStorage.setItem('codeCache', JSON.stringify(cache)) // 在本地缓存里保存项目id和判分点id，下次进来通过这两个id去查找缓存代码。之所以不在前端缓存代码是预防更换了浏览器或电脑后依然可以找回缓存代码，只不过更换了客户端后本地缓存就消失了，这种情况就做一个向下处理，就切换项目的时候去恢复代码
        list.map(e => {
          if (e.code) {
            let data = {
              code: e.code,
              bcId: e.judgmentId,
              cid: this.courseId,
              projectId: this.projectId
            }
            this.$post(this.api.saveCache,data).then(res => {}).catch(e => {})
          }
        })
      }
    },
    // 长时间未点击页面，就自动退出页面
    autoLogout(){
      let lastTime = new Date().getTime()
      let logout = false
      // 页面点击后赋值当前时间
      document.onmousedown = () => {
        lastTime = new Date().getTime()
      }
      // 每秒钟判断一次，如果当前时间距离上次点击页面的试卷超过了设置的时间，就退出登录
      setInterval(() => {
        if((new Date().getTime() - lastTime) > this.$config.autoLogoutTime){
            logout || this.$message.error('用户登录过期，请重新登录')
            logout = true
            setTimeout(this.back,1500)
        }
      },1000)
    },
    // 重置编辑器
    recoveryCode(curTab = '0'){
      this.curTab = curTab
      this.codeKey++
    },
    // 退出实验
    back() {
      if(this.projectPermissions){
        // 返回到考核列表
        if (this.$config.isBeta) { // 判断是否是职站测试服
          location.href = `http://120.78.198.231/#/ass/list`
        }
        location.href = `${this.$config.host}#/dashboard#2`
      }else{
        // 返回到实验台
        if (this.$config.isBeta) {
          location.href = `http://120.78.198.231/#/station/list`
        }
        // location.href = `${this.$config.host}#/dashboard#1`
      }
      this.$refs.mainindex.getClearTime();
    },
    // 赋值项目id、权限、项目列表
    getQueryIndex(projectId, workbench) {
      this.projectId = projectId
      this.workbench = workbench
    },
  }
};
</script>

<style lang="scss" scoped>
.menu {
  position: relative;
  z-index: 1000;
}
.code-right {
  /* height: 800px; */
  width: 230px;
  background: #1b1b1b;
  display: inline-block;
}
//创建工作台
::v-deep .el-form-item {
  margin-bottom: 0px;
}
::v-deep .el-dialog--center {
  width: 400px;
}
::v-deep .el-dialog__headerbtn .el-icon-close:before {
  padding: 3px;
  background-color: #fdca17;
  border-radius: 50%;
  color: #ffffff;
}
.select1 ::v-deep .el-input__icon {
  line-height: 40px;
}
.select1 {
  margin: 0;
}

//tabs
.tab ::v-deep .el-tabs__header {
  margin-bottom: 0;
}
.tab ::v-deep .el-tabs__item.is-active {
  color: #333;
  background-color: #fdca17;
}
.tab ::v-deep .el-icon-circle-plus-outline:before {
  font-size: 16px;
}

.tab {
  height: 50px;
  line-height: 50px;
}
// tabs边框样式
::v-deep .el-tabs--card > .el-tabs__header {
  border-bottom: none;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item {
  border-left: none;
  border-bottom: none;
}
// 编程语言

.center p {
  font-size: 16px;
  margin-left: 15px;
  margin-right: 15px;
}
.center {
  height: 60px;
  line-height: 60px;
}
.center ::v-deep .el-input {
  width: 10%;
}
.center ::v-deep .el-input.is-disabled .el-input__inner {
  // border-color: #fdca17;
  border-radius: 30px;
}
//头部
.bt ::v-deep .el-button + .el-button {
  margin-left: 0;
}
.bt ::v-deep .el-button--primary,
.el-button--primary:focus,
.el-button--primary:hover,
.el-button--primary:active {
  color: #202020;
  border: none;
  background-color: #fdca17;
}
.bt ::v-deep .el-button {
  border-radius: 0;
  border: none;
}

.header p {
  font-size: 16px;
  font-weight: 700;
  color: rgba(51, 51, 51, 1);
  margin-left: 18px;
}
.header {
  background-color: #f8f8f8;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
  &.hh{
    padding: 10px 0;
    line-height: normal;
  }
  .logo{
    width: 200px;
    margin-left: 10px;
  }
}
//公共类
p {
  margin: 0;
}
.flex {
  display: flex;
}
// 滚动条的宽度
::v-deep ::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
::v-deep ::-webkit-scrollbar-thumb {
  background-color: #fdca17;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 5px #dddddd;
}
::v-deep ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px #dddddd;
  border-radius: 0;
  background: #dddddd;
}
//改变placeholder的样式
::v-deep input::-webkit-input-placeholder {
  color: #333;
}
::v-deep input::-moz-input-placeholder {
  color: #333;
}
::v-deep input::-ms-input-placeholder {
  color: #333;
}
//下拉框的icon
::v-deep .el-input__icon {
  line-height: 60px;
}
//下拉框
::v-deep .el-select__caret:before {
  content: "\e78f";
  font-size: 16px;
  padding: 3px;
  background-color: #fdca17;
  border-radius: 50%;
  color: #ffffff;
}
::v-deep .el-input--suffix .el-input__inner {
  color: #333;
  font-size: 14px;
  border-radius: 30px;
  border: none;
  background-color: #f5f5f5;
  margin-left: 10px;
}
</style>