algorithms.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>算法中心 — 南宁低空政务应用管理平台</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
</head>
<body>
    <header class="header" id="topHeader"></header>
    <main class="main-content">
        <div class="content-page">
            <div class="sub-nav">
                <a class="sub-item" href="fleet.html">设备资产</a>
                <a class="sub-item active" href="algorithms.html">算法中心</a>
                <a class="sub-item" href="events.html">事件看板</a>
                <a class="sub-item" href="camera.html">监控看板</a>
            </div>
            <div class="page-body" id="pageBody"></div>
        </div>
    </main>

    <script src="lib/db.js"></script>
    <script src="lib/ui.js"></script>
    <script>
    (function () {
        "use strict";
        var doc = document;
        var F = UI.fmt;
        var state = { cat: "全部" };

        function render() {
            var items = Db.algorithms.filter(function (a) { return state.cat === "全部" || a.cat === state.cat; });
            var cats = ["全部"].concat(Db.ALGO_CATS);
            var counts = {};
            Db.algorithms.forEach(function (a) { counts[a.cat] = (counts[a.cat] || 0) + 1; });

            var cards = items.map(function (a) {
                var on = a.status === "已启用";
                return (
                    '<div class="drone-card" data-id="' + a.id + '">' +
                    '  <div class="dc-head">' +
                    '    <div class="dc-ic" style="font-size:22px">' + (a.cat === "公共安全监测" ? "🛡️" : a.cat === "道路交通监测" ? "🚗" : a.cat === "城市管理执法" ? "🏛️" : "🏗️") + "</div>" +
                    '    <div><div class="dc-title">' + F.esc(a.name) + '</div><div class="dc-sub mono">' + a.id + "</div></div>" +
                    "  </div>" +
                    '  <div class="dc-row"><span class="k">类别</span><span class="v" style="color:' + Db.ALGO_CAT_COLOR[a.cat] + '">' + a.cat + "</span></div>" +
                    '  <div class="dc-row"><span class="k">状态</span><span class="v">' + (on ? "✅ 已启用" : "⏸ 已停用") + "</span></div>" +
                    '  <div style="font-size:11px;color:#7a9ab5;line-height:1.6">' + F.esc(a.desc) + "</div>" +
                    '  <div class="dc-foot">' +
                    '    <button type="button" class="btn btn-sm" data-act="toggle" data-id="' + a.id + '">' + (on ? "停用" : "启用") + "</button>" +
                    '    <button type="button" class="btn btn-sm" data-act="run" data-id="' + a.id + '"' + (on ? "" : " disabled") + ">▶ 试运行</button>" +
                    "  </div></div>"
                );
            }).join("");

            doc.getElementById("pageBody").innerHTML =
                '<div class="nn-panel">' +
                '  <div class="nn-panel-head"><span class="nn-panel-title">🧠 算法中心</span><span class="nn-panel-title-en">AI Algorithms</span>' +
                '    <span style="flex:1"></span><div style="display:flex;gap:6px">' +
                cats.map(function (c) {
                    var n = c === "全部" ? Db.algorithms.length : (counts[c] || 0);
                    return '<button type="button" class="f-chip' + (state.cat === c ? " on" : "") + '" data-cat="' + c + '">' + c + " (" + n + ")</button>";
                }).join("") +
                "  </div></div>" +
                '  <div class="nn-panel-body"><div class="fleet-grid">' + cards + "</div></div>" +
                "</div>";

            doc.querySelectorAll(".f-chip[data-cat]").forEach(function (c) {
                c.addEventListener("click", function () { state.cat = c.dataset.cat; render(); });
            });
            doc.querySelectorAll("[data-act]").forEach(function (el) {
                el.addEventListener("click", function (e) {
                    e.stopPropagation();
                    var a = Db.algorithms.find(function (x) { return x.id === el.dataset.id; });
                    if (!a) return;
                    if (el.dataset.act === "toggle") {
                        a.status = a.status === "已启用" ? "已停用" : "已启用";
                        Db.save();
                        UI.toast(a.status === "已启用" ? "算法已启用" : "算法已停用", a.id + " " + a.name, a.status === "已启用" ? "ok" : "warn");
                        render();
                    }
                    if (el.dataset.act === "run") {
                        UI.toast("试运行完成", a.name + ":检测流程正常,未发现异常(演示)", "ok");
                    }
                });
            });
            doc.querySelectorAll(".drone-card[data-id]").forEach(function (card) {
                card.addEventListener("click", function (e) {
                    if (e.target.closest("[data-act]")) return;
                    var a = Db.algorithms.find(function (x) { return x.id === card.dataset.id; });
                    if (a) {
                        UI.modal(
                            a.name,
                            '<div style="display:flex;flex-direction:column;gap:10px;font-size:12.5px">' +
                            '  <div class="ev-detail-row"><span class="k">算法编号</span><span class="v mono">' + a.id + "</span></div>" +
                            '  <div class="ev-detail-row"><span class="k">所属类别</span><span class="v">' + a.cat + "</span></div>" +
                            '  <div class="ev-detail-row"><span class="k">状态</span><span class="v">' + a.status + "</span></div>" +
                            '  <div style="color:#7a9ab5;line-height:1.8">' + F.esc(a.desc) + "</div>" +
                            "</div>",
                            '<button type="button" class="btn" data-act="close">关闭</button>'
                        );
                    }
                });
            });
        }

        UI.renderNav("fleet");
        render();
    })();
    </script>
</body>
</html>