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.
352 lines
13 KiB
352 lines
13 KiB
<template> |
|
<div> |
|
<el-card shadow="hover" class="m-b-20 head-card"> |
|
<div class="flex-between m-b-20"> |
|
<el-page-header @back="goBack" :content="experimentalName"></el-page-header> |
|
</div> |
|
|
|
</el-card> |
|
|
|
<el-card shadow="hover" class="m-b-20"> |
|
<el-tabs v-model="activeName" @tab-click="handleClick"> |
|
<el-tab-pane v-for="(item) in classList" :label="item.className" :name="item.id" :key="item.id"></el-tab-pane> |
|
</el-tabs> |
|
<div class="stat"> |
|
<div class="nums"> |
|
<div class="item"> |
|
<p class="name">实验总人数</p> |
|
<p class="val">{{ peopleNum }}</p> |
|
</div> |
|
<div class="item"> |
|
<p class="name">实验平均分</p> |
|
<p class="val">{{ avgScore }}</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> |
|
<el-input |
|
size="small" |
|
placeholder="请输入学校/学生姓名" |
|
prefix-icon="el-icon-search" |
|
v-model="keyword" clearable |
|
style="width: 300px" |
|
></el-input> |
|
</div> |
|
<div> |
|
<el-button type="primary" @click="delAllData">批量删除</el-button> |
|
<el-button type="primary" @click="exportData">导出</el-button> |
|
</div> |
|
</div> |
|
<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="60" label="序号" align="center"> |
|
<template slot-scope="scope"> |
|
{{ scope.$index + (page - 1) * pageSize + 1 }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="schoolName" label="学校" min-width="150" align="center"> |
|
</el-table-column> |
|
<el-table-column v-if="permissions" prop="experimentalName" label="考核名称" min-width="250" align="center"> |
|
<template slot-scope="scope"> |
|
{{ experimentalName }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="userName" label="学生姓名" min-width="100" align="center"></el-table-column> |
|
<el-table-column prop="workNumber" label="学号" min-width="100" align="center"></el-table-column> |
|
<el-table-column prop="score" label="分数" width="90" align="center"></el-table-column> |
|
<el-table-column prop="timeSum" label="耗时" width="90" align="center"></el-table-column> |
|
<el-table-column prop="submitTime" label="提交时间" min-width="150" align="center"> |
|
</el-table-column> |
|
<el-table-column label="操作" align="center" width="160"> |
|
<template slot-scope="scope"> |
|
<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"; |
|
import axios from 'axios'; |
|
export default { |
|
data() { |
|
return { |
|
activeName: "", // 当前标签页 |
|
classId: "", // 当前班级id |
|
classList: [], // 班级标签页列表 |
|
permissions: Number(this.$route.query.permissions), |
|
experimentalName: this.$route.query.projectName, |
|
id: this.$route.query.id, |
|
keyword: "", |
|
searchTimer: null, |
|
listData: [], |
|
multipleSelection: [], |
|
page: 1, |
|
pageSize: 10, |
|
total: 0, |
|
peopleNum: 0, // 总人数 |
|
avgScore: 0, // 平均分 |
|
token: util.local.get(Setting.tokenKey), |
|
}; |
|
}, |
|
watch: { |
|
keyword: function(val) { |
|
clearTimeout(this.searchTimer); |
|
this.searchTimer = setTimeout(() => { |
|
this.initData(); |
|
}, 500); |
|
} |
|
}, |
|
mounted() { |
|
this.permissions && this.getSpliceClass() // 考核才需要查询班级列表 |
|
this.getData() |
|
}, |
|
methods: { |
|
handleClick(tab, event) { // 处理点击标签页 |
|
if (this.classId === tab.name) return; |
|
this.classId = tab.name; |
|
sessionStorage.setItem('activeName', tab.name) |
|
this.getData(); |
|
}, |
|
// 获取拼接班级 |
|
getSpliceClass() { |
|
this.$post(`${this.api.spliceClass}?assessmentId=${this.id}`).then(res => { |
|
this.classList = res.list |
|
const activeName = sessionStorage.getItem('activeName') |
|
if(activeName && this.classList.some(item => item.id === activeName)) { |
|
this.classId = activeName |
|
this.activeName = activeName |
|
}else { |
|
this.classId = this.classList[0].id; |
|
this.activeName = this.classList[0].id; |
|
} |
|
}).catch(err => {}) |
|
}, |
|
// 获取表格数据 |
|
getData() { |
|
// 考核 |
|
if (this.permissions) { |
|
this.$post(`${this.api.getAssessmentDetail}?pageNum=${this.page}&pageSize=${this.pageSize}&assessmentId=${this.id}&classId=${this.classId}&keyword=${this.keyword}`).then(res => { |
|
this.listData = res.page.records |
|
this.total = res.page.total |
|
this.avgScore = res.avgScore |
|
this.peopleNum = res.peopleNum |
|
this.getChart() |
|
}).catch(err => {}) |
|
} else { |
|
// 练习 |
|
this.$post(`${this.api.getPracticeDetail}?pageNum=${this.page}&pageSize=${this.pageSize}&projectId=${this.id}&keyword=${this.keyword}`).then(res => { |
|
this.listData = res.page.records |
|
this.total = res.page.total |
|
let avgScore = +res.avgScore |
|
this.avgScore = avgScore.toFixed(2) |
|
this.peopleNum = res.peopleNum |
|
this.getChart() |
|
}).catch(res => {}) |
|
} |
|
}, |
|
// 查看成绩报告 |
|
show(row) { |
|
this.$router.push(`show?reportId=${row.reportId}`) |
|
}, |
|
// 导出(有勾选：就导勾选中的；没有勾选：就导全部) |
|
exportData() { |
|
// 考核和练习的接口不一样 |
|
let url = this.permissions |
|
? `${this.api.exportAssessmentInfo}?assessmentId=${this.id}&classId=${this.classId}` |
|
: `${this.api.exportPracticeInfo}?projectId=${this.id}` |
|
// 有勾选，就带上勾选的id |
|
if (this.multipleSelection.length) { |
|
const ids = this.multipleSelection.map(e => e.reportId) |
|
url += `&ids=${ids.toString()}` |
|
} |
|
axios.get(url, { |
|
headers: { |
|
token: this.token |
|
}, |
|
responseType: 'blob' |
|
}).then((res) => { |
|
util.downloadFileDirect(`学生${this.permissions ? '考核' : '练习'}成绩.xls`,new Blob([res.data])) |
|
}).catch(res => {}) |
|
}, |
|
handleDelete(row) { // 删除 |
|
this.$confirm("确定要删除吗？", "提示", { |
|
type: "warning" |
|
}).then(() => { |
|
this.$post(this.api.deleteExperimentalReport, [row.reportId]).then(res => { |
|
util.successMsg("删除成功"); |
|
this.getData(); |
|
}).catch(res => { |
|
}); |
|
}).catch(() => { |
|
}); |
|
}, |
|
delAllData() { // 批量删除 |
|
if (this.multipleSelection.length) { |
|
this.$confirm("该项目下的所有成绩报告将会删除，是否继续？", "提示", { |
|
type: "warning" |
|
}).then(() => { |
|
let ids = this.multipleSelection.map(item => { |
|
return item.reportId; |
|
}); |
|
this.$post(this.api.deleteExperimentalReport, ids).then(res => { |
|
this.multipleSelection = []; |
|
this.$refs.table.clearSelection(); |
|
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]++; |
|
} |
|
}) |
|
// const datas = [] |
|
// for (let i = 0; i <= 100; i++) { |
|
// datas.push(list.filter(e => e.score === i).length) |
|
// } |
|
let myChart = echarts.init(document.getElementById("chart")); |
|
myChart.setOption({ |
|
title: { text: "实验分数分布图" }, |
|
tooltip: {}, |
|
xAxis: { |
|
name: "分数", |
|
type: "category", |
|
boundaryGap: false, |
|
interval: 10, |
|
// splitNumber: 10, |
|
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", |
|
interval: 1 |
|
}, |
|
series: [{ |
|
data, |
|
type: "line", |
|
areaStyle: {}, |
|
color: ["#8191fd"] |
|
}] |
|
}); |
|
}, |
|
goBack() { |
|
this.$router.push("/achievement/list?per=1"); |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
/deep/ .head-card { |
|
.el-card__body { |
|
padding-bottom: 0px; |
|
|
|
.el-tabs__header { |
|
margin-bottom: 1px; |
|
|
|
.el-tabs__nav-wrap::after { |
|
display: none; |
|
} |
|
|
|
.el-tabs__item { |
|
font-size: 18px; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.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> |