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.
297 lines
11 KiB
297 lines
11 KiB
<template> |
|
<div> |
|
<el-card shadow="hover" class="m-b-20"> |
|
<div class="flex-between m-b-10"> |
|
<el-page-header @back="goBack" :content="experimentName"></el-page-header> |
|
</div> |
|
<el-form label-width="100px"> |
|
<div class="flex-between"> |
|
<div></div> |
|
<div> |
|
<el-input size="small" placeholder="请输入学校/学生姓名" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input> |
|
</div> |
|
</div> |
|
</el-form> |
|
</el-card> |
|
|
|
<el-card shadow="hover" class="m-b-20"> |
|
<div class="stat"> |
|
<div class="nums"> |
|
<div class="item"> |
|
<p class="name">实验总人数</p> |
|
<p class="val">{{total}}</p> |
|
</div> |
|
<div class="item"> |
|
<p class="name">实验平均分</p> |
|
<p class="val">{{avg}}</p> |
|
</div> |
|
</div> |
|
<div class="chart" id="chart"></div> |
|
</div> |
|
</el-card> |
|
|
|
<el-card shadow="hover" class="m-b-20"> |
|
<div class="flex-between m-b-20"> |
|
<div> |
|
|
|
</div> |
|
<div> |
|
<el-button type="primary" size="small" @click="delAllData">批量删除</el-button> |
|
<el-button type="primary" size="small" @click="exportData">导出</el-button> |
|
</div> |
|
</div> |
|
<el-table :data="listData" class="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 + (page - 1) * pageSize + 1}} |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="schoolName" label="学校" align="center"> |
|
</el-table-column> |
|
<el-table-column v-if="className" prop="class" label="班级" align="center"> |
|
</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="submitTime" label="提交时间" align="center"> |
|
</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="total" @current-change="handleCurrentChange" :current-page="page"> |
|
</el-pagination> |
|
</div> |
|
</el-card> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import Setting from '@/setting' |
|
import util from '@/libs/util' |
|
import echarts from 'echarts' |
|
export default { |
|
data() { |
|
return { |
|
systemId: this.$route.query.systemId, |
|
projectId: this.$route.query.id, |
|
experimentName: this.$route.query.name, |
|
className: this.$route.query.class, |
|
keyword: '', |
|
listDataAll: [], |
|
listData: [], |
|
multipleSelection: [], |
|
page: 1, |
|
pageSize: 10, |
|
total: 0, |
|
avg: 0, |
|
}; |
|
}, |
|
mounted() { |
|
this.getData() |
|
}, |
|
methods: { |
|
getData() { |
|
let data = { |
|
projectId: this.projectId |
|
} |
|
this.$get(this.api.getImitationAchievement,data).then(res => { |
|
let list = res.data |
|
let score = 0 |
|
list.map(n => { |
|
n.class = this.className |
|
score += n.score |
|
}) |
|
this.listDataAll = list |
|
this.handlePage() |
|
this.total = 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.page - 1) * this.pageSize,this.page * this.pageSize) |
|
this.total = list.length |
|
}, |
|
edit(row){ |
|
if(this.systemId == 2 || this.systemId == 3){ |
|
this.$router.push(`addexperiment?id=${row.reportId}&stuId=${row.userId}&studentName=${row.studentName}&class=${row.class}`) |
|
}else{ |
|
this.$router.push(`addexperiment?id=${row.reportId}`) |
|
} |
|
}, |
|
show(row){ |
|
if(this.systemId == 2){ |
|
this.$router.push(`showexperimentOption?id=${row.reportId}&stuId=${row.userId}&studentName=${row.studentName}&class=${row.class}`) |
|
}else if(this.systemId == 3){ |
|
this.$router.push(`showexperimentOptions?id=${row.reportId}&stuId=${row.userId}&studentName=${row.studentName}&class=${row.class}`) |
|
}else{ |
|
if(this.class){ |
|
this.$router.push(`show?id=${row.recordId}&projectId=${this.projectId}&reportId=${row.reportId}`) |
|
}else{ |
|
this.$router.push(`show?id=${row.recordId}&type=1`) |
|
} |
|
} |
|
}, |
|
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 |
|
}) |
|
} |
|
window.open(`${this.api.exportAchievement}?ids=${exportList.join(',')}&projectId=${this.projectId}&source=1`) |
|
}, |
|
handleDelete(row) { |
|
this.$confirm('确定要删除吗？', '提示', { |
|
type: 'warning' |
|
}) |
|
.then(() => { |
|
this.$post(`${this.api.deleteReport}?reportId=${row.reportId}&recordId=${row.recordId}`).then(res => { |
|
util.successMsg('删除成功') |
|
this.getData() |
|
}).catch(res => {}) |
|
}) |
|
.catch(() => {}); |
|
}, |
|
delAllData() { |
|
if(this.multipleSelection.length != ''){ |
|
let newArr = this.multipleSelection |
|
let delList = newArr.map(item => { |
|
return `reportId=${item.reportId}` |
|
}) |
|
let delList1 = newArr.map(item => { |
|
return `recordId=${item.recordId}` |
|
}) |
|
this.$confirm('确定要删除吗？', '提示', { |
|
type: 'warning' |
|
}) |
|
.then(() => { |
|
this.$post(`${this.api.deleteReport}?${delList.join('&')}&${delList1.join('&')}`).then(res => { |
|
util.successMsg('删除成功') |
|
this.getData() |
|
}).catch(res => {}) |
|
}) |
|
.catch(() => {}); |
|
}else{ |
|
util.errorMsg('请先选择数据 ！'); |
|
} |
|
}, |
|
handleSelectionChange(val) { |
|
this.multipleSelection = val; |
|
}, |
|
handleCurrentChange(val) { |
|
this.page = val; |
|
this.handlePage(); |
|
}, |
|
getChart(){ |
|
let data = [0,0,0,0,0,0,0,0,0,0] |
|
let list = this.listData |
|
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', |
|
boundaryGap: false, |
|
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: 'line', |
|
areaStyle: {}, |
|
color: ['#8191fd'] |
|
}] |
|
}) |
|
}, |
|
goBack() { |
|
this.$router.back() |
|
}, |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
/deep/.el-tabs__nav-wrap::after{ |
|
display: none; |
|
} |
|
.stat{ |
|
display: flex; |
|
.nums { |
|
display: flex; |
|
align-items: center; |
|
margin-right: 20px; |
|
.item:nth-child(1) { |
|
background-image: url('../../../assets/img/total.png'); |
|
} |
|
.item:nth-child(2) { |
|
background-image: url('../../../assets/img/avg.png'); |
|
} |
|
|
|
.item { |
|
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; |
|
} |
|
.val{ |
|
margin-top: 10px; |
|
color: #ffffff; |
|
font-size: 36px; |
|
} |
|
} |
|
} |
|
.chart{ |
|
flex: 1; |
|
height: 300px; |
|
} |
|
} |
|
</style> |