ibms-dome/Frontend/_energyManagement.html

<main id="js-page-content" role="main" class="page-content">
  <h1 class="p-2 mb-0">能源管理</h1>
  <div class="row">
    <div class="col-12">
      <div class="btn-group mb-3">
        <button type="button" class="btn btn-secondary waves-effect waves-themed active" data-id="0" data-tabname="energyTab">用電管理</button>
        <button type="button" class="btn btn-secondary waves-effect waves-themed" data-id="1" data-tabname="energyTab">天然氣管理</button>
        <button type="button" class="btn btn-secondary waves-effect waves-themed" data-id="2" data-tabname="energyTab">水資源管理</button>
        <button type="button" class="btn btn-secondary waves-effect waves-themed" data-id="3" data-tabname="energyTab">再生能源</button>
      </div>

    </div>
    <div class="row col-12">
      <div class="row col-xl-6 m-0 p-0">
        <div id="eneSubSysList" class="row col-12 m-0 p-0"></div>

        <div class="col-sm-12 col-xl-12 align-self-end">
          <div id="panel-2" class="panel panel-locked mb-0" data-panel-sortable data-panel-collapsed data-panel-close>
            <div class="panel-hdr">
              <h2>
                <span id="actSubSysText"></span> - 用電狀況
              </h2>
            </div>
            <div class="panel-container show">
              <div class="row">
                <div class="col-sm-12 col-lg-6 d-flex flex-column">
                  <h4 class="p-3 todayElecNoDataTitle text-center">今日耗電量 (kWh)</h4>
                  <div class="panel-content poisition-relative" style="min-height: 346.84px;">
                    <div id="todayElecNoData" class="row justify-content-center align-items-center h-100" style="display:none;">
                      <h4>無資料</h4>
                    </div>
                    <div style="width:100%; min-height:300px;">
                      <canvas class="chart" id="todayElecChart"></canvas>
                    </div>
                  </div>
                </div>
                <div class="col-sm-12 col-lg-6 d-flex flex-column">
                  <h4 class="py-3 elecCompNoDataTitle text-center">用電比較</h4>
                  <div id="elecCompNoData" class="row justify-content-center align-items-center h-100" style="display:none;">
                    <h4>無資料</h4>
                  </div>
                  <div style="width:100%; min-height:300px;">
                    <canvas class="chart" id="elecCompChart"></canvas>

                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="elecAutoDem" class="row flex-column col-xl-6 m-0 p-0">
        <div class="col-auto mb-2">
          <div class="card">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center mb-3">
                <h4 class="mb-0"><i class="fal fa-server mr-1"></i>自動需量管理</h4>

                <button id="ediAutDemBtn" class="btn btn-success"><i class="fal fa-pencil"></i> 編輯</button>
              </div>
              <div class="row align-items-center justify-content-between d-flex flex-column">
                <!-- <div class="col d-flex">
                  <p class="card-text color-white d-flex justify-content-between mr-3">
                    <span>契約容量</span>
                    <span><span data-id="contract_capacity"></span> kW</span>
                  </p>
                  <p class="card-text color-white d-flex justify-content-between mr-3">
                    <span>警戒容量</span>
                    <span><span data-id="warning_capacity"></span> kW</span>
                  </p>
                  <p class="card-text color-white d-flex justify-content-between mr-3">
                    <span>復歸值</span>
                    <span><span data-id="resetting_value"></span> kW</span>
                  </p>
                </div> -->
                <div class="col" style=" min-height:250px;">
                  <canvas class="chart" id="autDemChart"></canvas>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="row col mx-0">
          <ul class="nav nav-tabs w-100 align-items-end" role="tablist">
            <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#tab_borders_icons-1" role="tab">自動卸載設定</a> </li>
            <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab_borders_icons-2" role="tab">手動卸載控制</a> </li>
          </ul>
          <div class="tab-content border border-top-0 p-3 w-100">
            <div class="tab-pane fade show active" id="tab_borders_icons-1" role="tabpanel">
              <div class="frame-wrap">
                <table class="table table-bordered table-striped text-center m-0">
                  <thead class="thead-themed">
                    <tr>
                      <th>日期</th>
                      <th>開始-結束</th>
                      <th>卸載時長<br>minutes</th>
                      <th>預計卸載量<br>kW</th>
                      <th>是否啟用</th>
                      <th>名稱</th>
                      <th>功能</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>2022-09-01</td>
                      <td>11:00:00<br>11:30:00</td>
                      <td>30</td>
                      <td>40</td>
                      <td><input type="checkbox"> 啟用</td>
                      <td>停車場單號照明</td>
                      <td><a href="#" class="btn btn-info">修改</a></td>
                    </tr>
                    <tr>
                      <td>2022-09-01</td>
                      <td>11:00:00<br>11:30:00</td>
                      <td>30</td>
                      <td>40</td>
                      <td><input type="checkbox"> 啟用</td>
                      <td>停車場單號照明</td>
                      <td><a href="#" class="btn btn-info">修改</a></td>
                    </tr>
                    <tr>
                      <td>2022-09-01</td>
                      <td>11:00:00<br>11:30:00</td>
                      <td>30</td>
                      <td>40</td>
                      <td><input type="checkbox"> 啟用</td>
                      <td>停車場單號照明</td>
                      <td><a href="#" class="btn btn-info">修改</a></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="tab-pane fade" id="tab_borders_icons-2" role="tabpanel">
              <div class="frame-wrap">
                <div class="mb-3"> <a href="#" class="btn btn-success">+ 新增</a> </div>
                <table class="table table-bordered table-striped text-center m-0">
                  <thead class="thead-themed">
                    <tr>
                      <th>編號</th>
                      <th>名稱</th>
                      <th>建立人</th>
                      <th>建立時間</th>
                      <th>功能</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>1</td>
                      <td>平台管理員</td>
                      <td>王小明</td>
                      <td>2022-05-02 12:08</td>
                      <td><a href="#" class="btn btn-info">修改</a>　<a href="#" class="btn btn-danger">刪除</a></td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>平台運維</td>
                      <td>王小明</td>
                      <td>2022-05-02 12:08</td>
                      <td>
                        <div class="custom-control custom-switch">
                          <input type="radio" class="custom-control-input" id="customSwitch2radio" checked="" name="defaultSwitchRadioExample">
                          <label class="custom-control-label" for="customSwitch2radio">Checked</label>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>3</td>
                      <td>客戶管理員</td>
                      <td>王小明</td>
                      <td>2022-05-02 12:08</td>
                      <td><a href="#" class="btn btn-info">修改</a>　<a href="#" class="btn btn-danger">刪除</a></td>
                    </tr>
                    <tr>
                      <td>4</td>
                      <td>客戶運維</td>
                      <td>王小明</td>
                      <td>2022-05-02 12:08</td>
                      <td><a href="#" class="btn btn-info">修改</a>　<a href="#" class="btn btn-danger">刪除</a></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>



    </div>

  </div>

  <!-- Modal center Add -->
  <div class="modal fade" id="autDemModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">
            編輯自動需量
          </h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true"><i class="fal fa-times"></i></span>
          </button>
        </div>
        <form id="autDemForm">
          <div class="modal-body">
            <div class="row">
              <div class="col-md-12">
                <div class="form-group mb-2">
                  <label class="form-label" for="txtConCap">契約容量</label>
                  <input type="text" id="txtConCap" name="txtConCap" class="form-control" data-id="contract_capacity">
                </div>
              </div>
              <div class="col-md-12">
                <div class="form-group mb-2">
                  <label class="form-label" for="txtWarCap">警戒容量</label>
                  <input type="text" id="txtWarCap" name="txtWarCap" class="form-control" data-id="warning_capacity">
                </div>
              </div>
              <div class="col-md-12">
                <div class="form-group mb-2">
                  <label class="form-label" for="txtResCap">復歸值</label>
                  <input type="text" id="txtResCap" name="txtResCap" class="form-control" data-id="resetting_value">
                </div>
              </div>

            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
            <button type="button" class="btn btn-primary" id="autDemSavBtn">儲存</button>
          </div>
        </form>
      </div>
    </div>
  </div>



