ibms-MCUT/Frontend/_systemMonitor.html

<div class="container-fluid px-0">
    <div class="row no-gutters" style="height: calc(100vh - 72px)">
        <div class="col-1">
            <aside id="sysMonNavbar" class="w-100 yt-navbar yt-left-navbar h-100 mt-0">
                <div class="yt-navbar-content">
                    <ul id="sysMonBtnList"></ul>
                </div>
            </aside>
        </div>
        <div class="col-11">
            <div class="container-fluid">
                <div class="row bg-dark align-items-center">
                    <label id="sysSubText" class="mx-5 mb-0 fs-1-05"></label>
                    <div class="btn-group my-1" id="floList"></div>
                </div>
            </div>
            <main id="js-page-content" role="main" class="page-content"></main>
        </div>
    </div>
</div>

<script>
    var floList = [];

    $(function () {
        $("#sysSubText").text(pageAct.buiName + "/" + pageAct.sysSubName);
        getSysMonBtnList();
        getFloList();
    });

    onEvent("yt:tab:change", "[name=floBtn]", function () {
        $.each(tolSubList, (idx, sub) => {
            sub.unsubscribeAll();
            sub.detach();
        });
        tolSubList = [];
        pageAct.floTag = $(this).data("id");
        pageAct.floGuid = $(this).data("guid");
        if ($(this).data("id") == "all") {
            pageAct.floTag = null;
            pageAct.floGuid = null;
            $("#js-page-content").load("_sysMonAll.html", loadCallback);
        } else {
            $("#js-page-content").load("_sysMonFloor.html", loadCallback);
        }
    });

    onEvent("change", "#buiList", function (e, actEle) {
        getFloList();
    });

    function getFloList() {
        let url = baseApiUrl + "/api/Device/GetFloor";
        let sendData = {
            building_tag: pageAct.buiTag,
            sub_system_tag: pageAct.sysSubTag,
        };
        objSendData.Data = sendData;
        ytAjax = new YourTeam.Ajax(
            url,
            objSendData,
            function (res) {
                if (!res || res.code != "0000" || !res.data) {
                } else {
                    let strHtml = `<button name="floBtn" data-id="all" type="button" class="btn btn-secondary waves-effect waves-themed btn-sm-2" data-tabname="floor" data-target="all">總覽</button>`;
                    $.each(res.data, (index, floObj) => {
                        strHtml += `<button name="floBtn" data-id="${floObj.floor_tag}" data-guid="${floObj.floor_guid}" class="btn btn-secondary waves-effect waves-themed btn-sm-2" data-tabname="floor" data-target="${floObj.floor_tag}">${floObj.floor_tag}</button>`;
                    });
                    $("#floList").html(strHtml);
                    floList = res.data;

                    var ytTab = new YT.Tab({ tabName: "floor" });
                }
            },
            null,
            "POST"
        ).send();
    }
</script>