joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

代码调整

Browse Source
This commit is contained in:
joylink_cuiweidong 2022-04-18 17:10:12 +08:00
parent 62e0f34ef6
commit 25c8ddd667
1 changed files with 104 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

229
src/views/organization/examManage/gradeStatistics.vue
View File

@ -29,7 +29,7 @@
</div> </div>
<div class="statisticChart"> <div class="statisticChart">
<div id="mychart1" class="statisticChartLeft" /> <div id="mychart1" class="statisticChartLeft" />
<div id="mychart2" class="statisticChartRight" /> <!-- <div id="mychart2" class="statisticChartRight" /> -->
</div> </div>
</div> </div>
</template> </template>
@ -45,11 +45,11 @@ export default {
return { return {
orgId:'', orgId:'',
myChart1:null, myChart1:null,
myChart2:null, // myChart2:null,
userNameList:[], // userNameList:[],
gradeList:[], // gradeList:[],
classList:[], classList:[],
durationList:[], // durationList:[],
fullPoint:0, fullPoint:0,
passingPoint:0, passingPoint:0,
duration:0, duration:0,
@ -63,31 +63,31 @@ export default {
color:'#f00' color:'#f00'
} }
}, },
title1:{ // title1:{
show:true, // show:true,
text:' 答题时长区间人数 ', // text:' 答题时长区间人数 ',
// 各分数区间人数统计 // // 各分数区间人数统计
textAlign:'center', // textAlign:'center',
left:'50%', // left:'50%',
top:'5px', // top:'5px',
textStyle:{ // textStyle:{
color:'#f00' // color:'#f00'
} // }
}, // },
yAxis1:{ // yAxis1:{
position:'left', // position:'left',
name:'人数', // name:'人数',
nameLocation:'end', // nameLocation:'end',
minInterval:1, // minInterval:1,
nameTextStyle:{ // nameTextStyle:{
align:'left', // align:'left',
fontSize:14 // fontSize:14
}, // },
axisLine:{show:true} // axisLine:{show:true}
}, // },
yAxis:{ yAxis:{
position:'left', position:'left',
name:'分数', name:'人数',
nameLocation:'end', nameLocation:'end',
min:0, min:0,
nameTextStyle:{ nameTextStyle:{
@ -96,10 +96,10 @@ export default {
}, },
axisLine:{show:true} axisLine:{show:true}
}, },
durationInterval:[] gradeInterval:[]
}; };
}, },
async created() { async mounted() {
const resp = await getClassListUnPage(); const resp = await getClassListUnPage();
resp.data && resp.data.forEach(item => { resp.data && resp.data.forEach(item => {
this.classList.push({ value: item.id, label: item.name }); this.classList.push({ value: item.id, label: item.name });
@ -108,22 +108,35 @@ export default {
this.orgId = this.classList[0].value; this.orgId = this.classList[0].value;
const res = await getExamLessonDetail(this.$route.query.examId); const res = await getExamLessonDetail(this.$route.query.examId);
if (res.data) { if (res.data) {
this.yAxis.max = res.data.fullPoint; this.fullPoint = res.data.fullPoint;
this.passingPoint = res.data.passingPoint; this.passingPoint = res.data.passingPoint;
this.duration = res.data.duration; this.duration = res.data.duration;
} }
var chartDom1 = document.getElementById('mychart1'); var chartDom1 = document.getElementById('mychart1');
this.myChart1 = echarts.init(chartDom1); this.myChart1 = echarts.init(chartDom1);
var chartDom2 = document.getElementById('mychart2'); // var chartDom2 = document.getElementById('mychart2');
this.myChart2 = echarts.init(chartDom2); // this.myChart2 = echarts.init(chartDom2);
const eachInterval = this.duration / 6; const eachInterval = this.fullPoint / 10;
this.durationInterval = ['0-' + eachInterval, this.gradeInterval = [];
eachInterval + '-' + eachInterval * 2, for(i=0;i<10;i++){
eachInterval * 2 + '-' + eachInterval * 3, this.gradeInterval.push(eachInterval*i+'-'+eachInterval*(i+1));
eachInterval * 3 + '-' + eachInterval * 4, }
eachInterval * 4 + '-' + eachInterval * 5, const option = {
eachInterval * 5 + '-' + eachInterval * 6 title:this.title,
]; xAxis: {
type: 'category',
name:'分数区间',
data: this.gradeInterval
},
yAxis:this.yAxis,
series: [
{
data:[],
type: 'line'
}
]
};
option && this.myChart1 && this.myChart1.setOption(option);
this.getClassGradeStatis(); this.getClassGradeStatis();
}, },
methods: { methods: {
@ -132,64 +145,45 @@ export default {
}, },
getClassGradeStatis() { getClassGradeStatis() {
if (this.orgId) { if (this.orgId) {
this.userNameList = []; // this.userNameList = [];
this.gradeList = []; // this.gradeList = [];
// this.myChart1.restore(); // this.myChart1.restore();
getClassGradeStatistic(this.orgId, this.$route.query.examId).then(resp=>{ getClassGradeStatistic(this.orgId, this.$route.query.examId).then(resp=>{
const results = resp.data; const results = resp.data;
if (results) { if (results) {
const gradeList = results.results; const gradeList = results.results;
const countList = [0, 0, 0, 0, 0]; const countList = [0,0,0,0,0,0,0,0,0,0];
if (gradeList.length > 0) { if (gradeList.length > 0) {
gradeList.forEach(each=>{ gradeList.forEach(each=>{
this.userNameList.push(each.username || ''); // this.userNameList.push(each.username || '');
this.gradeList.push(each.score); // this.gradeList.push(each.score);
this.durationList.push(each.duration || 0); // this.durationList.push(each.duration || 0);
countList[Math.floor((each.duration || 0) / (this.duration / 6))]++; countList[Math.floor((each.score || 0) / (this.fullPoint/ 10))]++;
}); });
const option = { let option=this.myChart1.getOption();
title:this.title, // debugger
xAxis: { option.series[0].data=countList;
type: 'category', // const option1 = {
axisLabel:{ // title1:this.title1,
show :false // xAxis: {
}, // name:'时长区间/s',
data:this.userNameList // type: 'category',
}, // data: this.durationInterval
tooltip:{ // },
show:true, // yAxis: this.yAxis1,
trigger:'item' // tooltip:{
}, // show:true,
yAxis: this.yAxis, // trigger:'axis'
series: [ // },
{ // series: [
symbolSize: 10, // {
data:this.gradeList, // data:countList,
type: 'scatter' // type: 'bar'
} // }
] // ]
}; // };
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); option && this.myChart1 && this.myChart1.setOption(option);
option1 && this.myChart2 && this.myChart2.setOption(option1); // option1 && this.myChart2 && this.myChart2.setOption(option1);
// debugger; // debugger;
// id": "92", // id": "92",
// "userId": "92", // "userId": "92",
@ -204,38 +198,22 @@ export default {
} }
} }
}).catch((error) => { }).catch((error) => {
const option = { // const option1 = {
title:this.title, // title:this.title1,
xAxis: { // xAxis: {
type: 'category', // name:'时长区间/s',
data:[] // type: 'category',
}, // data: this.durationInterval
yAxis:this.yAxis, // },
series: [ // yAxis:this.yAxis1,
{ // series: [
symbolSize: 20, // {
data:[], // data:[],
type: 'scatter' // type: 'bar'
} // }
] // ]
}; // };
const option1 = { // option1 && this.myChart2 && this.myChart2.setOption(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); this.$message.error(error.message);
}); });
@ -267,15 +245,16 @@ export default {
margin-left:5%; margin-left:5%;
} }
.statisticChartLeft{ .statisticChartLeft{
width: 50%; width: 100%;
display: inline-block; display: inline-block;
height: 700px; height: 500px;
/* margin-left:25%; */
/* border:1px #ccc solid */ /* border:1px #ccc solid */
} }
.statisticChartRight{ .statisticChartRight{
width: 50%; width: 50%;
display: inline-block; display: inline-block;
height: 700px; height: 500px;
/* border:1px #ccc solid */ /* border:1px #ccc solid */
} }
</style> </style>