parent
ddcf41931f
commit
2cf0f0674c
9 changed files with 566 additions and 419 deletions
|
After Width: | Height: | Size: 796 B |
@ -0,0 +1,402 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="left"> |
||||
<codemirror |
||||
v-model="codeVal" |
||||
:options="cmOption" |
||||
class="code-mirror" |
||||
@ready="ready" |
||||
ref="codemirror" |
||||
></codemirror> |
||||
<el-button |
||||
class="run btn" |
||||
type="primary" |
||||
@click="runCode" |
||||
>运行</el-button> |
||||
</div> |
||||
<div class="code-right answer"> |
||||
<p class="text-wrapper">{{ runResult }}</p> |
||||
<div class="pic-wrap" v-if="picSrcList.length"> |
||||
<div class="pic-item" v-for="(img, i) in picSrcList" :key="i"> |
||||
<el-image |
||||
class="pic" |
||||
:src="img" |
||||
:preview-src-list="picSrcList"> |
||||
</el-image> |
||||
<el-button class="download-btn btn" type="primary" size="mini" @click="downloadPic(i)">下载图片</el-button> |
||||
<a :ref="'picLink' + i" style="display: none;" download="运行结果.png" :href="img">下载图片</a> |
||||
</div> |
||||
</div> |
||||
<div class="result-right t-color" v-show="isError"> |
||||
<!-- <img :src="require(`@/assets/images/system/${systemId}/yes.png`)" alt />运行成功 --> |
||||
</div> |
||||
<div class="result-wrong" v-show="isError === 0"> |
||||
<img src="@/assets/img/error.png" alt /> |
||||
第{{errLine}}行出现错误 |
||||
<el-button class="tips-btn" @click="getTips" v-show="showTips">提示</el-button> |
||||
<el-dialog title="答案提示" center :close-on-click-modal="false" :visible.sync="tipsVisible"> |
||||
<el-tabs> |
||||
<el-tab-pane label="参考答案"> |
||||
<div class="answer-wrap" v-html="answer"></div> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</el-dialog> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
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"; |
||||
import { Loading } from 'element-ui'; |
||||
export default { |
||||
props: ['code', 'codeId', 'projectId', 'retResult'], |
||||
data() { |
||||
return { |
||||
showTips: false, // 显示隐藏提示按钮 |
||||
answer: '', // 正确答案 |
||||
codeVal: this.code, |
||||
runResult: '', // 运行结果 |
||||
isError: false, // 运行正确与否 |
||||
errLine: '', // 错误代码的位置 |
||||
tipsVisible: false, // 答案提示弹框显示标识 |
||||
picSrcList: [], |
||||
loadIns: null, // loading实例 |
||||
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" // 主题 |
||||
} |
||||
}; |
||||
}, |
||||
components: { |
||||
codemirror |
||||
}, |
||||
watch: { |
||||
codeVal(val) { |
||||
this.$emit("update:code", val) |
||||
} |
||||
}, |
||||
mounted() { |
||||
|
||||
}, |
||||
|
||||
methods: { |
||||
// 页面加载完后重置编辑框大小 |
||||
ready() { |
||||
const code = this.$refs.codemirror.codemirror |
||||
code.setSize("auto", "calc(100vh - 167px)"); |
||||
code.on('keypress', function() { |
||||
// 显示智能提示 |
||||
code.showHint() |
||||
}); |
||||
}, |
||||
// 运行代码 |
||||
runCode() { |
||||
let code = this.codeVal |
||||
if (!code) { |
||||
this.$message({ |
||||
message: "警告哦，内容为空不可运行", |
||||
type: "warning" |
||||
}) |
||||
} else { |
||||
const bcId = this.judgmentId |
||||
const cid = this.courseId |
||||
const projectId = this.projectId |
||||
this.loadIns = Loading.service({ |
||||
background: 'transparent' |
||||
}) |
||||
// 如果代码有savefig(python里的保存图片的方法),则要把savefig里的图片名字加上个时间戳，防止后台保存图片到服务器的时候图片名字重复导致覆盖 |
||||
code = code.replace(/\.savefig\(([\u4e00-\u9fa5\w]*?['"])/mg, str => { |
||||
return str + Date.now() |
||||
}) |
||||
// 把代码传给后端，在后端运行Python代码 |
||||
this.$post(this.api.runPythonCode, { |
||||
code, |
||||
bcId, |
||||
cid, |
||||
projectId |
||||
}).then(res => { |
||||
const data = res.code |
||||
const photo = data.photoUrl |
||||
const result = data.runResult |
||||
this.$emit('cache') // 每次运行代码都要把代码传给后端做缓存 |
||||
this.loadIns.close() |
||||
this.picSrcList = [] |
||||
if (photo) this.picSrcList = photo.split(',') |
||||
this.$emit('update:codeId', res.codeId) // 更新coddeId |
||||
this.$emit('update:answer', result) // 更新运行结果 |
||||
this.$emit('update:retResult', data.retResult) // 更新返回结果 |
||||
let imgList = '' |
||||
let firtImg = '' |
||||
try { |
||||
imgList = eval(result) |
||||
} catch (error) {} |
||||
if (imgList && imgList.length) firtImg = imgList[0] |
||||
// 如果是下载图片的代码，则要显示图片和运行结果，不用显示对错，换成显示下载图片 |
||||
if (photo) { |
||||
this.isError = '' // 对错隐藏 |
||||
const text = result.replace(photo, '') // 结果里包含了图片路径，所以要把图片路径给去掉 |
||||
this.runResult = text |
||||
this.picSrcList = photo.split(',') |
||||
} else if (imgList instanceof Array && imgList.length && typeof firtImg === 'string' && (firtImg.includes('.jpg') || firtImg.includes('.png') || firtImg.includes('img'))) { |
||||
/** |
||||
* 这段是为要下载图片的项目案例写的，后端会返回图片名称的数组，前端负责循环这个数组，然后下载下来 |
||||
* 只有该系统有这段代码，因为其他7个系统没有下载图片的项目，后续如果加了，直接把这段代码复制过去即可 |
||||
*/ |
||||
imgList.map((n,i) => { |
||||
// util.downloadFile(`${i+1}.jpg`,n) |
||||
}) |
||||
this.isError = 0 |
||||
this.runResult = '下载完成' |
||||
} else { |
||||
this.isError = data.retResult |
||||
this.runResult = result |
||||
this.errLine = parseInt(result.substring(result.indexOf("line") + 4, result.length)) |
||||
} |
||||
}).catch(res => { |
||||
res.status == 500 && this.$message.error('检测到代码里有非法代码，请检查是否有调用系统命令。') |
||||
this.loadIns.close() |
||||
}) |
||||
} |
||||
}, |
||||
// 下载图片 |
||||
downloadPic(i) { |
||||
this.$refs['picLink' + i][0].click() |
||||
}, |
||||
// 获取正式答案 |
||||
getTips() { |
||||
this.tipsVisible = true |
||||
this.$get(this.api.queryBcJudgmentByBcId, { |
||||
bcId: this.judgmentId |
||||
}).then(res => { |
||||
this.answer = res.experimentCode |
||||
}).catch(err => {}) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.wrap { |
||||
display: flex; |
||||
} |
||||
.left{ |
||||
position: relative; |
||||
width: calc(100% - 400px); |
||||
} |
||||
.text-wrapper { |
||||
white-space: pre-wrap; |
||||
} |
||||
/deep/.answer { |
||||
.el-tab-pane { |
||||
padding: 0 10px; |
||||
height: 340px; |
||||
overflow: hidden; |
||||
overflow-y: auto; |
||||
white-space: pre-wrap; |
||||
} |
||||
.el-dialog--center { |
||||
width: 500px; |
||||
height: 500px; |
||||
} |
||||
.el-dialog__title { |
||||
font-size: 22px; |
||||
font-weight: 500; |
||||
} |
||||
.el-tabs__nav-wrap::after { |
||||
background-color: #333; |
||||
} |
||||
.el-tabs__active-bar { |
||||
height: 0; |
||||
background-color: #fff; |
||||
} |
||||
.el-tabs__header { |
||||
background-color: #333; |
||||
} |
||||
.el-dialog--center .el-dialog__body { |
||||
padding: 0; |
||||
} |
||||
.el-tabs__item { |
||||
width: 80px; |
||||
color: #fff; |
||||
} |
||||
.el-tabs--top .el-tabs__item.is-top:nth-child(2) { |
||||
padding-left: 20px; |
||||
} |
||||
.el-tabs__item.is-active { |
||||
color: #fff !important; |
||||
background-color: #333 !important; |
||||
} |
||||
.tips-btn { |
||||
margin-top: 10px; |
||||
height: 40px; |
||||
width: 90px; |
||||
border: none; |
||||
position: absolute; |
||||
right: 0; |
||||
background: rgba(255, 49, 49, 1); |
||||
color: rgba(255, 255, 255, 1); |
||||
&:hover, |
||||
&:focus, |
||||
&:active { |
||||
background: rgba(255, 49, 49, 1); |
||||
color: rgba(255, 255, 255, 1); |
||||
} |
||||
} |
||||
} |
||||
/deep/.CodeMirror-wrap pre.CodeMirror-line, |
||||
.CodeMirror-wrap pre.CodeMirror-line-like { |
||||
height: 30px; |
||||
line-height: 30px; |
||||
} |
||||
.result-right { |
||||
background-color: rgba(43, 40, 22, 1); |
||||
} |
||||
.result-wrong { |
||||
background-color: rgba(43, 22, 22, 1); |
||||
color: #f00; |
||||
} |
||||
.result-wrong, |
||||
.result-right { |
||||
position: absolute; |
||||
left: 20px; |
||||
right: 20px; |
||||
display: flex; |
||||
bottom: 10px; |
||||
padding: 0 10px; |
||||
img { |
||||
width: 40px; |
||||
height: 40px; |
||||
margin-top: 5px; |
||||
margin-right: 10px; |
||||
} |
||||
} |
||||
.code-right { |
||||
width: 500px; |
||||
color: #fff; |
||||
background: #1b1b1b; |
||||
display: inline-block; |
||||
position: relative; |
||||
overflow-x: auto; |
||||
p { |
||||
font-size: 18px; |
||||
margin: 10px; |
||||
position: absolute; |
||||
width: calc(100% - 14px); |
||||
height: calc(100vh - 247px); |
||||
overflow: auto; |
||||
} |
||||
} |
||||
.pic-wrap { |
||||
position: absolute; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 5px; |
||||
display: flex; |
||||
max-width: calc(100% - 50px); |
||||
margin: 0 auto; |
||||
text-align: center; |
||||
overflow: auto; |
||||
.pic-item { |
||||
margin: 0 5px 5px; |
||||
&:only-child { |
||||
.pic { |
||||
width: 80%; |
||||
} |
||||
} |
||||
} |
||||
.pic { |
||||
display: block; |
||||
width: 100px; |
||||
margin: 0 auto 10px; |
||||
} |
||||
} |
||||
.code-mask{ |
||||
z-index: 2; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
bottom: 0; |
||||
right: 0; |
||||
} |
||||
.run{ |
||||
z-index:99; |
||||
position:absolute; |
||||
right: 50px; |
||||
bottom:15px; |
||||
width:100px; |
||||
color:#fff; |
||||
} |
||||
.download-btn{ |
||||
color:#fff; |
||||
} |
||||
/deep/.answer-wrap{ |
||||
pre{ |
||||
width: 100%; |
||||
white-space: pre-wrap; |
||||
} |
||||
img{ |
||||
max-width: 100%; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,55 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<el-card shadow="hover" class="mgb20"> |
||||
<div class="flex-between"> |
||||
<div class="per_title" v-preventReClick @click="$router.back()"> |
||||
<i class="el-icon-arrow-left"></i> |
||||
<span class="per_back">返回</span> |
||||
<span class="per_school" v-text="isDetail ? '查看源模型' : (customerId ? '编辑源模型' : '新增源模型')"></span> |
||||
</div> |
||||
<el-button v-if="!isDetail" type="primary" round v-preventReClick @click="submit">确定</el-button> |
||||
</div> |
||||
</el-card> |
||||
|
||||
<el-card shadow="hover"> |
||||
<el-form ref="form" label-width="120px" :disabled="isDetail"> |
||||
<el-form-item label="模型名称"> |
||||
<el-input placeholder="请输入模型名称" v-model="form.position" maxlength="25"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="模型代码"> |
||||
<codemirror |
||||
></codemirror> |
||||
</el-form-item> |
||||
</el-form> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import codemirror from '@/components/codemirror' |
||||
export default { |
||||
components:{ codemirror }, |
||||
data() { |
||||
return { |
||||
customerId : this.$route.query.id, |
||||
isDetail : Boolean(this.$route.query.show), |
||||
form: { |
||||
|
||||
} |
||||
}; |
||||
}, |
||||
mounted() { |
||||
|
||||
}, |
||||
methods: { |
||||
// 保存 |
||||
submit(){ |
||||
|
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue