成绩统计 代码调整
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-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-button size="small" type="primary" @click="goToFilter">查找</el-button>
|
||||||
</el-row>
|
</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 prop="name" label="试卷名称" />
|
||||||
<el-table-column v-if="isGzbShow" prop="classNames" label="所属班级">
|
<el-table-column v-if="isGzbShow" prop="classNames" label="所属班级">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
|
|||||||
@ -15,7 +15,7 @@
|
|||||||
:clearable="false"
|
:clearable="false"
|
||||||
:placeholder="$t('global.choose')"
|
:placeholder="$t('global.choose')"
|
||||||
filterable
|
filterable
|
||||||
@change="selectChange(field, formModel)"
|
@change="onChange"
|
||||||
>
|
>
|
||||||
<el-option
|
<el-option
|
||||||
v-for="option in classList"
|
v-for="option in classList"
|
||||||
@ -27,28 +27,75 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="statisticChart">
|
||||||
|
<div id="mychart1" class="statisticChartLeft" />
|
||||||
|
<div id="mychart2" class="statisticChartRight" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
import { getClassGradeStatistic } from '@/api/management/userexam';
|
import { getClassGradeStatistic } from '@/api/management/userexam';
|
||||||
import { getClassListUnPage } from '@/api/company';
|
import { getClassListUnPage } from '@/api/company';
|
||||||
|
import { getExamLessonDetail } from '@/api/management/exam';
|
||||||
import localStore from 'storejs';
|
import localStore from 'storejs';
|
||||||
export default {
|
export default {
|
||||||
name: 'GradeStatistics',
|
name: 'GradeStatistics',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// orgId: {
|
|
||||||
// type: 'select',
|
|
||||||
// noClearable: true,
|
|
||||||
// label: '班级:',
|
|
||||||
// config: {
|
|
||||||
// data: []
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
orgId:'',
|
orgId:'',
|
||||||
|
myChart1:null,
|
||||||
userNameList:[],
|
userNameList:[],
|
||||||
gradeList:[],
|
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() {
|
async created() {
|
||||||
@ -58,21 +105,143 @@ export default {
|
|||||||
});
|
});
|
||||||
localStore.set(this.$route.path, { orgId: this.classList[0].value + '' });
|
localStore.set(this.$route.path, { orgId: this.classList[0].value + '' });
|
||||||
this.orgId = this.classList[0].value;
|
this.orgId = this.classList[0].value;
|
||||||
},
|
const res = await getExamLessonDetail(this.$route.query.examId);
|
||||||
async mounted() {
|
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();
|
this.getClassGradeStatis();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
back() {
|
back() {
|
||||||
this.$router.go(-1);
|
this.$router.go(-1);
|
||||||
},
|
},
|
||||||
async getClassGradeStatis() {
|
getClassGradeStatis() {
|
||||||
const resp = await getClassGradeStatistic(this.orgId, this.$route.query.examId);
|
if (this.orgId) {
|
||||||
debugger;
|
this.userNameList = [];
|
||||||
const results = resp.results;
|
this.gradeList = [];
|
||||||
debugger;
|
// this.myChart1.restore();
|
||||||
if (results) { debugger; }
|
getClassGradeStatistic(this.orgId, this.$route.query.examId).then(resp=>{
|
||||||
// .forEach()
|
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;
|
margin: 0 auto;
|
||||||
width: 300px;
|
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>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user