报告修改

src/features/paperAnalysis/PaperAnalysis.vue

@@ -94,7 +94,7 @@
 <script setup lang="ts">
 import { useMainStore } from "@/store";
 import { goBack } from "@/utils/utils";
-import { watch, onMounted } from "vue";
+import { watch, onMounted, nextTick } from "vue";
 import { useRoute } from "vue-router";
 // import ProjectSelect from "@/components/ProjectSelect.vue";
 import {
@@ -225,6 +225,10 @@ function toViewReport() {
 }
 function projectSelected(projectId: number[]) {
   compareProjectId = projectId;
-  activeTab = "7";
+  activeTab = "";
+
+  nextTick(() => {
+    activeTab = "7";
+  });
 }
 </script>

src/features/projectManagement/ProjectManagement.vue

@@ -159,11 +159,7 @@
           ></a-input>
         </a-form-item>
         <a-form-item label="年份">
-          <a-input
-            v-model:value="projectObj.year"
-            :maxlength="4"
-            type="number"
-          ></a-input>
+          <a-input v-model:value="projectObj.year" :maxlength="4"></a-input>
         </a-form-item>
         <a-form-item label="项目名称">
           <a-input v-model:value="projectObj.name" :maxlength="50"></a-input>

src/features/report/ReportCompare.vue

@@ -30,47 +30,84 @@
             <col style="width: 47px" />
             <col style="width: 47px" />
           </colgroup>
-          <tr>
-            <th>科目名称</th>
-            <th>科目<br />代码</th>
-            <th>满分</th>
-            <th>最高分</th>
-            <th>起始<br />计算分</th>
-            <th>有效<br />样本数</th>
-            <th>平均分</th>
-            <th>标准差</th>
-            <th>差异<br />系数</th>
-            <th>信度</th>
-            <th>难度<br />系数</th>
-          </tr>
-          <tr v-for="item in props.comparePapers" :key="item.id">
-            <td class="line-text" style="max-width: 150px">
-              {{ item.courseName }}
-            </td>
-            <td>{{ item.courseCode }}</td>
-            <td>{{ item.totalScore }}</td>
-            <td>{{ item.maxScore }}</td>
-            <td>{{ item.startScore }}</td>
-            <td>{{ item.totalCount }}</td>
-            <td>{{ item.avgScore }}</td>
-            <td>{{ item.stdev }}</td>
-            <td>{{ item.coefficient }}</td>
-            <td>{{ item.reliability1 }}</td>
-            <td>{{ item.difficulty }}</td>
-          </tr>
+          <thead>
+            <tr>
+              <th>科目名称</th>
+              <th>科目<br />代码</th>
+              <th>满分</th>
+              <th>最高分</th>
+              <th>起始<br />计算分</th>
+              <th>有效<br />样本数</th>
+              <th>平均分</th>
+              <th>标准差</th>
+              <th>差异<br />系数</th>
+              <th>信度</th>
+              <th>难度<br />系数</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="item in props.comparePapers" :key="item.id">
+              <td class="line-text" style="max-width: 150px">
+                {{ item.courseName }}
+              </td>
+              <td>{{ item.courseCode }}</td>
+              <td>{{ item.totalScore }}</td>
+              <td>{{ item.maxScore }}</td>
+              <td>{{ item.startScore }}</td>
+              <td>{{ item.totalCount }}</td>
+              <td>{{ item.avgScore }}</td>
+              <td>{{ item.stdev }}</td>
+              <td>{{ item.coefficient }}</td>
+              <td>{{ item.reliability1 }}</td>
+              <td>{{ item.difficulty }}</td>
+            </tr>
+          </tbody>
         </table>
       </div>
 
-      <div class="compare-count report-part chart-part">
-        <h3 class="report-part-title">
-          {{ props.comparePapers[0].courseName }}试卷特征数量对比分析
-        </h3>
-        <v-chart
-          :initOptions="{ renderer: 'svg' }"
-          :option="countChartOption()"
-          :autoresize="true"
-        />
+      <div class="compare-charts">
+        <div
+          v-for="item in chartOptions1"
+          :key="item.title"
+          class="compare-chart-item"
+        >
+          <div class="report-part chart-part">
+            <h3 class="report-part-title">{{ item.title }}</h3>
+            <v-chart
+              :initOptions="{ renderer: 'svg' }"
+              :option="item.chart"
+              :autoresize="true"
+            />
+          </div>
+        </div>
       </div>
+    </div>
+    <div class="report-pfoot"></div>
+  </div>
+  <div class="report-page report-compare">
+    <div class="report-body">
+      <div class="report-body-head">
+        <h2>一、关联分析</h2>
+        <p class="report-name"></p>
+      </div>
+
+      <div class="compare-charts">
+        <div
+          v-for="item in chartOptions2"
+          :key="item.title"
+          class="compare-chart-item"
+        >
+          <div class="report-part chart-part">
+            <h3 class="report-part-title">{{ item.title }}</h3>
+            <v-chart
+              :initOptions="{ renderer: 'svg' }"
+              :option="item.chart"
+              :autoresize="true"
+            />
+          </div>
+        </div>
+      </div>
+
       <div class="compare-rate report-part chart-part">
         <h3 class="report-part-title">
           {{ props.comparePapers[0].courseName }}科目成绩(总分)等距({{
@@ -101,7 +138,7 @@
 
 <script setup lang="ts">
 import type { SASPaper, SasCourse } from "@/types";
-import { onMounted, reactive } from "vue";
+import { onMounted, reactive, ref } from "vue";
 import { EChartsOption } from "echarts";
 
 const props = defineProps<{
@@ -132,8 +169,16 @@ let evaluates = reactive({
 });
 // type EvaluateType = keyof typeof evaluates;
 
+type ChartOptionItem = {
+  title: string;
+  chart: EChartsOption;
+};
+const chartOptions1 = ref<ChartOptionItem[]>([]);
+const chartOptions2 = ref<ChartOptionItem[]>([]);
+
 onMounted(() => {
   updateEvaluate();
+  countChartOption();
 });
 
 function updateEvaluate() {
@@ -189,25 +234,13 @@ function getEvaluate(model: string[], val1: number, val2: number) {
 function countChartOption() {
   const countFields = [
     {
-      name: "满分",
-      field: "totalScore",
+      name: "平均分",
+      field: "avgScore",
     },
     {
       name: "最高分",
       field: "maxScore",
     },
-    {
-      name: "最低分",
-      field: "minScore",
-    },
-    {
-      name: "全距",
-      field: "allRange",
-    },
-    {
-      name: "平均分",
-      field: "avgScore",
-    },
     {
       name: "标准差",
       field: "stdev",
@@ -221,91 +254,141 @@ function countChartOption() {
       field: "reliability1",
     },
     {
-      name: "难度",
+      name: "难度系数",
       field: "difficulty",
     },
-  ];
-  return {
-    legend: {
-      show: true,
-      right: 0,
-      top: 25,
-      itemWidth: 8,
-      itemHeight: 8,
-      textStyle: {
-        color: "#8F9DB3",
-        fontSize: 14,
-      },
-    },
-    grid: {
-      show: true,
-      left: 35,
-      bottom: 25,
-      right: 5,
-      top: 60,
-      borderColor: "#A3B4CC",
+    {
+      name: "国家线",
+      field: "reliability1",
     },
-    xAxis: {
-      type: "category",
-      data: countFields.map((v) => v.name),
-      axisLine: {
-        show: false,
-      },
-      axisTick: {
-        show: false,
-      },
-      axisLabel: {
-        fontSize: 13,
-        fontWeight: 400,
-        color: "#172C4D",
-      },
+    {
+      name: "校线",
+      field: "difficulty",
     },
-    yAxis: {
-      type: "value",
-      axisLine: {
-        show: false,
-      },
-      splitLine: {
+  ];
+
+  const chartOptions = countFields.map((item) => {
+    const chart = {
+      grid: {
         show: true,
-        lineStyle: {
-          color: "#E1E5EB",
-        },
-      },
-      axisLabel: {
-        fontSize: 12,
-        color: "#6B7D99",
+        left: 35,
+        bottom: 25,
+        right: 5,
+        top: 40,
+        borderColor: "#A3B4CC",
       },
-    },
-    series: [
-      {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-        data: countFields.map((v) => props.comparePapers[0][v.field]),
-        type: "bar",
-        itemStyle: {
-          color: "#0091FF",
+      xAxis: {
+        type: "category",
+        data: props.comparePapers.map((v) => v.projectName),
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          fontSize: 13,
+          fontWeight: 400,
+          color: "#172C4D",
         },
-        barWidth: 20,
-        name: props.comparePapers[0].projectName,
       },
-      {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-        data: countFields.map((v) => props.comparePapers[1][v.field]),
-        type: "bar",
-        itemStyle: {
-          color: "#44D7B6",
+      yAxis: {
+        type: "value",
+        axisLine: {
+          show: false,
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "#E1E5EB",
+          },
+        },
+        axisLabel: {
+          fontSize: 12,
+          color: "#6B7D99",
         },
-        barWidth: 20,
-        name: props.comparePapers[1].projectName,
       },
-    ],
-  } as EChartsOption;
+      series: [
+        {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+          data: props.comparePapers.map((v) => v[item.field]),
+          type: "line",
+          symbolSize: 6,
+          lineStyle: {
+            color: "rgba(0, 145, 255, 1)",
+            width: 3,
+          },
+          areaStyle: {
+            color: "rgba(0, 145, 255, 0.1)",
+          },
+          name: item.name,
+        },
+      ],
+    } as EChartsOption;
+
+    return {
+      title: `${item.name}变化图`,
+      chart,
+    };
+  });
+
+  chartOptions1.value = chartOptions.slice(0, 4);
+  chartOptions2.value = chartOptions.slice(4, 8);
 }
 
 function scoreChartOption() {
+  const settings = [
+    {
+      lineStyleColor: "rgba(0, 145, 255, 1)",
+      areaStyleColor: "rgba(0, 145, 255, 0.1)",
+      symbol: "emptyCircle",
+    },
+    {
+      lineStyleColor: "rgba(68, 215, 182, 1)",
+      areaStyleColor: "rgba(68, 215, 182, 0.1)",
+      symbol: "emptyTriangle",
+    },
+    {
+      lineStyleColor: "rgba(247, 101, 96, 1)",
+      areaStyleColor: "rgba(247, 101, 96, 0.1)",
+      symbol: "emptyRoundRect",
+    },
+    {
+      lineStyleColor: "rgba(255, 154, 46, 1)",
+      areaStyleColor: "rgba(255, 154, 46, 0.1)",
+      symbol: "emptyDiamond",
+    },
+    {
+      lineStyleColor: "rgba(141, 78, 218, 1)",
+      areaStyleColor: "rgba(141, 78, 218, 0.1)",
+      symbol: "emptyPin",
+    },
+  ];
+
+  const series = props.compareCourses.map((item, index) => {
+    const config = settings[index];
+    return {
+      data: item.segements.map((v) => v[1]),
+      type: "line",
+      symbol: config.symbol,
+      symbolSize: 8,
+      itemStyle: {
+        color: config.lineStyleColor,
+      },
+      lineStyle: {
+        color: config.lineStyleColor,
+        width: 3,
+      },
+      areaStyle: {
+        color: config.areaStyleColor,
+      },
+      name: item.projectName,
+    };
+  });
   return {
     legend: {
       show: true,
-      right: 0,
+      left: 0,
       top: 25,
       itemWidth: 12,
       itemHeight: 8,
@@ -313,6 +396,9 @@ function scoreChartOption() {
         color: "#8F9DB3",
         fontSize: 14,
       },
+      lineStyle: {
+        opacity: 0,
+      },
     },
     grid: {
       show: true,
@@ -353,34 +439,7 @@ function scoreChartOption() {
         color: "#6B7D99",
       },
     },
-    series: [
-      {
-        data: props.compareCourses[0].segements.map((v) => v[1]),
-        type: "line",
-        symbolSize: 6,
-        lineStyle: {
-          color: "rgba(0, 145, 255, 1)",
-          width: 3,
-        },
-        areaStyle: {
-          color: "rgba(0, 145, 255, 0.1)",
-        },
-        name: props.compareCourses[0].projectName,
-      },
-      {
-        data: props.compareCourses[1].segements.map((v) => v[1]),
-        type: "line",
-        symbolSize: 6,
-        lineStyle: {
-          color: "rgba(68, 215, 182, 1)",
-          width: 3,
-        },
-        areaStyle: {
-          color: "rgba(68, 215, 182, 0.1)",
-        },
-        name: props.compareCourses[1].projectName,
-      },
-    ],
+    series,
   } as EChartsOption;
 }
 </script>

src/features/report/ReportMain.vue

@@ -117,12 +117,15 @@ let partNos = $shallowRef({
   questionGroup: "八",
 });
 
-const hasCompareProject = computed(
-  () =>
-    !!compareProjectId &&
-    comparePapers.length === 2 &&
-    compareCourses.length === 2
-);
+const hasCompareProject = computed(() => {
+  const pCount = compareProjectId?.length;
+
+  return (
+    !!pCount &&
+    comparePapers.length === pCount &&
+    compareCourses.length === pCount
+  );
+});
 
 onMounted(async () => {
   try {
@@ -226,10 +229,12 @@ async function fetchData() {
     await fetchCompareCourseData();
   }
 
+  const pCount = compareProjectId.length;
+
   if (
     !compareProjectId.length ||
-    comparePapers.length !== 2 ||
-    compareCourses.length !== 2
+    comparePapers.length !== pCount ||
+    compareCourses.length !== pCount
   ) {
     partNos = {
       summary: "一",

src/features/report/assets/report.css

@@ -275,7 +275,6 @@
   display: inline-block;
   vertical-align: top;
 
-  background: rgba(0, 145, 255, 0.2);
   border-radius: 1px;
   padding: 8px 12px;
   line-height: 21px;
@@ -285,7 +284,10 @@
   white-space: nowrap;
   overflow: hidden;
 }
-.summary-tabs-item:nth-of-type(2) {
+.summary-tabs-item:nth-of-type(odd) {
+  background: rgba(0, 145, 255, 0.2);
+}
+.summary-tabs-item:nth-of-type(even) {
   background: rgba(68, 215, 182, 0.2);
 }
 .summary-table td,
@@ -305,17 +307,33 @@
   padding: 10px;
   line-height: 20px;
 }
-.summary-table tr:nth-of-type(2) {
+.summary-table tr:nth-of-type(odd) {
   background: rgba(0, 145, 255, 0.2);
 }
-.summary-table tr:nth-of-type(3) {
+.summary-table tr:nth-of-type(even) {
   background: rgba(68, 215, 182, 0.2);
 }
-.compare-count {
-  height: 255px;
+.compare-charts {
+  font-size: 0;
+}
+.compare-chart-item {
+  display: inline-block;
+  vertical-align: top;
+  font-size: 15px;
+  width: 50%;
+  margin-bottom: 13px;
+}
+.compare-chart-item:nth-of-type(even) {
+  padding-left: 7px;
+}
+.compare-chart-item:nth-of-type(odd) {
+  padding-right: 7px;
+}
+.compare-charts .chart-part {
+  height: 273px;
 }
 .compare-rate {
-  height: 345px;
+  height: 283px;
 }
 .result-part {
   min-height: 86px;

vite.config.ts

@@ -6,7 +6,7 @@ import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";
 // const SERVER_URL = "http://192.168.10.108:7180";
 // const SERVER_URL = "http://192.168.10.138:13800";
 // const SERVER_URL = "http://192.168.10.39:7180";
-const SERVER_URL = "http://192.168.10.141:7100";
+const SERVER_URL = "http://192.168.10.106:7100";
 const path = require("path");
 
 // https://vitejs.dev/config/