保存记录接口

package.json

@@ -30,6 +30,8 @@
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^24.0.10",
     "@vitejs/plugin-vue": "^6.0.0",
+    "eslint": "^9.32.0",
+    "eslint-plugin-vue": "^10.3.0",
     "path": "^0.12.7",
     "sass": "^1.89.2",
     "vite": "^7.0.0"

src/api/personalized/index.js

@@ -0,0 +1,10 @@
+import axios from '@/utils/request'
+
+// 保存记录
+export function saveRecord (data) {
+  return axios({
+    url: 'bjdxReport/progress/saveReportProgress',
+    method: 'post',
+    data: data
+  })
+}

src/views/personalized/Personalized.vue

@@ -2,7 +2,9 @@
   <div class="personalized">
     <!-- 标题 -->
     <div class="title-container" @click="goBack">
-      <el-icon><ArrowLeftBold /></el-icon>
+      <el-icon>
+        <ArrowLeftBold />
+      </el-icon>
       评估报告
     </div>
     <!-- 评估报告内容 -->
@@ -17,11 +19,7 @@
         </div>
         <!-- 进度条 -->
         <div class="left-bottom-box">
-          <div
-            class="demo-progress"
-            v-for="item in progressData"
-            :key="item.id"
-          >
+          <div class="demo-progress" v-for="item in progressData" :key="item.id">
             <p class="progress-desc">{{ item.desc }}</p>
             <el-progress :percentage="item.percentage" />
           </div>
@@ -37,11 +35,7 @@
           </div>
         </div>
         <div class="middle-bottom-box">
-          <div
-            class="demo-progress"
-            v-for="item in interactionProgressData"
-            :key="item.id"
-          >
+          <div class="demo-progress" v-for="item in interactionData" :key="item.id">
             <p class="progress-desc">{{ item.desc }}</p>
             <el-progress :percentage="item.percentage" />
           </div>
@@ -63,9 +57,9 @@
           </div>
           <div class="comment-content">
             <p>
-                教师在AI通识课程的教学中展现出高度的专业素养与教学创新能力，能够有效结合理论知识与实际应用，激发学生对人工智能的兴趣与探索欲望。教学成果呈现出良好的结构性与针对性，课程内容紧贴时代发展，注重培养学生的跨学科思维与技术素养。在引导学生进行项目实践和思辨讨论方面，展现了出色的教学引导与组织能力，达成了“知AI、懂AI、用AI”的教学目标，成果显著，广受学生好评。
-            教师在AI通识课程的教学中展现出高度的专业素养与教学创新能力，能够有效结合理论知识与实际应用，激发学生对人工智能的兴趣与探索欲望。教学成果呈现出良好的结构性与针对性，课程内容紧贴时代发展，注重培养学生的跨学科思维与技术素养。在引导学生进行项目实践和思辨讨论方面，展现了出色的教学引导与组织能力，达成了“知AI、懂AI、用AI”的教学目标，成果显著，广受学生好评。
-            教师在AI通识课程的教学中展现出高度的专业素养与教学创新能力，能够有效结合理论知识与实际应用，激发学生对人工智能的兴趣与探索欲望。教学成果呈现出良好的结构性与针对性，课程内容紧贴时代发展，注重培养学生的跨学科思维与技术素养。在引导学生进行项目实践和思辨讨论方面，展现了出色的教学引导与组织能力，达成了“知AI、懂AI、用AI”的教学目标，成果显著，广受学生好评。
+              教师在AI通识课程的教学中展现出高度的专业素养与教学创新能力，能够有效结合理论知识与实际应用，激发学生对人工智能的兴趣与探索欲望。教学成果呈现出良好的结构性与针对性，课程内容紧贴时代发展，注重培养学生的跨学科思维与技术素养。在引导学生进行项目实践和思辨讨论方面，展现了出色的教学引导与组织能力，达成了“知AI、懂AI、用AI”的教学目标，成果显著，广受学生好评。
+              教师在AI通识课程的教学中展现出高度的专业素养与教学创新能力，能够有效结合理论知识与实际应用，激发学生对人工智能的兴趣与探索欲望。教学成果呈现出良好的结构性与针对性，课程内容紧贴时代发展，注重培养学生的跨学科思维与技术素养。在引导学生进行项目实践和思辨讨论方面，展现了出色的教学引导与组织能力，达成了“知AI、懂AI、用AI”的教学目标，成果显著，广受学生好评。
+              教师在AI通识课程的教学中展现出高度的专业素养与教学创新能力，能够有效结合理论知识与实际应用，激发学生对人工智能的兴趣与探索欲望。教学成果呈现出良好的结构性与针对性，课程内容紧贴时代发展，注重培养学生的跨学科思维与技术素养。在引导学生进行项目实践和思辨讨论方面，展现了出色的教学引导与组织能力，达成了“知AI、懂AI、用AI”的教学目标，成果显著，广受学生好评。
             </p>
           </div>
         </div>
