rtu_linux_services/web-ui.service/web/static/js/page1.js

var cpuChart = null;
var memChart = null;
var diskChart = null;
var sysStatusTimer = null;
var resizeHandler = null;
var sysAbortController = null;

function getSystemInfo() {
    sysAbortController && sysAbortController.abort();
    sysAbortController = new AbortController();
    fetch("/api/system/info", { signal: sysAbortController.signal })
        .then(function (r) {
            if (!r.ok) throw new Error("HTTP " + r.status);
            return r.json();
        })
        .then(function (d) {
            dashSetUsage("dk-cpu", d.cpu_usage != null ? Number(d.cpu_usage) : null);
            dashSetUsage("dk-mem", d.mem_percent != null ? Number(d.mem_percent) : null);
            dashSetUsage("dk-disk", d.disk_percent != null ? Number(d.disk_percent) : null);
            if (!cpuChart || !memChart || !diskChart) {
                return;
            }
            cpuChart.setOption({
                graphic: [
                    {
                        type: "text",
                        left: "center",
                        top: "75%",
                        style: {
                            text:
                                (d.cpu_cores || "--") +
                                "核 " +
                                (d.cpu_freq || "--") +
                                "MHz  温度" +
                                (d.cpu_temp || "--"),
                            fill: "#aaa",
                            fontSize: 15,
                        },
                    },
                ],
                series: [
                    {
                        data: [
                            { value: Number((d.cpu_usage != null ? d.cpu_usage : 0).toFixed(1)) },
                        ],
                    },
                ],
            });
            memChart.setOption({
                graphic: [
                    {
                        type: "text",
                        left: "center",
                        top: "75%",
                        style: {
                            text: (d.mem_used || "--") + " / " + (d.mem_total || "--"),
                            fill: "#aaa",
                            fontSize: 15,
                        },
                    },
                ],
                series: [{ data: [{ value: d.mem_percent != null ? d.mem_percent : 0 }] }],
            });
            diskChart.setOption({
                title: {
                    text: d.disk_percent + "%",
                    subtext: (d.disk_used || "--") + " / " + (d.disk_total || "--"),
                    left: "center",
                    top: "38%",
                    textStyle: {
                        fontSize: 38,
                        fontWeight: "bold",
                    },
                    subtextStyle: {
                        fontSize: 15,
                    },
                },
                series: [
                    {
                        data: [
                            { value: d.disk_percent != null ? d.disk_percent : 0, name: "已使用" },
                            { value: 100 - d.disk_percent, name: "剩余" },
                        ],
                    },
                ],
            });
        })
        .catch(function (e) {
            if (e.name !== "AbortError") {
                console.error("system info failed:", e);
            }
        });
}

function gaugeOption() {
    return {
        series: [
            {
                type: "gauge",
                radius: "95%",
                center: ["50%", "55%"],
                min: 0,
                max: 100,
                startAngle: 210,
                endAngle: -30,
                axisLine: {
                    lineStyle: {
                        width: 22,
                    },
                },
                progress: {
                    show: true,
                    width: 22,
                },
                pointer: { show: false },
                axisTick: { show: false },
                splitLine: { show: false },
                axisLabel: { show: false },
                detail: {
                    fontSize: 42,
                    fontWeight: "bold",
                    offsetCenter: [0, "0%"],
                    formatter: "{value}%",
                },
                title: { show: false },
                data: [{ value: 0 }],
            },
        ],
    };
}

function getLoadInfo() {
    fetch("/api/system/loadAverage")
        .then(function (r) {
            if (!r.ok) {
                throw new Error("HTTP " + r.status);
            }
            return r.json();
        })
        .then(function (data) {
            ["load1m", "load5m", "load15m", "runQueue", "bootTime", "uptime"].forEach(
                function (id) {
                    return setText(id, data[id], "page1");
                }
            );
            dashSetUptime(data ? data.uptime : null);
        })
        .catch(function (e) {
            console.error("load info failed:", e);
            ["load1m", "load5m", "load15m", "runQueue", "bootTime", "uptime"].forEach(
                function (id) {
                    return setText(id, null, "page1");
                }
            );
            dashSetUptime(null);
        });
}

