知识图谱跳转

src/components/CommonPreview.vue

@@ -257,10 +257,10 @@
       :visible="visibleVisNetwork"
       width="1100px"
       class="audit-dialog"
-      @close="dialogClose('VisNetwork')"
       :close-on-click-modal="false"
+      @close="dialogClose('VisNetwork')"
     >
-      <VisNetwork ref="visNetworkRef" :book-id="projectId" />
+      <VisNetwork ref="visNetworkRef" :book-id="projectId" @child-click="handleNodeClick" />
     </el-dialog>
 
     <ExplanatoryNoteDialog
@@ -701,7 +701,6 @@ export default {
       }
       this.curToolbarIcon = icon;
     },
-
     openMindMap() {
       MangerGetBookMindMap({ book_id: this.projectId }).then(({ content }) => {
         if (content) {
@@ -711,9 +710,6 @@ export default {
       });
       this.visibleMindMap = true;
     },
-    async openVisNetwork() {
-      this.visibleVisNetwork = true;
-    },
     async handleNodeClick(data) {
       let [nodeId, componentId] = data.split('#');
       if (nodeId) this.selectNode(nodeId);
@@ -729,6 +725,10 @@ export default {
         }
       }
       this.visibleMindMap = false;
+      this.visibleVisNetwork = false;
+    },
+    async openVisNetwork() {
+      this.visibleVisNetwork = true;
     },
 
     // 计算抽屉滑出位置

src/components/VisNetwork.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="vis-network-container">
-    <div class="toolbar" v-if="isEdit">
+    <div v-if="isEdit" class="toolbar">
       说明：双击节点可以进行操作
       <el-button type="primary" @click="addNode">添加子节点</el-button>
       <el-button type="danger" @click="deleteNode">删除</el-button>
@@ -17,10 +17,10 @@
     >
       <el-form :model="editForm" label-width="80px">
         <el-form-item label="所属层级">
-          <el-input type="textarea" disabled v-model="editForm.fullPath"></el-input>
+          <el-input v-model="editForm.fullPath" type="textarea" disabled />
         </el-form-item>
         <el-form-item label="节点名称">
-          <el-input type="textarea" v-model="editForm.label" placeholder="请输入节点名称"></el-input>
+          <el-input v-model="editForm.label" type="textarea" placeholder="请输入节点名称" />
         </el-form-item>
 
         <el-form-item v-if="false" label="节点类型">
@@ -45,7 +45,7 @@
 <script>
 import { DataSet } from 'vis-data';
 import { Network } from 'vis-network';
-import { GetBookKnowledgeGraph, SaveBookKnowledgeGraph } from '@/api/book';
+import { GetBookKnowledgeGraph } from '@/api/book';
 export default {
   name: 'VisNetwork',
   props: {
@@ -102,8 +102,6 @@ export default {
     },
     init() {
       this.destroyNetwork();
-      let rootData = this.jsonData;
-      console.info(this.jsonData);
       this.initNetwork(this.jsonData.nodes, this.jsonData.edges);
     },
     destroyNetwork() {
@@ -123,7 +121,7 @@ export default {
       // 创建网络图
       const container = this.$refs.network;
 
-      var options = {
+      let options = {
         nodes: {
           shape: 'box',
           margin: 10,
@@ -132,7 +130,6 @@ export default {
             size: 14,
           },
           borderWidth: 2,
-          margin: 10,
         },
         edges: {
           width: 2,
@@ -182,6 +179,10 @@ export default {
       this.network.on('click', (params) => {
         if (params.nodes.length > 0) {
           const nodeId = params.nodes[0];
+          if (!this.isEdit) {
+            this.$emit('child-click', nodeId);
+            return;
+          }
           this.selectedNode = this.nodes.get(nodeId);
           this.editingNode = nodeId;
         } else {
@@ -218,9 +219,9 @@ export default {
           id: nodeId,
           label: node.data.text,
           type: node.data.type,
-          level: level,
+          level,
           fullPath: parentPath, // 保存所有父级路径，用->分隔
-          group: 'type' + (node.data.type || 0),
+          group: `type${node.data.type || 0}`,
         });
         // 创建边（如果有父节点）
         if (parentId) {
@@ -263,12 +264,12 @@ export default {
     },
     addOrUpdate(data) {
       if (!data) return;
-      var oldNodes = this.nodes.get();
-      var oldEdges = this.edges.get();
+      let oldNodes = this.nodes.get();
+      let oldEdges = this.edges.get();
       const node = this.nodes.get(data.id);
       if (node) {
-        oldNodes = oldNodes.filter((x) => x.id != node.id);
-        var newData = Object.assign({}, node, data);
+        oldNodes = oldNodes.filter((x) => x.id !== node.id);
+        let newData = Object.assign({}, node, data);
         oldNodes.push(newData);
       } else {
         oldNodes.push(data);
@@ -277,7 +278,7 @@ export default {
       this.positions = this.network.getPositions() || {};
       oldNodes.map((x) => {
         if (x.id && this.positions[x.id]) {
-          var tmpPosition = this.positions[x.id];
+          let tmpPosition = this.positions[x.id];
           x.x = tmpPosition.x;
           x.y = tmpPosition.y;
         }
@@ -290,20 +291,20 @@ export default {
         this.$message.error('请先选择父节点!');
         return;
       }
-      var newId = this.generateUniqueId();
+      let newId = this.generateUniqueId();
       const newNode = Object.assign(
         {},
         {
           id: newId,
           label: '新增节点',
-          fullPath: this.selectedNode.fullPath + '->' + this.selectedNode.label,
+          fullPath: `${this.selectedNode.fullPath}->${this.selectedNode.label}`,
           type: (this.selectedNode.type || 0) + 1,
           level: (this.selectedNode.level || 0) + 1,
-        }
+        },
       );
-      newNode.group = 'type' + newNode.type;
+      newNode.group = `type${newNode.type}`;
 
-      var newId = this.generateUniqueId();
+      newId = this.generateUniqueId();
       this.edges.add({
         id: newId,
         from: this.selectedNode.id,
@@ -311,7 +312,7 @@ export default {
         arrows: 'to',
       });
 
-      //this.nodes.add(newNode);
+      // this.nodes.add(newNode);
       this.addOrUpdate(newNode);
     },
 
@@ -355,33 +356,33 @@ export default {
     },
     saveData() {
       if (!this.hasData) return null;
-      var nodes = this.nodes.get();
-      var edges = this.edges.get();
+      let nodes = this.nodes.get();
+      let edges = this.edges.get();
       this.positions = this.network.getPositions() || {};
       nodes.map((x) => {
         if (x.id && this.positions[x.id]) {
-          var tmpPosition = this.positions[x.id];
+          let tmpPosition = this.positions[x.id];
           x.x = tmpPosition.x;
           x.y = tmpPosition.y;
         }
       });
-      return { nodes: nodes, edges: edges };
+      return { nodes, edges };
     },
     generateUniqueId() {
       return Date.now() + Math.random().toString(36).substr(2, 9);
     },
 
     convertToVisNetworkData(res) {
-      if (res && res.status == 1) {
+      if (res && res.status === 1) {
         this.loadingTitle = '数据渲染中...';
         if (res.content_node && res.content_edge) {
-          var nodes = (JSON.parse(res.content_node) || {}).nodes;
-          var edges = (JSON.parse(res.content_edge) || {}).edges;
-          nodes.map((x) => (x.group = 'type' + (x.type || 0)));
-          //nodes=nodes.filter(x=>x.level<4)
+          let nodes = (JSON.parse(res.content_node) || {}).nodes;
+          let edges = (JSON.parse(res.content_edge) || {}).edges;
+          nodes.map((x) => (x.group = `type${x.type || 0}`));
+          // nodes=nodes.filter(x=>x.level<4)
           this.jsonData = {
-            nodes: nodes,
-            edges: edges,
+            nodes,
+            edges,
           };
           this.hasData = true;
           this.init();