Rebuild DICOM UPP registration workspace
This commit is contained in:
Codex
@@ -4,6 +4,7 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>DICOM / UPP 配准工作台</title>
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%2319d6c3'/%3E%3Cpath d='M9 17h14M16 10v14' stroke='%233378f6' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E" />
|
||||
<link rel="stylesheet" href="/static/styles.css" />
|
||||
<script type="importmap">
|
||||
{
|
||||
@@ -14,167 +15,138 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="loginOverlay" class="login-overlay">
|
||||
<form id="loginForm" class="login-panel">
|
||||
<span class="brand-mark"></span>
|
||||
<h1>DICOM / UPP 配准工作台</h1>
|
||||
<p>登录后从完整关联 CT 中选择 DICOM 与 STL 配准关系</p>
|
||||
<input id="username" autocomplete="username" placeholder="账号" />
|
||||
<input id="password" type="password" autocomplete="current-password" placeholder="密码" />
|
||||
<button type="submit">登录</button>
|
||||
<span id="loginError"></span>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<header class="topbar">
|
||||
<div class="brand">
|
||||
<span class="brand-mark"></span>
|
||||
<div>
|
||||
<h1>DICOM / UPP 配准工作台</h1>
|
||||
<p id="brandSubtitle">DICOM 序列、STL family 与人工位姿锁定</p>
|
||||
<p id="subtitle">完整关联 CT · STL 搭配 · 位姿参数</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-actions">
|
||||
<button id="relationBtn" class="dark-btn accent" type="button">数据库关联</button>
|
||||
<button id="viewerBtn" class="dark-btn" type="button">阅片系统</button>
|
||||
<button id="relationBtn" class="ghost-btn accent" type="button">数据库关联可视化</button>
|
||||
<button id="viewerBtn" class="ghost-btn" type="button">DICOM 阅片系统</button>
|
||||
<span id="dbStatus" class="status-pill">数据库</span>
|
||||
<button id="refreshBtn" class="dark-btn" type="button">刷新</button>
|
||||
<button id="refreshBtn" class="ghost-btn" type="button">刷新</button>
|
||||
<span id="userBadge" class="user-badge">未登录</span>
|
||||
<button id="logoutBtn" class="dark-btn" type="button">退出</button>
|
||||
<button id="logoutBtn" class="ghost-btn" type="button">退出</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="topLoading" class="top-loading hidden"><span></span></div>
|
||||
|
||||
<main class="workspace">
|
||||
<aside class="left-rail">
|
||||
<section class="panel search-panel">
|
||||
<div class="panel-head">
|
||||
<h2>匹配检查</h2>
|
||||
<span id="caseCount">0</span>
|
||||
<aside class="case-panel panel">
|
||||
<div class="panel-head">
|
||||
<div>
|
||||
<h2>完整关联 CT</h2>
|
||||
<p>DICOM + STL</p>
|
||||
</div>
|
||||
<input id="caseSearch" class="search-input" placeholder="搜索 CT号 / 姓名 / 模型" />
|
||||
<div id="caseList" class="case-list"></div>
|
||||
</section>
|
||||
|
||||
<section class="panel stacked-panel">
|
||||
<div class="panel-head">
|
||||
<h2>DICOM序列</h2>
|
||||
<span id="seriesCount">0</span>
|
||||
</div>
|
||||
<div id="seriesList" class="series-list"></div>
|
||||
</section>
|
||||
|
||||
<section class="panel stacked-panel">
|
||||
<div class="panel-head">
|
||||
<h2>STL模型</h2>
|
||||
<span id="stlCount">0</span>
|
||||
</div>
|
||||
<div class="segmented small">
|
||||
<button id="modeFile" class="active" type="button">单独</button>
|
||||
<button id="modeFamily" type="button">Family</button>
|
||||
</div>
|
||||
<div id="modelRail" class="chip-rail"></div>
|
||||
<div id="familyRail" class="chip-rail"></div>
|
||||
<div id="stlList" class="stl-list"></div>
|
||||
</section>
|
||||
|
||||
<section class="panel registration-panel">
|
||||
<div class="panel-head">
|
||||
<h2>交互配准</h2>
|
||||
<span id="saveState">未保存</span>
|
||||
</div>
|
||||
<div class="pose-grid" id="poseGrid"></div>
|
||||
<textarea id="registrationNotes" class="notes" rows="2" placeholder="配准备注"></textarea>
|
||||
<div class="action-grid">
|
||||
<button id="resetPoseBtn" class="dark-btn" type="button">重置位姿</button>
|
||||
<button id="saveRegistrationBtn" class="primary-btn" type="button">保存配准</button>
|
||||
<button id="lockRegistrationBtn" class="warn-btn" type="button">保存并上锁</button>
|
||||
<button id="unlockRegistrationBtn" class="dark-btn" type="button">解锁</button>
|
||||
<button id="exportStlBtn" class="dark-btn" type="button">导出STL</button>
|
||||
</div>
|
||||
</section>
|
||||
<span id="caseCount">0</span>
|
||||
</div>
|
||||
<input id="caseSearch" class="search-input" placeholder="搜索 CT号 / 姓名 / 模型" />
|
||||
<div class="filter-row">
|
||||
<button class="filter active" data-status="">全部</button>
|
||||
<button class="filter" data-status="unregistered">未配准</button>
|
||||
<button class="filter" data-status="registered">已配准</button>
|
||||
</div>
|
||||
<div class="part-filter">
|
||||
<button class="filter active" data-part="">全部部位</button>
|
||||
<button class="filter" data-part="head_neck">头颈部</button>
|
||||
<button class="filter" data-part="chest">胸部</button>
|
||||
<button class="filter" data-part="upper_abdomen">上腹部</button>
|
||||
<button class="filter" data-part="lower_abdomen">下腹部</button>
|
||||
<button class="filter" data-part="pelvis">盆腔</button>
|
||||
</div>
|
||||
<div id="caseList" class="case-list"></div>
|
||||
</aside>
|
||||
|
||||
<section class="viewer-shell">
|
||||
<section class="panel hero-strip">
|
||||
<section class="main-panel">
|
||||
<section class="case-strip panel">
|
||||
<div>
|
||||
<h2 id="activeTitle">未选择 CT</h2>
|
||||
<p id="activeMeta">从左侧选择一个 DICOM + STL 匹配检查</p>
|
||||
<p id="activeMeta">从左侧选择一个完整关联检查</p>
|
||||
</div>
|
||||
<div class="hero-tags" id="activeTags"></div>
|
||||
<div id="activeTags" class="tag-line"></div>
|
||||
</section>
|
||||
|
||||
<section class="viewer-grid">
|
||||
<article class="viewport-card dicom-card">
|
||||
<div class="viewport-head">
|
||||
<div>
|
||||
<h3>DICOM</h3>
|
||||
<span id="dicomMeta">未选择序列</span>
|
||||
<section class="work-grid">
|
||||
<aside class="series-panel panel">
|
||||
<div class="panel-head compact">
|
||||
<h2>DICOM 序列</h2>
|
||||
<span id="seriesCount">0</span>
|
||||
</div>
|
||||
<div id="seriesList" class="series-list"></div>
|
||||
</aside>
|
||||
|
||||
<section class="viewer-panel panel">
|
||||
<div class="viewer-head">
|
||||
<div class="segmented">
|
||||
<button data-window="default" class="active">默认</button>
|
||||
<button data-window="bone">骨窗</button>
|
||||
<button data-window="soft">软组织</button>
|
||||
<button data-window="contrast">高对比</button>
|
||||
</div>
|
||||
<div class="tool-row">
|
||||
<select id="planeSelect">
|
||||
<option value="axial">轴位</option>
|
||||
<option value="sagittal">矢状位</option>
|
||||
<option value="coronal">冠状位</option>
|
||||
</select>
|
||||
<select id="windowSelect">
|
||||
<option value="default">默认</option>
|
||||
<option value="soft">软组织</option>
|
||||
<option value="bone">骨窗</option>
|
||||
<option value="contrast">高对比</option>
|
||||
</select>
|
||||
<div class="viewer-tools">
|
||||
<button id="fitBtn" class="ghost-btn">视角复位</button>
|
||||
<button id="saveBtn" class="primary-btn">保存配准</button>
|
||||
<button id="statusBtn" class="state-btn">标为已配准</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-stage" id="dicomStage">
|
||||
<img id="dicomImage" alt="DICOM切片" />
|
||||
<div id="dicomEmpty" class="empty-state">等待选择 DICOM 序列</div>
|
||||
<div class="fusion-stage">
|
||||
<div id="fusionViewport"></div>
|
||||
<div class="fusion-hud left" id="fusionStatus">等待选择 DICOM 与 STL</div>
|
||||
<div class="fusion-hud right" id="fusionMeta">DICOM - · STL -</div>
|
||||
<div id="fusionLoading" class="fusion-loading hidden">
|
||||
<span>正在构建融合视图</span>
|
||||
<div><i></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slice-row">
|
||||
<span id="sliceLabel">切片 0 / 0</span>
|
||||
<input id="sliceSlider" type="range" min="0" max="0" value="0" />
|
||||
<span id="sliceLabel">0 / 0</span>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<article class="viewport-card">
|
||||
<div class="viewport-head">
|
||||
<div>
|
||||
<h3>STL拼接后</h3>
|
||||
<span id="stlMeta">未加载模型</span>
|
||||
<aside class="right-panel">
|
||||
<section class="panel stl-panel">
|
||||
<div class="panel-head compact">
|
||||
<h2>STL 模型</h2>
|
||||
<span id="stlCount">0</span>
|
||||
</div>
|
||||
<button id="fitStlBtn" class="icon-btn" title="重置三维视角" type="button">复位</button>
|
||||
</div>
|
||||
<div id="stlViewport" class="three-stage"></div>
|
||||
</article>
|
||||
<div id="modelRail" class="chip-rail"></div>
|
||||
<div id="stlList" class="stl-list"></div>
|
||||
</section>
|
||||
|
||||
<article class="viewport-card fusion-card">
|
||||
<div class="viewport-head">
|
||||
<div>
|
||||
<h3>STL和DICOM融合</h3>
|
||||
<span id="fusionMeta">位姿未保存</span>
|
||||
<section class="panel pose-panel">
|
||||
<div class="panel-head compact">
|
||||
<h2>位姿参数</h2>
|
||||
<span id="saveState">未保存</span>
|
||||
</div>
|
||||
<button id="fitFusionBtn" class="icon-btn" title="重置融合视角" type="button">复位</button>
|
||||
</div>
|
||||
<div id="fusionViewport" class="three-stage"></div>
|
||||
</article>
|
||||
|
||||
<article class="viewport-card segmentation-card">
|
||||
<div class="viewport-head">
|
||||
<div>
|
||||
<h3>DICOM分割</h3>
|
||||
<span id="segmentationMeta">基于当前可见 STL 的预览</span>
|
||||
<div id="poseGrid" class="pose-grid"></div>
|
||||
<div class="flip-row">
|
||||
<button data-flip="flipX">镜像 X</button>
|
||||
<button data-flip="flipY">镜像 Y</button>
|
||||
<button data-flip="flipZ">镜像 Z</button>
|
||||
</div>
|
||||
<button id="toggleMaskBtn" class="icon-btn" title="显示或隐藏分割预览" type="button">显示</button>
|
||||
</div>
|
||||
<div class="segmentation-stage">
|
||||
<img id="segmentationImage" alt="DICOM分割预览" />
|
||||
<canvas id="maskCanvas"></canvas>
|
||||
<div id="segmentationEmpty" class="empty-state">选择序列和 STL 后显示叠加预览</div>
|
||||
</div>
|
||||
</article>
|
||||
<textarea id="notes" class="notes" rows="2" placeholder="配准备注"></textarea>
|
||||
</section>
|
||||
</aside>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="loginOverlay" class="login-overlay">
|
||||
<form id="loginForm" class="login-panel">
|
||||
<span class="brand-mark"></span>
|
||||
<h2>DICOM / UPP 配准工作台</h2>
|
||||
<p>登录后进行 DICOM 与 STL 配准</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 type="module" src="/static/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user