<main id="js-page-content" role="main" class="page-content"> <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">今日耗電量 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">用電比較</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="elecAutoReq" 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"></i> 自動需量管理</h4> <a href="#" class="btn btn-success"><i class="fal fa-pencil"></i> Edit</a> </div> <div class="row align-items-center"> <div class="col-sm-12 col-lg-5"> <p class="card-text color-white pl-5 pr-3 d-flex justify-content-between"> <span>契約容量</span> <span>1000 kW</span> </p> <p class="card-text color-white pl-5 pr-3 d-flex justify-content-between"> <span>警戒容量</span> <span>800 kW</span> </p> <p class="card-text color-white pl-5 pr-3 d-flex justify-content-between"> <span>復歸值</span> <span>600 kW</span> </p> </div> <div class="col-sm-12 col-lg-7"> <img src="img/clouds.png" class="img-fluid" style="min-height: 220px;"> </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> </main> <script> var subSysList = []; var subSysElecList = []; var todayElecChart = null; var elecCompChart = null; var elecCardConText = [{ text1: "即時功耗 kW", text2:"佔比 %"},{ text1: "即時功耗 kW", text2:"佔比 %"},{ text1: "即時功耗 kW", text2:"佔比 %"},{ text1: "即時發電功率 kW", text2:"供電佔比 %"}] $(function () { getSubSysList(); getElecBySubSysTag(); }) // 左上方 系統小類卡片區塊 function getSubSysList(type = 0) { subSysList = []; let url = baseApiUrl + "/api/Device/GetMainSub"; 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 strHtml = ''; $.each(res.data.history_Main_Systems, (index, mainSysObj) => { $.each(mainSysObj.history_Sub_systems, (index2, subSysObj) => { subSysList.push(subSysObj); if (type == 0 || (type == 3 && mainSysObj.main_system_tag == "ELEV")) { strHtml += `<div class="col-sm-12 col-xl-4 mb-2"> <div class="card elecCard cur-poi" data-id="${mainSysObj.main_system_tag}_${subSysObj.sub_system_tag}" data-name="${subSysObj.full_name}"> <div class="card-body"> <h4 class="card-title color-white">${subSysObj.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.main_system_tag}_${subSysObj.sub_system_tag}"></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.main_system_tag}_${subSysObj.sub_system_tag}"></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() { 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; getBajaData(); } }, null, "POST").send(); } // 取得 baja 即時資料 function getBajaData() { 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 = elecObj.system_device_tag?.split("_").slice(0, 8).join("/"); getElectricMeterNoweDataByBaja(devPath, (data) => { data = data.data; let result = data.filter(x => x.name == "P")[0]?.value; result = result ? result.roundDecimal(2) : 0; $(`#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", "Mitsubishi_Sup", 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", "Mitsubishi_Sup", prevThirtyDay, tomorrow, (data) => { let curDay = (new Date()).getDay() == 0 ? 7 : (new Date()).getDay(); 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 chartTodaysElec(todayData) { 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: { xAxes: [{ offset: true, gridLines: { color: color.fusion._500 }, ticks: { callback: function (value, index, ticks) { return value } }, }], yAxes: [{ ticks: { min: 0, beginAtZero: true }, }] }, 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) { let elecCompChartCanvas = $('#elecCompChart').get(0).getContext('2d'); let elecCompChartData = { labels: curWeekData.map(x => dayToChiDay(strToDate(x.timestamp.$cEncStr, "day"))), 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: { xAxes: [{ offset: true, gridLines: { color: color.fusion._500 }, ticks: { callback: function (value, index, ticks) { return value } }, }], yAxes: [{ 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, { data: elecCompChartData, options: elecCompChartOptions }) } onEvent("yt:tab:change", "[data-tabname=energyTab]", function () { $("#eneSubSysList").parent("div").show(); let type = $(this).data("id"); getSubSysList(type); getElecBySubSysTag(); if (type == "1" || type == "2") { $("#eneSubSysList").parent("div").hide(); } // 自動需量 if (type != "0") { $("#elecAutoReq").hide(); } else { $("#elecAutoReq").show(); } }) </script>