|
|
|
|
@ -23,11 +23,11 @@ |
|
|
|
|
</div> |
|
|
|
|
<div class="item"> |
|
|
|
|
<p class="name">实验最高分</p> |
|
|
|
|
<p class="val">{{ peopleNum }}</p> |
|
|
|
|
<p class="val">{{ maxScore }}</p> |
|
|
|
|
</div> |
|
|
|
|
<div class="item"> |
|
|
|
|
<p class="name">实验最低分</p> |
|
|
|
|
<p class="val">{{ avgScore }}</p> |
|
|
|
|
<p class="val">{{ minScore }}</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="chart" id="chart"></div> |
|
|
|
|
@ -35,7 +35,18 @@ |
|
|
|
|
</el-card> |
|
|
|
|
|
|
|
|
|
<el-card shadow="hover" class="m-b-20"> |
|
|
|
|
<h6>错误率分析</h6> |
|
|
|
|
<h6 style="font-size: 16px">错误率分析</h6> |
|
|
|
|
<div class="wrong"> |
|
|
|
|
<div class="line"> |
|
|
|
|
<span class="jud-name">错误率最高：{{ max.judgmentName }}</span> |
|
|
|
|
<span>参加考试{{ max.peopleNum }}人 ｜ 共{{ max.errorTotal }}人做错，错误率{{ max.errorRate }}%</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="line"> |
|
|
|
|
<span class="jud-name">错误率最低：{{ min.judgmentName }}</span> |
|
|
|
|
<span>参加考试{{ min.peopleNum }}人 ｜ 共{{ min.errorTotal }}人做错，错误率{{ min.errorRate }}%</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="chart" id="chart1"></div> |
|
|
|
|
</el-card> |
|
|
|
|
|
|
|
|
|
<el-card shadow="hover" class="m-b-20"> |
|
|
|
|
@ -117,6 +128,11 @@ export default { |
|
|
|
|
total: 0, |
|
|
|
|
peopleNum: 0, // 总人数 |
|
|
|
|
avgScore: 0, // 平均分 |
|
|
|
|
maxScore: 0, |
|
|
|
|
minScore: 0, |
|
|
|
|
errorAnalysis: {}, |
|
|
|
|
max: {}, |
|
|
|
|
min: {}, |
|
|
|
|
token: util.local.get(Setting.tokenKey), |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
@ -154,28 +170,23 @@ export default { |
|
|
|
|
}).catch(err => {}) |
|
|
|
|
}, |
|
|
|
|
// 获取表格数据 |
|
|
|
|
getData() { |
|
|
|
|
// 考核 |
|
|
|
|
if (this.permissions) { |
|
|
|
|
this.$post(`${this.api.getAssessmentDetail}?pageNum=${this.page}&pageSize=10000&assessmentId=${this.id}&classId=${this.classId}&keyword=${this.keyword}`).then(res => { |
|
|
|
|
this.listDataAll = res.page.records |
|
|
|
|
this.total = res.page.total |
|
|
|
|
this.avgScore = (+res.avgScore).toFixed(2) |
|
|
|
|
this.peopleNum = res.peopleNum |
|
|
|
|
this.handlePage() |
|
|
|
|
this.getChart() |
|
|
|
|
}).catch(err => {}) |
|
|
|
|
} else { |
|
|
|
|
// 练习 |
|
|
|
|
this.$post(`${this.api.getPracticeDetail}?pageNum=${this.page}&pageSize=10000&projectId=${this.id}&keyword=${this.keyword}`).then(res => { |
|
|
|
|
async getData() { |
|
|
|
|
// 考核和练习调不同接口 |
|
|
|
|
const res = this.permissions ? |
|
|
|
|
await this.$post(`${this.api.getAssessmentDetail}?pageNum=${this.page}&pageSize=10000&assessmentId=${this.id}&classId=${this.classId}&keyword=${this.keyword}`) : |
|
|
|
|
await this.$post(`${this.api.getPracticeDetail}?pageNum=${this.page}&pageSize=10000&projectId=${this.id}&keyword=${this.keyword}`) |
|
|
|
|
this.listDataAll = res.page.records |
|
|
|
|
this.total = res.page.total |
|
|
|
|
this.avgScore = (+res.avgScore).toFixed(2) |
|
|
|
|
this.peopleNum = res.peopleNum |
|
|
|
|
this.maxScore = res.maxScore |
|
|
|
|
this.minScore = res.minScore |
|
|
|
|
this.errorAnalysis = res.errorAnalysis |
|
|
|
|
this.max = res.highestErrorRate |
|
|
|
|
this.min = res.minimumErrorRate |
|
|
|
|
this.handlePage() |
|
|
|
|
this.getChart() |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
} |
|
|
|
|
this.errorChart() |
|
|
|
|
}, |
|
|
|
|
initData() { |
|
|
|
|
this.$refs.table.clearSelection(); |
|
|
|
|
@ -303,6 +314,101 @@ export default { |
|
|
|
|
color: ["#8191fd"] |
|
|
|
|
}] |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
// 错误率统计图 |
|
|
|
|
errorChart() { |
|
|
|
|
const data = this.errorAnalysis.scoringPointList |
|
|
|
|
const option = { |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis', |
|
|
|
|
}, |
|
|
|
|
grid: { |
|
|
|
|
left: '5%', |
|
|
|
|
right: '5%', |
|
|
|
|
top: '25%', |
|
|
|
|
bottom: '15%' |
|
|
|
|
}, |
|
|
|
|
dataZoom: [//滑动条 |
|
|
|
|
{ |
|
|
|
|
// xAxisIndex: 0,//这里是从X轴的0刻度开始 |
|
|
|
|
show: true,//是否显示滑动条，不影响使用 |
|
|
|
|
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 |
|
|
|
|
start: 0, // 从头开始。 |
|
|
|
|
end: 50, // 一次性展示6个。 |
|
|
|
|
xAxisIndex: [0], |
|
|
|
|
bottom: -10, |
|
|
|
|
// handleStyle: { |
|
|
|
|
// borderWidth: 0 |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
xAxis: [{ |
|
|
|
|
type: 'category', |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#57617B' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
interval: 0, |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#333', |
|
|
|
|
}, |
|
|
|
|
// rotate: 60 |
|
|
|
|
}, |
|
|
|
|
data: data.map(e => e.judgmentName) |
|
|
|
|
}], |
|
|
|
|
yAxis: [ |
|
|
|
|
{ |
|
|
|
|
type: 'value', |
|
|
|
|
name: '错误率', |
|
|
|
|
nameGap: 10, |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#333' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
margin: 10, |
|
|
|
|
textStyle: { |
|
|
|
|
fontSize: 12, |
|
|
|
|
color: '#333' |
|
|
|
|
}, |
|
|
|
|
formatter: '{value}%' |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
series: [{ |
|
|
|
|
name: '错误率', |
|
|
|
|
type: 'bar', |
|
|
|
|
barWidth: 25, |
|
|
|
|
axisLabel: { |
|
|
|
|
margin: 10, |
|
|
|
|
textStyle: { |
|
|
|
|
fontSize: 12, |
|
|
|
|
color: '#333' |
|
|
|
|
}, |
|
|
|
|
formatter: '{value}%' |
|
|
|
|
}, |
|
|
|
|
itemStyle: { |
|
|
|
|
normal: { |
|
|
|
|
barBorderRadius: [10, 10, 0, 0], |
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ |
|
|
|
|
offset: 0, |
|
|
|
|
color: "#009AFD" |
|
|
|
|
}, { |
|
|
|
|
offset: 0.8, |
|
|
|
|
color: "#33DAFF" |
|
|
|
|
}], false), |
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)', |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
data: data.map(e => e.errorRate) |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
echarts.init(document.querySelector(`#chart1`)).setOption(option) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
@ -328,6 +434,9 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.chart { |
|
|
|
|
height: 300px; |
|
|
|
|
} |
|
|
|
|
.stat { |
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
|
|
@ -370,7 +479,18 @@ export default { |
|
|
|
|
|
|
|
|
|
.chart { |
|
|
|
|
flex: 1; |
|
|
|
|
height: 300px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.wrong { |
|
|
|
|
// padding-left: 25%; |
|
|
|
|
.line { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
.jud-name { |
|
|
|
|
width: 400px; |
|
|
|
|
margin-right: 100px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
