目標

實現心肌灌注掃描（MPI）報告產生器

核心流程圖

flowchart LR
    A[使用者開啟網頁 index.html] --> B[左側互動圖表生成<br>topChart & bottomChart]
    A --> C[右側操作區：下拉選單與報告顯示]
    B --> D[使用者點擊/拖曳圖表區段]
    D --> E[區段數值更新 0~3]
    C --> F[下拉選單選擇藥物狀態]
    E & F --> G[觸發更新事件]
    G --> H[mpi-report.js 的 updateReports]
    H --> I[更新 Procedure: 根據下拉選單值生成文字]
    H --> J[呼叫 generateReportFromDiagrams 收集圖表數據]
    J --> K[將區段數據映射到心臟各解剖區域]
    K --> L[按血管區域分組 LAD, RCA, LCX]
    L --> M[計算缺損面積與嚴重程度]
    M --> N[生成 Findings 與 Impression 文本]
    I & N --> O[更新報告顯示區 Procedure, Findings, Impression, Addendum]
    O --> P[使用者可點擊 Send report data 傳送資料]

主要步驟與核心重點

1. 介面設計與互動

   • 左側圖表：兩個互動式 SVG 畫布（topChart 與 bottomChart），使用者可點擊或拖曳改變各區段的數值（0~3），直觀反映心肌灌注狀態。
   • 右側操作：包含藥物狀態下拉選單、報告文字區（Procedure、Findings、Impression、Addendum）與發送報告按鈕，直接呈現並控制報告內容。

2. 核心邏輯處理

   • 更新機制：使用者操作（圖表點擊/拖曳與下拉選單變更）觸發事件，最終由 mpi-report.js 的 updateReports 統一處理更新。
   • 報告生成：
     • Procedure：根據下拉選單值，生成檢查程序的描述文字。
     • 數據收集與分析：從圖表取得數據，透過預設的區域映射（segmentDefinition）和血管分組（vesselRegions）將區段數值對應到心臟各解剖區域，再利用 calculateAreas 與 analyzeVessels 計算缺損面積和嚴重程度，生成 Findings 與 Impression。
     • Addendum：根據 Impression 內容生成補充說明文字。

3. 資料傳送

   • 使用者點擊「Send report data」按鈕後，sendReportData 收集當前所有報告文本，並以 JSON 格式透過 window.parent.postMessage 傳送至父窗口，方便嵌入至其他應用（如電子病歷系統）。

詳細說明

前端介面（index.html）

• 結構佈局：
  • 左側：包含兩個 SVG 畫布，動態生成心臟區段圖（應力與休息狀態）。
  • 右側：包含藥物狀態下拉選單、操作按鈕與報告文本區，通過 ID 與 JavaScript 互動。
• 互動機制：
  • 圖表操作改變數值並更新區塊顏色，觸發後續報告更新。
  • 控制元件（下拉選單與按鈕）綁定事件，確保數據正確流轉到報告生成模組。

核心邏輯（mpi-report.js）

• 初始化與事件綁定：
  • 在 DOM 載入完成後，initReportGenerator 負責設定所有操作元件的事件監聽，確保使用者操作能即時反映於報告內容。
• 報告更新流程：
  • updateReports 是入口函數，依次調用：
    • updateProcedureText：生成檢查過程文字。
    • generateReportFromDiagrams：收集圖表數據，通過區域映射和血管分組計算缺損面積與嚴重程度，生成 Findings 與 Impression。
    • updateAddendumText：根據 Impression 補充說明文字。
• 數據分析：
  • 透過 calculateAreas 判斷各解剖位置及血管區域在應力與休息狀態下的缺損面積（考慮部分區塊權重）。
  • 利用 analyzeVessels 計算缺損嚴重程度，並判斷是否存在缺血或梗塞，進而根據預設詞彙生成描述性文字。

完整代碼