huoran
/
FE_bankTeaching
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

实验报告修复

Browse Source
20240205
yujialong 3 months ago
parent de14d96d30
commit d987fef680
3 changed files with 206 additions and 234 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 213
      src/pages/report/index.vue
  2. 2
      src/setting.js
  3. 3
      src/styles/common.scss

213
src/pages/report/index.vue
Unescape View File

@ -1,199 +1,134 @@
<template> <template>
<!-- 实验报告 --> <!-- 实验报告 -->
<div class="wrap"> <div class="wrap" v-loading="loading">
<breadcrumb data="返回实验/实验报告"></breadcrumb> <breadcrumb data="返回实验/实验报告"></breadcrumb>
<div class="content" <div class="content">
:class="{loading}" <div style="text-align: right" v-if="!loading">
id="pdfDom"> <el-button size="mini" @click="editReport">
<div style="text-align: right"
v-if="!loading">
<el-button size="mini"
@click="editReport">
{{ editing ? "保存" : "编辑" }} {{ editing ? "保存" : "编辑" }}
</el-button> </el-button>
<el-button type="primary" <el-button type="primary" size="mini" @click="exportPage">导出报告</el-button>
size="mini"
@click="exportPage">导出报告</el-button>
</div> </div>
<h6 class="r-title">标准实验报告</h6> <h6 class="r-title">标准实验报告</h6>
<div class="info"> <div class="info">
<h6 class="l-title"> <h6 class="l-title">
<img src="@/assets/img/report1.png" <img src="@/assets/img/report1.png" alt="">
alt="">
基本信息 基本信息
</h6> </h6>
<ul :class="['info-list', {edit: editing}]"> <ul :class="['info-list', { edit: editing }]">
<li> <li>
<label>学生姓名：</label> <label>学生姓名：</label>
<el-input v-if="editing" <el-input v-if="editing" v-model="infoData.userName" disabled></el-input>
v-model="infoData.userName"
disabled></el-input>
<span v-else>{{ infoData.userName }}</span> <span v-else>{{ infoData.userName }}</span>
</li> </li>
<li> <li>
<label>学生学号：</label> <label>学生学号：</label>
<el-input v-if="editing" <el-input v-if="editing" v-model="infoData.workNumber" disabled></el-input>
v-model="infoData.workNumber"
disabled></el-input>
<span v-else>{{ infoData.workNumber }}</span> <span v-else>{{ infoData.workNumber }}</span>
</li> </li>
<li> <li>
<label>实验时间：</label> <label>实验时间：</label>
<el-input v-if="editing" <el-input v-if="editing" v-model="infoData.submitTime" disabled></el-input>
v-model="infoData.submitTime"
disabled></el-input>
<span v-else>{{ infoData.submitTime }}</span> <span v-else>{{ infoData.submitTime }}</span>
</li> </li>
<li> <li>
<label>实验成绩：</label> <label>实验成绩：</label>
<el-input v-if="editing" <el-input v-if="editing" v-model="infoData.score" disabled></el-input>
v-model="infoData.score" <div v-else class="score-wrap">
disabled></el-input>
<div v-else
class="score-wrap">
<em>{{ infoData.score }}</em> <em>{{ infoData.score }}</em>
<img src="@/assets/img/point.png" <img src="@/assets/img/point.png" alt="">
alt="">
</div> </div>
</li> </li>
<li> <li>
<label>学生班级：</label> <label>学生班级：</label>
<el-input v-if="editing" <el-input v-if="editing" v-model="infoData.className"></el-input>
v-model="infoData.className"></el-input>
<span v-else>{{ infoData.className }}</span> <span v-else>{{ infoData.className }}</span>
</li> </li>
<li> <li>
<label>指导老师：</label> <label>指导老师：</label>
<el-input v-if="editing" <el-input v-if="editing" v-model="infoData.instructor"></el-input>
v-model="infoData.instructor"></el-input>
<span v-else>{{ infoData.instructor }}</span> <span v-else>{{ infoData.instructor }}</span>
</li> </li>
<li> <li>
<label>实验学时：</label> <label>实验学时：</label>
<el-input v-if="editing" <el-input v-if="editing" v-model="infoData.period"></el-input>
v-model="infoData.period"></el-input>
<span v-else>{{ infoData.period }}</span> <span v-else>{{ infoData.period }}</span>
</li> </li>
</ul> </ul>
<div class="m-b-20"> <div class="m-b-20">
<h6 class="l-title"> <h6 class="l-title">
<img src="@/assets/img/report2.png" <img src="@/assets/img/report2.png" alt="">
alt="">
实验项目名称 实验项目名称
</h6> </h6>
<el-input v-if="editing" <el-input v-if="editing" v-model="infoData.projectName" type="textarea"></el-input>
v-model="infoData.projectName" <div v-else class="pre-wrap" v-html="infoData.projectName"></div>
type="textarea"></el-input>
<div v-else
class="pre-wrap"
v-html="infoData.projectName"></div>
</div> </div>
<div class="m-b-20"> <div class="m-b-20">
<h6 class="l-title"> <h6 class="l-title">
<img src="@/assets/img/report3.png" <img src="@/assets/img/report3.png" alt="">
alt="">
实验目的 实验目的
</h6> </h6>
<quill v-if="editing" <quill v-if="editing" :border="true" v-model="infoData.purpose" :height="150" />
:border="true" <div v-else :class="['pre-wrap', { edit: editing }]" v-html="infoData.purpose"></div>
v-model="infoData.purpose"
:height="150" />
<div v-else
:class="['pre-wrap', {edit: editing}]"
v-html="infoData.purpose"></div>
</div> </div>
<div class="m-b-20"> <div class="m-b-20">
<h6 class="l-title"> <h6 class="l-title">
<img src="@/assets/img/report4.png" <img src="@/assets/img/report4.png" alt="">
alt="">
实验数据 实验数据
</h6> </h6>
<el-table :data="expData" <el-table :data="expData" class="table" border stripe header-align="center">
class="table" <el-table-column type="index" label="序号" align="center" width="60">
border
stripe
header-align="center">
<el-table-column type="index"
label="序号"
align="center"
width="60">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.$index + 1 }} {{ scope.$index + 1 }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="judgmentName" <el-table-column prop="judgmentName" label="判分点" width="200" align="center"></el-table-column>
label="判分点" <el-table-column prop="judgmentName" label="考核点" align="center" width="150">
width="200"
align="center"></el-table-column>
<el-table-column prop="judgmentName"
label="考核点"
align="center"
width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<div v-for="(item, index) in scope.row.lcRuleRecords" <div v-for="(item, index) in scope.row.lcRuleRecords" :key="index">
:key="index">
<span> <span>
<span>{{index+1}}. </span>{{item.name}} <span>{{ index + 1 }}. </span>{{ item.name }}
</span> </span>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="ruleAnswer" <el-table-column prop="ruleAnswer" label="参考答案" width="280">
label="参考答案"
width="280"
style='word-wrap: break-word'>
<template slot-scope="scope"> <template slot-scope="scope">
<div v-if='scope.row.lcRuleRecords'> <div v-if="scope.row.lcRuleRecords" style="word-wrap: break-word">
<div v-for="(item, index) in scope.row.lcRuleRecords" <div v-for="(item, index) in scope.row.lcRuleRecords" :key="index">
:key="index">
<span> <span>
<span>{{index+1}}. </span>{{item.ruleAnswer}} <span>{{ index + 1 }}. </span>{{ item.ruleAnswer }}
</span> </span>
</div> </div>
</div> </div>
<div v-else <div v-else v-html="scope.row.referenceAnswer"></div>
v-html="scope.row.referenceAnswer"></div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="userAnswer" <el-table-column prop="userAnswer" label="学生答案" width="280">
label="学生答案">
<template slot-scope="scope"> <template slot-scope="scope">
<div v-if='scope.row.lcRuleRecords'> <div v-if='scope.row.lcRuleRecords'>
<div v-for="(item, index) in scope.row.lcRuleRecords" <div v-for="(item, index) in scope.row.lcRuleRecords" :key="index">
:key="index">
<span v-if='item.userAnswer'> <span v-if='item.userAnswer'>
<span>{{index+1}}. </span>{{item.userAnswer}} <span>{{ index + 1 }}. </span>{{ item.userAnswer }}
</span> </span>
<span v-else> <span v-else>
<span>{{index+1}}. </span>未填写 <span>{{ index + 1 }}. </span>未填写
</span> </span>
</div> </div>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="quesScore" <el-table-column prop="quesScore" label="分值" width="80" align="center"></el-table-column>
label="分值" <el-table-column prop="score" label="得分" width="80" align="center"></el-table-column>
width="80"
align="center"></el-table-column>
<el-table-column prop="score"
label="得分"
width="80"
align="center"></el-table-column>
</el-table> </el-table>
</div> </div>
<div class="m-b-20"> <div class="m-b-20">
<h6 class="l-title"> <h6 class="l-title">
<img src="@/assets/img/report5.png" <img src="@/assets/img/report5.png" alt="">
alt="">
实验总结与体会 实验总结与体会
</h6> </h6>
<quill v-show="editing" <quill v-show="editing" :border="true" v-model="infoData.summarize" :height="150" />
:border="true" <div v-show="!editing" class="pre-wrap" v-html="infoData.summarize"></div>
v-model="infoData.summarize"
:height="150" />
<div v-show="!editing"
class="pre-wrap"
v-html="infoData.summarize"></div>
</div> </div>
</div> </div>
</div> </div>
@ -211,12 +146,12 @@ export default {
return { return {
reportId: this.$route.query.reportId, reportId: this.$route.query.reportId,
title: "实验报告", title: "实验报告",
loading: false,
form: {}, form: {},
infoData: {}, infoData: {},
expData: [], expData: [],
editing: false, editing: false,
loadIns: null, loadIns: null,
loading: false,
project: false, project: false,
userScores: [] userScores: []
}; };
@ -230,6 +165,7 @@ export default {
}, },
methods: { methods: {
getData () { // 查询详情 getData () { // 查询详情
this.loading = true
const { reportId } = this const { reportId } = this
reportDetail(reportId).then(({ data }) => { reportDetail(reportId).then(({ data }) => {
const { report, userScores } = data const { report, userScores } = data
@ -255,14 +191,18 @@ export default {
// 如果没有data，则添加，否则，直接使用 // 如果没有data，则添加，否则，直接使用
if (!expData) { if (!expData) {
this.handleList(userScores) this.handleList(userScores)
this.$post(this.api.editExperimentalData, { // this.$post(this.api.editExperimentalData, {
reportId, // reportId,
data: JSON.stringify(userScores) // data: JSON.stringify(userScores)
}).then(res => { }).catch(err => { }) // }).then(res => { }).catch(err => { })
} else { } else {
this.handleList(userScores) this.handleList(userScores)
} }
}).catch(res => { })
this.loading = false
}).catch(res => {
this.loading = false
})
}, },
// 处理实验数据 // 处理实验数据
handleList (list) { handleList (list) {
@ -327,9 +267,11 @@ export default {
.m-b-20 { .m-b-20 {
margin-bottom: 20px; margin-bottom: 20px;
} }
.wrap { .wrap {
padding: 12px 300px 20px; padding: 12px 300px 20px;
} }
code, code,
kbd, kbd,
samp { samp {
@ -337,34 +279,41 @@ samp {
word-wrap: break-word; word-wrap: break-word;
white-space: pre-wrap; white-space: pre-wrap;
} }
/deep/ pre { /deep/ pre {
white-space: pre-wrap; /* css-3 */ white-space: pre-wrap;
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ /* css-3 */
white-space: pre-wrap; /* Opera 4-6 */ white-space: -moz-pre-wrap;
white-space: -o-pre-wrap; /* Opera 7 */ /* Mozilla, since 1999 */
word-wrap: break-word; /* Internet Explorer 5.5+ */ 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; word-break: break-all;
overflow: hidden; overflow: hidden;
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei', arial, STHeiTi, sans-serif; font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei', arial, STHeiTi, sans-serif;
} }
.content { .content {
padding: 16px 0; padding: 16px 0;
background: #fff; background: #fff;
&.loading {
padding-top: 30px;
}
.r-title { .r-title {
margin-bottom: 40px; margin-bottom: 40px;
font-size: 24px; font-size: 24px;
text-align: center; text-align: center;
color: #333; color: #333;
} }
.info { .info {
padding: 20px 16px; padding: 20px 16px;
border: 1px solid #e1e6f2; border: 1px solid #e1e6f2;
} }
.l-title { .l-title {
display: flex; display: flex;
align-items: center; align-items: center;
@ -373,43 +322,52 @@ samp {
font-size: 14px; font-size: 14px;
color: #333; color: #333;
background-color: #f7f9fc; background-color: #f7f9fc;
img { img {
margin-right: 5px; margin-right: 5px;
} }
} }
.info-list { .info-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 10px 0 0 20px; padding: 10px 0 0 20px;
li { li {
display: inline-flex; display: inline-flex;
width: 25%; width: 25%;
padding: 0 10px; padding: 0 10px;
margin-bottom: 34px; margin-bottom: 34px;
} }
&.edit { &.edit {
li { li {
align-items: center; align-items: center;
} }
} }
label { label {
font-size: 14px; font-size: 14px;
color: #333; color: #333;
white-space: nowrap; white-space: nowrap;
} }
span { span {
min-width: 150px; min-width: 150px;
padding: 0 10px 3px; padding: 0 10px 3px;
border-bottom: 1px solid #e1e6f2; border-bottom: 1px solid #e1e6f2;
} }
/deep/.el-input { /deep/.el-input {
width: 174px; width: 174px;
} }
} }
.score-wrap { .score-wrap {
position: relative; position: relative;
min-width: 150px; min-width: 150px;
border-bottom: 1px solid #e1e6f2; border-bottom: 1px solid #e1e6f2;
em { em {
position: absolute; position: absolute;
top: -12px; top: -12px;
@ -419,18 +377,21 @@ samp {
font-weight: 600; font-weight: 600;
color: #0b1d30; color: #0b1d30;
} }
img { img {
position: absolute; position: absolute;
bottom: -15px; bottom: -15px;
left: 0; left: 0;
} }
} }
/deep/.el-textarea .el-textarea__inner, /deep/.el-textarea .el-textarea__inner,
.pre-wrap { .pre-wrap {
min-height: 72px; min-height: 72px;
padding: 10px 16px; padding: 10px 16px;
font-size: 14px; font-size: 14px;
color: #333; color: #333;
&.edit { &.edit {
color: #abb3c6; color: #abb3c6;
border: 1px solid #cacfdb; border: 1px solid #cacfdb;
@ -438,34 +399,42 @@ samp {
background-color: #f6f7f9; background-color: #f6f7f9;
} }
} }
/deep/ .table th { /deep/ .table th {
background-color: #e1eaff !important; background-color: #e1eaff !important;
.cell { .cell {
line-height: 35px; line-height: 35px;
color: #555555; color: #555555;
} }
} }
} }
/deep/ .el-table { /deep/ .el-table {
width: 100%; width: 100%;
.el-table__header-wrapper table, .el-table__header-wrapper table,
.el-table__body-wrapper table { .el-table__body-wrapper table {
width: 100% !important; width: 100% !important;
} }
.el-table__body, .el-table__body,
.el-table__footer, .el-table__footer,
.el-table__header { .el-table__header {
table-layout: auto; table-layout: auto;
} }
} }
.result-pic { .result-pic {
margin: 10px 0; margin: 10px 0;
} }
@media (max-width: 1650px) { @media (max-width: 1650px) {
.wrap { .wrap {
padding: 12px 200px 20px; padding: 12px 200px 20px;
} }
} }
@media (max-width: 1430px) { @media (max-width: 1430px) {
.wrap { .wrap {
padding: 12px 100px 20px; padding: 12px 100px 20px;

2
src/setting.js
Unescape View File

@ -16,7 +16,7 @@ const Setting = {
showProgressBar: true, showProgressBar: true,
// 接口请求地址 // 接口请求地址
// apiBaseURL: env === 'development' ? 'http://192.168.31.125:8888' : 'http://121.37.12.51:8000', // apiBaseURL: env === 'development' ? 'http://192.168.31.125:8888' : 'http://121.37.12.51:8000',
apiBaseURL: env === 'development' ? 'http://192.168.31.151:9000' : 'http://www.liuwanr.cn', apiBaseURL: env === 'development' ? 'http://192.168.31.151:9000' : location.origin,
// 接口请求返回错误时，弹窗的持续时间，单位：秒 // 接口请求返回错误时，弹窗的持续时间，单位：秒
modalDuration: 3, modalDuration: 3,
// 接口请求返回错误时，弹窗的类型，可选值为 Message 或 Notice // 接口请求返回错误时，弹窗的类型，可选值为 Message 或 Notice

3
src/styles/common.scss
Unescape View File

@ -297,3 +297,6 @@
font-weight: 600; font-weight: 600;
color: #f00; color: #f00;
} }
.el-loading-spinner .circular {
display: inline;
}
Write Preview
Loading…
Cancel
Save