|
|
|
@ -1,9 +1,36 @@ |
|
|
|
<template> |
|
|
|
|
|
|
|
<div class="knowledge-graph-container"> |
|
|
|
<Menu |
|
|
|
:initial-active="0" |
|
|
|
/> |
|
|
|
<div class="icd10-tree-container" style="overflow: scroll;width: 25%"> |
|
|
|
<main class="main-body"> |
|
|
|
<header class="top-nav"> |
|
|
|
<div class="search-container"> |
|
|
|
<input type="text" placeholder="搜索......"/> |
|
|
|
<img src="@/assets/搜索.png" class="search-btn"/> |
|
|
|
</div> |
|
|
|
<div class="legend-box"> |
|
|
|
<div v-for="(item, index) in legendItems" :key="index" class="legend-item"> |
|
|
|
<div |
|
|
|
:style="{ |
|
|
|
backgroundColor: item.color, |
|
|
|
opacity: visibleCategories.has(item.key) ? 1 : 0.3 // ✅ 关键：根据状态调整透明度 |
|
|
|
}" |
|
|
|
class="color-block" |
|
|
|
@click="toggleCategory(item.key)" |
|
|
|
></div> |
|
|
|
<span>{{ item.label }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</header> |
|
|
|
|
|
|
|
<section class="main-content"> |
|
|
|
<div class="disease-container"> |
|
|
|
<div class="disease-header"> |
|
|
|
<div class="d-title"><img src="@/assets/组 10.png" class="d-icon"/><span>疾病信息</span></div> |
|
|
|
<div class="d-count">12类</div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<el-radio-group v-model="typeRadio" @change="changeTree"> |
|
|
|
<el-radio value="Disease">疾病</el-radio> |
|
|
|
@ -11,45 +38,34 @@ |
|
|
|
<el-radio value="Check">检查</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div class="disease-body"> |
|
|
|
|
|
|
|
<div class="tree"> |
|
|
|
<el-tree |
|
|
|
:data="treeData" |
|
|
|
:props="treeProps" |
|
|
|
:expand-on-click-node="false" |
|
|
|
@node-click="handleNodeClick" |
|
|
|
|
|
|
|
> |
|
|
|
<template #default="{ node, data }"> |
|
|
|
<span class="custom-tree-node"> |
|
|
|
<!-- <el-tag size="small" :type="getTagType(data.level)" class="level-tag">--> |
|
|
|
<!-- --> |
|
|
|
<!-- </el-tag>--> |
|
|
|
<!-- {{ getLevelLabel(data.level) }}--> |
|
|
|
<span class="code">{{ data.code }}</span> |
|
|
|
<el-tooltip :content="data.label" placement="top"> |
|
|
|
<span class="label">{{ data.label }}</span> |
|
|
|
</el-tooltip> |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</el-tree> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="width: 75%"> |
|
|
|
<div style="display: flex; gap: 10px; margin-bottom: 10px;"> |
|
|
|
<!-- 图例项 --> |
|
|
|
<div v-for="(item, index) in legendItems" :key="index" class="legend-item"> |
|
|
|
<div |
|
|
|
:style="{ |
|
|
|
backgroundColor: item.color, |
|
|
|
opacity: visibleCategories.has(item.key) ? 1 : 0.3 // ✅ 关键：根据状态调整透明度 |
|
|
|
}" |
|
|
|
class="color-block" |
|
|
|
@click="toggleCategory(item.key)" |
|
|
|
></div> |
|
|
|
<span>{{ item.label }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="graph-viewport"> |
|
|
|
<div ref="graphContainer" class="graph-container" id="container"></div> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
</main> |
|
|
|
<!-- 图谱容器 --> |
|
|
|
|
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -824,8 +840,11 @@ button:hover { |
|
|
|
|
|
|
|
.graph-container { |
|
|
|
flex: 1; |
|
|
|
border: 1px solid #eee; |
|
|
|
background: #fff; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
border: 1px dashed #e2e8f0; |
|
|
|
border-radius: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
.legend-item { |
|
|
|
@ -846,4 +865,144 @@ button:hover { |
|
|
|
.legend-item:hover { |
|
|
|
opacity: 0.8; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* --- 主体区域 --- */ |
|
|
|
.main-body { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
background: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
.top-nav { |
|
|
|
height: 7vw; |
|
|
|
padding: 0 30px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
border-bottom: 1px solid #f0f0f0; |
|
|
|
} |
|
|
|
|
|
|
|
.search-container { |
|
|
|
width: 260px; |
|
|
|
height: 36px; |
|
|
|
background: #f5f7fa; |
|
|
|
border-radius: 18px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
padding: 0 15px; |
|
|
|
} |
|
|
|
|
|
|
|
.search-container input { |
|
|
|
border: none; |
|
|
|
outline: none; |
|
|
|
background: transparent; |
|
|
|
width: 100%; |
|
|
|
font-size: 13px; |
|
|
|
} |
|
|
|
|
|
|
|
.search-btn { |
|
|
|
width: 16px; |
|
|
|
} |
|
|
|
|
|
|
|
.legend-box { |
|
|
|
display: flex; |
|
|
|
gap: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.leg-item { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
font-size: 13px; |
|
|
|
} |
|
|
|
|
|
|
|
.leg-item i { |
|
|
|
width: 24px; |
|
|
|
height: 8px; |
|
|
|
border-radius: 4px; |
|
|
|
margin-right: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
.main-content { |
|
|
|
flex: 1; |
|
|
|
padding: 20px 30px; |
|
|
|
display: flex; |
|
|
|
gap: 20px; |
|
|
|
height: 50vw; |
|
|
|
} |
|
|
|
|
|
|
|
.disease-container { |
|
|
|
width: 360px; |
|
|
|
border: 1px solid #f0f0f0; |
|
|
|
border-radius: 12px; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.disease-header { |
|
|
|
height: 50px; |
|
|
|
background: #2265f4; |
|
|
|
color: #fff; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 0 15px; |
|
|
|
} |
|
|
|
|
|
|
|
.d-icon { |
|
|
|
width: 18px; |
|
|
|
margin-right: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
.graph-viewport { |
|
|
|
flex: 1; |
|
|
|
border: 1px dashed #e2e8f0; |
|
|
|
border-radius: 12px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
color: #ccc; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.custom-tree-node { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
width: 100%; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.code { |
|
|
|
flex-shrink: 0; /* 不允许 code 被压缩 */ |
|
|
|
margin-right: 8px; |
|
|
|
font-size: 12px; |
|
|
|
color: #666; |
|
|
|
} |
|
|
|
|
|
|
|
.label { |
|
|
|
flex: 1; /* 占据剩余空间 */ |
|
|
|
overflow: hidden; |
|
|
|
white-space: nowrap; |
|
|
|
text-overflow: ellipsis; |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
.disease-body{ |
|
|
|
width: 360px; |
|
|
|
overflow: scroll; |
|
|
|
height: 74vh; |
|
|
|
} |
|
|
|
/* 隐藏滚动条，但允许滚动 */ |
|
|
|
.disease-body { |
|
|
|
/* Firefox */ |
|
|
|
scrollbar-width: none; /* 'auto' | 'thin' | 'none' */ |
|
|
|
|
|
|
|
/* Webkit (Chrome, Safari, Edge) */ |
|
|
|
-ms-overflow-style: none; /* IE and Edge */ |
|
|
|
scrollbar-width: none; /* Firefox */ |
|
|
|
padding-bottom: 9px; |
|
|
|
} |
|
|
|
|
|
|
|
.disease-body::-webkit-scrollbar { |
|
|
|
display: none; /* Webkit browsers */ |
|
|
|
} |
|
|
|
</style> |
