<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> <script> var floList = []; $(function () { $("#sysSubText").text(pageAct.sysSubName); 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>