You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
964 lines
33 KiB
964 lines
33 KiB
<template>
|
|
<div class="knowledge-graph-data-container">
|
|
<Menu :initial-active="3"/>
|
|
|
|
<main class="main-body">
|
|
<div class="page-header">
|
|
<span class="header-decorator"></span>
|
|
<h2 class="header-title">知识图谱数据管理</h2>
|
|
</div>
|
|
|
|
<div class="stat-container">
|
|
<div class="custom-stat-card">
|
|
<div class="stat-inner">
|
|
<div class="stat-label">实体总数</div>
|
|
<div class="stat-value">{{ stats.totalNodes.toLocaleString() }}</div>
|
|
<div class="stat-desc">涵盖疾病、药物、症状等核心医疗要素</div>
|
|
</div>
|
|
</div>
|
|
<div class="custom-stat-card">
|
|
<div class="stat-inner">
|
|
<div class="stat-label">关系总数</div>
|
|
<div class="stat-value">{{ stats.totalRels.toLocaleString() }}</div>
|
|
<div class="stat-desc">包含禁忌、并发症、治疗等多种关联语义</div>
|
|
</div>
|
|
</div>
|
|
<div class="custom-stat-card">
|
|
<div class="stat-inner">
|
|
<div class="stat-label">今日新增</div>
|
|
<div class="stat-value">{{ stats.todayNodes.toLocaleString() }}</div>
|
|
<div class="stat-desc">24小时内系统人工审核增量</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="data-content-wrapper">
|
|
<div class="custom-folder-tabs">
|
|
<div
|
|
class="folder-tab-item"
|
|
:class="{ active: activeName === 'first' }"
|
|
@click="activeName = 'first'; fetchNodes()"
|
|
>
|
|
节点管理
|
|
</div>
|
|
<div
|
|
class="folder-tab-item"
|
|
:class="{ active: activeName === 'second' }"
|
|
@click="activeName = 'second'; fetchRels()"
|
|
>
|
|
关系管理
|
|
</div>
|
|
</div>
|
|
|
|
<div class="data-card-container">
|
|
<div v-if="activeName === 'first'" class="tab-content-box animate-fade">
|
|
<div class="filter-bar">
|
|
<div class="filter-inputs">
|
|
<div class="input-group-inline">
|
|
<span class="filter-label-text">查询名称</span>
|
|
<el-autocomplete
|
|
v-model="nodeSearch.name"
|
|
:fetch-suggestions="queryNodeSearch"
|
|
placeholder="搜索节点名称..."
|
|
clearable
|
|
:trigger-on-focus="true"
|
|
@select="handleNodeSearch"
|
|
@clear="handleNodeSearch"
|
|
class="search-input"
|
|
/>
|
|
</div>
|
|
<div class="input-group-inline">
|
|
<span class="filter-label-text">选择标签</span>
|
|
<el-select
|
|
v-model="nodeSearch.label"
|
|
placeholder="请选择标签"
|
|
clearable
|
|
@change="handleNodeLabelChange"
|
|
@clear="handleNodeLabelChange"
|
|
class="search-select"
|
|
>
|
|
<el-option v-for="item in dynamicLabels" :key="item" :label="translateToChinese(item)"
|
|
:value="item"/>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
<div class="filter-btns">
|
|
<el-button type="primary" class="btn-search-ref" @click="handleNodeSearch">搜索</el-button>
|
|
<el-button type="primary" class="btn-import" @click="">导入</el-button>
|
|
<el-button type="primary" class="btn-export" @click="">导出</el-button>
|
|
<el-button class="btn-orange" @click="openNodeDialog(null)">新增节点</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-shadow-wrapper table-compact">
|
|
<el-table v-loading="loading" :data="nodeData" class="ref-table" height="calc(100vh - 530px)">
|
|
<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">
|
|
<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/>
|
|
<el-table-column label="操作" width="240" align="center">
|
|
<template #default="scope">
|
|
<div class="op-group">
|
|
<el-button class="ref-op-btn edit" @click="openNodeDialog(scope.row)">编辑</el-button>
|
|
<el-button class="ref-op-btn delete" @click="handleDelete(scope.row, 'node')">删除</el-button>
|
|
<!-- <el-button class="ref-op-btn view" @click="handleView(scope.row, 'node')">详情</el-button>-->
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
|
|
<div class="pagination-footer pagination-compact">
|
|
<el-pagination
|
|
background
|
|
layout="slot, sizes, prev, pager, next, jumper"
|
|
:total="nodeTotal"
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
v-model:page-size="pageSize"
|
|
v-model:current-page="nodePage"
|
|
@size-change="handleNodeSizeChange"
|
|
@current-change="fetchNodes"
|
|
>
|
|
<span class="pagination-custom-text">共计 {{ nodeTotal.toLocaleString() }} 条数据</span>
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="tab-content-box animate-fade">
|
|
<div class="filter-bar">
|
|
<div class="filter-inputs">
|
|
<div class="input-group-inline">
|
|
<span class="filter-label-text">起始节点</span>
|
|
<el-autocomplete
|
|
v-model="relSearch.source"
|
|
:fetch-suggestions="queryNodeSearch"
|
|
placeholder="搜索起点..."
|
|
clearable
|
|
:trigger-on-focus="true"
|
|
@select="handleRelSearch"
|
|
@clear="handleRelSearch"
|
|
class="search-input"
|
|
/>
|
|
</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"
|
|
:fetch-suggestions="queryNodeSearch"
|
|
placeholder="搜索终点..."
|
|
clearable
|
|
:trigger-on-focus="true"
|
|
@select="handleRelSearch"
|
|
@clear="handleRelSearch"
|
|
class="search-input"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="filter-btns">
|
|
<el-button type="primary" class="btn-search-ref" @click="handleRelSearch">查询</el-button>
|
|
<el-button class="btn-orange" @click="openRelDialog(null)">新增关系</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-shadow-wrapper table-compact">
|
|
<el-table v-loading="loading" :data="relData" class="ref-table" height="calc(100vh - 530px)">
|
|
<el-table-column prop="source" label="起始节点" min-width="200" align="center" show-overflow-tooltip/>
|
|
<el-table-column label="关系描述" width="150" align="center">
|
|
<template #default="scope">
|
|
<span>{{ translateToChinese(scope.row.type) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="target" label="结束节点" min-width="200" align="center" show-overflow-tooltip/>
|
|
<el-table-column label="操作" width="240" align="center">
|
|
<template #default="scope">
|
|
<div class="op-group">
|
|
<el-button class="ref-op-btn edit" @click="openRelDialog(scope.row)">编辑</el-button>
|
|
<el-button class="ref-op-btn delete" @click="handleDelete(scope.row, 'rel')">删除</el-button>
|
|
<!-- <el-button class="ref-op-btn view" @click="handleView(scope.row, 'rel')">详情</el-button>-->
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
|
|
<div class="pagination-footer pagination-compact">
|
|
<el-pagination
|
|
background
|
|
layout="slot, sizes, prev, pager, next, jumper"
|
|
:total="relTotal"
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
v-model:page-size="pageSize"
|
|
v-model:current-page="relPage"
|
|
@size-change="handleRelSizeChange"
|
|
@current-change="fetchRels"
|
|
>
|
|
<span class="pagination-custom-text">共计 {{ relTotal.toLocaleString() }} 条数据</span>
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<el-dialog v-model="detailVisible" title="数据详情" style=" border-radius: 7px;" width="550px" destroy-on-close header-class="bold-header">
|
|
<el-descriptions :column="1" border>
|
|
<el-descriptions-item label="系统 ID (ElementId)">{{ currentDetail.id }}</el-descriptions-item>
|
|
<template v-if="detailType === 'node'">
|
|
<el-descriptions-item label="业务 ID (NodeId)">{{ currentDetail.nodeId }}</el-descriptions-item>
|
|
<el-descriptions-item label="实体名称">{{ currentDetail.name }}</el-descriptions-item>
|
|
<el-descriptions-item label="所属标签">
|
|
{{ (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="关系描述">{{ 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="530px" 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 class="label-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>
|
|
<template #footer>
|
|
<div class="dialog-footer-wrap">
|
|
<el-button class="btn-cancel" @click="nodeDialogVisible = false">取消</el-button>
|
|
<el-button class="btn-confirm" type="primary" :loading="submitting" @click="submitNode">确认</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<el-dialog v-model="relDialogVisible" :title="isEdit ? '修改关系' : '新增关系'" width="530px" class="custom-dialog"
|
|
header-class="bold-header">
|
|
<el-form :model="relForm" label-width="120px" class="custom-form">
|
|
<el-form-item label="起始节点" required>
|
|
<el-autocomplete v-model="relForm.source" :fetch-suggestions="queryNodeSearch" style="width:100%"
|
|
placeholder="请输入起点名称" :trigger-on-focus="true"/>
|
|
</el-form-item>
|
|
<el-form-item label="结束节点" required>
|
|
<el-autocomplete v-model="relForm.target" :fetch-suggestions="queryNodeSearch" style="width:100%"
|
|
placeholder="请输入终点名称" :trigger-on-focus="true"/>
|
|
</el-form-item>
|
|
<el-form-item label="关系类型" required>
|
|
<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>-->
|
|
</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>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ref, onMounted, reactive, computed} from 'vue'
|
|
import {ElMessage, ElMessageBox} from 'element-plus'
|
|
import Menu from '@/components/Menu.vue'
|
|
import {
|
|
getKgStats, getLabels, getRelationshipTypes, getNodeSuggestions, getNodesList, getRelationshipsList,
|
|
addNode, updateNode, addRelationship, updateRelationship, deleteNode, deleteRelationship,
|
|
fixNodeIds
|
|
} from '@/api/data'
|
|
import {preload} from "@/api/graph";
|
|
|
|
// --- 映射字典 (作为兜底和基础映射) ---
|
|
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",
|
|
"关联实体":"RelatedTo",
|
|
"人群分组":"MultipleGroups",
|
|
"发病率":"DiseaseRate"
|
|
};
|
|
|
|
const dynamicRelTypes = ref([]);
|
|
const dynamicLabels = ref([]);
|
|
|
|
const ENGLISH_TO_CHINESE = computed(() => {
|
|
const map = {};
|
|
for (const [chi, eng] of Object.entries(CHINESE_TO_ENGLISH_LABEL)) {
|
|
map[eng] = chi;
|
|
map[eng.toLowerCase()] = chi;
|
|
}
|
|
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 nodeData = ref([]);
|
|
const nodeTotal = ref(0);
|
|
const nodePage = ref(1);
|
|
const nodeSearch = reactive({name: '', label: ''});
|
|
|
|
const relData = ref([]);
|
|
const relTotal = ref(0);
|
|
const relPage = ref(1);
|
|
const relSearch = reactive({source: '', target: '', type: ''});
|
|
|
|
const nodeDialogVisible = ref(false);
|
|
const relDialogVisible = ref(false);
|
|
const detailVisible = ref(false);
|
|
const detailType = ref('node');
|
|
const currentDetail = ref({});
|
|
const isEdit = ref(false);
|
|
|
|
const nodeForm = reactive({id: '', name: '', label: ''});
|
|
const relForm = reactive({id: '', source: '', target: '', type: '', label: ''});
|
|
|
|
// --- 分页切换处理逻辑 ---
|
|
const handleNodeSizeChange = (val) => {
|
|
pageSize.value = val;
|
|
nodePage.value = 1;
|
|
fetchNodes();
|
|
};
|
|
|
|
const handleRelSizeChange = (val) => {
|
|
pageSize.value = val;
|
|
relPage.value = 1;
|
|
fetchRels();
|
|
};
|
|
|
|
// --- 数据抓取逻辑 ---
|
|
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(e);
|
|
}
|
|
};
|
|
|
|
const fetchNodes = async () => {
|
|
loading.value = true;
|
|
try {
|
|
const res = await getNodesList({
|
|
page: nodePage.value,
|
|
pageSize: pageSize.value,
|
|
name: nodeSearch.name?.trim() || null,
|
|
label: nodeSearch.label || null
|
|
});
|
|
if (res?.code === 200) {
|
|
nodeData.value = res.data.items;
|
|
nodeTotal.value = res.data.total;
|
|
}
|
|
} catch (e) {
|
|
ElMessage.error('加载节点失败');
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
const fetchRels = async () => {
|
|
loading.value = true;
|
|
try {
|
|
const res = await getRelationshipsList({
|
|
page: relPage.value,
|
|
pageSize: pageSize.value,
|
|
source: relSearch.source?.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;
|
|
}
|
|
};
|
|
|
|
const openNodeDialog = (row = null) => {
|
|
isEdit.value = !!row;
|
|
if (row) {
|
|
Object.assign(nodeForm, {id: row.id, name: row.name, label: row.labels?.[0] || ''});
|
|
} else {
|
|
Object.assign(nodeForm, {id: '', name: '', label: ''});
|
|
}
|
|
nodeDialogVisible.value = true;
|
|
};
|
|
|
|
const submitNode = async () => {
|
|
if (!nodeForm.name?.trim()) return ElMessage.warning('名称不能为空');
|
|
if (submitting.value) return;
|
|
submitting.value = true;
|
|
try {
|
|
const res = isEdit.value ? await updateNode(nodeForm) : await addNode(nodeForm);
|
|
if (res?.code === 200) {
|
|
ElMessage.success('操作成功');
|
|
nodeDialogVisible.value = false;
|
|
fetchNodes();
|
|
fetchStats();
|
|
fetchAllMetadata(); // 刷新标签
|
|
preload();
|
|
fetchAllMetadata();
|
|
} else {
|
|
ElMessage.error(res?.msg || '操作失败');
|
|
}
|
|
} catch (e) {
|
|
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 || ''
|
|
});
|
|
} else {
|
|
Object.assign(relForm, {id: '', source: '', target: '', type: '', label: ''});
|
|
}
|
|
relDialogVisible.value = true;
|
|
};
|
|
|
|
const submitRel = async () => {
|
|
if (!relForm.source || !relForm.target || !relForm.type) return ElMessage.warning('必填项缺失');
|
|
if (submitting.value) return;
|
|
submitting.value = true;
|
|
try {
|
|
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('网络异常');
|
|
} finally {
|
|
submitting.value = false;
|
|
}
|
|
};
|
|
|
|
const handleDelete = (row, type) => {
|
|
ElMessageBox.confirm('确定要删除吗？', '提示', {
|
|
customClass: 'my-custom-btns', // 自定义类名
|
|
confirmButtonText: '确认',
|
|
cancelButtonText: '取消'
|
|
}).then(async () => {
|
|
const res = type === 'node' ? await deleteNode(row.id) : await deleteRelationship(row.id);
|
|
if (res?.code === 200) {
|
|
ElMessage.success('删除成功');
|
|
preload();
|
|
type === 'node' ? fetchNodes() : fetchRels();
|
|
fetchStats();
|
|
fetchAllMetadata();
|
|
}
|
|
}).catch(() => {
|
|
});
|
|
};
|
|
|
|
// 节点查询处理
|
|
const handleNodeSearch = () => {
|
|
nodePage.value = 1;
|
|
fetchNodes();
|
|
};
|
|
|
|
// 节点标签变更逻辑：切换标签时清空输入框，并刷新列表
|
|
const handleNodeLabelChange = () => {
|
|
nodeSearch.name = ''; // 清空之前的输入值，让联想列表重新加载
|
|
nodePage.value = 1;
|
|
fetchNodes();
|
|
};
|
|
|
|
const handleRelSearch = () => {
|
|
relPage.value = 1;
|
|
fetchRels();
|
|
};
|
|
|
|
/**
|
|
* 联想搜索建议逻辑修改：
|
|
* 重点：将当前 nodeSearch.label 传给后端
|
|
*/
|
|
const queryNodeSearch = async (queryString, cb) => {
|
|
// 条件拦截：没有标签 且 没有输入内容
|
|
if (!nodeSearch.label && !queryString?.trim()) {
|
|
return cb([]);
|
|
}
|
|
|
|
try {
|
|
// 【核心改动】：传递 nodeSearch.label 到后端接口
|
|
const res = await getNodeSuggestions(queryString || "", nodeSearch.label || null);
|
|
if (res?.code === 200) {
|
|
// 后端返回的是字符串数组，转成组件需要的对象数组格式
|
|
const results = (res.data || []).map(n => ({value: n}));
|
|
cb(results);
|
|
} else {
|
|
cb([]);
|
|
}
|
|
} catch (e) {
|
|
console.error("联想查询失败", e);
|
|
cb([]);
|
|
}
|
|
};
|
|
|
|
const handleView = (row, type) => {
|
|
detailType.value = type;
|
|
currentDetail.value = {...row};
|
|
detailVisible.value = true;
|
|
};
|
|
|
|
onMounted(() => {
|
|
initDataGovernance();
|
|
fetchStats();
|
|
fetchNodes();
|
|
fetchAllMetadata();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.knowledge-graph-data-container { background-color: #f4f7fa; display: flex; height: 100vh; width: 100vw; }
|
|
.main-body { flex: 1; padding: 25px 40px; overflow: auto;height: 100vh; }
|
|
.page-header { display: flex; align-items: center; margin-bottom: 25px; }
|
|
.header-decorator { width: 10px; height: 22px; background-color: #165dff; border-radius: 5px; margin-right: 10px; }
|
|
.header-title { font-size: 22px; font-weight: bold; color: #165dff; margin: 0; }
|
|
.stat-container { display: flex; gap: 5%; margin-bottom: 30px; }
|
|
.custom-stat-card { flex: 1; max-width: 25%; height: 200px; background: #ffffff; border-radius: 40px; padding: 0 35px; box-shadow: 2px -1px 14px 9px #EBF1FF; border: 1px solid #ffffff; display: flex; align-items: center; transition: transform 0.3s ease; }
|
|
.stat-inner { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
|
|
.stat-label { color: #636364; font-size: 21px; margin-bottom: 15px; }
|
|
.stat-value { color: #165dff; font-size: 48px; font-weight: 800; margin-bottom: 15px; line-height: 1; }
|
|
.stat-desc { color: #999; font-size: 14px; line-height: 1.4; }
|
|
.data-content-wrapper { margin-top: 20px; display: flex; flex-direction: column; }
|
|
.custom-folder-tabs { display: flex; padding-left: 40px; }
|
|
.folder-tab-item { padding: 8px 20px; font-size: 12px; color: #86909c; cursor: pointer; background-color: #ecf2ff; border: 1px solid #dcdfe6; border-bottom: none; border-radius: 8px 8px 0 0; }
|
|
.folder-tab-item.active { background-color: #f1f6ff !important; color: #2869ff; font-weight: bold; border: 2px solid #6896ff; border-bottom: 2px solid #ffffff; margin-bottom: -1px; z-index: 3; }
|
|
.data-card-container { background: #ffffff; border-radius: 30px; padding: 20px 20px; box-shadow: 2px -1px 14px 4px #E1EAFF; border: 1px solid #eff4ff; position: relative; z-index: 4; }
|
|
.filter-bar { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 20px; }
|
|
.filter-inputs { display: flex; gap: 35px; flex-wrap: nowrap;margin-right: 20px; }
|
|
.input-group-inline { display: flex; align-items: center; gap: 12px; flex-shrink: 0; white-space: nowrap; }
|
|
.filter-label-text { font-size: 14px; color: #165dff; font-weight: 600; flex-shrink: 0; }
|
|
.search-input,.input-group-inline :deep(.el-input) { width: 200px !important;box-shadow: 0 0 0 2px #EBF0FF;border: none;border-radius: 5px; }
|
|
.search-input, .search-select { width: 200px !important;box-shadow: 0 0 0 2px #EBF0FF;border: none;border-radius: 5px; }
|
|
.input-group-inline :deep(.el-select__wrapper){
|
|
box-shadow: none !important;
|
|
}
|
|
:deep(.input-group-inline .el-autocomplete .el-input__wrapper){
|
|
box-shadow: none !important;
|
|
}
|
|
:deep(.label-select .el-autocomplete .el-input__wrapper.is-focus){
|
|
box-shadow: none !important;
|
|
}
|
|
:deep(.label-select .el-autocomplete .el-input__wrapper:hover){
|
|
box-shadow: none !important;
|
|
}
|
|
:deep(.el-form-item__content){box-shadow: 0 0 0 2px #EBF0FF;border: none;border-radius: 5px; }
|
|
.label-select {box-shadow: 0 0 0 2px #EBF0FF;border: none;border-radius: 5px; }
|
|
.btn-search-ref { background: #165dff !important; border-radius: 8px; height: 38px; }
|
|
|
|
.btn-import { background: rgb(145, 204, 117) !important; border-radius: 8px; height: 38px;border: none }
|
|
.btn-export { background: rgb(89, 209, 212) !important; border-radius: 8px; height: 38px;border: none }
|
|
.btn-orange { background: #ffb142 !important; color: white !important; border-radius: 8px; height: 38px; border: none !important; }
|
|
.table-compact { box-shadow: 0 4px 20px rgba(22, 93, 255, 0.08); overflow: hidden; }
|
|
.ref-table :deep(.el-table__header) th { background-color: #e8f0ff !important; color: #2869ff; font-weight: 700; }
|
|
.op-group { display: flex; gap: 8px; justify-content: center; }
|
|
.ref-op-btn { border: none !important; color: white !important; padding: 6px 14px !important; border-radius: 8px !important; }
|
|
.ref-op-btn.edit { background-color: #4379ff !important; }
|
|
.ref-op-btn.delete { background-color: #ff6060 !important; }
|
|
.ref-op-btn.view { background-color: #ffb142 !important; }
|
|
.pagination-footer { margin-top: 20px; display: flex; justify-content: flex-end; }
|
|
:deep(.bold-header) { margin-right: 0 !important; display: flex !important; justify-content: flex-start !important; }
|
|
:deep(.bold-header .el-dialog__title) { color: #303133 !important;font-weight: 900 !important;padding:5px;margin-bottom: 10px; font-size: 19px !important;}
|
|
.custom-form :deep(.el-form-item__label) { color: #606266 !important;font-size: 16px !important; }
|
|
.custom-form :deep(.el-input) {box-shadow: 0 0 0 2px #EBF0FF;border: none;border-radius: 5px;}
|
|
.custom-form :deep(.el-select__wrapper){
|
|
box-shadow: none !important;
|
|
}
|
|
.custom-form :deep(.el-input__wrapper){
|
|
box-shadow: none !important;
|
|
}
|
|
:deep(.custom-form .el-input__wrapper.is-focus){
|
|
box-shadow: none !important;
|
|
}
|
|
:deep(.custom-form .el-input__wrapper:hover){
|
|
box-shadow: none !important;
|
|
}
|
|
.dialog-footer-wrap { display: flex; justify-content: flex-end; gap: 15px; }
|
|
.btn-cancel { background-color: #e6e6e6 !important; border: none !important; color: #444 !important; padding: 18px 20px !important; font-weight: 500; }
|
|
.btn-confirm { background-color: #165dff !important; border: none !important; padding: 18px 20px !important; font-weight: 500; }
|
|
.animate-fade { animation: fadeIn 0.4s ease-out; }
|
|
.pagination-custom-text{color: #86909c}
|
|
:deep(.el-select__placeholder){color: #606266}
|
|
:deep(.el-pagination__sizes .el-select__wrapper){box-shadow: 0 0 0 2px #EBF0FF;}
|
|
:deep(.el-pagination.is-background .el-pager li.is-active){background-color: #165DFF;}
|
|
:deep(.el-pager li.is-active) {
|
|
color: #fff !important;
|
|
}
|
|
:deep(.el-dialog){border-radius: 7px}
|
|
|
|
:deep(.el-input__inner) {color:#606266}
|
|
:deep(.el-pagination .btn-next:hover){color: #165DFF !important;}
|
|
:deep(.el-pagination .btn-prev:hover){color: #165DFF !important;}
|
|
.pagination-footer :deep(.el-pagination .el-input__inner){box-shadow: 0 0 0 2px #EBF0FF;border-radius: 5px; }
|
|
.pagination-footer :deep(.el-input__wrapper){ box-shadow: none !important;}
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
|
|
</style>
|
|
<style>
|
|
.el-popper .el-select-dropdown__item.is-selected{
|
|
color: #165DFF !important;
|
|
font-weight: bold;
|
|
color: #165dff;
|
|
margin: 0;
|
|
}
|
|
|
|
.stat-container {
|
|
display: flex;
|
|
gap: 80px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.custom-stat-card {
|
|
flex: 1;
|
|
max-width: 280px;
|
|
height: 200px;
|
|
background: #ffffff;
|
|
border-radius: 30px;
|
|
padding: 0 35px;
|
|
box-shadow: 0 0 40px 0px rgba(22, 93, 255, 0.12);
|
|
border: 1px solid #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.stat-inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
}
|
|
|
|
.stat-label {
|
|
color: #636364;
|
|
font-size: 21px;
|
|
font-weight: 600;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.stat-value {
|
|
color: #165dff;
|
|
font-size: 48px;
|
|
font-weight: 800;
|
|
margin-bottom: 15px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.stat-desc {
|
|
color: #999;
|
|
font-size: 14px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.data-content-wrapper {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.custom-folder-tabs {
|
|
display: flex;
|
|
padding-left: 60px;
|
|
}
|
|
|
|
.folder-tab-item {
|
|
padding: 8px 20px;
|
|
font-size: 12px;
|
|
color: #86909c;
|
|
cursor: pointer;
|
|
background-color: #ecf2ff;
|
|
border: 1px solid #dcdfe6;
|
|
border-bottom: none;
|
|
border-radius: 8px 8px 0 0;
|
|
}
|
|
|
|
.my-custom-btns .el-button:not(.el-button--primary){ background-color: #e6e6e6 !important; border: none !important; color: #444 !important; padding: 18px 20px !important; font-weight: 500; }
|
|
.my-custom-btns .el-button--primary { background-color: #165dff !important; border: none !important; padding: 18px 20px !important; font-weight: 500; }
|
|
|
|
.data-card-container {
|
|
background: #ffffff;
|
|
border-radius: 30px;
|
|
padding: 40px 20px;
|
|
box-shadow: 0 0 40px 0px rgba(22, 93, 255, 0.15);
|
|
border: 1px solid #eff4ff;
|
|
position: relative;
|
|
z-index: 2;
|
|
min-height: 300px;
|
|
}
|
|
|
|
.filter-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.filter-inputs {
|
|
display: flex;
|
|
gap: 35px;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.input-group-inline {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-shrink: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.filter-label-text {
|
|
font-size: 14px;
|
|
color: #165dff;
|
|
font-weight: 600;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.search-input, .search-select {
|
|
width: 160px !important;
|
|
}
|
|
|
|
.btn-search-ref {
|
|
background: #165dff !important;
|
|
border-radius: 8px;
|
|
height: 38px;
|
|
}
|
|
|
|
.btn-orange {
|
|
background: #ffb142 !important;
|
|
color: white !important;
|
|
border-radius: 8px;
|
|
height: 38px;
|
|
border: none !important;
|
|
}
|
|
|
|
.table-compact {
|
|
border-radius: 16px;
|
|
box-shadow: 0 4px 20px rgba(22, 93, 255, 0.08);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ref-table :deep(.el-table__header) th {
|
|
background-color: #e8f0ff !important;
|
|
color: #2869ff;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.op-group {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ref-op-btn {
|
|
border: none !important;
|
|
color: white !important;
|
|
padding: 6px 14px !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
.ref-op-btn.edit {
|
|
background-color: #4379ff !important;
|
|
}
|
|
|
|
.ref-op-btn.delete {
|
|
background-color: #ff6060 !important;
|
|
}
|
|
|
|
.ref-op-btn.view {
|
|
background-color: #ffb142 !important;
|
|
}
|
|
|
|
.pagination-footer {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
:deep(.bold-header) {
|
|
padding: 20px 25px !important;
|
|
margin-right: 0 !important;
|
|
display: flex !important;
|
|
justify-content: flex-start !important;
|
|
}
|
|
|
|
:deep(.bold-header .el-dialog__title) {
|
|
font-family: "Microsoft YaHei", sans-serif !important;
|
|
font-weight: 900 !important;
|
|
font-size: 22px !important;
|
|
color: #000000 !important;
|
|
}
|
|
|
|
.custom-form :deep(.el-form-item__label) {
|
|
color: #767676 !important;
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
.dialog-footer-wrap {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 15px;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.btn-cancel {
|
|
background-color: #e6e6e6 !important;
|
|
border: none !important;
|
|
color: #444 !important;
|
|
padding: 10px 25px !important;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.btn-confirm {
|
|
background-color: #165dff !important;
|
|
border: none !important;
|
|
padding: 10px 25px !important;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.animate-fade {
|
|
animation: fadeIn 0.4s ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(5px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|