|
|
|
@ -7,8 +7,8 @@ |
|
|
|
<main class="main-body"> |
|
|
|
<header class="top-nav"> |
|
|
|
<div class="search-container"> |
|
|
|
<input type="text" placeholder="搜索......"/> |
|
|
|
<img src="@/assets/搜索.png" class="search-btn"/> |
|
|
|
<input v-model="searchKeyword" type="text" placeholder="搜索......" @keydown.enter="search"/> |
|
|
|
<img src="@/assets/搜索.png" class="search-btn" @click="search"/> |
|
|
|
</div> |
|
|
|
<div class="legend-box"> |
|
|
|
<div v-for="(item, index) in legendItems" :key="index" class="legend-item"> |
|
|
|
@ -33,7 +33,9 @@ |
|
|
|
<span v-if="typeRadio=== 'Drug'">药品信息</span> |
|
|
|
<span v-if="typeRadio=== 'Check'">检查信息</span> |
|
|
|
</div> |
|
|
|
<div class="d-count" :style="headerLabel">12种</div> |
|
|
|
<div v-if="typeRadio=== 'Disease'" class="d-count" :style="headerLabel">{{diseaseCount.toLocaleString()}}种</div> |
|
|
|
<div v-if="typeRadio=== 'Drug'" class="d-count" :style="headerLabel">{{ drugCount.toLocaleString() }}种</div> |
|
|
|
<div v-if="typeRadio=== 'Check'" class="d-count" :style="headerLabel">{{checkCount.toLocaleString()}}种</div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<el-radio-group v-model="typeRadio" @change="changeTree"> |
|
|
|
@ -57,6 +59,7 @@ |
|
|
|
<el-tree |
|
|
|
:data="treeData" |
|
|
|
:props="treeProps" |
|
|
|
accordion |
|
|
|
:expand-on-click-node="false" |
|
|
|
@node-click="handleNodeClick" |
|
|
|
> |
|
|
|
@ -82,11 +85,12 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import {getCheckTree, getDrugTree, getGraph, getTestGraphData} from "@/api/graph" |
|
|
|
import { Graph } from '@antv/g6'; |
|
|
|
import {getCheckTree, getCount, getDrugTree, getGraph, getTestGraphData} from "@/api/graph" |
|
|
|
import {Graph, Tooltip} from '@antv/g6'; |
|
|
|
import Menu from "@/components/Menu.vue"; |
|
|
|
import {a} from "vue-router/dist/devtools-EWN81iOl.mjs"; |
|
|
|
|
|
|
|
import Fuse from 'fuse.js'; |
|
|
|
export default { |
|
|
|
name: 'Display', |
|
|
|
components: {Menu}, |
|
|
|
@ -142,6 +146,16 @@ export default { |
|
|
|
{ key: 'Other', label: '其他', color: '#59d1d4' } |
|
|
|
], |
|
|
|
visibleCategories: new Set(), // 先空着 |
|
|
|
diseaseCount:0, |
|
|
|
drugCount:0, |
|
|
|
checkCount:0, |
|
|
|
originalNodeStyles: new Map(), // 保存原始节点样式 |
|
|
|
originalEdgeStyles: new Map(), // 保存原始边样式 |
|
|
|
searchResults: { |
|
|
|
nodes: [], |
|
|
|
edges: [] |
|
|
|
}, |
|
|
|
searchKeyword:"" |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@ -202,6 +216,9 @@ export default { |
|
|
|
async mounted() { |
|
|
|
this.visibleCategories = new Set(this.legendItems.map(i => i.key)); |
|
|
|
await this.loadDiseaseTreeData() |
|
|
|
this.getCount() |
|
|
|
this.loadDrugTreeData() |
|
|
|
this.loadCheckTreeData() |
|
|
|
this.treeData=this.diseaseTree |
|
|
|
await this.$nextTick(); |
|
|
|
try { |
|
|
|
@ -241,8 +258,6 @@ export default { |
|
|
|
this.defaultData = updatedData |
|
|
|
setTimeout(() => { |
|
|
|
this.initGraph(); |
|
|
|
this.loadDrugTreeData() |
|
|
|
this.loadCheckTreeData() |
|
|
|
this.buildCategoryIndex(); |
|
|
|
window.addEventListener('resize', this.handleResize); |
|
|
|
}, 1000); |
|
|
|
@ -251,6 +266,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
beforeUnmount() { |
|
|
|
if (this._graph!=null){ |
|
|
|
this._graph.stopLayout(); |
|
|
|
@ -283,6 +299,161 @@ export default { |
|
|
|
edgeFontFamily: 'updateAllEdges', |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
search() { |
|
|
|
const keyword = this.searchKeyword?.trim(); |
|
|
|
if (!keyword) { |
|
|
|
this.clearSearchHighlight(); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
const nodeData = this._graph?.getNodeData() || []; |
|
|
|
const edgeData = this._graph?.getEdgeData() || []; |
|
|
|
|
|
|
|
// === 1. 节点搜索项 === |
|
|
|
const nodeSearchItems = nodeData.map(node => ({ |
|
|
|
id: node.id, |
|
|
|
name: node.data?.name || '', |
|
|
|
label: node.data?.label || '' |
|
|
|
})); |
|
|
|
|
|
|
|
// === 2. 边搜索项（用于模糊匹配）=== |
|
|
|
const edgeSearchItems = edgeData.map(edge => { |
|
|
|
const sourceName = this._nodeLabelMap.get(edge.source) || ''; |
|
|
|
const targetName = this._nodeLabelMap.get(edge.target) || ''; |
|
|
|
const relLabel = edge.data?.relationship?.properties?.label || ''; |
|
|
|
const fullText = [sourceName, relLabel, targetName].filter(Boolean).join(' '); |
|
|
|
return { |
|
|
|
id: edge.id, |
|
|
|
sourceId: edge.source, |
|
|
|
targetId: edge.target, |
|
|
|
fullText |
|
|
|
}; |
|
|
|
}); |
|
|
|
|
|
|
|
// === 3. Fuse 搜索（启用中文分词）=== |
|
|
|
const fuseOptions = { |
|
|
|
includeScore: true, |
|
|
|
threshold: 0.4, |
|
|
|
ignoreLocation: true, |
|
|
|
tokenize: true, // ✅ 支持中文 |
|
|
|
keys: ['name', 'label'] |
|
|
|
}; |
|
|
|
|
|
|
|
const edgeFuseOptions = { |
|
|
|
includeScore: true, |
|
|
|
threshold: 0.5, |
|
|
|
ignoreLocation: true, |
|
|
|
tokenize: true, |
|
|
|
keys: ['fullText'] |
|
|
|
}; |
|
|
|
|
|
|
|
const nodeFuse = new Fuse(nodeSearchItems, fuseOptions); |
|
|
|
const edgeFuse = new Fuse(edgeSearchItems, edgeFuseOptions); |
|
|
|
|
|
|
|
// 初步结果 |
|
|
|
const directNodeIds = nodeFuse.search(keyword).map(r => r.item.id); |
|
|
|
const matchedEdgesFromSearch = edgeFuse.search(keyword).map(r => r.item); |
|
|
|
const matchedEdgeIdsFromSearch = matchedEdgesFromSearch.map(e => e.id); |
|
|
|
|
|
|
|
// === 4. 关键：从命中的节点，反查“两端都被命中的边” === |
|
|
|
const nodeSet = new Set(directNodeIds); |
|
|
|
const additionalEdgeIds = []; |
|
|
|
|
|
|
|
edgeData.forEach(edge => { |
|
|
|
// 如果边的 source 和 target 都在命中的节点集合中 |
|
|
|
if (nodeSet.has(edge.source) && nodeSet.has(edge.target)) { |
|
|
|
additionalEdgeIds.push(edge.id); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
// 合并边 ID（去重） |
|
|
|
const allEdgeIds = Array.from(new Set([ |
|
|
|
...matchedEdgeIdsFromSearch, |
|
|
|
...additionalEdgeIds |
|
|
|
])); |
|
|
|
|
|
|
|
// === 5. 节点：直接命中的 + 从边补的（保持你原有逻辑）=== |
|
|
|
const finalNodeIds = new Set(directNodeIds); |
|
|
|
matchedEdgesFromSearch.forEach(edge => { |
|
|
|
finalNodeIds.add(edge.sourceId); |
|
|
|
finalNodeIds.add(edge.targetId); |
|
|
|
}); |
|
|
|
// 注意：additionalEdge 对应的节点已在 directNodeIds 中，无需再加 |
|
|
|
|
|
|
|
// === 6. 调用高亮（不改此函数）=== |
|
|
|
this.highlightSearchResults( |
|
|
|
Array.from(finalNodeIds), |
|
|
|
allEdgeIds |
|
|
|
); |
|
|
|
}, |
|
|
|
highlightSearchResults(nodeIds, edgeIds) { |
|
|
|
if (!this._graph) return; |
|
|
|
|
|
|
|
const allNodes = this._graph.getNodeData().map(n => n.id); |
|
|
|
const allEdges = this._graph.getEdgeData().map(e => e.id); |
|
|
|
|
|
|
|
// 1️⃣ 先清除所有 search 相关状态（避免残留） |
|
|
|
allNodes.forEach(id => { |
|
|
|
this._graph.setElementState(id, 'active', false); |
|
|
|
this._graph.setElementState(id, 'inactive', false); |
|
|
|
}); |
|
|
|
allEdges.forEach(id => { |
|
|
|
this._graph.setElementState(id, 'active', false); |
|
|
|
this._graph.setElementState(id, 'inactive', false); |
|
|
|
}); |
|
|
|
|
|
|
|
// 2️⃣ 高亮匹配项 |
|
|
|
nodeIds.forEach(id => { |
|
|
|
if (this._graph.hasNode(id)) { |
|
|
|
this._graph.setElementState(id, 'active', true); |
|
|
|
} |
|
|
|
}); |
|
|
|
edgeIds.forEach(id => { |
|
|
|
if (this._graph.hasEdge(id)) { |
|
|
|
this._graph.setElementState(id, 'active', true); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
// 3️⃣ 淡化未匹配项 |
|
|
|
const matchedNodeSet = new Set(nodeIds); |
|
|
|
const matchedEdgeSet = new Set(edgeIds); |
|
|
|
|
|
|
|
allNodes.forEach(id => { |
|
|
|
if (!matchedNodeSet.has(id)) { |
|
|
|
this._graph.setElementState(id, 'inactive', true); |
|
|
|
} |
|
|
|
}); |
|
|
|
allEdges.forEach(id => { |
|
|
|
if (!matchedEdgeSet.has(id)) { |
|
|
|
this._graph.setElementState(id, 'inactive', true); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
// 4️⃣ 聚焦第一个匹配项 |
|
|
|
const firstMatch = nodeIds[0] || edgeIds[0]; |
|
|
|
if (firstMatch && (this._graph.hasNode(firstMatch) || this._graph.hasEdge(firstMatch))) { |
|
|
|
this._graph.focusElement(firstMatch, { animation: true, duration: 600 }); |
|
|
|
} |
|
|
|
}, |
|
|
|
clearSearchHighlight() { |
|
|
|
if (!this._graph) return; |
|
|
|
|
|
|
|
const allNodes = this._graph.getNodeData().map(n => n.id); |
|
|
|
const allEdges = this._graph.getEdgeData().map(e => e.id); |
|
|
|
|
|
|
|
// 关闭所有 search 状态 |
|
|
|
[...allNodes, ...allEdges].forEach(id => { |
|
|
|
this._graph.setElementState(id, 'normal', true); |
|
|
|
}); |
|
|
|
}, |
|
|
|
getCount(){ |
|
|
|
getCount().then(res=>{ |
|
|
|
this.diseaseCount=res.Disease |
|
|
|
this.drugCount=res.Drug |
|
|
|
this.checkCount=res.Check |
|
|
|
console.log(res) |
|
|
|
}) |
|
|
|
}, |
|
|
|
buildCategoryIndex() { |
|
|
|
const index = {}; |
|
|
|
if (this._graph!=null){ |
|
|
|
@ -362,7 +533,6 @@ export default { |
|
|
|
changeTree(){ |
|
|
|
if(this.typeRadio=="Disease"){ |
|
|
|
this.treeData=this.diseaseTree |
|
|
|
|
|
|
|
} |
|
|
|
if(this.typeRadio=="Drug") { |
|
|
|
this.treeData=this.drugTree |
|
|
|
@ -383,7 +553,6 @@ export default { |
|
|
|
} else if (this.typeRadio === 'Check') { |
|
|
|
apiCall = () => this.loadCheckTreeData(); |
|
|
|
} |
|
|
|
|
|
|
|
if (apiCall) { |
|
|
|
apiCall() |
|
|
|
.then(children => { |
|
|
|
@ -465,8 +634,6 @@ export default { |
|
|
|
formatData(data){ |
|
|
|
this._graph.stopLayout(); |
|
|
|
this.clearGraphState(); |
|
|
|
// data.nodes = data.nodes.slice(0, 1000); |
|
|
|
// data.edges = data.edges.slice(0, 0); |
|
|
|
const updatedEdges = data.edges.map(edge => ({ |
|
|
|
...edge, |
|
|
|
type: this.edgeType, |
|
|
|
@ -500,6 +667,7 @@ export default { |
|
|
|
} |
|
|
|
this.buildNodeLabelMap(updatedNodes); |
|
|
|
this.updateGraph(updatedData) |
|
|
|
this.buildCategoryIndex(); |
|
|
|
}, |
|
|
|
getLevelLabel(level) { |
|
|
|
const map = { |
|
|
|
@ -562,6 +730,19 @@ export default { |
|
|
|
// barnesHut:true, |
|
|
|
|
|
|
|
}, |
|
|
|
autoFit: { |
|
|
|
type: 'center', // 自适应类型：'view' 或 'center' |
|
|
|
options: { |
|
|
|
// 仅适用于 'view' 类型 |
|
|
|
when: 'always', // 何时适配：'overflow'(仅当内容溢出时) 或 'always'(总是适配) |
|
|
|
direction: 'both', // 适配方向：'x'、'y' 或 'both' |
|
|
|
}, |
|
|
|
animation: { |
|
|
|
// 自适应动画效果 |
|
|
|
duration: 1000, // 动画持续时间(毫秒) |
|
|
|
easing: 'ease-in-out', // 动画缓动函数 |
|
|
|
}, |
|
|
|
}, |
|
|
|
behaviors: [ 'zoom-canvas', 'drag-element', |
|
|
|
'click-select','focus-element', { |
|
|
|
type: 'hover-activate', |
|
|
|
@ -610,8 +791,13 @@ export default { |
|
|
|
shadowBlur: 10, |
|
|
|
opacity: 1 |
|
|
|
}, |
|
|
|
highlight:{ |
|
|
|
stroke: '#FF5722', |
|
|
|
lineWidth: 4, |
|
|
|
opacity: 1 |
|
|
|
}, |
|
|
|
inactive: { |
|
|
|
opacity: 0.3 |
|
|
|
opacity: 0.8 |
|
|
|
}, |
|
|
|
normal:{ |
|
|
|
opacity: 1 |
|
|
|
@ -659,7 +845,7 @@ export default { |
|
|
|
opacity: 1 |
|
|
|
}, |
|
|
|
inactive: { |
|
|
|
opacity: 0.3 |
|
|
|
opacity: 0.8 |
|
|
|
}, |
|
|
|
normal:{ |
|
|
|
opacity: 1 |
|
|
|
@ -670,16 +856,11 @@ export default { |
|
|
|
}, |
|
|
|
data:this.defaultData, |
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
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.fitView() |
|
|
|
graph.fitView({ padding: 30, duration: 1000, easing: 'ease-in' }); |
|
|
|
// graph.fitView({ padding: 30, duration: 1000, easing: 'ease-in' }); |
|
|
|
}); |
|
|
|
|
|
|
|
console.log("Container scroll position after:", container.scrollTop, container.scrollLeft); |
|
|
|
@ -747,7 +928,33 @@ export default { |
|
|
|
} |
|
|
|
}); |
|
|
|
this._graph = graph |
|
|
|
|
|
|
|
this._graph.setPlugins([ { |
|
|
|
type: 'tooltip', |
|
|
|
// 只对节点启用，边不显示tooltip |
|
|
|
enable: (e) => e.targetType === 'edge', |
|
|
|
getContent: (e, items) => { |
|
|
|
console.log(items) |
|
|
|
console.log(e) |
|
|
|
const edge = items[0]; // 当前悬停的边 |
|
|
|
if (!edge) return ''; |
|
|
|
const data=items[0].data |
|
|
|
const sourceId = edge.source; |
|
|
|
const targetId = edge.target; |
|
|
|
|
|
|
|
// 获取节点数据（通过图实例） |
|
|
|
const sourceNode = this._graph.getNodeData(sourceId); |
|
|
|
console.log(sourceNode) |
|
|
|
const targetNode = this._graph.getNodeData(targetId); |
|
|
|
|
|
|
|
const sourceName = sourceNode?.data.name || sourceId; |
|
|
|
const targetName = targetNode?.data.name || targetId; |
|
|
|
const rel = data.relationship.properties.label || '关联'; |
|
|
|
|
|
|
|
return `<div style="padding: 4px 8px; color: #b6b2b2; border-radius: 4px; font-size: 12px;"> |
|
|
|
${sourceName} — ${rel} —> ${targetName} |
|
|
|
</div>`; |
|
|
|
}, |
|
|
|
},]) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -1144,9 +1351,6 @@ button:hover { |
|
|
|
border-color: rgb(153, 10, 0); |
|
|
|
} |
|
|
|
|
|
|
|
.el-radio__inner:hover { |
|
|
|
border-color: rgb(153, 10, 0); |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .radio-drug .el-radio__input.is-checked .el-radio__inner { |
|
|
|
background: #52c41a; /* 检查的颜色 */ |
|
|
|
@ -1158,6 +1362,26 @@ button:hover { |
|
|
|
border-color:#1890ff; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 动态给每个 el-radio 设置不同的背景颜色 */ |
|
|
|
/deep/ .radio-disease .el-radio__input.is-checked .el-radio__inner:hover { |
|
|
|
background: rgb(153, 10, 0); /* 疾病的颜色 */ |
|
|
|
border-color: rgb(153, 10, 0); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/deep/ .radio-drug .el-radio__input.is-checked .el-radio__inner:hover { |
|
|
|
background: #52c41a; /* 检查的颜色 */ |
|
|
|
border-color:#52c41a; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .radio-check .el-radio__input.is-checked .el-radio__inner:hover { |
|
|
|
background: #1890ff; /* 药品的颜色 */ |
|
|
|
border-color:#1890ff; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 自定义选中后的样式 */ |
|
|
|
/deep/ .radio-disease .el-radio__input.is-checked+.el-radio__label { |
|
|
|
color: rgb(153, 10, 0); |
|
|
|
|
