@ -2,218 +2,144 @@
<!-- 实验报告 -- >
< div class = "wrap" >
< breadcrumb data = "返回实验/我的数据" > < / breadcrumb >
< div class = "content"
: class = "{loading}"
id = "pdfDom" >
< div style = "text-align: right"
v - if = "!loading" >
< el -button size = "mini"
@ click = "editReport" >
< div class = "content" : class = "{ loading }" id = "pdfDom" >
< div style = "text-align: right" v-if ="!loading" >
< el -button size = "mini" @click ="editReport" >
{ { editing ? "保存" : "编辑" } }
< / e l - b u t t o n >
< el -button type = "primary"
size = "mini"
@ click = "exportPage" > 导出报告 < / e l - b u t t o n >
< el -button type = "primary" size = "mini" @click ="exportPage" > 导出报告 < / el -button >
< / div >
< h6 class = "r-title" > 标准实验报告 < / h6 >
< div class = "info" >
< h6 class = "l-title" >
< img src = "@/assets/images/report1.png"
alt = "" >
< img src = "@/assets/images/report1.png" alt = "" >
基本信息
< / h6 >
< ul : class = "['info-list', {edit: editing}]" >
< ul : class = "['info-list', { edit: editing }]" >
< li >
< label > 学生姓名 ： < / label >
< el -input v -if = " editing "
v - model = "infoData.userName"
disabled > < / e l - i n p u t >
< el -input v -if = " editing " v -model = " infoData.userName " disabled > < / e l - i n p u t >
< span v-else > {{ infoData.userName }} < / span >
< / li >
< li >
< label > 学生学号 ： < / label >
< el -input v -if = " editing "
v - model = "infoData.workNumber"
disabled > < / e l - i n p u t >
< el -input v -if = " editing " v -model = " infoData.workNumber " disabled > < / e l - i n p u t >
< span v-else > {{ infoData.workNumber }} < / span >
< / li >
< li >
< label > 实验时间 ： < / label >
< el -input v -if = " editing "
v - model = "infoData.submitTime"
disabled > < / e l - i n p u t >
< el -input v -if = " editing " v -model = " infoData.submitTime " disabled > < / e l - i n p u t >
< span v-else > {{ infoData.submitTime }} < / span >
< / li >
< li >
< label > 实验成绩 ： < / label >
< el -input v -if = " editing "
v - model = "infoData.score"
disabled > < / e l - i n p u t >
< div v -else
class = "score-wrap" >
< el -input v -if = " editing " v -model = " infoData.score " disabled > < / e l - i n p u t >
< div v -else class = "score-wrap" >
< em > { { infoData . score } } < / em >
< img src = "@/assets/images/point.png"
alt = "" >
< img src = "@/assets/images/point.png" alt = "" >
< / div >
< / li >
< li >
< label > 学生班级 ： < / label >
< el -input v -if = " editing "
v - model = "infoData.className" > < / e l - i n p u t >
< 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" > < / e l - i n p u t >
< 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" > < / e l - i n p u t >
< 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/images/report2.png"
alt = "" >
< img src = "@/assets/images/report2.png" alt = "" >
实验项目名称
< / h6 >
< el -input v -if = " editing "
v - model = "infoData.projectName"
type = "textarea" > < / e l - i n p u t >
< div v -else
class = "pre-wrap"
v - html = "infoData.projectName" > < / div >
< 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/images/report3.png"
alt = "" >
< img src = "@/assets/images/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 >
< 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/images/report4.png"
alt = "" >
< img src = "@/assets/images/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" >
< 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 >
< / e l - t a b l e - c o l u m n >
< el -table -column prop = "judgmentName"
label = "判分点"
width = "200"
align = "center" > < / e l - t a b l e - c o l u m n >
< el -table -column v -if = ' project '
prop = "judgmentName"
label = "考核点"
align = "center"
width = "150" >
< el -table -column prop = "judgmentName" label = "判分点" width = "200" align = "center" > < / e l - t a b l e - c o l u m n >
< 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" >
< div v-for ="(item, index) in scope.row.lcRuleRecords" :key ="index" >
< span >
< span > { { index + 1 } } . < / span > { { item . name } }
< span > { { index + 1 } } . < / span > { { item . name } }
< / span >
< / div >
< / template >
< / e l - t a b l e - c o l u m n >
< el -table -column prop = "ruleAnswer"
label = "参考答案"
style = 'word-wrap: break-word' >
< 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" >
< div v-for ="(item, index) in scope.row.lcRuleRecords" :key ="index" >
< span >
< span > { { index + 1 } } . < / span > { { item . ruleAnswer } }
< span > { { index + 1 } } . < / span > { { item . ruleAnswer } }
< / span >
< / div >
< / div >
< div v -else
v - html = "scope.row.referenceAnswer" > < / div >
< div v -else v-html ="scope.row.referenceAnswer" > < / div >
< / template >
< / e l - t a b l e - c o l u m n >
< el -table -column prop = "userAnswer"
label = "学生答案" >
< 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" >
< div v-for ="(item, index) in scope.row.lcRuleRecords" :key ="index" >
< span v -if = ' item.userAnswer ' >
< span > { { index + 1 } } . < / span > { { item . userAnswer } }
< span > { { index + 1 } } . < / span > { { item . userAnswer } }
< / span >
< span v-else >
< span > { { index + 1 } } . < / span > 未填写
< span > { { index + 1 } } . < / span > 未填写
< / span >
< / div >
< / div >
< div v -else
v - html = 'scope.row.answer'
style = 'white-space: pre-wrap' > < / div >
< div v -else class = "pre-code" > { { scope . row . answer } } < / div >
< / template >
< / e l - t a b l e - c o l u m n >
< el -table -column prop = "runResult"
label = "学生运行结果"
align = "center" >
< el -table -column 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 >
< div class = "m-b-20 pre-code" > { { scope . row . runResult } } < / 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 = "" >
< img v -for = " ( img , i ) in scope.row.runThePictureList " :key ="i" width = "200" class = "result-pic"
: src = "img" alt = "" >
< / template >
< / template >
< / e l - t a b l e - c o l u m n >
< el -table -column prop = "quesScore"
label = "分值"
width = "80"
align = "center" > < / e l - t a b l e - c o l u m n >
< el -table -column prop = "score"
label = "得分"
width = "80"
align = "center" > < / e l - t a b l e - c o l u m n >
< el -table -column prop = "quesScore" label = "分值" width = "80" align = "center" > < / e l - t a b l e - c o l u m n >
< el -table -column prop = "score" label = "得分" width = "80" align = "center" > < / e l - t a b l e - c o l u m n >
< / e l - t a b l e >
< / div >
< div class = "m-b-20" >
< h6 class = "l-title" >
< img src = "@/assets/images/report5.png"
alt = "" >
< img src = "@/assets/images/report5.png" alt = "" >
实验总结与体会
< / h6 >
< Editor v -if = " editing "
api - key = 'rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda'
v - model = "infoData.summarize"
: init = "editorConfig" / >
< div v -show = " ! editing "
class = "pre-wrap"
v - html = "infoData.summarize" > < / div >
< Editor v -if = " editing " api -key = ' rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda ' v -model = " infoData.summarize "
: init = "editorConfig" / >
< div v-show ="!editing" class="pre-wrap" v-html="infoData.summarize" > < / div >
< / div >
< / div >
< / div >
@ -272,17 +198,18 @@ export default {
purpose : form . purpose ,
summarize : form . summarize
}
const data = report . data
this . userScores = userScores
let { data } = report
/ / 如 果 没 有 d a t a ， 则 添 加 ， 否 则 ， 直 接 使 用
if ( ! data ) {
this . userScores = userScores
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 ) )
data = JSON . parse ( data )
this . handleList ( data )
}
} ) . catch ( res => { } )
} ,
@ -359,12 +286,19 @@ export default {
< style lang = "scss" scoped >
@ import '/styles/css/editor.css' ;
. m - b - 20 {
margin - bottom : 20 px ;
}
. wrap {
padding : 12 px 300 px 20 px ;
}
. pre - code {
white - space : pre - wrap ;
}
code ,
kbd ,
samp {
@ -373,12 +307,18 @@ samp {
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+ */
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 : 12 px ;
@ -386,22 +326,27 @@ samp {
font - family : 'PingFang SC' , 'Helvetica Neue' , Helvetica , 'microsoft yahei' ,
arial , STHeiTi , sans - serif ;
}
. content {
padding : 16 px 0 ;
background : # fff ;
& . loading {
padding - top : 30 px ;
}
. r - title {
margin - bottom : 40 px ;
font - size : 24 px ;
text - align : center ;
color : # 333 ;
}
. info {
padding : 20 px 16 px ;
border : 1 px solid # e1e6f2 ;
}
. l - title {
display : flex ;
align - items : center ;
@ -410,43 +355,52 @@ samp {
font - size : 14 px ;
color : # 333 ;
background - color : # f7f9fc ;
img {
margin - right : 5 px ;
}
}
. info - list {
display : flex ;
flex - wrap : wrap ;
padding : 10 px 0 0 20 px ;
li {
display : inline - flex ;
width : 25 % ;
padding : 0 10 px ;
margin - bottom : 34 px ;
}
& . edit {
li {
align - items : center ;
}
}
label {
font - size : 14 px ;
color : # 333 ;
white - space : nowrap ;
}
span {
min - width : 150 px ;
padding : 0 10 px 3 px ;
border - bottom : 1 px solid # e1e6f2 ;
}
/deep/ . el - input {
width : 174 px ;
}
}
. score - wrap {
position : relative ;
min - width : 150 px ;
border - bottom : 1 px solid # e1e6f2 ;
em {
position : absolute ;
top : - 12 px ;
@ -456,18 +410,21 @@ samp {
font - weight : 600 ;
color : # 0b1 d30 ;
}
img {
position : absolute ;
bottom : - 15 px ;
left : 0 ;
}
}
/deep/ . el - textarea . el - textarea _ _inner ,
. pre - wrap {
min - height : 72 px ;
padding : 10 px 16 px ;
font - size : 14 px ;
color : # 333 ;
& . edit {
color : # abb3c6 ;
border : 1 px solid # cacfdb ;
@ -475,22 +432,27 @@ samp {
background - color : # f6f7f9 ;
}
}
/deep/ . table th {
background - color : # e1eaff ! important ;
. cell {
line - height : 35 px ;
color : # 555555 ;
}
}
}
. result - pic {
margin : 10 px 0 ;
}
@ media ( max - width : 1650 px ) {
. wrap {
padding : 12 px 200 px 20 px ;
}
}
@ media ( max - width : 1430 px ) {
. wrap {
padding : 12 px 100 px 20 px ;
yujialong