update：详情

src/components/data/QuestionList.vue

 <template>
   <div>
-    <div class="exam-detail" v-for="(data, index) in examData" :key="index">
+    <!-- <div class="exam-detail" v-for="(data, index) in examData" :key="index">
       <div class="title-type">{{ questionTypeText[data.question_type] }}</div>
       <template v-for="pItem in data.list">
         <question-list-item
           v-for="item in pItem"
-          :data="item"
+          :data="pItem[0]"
           :question="data"
           :key="item.id"
         ></question-list-item>
       </template>
+    </div> -->
+    <div class="exam-detail" v-if="examData.length">
+      <!-- <div class="title-type">{{ questionTypeText[examData[0].question_type] }}</div> -->
+      <question-list-item
+        :data="examData[0].list[0][0]"
+        :question="examData[0]"
+      ></question-list-item>
     </div>
   </div>
 </template>
@@ -29,7 +36,7 @@ export default {
   computed: {
   },
   mounted() {
-    console.log(this.examData, 'examData')
+    console.log(this.examData.length, 'examData')
   }
 }
 </script>

src/modules/teacher/data/exam/components/TopicDataInfo.vue

+<template>
+  <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="" />
+    </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>
+
+<script>
+export default {
+  props: {
+    dataInfo: { type: Object, default: () => ({}) }
+  }
+}
+</script>
+
+<style scoped>
+.box-card {
+  position: relative;
+}
+.bg {
+  width: 137px;
+  height: 132px;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
+.logo {
+  width: 16px;
+  height: 16px;
+  margin-left: 9px;
+}
+
+.title {
+  white-space: nowrap;
+  font-size: 16px;
+  color: #909090;
+  font-weight: 400;
+}
+.num {
+  font-size: 22px;
+  color: #333;
+}
+.fen {
+  font-size: 14px;
+  color: #333;
+  font-weight: 300;
+}
+</style>

src/modules/teacher/data/exam/index.js

@@ -7,7 +7,8 @@ const routes = [
       { path: '/teacher/data/exam/class', component: () => import('./views/ClassList.vue') },
       { path: '/teacher/data/exam/PersonalList', component: () => import('./views/PersonalList.vue') },
       { path: '/teacher/data/exam/classDetail', component: () => import('./views/ClassDetail.vue') },
-      { path: '/teacher/data/exam/examData', component: () => import('./views/ExamData.vue') }
+      { path: '/teacher/data/exam/examData', component: () => import('./views/ExamData.vue') },
+      { path: '/teacher/data/exam/examData/topicData', component: () => import('./views/TopicData.vue') }
     ]
   }
 ]

src/modules/teacher/data/exam/views/ClassDetail.vue

@@ -37,7 +37,7 @@ export default {
   },
   methods: {
     getTopic() {
-      api.getReviewDetails({ sheet_id: '6856557207467589632' }).then(response => {
+      api.getReviewDetails({ sheet_id: '6869950724323672064' }).then(response => {
         this.data = JSON.parse(response.data).sheet
         this.setExamData()
       })

src/modules/teacher/data/exam/views/TopicData.vue

+<template>
+  <div>
+    <question-list class="exam" :examData="examData" v-if="examData.length"></question-list>
+    <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>
+    </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'
+export default {
+  components: { QuestionList, TopicDataInfo },
+  data() {
+    return {
+      examData: []
+    }
+  },
+  computed: {
+    // 列表配置
+    tableOptions() {
+      return {
+        remote: {
+          httpRequest: api.getExamList,
+          params: {
+            type: 'examination',
+            course_id: '',
+            examination_id: ''
+          }
+        },
+        filters: [
+          // {
+          //   type: 'select',
+          //   prop: 'examination_id',
+          //   placeholder: '考试名称',
+          //   label: '考试名称',
+          //   options: this.conditionList.examination_list,
+          //   labelKey: 'paper_title',
+          //   valueKey: 'id',
+          //   filterable: true
+          // },
+          // {
+          //   type: 'select',
+          //   prop: 'course_id',
+          //   placeholder: '所属课程',
+          //   label: '所属课程',
+          //   options: this.conditionList.course_list,
+          //   labelKey: 'course_name',
+          //   valueKey: 'id',
+          //   filterable: true
+          // }
+        ],
+        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 }
+        ]
+      }
+    }
+  },
+  mounted() {
+    this.getTopic()
+  },
+  methods: {
+    getTopic() {
+      api.getReviewDetails({ sheet_id: '6869950724323672064' }).then(response => {
+        this.data = JSON.parse(response.data).sheet
+        this.setExamData()
+      })
+    },
+    setExamData() {
+      // { list: ...,  }
+      // {}.list[0][0] && userScoreData, userAnswerData
+      this.examData = this.data.questions.question_items.reduce((prev, cur) => {
+        const qParentId = cur.question_item_id
+        const list = cur.question_list.map(item => {
+          return item.map(cItem => {
+            const userScoreData = this.data.score_items[qParentId][cItem.id]
+            let userAnswerData = {}
+            if (this.data.answers[qParentId]) {
+              userAnswerData = this.data.answers[qParentId][cItem.id] || {}
+            }
+            return { ...cItem, userScoreData, userAnswerData }
+          })
+        })
+        prev.push({ ...cur, list })
+        return prev
+      }, [])
+      console.log(this.examData, '123')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>