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

<template>
  <div class="knowledge_graph">
    <!-- 环形扩散图组件 -->
    <circular-diffusion
      :activeView="activeView"
      :subjectName="subjectName"
      :subjectScoreRate="subjectScoreRate"
      :tableData="tableData"
      :fatalVulnerability="fatalVulnerability"
      :highVulnerability="highVulnerability"
      :allKnowledgeList="allKnowledgeList"
      :classLevel="classLevel"
      :classGroupName="classGroupName"
      :currentKnowledgeId="currentKnowledgeId"
      @view-change="handleViewChange"
      @legend-change="handleLegendChange"
      @activeTabChange="handleActiveTabChange"
      @knowledge-item-click="handleKnowledgeItemClick"
    />

    <!-- 区域展示组件 -->
    <region
      v-if="showRegion"
      :allKnowledgeList="allKnowledgeList"
      @add-practice="handleAddPractice"
    />
  </div>
</template>

<script>
import CircularDiffusion from './knowledgeGraph/circularDiffusion.vue';
import Region from './knowledgeGraph/region.vue';

export default {
  name: 'KnowledgeGraph',
  components: {
    CircularDiffusion,
    Region
  },
  props: {
    activeView: {
      type: String,
      default: 'graph'
    },
    subjectName: {
      type: String,
      default: '知识点'
    },
    subjectScoreRate: {
      type: Number,
      default: 0
    },
    tableData: {
      type: Array,
      default: () => []
    },
    fatalVulnerability: {
      type: Array,
      default: () => []
    },
    highVulnerability: {
      type: Array,
      default: () => []
    },
    allKnowledgeList: {
      type: Array,
      default: () => []
    },
    classLevel: {
      type: [String, Number],
      default: ''
    },
    classGroupName: {
      type: String,
      default: ''
    },
    currentKnowledgeId: {
      type: [String, Number],
      default: ''
    },
    showRegion: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 处理视图切换
    handleViewChange(view) {
      this.$emit('view-change', view);
    },
    
    // 处理图例变化
    handleLegendChange(data) {
      this.$emit('legend-change', data);
    },
    
    // 处理tab切换
    handleActiveTabChange(tab) {
      this.$emit('activeTabChange', tab);
    },
    
    // 处理知识点点击
    handleKnowledgeItemClick(data) {
      this.$emit('knowledge-item-click', data);
    },
    
    // 处理加入练习
    handleAddPractice(item) {
      this.$emit('add-practice', item);
    }
  }
};
</script>

<style lang="scss" scoped>
.knowledge_graph {
  width: 100%;
}
</style>