修改知识点图谱

src/views/targetImprove/practice/knowledgeGraph.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="knowledge_graph">
+  <div class="knowledge_graph" ref="knowledgeGraph" :style="{ maxHeight: containerHeight + 'px' }">
     <!-- 环形扩散图组件 -->
     <circular-diffusion
       :activeView="activeView"
       :subjectName="subjectName"
       :subjectScoreRate="subjectScoreRate"
-      :tableData="tableData"
-      :fatalVulnerability="fatalVulnerability"
-      :highVulnerability="highVulnerability"
-      :allKnowledgeList="allKnowledgeList"
+      :tableData="displayTableData"
+      :fatalVulnerability="displayFatalVulnerability"
+      :highVulnerability="displayHighVulnerability"
+      :allKnowledgeList="displayAllKnowledgeList"
       :classLevel="classLevel"
       :classGroupName="classGroupName"
       :currentKnowledgeId="currentKnowledgeId"
@@ -20,8 +20,7 @@
 
     <!-- 区域展示组件 -->
     <region
-      v-if="showRegion"
-      :allKnowledgeList="allKnowledgeList"
+      :allKnowledgeList="displayAllKnowledgeList"
       @add-practice="handleAddPractice"
     />
   </div>
@@ -44,11 +43,11 @@ export default {
     },
     subjectName: {
       type: String,
-      default: '知识点'
+      default: '数学知识点'
     },
     subjectScoreRate: {
       type: Number,
-      default: 0
+      default: 85
     },
     tableData: {
       type: Array,
@@ -80,10 +79,257 @@ export default {
     },
     showRegion: {
       type: Boolean,
-      default: false
+      default: true
     }
   },
