知识点掌握

src/api/modules/study/index.ts

@@ -31,3 +31,23 @@ export const trainingCampPaperConfigGetPaperMarkInfoByPlanId = (
     params,
     {},
   )
+// 错题统计
+export const trainingCampQuestionTypeIpadGetWrongStatInfo = (
+  category,
+  subject,
+) =>
+  get(
+    `/trainingCamp/questionType/ipad/getWrongStatInfo/${category}/${subject}`,
+    {},
+    {},
+  )
+// 知识点掌握
+export const trainingCampQuestionTypeIpadGetKnowledgeMasteryStats = (
+  category,
+  subject,
+) =>
+  get(
+    `/trainingCamp/questionType/ipad/getKnowledgeMasteryStats/${category}/${subject}`,
+    {},
+    {},
+  )

src/stores/modules/dictionary.ts

@@ -4,6 +4,11 @@ import { systemDictDataType } from '@/api/modules/global'
 export const useDictionaryStore = defineStore('dictionary', {
   state: () => ({
     ...dictionary,
+    difficultyLevelList: [
+      { value: 1, label: 'A' },
+      { value: 2, label: 'S' },
+      { value: 3, label: 'T' },
+    ],
     difficultyLevelMap: new Map([
       [1, 'A'],
       [2, 'S'],

src/views/study/subject/chart-1.vue

@@ -14,11 +14,13 @@ import {
   nextTick,
 } from 'vue'
 import * as echarts from 'echarts'
+import { useDictionaryStore } from '@/stores'
 
 const props = defineProps({
   data: <any>{},
 })
 
+const DictionaryStore = useDictionaryStore()
 const { proxy } = getCurrentInstance()
 const state = reactive({
   resizeObserver: <any>null,
@@ -26,88 +28,87 @@ const state = reactive({
 })
 const ref_chart = ref()
 const ref_main = ref()
+const getLevelNum = (name) => {
+  return DictionaryStore.difficultyLevelList.filter((v) => v.label == name)[0]
+    ?.value
+}
 const initChart = () => {
   echarts.dispose(ref_chart.value)
   const chart = echarts.init(ref_chart.value)
-  const option = {
-    title: {
-      text: '知识点掌握情况',
-      left: 'center',
-      textStyle: {
-        fontSize: 14,
+  if (props.data.length > 0) {
+    const option = {
+      title: {
+        text: '知识点掌握情况',
+        left: 'center',
+        textStyle: {
+          fontSize: 14,
+        },
       },
-    },
-    tooltip: {
-      trigger: 'item',
-      valueFormatter: (p) => {
-        const map = new Map([
-          [1, 'A'],
-          [2, 'S'],
-          [3, 'T'],
-        ])
-        return map.get(p)
+      tooltip: {
+        trigger: 'item',
+        valueFormatter: (p) => {
+          const map = new Map([
+            [1, 'A'],
+            [2, 'S'],
+            [3, 'T'],
+          ])
+          return map.get(p)
+        },
       },
-    },
-    legend: {
-      bottom: 0,
-      left: 'center',
-    },
-    radar: {
-      radius: '70%',
-      splitNumber: 3,
-      indicator: [
-        { name: '基础知识', max: 3 },
-        { name: '文言文', max: 3 },
-        { name: '现代文阅读', max: 3 },
-        { name: '诗歌鉴赏', max: 3 },
-        { name: '作文', max: 3 },
-        { name: '语言运用', max: 3 },
-      ],
-    },
-    series: [
-      {
-        name: '掌握程度',
-        type: 'radar',
-        data: [
-          {
-            value: [1, 2, 3, 2, 1, 2],
-            name: '当前水平',
-            lineStyle: {
-              width: 2,
-              color: 'rgba(211, 73, 71, 1)',
-            },
-            itemStyle: {
-              color: 'rgba(211, 73, 71, 1)',
-            },
-            areaStyle: {
-              color: 'rgba(211, 73, 71, 0.2)',
-            },
-          },
-          {
-            value: [3, 2, 1, 2, 3, 1],
-            name: '班级平均',
-            lineStyle: {
-              width: 2,
-              color: 'rgba(2, 50, 112, 1)',
-            },
-            itemStyle: {
-              color: 'rgba(2, 50, 112, 1)',
+      legend: {
+        bottom: 0,
+        left: 'center',
+      },
+      radar: {
+        radius: '70%',
+        splitNumber: 3,
+        indicator: props.data.map((v) => ({ name: v.typeName, max: 3 })),
+      },
+      series: [
+        {
+          name: '掌握程度',
+          type: 'radar',
+          data: [
+            {
+              value: props.data.map((v) => getLevelNum(v.level)),
+              name: '当前水平',
+              lineStyle: {
+                width: 2,
+                color: 'rgba(211, 73, 71, 1)',
+              },
+              itemStyle: {
+                color: 'rgba(211, 73, 71, 1)',
+              },
+              areaStyle: {
+                color: 'rgba(211, 73, 71, 0.2)',
+              },
             },
-            areaStyle: {
-              color: 'rgba(2, 50, 112, 0.2)',
+            {
+              value: props.data.map((v) => getLevelNum(v.avgLevel)),
+              name: '班级平均',
+              lineStyle: {
+                width: 2,
+                color: 'rgba(2, 50, 112, 1)',
+              },
+              itemStyle: {
+                color: 'rgba(2, 50, 112, 1)',
+              },
+              areaStyle: {
+                color: 'rgba(2, 50, 112, 0.2)',
+              },
             },
-          },
-        ],
-      },
-    ],
-  }
-  chart.setOption(option)
-  state.resizeObserver = new ResizeObserver((entries) => {
-    for (const entry of entries) {
-      chart && chart.resize()
+          ],
+        },
+      ],
     }
-  })
-  state.resizeObserver.observe(ref_main.value)
+    chart.setOption(option)
+    state.resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        chart && chart.resize()
+      }
+    })
+    state.resizeObserver.observe(ref_main.value)
+  }
   return chart
 }
 watch(

src/views/study/subject/index.vue

@@ -61,17 +61,28 @@
 
           <!-- 知识点掌握情况图表 -->
           <div class="mb-6 flex-1">
-            <chart1 v-if="state.statistic.type === 1" />
+            <chart1
+              v-if="state.statistic.type === 1"
+              v-loading="state.statistic.radar.loading"
+              :data="state.statistic.radar.data"
+            />
             <chart2
               v-if="state.statistic.type === 2"
               v-loading="state.statistic.line.loading"
               :data="state.statistic.line.data"
             />
-            <chart3 v-if="state.statistic.type === 3" />
+            <chart3
+              v-if="state.statistic.type === 3"
+              v-loading="state.statistic.bar.loading"
+              :data="state.statistic.bar.data"
+            />
           </div>
 
           <!-- 统计卡片 -->
-          <div class="mt-4 grid grid-cols-2 gap-4 md:grid-cols-4">
+          <div
+            class="mt-4 grid grid-cols-2 gap-4 md:grid-cols-4"
+            v-loading="state.statistic.card.loading"
+          >
             <div
               class="stat-card rounded-lg border-l-4 border-[var(--czr-main-color)] bg-gray-50 p-3"
             >
@@ -417,7 +428,11 @@ import chart1 from './chart-1.vue'
 import chart2 from './chart-2.vue'
 import chart3 from './chart-3.vue'
 import chart4 from './chart-4.vue'
-import { trainingCampLearningPlanList } from '@/api/modules/study'
+import {
+  trainingCampLearningPlanList,
+  trainingCampQuestionTypeIpadGetKnowledgeMasteryStats,
+  trainingCampQuestionTypeIpadGetWrongStatInfo,
+} from '@/api/modules/study'
 import { oneDayTime, YM, YMD } from '@/utils/czr-util'
 import { useAppStore, useDictionaryStore } from '@/stores'
 import { useRoute } from 'vue-router'
@@ -439,10 +454,28 @@ const state: any = reactive({
   },
   statistic: {
     type: 1,
+    radar: {
+      loading: false,
+      data: [],
+    },
     line: {
       loading: false,
       data: [],
     },
+    bar: {
+      loading: false,
+      data: [],
+    },
+    card: {
+      loading: false,
+    },
+  },
+  error: {
+    loading: false,
+    total: 0,
+    errorCount: 0,
+    errorPercent: 0,
+    errorList: [],
   },
 })
 const ref_dateMakeQuestion = ref()
@@ -537,11 +570,37 @@ const initStatistic = () => {
     .finally(() => {
       state.statistic.line.loading = false
     })
+
+  state.statistic.radar.loading = true
+  trainingCampQuestionTypeIpadGetKnowledgeMasteryStats(
+    AppStore.studentInfo?.grade,
+    route.meta.subjectId,
+  )
+    .then(({ data }: any) => {
+      state.statistic.radar.data = data
+    })
+    .finally(() => {
+      state.statistic.radar.loading = false
+    })
+}
+const initError = () => {
+  state.error.loading = true
+  trainingCampQuestionTypeIpadGetWrongStatInfo(
+    AppStore.studentInfo?.grade,
+    route.meta.subjectId,
+  )
+    .then(({ data }: any) => {
+      // state.error.total =
+    })
+    .finally(() => {
+      state.error.loading = false
+    })
 }
 onMounted(() => {
   initMakeQuestion()
   initTraining()
   initStatistic()
+  initError()
 })
 onBeforeMount(() => {
   // document.documentElement.style.setProperty(