推送

src/api/analysis.js

@@ -0,0 +1,64 @@
+const prefix = "/analysis";
+
+import {axios} from "@/requests/axios.config";
+
+//knowledge
+function getK1(userId) {
+    return axios.get(`${prefix}/knowledge/K1/${userId}`);
+}
+
+function getK2(userId) {
+    return axios.get(`${prefix}/knowledge/K2/${userId}`);
+}
+
+function getK3(userId) {
+    return axios.get(`${prefix}/knowledge/K3/${userId}`);
+}
+
+//skill
+
+function getS1(userId) {
+    return axios.get(`${prefix}/skill/S1/${userId}`);
+}
+
+function getS2(userId) {
+    return axios.get(`${prefix}/skill/S2/${userId}`);
+}
+
+function getS3(userId) {
+    return axios.get(`${prefix}/skill/S3/${userId}`);
+}
+
+function getS4(userId) {
+    return axios.get(`${prefix}/skill/S4/${userId}`);
+}
+
+//dilemma
+function getD1(userId) {
+    return axios.get(`${prefix}/dilemma/D1/${userId}`);
+}
+
+function getD2(userId) {
+    return axios.get(`${prefix}/dilemma/D2/${userId}`);
+}
+
+function getD3(userId) {
+    return axios.get(`${prefix}/dilemma/D3/${userId}`);
+}
+
+const analysisAPIs = {
+    getK1,
+    getK2,
+    getK3,
+
+    getS1,
+    getS2,
+    getS3,
+    getS4,
+
+    getD1,
+    getD2,
+    getD3
+};
+
+export default analysisAPIs;

src/api/index.js

@@ -21,7 +21,7 @@ const api = {
   ...groupAPIS,
   ...projectAPIs,
   ...courseWareAPIs,
-  ...communicationAPIs
+  ...communicationAPIs,
 };
 
 export default api;

src/main.js

@@ -2,6 +2,7 @@ import { createApp } from "vue";
 import { globalComponentRegister } from "./global";
 import store from "./store";
 import api from "@/api";
+import echarts from "echarts";
 import { ElMessage } from "element-plus";
 import variables from "@/utils/portal/variables";
 import color from "@/utils/color";