function getServiceInfo() {
    fetch("/api/system/serviceStatus")
        .then(function (r) {
            if (!r.ok) {
                throw new Error("HTTP " + r.status);
            }
            return r.json();
        })
        .then(function (data) {
            [
                "var1",
                "var2",
                "var3",
                "var4",
                "var5",
                "var6",
                "var7",
                "var8",
                "var9",
                "var10",
                "var11",
                "var22",
                "var33",
                "var44",
                "var55",
                "var66",
                "var77",
                "var88",
                "var99",
            ].forEach(function (id) {
                return setText(id, data[id], "page1");
            });
            dashRenderStatus(data);
        })
        .catch(function (e) {
            console.error("getAllServiceStatus() failed:", e);
            [
                "var1",
                "var2",
                "var3",
                "var4",
                "var5",
                "var6",
                "var7",
                "var8",
                "var9",
                "var10",
                "var11",
                "var22",
                "var33",
                "var44",
                "var55",
                "var66",
                "var77",
                "var88",
                "var99",
            ].forEach(function (id) {
                return setText(id, null, "page1");
            });
            dashRenderStatus(null);
        });
}

function startSysStatusRefresh() {
    if (sysStatusTimer) return;
    getSystemInfo();
    getLoadInfo();
    getServiceInfo();
    sysStatusTimer = setInterval(function () {
        getSystemInfo();
        getLoadInfo();
        getServiceInfo();
    }, 5000);
}

function stopSysStatusRefresh() {
    if (sysStatusTimer) {
        clearInterval(sysStatusTimer);
        sysStatusTimer = null;
    }
}

function resizeSysCharts() {
    cpuChart && cpuChart.resize();
    memChart && memChart.resize();
    diskChart && diskChart.resize();
}
var serviceNames = {
    "yfkj-networkd.service": "设备自动联网",
    "yfkj-timesyncd.service": "系统时间同步",
    "yfkj-gnss.service": "地理坐标定位",
    "yfkj-camera-capture.service": "相机图像采集",
    "yfkj-sshd-mqtt-bridge.service": "远程运维通道",
    "yfkj-app-install.service": "应用安装卸载",
    "yfkj-web-ui.service": "本地配置管理",
    "yfkj-frp-client.service": "公网配置管理",
    "yfkj-upgrade.service": "开机自动升级",
};

function switchServiceVersion(service, action) {
    var name = serviceNames[service] || service;
    var msg =
        action === "factory"
            ? "确认将【" +
              name +
              "】恢复到出厂版本吗？\n\n警告: 切换过程中服务会自动重启，请勿断开电源！"
            : "确认将【" +
              name +
              "】回退到上一版本吗？\n\n警告: 切换过程中服务会自动重启，请勿断开电源！";
    if (!confirm(msg)) {
        return;
    }
    var password = prompt("请输入操作密码：");
    if (password === null) {
        return;
    }
    password = password.trim();
    fetch("/api/service/version/switch", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            service: service,
            action: action,
            password: password,
        }),
    })
        .then(function (r) {
            return r.json();
        })
        .then(function (d) {
            alert(
                "【" +
                    name +
                    "】\n\n" +
                    (d.status == "ok" ? "版本切换成功" : "版本切换失败：" + d.message)
            );
        })
        .catch(function (e) {
            alert("【" + name + "】\n\n请求失败：" + e.message);
        });
}

function switchAutoUpgrade(event, action) {
    var enable = action.startsWith("enable");
    var msg = enable ? "确认要启用 【开机自动升级】 吗？" : "确认要关闭 【开机自动升级】 吗？";
    if (!confirm(msg)) {
        return;
    }
    var password = prompt("请输入操作密码：");
    if (password === null) {
        return;
    }
    password = password.trim();
    var btn = event.currentTarget;
    btn.disabled = true;
    fetch("/api/service/control", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            name: "yfkj-upgrade.service",
            action: action,
            secret: password,
        }),
    })
        .then(function (r) {
            if (!r.ok) {
                return r.text().then(function (t) {
                    throw new Error(t);
                });
            }
            return r.json();
        })
        .then(function (d) {
            if (d.ok) {
                alert("【开机自动升级】\n\n" + (enable ? "已启用" : "已禁用"));
            } else {
                alert("操作失败");
            }
        })
        .catch(function (e) {
            alert("【开机自动升级】\n\n请求失败: " + e.message);
        })
        .finally(function () {
            btn.disabled = false;
        });
}

function downloadUpgradeLogFile(event) {
    var btn = event.currentTarget;
    btn.disabled = true;
    fetch("/api/upgrade/logfile")
        .then(function (r) {
            if (!r.ok) {
                throw new Error("HTTP " + r.status);
            }
            var disposition = r.headers.get("Content-Disposition");
            var filename = "upgrade.log.tar.gz";
            if (disposition) {
                var match = disposition.match(/filename="?([^";]+)"?/);
                if (match) {
                    filename = match[1];
                }
            }
            return r.blob().then(function (blob) {
                return { blob: blob, filename: filename };
            });
        })
        .then(function (res) {
            downloadBlobFile(res.blob, res.filename);
            alert("下载成功");
        })
        .catch(function (e) {
            console.error("download failed:", e);
            alert("下载失败: " + e.message);
        })
        .finally(function () {
            btn.disabled = false;
            btn.textContent = "下载升级日志";
        });
}

