parent
46a84cd266
commit
be0fcb2407
13 changed files with 731 additions and 220 deletions
@ -0,0 +1,515 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="content" |
||||
:class="{loading}" |
||||
id="pdfDom"> |
||||
<div class="text-right" |
||||
v-if="!loading"> |
||||
<el-button @click="editReport"> |
||||
{{ editing ? "保存" : "编辑" }} |
||||
</el-button> |
||||
<el-button type="primary" |
||||
@click="exportPage">导出报告</el-button> |
||||
</div> |
||||
<h6 class="r-title">标准实验报告</h6> |
||||
<div class="info"> |
||||
<h6 class="l-title"> |
||||
<img src="@/assets/img/report1.png" |
||||
alt=""> |
||||
基本信息 |
||||
</h6> |
||||
<ul :class="['info-list', {edit: editing}]"> |
||||
<li> |
||||
<label>学生姓名：</label> |
||||
<el-input v-if="editing" |
||||
v-model="infoData.userName" |
||||
disabled></el-input> |
||||
<span v-else>{{ infoData.userName }}</span> |
||||
</li> |
||||
<li> |
||||
<label>学生学号：</label> |
||||
<el-input v-if="editing" |
||||
v-model="infoData.workNumber" |
||||
disabled></el-input> |
||||
<span v-else>{{ infoData.workNumber }}</span> |
||||
</li> |
||||
<li> |
||||
<label>实验时间：</label> |
||||
<el-input v-if="editing" |
||||
v-model="infoData.submitTime" |
||||
disabled></el-input> |
||||
<span v-else>{{ infoData.submitTime }}</span> |
||||
</li> |
||||
<li> |
||||
<label>实验成绩：</label> |
||||
<el-input v-if="editing" |
||||
v-model="infoData.score" |
||||
disabled></el-input> |
||||
<div v-else |
||||
class="score-wrap"> |
||||
<em>{{ infoData.score }}</em> |
||||
<img src="@/assets/img/point.png" |
||||
alt=""> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<label>学生班级：</label> |
||||
<el-input v-if="editing" |
||||
v-model="infoData.className"></el-input> |
||||
<span v-else>{{ infoData.className }}</span> |
||||
</li> |
||||
<li> |
||||
<label>指导老师：</label> |
||||
<el-input v-if="editing" |
||||
v-model="infoData.instructor"></el-input> |
||||
<span v-else>{{ infoData.instructor }}</span> |
||||
</li> |
||||
<li> |
||||
<label>实验学时：</label> |
||||
<el-input v-if="editing" |
||||
v-model="infoData.period"></el-input> |
||||
<span v-else>{{ infoData.period }}</span> |
||||
</li> |
||||
</ul> |
||||
<div class="m-b-20"> |
||||
<h6 class="l-title"> |
||||
<img src="@/assets/img/report2.png" |
||||
alt=""> |
||||
实验项目名称 |
||||
</h6> |
||||
<el-input v-if="editing" |
||||
v-model="infoData.projectName" |
||||
type="textarea"></el-input> |
||||
<div v-else |
||||
class="pre-wrap" |
||||
v-html="infoData.projectName"></div> |
||||
</div> |
||||
<div class="m-b-20"> |
||||
<h6 class="l-title"> |
||||
<img src="@/assets/img/report3.png" |
||||
alt=""> |
||||
实验目的 |
||||
</h6> |
||||
<quill v-if="editing" |
||||
:border="true" |
||||
v-model="infoData.purpose" |
||||
:height="150" /> |
||||
<div v-else |
||||
:class="['pre-wrap', {edit: editing}]" |
||||
v-html="infoData.purpose"></div> |
||||
</div> |
||||
<div class="m-b-20"> |
||||
<h6 class="l-title"> |
||||
<img src="@/assets/img/report4.png" |
||||
alt=""> |
||||
实验数据 |
||||
</h6> |
||||
<el-table :data="expData" |
||||
class="table" |
||||
border |
||||
stripe |
||||
header-align="center"> |
||||
<el-table-column type="index" |
||||
label="序号" |
||||
align="center" |
||||
width="60"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.$index + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="judgmentName" |
||||
label="判分点" |
||||
width="200" |
||||
align="center"></el-table-column> |
||||
<el-table-column v-if="project" |
||||
prop="judgmentName" |
||||
label="考核点" |
||||
align="center" |
||||
width="150"> |
||||
<template slot-scope="scope"> |
||||
<div v-for="(item, index) in scope.row.lcRuleRecords" |
||||
:key="index"> |
||||
<span> |
||||
<span>{{index+1}}. </span>{{item.name}} |
||||
</span> |
||||
</div> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="ruleAnswer" |
||||
label="参考答案" |
||||
style='word-wrap: break-word'> |
||||
<template slot-scope="scope"> |
||||
<div v-if='scope.row.lcRuleRecords'> |
||||
<div v-for="(item, index) in scope.row.lcRuleRecords" |
||||
:key="index"> |
||||
<span> |
||||
<span>{{index+1}}. </span>{{item.ruleAnswer}} |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<div v-else |
||||
v-html="scope.row.referenceAnswer"></div> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="userAnswer" |
||||
label="学生答案"> |
||||
<template slot-scope="scope"> |
||||
<div v-if='scope.row.lcRuleRecords'> |
||||
<div v-for="(item, index) in scope.row.lcRuleRecords" |
||||
:key="index"> |
||||
<span v-if='item.userAnswer'> |
||||
<span>{{index+1}}. </span>{{item.userAnswer}} |
||||
</span> |
||||
<span v-else> |
||||
<span>{{index+1}}. </span>未填写 |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<div v-else |
||||
v-html='scope.row.answer' |
||||
style='white-space: pre-wrap'></div> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column v-if="!project" |
||||
prop="runResult" |
||||
label="学生运行结果" |
||||
align="center"> |
||||
<template slot-scope="scope"> |
||||
<div class="m-b-20" |
||||
v-html='scope.row.runResult' |
||||
style='white-space: pre-wrap'></div> |
||||
<template v-if="scope.row.runThePictureList"> |
||||
<img v-for="(img, i) in scope.row.runThePictureList" |
||||
:key="i" |
||||
width="200" |
||||
class="result-pic" |
||||
:src="img" |
||||
alt=""> |
||||
</template> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="quesScore" |
||||
label="分值" |
||||
width="80" |
||||
align="center"></el-table-column> |
||||
<el-table-column prop="score" |
||||
label="得分" |
||||
width="80" |
||||
align="center"></el-table-column> |
||||
</el-table> |
||||
</div> |
||||
<div class="m-b-20"> |
||||
<h6 class="l-title"> |
||||
<img src="@/assets/img/report5.png" |
||||
alt=""> |
||||
实验总结与体会 |
||||
</h6> |
||||
<quill v-if="editing" |
||||
:border="true" |
||||
v-model="infoData.summarize" |
||||
:height="150" |
||||
:index="1" /> |
||||
<div v-else |
||||
class="pre-wrap" |
||||
v-html="infoData.summarize"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { Loading } from "element-ui"; |
||||
import html2Canvas from "html2canvas"; |
||||
import JsPDF from "jspdf"; |
||||
import util from "@/libs/util"; |
||||
import breadcrumb from '@/components/breadcrumb' |
||||
import quill from "@/components/quill"; |
||||
export default { |
||||
data () { |
||||
return { |
||||
fromPython: this.$route.query.python, // 来自python子系统 |
||||
reportId: this.$route.query.reportId, |
||||
curriculumId: this.$route.query.curriculumId, |
||||
projectId: this.$route.query.projectId, |
||||
matchId: this.$route.query.matchId, // 竞赛特有 |
||||
matchName: this.$route.query.matchName, // 竞赛特有 |
||||
breadPath: ['实验记录', '实验情况', '实验报告'], |
||||
title: "实验报告", |
||||
form: {}, |
||||
infoData: {}, |
||||
expData: [], |
||||
editing: false, |
||||
loadIns: null, |
||||
loading: false, |
||||
project: false, |
||||
userScores: [], |
||||
quills: [], |
||||
quillIndex1: 0, |
||||
quillIndex2: 1, |
||||
}; |
||||
}, |
||||
components: { |
||||
breadcrumb, |
||||
quill, |
||||
}, |
||||
mounted () { |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
getData () { // 查询详情 |
||||
const { reportId } = this |
||||
this.$get(`${this.api.reportDetail}?reportId=${reportId}`).then(({ report, userScores }) => { |
||||
this.form = report |
||||
const form = this.form |
||||
this.infoData = { |
||||
reportId, |
||||
className: form.className, |
||||
workNumber: form.workNumber, |
||||
experimentalClassName: form.experimentalClassName, |
||||
instructor: form.instructor, |
||||
period: form.period, |
||||
laboratory: form.laboratory, |
||||
submitTime: form.submitTime, |
||||
score: form.score, |
||||
userName: form.userName, |
||||
projectName: form.projectName, |
||||
purpose: form.purpose, |
||||
summarize: form.summarize |
||||
} |
||||
// 考核赛事练习的面包屑不一样 |
||||
form.assessmentId ? |
||||
(this.breadPath = ['实验记录', '实验报告']) : |
||||
this.matchName && (this.breadPath = ['全部赛事', this.matchName, '实验报告']) |
||||
|
||||
const { data } = report |
||||
this.userScores = userScores |
||||
// 如果没有data，则添加，否则，直接使用 |
||||
if (!data) { |
||||
this.handleList(userScores) |
||||
this.$post(this.api.editExperimentalData, { |
||||
reportId, |
||||
data: JSON.stringify(userScores) |
||||
}).then(res => { }).catch(err => { }) |
||||
} else { |
||||
this.handleList(userScores.find(e => e.lcRuleRecords) ? userScores : JSON.parse(data)) |
||||
} |
||||
}).catch(res => { }) |
||||
}, |
||||
// 处理实验数据 |
||||
handleList (list) { |
||||
this.project = list.find(e => e.lcRuleRecords) // 银行系统才有lcRuleRecords |
||||
if (this.project) { |
||||
list.map(e => { |
||||
e.assessmentPoint = '' |
||||
e.referenceAnswer = '' |
||||
e.answer = '' |
||||
e.lcRuleRecords.map((n, i) => { |
||||
e.assessmentPoint += `${i + 1}.${n.name}` |
||||
e.referenceAnswer += `${i + 1}.${n.ruleAnswer}` |
||||
e.answer += `${i + 1}.${n.userAnswer}` |
||||
}) |
||||
}) |
||||
} else { // python系统显示图片（从userScores里取） |
||||
list.forEach(e => { |
||||
const item = this.userScores.find(n => n.judgmentId == e.judgmentId) |
||||
if (item) { |
||||
if (item.runThePictureList) e.runThePictureList = item.runThePictureList |
||||
if (item.runResult) e.runResult = item.runResult |
||||
} |
||||
}) |
||||
} |
||||
this.expData = list |
||||
}, |
||||
// 返回 |
||||
back () { |
||||
history.back() |
||||
}, |
||||
exportPage () { |
||||
// const form = Object.assign(this.form, this.infoData) |
||||
// const list = JSON.parse(JSON.stringify(this.expData)) |
||||
// list.map((e, i) => { |
||||
// const item = this.userScores.find(n => n.judgmentId == e.judgmentId) |
||||
// if (item && item.runThePicture) e.runThePicture = item.runThePicture |
||||
// if (item && item.runThePictureList) e.runThePictureList = item.runThePictureList |
||||
// e.id = i + 1 |
||||
// if (e.referenceAnswer && typeof e.referenceAnswer === 'string') e.referenceAnswer = e.referenceAnswer.replace(/<[^>]+>/g, '').replace(/( |&|%s)/g, '').replace(/>/g, '>').replace(/</g, '<') |
||||
// if (e.answer && typeof e.answer === 'string') e.answer = e.answer.replace(/<[^>]+>/g, '').replace(/( |&|%s)/g, '').replace(/>/g, '>').replace(/</g, '<') |
||||
// }) |
||||
// for (const i in form) { |
||||
// if (form[i] && typeof form[i] === 'string') form[i] = form[i].replace(/<[^>]+>/g, '') |
||||
// } |
||||
// form.purpose = form.purpose.replace(/<[^>]+>/g, '') |
||||
// this.$post(this.project ? this.api.exportBankExperimentReport : this.api.exportLabReport, { |
||||
// ...form, |
||||
// experimentalData: list |
||||
// }).then(res => { |
||||
// console.log(res) |
||||
// util.downloadFileDirect(`实验报告.docx`, new Blob([res])) |
||||
// }).catch(res => { }) |
||||
}, |
||||
editReport () { // 编辑实验报告 |
||||
if (this.editing) { |
||||
this.$post(`${this.api.updateReport}`, this.infoData).then(res => { |
||||
this.editing = false; |
||||
util.successMsg("修改成功"); |
||||
}).catch(err => { }); |
||||
} else { |
||||
this.editing = true; |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.top { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
margin-bottom: 15px; |
||||
.back { |
||||
font-size: 14px; |
||||
color: #007eff; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
.breadcrumb { |
||||
/deep/.el-breadcrumb__item { |
||||
.is-link, |
||||
.el-breadcrumb__separator { |
||||
font-weight: 400; |
||||
color: $main-color; |
||||
} |
||||
&:last-child { |
||||
.is-link { |
||||
color: #0b1d30; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.wrap { |
||||
padding: 12px 300px 20px; |
||||
} |
||||
code, |
||||
kbd, |
||||
samp { |
||||
font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei', arial, STHeiTi, sans-serif; |
||||
word-wrap: break-word; |
||||
white-space: pre-wrap; |
||||
} |
||||
/deep/ pre { |
||||
white-space: pre-wrap; /* css-3 */ |
||||
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ |
||||
white-space: pre-wrap; /* Opera 4-6 */ |
||||
white-space: -o-pre-wrap; /* Opera 7 */ |
||||
word-wrap: break-word; /* Internet Explorer 5.5+ */ |
||||
word-break: break-all; |
||||
overflow: hidden; |
||||
font-size: 12px; |
||||
font-weight: 400; |
||||
font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei', arial, STHeiTi, sans-serif; |
||||
} |
||||
.content { |
||||
padding: 16px 40px; |
||||
background: #fff; |
||||
&.loading { |
||||
padding-top: 30px; |
||||
} |
||||
.r-title { |
||||
margin-bottom: 40px; |
||||
font-size: 24px; |
||||
text-align: center; |
||||
color: #333; |
||||
} |
||||
.info { |
||||
padding: 20px 16px; |
||||
border: 1px solid #e1e6f2; |
||||
} |
||||
.l-title { |
||||
padding: 5px 8px; |
||||
background-color: #f7f9fc; |
||||
} |
||||
.info-list { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
padding: 10px 0 0 20px; |
||||
li { |
||||
display: inline-flex; |
||||
width: 25%; |
||||
padding: 0 10px; |
||||
margin-bottom: 34px; |
||||
} |
||||
&.edit { |
||||
li { |
||||
align-items: center; |
||||
} |
||||
} |
||||
label { |
||||
font-size: 14px; |
||||
color: #333; |
||||
white-space: nowrap; |
||||
} |
||||
span { |
||||
min-width: 150px; |
||||
padding: 0 10px 3px; |
||||
border-bottom: 1px solid #e1e6f2; |
||||
} |
||||
/deep/.el-input { |
||||
width: 174px; |
||||
} |
||||
} |
||||
.score-wrap { |
||||
position: relative; |
||||
min-width: 150px; |
||||
border-bottom: 1px solid #e1e6f2; |
||||
em { |
||||
position: absolute; |
||||
top: -12px; |
||||
left: 30px; |
||||
font-family: din; |
||||
font-size: 30px; |
||||
font-weight: 600; |
||||
color: #0b1d30; |
||||
} |
||||
img { |
||||
position: absolute; |
||||
bottom: -15px; |
||||
left: 0; |
||||
} |
||||
} |
||||
/deep/.el-textarea .el-textarea__inner, |
||||
.pre-wrap { |
||||
min-height: 72px; |
||||
padding: 10px 16px; |
||||
font-size: 14px; |
||||
color: #333; |
||||
&.edit { |
||||
color: #abb3c6; |
||||
border: 1px solid #cacfdb; |
||||
border-radius: 4px; |
||||
background-color: #f6f7f9; |
||||
} |
||||
} |
||||
/deep/ .table th { |
||||
background-color: #e1eaff !important; |
||||
.cell { |
||||
line-height: 35px; |
||||
color: #555555; |
||||
} |
||||
} |
||||
} |
||||
.result-pic { |
||||
margin: 10px 0; |
||||
} |
||||
@media (max-width: 1650px) { |
||||
.wrap { |
||||
padding: 12px 200px 20px; |
||||
} |
||||
} |
||||
@media (max-width: 1430px) { |
||||
.wrap { |
||||
padding: 12px 100px 20px; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue