FE_python_trial/src/views/Home.vue

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

    <div class="top">
      <div class="language">
        <p v-if="$config.isHh"
           style="font-size: 18px">{{$config.title}}</p>
        <p>编程语言</p>
        <el-select v-model="language"
                   @change="languageChange">
          <el-option v-for="(item, i) in languages"
                     :key="i"
                     :label="item.name"
                     :value="item.id"></el-option>
        </el-select>

        <el-button v-if="language"
                   class="open-vs"
                   type="primary"
                   size="small"
                   @click="openVscode">打开Vscode新窗口</el-button>
      </div>
      <div class="inline-center">
        <el-tooltip class="item"
                    effect="dark"
                    content="支持导入其它数据用于实验，总上传的文件大小不可以超过10M"
                    placement="bottom">
          <i class="info el-icon-warning"
             style="margin-right: 10px"></i>
        </el-tooltip>
        <el-button type="primary"
                   size="small"
                   icon="el-icon-document"
                   @click="toData">我的数据</el-button>
      </div>
    </div>

    <div class="tab">
      <el-tabs v-model="curTab"
               type="card"
               @tab-click="judChange">
        <el-tab-pane v-for="(item, i) in workbench"
                     :key="item.judgmentId"
                     :label="item.name"
                     :value="item.judgmentId">
          <codemirror v-if="!language"
                      :ref="'code' + i"
                      :key="codeKey"
                      :projectId.sync="projectId"
                      :systemId.sync="systemId"
                      :code.sync="item.code"
                      :judgmentId="item.judgmentId"
                      :codeId.sync="item.codeId"
                      :answer.sync="item.answer"
                      :retResult.sync="item.retResult"
                      :photoUrl.sync="item.photoUrl"
                      :modelIsShow.sync="modelIsShow"
                      @cache="leavePage"></codemirror>
          <iframe v-else
                  class="vscode"
                  :src="Config.vscodeUrl"
                  frameborder="0"
                  width="100%"></iframe>
        </el-tab-pane>
      </el-tabs>
    </div>

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

