|
|
|
|
@ -44,6 +44,8 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<el-button @click="toggleReport" |
|
|
|
|
v-if="$parent.language && !isSubmit && !competitionId">填写实验报告</el-button> |
|
|
|
|
<el-button @click="toReport" |
|
|
|
|
v-if="isSubmit && !competitionId">查看实验报告</el-button> |
|
|
|
|
<el-button class="reload" |
|
|
|
|
@ -56,7 +58,42 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</el-header> |
|
|
|
|
<el-container> |
|
|
|
|
<div class="report-wrap" |
|
|
|
|
v-if="reportVisible"> |
|
|
|
|
<i class="el-icon-caret-top close-report"></i> |
|
|
|
|
<el-table class="report-table" |
|
|
|
|
:data="taskList" |
|
|
|
|
:max-height="tableHeight"> |
|
|
|
|
<el-table-column prop="name" |
|
|
|
|
label="判分点" |
|
|
|
|
width="210" |
|
|
|
|
align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="score" |
|
|
|
|
label="答案" |
|
|
|
|
align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<codemirror v-model="scope.row.code" |
|
|
|
|
:options="cmOption" |
|
|
|
|
class="code-mirror" |
|
|
|
|
:ref="'codemirror' + scope.$index" |
|
|
|
|
@ready="ready"></codemirror> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="score" |
|
|
|
|
label="运行结果" |
|
|
|
|
align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<quill class="quill" |
|
|
|
|
:tools="false" |
|
|
|
|
:border="true" |
|
|
|
|
v-model="scope.row.codeResult" |
|
|
|
|
:height="300" |
|
|
|
|
:index="1" /> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
</el-table> |
|
|
|
|
</div> |
|
|
|
|
<el-container v-else> |
|
|
|
|
<el-aside width="30%"> |
|
|
|
|
<div class="aside-header"> |
|
|
|
|
<div :class="['p-title color', 'system' + systemId]"> |
|
|
|
|
@ -78,7 +115,8 @@ |
|
|
|
|
<el-col :span="24"> |
|
|
|
|
<el-card shadow="never" |
|
|
|
|
:border="false"> |
|
|
|
|
<el-table :data="taskList" |
|
|
|
|
<el-table class="task-table" |
|
|
|
|
:data="taskList" |
|
|
|
|
:stripe="true"> |
|
|
|
|
<el-table-column type="index"></el-table-column> |
|
|
|
|
<el-table-column prop="name" |
|
|
|
|
@ -121,7 +159,8 @@ |
|
|
|
|
</div> |
|
|
|
|
</el-aside> |
|
|
|
|
<el-main> |
|
|
|
|
<el-tabs v-model="pannelTab" |
|
|
|
|
<el-tabs class="info-tab" |
|
|
|
|
v-model="pannelTab" |
|
|
|
|
type="card"> |
|
|
|
|
<el-tab-pane label="项目背景" |
|
|
|
|
name="first"> |
|
|
|
|
@ -145,7 +184,7 @@ |
|
|
|
|
</el-collapse> |
|
|
|
|
</el-tab-pane> |
|
|
|
|
<el-tab-pane label="实验提示" |
|
|
|
|
name="fifth" |
|
|
|
|
name="third" |
|
|
|
|
v-if="hintOpen"> |
|
|
|
|
<div class="ql-editor" |
|
|
|
|
v-html="experimentHint"></div> |
|
|
|
|
@ -172,12 +211,54 @@ |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import newmain from "../util/newMain"; |
|
|
|
|
import quill from "@/components/quill"; |
|
|
|
|
import util from '@/util' |
|
|
|
|
import Config from '@/config' |
|
|
|
|
import Cookie from 'js-cookie' |
|
|
|
|
import 'quill/dist/quill.core.css'; |
|
|
|
|
import 'quill/dist/quill.snow.css'; |
|
|
|
|
import 'quill/dist/quill.bubble.css'; |
|
|
|
|
|
|
|
|
|
import { codemirror } from "vue-codemirror"; |
|
|
|
|
import "codemirror/theme/ambiance.css"; // 这里引入的是主题样式 |
|
|
|
|
import "codemirror/mode/javascript/javascript.js"; |
|
|
|
|
import "codemirror/mode/python/python.js"; |
|
|
|
|
import "codemirror/lib/codemirror.css"; |
|
|
|
|
// require active-line.js |
|
|
|
|
import "codemirror/addon/selection/active-line.js"; |
|
|
|
|
// styleSelectedText |
|
|
|
|
import "codemirror/addon/selection/mark-selection.js"; |
|
|
|
|
// hint |
|
|
|
|
import "codemirror/addon/hint/show-hint.js"; |
|
|
|
|
import "codemirror/addon/hint/sql-hint.js"; |
|
|
|
|
import "codemirror/addon/hint/show-hint.css"; |
|
|
|
|
import "codemirror/addon/hint/javascript-hint.js"; |
|
|
|
|
// highlightSelectionMatches |
|
|
|
|
import "codemirror/addon/scroll/annotatescrollbar.js"; |
|
|
|
|
import "codemirror/addon/search/matchesonscrollbar.js"; |
|
|
|
|
import "codemirror/addon/search/match-highlighter.js"; |
|
|
|
|
// keyMap |
|
|
|
|
import "codemirror/mode/clike/clike.js"; |
|
|
|
|
import "codemirror/mode/sql/sql.js"; |
|
|
|
|
import "codemirror/addon/edit/matchbrackets.js"; |
|
|
|
|
import "codemirror/addon/comment/comment.js"; |
|
|
|
|
import "codemirror/addon/dialog/dialog.js"; |
|
|
|
|
import "codemirror/addon/dialog/dialog.css"; |
|
|
|
|
import "codemirror/addon/search/searchcursor.js"; |
|
|
|
|
import "codemirror/addon/search/search.js"; |
|
|
|
|
import "codemirror/keymap/sublime.js"; |
|
|
|
|
// foldGutter |
|
|
|
|
import "codemirror/addon/fold/foldgutter.css"; |
|
|
|
|
import "codemirror/addon/fold/brace-fold.js"; |
|
|
|
|
import "codemirror/addon/fold/comment-fold.js"; |
|
|
|
|
import "codemirror/addon/fold/foldcode.js"; |
|
|
|
|
import "codemirror/addon/fold/foldgutter.js"; |
|
|
|
|
import "codemirror/addon/fold/indent-fold.js"; |
|
|
|
|
import "codemirror/addon/fold/markdown-fold.js"; |
|
|
|
|
import "codemirror/addon/fold/xml-fold.js"; |
|
|
|
|
// 编辑的主题文件 |
|
|
|
|
import "codemirror/theme/monokai.css"; |
|
|
|
|
import "codemirror/theme/base16-light.css"; |
|
|
|
|
export default { |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
@ -221,9 +302,43 @@ export default { |
|
|
|
|
pannelTab: 'first', // 面板信息切换值 |
|
|
|
|
isSelected: false, // 是否选择过项目的标识，选择了会置为true |
|
|
|
|
statusTimer: null, // 查询考核状态定时器 |
|
|
|
|
reportId: '' |
|
|
|
|
reportId: '', |
|
|
|
|
|
|
|
|
|
cmOption: { |
|
|
|
|
scrollbarStyle: "native", |
|
|
|
|
tabSize: 2, // tab |
|
|
|
|
styleActiveLine: true, // 高亮选中行 |
|
|
|
|
lineNumbers: true, // 显示行号 |
|
|
|
|
styleSelectedText: true, |
|
|
|
|
line: true, |
|
|
|
|
foldGutter: true, // 块槽 |
|
|
|
|
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"], |
|
|
|
|
highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true }, // 可以启用该选项来突出显示当前选中的内容的所有实例 |
|
|
|
|
mode: 'python', |
|
|
|
|
lineWrapping: true, //代码折叠 |
|
|
|
|
autoCloseTags: true,// 自动闭合标签 |
|
|
|
|
autoCloseBrackets: true,// 自动闭合括号 |
|
|
|
|
// hint.js options |
|
|
|
|
hintOptions: { |
|
|
|
|
// 当匹配只有一项的时候是否自动补全 |
|
|
|
|
completeSingle: false |
|
|
|
|
}, |
|
|
|
|
// 快捷键 可提供三种模式 sublime、emacs、vim |
|
|
|
|
keyMap: "sublime", |
|
|
|
|
matchBrackets: true, |
|
|
|
|
showCursorWhenSelecting: true, |
|
|
|
|
// theme: "monokai" // 主题 |
|
|
|
|
}, |
|
|
|
|
reportTab: '', |
|
|
|
|
reportPoints: [], |
|
|
|
|
reportVisible: false, |
|
|
|
|
tableHeight: 0 |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
components: { |
|
|
|
|
codemirror, |
|
|
|
|
quill |
|
|
|
|
}, |
|
|
|
|
mounted () { |
|
|
|
|
// 2：竞赛，1：考核，0：练习 |
|
|
|
|
this.projectPermissions = this.assessmentId ? |
|
|
|
|
@ -256,6 +371,7 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
this.drag() |
|
|
|
|
this.tableHeight = window.innerHeight - 360 |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// 获取项目列表 |
|
|
|
|
@ -319,6 +435,14 @@ export default { |
|
|
|
|
this.$parent.getModelStatus(systemId) |
|
|
|
|
this.curReq = curReq // 实验要求默认全部展开，通过judgmentId来选中item |
|
|
|
|
this.points = points |
|
|
|
|
|
|
|
|
|
const reportPoints = JSON.parse(JSON.stringify(points)) |
|
|
|
|
points.forEach(e => { |
|
|
|
|
e.codeResult = '' |
|
|
|
|
}) |
|
|
|
|
this.reportPoints = reportPoints |
|
|
|
|
if (points.length) this.reportTab = reportPoints[0].judgmentId + '' |
|
|
|
|
console.log("🚀 ~ file: TestPanel.vue:423 ~ returnnewPromise ~ this.reportTab:", points, this.reportTab) |
|
|
|
|
this.taskList = points // 实验任务 |
|
|
|
|
this.judgmentId = points[0].judgmentId // 默认取第一个判分点 |
|
|
|
|
this.experimentTarget = project.experimentTarget |
|
|
|
|
@ -532,12 +656,24 @@ export default { |
|
|
|
|
this.countVal = 0 |
|
|
|
|
this.grade = '00' |
|
|
|
|
this.pannelTab = 'first' |
|
|
|
|
this.clearReport() |
|
|
|
|
this.$emit('recoveryCode') // 切换实训项目后回到第一个判分点 |
|
|
|
|
}, |
|
|
|
|
// 切换实验报告输入 |
|
|
|
|
toggleReport () { |
|
|
|
|
this.reportVisible = !this.reportVisible |
|
|
|
|
}, |
|
|
|
|
// 清空实验报告填写里的内容 |
|
|
|
|
clearReport () { |
|
|
|
|
this.taskList.forEach(e => { |
|
|
|
|
e.code = '' |
|
|
|
|
e.codeResult = '' |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 查看实验报告 |
|
|
|
|
toReport () { |
|
|
|
|
Cookie.set('doneProjectId', this.projectId) // 进入实验报告之前先存储当前项目id,从实验报告返回来后把这个id恢复 |
|
|
|
|
this.$router.push(`/report?reportId=${this.reportId}`) |
|
|
|
|
this.$router.push(`/report?reportId=${this.$store.state.reportId}`) |
|
|
|
|
}, |
|
|
|
|
//重新开始 |
|
|
|
|
reload () { |
|
|
|
|
@ -556,31 +692,70 @@ export default { |
|
|
|
|
this.$emit('tell', this.projectId, this.curSystemId, points) |
|
|
|
|
this.$emit('recoveryCode') |
|
|
|
|
this.startCount() |
|
|
|
|
this.clearReport() |
|
|
|
|
}, |
|
|
|
|
// 页面加载完后重置编辑框大小 |
|
|
|
|
ready () { |
|
|
|
|
for (let i = 0; i < this.points.length; i++) { |
|
|
|
|
const code = this.$refs['codemirror' + i][0].codemirror |
|
|
|
|
console.log('ready', code) |
|
|
|
|
|
|
|
|
|
// code && code.setSize('auto', 'calc(100vh - 150px)') |
|
|
|
|
code && code.setSize('auto', '300px') |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 提交询问 |
|
|
|
|
confirmSubmit () { |
|
|
|
|
const isVscode = this.$parent.language // 是否选择了vscode |
|
|
|
|
const { taskList } = this |
|
|
|
|
const pointList = this.$parent.workbench |
|
|
|
|
let msg = '此操作将视为结束考试，是否继续？' |
|
|
|
|
if (pointList.find(e => !e.codeId && e.code)) msg = '有代码没有运行，该代码将不得分，确定提交？' |
|
|
|
|
if (!isVscode && pointList.find(e => !e.codeId && e.code)) msg = '有代码没有运行，该代码将不得分，确定提交？' |
|
|
|
|
if (isVscode && !taskList.find(e => e.code || e.codeResult)) msg = '实验报告未填写，实验成绩为零，是否确认提交？' |
|
|
|
|
this.$confirm(msg, '提示', { |
|
|
|
|
confirmButtonText: '确定', |
|
|
|
|
cancelButtonText: '取消', |
|
|
|
|
type: 'warning', |
|
|
|
|
center: true |
|
|
|
|
}).then(() => { |
|
|
|
|
// 如果全部都没运行直接点提交，则主动运行一个空代码。（不然会造成上次运行的结果，这次进来不运行直接提交的话，会无法取到运行结果） |
|
|
|
|
if (!pointList.find(e => e.codeId)) { |
|
|
|
|
this.$post(this.api.runPythonCode, { |
|
|
|
|
code: '', |
|
|
|
|
bcId: pointList[0].judgmentId, |
|
|
|
|
cid: this.courseId, |
|
|
|
|
projectId: this.projectId |
|
|
|
|
}).then(({ codeId }) => { |
|
|
|
|
this.$parent.workbench[0].codeId = codeId |
|
|
|
|
// vscode类型的产品提交前需要自动运行每个判分点的代码以获取codeId |
|
|
|
|
if (isVscode) { |
|
|
|
|
const promises = [] |
|
|
|
|
taskList.map(async (e, i) => { |
|
|
|
|
(e.code || e.codeResult) && promises.push(new Promise(async (resolve, reject) => { |
|
|
|
|
const { code, codeId } = await this.$post(this.api.runPythonCode, { |
|
|
|
|
code: e.code, |
|
|
|
|
bcId: e.judgmentId, |
|
|
|
|
cid: this.courseId, |
|
|
|
|
projectId: this.projectId, |
|
|
|
|
userAnswer: e.codeResult || null, |
|
|
|
|
type: 1 |
|
|
|
|
}) |
|
|
|
|
this.$parent.workbench[i].codeId = codeId |
|
|
|
|
this.$parent.workbench[i].answer = e.codeResult |
|
|
|
|
this.$parent.workbench[i].retResult = 1 |
|
|
|
|
resolve() |
|
|
|
|
})) |
|
|
|
|
}) |
|
|
|
|
Promise.all(promises).then(_ => { |
|
|
|
|
this.submit() |
|
|
|
|
}).catch(err => { }) |
|
|
|
|
}) |
|
|
|
|
} else { |
|
|
|
|
this.submit() |
|
|
|
|
// 如果全部都没运行直接点提交，则主动运行一个空代码。（不然会造成上次运行的结果，这次进来不运行直接提交的话，会无法取到运行结果） |
|
|
|
|
if (!pointList.find(e => e.codeId)) { |
|
|
|
|
this.$post(this.api.runPythonCode, { |
|
|
|
|
code: '', |
|
|
|
|
bcId: pointList[0].judgmentId, |
|
|
|
|
cid: this.courseId, |
|
|
|
|
projectId: this.projectId, |
|
|
|
|
type: 0 |
|
|
|
|
}).then(({ codeId }) => { |
|
|
|
|
this.$parent.workbench[0].codeId = codeId |
|
|
|
|
this.submit() |
|
|
|
|
}).catch(err => { }) |
|
|
|
|
} else { |
|
|
|
|
this.submit() |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}).catch(() => { }) |
|
|
|
|
}, |
|
|
|
|
@ -632,6 +807,7 @@ export default { |
|
|
|
|
localStorage.removeItem('codeCache') |
|
|
|
|
this.setSubmit(true) |
|
|
|
|
clearInterval(this.statusTimer) |
|
|
|
|
this.reportVisible = false |
|
|
|
|
let list = retInfo |
|
|
|
|
let taskList = this.taskList |
|
|
|
|
let score = 0 |
|
|
|
|
@ -648,6 +824,7 @@ export default { |
|
|
|
|
}) |
|
|
|
|
this.grade = util.handleZero(score) // 前置加0(竞赛不显示分数) |
|
|
|
|
this.reportId = reportId |
|
|
|
|
this.$store.commit('setReportId', reportId) |
|
|
|
|
this.editReport(reportId) |
|
|
|
|
// 如果是竞赛，并且勾选了公布成绩详情的选项，则弹框提示 |
|
|
|
|
this.competitionId && this.resultsDetails == 0 && this.$alert('提交成功，成绩将在' + this.resultAnnouncementTime + '小时后发布，请去参赛信息模块查看', '提示', { |
|
|
|
|
@ -743,6 +920,7 @@ export default { |
|
|
|
|
let gap = 10 // 缝隙：小于缝隙时，则吸附 |
|
|
|
|
let parent = document.body |
|
|
|
|
document.querySelector('#header').onmousedown = e => { |
|
|
|
|
console.log("🚀 ~ file: TestPanel.vue:746 ~ document.querySelector ~ e:", e) |
|
|
|
|
var x = e.clientX - el.offsetLeft |
|
|
|
|
var y = e.clientY - el.offsetTop |
|
|
|
|
var left = 0 |
|
|
|
|
@ -840,11 +1018,6 @@ export default { |
|
|
|
|
/deep/.el-collapse-item__header { |
|
|
|
|
border-bottom: none; |
|
|
|
|
} |
|
|
|
|
/deep/.el-tabs__content { |
|
|
|
|
margin: 0 20px; |
|
|
|
|
max-height: calc(60vh - 70px); |
|
|
|
|
overflow: auto; |
|
|
|
|
} |
|
|
|
|
/deep/.el-icon-s-ticket:before { |
|
|
|
|
padding: 5px; |
|
|
|
|
font-size: 16px; |
|
|
|
|
@ -852,28 +1025,33 @@ export default { |
|
|
|
|
/deep/.el-collapse-item__arrow { |
|
|
|
|
margin: 0 5px 0 0; |
|
|
|
|
} |
|
|
|
|
/deep/.el-tabs__item { |
|
|
|
|
font-size: 16px; |
|
|
|
|
} |
|
|
|
|
/deep/.el-tabs--card > .el-tabs__header .el-tabs__nav { |
|
|
|
|
border: none; |
|
|
|
|
} |
|
|
|
|
/deep/.el-tabs--card > .el-tabs__header .el-tabs__item { |
|
|
|
|
border-left: none; |
|
|
|
|
} |
|
|
|
|
/deep/.el-tabs--card > .el-tabs__header { |
|
|
|
|
border-bottom: none; |
|
|
|
|
/deep/.info-tab.el-tabs--card { |
|
|
|
|
.el-tabs__item { |
|
|
|
|
font-size: 16px; |
|
|
|
|
} |
|
|
|
|
.el-tabs__item.is-active { |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
.el-tabs__header .el-tabs__nav { |
|
|
|
|
border: none; |
|
|
|
|
} |
|
|
|
|
.el-tabs__header .el-tabs__item { |
|
|
|
|
border-left: none; |
|
|
|
|
} |
|
|
|
|
.el-tabs__header { |
|
|
|
|
padding: 5px 20px; |
|
|
|
|
border-bottom: none; |
|
|
|
|
} |
|
|
|
|
& > .el-tabs__content { |
|
|
|
|
margin: 0 20px; |
|
|
|
|
max-height: calc(60vh - 70px); |
|
|
|
|
overflow: auto; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
/deep/.el-collapse { |
|
|
|
|
border-bottom: none; |
|
|
|
|
border-top: none; |
|
|
|
|
} |
|
|
|
|
/deep/.el-tabs__item.is-active { |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
/deep/.el-tabs__header { |
|
|
|
|
padding: 5px 20px; |
|
|
|
|
} |
|
|
|
|
.el-aside { |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
color: #333; |
|
|
|
|
@ -924,7 +1102,7 @@ export default { |
|
|
|
|
/deep/.el-card__body { |
|
|
|
|
padding: 0; |
|
|
|
|
} |
|
|
|
|
/deep/.el-table { |
|
|
|
|
/deep/.task-table { |
|
|
|
|
font-size: 12px; |
|
|
|
|
thead { |
|
|
|
|
color: #fff; |
|
|
|
|
@ -975,6 +1153,7 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.panel { |
|
|
|
|
z-index: 1000; |
|
|
|
|
position: relative; |
|
|
|
|
top: 200px; |
|
|
|
|
bottom: 20px; |
|
|
|
|
@ -1020,4 +1199,22 @@ export default { |
|
|
|
|
opacity: 0.9; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
/deep/.report-table.el-table { |
|
|
|
|
th { |
|
|
|
|
background-color: #c6daff !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.report-wrap { |
|
|
|
|
position: relative; |
|
|
|
|
padding-top: 5px; |
|
|
|
|
} |
|
|
|
|
.close-report { |
|
|
|
|
z-index: 2; |
|
|
|
|
position: absolute; |
|
|
|
|
top: -21px; |
|
|
|
|
right: 296px; |
|
|
|
|
font-size: 32px; |
|
|
|
|
color: #c6daff; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
</style> |
