feat: 试卷统计页面调整

src/assets/styles/pages.scss

@@ -1744,36 +1744,36 @@
   .el-table th.el-table__cell {
     background-color: #f5f7fa;
   }
-  .statistics {
-    width: 1200px;
-    margin: 0 auto;
-  }
-  .statistics-part {
-    margin-bottom: 30px;
-  }
-  .statistics-head {
-    margin-bottom: 15px;
-    > h2 {
-      font-size: 16px;
-      font-weight: 600;
-      line-height: 1;
-      margin: 0;
-      color: #333;
-    }
+}
+.statistics {
+  width: 1200px;
+  margin: 0 auto;
+}
+.statistics-part {
+  margin-bottom: 30px;
+}
+.statistics-head {
+  margin-bottom: 15px;
+  > h2 {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1;
+    margin: 0;
+    color: #333;
   }
+}
 
-  .stat-type {
-    &-body {
-      display: flex;
-      align-items: stretch;
-    }
+.stat-type {
+  &-body {
+    display: flex;
+    align-items: stretch;
+  }
 
-    &-table {
-      width: 600px;
-    }
-    &-chart {
-      width: 600px;
-      height: 200px;
-    }
+  &-table {
+    width: 600px;
+  }
+  &-chart {
+    width: 600px;
+    height: 200px;
   }
 }

src/modules/question/views/QuestionTypeStatistics/index.vue

@@ -6,25 +6,52 @@
         <el-button type="danger" plain @click="goBack">返回</el-button>
       </div>
 
-      <div class="part-box" style="flex: 1; overflow: auto">
-        <el-tabs v-model="curType" type="card">
-          <el-tab-pane label="基础构成" name="base">
-            <el-table v-if="curType === 'base'" key="base" :data="baseDataList">
-              <el-table-column label="题型" prop="sourceDetailName">
-              </el-table-column>
-              <el-table-column
-                label="试题数量"
-                prop="questionDifficultInfoCont"
-              ></el-table-column>
-            </el-table>
-          </el-tab-pane>
-          <el-tab-pane label="蓝图分布" name="blue">
-            <el-table
-              v-if="curType === 'blue'"
-              key="blue"
-              :data="blueData"
-              :span-method="objectSpanMethod"
-            >
+      <div class="statistics question-type-body">
+        <div class="statistics-part">
+          <div class="statistics-head">
+            <h2>按题型统计</h2>
+          </div>
+          <div class="statistics-body stat-type-body">
+            <div class="stat-type-table">
+              <el-table :data="paperQuestionData" border>
+                <el-table-column
+                  label="题型"
+                  prop="sourceDetailName"
+                  width="120"
+                >
+                </el-table-column>
+                <el-table-column label="试题数量">
+                  <template slot-scope="scope">
+                    <span>
+                      {{ scope.row.questionCount }} (
+                      {{
+                        scope.row.questionDifficultInfo
+                          .map(
+                            (item) =>
+                              `${item.difficultLevel}：${item.questionCount}`
+                          )
+                          .join("，")
+                      }})
+                    </span>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+            <div class="stat-type-chart">
+              <v-chart
+                v-if="paperQuestionChartOption"
+                :option="paperQuestionChartOption"
+              ></v-chart>
+            </div>
+          </div>
+        </div>
+
+        <div class="statistics-part">
+          <div class="statistics-head">
+            <h2>按知识点统计</h2>
+          </div>
+          <div class="statistics-body">
+            <el-table :data="blueData" border :span-method="objectSpanMethod">
               <el-table-column
                 label="一级知识点"
                 prop="firstProperty"
@@ -44,8 +71,8 @@
                 </template>
               </el-table-column>
             </el-table>
-          </el-tab-pane>
-        </el-tabs>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -65,18 +92,8 @@ export default {
       filter: {
         courseId: "",
       },
-      types: [
-        {
-          name: "基础构成",
-          code: "base",
-        },
-        {
-          name: "蓝图分布",
-          code: "blue",
-        },
-      ],
-      curType: "base",
-      baseDataList: [],
+      paperQuestionData: [],
+      paperQuestionChartOption: null,
       blueData: [],
       questionTypeList: [],
       rowspans: [],
@@ -88,44 +105,69 @@ export default {
     this.filter.courseId = this.$route.query.courseId;
     this.getData();
   },
-  watch: {
-    curType() {
-      this.getData();
-    },
-  },
   methods: {
     goBack() {
       this.$router.back();
     },
-    // toSwitch(item) {
-    //   this.curType = item.code;
-    //   this.getData();
-    // },
     getData() {
-      if (this.curType === "base") {
-        this.getBaseData();
-      } else {
-        this.getBlueData();
-      }
-    },
-    getQuesDiffContent({ questionCount, questionDifficultInfo }) {
-      if (!questionCount) return "--";
-      const qinfo = questionDifficultInfo
-        .map((item) => `${item.difficultLevel}：${item.questionCount}`)
-        .join("，");
-      return `${questionCount}（${qinfo}）`;
+      this.getBaseData();
+      this.getBlueData();
     },
     async getBaseData() {
       const res = await questionDistributionStatisticsApi(this.courseId);
-      // console.log(res.data);
-      // parse data
-      this.baseDataList = res.data.map((quesItem) => {
-        let nitem = {
-          sourceDetailName: quesItem.sourceDetailName,
-          questionDifficultInfoCont: this.getQuesDiffContent(quesItem),
+      this.paperQuestionData = res.data;
+      const qData = this.paperQuestionData.map((item) => {
+        return {
+          value: item.questionCount,
+          name: item.sourceDetailName,
         };
-        return nitem;
       });
+      this.paperQuestionChartOption = this.getChartOption(qData);
+    },
+    getChartOption(data) {
+      const option = {
+        color: [
+          "#265dff",
+          "#14c9c8",
+          "#f7ba1f",
+          "#722ed1",
+          "#5470c6",
+          "#91cc75",
+          "#fac858",
+          "#ee6666",
+          "#73c0de",
+          "#3ba272",
+          "#fc8452",
+          "#9a60b4",
+          "#ea7ccc",
+        ],
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          orient: "vertical",
+          left: "right",
+          itemHeight: 10,
+        },
+        series: [
+          {
+            name: "试题数量",
+            type: "pie",
+            radius: "90%",
+            data,
+            label: { show: false },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      };
+
+      return option;
     },
     async getBlueData() {
       const res = await questionPropertyDistributionStatisticsApi(this.filter);
@@ -235,6 +277,13 @@ export default {
   border-radius: 10px;
   background-color: #f2f3f5;
   z-index: 200;
+
+  .question-type-body {
+    padding-top: 20px;
+    width: 100%;
+    flex: 2;
+    overflow: auto;
+  }
   .page-content-main {
     height: 100%;
     display: flex;

src/modules/statistics/api.js

@@ -16,6 +16,17 @@ export const statisticsExportApi = (data) => {
   );
 };
 
+export const questionTeacherInfoApi = (courseId) => {
+  return $httpWithMsg.post(
+    `${QUESTION_API}/question/statistic/teacher_distribution`,
+    {},
+    {
+      params: {
+        courseId,
+      },
+    }
+  );
+};
 export const questionTypeInfoApi = (courseId) => {
   return $httpWithMsg.post(
     `${QUESTION_API}/question/statistic/distribution`,

src/modules/statistics/components/StatisticsQuestionDialog.vue

@@ -79,6 +79,41 @@
         </div>
       </div>
 
+      <div class="statistics-part">
+        <div class="statistics-head">
+          <h2>按命题老师统计</h2>
+        </div>
+        <div class="statistics-body stat-type-body">
+          <div class="stat-type-table">
+            <el-table :data="paperTeacherData" border>
+              <el-table-column label="命题老师" prop="name" width="120">
+              </el-table-column>
+              <el-table-column label="试题数量">
+                <template slot-scope="scope">
+                  <span>
+                    {{ scope.row.questionCount }} (
+                    {{
+                      scope.row.difficultTypeInfo
+                        .map(
+                          (item) =>
+                            `${item.difficultLevel}：${item.questionCount}`
+                        )
+                        .join("，")
+                    }})
+                  </span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="stat-type-chart">
+            <v-chart
+              v-if="paperTeacherChartOption"
+              :option="paperTeacherChartOption"
+            ></v-chart>
+          </div>
+        </div>
+      </div>
+
       <div class="statistics-part">
         <div class="statistics-head">
           <h2>按知识点统计</h2>
@@ -115,6 +150,7 @@ import {
   questionTypeInfoApi,
   questionDifficultInfoApi,
   courseBlueInfoApi,
+  questionTeacherInfoApi,
 } from "../api";
 
 export default {
@@ -132,6 +168,8 @@ export default {
       paperQuestionChartOption: null,
       paperDifficultData: [],
       paperDifficultChartOption: null,
+      paperTeacherData: [],
+      paperTeacherChartOption: null,
       blueData: [],
       questionTypeList: [],
       rowspans: [],
@@ -173,6 +211,16 @@ export default {
         };
       });
       this.paperDifficultChartOption = this.getChartOption(dData);
+
+      const tres = await questionTeacherInfoApi(this.courseId);
+      this.paperTeacherData = tres.data;
+      const tData = this.paperTeacherData.map((item) => {
+        return {
+          value: item.questionCount,
+          name: item.name,
+        };
+      });
+      this.paperTeacherChartOption = this.getChartOption(tData);
     },
     getChartOption(data) {
       const option = {