<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>