<script>
import testPanel from "../components/TestPanel";
import codemirror from "../components/codemirror";
import Cookie from 'js-cookie'
import { Loading } from 'element-ui'
import Config from '@/config'
export default {
  data () {
    return {
      Config,
      loaded: false, // 页面是否加载完的标识，页面默认隐藏，一进来先显示加载条，接口加载完后再显示页面，不然一开始会一闪而过没有样式的页面
      loadIns: null, // loading实例
      competitionId: Cookie.get('admin-competitionId'),
      fromManager: Cookie.get('admin-fromManager'), // 是否是从教师端进入
      courseId: Cookie.get('admin-courseId'), // 课程id
      curriculumName: Cookie.get('admin-curriculumName') ? decodeURIComponent(Cookie.get('admin-curriculumName')) : 'python', // 课程名称
      assessmentId: Cookie.get('admin-assessmentId'), // 考核id
      mallId: Cookie.get('admin-mallId'),
      language: +Cookie.get('admin-language') || 0, // 编程语言
      projectId: '',
      systemId: '',
      modelIsShow: false, // 导入模型按钮是否显示
      projectPermissions: 0, // 项目权限(0、练习 1、考核 2、竞赛)
      languages: [
        {
          id: 0,
          name: 'Python'
        },
        {
          id: 1,
          name: 'Vscode'
        },
      ],
      curTab: '', // 选中后绑定的对象
      workbench: [], // 判分点切换列表
      codeKey: 1 // 编辑器索引
    };
  },
  components: {
    codemirror,
    testPanel
  },
  mounted () {
    document.onkeydown = function (event) {
      var e = event || window.event || arguments.callee.caller.arguments[0];

      if (e && e.keyCode == 123) {
        e.returnValue = false;
        return (false);
      }
    }

    this.loadIns = Loading.service({
      background: 'rgba(255, 255, 255, .1)'
    })
    this.autoLogout()
    // 绑定页面离开监听
    window.onbeforeunload = () => {
      this.leavePage()
    }
  },
  beforeRouteLeave (to, from, next) {
    next(this.leavePage())
  },
  methods: {
    // 页面离开的时候缓存未提交的代码（只有未提交状态下才会调用该接口）
    leavePage () {
      const list = this.workbench
      // 未提交，且有判分点，才需要缓存
      if (!this.$refs.mainindex.isSubmit && list.length) {
        const cache = {
          projectId: Number(this.projectId),
          judgmentIdList: this.workbench.map(e => e.judgmentId)
        }
        // 如果有输入代码，则要入库，否则，只保存到本地
        if (list.some(e => e.code)) {
          list.map(e => {
            if (e.code) {
              let data = {
                competitionId: this.competitionId,
                assessmentId: this.assessmentId,
                code: e.code,
                bcId: e.judgmentId,
                cid: this.courseId,
                projectId: this.projectId
              }
              this.$post(this.api.saveCache, data).then(res => { }).catch(e => { })
            }
          })
        } else {
          cache.empty = true // 没有输入代码的，加个标识，回到页面的时候不需要调接口了，只需要恢复项目和判分点即可
        }
        localStorage.setItem('codeCache', JSON.stringify(cache)) // 在本地缓存里保存项目id和判分点id，下次进来通过这两个id去查找缓存代码。之所以不在前端缓存代码是预防更换了浏览器或电脑后依然可以找回缓存代码，只不过更换了客户端后本地缓存就消失了，这种情况就做一个向下处理，就切换项目的时候去恢复代码
      }
    },
    // 获取导入模型按钮展示状态
    getModelStatus (systemId) {
      this.$post(`${this.api.displayListOrNotByStudent}?systemId=${systemId}`).then(res => {
        this.modelIsShow = res.studentSideShowsTheStatus == 'true' ? true : false
      }).catch(res => { })
    },
    // 编程语言选择回调
    languageChange (id) {
      Cookie.set('admin-language', id)
      this.$refs.mainindex.reportVisible = false
    },
    // 打开Vscode新窗口
    openVscode () {
      window.open(Config.vscodeUrl)
    },
    // 跳转我的数据
    toData () {
      this.$router.push('/data')
    },
    // 长时间未点击页面，就自动退出页面
    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)
    },
    // 判分规则切换
    judChange () {
      this.$nextTick(_ => {
        const code = this.$refs['code' + this.curTab][0].$refs.codemirror.codemirror // 获取codemirror实例
        code.focus() // 编辑器聚焦
        code.setCursor(code.lineCount(), 0) // 焦点移动至最后面
      })
    },
    // 重置编辑器
    recoveryCode (curTab = '0') {
      this.curTab = curTab
      this.codeKey++
    },
    // 退出实验
    back () {
      let href = this.$config.isDev ?
        `http://${location.hostname}:8082/#/` :
        `${location.origin}${this.fromManager ?
          '/admin' :
          (!this.$config.isTest) ?
            '' :
            '/student'}/#/`
      // 考核
      if (this.assessmentId) {
        href += `ass/list`
      } else if (this.competitionId) {
        // 竞赛
        href += `match/list`
      } else {
        // 练习
        href += `station/preview?courseId=${this.courseId}&curriculumName=${this.curriculumName}&mallId=${this.mallId}`
      }
      location.href = href
    },
    // 赋值项目id、项目列表
    setPoints (projectId, systemId, workbench) {
      this.projectId = projectId
      this.systemId = systemId
      this.workbench = workbench
    },
  }
};
</script>

<style lang="scss" scoped>
[v-cloak] {
  display: none;
}
.header {
  display: flex;
  justify-content: space-between;
  height: 58px;
  line-height: 58px;
  background-color: #f8f8f8;
  &.hh {
    padding: 10px 0;
    line-height: normal;
  }
  p {
    margin-left: 18px;
    font-size: 20px;
    color: rgba(51, 51, 51, 1);
  }
  .logo {
    width: 200px;
    margin-left: 10px;
  }
  .back {
    padding: 23px 50px;
    border: none;
    border-radius: 0;
  }
}
/deep/.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 15px;
  line-height: 60px;
  .language {
    display: inline-flex;
    align-items: center;
  }
  p {
    font-size: 16px;
    margin-right: 15px;
  }
  .el-input {
    width: 200px;
  }
  .el-input .el-input__inner {
    border-radius: 30px;
  }
  .open-vs {
    margin-left: 20px;
  }
}

.vscode {
  height: calc(100vh - 186px);
}
.menu {
  position: relative;
  z-index: 1000;
}
::v-deep .el-dialog--center {
  width: 400px;
}
::v-deep .el-dialog__headerbtn .el-icon-close:before {
  padding: 3px;
  border-radius: 50%;
}
/deep/.tab {
  height: 50px;
  line-height: 50px;
  .el-tabs__header {
    margin-bottom: 0;
  }
  .el-tabs__item.is-active {
    color: #333;
  }
  .el-icon-circle-plus-outline:before {
    font-size: 16px;
  }
  .el-tabs--card > .el-tabs__header {
    border-bottom: none;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border: none;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__item {
    border-left: none;
    border-bottom: none;
  }
}
.info {
  color: #bfbfbf;
  cursor: pointer;
  &:hover {
    opacity: 0.9;
  }
}
</style>