</main>

<script>
  var subSysList = [];
  var subSysElecList = [];
  var powerTimeVals = [];
  var todayElecChart = null;
  var elecCompChart = null;
  var autDemChart = null;
  var elecCardConText = [{ text1: "即時功耗 kW", text2: "佔比 %" }, { text1: "即時功耗 kW", text2: "佔比 %" }, { text1: "即時功耗 kW", text2: "佔比 %" }, { text1: "即時發電功率 kW", text2: "供電佔比 %" }]
  var filNotShowSysSub = ["E1", "E4"];
  $(function () {
    getSubSysList();
    getElecBySubSysTag();
    getAutDemVal();
  })

  // 左上方 系統小類卡片區塊
  function getSubSysList(type = 0) {
    subSysList = [];
    let url = baseApiUrl + "/api/Energe/GetElecBySubSysTag";
    // let sendData = {
    //     building_tag: pageAct.buiTag,
    // };
    // objSendData.Data = sendData;
    ytAjax = new YourTeam.Ajax(
      url,
      null,
      function (res) {
        if (!res || res.code != "0000" || !res.data) {
        } else {
          let strHtml = "";
          $.each(res.data, (index, mainSysObj) => {
            if (type == 0)
            //  && filNotShowSysSub.indexOf(subSysObj.sub_system_tag) == -1
             {
              document.querySelector(".elecCompNoDataTitle").textContent= "用電比較";
              document.querySelector(".todayElecNoDataTitle").textContent= "今日耗電量 (kWh)";
              const full_name = mainSysObj.system_remark.split("-")[1];
              strHtml += `<div class="col-sm-12 col-xl-4 mb-2">
                <div class="card elecCard cur-poi" data-id="${mainSysObj.mainSubTag}" data-name="${mainSysObj.mainSubTag}">
                    <div class="card-body">
                        <h4 class="card-title color-white">${full_name}用電</h4>
                        <p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
                            <span>${elecCardConText[type]?.text1}</span>
                            <span id="insPow${mainSysObj.mainSubTag}"></span>
                        </p>
                        <p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
                            <span>${elecCardConText[type]?.text2}</span>
                            <span id="insPowPer${mainSysObj.mainSubTag}"></span>
                        </p>
                    </div>
                </div>
            </div>`;
            } else if(type == 3 && mainSysObj.mainSubTag == "ELEV_EL"){
              document.querySelector(".elecCompNoDataTitle").textContent= "供電比較";
              document.querySelector(".todayElecNoDataTitle").textContent= "今日供電量 (kWh)";
              

              const full_name = mainSysObj.system_remark.split("-")[1];
              strHtml += `<div class="col-sm-12 col-xl-4 mb-2">
                <div class="card elecCard cur-poi" data-id="${mainSysObj.mainSubTag}" data-name="${mainSysObj.mainSubTag}">
                    <div class="card-body">
                        <h4 class="card-title color-white">${full_name}供電</h4>
                        <p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
                            <span>${elecCardConText[type]?.text1}</span>
                            <span id="insPow${mainSysObj.mainSubTag}"></span>
                        </p>
                        <p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
                            <span>${elecCardConText[type]?.text2}</span>
                            <span id="insPowPer${mainSysObj.mainSubTag}"></span>
                        </p>
                    </div>
                </div>
            </div>`;
            }
          });
          if (type == 3) {
            strHtml += `<div class="col-sm-12 col-xl-4 mb-2">
                    <div class="card elecCard cur-poi">
                        <div class="card-body">
                            <h4 class="card-title color-white">太陽能設備供電</h4>
                            <p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
                                <span>${elecCardConText[type]?.text1}</span>
                                <span id="insPow">---</span>
                            </p>
                            <p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
                                <span>${elecCardConText[type]?.text2}</span>
                                    <span id="insPow">---</span>
                            </p>
                        </div>
                    </div>
                </div>`;
          }
          $("#eneSubSysList").html(strHtml);
        }
      },
      null,
      "POST",
    ).send();
  }

  // 取得 對應系統小類的總電錶
  function getElecBySubSysTag(type = 0) {
    let url = baseApiUrl + "/api/Energe/GetElecBySubSysTag";

    ytAjax = new YourTeam.Ajax(url, null, function (res) {
      if (!res || res.code != "0000" || !res.data) {

      } else {
        subSysElecList = res.data;
        tarElePath = subSysElecList.filter(x => x.mainSubTag == "total")[0]?.system_device_tag ?? "";
        getBajaData(type);
        getSubBaja();
      }
    }, null, "POST").send();
  }

  function getSubBaja() {
    let devPath = tarElePath.split("_").slice(0, 8).join("/");
    let tempOrdPath = { devicePath: devPath }
    let myBaja = new subscriptionElectricmeter();
    myBaja.setSubscribeElectricmeterByBql(tempOrdPath);
    myBaja.setSubscribeElectricmeterCallBack(function (data) {
      if (data.point_name == "P") {
        let value = parseFloat(data.value).roundDecimal(2);
        let time = new Date();
        if (!autDemChart) {
          return;
        }

        let conCapVal = autDemChart.data.datasets[0].data[0];
        let warCapVal = autDemChart.data.datasets[1].data[0];
        let resCapVal = autDemChart.data.datasets[2].data[0];

        if (autDemChart.data.labels.length > 0) {
          // 當 label 還未補齊，則直接替換 array 裡的值，已補齊之後就從後面補值
          if (autDemChart.data.labels.filter(x => x != "").length > 35) {
            autDemChart.data.labels.push(displayDate(time, "Hms"));
          } else {
            let cnt = autDemChart.data.labels.filter(x => x != "").length;
            autDemChart.data.labels[cnt] = displayDate(time, "Hms");
          }
          autDemChart.data.datasets[0].data.push(parseInt(conCapVal));
          autDemChart.data.datasets[1].data.push(parseInt(warCapVal));
          autDemChart.data.datasets[2].data.push(resCapVal);
          autDemChart.data.datasets[3].data.push(value);
        }

        if (autDemChart.data.labels.filter(x => x != "").length > 35) {
          autDemChart.data.labels.shift();
          autDemChart.data.datasets[0].data.shift();
          autDemChart.data.datasets[1].data.shift();
          autDemChart.data.datasets[2].data.shift();
          autDemChart.data.datasets[3].data.shift();
        }
        autDemChart.update();
        /*autDemChart.update();*/

      }
    })
    myBaja.setSubscribeElectricmeterEndCallBack(function (data) {
      let time = new Date();

      for (let d of data) {
        if (d.point_name == "P") {
          if (autDemChart) {
            autDemChart.data.labels.push(displayDate(time, "Hms"));
            autDemChart.data.datasets[3].data.push(d.value);
            // 補齊空缺 最多10個
            for (let i = autDemChart.data.labels.length; i < 35; i++) {
              autDemChart.data.labels.push("");
            }

            autDemChart.update();
          }
        }
      }
    })
  }

  // 取得 baja 即時資料
  function getBajaData(type = 0) {
    startPageLoading();
    let yesterday = displayDate(getTimeByType(null, -1), "date").replaceAll("/", "-") + "T00:00:00";
    let tomorrow = displayDate(getTimeByType(null, 1), "date").replaceAll("/", "-") + "T00:00:00";
    let prevThirtyDay = displayDate(getTimeByType(null, -30), "date").replaceAll("/", "-") + "T00:00:00";
    let lastTimeout = null;
    let totalPow = 0;
    let loadedCnt = 0;

    // 取系統小類 總即時功率 (total)
    let devPath = subSysElecList.filter(x => x.mainSubTag == "total")[0]?.system_device_tag?.split("_").slice(0, 8).join("/");
    if (devPath) {
      getElectricMeterNoweDataByBaja(devPath, (data) => {
        data = data.data;
        let result = data.filter(x => x.name == "P")[0]?.value;
        result = result ? result.roundDecimal(2) : 0;
        totalPow = result;
        chkBajaLoaded();
      })
    }
    // 每個系統小類 即時功率
    $.each(subSysElecList, (idx, elecObj) => {
      let devPath
      devPath = elecObj.system_device_tag?.split("_").slice(0, 8).join("/");
      getElectricMeterNoweDataByBaja(devPath, (data) => {
        data = data.data;
        let result = 0;
        if (type == "3") {
          result = data.filter(x => x.name == "P_rec")[0]?.value?.roundDecimal(2);
          $(`#insPow${elecObj.mainSubTag}`).text(result);
          result = data.filter(x => x.name == "KWH_rec")[0]?.value?.roundDecimal(2);
          $(`#insPowPer${elecObj.mainSubTag}`).text((result / result * 100).roundDecimal(2) + " %");
        } else {
          /*        result = result ? result.roundDecimal(2) : 0;*/
          result = data.filter(x => x.name == "P")[0]?.value?.roundDecimal(2);
          $(`#insPow${elecObj.mainSubTag}`).text(result);
          $(`#insPowPer${elecObj.mainSubTag}`).text((result / totalPow * 100).roundDecimal(2) + " %");
        }

        clearTimeout(lastTimeout);
        lastTimeout = setTimeout(() => {
          chkBajaLoaded();
        }, 10)
      })

      // 無對應資料系統小類
      if (idx == subSysElecList.length - 1) {
        let mainSubTags = subSysElecList.filter(x => x.mainSubTag);
        $(".elecCard [id^=insPow]").each((idx, ele) => {
          let tarMainSubTag = $(ele).prop("id").split("insPow")[1];
          if (mainSubTags.indexOf(tarMainSubTag) == -1) {
            $(ele).text("---");
          }
        })
      }
    })

    onEvent("click", ".elecCard", function () {
      let tarMainSubTag = $(this).data("id");

      $("#actSubSysText").text($(this).data("name"));
      $("#todayElecNoData,#elecCompNoData").hide();
      $("#todayElecChart,#elecCompChart").parent().show();

      // 空調系統 今日用電量 (每小時)
      let tarDevNum = subSysElecList.filter(x => x.mainSubTag == tarMainSubTag)[0]?.system_device_tag;
      if (!tarDevNum) {
        $("#todayElecNoData,#elecCompNoData").show();
        $("#todayElecChart,#elecCompChart").parent().hide();
        elecCompChart?.destroy();
        todayElecChart?.destroy();
        return;
      }
      getElectricMeterHourDataByBaja(tarDevNum + "_KWH", n4Sup, yesterday, tomorrow, (data) => {
        let todayData = data.data.filter(x => x.timestamp.$date.$year == getTimeByType("year") && x.timestamp.$date.$month == getTimeByType("month") && x.timestamp.$date.$day == getTimeByType("date"));
        chartTodaysElec(todayData);
        chkBajaLoaded();
      })

      // 空調系統 今日與30日內平均用電比較
      getElectricMeterDayDataByBaja(tarDevNum + "_KWH", n4Sup, prevThirtyDay, tomorrow, (data) => {
        // let curDay = (new Date()).getDay() == 0 ? 7 : (new Date()).getDay();
        let curDay = 7;
        let eveWeek = [];
        let curWeekData = data.data.filter(x => strToDate(displayDate(new Date(), "date"), null, 0 - (curDay - 1)) <= strToDate(x.timestamp.$cEncStr));
        for (let i = 1; i <= curDay; i++) {
          let tarDayData = data.data.filter(x => strToDate(x.timestamp.$cEncStr, "day") == i);
          let tarDayElecs = tarDayData.map(x => x.sum);
          eveWeek.push(tarDayElecs.sum() / tarDayElecs.length);
        }

        chartEveWeeksElec(curWeekData, eveWeek)
        chkBajaLoaded();
      })
    })

    $(".elecCard").first().click();

    function chkBajaLoaded() {

      loadedCnt++;
      if (loadedCnt == 2) {
        endPageLoading();
      }
    }
  }

  // 取得 自動須量
  function getAutDemVal() {
    let url = baseApiUrl + "/api/Energe/GetAutDemVal";
    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 setKeyValue = {};
        $.each(res.data || [], (idx, data) => {
          $("#elecAutoDem").find(`[data-id=${data.system_key}]`).text(data.system_value || 0);
          setKeyValue[data.system_key] = data.system_value || 0;
        })

        chartAutDem(setKeyValue["contract_capacity"], setKeyValue["warning_capacity"], setKeyValue["resetting_value"])
      }
    }, null, "POST").send();
  }

  // 編輯 自動須量
  function ediAutDemVal(sucFn = null, errFn = null) {
    let url = baseApiUrl + "/api/Energe/EdiAutDemVal";
    let sendData = [];
    $("#autDemForm input").each((idx, inp) => {
      let main = {};
      main.system_key = $(inp).data("id");
      main.system_value = $(inp).val();
      sendData.push(main);
    })
    objSendData.Data = sendData;
    ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
      if (!res || res.code != "0000") {
        toast_error(res.msg || common.SysErr);
        errFn ? errFn(res) : "";
      } else {
        toast_ok("編輯成功");
        sucFn ? sucFn(res) : "";
      }
    }, null, "POST").send();
  }

  // 圖表 - 今天用電量 (折線圖)
  function chartTodaysElec(todayData) {
      todayElecChart?.destroy();
    let todayElecChartCanvas = $('#todayElecChart').get(0).getContext('2d');
    let curHour = (new Date()).getHours();
    todayData.data = todayData.filter(x => x.timestamp.$time.$hour < curHour);
    let todayElecChartData = {
      labels: todayData?.data.map(x => x.timestamp.$time.$hour),
      datasets: [
        {
          type: 'line',
          label: '今日用電量',
          fill: false,
          data: todayData?.data.map(x => x.sum),
          borderColor: color.success._500,
          backgroundColor: color.success._500,
          pointBackgroundColor: color.success._500,
          order: 1,
          borderWidth: 3,
        }
      ]
    }

    let todayElecChartOptions = {
      maintainAspectRatio: false,
      responsive: true,
      legend: {
        display: true,
      },
      scales: {
        x: {
          offset: true,
          /*grid: { color: color.fusion._100 },*/
          ticks: {
            callback: function (value, index, ticks) {
              return value
            }
          },
        },
        y: {
          grid: { color: color.fusion._500 },
          beginAtZero: true,
          ticks: {
            min: 0,
          },
        }
      },
      tooltips: {
        callbacks: {
          label: function (tooltipItem) {
            return "用電量 : " + tooltipItem.value + " kWH";
          },
          title: function (tooltipItem) {
            let result = tooltipItem[0].xLabel.toString().padStart(2, "0") + ":00";
            return result;
          }
        }
      },
    }

    // This will get the first returned node in the jQuery collection.
    todayElecChart = new Chart(todayElecChartCanvas, {
      data: todayElecChartData,
      options: todayElecChartOptions
    })
  }

  // 圖表 - 今日與30日內平均用電量比較 (長條圖)
  function chartEveWeeksElec(curWeekData, avgData) {
    const labels = curWeekData.map(x => dayToChiDay(strToDate(x.timestamp.$cEncStr, "day")))
    elecCompChart?.destroy()
    let elecCompChartCanvas = $('#elecCompChart').get(0).getContext('2d');
    let elecCompChartData = {
      labels,
      datasets: [
        {
          id: "today",
          type: "bar",
          label: '今日用電量',
          fill: false,
          backgroundColor: color.success._500,
          borderColor: color.success._500,
          pointColor: color.success._500,
          pointBackgroundColor: color.success._500,
          data: curWeekData.map(x => x.sum),
          order: 1,
        },
        {
          id: "avg",
          type: "bar",
          label: '30日內平均用電量',
          fill: false,
          backgroundColor: color.info._100,
          borderColor: color.info._100,
          pointColor: color.info._100,
          pointBackgroundColor: color.info._100,
          data: avgData,
          order: 2,
        }
      ]
    }

    let elecCompChartOptions = {
      maintainAspectRatio: false,
      responsive: true,
      legend: {
        display: true,
      },
      scales: {
        x: {
          offset: true,
          grid: { color: color.fusion._500 },
          ticks: {
            // callback: function (value, index, ticks) {
            //   console.log("@@@@圖表的",value)
            //   return value
            // }
          },
        },
        y: {
          ticks: {
            min: 0,
            beginAtZero: true
          },
        }
      },
      tooltips: {
        callbacks: {
          label: function (tooltipItem) {
            let isTodayOrYes = tooltipItem.datasetIndex == 1 ? "上週" : "本週";
            return isTodayOrYes + "用電量 : " + tooltipItem.value + " kWH";
          },
          title: function (tooltipItem) {
            let result = tooltipItem[0].xLabel.toString();
            return result;
          }
        }
      },
    }

    // This will get the first returned node in the jQuery collection.
    elecCompChart = new Chart(elecCompChartCanvas, {
      type: "bar",
      data: elecCompChartData,
      options: elecCompChartOptions
    })
  }

  // 圖表 - 自動需量 (折線圖)
  function chartAutDem(conCapVal = 0, warCapVal = 0, resCapVal = 0) {

    let autDemChartCanvas = $('#autDemChart').get(0).getContext('2d');
    let conCapData = [], warCapData = [], resCapData = [];

    if (autDemChart == null) {
      labels = [];
      conCapData = [parseInt(conCapVal)];
      warCapData = [parseInt(warCapVal)];
      resCapData = [resCapVal];

      let autDemChartData = {
        labels,
        datasets: [
          {
            id: "conCap",
            type: "line",
            label: '契約容量',
            fill: false,
            backgroundColor: color.danger._500,
            borderColor: color.danger._500,
            pointColor: color.danger._500,
            pointBackgroundColor: color.danger._500,
            data: conCapData,
            order: 1,
            spanGaps: true
          },
          {
            id: "warCap",
            type: "line",
            label: '警戒容量',
            fill: false,
            borderDash: [5, 5],
            backgroundColor: color.danger._500,
            borderColor: color.danger._500,
            pointColor: color.danger._500,
            pointBackgroundColor: color.danger._500,
            data: warCapData,
            order: 2,
            spanGaps: true
          },
          {
            id: "resCap",
            type: "line",
            label: '復歸值',
            fill: false,
            backgroundColor: color.info._500,
            borderColor: color.info._500,
            pointColor: color.info._500,
            pointBackgroundColor: color.info._500,
            data: resCapData,
            order: 3,
            spanGaps: true
          },
          {
            id: "kWH",
            type: "line",
            label: '即時功率',
            fill: false,
            backgroundColor: color.success._100,
            borderColor: color.success._100,
            pointColor: color.success._100,
            pointBackgroundColor: color.success._100,
            data: [],
            order: 4,
            spanGaps: true
          }
        ]
      }

      let autDemChartOptions = {
        maintainAspectRatio: false,
        responsive: true,
        animation: {
          y: { duration: 0 },
          x: { duration: 200 },
        },
        plugins: {
          legend: {
            display: true,
            fullSize: true,
            labels: {
              font: {
                  size: 16,
                  lineHeight: "40px",
              },
              usePointStyle: true,
              generateLabels: (chart) => {
                if (!chart.data) return [];
                return chart.data.datasets.map(
                  (dataset, index) => ({
                    datasetIndex: index,
                    text: dataset.label !== "即時功率"?`${dataset.label} ${dataset.data[0]} KW`: `${dataset.label} KW`,
                    fontColor: color.fusion._100,
                    lineDash: dataset.borderDash ? [5, 5] : [],
                    lineWidth: 5,
                    fillStyle: dataset.backgroundColor,
                    strokeStyle: dataset.borderColor,
                    pointStyle: "line",
                    hidden: !chart.getDatasetMeta(index).visible,
                  })
                )
              },

            },
          },
        },
        scales: {
          x: {
            offset: true,
            grid: { color: color.fusion._500 },
            ticks: {
              //maxTicksLimit: 10,
              //count: 10,
              //callback: function (value, index, ticks) {
              //    return value
              //}
            },
          },
          y: {
            ticks: {
              min: 0,
              beginAtZero: true
            },
          }
        },
        //tooltips: {
        //    callbacks: {
        //        label: function (tooltipItem) {
        //            let isTodayOrYes = tooltipItem.datasetIndex == 1 ? "上週" : "本週";
        //            return isTodayOrYes + "用電量 : " + tooltipItem.value + " kWH";
        //        },
        //        title: function (tooltipItem) {
        //            let result = tooltipItem[0].xLabel.toString();
        //            return result;
        //        }
        //    }
        //},
      }

      autDemChart = new Chart(autDemChartCanvas, {
        data: autDemChartData,
        options: autDemChartOptions,
        plugins: [{
        beforeInit: function(chart, args, options) {
            chart.legend.afterFit = function() {
        this.height = this.height + 50;
      };
        }
    }]
      })
    } else {
      autDemChart.data.datasets[0].data.forEach((x, i) => autDemChart.data.datasets[0].data[i] = conCapVal);
      autDemChart.data.datasets[1].data.forEach((x, i) => autDemChart.data.datasets[1].data[i] = warCapVal);
      autDemChart.data.datasets[2].data.forEach((x, i) => autDemChart.data.datasets[2].data[i] = resCapVal);
      autDemChart.update();
    }

  }

  onEvent("yt:tab:change", "[data-tabname=energyTab]", function () {
    $("#eneSubSysList").parent("div").show();
    let type = $(this).data("id");
    getSubSysList(type);
    getElecBySubSysTag(type);
    if (type == "1" || type == "2") {
      $("#eneSubSysList").parent("div").hide();
    }
    // 自動需量
    if (type != "0") {
      $("#elecAutoDem").hide();
    } else {
      $("#elecAutoDem").show();
    }
  })

  onEvent("click", "#ediAutDemBtn", function () {
    $("#txtConCap").val($("[data-id=contract_capacity]").text());
    $("#txtWarCap").val($("[data-id=warning_capacity]").text());
    $("#txtResCap").val($("[data-id=resetting_value]").text());
    $("#autDemModal").modal("show");
  })

  onEvent("click", "#autDemSavBtn", function () {
    formValidate(() => {
      ediAutDemVal(() => {
        $("#autDemModal").modal("hide");
        getAutDemVal();
      });
    });
  })

  function formValidate(validFn = null) {
    $("#autDemForm").validate({
      rules: {
        txtConCap: { number: true },
        txtWarCap: { number: true },
        txtResCap: { number: true },
      },
      message: {
        txtConCap: { number: "請輸入數字" },
        txtWarCap: { number: "請輸入數字" },
        txtResCap: { number: "請輸入數字" },
      }
    })

    if ($("#autDemForm").valid()) {
      validFn ? validFn() : "";
    }

  }

</script>