按本科目试卷成绩分组 图形化展示

src/App.vue

@@ -26,7 +26,7 @@ export default defineComponent({
       if (getToken()) {
         httpApp.post("/api/ess/user/online/signal");
       }
-    }, 10 * 1000);
+    }, 5 * 1000);
 
     let spinning = $ref(false);
     const mainStore = useMainStore();

src/features/paperAnalysis/QuestionDifficultyGroup.vue

@@ -3,6 +3,7 @@
     <div class="tw-flex tw-justify-between tw-items-center tw-my-4">
       <h3 class="section-title">按本科目试卷成绩分组</h3>
       <div class="tw-flex tw-gap-2">
+        <a-button @click="visible = true">图形化展示</a-button>
         <a-button @click="openModal1">说明</a-button>
       </div>
     </div>
@@ -72,6 +73,27 @@
       :range-config="selectedRangeConfig"
       @updated="handleRangeConfigUpdate"
     />
+
+    <a-modal
+      v-model:visible="visible"
+      title="按本科目试卷成绩分组"
+      @ok="visible = false"
+      ok-text="确定"
+      cancel-text="取消"
+      width="600px"
+      :body-style="{ height: '600px' }"
+    >
+      <div style="width: 100%; height: 600px; overflow: scroll">
+        <v-chart
+          v-for="(question, index) in props.questions"
+          :key="index"
+          class="chart"
+          style="height: 300px"
+          :option="questionOptions(question)"
+          :autoresize="true"
+        />
+      </div>
+    </a-modal>
   </div>
 </template>
 
@@ -81,6 +103,7 @@ import { RANGE_POINT_TYPE } from "@/constants/constants";
 import EventBus from "@/plugins/eventBus";
 import { Question } from "@/types";
 import { message } from "ant-design-vue";
+import { EChartsOption } from "echarts/types/dist/shared";
 
 const props = defineProps<{
   questions: Question[];
@@ -91,6 +114,8 @@ const props = defineProps<{
   paperId: number;
 }>();
 
+let visible = $ref(false);
+
 function openModal1() {
   EventBus.emit("SHOW_SETTING", "DESCRIBE250");
 }
@@ -136,6 +161,33 @@ function scoreTitle(rangeConfig: any) {
     RANGE_POINT_TYPE[rangeConfig.type]
   }${rangeConfig.adjustScore > 0 ? "+" : ""}${rangeConfig.adjustScore})-`;
 }
+
+function questionOptions(question: Question) {
+  const xAxis = [];
+  for (let i = 0; i * 10 < props.totalScore; i++) {
+    xAxis.push(i * 10 + "-");
+  }
+  return {
+    title: {
+      text: question.mainNumber + "-" + question.subNumber,
+      left: "left",
+    },
+    xAxis: {
+      type: "category",
+      data: xAxis,
+    },
+    yAxis: {
+      type: "value",
+    },
+    series: [
+      {
+        data: question.difficulityLevel,
+        type: "line",
+        smooth: true,
+      },
+    ],
+  } as EChartsOption;
+}
 </script>
 
 <style scoped></style>