|
|
@ -59,7 +59,6 @@ |
|
|
:props="treeProps" |
|
|
:props="treeProps" |
|
|
:expand-on-click-node="false" |
|
|
:expand-on-click-node="false" |
|
|
@node-click="handleNodeClick" |
|
|
@node-click="handleNodeClick" |
|
|
|
|
|
|
|
|
> |
|
|
> |
|
|
<template #default="{ node, data }"> |
|
|
<template #default="{ node, data }"> |
|
|
<span class="custom-tree-node"> |
|
|
<span class="custom-tree-node"> |
|
|
@ -234,7 +233,6 @@ export default { |
|
|
labelFontFamily: this.edgeFontFamily, |
|
|
labelFontFamily: this.edgeFontFamily, |
|
|
labelFill: this.edgeFontColor, |
|
|
labelFill: this.edgeFontColor, |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
})) |
|
|
})) |
|
|
const updatedData = { |
|
|
const updatedData = { |
|
|
nodes: updatedNodes, |
|
|
nodes: updatedNodes, |
|
|
@ -364,6 +362,7 @@ export default { |
|
|
changeTree(){ |
|
|
changeTree(){ |
|
|
if(this.typeRadio=="Disease"){ |
|
|
if(this.typeRadio=="Disease"){ |
|
|
this.treeData=this.diseaseTree |
|
|
this.treeData=this.diseaseTree |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
if(this.typeRadio=="Drug") { |
|
|
if(this.typeRadio=="Drug") { |
|
|
this.treeData=this.drugTree |
|
|
this.treeData=this.drugTree |
|
|
@ -372,6 +371,34 @@ export default { |
|
|
this.treeData=this.checkTree |
|
|
this.treeData=this.checkTree |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
loadTreeNode(node, resolve, data) { |
|
|
|
|
|
// 根据当前选中的类型决定调用哪个接口 |
|
|
|
|
|
let apiCall; |
|
|
|
|
|
if (this.typeRadio === 'Disease') { |
|
|
|
|
|
// 假设你的 ICD-10 节点有 level 字段(如 chapter, section 等) |
|
|
|
|
|
// 并且子节点需要根据 code 或 id 请求 |
|
|
|
|
|
apiCall = () => this.loadDiseaseTreeData(); |
|
|
|
|
|
} else if (this.typeRadio === 'Drug') { |
|
|
|
|
|
apiCall = () => this.loadDrugTreeData(); // 你需要实现这个 API |
|
|
|
|
|
} else if (this.typeRadio === 'Check') { |
|
|
|
|
|
apiCall = () => this.loadCheckTreeData(); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (apiCall) { |
|
|
|
|
|
apiCall() |
|
|
|
|
|
.then(children => { |
|
|
|
|
|
// children 必须是数组,每个元素要有 label、code/id 等字段 |
|
|
|
|
|
// 如果没有子节点,返回空数组 [] |
|
|
|
|
|
resolve(children || []); |
|
|
|
|
|
}) |
|
|
|
|
|
.catch(err => { |
|
|
|
|
|
console.error('加载子节点失败:', err); |
|
|
|
|
|
resolve([]); // 防止卡住 |
|
|
|
|
|
}); |
|
|
|
|
|
} else { |
|
|
|
|
|
resolve([]); |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
async loadDiseaseTreeData() { |
|
|
async loadDiseaseTreeData() { |
|
|
try { |
|
|
try { |
|
|
const res = await fetch('/icd10.json') |
|
|
const res = await fetch('/icd10.json') |
|
|
@ -507,7 +534,7 @@ export default { |
|
|
console.log(this.defaultData) |
|
|
console.log(this.defaultData) |
|
|
console.log(this._nodeLabelMap) |
|
|
console.log(this._nodeLabelMap) |
|
|
const container = this.$refs.graphContainer; |
|
|
const container = this.$refs.graphContainer; |
|
|
console.log(container) |
|
|
if (!container) return; |
|
|
if (container!=null){ |
|
|
if (container!=null){ |
|
|
const width = container.clientWidth || 800; |
|
|
const width = container.clientWidth || 800; |
|
|
const height = container.clientHeight || 600; |
|
|
const height = container.clientHeight || 600; |
|
|
@ -522,7 +549,8 @@ export default { |
|
|
gravity: 0.3, // 重力系数,控制节点聚集程度 |
|
|
gravity: 0.3, // 重力系数,控制节点聚集程度 |
|
|
repulsion: 500, // 排斥力 |
|
|
repulsion: 500, // 排斥力 |
|
|
attraction: 20, // 吸引力 |
|
|
attraction: 20, // 吸引力 |
|
|
preventOverlap: true // 防止节点重叠 |
|
|
preventOverlap: true, // 防止节点重叠 |
|
|
|
|
|
// center: [width / 2, height / 2] |
|
|
// type: 'radial', |
|
|
// type: 'radial', |
|
|
// preventOverlap: true, |
|
|
// preventOverlap: true, |
|
|
// unitRadius: 200, |
|
|
// unitRadius: 200, |
|
|
@ -644,8 +672,18 @@ export default { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
}); |
|
|
|
|
|
console.log("Container width:", container.clientWidth); |
|
|
|
|
|
console.log("Container height:", container.clientHeight); |
|
|
|
|
|
console.log("Container scroll position before:", container.scrollTop, container.scrollLeft); |
|
|
|
|
|
|
|
|
|
|
|
this.$nextTick(() => { |
|
|
graph.render(); |
|
|
graph.render(); |
|
|
|
|
|
// graph.fitView() |
|
|
|
|
|
graph.fitView({ padding: 30, duration: 1000, easing: 'ease-in' }); |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
console.log("Container scroll position after:", container.scrollTop, container.scrollLeft); |
|
|
|
|
|
// graph.fitView(); |
|
|
// graph.on('node:pointerover', (evt) => { |
|
|
// graph.on('node:pointerover', (evt) => { |
|
|
// const nodeItem = evt.target; // 获取当前鼠标进入的节点元素 |
|
|
// const nodeItem = evt.target; // 获取当前鼠标进入的节点元素 |
|
|
// const relatedEdges = graph.getRelatedEdgesData(nodeItem.id); |
|
|
// const relatedEdges = graph.getRelatedEdgesData(nodeItem.id); |
|
|
@ -703,13 +741,13 @@ export default { |
|
|
this.formatData(response) |
|
|
this.formatData(response) |
|
|
}); // 等待 Promise 解析 |
|
|
}); // 等待 Promise 解析 |
|
|
}); |
|
|
}); |
|
|
|
|
|
graph.once('afterlayout', () => { |
|
|
|
|
|
if (!graph.destroyed) { |
|
|
|
|
|
graph.fitCenter({ padding: 40, duration: 1000 }); |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
this._graph = graph |
|
|
this._graph = graph |
|
|
this._graph?.fitView() |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -717,10 +755,8 @@ export default { |
|
|
|
|
|
|
|
|
updateGraph(data) { |
|
|
updateGraph(data) { |
|
|
if (!this._graph) return |
|
|
if (!this._graph) return |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this._graph.setData(data) |
|
|
this._graph.setData(data) |
|
|
this._graph.render() |
|
|
this._graph.render(); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
updateAllNodes() { |
|
|
updateAllNodes() { |
|
|
|