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"
          ></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 && !this.assessmentId && list.length && list.some(e => e.code)){
        const cache = {
          projectId: this.projectId,
          judgmentId: list[this.curTab].judgmentId
        }
        localStorage.setItem('codeCache', JSON.stringify(cache))
        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){
      this.curTab = '0'
      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>