80 lines
		
	
	
		
			2.5 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			80 lines
		
	
	
		
			2.5 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<div class="container-fluid px-0">
 | 
						|
  <div class="row no-gutters" style="min-height: 90vh;">
 | 
						|
    <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>
 |