|
@@ -6,25 +6,52 @@
|
|
<el-button type="danger" plain @click="goBack">返回</el-button>
|
|
<el-button type="danger" plain @click="goBack">返回</el-button>
|
|
</div>
|
|
</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
|
|
<el-table-column
|
|
label="一级知识点"
|
|
label="一级知识点"
|
|
prop="firstProperty"
|
|
prop="firstProperty"
|
|
@@ -44,8 +71,8 @@
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-table>
|
|
- </el-tab-pane>
|
|
|
|
- </el-tabs>
|
|
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -65,18 +92,8 @@ export default {
|
|
filter: {
|
|
filter: {
|
|
courseId: "",
|
|
courseId: "",
|
|
},
|
|
},
|
|
- types: [
|
|
|
|
- {
|
|
|
|
- name: "基础构成",
|
|
|
|
- code: "base",
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- name: "蓝图分布",
|
|
|
|
- code: "blue",
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
- curType: "base",
|
|
|
|
- baseDataList: [],
|
|
|
|
|
|
+ paperQuestionData: [],
|
|
|
|
+ paperQuestionChartOption: null,
|
|
blueData: [],
|
|
blueData: [],
|
|
questionTypeList: [],
|
|
questionTypeList: [],
|
|
rowspans: [],
|
|
rowspans: [],
|
|
@@ -88,44 +105,69 @@ export default {
|
|
this.filter.courseId = this.$route.query.courseId;
|
|
this.filter.courseId = this.$route.query.courseId;
|
|
this.getData();
|
|
this.getData();
|
|
},
|
|
},
|
|
- watch: {
|
|
|
|
- curType() {
|
|
|
|
- this.getData();
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
methods: {
|
|
methods: {
|
|
goBack() {
|
|
goBack() {
|
|
this.$router.back();
|
|
this.$router.back();
|
|
},
|
|
},
|
|
- // toSwitch(item) {
|
|
|
|
- // this.curType = item.code;
|
|
|
|
- // this.getData();
|
|
|
|
- // },
|
|
|
|
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() {
|
|
async getBaseData() {
|
|
const res = await questionDistributionStatisticsApi(this.courseId);
|
|
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() {
|
|
async getBlueData() {
|
|
const res = await questionPropertyDistributionStatisticsApi(this.filter);
|
|
const res = await questionPropertyDistributionStatisticsApi(this.filter);
|
|
@@ -235,6 +277,13 @@ export default {
|
|
border-radius: 10px;
|
|
border-radius: 10px;
|
|
background-color: #f2f3f5;
|
|
background-color: #f2f3f5;
|
|
z-index: 200;
|
|
z-index: 200;
|
|
|
|
+
|
|
|
|
+ .question-type-body {
|
|
|
|
+ padding-top: 20px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ flex: 2;
|
|
|
|
+ overflow: auto;
|
|
|
|
+ }
|
|
.page-content-main {
|
|
.page-content-main {
|
|
height: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
display: flex;
|