后端提供的数据如下
{
"topicType": "D",
"topicId": 1608,
"fullMarks": 4,
"topicNumber": "8-8",
"classDifficulty": 0.92,
"gradeDifficulty": 0.69,
"classDistinction": 0.24,
"gradeDistinction": 0.01,
"classAvgScore": 3.67,
"gradeAvgScore": 2.77,
"classStandardDeviation": 1.12,
"gradeStandardDeviation": 1.85,
"correctCount": 33,
"correctOptions": "D",
"optionCount": "D:33",
"wrongAnswerVOList": [
{
"options": "B",
"count": 2,
"optionCount": "B:2",
"gradeCount": 48,
"gradeWrongAnswerRate": 0.21,
"classWrongAnswerRate": 0.06
},
{
"options": "C",
"count": 1,
"optionCount": "C:1",
"gradeCount": 22,
"gradeWrongAnswerRate": 0.1,
"classWrongAnswerRate": 0.03
}
]
},
前端是使用vue3+ts+element-plus.如何通过el-table将这些数据展示出来，效果如下图
目前我做出来的效果如下图
代码如下
<template>
<div>
<div style="margin: 10px 0">
<el-select v-model="pageParam.projectId"
@change="getAllSubject"
clearable filterable placeholder="请选择项目"
style="margin-left: 10px;width: 200px;margin-right: 10px">
<el-option
v-for="item in allData.projectList"
:key="item.id"
:label="item.projectName"
:value="item.id">
</el-option>
</el-select>
<el-select v-model="pageParam.classTypeId" clearable filterable placeholder="请选择"
@change="getAllClass"
style="margin-left: 10px;width: 100px;margin-right: 10px" v-if="userInfo.haveTeachingClass">
<el-option
v-for="item in allData.classType"
:key="item.id"
:label="item.value"
:value="item.id">
</el-option>
</el-select>
<el-select v-model="pageParam.departmentId"
clearable filterable placeholder="请选择班级"
style="margin-left: 10px;width: 180px;margin-right: 10px">
<el-option
v-for="item in allData.classList"
:key="item.id"
:label="item.departmentName"
:value="item.id">
</el-option>
</el-select>
<el-select v-model="pageParam.subjectId" clearable filterable placeholder="请选择科目"
style="margin-left: 10px;width: 180px;margin-right: 10px">
<el-option
v-for="item in allData.subjectList"
:key="item.id"
:label="item.subjectName"
:value="item.id">
</el-option>
</el-select>
<el-button class="ml-5" type="primary" @click="toSearch">搜索</el-button>
</div>
<div class="top-back">
<div style="color: #b1b1b1;font-size: 15px">本试卷共{{allData.firstInfo.topicNumber}}道题，
<span v-if="allData.firstInfo.subjectiveQuestionsNumber>0">主观题{{allData.firstInfo.subjectiveQuestionsNumber}}道，分值占比{{allData.firstInfo.subjectiveQuestionsScoreRate}}%，</span>
<span v-if="allData.firstInfo.objectiveQuestionsNumber>0">客观题{{allData.firstInfo.objectiveQuestionsNumber}}道，分值占比{{allData.firstInfo.objectiveQuestionsScoreRate}}%</span>
学科总分{{ allData.firstInfo.totalScore }}。</div>
<div class="top-item">
<div class="item-number">{{ allData.midInfo.difficulty}}</div>
<div>难度</div>
</div>
<div class="top-item">
<div class="item-number">{{ allData.midInfo.difficultyRate}}</div>
<div>难度比例（难:中:易）</div>
</div>
<div class="top-item">
<div class="item-number">{{ allData.midInfo.distinction }}</div>
<div>区分度</div>
</div>
</div>
<div>
<div class="table-title-info">客观题分析</div>
<div class="table-container">
<el-table :data="allData.objectiveQuestionsList"
:span-method="objectSpanMethod"
border stripe :header-cell-class-name="'headerBg'"
row-key="id" default-expand-all >
<el-table-column prop="topicNumber" label="题号" align="center"></el-table-column>
<el-table-column prop="fullMarks" label="满分" align="center"></el-table-column>
<el-table-column prop="fullMarks" label="难度" align="center">
<template v-slot="scope">
<el-table-column prop="classDifficulty" label="班级" align="center"></el-table-column>
<el-table-column prop="gradeDifficulty" label="年级" align="center"></el-table-column>
</template>
</el-table-column>
<el-table-column prop="fullMarks" label="区分度" align="center">
<template v-slot="scope">
<el-table-column prop="classDistinction" label="班级" align="center"></el-table-column>
<el-table-column prop="gradeDistinction" label="年级" align="center"></el-table-column>
</template>
</el-table-column>
<el-table-column prop="fullMarks" label="标准差" align="center">
<template v-slot="scope">
<el-table-column prop="classStandardDeviation" label="班级" align="center"></el-table-column>
<el-table-column prop="gradeStandardDeviation" label="年级" align="center"></el-table-column>
</template>
</el-table-column>
<el-table-column prop="fullMarks" label="平均分" align="center">
<template v-slot="scope">
<el-table-column prop="classAvgScore" label="班级" align="center"></el-table-column>
<el-table-column prop="gradeAvgScore" label="年级" align="center"></el-table-column>
</template>
</el-table-column>
<el-table-column prop="optionCount" label="答对人数" align="center">
</el-table-column>
<el-table-column prop="wrongAnswerVOList.optionCount" label="答错人数" align="center">
</el-table-column>
<el-table-column prop="fullMarks" label="错选率" align="center">
<template v-slot="scope">
<el-table-column prop="wrongAnswerVOList.classAvgScore" label="班级" align="center">
</el-table-column>
<el-table-column prop="wrongAnswerVOList.gradeAvgScore" label="年级" align="center">
</el-table-column>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div>
<div class="table-title-info">主观题分析</div>
</div>
</div>
</template>
<script setup lang="ts">
import {reactive, ref, watch} from "vue";
import {userLoginInfoStore} from "@/store/user.ts";
import {roleItemInfo} from "@/store/roleState.ts";
import {selectAllProject} from "@/api/project.ts";
import {selectSubjectByProductId} from "@/api/subject.ts";
import {selectTeachingClass} from "@/api/grade.ts";
import {selectMiddleInfo, selectTopicInfo, selectTopInfo} from "@/api/topicAnalysis.ts";
import {Delete, Edit, InfoFilled} from "@element-plus/icons-vue";
import type { TableColumnCtx } from 'element-plus'
const pageParam = reactive({
projectId: "",
classTypeId:1,
subjectId: "",
departmentId: "",
page:1,
pageSize:10
})
const allData = reactive({
classList: [],
projectList:[],
subjectList:[],
classType: [
{
id: 1,
value: "行政班"
}, {
id: 2,
value: "教学班"
}
],
roleId:'',
firstInfo:[],
midInfo:[],
objectiveQuestionsList:[],
subjectiveQuestions:[]
})
const userLoginFormInfo = userLoginInfoStore()
const userInfo = userLoginFormInfo.userInfo
//查询所有科目
const getAllSubject = () => {
let list = {
productId: pageParam.projectId
}
allData.subjectList = []
selectSubjectByProductId(list).then(function (res: any) {
if (res.code === 200) {
let dataList = res.data
for (let i = 0; i < dataList.length; i++) {
allData.subjectList.push(dataList[i])
}
}
})
}
//查询所有班级
const getAllClass = () => {
let list = {
roleId:allData.roleId,
classType:pageParam.classTypeId,
projectId:pageParam.projectId
}
selectTeachingClass(list).then(function (res: any) {
if (res.code === 200) {
let newData = res.data
for (let i = 0; i < newData.length; i++) {
if(newData[i].departmentName=='所有班级'){
continue;
}
allData.classList.push(newData[i])
}
pageParam.departmentId = allData.classList[0].id
}
})
}
const toSearch = () => {
getTopInfo()
getValue()
getTableInfo()
}
interface Topic {
topicType: string
topicId: number
fullMarks: number
topicNumber: string
classDifficulty: number
gradeDifficulty:number
classDistinction:number
gradeDistinction:number
classAvgScore:number
gradeAvgScore:number
classStandardDeviation:number
gradeStandardDeviation:number
correctCount:number
correctOptions:string
wrongAnswerVOList:WrongAnswerVOList[]
}
interface WrongAnswerVOList {
options:string
count:number
gradeCount:number
gradeWrongAnswerRate:number
classWrongAnswerRate:number
optionCount:string
}
interface SpanMethodProps {
row: Topic
column: TableColumnCtx<Topic>
rowIndex: number
columnIndex: number
}
const objectSpanMethod = ({
row,
column,
rowIndex,
columnIndex,
}: SpanMethodProps) => {
if (columnIndex>10){
return { rowspan: 1, colspan: 1 };
}
}
const getTableInfo = () => {
selectTopicInfo(pageParam).then(function (res:any) {
allData.objectiveQuestionsList = []
allData.subjectiveQuestions = []
let newData = res.data
for (let i = 0; i < newData.length; i++) {
if(newData[i].topicType=='1'){
allData.subjectiveQuestions.push(newData[i])
}
if (newData[i].topicType!='1'){
allData.objectiveQuestionsList.push(newData[i])
}
}
console.log(allData.objectiveQuestionsList)
})
}
const getValue = () => {
selectMiddleInfo(pageParam).then(function (res:any) {
allData.midInfo = res.data
})
}
const getTopInfo = () => {
selectTopInfo(pageParam).then(function (res: any) {
if (res.code === 200) {
allData.firstInfo = res.data
}
})
}
//获取所有项目
const getAllProjectItem = () => {
let list = {
roleId: allData.roleId
}
selectAllProject(list).then(function (res: any) {
if (res.code === 200) {
allData.projectList = res.data
pageParam.projectId = allData.projectList[0].id
getAllSubject()
getAllClass()
}
})
}
const roleInfo = roleItemInfo()
watch(() =>
roleInfo.currentRoleId,
(currentRoleId) => {
if (currentRoleId === null || currentRoleId === undefined || currentRoleId === "") {
return
}
allData.roleId = currentRoleId
//要执行的方法
getAllProjectItem()
}, {immediate: true, deep: true})
</script>
这个如何修改？
