<template>
|
<div class="classManagePage-box">
|
<el-breadcrumb :separator-icon="ArrowRight">
|
<el-breadcrumb-item>我的班级</el-breadcrumb-item>
|
<el-breadcrumb-item>{{ classInfo?.name }}</el-breadcrumb-item>
|
<el-breadcrumb-item>作业分析</el-breadcrumb-item>
|
</el-breadcrumb>
|
<div class="classManagePage-content" v-loading="pageLoading">
|
<div class="staticBox">
|
<div class="pub_staticItem">
|
<img src="@/assets/images/class/zuoyecishu@2x.png" alt="" />
|
<div class="staticText">
|
<el-statistic title="作业次数" :value="outputValue" />
|
</div>
|
</div>
|
<!-- <div class="pub_staticItem">
|
<img src="@/assets/images/class/jinxing@2x.png" alt="" />
|
<div class="staticText">
|
<el-statistic title="进行中" :value="8" />
|
</div>
|
</div>
|
<div class="pub_staticItem">
|
<img src="@/assets/images/class/jieshu@2x.png" alt="" />
|
<div class="staticText">
|
<el-statistic title="已结束" :value="8" />
|
</div>
|
</div> -->
|
</div>
|
<div class="chartsBox">
|
<div id="chartsContent" v-show="charstData.length > 0"></div>
|
</div>
|
<div v-if="charstData.length == 0 && !pageLoading">
|
<el-empty />
|
</div>
|
<div class="listContent" v-if="tabHeader.length > 0">
|
<div class="tableTitle">班级成绩详情</div>
|
<div class="tableContent">
|
<el-table
|
v-loading="pages.loading"
|
:data="tableData"
|
border
|
style="width: 100%"
|
:cell-style="{ textAlign: 'center' }"
|
:header-cell-style="{ textAlign: 'center' }"
|
size="small"
|
>
|
<el-table-column prop="index" label="序号" width="70" />
|
<el-table-column label="姓名" #default="scope">
|
<span>{{ scope.row.appUser?.userInfo?.name }}</span>
|
</el-table-column>
|
<el-table-column label="学号" #default="scope">
|
<span>{{ scope.row.appUser?.appUserId }}</span>
|
</el-table-column>
|
<el-table-column label="班级作业得分" v-if="tabHeader.length > 0">
|
<el-table-column v-for="(item, index) in tabHeader" :key="index" :label="item">
|
<template #default="scope">
|
<span v-if="scope.row.results[index]?.result >= 0">
|
{{ scope.row.results[index]?.result }}
|
</span>
|
<span v-else> -- </span>
|
</template>
|
</el-table-column>
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
style="float: right"
|
v-model:current-page="pages.page"
|
:page-size="pages.pageSize"
|
layout="total, prev, pager, next"
|
:total="pages.count"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import * as echarts from 'echarts'
|
import { ArrowRight } from '@element-plus/icons-vue'
|
import { useRoute } from 'vue-router'
|
import { useTransition } from '@vueuse/core'
|
import { inject, onMounted, onUnmounted, reactive, ref } from 'vue'
|
const route: any = useRoute()
|
const MG: any = inject('MG')
|
const classInfo: any = JSON.parse(route.query.classInfo)
|
var chartDom = null
|
var myChart: any = {}
|
var option = null
|
|
const nameList: any = ref([])
|
const charstData: any = ref([])
|
const count = ref(0)
|
const pageLoading = ref(true)
|
const outputValue = useTransition(count, {
|
duration: 1000
|
})
|
const tabHeader: any = ref([])
|
const tableData: any = ref([])
|
|
let pages = reactive({
|
page: 1,
|
pageSize: 5,
|
count: 0,
|
loading: false
|
})
|
|
// 图表初始化
|
const initCharts = () => {
|
option = {
|
legend: {
|
bottom: 0
|
},
|
tooltip: {
|
trigger: 'axis',
|
showContent: true
|
},
|
toolbox: {
|
feature: {
|
saveAsImage: {},
|
magicType: {
|
type: ['bar']
|
},
|
restore: {}
|
}
|
},
|
title: {
|
text: '班级成绩概览',
|
textStyle: {
|
fontFamily: 'PingFang SC',
|
color: '#000000',
|
fontWeight: 'bold',
|
fontSize: '16px'
|
}
|
},
|
dataset: {
|
source: charstData.value
|
},
|
xAxis: { type: 'category' },
|
yAxis: { gridIndex: 0 },
|
grid: {
|
left: '3%',
|
right: '4%',
|
containLabel: true
|
},
|
series: [
|
{
|
type: 'line',
|
smooth: true,
|
seriesLayoutBy: 'row',
|
emphasis: { focus: 'series' }
|
},
|
{
|
type: 'line',
|
smooth: true,
|
seriesLayoutBy: 'row',
|
emphasis: { focus: 'series' }
|
},
|
{
|
type: 'line',
|
smooth: true,
|
seriesLayoutBy: 'row',
|
emphasis: { focus: 'series' }
|
}
|
]
|
}
|
option && myChart.setOption(option)
|
}
|
|
onMounted(() => {
|
getData()
|
getUserTaskList()
|
})
|
|
// 获取统计数据
|
const getData = () => {
|
const data = {
|
classId: classInfo?.id
|
}
|
MG.edu
|
.getTaskStatistics(data)
|
.then((res: any) => {
|
count.value = res.length
|
if (res.length > 0) {
|
let dataX = res.map((item: any) => item.task.name)
|
dataX.unshift('homeWork')
|
nameList.value = dataX
|
let avg = ['班级平均分']
|
let max = ['最高分']
|
let min = ['最低分']
|
res.forEach((item: any) => {
|
avg.push(item.avgScore)
|
max.push(item.maxScore)
|
min.push(item.minScore)
|
})
|
charstData.value = [dataX, avg, max, min]
|
} else {
|
charstData.value = []
|
nameList.value = []
|
}
|
setTimeout(() => {
|
pageLoading.value = false
|
chartDom = document.getElementById('chartsContent')
|
myChart = echarts.init(chartDom)
|
initCharts()
|
}, 1000)
|
})
|
.catch((err: any) => {
|
pageLoading.value = false
|
console.log(err)
|
})
|
}
|
|
// 获取班级作业成绩详情
|
const getUserTaskList = () => {
|
pages.loading = true
|
const data = {
|
start: (pages.page - 1) * pages.pageSize,
|
size: pages.pageSize,
|
classId: classInfo?.id
|
}
|
MG.edu
|
.getUserTaskList(data)
|
.then((res: any) => {
|
let headerList: any = []
|
pages.count = res.totalSize
|
if (res.datas.length > 0) {
|
res.datas.forEach((item: any, index: number) => {
|
item.index = index + 1
|
const hitem = item.results.map((citem: any) => citem.name)
|
headerList.push(...hitem)
|
})
|
tableData.value = res.datas
|
tabHeader.value = Array.from(new Set(headerList))
|
} else {
|
tableData.value = []
|
tabHeader.value = []
|
}
|
pages.loading = false
|
})
|
.catch((err: any) => {
|
pages.loading = false
|
console.log(err)
|
})
|
}
|
|
const handleSizeChange = (val: number) => {
|
pages.pageSize = val
|
getUserTaskList()
|
}
|
|
const handleCurrentChange = (val: number) => {
|
pages.page = val
|
getUserTaskList()
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.classManagePage-box {
|
width: 100%;
|
padding: 20px;
|
.classManagePage-nav {
|
padding-bottom: 20px;
|
border-bottom: 1px solid #e6e8ed;
|
}
|
.classManagePage-content {
|
width: 100%;
|
padding: 30px 0;
|
|
.staticBox {
|
width: 100%;
|
height: 60px;
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
margin-bottom: 40px;
|
|
.pub_staticItem {
|
display: flex;
|
|
img {
|
width: 60px;
|
height: 60px;
|
background: #ebf4ff;
|
border-radius: 8px 8px 8px 8px;
|
margin-right: 15px;
|
}
|
.staticText {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
|
span:nth-child(1) {
|
font-family: PingFang SC;
|
font-weight: bold;
|
font-size: 14px;
|
color: #a5a7ab;
|
}
|
|
span:nth-child(2) {
|
font-family: DIN;
|
font-weight: 500;
|
font-size: 20px;
|
color: #000000;
|
}
|
}
|
}
|
}
|
|
.chartsBox {
|
margin-bottom: 40px;
|
#chartsContent {
|
height: 600px;
|
}
|
}
|
|
.listContent {
|
width: 100%;
|
.tableTitle {
|
font-family: PingFang SC;
|
font-weight: bold;
|
font-size: 16px;
|
color: #000000;
|
margin-bottom: 22px;
|
}
|
}
|
}
|
}
|
</style>
|
