|
|
|
@ -172,7 +172,7 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="table-shadow-wrapper table-compact"> |
|
|
|
<el-table v-loading="loading" :data="relData" class="ref-table" height="calc(100vh - 560px)"> |
|
|
|
<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"> |
|
|
|
@ -586,274 +586,67 @@ onMounted(() => { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
/* 样式保持不变... */ |
|
|
|
.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); |
|
|
|
} |
|
|
|
} |
|
|
|
.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); } } |
|
|
|
</style> |
