pipe-ner-server/docs/cockpit/infrastructure-emergency-support-demo.html

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>基础设施 / 应急保障 Demo</title>
    <style>
        body {
            margin: 0;
            font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
            color: #18212f;
            background: #eef2f7;
        }
        header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 24px;
            color: white;
            background: #17324d;
        }
        main {
            max-width: 1180px;
            margin: 20px auto;
            padding: 0 16px;
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 16px;
        }
        .panel {
            background: white;
            border: 1px solid #d8e0ea;
            border-radius: 6px;
            padding: 14px;
            box-shadow: 0 2px 5px rgba(23,50,77,.06);
        }
        .filters, .fixtures {
            display: grid;
            gap: 10px;
        }
        label, select, button {
            display: block;
            width: 100%;
        }
        label {
            font-size: 12px;
            color: #52606d;
        }
        select, button {
            padding: 8px;
            border: 1px solid #b9c4d0;
            background: white;
            border-radius: 4px;
        }
        button {
            cursor: pointer;
            background: #2563a8;
            border-color: #2563a8;
            color: white;
        }
        button.secondary {
            background: white;
            color: #17324d;
        }
        .metrics {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }
        .metric, .state {
            padding: 8px;
            border: 1px solid #d8e0ea;
            border-radius: 4px;
            background: #f8fafc;
            font-size: 12px;
        }
        .metric strong, .state strong {
            display: block;
            font-size: 20px;
            color: #17324d;
        }
        .state.ready { border-color: #8fc7a3; }
        .state.empty { border-color: #b9c4d0; }
        .state.unavailable { border-color: #d98c7c; }
        .map {
            height: 350px;
            margin-top: 10px;
            position: relative;
            border: 1px solid #c9d4df;
            border-radius: 4px;
            background: linear-gradient(#eaf2f7 1px, transparent 1px) 0 0/40px 40px,
                        linear-gradient(90deg, #eaf2f7 1px, transparent 1px) 0 0/40px 40px, white;
        }
        .point {
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }
        .point::after {
            content: attr(data-code);
            position: absolute;
            left: 14px;
            top: -5px;
            white-space: nowrap;
            font-size: 10px;
            color: #253849;
        }
        .emergency_resource { background: #2563a8; }
        .hazard_source { background: #c9483b; }
        .protection_target { background: #24825b; }
        .distribution {
            margin-top: 12px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        .bar {
            height: 10px;
            background: #dce4eb;
            border-radius: 5px;
            overflow: hidden;
        }
        .bar span {
            display: block;
            height: 100%;
            background: #2563a8;
        }
        .row {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            margin-top: 6px;
        }
        table {
            width: 100%;
            margin-top: 10px;
            border-collapse: collapse;
            font-size: 12px;
        }
        th, td {
            text-align: left;
            padding: 6px;
            border-bottom: 1px solid #e3e9ef;
        }
        .endpoint {
            margin: 0;
            font-size: 12px;
            color: #aebdcb;
        }
        @media (max-width: 760px) {
            main { grid-template-columns: 1fr; }
            .metrics, .distribution { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body>
<header>
    <div>
        <strong>基础设施 / 应急保障</strong>
        <p class="endpoint">GET /api/cockpit/v1/infrastructure/emergency-support</p>
    </div>
    <span id="updated-at"></span>
</header>
<main>
    <section class="panel">
        <div class="filters">
            <div>
                <label for="fixture">数据状态</label>
                <select id="fixture">
                    <option value="complete">完整资源</option>
                    <option value="partial">部分缺失</option>
                    <option value="associated">关联报警 / 工单</option>
                </select>
            </div>
            <div>
                <label for="category">类别</label>
                <select id="category">
                    <option value="">全部</option>
                    <option value="EMERGENCY_RESOURCE">应急资源</option>
                    <option value="HAZARD_SOURCE">危险源</option>
                    <option value="PROTECTION_TARGET">防护目标</option>
                </select>
            </div>
            <div>
                <label for="area">区域</label>
                <select id="area">
                    <option value="">全部</option>
                    <option value="CN">CN</option>
                    <option value="TC">TC</option>
                    <option value="UNKNOWN">UNKNOWN</option>
                </select>
            </div>
            <button id="refresh" type="button">手动刷新</button>
        </div>
    </section>
    <section class="panel">
        <div class="metrics">
            <div class="metric"><strong id="emergency-count">0</strong>应急资源</div>
            <div class="metric"><strong id="hazard-count">0</strong>危险源</div>
            <div class="metric"><strong id="protection-count">0</strong>防护目标</div>
        </div>
        <div class="metrics" style="margin-top:8px">
            <div class="state ready" id="state-emergency"><strong>READY</strong><span>应急资源</span></div>
            <div class="state ready" id="state-hazard"><strong>READY</strong><span>危险源</span></div>
            <div class="state ready" id="state-protection"><strong>READY</strong><span>防护目标</span></div>
        </div>
        <div class="map" id="map"></div>
        <div class="distribution">
            <div>
                <strong>行业分布</strong>
                <div id="industry-distribution"></div>
            </div>
            <div>
                <strong>区域分布</strong>
                <div id="area-distribution"></div>
            </div>
        </div>
        <table>
            <thead>
            <tr><th>对象</th><th>类别</th><th>行业</th><th>区域</th><th>预警</th><th>报警</th><th>工单</th></tr>
            </thead>
            <tbody id="items"></tbody>
        </table>
    </section>
</main>
<script>
    const objects = {
        complete: [
            item("ER-WS-001", "EMERGENCY_RESOURCE", "WATER_SUPPLY", "CN", 20, 24, 0, 0, 0),
            item("ER-GAS-001", "EMERGENCY_RESOURCE", "GAS", "CN", 32, 66, 0, 0, 0),
            item("HS-WS-001", "HAZARD_SOURCE", "WATER_SUPPLY", "TC", 62, 34, 0, 0, 0),
            item("PT-DR-001", "PROTECTION_TARGET", "DRAINAGE", "UNKNOWN", 72, 72, 0, 0, 0)
        ],
        partial: [
            item("ER-WS-002", "EMERGENCY_RESOURCE", "WATER_SUPPLY", "CN", 20, 30, 0, 0, 0),
            item("PT-GAS-001", "PROTECTION_TARGET", "GAS", "CN", 70, 42, 0, 0, 0)
        ],
        associated: [
            item("ER-WS-001", "EMERGENCY_RESOURCE", "WATER_SUPPLY", "CN", 20, 24, 2, 1, 3),
            item("HS-WS-001", "HAZARD_SOURCE", "WATER_SUPPLY", "TC", 58, 36, 1, 1, 1),
            item("PT-DR-001", "PROTECTION_TARGET", "DRAINAGE", "UNKNOWN", 76, 70, 0, 0, 1)
        ]
    };
    const states = {
        complete: ["READY", "READY", "READY"],
        partial: ["READY", "UNAVAILABLE", "EMPTY"],
        associated: ["READY", "READY", "READY"]
    };

    function item(code, category, industry, area, x, y, warning, alarm, workOrder) {
        return {code, category, industry, area, x, y, warning, alarm, workOrder};
    }

    function currentObjects() {
        const category = document.getElementById("category").value;
        const area = document.getElementById("area").value;
        return objects[document.getElementById("fixture").value].filter(function(object) {
            return (!category || object.category === category) && (!area || object.area === area);
        });
    }

    function render() {
        const fixture = document.getElementById("fixture").value;
        const selected = currentObjects();
        const counts = {
            EMERGENCY_RESOURCE: 0,
            HAZARD_SOURCE: 0,
            PROTECTION_TARGET: 0
        };
        selected.forEach(function(object) { counts[object.category]++; });
        document.getElementById("emergency-count").textContent = counts.EMERGENCY_RESOURCE;
        document.getElementById("hazard-count").textContent = counts.HAZARD_SOURCE;
        document.getElementById("protection-count").textContent = counts.PROTECTION_TARGET;

        const stateElements = ["state-emergency", "state-hazard", "state-protection"];
        states[fixture].forEach(function(state, index) {
            const element = document.getElementById(stateElements[index]);
            element.className = "state " + state.toLowerCase();
            element.querySelector("strong").textContent = state;
        });

        const map = document.getElementById("map");
        map.innerHTML = "";
        selected.forEach(function(object) {
            const point = document.createElement("div");
            point.className = "point " + object.category.toLowerCase();
            point.style.left = object.x + "%";
            point.style.top = object.y + "%";
            point.dataset.code = object.code;
            point.title = object.code + " / " + object.industry + " / " + object.area;
            map.appendChild(point);
        });

        renderDistribution("industry-distribution", groupBy(selected, "industry"));
        renderDistribution("area-distribution", groupBy(selected, "area"));

        document.getElementById("items").innerHTML = selected.map(function(object) {
            return "<tr><td>" + object.code + "</td><td>" + categoryName(object.category) +
                    "</td><td>" + object.industry + "</td><td>" + object.area +
                    "</td><td>" + object.warning + "</td><td>" + object.alarm +
                    "</td><td>" + object.workOrder + "</td></tr>";
        }).join("");

        const summary = selected.reduce(function(total, object) {
            total.warning += object.warning;
            total.alarm += object.alarm;
            total.workOrder += object.workOrder;
            return total;
        }, {warning: 0, alarm: 0, workOrder: 0});
        document.getElementById("updated-at").textContent =
                "事件摘要 " + summary.warning + " / " + summary.alarm + " / " + summary.workOrder +
                "，更新于 " + new Date().toLocaleTimeString("zh-CN");
    }

    function groupBy(values, key) {
        return values.reduce(function(result, value) {
            result[value[key]] = (result[value[key]] || 0) + 1;
            return result;
        }, {});
    }

    function renderDistribution(id, groups) {
        const element = document.getElementById(id);
        element.innerHTML = "";
        Object.keys(groups).forEach(function(key) {
            const row = document.createElement("div");
            row.innerHTML = "<div class='row'><span>" + key + "</span><span>" + groups[key] + "</span></div>" +
                    "<div class='bar'><span style='width:" + (groups[key] * 20) + "%'></span></div>";
            element.appendChild(row);
        });
        if (!Object.keys(groups).length) {
            element.innerHTML = "<div class='row'><span>EMPTY</span><span>0</span></div>";
        }
    }

    function categoryName(category) {
        return {
            EMERGENCY_RESOURCE: "应急资源",
            HAZARD_SOURCE: "危险源",
            PROTECTION_TARGET: "防护目标"
        }[category];
    }

    document.getElementById("fixture").addEventListener("change", render);
    document.getElementById("category").addEventListener("change", render);
    document.getElementById("area").addEventListener("change", render);
    document.getElementById("refresh").addEventListener("click", render);
    render();
</script>
</body>
</html>