feat: 试题统计

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

@@ -19,48 +19,33 @@
             </el-table>
           </el-tab-pane>
           <el-tab-pane label="蓝图分布" name="blue">
-            <div>
-              <!-- <el-form v-if="curType === 'blue'">
-                <el-form-item label="可选属性">
-                  <el-select v-model="curProperty" @change="propertyChange">
-                    <el-option
-                      v-for="item in blueDataList"
-                      :key="item.name"
-                      :value="item.name"
-                      :label="item.name"
-                    ></el-option>
-                  </el-select>
-                </el-form-item>
-              </el-form> -->
-              <el-table
-                v-if="curType === 'blue'"
-                key="blue"
-                :data="curBlueDataList"
-                :span-method="spanMethod"
+            <el-table
+              v-if="curType === 'blue'"
+              key="blue"
+              :data="blueData"
+              :span-method="objectSpanMethod"
+            >
+              <el-table-column label="蓝图属性" width="520" fixed="left">
+                <el-table-column
+                  label="一级属性"
+                  prop="firstProperty"
+                ></el-table-column>
+                <el-table-column
+                  label="二级属性"
+                  prop="secondProperty"
+                ></el-table-column>
+              </el-table-column>
+              <el-table-column
+                v-for="(colval, colIndex) in questionTypeList"
+                :key="`${colval}${colIndex}`"
+                :prop="colval"
+                :label="colval"
               >
-                <el-table-column label="蓝图属性" width="520" fixed="left">
-                  <el-table-column
-                    label="一级属性"
-                    :width="propertyColWidth"
-                    prop="firstPropertyName"
-                  ></el-table-column>
-                  <el-table-column
-                    label="二级属性"
-                    :width="propertyColWidth"
-                    prop="secondPropertyName"
-                  ></el-table-column>
-                </el-table-column>
-                <el-table-column label="题型">
-                  <el-table-column
-                    v-for="item in blueQtypes"
-                    :key="item"
-                    :label="item"
-                    :prop="item"
-                    min-width="220"
-                  ></el-table-column>
-                </el-table-column>
-              </el-table>
-            </div>
+                <template slot-scope="scope">
+                  <span>{{ scope.row[colval] || "--" }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
           </el-tab-pane>
         </el-tabs>
       </div>
@@ -75,11 +60,6 @@ import {
 } from "../../api";
 export default {
   name: "QuestionTypeStatistics",
-  computed: {
-    propertyColWidth() {
-      return this.blueQtypes.length ? 260 : undefined;
-    },
-  },
   data() {
     return {
       courseId: "",
@@ -99,10 +79,9 @@ export default {
       ],
       curType: "base",
       baseDataList: [],
-      blueDataList: [],
-      blueQtypes: [],
-      curProperty: "",
-      curBlueDataList: [],
+      blueData: [],
+      questionTypeList: [],
+      rowspans: [],
     };
   },
   created() {
@@ -124,14 +103,6 @@ export default {
     //   this.curType = item.code;
     //   this.getData();
     // },
-    spanMethod({ row, columnIndex }) {
-      if (columnIndex === 0) {
-        return {
-          rowspan: row.rowspan || 0,
-          colspan: 1,
-        };
-      }
-    },
     getData() {
       if (this.curType === "base") {
         this.getBaseData();
@@ -161,49 +132,95 @@ export default {
     async getBlueData() {
       const res = await questionPropertyDistributionStatisticsApi(this.filter);
 
-      this.blueDataList = res.data.map((mainGroup) => {
-        let dataList = [];
-        let blueQtypes = [];
-        mainGroup.distributeInfo.forEach((item) => {
-          if (!item.children || !item.children.length) return;
-          const rowspan = item.children.length;
-          item.children.forEach((elem, index) => {
-            let nelem = {
-              firstPropertyName: item.propertyName,
-              secondPropertyName: elem.propertyName,
+      const datas = res.data[0].distributeInfo || [];
+
+      const tableData = [];
+      let questionTypeList = [];
+      const rowspans = [];
+      let curRowIndex = 0;
+      datas.forEach((item) => {
+        const rowCount =
+          item.children && item.children.length ? item.children.length : 1;
+        rowspans.push([curRowIndex, curRowIndex + rowCount - 1]);
+        curRowIndex += rowCount;
+
+        if (item.children && item.children.length) {
+          item.children.forEach((elem) => {
+            const row = {
+              id: `${item.propertyId}_${elem.propertyId}`,
+              firstProperty: item.propertyName,
+              secondProperty: elem.propertyName,
             };
-            if (index === 0) nelem.rowspan = rowspan;
 
-            elem.distributeByQuestionTypeList.forEach((qt) => {
-              nelem[qt.sourceDetailName] = this.getQuesDiffContent(qt);
-            });
-            if (!blueQtypes.length) {
-              blueQtypes = elem.distributeByQuestionTypeList.map(
-                (qt) => qt.sourceDetailName
-              );
+            if (
+              elem.distributeByQuestionTypeList &&
+              elem.distributeByQuestionTypeList.length
+            ) {
+              elem.distributeByQuestionTypeList.forEach((source) => {
+                row[source.sourceDetailName] = source.questionDifficultInfo
+                  .map(
+                    (item) => `${item.difficultLevel}：${item.questionCount}`
+                  )
+                  .join("，");
+              });
+
+              if (!questionTypeList.length) {
+                questionTypeList = elem.distributeByQuestionTypeList.map(
+                  (source) => source.sourceDetailName
+                );
+              }
             }
 
-            dataList.push(nelem);
+            tableData.push(row);
           });
-        });
-        return {
-          name: mainGroup.coursePropertyName,
-          dataList,
-          blueQtypes,
+          return;
+        }
+
+        const row = {
+          id: `${item.propertyId}`,
+          firstProperty: item.propertyName,
+          secondProperty: "",
         };
+
+        if (
+          item.distributeByQuestionTypeList &&
+          item.distributeByQuestionTypeList.length
+        ) {
+          item.distributeByQuestionTypeList.forEach((source) => {
+            row[source.sourceDetailName] = source.questionDifficultInfo
+              .map((item) => `${item.difficultLevel}：${item.questionCount}`)
+              .join("，");
+          });
+
+          if (!questionTypeList.length) {
+            questionTypeList = item.distributeByQuestionTypeList.map(
+              (source) => source.sourceDetailName
+            );
+          }
+        }
+        tableData.push(row);
       });
-      if (!this.blueDataList.length) return;
-      this.curProperty = this.blueDataList[0].name;
-      this.curBlueDataList = this.blueDataList[0].dataList;
-      this.blueQtypes = this.blueDataList[0].blueQtypes;
+
+      this.questionTypeList = questionTypeList;
+      this.blueData = tableData;
+      this.rowspans = rowspans;
     },
-    propertyChange() {
-      const data = this.blueDataList.find(
-        (item) => item.name === this.curProperty
-      );
-      if (!data) return;
-      this.curBlueDataList = data.dataList;
-      this.blueQtypes = data.blueQtypes;
+    objectSpanMethod({ rowIndex, columnIndex }) {
+      if (columnIndex === 0) {
+        for (let span of this.rowspans) {
+          if (span[0] == rowIndex) {
+            return {
+              rowspan: span[1] - span[0] + 1,
+              colspan: 1,
+            };
+          } else if (span[0] < rowIndex && span[1] >= rowIndex) {
+            return {
+              rowspan: 0,
+              colspan: 0,
+            };
+          }
+        }
+      }
     },
   },
 };