1057 lines
38 KiB
JavaScript
1057 lines
38 KiB
JavaScript
import * as THREE from "three";
|
||
import { STLLoader } from "./vendor/STLLoader.js";
|
||
import { OrbitControls } from "./vendor/OrbitControls.js";
|
||
|
||
const state = {
|
||
token: localStorage.getItem("dicom_upp_registration_token") || "",
|
||
user: null,
|
||
cases: [],
|
||
activeCase: null,
|
||
series: [],
|
||
selectedSeries: null,
|
||
stlFiles: [],
|
||
selectedStlIds: new Set(),
|
||
selectedFamilies: new Set(),
|
||
mode: "file",
|
||
registrations: [],
|
||
pose: defaultPose(),
|
||
maskVisible: true,
|
||
sliceIndex: 0,
|
||
plane: "axial",
|
||
window: "default",
|
||
loading: false,
|
||
searchTimer: null,
|
||
links: { pacs_viewer_url: "http://127.0.0.1:8107", relation_viewer_url: "http://127.0.0.1:8108" },
|
||
scenes: {},
|
||
};
|
||
|
||
const $ = (id) => document.getElementById(id);
|
||
|
||
const poseFields = [
|
||
{ key: "translateX", label: "平移 X", min: -2, max: 2, step: 0.001 },
|
||
{ key: "translateY", label: "平移 Y", min: -2, max: 2, step: 0.001 },
|
||
{ key: "translateZ", label: "平移 Z", min: -2, max: 2, step: 0.001 },
|
||
{ key: "rotateX", label: "旋转 X", min: -180, max: 180, step: 1 },
|
||
{ key: "rotateY", label: "旋转 Y", min: -180, max: 180, step: 1 },
|
||
{ key: "rotateZ", label: "旋转 Z", min: -180, max: 180, step: 1 },
|
||
{ key: "scale", label: "缩放", min: 0.2, max: 3, step: 0.001 },
|
||
];
|
||
|
||
const bodyPartLabels = {
|
||
head_neck: "头颈部",
|
||
chest: "胸部",
|
||
upper_abdomen: "上腹部",
|
||
lower_abdomen: "下腹部",
|
||
pelvis: "盆腔",
|
||
};
|
||
|
||
const familyColors = [
|
||
"#38d7c7",
|
||
"#f4a261",
|
||
"#d88cf6",
|
||
"#54df8c",
|
||
"#60a5fa",
|
||
"#f87171",
|
||
"#facc15",
|
||
"#a3e635",
|
||
"#22d3ee",
|
||
"#f472b6",
|
||
];
|
||
|
||
function defaultPose() {
|
||
return {
|
||
translateX: 0,
|
||
translateY: 0,
|
||
translateZ: 0,
|
||
rotateX: 0,
|
||
rotateY: 0,
|
||
rotateZ: 0,
|
||
scale: 1,
|
||
flipX: false,
|
||
flipY: false,
|
||
flipZ: false,
|
||
};
|
||
}
|
||
|
||
function escapeHtml(value) {
|
||
return String(value ?? "")
|
||
.replaceAll("&", "&")
|
||
.replaceAll("<", "<")
|
||
.replaceAll(">", ">")
|
||
.replaceAll('"', """)
|
||
.replaceAll("'", "'");
|
||
}
|
||
|
||
function asList(value) {
|
||
return Array.isArray(value) ? value : [];
|
||
}
|
||
|
||
function fmtDate(value) {
|
||
const text = String(value || "");
|
||
if (!text) return "";
|
||
if (/^\d{8}$/.test(text)) return `${text.slice(0, 4)}-${text.slice(4, 6)}-${text.slice(6, 8)}`;
|
||
return text.replace("T", " ").slice(0, 19);
|
||
}
|
||
|
||
function fmtTime(value) {
|
||
const digits = String(value || "").replace(/\D/g, "").slice(0, 6);
|
||
if (digits.length < 6) return value || "";
|
||
return `${digits.slice(0, 2)}:${digits.slice(2, 4)}:${digits.slice(4, 6)}`;
|
||
}
|
||
|
||
function fmtBytes(value) {
|
||
const size = Number(value || 0);
|
||
if (!size) return "0 B";
|
||
const units = ["B", "KB", "MB", "GB", "TB"];
|
||
const index = Math.min(units.length - 1, Math.floor(Math.log(size) / Math.log(1024)));
|
||
return `${(size / 1024 ** index).toFixed(index ? 1 : 0)} ${units[index]}`;
|
||
}
|
||
|
||
function authParams(params = {}) {
|
||
const output = new URLSearchParams(params);
|
||
if (state.token) output.set("access_token", state.token);
|
||
return output;
|
||
}
|
||
|
||
async function request(path, options = {}) {
|
||
const headers = { ...(options.headers || {}) };
|
||
if (state.token) headers.Authorization = `Bearer ${state.token}`;
|
||
if (options.body && !(options.body instanceof FormData)) headers["Content-Type"] = "application/json";
|
||
const res = await fetch(path, { ...options, headers });
|
||
if (res.status === 401) {
|
||
showLogin(true);
|
||
throw new Error("unauthorized");
|
||
}
|
||
if (!res.ok) {
|
||
let detail = res.statusText;
|
||
try {
|
||
const data = await res.json();
|
||
detail = data.detail || detail;
|
||
} catch (_) {
|
||
detail = await res.text();
|
||
}
|
||
throw new Error(detail);
|
||
}
|
||
return res;
|
||
}
|
||
|
||
async function json(path, options = {}) {
|
||
const res = await request(path, options);
|
||
return res.json();
|
||
}
|
||
|
||
function setLoading(show) {
|
||
state.loading = show;
|
||
$("topLoading").classList.toggle("hidden", !show);
|
||
}
|
||
|
||
function showLogin(show) {
|
||
$("loginOverlay").classList.toggle("hidden", !show);
|
||
}
|
||
|
||
function sameHostUrl(rawUrl, fallbackPort) {
|
||
try {
|
||
const url = new URL(rawUrl || `${location.protocol}//${location.hostname}:${fallbackPort}`, location.href);
|
||
if (["127.0.0.1", "localhost", "0.0.0.0"].includes(url.hostname) && !["127.0.0.1", "localhost"].includes(location.hostname)) {
|
||
url.hostname = location.hostname;
|
||
}
|
||
url.protocol = location.protocol;
|
||
return url.toString().replace(/\/$/, "");
|
||
} catch (_) {
|
||
return `${location.protocol}//${location.hostname}:${fallbackPort}`;
|
||
}
|
||
}
|
||
|
||
function relationBaseUrl() {
|
||
return sameHostUrl(state.links.relation_viewer_url, 8108);
|
||
}
|
||
|
||
function viewerBaseUrl() {
|
||
return sameHostUrl(state.links.pacs_viewer_url, 8107);
|
||
}
|
||
|
||
function renderPoseControls() {
|
||
$("poseGrid").innerHTML = `
|
||
${poseFields
|
||
.map(
|
||
(field) => `
|
||
<div class="pose-control">
|
||
<label>${field.label}</label>
|
||
<input data-pose-range="${field.key}" type="range" min="${field.min}" max="${field.max}" step="${field.step}" value="${state.pose[field.key]}" />
|
||
<input data-pose-number="${field.key}" type="number" min="${field.min}" max="${field.max}" step="${field.step}" value="${state.pose[field.key]}" />
|
||
</div>
|
||
`,
|
||
)
|
||
.join("")}
|
||
<div class="flip-row">
|
||
<button data-flip="flipX" type="button">翻转 X</button>
|
||
<button data-flip="flipY" type="button">翻转 Y</button>
|
||
<button data-flip="flipZ" type="button">翻转 Z</button>
|
||
</div>
|
||
`;
|
||
document.querySelectorAll("[data-pose-range], [data-pose-number]").forEach((input) => {
|
||
input.addEventListener("input", () => {
|
||
const key = input.dataset.poseRange || input.dataset.poseNumber;
|
||
state.pose[key] = Number(input.value);
|
||
syncPoseInputs();
|
||
markUnsaved();
|
||
updateScenesPose();
|
||
});
|
||
});
|
||
document.querySelectorAll("[data-flip]").forEach((button) => {
|
||
button.addEventListener("click", () => {
|
||
const key = button.dataset.flip;
|
||
state.pose[key] = !state.pose[key];
|
||
syncPoseInputs();
|
||
markUnsaved();
|
||
updateScenesPose();
|
||
});
|
||
});
|
||
syncPoseInputs();
|
||
}
|
||
|
||
function syncPoseInputs() {
|
||
poseFields.forEach((field) => {
|
||
const value = Number(state.pose[field.key] ?? defaultPose()[field.key]);
|
||
document.querySelectorAll(`[data-pose-range="${field.key}"], [data-pose-number="${field.key}"]`).forEach((input) => {
|
||
input.value = field.step < 1 ? value.toFixed(3) : String(Math.round(value));
|
||
});
|
||
});
|
||
document.querySelectorAll("[data-flip]").forEach((button) => {
|
||
button.classList.toggle("active", Boolean(state.pose[button.dataset.flip]));
|
||
});
|
||
}
|
||
|
||
function markUnsaved() {
|
||
$("saveState").textContent = "未保存";
|
||
$("fusionMeta").textContent = "位姿未保存";
|
||
}
|
||
|
||
function setDbStatus(data) {
|
||
state.links = data.links || state.links;
|
||
const pill = $("dbStatus");
|
||
if (data.database?.ok) {
|
||
pill.textContent = `${data.database.database} 已连接`;
|
||
pill.className = "status-pill online";
|
||
} else {
|
||
pill.textContent = "数据库异常";
|
||
pill.className = "status-pill offline";
|
||
}
|
||
}
|
||
|
||
async function loadStatus() {
|
||
const data = await json("/api/status");
|
||
setDbStatus(data);
|
||
}
|
||
|
||
async function loadCases() {
|
||
setLoading(true);
|
||
try {
|
||
const q = $("caseSearch").value.trim();
|
||
const params = new URLSearchParams();
|
||
if (q) params.set("q", q);
|
||
params.set("limit", "120");
|
||
state.cases = await json(`/api/cases?${params.toString()}`);
|
||
renderCases();
|
||
const targetCt = new URLSearchParams(location.search).get("ct_number");
|
||
const next = targetCt
|
||
? state.cases.find((row) => String(row.ct_key).toUpperCase() === targetCt.toUpperCase() || String(row.pacs_ct_number).toUpperCase() === targetCt.toUpperCase())
|
||
: state.cases[0];
|
||
if (next) await selectCase(next.ct_key);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
|
||
function renderPartTags(row) {
|
||
const parts = asList(row.body_parts).map((part) => bodyPartLabels[part] || part);
|
||
return parts.map((part) => `<em class="tag">${escapeHtml(part)}</em>`).join("");
|
||
}
|
||
|
||
function renderCases() {
|
||
$("caseCount").textContent = String(state.cases.length);
|
||
if (!state.cases.length) {
|
||
$("caseList").innerHTML = `<div class="empty-state">没有 DICOM + STL 匹配检查</div>`;
|
||
return;
|
||
}
|
||
$("caseList").innerHTML = state.cases
|
||
.map((row) => {
|
||
const active = state.activeCase?.ct_key === row.ct_key ? "active" : "";
|
||
const regLabel = row.registration_count ? `已配准 ${row.registered_series || 0}` : "未配准";
|
||
const lockLabel = row.locked_count ? `<em class="tag locked">${Number(row.locked_count)} 已锁</em>` : "";
|
||
return `
|
||
<button class="case-card ${active}" data-case="${escapeHtml(row.ct_key)}" title="${escapeHtml(row.ct_key)}\n${escapeHtml(row.patient_name || "")}">
|
||
<div class="card-line">
|
||
<strong>${escapeHtml(row.ct_key)}</strong>
|
||
<em class="tag ${row.registration_count ? "" : "warn"}">${escapeHtml(regLabel)}</em>
|
||
</div>
|
||
<span>${escapeHtml(row.patient_name || row.upp_patient_name || "无姓名")} · ${escapeHtml(row.patient_id || "无ID")}</span>
|
||
<small>DICOM ${Number(row.series_count || 0)} 序列 · STL ${Number(row.stl_file_count || 0)} 个</small>
|
||
<div class="tag-line">
|
||
${row.algorithm_model ? `<em class="tag">${escapeHtml(row.algorithm_model)}</em>` : ""}
|
||
${renderPartTags(row)}
|
||
${lockLabel}
|
||
</div>
|
||
</button>
|
||
`;
|
||
})
|
||
.join("");
|
||
document.querySelectorAll("[data-case]").forEach((button) => {
|
||
button.addEventListener("click", () => selectCase(button.dataset.case));
|
||
});
|
||
}
|
||
|
||
async function selectCase(ctKey) {
|
||
if (!ctKey) return;
|
||
setLoading(true);
|
||
try {
|
||
const [detail, seriesPayload, stlPayload, regPayload] = await Promise.all([
|
||
json(`/api/cases/${encodeURIComponent(ctKey)}`),
|
||
json(`/api/cases/${encodeURIComponent(ctKey)}/series`),
|
||
json(`/api/cases/${encodeURIComponent(ctKey)}/stl`),
|
||
json(`/api/registrations/${encodeURIComponent(ctKey)}`),
|
||
]);
|
||
state.activeCase = detail;
|
||
state.series = seriesPayload.series || [];
|
||
state.stlFiles = stlPayload.files || [];
|
||
state.registrations = regPayload.registrations || [];
|
||
chooseDefaultStl();
|
||
const diagnosticSeries = [...state.series]
|
||
.filter((item) => Number(item.count || 0) >= 80 && !asList(item.annotation?.labels).includes("略过/不采用"))
|
||
.sort((left, right) => Number(right.count || 0) - Number(left.count || 0));
|
||
const largestSeries = [...state.series].sort((left, right) => Number(right.count || 0) - Number(left.count || 0));
|
||
state.selectedSeries = state.series.find((item) => item.registration?.registered) || diagnosticSeries[0] || largestSeries[0] || null;
|
||
state.sliceIndex = Math.max(0, Math.floor((state.selectedSeries?.count || 1) / 2));
|
||
applyLatestRegistration();
|
||
renderAll();
|
||
await reloadVisuals();
|
||
} catch (err) {
|
||
alert(err.message);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
|
||
function chooseDefaultStl() {
|
||
state.selectedStlIds.clear();
|
||
state.selectedFamilies.clear();
|
||
if (!state.stlFiles.length) return;
|
||
const families = Array.from(new Set(state.stlFiles.map((item) => item.family).filter(Boolean)));
|
||
const preferred = ["liver", "portal_vein", "liver_artery", "liver_vein", "bile_duct", "pancreas", "spleen"];
|
||
const selectedFamily = preferred.find((family) => families.includes(family)) || families[0];
|
||
if (selectedFamily) {
|
||
state.selectedFamilies.add(selectedFamily);
|
||
state.stlFiles.filter((item) => item.family === selectedFamily).forEach((item) => state.selectedStlIds.add(Number(item.id)));
|
||
} else {
|
||
state.selectedStlIds.add(Number(state.stlFiles[0].id));
|
||
}
|
||
}
|
||
|
||
function renderAll() {
|
||
renderCases();
|
||
renderHero();
|
||
renderSeries();
|
||
renderStl();
|
||
renderPoseControls();
|
||
updateDICOMControls();
|
||
renderMaskPreview();
|
||
}
|
||
|
||
function renderHero() {
|
||
const row = state.activeCase;
|
||
$("activeTitle").textContent = row?.ct_key || "未选择 CT";
|
||
$("activeMeta").textContent = row
|
||
? `${row.patient_name || row.upp_patient_name || "无姓名"} · ${fmtDate(row.study_date)} ${fmtTime(row.study_time)} · ${Number(row.series_count || 0)} 序列`
|
||
: "从左侧选择一个 DICOM + STL 匹配检查";
|
||
const labels = [
|
||
row?.algorithm_model,
|
||
...asList(row?.body_parts).map((part) => bodyPartLabels[part] || part),
|
||
row?.registration_count ? `配准 ${row.registered_series || 0}` : "未配准",
|
||
row?.locked_count ? `锁定 ${row.locked_count}` : "",
|
||
].filter(Boolean);
|
||
$("activeTags").innerHTML = labels.map((label) => `<em class="tag">${escapeHtml(label)}</em>`).join("");
|
||
$("brandSubtitle").textContent = row?.ct_key ? `${row.ct_key} · STL ${Number(row.stl_file_count || 0)} 个` : "DICOM 序列、STL family 与人工位姿锁定";
|
||
}
|
||
|
||
function seriesTime(row) {
|
||
const start = fmtTime(row.first_time || row.series_time);
|
||
const end = fmtTime(row.last_time || "");
|
||
return start && end && start !== end ? `${start}-${end}` : start || end || "-";
|
||
}
|
||
|
||
function renderSeries() {
|
||
$("seriesCount").textContent = String(state.series.length);
|
||
if (!state.series.length) {
|
||
$("seriesList").innerHTML = `<div class="empty-state">没有可用 DICOM 序列</div>`;
|
||
return;
|
||
}
|
||
$("seriesList").innerHTML = state.series
|
||
.map((row) => {
|
||
const active = state.selectedSeries?.series_uid === row.series_uid ? "active" : "";
|
||
const reg = row.registration || {};
|
||
const labels = asList(row.annotation?.labels);
|
||
return `
|
||
<button class="series-card ${active}" data-series="${escapeHtml(row.series_uid)}" title="${escapeHtml(row.description)}\n${escapeHtml(row.series_uid)}">
|
||
<div class="card-line">
|
||
<strong>${escapeHtml(row.description || "未命名序列")}</strong>
|
||
${reg.locked ? `<em class="tag locked">已锁</em>` : reg.registered ? `<em class="tag">已配准</em>` : `<em class="tag warn">未配准</em>`}
|
||
</div>
|
||
<span>拍摄 ${escapeHtml(seriesTime(row))}</span>
|
||
<small>序列 ${escapeHtml(row.series_number || "-")} · ${Number(row.count || 0)} 张 · ${escapeHtml(row.rows || "-")}×${escapeHtml(row.columns || "-")}</small>
|
||
<div class="tag-line">
|
||
${labels.map((label) => `<em class="tag">${escapeHtml(label)}</em>`).join("")}
|
||
${asList(reg.labels).map((label) => `<em class="tag locked">${escapeHtml(label)}</em>`).join("")}
|
||
</div>
|
||
</button>
|
||
`;
|
||
})
|
||
.join("");
|
||
document.querySelectorAll("[data-series]").forEach((button) => {
|
||
button.addEventListener("click", async () => {
|
||
const next = state.series.find((item) => item.series_uid === button.dataset.series);
|
||
if (!next) return;
|
||
state.selectedSeries = next;
|
||
state.sliceIndex = Math.max(0, Math.floor((next.count || 1) / 2));
|
||
applyLatestRegistration();
|
||
renderAll();
|
||
await reloadVisuals();
|
||
});
|
||
});
|
||
}
|
||
|
||
function renderStl() {
|
||
$("stlCount").textContent = String(state.stlFiles.length);
|
||
$("modeFile").classList.toggle("active", state.mode === "file");
|
||
$("modeFamily").classList.toggle("active", state.mode === "family");
|
||
const families = Array.from(new Set(state.stlFiles.map((item) => item.family).filter(Boolean)));
|
||
$("familyRail").innerHTML = families
|
||
.map((family) => `<button class="chip ${state.selectedFamilies.has(family) ? "active" : ""}" data-family="${escapeHtml(family)}" type="button">${escapeHtml(family)}</button>`)
|
||
.join("");
|
||
document.querySelectorAll("[data-family]").forEach((button) => {
|
||
button.addEventListener("click", async () => {
|
||
const family = button.dataset.family;
|
||
if (state.selectedFamilies.has(family)) state.selectedFamilies.delete(family);
|
||
else state.selectedFamilies.add(family);
|
||
state.selectedStlIds.clear();
|
||
state.stlFiles.filter((item) => state.selectedFamilies.has(item.family)).forEach((item) => state.selectedStlIds.add(Number(item.id)));
|
||
markUnsaved();
|
||
renderStl();
|
||
await reloadStlVisuals();
|
||
});
|
||
});
|
||
$("stlList").innerHTML = state.stlFiles.length
|
||
? state.stlFiles
|
||
.map((row) => {
|
||
const checked = state.selectedStlIds.has(Number(row.id));
|
||
return `
|
||
<label class="stl-row ${checked ? "active" : ""}" title="${escapeHtml(row.path || "")}">
|
||
<input data-stl="${Number(row.id)}" type="checkbox" ${checked ? "checked" : ""} />
|
||
<span>
|
||
<strong>${escapeHtml(row.segment_name || row.file_name)}</strong>
|
||
<small>${escapeHtml(row.family || "-")} · ${escapeHtml(row.category || "-")} · ${fmtBytes(row.size_bytes)}</small>
|
||
</span>
|
||
<em class="tag">${escapeHtml(row.algorithm_model || "STL")}</em>
|
||
</label>
|
||
`;
|
||
})
|
||
.join("")
|
||
: `<div class="empty-state">没有 STL 文件</div>`;
|
||
document.querySelectorAll("[data-stl]").forEach((input) => {
|
||
input.addEventListener("change", async () => {
|
||
const id = Number(input.dataset.stl);
|
||
if (input.checked) state.selectedStlIds.add(id);
|
||
else state.selectedStlIds.delete(id);
|
||
state.selectedFamilies = new Set(
|
||
Array.from(new Set(selectedStlFiles().map((item) => item.family).filter(Boolean))),
|
||
);
|
||
markUnsaved();
|
||
renderStl();
|
||
await reloadStlVisuals();
|
||
});
|
||
});
|
||
}
|
||
|
||
function selectedStlFiles() {
|
||
return state.stlFiles.filter((item) => state.selectedStlIds.has(Number(item.id)));
|
||
}
|
||
|
||
function currentStlLabel() {
|
||
const selected = selectedStlFiles();
|
||
if (!selected.length) return "未选择STL";
|
||
const families = Array.from(new Set(selected.map((item) => item.family).filter(Boolean)));
|
||
if (state.mode === "family" && families.length) return families.join("+");
|
||
return selected.map((item) => item.segment_name || item.file_name).slice(0, 4).join("+") + (selected.length > 4 ? `等${selected.length}个` : "");
|
||
}
|
||
|
||
function updateDICOMControls() {
|
||
const series = state.selectedSeries;
|
||
$("dicomMeta").textContent = series ? `${series.description} · ${series.count} 张` : "未选择序列";
|
||
$("sliceSlider").max = String(Math.max(0, Number(series?.count || 1) - 1));
|
||
$("sliceSlider").value = String(Math.min(state.sliceIndex, Number($("sliceSlider").max || 0)));
|
||
$("sliceLabel").textContent = series ? `${state.sliceIndex + 1} / ${Number(series.count || 0)}` : "0 / 0";
|
||
}
|
||
|
||
function imageUrl() {
|
||
if (!state.activeCase || !state.selectedSeries) return "";
|
||
return `/api/image?${authParams({
|
||
ct_number: state.activeCase.pacs_ct_number || state.activeCase.ct_key,
|
||
series_uid: state.selectedSeries.series_uid,
|
||
index: String(state.sliceIndex),
|
||
plane: state.plane,
|
||
window: state.window,
|
||
}).toString()}`;
|
||
}
|
||
|
||
async function reloadVisuals() {
|
||
updateDICOMControls();
|
||
await Promise.all([reloadDicomImage(), reloadStlVisuals()]);
|
||
}
|
||
|
||
async function reloadDicomImage() {
|
||
const url = imageUrl();
|
||
$("dicomEmpty").classList.toggle("hidden", Boolean(url));
|
||
$("segmentationEmpty").classList.toggle("hidden", Boolean(url && selectedStlFiles().length));
|
||
if (!url) {
|
||
$("dicomImage").removeAttribute("src");
|
||
$("segmentationImage").removeAttribute("src");
|
||
return;
|
||
}
|
||
$("dicomImage").src = url;
|
||
$("segmentationImage").src = url;
|
||
if (state.scenes.fusion) state.scenes.fusion.setDicomTexture(url, state.selectedSeries);
|
||
renderMaskPreview();
|
||
}
|
||
|
||
async function reloadStlVisuals() {
|
||
const selected = selectedStlFiles();
|
||
$("stlMeta").textContent = selected.length ? `${selected.length} 个构件 · ${currentStlLabel()}` : "未选择模型";
|
||
$("fusionMeta").textContent = $("saveState").textContent === "已保存" ? `已保存 · ${currentStlLabel()}` : `当前选择 · ${currentStlLabel()}`;
|
||
if (state.scenes.stl) state.scenes.stl.loadMeshes(selected);
|
||
if (state.scenes.fusion) state.scenes.fusion.loadMeshes(selected);
|
||
renderMaskPreview();
|
||
}
|
||
|
||
function applyLatestRegistration() {
|
||
const seriesUid = state.selectedSeries?.series_uid || "";
|
||
const selectedLabel = currentStlLabel();
|
||
const exact = state.registrations.find((item) => item.series_instance_uid === seriesUid && item.stl_family === selectedLabel);
|
||
const latest = exact || state.registrations.find((item) => item.series_instance_uid === seriesUid) || null;
|
||
if (latest?.transform) {
|
||
state.pose = { ...defaultPose(), ...latest.transform };
|
||
$("registrationNotes").value = latest.notes || "";
|
||
$("saveState").textContent = latest.locked ? "已锁定" : "已保存";
|
||
$("fusionMeta").textContent = latest.locked ? "配准已锁定" : "已载入已保存位姿";
|
||
} else {
|
||
state.pose = defaultPose();
|
||
$("registrationNotes").value = "";
|
||
$("saveState").textContent = "未保存";
|
||
$("fusionMeta").textContent = "位姿未保存";
|
||
}
|
||
updateScenesPose();
|
||
}
|
||
|
||
async function saveRegistration(locked = false, forceUnlock = false) {
|
||
if (!state.activeCase || !state.selectedSeries) return;
|
||
const selected = selectedStlFiles();
|
||
if (!selected.length) {
|
||
alert("请至少选择一个 STL 构件");
|
||
return;
|
||
}
|
||
const payload = {
|
||
ct_number: state.activeCase.pacs_ct_number || state.activeCase.ct_key,
|
||
series_instance_uid: state.selectedSeries.series_uid,
|
||
series_description: state.selectedSeries.description || "",
|
||
algorithm_model: state.activeCase.algorithm_model || selected[0]?.algorithm_model || "未指定模型",
|
||
stl_family: currentStlLabel(),
|
||
view_mode: state.mode,
|
||
selected_stl_files: selected.map((item) => ({
|
||
id: item.id,
|
||
file_name: item.file_name,
|
||
segment_name: item.segment_name,
|
||
family: item.family,
|
||
category: item.category,
|
||
algorithm_model: item.algorithm_model,
|
||
})),
|
||
transform: state.pose,
|
||
dicom_reference: {
|
||
series_number: state.selectedSeries.series_number,
|
||
slice_index: state.sliceIndex,
|
||
plane: state.plane,
|
||
window: state.window,
|
||
rows: state.selectedSeries.rows,
|
||
columns: state.selectedSeries.columns,
|
||
pixel_spacing: state.selectedSeries.pixel_spacing,
|
||
slice_thickness: state.selectedSeries.slice_thickness,
|
||
spacing_between_slices: state.selectedSeries.spacing_between_slices,
|
||
},
|
||
model_reference: { selected_count: selected.length, families: Array.from(state.selectedFamilies) },
|
||
segmentation: { preview: state.maskVisible, source: "visible_stl_preview" },
|
||
notes: $("registrationNotes").value.trim(),
|
||
locked,
|
||
force_unlock: forceUnlock,
|
||
};
|
||
try {
|
||
await json("/api/registrations", { method: "POST", body: JSON.stringify(payload) });
|
||
$("saveState").textContent = locked ? "已锁定" : "已保存";
|
||
$("fusionMeta").textContent = locked ? "配准已保存并锁定" : "配准已保存";
|
||
const regPayload = await json(`/api/registrations/${encodeURIComponent(payload.ct_number)}`);
|
||
state.registrations = regPayload.registrations || [];
|
||
renderSeries();
|
||
} catch (err) {
|
||
alert(err.message);
|
||
}
|
||
}
|
||
|
||
async function exportStl() {
|
||
if (!state.activeCase) return;
|
||
const selected = selectedStlFiles();
|
||
const payload = {
|
||
ct_number: state.activeCase.pacs_ct_number || state.activeCase.ct_key,
|
||
mode: state.mode,
|
||
file_ids: selected.map((item) => Number(item.id)),
|
||
families: Array.from(state.selectedFamilies),
|
||
include_pose: true,
|
||
transform: state.pose,
|
||
label: currentStlLabel(),
|
||
};
|
||
const res = await request("/api/export/stl", { method: "POST", body: JSON.stringify(payload) });
|
||
const blob = await res.blob();
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement("a");
|
||
a.href = url;
|
||
a.download = `DICOM_UPP_STL_${payload.ct_number}.zip`;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
a.remove();
|
||
URL.revokeObjectURL(url);
|
||
}
|
||
|
||
function colorFor(item, index) {
|
||
const key = item.family || item.segment_name || String(index);
|
||
let hash = 0;
|
||
for (let i = 0; i < key.length; i += 1) hash = (hash * 31 + key.charCodeAt(i)) % 997;
|
||
return familyColors[hash % familyColors.length];
|
||
}
|
||
|
||
function createFallbackScene(container, { fusion = false } = {}) {
|
||
const canvas = document.createElement("canvas");
|
||
const ctx = canvas.getContext("2d");
|
||
container.appendChild(canvas);
|
||
let files = [];
|
||
let dicomImage = null;
|
||
|
||
function resize() {
|
||
const dpr = Math.min(window.devicePixelRatio || 1, 2);
|
||
const width = Math.max(1, container.clientWidth);
|
||
const height = Math.max(1, container.clientHeight);
|
||
canvas.width = Math.floor(width * dpr);
|
||
canvas.height = Math.floor(height * dpr);
|
||
canvas.style.width = `${width}px`;
|
||
canvas.style.height = `${height}px`;
|
||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
draw();
|
||
}
|
||
|
||
function draw() {
|
||
const width = container.clientWidth || 1;
|
||
const height = container.clientHeight || 1;
|
||
ctx.clearRect(0, 0, width, height);
|
||
ctx.fillStyle = "#000";
|
||
ctx.fillRect(0, 0, width, height);
|
||
if (fusion && dicomImage?.complete && dicomImage.naturalWidth) {
|
||
const scale = Math.min(width / dicomImage.naturalWidth, height / dicomImage.naturalHeight) * 0.92;
|
||
const w = dicomImage.naturalWidth * scale;
|
||
const h = dicomImage.naturalHeight * scale;
|
||
ctx.globalAlpha = 0.72;
|
||
ctx.drawImage(dicomImage, (width - w) / 2, (height - h) / 2, w, h);
|
||
ctx.globalAlpha = 1;
|
||
}
|
||
const pose = state.pose;
|
||
const cx = width / 2 + Number(pose.translateX || 0) * width * 0.14;
|
||
const cy = height / 2 - Number(pose.translateY || 0) * height * 0.14;
|
||
const base = Math.max(20, Math.min(width, height) * 0.11 * Number(pose.scale || 1));
|
||
ctx.save();
|
||
ctx.translate(cx, cy);
|
||
ctx.rotate(THREE.MathUtils.degToRad(Number(pose.rotateZ || 0)));
|
||
files.slice(0, 12).forEach((file, index) => {
|
||
const angle = (index / Math.max(files.length, 1)) * Math.PI * 2;
|
||
const radius = base * (1.1 + (index % 4) * 0.16);
|
||
const x = Math.cos(angle) * radius;
|
||
const y = Math.sin(angle) * radius * 0.72;
|
||
ctx.fillStyle = `${colorFor(file, index)}99`;
|
||
ctx.strokeStyle = colorFor(file, index);
|
||
ctx.lineWidth = 2;
|
||
ctx.beginPath();
|
||
ctx.ellipse(x, y, base * (0.42 + (index % 3) * 0.07), base * (0.26 + (index % 2) * 0.05), angle, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.stroke();
|
||
});
|
||
ctx.restore();
|
||
ctx.fillStyle = "rgba(234,242,251,0.72)";
|
||
ctx.font = "12px ui-sans-serif, system-ui";
|
||
ctx.fillText("WebGL不可用，已启用2D预览", 14, 22);
|
||
ctx.fillText(`${files.length} 个 STL 构件`, 14, height - 18);
|
||
}
|
||
|
||
resize();
|
||
window.addEventListener("resize", resize);
|
||
return {
|
||
loadMeshes(nextFiles) {
|
||
files = nextFiles || [];
|
||
draw();
|
||
},
|
||
setDicomTexture(url) {
|
||
if (!fusion || !url) return;
|
||
dicomImage = new Image();
|
||
dicomImage.onload = draw;
|
||
dicomImage.src = url;
|
||
},
|
||
updatePose: draw,
|
||
fit: draw,
|
||
dispose() {
|
||
window.removeEventListener("resize", resize);
|
||
container.innerHTML = "";
|
||
},
|
||
};
|
||
}
|
||
|
||
function createScene(container, { fusion = false } = {}) {
|
||
const scene = new THREE.Scene();
|
||
scene.background = new THREE.Color("#000000");
|
||
const camera = new THREE.PerspectiveCamera(42, 1, 0.01, 2000);
|
||
camera.position.set(0, -5.5, 3.2);
|
||
camera.up.set(0, 0, 1);
|
||
let renderer;
|
||
try {
|
||
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, preserveDrawingBuffer: true });
|
||
} catch (error) {
|
||
console.warn("WebGL不可用，切换到2D预览", error);
|
||
return createFallbackScene(container, { fusion });
|
||
}
|
||
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
|
||
container.appendChild(renderer.domElement);
|
||
|
||
const controls = new OrbitControls(camera, renderer.domElement);
|
||
controls.enableDamping = true;
|
||
controls.dampingFactor = 0.08;
|
||
controls.target.set(0, 0, 0);
|
||
|
||
scene.add(new THREE.AmbientLight(0xffffff, 0.72));
|
||
const keyLight = new THREE.DirectionalLight(0xffffff, 1.15);
|
||
keyLight.position.set(4, -5, 5);
|
||
scene.add(keyLight);
|
||
const fillLight = new THREE.DirectionalLight(0x8fb8ff, 0.5);
|
||
fillLight.position.set(-4, 3, 2);
|
||
scene.add(fillLight);
|
||
|
||
const modelGroup = new THREE.Group();
|
||
const pivot = new THREE.Group();
|
||
modelGroup.add(pivot);
|
||
scene.add(modelGroup);
|
||
|
||
let dicomPlane = null;
|
||
let dicomTexture = null;
|
||
if (fusion) {
|
||
const geometry = new THREE.PlaneGeometry(4.2, 4.2);
|
||
const material = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.76, side: THREE.DoubleSide });
|
||
dicomPlane = new THREE.Mesh(geometry, material);
|
||
dicomPlane.position.z = -0.02;
|
||
scene.add(dicomPlane);
|
||
}
|
||
|
||
let baseScale = 1;
|
||
let disposed = false;
|
||
const loader = new STLLoader();
|
||
|
||
function resize() {
|
||
const width = Math.max(1, container.clientWidth);
|
||
const height = Math.max(1, container.clientHeight);
|
||
camera.aspect = width / height;
|
||
camera.updateProjectionMatrix();
|
||
renderer.setSize(width, height, false);
|
||
}
|
||
|
||
function fit() {
|
||
camera.position.set(0, -5.5, 3.2);
|
||
controls.target.set(0, 0, 0);
|
||
controls.update();
|
||
}
|
||
|
||
function clearMeshes() {
|
||
while (pivot.children.length) {
|
||
const child = pivot.children.pop();
|
||
if (child.geometry) child.geometry.dispose();
|
||
if (child.material) child.material.dispose();
|
||
}
|
||
}
|
||
|
||
function loadMeshes(files) {
|
||
clearMeshes();
|
||
if (!files.length || !state.activeCase) return;
|
||
const ct = state.activeCase.pacs_ct_number || state.activeCase.ct_key;
|
||
const promises = files.map(
|
||
(file, index) =>
|
||
new Promise((resolve) => {
|
||
const url = `/api/stl?${authParams({ ct_number: ct, file_id: String(file.id) }).toString()}`;
|
||
loader.load(
|
||
url,
|
||
(geometry) => {
|
||
geometry.computeBoundingBox();
|
||
geometry.computeVertexNormals();
|
||
const material = new THREE.MeshStandardMaterial({
|
||
color: new THREE.Color(colorFor(file, index)),
|
||
roughness: 0.52,
|
||
metalness: 0.02,
|
||
transparent: fusion,
|
||
opacity: fusion ? 0.72 : 1,
|
||
side: THREE.DoubleSide,
|
||
});
|
||
const mesh = new THREE.Mesh(geometry, material);
|
||
mesh.userData = file;
|
||
pivot.add(mesh);
|
||
resolve(mesh);
|
||
},
|
||
undefined,
|
||
() => resolve(null),
|
||
);
|
||
}),
|
||
);
|
||
Promise.all(promises).then(() => {
|
||
if (disposed || !pivot.children.length) return;
|
||
const box = new THREE.Box3().setFromObject(pivot);
|
||
const center = box.getCenter(new THREE.Vector3());
|
||
const size = box.getSize(new THREE.Vector3());
|
||
const maxSize = Math.max(size.x, size.y, size.z, 1);
|
||
pivot.children.forEach((child) => {
|
||
child.geometry.translate(-center.x, -center.y, -center.z);
|
||
child.geometry.computeBoundingBox();
|
||
child.geometry.computeBoundingSphere();
|
||
});
|
||
baseScale = 4.2 / maxSize;
|
||
fit();
|
||
updatePose();
|
||
});
|
||
}
|
||
|
||
function updatePose() {
|
||
const pose = state.pose;
|
||
modelGroup.rotation.set(
|
||
THREE.MathUtils.degToRad(Number(pose.rotateX || 0)),
|
||
THREE.MathUtils.degToRad(Number(pose.rotateY || 0)),
|
||
THREE.MathUtils.degToRad(Number(pose.rotateZ || 0)),
|
||
);
|
||
modelGroup.position.set(Number(pose.translateX || 0), Number(pose.translateY || 0), Number(pose.translateZ || 0));
|
||
const scale = baseScale * Number(pose.scale || 1);
|
||
modelGroup.scale.set(pose.flipX ? -scale : scale, pose.flipY ? -scale : scale, pose.flipZ ? -scale : scale);
|
||
}
|
||
|
||
function setDicomTexture(url, series) {
|
||
if (!fusion || !dicomPlane || !url) return;
|
||
new THREE.TextureLoader().load(url, (texture) => {
|
||
if (dicomTexture) dicomTexture.dispose();
|
||
dicomTexture = texture;
|
||
dicomPlane.material.map = texture;
|
||
dicomPlane.material.needsUpdate = true;
|
||
const rows = Number(series?.rows || 512);
|
||
const cols = Number(series?.columns || 512);
|
||
const width = 4.2;
|
||
const height = rows && cols ? width * (rows / cols) : width;
|
||
dicomPlane.geometry.dispose();
|
||
dicomPlane.geometry = new THREE.PlaneGeometry(width, height);
|
||
});
|
||
}
|
||
|
||
function animate() {
|
||
if (disposed) return;
|
||
resize();
|
||
updatePose();
|
||
controls.update();
|
||
renderer.render(scene, camera);
|
||
requestAnimationFrame(animate);
|
||
}
|
||
animate();
|
||
|
||
window.addEventListener("resize", resize);
|
||
return {
|
||
loadMeshes,
|
||
setDicomTexture,
|
||
updatePose,
|
||
fit,
|
||
dispose() {
|
||
disposed = true;
|
||
window.removeEventListener("resize", resize);
|
||
clearMeshes();
|
||
if (dicomTexture) dicomTexture.dispose();
|
||
renderer.dispose();
|
||
container.innerHTML = "";
|
||
},
|
||
};
|
||
}
|
||
|
||
function updateScenesPose() {
|
||
Object.values(state.scenes).forEach((scene) => scene?.updatePose?.());
|
||
renderMaskPreview();
|
||
}
|
||
|
||
function renderMaskPreview() {
|
||
const canvas = $("maskCanvas");
|
||
const ctx = canvas.getContext("2d");
|
||
const rect = canvas.getBoundingClientRect();
|
||
const dpr = Math.min(window.devicePixelRatio || 1, 2);
|
||
canvas.width = Math.max(1, Math.floor(rect.width * dpr));
|
||
canvas.height = Math.max(1, Math.floor(rect.height * dpr));
|
||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
ctx.clearRect(0, 0, rect.width, rect.height);
|
||
if (!state.maskVisible || !state.selectedSeries || !selectedStlFiles().length) return;
|
||
const files = selectedStlFiles().slice(0, 9);
|
||
files.forEach((file, index) => {
|
||
const color = colorFor(file, index);
|
||
const x = rect.width * (0.36 + (index % 3) * 0.12 + Number(state.pose.translateX || 0) * 0.08);
|
||
const y = rect.height * (0.38 + Math.floor(index / 3) * 0.12 - Number(state.pose.translateY || 0) * 0.08);
|
||
const radius = Math.max(18, Math.min(rect.width, rect.height) * (0.07 + (Number(state.pose.scale || 1) - 1) * 0.015));
|
||
ctx.fillStyle = `${color}66`;
|
||
ctx.strokeStyle = color;
|
||
ctx.lineWidth = 2;
|
||
ctx.beginPath();
|
||
ctx.ellipse(x, y, radius * (1.15 - (index % 2) * 0.24), radius * (0.76 + (index % 3) * 0.09), THREE.MathUtils.degToRad(Number(state.pose.rotateZ || 0) + index * 18), 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.stroke();
|
||
});
|
||
ctx.fillStyle = "rgba(234,242,251,0.78)";
|
||
ctx.font = "12px ui-sans-serif, system-ui";
|
||
ctx.fillText(`${selectedStlFiles().length} 个可见 STL · 预览叠加`, 14, rect.height - 16);
|
||
}
|
||
|
||
async function login(event) {
|
||
event.preventDefault();
|
||
$("loginError").textContent = "";
|
||
try {
|
||
const data = await json("/api/auth/login", {
|
||
method: "POST",
|
||
body: JSON.stringify({ username: $("username").value.trim(), password: $("password").value }),
|
||
});
|
||
state.token = data.token;
|
||
state.user = { username: data.username, role: data.role };
|
||
localStorage.setItem("dicom_upp_registration_token", state.token);
|
||
applyAuthUi();
|
||
showLogin(false);
|
||
await refreshAll();
|
||
} catch (_) {
|
||
$("loginError").textContent = "登录失败";
|
||
}
|
||
}
|
||
|
||
function logout() {
|
||
state.token = "";
|
||
state.user = null;
|
||
localStorage.removeItem("dicom_upp_registration_token");
|
||
applyAuthUi();
|
||
showLogin(true);
|
||
}
|
||
|
||
function applyAuthUi() {
|
||
$("userBadge").textContent = state.user ? `${state.user.username} · ${state.user.role}` : "未登录";
|
||
}
|
||
|
||
async function loadCurrentUser() {
|
||
if (!state.token) {
|
||
showLogin(true);
|
||
return false;
|
||
}
|
||
try {
|
||
state.user = await json("/api/auth/me");
|
||
applyAuthUi();
|
||
showLogin(false);
|
||
return true;
|
||
} catch (_) {
|
||
state.token = "";
|
||
localStorage.removeItem("dicom_upp_registration_token");
|
||
applyAuthUi();
|
||
showLogin(true);
|
||
return false;
|
||
}
|
||
}
|
||
|
||
async function refreshAll() {
|
||
setLoading(true);
|
||
try {
|
||
await loadStatus();
|
||
await loadCases();
|
||
} catch (err) {
|
||
$("dbStatus").textContent = err.message;
|
||
$("dbStatus").className = "status-pill offline";
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
|
||
function wire() {
|
||
$("loginForm").addEventListener("submit", login);
|
||
$("logoutBtn").addEventListener("click", logout);
|
||
$("refreshBtn").addEventListener("click", refreshAll);
|
||
$("relationBtn").addEventListener("click", () => window.open(relationBaseUrl(), "_blank", "noopener"));
|
||
$("viewerBtn").addEventListener("click", () => {
|
||
const ct = state.activeCase?.pacs_ct_number || state.activeCase?.ct_key || "";
|
||
const suffix = ct ? `/?ct_number=${encodeURIComponent(ct)}` : "";
|
||
window.open(`${viewerBaseUrl()}${suffix}`, "_blank", "noopener");
|
||
});
|
||
$("caseSearch").addEventListener("input", () => {
|
||
clearTimeout(state.searchTimer);
|
||
state.searchTimer = setTimeout(loadCases, 280);
|
||
});
|
||
$("modeFile").addEventListener("click", async () => {
|
||
state.mode = "file";
|
||
markUnsaved();
|
||
renderStl();
|
||
});
|
||
$("modeFamily").addEventListener("click", async () => {
|
||
state.mode = "family";
|
||
markUnsaved();
|
||
renderStl();
|
||
});
|
||
$("sliceSlider").addEventListener("input", async () => {
|
||
state.sliceIndex = Number($("sliceSlider").value || 0);
|
||
updateDICOMControls();
|
||
await reloadDicomImage();
|
||
markUnsaved();
|
||
});
|
||
$("planeSelect").addEventListener("change", async () => {
|
||
state.plane = $("planeSelect").value;
|
||
await reloadDicomImage();
|
||
});
|
||
$("windowSelect").addEventListener("change", async () => {
|
||
state.window = $("windowSelect").value;
|
||
await reloadDicomImage();
|
||
});
|
||
$("registrationNotes").addEventListener("input", markUnsaved);
|
||
$("resetPoseBtn").addEventListener("click", () => {
|
||
state.pose = defaultPose();
|
||
syncPoseInputs();
|
||
markUnsaved();
|
||
updateScenesPose();
|
||
});
|
||
$("saveRegistrationBtn").addEventListener("click", () => saveRegistration(false, false));
|
||
$("lockRegistrationBtn").addEventListener("click", () => saveRegistration(true, false));
|
||
$("unlockRegistrationBtn").addEventListener("click", () => saveRegistration(false, true));
|
||
$("exportStlBtn").addEventListener("click", exportStl);
|
||
$("fitStlBtn").addEventListener("click", () => state.scenes.stl?.fit());
|
||
$("fitFusionBtn").addEventListener("click", () => state.scenes.fusion?.fit());
|
||
$("toggleMaskBtn").addEventListener("click", () => {
|
||
state.maskVisible = !state.maskVisible;
|
||
$("toggleMaskBtn").textContent = state.maskVisible ? "隐藏" : "显示";
|
||
renderMaskPreview();
|
||
});
|
||
}
|
||
|
||
async function boot() {
|
||
state.scenes.stl = createScene($("stlViewport"), { fusion: false });
|
||
state.scenes.fusion = createScene($("fusionViewport"), { fusion: true });
|
||
renderPoseControls();
|
||
wire();
|
||
applyAuthUi();
|
||
const ok = await loadCurrentUser();
|
||
if (ok) await refreshAll();
|
||
}
|
||
|
||
boot();
|