@@ -75,8 +69,9 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref,onMounted } from "vue";
 import { ArrowLeftBold } from "@element-plus/icons-vue";
+import { saveRecord } from '@/api/personalized/index.js'
 import { useRouter } from "vue-router";
 const router = useRouter();
 
@@ -97,8 +92,23 @@ const progressData = ref([
   { id: 8, desc: "08 AI伦理安全", percentage: 0 },
 ]);
 
+// 保存记录
+onMounted(()=>{
+  let as = {
+    "brpNjId": 1,
+    "brpCtId": 1,
+    "brpCourseId": 1, 
+    "brpType": "course",
+    "brpProgress": 24
+  }
+    console.log(as);
+  saveRecord(as).then(res=>{
+    console.log(res);
+  })
+})
+
 // 互动完成率进度条数据
-const interactionProgressData = ref([
+const interactionData = ref([
   { id: 1, desc: "01 AI初体验", percentage: 50 },
   { id: 2, desc: "02 AI发展历史", percentage: 65 },
   { id: 3, desc: "03 AI与机器人", percentage: 40 },
@@ -108,14 +118,19 @@ const interactionProgressData = ref([
   { id: 7, desc: "07 AI如何学习", percentage: 45 },
   { id: 8, desc: "08 AI伦理安全", percentage: 0 },
 ]);
+
+
+
 </script>
 
 <style scoped lang="scss">
 @use "sass:math";
+
 // 定义rpx转换函数
 @function rpx($px) {
   @return math.div($px, 750) * 100vw;
 }
+
 .personalized {
   position: fixed;
   top: 0;
@@ -127,17 +142,23 @@ const interactionProgressData = ref([
   background-color: #e2ddfc;
   gap: rpx(0);
 }
+
 .title-container {
   width: 100%;
   height: rpx(30);
   font-size: rpx(10);
   cursor: pointer;
   color: black;
-  display: flex; /* 设置flex布局 */
-  align-items: center; /* 垂直居中 */
-  padding-left: rpx(15); /* 添加左侧内边距 */
-  gap: rpx(5); /* 设置图标和文字间距 */
+  display: flex;
+  /* 设置flex布局 */
+  align-items: center;
+  /* 垂直居中 */
+  padding-left: rpx(15);
+  /* 添加左侧内边距 */
+  gap: rpx(5);
+  /* 设置图标和文字间距 */
 }
+
 .report-container {
   // width: 100%;
   height: 100%;
@@ -145,6 +166,7 @@ const interactionProgressData = ref([
   gap: rpx(10);
   padding: rpx(20);
 }
+
 .left-box,
 .middle-box {
   flex: 1;
@@ -156,58 +178,73 @@ const interactionProgressData = ref([
   display: flex;
   flex-direction: column;
 }
+
 .left-top-box {
   background-color: #ffcf1199;
   display: flex;
-  align-items: center; /* 垂直居中 */
-  justify-content: center; /* 水平居中 */
+  align-items: center;
+  /* 垂直居中 */
+  justify-content: center;
+  /* 水平居中 */
   border-radius: rpx(8);
 }
+
 .text-content {
   text-align: center;
   color: #ff4d00;
 }
+
 .middle-content {
   text-align: center;
   color: #009b03;
 }
+
 .right-content {
   text-align: center;
   color: #4316ff;
 }
+
 .text-content p,
 .middle-content p,
 .right-content p {
   margin: 0;
   padding: 0;
 }
+
 .text-content p:first-child,
 .middle-content p:first-child,
 .right-content p:first-child {
   font-size: rpx(10);
 }
+
 .text-content p:nth-child(2),
 .middle-content p:nth-child(2),
 .right-content p:nth-child(2) {
   font-size: rpx(30);
   font-weight: 600;
 }
+
 .middle-top-box {
   background-color: #5aeb6b99;
   display: flex;
-  align-items: center; /* 垂直居中 */
-  justify-content: center; /* 水平居中 */
+  align-items: center;
+  /* 垂直居中 */
+  justify-content: center;
+  /* 水平居中 */
   border-radius: rpx(8);
 }
+
 .left-top-box,
 .middle-top-box {
   height: 30%; // 上盒子占据30%高度
   border-radius: rpx(8);
 }
+
 .left-bottom-box,
 .middle-bottom-box {
   flex: 1; // 下盒子占据剩余高度
 }
+
 .right-box {
   flex: 0.8;
   height: 100%;
@@ -215,6 +252,7 @@ const interactionProgressData = ref([
   flex-direction: column;
   gap: rpx(10);
 }
+
 .right-top-box {
   height: 30%; // 上盒子占据30%高度
   background: #a089ff80;
@@ -222,9 +260,12 @@ const interactionProgressData = ref([
   border: 1px solid white;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   display: flex;
-  align-items: center; /* 垂直居中 */
-  justify-content: center; /* 水平居中 */
+  align-items: center;
+  /* 垂直居中 */
+  justify-content: center;
+  /* 水平居中 */
 }
+
 .right-bottom-box {
   flex: 1; // 下盒子占据剩余高度
   background: rgb(255, 255, 255, 0.5);
@@ -232,22 +273,27 @@ const interactionProgressData = ref([
   border: 1px solid white;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
+
 // 课程开课率进度条
 .demo-progress {
   padding-left: rpx(10);
   padding-right: rpx(10);
   padding-bottom: rpx(3);
 }
+
 .demo-progress .el-progress--line,
 .middle-bottom-box .el-progress--line {
   margin-left: auto;
 }
+
 ::v-deep(.el-progress-bar__outer) {
   background-color: #fff;
 }
+
 ::v-deep(.el-progress-bar__inner) {
   background-color: #ffcf1199;
 }
+
 ::v-deep(.el-progress__text) {
   color: black;
   position: absolute;
@@ -255,12 +301,14 @@ const interactionProgressData = ref([
   right: 0;
   transform: translateY(-100%);
 }
+
 .progress-desc {
   font-size: rpx(8);
   color: black;
   margin-bottom: rpx(0);
   text-align: left;
 }
+
 // 互动完成率
 .middle-bottom-box ::v-deep(.el-progress-bar__inner) {
   background-color: #5aeb6b99;
@@ -275,6 +323,7 @@ const interactionProgressData = ref([
   font-size: rpx(8);
   padding-left: rpx(10);
 }
+
 .comment-content {
   border-radius: rpx(8);
   padding: rpx(10);
@@ -282,24 +331,29 @@ const interactionProgressData = ref([
   overflow-y: auto;
   text-align: justify;
 }
+
 .comment-content p {
   margin: 0;
   font-size: rpx(8);
   line-height: 1.5;
   color: #333;
 }
+
 // 修改滚动条样式
 .comment-content::-webkit-scrollbar {
   width: rpx(2); // 滚动条宽度
 }
+
 .comment-content::-webkit-scrollbar-track {
   background: #f1f1f1; // 滚动条轨道背景色
   border-radius: rpx(3);
 }
+
 .comment-content::-webkit-scrollbar-thumb {
   background: #8F74FF; // 滚动条滑块颜色
   border-radius: rpx(3); // 滚动条滑块圆角
 }
+
 .comment-content::-webkit-scrollbar-thumb:hover {
   background: #7a5dff; // 滚动条滑块悬停颜色
 }