ibms-dome/Frontend/_systemMonitor.html

<style>
    [id^=yt_tooltip] {
        width: 450px;
    }    
</style>
<div class="container-fluid">
    <div class="row bg-dark">
        <h1 class="p-2 mx-5 mb-0">電錶系統</h1>
        <div class="btn-group my-2" id="floList">
            
        </div>

    </div>
</div>
<main id="js-page-content" role="main" class="page-content">
   
</main>

<script>
    var floList = [];

    $(function () {
        getFloList();
    })

    onEvent("yt:tab:change", "[name=floBtn]", function () {
        pageAct.floTag = $(this).data("id");
        if ($(this).data("id") == "all") {
            pageAct.floTag = 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 };
        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" data-tabname="floor" data-target="all">總覽</button>`;
                $.each(res.data, (index, floObj) => {
                    strHtml += `<button name="floBtn" data-id="${floObj.floor_tag}" class="btn btn-secondary waves-effect waves-themed" 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>