You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

416 lines
16 KiB

4 years ago
<template>
<div class="box">
<el-row :gutter="24">
<el-col :span="24">
4 years ago
<el-card shadow="hover" class="m-b-20">
4 years ago
<div class="flex-between">
4 years ago
<el-page-header @back="goBack" content="查看报告"></el-page-header>
4 years ago
</div>
</el-card>
<div id="pdfDom">
<h6 style="text-align: center;font-size: 20px">标准实验报告</h6>
4 years ago
<div class="flex-center m-b-20 user_header">
4 years ago
<p class="addhr_tag"></p>
<span style="font-size: 18px">基本信息</span>
</div>
<div>
<el-table :data="infoData" class="info-table" stripe header-align="center">
<el-table-column prop="userName" label="学生姓名" align="center">
</el-table-column>
<el-table-column prop="workNumber" label="学生学号" align="center">
</el-table-column>
4 years ago
<el-table-column prop="experimentalClassName" label="学生班级" align="center">
4 years ago
</el-table-column>
<el-table-column prop="instructor" label="指导老师" align="center">
</el-table-column>
<el-table-column prop="period" label="实验学时" align="center">
</el-table-column>
<el-table-column prop="submitTime" label="实验时间" align="center">
</el-table-column>
<el-table-column prop="score" label="实验成绩" align="center">
</el-table-column>
</el-table>
</div>
4 years ago
<div class="m-b-20">
4 years ago
<div class="meta-title-wrap">
4 years ago
<p class="meta-title"><img src="@/assets/img/cup.png" alt=""> 实验项目名称</p>
4 years ago
</div>
<el-input v-model="form.proName" type="textarea" :disabled="true" rows="5"></el-input>
</div>
4 years ago
<div class="m-b-20">
4 years ago
<div class="meta-title-wrap">
<p class="meta-title">实验目的</p>
</div>
<!-- <el-input v-model="form.purpose" type="textarea" :disabled="true" rows="5"></el-input> -->
<div class="pre-wrap" v-html="form.purpose"></div>
4 years ago
</div>
4 years ago
<div class="m-b-20">
4 years ago
<div class="meta-title-wrap">
<p class="meta-title">实验数据</p>
</div>
<el-table :data="expData" class="table" stripe header-align="center">
<el-table-column type="index" width="100" label="序号" align="center">
<template slot-scope="scope">
{{scope.$index + 1}}
</template>
</el-table-column>
<el-table-column prop="judgmentPointsName" label="任务名称" align="center">
</el-table-column>
<el-table-column prop="userAnswer" label="学生答案" align="center">
<template slot-scope="scope">
<pre v-html="scope.row.userAnswer" style="white-space: pre-wrap"></pre>
4 years ago
</template>
</el-table-column>
<el-table-column prop="answer" label="参考答案" align="center">
<template slot-scope="scope">
<pre v-html="scope.row.answer" style="white-space: pre-wrap"></pre>
4 years ago
</template>
</el-table-column>
<el-table-column prop="codeScore" label="得分" align="center">
</el-table-column>
</el-table>
</div>
4 years ago
<div class="m-b-20">
4 years ago
<div class="meta-title-wrap">
<p class="meta-title">实验总结与体会</p>
</div>
<el-input type="textarea" v-model="form.summarize" rows="5" disabled></el-input>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
4 years ago
import { mapState, mapActions } from 'vuex'
import util from '@/libs/util'
import Setting from '@/setting'
4 years ago
export default {
data (){
return {
title: '实验报告',
form: {
analysis: '',
conclusion: '',
content: ``,
data: '',
purpose: ``,
experimentId: '',
experimentalClassName: '',
improvement: '',
laboratory: '',
period: '',
principle: '',
proName: '',
score: 0,
step: ``,
submitTime: '',
summarize: '',
instructor: '',
userId: this.userId,
userName: '',
workNumber: '',
},
type: this.$route.query.type,
id: this.$route.query.id,
recordId: this.$route.query.recordId,
reportId: this.$route.query.reportId,
projectId: this.$route.query.projectId,
studentId: this.$route.query.studentId,
infoData: [],
expData: [],
accountData: [],
showData: '1',
autograph: '1',
pages: 1,
ipVisible: false,
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
conclusionOptions: [
{
value: 1,
label: '结论符合预期'
}
],
}
},
4 years ago
computed: {
...mapState('user', [
'userId'
]),
},
4 years ago
mounted(){
this.getData()
},
methods: {
getData(){
if(this.type){
let data = {
recordId: this.id,
}
this.$get(this.api.queryVirtualReport,data).then(res => {
this.form = res.data.report
let expData = res.data.data
let form = this.form
let score = form.score
if(expData){
if(score){
expData.map(n => {
if(n.isError){
score -= n.codeScore
n.codeScore = 0
}
})
form.score = score
}
4 years ago
this.expData = expData
}
4 years ago
this.infoData.push({
workNumber: form.workNumber,
experimentalClassName: form.experimentalClassName,
instructor: form.instructor,
period: form.period,
laboratory: form.laboratory,
submitTime: form.submitTime,
score: form.score,
userName: form.userName
})
}).catch(res => {});
}else{
let data = {
studentId: this.studentId,
projectId: this.projectId,
recordId: this.id,
reportId: this.reportId
}
this.$get(this.api.queryArchievement,data).then(res => {
this.form = res.data.report ? res.data.report : {}
let expData = res.data.data
let form = this.form
let score = form.score
if(expData){
if(score){
expData.map(n => {
if(n.isError){
score -= n.codeScore
n.codeScore = 0
}
})
form.score = score
}
this.expData = expData
}
4 years ago
this.infoData.push({
workNumber: form.workNumber,
experimentalClassName: form.experimentalClassName,
instructor: form.instructor,
period: form.period,
laboratory: form.laboratory,
submitTime: form.submitTime,
score: form.score,
userName: form.userName
})
}).catch(res => {});
}
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
saveAdd(){
let data = {
systemId: this.configId,
systemName: this.form.systemName,
systemType: this.form.systemType,
systemAttribution: this.form.systemAttribution,
}
if(this.configId){
this.$post(this.api.updateServiceConfig,data).then((res) => {
4 years ago
util.successMsg('编辑成功');
this.goBack()
4 years ago
}).catch((res) => {
})
}else{
this.$post(this.api.updateServiceConfig,data).then((res) => {
4 years ago
util.successMsg('添加成功');
this.goBack()
4 years ago
}).catch((res) => {
})
}
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
SpanMethod({ row, column, rowIndex, columnIndex }) {
if (rowIndex % 2 === 0) {
if (columnIndex === 6) {
if(!row.Intranet){
return [1, 2];
}
}
// else if (columnIndex === 1) {
// return [0, 0];
// }
}
},
4 years ago
goBack(){
4 years ago
this.$router.go(-1)
},
exportPage(){
var title = this.title;
html2Canvas(document.querySelector('#pdfDom'), {
allowTaint: true
}).then(function (canvas) {
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageHeight = contentWidth / 592.28 * 841.89
let leftHeight = contentHeight
let position = 0
let imgWidth = 595.28
let imgHeight = 592.28 / contentWidth * contentHeight
let pageData = canvas.toDataURL('image/jpeg', 1.0)
let PDF = new JsPDF('', 'pt', 'a4')
if (leftHeight < pageHeight) {
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
PDF.addPage()
}
}
}
PDF.save(title + '.pdf')
}
)
}
}
}
</script>
<style lang="scss" scoped>
.box{
padding: 0 50px;
background-color: #fff;
}
/deep/.el-textarea.is-disabled .el-textarea__inner{
color: #777;
background-color: #e5dfff;
}
.pre-wrap{
min-height: 117px;
padding: 5px 15px;
color: #777;
background-color: #e5dfff;
}
4 years ago
#pdfDom{
padding: 50px;
/deep/.info-table{
margin-bottom: 40px;
border: 0;
th{
background-color: #fff !important;
.cell{
color: #444;
}
}
tr{
border: 0;
}
tr:hover,tr:hover>td{
background-color: #e5dfff !important;
}
td{
border: {
left: 4px solid #fff;
right: 4px solid #fff;
}
&:first-child{
border-left: 0;
}
&:last-child{
border-right: 0;
}
background-color: #e5dfff;
border-bottom: 0;
}
}
/deep/.table th{
background-color: #e1eaff !important;
.cell{
color: #555555;
}
}
}
/deep/.cell{
font-size: 12px;
}
/deep/.el-row{
padding-top: 20px;
margin: 0 !important;
}
.form-item{
display: flex;
align-items: center;
}
.form-item .el-input{
width: auto;
}
.form-item span{
margin-right: 10px;
}
.meta-title-wrap{
display: flex;
justify-content: space-between;
align-items: center;
span{
font-size: 13px;
color: #444;
}
}
.flex-between{
span{
font-size: 13px;
color: #444;
}
}
.meta-title{
display: flex;
align-items: center;
padding: 10px 20px;
margin-bottom: 10px;
font-size: 16px;
color: #fff;
background-color: #9278ff;
img{
width: 20px;
margin-right: 10px;
}
}
.step-title{
margin-bottom: 10px;
font-size: 16px;
color: #9278ff;
}
.bd-title{
padding-top: 20px;
border-top: 1px dashed #ccc;
}
</style>