parent
e2c5d72a53
commit
8a5804a20b
7 changed files with 535 additions and 58 deletions
@ -0,0 +1,363 @@ |
||||
<template> |
||||
<div> |
||||
<el-card shadow="hover" class="mgb20"> |
||||
<div class="flex-between" style="margin-bottom: 10px"> |
||||
<div class="per_title" v-preventReClick @click="goback()"> |
||||
<i class="el-icon-arrow-left"></i> |
||||
<span class="per_back">返回</span> |
||||
<span class="per_school">{{experimentalName}}</span> |
||||
</div> |
||||
</div> |
||||
<div class="tabs"> |
||||
<a class="item" v-for="(item,index) in classList" :key="index" :class="{active: item.classId == classId}" @click="tabChange(item.classId)">{{item.className}}</a> |
||||
</div> |
||||
</el-card> |
||||
|
||||
<el-card shadow="hover" class="mgb20"> |
||||
<div class="stat"> |
||||
<div class="cka-Overview"> |
||||
<div class="newPractice-card"> |
||||
<div class="newPractice-card-other"> |
||||
<p style="font-size:18px">实验总人数</p> |
||||
<p style="font-size:36px">{{totals}}</p> |
||||
</div> |
||||
<div class="newPractice-card-other"> |
||||
<p style="font-size:18px">实验平均分</p> |
||||
<p style="font-size:36px">{{avg}}</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="chart" id="chart"></div> |
||||
</div> |
||||
</el-card> |
||||
|
||||
<el-card shadow="hover" class="mgb20"> |
||||
<div class="flex-between mgb20"> |
||||
<div> |
||||
<el-button type="primary" size="small" @click="delAllData">批量删除</el-button> |
||||
<el-button type="primary" size="small" @click="exportData">导出</el-button> |
||||
</div> |
||||
<div> |
||||
<el-input placeholder="请输入学校/学生姓名" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-tabs v-model="isRead" @tab-click="getData"> |
||||
<el-tab-pane :label="'全部（' + totals + '）'" name="1"></el-tab-pane> |
||||
<el-tab-pane :label="'已批阅（' + already + '）'" name="2"></el-tab-pane> |
||||
<el-tab-pane :label="'待批阅（' + not + '）'" name="3"></el-tab-pane> |
||||
</el-tabs> |
||||
|
||||
<el-table :data="listData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="reportId"> |
||||
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
||||
<el-table-column type="index" width="100" label="序号" align="center"> |
||||
<template slot-scope="scope"> |
||||
{{scope.$index + (pageNo - 1) * pageSize + 1}} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="schoolName" label="学校" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="class" label="班级" align="center"> |
||||
<template slot-scope="scope"> |
||||
{{classList.length ? classList.find(n => n.classId == classId).className : ''}} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="userName" label="学生姓名" align="center"></el-table-column> |
||||
<el-table-column prop="workNumber" label="学号" align="center"></el-table-column> |
||||
<el-table-column prop="score" label="分数" align="center"></el-table-column> |
||||
<el-table-column prop="creationTime" label="提交时间" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="experimentalName" label="批阅状态" align="center"> |
||||
<template slot-scope="scope"> |
||||
{{reviewList.find(n => n.id == scope.row.isRead).name}} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center" width="220"> |
||||
<template slot-scope="scope"> |
||||
<el-button type="text" @click="edit(scope.row)">批阅</el-button> |
||||
<el-button type="text" @click="show(scope.row)">查看成绩报告</el-button> |
||||
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo"> |
||||
</el-pagination> |
||||
</div> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import echarts from 'echarts' |
||||
export default { |
||||
name: 'experiment', |
||||
data() { |
||||
return { |
||||
id: this.$store.state.experimentData.id, |
||||
projectName: this.$store.state.experimentData.name, |
||||
experimentalName: this.$store.state.experimentData.experimentalName, |
||||
className: this.$store.state.experimentData.class, |
||||
projectId: this.$store.state.experimentData.projectId, |
||||
classList: this.$store.state.experimentData.classList, |
||||
classId: '', |
||||
isRead: '1', |
||||
keyword: '', |
||||
listDataAll: [], |
||||
listData: [], |
||||
multipleSelection: [], |
||||
pageNo: 1, |
||||
pageSize: 10, |
||||
totals: 0, |
||||
avg: 0, |
||||
already: 0, |
||||
not: 0, |
||||
reviewList: [ |
||||
{ |
||||
id: 0, |
||||
name: '已批阅' |
||||
},{ |
||||
id: 1, |
||||
name: '待批阅' |
||||
} |
||||
] |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.classId = this.classList[0].classId |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
getData() { |
||||
let data = { |
||||
id: this.id, |
||||
classId: this.classId, |
||||
isRead: this.isRead == 1 ? '' : (this.isRead == 2 ? 0 : 1), //全部：''，已批阅：0，待批阅：1 |
||||
searchContent: this.encodeString(this.keyword), |
||||
} |
||||
this.$get(this.api.getKdAchievement,data).then(res => { |
||||
let list = res.data |
||||
let score = 0 |
||||
let already = 0 |
||||
let not = 0 |
||||
list.map(n => { |
||||
n.class = this.className |
||||
score += n.score |
||||
if(!n.isRead){ |
||||
already++ |
||||
}else{ |
||||
not++ |
||||
} |
||||
}) |
||||
this.already = already |
||||
this.not = not |
||||
|
||||
this.listDataAll = list |
||||
this.handlePage() |
||||
this.totals = list.length |
||||
this.avg = score ? (score / list.length).toFixed(2) : 0 |
||||
this.getChart() |
||||
}).catch(res => {}); |
||||
}, |
||||
handlePage(){ |
||||
let list = this.listDataAll |
||||
this.listData = list.slice((this.pageNo - 1) * this.pageSize,this.pageNo * this.pageSize) |
||||
this.totals = list.length |
||||
}, |
||||
tabChange(classId){ |
||||
this.classId = classId |
||||
this.getData() |
||||
}, |
||||
edit(row){ |
||||
this.$router.push(`/showExperiment?id=${row.reportId}&studentId=${row.userId}&userName=${row.userName}&edit=1`) |
||||
}, |
||||
show(row){ |
||||
this.$router.push(`/showExperiment?id=${row.reportId}&studentId=${row.userId}&userName=${row.userName}`) |
||||
}, |
||||
exportData(){ |
||||
if(!this.listData.length) return false |
||||
let selected = this.multipleSelection |
||||
let exportList = [] |
||||
if(selected.length){ |
||||
exportList = selected.map(item => { |
||||
return item.recordId |
||||
}) |
||||
}else{ |
||||
exportList = this.listData.map(item => { |
||||
return item.recordId |
||||
}) |
||||
} |
||||
console.log(exportList.join(','),this.id,this.projectId) |
||||
window.open(`${this.api.exportAchievement}?ids=${exportList.join(',')}&projectId=${this.projectId}&source=2`) |
||||
}, |
||||
handleDelete(row) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}) |
||||
.then(() => { |
||||
this.$post(`${this.api.deleteReportByIds}?ids=${row.reportId}`).then(res => { |
||||
this.$message.success('删除成功'); |
||||
this.getData() |
||||
}).catch(res => {}); |
||||
}) |
||||
.catch(() => {}); |
||||
}, |
||||
delAllData() { |
||||
if(this.multipleSelection.length != ''){ |
||||
let newArr = this.multipleSelection |
||||
let delList = newArr.map(item => { |
||||
return `ids=${item.reportId}` |
||||
}) |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}) |
||||
.then(() => { |
||||
this.$post(`${this.api.deleteReportByIds}?${delList.join('&')}`).then(res => { |
||||
this.$refs.table.clearSelection() |
||||
this.$message.success('删除成功') |
||||
this.getData() |
||||
}).catch(res => {}) |
||||
}) |
||||
.catch(() => {}); |
||||
}else{ |
||||
this.$message.error('请先选择数据 ！'); |
||||
} |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val; |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.pageNo = val; |
||||
this.handlePage(); |
||||
}, |
||||
getChart(){ |
||||
let data = [0,0,0,0,0,0,0,0,0,0] |
||||
let list = this.listDataAll |
||||
list.map(n => { |
||||
n.score |
||||
if(n.score >= 0 && n.score <= 10){ |
||||
data[0]++ |
||||
}else if(n.score > 10 && n.score <= 20){ |
||||
data[1]++ |
||||
}else if(n.score > 20 && n.score <= 30){ |
||||
data[2]++ |
||||
}else if(n.score > 30 && n.score <= 40){ |
||||
data[3]++ |
||||
}else if(n.score > 40 && n.score <= 50){ |
||||
data[4]++ |
||||
}else if(n.score > 50 && n.score <= 60){ |
||||
data[5]++ |
||||
}else if(n.score > 60 && n.score <= 70){ |
||||
data[6]++ |
||||
}else if(n.score > 70 && n.score <= 80){ |
||||
data[7]++ |
||||
}else if(n.score > 80 && n.score <= 90){ |
||||
data[8]++ |
||||
}else if(n.score > 90 && n.score <= 100){ |
||||
data[9]++ |
||||
} |
||||
}) |
||||
let myChart = echarts.init(document.getElementById('chart')) |
||||
myChart.setOption({ |
||||
title: { text: '实验分数分布图' }, |
||||
tooltip: {}, |
||||
xAxis: { |
||||
name: '分数', |
||||
type: 'category', |
||||
data: ['0-10', '11-20', '21-30', '31-40', '41-50', '51-60', '61-70', '71-80','81-90','91-100'] |
||||
}, |
||||
yAxis: { |
||||
name: '人数', |
||||
type: 'value' |
||||
}, |
||||
series: [{ |
||||
data, |
||||
type: 'bar', |
||||
color: ['#8191fd'] |
||||
}] |
||||
}) |
||||
}, |
||||
goback() { |
||||
this.$router.back() |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.mag{ |
||||
margin-right: 20px; |
||||
} |
||||
/deep/.el-tabs__nav-wrap::after{ |
||||
display: none; |
||||
} |
||||
.stat{ |
||||
display: flex; |
||||
.chart{ |
||||
flex: 1; |
||||
height: 300px; |
||||
} |
||||
} |
||||
.cka-Overview { |
||||
width: 600px; |
||||
margin-right: 20px; |
||||
p { |
||||
font-size: 20px; |
||||
} |
||||
.newPractice-card { |
||||
display: flex; |
||||
align-items: center; |
||||
height: 100%; |
||||
.newPractice-card-other:nth-child(1) { |
||||
background-image: url('../../assets/img/total.png'); |
||||
} |
||||
.newPractice-card-other:nth-child(2) { |
||||
background-image: url('../../assets/img/avg.png'); |
||||
} |
||||
|
||||
.newPractice-card-other { |
||||
width: 300px; |
||||
padding: 30px 30px; |
||||
margin: 0 10px; |
||||
box-sizing: border-box; |
||||
border-radius: 8px; |
||||
background-size: 100% 100%; |
||||
background-repeat: no-repeat; |
||||
p { |
||||
font-size: 18px; |
||||
color: #ffffff; |
||||
} |
||||
p:last-child { |
||||
margin-top: 10px; |
||||
color: #ffffff; |
||||
font-size: 26px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.tabs{ |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 20px 0; |
||||
margin: 0; |
||||
z-index: 999; |
||||
background-color: #fff; |
||||
.item{ |
||||
padding: 12px 20px; |
||||
margin-right: 10px; |
||||
color:#606266; |
||||
line-height: 1; |
||||
border-radius: 4px; |
||||
background-color: #fff; |
||||
border: 1px solid #dcdfe6; |
||||
cursor: pointer; |
||||
|
||||
&.active{ |
||||
color: #fff; |
||||
background-color: #9278ff; |
||||
border-color: #9278ff; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue