AIClass/src/views/personalized/Personalized.vue

<template>
  <div class="personalized">
    <!-- 标题 -->
    <div class="title-container" @click="goBack">
      <el-icon>
        <ArrowLeftBold />
      </el-icon>
      评估报告
    </div>
    <!-- 评估报告内容 -->
    <div class="report-container">
      <!-- 课程开课率 -->
      <div class="left-box">
        <div class="left-top-box">
          <div class="text-content">
            <p>课程开课率</p>
            <p>50%</p>
          </div>
        </div>
        <!-- 进度条 -->
        <div class="left-bottom-box">
          <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>
        </div>
      </div>

      <!-- 互动完成率 -->
      <div class="middle-box">
        <div class="middle-top-box">
          <div class="middle-content">
            <p>互动完成率</p>
            <p>68%</p>
          </div>
        </div>
        <div class="middle-bottom-box">
          <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>
        </div>
      </div>

      <div class="right-box">
        <!-- 问答次数 -->
        <div class="right-top-box">
          <div class="right-content">
            <p>AI问答次数</p>
            <p>172</p>
          </div>
        </div>
        <!-- 评语 -->
        <div class="right-bottom-box">
          <div class="comment-title">
            <p>评语</p>
          </div>
          <div class="comment-content">
            <p>
              教师在AI通识课程的教学中展现出高度的专业素养与教学创新能力，能够有效结合理论知识与实际应用，激发学生对人工智能的兴趣与探索欲望。教学成果呈现出良好的结构性与针对性，课程内容紧贴时代发展，注重培养学生的跨学科思维与技术素养。在引导学生进行项目实践和思辨讨论方面，展现了出色的教学引导与组织能力，达成了“知AI、懂AI、用AI”的教学目标，成果显著，广受学生好评。
              教师在AI通识课程的教学中展现出高度的专业素养与教学创新能力，能够有效结合理论知识与实际应用，激发学生对人工智能的兴趣与探索欲望。教学成果呈现出良好的结构性与针对性，课程内容紧贴时代发展，注重培养学生的跨学科思维与技术素养。在引导学生进行项目实践和思辨讨论方面，展现了出色的教学引导与组织能力，达成了“知AI、懂AI、用AI”的教学目标，成果显著，广受学生好评。
              教师在AI通识课程的教学中展现出高度的专业素养与教学创新能力，能够有效结合理论知识与实际应用，激发学生对人工智能的兴趣与探索欲望。教学成果呈现出良好的结构性与针对性，课程内容紧贴时代发展，注重培养学生的跨学科思维与技术素养。在引导学生进行项目实践和思辨讨论方面，展现了出色的教学引导与组织能力，达成了“知AI、懂AI、用AI”的教学目标，成果显著，广受学生好评。
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
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();

// 返回首页
const goBack = () => {
  router.back();
};

// 课程开课率进度条数据
const progressData = ref([
  { id: 1, desc: "01 AI初体验", percentage: 50 },
  { id: 2, desc: "02 AI发展历史", percentage: 65 },
  { id: 3, desc: "03 AI与机器人", percentage: 40 },
  { id: 4, desc: "04 AI的超级大脑", percentage: 75 },
  { id: 5, desc: "05 AI的智能应用", percentage: 60 },
  { id: 6, desc: "06 AI的数据表征与感知智能", percentage: 80 },
  { id: 7, desc: "07 AI如何学习", percentage: 45 },
  { 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 interactionData = ref([
  { id: 1, desc: "01 AI初体验", percentage: 50 },
  { id: 2, desc: "02 AI发展历史", percentage: 65 },
  { id: 3, desc: "03 AI与机器人", percentage: 40 },
  { id: 4, desc: "04 AI的超级大脑", percentage: 75 },
  { id: 5, desc: "05 AI的智能应用", percentage: 60 },
  { id: 6, desc: "06 AI的数据表征与感知智能", percentage: 80 },
  { 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;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  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);
  /* 设置图标和文字间距 */
}

.report-container {
  // width: 100%;
  height: 100%;
  display: flex;
  gap: rpx(10);
  padding: rpx(20);
}

.left-box,
.middle-box {
  flex: 1;
  height: 100%;
  background: rgb(255, 255, 255, 0.5);
  border: 1px solid white;
  border-radius: rpx(10);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.left-top-box {
  background-color: #ffcf1199;
  display: flex;
  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;
  /* 水平居中 */
  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%;
  display: flex;
  flex-direction: column;
  gap: rpx(10);
}

.right-top-box {
  height: 30%; // 上盒子占据30%高度
  background: #a089ff80;
  border-radius: rpx(8);
  border: 1px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
}

.right-bottom-box {
  flex: 1; // 下盒子占据剩余高度
  background: rgb(255, 255, 255, 0.5);
  border-radius: rpx(8);
  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;
  top: -10px;
  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;
}

// 评语样式
.comment-title {
  width: 100%;
  text-align: left;
  margin-bottom: rpx(10);
  color: #8F74FF;
  font-size: rpx(8);
  padding-left: rpx(10);
}

.comment-content {
  border-radius: rpx(8);
  padding: rpx(10);
  height: rpx(150);
  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; // 滚动条滑块悬停颜色
}
</style>