+  data() {
+    return {
+      // 容器最大高度
+      containerHeight: 600,
+      // 假数据：表格树形结构数据（用于图表渲染）
+      // knowledgeType: 1=薄弱(红色), 2=良好(黄色), 3=优秀(绿色)
+      // gradeScoreRate: 年级得分率，用于判断节点是否有数据
+      // examNum: 考试次数，questionNum: 题目数量
+      mockTableData: [
+        {
+          knowledgeId: '1',
+          knowledgeName: '函数与方程',
+          knowledgeType: 1,
+          gradeScoreRate: 45,
+          classScoreRate: 45,
+          examNum: 8,
+          questionNum: 120,
+          scoreRateDiff: -5,
+          children: [
+            {
+              knowledgeId: '1-1',
+              knowledgeName: '一元二次方程',
+              knowledgeType: 1,
+              gradeScoreRate: 35,
+              classScoreRate: 35,
+              examNum: 5,
+              questionNum: 60,
+              scoreRateDiff: -10,
+              children: []
+            },
+            {
+              knowledgeId: '1-2',
+              knowledgeName: '函数图像',
+              knowledgeType: 1,
+              gradeScoreRate: 55,
+              classScoreRate: 55,
+              examNum: 3,
+              questionNum: 40,
+              scoreRateDiff: -2,
+              children: []
+            }
+          ]
+        },
+        {
+          knowledgeId: '2',
+          knowledgeName: '几何图形',
+          knowledgeType: 2,
+          gradeScoreRate: 72,
+          classScoreRate: 72,
+          examNum: 4,
+          questionNum: 80,
+          scoreRateDiff: 3,
+          children: [
+            {
+              knowledgeId: '2-1',
+              knowledgeName: '三角形',
+              knowledgeType: 2,
+              gradeScoreRate: 68,
+              classScoreRate: 68,
+              examNum: 2,
+              questionNum: 30,
+              scoreRateDiff: 2,
+              children: []
+            },
+            {
+              knowledgeId: '2-2',
+              knowledgeName: '圆的性质',
+              knowledgeType: 2,
+              gradeScoreRate: 78,
+              classScoreRate: 78,
+              examNum: 2,
+              questionNum: 50,
+              scoreRateDiff: 5,
+              children: []
+            }
+          ]
+        },
+        {
+          knowledgeId: '3',
+          knowledgeName: '概率统计',
+          knowledgeType: 3,
+          gradeScoreRate: 90,
+          classScoreRate: 90,
+          examNum: 1,
+          questionNum: 25,
+          scoreRateDiff: 8,
+          children: [
+            {
+              knowledgeId: '3-1',
+              knowledgeName: '数据分析',
+              knowledgeType: 3,
+              gradeScoreRate: 92,
+              classScoreRate: 92,
+              examNum: 1,
+              questionNum: 15,
+              scoreRateDiff: 10,
+              children: []
+            },
+            {
+              knowledgeId: '3-2',
+              knowledgeName: '概率计算',
+              knowledgeType: 3,
+              gradeScoreRate: 88,
+              classScoreRate: 88,
+              examNum: 1,
+              questionNum: 10,
+              scoreRateDiff: 6,
+              children: []
+            }
+          ]
+        },
+        {
+          knowledgeId: '4',
+          knowledgeName: '数列',
+          knowledgeType: 2,
+          gradeScoreRate: 65,
+          classScoreRate: 65,
+          examNum: 6,
+          questionNum: 90,
+          scoreRateDiff: 1,
+          children: []
+        },
+        {
+          knowledgeId: '5',
+          knowledgeName: '立体几何',
+          knowledgeType: 1,
+          gradeScoreRate: 50,
+          classScoreRate: 50,
+          examNum: 7,
+          questionNum: 100,
+          scoreRateDiff: -3,
+          children: []
+        },
+        {
+          knowledgeId: '6',
+          knowledgeName: '向量',
+          knowledgeType: 2,
+          gradeScoreRate: 82,
+          classScoreRate: 82,
+          examNum: 3,
+          questionNum: 45,
+          scoreRateDiff: 4,
+          children: []
+        },
+        {
+          knowledgeId: '7',
+          knowledgeName: '导数应用',
+          knowledgeType: 3,
+          gradeScoreRate: 95,
+          classScoreRate: 95,
+          examNum: 2,
+          questionNum: 20,
+          scoreRateDiff: 12,
+          children: []
+        },
+        {
+          knowledgeId: '8',
+          knowledgeName: '不等式',
+          knowledgeType: 1,
+          gradeScoreRate: 58,
+          classScoreRate: 58,
+          examNum: 5,
+          questionNum: 75,
+          scoreRateDiff: -1,
+          children: []
+        }
+      ]
+    };
+  },
+  computed: {
+    // 实际显示的表格数据：props为空时使用假数据
+    displayTableData() {
+      if (this.tableData && this.tableData.length > 0) {
+        return this.tableData;
+      }
+      return this.mockTableData;
+    },
+    // 实际显示的零分知识点数据
+    displayFatalVulnerability() {
+      if (this.fatalVulnerability && this.fatalVulnerability.length > 0) {
+        return this.fatalVulnerability;
+      }
+      // 假数据：零分知识点
+      return [
+        { knowledgeId: '1-1', knowledgeName: '一元二次方程', knowledgeType: 1, gradeScoreRate: 35, classScoreRate: 35, examNum: 5, questionNum: 60, scoreRateDiff: -10 },
+        { knowledgeId: '5', knowledgeName: '立体几何', knowledgeType: 1, gradeScoreRate: 50, classScoreRate: 50, examNum: 7, questionNum: 100, scoreRateDiff: -3 },
+        { knowledgeId: '8', knowledgeName: '不等式', knowledgeType: 1, gradeScoreRate: 58, classScoreRate: 58, examNum: 5, questionNum: 75, scoreRateDiff: -1 }
+      ];
+    },
+    // 实际显示的高频错题知识点数据
+    displayHighVulnerability() {
+      if (this.highVulnerability && this.highVulnerability.length > 0) {
+        return this.highVulnerability;
+      }
+      // 假数据：高频错题知识点
+      return [
+        { knowledgeId: '1', knowledgeName: '函数与方程', knowledgeType: 1, gradeScoreRate: 45, classScoreRate: 45, examNum: 8, questionNum: 120, scoreRateDiff: -5 },
+        { knowledgeId: '4', knowledgeName: '数列', knowledgeType: 2, gradeScoreRate: 65, classScoreRate: 65, examNum: 6, questionNum: 90, scoreRateDiff: 1 },
+        { knowledgeId: '2-1', knowledgeName: '三角形', knowledgeType: 2, gradeScoreRate: 68, classScoreRate: 68, examNum: 2, questionNum: 30, scoreRateDiff: 2 },
+        { knowledgeId: '2-2', knowledgeName: '圆的性质', knowledgeType: 2, gradeScoreRate: 78, classScoreRate: 78, examNum: 2, questionNum: 50, scoreRateDiff: 5 }
+      ];
+    },
+    // 实际显示的全部知识点数据
+    displayAllKnowledgeList() {
+      if (this.allKnowledgeList && this.allKnowledgeList.length > 0) {
+        return this.allKnowledgeList;
+      }
+      // 假数据：全部知识点（扁平化结构，用于列表显示和区域展示）
+      return [
+        { knowledgeId: '1', knowledgeName: '函数与方程', knowledgeType: 1, gradeScoreRate: 45, classScoreRate: 45, examNum: 8, questionNum: 120, scoreRateDiff: -5 },
+        { knowledgeId: '1-1', knowledgeName: '一元二次方程', knowledgeType: 1, gradeScoreRate: 35, classScoreRate: 35, examNum: 5, questionNum: 60, scoreRateDiff: -10 },
+        { knowledgeId: '1-2', knowledgeName: '函数图像', knowledgeType: 1, gradeScoreRate: 55, classScoreRate: 55, examNum: 3, questionNum: 40, scoreRateDiff: -2 },
+        { knowledgeId: '2', knowledgeName: '几何图形', knowledgeType: 2, gradeScoreRate: 72, classScoreRate: 72, examNum: 4, questionNum: 80, scoreRateDiff: 3 },
+        { knowledgeId: '2-1', knowledgeName: '三角形', knowledgeType: 2, gradeScoreRate: 68, classScoreRate: 68, examNum: 2, questionNum: 30, scoreRateDiff: 2 },
+        { knowledgeId: '2-2', knowledgeName: '圆的性质', knowledgeType: 2, gradeScoreRate: 78, classScoreRate: 78, examNum: 2, questionNum: 50, scoreRateDiff: 5 },
+        { knowledgeId: '3', knowledgeName: '概率统计', knowledgeType: 3, gradeScoreRate: 90, classScoreRate: 90, examNum: 1, questionNum: 25, scoreRateDiff: 8 },
+        { knowledgeId: '3-1', knowledgeName: '数据分析', knowledgeType: 3, gradeScoreRate: 92, classScoreRate: 92, examNum: 1, questionNum: 15, scoreRateDiff: 10 },
+        { knowledgeId: '3-2', knowledgeName: '概率计算', knowledgeType: 3, gradeScoreRate: 88, classScoreRate: 88, examNum: 1, questionNum: 10, scoreRateDiff: 6 },
+        { knowledgeId: '4', knowledgeName: '数列', knowledgeType: 2, gradeScoreRate: 65, classScoreRate: 65, examNum: 6, questionNum: 90, scoreRateDiff: 1 },
+        { knowledgeId: '5', knowledgeName: '立体几何', knowledgeType: 1, gradeScoreRate: 50, classScoreRate: 50, examNum: 7, questionNum: 100, scoreRateDiff: -3 },
+        { knowledgeId: '6', knowledgeName: '向量', knowledgeType: 2, gradeScoreRate: 82, classScoreRate: 82, examNum: 3, questionNum: 45, scoreRateDiff: 4 },
+        { knowledgeId: '7', knowledgeName: '导数应用', knowledgeType: 3, gradeScoreRate: 95, classScoreRate: 95, examNum: 2, questionNum: 20, scoreRateDiff: 12 },
+        { knowledgeId: '8', knowledgeName: '不等式', knowledgeType: 1, gradeScoreRate: 58, classScoreRate: 58, examNum: 5, questionNum: 75, scoreRateDiff: -1 }
+      ];
+    }
+  },
+  mounted() {
+    // 初始化容器高度
+    this.calculateContainerHeight();
+    // 监听窗口大小变化
+    window.addEventListener('resize', this.calculateContainerHeight);
+  },
+  beforeDestroy() {
+    // 移除窗口大小变化监听
+    window.removeEventListener('resize', this.calculateContainerHeight);
+  },
   methods: {
+    // 计算容器高度
+    calculateContainerHeight() {
+      if (this.$refs.knowledgeGraph) {
+        // 获取容器距离视口顶部的距离
+        const rect = this.$refs.knowledgeGraph.getBoundingClientRect();
+        // 计算容器最大高度：窗口高度 - 容器距离顶部的距离 - 底部留白
+        const maxHeight = window.innerHeight - rect.top - 20;
+        // 设置最小高度为400px
+        this.containerHeight = Math.max(maxHeight, 400);
+      }
+    },
     // 处理视图切换
     handleViewChange(view) {
       this.$emit('view-change', view);
@@ -114,6 +360,26 @@ export default {
 
 <style lang="scss" scoped>
 .knowledge_graph {
-  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* 自定义滚动条样式 */
+.knowledge_graph::-webkit-scrollbar {
+  width: 6px;
+}
+
+.knowledge_graph::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.knowledge_graph::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+
+  &:hover {
+    background: #a8a8a8;
+  }
 }
 </style>

src/views/targetImprove/practice/knowledgeGraph/region.vue

@@ -17,8 +17,8 @@
             <span class="knowledge-name">{{ item.knowledgeName }}</span>
           </div>
           <div class="card-info">
-            <span class="score-rate">得分率：{{ item.personalScoreRate || 0 }}%</span>
-            <span class="wrong-count">错题：{{ item.wrongCount || 0 }}</span>
+            <span class="score-rate">得分率：{{ getScoreRate(item) }}%</span>
+            <span class="wrong-count">错题：{{ item.wrongCount || item.questionNum || 0 }}</span>
           </div>
           <div class="card-action">
             <el-button type="primary" size="small" @click="handleAddPractice(item)">加入练习</el-button>
@@ -44,8 +44,8 @@
             <span class="knowledge-name">{{ item.knowledgeName }}</span>
           </div>
           <div class="card-info">
-            <span class="score-rate">得分率：{{ item.personalScoreRate || 0 }}%</span>
-            <span class="wrong-count">错题：{{ item.wrongCount || 0 }}</span>
+            <span class="score-rate">得分率：{{ getScoreRate(item) }}%</span>
+            <span class="wrong-count">错题：{{ item.wrongCount || item.questionNum || 0 }}</span>
           </div>
           <div class="card-action">
             <el-button type="warning" size="small" @click="handleAddPractice(item)">加入练习</el-button>
@@ -71,8 +71,8 @@
             <span class="knowledge-name">{{ item.knowledgeName }}</span>
           </div>
           <div class="card-info">
-            <span class="score-rate">得分率：{{ item.personalScoreRate || 0 }}%</span>
-            <span class="wrong-count">错题：{{ item.wrongCount || 0 }}</span>
+            <span class="score-rate">得分率：{{ getScoreRate(item) }}%</span>
+            <span class="wrong-count">错题：{{ item.wrongCount || item.questionNum || 0 }}</span>
           </div>
           <div class="card-action">
             <el-button type="success" size="small" @click="handleAddPractice(item)">加入练习</el-button>
@@ -98,8 +98,8 @@
             <span class="knowledge-name">{{ item.knowledgeName }}</span>
           </div>
           <div class="card-info">
-            <span class="score-rate">得分率：{{ item.personalScoreRate || 0 }}%</span>
-            <span class="wrong-count">错题：{{ item.wrongCount || 0 }}</span>
+            <span class="score-rate">得分率：{{ getScoreRate(item) }}%</span>
+            <span class="wrong-count">错题：{{ item.wrongCount || item.questionNum || 0 }}</span>
           </div>
           <div class="card-action">
             <el-button type="primary" size="small" @click="handleAddPractice(item)">加入练习</el-button>
@@ -124,21 +124,21 @@ export default {
     // 薄弱补强区：得分率 < 60%
     weakArea() {
       return this.allKnowledgeList.filter(item => {
-        const rate = parseFloat(item.personalScoreRate);
+        const rate = parseFloat(this.getScoreRate(item));
         return !isNaN(rate) && rate < 60;
       });
     },
     // 能力提升区：60% ≤ 得分率 < 85%
     goodArea() {
       return this.allKnowledgeList.filter(item => {
-        const rate = parseFloat(item.personalScoreRate);
+        const rate = parseFloat(this.getScoreRate(item));
         return !isNaN(rate) && rate >= 60 && rate < 85;
       });
     },
     // 扎实巩固区：得分率 ≥ 85%
     excellentArea() {
       return this.allKnowledgeList.filter(item => {
-        const rate = parseFloat(item.personalScoreRate);
+        const rate = parseFloat(this.getScoreRate(item));
         return !isNaN(rate) && rate >= 85;
       });
     },
@@ -148,6 +148,10 @@ export default {
     }
   },
   methods: {
+    // 获取得分率（优先使用 gradeScoreRate，其次使用 classScoreRate）
+    getScoreRate(item) {
+      return item.gradeScoreRate || item.classScoreRate || item.personalScoreRate || 0;
+    },
     // 处理加入练习
     handleAddPractice(item) {
       this.$emit('add-practice', item);
@@ -159,31 +163,34 @@ export default {
 <style lang="scss" scoped>
 .region-container {
   display: flex;
-  flex-direction: column;
-  gap: 20px;
-  padding: 20px;
+  flex-direction: row;
+  gap: 16px;
+  padding: 16px;
 }
 
 .region-section {
-  border-radius: 12px;
-  padding: 20px;
+  flex: 1;
+  border-radius: 8px;
+  padding: 16px;
   background: #FFFFFF;
-  position: relative;
+  display: flex;
+  flex-direction: column;
+  max-height: 500px;
 
   &.weak {
-    border: 2px solid #EE6666;
+    border: 1px solid rgba(238, 102, 102, 0.5);
   }
 
   &.good {
-    border: 2px solid #FAC858;
+    border: 1px solid rgba(250, 200, 88, 0.5);
   }
 
   &.excellent {
-    border: 2px solid #3BA272;
+    border: 1px solid rgba(59, 162, 114, 0.5);
   }
 
   &.advanced {
-    border: 2px solid #2E64FA;
+    border: 1px solid rgba(46, 100, 250, 0.5);
   }
 }
 
@@ -192,6 +199,8 @@ export default {
   align-items: center;
   gap: 8px;
   margin-bottom: 4px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
 
   .region-icon {
     display: flex;
@@ -199,8 +208,8 @@ export default {
     justify-content: center;
 
     svg {
-      width: 20px;
-      height: 20px;
+      width: 18px;
+      height: 18px;
     }
   }
 
@@ -221,45 +230,53 @@ export default {
   }
 
   .region-title {
-    font-size: 18px;
+    font-size: 16px;
     font-weight: 600;
     color: #333333;
   }
 }
 
 .region-desc {
-  font-size: 14px;
+  font-size: 12px;
   color: #999999;
-  margin-bottom: 16px;
-  padding-left: 28px;
+  margin-bottom: 12px;
+  padding-top: 4px;
 }
 
 .knowledge-cards {
   display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
+  flex-direction: column;
+  gap: 8px;
+  overflow-y: auto;
+  flex: 1;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #ddd;
+    border-radius: 2px;
+  }
 }
 
 .knowledge-card {
   border: 1px solid #ECEEF3;
-  border-radius: 8px;
-  padding: 12px 16px;
+  border-radius: 6px;
+  padding: 10px 12px;
   background: #FFFFFF;
-  min-width: 200px;
-  flex: 1;
-  max-width: calc(25% - 12px);
-  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  transition: all 0.2s ease;
 
   &:hover {
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-    transform: translateY(-2px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   }
 
   .card-header {
-    margin-bottom: 8px;
-
     .knowledge-name {
-      font-size: 14px;
+      font-size: 13px;
       font-weight: 500;
       color: #333333;
       display: block;
@@ -271,19 +288,21 @@ export default {
 
   .card-info {
     display: flex;
-    gap: 16px;
-    margin-bottom: 10px;
+    gap: 12px;
 
     .score-rate,
     .wrong-count {
-      font-size: 12px;
+      font-size: 11px;
       color: #666666;
     }
   }
 
   .card-action {
+    text-align: right;
+
     .el-button {
-      width: 100%;
+      padding: 6px 12px;
+      font-size: 12px;
     }
   }
 }