<template>
<div class="testStat">
<el-form
:model="queryParams"
ref="queryForm"
:inline="true"
label-width="68px">
<el-form-item label="考试名称" prop="courseName">
<el-input
v-model="queryParams.courseName"
placeholder="请输入课程名称"
clearable
size="small"
/>
</el-form-item>
<el-form-item label="类型" prop="dataKind">
<el-select v-model="queryParams.dataKind">
<el-option label="培训考试" value="0" />
<el-option label="随机考试" value="1" />
</el-select>
</el-form-item>
<el-form-item label="发布时间" prop="releaseTimeBegin">
<el-date-picker
v-model="releaseTime"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="dateFormat">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="search"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetClick"
>重置</el-button
>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="testStatData">
<el-table-column label="序号" width='100' align="center" prop="courseNum"/>
<el-table-column label="考试名称" align="center" prop="courseName"/>
<el-table-column label="发布时间" align="center" prop="releaseTime"/>
<el-table-column label="类型" align="center" prop="dataKind">
<template slot-scope="scope">
<span v-if="scope.row.dataKind == '0'">培训考试</span>
<span v-else>随机考试</span>
</template>
</el-table-column>
<el-table-column label="应参加人数" align="center" prop="count"/>
<el-table-column label="实际考试人数" align="center" prop="test"/>
<el-table-column label="合格人数" align="center" prop="pass"/>
<!-- <el-table-column label="合格率" align="center" prop="rate">-->
<!-- <template slot-scope="scope">-->
<!-- {{scope.row.rate}}%-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template v-slot="{ row: { courseId ,courseName}}">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="courseDetail(courseId,courseName)"
>查看详情</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getTestList"
/>
<!--考试详情 -->
<el-dialog :title="'考试详情：'+courseName" :visible.sync="testStatDetailOpen" append-to-body :close-on-click-modal="false">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
:loading="exportLoading"
@click="handleExport"
style="position: relative;left: 16px;top: -17px;"
>导出</el-button>
<el-table v-loading="loading" :data="testStatDetailData">
<el-table-column label="序号" width='100' align="center" prop="detailNum"/>
<el-table-column label="考试人员" align="center" prop="staffName"/>
<el-table-column label="所属部门" align="center" prop="deptName">
<span slot-scope="scope" v-if="scope.row.deptName">{{scope.row.deptName}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="考试时间" align="center" prop="examinationTime">
<span slot-scope="scope" v-if="scope.row.examinationTime">{{scope.row.examinationTime}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="得分" align="center" prop="examinationResult">
<span slot-scope="scope" v-if="scope.row.examinationResult">{{scope.row.examinationResult}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="考试结果" align="center" prop="state">
<template slot-scope="scope">
<span v-if="scope.row.state == 0">未考试</span>
<span v-if="scope.row.state == 1">不合格</span>
<span v-if="scope.row.state == 2">合格</span>
</template>
</el-table-column>
</el-table>
<pagination
v-show="totalDetail > 0"
:total="totalDetail"
:page.sync="queryDetailParams.pageNum"
:limit.sync="queryDetailParams.pageSize"
@pagination="getTestStatDetails"
/>
</el-dialog>
</div>
</template>
<script>
import {statisticsTrainCourse,testPersonDetailByCourseId,exportDeviceInfo} from "@/api/educationPlanExam/lessonsProgram.js";
export default {
name: "testStat",
data(){
return{
// 遮罩层
loading: false,
// 总条数
total: 0,
releaseTime: "",
courseName:"",
queryParams:{
pageNum: 1,
pageSize: 10,
courseName: "",
dataKind: "",
releaseTimeBegin: "",
releaseTimeEnd: ""
},
// 导出遮罩层
exportLoading: false,
testStatData:[],
testStatDetailOpen: false,
testStatDetailData: [],
totalDetail: 0,
queryDetailParams:{
pageNum: 1,
pageSize: 10,
courseId: 0
}
}
},
created(){
this.getTestList();
},
methods: {
/** 导出按钮操作 */
handleExport() {
this.$confirm('是否确认导出所有考试详细数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.exportLoading = true;
return exportDeviceInfo(this.queryDetailParams);
}).then(response => {
this.download(response.msg);
this.exportLoading = false;
}).catch(() => {});
},
getTestList(){
console.log("this.queryParams:",this.queryParams)
statisticsTrainCourse(this.queryParams).then(res=>{
this.testStatData = res.rows.map((item, index) => {
return {
courseNum:
index +
1 +
(this.queryParams.pageNum - 1) * this.queryParams.pageSize,
...item,
};
});
this.total = res.total;
}) .finally(() => {
this.loading = false;
});
},
dateFormat(picker){
this.queryParams.releaseTimeBegin = picker[0];
this.queryParams.releaseTimeEnd = picker[1];
},
search(){
this.getTestList();
},
resetClick(){
this.releaseTime = "";
this.queryParams={
pageNum: 1,
pageSize: 10,
courseName: "",
dataKind: "",
releaseTimeBegin: "",
releaseTimeEnd: ""
};
this.getTestList();
},
courseDetail(courseId,courseName){
this.testStatDetailOpen = true;
this.courseName=courseName;
this.queryDetailParams.courseId=courseId;
this.getTestStatDetails();
},
getTestStatDetails(){
//this.queryDetailParams.courseId = courseId;
testPersonDetailByCourseId(this.queryDetailParams).then(res =>{
this.testStatDetailData = res.rows.map((item, index) => {
return {
detailNum:
index +
1 +
(this.queryParams.pageNum - 1) * this.queryParams.pageSize,
...item,
};
});
this.totalDetail = res.total;
}) .finally(() => {
this.loading = false;
});
}
}
}
</script>
<style scoped lang="scss">
.testStat{
margin: 10px;
}
</style>