119 lines
4.3 KiB
HTML
119 lines
4.3 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>PACS / STL 数据库关联可视化</title>
|
|
<link rel="stylesheet" href="/static/styles.css" />
|
|
</head>
|
|
<body>
|
|
<header class="topbar">
|
|
<div class="brand">
|
|
<span class="brand-mark"></span>
|
|
<div>
|
|
<h1>PACS / STL 数据库关联可视化</h1>
|
|
<p>以 CT 号精确关联 PACS 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>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="layout">
|
|
<aside class="sidebar">
|
|
<section class="panel search-panel">
|
|
<div class="panel-head">
|
|
<h2>CT 索引</h2>
|
|
<span id="resultCount">0</span>
|
|
</div>
|
|
<input id="searchInput" class="search-input" placeholder="搜索 CT号 / 姓名 / ID / 描述 / 模型" />
|
|
<div class="model-filters">
|
|
<select id="algorithmFilter">
|
|
<option value="">全部重建模型</option>
|
|
<option value="肝胆模型">肝胆模型</option>
|
|
<option value="泌尿模型">泌尿模型</option>
|
|
<option value="胸外模型">胸外模型</option>
|
|
</select>
|
|
<select id="dicomModelFilter">
|
|
<option value="">全部DICOM模型</option>
|
|
<option value="肝胆模型">肝胆模型</option>
|
|
<option value="泌尿模型">泌尿模型</option>
|
|
<option value="胸外模型">胸外模型</option>
|
|
</select>
|
|
</div>
|
|
<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">仅 PACS</button>
|
|
<button data-filter="stl_only">仅 STL</button>
|
|
<button data-filter="list_only">列表无STL</button>
|
|
<button data-filter="undetermined">待判别</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel list-panel">
|
|
<div id="relationList" class="relation-list"></div>
|
|
</section>
|
|
</aside>
|
|
|
|
<section class="content">
|
|
<section class="metrics" id="metrics"></section>
|
|
|
|
<section class="panel hero-panel">
|
|
<div class="hero-head">
|
|
<div>
|
|
<h2 id="activeCt">未选择 CT</h2>
|
|
<p id="activeSubtitle">从左侧选择一个 CT 号查看 PACS 与 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>
|
|
<strong>未选择</strong>
|
|
<em id="nodePacsMeta">检查与序列</em>
|
|
</div>
|
|
<div class="link-line"></div>
|
|
<div id="nodeCt" class="link-node ct-node">
|
|
<span>CT 号</span>
|
|
<strong id="nodeCtValue">-</strong>
|
|
<em>规范索引</em>
|
|
</div>
|
|
<div class="link-line"></div>
|
|
<div id="nodeStl" class="link-node">
|
|
<span>UPP STL 资产</span>
|
|
<strong>未选择</strong>
|
|
<em id="nodeStlMeta">含UPP列表信息</em>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="detail-grid">
|
|
<article class="panel detail-card">
|
|
<h3>PACS DICOM</h3>
|
|
<dl id="pacsDetails"></dl>
|
|
</article>
|
|
<article class="panel detail-card">
|
|
<h3>UPP STL</h3>
|
|
<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>
|
|
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|