Refine DICOM UPP relation loading

2026-05-28 09:19:29 +08:00
parent 4fe6466e20
commit 92ca5e5b38
5 changed files with 217 additions and 51 deletions
--- a/数据库Web可视化/static/app.js
+++ b/数据库Web可视化/static/app.js
@@ -9,6 +9,10 @@ const app = {
  dicomPart: "",
  viewerUrl: "http://127.0.0.1:8107",
  searchTimer: null,
+  offset: 0,
+  limit: 20,
+  hasMore: true,
+  loading: false,
 };

 const $ = (id) => document.getElementById(id);
@@ -53,6 +57,12 @@ function showLogin(show) {
  $("loginOverlay").classList.toggle("hidden", !show);
 }

+function setLoading(show) {
+  app.loading = show;
+  $("topLoading").classList.toggle("hidden", !show);
+  $("listLoading").classList.toggle("hidden", !show || !app.rows.length);
+}
+
 function showViewer() {
  $("viewerPage").classList.remove("hidden");
  $("settingsPage").classList.add("hidden");
@@ -109,15 +119,11 @@ function statusLabel(value) {
    no_stl: "DICOM + UPP",
    pacs_only: "仅 DICOM",
    stl_only: "仅 STL",
-    list_only: "列表无STL",
+    list_only: "仅 UPP",
    unknown: "未知",
  }[value] || value || "未知";
 }

