yujialong 6 months ago
parent ac88afa39b
commit 05fd504802
  1. 7
      src/components/TestPanel.vue
  2. 316
      src/components/codemirror.vue
  3. 4
      src/config/index.js

@ -635,9 +635,8 @@ export default {
this.isSelected = true this.isSelected = true
await this.getEntryTime() await this.getEntryTime()
this.countVal = this.entryTime this.countVal = this.entryTime
this.getProDetail().then(() => { await this.getProDetail()
this.getCache() this.getCache()
}).catch(res => { })
this.setSubmit(false) this.setSubmit(false)
this.grade = '00' this.grade = '00'
this.pannelTab = 'first' this.pannelTab = 'first'
@ -1209,6 +1208,10 @@ export default {
border-radius: 6px; border-radius: 6px;
} }
.actions {
z-index: 1001;
}
.submit { .submit {
width: 106px; width: 106px;
font-size: 16px; font-size: 16px;

@ -1,37 +1,18 @@
<template> <template>
<div class="code-wrap flex"> <div class="code-wrap flex">
<div class="left"> <div class="left">
<codemirror v-model="codeVal" <codemirror v-model="codeVal" :options="cmOption" class="code-mirror" @ready="ready" ref="codemirror">
:options="cmOption" </codemirror>
class="code-mirror" <div v-if="isSubmit" class="code-mask"></div>
@ready="ready"
ref="codemirror"></codemirror>
<div v-if="isSubmit"
class="code-mask"></div>
<div class="btns"> <div class="btns">
<template v-if="!pid"> <template v-if="!pid">
<span class="el-icon-delete del" <span class="el-icon-delete del" @click="clearCode"></span>
@click="clearCode"></span> <el-button v-if="isPrac" class="btn" type="danger" @click="myCode">我的代码</el-button>
<el-button v-if="isPrac" <el-button v-if="modelIsShow" class="btn" type="warning" @click="importModel">导入模型</el-button>
class="btn" <el-button class="run btn" type="primary" @click="runCode(false)" :disabled="runEnable">运行</el-button>
type="danger"
@click="myCode">我的代码</el-button>
<el-button v-if="modelIsShow"
class="btn"
type="warning"
@click="importModel">导入模型</el-button>
<el-button class="run btn"
type="primary"
@click="runCode(false)"
:disabled="runEnable">运行</el-button>
</template> </template>
<el-popconfirm v-else <el-popconfirm v-else title="确定终止运行本次代码?" @confirm="stopRunCode">
title="确定终止运行本次代码?" <el-button slot="reference" class="run" type="danger" :disabled="runEnable">终止运行</el-button>
@confirm="stopRunCode">
<el-button slot="reference"
class="run"
type="danger"
:disabled="runEnable">终止运行</el-button>
</el-popconfirm> </el-popconfirm>
</div> </div>
@ -39,50 +20,28 @@
<div class="line"></div> <div class="line"></div>
<div class="code-right answer"> <div class="code-right answer">
<p :class="['text-wrapper', 'pic-num' + picSrcList.length]">{{ runResult }}</p> <p :class="['text-wrapper', 'pic-num' + picSrcList.length]">{{ runResult }}</p>
<div :class="['pic-wrap', {wrong: isError === 0}]" <div :class="['pic-wrap', { wrong: isError === 0 }]" v-if="picSrcList.length">
v-if="picSrcList.length"> <div class="pic-item" v-for="(img, i) in picSrcList" :key="i">
<div class="pic-item"
v-for="(img, i) in picSrcList"
:key="i">
<div class="pic-inner"> <div class="pic-inner">
<el-image class="pic" <el-image class="pic" :src="img" :preview-src-list="picSrcList">
:src="img"
:preview-src-list="picSrcList">
</el-image> </el-image>
</div> </div>
<el-button class="download-btn btn" <el-button class="download-btn btn" type="primary" size="mini" @click="downloadPic(i)">下载图片</el-button>
type="primary" <a :ref="'picLink' + i" style="display: none;" download="运行结果.png" :href="img">下载图片</a>
size="mini"
@click="downloadPic(i)">下载图片</el-button>
<a :ref="'picLink' + i"
style="display: none;"
download="运行结果.png"
:href="img">下载图片</a>
</div> </div>
</div> </div>
<div class="result-right t-color" <div class="result-right t-color" v-show="isError">
v-show="isError"> <img :src="require(`@/assets/images/system/${$themeId}/yes.png`)" alt />运行成功
<img :src="require(`@/assets/images/system/${$themeId}/yes.png`)" <el-button class="tips-btn" @click="exportResult">导出结果</el-button>
alt />运行成功
<el-button class="tips-btn"
@click="exportResult">导出结果</el-button>
</div> </div>
<div class="result-wrong" <div class="result-wrong" v-show="isError === 0">
v-show="isError === 0"> <img src="@/assets/images/error.png" alt />
<img src="@/assets/images/error.png"
alt />
{{ errLine }}行出现错误 {{ errLine }}行出现错误
<el-button class="tips-btn" <el-button class="tips-btn" @click="getTips" v-show="isPrac">提示</el-button>
@click="getTips" <el-dialog title="答案提示" center :close-on-click-modal="false" :visible.sync="tipsVisible">
v-show="isPrac">提示</el-button>
<el-dialog title="答案提示"
center
:close-on-click-modal="false"
:visible.sync="tipsVisible">
<el-tabs> <el-tabs>
<el-tab-pane label="参考答案"> <el-tab-pane label="参考答案">
<div :class="['answer-wrap', {client: !fromManager}]" <div :class="['answer-wrap', { client: !fromManager }]" v-html="correctAnswer"></div>
v-html="correctAnswer"></div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-dialog> </el-dialog>
@ -90,18 +49,10 @@
</div> </div>
<!-- 导入模型 --> <!-- 导入模型 -->
<el-dialog title="请选择要导入的模型" <el-dialog title="请选择要导入的模型" :visible.sync="modelVisible" width="400px" :close-on-click-modal="false"
:visible.sync="modelVisible"
width="400px"
:close-on-click-modal="false"
custom-class="model-dia"> custom-class="model-dia">
<el-select class="w-100" <el-select class="w-100" v-model="modelType" size="mini">
v-model="modelType" <el-option v-for="item in modelOp" :key="item.id" :label="item.name" :value="item.id">
size="mini">
<el-option v-for="item in modelOp"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option> </el-option>
</el-select> </el-select>
<!-- <el-radio-group v-model="modelType" <!-- <el-radio-group v-model="modelType"
@ -115,161 +66,80 @@
</el-radio-group> --> </el-radio-group> -->
<!-- <el-divider></el-divider> --> <!-- <el-divider></el-divider> -->
<div class="model-wrap"> <div class="model-wrap">
<el-tree v-if="!modelType" <el-tree v-if="!modelType" :data="schoolModel" ref="tree" default-expand-all @check-change="treeCheckChange"
:data="schoolModel" show-checkbox :check-strictly="true" node-key="id"
ref="tree" :props="{ children: 'children', label: 'categoryName', isLeaf: 'leaf' }" v-loading="modelLoading">
default-expand-all
@check-change="treeCheckChange"
show-checkbox
:check-strictly="true"
node-key="id"
:props="{children: 'children', label: 'categoryName', isLeaf: 'leaf'}"
v-loading="modelLoading">
</el-tree> </el-tree>
<el-tree v-if="modelType" <el-tree v-if="modelType" :data="systemModel" ref="tree" default-expand-all @check-change="treeCheckChange"
:data="systemModel" show-checkbox :check-strictly="true" node-key="id"
ref="tree" :props="{ children: 'children', label: 'categoryName', isLeaf: 'leaf' }" v-loading="modelLoading">
default-expand-all
@check-change="treeCheckChange"
show-checkbox
:check-strictly="true"
node-key="id"
:props="{children: 'children', label: 'categoryName', isLeaf: 'leaf'}"
v-loading="modelLoading">
</el-tree> </el-tree>
</div> </div>
<span slot="footer" <span slot="footer" class="dialog-footer">
class="dialog-footer"> <el-button size="small" @click="modelVisible = false">取消</el-button>
<el-button size="small" <el-button size="small" type="primary" @click="submit">导入</el-button>
@click="modelVisible = false">取消</el-button>
<el-button size="small"
type="primary"
@click="submit">导入</el-button>
</span> </span>
</el-dialog> </el-dialog>
<el-dialog title="我的代码" <el-dialog title="我的代码" :visible.sync="codeVisible" width="1200px" :close-on-click-modal="false"
:visible.sync="codeVisible"
width="1200px"
:close-on-click-modal="false"
custom-class="code-dia"> custom-class="code-dia">
<el-tooltip class="item" <el-tooltip class="item" content="列表中展示当前课程已提交的实验代码" placement="right">
content="列表中展示当前课程已提交的实验代码" <i class="info el-icon-warning" style="margin-right: 10px"></i>
placement="right">
<i class="info el-icon-warning"
style="margin-right: 10px"></i>
</el-tooltip> </el-tooltip>
<div class="tool"> <div class="tool">
<el-input style="width: 250px" <el-input style="width: 250px" placeholder="请输入项目名称、判分点名称" v-model="keyword" suffix-icon="el-icon-search"
placeholder="请输入项目名称、判分点名称" clearable size="small"></el-input>
v-model="keyword"
suffix-icon="el-icon-search"
clearable
size="small"></el-input>
<div class="action"> <div class="action">
<el-button class="cus-btn" <el-button class="cus-btn" type="primary" size="small" @click="delAll">批量删除</el-button>
type="primary"
size="small"
@click="delAll">批量删除</el-button>
</div> </div>
</div> </div>
<el-table :data="codeList" <el-table :data="codeList" class="cus-table" ref="table" stripe max-height="400" header-align="center"
class="cus-table"
ref="table"
stripe
max-height="400"
header-align="center"
@selection-change="handleSelectionChange"> @selection-change="handleSelectionChange">
<el-table-column type="selection" <el-table-column type="selection" width="60" align="center"></el-table-column>
width="60" <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
align="center"></el-table-column> <el-table-column prop="judgmentName" label="判分点" min-width="250" align="center"
<el-table-column type="index"
label="序号"
width="55"
align="center"></el-table-column>
<el-table-column prop="judgmentName"
label="判分点"
min-width="250"
align="center"
show-overflow-tooltip></el-table-column> show-overflow-tooltip></el-table-column>
<el-table-column prop="projectName" <el-table-column prop="projectName" label="项目名称" min-width="250" align="center"
label="项目名称"
min-width="250"
align="center"
show-overflow-tooltip></el-table-column> show-overflow-tooltip></el-table-column>
<el-table-column prop="submitTime" <el-table-column prop="submitTime" label="提交时间" width="140" align="center"></el-table-column>
label="提交时间" <el-table-column prop="score" label="是否得分" width="80" align="center"></el-table-column>
width="140" <el-table-column width="190" label="操作" align="center">
align="center"></el-table-column>
<el-table-column prop="score"
label="是否得分"
width="80"
align="center"></el-table-column>
<el-table-column width="190"
label="操作"
align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" <el-button type="text" @click="showCode(scope.row)">查看代码</el-button>
@click="showCode(scope.row)">查看代码</el-button> <el-button type="text" @click="importCode(scope.row)">插入代码</el-button>
<el-button type="text" <el-button type="text" @click="del(scope.row)">删除</el-button>
@click="importCode(scope.row)">插入代码</el-button>
<el-button type="text"
@click="del(scope.row)">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="pagination"> <div class="pagination">
<el-pagination background <el-pagination background layout="total,prev, pager, next" :current-page="page"
layout="total,prev, pager, next" @current-change="handleCurrentChange" :total="total"></el-pagination>
:current-page="page"
@current-change="handleCurrentChange"
:total="total"></el-pagination>
</div> </div>
<span slot="footer" <span slot="footer" class="dialog-footer">
class="dialog-footer"> <el-button size="small" type="primary" @click="codeVisible = false">关闭</el-button>
<el-button size="small"
type="primary"
@click="codeVisible = false">关闭</el-button>
</span> </span>
</el-dialog> </el-dialog>
<el-dialog :title="curRow.judgmentName" <el-dialog :title="curRow.judgmentName" :visible.sync="showVisible" width="700px" :close-on-click-modal="false"
:visible.sync="showVisible"
width="700px"
:close-on-click-modal="false"
custom-class="code-dia"> custom-class="code-dia">
<el-tabs class="code-tab" <el-tabs class="code-tab" v-model="showActive">
v-model="showActive"> <el-tab-pane label="代码" name="code">
<el-tab-pane label="代码" <codemirror class="code" v-model="curCode" :options="cmOptionDia"></codemirror>
name="code">
<codemirror class="code"
v-model="curCode"
:options="cmOptionDia"></codemirror>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="结果" <el-tab-pane label="结果" name="result">
name="result">
<div style="position: relative"> <div style="position: relative">
<div class="result" <div class="result" v-html="curRow.runResults"></div>
v-html="curRow.runResults"></div> <div v-if="curPhotoUrl.length" class="pics">
<div v-if="curPhotoUrl.length" <div class="pic-item" v-for="(img, i) in curPhotoUrl" :key="i">
class="pics"> <el-image class="pic" :src="img" :preview-src-list="curPhotoUrl">
<div class="pic-item"
v-for="(img, i) in curPhotoUrl"
:key="i">
<el-image class="pic"
:src="img"
:preview-src-list="curPhotoUrl">
</el-image> </el-image>
</div> </div>
</div> </div>
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<span slot="footer" <span slot="footer" class="dialog-footer">
class="dialog-footer"> <el-button size="small" type="primary" @click="showSubmit">插入代码</el-button>
<el-button size="small"
type="primary"
@click="showSubmit">插入代码</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
@ -968,16 +838,20 @@ export default {
.code-wrap { .code-wrap {
position: relative; position: relative;
} }
.left { .left {
position: relative; position: relative;
width: 60%; width: 60%;
} }
.text-wrapper { .text-wrapper {
white-space: pre-wrap; white-space: pre-wrap;
} }
/deep/.CodeMirror-code { /deep/.CodeMirror-code {
font-family: 'Microsoft Yahei'; font-family: 'Microsoft Yahei';
} }
/deep/.answer { /deep/.answer {
.el-tab-pane { .el-tab-pane {
padding: 0 10px; padding: 0 10px;
@ -986,38 +860,48 @@ export default {
overflow-y: auto; overflow-y: auto;
white-space: pre-wrap; white-space: pre-wrap;
} }
.el-dialog--center { .el-dialog--center {
width: 500px; width: 500px;
height: 500px; height: 500px;
} }
.el-dialog__title { .el-dialog__title {
font-size: 22px; font-size: 22px;
font-weight: 500; font-weight: 500;
} }
.el-tabs__nav-wrap::after { .el-tabs__nav-wrap::after {
background-color: #333; background-color: #333;
} }
.el-tabs__active-bar { .el-tabs__active-bar {
height: 0; height: 0;
background-color: #fff; background-color: #fff;
} }
.el-tabs__header { .el-tabs__header {
background-color: #333; background-color: #333;
} }
.el-dialog--center .el-dialog__body { .el-dialog--center .el-dialog__body {
padding: 0; padding: 0;
} }
.el-tabs__item { .el-tabs__item {
width: 80px; width: 80px;
color: #fff; color: #fff;
} }
.el-tabs--top .el-tabs__item.is-top:nth-child(2) { .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
padding-left: 20px; padding-left: 20px;
} }
.el-tabs__item.is-active { .el-tabs__item.is-active {
color: #fff !important; color: #fff !important;
background-color: #333 !important; background-color: #333 !important;
} }
.tips-btn { .tips-btn {
margin-top: 10px; margin-top: 10px;
height: 40px; height: 40px;
@ -1027,6 +911,7 @@ export default {
right: 0; right: 0;
background: rgba(255, 49, 49, 1); background: rgba(255, 49, 49, 1);
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
@ -1035,6 +920,7 @@ export default {
} }
} }
} }
.del { .del {
width: 40px; width: 40px;
margin: 0 10px; margin: 0 10px;
@ -1044,17 +930,21 @@ export default {
border-radius: 50%; border-radius: 50%;
background-color: #f00; background-color: #f00;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
opacity: 0.9; opacity: 0.9;
} }
} }
.result-right { .result-right {
background-color: rgba(43, 40, 22, 1); background-color: rgba(43, 40, 22, 1);
} }
.result-wrong { .result-wrong {
background-color: rgba(43, 22, 22, 1); background-color: rgba(43, 22, 22, 1);
color: #f00; color: #f00;
} }
.result-wrong, .result-wrong,
.result-right { .result-right {
position: absolute; position: absolute;
@ -1063,6 +953,7 @@ export default {
display: flex; display: flex;
bottom: 10px; bottom: 10px;
padding: 0 10px; padding: 0 10px;
img { img {
width: 40px; width: 40px;
height: 40px; height: 40px;
@ -1070,6 +961,7 @@ export default {
margin-right: 10px; margin-right: 10px;
} }
} }
.line { .line {
z-index: 2; z-index: 2;
position: absolute; position: absolute;
@ -1079,6 +971,7 @@ export default {
height: 100%; height: 100%;
cursor: e-resize; cursor: e-resize;
} }
.code-right { .code-right {
width: 40%; width: 40%;
color: #fff; color: #fff;
@ -1086,6 +979,7 @@ export default {
display: inline-block; display: inline-block;
position: relative; position: relative;
overflow-x: auto; overflow-x: auto;
p { p {
font-size: 18px; font-size: 18px;
margin: 10px; margin: 10px;
@ -1094,13 +988,16 @@ export default {
height: calc(100vh - 387px); height: calc(100vh - 387px);
overflow: auto; overflow: auto;
} }
.pic-num0 { .pic-num0 {
height: calc(100vh - 247px); height: calc(100vh - 247px);
} }
.pic-num1 { .pic-num1 {
height: calc(100vh - 520px); height: calc(100vh - 520px);
} }
} }
.pic-wrap { .pic-wrap {
position: absolute; position: absolute;
left: 0; left: 0;
@ -1111,24 +1008,30 @@ export default {
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
overflow: auto; overflow: auto;
&.wrong { &.wrong {
bottom: 60px; bottom: 60px;
} }
.pic-item { .pic-item {
margin: 0 5px 5px; margin: 0 5px 5px;
.pic-inner { .pic-inner {
height: 100px; height: 100px;
} }
&:only-child { &:only-child {
.pic-inner { .pic-inner {
height: auto; height: auto;
} }
.pic { .pic {
width: 50%; width: 50%;
max-height: none; max-height: none;
} }
} }
} }
.pic { .pic {
display: block; display: block;
width: 100px; width: 100px;
@ -1137,6 +1040,7 @@ export default {
margin: 0 auto 10px; margin: 0 auto 10px;
} }
} }
.code-mask { .code-mask {
z-index: 2; z-index: 2;
position: absolute; position: absolute;
@ -1145,6 +1049,7 @@ export default {
bottom: 0; bottom: 0;
right: 0; right: 0;
} }
.btns { .btns {
z-index: 99; z-index: 99;
position: absolute; position: absolute;
@ -1152,63 +1057,78 @@ export default {
bottom: 15px; bottom: 15px;
display: flex; display: flex;
} }
.run { .run {
width: 100px; width: 100px;
color: #fff; color: #fff;
} }
.download-btn { .download-btn {
color: #fff; color: #fff;
} }
/deep/.answer-wrap { /deep/.answer-wrap {
&.client { &.client {
user-select: none; user-select: none;
} }
pre { pre {
width: 100%; width: 100%;
white-space: pre-wrap; white-space: pre-wrap;
} }
img { img {
max-width: 100%; max-width: 100%;
} }
} }
/deep/.model-dia { /deep/.model-dia {
.el-dialog__body { .el-dialog__body {
padding: 0 20px; padding: 0 20px;
} }
.el-divider--horizontal { .el-divider--horizontal {
margin: 15px 0; margin: 15px 0;
} }
} }
.model-wrap { .model-wrap {
max-height: 400px; max-height: 400px;
overflow: auto; overflow: auto;
} }
/deep/.code-dia { /deep/.code-dia {
.el-dialog__header { .el-dialog__header {
padding: 0 40px 0 20px; padding: 0 40px 0 20px;
} }
.el-dialog__body { .el-dialog__body {
padding: 0 20px; padding: 0 20px;
} }
.info { .info {
position: absolute; position: absolute;
top: 18px; top: 18px;
left: 100px; left: 100px;
color: #88aef5; color: #88aef5;
} }
.code-tab { .code-tab {
.el-tabs__item.is-active { .el-tabs__item.is-active {
color: #333 !important; color: #333 !important;
background-color: transparent; background-color: transparent;
} }
} }
.tool { .tool {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.code { .code {
margin-top: 10px; margin-top: 10px;
} }
.result { .result {
max-height: 300px; max-height: 300px;
font-size: 18px; font-size: 18px;
@ -1217,12 +1137,15 @@ export default {
color: #333; color: #333;
overflow: auto; overflow: auto;
} }
.pics { .pics {
display: flex; display: flex;
margin-top: 20px; margin-top: 20px;
overflow: auto; overflow: auto;
.pic-item { .pic-item {
margin: 0 5px 5px; margin: 0 5px 5px;
&:only-child { &:only-child {
.pic { .pic {
width: 50%; width: 50%;
@ -1230,6 +1153,7 @@ export default {
} }
} }
} }
.pic { .pic {
display: block; display: block;
width: 100px; width: 100px;

@ -13,8 +13,8 @@ let host = location.origin + '/'
let bankPath = `${location.origin}/banksystem` // 银行系统 let bankPath = `${location.origin}/banksystem` // 银行系统
// 121.37.12.51 | 192.168.31.151 // 121.37.12.51 | 192.168.31.151
if (isDev) { if (isDev) {
host = 'http://192.168.31.217:9000/' // host = 'http://192.168.31.217:9000/'
// host = 'http://121.37.12.51:9000/' host = 'http://121.37.12.51:9000/'
// host = 'https://occupationlab.com/' // host = 'https://occupationlab.com/'
bankPath = `http://${location.hostname}:8093` bankPath = `http://${location.hostname}:8093`
} else if (isPro) { } else if (isPro) {

Loading…
Cancel
Save