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.
299 lines
11 KiB
299 lines
11 KiB
3 years ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<el-card shadow="hover" class="m-b-20">
|
||
|
|
<div class="flex-between m-b-10">
|
||
|
|
<el-page-header @back="goBack" :content="experimentalName"></el-page-header>
|
||
|
|
</div>
|
||
|
|
<el-form label-width="100px">
|
||
|
|
<div class="flex-between">
|
||
|
|
<div></div>
|
||
|
|
<div>
|
||
|
|
<el-input 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 prop="experimentalName" label="考核名称" align="center">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
{{experimentalName}}
|
||
|
|
</template>
|
||
|
|
</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,
|
||
|
|
id: this.$route.query.id,
|
||
|
|
projectId: this.$route.query.projectId,
|
||
|
|
projectName: this.$route.query.name,
|
||
|
|
experimentalName: this.$route.query.experimentalName,
|
||
|
|
className: this.$route.query.class,
|
||
|
|
keyword: '',
|
||
|
|
listData: [],
|
||
|
|
multipleSelection: [],
|
||
|
|
page: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
total: 0,
|
||
|
|
avg: 0,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.getData()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getData() {
|
||
|
|
let data = {
|
||
|
|
systemId: this.systemId,
|
||
|
|
page: this.page,
|
||
|
|
size: this.pageSize,
|
||
|
|
searchContant: this.keyword,
|
||
|
|
projectId: this.id
|
||
|
|
}
|
||
|
|
this.$get(this.api.queryEvaluationReport,data).then(res => {
|
||
|
|
let list = res.data.list
|
||
|
|
let score = 0
|
||
|
|
list.map(n => {
|
||
|
|
n.class = this.className
|
||
|
|
score += n.score
|
||
|
|
})
|
||
|
|
this.listData = list
|
||
|
|
this.total = res.data.totalCount
|
||
|
|
this.avg = score ? (score / res.data.totalCount).toFixed(2) : 0
|
||
|
|
this.getChart()
|
||
|
|
}).catch(res => {});
|
||
|
|
},
|
||
|
|
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.className){
|
||
|
|
this.$router.push(`show?id=${row.recordId}&projectId=${this.id}&reportId=${row.reportId}&studentId=${row.studentId}`)
|
||
|
|
}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=2`)
|
||
|
|
},
|
||
|
|
handleDelete(row) {
|
||
|
|
this.$confirm('确定要删除吗？', '提示', {
|
||
|
|
type: 'warning'
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
this.$post(`${this.api.deleteReport}?reportId=${row.reportId}&recordId=${row.recordId}`).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 `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 => {
|
||
|
|
this.$message.success('删除成功')
|
||
|
|
this.getData()
|
||
|
|
}).catch(res => {})
|
||
|
|
})
|
||
|
|
.catch(() => {});
|
||
|
|
}else{
|
||
|
|
util.errorMsg('请先选择数据 ！')
|
||
|
|
}
|
||
|
|
},
|
||
|
|
handleSelectionChange(val) {
|
||
|
|
this.multipleSelection = val;
|
||
|
|
},
|
||
|
|
handleCurrentChange(val) {
|
||
|
|
this.page = val;
|
||
|
|
this.getData();
|
||
|
|
},
|
||
|
|
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>
|