parent
1449f2073d
commit
06dcc3b2d1
8 changed files with 779 additions and 71 deletions
@ -0,0 +1,644 @@ |
||||
<template> |
||||
<div> |
||||
<el-card shadow="hover" |
||||
class="m-b-20 head-card"> |
||||
<div class="flex-between m-b-20"> |
||||
<el-page-header @back="$router.back()" |
||||
content="成绩管理"></el-page-header> |
||||
</div> |
||||
|
||||
</el-card> |
||||
|
||||
<el-card v-if="method != 2" |
||||
shadow="hover" |
||||
class="m-b-20"> |
||||
<div class="stat"> |
||||
<div class="nums"> |
||||
<div class="item"> |
||||
<p class="name">已参加/应参加人数</p> |
||||
<p class="val">{{ isNaN(statData.totalNumber) ? '' : statData.attendance + '/' + statData.totalNumber }}</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 v-if="showFile" |
||||
class="tabs m-b-20"> |
||||
<a class="item" |
||||
v-for="(item, i) in tabs" |
||||
:key="i" |
||||
:class="{active: i === active}" |
||||
@click="tabChange(i)">{{ item }}</a> |
||||
</div> |
||||
|
||||
<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 v-if="!active"> |
||||
<el-button v-if="method == 2" |
||||
type="primary" |
||||
@click="batchImport">上传成绩</el-button> |
||||
<el-button type="primary" |
||||
@click="delAllData">批量删除</el-button> |
||||
<el-button type="primary" |
||||
@click="exportData">导出</el-button> |
||||
</div> |
||||
<div v-else> |
||||
<el-button type="primary" |
||||
:loading="loading" |
||||
@click="exportData1">{{ loading ? '正在导出' : '批量导出' }}</el-button> |
||||
</div> |
||||
</div> |
||||
<template v-if="!active"> |
||||
<el-table :data="list" |
||||
class="table" |
||||
:key="1" |
||||
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="competitionType" |
||||
prop="teamName" |
||||
label="团队名称" |
||||
min-width="100" |
||||
align="center"></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"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.timeSum ? scope.row.timeSum + 'min' : '--' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="submitTime" |
||||
label="提交时间" |
||||
min-width="150" |
||||
align="center"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.submitTime || '--' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" |
||||
align="center" |
||||
width="160"> |
||||
<template slot-scope="scope"> |
||||
<el-button :disabled="!scope.row.reportId" |
||||
type="text" |
||||
@click="show(scope.row)">{{ scope.row.reportId ? '查看成绩报告' : '未参加' }}</el-button> |
||||
<el-button v-if="scope.row.reportId" |
||||
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> |
||||
</template> |
||||
<template v-else> |
||||
<el-table :data="list1" |
||||
class="table" |
||||
:key="2" |
||||
stripe |
||||
header-align="center" |
||||
@selection-change="handleSelectionChange1" |
||||
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 + (page1 - 1) * pageSize + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="schoolName" |
||||
label="学校" |
||||
align="center"></el-table-column> |
||||
<el-table-column v-if="competitionType" |
||||
prop="teamName" |
||||
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="fileName" |
||||
label="文件名" |
||||
align="center"></el-table-column> |
||||
<el-table-column prop="fileSize" |
||||
label="文件大小" |
||||
align="center"></el-table-column> |
||||
<el-table-column prop="fileType" |
||||
label="文件类型" |
||||
align="center"></el-table-column> |
||||
<el-table-column prop="fileFormat" |
||||
label="文件格式" |
||||
align="center"></el-table-column> |
||||
<el-table-column prop="createTime" |
||||
label="提交时间" |
||||
width="150" |
||||
align="center"> |
||||
</el-table-column> |
||||
<el-table-column label="操作" |
||||
width="200"> |
||||
<template slot-scope="scope"> |
||||
<el-button v-if="!isCompress(scope.row.fileFormat)" |
||||
type="text" |
||||
@click="preview(scope.row)">预览文件</el-button> |
||||
<el-button type="primary" |
||||
size="mini" |
||||
:loading="scope.row.loading" |
||||
@click="exportFile(scope.row)">导出文件</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background |
||||
layout="total, prev, pager, next" |
||||
:total="total1" |
||||
@current-change="handleCurrentChange1" |
||||
:current-page="page1"> |
||||
</el-pagination> |
||||
</div> |
||||
</template> |
||||
</el-card> |
||||
|
||||
<el-dialog title="批量导入" |
||||
:visible.sync="importVisible" |
||||
width="24%" |
||||
:close-on-click-modal="false"> |
||||
<div style="text-align: center"> |
||||
<div style="margin-bottom: 10px;"> |
||||
<el-button type="primary" |
||||
@click="download">模板下载<i class="el-icon-download el-icon--right"></i></el-button> |
||||
</div> |
||||
<el-upload ref="importStaff" |
||||
name="file" |
||||
accept=".xls,.xlsx" |
||||
:on-remove="handleRemove" |
||||
:on-error="uploadError" |
||||
:on-success="uploadSuccess" |
||||
:before-remove="beforeRemove" |
||||
:limit="1" |
||||
:on-exceed="handleExceed" |
||||
:action="this.api.batchImportGrades" |
||||
:file-list="uploadList" |
||||
:headers="headers" |
||||
:data="{ |
||||
competitionId: this.id, |
||||
stageId: this.stageId, |
||||
systemId: 0 |
||||
}"> |
||||
<el-button type="primary" |
||||
class="ml20">上传文件<i class="el-icon-upload2 el-icon--right"></i></el-button> |
||||
</el-upload> |
||||
<el-link v-if="uploadFaild" |
||||
type="primary" |
||||
@click="showFaild">部分数据导入失败，查看失败原因</el-link> |
||||
</div> |
||||
<span slot="footer" |
||||
class="dialog-footer"> |
||||
<el-button size="small" |
||||
@click="importVisible = false">取 消</el-button> |
||||
<el-button size="small" |
||||
type="primary" |
||||
@click="uploadSure">确 定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Setting from "@/setting"; |
||||
import util from "@/libs/util"; |
||||
import * as echarts from "echarts"; |
||||
import axios from 'axios'; |
||||
import Zip from '@/libs/zip' |
||||
export default { |
||||
data () { |
||||
return { |
||||
id: +this.$route.query.id, |
||||
stageId: +this.$route.query.stageId, |
||||
method: +this.$route.query.method, |
||||
competitionType: +this.$route.query.competitionType, |
||||
showFile: this.$route.query.showFile === 'true', |
||||
isCompress: util.isCompress, |
||||
keyword: "", |
||||
searchTimer: null, |
||||
list: [], |
||||
multipleSelection: [], |
||||
page: 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
|
||||
list1: [], |
||||
multipleSelection1: [], |
||||
page1: 1, |
||||
total1: 0, |
||||
|
||||
avgScore: 0, // 平均分 |
||||
importVisible: false, |
||||
uploadList: [], |
||||
uploadFaild: false, |
||||
exportCode: '', |
||||
headers: { |
||||
token: sessionStorage.getItem("token") |
||||
}, |
||||
statData: {}, |
||||
tabs: ['成绩列表', '文件列表'], |
||||
active: 0, |
||||
loading: false |
||||
}; |
||||
}, |
||||
watch: { |
||||
keyword: function (val) { |
||||
clearTimeout(this.searchTimer); |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData(); |
||||
}, 500); |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
getData () { |
||||
// 文件列表 |
||||
if (this.active) { |
||||
this.$post(this.api.cCompetitionStageFileList, { |
||||
pageNum: this.page1, |
||||
pageSize: this.pageSize, |
||||
competitionId: this.id, |
||||
stageId: this.stageId, |
||||
keyWord: this.keyword, |
||||
}).then(({ data }) => { |
||||
data.records.forEach(e => { |
||||
e.loading = false |
||||
e.fileType = '其他' |
||||
if (util.isVideo(e.fileFormat)) { |
||||
e.fileType = '视频' |
||||
} else if (util.isAudio(e.fileFormat)) { |
||||
e.fileType = '音频' |
||||
} else if (util.isImg(e.fileFormat)) { |
||||
e.fileType = '图片' |
||||
} else if (util.isDoc(e.fileFormat)) { |
||||
e.fileType = '文档' |
||||
} else if (util.isCompress(e.fileFormat)) { |
||||
e.fileType = '压缩包' |
||||
} else if (e.fileType === 'pdf') { |
||||
e.fileType = 'pdf' |
||||
} |
||||
}) |
||||
this.list1 = data.records |
||||
this.total1 = data.total |
||||
}).catch(res => { }) |
||||
} else { // 成绩列表 |
||||
this.$post(this.api.stageGradeManagementList, { |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
competitionId: this.id, |
||||
keyWord: this.keyword, |
||||
stageId: this.stageId, |
||||
isNakadai: 1 |
||||
}).then(({ data, page }) => { |
||||
this.total = page.total |
||||
this.list = page.records |
||||
this.statData = data |
||||
this.avgScore = (+data.avgScore).toFixed(2) |
||||
this.getChart() |
||||
}).catch(res => { }) |
||||
} |
||||
}, |
||||
initData () { |
||||
this.page = 1 |
||||
this.getData() |
||||
}, |
||||
// 查看成绩报告 |
||||
show (row) { |
||||
this.$router.push(`/matchReport?reportId=${row.reportId}`) |
||||
}, |
||||
// 导出(有勾选：就导勾选中的；没有勾选：就导全部) |
||||
exportData () { |
||||
// 有选择数据，则导出已选择的，否则导出全部 |
||||
if (this.multipleSelection.length) { |
||||
axios.post(this.api.exportExperimentalResultsInBatch, this.multipleSelection, { |
||||
headers: this.headers, |
||||
responseType: 'blob' |
||||
}).then((res) => { |
||||
util.downloadFileDirect(`赛事成绩.xls`, new Blob([res.data])) |
||||
}).catch(res => { }) |
||||
} else if (this.list.length) { |
||||
axios.post(this.api.allExperimentalResultsAreDerived, { |
||||
pageNum: 1, |
||||
pageSize: 10000, |
||||
competitionId: this.id, |
||||
isNakadai: 1, |
||||
stageId: this.stageId, |
||||
}, { |
||||
headers: this.headers, |
||||
responseType: 'blob' |
||||
}).then((res) => { |
||||
util.downloadFileDirect(`赛事成绩.xls`, new Blob([res.data])) |
||||
}).catch(res => { }) |
||||
} |
||||
}, |
||||
// 导出(有勾选：就导勾选中的；没有勾选：就导全部) |
||||
exportData1 () { |
||||
this.loading = true |
||||
let list = this.list1 |
||||
if (this.multipleSelection1.length) { |
||||
list = this.multipleSelection1 |
||||
} |
||||
Zip('批量导出', list, () => { |
||||
this.loading = false |
||||
}) |
||||
}, |
||||
handleDelete (row) { // 删除 |
||||
this.$confirm("确定要删除吗？", "提示", { |
||||
type: "warning" |
||||
}).then(() => { |
||||
this.$post(this.api.batchDeleteContestGrade, { |
||||
ids: [this.method == 2 ? row.scoreId : row.reportId], |
||||
competitionId: this.id, |
||||
stageId: row.stageId |
||||
}).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 this.method == 2 ? item.scoreId : item.reportId |
||||
}); |
||||
this.$post(this.api.batchDeleteContestGrade, { |
||||
ids, |
||||
competitionId: this.id, |
||||
stageId: this.stageId |
||||
}).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.getData(); |
||||
}, |
||||
|
||||
handleSelectionChange1 (val) { // 多选 |
||||
this.multipleSelection1 = val; |
||||
}, |
||||
handleCurrentChange1 (val) { // 切换分页 |
||||
this.page1 = val; |
||||
this.getData(); |
||||
}, |
||||
getChart () { // 初始化折线图 |
||||
const data = [] |
||||
const { statData } = this |
||||
for (let i = 1; i <= 10; i++) { |
||||
data.push(statData['num' + i]) |
||||
} |
||||
let myChart = echarts.init(document.getElementById("chart")); |
||||
myChart.setOption({ |
||||
title: { text: "实验分数分布图" }, |
||||
tooltip: {}, |
||||
xAxis: { |
||||
name: "分数", |
||||
type: "category", |
||||
boundaryGap: false, |
||||
interval: 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: 10 |
||||
}, |
||||
series: [{ |
||||
data, |
||||
type: "line", |
||||
areaStyle: {}, |
||||
color: ["#8191fd"] |
||||
}] |
||||
}); |
||||
}, |
||||
// 批量导入 |
||||
batchImport () { |
||||
this.importVisible = true |
||||
this.uploadList = [] |
||||
this.uploadFaild = false |
||||
}, |
||||
// 模板下载 |
||||
download () { |
||||
location.href = this.api.gradeImport |
||||
}, |
||||
// 上传文件 |
||||
handleExceed (files, fileList) { |
||||
util.warningMsg( |
||||
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` |
||||
) |
||||
}, |
||||
// 下载失败文件 |
||||
showFaild () { |
||||
axios.get(`${this.api.performanceExportFailure}?exportCode=${this.exportCode}`, { |
||||
headers: this.headers, |
||||
responseType: 'blob' |
||||
}).then((res) => { |
||||
util.downloadFileDirect(`批量导入成绩管理失败数据导出.xls`, new Blob([res.data])) |
||||
}).catch(res => { }) |
||||
}, |
||||
uploadSuccess (res, file, fileList) { |
||||
this.uploadFaild = false |
||||
if (res.status === 200) { |
||||
if (res.data.exportCode) { |
||||
this.exportCode = res.data.exportCode |
||||
this.uploadFaild = true |
||||
util.errorMsg(`本次上传有${res.data.failureNum}个错误信息录入`) |
||||
} |
||||
} else { |
||||
res.message ? util.errorMsg(res.message) : util.errorMsg("上传失败，请检查数据") |
||||
} |
||||
}, |
||||
uploadError (err, file, fileList) { |
||||
this.$message({ |
||||
message: "上传出错，请重试！", |
||||
type: "error", |
||||
center: true |
||||
}) |
||||
}, |
||||
beforeRemove (file, fileList) { |
||||
return this.$confirm(`确定移除 ${file.name}？`) |
||||
}, |
||||
handleRemove (file, fileList) { |
||||
this.uploadList = fileList |
||||
this.uploadFaild = false |
||||
}, |
||||
uploadSure () { |
||||
this.importVisible = false |
||||
this.getData() |
||||
}, |
||||
// tab回调 |
||||
tabChange (i) { |
||||
this.active = i |
||||
this.getData() |
||||
}, |
||||
// 预览附件 |
||||
preview (item) { |
||||
window.open((util.isDoc(item.fileFormat) ? 'https://view.officeapps.live.com/op/view.aspx?src=' : '') + item.filePath) |
||||
}, |
||||
// 导出文件 |
||||
exportFile (item) { |
||||
item.loading = true |
||||
const url = item.filePath |
||||
var x = new XMLHttpRequest() |
||||
x.open("GET", url, true) |
||||
x.responseType = "blob" |
||||
x.onload = function (e) { |
||||
var url = window.URL.createObjectURL(x.response) |
||||
var a = document.createElement("a") |
||||
a.href = url |
||||
a.download = item.userName + '-' + item.fileName |
||||
a.click() |
||||
item.loading = false |
||||
} |
||||
x.send() |
||||
}, |
||||
} |
||||
}; |
||||
</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; |
||||
min-height: 145px; |
||||
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> |
||||
Loading…
Reference in new issue