Skip to content

X
x-learn
提交 87792985 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

update

上级 d9b23d95
隐藏空白字符变更
内嵌 并排
正在显示 包含 134 行增加 和 46 行删除
src/components/data/QuestionListItem.vue
浏览文件 @ 87792985
......@@ -158,8 +158,9 @@ export default {
.question-list-item {
margin-bottom: 20px;
padding: 20px;
border-radius: 10px;
border-radius: 5px;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
background: #fff;
margin-top: 20px;
}
.question-list-item-hd {
......
src/modules/teacher/data/exam/components/TopicDataChart.vue 0 → 100644
浏览文件 @ 87792985
<template>
<el-card class="box-card" style="height: 300px">
<div slot="header" class="clearfix">
<div slot="header" style="display: flex; align-items: center">
<h1 style="font-size: 16px">选项分布</h1>
</div>
</div>
<div style="height: 230px; width: 90%; margin: 0 auto">
<div id="main" style="width: 100%; height: 90%"></div>
</div>
</el-card>
</template>
<script>
import * as echarts from 'echarts'
export default {
props: {
dataInfo: { type: Object, default: () => ({}) }
},
data() {
return {
option: {
tooltip: {
trigger: 'item',
formatter: function (params) {
const str = params.data.name + '&nbsp' + params.data.value + '人' + '&nbsp' + params.percent + '%'
return str
}
},
legend: {
bottom: '0%',
left: 'center'
},
series: [
{
type: 'pie',
radius: ['60%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: [
{ value: 0, name: '及格人数', itemStyle: { color: '#6C83CE' } },
{ value: 0, name: '不及格人数', itemStyle: { color: '#D96685' } }
]
}
]
}
}
},
mounted() {
this.initEchart()
},
methods: {
initEchart() {
const data = [
{ value: '10', name: '及格人数', itemStyle: { color: '#6C83CE' } },
{ value: '10', name: '不及格人数', itemStyle: { color: '#D96685' } }
]
this.option.series[0].data = data
const myChart = echarts.init(document.getElementById('main'))
myChart.setOption(this.option)
}
}
}
</script>
<style></style>
src/modules/teacher/data/exam/components/TopicDataInfo.vue
浏览文件 @ 87792985
......@@ -2,33 +2,29 @@
<el-card class="box-card">
<img class="bg" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/x-learning/data/bgc1.png" alt="" />
<div slot="header" style="display: flex; align-items: center">
<h1 style="font-size: 16px">
<span style="color: #c01540">*</span>考试信息
</h1>
<img class="logo" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/x-learning/data/exam.png" alt="" />
<h1 style="font-size: 16px">概述信息</h1>
<!-- <img class="logo" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/x-learning/data/exam.png" alt="" /> -->
</div>
<div class="location">
<el-row :gutter="20" class="row-bg" justify="space-around">
<el-col :span="8">
<div class="title">本题分数</div>
<div>
<span class="num">111</span>
</div>
</el-col>
<el-col :span="8">
<div class="title">平均得分</div>
<div>
<span class="num">111</span>
</div>
</el-col>
<el-col :span="8">
<div class="title">正确率</div>
<div><span class="num">111</span><span class="fen">%</span></div>
</el-col>
</el-row>
</div>
<el-row :gutter="20" class="row-bg" justify="space-around">
<el-col :span="8">
<div class="title">本题分数</div>
<div>
<span class="num">111</span
>
</div>
</el-col>
<el-col :span="8">
<div class="title">平均得分</div>
<div>
<span class="num">111</span>
</div>
</el-col>
<el-col :span="8">
<div class="title">正确率</div>
<div>
<span class="num">111</span
><span class="fen">%</span>
</div>
</el-col>
</el-row>
</el-card>
</template>
......@@ -44,6 +40,14 @@ export default {
.box-card {
position: relative;
}
.location{
width: 85%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: 30px;
}
.bg {
width: 137px;
height: 132px;
......
src/modules/teacher/data/exam/views/TopicData.vue
浏览文件 @ 87792985
<template>
<div>
<question-list class="exam" :examData="examData" v-if="examData.length"></question-list>
<div class="flex-box">
<topic-data-info class="flex"></topic-data-info>
<topic-data-chart class="flex"></topic-data-chart>
</div>
<el-card>
<app-list v-bind="tableOptions" ref="list">
<!-- 操作 -->
<template v-slot:table-operate="{ row }">
<el-button type="text" size="mini" @click="toExamData(row)" :disabled="row.join_num === 0">考试数据</el-button>
<el-button type="text" size="mini" @click="toClassData(row)" :disabled="row.join_num === 0">班级数据</el-button>
</template>
</app-list>
<div slot="header" style="display: flex; align-items: center">
<h1 style="font-size: 16px">概述信息</h1>
</div>
<app-list v-bind="tableOptions" ref="list"></app-list>
</el-card>
<topic-data-info></topic-data-info>
</div>
</template>
<script>
import * as api from '../api.js'
import QuestionList from '@/components/data/QuestionList.vue'
import TopicDataInfo from '../components/TopicDataInfo.vue'
import TopicDataChart from '../components/TopicDataChart.vue'
export default {
components: { QuestionList, TopicDataInfo },
components: { QuestionList, TopicDataInfo, TopicDataChart },
data() {
return {
examData: []
......@@ -59,16 +61,11 @@ export default {
// }
],
columns: [
{ label: '考试名称', prop: 'examination_name', align: 'center' },
{ label: '所属课程', prop: 'course_name', align: 'center' },
{ label: '参考人数', prop: 'join_num', align: 'center' },
{ label: '参考率', prop: 'join_rate', align: 'center' },
{ label: '平均得分', prop: 'average', align: 'center' },
{ label: '最高分', prop: 'max', align: 'center' },
{ label: '最低分', prop: 'min', align: 'center' },
{ label: '题目总数', prop: 'question_num', align: 'center' },
{ label: '及格率', prop: 'pass_rate', align: 'center' },
{ label: '操作', slots: 'table-operate', align: 'center', minWidth: 150 }
{ label: '学生ID', prop: 'examination_name', align: 'center' },
{ label: '学生姓名', prop: 'course_name', align: 'center' },
{ label: '所在班级', prop: 'join_num', align: 'center' },
{ label: '选择答案', prop: 'join_rate', align: 'center' },
{ label: '本题得分', prop: 'average', align: 'center' }
]
}
}
......@@ -107,4 +104,18 @@ export default {
}
</script>
<style lang="scss" scoped>
.flex-box{
margin: 20px 0;
display: flex;
.flex{
flex: 1;
&:nth-child(1){
margin-right: 10px;
min-height: 200px;
}
&:nth-child(2){
margin-left: 10px;
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论