eep_page/src/views/project_manage/project/ProjectVisNetwork.vue

<template>
  <div class="project-mind-map">
    <MenuPage cur-key="/project_manage/project" />

    <div class="project-mind-map__header">
      <span class="name">{{ project_info.name }}</span>
      <div class="courseware">
        <div class="operator flex">
          <span class="link" @click="getMangerGenerateVisNetworkByBook">根据教材内容生成知识图谱</span>
          <span class="link" @click="saveBookVisnetwork">保存</span>
          <span class="link" @click="goBackBookList">返回项目列表</span>
        </div>
      </div>
    </div>
    <p v-if="isWaiting" class="waiting">数据生成中...请等待</p>
    <VisNetwork v-if="isChildDataLoad" ref="visNetworRef" :book-id="book_id" :is-edit="true" />
  </div>
</template>

<script>
import MenuPage from '@/views/personal_workbench/common/menu.vue';
import VisNetwork from '@/components/VisNetwork.vue';
import { GetProjectBaseInfo } from '@/api/project';
import { MangerGenerateKnowledgeGraphByBookContent, SaveBookKnowledgeGraph } from '@/api/book';

export default {
  name: 'ProjectVisNetwork',
  components: {
    MenuPage,
    VisNetwork,
  },
  data() {
    return {
      project_id: this.$route.params.projectId || '',
      book_id: '',
      project_info: {}, // 项目基本信息
      isWaiting: false,
      isChildDataLoad: false,
      jsonData: '',
    };
  },
  created() {
    this.getProjectBaseInfo();
  },
  methods: {
    goBackBookList() {
      this.$router.push({ path: `/project_manage/project` });
    },
    /**
     * 获取项目基本信息
     * @param {string} id - 项目ID
     */
    getProjectBaseInfo() {
      GetProjectBaseInfo({ id: this.project_id }).then(({ project_info, book_info_PBE }) => {
        this.project_info = project_info;
        this.book_id = book_info_PBE.id;
        this.isChildDataLoad = true;
      });
    },
    /**
     * 生成知识图谱
     * @param {string} id - 教材ID
     */
    getMangerGenerateVisNetworkByBook() {
      this.isChildDataLoad = false;
      this.isWaiting = true;
      MangerGenerateKnowledgeGraphByBookContent({ book_id: this.book_id }).then((res) => {
        if (res && res.status === 1) {
          this.isChildDataLoad = true;
          this.isWaiting = false;
        }
      });
    },
    saveBookVisnetwork() {
      let data = this.$refs?.visNetworRef.saveData();
      if (!data) {
        this.$message.error('请先生成数据');
        return;
      }
      let node = { nodes: data.nodes };
      let edge = { edges: data.edges };
      const loading = this.$loading({
        lock: true,
        text: '保存中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      SaveBookKnowledgeGraph({
        book_id: this.book_id,
        content_node: JSON.stringify(node),
        content_edge: JSON.stringify(edge),
      }).then(() => {
        this.$message.success('保存成功');
        loading.close();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.project-mind-map {
  @include page-content(true);

  &__header {
    .name {
      width: 240px;
      font-size: 16px;
      font-weight: bold;
      border-right: $border;
    }

    .operator {
      display: flex;
      flex: 1;
      justify-content: flex-end;
    }
  }

  .waiting {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    height: calc(100vh - 250px);
  }
}
</style>