@@ -26,7 +27,9 @@ app.directive("student-permission", {
 
 app.config.productionTip = false;
 app.config.globalProperties.$apis = api;
+app.config.globalProperties.$echarts = echarts;
 app.config.globalProperties.$message = ElMessage;
 app.config.globalProperties.$variables = variables;
 app.config.globalProperties.$color = color;
+
 app.mount("#app");

src/views/HomePage/HomePage.vue

@@ -2,7 +2,7 @@
   <el-row id="home-page-body">
     <el-col :span="4">
       <el-card style="position: fixed;">
-        <el-menu default-active="1" @select="handleSelect">
+        <el-menu default-active="3" @select="handleSelect">
           <el-menu-item index="0">
             <el-icon>
               <Back/>
@@ -21,13 +21,20 @@
             </el-icon>
             <span style="padding-left: 20px">身份认证</span>
           </el-menu-item>
+          <el-menu-item index="3">
+            <el-icon>
+              <Medal/>
+            </el-icon>
+            <span style="padding-left: 20px">软工能力评估</span>
+          </el-menu-item>
         </el-menu>
       </el-card>
     </el-col>
     <el-col :span="2"/>
     <el-col :span="18">
       <InformationCard v-if="activeIndex==='1'"/>
-      <CertificationCard v-else/>
+      <CertificationCard v-if="activeIndex==='2'"/>
+      <AnalysisCard v-if="activeIndex==='3'"/>
     </el-col>
   </el-row>
 </template>
@@ -36,13 +43,14 @@
 import { Back, Medal, User } from "@element-plus/icons-vue";
 import InformationCard from "@/views/HomePage/components/InformationCard";
 import CertificationCard from "@/views/HomePage/components/CertificationCard";
+import AnalysisCard from "@/views/HomePage/components/AnalysisCard.vue";
 
 export default {
   name: "HomePage",
-  components: { Back, CertificationCard,  InformationCard, Medal, User},
+  components: {Back, CertificationCard,  InformationCard, AnalysisCard, Medal, User},
   data() {
     return {
-      activeIndex: "1",
+      activeIndex: "3",
     };
   },
   methods: {

src/views/HomePage/components/AnalysisCard.vue

@@ -0,0 +1,671 @@
+<template>
+  <div>
+    <div id="mainAxios" style="width: 100%; height: 400px;"></div>
+
+    <H2>{{ userId }}学生能力分析报告</H2>
+    <el-table :data="tableData"
+              :span-method="objectSpanMethod" border style="width: 100%">
+      <el-table-column prop="ksd" label="一级能力分类" width="105"/>
+      <el-table-column prop="ksd2" label="二级能力分类" width="157"/>
+      <el-table-column prop="description" label="能力描述">
+        <template #default="scope">
+          <div class="description-cell">{{ scope.row.description }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="score" label="得分" width="307">
+        <template #default="scope">
+          <div class="description-cell">{{ scope.row.score }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="rank" label="排名" width="75">
+        <template #default="scope">
+          前{{ scope.row.rank }}%
+        </template>
+      </el-table-column>
+
+    </el-table>
+
+    <div id="mainAssessmentChart" style="width: 70%; height: 300px; margin-top: 30px; margin-left: 10%"></div>
+
+    <div class="ksd-main">
+      <div>
+        <div id="KAssessmentChart" style="width: 70%; height: 300px; margin-left: 10%"></div>
+      </div>
+
+      <div v-if="KIdx === 1">
+        <el-card class="ksd-card">
+          “K1软件工程知识储备”指参加课程数量、种类、以及测评的情况。有三个评判指标：<br>
+          1.是否选软工一、二。<br>
+          2.课程进展：（当前时间-开课时间）/（结课时间-开课时间）。<br>
+          3.eval平台评测的平均分。<br>
+          当前“K1软件工程知识储备”的得分为{{ K1.score.toFixed(2) }}。<br>
+          是否已选课《软件工程与计算Ⅰ》？
+          <span v-if="K1.chooseSE1">是。当前《软工Ⅰ》课程进展为{{ K1.processSE1.toFixed(2) }}%<br></span>
+          <span v-else>否<br></span>
+          是否已选课《软件工程与计算Ⅱ》？
+          <span v-if="K1.chooseSE2">是。当前《软工Ⅱ》课程进展为{{ K1.processSE2.toFixed(2) }}%<br></span>
+          <span v-else>否<br></span>
+          eval平台评测的平均分为{{ K1.evalAverageScore.toFixed(2) }}。
+        </el-card>
+      </div>
+
+      <div v-if="KIdx === 2">
+        <el-card class="ksd-card">
+          “K2软件工程开发流程”指软工二项目开发流程进度。有一个评判指标：<br>
+          1.devcloud上软工二项目的提交、部署、规划次数。<br>
+          当前“K2软件工程开发流程”的得分为{{ K2.score }}。<br>
+          提交次数为{{ K2.commitTimes }}，部署次数为{{ K2.deployTimes }}，规划次数为{{ K2.nodeTimes }}。
+        </el-card>
+      </div>
+
+      <div v-if="KIdx === 3">
+        <el-card class="ksd-card">
+          “K3编程语言”指对Java、Python、C++三种语言的掌握程度。有一个评判指标：<br>
+          1.coder平台考试成绩，及使用的什么语言。<br>
+          当前“K3编程语言”的得分为{{ K3.score }}。<br>
+          在coder平台的平均分为{{ K3.coderAverageScore }}。
+        </el-card>
+      </div>
+    </div>
+
+    <div class="ksd-main">
+      <div id="SAssessmentChart" style="width: 70%; height: 300px; margin-left: 10%"></div>
+
+      <div v-if="SIdx === 1">
+        <el-card class="ksd-card">
+          “S1文档能力”指编写项目文档的能力。有一个评判指标：<br>
+          1.软工二课程中提交的文档是否规范。（包括1项目计划文档、2用例文档、3需求分析文档、4人机交互设计文档、5体系架构文档、6详细设计文档、7测试文档）<br>
+          当前“S1软件工程知识储备”的得分为{{ S1.score }}。<br>
+        </el-card>
+      </div>
+
+      <div v-if="SIdx === 2">
+        <el-card class="ksd-card">
+          “S2项目管理工具使用能力”指使用Git工具的能力。有一个评判指标：<br>
+          1.git记录是否合理正常，commit信息是否规范。<br>
+          当前“S2软件工程开发流程”的得分为{{ S2.score.toFixed(2) }}。<br>
+          符合规范的提交比率为{{ S2.commitComplianceRate.toFixed(2) }}%。
+        </el-card>
+      </div>
+
+      <div v-if="SIdx === 3">
+        <el-card class="ksd-card">
+          “S3测试能力”指项目代码的测试覆盖率。有一个评判指标：<br>
+          1.获取coder和gitee里所有提交的项目代码与项目结构，使用JPA获取测试覆盖率。<br>
+          当前“S3测试能力”的得分为{{ S3.score }}。<br>
+        </el-card>
+      </div>
+
+      <div v-if="SIdx === 4">
+        <el-card class="ksd-card">
+          “S4代码规范”指项目代码的静态规范程度。有一个评判指标：<br>
+          1.coder提交后SonarQube评估出的分数。<br>
+          当前“S4代码规范”的得分为{{ S4.score }}。<br>
+        </el-card>
+      </div>
+    </div>
+
+    <div class="ksd-main">
+      <div id="DAssessmentChart" style="width: 70%; height: 300px; margin-left: 10%"></div>
+
+      <div v-if="DIdx === 1">
+        <el-card class="ksd-card">
+          “D1合作能力”指团队贡献力。有一个评判指标：<br>
+          1.提交占比：用户commit的次数/小组commit总次数<br>
+          当前“D1合作能力”的得分为{{ D1.score.toFixed(2) }}。<br>
+          提交占比为{{ D1.commitRate.toFixed(2) }}%。
+        </el-card>
+      </div>
+
+      <div v-if="DIdx === 2">
+        <el-card class="ksd-card">
+          “D2求知欲”指获取知识的积极程度。有一个评判指标：<br>
+          1.是否及时查看通知、查看与下载课件，布置的任务有没有及时完成，是否经常登录门户查看和操作。<br>
+          当前“D2求知欲”的得分为{{ D2.score }}。<br>
+        </el-card>
+      </div>
+
+      <div v-if="DIdx === 3">
+        <el-card class="ksd-card">
+          “D3时间管理能力”指是否能合理把控任务时间。有两个评判指标：<br>
+          1.是否有在0：00~6：00进行操作，如果有，则视为不健康。<br>
+          2.完成任务的时间和任务ddl是否差距在1h内。<br>
+          当前“D3时间管理能力”的得分为{{ D3.score }}。<br>
+        </el-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AssessmentPage",
+  data() {
+    return {
+      userId: 0,
+      KIdx: 1,
+      SIdx: 1,
+      DIdx: 1,
+      KValue: 0,
+      SValue: 0,
+      DValue: 0,
+      K1: {
+        chooseSE1: false,
+        chooseSE2: false,
+        processSE1: 0,
+        processSE2: 0,
+        evalAverageScore: 0,
+        score: 0,
+        rank: 0
+      },
+      K2: {
+        commitTimes: 0,
+        deployTimes: 0,
+        nodeTimes: 0,
+        score: 0,
+        rank: 0
+      },
+      K3: {
+        coderAverageScore: 0,
+        score: 0,
+        rank: 0
+      },
+      S1: {
+        score: 0,
+        rank: 0
+      },
+      S2: {
+        commitComplianceRate: 0,
+        score: 0,
+        rank: 0
+      },
+      S3: {
+        score: 0,
+        rank: 0
+      },
+      S4: {
+        score: 0,
+        rank: 0
+      },
+      D1: {
+        commitRate: 0,
+        score: 0,
+        rank: 0
+      },
+      D2: {
+        score: 0,
+        rank: 0
+      },
+      D3: {
+        stayUpLate: false,
+        score: 0,
+        rank: 0
+      },
+      tableData: [
+        {
+          ksd: "K-知识",
+          ksd2: "K1-软件工程知识储备",
+          description: "",
+          score: "",
+          rank: 0
+        },
+        {
+          ksd: "K-知识",
+          ksd2: "K2-软件工程开发流程",
+          description: "",
+          score: "",
+          rank: 0
+        },
+        {
+          ksd: "K-知识",
+          ksd2: "K3-编程语言",
+          description: "",
+          score: "",
+          rank: 0
+        },
+        {
+          ksd: "S-技能",
+          ksd2: "S1-文档编写",
+          description: "",
+          score: "",
+          rank: 0
+        },
+        {
+          ksd: "S-技能",
+          ksd2: "S2-项目管理工具使用",
+          description: "",
+          score: "",
+          rank: 0
+        },
+        {
+          ksd: "S-技能",
+          ksd2: "S3-测试编写",
+          description: "",
+          score: "",
+          rank: 0
+        },
+        {
+          ksd: "S-技能",
+          ksd2: "S4-代码规范",
+          description: "",
+          score: "",
+          rank: 0
+        },
+        {
+          ksd: "D-态度",
+          ksd2: "D1-合作能力",
+          description: "",
+          score: "",
+          rank: 0
+        },
+        {
+          ksd: "D-态度",
+          ksd2: "D2-求知欲",
+          description: "",
+          score: "",
+          rank: 0
+        },
+        {
+          ksd: "D-态度",
+          ksd2: "D3-时间管理能力",
+          description: "",
+          score: "",
+          rank: 0
+        }
+      ],
+    };
+  },
+  mounted() {
+    this.getValues();
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.userId = this.$store.state.user.id;
+      //this.userId = 1058;
+      this.overrideApiBaseUrl();
+      this.getSpanArr(this.tableData);
+    },
+
+    overrideApiBaseUrl() {
+      // 覆盖全局 URL 为8082端口的 URL
+      this.$apis = "http://localhost:8082/";
+    },
+
+    async getValues() {
+      this.K1 = (await (await fetch(this.$apis + `api/knowledge/K1/${this.userId}`)).json()).data;
+      this.K2 = (await (await fetch(this.$apis + `api/knowledge/K2/${this.userId}`)).json()).data;
+      this.K3 = (await (await fetch(this.$apis + `api/knowledge/K3/${this.userId}`)).json()).data;
+
+      this.KValue = (this.K1.score + this.K2.score + this.K3.score) / 3;
+      this.drawKAssessmentChart();
+
+
+      this.S1 = (await (await fetch(this.$apis + `api/skill/S1/${this.userId}`)).json()).data;
+      this.S2 = (await (await fetch(this.$apis + `api/skill/S2/${this.userId}`)).json()).data;
+      this.S3 = (await (await fetch(this.$apis + `api/skill/S3/${this.userId}`)).json()).data;
+      this.S4 = (await (await fetch(this.$apis + `api/skill/S4/${this.userId}`)).json()).data;
+
+
+      this.SValue = (this.S1.score + this.S2.score + this.S3.score + this.S4.score) / 4;
+      this.drawSAssessmentChart();
+
+      this.D1 = (await (await fetch(this.$apis + `api/dilemma/D1/${this.userId}`)).json()).data;
+      this.D2 = (await (await fetch(this.$apis + `api/dilemma/D2/${this.userId}`)).json()).data;
+      this.D3 = (await (await fetch(this.$apis + `api/dilemma/D3/${this.userId}`)).json()).data;
+
+      this.DValue = (this.D1.score + this.D2.score + this.D3.score) / 3;
+      this.drawDAssessmentChart();
+
+
+      this.drawMain();
+    },
+
+    drawMain() {
+      this.drawMainAssessmentChart();
+      this.getTableData();
+      this.drawMainAxios();
+    },
+
+    getTableData() {
+      //K1
+      this.tableData[0].description = "指参加课程数量、种类、以及测评的情况。\n" +
+          "有三个评判指标：\n" +
+          "1. 是否选软工一、二；\n" +
+          "2. 课程进展：（当前时间-开课时间）/（结课时间-开课时间）；\n" +
+          "3. eval平台评测的平均分。\n";
+      this.tableData[0].score = "当前得分为" + this.K1.score.toFixed(2) + "分。\n" +
+          "当前《软工Ⅰ》课程进展为" + this.K1.processSE1.toFixed(2) + "%。\n" +
+          "当前《软工Ⅱ》课程进展为" + this.K1.processSE2.toFixed(2) + "%。\n" +
+          "eval平台评测的平均分为" + this.K1.evalAverageScore.toFixed(2) + "分。";
+      this.tableData[0].rank = (this.K1.rank * 100).toFixed(0);
+
+      //K2
+      this.tableData[1].description = "指软工二项目开发流程进度。\n" +
+          "有一个评判指标：\n" +
+          "1. devcloud上软工二项目的提交、部署、规划次数。\n";
+      this.tableData[1].score = "当前得分为" + this.K2.score.toFixed(2) + "分。\n" +
+          "提交次数为" + this.K2.commitTimes + "，部署次数为" + this.K2.deployTimes
+          + "，规划次数为" + this.K2.nodeTimes + "。";
+      this.tableData[1].rank = (this.K2.rank * 100).toFixed(0);
+
+      //K3
+      this.tableData[2].description = "指对Java、Python、C++三种语言的掌握程度。\n" +
+          "有一个评判指标：\n" +
+          "1. coder平台考试成绩，及使用的什么语言。\n";
+      this.tableData[2].score = "当前得分为" + this.K3.score + "分。\n" +
+          "在coder平台的平均分为" + this.K3.coderAverageScore + "分。";
+      this.tableData[2].rank = (this.K3.rank * 100).toFixed(0);
+
+      //S1
+      this.tableData[3].description = "指编写项目文档的能力。\n" +
+          "有一个评判指标：\n" +
+          "1. 软工二课程中提交的文档是否规范。（包括1项目计划文档、2用例文档、3需求分析文档、4人机交互设计文档、5体系架构文档、6详细设计文档、7测试文档）\n";
+      this.tableData[3].score = "当前得分为" + (this.S1.score * 100).toFixed(2) + "分。";
+      this.tableData[3].rank = (this.S1.rank * 100).toFixed(0);
+
+      //S2
+      this.tableData[4].description = "指使用Git工具的能力。\n" +
+          "有一个评判指标：\n" +
+          "1. git记录是否合理正常，commit信息是否规范。\n";
+      this.tableData[4].score = "当前得分为" + this.S2.score.toFixed(2) + "分。\n" +
+          "符合规范的提交比率为" + this.S2.commitComplianceRate.toFixed(2) + "%。";
+      this.tableData[4].rank = 50;
+
+      //S3
+      this.tableData[5].description = "指项目代码的测试覆盖率。\n" +
+          "有一个评判指标：\n" +
+          "1. 获取coder和gitee里所有提交的项目代码与项目结构，使用JPA获取测试覆盖率。\n";
+      this.tableData[5].score = "当前得分为" + (this.S3.score * 100).toFixed(2) + "分。";
+      this.tableData[5].rank = (this.S3.rank * 100).toFixed(0);
+
+      //S4
+      this.tableData[6].description = "指项目代码的静态规范程度。\n" +
+          "有一个评判指标：\n" +
+          "1. coder提交后SonarQube评估出的分数。\n";
+      this.tableData[6].score = "当前得分为" + (this.S4.score * 100).toFixed(2) + "分。";
+      this.tableData[6].rank = (this.S4.rank * 100).toFixed(0);
+
+      //D1
+      this.tableData[7].description = "指团队贡献力。\n" +
+          "有一个评判指标：\n" +
+          "1. 提交占比：用户commit的次数/小组commit总次数。\n";
+      this.tableData[7].score = "当前得分为" + this.D1.score.toFixed(2) + "分。\n" +
+          "提交占比为" + this.D1.commitRate.toFixed(2) + "%。";
+      this.tableData[7].rank = (this.D1.rank * 100).toFixed(0);
+
+      //D2
+      this.tableData[8].description = "指获取知识的积极程度。\n" +
+          "有一个评判指标：\n" +
+          "1. 是否及时查看通知、查看与下载课件，布置的任务有没有及时完成，是否经常登录门户查看和操作。\n";
+      this.tableData[8].score = "当前得分为" + (this.D2.score * 100).toFixed(2) + "分。";
+      this.tableData[8].rank = (this.D2.rank * 100).toFixed(0);
+
+      //D3
+      this.tableData[9].description = "指是否能合理把控任务时间。\n" +
+          "有两个评判指标：\n" +
+          "1. 是否有在0：00~6：00进行操作，如果有，则视为不健康。\n" +
+          "2. 完成任务的时间和任务ddl是否差距在1h内。\n";
+      this.tableData[9].score = "当前得分为" + this.D3.score + "分。";
+      this.tableData[9].rank = (this.D3.rank * 100).toFixed(0);
+    },
+
+    //设置单元格
+    getSpanArr(list) {
+      // 先给所有的数据都加一个v.rowspan = 1
+      list.forEach(item => {
+        item.rowspan = 1;
+      });
+      // 双层循环
+      for (let i = 0; i < list.length; i++) {
+        for (let j = i + 1; j < list.length; j++) {
+          //此处可根据相同字段进行合并，此处是根据的id
+          if (list[i].ksd === list[j].ksd) {
+            list[i].rowspan++;
+            list[j].rowspan--;
+          }
+        }
+        // 这里跳过已经重复的数据
+        i = i + list[i].rowspan - 1;
+      }
+      this.tableData = list;
+    },
+
+    objectSpanMethod({row, column, rowIndex, columnIndex}) {
+      //第一列
+      if (columnIndex === 0) {
+        return {
+          rowspan: row.rowspan,
+          colspan: 1
+        };
+      }
+    },
+
+    drawMainAxios() {
+      let myChart = this.$echarts.init(document.getElementById("mainAxios"));
+      let option = {
+        xAxis: {
+          data: ["K1\n软件工程知识储备", "K2\n项目开发流程", "K3\n编程语言",
+            "S1\n文档编写", "S2\n项目管理工具", "S3\n测试编写", "S4\n代码规范",
+            "D1\n合作能力", "D2\n求知欲", "D3\n时间管理能力"],
+          axisLabel: {
+            interval: 0,//代表显示所有x轴标签显示
+            //rotate: 20, //代表逆时针旋转45度
+          }
+        },
+        yAxis: {},
+        legend: {
+          orient: "vertical",
+          top: "0%",
+          x: "81%",
+          y: "center",
+          itemWidth: 10,
+          itemHeight: 10,
+          data:["大一年级","大二年级"],
+          textStyle:{
+            fontSize: 10,//字体大小
+            color: "#000000"
+          }
+        },
+        series: [
+          {
+            name: "大一年级",
+            type: "bar",
+            data: [43, 24, 40, 56, 75, 43, 78, 19, 68, 95],
+            barWidth: "20%",
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(220, 220, 220, 0.8)"
+            },
+            label: {
+              show: true, //开启显示
+              position: "top", //在上方显示
+              textStyle: { //数值样式
+                color: "black",//字体颜色
+                fontSize: 12//字体大小
+              }
+            }
+          },
+          {
+            name: "大二年级",
+            type: "bar",
+            data: [66, 72, 51, 88, 87, 68, 80, 64, 72, 91],
+            barWidth: "20%",
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(220, 220, 220, 0.8)"
+            },
+            label: {
+              show: true, //开启显示
+              position: "top", //在上方显示
+              textStyle: { //数值样式
+                color: "black",//字体颜色
+                fontSize: 12//字体大小
+              }
+            }
+          },
+        ]
+      };
+      myChart.setOption(option);
+    },
+
+    drawKAssessmentChart() {
+      let myChart = this.$echarts.init(document.getElementById("KAssessmentChart"));
+      let option = {
+        title: {
+          text: "Knowledge 知识能力评估"
+        },
+        legend: {
+          data: []
+        },
+        radar: {
+          shape: "circle",
+          indicator: [
+            {name: "K1 软件工程知识储备", max: 100},
+            {name: "K2 软件工程开发流程", max: 100},
+            {name: "K3 编程语言", max: 100},
+          ]
+        },
+        series: [
+          {
+            name: "Budget vs spending",
+            type: "radar",
+            data: [
+              {
+                value: [this.K1.score, this.K2.score, this.K3.score],
+              }
+            ]
+          }
+        ]
+      };
+      myChart.setOption(option);
+      myChart.on("click", (param) => {
+        this.KIdx = param.event.topTarget.__dimIdx + 1;
+      });
+    },
+
+    drawSAssessmentChart() {
+      let myChart = this.$echarts.init(document.getElementById("SAssessmentChart"));
+      let option = {
+        title: {
+          text: "Skill 技术能力评估"
+        },
+        legend: {
+          data: []
+        },
+        radar: {
+          shape: "circle",
+          indicator: [
+            {name: "S1 文档能力", max: 100},
+            {name: "S2 项目管理工具使用能力", max: 100},
+            {name: "S3 代码规范", max: 100},
+            {name: "S4 测试能力", max: 100},
+          ]
+        },
+        series: [
+          {
+            name: "Budget vs spending",
+            type: "radar",
+            data: [
+              {
+                value: [this.S1.score, this.S2.score, this.S3.score, this.S4.score],
+              }
+            ]
+          }
+        ]
+      };
+      myChart.setOption(option);
+      myChart.on("click", (param) => {
+        this.SIdx = param.event.topTarget.__dimIdx + 1;
+      });
+    },
+
+    drawDAssessmentChart() {
+      let myChart = this.$echarts.init(document.getElementById("DAssessmentChart"));
+      let option = {
+        title: {
+          text: "Dilemma 态度能力评估"
+        },
+        legend: {
+          data: []
+        },
+        radar: {
+          shape: "circle",
+          indicator: [
+            {name: "D1 团队合作能力", max: 100},
+            {name: "D2 求知欲", max: 100},
+            {name: "D3 时间管理能力", max: 100},
+          ]
+        },
+        series: [
+          {
+            name: "Budget vs spending",
+            type: "radar",
+            data: [
+              {
+                value: [this.D1.score, this.D2.score, this.D3.score],
+              }
+            ]
+          }
+        ]
+      };
+      myChart.setOption(option);
+      myChart.on("click", (param) => {
+        this.DIdx = param.event.topTarget.__dimIdx + 1;
+      });
+    },
+
+    drawMainAssessmentChart() {
+      let myChart = this.$echarts.init(document.getElementById("mainAssessmentChart"));
+      let option = {
+        title: {
+          text: "软工能力评估"
+        },
+        legend: {
+          data: []
+        },
+        radar: {
+          shape: "circle",
+          indicator: [
+            {name: "Knowledge 知识", max: 100},
+            {name: "Skill 技术", max: 100},
+            {name: "Dilemma 态度", max: 100},
+          ]
+        },
+        series: [
+          {
+            name: "Budget vs spending",
+            type: "radar",
+            data: [
+              {
+                value: [this.KValue, this.SValue, this.DValue],
+              }
+            ]
+          }
+        ]
+      };
+      myChart.setOption(option);
+    },
+  }
+};
+</script>
+
+<style scoped>
+.ksd-main {
+  margin-top: 50px;
+  margin-bottom: 30px;
+  align-items: center;
+}
+
+.ksd-card {
+  width: 60%;
+  margin-left: 10%;
+  line-height: 30px;
+}
+
+.description-cell {
+  white-space: pre-line; /* 保留换行符，同时不保留其他空白符 */
+}
+</style>

vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
           pathRewrite: {
             "^/pdf": ""
           }
-        }
+        },
       },
       port: 8000,
     },