You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
364 lines
13 KiB
364 lines
13 KiB
4 years ago
|
<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>
|
||
|
|
|