成绩统计 代码调整
This commit is contained in:
joylink_cuiweidong
parent
fd9cca025c
commit
aefa2c6fdd
@ -11,7 +11,7 @@
|
||||
<el-input v-model="inputName" size="small" style="width: 200px;margin-right: 50px;margin-left: 10px;" placeholder="请输入筛选的名称" @change="changeInput" />
|
||||
<el-button size="small" type="primary" @click="goToFilter">查找</el-button>
|
||||
</el-row>
|
||||
<el-table ref="filterTable" :data="filterTableData" border style="width: 100%" height="calc(100vh - 150px)">
|
||||
<el-table ref="filterTable" :data="filterTableData" border style="width: 100%" height="calc(100vh - 190px)">
|
||||
<el-table-column prop="name" label="试卷名称" />
|
||||
<el-table-column v-if="isGzbShow" prop="classNames" label="所属班级">
|
||||
<template slot-scope="scope">
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
:clearable="false"
|
||||
:placeholder="$t('global.choose')"
|
||||
filterable
|
||||
@change="selectChange(field, formModel)"
|
||||
@change="onChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in classList"
|
||||
@ -27,28 +27,75 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="statisticChart">
|
||||
<div id="mychart1" class="statisticChartLeft" />
|
||||
<div id="mychart2" class="statisticChartRight" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import { getClassGradeStatistic } from '@/api/management/userexam';
|
||||
import { getClassListUnPage } from '@/api/company';
|
||||
import { getExamLessonDetail } from '@/api/management/exam';
|
||||
import localStore from 'storejs';
|
||||
export default {
|
||||
name: 'GradeStatistics',
|
||||
data() {
|
||||
return {
|
||||
// orgId: {
|
||||
// type: 'select',
|
||||
// noClearable: true,
|
||||
// label: '班级:',
|
||||
// config: {
|
||||
// data: []
|
||||
// }
|
||||
// }
|
||||
orgId:'',
|
||||
myChart1:null,
|
||||
userNameList:[],
|
||||
gradeList:[],
|
||||
classList:[]
|
||||
classList:[],
|
||||
durationList:[],
|
||||
fullPoint:0,
|
||||
passingPoint:0,
|
||||
duration:0,
|
||||
title:{
|
||||
show:true,
|
||||
text:'成绩分布',
|
||||
textAlign:'center',
|
||||
left:'50%',
|
||||
top:'5px',
|
||||
textStyle:{
|
||||
color:'#f00'
|
||||
}
|
||||
},
|
||||
title1:{
|
||||
show:true,
|
||||
text:' 答题时长区间人数 ',
|
||||
// 各分数区间人数统计
|
||||
textAlign:'center',
|
||||
left:'50%',
|
||||
top:'5px',
|
||||
textStyle:{
|
||||
color:'#f00'
|
||||
}
|
||||
},
|
||||
yAxis1:{
|
||||
position:'left',
|
||||
name:'人数',
|
||||
nameLocation:'end',
|
||||
minInterval:1,
|
||||
nameTextStyle:{
|
||||
align:'left',
|
||||
fontSize:14
|
||||
},
|
||||
axisLine:{show:true}
|
||||
},
|
||||
yAxis:{
|
||||
position:'left',
|
||||
name:'分数',
|
||||
nameLocation:'end',
|
||||
min:0,
|
||||
nameTextStyle:{
|
||||
align:'left',
|
||||
fontSize:14
|
||||
},
|
||||
axisLine:{show:true}
|
||||
},
|
||||
durationInterval:[]
|
||||
};
|
||||
},
|
||||
async created() {
|
||||
@ -58,21 +105,143 @@ export default {
|
||||
});
|
||||
localStore.set(this.$route.path, { orgId: this.classList[0].value + '' });
|
||||
this.orgId = this.classList[0].value;
|
||||
},
|
||||
async mounted() {
|
||||
const res = await getExamLessonDetail(this.$route.query.examId);
|
||||
if (res.data) {
|
||||
this.yAxis.max = res.data.fullPoint;
|
||||
this.passingPoint = res.data.passingPoint;
|
||||
this.duration = res.data.duration;
|
||||
}
|
||||
var chartDom1 = document.getElementById('mychart1');
|
||||
this.myChart1 = echarts.init(chartDom1);
|
||||
var chartDom2 = document.getElementById('mychart2');
|
||||
this.myChart2 = echarts.init(chartDom2);
|
||||
const eachInterval = this.duration / 6;
|
||||
this.durationInterval = ['0-' + eachInterval,
|
||||
eachInterval + '-' + eachInterval * 2,
|
||||
eachInterval * 2 + '-' + eachInterval * 3,
|
||||
eachInterval * 3 + '-' + eachInterval * 4,
|
||||
eachInterval * 4 + '-' + eachInterval * 5,
|
||||
eachInterval * 5 + '-' + eachInterval * 6
|
||||
];
|
||||
this.getClassGradeStatis();
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
this.$router.go(-1);
|
||||
},
|
||||
async getClassGradeStatis() {
|
||||
const resp = await getClassGradeStatistic(this.orgId, this.$route.query.examId);
|
||||
debugger;
|
||||
const results = resp.results;
|
||||
debugger;
|
||||
if (results) { debugger; }
|
||||
// .forEach()
|
||||
getClassGradeStatis() {
|
||||
if (this.orgId) {
|
||||
this.userNameList = [];
|
||||
this.gradeList = [];
|
||||
// this.myChart1.restore();
|
||||
getClassGradeStatistic(this.orgId, this.$route.query.examId).then(resp=>{
|
||||
const results = resp.data;
|
||||
if (results) {
|
||||
const gradeList = results.results;
|
||||
const countList = [0, 0, 0, 0, 0];
|
||||
if (gradeList.length > 0) {
|
||||
gradeList.forEach(each=>{
|
||||
this.userNameList.push(each.username || '');
|
||||
this.gradeList.push(each.score);
|
||||
this.durationList.push(each.duration || 0);
|
||||
countList[Math.floor((each.duration || 0) / (this.duration / 6))]++;
|
||||
});
|
||||
const option = {
|
||||
title:this.title,
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLabel:{
|
||||
show :false
|
||||
},
|
||||
data:this.userNameList
|
||||
},
|
||||
tooltip:{
|
||||
show:true,
|
||||
trigger:'item'
|
||||
},
|
||||
yAxis: this.yAxis,
|
||||
series: [
|
||||
{
|
||||
symbolSize: 10,
|
||||
data:this.gradeList,
|
||||
type: 'scatter'
|
||||
}
|
||||
]
|
||||
};
|
||||
const option1 = {
|
||||
title1:this.title1,
|
||||
xAxis: {
|
||||
name:'时长区间/s',
|
||||
type: 'category',
|
||||
data: this.durationInterval
|
||||
},
|
||||
yAxis: this.yAxis1,
|
||||
tooltip:{
|
||||
show:true,
|
||||
trigger:'axis'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data:countList,
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
};
|
||||
option && this.myChart1 && this.myChart1.setOption(option);
|
||||
option1 && this.myChart2 && this.myChart2.setOption(option1);
|
||||
// debugger;
|
||||
// id": "92",
|
||||
// "userId": "92",
|
||||
// "account": "d8h4pz",
|
||||
// "username": "博涛.朱",
|
||||
// "examId": "92",
|
||||
// "examName": "博涛.朱",
|
||||
// "score": 29.38,
|
||||
// "usedTime": 727,
|
||||
// "result": "dbw206",
|
||||
// "duration": 429,
|
||||
}
|
||||
}
|
||||
}).catch((error) => {
|
||||
const option = {
|
||||
title:this.title,
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data:[]
|
||||
},
|
||||
yAxis:this.yAxis,
|
||||
series: [
|
||||
{
|
||||
symbolSize: 20,
|
||||
data:[],
|
||||
type: 'scatter'
|
||||
}
|
||||
]
|
||||
};
|
||||
const option1 = {
|
||||
title:this.title1,
|
||||
xAxis: {
|
||||
name:'时长区间/s',
|
||||
type: 'category',
|
||||
data: this.durationInterval
|
||||
},
|
||||
yAxis:this.yAxis1,
|
||||
series: [
|
||||
{
|
||||
data:[],
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
};
|
||||
option && this.myChart1 && this.myChart1.setOption(option);
|
||||
option1 && this.myChart2 && this.myChart2.setOption(option1);
|
||||
this.$message.error(error.message);
|
||||
});
|
||||
|
||||
}
|
||||
},
|
||||
onChange(data) {
|
||||
this.getClassGradeStatis();
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -89,4 +258,23 @@ export default {
|
||||
margin: 0 auto;
|
||||
width: 300px;
|
||||
}
|
||||
.statisticChart{
|
||||
/* margin-left: 50%; */
|
||||
/* transform: translateX(-50%); */
|
||||
width:90%;
|
||||
display: flex;
|
||||
margin-left:5%;
|
||||
}
|
||||
.statisticChartLeft{
|
||||
width: 50%;
|
||||
display: inline-block;
|
||||
height: 700px;
|
||||
/* border:1px #ccc solid */
|
||||
}
|
||||
.statisticChartRight{
|
||||
width: 50%;
|
||||
display: inline-block;
|
||||
height: 700px;
|
||||
/* border:1px #ccc solid */
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user