|
|
|
|
@ -18,12 +18,13 @@ |
|
|
|
|
</div> |
|
|
|
|
<div class="code-right answer"> |
|
|
|
|
<p class="text-wrapper">{{ runResult }}</p> |
|
|
|
|
<div class="pic-wrap" v-if="picSrc"> |
|
|
|
|
<div style="margin-bottom: 5px;text-align: center"> |
|
|
|
|
<img class="pic" :src="picSrc" alt=""> |
|
|
|
|
<div class="pic-wrap" v-if="picSrcList.length"> |
|
|
|
|
<div class="pic-item" v-for="(img, i) in picSrcList" :key="i"> |
|
|
|
|
<!-- <img class="pic" :src="picSrc" alt=""> --> |
|
|
|
|
<img class="pic" :src="img" alt=""> |
|
|
|
|
<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> |
|
|
|
|
<el-button class="download-btn btn" type="primary" size="mini" @click="$refs.picLink.click()">下载图片</el-button> |
|
|
|
|
<a ref="picLink" style="display: none;" download="运行结果.png" :href="picSrc">下载图片</a> |
|
|
|
|
</div> |
|
|
|
|
<div class="result-right t-color" v-show="isError"> |
|
|
|
|
<img :src="require(`@/assets/images/system/${systemId}/yes.png`)" alt />运行成功 |
|
|
|
|
@ -109,6 +110,7 @@ export default { |
|
|
|
|
runEnable: false, // 是否禁用运行按钮 |
|
|
|
|
tipsVisible: false, // 答案提示弹框显示标识 |
|
|
|
|
picSrc: '', // 代码运行出来的图片url |
|
|
|
|
picSrcList: [], |
|
|
|
|
loadIns: null, // loading实例 |
|
|
|
|
cmOption: { |
|
|
|
|
scrollbarStyle: "native", |
|
|
|
|
@ -306,7 +308,8 @@ export default { |
|
|
|
|
const result = data.runResult |
|
|
|
|
this.$emit('cache') // 每次运行代码都要把代码传给后端做缓存 |
|
|
|
|
this.loadIns.close() |
|
|
|
|
this.picSrc = '' |
|
|
|
|
// this.picSrc = '' |
|
|
|
|
if (photo) this.picSrcList = photo.split(',') |
|
|
|
|
this.$emit('update:codeId', res.codeId) // 更新coddeId |
|
|
|
|
this.$emit('update:answer', result) // 更新运行结果 |
|
|
|
|
this.$emit('update:retResult', data.retResult) // 更新返回结果 |
|
|
|
|
@ -321,7 +324,8 @@ export default { |
|
|
|
|
this.isError = '' // 对错隐藏 |
|
|
|
|
const text = result.replace(photo, '') // 结果里包含了图片路径，所以要把图片路径给去掉 |
|
|
|
|
this.runResult = text |
|
|
|
|
this.picSrc = photo |
|
|
|
|
// this.picSrc = photo |
|
|
|
|
if (photo) this.picSrcList = photo.split(',') |
|
|
|
|
} else if (imgList instanceof Array && imgList.length && typeof firtImg === 'string' && (firtImg.includes('.jpg') || firtImg.includes('.png') || firtImg.includes('img'))) { |
|
|
|
|
/** |
|
|
|
|
* 这段是为要下载图片的项目案例写的，后端会返回图片名称的数组，前端负责循环这个数组，然后下载下来 |
|
|
|
|
@ -351,6 +355,11 @@ export default { |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 下载图片 |
|
|
|
|
downloadPic(i) { |
|
|
|
|
console.log(11, this.$refs['picLink' + i][0]) |
|
|
|
|
this.$refs['picLink' + i][0].click() |
|
|
|
|
}, |
|
|
|
|
// 获取正式答案 |
|
|
|
|
getTips() { |
|
|
|
|
this.tipsVisible = true |
|
|
|
|
@ -472,15 +481,24 @@ export default { |
|
|
|
|
overflow: auto; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.pic-wrap{ |
|
|
|
|
.pic-wrap { |
|
|
|
|
position: absolute; |
|
|
|
|
left: 0; |
|
|
|
|
right: 0; |
|
|
|
|
bottom: 5px; |
|
|
|
|
display: flex; |
|
|
|
|
// justify-content: center; |
|
|
|
|
max-width: calc(100% - 50px); |
|
|
|
|
margin: 0 auto; |
|
|
|
|
text-align: center; |
|
|
|
|
.pic{ |
|
|
|
|
max-width: 80%; |
|
|
|
|
vertical-align: middle; |
|
|
|
|
overflow: auto; |
|
|
|
|
.pic-item { |
|
|
|
|
margin: 0 5px 5px; |
|
|
|
|
} |
|
|
|
|
.pic { |
|
|
|
|
display: block; |
|
|
|
|
width: 100px; |
|
|
|
|
margin: 0 auto 10px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.code-mask{ |
|
|
|
|
|
