在前幾天的開發中，我已經完成醫療資料的缺失值、格式錯誤、數值異常、重複資料與一致性問題檢查，也能統計各類問題的數量。
不過，原本的統計結果是以文字逐行顯示，雖然可以閱讀，但如果希望這個工具更接近實際使用的網頁系統，就需要改善資訊的呈現方式。
因此，今天的目標是將統計結果改成卡片式介面，讓使用者可以快速掌握資料總筆數、問題總數，以及各類資料品質問題的數量。
一、使用CSS建立卡片版面

.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 20px 0;
}
.summary-card {
    background: white;
    border: 1px solid #dce5e2;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 3px 10px rgba(30, 70, 60, 0.05);
}
.summary-label {
    color: #647873;
    font-size: 14px;
    margin-bottom: 8px;
}
.summary-value {
    color: #245c53;
    font-size: 28px;
    font-weight: bold;
}

二、將統計資料顯示在卡片中
利用PHP將原本已經計算好的統計變數輸出到HTML中，不需要重新執行資料檢查。

echo '<div class="summary-grid">';
echo '<div class="summary-card">';
echo '<div class="summary-label">資料總筆數</div>';
echo '<div class="summary-value">' . $totalRows . '</div>';
echo '</div>';
echo '<div class="summary-card">';
echo '<div class="summary-label">總問題數</div>';
echo '<div class="summary-value">' . $totalIssues . '</div>';
echo '</div>';
echo '<div class="summary-card">';
echo '<div class="summary-label">缺失值</div>';
echo '<div class="summary-value">' . $missingCount . '</div>';
echo '</div>';
echo '<div class="summary-card">';
echo '<div class="summary-label">格式錯誤</div>';
echo '<div class="summary-value">' . $formatCount . '</div>';
echo '</div>';
echo '</div>';

這段程式碼示範了前四張卡片的建立方式。其餘卡片也使用相同的結構，分別顯示數值異常、重複資料與一致性問題。
透過PHP變數與HTML的結合，卡片上的數字會根據程式實際檢查到的結果顯示，而不是直接寫死在網頁中。
三、增加資料問題比例
除了顯示各類問題的數量，也保留了有問題的病人數與資料比例，讓使用者能從整體角度了解資料品質。

$affectedPatientCount = count($affectedPatients);
$affectedRate = ($totalRows > 0)
    ? ($affectedPatientCount / $totalRows) * 100
    : 0;
echo '<p class="summary-note">';
echo '有問題的病人數：' . $affectedPatientCount . ' 人';
echo '｜有問題的資料比例：'
    . number_format($affectedRate, 1) . '%';
echo '</p>';

這裡使用count()計算有問題的病人識別碼數量，並利用資料總筆數計算比例。當資料總筆數為零時，則將比例設定為零，避免發生除以零的問題。
需要注意的是，目前的比例是以有問題的病人識別碼數量除以資料總筆數計算，因此在存在重複資料時，這個數值不一定等於不重複病人中的實際問題比例。