|
|
|
|
@ -3,8 +3,8 @@ |
|
|
|
|
<div class="wrap"> |
|
|
|
|
<breadcrumb data="实验记录/实验情况/实验情况"></breadcrumb> |
|
|
|
|
<div class="content" :class="{loading}" id="pdfDom"> |
|
|
|
|
<div class="text-right"> |
|
|
|
|
<el-button v-if="!loading" @click="editReport"> |
|
|
|
|
<div class="text-right" v-if="!loading"> |
|
|
|
|
<el-button @click="editReport"> |
|
|
|
|
{{ editing ? "保存" : "编辑" }} |
|
|
|
|
</el-button> |
|
|
|
|
<el-button type="primary" @click="exportPage">导出报告</el-button> |
|
|
|
|
@ -34,7 +34,10 @@ |
|
|
|
|
<li> |
|
|
|
|
<label>实验成绩：</label> |
|
|
|
|
<el-input v-if="editing" v-model="infoData.score" disabled></el-input> |
|
|
|
|
<span v-else>{{ infoData.score }}</span> |
|
|
|
|
<div v-else class="score-wrap"> |
|
|
|
|
<em>{{ infoData.score }}</em> |
|
|
|
|
<img src="@/assets/img/point.png" alt=""> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<label>学生班级：</label> |
|
|
|
|
@ -169,9 +172,6 @@ export default { |
|
|
|
|
this.getData(); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
goBack() { // 返回 |
|
|
|
|
this.$router.go(-1); |
|
|
|
|
}, |
|
|
|
|
getData() { // 查询详情 |
|
|
|
|
this.$get(`${this.api.reportDetail}?reportId=${this.reportId}`).then(res => { |
|
|
|
|
this.form = res.report |
|
|
|
|
@ -191,11 +191,12 @@ export default { |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}, |
|
|
|
|
exportPage() { // 导出实验报告 |
|
|
|
|
document.querySelector("body").setAttribute("style", "overflow: visible"); |
|
|
|
|
this.loading = true; |
|
|
|
|
this.loadIns = Loading.service({ |
|
|
|
|
background: "#fff" |
|
|
|
|
}); |
|
|
|
|
const edit = this.editing // 先保存编辑状态，因为导出前要重置为false，导出完成后再还原 |
|
|
|
|
this.editing = false |
|
|
|
|
document.querySelector("#pdfDom").scrollTop = 0; |
|
|
|
|
var title = this.title; |
|
|
|
|
let dom = document.querySelector("#pdfDom"); |
|
|
|
|
@ -206,11 +207,11 @@ export default { |
|
|
|
|
}).then((canvas) => { |
|
|
|
|
let contentWidth = canvas.width; |
|
|
|
|
let contentHeight = canvas.height; |
|
|
|
|
let pageHeight = contentWidth / 592.28 * 841.89; |
|
|
|
|
let imgWidth = 595.28 |
|
|
|
|
let pageHeight = contentWidth / imgWidth * 841.89; |
|
|
|
|
let leftHeight = contentHeight; |
|
|
|
|
let position = 0; |
|
|
|
|
let imgWidth = 595.28; |
|
|
|
|
let imgHeight = 592.28 / contentWidth * contentHeight; |
|
|
|
|
let imgHeight = imgWidth / contentWidth * contentHeight; |
|
|
|
|
let pageData = canvas.toDataURL("image/jpeg", 1.0); |
|
|
|
|
let PDF = new JsPDF("", "pt", "a4"); |
|
|
|
|
if (leftHeight < pageHeight) { |
|
|
|
|
@ -225,9 +226,9 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
this.editing = edit |
|
|
|
|
this.loadIns.close(); |
|
|
|
|
this.loading = false; |
|
|
|
|
document.querySelector("body").setAttribute("style", "overflow: hidden"); |
|
|
|
|
PDF.save(title + ".pdf"); |
|
|
|
|
} |
|
|
|
|
); |
|
|
|
|
@ -252,6 +253,9 @@ export default { |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.wrap { |
|
|
|
|
padding: 12px 300px 20px; |
|
|
|
|
} |
|
|
|
|
/deep/ pre, code, kbd, samp{ |
|
|
|
|
font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif; |
|
|
|
|
word-wrap: break-word; |
|
|
|
|
@ -264,8 +268,7 @@ export default { |
|
|
|
|
padding: 16px 40px; |
|
|
|
|
background: #fff; |
|
|
|
|
&.loading { |
|
|
|
|
height: auto; |
|
|
|
|
overflow: visible; |
|
|
|
|
padding-top: 30px; |
|
|
|
|
} |
|
|
|
|
.r-title { |
|
|
|
|
margin-bottom: 40px; |
|
|
|
|
@ -308,6 +311,25 @@ export default { |
|
|
|
|
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; |
|
|
|
|
|
