update

src/components/data/QuestionListItem.vue

@@ -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

+<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

@@ -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

 <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>