KGPython/vue/src/system/KGData.vue

<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
                      @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="handleNodeSearch"
                             @clear="handleNodeSearch"
                             class="search-select">
                    <el-option label="全部" value="全部"/>
                    <el-option v-for="tag in dynamicLabels" :key="tag" :label="tag" :value="tag"/>
                  </el-select>
                </div>
              </div>
              <div class="filter-btns">
                <el-button type="primary" class="btn-search-ref" @click="handleNodeSearch">搜索</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">
                    {{ scope.row.labels ? scope.row.labels[0] : 'Drug' }}
                  </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"
                  v-model:page-size="pageSize"
                  v-model:current-page="nodePage"
                  @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
                      @select="handleRelSearch"
                      @clear="handleRelSearch"
                      class="search-input"
                  />
                </div>
                <div class="input-group-inline">
                  <span class="filter-label-text">结束节点</span>
                  <el-autocomplete
                      v-model="relSearch.target"
                      :fetch-suggestions="queryNodeSearch"
                      placeholder="搜索终点..."
                      clearable
                      @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 - 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">
                  <template #default="scope">
                    {{ scope.row.type }}
                  </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"
                  v-model:page-size="pageSize"
                  v-model:current-page="relPage"
                  @current-change="fetchRels"
              >
                <span class="pagination-custom-text">共计 {{ relTotal.toLocaleString() }} 条数据</span>
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </main>

    <el-dialog v-model="detailVisible" title="数据详情" 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="所属标签">
            <el-tag v-for="l in currentDetail.labels" :key="l" style="margin-right: 5px">{{ l }}</el-tag>
          </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="结束节点">{{ 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-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>
        </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="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-form-item>
        <el-form-item label="结束节点" required>
          <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-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 } 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
} from '@/api/data'

// --- 基础状态 ---
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: '' });

// --- 弹窗控制 ---
const nodeDialogVisible = ref(false);
const relDialogVisible = ref(false);
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 fetchStats = async () => {
  try {
    const res = await getKgStats();
    if (res?.code === 200) Object.assign(stats, res.data);
  } catch (e) { console.error("Stats 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 && nodeSearch.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
    });
    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: 'Drug' });
  }
  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();
    } 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 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);

    if (res?.code === 200) {
      ElMessage.success('提交成功');
      relDialogVisible.value = false;
      fetchRels();
      fetchStats();
    } else {
      ElMessage.error(res?.msg || '提交失败');
    }
  } catch (e) {
    ElMessage.error('网络连接异常');
  } finally {
    submitting.value = false;
  }
};

const handleDelete = (row, type) => {
  ElMessageBox.confirm('确认删除此项数据？', '警告', {type: 'warning'}).then(async () => {
    const res = type === 'node' ? await deleteNode(row.id) : await deleteRelationship(row.id);
    if (res?.code === 200) {
      ElMessage.success('删除成功');
      type === 'node' ? fetchNodes() : fetchRels();
      fetchStats();
    }
  }).catch(() => {
  });
};

const handleNodeSearch = () => {
  nodePage.value = 1;
  fetchNodes();
};
const handleRelSearch = () => {
  relPage.value = 1;
  fetchRels();
};

const queryNodeSearch = async (queryString, cb) => {
  if (!queryString) return cb([]);
  const res = await getNodeSuggestions(queryString);
  cb((res.data || []).map(n => ({value: n})));
};

const handleView = (row, type) => {
  detailType.value = type;
  currentDetail.value = {...row};
  detailVisible.value = true;
};

onMounted(() => {
  fetchStats();
  fetchNodes();
  getLabels().then(res => {
    if (res?.code === 200) dynamicLabels.value = res.data;
  });
});
</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: 200px !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>