|
|
|
@ -72,7 +72,8 @@ |
|
|
|
@clear="handleNodeSearch" |
|
|
|
class="search-select"> |
|
|
|
<el-option label="全部" value="全部"/> |
|
|
|
<el-option v-for="tag in dynamicLabels" :key="tag" :label="tag" :value="tag"/> |
|
|
|
<el-option v-for="item in dynamicLabels" :key="item" :label="translateToChinese(item)" |
|
|
|
:value="item"/> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -87,7 +88,7 @@ |
|
|
|
<el-table-column prop="nodeId" label="节点ID" width="180" align="center" show-overflow-tooltip/> |
|
|
|
<el-table-column label="实体类型" width="160" align="center"> |
|
|
|
<template #default="scope"> |
|
|
|
{{ scope.row.labels ? scope.row.labels[0] : 'Drug' }} |
|
|
|
<span>{{ translateToChinese(scope.row.labels ? scope.row.labels[0] : '') }}</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="name" label="实体名称" min-width="250" align="center" show-overflow-tooltip/> |
|
|
|
@ -133,6 +134,25 @@ |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="input-group-inline"> |
|
|
|
<span class="filter-label-text">关系类型</span> |
|
|
|
<el-select |
|
|
|
v-model="relSearch.type" |
|
|
|
placeholder="选择关系" |
|
|
|
clearable |
|
|
|
filterable |
|
|
|
@change="handleRelSearch" |
|
|
|
class="search-select" |
|
|
|
> |
|
|
|
<el-option label="全部" value=""/> |
|
|
|
<el-option |
|
|
|
v-for="item in dynamicRelTypes" |
|
|
|
:key="item.type" |
|
|
|
:label="item.label" |
|
|
|
:value="item.type" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<div class="input-group-inline"> |
|
|
|
<span class="filter-label-text">结束节点</span> |
|
|
|
<el-autocomplete |
|
|
|
v-model="relSearch.target" |
|
|
|
@ -154,9 +174,9 @@ |
|
|
|
<div class="table-shadow-wrapper table-compact"> |
|
|
|
<el-table v-loading="loading" :data="relData" class="ref-table" height="calc(100vh - 560px)"> |
|
|
|
<el-table-column prop="source" label="起始节点" min-width="200" align="center" show-overflow-tooltip/> |
|
|
|
<el-table-column prop="type" label="关系类型" width="150" align="center"> |
|
|
|
<el-table-column label="关系描述" width="150" align="center"> |
|
|
|
<template #default="scope"> |
|
|
|
{{ scope.row.type }} |
|
|
|
<span>{{ translateToChinese(scope.row.type) }}</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="target" label="结束节点" min-width="200" align="center" show-overflow-tooltip/> |
|
|
|
@ -196,26 +216,27 @@ |
|
|
|
<el-descriptions-item label="业务 ID (NodeId)">{{ currentDetail.nodeId }}</el-descriptions-item> |
|
|
|
<el-descriptions-item label="实体名称">{{ currentDetail.name }}</el-descriptions-item> |
|
|
|
<el-descriptions-item label="所属标签"> |
|
|
|
<el-tag v-for="l in currentDetail.labels" :key="l" style="margin-right: 5px">{{ l }}</el-tag> |
|
|
|
{{ (currentDetail.labels || []).map(l => translateToChinese(l)).join(', ') }} |
|
|
|
</el-descriptions-item> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<el-descriptions-item label="起始节点">{{ currentDetail.source }}</el-descriptions-item> |
|
|
|
<el-descriptions-item label="关系类型">{{ currentDetail.type }}</el-descriptions-item> |
|
|
|
<el-descriptions-item label="关系标签">{{ currentDetail.label || '无' }}</el-descriptions-item> |
|
|
|
<el-descriptions-item label="关系描述">{{ translateToChinese(currentDetail.type) }}</el-descriptions-item> |
|
|
|
<el-descriptions-item label="关系标签属性">{{ currentDetail.label || '无' }}</el-descriptions-item> |
|
|
|
<el-descriptions-item label="结束节点">{{ currentDetail.target }}</el-descriptions-item> |
|
|
|
</template> |
|
|
|
</el-descriptions> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<el-dialog v-model="nodeDialogVisible" :title="isEdit ? '修改节点' : '新增节点'" width="450px" class="custom-dialog" header-class="bold-header"> |
|
|
|
<el-dialog v-model="nodeDialogVisible" :title="isEdit ? '修改节点' : '新增节点'" width="450px" class="custom-dialog" |
|
|
|
header-class="bold-header"> |
|
|
|
<el-form :model="nodeForm" label-width="90px" class="custom-form"> |
|
|
|
<el-form-item label="名称" required> |
|
|
|
<el-input v-model="nodeForm.name" placeholder="请输入实体名称" clearable/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="标签" required> |
|
|
|
<el-select v-model="nodeForm.label" filterable allow-create placeholder="选择或输入标签" style="width: 100%"> |
|
|
|
<el-option v-for="tag in dynamicLabels" :key="tag" :label="tag" :value="tag"/> |
|
|
|
<el-select v-model="nodeForm.label" filterable placeholder="请选择标签" style="width: 100%"> |
|
|
|
<el-option v-for="item in dynamicLabels" :key="item" :label="translateToChinese(item)" :value="item"/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
@ -227,25 +248,47 @@ |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<el-dialog v-model="relDialogVisible" :title="isEdit ? '修改关系' : '新增关系'" width="450px" class="custom-dialog" header-class="bold-header"> |
|
|
|
<el-dialog v-model="relDialogVisible" :title="isEdit ? '修改关系' : '新增关系'" width="450px" class="custom-dialog" |
|
|
|
header-class="bold-header"> |
|
|
|
<el-form :model="relForm" label-width="90px" class="custom-form"> |
|
|
|
<el-form-item label="起始节点" required> |
|
|
|
<el-autocomplete v-model="relForm.source" :fetch-suggestions="queryNodeSearch" style="width:100%" placeholder="请输入起点名称"/> |
|
|
|
<el-autocomplete v-model="relForm.source" :fetch-suggestions="queryNodeSearch" style="width:100%" |
|
|
|
placeholder="请输入起点名称"/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="结束节点" required> |
|
|
|
<el-autocomplete v-model="relForm.target" :fetch-suggestions="queryNodeSearch" style="width:100%" placeholder="请输入终点名称"/> |
|
|
|
<el-autocomplete v-model="relForm.target" :fetch-suggestions="queryNodeSearch" style="width:100%" |
|
|
|
placeholder="请输入终点名称"/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="关系类型" required> |
|
|
|
<el-input v-model="relForm.type" placeholder="例如:TREATS"/> |
|
|
|
<el-select |
|
|
|
v-model="relForm.type" |
|
|
|
filterable |
|
|
|
allow-create |
|
|
|
placeholder="选择或输入关系类型" |
|
|
|
style="width: 100%" |
|
|
|
@change="(val) => { |
|
|
|
const selected = dynamicRelTypes.find(i => i.type === val); |
|
|
|
if(selected) relForm.label = selected.label; |
|
|
|
}" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in dynamicRelTypes" |
|
|
|
:key="item.type" |
|
|
|
:label="item.label" |
|
|
|
:value="item.type" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="关系显示名"> |
|
|
|
<el-input v-model="relForm.label" placeholder="如果不填则同关系类型"/> |
|
|
|
<el-form-item label="显示名称"> |
|
|
|
<el-input v-model="relForm.label" placeholder="用于前端展示的中文名称"/> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<template #footer> |
|
|
|
<div class="dialog-footer-wrap"> |
|
|
|
<el-button class="btn-cancel" @click="relDialogVisible = false">取消</el-button> |
|
|
|
<el-button class="btn-confirm" type="primary" :loading="submitting" :disabled="submitting" @click="submitRel">确认</el-button> |
|
|
|
<el-button class="btn-confirm" type="primary" :loading="submitting" :disabled="submitting" @click="submitRel"> |
|
|
|
确认 |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
@ -253,31 +296,96 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
import { ref, onMounted, reactive } from 'vue' |
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus' |
|
|
|
import {ref, onMounted, reactive, computed} from 'vue' |
|
|
|
import {ElMessage, ElMessageBox} from 'element-plus' |
|
|
|
import Menu from '@/components/Menu.vue' |
|
|
|
import { |
|
|
|
getKgStats, getLabels, getNodeSuggestions, getNodesList, getRelationshipsList, |
|
|
|
addNode, updateNode, addRelationship, updateRelationship, deleteNode, deleteRelationship |
|
|
|
getKgStats, getLabels, getRelationshipTypes, getNodeSuggestions, getNodesList, getRelationshipsList, |
|
|
|
addNode, updateNode, addRelationship, updateRelationship, deleteNode, deleteRelationship, |
|
|
|
fixNodeIds |
|
|
|
} from '@/api/data' |
|
|
|
|
|
|
|
// --- 映射字典 (作为兜底和基础映射) --- |
|
|
|
const CHINESE_TO_ENGLISH_LABEL = { |
|
|
|
"疾病": "Disease", |
|
|
|
"症状": "Symptom", |
|
|
|
"检查项目": "AuxiliaryExamination", |
|
|
|
"药物": "Drug", |
|
|
|
"手术": "Operation", |
|
|
|
"解剖部位": "CheckSubject", |
|
|
|
"并发症": "Complication", |
|
|
|
"诊断": "Diagnosis", |
|
|
|
"治疗": "Treatment", |
|
|
|
"辅助治疗": "AdjuvantTherapy", |
|
|
|
"不良反应": "adverseReactions", |
|
|
|
"检查": "Check", |
|
|
|
"部门": "Department", |
|
|
|
"疾病部位": "DiseaseSite", |
|
|
|
"相关疾病": "RelatedDisease", |
|
|
|
"相关症状": "RelatedSymptom", |
|
|
|
"传播途径": "SpreadWay", |
|
|
|
"阶段": "Stage", |
|
|
|
"主题/主体": "Subject", |
|
|
|
"症状与体征": "SymptomAndSign", |
|
|
|
"治疗方案": "TreatmentPrograms", |
|
|
|
"类型": "Type", |
|
|
|
"原因": "Cause", |
|
|
|
"属性": "Attribute", |
|
|
|
"指示/适应症": "Indications", |
|
|
|
"成分": "Ingredients", |
|
|
|
"病原学": "Pathogenesis", |
|
|
|
"病理类型": "PathologicalType", |
|
|
|
"发病机制": "Pathophysiology", |
|
|
|
"注意事项": "Precautions", |
|
|
|
"预后": "Prognosis", |
|
|
|
"预后生存时间": "PrognosticSurvivalTime", |
|
|
|
"疾病比率": "DiseaseRatio", |
|
|
|
"药物治疗": "DrugTherapy", |
|
|
|
"感染性": "Infectious", |
|
|
|
"实体": "Entity" |
|
|
|
}; |
|
|
|
|
|
|
|
// 动态获取的关系类型映射 |
|
|
|
const dynamicRelTypes = ref([]); |
|
|
|
const dynamicLabels = ref([]); |
|
|
|
|
|
|
|
// 核心:翻译字典逻辑 |
|
|
|
const ENGLISH_TO_CHINESE = computed(() => { |
|
|
|
const map = {}; |
|
|
|
// 1. 基础字典映射 |
|
|
|
for (const [chi, eng] of Object.entries(CHINESE_TO_ENGLISH_LABEL)) { |
|
|
|
map[eng] = chi; |
|
|
|
map[eng.toLowerCase()] = chi; |
|
|
|
} |
|
|
|
// 2. 数据库动态获取的映射 (优先级更高) |
|
|
|
dynamicRelTypes.value.forEach(item => { |
|
|
|
map[item.type] = item.label; |
|
|
|
}); |
|
|
|
return map; |
|
|
|
}); |
|
|
|
|
|
|
|
const translateToChinese = (val) => { |
|
|
|
if (!val) return ''; |
|
|
|
return ENGLISH_TO_CHINESE.value[val] || ENGLISH_TO_CHINESE.value[val.toLowerCase()] || val; |
|
|
|
}; |
|
|
|
|
|
|
|
// --- 基础状态 --- |
|
|
|
const pageSize = ref(20); |
|
|
|
const activeName = ref('first'); |
|
|
|
const loading = ref(false); |
|
|
|
const submitting = ref(false); // 提交锁 |
|
|
|
const stats = reactive({ totalNodes: 0, totalRels: 0, todayNodes: 0 }); |
|
|
|
const submitting = ref(false); |
|
|
|
const stats = reactive({totalNodes: 0, totalRels: 0, todayNodes: 0}); |
|
|
|
|
|
|
|
// --- 数据列表 --- |
|
|
|
const nodeData = ref([]); |
|
|
|
const nodeTotal = ref(0); |
|
|
|
const nodePage = ref(1); |
|
|
|
const nodeSearch = reactive({ name: '', label: '' }); |
|
|
|
const nodeSearch = reactive({name: '', label: ''}); |
|
|
|
|
|
|
|
const relData = ref([]); |
|
|
|
const relTotal = ref(0); |
|
|
|
const relPage = ref(1); |
|
|
|
const relSearch = reactive({ source: '', target: '' }); |
|
|
|
const relSearch = reactive({source: '', target: '', type: ''}); |
|
|
|
|
|
|
|
// --- 弹窗控制 --- |
|
|
|
const nodeDialogVisible = ref(false); |
|
|
|
@ -286,19 +394,42 @@ const detailVisible = ref(false); |
|
|
|
const detailType = ref('node'); |
|
|
|
const currentDetail = ref({}); |
|
|
|
const isEdit = ref(false); |
|
|
|
const dynamicLabels = ref([]); |
|
|
|
|
|
|
|
// --- 表单数据 --- |
|
|
|
const nodeForm = reactive({ id: '', name: '', label: '' }); |
|
|
|
const relForm = reactive({ id: '', source: '', target: '', type: '', label: '' }); |
|
|
|
const nodeForm = reactive({id: '', name: '', label: ''}); |
|
|
|
const relForm = reactive({id: '', source: '', target: '', type: '', label: ''}); |
|
|
|
|
|
|
|
// --- 逻辑实现 --- |
|
|
|
|
|
|
|
const fetchAllMetadata = async () => { |
|
|
|
// 获取全量节点标签 |
|
|
|
getLabels().then(res => { |
|
|
|
if (res?.code === 200) dynamicLabels.value = res.data; |
|
|
|
}); |
|
|
|
// 获取全量关系类型 |
|
|
|
getRelationshipTypes().then(res => { |
|
|
|
if (res?.code === 200) dynamicRelTypes.value = res.data; |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
const initDataGovernance = async () => { |
|
|
|
try { |
|
|
|
const res = await fixNodeIds(); |
|
|
|
if (res?.code === 200 && activeName.value === 'first') { |
|
|
|
fetchNodes(); |
|
|
|
} |
|
|
|
} catch (e) { |
|
|
|
console.error(e); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
const fetchStats = async () => { |
|
|
|
try { |
|
|
|
const res = await getKgStats(); |
|
|
|
if (res?.code === 200) Object.assign(stats, res.data); |
|
|
|
} catch (e) { console.error("Stats Error", e); } |
|
|
|
} catch (e) { |
|
|
|
console.error(e); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
const fetchNodes = async () => { |
|
|
|
@ -314,8 +445,11 @@ const fetchNodes = async () => { |
|
|
|
nodeData.value = res.data.items; |
|
|
|
nodeTotal.value = res.data.total; |
|
|
|
} |
|
|
|
} catch (e) { ElMessage.error('加载节点失败'); } |
|
|
|
finally { loading.value = false; } |
|
|
|
} catch (e) { |
|
|
|
ElMessage.error('加载节点失败'); |
|
|
|
} finally { |
|
|
|
loading.value = false; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
const fetchRels = async () => { |
|
|
|
@ -325,30 +459,33 @@ const fetchRels = async () => { |
|
|
|
page: relPage.value, |
|
|
|
pageSize: pageSize.value, |
|
|
|
source: relSearch.source?.trim() || null, |
|
|
|
target: relSearch.target?.trim() || null |
|
|
|
target: relSearch.target?.trim() || null, |
|
|
|
type: relSearch.type || null // 此时 type 已经是英文 |
|
|
|
}); |
|
|
|
if (res?.code === 200) { |
|
|
|
relData.value = res.data.items; |
|
|
|
relTotal.value = res.data.total; |
|
|
|
} |
|
|
|
} catch (e) { ElMessage.error('加载关系失败'); } |
|
|
|
finally { loading.value = false; } |
|
|
|
} catch (e) { |
|
|
|
ElMessage.error('加载关系失败'); |
|
|
|
} finally { |
|
|
|
loading.value = false; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
const openNodeDialog = (row = null) => { |
|
|
|
isEdit.value = !!row; |
|
|
|
if (row) { |
|
|
|
Object.assign(nodeForm, { id: row.id, name: row.name, label: row.labels?.[0] || '' }); |
|
|
|
Object.assign(nodeForm, {id: row.id, name: row.name, label: row.labels?.[0] || 'Drug'}); |
|
|
|
} else { |
|
|
|
Object.assign(nodeForm, { id: '', name: '', label: 'Drug' }); |
|
|
|
Object.assign(nodeForm, {id: '', name: '', label: 'Drug'}); |
|
|
|
} |
|
|
|
nodeDialogVisible.value = true; |
|
|
|
}; |
|
|
|
|
|
|
|
const submitNode = async () => { |
|
|
|
if (!nodeForm.name?.trim()) return ElMessage.warning('名称不能为空'); |
|
|
|
if (submitting.value) return; // 物理防重 |
|
|
|
|
|
|
|
if (submitting.value) return; |
|
|
|
submitting.value = true; |
|
|
|
try { |
|
|
|
const res = isEdit.value ? await updateNode(nodeForm) : await addNode(nodeForm); |
|
|
|
@ -357,18 +494,27 @@ const submitNode = async () => { |
|
|
|
nodeDialogVisible.value = false; |
|
|
|
fetchNodes(); |
|
|
|
fetchStats(); |
|
|
|
fetchAllMetadata(); // 刷新标签 |
|
|
|
} else { |
|
|
|
ElMessage.error(res?.msg || '操作失败'); |
|
|
|
} |
|
|
|
} catch (e) { |
|
|
|
ElMessage.error('接口响应异常'); |
|
|
|
} finally { submitting.value = false; } |
|
|
|
ElMessage.error('接口异常'); |
|
|
|
} finally { |
|
|
|
submitting.value = false; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
const openRelDialog = (row = null) => { |
|
|
|
isEdit.value = !!row; |
|
|
|
if (row) { |
|
|
|
Object.assign(relForm, { id: row.id, source: row.source, target: row.target, type: row.type, label: row.label || '' }); |
|
|
|
Object.assign(relForm, { |
|
|
|
id: row.id, |
|
|
|
source: row.source, |
|
|
|
target: row.target, |
|
|
|
type: row.type, |
|
|
|
label: row.label || '' |
|
|
|
}); |
|
|
|
} else { |
|
|
|
Object.assign(relForm, {id: '', source: '', target: '', type: '', label: ''}); |
|
|
|
} |
|
|
|
@ -377,29 +523,21 @@ const openRelDialog = (row = null) => { |
|
|
|
|
|
|
|
const submitRel = async () => { |
|
|
|
if (!relForm.source || !relForm.target || !relForm.type) return ElMessage.warning('必填项缺失'); |
|
|
|
if (submitting.value) return; // 核心:防止重复点击产生的二次请求 |
|
|
|
|
|
|
|
if (submitting.value) return; |
|
|
|
submitting.value = true; |
|
|
|
try { |
|
|
|
const payload = isEdit.value ? {...relForm} : { |
|
|
|
source: relForm.source, |
|
|
|
target: relForm.target, |
|
|
|
type: relForm.type, |
|
|
|
label: relForm.label || relForm.type |
|
|
|
}; |
|
|
|
|
|
|
|
const res = isEdit.value ? await updateRelationship(payload) : await addRelationship(payload); |
|
|
|
|
|
|
|
const res = isEdit.value ? await updateRelationship(relForm) : await addRelationship(relForm); |
|
|
|
if (res?.code === 200) { |
|
|
|
ElMessage.success('提交成功'); |
|
|
|
relDialogVisible.value = false; |
|
|
|
fetchRels(); |
|
|
|
fetchStats(); |
|
|
|
fetchAllMetadata(); // 刷新关系类型列表 |
|
|
|
} else { |
|
|
|
ElMessage.error(res?.msg || '提交失败'); |
|
|
|
} |
|
|
|
} catch (e) { |
|
|
|
ElMessage.error('网络连接异常'); |
|
|
|
ElMessage.error('网络异常'); |
|
|
|
} finally { |
|
|
|
submitting.value = false; |
|
|
|
} |
|
|
|
@ -412,6 +550,7 @@ const handleDelete = (row, type) => { |
|
|
|
ElMessage.success('删除成功'); |
|
|
|
type === 'node' ? fetchNodes() : fetchRels(); |
|
|
|
fetchStats(); |
|
|
|
fetchAllMetadata(); |
|
|
|
} |
|
|
|
}).catch(() => { |
|
|
|
}); |
|
|
|
@ -439,15 +578,15 @@ const handleView = (row, type) => { |
|
|
|
}; |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
initDataGovernance(); |
|
|
|
fetchStats(); |
|
|
|
fetchNodes(); |
|
|
|
getLabels().then(res => { |
|
|
|
if (res?.code === 200) dynamicLabels.value = res.data; |
|
|
|
}); |
|
|
|
fetchAllMetadata(); // 初始化加载所有标签和关系类型 |
|
|
|
}); |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
/* 样式保持不变... */ |
|
|
|
.knowledge-graph-data-container { |
|
|
|
background-color: #f4f7fa; |
|
|
|
display: flex; |
|
|
|
@ -602,7 +741,7 @@ onMounted(() => { |
|
|
|
} |
|
|
|
|
|
|
|
.search-input, .search-select { |
|
|
|
width: 200px !important; |
|
|
|
width: 160px !important; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-search-ref { |
|
|
|
|