function startPublicAccess(event) {
    if (!confirm("确定开启公网访问吗？")) {
        return;
    }
    var password = prompt("请输入操作密码：");
    if (password === null) {
        return;
    }
    password = password.trim();
    var btn = event.currentTarget;
    btn.disabled = true;
    fetch("/api/service/control", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            name: "yfkj-frp-client.service",
            action: "start",
            secret: password,
        }),
    })
        .then(function (r) {
            if (!r.ok) {
                return r.text().then(function (t) {
                    throw new Error(t);
                });
            }
            return r.json();
        })
        .then(function (d) {
            alert(d.ok ? "开启公网访问成功" : "开启公网访问失败");
        })
        .catch(function (e) {
            alert("开启公网访问失败: " + e.message);
        })
        .finally(function () {
            btn.disabled = false;
        });
}

function stopPublicAccess(event) {
    if (!confirm("确定关闭公网访问吗？")) {
        return;
    }
    var password = prompt("请输入操作密码：");
    if (password === null) {
        return;
    }
    password = password.trim();
    var btn = event.currentTarget;
    btn.disabled = true;
    fetch("/api/service/control", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            name: "yfkj-frp-client.service",
            action: "stop",
            secret: password,
        }),
    })
        .then(function (r) {
            if (!r.ok) {
                return r.text().then(function (t) {
                    throw new Error(t);
                });
            }
            return r.json();
        })
        .then(function (d) {
            alert(d.ok ? "关闭公网访问成功" : "关闭公网访问失败");
        })
        .catch(function (e) {
            alert("关闭公网访问失败: " + e.message);
        })
        .finally(function () {
            btn.disabled = false;
        });
}

function initChart(id, option) {
    var dom = document.getElementById(id);
    if (!dom) {
        return null;
    }
    var chart = echarts.init(dom);
    chart.setOption(option);
    return chart;
}

function initPage1() {
    dashBuildRows();
    cpuChart = initChart("cpu-chart", gaugeOption());
    memChart = initChart("mem-chart", gaugeOption());
    diskChart = initChart("disk-chart", {
        title: {
            text: "0%",
            subtext: "-- / --",
            left: "center",
            top: "38%",
            textStyle: {
                fontSize: 38,
                fontWeight: "bold",
            },
            subtextStyle: {
                fontSize: 15,
            },
        },
        series: [
            {
                type: "pie",
                radius: ["65%", "85%"],
                label: { show: false },
                data: [
                    { value: 0, name: "已使用" },
                    { value: 100, name: "剩余" },
                ],
            },
        ],
    });
    resizeHandler = resizeSysCharts;
    window.addEventListener("resize", resizeHandler);
    waitChartResize();
    startSysStatusRefresh();
}

function waitChartResize(count) {
    if (count === undefined) {
        count = 0;
    }
    resizeSysCharts();
    var dom = document.getElementById("cpu-chart");
    if (dom && dom.clientWidth > 0 && dom.clientHeight > 0) {
        return;
    }
    dom = document.getElementById("mem-chart");
    if (dom && dom.clientWidth > 0 && dom.clientHeight > 0) {
        return;
    }
    dom = document.getElementById("disk-chart");
    if (dom && dom.clientWidth > 0 && dom.clientHeight > 0) {
        return;
    }
    if (count < 50) {
        setTimeout(function () {
            waitChartResize(count + 1);
        }, 100);
    }
}

function exitPage1() {
    sysAbortController && sysAbortController.abort();
    sysAbortController = null;
    stopSysStatusRefresh();
    if (resizeHandler) {
        window.removeEventListener("resize", resizeHandler);
        resizeHandler = null;
    }
    cpuChart && cpuChart.dispose();
    memChart && memChart.dispose();
    diskChart && diskChart.dispose();
    cpuChart = null;
    memChart = null;
    diskChart = null;
}

// ===================== 运行总览看板 (仅移动端显示) =====================

