[Fromtend][能源管理] 自動須量圖表及編輯呈現更新

Frontend/_energyManagement.html

@@ -7,7 +7,7 @@
                 <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">
@@ -48,31 +48,32 @@
                     </div>
                 </div>
             </div>
-            <div id="elecAutoReq" class="row flex-column col-xl-6 m-0 p-0">
+            <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"></i> 自動需量管理</h4>
-                                <a href="#" class="btn btn-success"><i class="fal fa-pencil"></i> Edit</a>
+                                
+                                <button id="ediAutDemBtn" class="btn btn-success"><i class="fal fa-pencil"></i> 編輯</button>
                             </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>
+                                        <span><span data-id="contract_capacity"></span> kW</span>
                                     </p>
                                     <p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
                                         <span>警戒容量</span>
-                                        <span>800 kW</span>
+                                        <span><span data-id="warning_capacity"></span> kW</span>
                                     </p>
                                     <p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
                                         <span>復歸值</span>
-                                        <span>600 kW</span>
+                                        <span><span data-id="resetting_value"></span> kW</span>
                                     </p>
                                 </div>
-                                <div class="col-sm-12 col-lg-7">
+                                <div class="col-sm-12 col-lg-7" style=" min-height:250px;">
-                                    <img src="img/clouds.png" class="img-fluid" style="min-height: 220px;">
+                                    <canvas class="chart" id="autDemChart"></canvas>
                                 </div>
                             </div>
                         </div>
@@ -186,13 +187,56 @@
                 </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>
 
 
 
@@ -201,13 +245,16 @@
 <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();
     })
 
     // 左上方 系統小類卡片區塊
@@ -226,7 +273,7 @@
                 $.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")) { 
+                        if ((type == 0 || (type == 3 && mainSysObj.main_system_tag == "ELEV")) && filNotShowSysSub.indexOf(subSysObj.sub_system_tag) == -1) { 
                             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">
@@ -277,11 +324,77 @@
 
             } else {
                 subSysElecList = res.data;
+                tarElePath = subSysElecList.filter(x => x.mainSubTag == "total")[0]?.system_device_tag ?? "";
                 getBajaData();
+                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 > 10) {
+                        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 > 10) {
+                    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 < 10; i++) {
+                            autDemChart.data.labels.push("");
+                        }
+                        
+                        autDemChart.update();
+                        console.log(autDemChart)
+                    }
+                }
+            }
+        })
+    }
+
     // 取得 baja 即時資料
     function getBajaData() {
         startPageLoading();
@@ -346,15 +459,15 @@
                 todayElecChart?.destroy();
                 return;
             }
-
+            
-            getElectricMeterHourDataByBaja(tarDevNum + "_KWH", "Mitsubishi_Sup", yesterday, tomorrow, (data) => {
+            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", "Mitsubishi_Sup", prevThirtyDay, tomorrow, (data) => {
+            getElectricMeterDayDataByBaja(tarDevNum + "_KWH", n4Sup, 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));
@@ -381,6 +494,50 @@
         }
     }
 
+    // 取得 自動須量
+    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) {
         let todayElecChartCanvas = $('#todayElecChart').get(0).getContext('2d');
@@ -397,7 +554,6 @@
                     borderColor: color.success._500,
                     backgroundColor: color.success._500,
                     pointBackgroundColor: color.success._500,
-
                     order: 1,
                     borderWidth: 3,
                 }
@@ -411,22 +567,22 @@
                 display: true,
             },
             scales: {
-                xAxes: [{
+                x: {
                     offset: true,
-                    gridLines: { color: color.fusion._500 },
+                    /*grid: { color: color.fusion._100 },*/
                     ticks: {
                         callback: function (value, index, ticks) {
                             return value
                         }
                     },
-                }],
+                },
-                yAxes: [{
+                y: {
-
+                    grid: { color: color.fusion._500 },
+                    beginAtZero: true,
                     ticks: {
                         min: 0,
-                        beginAtZero: true
                     },
-                }]
+                }
             },
             tooltips: {
                 callbacks: {
@@ -489,22 +645,22 @@
                 display: true,
             },
             scales: {
-                xAxes: [{
+                x: {
                     offset: true,
-                    gridLines: { color: color.fusion._500 },
+                    grid: { color: color.fusion._500 },
                     ticks: {
                         callback: function (value, index, ticks) {
                             return value
                         }
                     },
-                }],
+                },
-                yAxes: [{
+                y: {
 
                     ticks: {
                         min: 0,
                         beginAtZero: true
                     },
-                }]
+                }
             },
             tooltips: {
                 callbacks: {
@@ -526,6 +682,155 @@
             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: 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: {
+                            usePointStyle: true,
+                            generateLabels: (chart) => {
+                                if (!chart.data) return [];
+                                return chart.data.datasets.map(
+                                    (dataset, index) => ({
+                                        datasetIndex:index,
+                                        text: dataset.label,
+                                        fontColor: color.fusion._100,
+                                        lineDash: dataset.borderDash ? [5,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
+            })
+        } 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();
@@ -537,9 +842,46 @@
         }
         // 自動需量
         if (type != "0") {
-            $("#elecAutoReq").hide();
+            $("#elecAutoDem").hide();
         } else {
-            $("#elecAutoReq").show();
+            $("#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>