666 lines
		
	
	
		
			22 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			666 lines
		
	
	
		
			22 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<main id="js-page-content" role="main" class="page-content">
 | 
						|
  <h1 class="p-2 mb-0">歷史資料</h1>
 | 
						|
 | 
						|
  <div class="row">
 | 
						|
    <div class="col-sm-12 col-xl-2">
 | 
						|
      <div class="rounded border border-white">
 | 
						|
        <div class="d-flex position-relative py-3 px-4">
 | 
						|
          <i class="fal fa-search color-success-700 position-absolute pos-left fs-lg px-3 py-2 mt-1 ml-4"></i>
 | 
						|
          <input type="text"
 | 
						|
                 id="js_nested_list_filter"
 | 
						|
                 class="form-control shadow-inset-1 pl-6 border-success"
 | 
						|
                 placeholder="輸入兩字以上" />
 | 
						|
        </div>
 | 
						|
        <!-- nav-menu-reset will reset the font colors -->
 | 
						|
        <ul id="js_nested_list"
 | 
						|
            class="nav-menu nav-menu-reset nav-menu-compact mb-sm-4 mb-md-0 rounded border border-white"
 | 
						|
            data-nav-accordion="true"></ul>
 | 
						|
        <div class="filter-message js-filter-message m-0 text-left pl-4 py-3 fw-500"></div>
 | 
						|
      </div>
 | 
						|
    </div>
 | 
						|
    <div class="col-sm-12 col-xl-10">
 | 
						|
      <div class="row bg-dark p-2">
 | 
						|
        <div>
 | 
						|
          <div class="py-2 col-12" id="his_building">
 | 
						|
            <div class="item btn-group btn-group-toggle"
 | 
						|
                 data-toggle="buttons"></div>
 | 
						|
          </div>
 | 
						|
        </div>
 | 
						|
      </div>
 | 
						|
      <div class="row bg-dark p-2 mb-5 align-items-center">
 | 
						|
        <div class="col-auto">
 | 
						|
          <div class="btn-group">
 | 
						|
            <button type="button"
 | 
						|
                    onclick="setDateType('day', this)"
 | 
						|
                    class="btn btn-secondary waves-effect waves-themed">
 | 
						|
              日期
 | 
						|
            </button>
 | 
						|
            <button type="button"
 | 
						|
                    onclick="setDateType('range', this)"
 | 
						|
                    class="btn btn-secondary waves-effect waves-themed">
 | 
						|
              區間
 | 
						|
            </button>
 | 
						|
            <button type="button"
 | 
						|
                    onclick="setDateType('month', this)"
 | 
						|
                    class="btn btn-secondary waves-effect waves-themed">
 | 
						|
              月
 | 
						|
            </button>
 | 
						|
          </div>
 | 
						|
        </div>
 | 
						|
        <div class="col-auto">
 | 
						|
          <div class="btn-group">
 | 
						|
            <button type="button"
 | 
						|
                    onclick="setDateType('today', this)"
 | 
						|
                    class="btn btn-secondary waves-effect waves-themed">
 | 
						|
              今天
 | 
						|
            </button>
 | 
						|
            <button type="button"
 | 
						|
                    onclick="setDateType('ytd', this)"
 | 
						|
                    class="btn btn-secondary waves-effect waves-themed">
 | 
						|
              昨天
 | 
						|
            </button>
 | 
						|
          </div>
 | 
						|
        </div>
 | 
						|
        <div class="col-auto">
 | 
						|
          <div class="form-group">
 | 
						|
            <input class="form-control flatpickr flatpickr-input selectDate"
 | 
						|
                   id="his_startdate"
 | 
						|
                   data-val=""
 | 
						|
                   type="date"
 | 
						|
                   name="date"
 | 
						|
                   value="" />
 | 
						|
            <input class="form-control flatpickr flatpickr-input selectMonth"
 | 
						|
                   id="getmonth"
 | 
						|
                   type="month"
 | 
						|
                   style="display: none" />
 | 
						|
          </div>
 | 
						|
        </div>
 | 
						|
        <div class="col-auto" id="his_enddate" style="display: none">
 | 
						|
          <div class="form-group">
 | 
						|
            <input class="form-control flatpickr flatpickr-input selectDate"
 | 
						|
                   type="date"
 | 
						|
                   data-val=""
 | 
						|
                   name="date"
 | 
						|
                   value="" />
 | 
						|
          </div>
 | 
						|
        </div>
 | 
						|
        <div class="col-auto">
 | 
						|
          <a href="#" onclick="searchDate()" class="btn btn-info">查詢</a>
 | 
						|
          <a href="#"
 | 
						|
             onclick="exportExcel()"
 | 
						|
             class="btn btn-info waves-effect waves-themed">
 | 
						|
            <span class="fal fa-file-excel mr-1"></span>
 | 
						|
            匯出
 | 
						|
          </a>
 | 
						|
        </div>
 | 
						|
      </div>
 | 
						|
 | 
						|
      <div class="row-cols-1 mb-2">
 | 
						|
        <div id="devPointsList" class="btn-group"></div>
 | 
						|
      </div>
 | 
						|
 | 
						|
      <div>
 | 
						|
        <div class="frame-wrap">
 | 
						|
          <table id="historyTable"
 | 
						|
                 class="table table-bordered table-striped text-center m-0 w-100"></table>
 | 
						|
        </div>
 | 
						|
      </div>
 | 
						|
    </div>
 | 
						|
  </div>
 | 
						|