// 看板模块: 展示名 / 服务单元 / 状态字段 / 版本字段 (与 /api/system/serviceStatus 一一对应)
var dashModules = [
    { name: "设备自动联网", unit: "networkd.service", status: "var1", version: "var11" },
    { name: "同步系统时间", unit: "timesyncd.service", status: "var2", version: "var22" },
    { name: "地理坐标定位", unit: "gnss.service", status: "var3", version: "var33" },
    { name: "远程运维通道", unit: "sshd-mqtt-bridge.service", status: "var4", version: "var44" },
    { name: "相机图像采集", unit: "camera-capture.service", status: "var5", version: "var55" },
    { name: "应用安装卸载", unit: "app-install.service", status: "var6", version: "var66" },
    { name: "本地配置管理", unit: "web-ui.service", status: "var7", version: "var77" },
    { name: "公网配置管理", unit: "frp-client.service", status: "var8", version: "var88" },
    { name: "设备自动升级", unit: "upgrade.service", status: "var9", version: "var99" },
    { name: "开机任务执行", unit: "local-startup.service", status: "var10", version: "var1010" }
];

// 首次进入页面时生成模块卡片骨架, 之后仅原地更新, 避免每次刷新整块重建造成闪烁
function dashBuildRows() {
    var grid = document.getElementById("dash-grid");
    if (!grid || grid.children.length) {
        return;
    }
    var html = "";
    dashModules.forEach(function (m, i) {
        html +=
            '<div class="dash-mod" id="dash-mod-' + i + '">' +
            '<div class="dash-mod-head"><span class="dash-name">' + m.name + '</span>' +
            '<span class="dash-badge" id="dash-badge-' + i + '"><span class="dash-dot" id="dash-dot-' + i + '"></span><span id="dash-text-' + i + '">--</span></span></div>' +
            '<div class="dash-unit">' + m.unit + "</div>" +
            '<div class="dash-info" id="dash-info-' + i + '">--</div>' +
            "</div>";
    });
    grid.innerHTML = html;
}

// 用 /api/system/serviceStatus 的数据刷新模块状态与"服务正常"计数
// data 为 null 时(接口失败)整块置灰为 "--"
function dashRenderStatus(data) {
    var okCount = 0;
    dashModules.forEach(function (m, i) {
        var v = data ? data[m.status] : null;
        var level = "na";
        var text = "--";
        if (v && typeof v === "object") {
            level = v.level || "na";
            text = v.text || "--";
        }
        // ok=运行中, info=一次性任务已完成, 两者都视为正常
        if (level === "ok" || level === "info") {
            okCount++;
        }
        var mod = document.getElementById("dash-mod-" + i);
        var dot = document.getElementById("dash-dot-" + i);
        var badge = document.getElementById("dash-badge-" + i);
        var txt = document.getElementById("dash-text-" + i);
        var info = document.getElementById("dash-info-" + i);
        if (mod) {
            mod.className = "dash-mod dash-" + level;
        }
        if (badge) {
            badge.className = "dash-badge dash-" + level;
        }
        if (dot) {
            dot.className = "dash-dot dash-" + level;
        }
        if (txt) {
            txt.textContent = text;
        }
        if (info) {
            var ver = data ? data[m.version] : null;
            info.textContent = ver && typeof ver === "object" ? ver.text || "--" : ver || "--";
        }
    });
    setText(
        "dk-svc",
        {
            level: okCount === dashModules.length ? "ok" : "warn",
            text: okCount + " / " + dashModules.length
        },
        "page1"
    );
    var foot = document.getElementById("dash-updated");
    if (foot) {
        foot.textContent = data
            ? "数据更新于 " + new Date().toTimeString().slice(0, 8)
            : "数据获取失败, 稍后自动重试";
    }
}

// 更新占用率指标: 数值 + 迷你进度条; >=85% 红色(hot), >=60% 黄色(warm), 其余绿色
function dashSetUsage(id, pct) {
    var el = document.getElementById(id);
    if (!el) {
        return;
    }
    var bar = document.getElementById(id + "-bar");
    if (pct == null || isNaN(pct)) {
        el.textContent = "--";
        el.className = "dash-kpi-value";
        if (bar) {
            bar.style.width = "0";
        }
        return;
    }
    var tone = pct >= 85 ? " hot" : pct >= 60 ? " warm" : "";
    el.textContent = pct.toFixed(1) + "%";
    el.className = "dash-kpi-value" + tone;
    if (bar) {
        bar.style.width = Math.min(100, pct) + "%";
        bar.className = "dash-bar-fill" + tone;
    }
}

// 更新"持续开机"KPI, 仅显示文本
function dashSetUptime(text) {
    var el = document.getElementById("dk-uptime");
    if (el) {
        el.textContent = text || "--";
    }
}