Improve DICOM UPP relation visualizer

This commit is contained in:
Codex
2026-05-28 08:49:16 +08:00
parent b6149a31eb
commit 4fe6466e20
7 changed files with 831 additions and 119 deletions

View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>PACS / STL 数据库关联可视化</title>
<title>DICOM / UPP 数据库关联可视化</title>
<link rel="stylesheet" href="/static/styles.css" />
</head>
<body>
@@ -11,21 +11,24 @@
<div class="brand">
<span class="brand-mark"></span>
<div>
<h1>PACS / STL 数据库关联可视化</h1>
<p>以 CT 号精确关联 PACS DICOM 与 UPP STL 重建资产</p>
<h1>DICOM / UPP 数据库关联可视化</h1>
<p>以 CT 号精确关联 DICOM 阅片分类与 UPP STL 重建资产</p>
</div>
</div>
<div class="top-actions">
<span id="dbStatus" class="status-pill">数据库</span>
<button id="refreshBtn" class="dark-btn" type="button">刷新</button>
<span id="userBadge" class="user-badge">未登录</span>
<button id="settingsBtn" class="dark-btn" type="button">设置</button>
<button id="logoutBtn" class="dark-btn" type="button">退出</button>
</div>
</header>
<main class="layout">
<main id="viewerPage" class="layout">
<aside class="sidebar">
<section class="panel search-panel">
<div class="panel-head">
<h2>CT 索引</h2>
<h2>关联列表</h2>
<span id="resultCount">0</span>
</div>
<input id="searchInput" class="search-input" placeholder="搜索 CT号 / 姓名 / ID / 描述 / 模型" />
@@ -36,21 +39,23 @@
<option value="泌尿模型">泌尿模型</option>
<option value="胸外模型">胸外模型</option>
</select>
<select id="dicomModelFilter">
<option value="">全部DICOM模型</option>
<option value="肝胆模型">肝胆模型</option>
<option value="泌尿模型">泌尿模型</option>
<option value="胸外模型">胸外模型</option>
<select id="dicomPartFilter">
<option value="">全部部位标注</option>
<option value="head_neck">头颈部</option>
<option value="chest">胸部</option>
<option value="upper_abdomen">上腹部</option>
<option value="lower_abdomen">下腹部</option>
<option value="pelvis">盆腔</option>
</select>
</div>
<div class="filter-grid">
<button class="active" data-filter="all">全部</button>
<button data-filter="complete">关联</button>
<button data-filter="complete">完整关联</button>
<button data-filter="no_stl">缺 STL</button>
<button data-filter="pacs_only">PACS</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="undetermined">判别</button>
<button data-filter="pending_dicom">处理DICOM</button>
</div>
</section>
@@ -66,14 +71,14 @@
<div class="hero-head">
<div>
<h2 id="activeCt">未选择 CT</h2>
<p id="activeSubtitle">从左侧选择一个 CT 号查看 PACS 与 STL 之间的关系</p>
<p id="activeSubtitle">从左侧选择一个 CT 号查看 DICOM 与 UPP STL 之间的关系</p>
</div>
<span id="relationBadge" class="relation-badge idle">等待选择</span>
</div>
<div class="link-map">
<div id="nodePacs" class="link-node">
<span>PACS DICOM</span>
<span>DICOM 阅片分类系统</span>
<strong>未选择</strong>
<em id="nodePacsMeta">检查与序列</em>
</div>
@@ -81,11 +86,11 @@
<div id="nodeCt" class="link-node ct-node">
<span>CT 号</span>
<strong id="nodeCtValue">-</strong>
<em>规范索引</em>
<em>严格一致匹配</em>
</div>
<div class="link-line"></div>
<div id="nodeStl" class="link-node">
<span>UPP STL 资产</span>
<span>UPP 重建资产</span>
<strong>未选择</strong>
<em id="nodeStlMeta">含UPP列表信息</em>
</div>
@@ -94,7 +99,10 @@
<section class="detail-grid">
<article class="panel detail-card">
<h3>PACS DICOM</h3>
<div class="detail-title">
<h3>DICOM 阅片分类系统</h3>
<button id="openDicomBtn" class="link-btn" type="button">打开阅片系统</button>
</div>
<dl id="pacsDetails"></dl>
</article>
<article class="panel detail-card">
@@ -102,17 +110,34 @@
<dl id="stlDetails"></dl>
</article>
</section>
<section class="panel segment-panel">
<div class="panel-head">
<h2>STL 分割结构</h2>
<span id="segmentCount">0 个</span>
</div>
<div id="segmentGroups" class="segment-groups"></div>
</section>
</section>
</main>
<main id="settingsPage" class="settings-page hidden">
<section class="panel settings-shell">
<div class="settings-head">
<div>
<h2>设置</h2>
<p>系统管理、账号密码与 DICOM 阅片系统跳转配置</p>
</div>
<button id="backToViewer" class="dark-btn" type="button">返回</button>
</div>
<div id="settingsContent" class="settings-content"></div>
</section>
</main>
<div id="loginOverlay" class="login-overlay">
<form id="loginForm" class="login-panel">
<span class="brand-mark"></span>
<h2>DICOM / UPP 数据库关联可视化</h2>
<p>请登录后查看数据库关联信息</p>
<input id="username" class="search-input" autocomplete="username" placeholder="账号" />
<input id="password" class="search-input" type="password" autocomplete="current-password" placeholder="密码" />
<button class="primary-btn" type="submit">登录</button>
<span id="loginError" class="error-line"></span>
</form>
</div>
<script src="/static/app.js"></script>
</body>
</html>