|
|
|
|
@ -1,64 +1,62 @@ |
|
|
|
|
<template> |
|
|
|
|
<!-- 实验记录 --> |
|
|
|
|
<div class="wrap"> |
|
|
|
|
<div class="inner"> |
|
|
|
|
<div class="block overview"> |
|
|
|
|
<h6 class="l-title"> |
|
|
|
|
<img src="@/assets/img/record5.png" alt=""> |
|
|
|
|
实验概览 |
|
|
|
|
</h6> |
|
|
|
|
<div class="nums"> |
|
|
|
|
<div class="item"> |
|
|
|
|
<p class="val">{{ overview.userName }}</p> |
|
|
|
|
<p class="name">姓名</p> |
|
|
|
|
</div> |
|
|
|
|
<div class="block overview"> |
|
|
|
|
<h6 class="l-title"> |
|
|
|
|
<img src="@/assets/img/record5.png" alt=""> |
|
|
|
|
实验概览 |
|
|
|
|
</h6> |
|
|
|
|
<div class="nums"> |
|
|
|
|
<div class="item"> |
|
|
|
|
<p class="val">{{ overview.userName }}</p> |
|
|
|
|
<p class="name">姓名</p> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="item"> |
|
|
|
|
<p class="val">{{ overview.experimentalNum }}</p> |
|
|
|
|
<p class="name">实验次数(次)</p> |
|
|
|
|
</div> |
|
|
|
|
<div class="item"> |
|
|
|
|
<p class="val">{{ overview.experimentalNum }}</p> |
|
|
|
|
<p class="name">实验次数(次)</p> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="item"> |
|
|
|
|
<p class="val">{{ overview.duration ? overview.duration : 0 }}小时</p> |
|
|
|
|
<p class="name">实验总时长(时)</p> |
|
|
|
|
</div> |
|
|
|
|
<div class="item"> |
|
|
|
|
<p class="val">{{ overview.duration ? overview.duration : 0 }}小时</p> |
|
|
|
|
<p class="name">实验总时长(时)</p> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="item"> |
|
|
|
|
<p class="val">{{ overview.avgScore ? overview.avgScore.toFixed(2) : overview.avgScore }}</p> |
|
|
|
|
<p class="name">实验平均分</p> |
|
|
|
|
</div> |
|
|
|
|
<div class="item"> |
|
|
|
|
<p class="val">{{ overview.avgScore ? overview.avgScore.toFixed(2) : overview.avgScore }}</p> |
|
|
|
|
<p class="name">实验平均分</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="block record"> |
|
|
|
|
<h6 class="l-title"> |
|
|
|
|
<img src="@/assets/img/record6.png" alt=""> |
|
|
|
|
实验记录明细 |
|
|
|
|
</h6> |
|
|
|
|
|
|
|
|
|
<div class="tool"> |
|
|
|
|
<ul class="filter" style="justify-content: space-between;"> |
|
|
|
|
<div class="tabs"> |
|
|
|
|
<a class="item" v-for="(item,index) in tabList" :key="index" :class="{active: index == active}" @click="tabChange(index)">{{ item }}</a> |
|
|
|
|
</div> |
|
|
|
|
<li style="margin-right: 0"> |
|
|
|
|
<label>课程选择：</label> |
|
|
|
|
<el-select v-model="curriculumId"> |
|
|
|
|
<el-option |
|
|
|
|
v-for="item in curriculumList" |
|
|
|
|
:key="item.cid" |
|
|
|
|
:label="item.curriculumName" |
|
|
|
|
:value="item.cid" |
|
|
|
|
></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
<el-button style="margin-left: 20px;" type="primary" @click="exportData">导出数据</el-button> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
<div class="block record"> |
|
|
|
|
<h6 class="l-title"> |
|
|
|
|
<img src="@/assets/img/record6.png" alt=""> |
|
|
|
|
实验记录明细 |
|
|
|
|
</h6> |
|
|
|
|
|
|
|
|
|
<practice v-if="active == 'practice'" :curriculumId.sync="curriculumId" :key="curriculumId"></practice> |
|
|
|
|
<ass v-else :curriculumId.sync="curriculumId" :key="curriculumId"></ass> |
|
|
|
|
<div class="tool"> |
|
|
|
|
<ul class="filter" style="justify-content: space-between;"> |
|
|
|
|
<div class="tabs"> |
|
|
|
|
<a class="item" v-for="(item,index) in tabList" :key="index" :class="{active: index == active}" @click="tabChange(index)">{{ item }}</a> |
|
|
|
|
</div> |
|
|
|
|
<li style="margin-right: 0"> |
|
|
|
|
<label>课程选择：</label> |
|
|
|
|
<el-select v-model="curriculumId"> |
|
|
|
|
<el-option |
|
|
|
|
v-for="item in curriculumList" |
|
|
|
|
:key="item.cid" |
|
|
|
|
:label="item.curriculumName" |
|
|
|
|
:value="item.cid" |
|
|
|
|
></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
<el-button style="margin-left: 20px;" type="primary" @click="exportData">导出数据</el-button> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<practice v-if="active == 'practice'" :curriculumId.sync="curriculumId" :key="curriculumId"></practice> |
|
|
|
|
<ass v-else :curriculumId.sync="curriculumId" :key="curriculumId"></ass> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
@ -154,16 +152,12 @@ export default { |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.main .view { |
|
|
|
|
padding: 12px 0 20px; |
|
|
|
|
.inner { |
|
|
|
|
width: $min-width; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
} |
|
|
|
|
.wrap { |
|
|
|
|
padding: 12px 100px 20px; |
|
|
|
|
} |
|
|
|
|
.block { |
|
|
|
|
padding: 16px; |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
margin-bottom: 12px; |
|
|
|
|
background: #fff; |
|
|
|
|
} |
|
|
|
|
.overview { |
|
|
|
|
@ -171,24 +165,26 @@ export default { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
.item:nth-child(1) { |
|
|
|
|
background-image: url('../../../assets/img/record1.png'); |
|
|
|
|
background: url(../../../assets/img/record1-1.png) (88% 25px)/auto no-repeat, |
|
|
|
|
url(../../../assets/img/record1.png) 0 0/100% 100% no-repeat; |
|
|
|
|
} |
|
|
|
|
.item:nth-child(2) { |
|
|
|
|
background-image: url('../../../assets/img/record2.png'); |
|
|
|
|
background: url(../../../assets/img/record2-1.png) (88% 15px)/auto no-repeat, |
|
|
|
|
url(../../../assets/img/record2.png) 0 0/100% 100% no-repeat; |
|
|
|
|
} |
|
|
|
|
.item:nth-child(3) { |
|
|
|
|
background-image: url('../../../assets/img/record3.png'); |
|
|
|
|
background: url(../../../assets/img/record3-1.png) (88% 20px)/auto no-repeat, |
|
|
|
|
url(../../../assets/img/record3.png) 0 0/100% 100% no-repeat; |
|
|
|
|
} |
|
|
|
|
.item:nth-child(4) { |
|
|
|
|
margin-right: 0; |
|
|
|
|
background-image: url('../../../assets/img/record4.png'); |
|
|
|
|
background: url(../../../assets/img/record4-1.png) (88% 18px)/auto no-repeat, |
|
|
|
|
url(../../../assets/img/record4.png) 0 0/100% 100% no-repeat; |
|
|
|
|
} |
|
|
|
|
.item { |
|
|
|
|
flex: 1; |
|
|
|
|
width: 22%; |
|
|
|
|
min-width: 250px; |
|
|
|
|
padding: 27px; |
|
|
|
|
margin-right: 19px; |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
.name { |
|
|
|
|
margin-top: 12px; |
|
|
|
|
color: #fff; |
|
|
|
|
|
