|
|
|
@ -20,7 +20,7 @@ |
|
|
|
class="color-block" |
|
|
|
@click="toggleCategory(item.key)" |
|
|
|
></div> |
|
|
|
<span>{{ item.label }}</span> |
|
|
|
<span style=" font-size: 12px;color: rgb(0, 0, 0);font-weight: 600;">{{ item.label }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</header> |
|
|
|
@ -187,8 +187,12 @@ export default { |
|
|
|
|
|
|
|
}, |
|
|
|
beforeUnmount() { |
|
|
|
this._graph.destroy() |
|
|
|
this._graph = null; |
|
|
|
if (this._graph!=null){ |
|
|
|
this._graph.stopLayout(); |
|
|
|
this.clearGraphState(); |
|
|
|
this._graph.destroy() |
|
|
|
this._graph = null; |
|
|
|
} |
|
|
|
window.removeEventListener('resize', this.handleResize); |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
@ -216,20 +220,23 @@ export default { |
|
|
|
methods: { |
|
|
|
buildCategoryIndex() { |
|
|
|
const index = {}; |
|
|
|
const nodes = this._graph.getNodeData() // 获取所有节点 |
|
|
|
nodes.forEach(node => { |
|
|
|
console.log(node.data.label) |
|
|
|
const category = node.data.label; // 假设 label 是类别 |
|
|
|
if(category=='Drug'||category=='Symptom'|| |
|
|
|
category=='Disease'||category=='Check'){ |
|
|
|
if (!index[category]) index[category] = []; |
|
|
|
index[category].push(node.id); |
|
|
|
}else{ |
|
|
|
if (!index["Other"]) index["Other"] = []; |
|
|
|
index["Other"].push(node.id); |
|
|
|
} |
|
|
|
}); |
|
|
|
this.categoryToNodeIds = index; |
|
|
|
if (this._graph!=null){ |
|
|
|
const nodes = this._graph.getNodeData() // 获取所有节点 |
|
|
|
nodes.forEach(node => { |
|
|
|
console.log(node.data.label) |
|
|
|
const category = node.data.label; // 假设 label 是类别 |
|
|
|
if(category=='Drug'||category=='Symptom'|| |
|
|
|
category=='Disease'||category=='Check'){ |
|
|
|
if (!index[category]) index[category] = []; |
|
|
|
index[category].push(node.id); |
|
|
|
}else{ |
|
|
|
if (!index["Other"]) index["Other"] = []; |
|
|
|
index["Other"].push(node.id); |
|
|
|
} |
|
|
|
}); |
|
|
|
this.categoryToNodeIds = index; |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
// 切换某个类别的显示状态 |
|
|
|
toggleCategory (key){ |
|
|
|
@ -433,207 +440,211 @@ export default { |
|
|
|
console.log(this.defaultData) |
|
|
|
console.log(this._nodeLabelMap) |
|
|
|
const container = this.$refs.graphContainer; |
|
|
|
const width = container.clientWidth || 800; |
|
|
|
const height = container.clientHeight || 600; |
|
|
|
console.log(width) |
|
|
|
console.log(height) |
|
|
|
const graph = new Graph({ |
|
|
|
container, |
|
|
|
width, |
|
|
|
height, |
|
|
|
layout: { |
|
|
|
type: 'force', // 力导向布局 |
|
|
|
gravity: 0.3, // 重力系数，控制节点聚集程度 |
|
|
|
repulsion: 500, // 排斥力 |
|
|
|
attraction: 20, // 吸引力 |
|
|
|
preventOverlap: true // 防止节点重叠 |
|
|
|
// type: 'radial', |
|
|
|
// preventOverlap: true, |
|
|
|
// unitRadius: 200, |
|
|
|
// maxPreventOverlapIteration:100 |
|
|
|
// type: 'force-atlas2', |
|
|
|
// preventOverlap: true, |
|
|
|
// kr: 1000, |
|
|
|
// center: [250, 250], |
|
|
|
// barnesHut:true, |
|
|
|
console.log(container) |
|
|
|
if (container!=null){ |
|
|
|
const width = container.clientWidth || 800; |
|
|
|
const height = container.clientHeight || 600; |
|
|
|
console.log(width) |
|
|
|
console.log(height) |
|
|
|
const graph = new Graph({ |
|
|
|
container, |
|
|
|
width, |
|
|
|
height, |
|
|
|
layout: { |
|
|
|
type: 'force', // 力导向布局 |
|
|
|
gravity: 0.3, // 重力系数，控制节点聚集程度 |
|
|
|
repulsion: 500, // 排斥力 |
|
|
|
attraction: 20, // 吸引力 |
|
|
|
preventOverlap: true // 防止节点重叠 |
|
|
|
// type: 'radial', |
|
|
|
// preventOverlap: true, |
|
|
|
// unitRadius: 200, |
|
|
|
// maxPreventOverlapIteration:100 |
|
|
|
// type: 'force-atlas2', |
|
|
|
// preventOverlap: true, |
|
|
|
// kr: 1000, |
|
|
|
// center: [250, 250], |
|
|
|
// barnesHut:true, |
|
|
|
|
|
|
|
}, |
|
|
|
behaviors: [ 'zoom-canvas', 'drag-element', |
|
|
|
'click-select','focus-element', { |
|
|
|
type: 'hover-activate', |
|
|
|
degree: 1, |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'drag-canvas', |
|
|
|
enable: (event) => event.shiftKey === false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'brush-select', |
|
|
|
}, |
|
|
|
], |
|
|
|
|
|
|
|
node: { |
|
|
|
style: { |
|
|
|
fill: (d) => { |
|
|
|
const label = d.data?.label; |
|
|
|
if (label === 'Disease') return '#EF4444'; // 红 |
|
|
|
if (label === 'Drug') return '#91cc75'; // 绿 |
|
|
|
if (label === 'Symptom') return '#fac858'; // 橙 |
|
|
|
if (label === 'Check') return '#59d1d4'; // 橙 |
|
|
|
return '#336eee'; // 默认灰蓝 |
|
|
|
behaviors: [ 'zoom-canvas', 'drag-element', |
|
|
|
'click-select','focus-element', { |
|
|
|
type: 'hover-activate', |
|
|
|
degree: 1, |
|
|
|
}, |
|
|
|
stroke: (d) => { |
|
|
|
const label = d.data?.label; |
|
|
|
if (label === 'Disease') return '#B91C1C'; |
|
|
|
if (label === 'Drug') return '#047857'; |
|
|
|
if (label === 'Check') return '#40999b'; // 橙 |
|
|
|
if (label === 'Symptom') return '#B45309'; |
|
|
|
return '#1D4ED8'; |
|
|
|
{ |
|
|
|
type: 'drag-canvas', |
|
|
|
enable: (event) => event.shiftKey === false, |
|
|
|
}, |
|
|
|
labelText: (d) => d.data.name, |
|
|
|
labelPlacement: 'center', |
|
|
|
labelWordWrap: true, |
|
|
|
labelMaxWidth: '150%', |
|
|
|
labelMaxLines: 3, |
|
|
|
labelTextOverflow: 'ellipsis', |
|
|
|
labelTextAlign: 'center', |
|
|
|
opacity: 1 |
|
|
|
}, |
|
|
|
state: { |
|
|
|
active: { |
|
|
|
lineWidth: 2, |
|
|
|
shadowColor: '#ffffff', |
|
|
|
shadowBlur: 10, |
|
|
|
opacity: 1 |
|
|
|
{ |
|
|
|
type: 'brush-select', |
|
|
|
}, |
|
|
|
inactive: { |
|
|
|
opacity: 0.3 |
|
|
|
}, |
|
|
|
normal:{ |
|
|
|
], |
|
|
|
|
|
|
|
node: { |
|
|
|
style: { |
|
|
|
fill: (d) => { |
|
|
|
const label = d.data?.label; |
|
|
|
if (label === 'Disease') return '#EF4444'; // 红 |
|
|
|
if (label === 'Drug') return '#91cc75'; // 绿 |
|
|
|
if (label === 'Symptom') return '#fac858'; // 橙 |
|
|
|
if (label === 'Check') return '#59d1d4'; // 橙 |
|
|
|
return '#336eee'; // 默认灰蓝 |
|
|
|
}, |
|
|
|
stroke: (d) => { |
|
|
|
const label = d.data?.label; |
|
|
|
if (label === 'Disease') return '#B91C1C'; |
|
|
|
if (label === 'Drug') return '#047857'; |
|
|
|
if (label === 'Check') return '#40999b'; // 橙 |
|
|
|
if (label === 'Symptom') return '#B45309'; |
|
|
|
return '#1D4ED8'; |
|
|
|
}, |
|
|
|
labelText: (d) => d.data.name, |
|
|
|
labelPlacement: 'center', |
|
|
|
labelWordWrap: true, |
|
|
|
labelMaxWidth: '150%', |
|
|
|
labelMaxLines: 3, |
|
|
|
labelTextOverflow: 'ellipsis', |
|
|
|
labelTextAlign: 'center', |
|
|
|
opacity: 1 |
|
|
|
} |
|
|
|
}, |
|
|
|
state: { |
|
|
|
active: { |
|
|
|
lineWidth: 2, |
|
|
|
shadowColor: '#ffffff', |
|
|
|
shadowBlur: 10, |
|
|
|
opacity: 1 |
|
|
|
}, |
|
|
|
inactive: { |
|
|
|
opacity: 0.3 |
|
|
|
}, |
|
|
|
normal:{ |
|
|
|
opacity: 1 |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
edge: { |
|
|
|
style: { |
|
|
|
labelText: (d) => d.data.relationship.properties.label, |
|
|
|
stroke: (d) => { |
|
|
|
// 获取 target 节点的 label |
|
|
|
const targetLabel = this._nodeLabelMap.get(d.target); // d.target 是目标节点 ID |
|
|
|
// 根据 target 节点类型返回对应浅色 |
|
|
|
if (targetLabel === 'Disease') return 'rgba(239,68,68,0.5)'; |
|
|
|
if (targetLabel === 'Drug') return 'rgba(145,204,117,0.5)'; |
|
|
|
if (targetLabel === 'Symptom') return 'rgba(250,200,88,0.5)'; |
|
|
|
if (targetLabel === 'Check') return 'rgba(89,209,212,0.5)'; // 橙 |
|
|
|
return 'rgba(51,110,238,0.5)'; // default |
|
|
|
}, |
|
|
|
// labelFill: (d) => { |
|
|
|
// // 获取 target 节点的 label |
|
|
|
// const targetLabel = this._nodeLabelMap.get(d.target); // d.target 是目标节点 ID |
|
|
|
// // 根据 target 节点类型返回对应浅色 |
|
|
|
// |
|
|
|
// if (targetLabel === 'Disease') return '#ff4444'; |
|
|
|
// if (targetLabel === 'Drug') return '#2f9b70'; |
|
|
|
// if (targetLabel === 'Symptom') return '#f89775'; |
|
|
|
// return '#6b91ff'; // default |
|
|
|
// } |
|
|
|
|
|
|
|
}, |
|
|
|
state: { |
|
|
|
selected: { |
|
|
|
stroke: '#1890FF', |
|
|
|
lineWidth: 2, |
|
|
|
}, |
|
|
|
highlight: { |
|
|
|
halo: true, |
|
|
|
haloStroke: '#1890FF', |
|
|
|
haloLineWidth: 6, |
|
|
|
haloStrokeOpacity: 0.3, |
|
|
|
lineWidth: 3, |
|
|
|
opacity: 1 |
|
|
|
edge: { |
|
|
|
style: { |
|
|
|
labelText: (d) => d.data.relationship.properties.label, |
|
|
|
stroke: (d) => { |
|
|
|
// 获取 target 节点的 label |
|
|
|
const targetLabel = this._nodeLabelMap.get(d.target); // d.target 是目标节点 ID |
|
|
|
// 根据 target 节点类型返回对应浅色 |
|
|
|
if (targetLabel === 'Disease') return 'rgba(239,68,68,0.5)'; |
|
|
|
if (targetLabel === 'Drug') return 'rgba(145,204,117,0.5)'; |
|
|
|
if (targetLabel === 'Symptom') return 'rgba(250,200,88,0.5)'; |
|
|
|
if (targetLabel === 'Check') return 'rgba(89,209,212,0.5)'; // 橙 |
|
|
|
return 'rgba(51,110,238,0.5)'; // default |
|
|
|
}, |
|
|
|
// labelFill: (d) => { |
|
|
|
// // 获取 target 节点的 label |
|
|
|
// const targetLabel = this._nodeLabelMap.get(d.target); // d.target 是目标节点 ID |
|
|
|
// // 根据 target 节点类型返回对应浅色 |
|
|
|
// |
|
|
|
// if (targetLabel === 'Disease') return '#ff4444'; |
|
|
|
// if (targetLabel === 'Drug') return '#2f9b70'; |
|
|
|
// if (targetLabel === 'Symptom') return '#f89775'; |
|
|
|
// return '#6b91ff'; // default |
|
|
|
// } |
|
|
|
|
|
|
|
}, |
|
|
|
inactive: { |
|
|
|
opacity: 0.3 |
|
|
|
state: { |
|
|
|
selected: { |
|
|
|
stroke: '#1890FF', |
|
|
|
lineWidth: 2, |
|
|
|
}, |
|
|
|
highlight: { |
|
|
|
halo: true, |
|
|
|
haloStroke: '#1890FF', |
|
|
|
haloLineWidth: 6, |
|
|
|
haloStrokeOpacity: 0.3, |
|
|
|
lineWidth: 3, |
|
|
|
opacity: 1 |
|
|
|
}, |
|
|
|
inactive: { |
|
|
|
opacity: 0.3 |
|
|
|
}, |
|
|
|
normal:{ |
|
|
|
opacity: 1 |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
normal:{ |
|
|
|
opacity: 1 |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
data:this.defaultData, |
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
graph.render(); |
|
|
|
// graph.on('node:pointerover', (evt) => { |
|
|
|
// const nodeItem = evt.target; // 获取当前鼠标进入的节点元素 |
|
|
|
// const relatedEdges = graph.getRelatedEdgesData(nodeItem.id); |
|
|
|
// const relatedEdgeIds = relatedEdges.map(edge => edge.id); |
|
|
|
// |
|
|
|
// // 3. 高亮这些边（比如用 'highlight' 状态） |
|
|
|
// relatedEdgeIds.forEach(edgeId => { |
|
|
|
// graph.setElementState(edgeId, 'highlight', true); |
|
|
|
// }); |
|
|
|
// graph.setElementState(nodeItem.id, 'active',true); |
|
|
|
// |
|
|
|
// // 2. 获取邻居节点 ID（去重） |
|
|
|
// const neighborNodeIds = new Set(); |
|
|
|
// relatedEdges.forEach(edge => { |
|
|
|
// if (edge.source !== nodeItem.id) neighborNodeIds.add(edge.source); |
|
|
|
// if (edge.target !== nodeItem.id) neighborNodeIds.add(edge.target); |
|
|
|
// }); |
|
|
|
// |
|
|
|
// neighborNodeIds.forEach(id => { |
|
|
|
// graph.setElementState(id, 'active', true); |
|
|
|
// }); |
|
|
|
// |
|
|
|
// graph.getEdgeData().forEach(edge => { |
|
|
|
// if (!relatedEdgeIds.includes(edge.id)) { |
|
|
|
// graph.setElementState(edge.id, 'inactive', true); |
|
|
|
// } |
|
|
|
// }); |
|
|
|
// graph.getNodeData().forEach(node => { |
|
|
|
// if (node.id !== nodeItem.id && !neighborNodeIds.has(node.id)) { |
|
|
|
// graph.setElementState(node.id, 'inactive',true); |
|
|
|
// } |
|
|
|
// }); |
|
|
|
// }); |
|
|
|
// graph.on('node:pointerleave', (evt) => { |
|
|
|
// graph.getEdgeData().forEach(edge => { |
|
|
|
// graph.setElementState(edge.id, 'highlight', false); |
|
|
|
// graph.setElementState(edge.id, 'inactive', false); |
|
|
|
// graph.setElementState(edge.id, 'normal', true); |
|
|
|
// }); |
|
|
|
// graph.getNodeData().forEach(node => { |
|
|
|
// graph.setElementState(node.id, 'active', false); |
|
|
|
// graph.setElementState(node.id, 'inactive', false); |
|
|
|
// graph.setElementState(node.id, 'normal', true); |
|
|
|
// }); |
|
|
|
// }); |
|
|
|
graph.on('node:click', (evt) => { |
|
|
|
const nodeItem = evt.target.id; // 获取当前鼠标进入的节点元素 |
|
|
|
let node=graph.getNodeData(nodeItem).data |
|
|
|
let data={ |
|
|
|
label:node.name, |
|
|
|
type:node.label |
|
|
|
} |
|
|
|
getGraph(data).then(response=>{ |
|
|
|
console.log(response) |
|
|
|
this.formatData(response) |
|
|
|
}); // 等待 Promise 解析 |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this._graph = graph |
|
|
|
this._graph?.fitView() |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
data:this.defaultData, |
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
graph.render(); |
|
|
|
// graph.on('node:pointerover', (evt) => { |
|
|
|
// const nodeItem = evt.target; // 获取当前鼠标进入的节点元素 |
|
|
|
// const relatedEdges = graph.getRelatedEdgesData(nodeItem.id); |
|
|
|
// const relatedEdgeIds = relatedEdges.map(edge => edge.id); |
|
|
|
// |
|
|
|
// // 3. 高亮这些边（比如用 'highlight' 状态） |
|
|
|
// relatedEdgeIds.forEach(edgeId => { |
|
|
|
// graph.setElementState(edgeId, 'highlight', true); |
|
|
|
// }); |
|
|
|
// graph.setElementState(nodeItem.id, 'active',true); |
|
|
|
// |
|
|
|
// // 2. 获取邻居节点 ID（去重） |
|
|
|
// const neighborNodeIds = new Set(); |
|
|
|
// relatedEdges.forEach(edge => { |
|
|
|
// if (edge.source !== nodeItem.id) neighborNodeIds.add(edge.source); |
|
|
|
// if (edge.target !== nodeItem.id) neighborNodeIds.add(edge.target); |
|
|
|
// }); |
|
|
|
// |
|
|
|
// neighborNodeIds.forEach(id => { |
|
|
|
// graph.setElementState(id, 'active', true); |
|
|
|
// }); |
|
|
|
// |
|
|
|
// graph.getEdgeData().forEach(edge => { |
|
|
|
// if (!relatedEdgeIds.includes(edge.id)) { |
|
|
|
// graph.setElementState(edge.id, 'inactive', true); |
|
|
|
// } |
|
|
|
// }); |
|
|
|
// graph.getNodeData().forEach(node => { |
|
|
|
// if (node.id !== nodeItem.id && !neighborNodeIds.has(node.id)) { |
|
|
|
// graph.setElementState(node.id, 'inactive',true); |
|
|
|
// } |
|
|
|
// }); |
|
|
|
// }); |
|
|
|
// graph.on('node:pointerleave', (evt) => { |
|
|
|
// graph.getEdgeData().forEach(edge => { |
|
|
|
// graph.setElementState(edge.id, 'highlight', false); |
|
|
|
// graph.setElementState(edge.id, 'inactive', false); |
|
|
|
// graph.setElementState(edge.id, 'normal', true); |
|
|
|
// }); |
|
|
|
// graph.getNodeData().forEach(node => { |
|
|
|
// graph.setElementState(node.id, 'active', false); |
|
|
|
// graph.setElementState(node.id, 'inactive', false); |
|
|
|
// graph.setElementState(node.id, 'normal', true); |
|
|
|
// }); |
|
|
|
// }); |
|
|
|
graph.on('node:click', (evt) => { |
|
|
|
const nodeItem = evt.target.id; // 获取当前鼠标进入的节点元素 |
|
|
|
let node=graph.getNodeData(nodeItem).data |
|
|
|
let data={ |
|
|
|
label:node.name, |
|
|
|
type:node.label |
|
|
|
} |
|
|
|
getGraph(data).then(response=>{ |
|
|
|
console.log(response) |
|
|
|
this.formatData(response) |
|
|
|
}); // 等待 Promise 解析 |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this._graph = graph |
|
|
|
this._graph?.fitView() |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
@ -850,15 +861,15 @@ button:hover { |
|
|
|
.legend-item { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 5px; |
|
|
|
gap: 7px; |
|
|
|
cursor: pointer; |
|
|
|
user-select: none; |
|
|
|
} |
|
|
|
|
|
|
|
.color-block { |
|
|
|
width: 16px; |
|
|
|
height: 16px; |
|
|
|
border-radius: 4px; |
|
|
|
width: 30px; |
|
|
|
height: 15px; |
|
|
|
border-radius: 18px; |
|
|
|
transition: all 0.2s ease; |
|
|
|
} |
|
|
|
|
|
|
|
@ -885,13 +896,14 @@ button:hover { |
|
|
|
} |
|
|
|
|
|
|
|
.search-container { |
|
|
|
width: 260px; |
|
|
|
height: 36px; |
|
|
|
background: #f5f7fa; |
|
|
|
width: 330px; |
|
|
|
height: 30px; |
|
|
|
background: #fff; |
|
|
|
border-radius: 18px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
padding: 0 15px; |
|
|
|
box-shadow: 4px 2px 9px 1px rgb(97 99 100 / 19%); |
|
|
|
} |
|
|
|
|
|
|
|
.search-container input { |
|
|
|
@ -937,6 +949,7 @@ button:hover { |
|
|
|
border: 1px solid #f0f0f0; |
|
|
|
border-radius: 12px; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.disease-header { |
|
|
|
@ -945,12 +958,24 @@ button:hover { |
|
|
|
color: #fff; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 0 15px; |
|
|
|
justify-content: flex-start; |
|
|
|
} |
|
|
|
.d-title{ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
font-size: 13px; |
|
|
|
} |
|
|
|
.d-count{ |
|
|
|
font-size: 9px; |
|
|
|
background-color: #5989F0; |
|
|
|
border-radius: 7px; |
|
|
|
padding: 0px 4px; |
|
|
|
margin-left: 7px; |
|
|
|
} |
|
|
|
|
|
|
|
.d-icon { |
|
|
|
width: 18px; |
|
|
|
width: 21px; |
|
|
|
margin-right: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
@ -970,6 +995,7 @@ button:hover { |
|
|
|
align-items: center; |
|
|
|
width: 100%; |
|
|
|
overflow: hidden; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
.code { |
|
|
|
@ -985,6 +1011,7 @@ button:hover { |
|
|
|
white-space: nowrap; |
|
|
|
text-overflow: ellipsis; |
|
|
|
text-align: left; |
|
|
|
font-size: 12px; |
|
|
|
} |
|
|
|
.disease-body{ |
|
|
|
width: 360px; |
|
|
|
|
