|
|
|
@ -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,19 +296,84 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
import { ref, onMounted, reactive } from 'vue' |
|
|
|
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 submitting = ref(false); |
|
|
|
const stats = reactive({totalNodes: 0, totalRels: 0, todayNodes: 0}); |
|
|
|
|
|
|
|
// --- 数据列表 --- |
|
|
|
@ -277,7 +385,7 @@ 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,7 +394,6 @@ const detailVisible = ref(false); |
|
|
|
const detailType = ref('node'); |
|
|
|
const currentDetail = ref({}); |
|
|
|
const isEdit = ref(false); |
|
|
|
const dynamicLabels = ref([]); |
|
|
|
|
|
|
|
// --- 表单数据 --- |
|
|
|
const nodeForm = reactive({id: '', name: '', label: ''}); |
|
|
|
@ -294,11 +401,35 @@ 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,20 +459,24 @@ 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'}); |
|
|
|
} |
|
|
|
@ -347,8 +485,7 @@ const openNodeDialog = (row = null) => { |
|
|
|
|
|
|
|
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,30 +523,24 @@ 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('网络连接异常'); |
|
|
|
} finally { submitting.value = false; } |
|
|
|
ElMessage.error('网络异常'); |
|
|
|
} finally { |
|
|
|
submitting.value = false; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
const handleDelete = (row, type) => { |
|
|
|
@ -410,12 +550,20 @@ const handleDelete = (row, type) => { |
|
|
|
ElMessage.success('删除成功'); |
|
|
|
type === 'node' ? fetchNodes() : fetchRels(); |
|
|
|
fetchStats(); |
|
|
|
fetchAllMetadata(); |
|
|
|
} |
|
|
|
}).catch(() => {}); |
|
|
|
}).catch(() => { |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
const handleNodeSearch = () => { nodePage.value = 1; fetchNodes(); }; |
|
|
|
const handleRelSearch = () => { relPage.value = 1; fetchRels(); }; |
|
|
|
const handleNodeSearch = () => { |
|
|
|
nodePage.value = 1; |
|
|
|
fetchNodes(); |
|
|
|
}; |
|
|
|
const handleRelSearch = () => { |
|
|
|
relPage.value = 1; |
|
|
|
fetchRels(); |
|
|
|
}; |
|
|
|
|
|
|
|
const queryNodeSearch = async (queryString, cb) => { |
|
|
|
if (!queryString) return cb([]); |
|
|
|
@ -430,74 +578,282 @@ 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; 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; min-height: 380px; } |
|
|
|
.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(.el-autocomplete .el-input__wrapper){ |
|
|
|
box-shadow: none !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 { 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; } |
|
|
|
.pagination-custom-text{color: #86909c} |
|
|
|
:deep(.el-select__placeholder){color: #86909c} |
|
|
|
: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;} |
|
|
|
/* 当前激活页码(无论是否 hover)始终是蓝色 */ |
|
|
|
:deep(.el-pager li.is-active) { |
|
|
|
color: #fff !important; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.el-pager li:not(.is-active):hover) { |
|
|
|
color: #165DFF !important; |
|
|
|
} |
|
|
|
: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); } } |
|
|
|
/* 样式保持不变... */ |
|
|
|
.knowledge-graph-data-container { |
|
|
|
background-color: #f4f7fa; |
|
|
|
display: flex; |
|
|
|
height: 100vh; |
|
|
|
width: 100vw; |
|
|
|
} |
|
|
|
|
|
|
|
.main-body { |
|
|
|
flex: 1; |
|
|
|
padding: 25px 40px; |
|
|
|
overflow-y: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.page-header { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin-bottom: 25px; |
|
|
|
} |
|
|
|
|
|
|
|
.header-decorator { |
|
|
|
width: 10px; |
|
|
|
height: 26px; |
|
|
|
background-color: #165dff; |
|
|
|
border-radius: 5px; |
|
|
|
margin-right: 15px; |
|
|
|
} |
|
|
|
|
|
|
|
.header-title { |
|
|
|
font-size: 26px; |
|
|
|
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; |
|
|
|
} |
|
|
|
|
|
|
|
.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: 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> |