[編集モード] NEWSScoreTable

National Early Warning Scoreを計算する

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NEWS Score Table Calculator</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    <link rel="stylesheet" href="https://pyscript.net/releases/2024.1.1/core.css" />
    <script type="module" src="https://pyscript.net/releases/2024.1.1/core.js"></script>
    <style>
        /* 外部環境の影響を最小限にするためのテーブルスタイル */
        .news-table {
            width: 100% !important;
            min-width: 800px !important;
            border-collapse: collapse !important;
            table-layout: fixed !important;
            border: 2px solid #1e293b !important;
            background-color: white !important;
        }

.news-table th, .news-table td {
            border: 1px solid #475569 !important;
            padding: 0 !important;
            height: 60px !important;
            text-align: center !important;
            vertical-align: middle !important;
            font-weight: 800 !important;
            font-size: 13px !important;
        }

/* 選択時の色設定（!importantで強制適用） */
        .selected-cell {
            background-color: #1d4ed8 !important; /* Blue-700 */
            color: #ffffff !important;
            box-shadow: inset 0 0 0 4px #172554 !important;
            transform: scale(1.02);
            z-index: 10;
        }

/* 背景色のデフォルト定義 */
        .c-score-3 { background-color: #ea580c !important; color: white !important; }
        .c-score-2 { background-color: #fb923c !important; color: #0f172a !important; }
        .c-score-1 { background-color: #fef08a !important; color: #0f172a !important; }
        .c-score-0 { background-color: #ffffff !important; color: #0f172a !important; }
        .c-empty   { background-color: #f1f5f9 !important; cursor: default !important; }

.clickable { cursor: pointer !important; user-select: none !important; }
        .clickable:hover:not(.selected-cell) { filter: brightness(0.9); }

.header-param { background-color: #0f172a !important; color: white !important; width: 150px !important; }
        .header-score { background-color: #1e3a8a !important; color: white !important; font-size: 20px !important; }
        
        /* ローディング表示 */
        #pyscript-loading {
            position: fixed; top: 0; left: 0; width: 100%; height: 5px; 
            background: #3b82f6; z-index: 9999; display: block;
        }
    </style>
</head>
<body class="bg-slate-50 min-h-screen">

<div id="pyscript-loading"></div>

<div class="max-w-6xl mx-auto py-8 px-4">
        <header class="text-center mb-6">
            <h1 class="text-2xl sm:text-3xl font-black text-slate-900 tracking-tight italic">National Early Warning Score (NEWS)</h1>
            <p class="text-slate-500 mt-1 text-sm font-bold uppercase">Clinical Decision Support Tool</p>
        </header>

<div class="sticky top-4 z-50 mb-8">
            <div id="result-panel" class="bg-white shadow-2xl rounded-2xl p-5 flex items-center justify-between border-l-[16px] border-slate-400 transition-all duration-300 ring-1 ring-black/5">
                <div class="flex flex-col">
                    <span class="text-[10px] uppercase font-black text-slate-400 tracking-widest">Score Calculation</span>
                    <div class="flex items-baseline">
                        <span id="total-score" class="text-6xl font-black text-blue-900 leading-none">0</span>
                        <span class="text-slate-300 font-black ml-1 text-2xl">/ 20</span>
                    </div>
                </div>
                <div class="text-right flex-1 ml-6 border-l-2 border-slate-100 pl-6">
                    <div id="risk-category" class="text-xl sm:text-2xl font-black text-slate-300 leading-tight mb-1">INITIALIZING...</div>
                    <div id="risk-action" class="text-xs sm:text-sm text-slate-500 font-medium italic">システムの読み込みを待っています</div>
                </div>
            </div>
        </div>

<div class="bg-white rounded-xl shadow-xl overflow-hidden border border-slate-300">
            <div class="overflow-x-auto">
                <table class="news-table">
                    <thead>
                        <tr>
                            <th class="header-param text-[10px]">PHYSIOLOGICAL<br>PARAMETERS</th>
                            <th class="header-score">3</th>
                            <th class="header-score">2</th>
                            <th class="header-score">1</th>
                            <th class="header-score">0</th>
                            <th class="header-score">1</th>
                            <th class="header-score">2</th>
                            <th class="header-score">3</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                        <tr>
                            <td class="header-param">呼吸数 (回/分)</td>
                            <td class="clickable c-score-3" data-param="resp" data-score="3" py-click="select_cell">≤8</td>
                            <td class="c-empty"></td>
                            <td class="clickable c-score-1" data-param="resp" data-score="1" py-click="select_cell">9–11</td>
                            <td class="clickable c-score-0" data-param="resp" data-score="0" py-click="select_cell">12–20</td>
                            <td class="c-empty"></td>
                            <td class="clickable c-score-2" data-param="resp" data-score="2" py-click="select_cell">21–24</td>
                            <td class="clickable c-score-3" data-param="resp" data-score="3" py-click="select_cell">≥25</td>
                        </tr>
                        
                        <tr>
                            <td class="header-param">SpO2 (%)</td>
                            <td class="clickable c-score-3" data-param="spo2" data-score="3" py-click="select_cell">≤91</td>
                            <td class="clickable c-score-2" data-param="spo2" data-score="2" py-click="select_cell">92–93</td>
                            <td class="clickable c-score-1" data-param="spo2" data-score="1" py-click="select_cell">94–95</td>
                            <td class="clickable c-score-0" data-param="spo2" data-score="0" py-click="select_cell">≥96</td>
                            <td class="c-empty"></td>
                            <td class="c-empty"></td>
                            <td class="c-empty"></td>
                        </tr>
                        
                        <tr>
                            <td class="header-param">酸素吸入</td>
                            <td class="c-empty"></td>
                            <td class="clickable c-score-2" data-param="oxy" data-score="2" py-click="select_cell">あり (Yes)</td>
                            <td class="c-empty"></td>
                            <td class="clickable c-score-0" data-param="oxy" data-score="0" py-click="select_cell">なし (No)</td>
                            <td class="c-empty"></td>
                            <td class="c-empty"></td>
                            <td class="c-empty"></td>
                        </tr>
                        
                        <tr>
                            <td class="header-param">体温 (°C)</td>
                            <td class="clickable c-score-3" data-param="temp" data-score="3" py-click="select_cell">≤35.0</td>
                            <td class="c-empty"></td>
                            <td class="clickable c-score-1" data-param="temp" data-score="1" py-click="select_cell">35.1–36.0</td>
                            <td class="clickable c-score-0" data-param="temp" data-score="0" py-click="select_cell">36.1–38.0</td>
                            <td class="clickable c-score-1" data-param="temp" data-score="1" py-click="select_cell">38.1–39.0</td>
                            <td class="clickable c-score-2" data-param="temp" data-score="2" py-click="select_cell">≥39.1</td>
                            <td class="c-empty"></td>
                        </tr>
                        
                        <tr>
                            <td class="header-param">収縮期血圧 (mmHg)</td>
                            <td class="clickable c-score-3" data-param="sbp" data-score="3" py-click="select_cell">≤90</td>
                            <td class="clickable c-score-2" data-param="sbp" data-score="2" py-click="select_cell">91–100</td>
                            <td class="clickable c-score-1" data-param="sbp" data-score="1" py-click="select_cell">101–110</td>
                            <td class="clickable c-score-0" data-param="sbp" data-score="0" py-click="select_cell">111–219</td>
                            <td class="c-empty"></td>
                            <td class="c-empty"></td>
                            <td class="clickable c-score-3" data-param="sbp" data-score="3" py-click="select_cell">≥220</td>
                        </tr>
                        
                        <tr>
                            <td class="header-param">心拍数 (回/分)</td>
                            <td class="clickable c-score-3" data-param="hr" data-score="3" py-click="select_cell">≤40</td>
                            <td class="c-empty"></td>
                            <td class="clickable c-score-1" data-param="hr" data-score="1" py-click="select_cell">41–50</td>
                            <td class="clickable c-score-0" data-param="hr" data-score="0" py-click="select_cell">51–90</td>
                            <td class="clickable c-score-1" data-param="hr" data-score="1" py-click="select_cell">91–110</td>
                            <td class="clickable c-score-2" data-param="hr" data-score="2" py-click="select_cell">111–130</td>
                            <td class="clickable c-score-3" data-param="hr" data-score="3" py-click="select_cell">≥131</td>
                        </tr>
                        
                        <tr>
                            <td class="header-param">意識レベル</td>
                            <td class="c-empty"></td>
                            <td class="c-empty"></td>
                            <td class="c-empty"></td>
                            <td class="clickable c-score-0" data-param="cons" data-score="0" py-click="select_cell">A (Alert)</td>
                            <td class="c-empty"></td>
                            <td class="c-empty"></td>
                            <td class="clickable c-score-3" data-param="cons" data-score="3" py-click="select_cell">V, P, or U</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

<div class="mt-8 flex justify-center pb-12">
            <button py-click="reset_calculator" class="flex items-center gap-3 px-12 py-4 bg-slate-900 text-white rounded-xl hover:bg-red-700 transition-all font-black shadow-xl uppercase tracking-widest text-sm group">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 group-hover:rotate-180 transition-transform duration-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                </svg>
                RESET DATA
            </button>
        </div>
    </div>

# 初期状態
        state = {
            "resp": None, "spo2": None, "oxy": None, 
            "temp": None, "sbp": None, "hr": None, "cons": None
        }

def select_cell(event):
            try:
                # クリックされた要素を取得
                target = event.target
                if not target.hasAttribute("data-param"):
                    target = target.closest("[data-param]")
                
                if not target: return

param = target.getAttribute("data-param")
                score = int(target.getAttribute("data-score"))
                
                # 同一パラメータの選択を解除
                row_cells = document.querySelectorAll(f'[data-param="{param}"]')
                for cell in row_cells:
                    cell.classList.remove("selected-cell")
                
                # 今回の選択を反映
                target.classList.add("selected-cell")
                
                # データを更新して再計算
                state[param] = score
                update_calculation()
            except Exception as e:
                print(f"Error in select_cell: {e}")

def update_calculation(event=None):
            # 合計を算出
            total = sum(v for v in state.values() if v is not None)
            
            # 条件判定
            complete = all(v is not None for v in state.values())
            has_red = any(v == 3 for v in state.values())
            
            refresh_ui(total, complete, has_red)

def refresh_ui(total, complete, has_red):
            score_el = document.querySelector("#total-score")
            risk_el = document.querySelector("#risk-category")
            action_el = document.querySelector("#risk-action")
            panel_el = document.querySelector("#result-panel")
            
            score_el.innerText = str(total)
            panel_el.style.borderLeftColor = "#94a3b8" # slate-400 (Default)
            
            if not complete:
                risk_el.innerText = "WAITING"
                risk_el.style.color = "#cbd5e1"
                action_el.innerText = f"残り {list(state.values()).count(None)} 項目を選択してください"
                return

# スコア別リスク判定
            if total >= 7:
                risk_el.innerText = "HIGH RISK"
                risk_el.style.color = "#dc2626"
                panel_el.style.borderLeftColor = "#dc2626"
                action_el.innerText = "直ちに緊急対応チームの招集を検討してください"
            elif total >= 5 or has_red:
                risk_el.innerText = "MEDIUM RISK"
                risk_el.style.color = "#ea580c"
                panel_el.style.borderLeftColor = "#ea580c"
                action_el.innerText = "迅速な臨床評価と観察頻度の増加が必要です"
            else:
                risk_el.innerText = "LOW RISK"
                risk_el.style.color = "#16a34a"
                panel_el.style.borderLeftColor = "#16a34a"
                action_el.innerText = "通常のルーチン経過観察を継続してください"

def reset_calculator(event):
            for p in state:
                state[p] = None
                for cell in document.querySelectorAll(f'[data-param="{p}"]'):
                    cell.classList.remove("selected-cell")
            update_calculation()

# 起動時に一度実行してUIを初期化
        update_calculation()
        # ローディングバーを隠す
        document.querySelector("#pyscript-loading").style.display = "none"
    </script>
</body>
</html>

デバッグ × キャンバス: 幅 × 高

🍯 プログラム貯蔵庫

[編集モード] NEWSScoreTable

素材のアップロード