|
|
|
|
<template>
|
|
|
|
|
<div class="wrap">
|
|
|
|
|
<el-card shadow="hover"
|
|
|
|
|
class="m-b-20">
|
|
|
|
|
<el-page-header @back="$router.back()"
|
|
|
|
|
content="查看报告"></el-page-header>
|
|
|
|
|
</el-card>
|
|
|
|
|
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="text-right">
|
|
|
|
|
<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/info1.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="form.projectName"
|
|
|
|
|
type="textarea"></el-input>
|
|
|
|
|
<div v-else
|
|
|
|
|
class="pre-wrap"
|
|
|
|
|
v-html="form.projectName"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="m-b-20">
|
|
|
|
|
<h6 class="l-title">
|
|
|
|
|
<img src="@/assets/img/report3.png"
|
|
|
|
|
alt="">
|
|
|
|
|
实验目的
|
|
|
|
|
</h6>
|
|
|
|
|
<div :class="['pre-wrap', {edit: editing}]"
|
|
|
|
|
v-html="form.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="270"
|
|
|
|
|
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="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="form.summarize"
|
|
|
|
|
:minHeight="150"
|
|
|
|
|
:height="150"
|
|
|
|
|
:index="1" />
|
|
|
|
|
<div v-else
|
|
|
|
|
class="pre-wrap"
|
|
|
|
|
v-html="form.summarize"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import util from "@/libs/util";
|
|
|
|
|
export default {
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
reportId: this.$route.query.reportId,
|
|
|
|
|
title: "实验报告",
|
|
|
|
|
form: {
|
|
|
|
|
className: "",
|
|
|
|
|
instructor: "",
|
|
|
|
|
period: "",
|
|
|
|
|
projectName: "",
|
|
|
|
|
summarize: "",
|
|
|
|
|
},
|
|
|
|
|
infoData: {},
|
|
|
|
|
expData: [],
|
|
|
|
|
editing: false,
|
|
|
|
|
loadIns: null,
|
|
|
|
|
loading: false,
|
|
|
|
|
project: false,
|
|
|
|
|
userScores: []
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted () {
|
|
|
|
|
this.getData()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
getData () { // 查询详情
|
|
|
|
|
this.$get(`${this.api.reportDetail}?reportId=${this.reportId}`).then(({ report, userScores }) => {
|
|
|
|
|
this.form = report
|
|
|
|
|
this.expData = userScores
|
|
|
|
|
this.project = this.expData.find(e => e.lcRuleRecords) // 银行系统才有lcRuleRecords
|
|
|
|
|
let form = this.form;
|
|
|
|
|
this.infoData = {
|
|
|
|
|
workNumber: form.workNumber,
|
|
|
|
|
experimentalClassName: form.experimentalClassName,
|
|
|
|
|
instructor: form.instructor,
|
|
|
|
|
period: form.period,
|
|
|
|
|
laboratory: form.laboratory,
|
|
|
|
|
submitTime: form.submitTime,
|
|
|
|
|
score: form.score,
|
|
|
|
|
userName: form.userName
|
|
|
|
|
}
|
|
|
|
|
const data = report.data
|
|
|
|
|
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
|
|
|
|
|
},
|
|
|
|
|
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 => { })
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.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 {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 5px 8px;
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #333;
|
|
|
|
|
background-color: #f7f5ff;
|
|
|
|
|
}
|
|
|
|
|
.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: #e5dfff !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>
|