-function matchLabel(value) {
-  return { exact: "CT 号一致" }[value] || "未匹配";
-}
-
 function partLabel(value) {
  return {
    head_neck: "头颈部",
@@ -134,8 +140,9 @@ function dicomParts(row) {
  return asList(row.body_parts).map(partLabel);
 }

-function pendingDICOM(row) {
-  return Number(row.undetermined_series || 0);
+function annotationLabels(row) {
+  const labels = asList(row.dicom_annotation_labels);
+  return labels.length ? labels : dicomParts(row);
 }

 function setDbStatus(data) {
@@ -154,9 +161,8 @@ function renderMetrics(counts = {}) {
  const items = [
    ["完整关联", counts.complete_count],
    ["DICOM", counts.pacs_count],
-    ["缺 STL", counts.no_stl_count],
    ["仅 DICOM", counts.pacs_only_count],
-    ["待处理DICOM", counts.pending_dicom_count],
+    ["仅 STL", counts.stl_only_count],
  ];
  $("metrics").innerHTML = items
    .map(([label, value]) => `<div class="metric"><span>${escapeHtml(label)}</span><strong>${Number(value || 0)}</strong></div>`)
@@ -172,7 +178,7 @@ function cardTitle(row) {
    `DICOM患者：${row.pacs_patient_name || "无"}`,
    `UPP患者：${row.upp_patient_name || "无"}`,
    `重建模型：${row.algorithm_model || "无"}`,
-    `部位标注：${dicomParts(row).join("、") || "无"}`,
+    `部位标注：${annotationLabels(row).join("、") || "无"}`,
  ].join("\n");
 }

@@ -185,8 +191,8 @@ function renderList() {
  const list = $("relationList");
  $("resultCount").textContent = String(app.rows.length);
  if (!app.rows.length) {
-    list.innerHTML = `<p class="empty">没有匹配记录</p>`;
-    clearDetail();
+    list.innerHTML = `<p class="empty">${app.loading ? "正在加载..." : "没有匹配记录"}</p>`;
+    if (!app.loading) clearDetail();
    return;
  }
  list.innerHTML = "";
@@ -195,20 +201,23 @@ function renderList() {
    card.className = "relation-card";
    card.classList.toggle("active", app.active?.ct_key === row.ct_key);
    card.title = cardTitle(row);
-    const date = row.study_date ? `${fmtDate(row.study_date)} ${fmtTime(row.study_time)}` : fmtDate(row.exam_date || row.task_created_at);
    const stlCount = Number(row.stl_file_count || row.stl_file_count_agg || 0);
-    const parts = dicomParts(row);
-    const pending = pendingDICOM(row);
+    const labels = annotationLabels(row);
    card.innerHTML = `
-      <div class="card-row">
-        <strong>${escapeHtml(row.ct_key)}</strong>
-        <i class="mini-badge ${escapeHtml(row.relation_status)}">${escapeHtml(statusLabel(row.relation_status))}</i>
+      <div class="card-layout">
+        <div class="card-main">
+          <strong>${escapeHtml(row.ct_key)}</strong>
+          <span>${escapeHtml(row.pacs_patient_name || row.upp_patient_name || "无姓名")} · ${escapeHtml(row.patient_id || row.patient_id_masked || "无ID")}</span>
+          <small>DICOM ${Number(row.pacs_series_count || 0)} 序列${stlCount ? ` · STL ${stlCount} 个` : ""}</small>
+        </div>
+        <div class="card-side">
+          <i class="mini-badge ${escapeHtml(row.relation_status)}">${escapeHtml(statusLabel(row.relation_status))}</i>
+          <div class="inline-tags important-tags">
+            ${row.algorithm_model ? `<em title="${escapeHtml(row.algorithm_model)}">${escapeHtml(row.algorithm_model)}</em>` : ""}
+            ${renderPartTags(labels)}
+          </div>
+        </div>
      </div>
-      <span>${escapeHtml(row.pacs_patient_name || row.upp_patient_name || "无姓名")} · ${escapeHtml(row.patient_id || row.patient_id_masked || "无ID")}</span>
-      <small>${escapeHtml(date || "无时间")} · DICOM ${Number(row.dicom_file_count || 0)} 张 · STL ${stlCount} 个</small>
-      <small>重建 ${escapeHtml(row.algorithm_model || "无")}</small>
-      <div class="inline-tags">${renderPartTags(parts)}</div>
-      <small>${escapeHtml(matchLabel(row.match_type))}${pending ? ` · ${pending} 待处理DICOM` : ""}</small>
    `;
    card.onclick = () => selectRelation(row.ct_key);
    list.appendChild(card);
@@ -262,18 +271,18 @@ function clearDetail() {
 function renderDetail(row) {
  app.active = row;
  $("activeCt").textContent = row.ct_key || "未选择 CT";
-  $("activeSubtitle").textContent = `${row.pacs_ct_number || "无 DICOM"} ↔ ${row.stl_ct_number || "无 STL"} · ${matchLabel(row.match_type)}`;
+  $("activeSubtitle").textContent = `${row.pacs_ct_number || "无 DICOM"} ↔ ${row.stl_ct_number || "无 STL"}`;
  const badge = $("relationBadge");
  badge.className = `relation-badge ${row.relation_status || "idle"}`;
  badge.textContent = statusLabel(row.relation_status);

-  const pending = pendingDICOM(row);
+  const labels = annotationLabels(row);
  $("nodeCtValue").textContent = row.ct_key || "-";
  markNode(
    "nodePacs",
    row.pacs_present ? "ok" : "missing",
    row.pacs_ct_number || "缺失",
-    `${Number(row.dicom_file_count || 0)} 张 · ${Number(row.pacs_series_count || 0)} 序列${pending ? ` · ${pending} 待处理DICOM` : ""}`,
+    `${Number(row.pacs_series_count || 0)} 序列 · ${labels.join("、") || "未标注"}`,
  );
  markNode(
    "nodeStl",
@@ -289,9 +298,9 @@ function renderDetail(row) {
    ["检查时间", `${fmtDate(row.study_date)} ${fmtTime(row.study_time)}`.trim()],
    ["描述", row.study_description],
    ["序列/文件", `${Number(row.pacs_series_count || 0)} / ${Number(row.dicom_file_count || 0)}`],
-    ["标注", `${Number(row.annotated_series || 0)} 已标注 · ${pending} 待处理DICOM`],
+    ["标注", `${Number(row.annotated_series || 0)} 已标注`],
    ["完成", row.completed ? "已完成" : "待处理"],
-    ["部位标注", dicomParts(row).join("、")],
+    ["部位标注", labels.join("、")],
  ]);

  renderDl("stlDetails", [
@@ -303,7 +312,6 @@ function renderDetail(row) {
    ["年龄/性别", [row.patient_age, row.upp_patient_sex].filter(Boolean).join(" / ")],
    ["检查时间", fmtDate(row.exam_date)],
    ["任务时间", fmtDate(row.task_created_at)],
-    ["UPP列表记录", row.list_present ? `${Number(row.list_record_count || 0)} 条` : "无"],
    ["文件数", Number(row.stl_file_count || row.stl_file_count_agg || 0)],
    ["总大小", fmtBytes(row.stl_total_bytes || row.stl_total_bytes_agg)],
    ["目录", row.processed_stl_dir],
@@ -326,30 +334,48 @@ async function loadStatus() {
  renderMetrics(data.counts || {});
 }

-async function loadRelations() {
+async function loadRelations(reset = true) {
+  if (app.loading) return;
+  setLoading(true);
+  if (reset) {
+    app.offset = 0;
+    app.hasMore = true;
+    app.rows = [];
+    app.active = null;
+    renderList();
+  }
+  if (!app.hasMore) {
+    setLoading(false);
+    return;
+  }
  const params = new URLSearchParams();
  params.set("status", app.filter);
-  params.set("limit", "500");
+  params.set("limit", String(app.limit));
+  params.set("offset", String(app.offset));
  if (app.search) params.set("q", app.search);
  if (app.algorithmModel) params.set("algorithm_model", app.algorithmModel);
  if (app.dicomPart) params.set("dicom_part", app.dicomPart);
-  app.rows = await json(`/api/relations?${params.toString()}`);
-  if (app.rows.length && !app.rows.some((row) => row.ct_key === app.active?.ct_key)) {
-    await selectRelation(app.rows[0].ct_key);
-  } else {
+  try {
+    const rows = await json(`/api/relations?${params.toString()}`);
+    app.rows = reset ? rows : [...app.rows, ...rows.filter((row) => !app.rows.some((item) => item.ct_key === row.ct_key))];
+    app.offset += rows.length;
+    app.hasMore = rows.length === app.limit;
    renderList();
-    if (!app.active && app.rows.length) await selectRelation(app.rows[0].ct_key);
-    if (!app.rows.length) clearDetail();
+    if (reset && app.rows.length) await selectRelation(app.rows[0].ct_key);
+    if (reset && !app.rows.length) clearDetail();
+  } finally {
+    setLoading(false);
  }
 }

 async function refreshAll() {
  try {
    await loadStatus();
-    await loadRelations();
+    await loadRelations(true);
  } catch (err) {
    $("dbStatus").textContent = err.message;
    $("dbStatus").className = "status-pill offline";
+    setLoading(false);
  }
 }

@@ -514,13 +540,22 @@ function openDicomViewer() {
  if (url) window.open(url, "_blank", "noopener");
 }

+function openViewerHome() {
+  window.open(app.viewerUrl.replace(/\/$/, ""), "_blank", "noopener");
+}
+
 function wire() {
  $("loginForm").addEventListener("submit", login);
  $("logoutBtn").addEventListener("click", logout);
  $("settingsBtn").addEventListener("click", showSettings);
  $("backToViewer").addEventListener("click", showViewer);
  $("refreshBtn").addEventListener("click", refreshAll);
+  $("viewerHomeBtn").addEventListener("click", openViewerHome);
  $("openDicomBtn").addEventListener("click", openDicomViewer);
+  $("relationList").addEventListener("scroll", () => {
+    const list = $("relationList");
+    if (list.scrollTop + list.clientHeight >= list.scrollHeight - 140) loadRelations(false);
+  });
  $("searchInput").addEventListener("input", () => {
    clearTimeout(app.searchTimer);
    app.searchTimer = setTimeout(() => {
--- a/数据库Web可视化/static/index.html
+++ b/数据库Web可视化/static/index.html
@@ -16,6 +16,7 @@
        </div>
      </div>
      <div class="top-actions">
+        <button id="viewerHomeBtn" class="dark-btn" type="button">进入阅片系统</button>
        <span id="dbStatus" class="status-pill">数据库</span>
        <button id="refreshBtn" class="dark-btn" type="button">刷新</button>
        <span id="userBadge" class="user-badge">未登录</span>
@@ -23,6 +24,7 @@
        <button id="logoutBtn" class="dark-btn" type="button">退出</button>
      </div>
    </header>
+    <div id="topLoading" class="top-loading hidden"><span></span></div>

    <main id="viewerPage" class="layout">
      <aside class="sidebar">
@@ -51,16 +53,14 @@
          <div class="filter-grid">
            <button class="active" data-filter="all">全部</button>
            <button data-filter="complete">完整关联</button>
-            <button data-filter="no_stl">缺 STL</button>
            <button data-filter="pacs_only">仅 DICOM</button>
            <button data-filter="stl_only">仅 STL</button>
-            <button data-filter="list_only">列表无STL</button>
-            <button data-filter="pending_dicom">待处理DICOM</button>
          </div>
        </section>

        <section class="panel list-panel">
          <div id="relationList" class="relation-list"></div>
+          <div id="listLoading" class="list-loading hidden">加载中...</div>
        </section>
      </aside>

--- a/数据库Web可视化/static/styles.css
+++ b/数据库Web可视化/static/styles.css
@@ -88,6 +88,37 @@ button {
  gap: 10px;
 }

+.top-loading {
+  position: fixed;
+  top: 66px;
+  left: 0;
+  right: 0;
+  z-index: 15;
+  height: 3px;
+  overflow: hidden;
+  background: rgba(31, 44, 60, 0.72);
+}
+
+.top-loading span {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 36%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, transparent, var(--cyan), var(--blue), transparent);
+  animation: loading-sweep 1.1s ease-in-out infinite;
+}
+
+@keyframes loading-sweep {
+  from {
+    transform: translateX(-110%);
+  }
+
+  to {
+    transform: translateX(310%);
+  }
+}
+
 .hidden {
  display: none !important;
 }
@@ -279,13 +310,17 @@ button {
 }

 .filter-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  display: flex;
  gap: 7px;
+  overflow-x: auto;
+  padding-bottom: 4px;
  margin-top: 10px;
+  scrollbar-width: thin;
 }

 .filter-grid button {
+  min-width: 112px;
+  flex: 0 0 auto;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
@@ -304,6 +339,26 @@ button {
  height: 100%;
  overflow: auto;
  padding-right: 3px;
+  padding-bottom: 34px;
+}
+
+.list-panel {
+  position: relative;
+}
+
+.list-loading {
+  position: absolute;
+  right: 14px;
+  bottom: 10px;
+  left: 14px;
+  height: 26px;
+  display: grid;
+  place-items: center;
+  border: 1px solid rgba(25, 212, 194, 0.32);
+  border-radius: 999px;
+  color: #baf8ee;
+  background: rgba(7, 10, 15, 0.88);
+  font-size: 12px;
 }

 .relation-card {
@@ -342,11 +397,28 @@ button {
  font-size: 12px;
 }

-.card-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
+.card-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(112px, 0.72fr);
+  gap: 10px;
+  align-items: start;
+}
+
+.card-main,
+.card-side {
+  min-width: 0;
+  display: grid;
+  gap: 7px;
+}
+
+.card-side {
+  justify-items: end;
+}
+
+.important-tags {
+  max-width: 100%;
+  justify-content: flex-end;
+  flex-wrap: wrap;
 }

 .mini-badge {
@@ -402,12 +474,16 @@ button {
 }

 .metrics {
-  display: grid;
-  grid-template-columns: repeat(5, minmax(116px, 1fr));
+  display: flex;
  gap: 10px;
+  overflow-x: auto;
+  padding-bottom: 2px;
+  scrollbar-width: thin;
 }

 .metric {
+  min-width: 140px;
+  flex: 1 0 140px;
  min-height: 76px;
  padding: 13px;
  border: 1px solid var(--line);