</main>
 | 
						|
<style>
 | 
						|
  .flatpickr-monthDropdown-month {
 | 
						|
    color: black !important;
 | 
						|
  }
 | 
						|
</style>
 | 
						|
<script>
 | 
						|
  var historyTable = null;
 | 
						|
  var buildingTag = null;
 | 
						|
  pageAct.hisBuiName = "";
 | 
						|
  hisFirst = true;
 | 
						|
  $(function () {
 | 
						|
    flatpickr(".selectDate", {});
 | 
						|
    flatpickr(".selectMonth", { dateFormat: "Y-m", });
 | 
						|
    let html = "";
 | 
						|
    for (let building of pageAct.buildList) {
 | 
						|
      html += `<label class="btn btn-secondary">
 | 
						|
                            <input type="radio" name="buildingRadio" id="radio-${building.getway}" value="${building.building_tag}" onChange="SelectBuild(this,'${building.building_tag}')"> ${building.full_name}
 | 
						|
                        </label>`;
 | 
						|
    }
 | 
						|
    $("#his_building").find(".item").empty();
 | 
						|
    $("#his_building").find(".item").append(html);
 | 
						|
    if ($("#his_building .item label").first())
 | 
						|
      $("#his_building .item label").first().click();
 | 
						|
 | 
						|
    initList();
 | 
						|
    // default list filter
 | 
						|
    initApp.listFilter($("#js_default_list"), $("#js_default_list_filter"));
 | 
						|
    // custom response message
 | 
						|
    initApp.listFilter($("#js-list-msg"), $("#js-list-msg-filter"));
 | 
						|
    //accordion filter
 | 
						|
    initApp.listFilter($("#js_list_accordion"), $("#js_list_accordion_filter"));
 | 
						|
    // nested list filter
 | 
						|
    initApp.listFilter($("#js_nested_list"), $("#js_nested_list_filter"));
 | 
						|
    //init navigation
 | 
						|
    initApp.buildNavigation($("#js_nested_list"));
 | 
						|
 | 
						|
    loadTable(null);
 | 
						|
    $(`[onclick="setDateType('day', this)"]`).click();
 | 
						|
    $(`[onclick="setDateType('today', this)"]`).click();
 | 
						|
 | 
						|
    onEvent("change", "#his_startdate", function () {
 | 
						|
      let today = displayDate(new Date(Date.now()), "date").replaceAll(
 | 
						|
        "/",
 | 
						|
        "-"
 | 
						|
      );
 | 
						|
      let ytd = displayDate(
 | 
						|
        new Date(new Date().setDate(new Date(Date.now()).getDate() - 1)),
 | 
						|
        "date"
 | 
						|
      ).replaceAll("/", "-");
 | 
						|
 | 
						|
      if (pageAct.dateType == "range") {
 | 
						|
        if (
 | 
						|
          $("#his_startdate").val() > $("#his_enddate input").val() &&
 | 
						|
          $("#his_startdate").val() != "" &&
 | 
						|
          $("#his_enddate input").val() != ""
 | 
						|
        ) {
 | 
						|
          $("#his_startdate").val($("#his_startdate").data("val"));
 | 
						|
          toast_error("不可選擇大於結束時間");
 | 
						|
        } else {
 | 
						|
          $("#his_startdate").data("val", $("#his_startdate").val());
 | 
						|
          $("#his_enddate input").data("val", $("#his_enddate input").val());
 | 
						|
 | 
						|
          $(`[onclick="setDateType('today', this)"]`).addClass("btn-secondary");
 | 
						|
          $(`[onclick="setDateType('today', this)"]`).removeClass("btn-info");
 | 
						|
          $(`[onclick="setDateType('ytd', this)"]`).addClass("btn-secondary");
 | 
						|
          $(`[onclick="setDateType('ytd', this)"]`).removeClass("btn-info");
 | 
						|
 | 
						|
          if ($("#his_startdate").val() == $("#his_enddate input").val()) {
 | 
						|
            if ($("#his_startdate").val() == today) {
 | 
						|
              $(`[onclick="setDateType('today', this)"]`).removeClass(
 | 
						|
                "btn-secondary"
 | 
						|
              );
 | 
						|
              $(`[onclick="setDateType('today', this)"]`).addClass("btn-info");
 | 
						|
            } else if ($("#his_startdate").val() == ytd) {
 | 
						|
              $(`[onclick="setDateType('ytd', this)"]`).removeClass(
 | 
						|
                "btn-secondary"
 | 
						|
              );
 | 
						|
              $(`[onclick="setDateType('ytd', this)"]`).addClass("btn-info");
 | 
						|
            }
 | 
						|
          }
 | 
						|
        }
 | 
						|
      } else if ($(this).val() == today) {
 | 
						|
        $(`[onclick="setDateType('today', this)"]`).removeClass(
 | 
						|
          "btn-secondary"
 | 
						|
        );
 | 
						|
        $(`[onclick="setDateType('today', this)"]`).addClass("btn-info");
 | 
						|
        $(`[onclick="setDateType('ytd', this)"]`).addClass("btn-secondary");
 | 
						|
        $(`[onclick="setDateType('ytd', this)"]`).removeClass("btn-info");
 | 
						|
      } else if ($(this).val() == ytd) {
 | 
						|
        $(`[onclick="setDateType('today', this)"]`).addClass("btn-secondary");
 | 
						|
        $(`[onclick="setDateType('today', this)"]`).removeClass("btn-info");
 | 
						|
        $(`[onclick="setDateType('ytd', this)"]`).removeClass("btn-secondary");
 | 
						|
        $(`[onclick="setDateType('ytd', this)"]`).addClass("btn-info");
 | 
						|
      }
 | 
						|
    });
 | 
						|
 | 
						|
    onEvent("change", "#his_enddate input", function () {
 | 
						|
      let today = displayDate(new Date(Date.now()), "date").replaceAll(
 | 
						|
        "/",
 | 
						|
        "-"
 | 
						|
      );
 | 
						|
      let ytd = displayDate(
 | 
						|
        new Date(new Date().setDate(new Date(Date.now()).getDate() - 1)),
 | 
						|
        "date"
 | 
						|
      ).replaceAll("/", "-");
 | 
						|
 | 
						|
      if (
 | 
						|
        $("#his_startdate").val() > $("#his_enddate input").val() &&
 | 
						|
        $("#his_startdate").val() != "" &&
 | 
						|
        $("#his_enddate input").val() != ""
 | 
						|
      ) {
 | 
						|
        $("#his_enddate input").val($("#his_enddate input").data("val"));
 | 
						|
        toast_error("不可選擇大於結束時間");
 | 
						|
      } else {
 | 
						|
        $("#his_startdate").data("val", $("#his_startdate").val());
 | 
						|
        $("#his_enddate input").data("val", $("#his_enddate input").val());
 | 
						|
 | 
						|
        $(`[onclick="setDateType('today', this)"]`).addClass("btn-secondary");
 | 
						|
        $(`[onclick="setDateType('today', this)"]`).removeClass("btn-info");
 | 
						|
        $(`[onclick="setDateType('ytd', this)"]`).addClass("btn-secondary");
 | 
						|
        $(`[onclick="setDateType('ytd', this)"]`).removeClass("btn-info");
 | 
						|
 | 
						|
        if ($("#his_startdate").val() == $("#his_enddate input").val()) {
 | 
						|
          if ($("#his_startdate").val() == today) {
 | 
						|
            $(`[onclick="setDateType('today', this)"]`).removeClass(
 | 
						|
              "btn-secondary"
 | 
						|
            );
 | 
						|
            $(`[onclick="setDateType('today', this)"]`).addClass("btn-info");
 | 
						|
          } else if ($("#his_startdate").val() == ytd) {
 | 
						|
            $(`[onclick="setDateType('ytd', this)"]`).removeClass(
 | 
						|
              "btn-secondary"
 | 
						|
            );
 | 
						|
            $(`[onclick="setDateType('ytd', this)"]`).addClass("btn-info");
 | 
						|
          }
 | 
						|
        }
 | 
						|
      }
 | 
						|
    });
 | 
						|
  });
 | 
						|
 | 
						|
  function initList() {
 | 
						|
    let sendData = {
 | 
						|
      building_tag: buildingTag,
 | 
						|
    };
 | 
						|
    objSendData.Data = sendData;
 | 
						|
    let url = baseApiUrl + "/api/History/GetMainSub";
 | 
						|
    function success(res) {
 | 
						|
      let strHtml = ``;
 | 
						|
      let i1 = null,
 | 
						|
        i2 = null,
 | 
						|
        first = true;
 | 
						|
 | 
						|
      $.each(res.data.history_Main_Systems, function (index, val) {
 | 
						|
        if (pageAct.mainStatus) {
 | 
						|
          strHtml += `<li>
 | 
						|
                                    <a href="#" data-filter-tags="${val.full_name.toLowerCase()}" data-maintag="${val.main_system_tag
 | 
						|
            }">
 | 
						|
                                        <span class="nav-link-text">${val.full_name
 | 
						|
            }</span>
 | 
						|
                                        </a>
 | 
						|
                                        <ul style="${index == 0 ? `display:block;` : ``
 | 
						|
            }">`;
 | 
						|
 | 
						|
          i1 = val.history_Sub_systems != null && i1 == null ? index : null;
 | 
						|
        }
 | 
						|
 | 
						|
        $.each(val.history_Sub_systems, function (index2, val2) {
 | 
						|
          i2 = val2.device != null && i2 == null ? index2 : null;
 | 
						|
 | 
						|
          strHtml += `<li>
 | 
						|
                                    <a href="#" data-filter-tags="${val2.full_name.toLowerCase()}"  data-subtag="${val2.sub_system_tag
 | 
						|
            }">
 | 
						|
                                        <span class="nav-link-text">
 | 
						|
                                            ${val2.full_name}
 | 
						|
                                        </span>
 | 
						|
                                    </a>
 | 
						|
                                    <ul style="${(i1 != null ? index == i1 : first) &&
 | 
						|
              index2 == i2
 | 
						|
              ? `display:block;`
 | 
						|
              : ``
 | 
						|
            }">`;
 | 
						|
 | 
						|
          $.each(val2.device, function (index3, val3) {
 | 
						|
            if (val3.device_number.includes("$3"))
 | 
						|
              val3.device_number = val3.device_number.replace("$3", "");
 | 
						|
 | 
						|
            strHtml += `<li data-tabname="hisListItem">
 | 
						|
                                        <a href="#" onClick="setValue('${val3.device_number
 | 
						|
              }', '${val3.full_name
 | 
						|
              }', null)" data-filter-tags="${val3.full_name.toLowerCase()} ${val3.device_serial_tag.toLowerCase()}" data-devnum="${val3.device_number
 | 
						|
              }">
 | 
						|
                                            <span class="nav-link-text">
 | 
						|
                                                ${val3.full_name}
 | 
						|
                                            </span>
 | 
						|
                                        </a>
 | 
						|
                                    </li>`;
 | 
						|
 | 
						|
            if (pageAct.mainStatus) {
 | 
						|
              if (index == i1 && index2 == i2 && first) {
 | 
						|
                first = false;
 | 
						|
                pageAct.deviceNumber = val3.device_number;
 | 
						|
                pageAct.deviceName = val3.full_name;
 | 
						|
                devPointsList();
 | 
						|
              }
 | 
						|
            } else {
 | 
						|
              if (index2 == i2 && first) {
 | 
						|
                first = false;
 | 
						|
                pageAct.deviceNumber = val3.device_number;
 | 
						|
                pageAct.deviceName = val3.full_name;
 | 
						|
                devPointsList();
 | 
						|
              }
 | 
						|
            }
 | 
						|
          });
 | 
						|
          strHtml += `</ul> </li>`;
 | 
						|
        });
 | 
						|
 | 
						|
        if (pageAct.mainStatus) {
 | 
						|
          strHtml += `</ul> </li>`;
 | 
						|
        }
 | 
						|
      });
 | 
						|
 | 
						|
      $("#js_nested_list").html(strHtml);
 | 
						|
      $(`[data-tabname="hisListItem"]`).YTTab();
 | 
						|
    }
 | 
						|
    $(loadEle).Loading("close");
 | 
						|
    ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
 | 
						|
  }
 | 
						|
 | 
						|
  function devPointsList() {
 | 
						|
    let sendData = {
 | 
						|
      device_number: pageAct.deviceNumber,
 | 
						|
    };
 | 
						|
    objSendData.Data = sendData;
 | 
						|
    let url = baseApiUrl + "/api/History/GetDevPoi";
 | 
						|
    function success(res) {
 | 
						|
      let strHtml = ``;
 | 
						|
 | 
						|
      $.each(res.data, function (index, val) {
 | 
						|
        if (index == 0) {
 | 
						|
          strHtml += `<button onClick="setValue(null, null, '${val.points
 | 
						|
            }', this)" type="button" class="btn btn-info waves-effect waves-themed">${val.full_name || val.points
 | 
						|
            }</button>`;
 | 
						|
          pageAct.deviceItem = val.points;
 | 
						|
          pageAct.devicePoiName = val.full_name + " " + val.points;
 | 
						|
        } else {
 | 
						|
          strHtml += `<button onClick="setValue(null, null, '${val.points
 | 
						|
            }', this)" type="button" class="btn btn-secondary waves-effect waves-themed">${val.full_name || val.points
 | 
						|
            }</button>`;
 | 
						|
        }
 | 
						|
      });
 | 
						|
 | 
						|
      $("#devPointsList").html(strHtml);
 | 
						|
 | 
						|
      if (!hisFirst) {
 | 
						|
        searchDate();
 | 
						|
      }
 | 
						|
    }
 | 
						|
    ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
 | 
						|
  }
 | 
						|
 | 
						|
  function getData(start = null, end = null) {
 | 
						|
    $(loadEle).Loading("start");
 | 
						|
    var sdt = new Date();
 | 
						|
    var edt = new Date(new Date().setDate(sdt.getDate() + 1));
 | 
						|
    start = start + " 00:00:00" ?? sdt.toLocaleDateString();
 | 
						|
    end = end + " 23:59:59" ?? edt.toLocaleDateString();
 | 
						|
 | 
						|
    let sendData = {
 | 
						|
      device_number: pageAct.deviceNumber,
 | 
						|
      device_point: pageAct.deviceItem,
 | 
						|
    };
 | 
						|
    objSendData.Data = sendData;
 | 
						|
    let url = baseApiUrl + "/api/DevGetWay";
 | 
						|
    ytAjax = new YourTeam.Ajax(
 | 
						|
      url,
 | 
						|
      objSendData,
 | 
						|
      function (res) {
 | 
						|
        if (res && res.code == "0000") {
 | 
						|
          pageAct.hisBuiName = res.data;
 | 
						|
          getHistoryDataByBaja(
 | 
						|
            pageAct.deviceNumber + "_" + pageAct.deviceItem,
 | 
						|
            new Date(start).getTime(),
 | 
						|
            new Date(end).getTime(),
 | 
						|
            pageAct.deviceName,
 | 
						|
            pageAct.hisBuiName,
 | 
						|
            callBackFromHistory
 | 
						|
          );
 | 
						|
        } else {
 | 
						|
          $(loadEle).Loading("close");
 | 
						|
        }
 | 
						|
      },
 | 
						|
      function (res) {
 | 
						|
        $(loadEle).Loading("close");
 | 
						|
      },
 | 
						|
      "POST",
 | 
						|
      true
 | 
						|
    ).send();
 | 
						|
  }
 | 
						|
 | 
						|
  function callBackFromHistory(res = '{"count":0,"data":[]}') {
 | 
						|
    res = JSON.parse(res);
 | 
						|
    loadTable(res.data);
 | 
						|
    if (historyTable != null) {
 | 
						|
      let t = $("#historyTable").dataTable();
 | 
						|
      t.fnClearTable();
 | 
						|
      if (res.data.length > 0) t.fnAddData(res.data);
 | 
						|
    }
 | 
						|
  }
 | 
						|
 | 
						|
  function setValue(deviceNumber, deviceName, deviceItem, elem) {
 | 
						|
    hisFirst = false;
 | 
						|
    btnSelCss(elem);
 | 
						|
 | 
						|
    if (
 | 
						|
      deviceNumber != null &&
 | 
						|
      deviceNumber != undefined &&
 | 
						|
      deviceName != null &&
 | 
						|
      deviceName != undefined
 | 
						|
    ) {
 | 
						|
      pageAct.deviceNumber = deviceNumber;
 | 
						|
      pageAct.deviceName = deviceName;
 | 
						|
      devPointsList();
 | 
						|
    } else if (deviceItem != null && deviceItem != undefined) {
 | 
						|
      pageAct.devicePoiName = $(elem).text();
 | 
						|
      pageAct.deviceItem = deviceItem;
 | 
						|
 | 
						|
      searchDate();
 | 
						|
    }
 | 
						|
  }
 | 
						|
 | 
						|
  function setDateType(type, elem) {
 | 
						|
    btnSelCss(elem);
 | 
						|
 | 
						|
    pageAct.dateType = type;
 | 
						|
    let now = formatDate(new Date(Date.now()), "date");
 | 
						|
    let ytd = formatDate(
 | 
						|
      new Date(new Date().setDate(new Date().getDate() - 1)),
 | 
						|
      "date"
 | 
						|
    );
 | 
						|
    let tmr = formatDate(
 | 
						|
      new Date(new Date().setDate(new Date().getDate() + 1)),
 | 
						|
      "date"
 | 
						|
    );
 | 
						|
 | 
						|
    if (type == "day" || type == "today" || type == "ytd") {
 | 
						|
      let date = type == "ytd" ? ytd : now;
 | 
						|
      $("#his_startdate").css("display", "block");
 | 
						|
      $("#his_enddate").css("display", "none");
 | 
						|
      $("#getmonth").css("display", "none");
 | 
						|
      $("#his_startdate").val(date);
 | 
						|
 | 
						|
      if (type == "today")
 | 
						|
        getData(formatDate(now, "date", true), formatDate(now, "date", true));
 | 
						|
      else if (type == "ytd")
 | 
						|
        getData(formatDate(ytd, "date", true), formatDate(ytd, "date", true));
 | 
						|
      else {
 | 
						|
        $(`[onclick="setDateType('today', this)"]`).removeClass(
 | 
						|
          "btn-secondary"
 | 
						|
        );
 | 
						|
        $(`[onclick="setDateType('today', this)"]`).addClass("btn-info");
 | 
						|
      }
 | 
						|
    } else if (type == "range") {
 | 
						|
      $(
 | 
						|
        `[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`
 | 
						|
      ).removeClass("btn-info");
 | 
						|
      $(
 | 
						|
        `[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`
 | 
						|
      ).addClass("btn-secondary");
 | 
						|
 | 
						|
      $("#his_startdate").css("display", "block");
 | 
						|
      $("#his_enddate").css("display", "block");
 | 
						|
      $("#getmonth").css("display", "none");
 | 
						|
      $("#his_startdate").val(now);
 | 
						|
      $("#his_startdate").data("val", now);
 | 
						|
      $("#his_enddate input").val(tmr);
 | 
						|
      $("#his_enddate input").data("val", tmr);
 | 
						|
    } else if (type == "month") {
 | 
						|
      $(
 | 
						|
        `[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`
 | 
						|
      ).removeClass("btn-info");
 | 
						|
      $(
 | 
						|
        `[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`
 | 
						|
      ).addClass("btn-secondary");
 | 
						|
 | 
						|
      $("#his_startdate").css("display", "none");
 | 
						|
      $("#his_enddate").css("display", "none");
 | 
						|
      $("#getmonth").css("display", "block");
 | 
						|
      $("#getmonth").val(now.substr(0, 7));
 | 
						|
    } else if (type == "ytd") {
 | 
						|
      $("#his_startdate").css("display", "block");
 | 
						|
      $("#his_enddate").css("display", "none");
 | 
						|
      $("#getmonth").css("display", "none");
 | 
						|
      $("#his_startdate").val(ytd);
 | 
						|
    }
 | 
						|
  }
 | 
						|
 | 
						|
  function searchDate() {
 | 
						|
    let start = new Date($("#his_startdate").val());
 | 
						|
    let end = new Date($("#his_enddate input").val());
 | 
						|
 | 
						|
    if (
 | 
						|
      pageAct.dateType == "today" ||
 | 
						|
      pageAct.dateType == "day" ||
 | 
						|
      pageAct.dateType == "ytd"
 | 
						|
    )
 | 
						|
      end = start;
 | 
						|
    else if (pageAct.dateType == "month") {
 | 
						|
      start = new Date($("#getmonth").val());
 | 
						|
      end = new Date(start.valueOf()).setMonth(start.getMonth() + 1);
 | 
						|
      end = new Date(new Date(end).setDate(new Date(end).getDate() - 1));
 | 
						|
    } else if (pageAct.dateType != "range") return;
 | 
						|
 | 
						|
    pageAct.hisStartDate = start;
 | 
						|
    pageAct.hisEndDate = end;
 | 
						|
    getData(formatDate(start, "date", true), formatDate(end, "date", true));
 | 
						|
  }
 | 
						|
 | 
						|
  function formatDate(date, type, send = false) {
 | 
						|
    if (!send) return displayDate(date, type).replaceAll("/", "-");
 | 
						|
    else {
 | 
						|
      date = displayDate(date, type);
 | 
						|
      let month = date.split("/")[1];
 | 
						|
      let year = date.split("/")[0];
 | 
						|
      let day = date.split("/")[2];
 | 
						|
      return month + "/" + day + "/" + year;
 | 
						|
    }
 | 
						|
  }
 | 
						|
 | 
						|
  function loadTable(data) {
 | 
						|
    if (data) {
 | 
						|
      $.each(data, function (i, v) {
 | 
						|
        v.type = pageAct.devicePoiName.split(" ")[0];
 | 
						|
      });
 | 
						|
 | 
						|
      let tag = "#historyTable";
 | 
						|
 | 
						|
      let column_defs = [
 | 
						|
        { targets: [0], width: "20%", sortable: true },
 | 
						|
        { targets: [1], width: "20%", sortable: true },
 | 
						|
        { targets: [2], width: "20%", sortable: true },
 | 
						|
      ];
 | 
						|
 | 
						|
      let columns = [
 | 
						|
        {
 | 
						|
          title: "類別",
 | 
						|
          data: "type",
 | 
						|
        },
 | 
						|
        {
 | 
						|
          title: "設備名稱",
 | 
						|
          data: "deviceName",
 | 
						|
        },
 | 
						|
        {
 | 
						|
          title: "數值",
 | 
						|
          data: "value",
 | 
						|
          render: function (data) {
 | 
						|
            if (isNaN(data.toString())) {
 | 
						|
              return data;
 | 
						|
            }
 | 
						|
            return data.roundDecimal(2);
 | 
						|
          },
 | 
						|
        },
 | 
						|
        {
 | 
						|
          title: "紀錄時間",
 | 
						|
          data: "timestamp",
 | 
						|
          render: function (data) {
 | 
						|
            return displayDate(data, "datetime");
 | 
						|
          },
 | 
						|
        },
 | 
						|
      ];
 | 
						|
 | 
						|
      historyTable = new YourTeam.JqDataTables.getTableByStatic(
 | 
						|
        tag,
 | 
						|
        data,
 | 
						|
        columns,
 | 
						|
        column_defs,
 | 
						|
        null,
 | 
						|
        null,
 | 
						|
        null,
 | 
						|
        null,
 | 
						|
        "tpi"
 | 
						|
      );
 | 
						|
      $(tag).DataTable().order([3, "desc"]);
 | 
						|
    }
 | 
						|
  }
 | 
						|
 | 
						|
  function exportExcel() {
 | 
						|
    $(loadEle).Loading("start");
 | 
						|
    let token = cookies.get("JWT-Authorization");
 | 
						|
    let url = baseApiUrl + "/api/ExportHistory";
 | 
						|
    let v = {};
 | 
						|
 | 
						|
    v.starttime = pageAct.hisStartDate;
 | 
						|
    v.endtime = pageAct.hisEndDate;
 | 
						|
    v.dateType = pageAct.dateType;
 | 
						|
    v.device_number = pageAct.deviceNumber;
 | 
						|
    objSendData.Data = v;
 | 
						|
 | 
						|
    $.ajax({
 | 
						|
      type: "POST",
 | 
						|
      url: url,
 | 
						|
      data: JSON.stringify(objSendData.Data),
 | 
						|
      aysnc: true,
 | 
						|
      headers: {
 | 
						|
        Authorization: "Bearer " + token,
 | 
						|
      },
 | 
						|
      contentType: "application/json; charset=utf-8",
 | 
						|
      xhrFields: {
 | 
						|
        responseType: "blob", // to avoid binary data being mangled on charset conversion
 | 
						|
      },
 | 
						|
      success: function (rel, text, xhr) {
 | 
						|
        if (rel) {
 | 
						|
          downloadByBlob(xhr, rel);
 | 
						|
        }
 | 
						|
        $(loadEle).Loading("close");
 | 
						|
      },
 | 
						|
      error: function () {
 | 
						|
        $(loadEle).Loading("close");
 | 
						|
      },
 | 
						|
      complete: (xhr) => {
 | 
						|
        setLoading(false);
 | 
						|
      },
 | 
						|
    });
 | 
						|
    // ytAjax = new YourTeam.Ajax(url, objSendData, function (rel) {
 | 
						|
    //     $(loadEle).Loading("close");
 | 
						|
    // }, function (rel) {
 | 
						|
    //     if (rel) {
 | 
						|
    //        downloadByBlob(xhr, rel);
 | 
						|
    //     }
 | 
						|
 | 
						|
    //     $(loadEle).Loading("close");
 | 
						|
    // }, "POST",true).send();
 | 
						|
  }
 | 
						|
 | 
						|
  //選擇棟別
 | 
						|
  function SelectBuild(e, building_tag) {
 | 
						|
    $(loadEle).Loading("start");
 | 
						|
    checkIsSelectedBuilding();
 | 
						|
  }
 | 
						|
 | 
						|
  function checkIsSelectedBuilding() {
 | 
						|
    let result = false;
 | 
						|
    let buildingRadios = $("[name=buildingRadio]:checked");
 | 
						|
    buildingTag = null;
 | 
						|
    if (buildingRadios && buildingRadios.length > 0) {
 | 
						|
      $("[name=buildingRadio]").parent().removeClass("btn-info");
 | 
						|
      $("[name=buildingRadio]").parent().addClass("btn-secondary");
 | 
						|
      $("[name=buildingRadio]:checked").parent().removeClass("btn-secondary");
 | 
						|
      $("[name=buildingRadio]:checked").parent().addClass("btn-info");
 | 
						|
      buildingTag = buildingRadios.val(); //building tag
 | 
						|
      pageAct.hisBuiName = buildingRadios.prop("id").split("-")[1];
 | 
						|
      initList();
 | 
						|
      result = true;
 | 
						|
    }
 | 
						|
    return result;
 | 
						|
  }
 | 
						|
</script>
 |