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.data[0]} 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>