|
|
@@ -1,6 +1,6 @@
|
|
|
<script setup lang="ts">
|
|
|
import { computed, onMounted, ref, type Ref } from "vue";
|
|
|
-import G6, { type Graph, type Item } from '@antv/g6';
|
|
|
+import G6, { type Graph, type Item, type NodeConfig } from '@antv/g6';
|
|
|
import type { SearchResult } from "@/types/search.types";
|
|
|
import type { Request } from "@/types/knowledgeGraph.types";
|
|
|
import SearchResultList from "../search/components/SearchResultList.vue";
|
|
|
@@ -36,7 +36,10 @@ function find(request: Request) {
|
|
|
knowledgeGraphService.find(request).then((nodes) => {
|
|
|
graphDataManager.addSubjectNodes(nodes);
|
|
|
if (graph && nodes.length > 0) {
|
|
|
- graph.read(graphDataManager.getGraphData() as any)
|
|
|
+ graph.changeData(graphDataManager.getGraphData())
|
|
|
+ graph.render()
|
|
|
+ graph.layout()
|
|
|
+ // graph.read(graphDataManager.getGraphData() as any)
|
|
|
}
|
|
|
msgHandler()
|
|
|
}).catch(() => {
|
|
|
@@ -44,12 +47,12 @@ function find(request: Request) {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
-function findParents(name: string) {
|
|
|
- find({name, size: 10, findParents: true, findChildren: false})
|
|
|
+function findParents(id: number) {
|
|
|
+ find({name: '', id, size: 10, findParents: true, findChildren: false})
|
|
|
}
|
|
|
|
|
|
-function findChildren(name: string) {
|
|
|
- find({name, size: 10, findParents: false, findChildren: true})
|
|
|
+function findChildren(id: number) {
|
|
|
+ find({name: '', id, size: 10, findParents: false, findChildren: true})
|
|
|
}
|
|
|
|
|
|
function findName(name: string) {
|
|
|
@@ -101,12 +104,12 @@ const menu = new G6.Menu({
|
|
|
},
|
|
|
handleMenuClick(target: HTMLElement, item: Item) {
|
|
|
const menuName = target.getAttribute("name")
|
|
|
- const model = item.getModel()
|
|
|
+ const model = item.getModel() as NodeConfig
|
|
|
if (model.label) {
|
|
|
if (menuName == 'parent') {
|
|
|
- findParents(model.label as string)
|
|
|
+ if (model.nodeId) findParents(model.nodeId as number)
|
|
|
} else if (menuName == 'child') {
|
|
|
- findChildren(model.label as string)
|
|
|
+ if (model.nodeId) findChildren(model.nodeId as number)
|
|
|
} else if (menuName == 'search') {
|
|
|
searchNodeName.value = model.label as string
|
|
|
searchSubject(searchNodeName.value)
|
|
|
@@ -115,13 +118,17 @@ const menu = new G6.Menu({
|
|
|
},
|
|
|
});
|
|
|
|
|
|
-function initGraph() {
|
|
|
+function initGraph(width: number, height: number) {
|
|
|
const graph = new G6.Graph({
|
|
|
container: 'graph',
|
|
|
+ width: width,
|
|
|
+ height: height,
|
|
|
layout: {
|
|
|
- type: 'forceAtlas2',
|
|
|
+ type: 'force',
|
|
|
preventOverlap: true,
|
|
|
- kr: 20,
|
|
|
+ linkDistance: 150,
|
|
|
+ nodeStrength: 150,
|
|
|
+ nodeSize: 80,
|
|
|
},
|
|
|
modes: {
|
|
|
// 允许拖拽画布、放缩画布、拖拽节点
|
|
|
@@ -179,8 +186,11 @@ function onSearch() {
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
|
- graph = initGraph()
|
|
|
- findName("")
|
|
|
+ const rect = document.getElementById("graph")?.getBoundingClientRect()
|
|
|
+ if (rect) {
|
|
|
+ graph = initGraph(rect.width, rect.height)
|
|
|
+ findName("")
|
|
|
+ }
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
@@ -244,7 +254,7 @@ onMounted(() => {
|
|
|
}
|
|
|
|
|
|
.graph-wrap {
|
|
|
- height: 460px;
|
|
|
+ height: 500px;
|
|
|
|
|
|
.graph {
|
|
|
width: 100%;
|