From 2c02b75baa362159b914bfbc513c8642a65f0220 Mon Sep 17 00:00:00 2001
From: Celeste <aafree2014@gmail.com>
Date: Wed, 23 Aug 2023 14:33:39 +0800
Subject: [PATCH] =?UTF-8?q?dashbord=20=E6=A0=A1=E5=8D=80=E5=8D=B3=E6=99=82?=
 =?UTF-8?q?=E5=A5=91=E7=B4=84=E5=AE=B9=E9=87=8F=E5=9C=96=E8=A1=A8=20|=20?=
 =?UTF-8?q?=E5=A0=B1=E8=A1=A8=E6=A3=9F=E5=88=A5=E6=94=B9=E5=A4=9A=E9=81=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Frontend/_dashboard.html        |   79 +-
 Frontend/_reportManagement.html | 1926 ++++++++++++++++---------------
 Frontend/js/n4js/bajatest.js    | 1226 ++++++++++++--------
 3 files changed, 1747 insertions(+), 1484 deletions(-)

diff --git a/Frontend/_dashboard.html b/Frontend/_dashboard.html
index 608f55f..5704fb8 100644
--- a/Frontend/_dashboard.html
+++ b/Frontend/_dashboard.html
@@ -166,7 +166,7 @@
     </div>
   </div>
 
-  <div class="row">
+  <div class="row h-100">
     <div class="col-sm-12 col-lg-4">
       <div class="row" id="sysSubBtnList"></div>
     </div>
@@ -182,9 +182,9 @@
             <div class="panel-hdr">
               <h2>本月／上月用電比較 (kWh)</h2>
             </div>
-            <div class="panel-container show">
-              <div class="panel-content poisition-relative">
-                <div style="width: 100%; min-height: 270px">
+            <div class="panel-container show h-100">
+              <div class="panel-content poisition-relative h-100">
+                <div style="width: 100%; min-height: 450px">
                   <canvas class="chart" id="eveMonElecChart"></canvas>
                 </div>
               </div>
@@ -192,12 +192,30 @@
           </div>
         </div>
         <div class="col-4">
-          <div id="panel-3" class="panel" style="height: calc(100% - 1.5rem)">
-            <div class="panel-hdr">
-              <h2>契約容量</h2>
+          <div class="row h-100">
+            <div class="col-12 h-50">
+              <div id="panel-3"
+                   class="panel"
+                   style="height: calc(100% - 1.5rem)">
+                <div class="panel-hdr">
+                  <h2>即時契約容量占比 - 第一校區</h2>
+                </div>
+                <div class="panel-container show h-100">
+                  <div class="h-100 py-2" id="contractValueChart"></div>
+                </div>
+              </div>
             </div>
-            <div class="panel-container h-100 show">
-              <div class="h-100" id="contractValueChart"></div>
+            <div class="col-12 h-50">
+              <div id="panel-3"
+                   class="panel"
+                   style="height: calc(100% - 1.5rem)">
+                <div class="panel-hdr">
+                  <h2>即時契約容量占比 - 第一校區</h2>
+                </div>
+                <div class="panel-container h-100 show">
+                  <div class="h-100 py-2" id="contractValueChart2"></div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -268,6 +286,7 @@
   var errRecChart = null;
   var errChkChart = null;
   var contractValueChart = null;
+  var contractValueChart2 = null;
   var loadedCnt = 0;
   var chartDataCnt = {
     alarmCnt: 0,
@@ -283,6 +302,8 @@
     show3DModel();
     getSubList();
     getAutDemVal();
+    getContractValueChange("Arean1");
+    getContractValueChange("Arean2");
   });
 
   function demoSubList() {
@@ -405,19 +426,46 @@
 
     myBaja.setSubscribeElectricmeterByBql(tempOrdPath);
     myBaja.setSubscribeElectricmeterCallBack(function (data) {
-      console.log(data.point_name);
       if (data.point_name == "P") {
         let value = parseFloat(data.value).roundDecimal(2);
         $("#insPower").text(value);
         // $("#insPowerPer").text((value / 4).roundDecimal(2));
         $("#insPowerPer").text((value / contractCapacity).roundDecimal(2));
-        chartContractValue((value / contractCapacity).roundDecimal(2) * 100);
       }
     });
     myBaja.setSubscribeElectricmeterEndCallBack(function () {
       chkBajaLoaded();
     });
   }
+  let contractCapacityForchart1, contractCapacityForchart2;
+  function getContractValueChange(compus) {
+    let devPath = `Data/${compus}`;
+    BajaSubscribeElectricmeterByBql({ devicePath: devPath }, (data) => {
+      let value = data.find(({ point_name }) => point_name === "P")?.value;
+
+      if (compus === "Arean1") {
+        if (data.some(({ point_name }) => point_name === "Capacity")) {
+          contractCapacityForchart1 = data.find(
+            ({ point_name }) => point_name === "Capacity"
+          )?.value;
+        }
+        chartContractValue(
+          "contractValueChart",
+          (value / contractCapacityForchart1).roundDecimal(2) * 100
+        );
+      } else {
+        if (data.some(({ point_name }) => point_name === "Capacity")) {
+          contractCapacityForchart2 = data.find(
+            ({ point_name }) => point_name === "Capacity"
+          )?.value;
+        }
+        chartContractValue(
+          "contractValueChart2",
+          (value / contractCapacityForchart2).roundDecimal(2) * 100
+        );
+      }
+    });
+  }
 
   //從 baja 取得電表用電量
   function getElectricBaja() {
@@ -521,7 +569,6 @@
       (data) => {
         const cur = new Date().getMonth();
         const pre = new Date().getMonth() - 1;
-        console.log(data.data);
         let curMonthData = data.data.filter(
           (x) => x.timestamp.$date.$month === cur
         );
@@ -780,10 +827,6 @@
 
   // 圖表 - 本月即上月用電量
   function chartEveMonsElec(curMonData, prevMonData) {
-    console.log(
-      curMonData.map((x) => x.sum),
-      prevMonData.map((x) => x.sum)
-    );
     let eveMonElecChartCanvas = $("#eveMonElecChart").get(0).getContext("2d");
 
     let eveMonElecChartData = {
@@ -1058,8 +1101,8 @@
   }
 
   // 圖表 - 取得契約容量
-  function chartContractValue(value) {
-    var chartDom = document.getElementById("contractValueChart");
+  function chartContractValue(ele, value) {
+    var chartDom = document.getElementById(ele);
     contractValueChart = echarts.init(chartDom, null, {
       renderer: "canvas",
       useDirtyRect: false,
diff --git a/Frontend/_reportManagement.html b/Frontend/_reportManagement.html
index 9513f51..f4448e5 100644
--- a/Frontend/_reportManagement.html
+++ b/Frontend/_reportManagement.html
@@ -1,1005 +1,1017 @@
 <main id="js-page-content" role="main" class="page-content">
-    <div class="row">
-        <div class="col-sm-12 col-xl-12">
-            <h1 class="p-2 mb-0">報表管理</h1>
+  <div class="row">
+    <div class="col-sm-12 col-xl-12">
+      <h1 class="p-2 mb-0">報表管理</h1>
 
-            <div class="row">
-                <div class="col-sm-12 col-xl-2">
-                    <div class="rounded border border-white">
-                        <!-- nav-menu-reset will reset the font colors -->
-                        <ul class="nav-menu nav-menu-reset nav-menu-compact mb-sm-4 mb-md-0 rounded border border-white"
-                            data-nav-accordion="true">
-                            <li class="active">
-                                <a name="reportTypeRadio" href="javascript:;" data-value="day">
-                                    <span class="nav-link-text"> 電錶 - 日報表 </span>
-                                </a>
-                            </li>
-                            <li>
-                                <a name="reportTypeRadio"
-                                   href="javascript:;"
-                                   data-value="month">
-                                    <span class="nav-link-text"> 電錶 - 月報表 </span>
-                                </a>
-                            </li>
-                            <li>
-                                <a name="reportTypeRadio" href="javascript:;" data-value="year">
-                                    <span class="nav-link-text"> 電錶 - 年報表 </span>
-                                </a>
-                            </li>
-                            <li>
-                                <a name="reportTypeRadio"
-                                   href="javascript:;"
-                                   data-value="compare">
-                                    <span class="nav-link-text"> 電錶 - 同期比較 </span>
-                                </a>
-                            </li>
-                        </ul>
-                        <div class="filter-message js-filter-message m-0 text-left pl-4 py-3 fw-500"></div>
-                    </div>
-                </div>
-                <div class="col-12 col-xl-10">
-                    <div class="panel-hdr" style="min-height: auto">
-                        <h2 class="py-2" id="xx">
-                            <div class="col-auto">
-                                <span class="report-type-name"></span>費每度單價
-                            </div>
-                            <input type="text"
-                                   id="elecPriceDegree"
-                                   class="form-control col-1" />
-                            <div id="compareTypeBtnsDiv"
-                                 class="item btn-group btn-group-toggle offset-1"
-                                 data-toggle="buttons"
-                                 style="display: none">
-                                <label class="btn btn-outline-success waves-effect active waves-themed">
-                                    <input type="radio"
-                                           name="compareTypeRadio"
-                                           id="compareMonth"
-                                           value="month"
-                                           checked />
-                                    年度同月比較
-                                </label>
-                                <label class="btn btn-outline-success waves-effect waves-themed">
-                                    <input type="radio"
-                                           name="compareTypeRadio"
-                                           id="compareDay"
-                                           value="day" />
-                                    月份同日比較
-                                </label>
-                            </div>
-                            <div class="col-auto offset-1">
-                                選擇<span id="elecTimeText">單一月份</span>
-                            </div>
-                            <input type="text"
-                                   id="elecMonthDate"
-                                   class="form-control col-2" />
-                            <input type="text"
-                                   id="elecYearDate"
-                                   class="form-control col-2"
-                                   style="display: none" />
-                            <div id="elecStartEndDiv"
-                                 class="row m-0 align-items-center"
-                                 style="display: none">
-                                <input type="text"
-                                       id="elecSYearDate"
-                                       class="form-control col-4" />
-                                <span class="px-2">~</span>
-                                <input type="text"
-                                       id="elecEYearDate"
-                                       class="form-control col-4" />
-                            </div>
-                            <div id="elecCompareDiv"
-                                 class="row m-0 align-items-center"
-                                 style="display: none">
-                                <div id="elecComYearDiv" class="row m-0 align-items-center">
-                                    <input type="text"
-                                           id="elecCom1YearDate"
-                                           class="form-control col-4" />
-                                    <span class="px-2">、</span>
-                                    <input type="text"
-                                           id="elecCom2YearDate"
-                                           class="form-control col-4" />
-                                </div>
-                                <div id="elecComMonthDiv"
-                                     class="row m-0 align-items-center"
-                                     style="display: none">
-                                    <input type="text"
-                                           id="elecCom1MonthDate"
-                                           class="form-control col-4" />
-                                    <span class="px-2">、</span>
-                                    <input type="text"
-                                           id="elecCom2MonthDate"
-                                           class="form-control col-4" />
-                                </div>
-                            </div>
-                        </h2>
-                    </div>
-                    <div class="panel-hdr" style="min-height: auto">
-                        <h2 class="py-2 col-12" id="building">
-                            <div class="col-1">棟別</div>
-                            <div class="item btn-group btn-group-toggle"
-                                 data-toggle="buttons"></div>
-                        </h2>
-                    </div>
-                    <div class="panel-hdr" style="min-height: auto">
-                        <!-- <h2 class="py-2 col-12" id="floors">
-                          <div class="col-1">樓層</div>
-                          <button
-                            type="button"
-                            class="btn btn-secondary float-right allbtn mr-2 col-auto align-self-center"
-                            onclick="allFloor()"
-                            style="display: none"
-                          >
-                            全選
-                          </button>
-                          <div
-                            class="item btn-group btn-group-toggle row m-0"
-                            data-toggle="buttons"
-                            style="row-gap: 5px"
-                          ></div>
-                          <span
-                            class="text-notice notice-noSelectedBuilding"
-                            style="display: none"
-                            >請選擇棟別</span
-                          >
-                          <span class="text-notice notice-noBuilding" style="display: none"
-                            >該棟別沒有樓層</span
-                          >
-                        </h2> -->
-                    </div>
-                    <div class="d-flex my-2">
-                        <button type="button"
-                                class="btn btn-primary"
-                                onclick="getMeterData()">
-                            查詢
-                        </button>
-                        <button type="button"
-                                class="btn btn-danger ml-2"
-                                onclick="setExportList()">
-                            匯出
-                        </button>
-                        <div id="tableLoading"
-                             class="row m-0 align-items-center"
-                             style="display: none">
-                            <div class="spinner-border text-info mx-2"
-                                 role="status"
-                                 style="width: 1.2rem; height: 1.2rem">
-                                <span class="sr-only">Loading...</span>
-                            </div>
-                            <span id="tableLoadingText">列表讀取中</span>
-                        </div>
-                        <!-- <button type="button" class="btn btn-primary" onclick="SaveRealTimeCombination()">儲存常用組合</button>
-                        <button type="button" class="btn btn-danger ml-2" onclick="CleanAll()">全部清除</button>
-                        <button type="button" class="btn btn-info allbtn ml-2" onclick="LookRealTime()">查看即時資訊</button> -->
-                    </div>
-
-                    <table id="report_table"
-                           class="table table-bordered table-striped text-center m-0"></table>
-                </div>
-            </div>
+      <div class="row">
+        <div class="col-sm-12 col-xl-2">
+          <div class="rounded border border-white">
+            <!-- nav-menu-reset will reset the font colors -->
+            <ul class="nav-menu nav-menu-reset nav-menu-compact mb-sm-4 mb-md-0 rounded border border-white"
+                data-nav-accordion="true">
+              <li class="active">
+                <a name="reportTypeRadio" href="javascript:;" data-value="day">
+                  <span class="nav-link-text"> 電錶 - 日報表 </span>
+                </a>
+              </li>
+              <li>
+                <a name="reportTypeRadio"
+                   href="javascript:;"
+                   data-value="month">
+                  <span class="nav-link-text"> 電錶 - 月報表 </span>
+                </a>
+              </li>
+              <li>
+                <a name="reportTypeRadio" href="javascript:;" data-value="year">
+                  <span class="nav-link-text"> 電錶 - 年報表 </span>
+                </a>
+              </li>
+              <li>
+                <a name="reportTypeRadio"
+                   href="javascript:;"
+                   data-value="compare">
+                  <span class="nav-link-text"> 電錶 - 同期比較 </span>
+                </a>
+              </li>
+            </ul>
+            <div class="filter-message js-filter-message m-0 text-left pl-4 py-3 fw-500"></div>
+          </div>
         </div>
+        <div class="col-12 col-xl-10">
+          <div class="panel-hdr" style="min-height: auto">
+            <h2 class="py-2" id="xx">
+              <div class="col-auto">
+                <span class="report-type-name"></span>費每度單價
+              </div>
+              <input type="text"
+                     id="elecPriceDegree"
+                     class="form-control col-1" />
+              <div id="compareTypeBtnsDiv"
+                   class="item btn-group btn-group-toggle offset-1"
+                   data-toggle="buttons"
+                   style="display: none">
+                <label class="btn btn-outline-success waves-effect active waves-themed">
+                  <input type="radio"
+                         name="compareTypeRadio"
+                         id="compareMonth"
+                         value="month"
+                         checked />
+                  年度同月比較
+                </label>
+                <label class="btn btn-outline-success waves-effect waves-themed">
+                  <input type="radio"
+                         name="compareTypeRadio"
+                         id="compareDay"
+                         value="day" />
+                  月份同日比較
+                </label>
+              </div>
+              <div class="col-auto offset-1">
+                選擇<span id="elecTimeText">單一月份</span>
+              </div>
+              <input type="text"
+                     id="elecMonthDate"
+                     class="form-control col-2" />
+              <input type="text"
+                     id="elecYearDate"
+                     class="form-control col-2"
+                     style="display: none" />
+              <div id="elecStartEndDiv"
+                   class="row m-0 align-items-center"
+                   style="display: none">
+                <input type="text"
+                       id="elecSYearDate"
+                       class="form-control col-4" />
+                <span class="px-2">~</span>
+                <input type="text"
+                       id="elecEYearDate"
+                       class="form-control col-4" />
+              </div>
+              <div id="elecCompareDiv"
+                   class="row m-0 align-items-center"
+                   style="display: none">
+                <div id="elecComYearDiv" class="row m-0 align-items-center">
+                  <input type="text"
+                         id="elecCom1YearDate"
+                         class="form-control col-4" />
+                  <span class="px-2">、</span>
+                  <input type="text"
+                         id="elecCom2YearDate"
+                         class="form-control col-4" />
+                </div>
+                <div id="elecComMonthDiv"
+                     class="row m-0 align-items-center"
+                     style="display: none">
+                  <input type="text"
+                         id="elecCom1MonthDate"
+                         class="form-control col-4" />
+                  <span class="px-2">、</span>
+                  <input type="text"
+                         id="elecCom2MonthDate"
+                         class="form-control col-4" />
+                </div>
+              </div>
+            </h2>
+          </div>
+          <div class="panel-hdr" style="min-height: auto">
+            <h2 class="py-2 col-12" id="building">
+              <div class="col-1">棟別</div>
+              <div class="item btn-group btn-group-toggle"
+                   data-toggle="buttons"></div>
+            </h2>
+          </div>
+          <div class="panel-hdr" style="min-height: auto">
+            <!-- <h2 class="py-2 col-12" id="floors">
+              <div class="col-1">樓層</div>
+              <button
+                type="button"
+                class="btn btn-secondary float-right allbtn mr-2 col-auto align-self-center"
+                onclick="allFloor()"
+                style="display: none"
+              >
+                全選
+              </button>
+              <div
+                class="item btn-group btn-group-toggle row m-0"
+                data-toggle="buttons"
+                style="row-gap: 5px"
+              ></div>
+              <span
+                class="text-notice notice-noSelectedBuilding"
+                style="display: none"
+                >請選擇棟別</span
+              >
+              <span class="text-notice notice-noBuilding" style="display: none"
+                >該棟別沒有樓層</span
+              >
+            </h2> -->
+          </div>
+          <div class="d-flex my-2">
+            <button type="button"
+                    class="btn btn-primary"
+                    onclick="getMeterData()">
+              查詢
+            </button>
+            <button type="button"
+                    class="btn btn-danger ml-2"
+                    onclick="setExportList()">
+              匯出
+            </button>
+            <div id="tableLoading"
+                 class="row m-0 align-items-center"
+                 style="display: none">
+              <div class="spinner-border text-info mx-2"
+                   role="status"
+                   style="width: 1.2rem; height: 1.2rem">
+                <span class="sr-only">Loading...</span>
+              </div>
+              <span id="tableLoadingText">列表讀取中</span>
+            </div>
+            <!-- <button type="button" class="btn btn-primary" onclick="SaveRealTimeCombination()">儲存常用組合</button>
+            <button type="button" class="btn btn-danger ml-2" onclick="CleanAll()">全部清除</button>
+            <button type="button" class="btn btn-info allbtn ml-2" onclick="LookRealTime()">查看即時資訊</button> -->
+          </div>
+
+          <table id="report_table"
+                 class="table table-bordered table-striped text-center m-0"></table>
+        </div>
+      </div>
     </div>
+  </div>
 </main>
 
 <script>
-    var default_building = localStorage.getItem("default_building");
-    var Building; //取得所有棟別
-    var SelectBuildings = new Array(0); //選擇的區域
-    var datatable;
-    var datepickerOptions = {
-        autoclose: true,
-        minViewMode: 1,
-        language: "zh-TW",
-        format: "yyyy-mm",
-    };
-    var reportTypeDict = {
-        RWater: {
-            name: "Water",
-            chiName: "水",
-            listApiUrl: "WaterList",
-            exportListApiUrl: "ExportWaterList",
-        },
-        RElec: {
-            name: "Electric",
-            chiName: "電",
-            listApiUrl: "ElectricList",
-            exportListApiUrl: {
-                day: "ExportElectricList",
-                month: "ExportElectricList",
-                year: "ExportElectricList",
-                compare: "ExportElectricCompareList",
-            }
-        },
-    };
-    var token = cookies.get("JWT-Authorization");
+  var default_building = localStorage.getItem("default_building");
+  var Building; //取得所有棟別
+  var SelectBuildings = new Array(0); //選擇的區域
+  var datatable;
+  var datepickerOptions = {
+    autoclose: true,
+    minViewMode: 1,
+    language: "zh-TW",
+    format: "yyyy-mm",
+  };
+  var reportTypeDict = {
+    RWater: {
+      name: "Water",
+      chiName: "水",
+      listApiUrl: "WaterList",
+      exportListApiUrl: "ExportWaterList",
+    },
+    RElec: {
+      name: "Electric",
+      chiName: "電",
+      listApiUrl: "ElectricList",
+      exportListApiUrl: {
+        day: "ExportElectricList",
+        month: "ExportElectricList",
+        year: "ExportElectricList",
+        compare: "ExportElectricCompareList",
+      },
+    },
+  };
+  var token = cookies.get("JWT-Authorization");
 
-    $(function () {
-        console.log("即時趨勢進入點");
-        setNameByType();
-        initDatePicker();
-        eventsInit();
-        getPrice();
-        setReportTable([]);
-        $("#elecSYearDate")
-            .val(moment().subtract(5, "years").format("YYYY"))
-            .trigger("change");
-        $("#elecEYearDate").val(moment().format("YYYY")).trigger("change");
-        $("#elecCom1YearDate").val(moment().subtract(1, "years").format("YYYY"));
-        $("#elecCom2YearDate").val(moment().format("YYYY"));
-        $("#elecCom1MonthDate").val(
-            moment().subtract(1, "months").format("YYYY-MM")
-        );
-        $("#elecCom2MonthDate").val(moment().format("YYYY-MM"));
-        //調整畫面
-        $("#js-page-content").removeClass("mt-0");
+  $(function () {
+    console.log("即時趨勢進入點");
+    setNameByType();
+    initDatePicker();
+    eventsInit();
+    getPrice();
+    setReportTable([]);
+    $("#elecSYearDate")
+      .val(moment().subtract(5, "years").format("YYYY"))
+      .trigger("change");
+    $("#elecEYearDate").val(moment().format("YYYY")).trigger("change");
+    $("#elecCom1YearDate").val(moment().subtract(1, "years").format("YYYY"));
+    $("#elecCom2YearDate").val(moment().format("YYYY"));
+    $("#elecCom1MonthDate").val(
+      moment().subtract(1, "months").format("YYYY-MM")
+    );
+    $("#elecCom2MonthDate").val(moment().format("YYYY-MM"));
+    //調整畫面
+    $("#js-page-content").removeClass("mt-0");
 
-        var html = "";
-        for (let building of pageAct.buildList) {
-            html += `<label class="btn btn-outline-success waves-effect waves-themed">
-                    <input type="radio" name="buildingRadio" id="radio_${building.building_tag}" value="${building.building_tag}" onChange="SelectBuild(this,'${building.building_tag}')"> ${building.full_name}
+    var html = "";
+    for (let building of pageAct.buildList) {
+      html += `<label class="btn btn-outline-success waves-effect waves-themed">
+                    <input type="checkbox" name="buildingRadio" id="radio_${building.building_tag}" value="${building.building_tag}" onChange="SelectBuild(this,'${building.building_tag}')"> ${building.full_name}
                 </label>`;
-        }
-        $("#building").find(".item").empty();
-        $("#building").find(".item").append(html);
+    }
+    $("#building").find(".item").empty();
+    $("#building").find(".item").append(html);
 
-        checkIsSelectedBuilding();
+    checkIsSelectedBuilding();
+  });
+
+  function setNameByType() {
+    $(".report-type-name").text(reportTypeDict["RElec"]["chiName"]);
+  }
+
+  function initDatePicker(name = null, otherParam = {}) {
+    const datepickerMonthOptions = Object.assign(
+      {},
+      datepickerOptions,
+      Object.assign(
+        {
+          minViewMode: 1,
+          format: "yyyy-mm",
+        },
+        otherParam
+      )
+    );
+    const datepickerYearOptions = Object.assign(
+      {},
+      datepickerOptions,
+      Object.assign(
+        {
+          minViewMode: 2,
+          format: "yyyy",
+        },
+        otherParam
+      )
+    );
+    const datepickerSYearOptions = Object.assign(
+      {},
+      datepickerOptions,
+      Object.assign(
+        {
+          minViewMode: 2,
+          format: "yyyy",
+        },
+        otherParam
+      )
+    );
+    const datepickerEYearOptions = Object.assign(
+      {},
+      datepickerOptions,
+      Object.assign(
+        {
+          minViewMode: 2,
+          format: "yyyy",
+        },
+        otherParam
+      )
+    );
+    const datepickerComYear1Options = Object.assign(
+      {},
+      datepickerOptions,
+      Object.assign(
+        {
+          minViewMode: 2,
+          format: "yyyy",
+        },
+        otherParam
+      )
+    );
+    const datepickerComYear2Options = Object.assign(
+      {},
+      datepickerOptions,
+      Object.assign(
+        {
+          minViewMode: 2,
+          format: "yyyy",
+        },
+        otherParam
+      )
+    );
+    const datepickerComMonth1Options = Object.assign(
+      {},
+      datepickerOptions,
+      Object.assign(
+        {
+          minViewMode: 1,
+          format: "yyyy-mm",
+        },
+        otherParam
+      )
+    );
+    const datepickerComMonth2Options = Object.assign(
+      {},
+      datepickerOptions,
+      Object.assign(
+        {
+          minViewMode: 1,
+          format: "yyyy-mm",
+        },
+        otherParam
+      )
+    );
+    if (name == null || name == "Month") {
+      $("#elecMonthDate")
+        .datepicker("destroy")
+        .datepicker(datepickerMonthOptions)
+        .focus(function () {
+          $(this).datepicker("show");
+        })
+        .datepicker("update", new Date());
+    }
+    if (name == null || name == "Year") {
+      $("#elecYearDate")
+        .datepicker("destroy")
+        .datepicker(datepickerYearOptions)
+        .focus(function () {
+          $(this).datepicker("show");
+        })
+        .datepicker("update", new Date());
+    }
+    if (name == null || name == "SYear") {
+      $("#elecSYearDate")
+        .datepicker("destroy")
+        .datepicker(datepickerSYearOptions)
+        .focus(function () {
+          $(this).datepicker("show");
+        });
+    }
+    if (name == null || name == "EYear") {
+      $("#elecEYearDate")
+        .datepicker("destroy")
+        .datepicker(datepickerEYearOptions)
+        .focus(function () {
+          $(this).datepicker("show");
+        });
+    }
+    if (name == null || name == "ComYear1") {
+      $("#elecCom1YearDate")
+        .datepicker("destroy")
+        .datepicker(datepickerComYear1Options)
+        .focus(function () {
+          $(this).datepicker("show");
+        });
+    }
+    if (name == null || name == "ComYear2") {
+      $("#elecCom2YearDate")
+        .datepicker("destroy")
+        .datepicker(datepickerComYear2Options)
+        .focus(function () {
+          $(this).datepicker("show");
+        });
+    }
+    if (name == null || name == "ComMonth1") {
+      $("#elecCom1MonthDate")
+        .datepicker("destroy")
+        .datepicker(datepickerComMonth1Options)
+        .focus(function () {
+          $(this).datepicker("show");
+        });
+    }
+    if (name == null || name == "ComMonth2") {
+      $("#elecCom2MonthDate")
+        .datepicker("destroy")
+        .datepicker(datepickerComMonth2Options)
+        .focus(function () {
+          $(this).datepicker("show");
+        });
+    }
+  }
+
+  function eventsInit() {
+    $("body").on("change", "[name=reportTypeRadio]", function () {
+      $(
+        "#elecMonthDate, #elecYearDate, #elecStartEndDiv, #elecCompareDiv"
+      ).hide();
+      $("#compareTypeBtnsDiv").hide();
+
+      const value = $(this).data("value");
+      const curDate = $("#elecDate").val();
+      if (value === "day") {
+        $("#elecTimeText").text("月份");
+        $("#elecMonthDate").show();
+      } else if (value == "month") {
+        $("#elecTimeText").text("年份");
+        $("#elecYearDate").show();
+      } else if (value == "year") {
+        $("#elecTimeText").text("年份範圍");
+        $("#elecStartEndDiv").show();
+      } else if (value == "compare") {
+        $("#elecTimeText").text("年份");
+        $("#elecCompareDiv").show();
+        $("#compareTypeBtnsDiv").show();
+      }
     });
 
-    function setNameByType() {
-        $(".report-type-name").text(reportTypeDict["RElec"]["chiName"]);
+    $("body").on("change", "[name=compareTypeRadio]", function () {
+      $("#elecComYearDiv, #elecComMonthDiv").hide();
+      const value = $(this).val();
+      if (value === "month") {
+        $("#elecTimeText").text("年份");
+        $("#elecComYearDiv").show();
+      } else if (value == "day") {
+        $("#elecTimeText").text("月份");
+        $("#elecComMonthDiv").show();
+      }
+    });
+
+    $("[name=reportTypeRadio]")
+      .parent("li")
+      .on("click", function () {
+        $("[name=reportTypeRadio]").parent("li").removeClass("active");
+        const oldVal = $("li.active [name=reportTypeRadio]").data("value");
+        $(this).addClass("active");
+        const newVal = $("li.active [name=reportTypeRadio]").data("value");
+        if (oldVal !== newVal) {
+          $("li.active [name=reportTypeRadio]").trigger("change");
+        }
+      });
+
+    $("[name=compareTypeRadio]")
+      .parent("label")
+      .on("click", function () {
+        $("[name=compareTypeRadio]").parent("label").removeClass("active");
+        const oldVal = $("label.active [name=compareTypeRadio]").val();
+        $(this).addClass("active");
+        const newVal = $("label.active [name=compareTypeRadio]").val();
+        if (oldVal !== newVal) {
+          $("label.active [name=compareTypeRadio]").trigger("change");
+        }
+      });
+
+    $("[name=floorCheckbox]")
+      .parent(".btn")
+      .off("click")
+      .on("click", function () {
+        const oldVal = $("[name=floorCheckbox]:checked").val();
+        $(this).find("input[name=floorCheckbox]").prop("checked", true);
+        const newVal = $("[name=floorCheckbox]:checked").val();
+        if (oldVal !== newVal) {
+          $("[name=floorCheckbox]:checked").trigger("change");
+        }
+      });
+
+    $("body").on("change", "#elecSYearDate", function () {
+      initDatePicker("EYear", {
+        startDate: moment($(this).val()).startOf("year").toDate(),
+      });
+    });
+    $("body").on("change", "#elecEYearDate", function () {
+      initDatePicker("SYear", {
+        endDate: moment($(this).val()).endOf("year").toDate(),
+      });
+    });
+  }
+
+  function getListSendData() {
+    const tableType = $("li.active [name=reportTypeRadio]").data("value");
+    const compareType = $("label.active [name=compareTypeRadio]").val();
+    const startTime =
+      tableType == "day"
+        ? $("#elecMonthDate").val()
+        : tableType == "month"
+          ? $("#elecYearDate").val()
+          : tableType == "year"
+            ? $("#elecSYearDate").val()
+            : tableType == "compare"
+              ? compareType == "month"
+                ? !$("#elecCom1YearDate").val() || !$("#elecCom2YearDate").val()
+                  ? null
+                  : [$("#elecCom1YearDate").val(), $("#elecCom2YearDate").val()]
+                : compareType == "day"
+                  ? !$("#elecCom1MonthDate").val() || !$("#elecCom2MonthDate").val()
+                    ? null
+                    : [$("#elecCom1MonthDate").val(), $("#elecCom2MonthDate").val()]
+                  : null
+              : null;
+
+    if (!startTime) {
+      toast_error("請選擇日期");
+      return;
     }
 
-    function initDatePicker(name = null, otherParam = {}) {
-        const datepickerMonthOptions = Object.assign(
-            {},
-            datepickerOptions,
-            Object.assign(
-                {
-                    minViewMode: 1,
-                    format: "yyyy-mm",
-                },
-                otherParam
-            )
-        );
-        const datepickerYearOptions = Object.assign(
-            {},
-            datepickerOptions,
-            Object.assign(
-                {
-                    minViewMode: 2,
-                    format: "yyyy",
-                },
-                otherParam
-            )
-        );
-        const datepickerSYearOptions = Object.assign(
-            {},
-            datepickerOptions,
-            Object.assign(
-                {
-                    minViewMode: 2,
-                    format: "yyyy",
-                },
-                otherParam
-            )
-        );
-        const datepickerEYearOptions = Object.assign(
-            {},
-            datepickerOptions,
-            Object.assign(
-                {
-                    minViewMode: 2,
-                    format: "yyyy",
-                },
-                otherParam
-            )
-        );
-        const datepickerComYear1Options = Object.assign(
-            {},
-            datepickerOptions,
-            Object.assign(
-                {
-                    minViewMode: 2,
-                    format: "yyyy",
-                },
-                otherParam
-            )
-        );
-        const datepickerComYear2Options = Object.assign(
-            {},
-            datepickerOptions,
-            Object.assign(
-                {
-                    minViewMode: 2,
-                    format: "yyyy",
-                },
-                otherParam
-            )
-        );
-        const datepickerComMonth1Options = Object.assign(
-            {},
-            datepickerOptions,
-            Object.assign(
-                {
-                    minViewMode: 1,
-                    format: "yyyy-mm",
-                },
-                otherParam
-            )
-        );
-        const datepickerComMonth2Options = Object.assign(
-            {},
-            datepickerOptions,
-            Object.assign(
-                {
-                    minViewMode: 1,
-                    format: "yyyy-mm",
-                },
-                otherParam
-            )
-        );
-        if (name == null || name == "Month") {
-            $("#elecMonthDate")
-                .datepicker("destroy")
-                .datepicker(datepickerMonthOptions)
-                .focus(function () {
-                    $(this).datepicker("show");
-                })
-                .datepicker("update", new Date());
-        }
-        if (name == null || name == "Year") {
-            $("#elecYearDate")
-                .datepicker("destroy")
-                .datepicker(datepickerYearOptions)
-                .focus(function () {
-                    $(this).datepicker("show");
-                })
-                .datepicker("update", new Date());
-        }
-        if (name == null || name == "SYear") {
-            $("#elecSYearDate")
-                .datepicker("destroy")
-                .datepicker(datepickerSYearOptions)
-                .focus(function () {
-                    $(this).datepicker("show");
-                });
-        }
-        if (name == null || name == "EYear") {
-            $("#elecEYearDate")
-                .datepicker("destroy")
-                .datepicker(datepickerEYearOptions)
-                .focus(function () {
-                    $(this).datepicker("show");
-                });
-        }
-        if (name == null || name == "ComYear1") {
-            $("#elecCom1YearDate")
-                .datepicker("destroy")
-                .datepicker(datepickerComYear1Options)
-                .focus(function () {
-                    $(this).datepicker("show");
-                });
-        }
-        if (name == null || name == "ComYear2") {
-            $("#elecCom2YearDate")
-                .datepicker("destroy")
-                .datepicker(datepickerComYear2Options)
-                .focus(function () {
-                    $(this).datepicker("show");
-                });
-        }
-        if (name == null || name == "ComMonth1") {
-            $("#elecCom1MonthDate")
-                .datepicker("destroy")
-                .datepicker(datepickerComMonth1Options)
-                .focus(function () {
-                    $(this).datepicker("show");
-                });
-        }
-        if (name == null || name == "ComMonth2") {
-            $("#elecCom2MonthDate")
-                .datepicker("destroy")
-                .datepicker(datepickerComMonth2Options)
-                .focus(function () {
-                    $(this).datepicker("show");
-                });
-        }
+    if (Array.isArray(startTime) && startTime.length < 2) {
+      toast_error("請選擇比較日期");
+      return;
     }
 
-    function eventsInit() {
-        $("body").on("change", "[name=reportTypeRadio]", function () {
-            $(
-                "#elecMonthDate, #elecYearDate, #elecStartEndDiv, #elecCompareDiv"
-            ).hide();
-            $("#compareTypeBtnsDiv").hide();
+    const endTime = tableType == "year" ? $("#elecEYearDate").val() : null;
+    if (!endTime && tableType == "year") {
+      toast_error("請選擇結束日期");
+      return;
+    }
 
-            const value = $(this).data("value");
-            const curDate = $("#elecDate").val();
-            if (value === "day") {
-                $("#elecTimeText").text("月份");
-                $("#elecMonthDate").show();
-            } else if (value == "month") {
-                $("#elecTimeText").text("年份");
-                $("#elecYearDate").show();
-            } else if (value == "year") {
-                $("#elecTimeText").text("年份範圍");
-                $("#elecStartEndDiv").show();
-            } else if (value == "compare") {
-                $("#elecTimeText").text("年份");
-                $("#elecCompareDiv").show();
-                $("#compareTypeBtnsDiv").show();
+    let sent_data = {
+      tableType:
+        $("li.active [name=reportTypeRadio]").data("value") == "compare"
+          ? $("[name=compareTypeRadio]:checked").val()
+          : $("li.active [name=reportTypeRadio]").data("value"),
+      building_tag: SelectBuildings.join(","),
+      floor_tag: $("[name=floorCheckbox]:checked")
+        .map((i, e) => $(e).val())
+        .toArray(),
+      startTime: startTime,
+      endTime: endTime,
+      price: $("#elecPriceDegree").val()
+        ? parseFloat($("#elecPriceDegree").val())
+        : null,
+    };
+
+    if (Array.isArray(startTime)) {
+      sent_data = [Object.assign({}, sent_data), Object.assign({}, sent_data)];
+      startTime.forEach((sTime, i) => {
+        const compareType = $("[name=compareTypeRadio]:checked").val();
+        sent_data[i].startTime = sTime;
+        sent_data[i].endTime = null;
+      });
+    }
+
+    return sent_data;
+  }
+
+  function getMeterData() {
+    let result = [];
+    var sent_data = getListSendData();
+    if (!Array.isArray(sent_data)) {
+      sent_data = [sent_data];
+    }
+
+    if (!sent_data.some((s) => s.building_tag)) {
+      toast_error("請選擇棟別");
+      return;
+    }
+    if (!sent_data.some((s) => s.floor_tag)) {
+      toast_error("請選擇樓層");
+      return;
+    }
+    var url = baseApiUrl + "/api/" + reportTypeDict["RElec"]["listApiUrl"];
+
+    setLoading(true);
+    sent_data.forEach((sdata, i) => {
+      $.ajax({
+        type: "POST",
+        headers: {
+          Authorization: "Bearer " + token,
+        },
+        url: url,
+        async: false,
+        data: JSON.stringify(sdata),
+        contentType: "application/json; charset=utf-8",
+        success: function (rel) {
+          if (rel.code != "0000") {
+            if (rel.code == "9999") {
+              toast_error(rel.msg);
+            } else {
+              toast_warning(rel.msg);
             }
-        });
-
-        $("body").on("change", "[name=compareTypeRadio]", function () {
-            $("#elecComYearDiv, #elecComMonthDiv").hide();
-            const value = $(this).val();
-            if (value === "month") {
-                $("#elecTimeText").text("年份");
-                $("#elecComYearDiv").show();
-            } else if (value == "day") {
-                $("#elecTimeText").text("月份");
-                $("#elecComMonthDiv").show();
-            }
-        });
-
-        $("[name=reportTypeRadio]")
-            .parent("li")
-            .on("click", function () {
-                $("[name=reportTypeRadio]").parent("li").removeClass("active");
-                const oldVal = $("li.active [name=reportTypeRadio]").data("value");
-                $(this).addClass("active");
-                const newVal = $("li.active [name=reportTypeRadio]").data("value");
-                if (oldVal !== newVal) {
-                    $("li.active [name=reportTypeRadio]").trigger("change");
-                }
-            });
-
-        $("[name=compareTypeRadio]")
-            .parent("label")
-            .on("click", function () {
-                debugger;
-                $("[name=compareTypeRadio]").parent("label").removeClass("active");
-                const oldVal = $("label.active [name=compareTypeRadio]").val();
-                $(this).addClass("active");
-                const newVal = $("label.active [name=compareTypeRadio]").val();
-                if (oldVal !== newVal) {
-                    $("label.active [name=compareTypeRadio]").trigger("change");
-                }
-            });
-
-        $("[name=floorCheckbox]")
-            .parent(".btn")
-            .off("click")
-            .on("click", function () {
-                const oldVal = $("[name=floorCheckbox]:checked").val();
-                $(this).find("input[name=floorCheckbox]").prop("checked", true);
-                const newVal = $("[name=floorCheckbox]:checked").val();
-                if (oldVal !== newVal) {
-                    $("[name=floorCheckbox]:checked").trigger("change");
-                }
-            });
-
-        $("body").on("change", "#elecSYearDate", function () {
-            initDatePicker("EYear", {
-                startDate: moment($(this).val()).startOf("year").toDate(),
-            });
-        });
-        $("body").on("change", "#elecEYearDate", function () {
-            initDatePicker("SYear", {
-                endDate: moment($(this).val()).endOf("year").toDate(),
-            });
-        });
-    }
-
-    function getListSendData() {
-        const tableType = $("li.active [name=reportTypeRadio]").data("value");
-        const compareType = $("label.active [name=compareTypeRadio]").val();
-        const startTime =
-            tableType == "day"
-                ? $("#elecMonthDate").val()
-                : tableType == "month"
-                    ? $("#elecYearDate").val()
-                    : tableType == "year"
-                        ? $("#elecSYearDate").val()
-                        : tableType == "compare"
-                            ? compareType == "month"
-                                ? !$("#elecCom1YearDate").val() || !$("#elecCom2YearDate").val()
-                                    ? null
-                                    : [$("#elecCom1YearDate").val(), $("#elecCom2YearDate").val()]
-                                : compareType == "day"
-                                    ? !$("#elecCom1MonthDate").val() || !$("#elecCom2MonthDate").val()
-                                        ? null
-                                        : [$("#elecCom1MonthDate").val(), $("#elecCom2MonthDate").val()]
-                                    : null
-                            : null;
-
-        if (!startTime) {
-            toast_error("請選擇日期");
             return;
-        }
-
-        if (Array.isArray(startTime) && startTime.length < 2) {
-            toast_error("請選擇比較日期");
-            return;
-        }
-
-        const endTime = tableType == "year" ? $("#elecEYearDate").val() : null;
-        if (!endTime && tableType == "year") {
-            toast_error("請選擇結束日期");
-            return;
-        }
-
-        let sent_data = {
-            tableType:
-                $("li.active [name=reportTypeRadio]").data("value") == "compare"
-                    ? $("[name=compareTypeRadio]:checked").val()
-                    : $("li.active [name=reportTypeRadio]").data("value"),
-            building_tag: $("[name=buildingRadio]:checked").val(),
-            floor_tag: $("[name=floorCheckbox]:checked")
-                .map((i, e) => $(e).val())
-                .toArray(),
-            startTime: startTime,
-            endTime: endTime,
-            price: $("#elecPriceDegree").val()
-                ? parseFloat($("#elecPriceDegree").val())
-                : null,
-        };
-
-        if (Array.isArray(startTime)) {
-            sent_data = [Object.assign({}, sent_data), Object.assign({}, sent_data)];
-            startTime.forEach((sTime, i) => {
-                const compareType = $("[name=compareTypeRadio]:checked").val();
-                sent_data[i].startTime = sTime;
-                sent_data[i].endTime = null;
+          }
+          if (i == 0) {
+            result = result.concat(rel.data);
+            result.forEach((r) => {
+              r._compare_price = null;
+              r._compare_total = null;
+              r._compare_total_price = null;
             });
-        }
+          } else {
+            rel.data.forEach((r) => {
+              let target =
+                result.find(
+                  (d) =>
+                    d.building_tag == r.building_tag &&
+                    d.device_serial_tag == r.device_serial_tag &&
+                    d.floor_tag == r.floor_tag
+                ) ?? null;
+              let _target = {};
+              // if(!target){
+              //   result.push(target);
+              //   target = {};
+              // }
+              _target.rawData = (target?.rawData ?? []).concat(r.rawData);
+              _target._compare_price = r.price;
+              _target._compare_total = r.total;
+              _target._compare_total_price = r.total_price;
 
-        return sent_data;
-    }
-
-    function getMeterData() {
-        let result = [];
-        var sent_data = getListSendData();
-        if (!Array.isArray(sent_data)) {
-            sent_data = [sent_data];
-        }
-
-        if (!sent_data.some((s) => s.building_tag)) {
-            toast_error("請選擇棟別");
-            return;
-        }
-        if (!sent_data.some((s) => s.floor_tag)) {
-            toast_error("請選擇樓層");
-            return;
-        }
-        var url = baseApiUrl + "/api/" + reportTypeDict["RElec"]["listApiUrl"];
-
-        setLoading(true);
-        sent_data.forEach((sdata, i) => {
-            $.ajax({
-                type: "POST",
-                headers: {
-                    Authorization: "Bearer " + token,
-                },
-                url: url,
-                async: false,
-                data: JSON.stringify(sdata),
-                contentType: "application/json; charset=utf-8",
-                success: function (rel) {
-                    if (rel.code != "0000") {
-                        if (rel.code == "9999") {
-                            toast_error(rel.msg);
-                        } else {
-                            toast_warning(rel.msg);
-                        }
-                        return;
-                    }
-                    if (i == 0) {
-                        result = result.concat(rel.data);
-                        result.forEach(r => {
-                            r._compare_price = null;
-                            r._compare_total = null;
-                            r._compare_total_price = null;
-                        })
-                    } else {
-                        rel.data.forEach((r) => {
-                            let target =
-                                result.find(
-                                    (d) =>
-                                        d.building_tag == r.building_tag &&
-                                        d.device_serial_tag == r.device_serial_tag &&
-                                        d.floor_tag == r.floor_tag
-                                ) ?? null;
-                            let _target = {};
-                            // if(!target){
-                            //   result.push(target);
-                            //   target = {};
-                            // }
-                            _target.rawData = (target?.rawData ?? []).concat(r.rawData);
-                            _target._compare_price = r.price;
-                            _target._compare_total = r.total;
-                            _target._compare_total_price = r.total_price;
-
-                            if (!target) {
-                                _target = Object.assign(_target, r);
-                                _target.price = null;
-                                _target.total = null;
-                                _target.total_price = null;
-                                result.push(_target);
-                                return;
-                            }
-                            target = Object.assign(target, _target);
-                        });
-                    }
-                },
-                complete: () => {
-                    if (sent_data.length - 1 == i) {
-                        setLoading(false);
-                    }
-                },
+              if (!target) {
+                _target = Object.assign(_target, r);
+                _target.price = null;
+                _target.total = null;
+                _target.total_price = null;
+                result.push(_target);
+                return;
+              }
+              target = Object.assign(target, _target);
             });
+          }
+        },
+        complete: () => {
+          if (sent_data.length - 1 == i) {
+            setLoading(false);
+          }
+        },
+      });
+    });
+    setReportTable(result);
+  }
+
+  function getPrice() {
+    var sentdata = {
+      type: reportTypeDict["RElec"]["name"],
+    };
+
+    var url = baseApiUrl + "/api/HydroMeterPrice";
+
+    $.ajax({
+      type: "POST",
+      url: url,
+      headers: {
+        Authorization: "Bearer " + token,
+      },
+      data: JSON.stringify(sentdata),
+      contentType: "application/json; charset=UTF-8;",
+      success: function (rel) {
+        if (rel.code != "0000") {
+          if (rel.code == "9999") {
+            toast_error(rel.msg);
+          } else {
+            toast_warning(rel.msg);
+          }
+          return;
+        }
+        $("#elecPriceDegree").val(rel.data);
+      },
+    });
+  }
+
+  function getDayByMonth(month) {
+    const firstDayOfMonth = moment(month).startOf("month");
+    const lastDayOfMonth = moment(month).endOf("month");
+    const datesOfMonth = [];
+    let currentDay = moment(firstDayOfMonth);
+    while (currentDay.isSameOrBefore(lastDayOfMonth)) {
+      datesOfMonth.push(currentDay.format("YYYY-MM-DD"));
+      currentDay = currentDay.add(1, "day");
+    }
+    return datesOfMonth;
+  }
+
+  function getMonthByYear(year) {
+    const firstMonthOfYear = moment(year).startOf("year").month();
+    const lastMonthOfYear = moment(year).endOf("year").month();
+    const monthOfYear = [];
+    for (let i = firstMonthOfYear; i <= lastMonthOfYear; i++) {
+      monthOfYear.push(moment(year).month(i).format("YYYY-MM"));
+    }
+    return monthOfYear;
+  }
+
+  function getStartEndYear(sYear, eYear) {
+    const years = [];
+    for (let i = sYear; i <= eYear; i++) {
+      years.push(moment().year(i).format("YYYY"));
+    }
+    return years;
+  }
+
+  function setTableColumns() {
+    const tableType = $("li.active [name=reportTypeRadio]").data("value");
+    const compareType = $("label.active [name=compareTypeRadio]").val();
+    const columnWidth = "45px";
+    let columns = [];
+    switch (tableType) {
+      case "day":
+        columns = getDayByMonth($("#elecMonthDate").val()).map((dc) => {
+          return { title: dc, data: dc, sWidth: columnWidth };
         });
-        debugger;
-        setReportTable(result);
-    }
-
-    function getPrice() {
-        debugger;
-        var sentdata = {
-            type: reportTypeDict["RElec"]["name"],
-        };
-
-        var url = baseApiUrl + "/api/HydroMeterPrice";
-
-        $.ajax({
-            type: "POST",
-            url: url,
-            headers: {
-                Authorization: "Bearer " + token,
-            },
-            data: JSON.stringify(sentdata),
-            contentType: "application/json; charset=UTF-8;",
-            success: function (rel) {
-                if (rel.code != "0000") {
-                    if (rel.code == "9999") {
-                        toast_error(rel.msg);
-                    } else {
-                        toast_warning(rel.msg);
-                    }
-                    return;
-                }
-                $("#elecPriceDegree").val(rel.data);
-            },
+        break;
+      case "month":
+        columns = getMonthByYear($("#elecYearDate").val()).map((dc) => {
+          return { title: dc, data: dc, sWidth: columnWidth };
         });
-    }
-
-    function getDayByMonth(month) {
-        const firstDayOfMonth = moment(month).startOf("month");
-        const lastDayOfMonth = moment(month).endOf("month");
-        const datesOfMonth = [];
-        let currentDay = moment(firstDayOfMonth);
-        while (currentDay.isSameOrBefore(lastDayOfMonth)) {
-            datesOfMonth.push(currentDay.format("YYYY-MM-DD"));
-            currentDay = currentDay.add(1, "day");
-        }
-        return datesOfMonth;
-    }
-
-    function getMonthByYear(year) {
-        const firstMonthOfYear = moment(year).startOf("year").month();
-        const lastMonthOfYear = moment(year).endOf("year").month();
-        const monthOfYear = [];
-        for (let i = firstMonthOfYear; i <= lastMonthOfYear; i++) {
-            monthOfYear.push(moment(year).month(i).format("YYYY-MM"));
-        }
-        return monthOfYear;
-    }
-
-    function getStartEndYear(sYear, eYear) {
-        const years = [];
-        for (let i = sYear; i <= eYear; i++) {
-            years.push(moment().year(i).format("YYYY"));
-        }
-        return years;
-    }
-
-    function setTableColumns() {
-        const tableType = $("li.active [name=reportTypeRadio]").data("value");
-        const compareType = $("label.active [name=compareTypeRadio]").val();
-        const columnWidth = "45px";
-        let columns = [];
-        switch (tableType) {
-            case "day":
-                columns = getDayByMonth($("#elecMonthDate").val()).map((dc) => {
-                    return { title: dc, data: dc, sWidth: columnWidth };
+        break;
+      case "year":
+        columns = getStartEndYear(
+          $("#elecSYearDate").val(),
+          $("#elecEYearDate").val()
+        ).map((dc) => {
+          return { title: dc, data: dc, sWidth: columnWidth };
+        });
+        break;
+      case "compare":
+        let compareResult = [];
+        switch (compareType) {
+          case "month":
+            columns1 = getMonthByYear($("#elecCom1YearDate").val());
+            columns2 = getMonthByYear($("#elecCom2YearDate").val());
+            columns1.forEach((c1, index) => {
+              compareResult.push(c1);
+              if (columns2[index]) {
+                compareResult.push({
+                  value: columns2[index],
+                  _isCompared: true,
                 });
-                break;
-            case "month":
-                columns = getMonthByYear($("#elecYearDate").val()).map((dc) => {
-                    return { title: dc, data: dc, sWidth: columnWidth };
-                });
-                break;
-            case "year":
-                columns = getStartEndYear(
-                    $("#elecSYearDate").val(),
-                    $("#elecEYearDate").val()
-                ).map((dc) => {
-                    return { title: dc, data: dc, sWidth: columnWidth };
-                });
-                break;
-            case "compare":
-                let compareResult = [];
-                switch (compareType) {
-                    case "month":
-                        columns1 = getMonthByYear($("#elecCom1YearDate").val());
-                        columns2 = getMonthByYear($("#elecCom2YearDate").val());
-                        columns1.forEach((c1, index) => {
-                            compareResult.push(c1);
-                            if (columns2[index]) {
-                                compareResult.push({
-                                    value: columns2[index],
-                                    _isCompared: true,
-                                });
-                            }
-                        });
-                        break;
-                    case "day":
-                        columns1 = getDayByMonth($("#elecCom1MonthDate").val());
-                        columns2 = getDayByMonth($("#elecCom2MonthDate").val());
-                        columns1.forEach((c1, index) => {
-                            compareResult.push(c1);
-                            if (columns2[index]) {
-                                compareResult.push({
-                                    value: columns2[index],
-                                    _isCompared: true,
-                                });
-                            }
-                        });
-                        break;
-                }
-
-                return compareResult.map((dc) => {
-                    if (dc._isCompared) {
-                        return { title: dc.value, data: dc.value, sClass: "compare", sWidth: columnWidth };
-                    }
-                    return { title: dc, data: dc, sWidth: columnWidth };
-                });
-
-                break;
-        }
-        return columns;
-    }
-
-    function setReportTable(datas = []) {
-        if (datatable) {
-            datatable.clear().draw();
-            datatable.destroy();
-            $("#report_table").empty();
-        }
-        datesColumns = setTableColumns();
-        const compareType = $("label.active [name=compareTypeRadio]").val();
-        datas.forEach((td) => {
-            td.rawData.forEach((rd) => {
-                td[rd.timeStamp] = rd.avg_rawdata;
+              }
             });
-            datesColumns.forEach((dc) => {
-                td[dc.data] = td[dc.data] === undefined ? null : td[dc.data];
+            break;
+          case "day":
+            columns1 = getDayByMonth($("#elecCom1MonthDate").val());
+            columns2 = getDayByMonth($("#elecCom2MonthDate").val());
+            columns1.forEach((c1, index) => {
+              compareResult.push(c1);
+              if (columns2[index]) {
+                compareResult.push({
+                  value: columns2[index],
+                  _isCompared: true,
+                });
+              }
             });
+            break;
+        }
+
+        return compareResult.map((dc) => {
+          if (dc._isCompared) {
+            return {
+              title: dc.value,
+              data: dc.value,
+              sClass: "compare",
+              sWidth: columnWidth,
+            };
+          }
+          return { title: dc, data: dc, sWidth: columnWidth };
         });
 
-        let totalColumns = [
-            {
-                title: "小計",
-                data: "total",
-                sWidth: "70px",
-            },
-            {
-                title: "單價",
-                data: "price",
-                sWidth: "45px",
-            },
-            {
-                title: "金額總計",
-                data: "total_price",
-                sWidth: "70px",
-            },
-        ];
-        const tableType = $("li.active [name=reportTypeRadio]").data("value");
-
-        if (tableType == "compare") {
-            const com1Time =
-                compareType == "month"
-                    ? $("#elecCom1YearDate").val()
-                    : $("#elecCom1MonthDate").val();
-            const com2Time =
-                compareType == "month"
-                    ? $("#elecCom2YearDate").val()
-                    : $("#elecCom2MonthDate").val();
-
-            for (var i = 0; i < totalColumns.length; i++) {
-                let c = totalColumns[i];
-                if (["total", "price", "total_price"].includes(c.data)) {
-                    totalColumns.splice(i + 1, 0, {
-                        title: com2Time + c.title,
-                        data: "_compare_" + c.data,
-                        sWidth: "70px",
-                        sClass: "compare",
-                    });
-                    c.title = com1Time + c.title;
-                    c.sWidth = "70px";
-                }
-            }
-        }
-        console.log("datas", datas)
-        console.log("totalColumns", totalColumns)
-        datatable = $("#report_table").DataTable({
-            data: datas,
-            destroy: true,
-            sDom: '<"toolbar">tipl',
-            fixedColumns: { left: 3, right: tableType == "compare" ? 2 : 3 },
-            scrollX: "auto",
-            scrollCollapse: true,
-            autoWidth: true,
-            language: { url: "/file/BajascriptTest/js/dataTables/zh-HANT.json" },
-            columns: [
-                {
-                    title: "棟別",
-                    data: "building_name",
-                    className: "text-nowrap",
-                },
-                {
-                    title: "樓層",
-                    data: "floor_tag",
-                    sWidth: "8%",
-                },
-                {
-                    title: "設備",
-                    data: "device_full_name",
-                    sWidth: "100px",
-                },
-                ...datesColumns,
-                ...totalColumns,
-            ],
-        });
+        break;
     }
+    return columns;
+  }
 
-    function setExportList() {
-        const tableType = $("li.active [name=reportTypeRadio]").data("value");
-        var sent_data = getListSendData();
-        if (!Array.isArray(sent_data)) {
-            sent_data = [sent_data];
-        }
-        if (!sent_data.some((s) => s.building_tag)) {
-            toast_error("請選擇棟別");
-            return;
-        }
-        if (!sent_data.some((s) => s.floor_tag)) {
-            toast_error("請選擇樓層");
-            return;
-        }
-        debugger
-        var url =
-            baseApiUrl + "/api/" + reportTypeDict["RElec"]["exportListApiUrl"][tableType];
-
-        setLoading(true, "匯出中");
-        $.ajax({
-            type: "POST",
-            url: url,
-            data: tableType == "compare" ? JSON.stringify(sent_data) : JSON.stringify(sent_data[0]),
-            headers: {
-                Authorization: "Bearer " + token,
-            },
-            contentType: "application/json; charset=utf-8",
-            xhrFields: {
-                responseType: "blob", // to avoid binary data being mangled on charset conversion
-            },
-            success: function (rel, text, xhr) {
-                if (rel) {
-                    downloadByBlob(xhr, rel);
-                }
-            },
-            complete: (xhr) => {
-                setLoading(false);
-            },
-        });
+  function setReportTable(datas = []) {
+    if (datatable) {
+      datatable.clear().draw();
+      datatable.destroy();
+      $("#report_table").empty();
     }
+    datesColumns = setTableColumns();
+    const compareType = $("label.active [name=compareTypeRadio]").val();
+    datas.forEach((td) => {
+      td.rawData.forEach((rd) => {
+        td[rd.timeStamp] = rd.avg_rawdata;
+      });
+      datesColumns.forEach((dc) => {
+        td[dc.data] = td[dc.data] === undefined ? null : td[dc.data];
+      });
+    });
 
-    function setLoading(type = true, text = "列表讀取中") {
-        if (type) {
-            $("#tableLoading").fadeIn(200);
-            $("#tableLoadingText").html(text);
-        } else {
-            $("#tableLoading").fadeOut(200);
+    let totalColumns = [
+      {
+        title: "小計",
+        data: "total",
+        sWidth: "70px",
+      },
+      {
+        title: "單價",
+        data: "price",
+        sWidth: "45px",
+      },
+      {
+        title: "金額總計",
+        data: "total_price",
+        sWidth: "70px",
+      },
+    ];
+    const tableType = $("li.active [name=reportTypeRadio]").data("value");
+
+    if (tableType == "compare") {
+      const com1Time =
+        compareType == "month"
+          ? $("#elecCom1YearDate").val()
+          : $("#elecCom1MonthDate").val();
+      const com2Time =
+        compareType == "month"
+          ? $("#elecCom2YearDate").val()
+          : $("#elecCom2MonthDate").val();
+
+      for (var i = 0; i < totalColumns.length; i++) {
+        let c = totalColumns[i];
+        if (["total", "price", "total_price"].includes(c.data)) {
+          totalColumns.splice(i + 1, 0, {
+            title: com2Time + c.title,
+            data: "_compare_" + c.data,
+            sWidth: "70px",
+            sClass: "compare",
+          });
+          c.title = com1Time + c.title;
+          c.sWidth = "70px";
         }
+      }
     }
+    console.log("datas", datas);
+    console.log("totalColumns", totalColumns);
+    datatable = $("#report_table").DataTable({
+      data: datas,
+      destroy: true,
+      sDom: '<"toolbar">tipl',
+      fixedColumns: { left: 3, right: tableType == "compare" ? 2 : 3 },
+      scrollX: "auto",
+      scrollCollapse: true,
+      autoWidth: true,
+      language: { url: "/file/BajascriptTest/js/dataTables/zh-HANT.json" },
+      columns: [
+        {
+          title: "棟別",
+          data: "building_name",
+          className: "text-nowrap",
+        },
+        {
+          title: "樓層",
+          data: "floor_tag",
+          sWidth: "8%",
+          className: "text-nowrap",
+        },
+        {
+          title: "設備",
+          data: "device_full_name",
+          sWidth: "100px",
+        },
+        ...datesColumns,
+        ...totalColumns,
+      ],
+    });
+  }
 
-    //選擇棟別
-    function SelectBuild(e, building_tag) {
-        checkIsSelectedBuilding();
-        // GetFloors(building_tag);
+  function setExportList() {
+    const tableType = $("li.active [name=reportTypeRadio]").data("value");
+    var sent_data = getListSendData();
+    if (!Array.isArray(sent_data)) {
+      sent_data = [sent_data];
     }
+    // if (!sent_data.some((s) => s.building_tag)) {
+    //   toast_error("請選擇棟別");
+    //   return;
+    // }
+    // if (!sent_data.some((s) => s.floor_tag)) {
+    //   toast_error("請選擇樓層");
+    //   return;
+    // }
+    var url =
+      baseApiUrl +
+      "/api/" +
+      reportTypeDict["RElec"]["exportListApiUrl"][tableType];
 
-    //取得樓層
-    function GetFloors(building_tag) {
-        var sentdata = {
-            building_tag: building_tag,
-        };
-
-        var url = baseApiUrl + "/api/GetAllfloor";
-        $.ajax({
-            type: "POST",
-            url: url,
-            headers: {
-                Authorization: "Bearer " + token,
-            },
-            data: sentdata,
-            success: function (rel) {
-                if (rel.code != "0000") {
-                    if (rel.code == "9999") {
-                        toast_error(rel.msg);
-                    } else {
-                        toast_warning(rel.msg);
-                    }
-                    return;
-                }
-                if (rel.data && rel.data.length > 0) {
-                    $(".allbtn").show();
-                }
-                drawFloorsBtn(rel.data);
-                checkIsHasFloorByBuilding();
-                //   JudgeCurrentDeviceData();
-                //   RedrawDataTable();
-            },
-        });
-    }
-
-    function allFloor() {
-        $("[name=floorCheckbox]").prop("checked", true);
-        $("[name=floorCheckbox]").parent(".btn").addClass("active");
-    }
-
-    function checkIsSelectedBuilding() {
-        let result = false;
-        let buildingRadios = $("[name=buildingRadio]:checked");
-        if (buildingRadios && buildingRadios.length > 0) {
-            $("#floors .text-notice.notice-noSelectedBuilding").hide();
-            result = true;
-        } else {
-            $("#floors .text-notice.notice-noSelectedBuilding").show();
-            $(".allbtn").hide();
+    setLoading(true, "匯出中");
+    $.ajax({
+      type: "POST",
+      url: url,
+      data:
+        tableType == "compare"
+          ? JSON.stringify(sent_data)
+          : JSON.stringify(sent_data[0]),
+      headers: {
+        Authorization: "Bearer " + token,
+      },
+      contentType: "application/json; charset=utf-8",
+      xhrFields: {
+        responseType: "blob", // to avoid binary data being mangled on charset conversion
+      },
+      success: function (rel, text, xhr) {
+        if (rel) {
+          downloadByBlob(xhr, rel);
         }
-        return result;
-    }
+      },
+      complete: (xhr) => {
+        setLoading(false);
+      },
+    });
+  }
 
-    function checkIsHasFloorByBuilding() {
-        let result = false;
-        let floorCheckboxs = $("[name=floorCheckbox]");
-        if (!checkIsSelectedBuilding()) {
-            return null;
-        }
-        if (floorCheckboxs && floorCheckboxs.length > 0) {
-            $("#floors .text-notice.notice-noBuilding").hide();
-            result = true;
-        } else {
-            $("#floors .text-notice.notice-noBuilding").show();
-            $(".allbtn").hide();
-        }
-        return result;
+  function setLoading(type = true, text = "列表讀取中") {
+    if (type) {
+      $("#tableLoading").fadeIn(200);
+      $("#tableLoadingText").html(text);
+    } else {
+      $("#tableLoading").fadeOut(200);
     }
+  }
 
-    function drawFloorsBtn(floors) {
-        var html = "";
-        for (let floor of floors) {
-            html += `<label class="btn btn-outline-success waves-effect waves-themed" style="flex:0 0 auto">
+  //選擇棟別
+  function SelectBuild(e, building_tag) {
+    if (SelectBuildings.includes(building_tag)) {
+      SelectBuildings = SelectBuildings.filter((bui) => bui !== building_tag);
+    } else {
+      SelectBuildings.push(building_tag);
+    }
+    checkIsSelectedBuilding();
+    // GetFloors(building_tag);
+  }
+
+  //取得樓層
+  function GetFloors(building_tag) {
+    var sentdata = {
+      building_tag: building_tag,
+    };
+
+    var url = baseApiUrl + "/api/GetAllfloor";
+    $.ajax({
+      type: "POST",
+      url: url,
+      headers: {
+        Authorization: "Bearer " + token,
+      },
+      data: sentdata,
+      success: function (rel) {
+        if (rel.code != "0000") {
+          if (rel.code == "9999") {
+            toast_error(rel.msg);
+          } else {
+            toast_warning(rel.msg);
+          }
+          return;
+        }
+        if (rel.data && rel.data.length > 0) {
+          $(".allbtn").show();
+        }
+        drawFloorsBtn(rel.data);
+        checkIsHasFloorByBuilding();
+        //   JudgeCurrentDeviceData();
+        //   RedrawDataTable();
+      },
+    });
+  }
+
+  function allFloor() {
+    $("[name=floorCheckbox]").prop("checked", true);
+    $("[name=floorCheckbox]").parent(".btn").addClass("active");
+  }
+
+  function checkIsSelectedBuilding() {
+    let result = false;
+    let buildingRadios = $("[name=buildingRadio]:checked");
+    if (buildingRadios && buildingRadios.length > 0) {
+      $("#floors .text-notice.notice-noSelectedBuilding").hide();
+      result = true;
+    } else {
+      $("#floors .text-notice.notice-noSelectedBuilding").show();
+      $(".allbtn").hide();
+    }
+    return result;
+  }
+
+  function checkIsHasFloorByBuilding() {
+    let result = false;
+    let floorCheckboxs = $("[name=floorCheckbox]");
+    if (!checkIsSelectedBuilding()) {
+      return null;
+    }
+    if (floorCheckboxs && floorCheckboxs.length > 0) {
+      $("#floors .text-notice.notice-noBuilding").hide();
+      result = true;
+    } else {
+      $("#floors .text-notice.notice-noBuilding").show();
+      $(".allbtn").hide();
+    }
+    return result;
+  }
+
+  function drawFloorsBtn(floors) {
+    var html = "";
+    for (let floor of floors) {
+      html += `<label class="btn btn-outline-success waves-effect waves-themed" style="flex:0 0 auto">
                     <input type="checkbox" name="floorCheckbox" onChange="SelectFloor(this,'${floor.floor_guid}')" value="${floor.full_name}" id="${floor.floor_guid}"> ${floor.full_name}
                 </label>`;
-        }
-
-        $("#floors").find(".item").empty();
-        $("#floors").find(".item").append(html);
     }
 
-    function SelectFloor(e, floor_guid) {
-        // getMeterData();
-    }
+    $("#floors").find(".item").empty();
+    $("#floors").find(".item").append(html);
+  }
+
+  function SelectFloor(e, floor_guid) {
+    // getMeterData();
+  }
 </script>
diff --git a/Frontend/js/n4js/bajatest.js b/Frontend/js/n4js/bajatest.js
index b32761d..161aa00 100644
--- a/Frontend/js/n4js/bajatest.js
+++ b/Frontend/js/n4js/bajatest.js
@@ -11,8 +11,8 @@ let baja_subscribe_electricmeter_callback_func;
 let baja_subscribe_end_electricmeter_callback_func;
 var ordPathForElectricmeter;
 
-var startPageLoading;  // 開始 loading
-var endPageLoading;  // 開始 loading
+var startPageLoading; // 開始 loading
+var endPageLoading; // 開始 loading
 //window.baja = null;
 //require(['baja!'], function (baja) {
 //    window.baja = baja;
@@ -39,361 +39,481 @@ class subscriptionDevices {
     if (callBackFunc != undefined && callBackFunc != null) {
       this.changeCallback = callBackFunc;
     }
-  }
+  };
   // BQL訂閱結束回傳的Function
   setSubscribeDeviceEndCallBack = function (callBackFunc) {
     if (callBackFunc != undefined && callBackFunc != null) {
       this.changeEndCallback = callBackFunc;
     }
-  }
+  };
 
   BajaSubscribeDevicesByBql = function () {
     let _this = this;
-    require(['baja!'], function (baja) {
+    require(["baja!"], function (baja) {
       console.log("進入Function 準備執行BQL訂閱");
-      startPageLoading ? startPageLoading() : ""
+      startPageLoading ? startPageLoading() : "";
       var init_start = new Date(Date.now());
       var sub = new baja.Subscriber();
 
-      sub.attach('changed', function (prop) {
-        if (prop.getName() === 'out') {
-          var out_value = this.getOutDisplay();
-          var target_device_number = this.$parent.getDisplayName().split('_').slice(0, 5).join('_');
-          var point_name = this.getDisplayName();
+      sub.attach(
+        "changed",
+        function (prop) {
+          if (prop.getName() === "out") {
+            var out_value = this.getOutDisplay();
+            var target_device_number = this.$parent
+              .getDisplayName()
+              .split("_")
+              .slice(0, 5)
+              .join("_");
+            var point_name = this.getDisplayName();
 
-          //依據Facets判斷回傳的內容值為何
-          var facets_split = this.getFacets1().$cEncStr.split('|');
-          var facets_arr = [];
-          facets_split.forEach(function (item, index) {
-            facets_arr.push(item.split('=s:'));
-          });
+            //依據Facets判斷回傳的內容值為何
+            var facets_split = this.getFacets1().$cEncStr.split("|");
+            var facets_arr = [];
+            facets_split.forEach(function (item, index) {
+              facets_arr.push(item.split("=s:"));
+            });
 
-          var facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
+            var facets = facets_arr.reduce(
+              (obj, cur) => ({ ...obj, [cur[0]]: cur[1] }),
+              {}
+            );
 
-          var point_out_split = this.getOutDisplay().split(' ');
+            var point_out_split = this.getOutDisplay().split(" ");
 
-          let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
+            let key = Object.keys(facets).find(
+              (k) => facets[k] === point_out_split[0]
+            );
 
-          if (key == undefined) {
-            key = point_out_split[0];
-          }
-
-          var modify_target_device = {
-            "device_number": target_device_number ? target_device_number : null,
-            "device_number_full": this.$parent.getSlotPath().$names.join("_"),
-            "point_name": point_name ? point_name : null,
-            "value": key
-          }
-          if (_this.changeCallback != undefined && _this.changeCallback != null) {
-            _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
+            if (key == undefined) {
+              key = point_out_split[0];
+            }
+
+            var modify_target_device = {
+              device_number: target_device_number ? target_device_number : null,
+              device_number_full: this.$parent.getSlotPath().$names.join("_"),
+              point_name: point_name ? point_name : null,
+              value: key,
+            };
+            if (
+              _this.changeCallback != undefined &&
+              _this.changeCallback != null
+            ) {
+              _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
+            }
           }
+        },
+        function (err) {
+          console.log(err);
         }
-      }, function (err) {
-        console.log(err)
-      });
+      );
 
       //使用bql語法
       // var building_tag = "H";
       // var system_tag = "M10";
       // baja.Ord.make(`ip:greencloud.fic.com.tw|foxs:|station:|slot:/Arena/${building_tag}/${system_tag}|bql:select name, displayname, slotPath, out.value, out from control:ControlPoint`)
-      console.log(`local:|foxs:${port}|station:|slot:/${_this.ordPath.area_tag}/${_this.ordPath.building_tag}/${_this.ordPath.system_tag}/${_this.ordPath.name_tag}${_this.ordPath.flo_tag ? `/${_this.ordPath.flo_tag}` : ""}|bql:select name, displayname, slotPath, out.value, out, facets  from control:ControlPoint`);
-      baja.Ord.make(`local:|foxs:${port}|station:|slot:/${_this.ordPath.area_tag}/${_this.ordPath.building_tag}/${_this.ordPath.system_tag}/${_this.ordPath.name_tag}${_this.ordPath.flo_tag ? `/${_this.ordPath.flo_tag}` : ""}|bql:select name, displayname, slotPath, out.value, out, facets  from control:ControlPoint`)
-        .get(
-          function (table) {
-            var tableStart, tableFinish;
-            var subStart, subFinish;
-            var component_index = 0;
-            var total_component_index = 0;
-            var totalTargetDevice = [];
-            var readBqlFinish = new Date(Date.now());
-            // $("#readPath-finish-timestamp").html(readBqlFinish.toISOString());
-            // $("#readPath-finish-time").html((readBqlFinish.getTime() - init_start.getTime()) / 1000 + "sec");
-            console.log("讀取路徑完成-花費時間", (readBqlFinish.getTime() - init_start.getTime()) / 1000 + "sec");
-            table.cursor({
-              before: function () {
-                totalTargetDevice = [];
-                tableStart = new Date(Date.now());
-                $("#table-start-timestamp").html(tableStart.toISOString());
+      console.log(
+        `local:|foxs:${port}|station:|slot:/${_this.ordPath.area_tag}/${_this.ordPath.building_tag
+        }/${_this.ordPath.system_tag}/${_this.ordPath.name_tag}${_this.ordPath.flo_tag ? `/${_this.ordPath.flo_tag}` : ""
+        }|bql:select name, displayname, slotPath, out.value, out, facets  from control:ControlPoint`
+      );
+      baja.Ord.make(
+        `local:|foxs:${port}|station:|slot:/${_this.ordPath.area_tag}/${_this.ordPath.building_tag
+        }/${_this.ordPath.system_tag}/${_this.ordPath.name_tag}${_this.ordPath.flo_tag ? `/${_this.ordPath.flo_tag}` : ""
+        }|bql:select name, displayname, slotPath, out.value, out, facets  from control:ControlPoint`
+      ).get(function (table) {
+        var tableStart, tableFinish;
+        var subStart, subFinish;
+        var component_index = 0;
+        var total_component_index = 0;
+        var totalTargetDevice = [];
+        var readBqlFinish = new Date(Date.now());
+        // $("#readPath-finish-timestamp").html(readBqlFinish.toISOString());
+        // $("#readPath-finish-time").html((readBqlFinish.getTime() - init_start.getTime()) / 1000 + "sec");
+        console.log(
+          "讀取路徑完成-花費時間",
+          (readBqlFinish.getTime() - init_start.getTime()) / 1000 + "sec"
+        );
+        table.cursor({
+          before: function () {
+            totalTargetDevice = [];
+            tableStart = new Date(Date.now());
+            $("#table-start-timestamp").html(tableStart.toISOString());
+          },
+          each: function (item, index) {
+            if (index < 1) {
+              subStart = new Date(Date.now());
+              $("#sub-start").html(subStart.toISOString());
+            }
+            $("#sub-number").html(index + 1);
+            total_component_index = index;
 
+            var target_device_number_split =
+              this.getDisplay("slotPath").split("/");
+            var target_device_number = target_device_number_split[8];
+            //console.log(target_device_number);
+            var point_name = this.getDisplay("name");
+            var facets = this.getDisplay("facets");
 
-              },
-              each: function (item, index) {
-                if (index < 1) {
-                  subStart = new Date(Date.now());
-                  $("#sub-start").html(subStart.toISOString());
-                }
-                $("#sub-number").html(index + 1);
-                total_component_index = index;
+            //依據Facets判斷回傳的內容值為何
+            var facets_split = facets.split(",");
+            var facets_arr = [];
+            facets_split.forEach(function (item, index) {
+              facets_arr.push(item.split("="));
+            });
 
+            facets = facets_arr.reduce(
+              (obj, cur) => ({ ...obj, [cur[0]]: cur[1] }),
+              {}
+            );
 
+            var point_out_split = this.getDisplay("out").split(" ");
 
-                var target_device_number_split = this.getDisplay("slotPath").split('/');
-                var target_device_number = target_device_number_split[8];
-                //console.log(target_device_number);
-                var point_name = this.getDisplay("name");
-                var facets = this.getDisplay("facets");
+            let key = Object.keys(facets).find(
+              (k) => facets[k] === point_out_split[0]
+            );
 
-                //依據Facets判斷回傳的內容值為何
-                var facets_split = facets.split(',');
-                var facets_arr = [];
-                facets_split.forEach(function (item, index) {
-                  facets_arr.push(item.split('='));
-                });
+            if (key == undefined) {
+              key = point_out_split[0];
+            }
 
-                facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
+            var modify_target_device = {
+              device_number: target_device_number ? target_device_number : null,
+              device_number_full: this.getDisplay("slotPath")
+                .split("slot:")[1]
+                .split("/")
+                .slice(1, -1)
+                .join("_"),
+              point_name: point_name ? point_name : null,
+              value: key,
+            };
+            totalTargetDevice.push(modify_target_device);
+            //取得component當下就更新設備點位
+            // if (_this.changeCallback != undefined && _this.changeCallback != null) {
+            //     _this.changeCallback(modify_target_device);
+            // }
+            if (pageAct.sysSubTag === "L1") {
+              if (
+                point_name === "SSC" ||
+                point_name === "TRIP" ||
+                point_name === "ONOFF"
+              ) {
+                if (
+                  _this.changeCallback != undefined &&
+                  _this.changeCallback != null
+                ) {
+                  _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
+                  baja.Ord.make(
+                    `local:|foxs:${port}|station:|` +
+                    this.getDisplay("slotPath")
+                  )
+                    .get()
+                    .then(function (component) {
+                      // console.log("component",component)
+                      component_index++;
+                      var target_device_number = component.$parent
+                        .getDisplayName()
+                        .split("_")
+                        .slice(0, 5)
+                        .join("_");
 
-                var point_out_split = this.getDisplay("out").split(' ');
+                      var out_value = component.getOutDisplay();
+                      var target_device_number = component.$parent
+                        .getDisplayName()
+                        .split("_")
+                        .slice(0, 5)
+                        .join("_");
+                      var point_name = component.getDisplayName();
+                      //依據Facets判斷回傳的內容值為何
+                      var facets_split = component
+                        .getFacets1()
+                        .$cEncStr.split("|");
+                      var facets_arr = [];
+                      facets_split.forEach(function (item, index) {
+                        facets_arr.push(item.split("=s:"));
+                      });
 
-                let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
+                      var facets = facets_arr.reduce(
+                        (obj, cur) => ({ ...obj, [cur[0]]: cur[1] }),
+                        {}
+                      );
 
-                if (key == undefined) {
-                  key = point_out_split[0];
-                }
+                      var point_out_split = component
+                        .getOutDisplay()
+                        .split(" ");
 
-                var modify_target_device = {
-                  "device_number": target_device_number ? target_device_number : null,
-                  "device_number_full": this.getDisplay("slotPath").split("slot:")[1].split('/').slice(1, -1).join("_"),
-                  "point_name": point_name ? point_name : null,
-                  "value": key
-                }
-                totalTargetDevice.push(modify_target_device);
-                //取得component當下就更新設備點位
-                // if (_this.changeCallback != undefined && _this.changeCallback != null) {
-                //     _this.changeCallback(modify_target_device);
-                // }
-                if (pageAct.sysSubTag === "L1") {
-                  if (point_name === "SSC" || point_name === "TRIP" || point_name === "ONOFF") {
-                    if (_this.changeCallback != undefined && _this.changeCallback != null) {
-                      _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
-                      baja.Ord.make(`local:|foxs:${port}|station:|` + this.getDisplay("slotPath"))
-                        .get()
-                        .then(function (component) {
-                          // console.log("component",component)
-                          component_index++;
-                          var target_device_number = component.$parent.getDisplayName().split('_').slice(0, 5).join('_');
+                      let key = Object.keys(facets).find(
+                        (k) => facets[k] === point_out_split[0]
+                      );
 
-                          var out_value = component.getOutDisplay();
-                          var target_device_number = component.$parent.getDisplayName().split('_').slice(0, 5).join('_');
-                          var point_name = component.getDisplayName();
-                          //依據Facets判斷回傳的內容值為何
-                          var facets_split = component.getFacets1().$cEncStr.split('|');
-                          var facets_arr = [];
-                          facets_split.forEach(function (item, index) {
-                            facets_arr.push(item.split('=s:'));
-                          });
+                      if (key == undefined) {
+                        key = point_out_split[0];
+                      }
 
-                          var facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
+                      var modify_target_device = {
+                        device_number: target_device_number
+                          ? target_device_number
+                          : null,
+                        device_number_full: component.$parent
+                          .getSlotPath()
+                          .$names.join("_"),
+                        point_name: point_name ? point_name : null,
+                        value: key,
+                      };
 
-                          var point_out_split = component.getOutDisplay().split(' ');
-
-                          let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
-
-                          if (key == undefined) {
-                            key = point_out_split[0];
-                          }
-
-                          var modify_target_device = {
-                            "device_number": target_device_number ? target_device_number : null,
-                            "device_number_full": component.$parent.getSlotPath().$names.join("_"),
-                            "point_name": point_name ? point_name : null,
-                            "value": key
-                          }
-
-                          if (pageAct.sysSubTag === "L1") {
-                            if (point_name === "SSC" || point_name === "TRIP" || point_name === "ONOFF") {
-                              if (_this.changeCallback != undefined && _this.changeCallback != null) {
-                                _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
-                              }
-                            }
-                          } else {
-                            if (_this.changeCallback != undefined && _this.changeCallback != null) {
-                              _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
-                            }
-                          }
-
-
-                          // //依據Facets判斷回傳的內容值為何
-                          // var facets_split = component.getFacets1().$cEncStr.split('|');
-                          // var facets_arr = [];
-                          // facets_split.forEach(function (item, index) {
-                          //   facets_arr.push(item.split('=s:'));
-                          // });
-
-                          // var facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
-
-                          // var point_out_split = component.getOutDisplay().split(' ');
-
-                          // let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
-
-                          // if (key == undefined) {
-                          //   key = point_out_split[0];
-                          // }
-
-                          // var modify_target_device = {
-                          //   "device_number": target_device_number ? target_device_number : null,
-                          //   "point_name": point_name ? point_name : null,
-                          //   "value": key
-                          // }
-
-                          // //取得component當下就更新設備點位
-                          // if (baja_subscribe_device_callback_func != undefined && baja_subscribe_device_callback_func != null) {
-                          //   if (component_index == total_component_index) {
-                          //     baja_subscribe_device_callback_func(modify_target_device, true);
-                          //   }
-                          //   else {
-                          //     baja_subscribe_device_callback_func(modify_target_device);
-                          //   }
-                          // }
-
-                          if (pageAct.sysSubTag === "L1") {
-                            if (point_name === "SSC" || point_name === "TRIP" || point_name === "ONOFF") {
-                              sub.subscribe({
-                                comps: component,
-                              });
-                            }
-                          } else {
-                            sub.subscribe({
-                              comps: component,
-                            });
-                          }
-
-                          // sub.subscribe({
-                          //     comps: component,
-                          // });
-                          tolSubList.push(sub);
-                          subFinish = new Date(Date.now());
-                          $("#sub-end").html(subFinish.toISOString());
-                          $("#sub-time").html((subFinish.getTime() - subStart.getTime()) / 1000 + "sec");
-                          // console.log("訂閱完成時間", (subFinish.getTime() - subStart.getTime()) / 1000 + "sec");
-                        });
-                    }
-                  }
-                } else {
-                  if (_this.changeCallback != undefined && _this.changeCallback != null) {
-                    _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
-                    baja.Ord.make(`local:|foxs:${port}|station:|` + this.getDisplay("slotPath"))
-                      .get()
-                      .then(function (component) {
-                        component_index++;
-                        var target_device_number = component.$parent.getDisplayName().split('_').slice(0, 5).join('_');
-
-                        var out_value = component.getOutDisplay();
-                        var target_device_number = component.$parent.getDisplayName().split('_').slice(0, 5).join('_');
-                        var point_name = component.getDisplayName();
-                        //依據Facets判斷回傳的內容值為何
-                        var facets_split = component.getFacets1().$cEncStr.split('|');
-                        var facets_arr = [];
-                        facets_split.forEach(function (item, index) {
-                          facets_arr.push(item.split('=s:'));
-                        });
-
-                        var facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
-
-                        var point_out_split = component.getOutDisplay().split(' ');
-
-                        let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
-
-                        if (key == undefined) {
-                          key = point_out_split[0];
-                        }
-
-                        var modify_target_device = {
-                          "device_number": target_device_number ? target_device_number : null,
-                          "device_number_full": component.$parent.getSlotPath().$names.join("_"),
-                          "point_name": point_name ? point_name : null,
-                          "value": key
-                        }
-
-                        if (pageAct.sysSubTag === "L1") {
-                          if (point_name === "SSC" || point_name === "TRIP" || point_name === "ONOFF") {
-                            if (_this.changeCallback != undefined && _this.changeCallback != null) {
-                              _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
-                            }
-                          }
-                        } else {
-                          if (_this.changeCallback != undefined && _this.changeCallback != null) {
+                      if (pageAct.sysSubTag === "L1") {
+                        if (
+                          point_name === "SSC" ||
+                          point_name === "TRIP" ||
+                          point_name === "ONOFF"
+                        ) {
+                          if (
+                            _this.changeCallback != undefined &&
+                            _this.changeCallback != null
+                          ) {
                             _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
                           }
                         }
+                      } else {
+                        if (
+                          _this.changeCallback != undefined &&
+                          _this.changeCallback != null
+                        ) {
+                          _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
+                        }
+                      }
 
+                      // //依據Facets判斷回傳的內容值為何
+                      // var facets_split = component.getFacets1().$cEncStr.split('|');
+                      // var facets_arr = [];
+                      // facets_split.forEach(function (item, index) {
+                      //   facets_arr.push(item.split('=s:'));
+                      // });
 
-                        // //依據Facets判斷回傳的內容值為何
-                        // var facets_split = component.getFacets1().$cEncStr.split('|');
-                        // var facets_arr = [];
-                        // facets_split.forEach(function (item, index) {
-                        //   facets_arr.push(item.split('=s:'));
-                        // });
+                      // var facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
 
-                        // var facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
+                      // var point_out_split = component.getOutDisplay().split(' ');
 
-                        // var point_out_split = component.getOutDisplay().split(' ');
+                      // let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
 
-                        // let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
+                      // if (key == undefined) {
+                      //   key = point_out_split[0];
+                      // }
 
-                        // if (key == undefined) {
-                        //   key = point_out_split[0];
-                        // }
+                      // var modify_target_device = {
+                      //   "device_number": target_device_number ? target_device_number : null,
+                      //   "point_name": point_name ? point_name : null,
+                      //   "value": key
+                      // }
 
-                        // var modify_target_device = {
-                        //   "device_number": target_device_number ? target_device_number : null,
-                        //   "point_name": point_name ? point_name : null,
-                        //   "value": key
-                        // }
+                      // //取得component當下就更新設備點位
+                      // if (baja_subscribe_device_callback_func != undefined && baja_subscribe_device_callback_func != null) {
+                      //   if (component_index == total_component_index) {
+                      //     baja_subscribe_device_callback_func(modify_target_device, true);
+                      //   }
+                      //   else {
+                      //     baja_subscribe_device_callback_func(modify_target_device);
+                      //   }
+                      // }
 
-                        // //取得component當下就更新設備點位
-                        // if (baja_subscribe_device_callback_func != undefined && baja_subscribe_device_callback_func != null) {
-                        //   if (component_index == total_component_index) {
-                        //     baja_subscribe_device_callback_func(modify_target_device, true);
-                        //   }
-                        //   else {
-                        //     baja_subscribe_device_callback_func(modify_target_device);
-                        //   }
-                        // }
-
-                        if (pageAct.sysSubTag === "L1") {
-                          if (point_name === "SSC" || point_name === "TRIP" || point_name === "ONOFF") {
-                            sub.subscribe({
-                              comps: component,
-                            });
-                          }
-                        } else {
+                      if (pageAct.sysSubTag === "L1") {
+                        if (
+                          point_name === "SSC" ||
+                          point_name === "TRIP" ||
+                          point_name === "ONOFF"
+                        ) {
                           sub.subscribe({
                             comps: component,
                           });
                         }
+                      } else {
+                        sub.subscribe({
+                          comps: component,
+                        });
+                      }
 
-                        // sub.subscribe({
-                        //     comps: component,
-                        // });
-                        tolSubList.push(sub);
-                        subFinish = new Date(Date.now());
-                        $("#sub-end").html(subFinish.toISOString());
-                        $("#sub-time").html((subFinish.getTime() - subStart.getTime()) / 1000 + "sec");
-                        // console.log("訂閱完成時間", (subFinish.getTime() - subStart.getTime()) / 1000 + "sec");
+                      // sub.subscribe({
+                      //     comps: component,
+                      // });
+                      tolSubList.push(sub);
+                      subFinish = new Date(Date.now());
+                      $("#sub-end").html(subFinish.toISOString());
+                      $("#sub-time").html(
+                        (subFinish.getTime() - subStart.getTime()) / 1000 +
+                        "sec"
+                      );
+                      // console.log("訂閱完成時間", (subFinish.getTime() - subStart.getTime()) / 1000 + "sec");
+                    });
+                }
+              }
+            } else {
+              if (
+                _this.changeCallback != undefined &&
+                _this.changeCallback != null
+              ) {
+                _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
+                baja.Ord.make(
+                  `local:|foxs:${port}|station:|` + this.getDisplay("slotPath")
+                )
+                  .get()
+                  .then(function (component) {
+                    component_index++;
+                    var target_device_number = component.$parent
+                      .getDisplayName()
+                      .split("_")
+                      .slice(0, 5)
+                      .join("_");
+
+                    var out_value = component.getOutDisplay();
+                    var target_device_number = component.$parent
+                      .getDisplayName()
+                      .split("_")
+                      .slice(0, 5)
+                      .join("_");
+                    var point_name = component.getDisplayName();
+                    //依據Facets判斷回傳的內容值為何
+                    var facets_split = component
+                      .getFacets1()
+                      .$cEncStr.split("|");
+                    var facets_arr = [];
+                    facets_split.forEach(function (item, index) {
+                      facets_arr.push(item.split("=s:"));
+                    });
+
+                    var facets = facets_arr.reduce(
+                      (obj, cur) => ({ ...obj, [cur[0]]: cur[1] }),
+                      {}
+                    );
+
+                    var point_out_split = component.getOutDisplay().split(" ");
+
+                    let key = Object.keys(facets).find(
+                      (k) => facets[k] === point_out_split[0]
+                    );
+
+                    if (key == undefined) {
+                      key = point_out_split[0];
+                    }
+
+                    var modify_target_device = {
+                      device_number: target_device_number
+                        ? target_device_number
+                        : null,
+                      device_number_full: component.$parent
+                        .getSlotPath()
+                        .$names.join("_"),
+                      point_name: point_name ? point_name : null,
+                      value: key,
+                    };
+
+                    if (pageAct.sysSubTag === "L1") {
+                      if (
+                        point_name === "SSC" ||
+                        point_name === "TRIP" ||
+                        point_name === "ONOFF"
+                      ) {
+                        if (
+                          _this.changeCallback != undefined &&
+                          _this.changeCallback != null
+                        ) {
+                          _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
+                        }
+                      }
+                    } else {
+                      if (
+                        _this.changeCallback != undefined &&
+                        _this.changeCallback != null
+                      ) {
+                        _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
+                      }
+                    }
+
+                    // //依據Facets判斷回傳的內容值為何
+                    // var facets_split = component.getFacets1().$cEncStr.split('|');
+                    // var facets_arr = [];
+                    // facets_split.forEach(function (item, index) {
+                    //   facets_arr.push(item.split('=s:'));
+                    // });
+
+                    // var facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
+
+                    // var point_out_split = component.getOutDisplay().split(' ');
+
+                    // let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
+
+                    // if (key == undefined) {
+                    //   key = point_out_split[0];
+                    // }
+
+                    // var modify_target_device = {
+                    //   "device_number": target_device_number ? target_device_number : null,
+                    //   "point_name": point_name ? point_name : null,
+                    //   "value": key
+                    // }
+
+                    // //取得component當下就更新設備點位
+                    // if (baja_subscribe_device_callback_func != undefined && baja_subscribe_device_callback_func != null) {
+                    //   if (component_index == total_component_index) {
+                    //     baja_subscribe_device_callback_func(modify_target_device, true);
+                    //   }
+                    //   else {
+                    //     baja_subscribe_device_callback_func(modify_target_device);
+                    //   }
+                    // }
+
+                    if (pageAct.sysSubTag === "L1") {
+                      if (
+                        point_name === "SSC" ||
+                        point_name === "TRIP" ||
+                        point_name === "ONOFF"
+                      ) {
+                        sub.subscribe({
+                          comps: component,
+                        });
+                      }
+                    } else {
+                      sub.subscribe({
+                        comps: component,
                       });
-                  }
-                }
+                    }
 
-
-
-              },
-              after: function () {
-                tableFinish = new Date(Date.now());
-                // $("#table-finish-timestamp").html(tableFinish.toISOString());
-                // $("#table-time").html((tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec");
-                //取得component當下就更新設備點位
-                if (_this.changeEndCallback != undefined && _this.changeEndCallback != null) {
-                  _this.changeEndCallback(totalTargetDevice);
-                }
-                endPageLoading ? endPageLoading() : ""
-                console.log("表格完成時間", (tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec");
-              },
-              limit: -1,
-              offset: 0
-            });
-          });
-    })
-  }
+                    // sub.subscribe({
+                    //     comps: component,
+                    // });
+                    tolSubList.push(sub);
+                    subFinish = new Date(Date.now());
+                    $("#sub-end").html(subFinish.toISOString());
+                    $("#sub-time").html(
+                      (subFinish.getTime() - subStart.getTime()) / 1000 + "sec"
+                    );
+                    // console.log("訂閱完成時間", (subFinish.getTime() - subStart.getTime()) / 1000 + "sec");
+                  });
+              }
+            }
+          },
+          after: function () {
+            tableFinish = new Date(Date.now());
+            // $("#table-finish-timestamp").html(tableFinish.toISOString());
+            // $("#table-time").html((tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec");
+            //取得component當下就更新設備點位
+            if (
+              _this.changeEndCallback != undefined &&
+              _this.changeEndCallback != null
+            ) {
+              _this.changeEndCallback(totalTargetDevice);
+            }
+            endPageLoading ? endPageLoading() : "";
+            console.log(
+              "表格完成時間",
+              (tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec"
+            );
+          },
+          limit: -1,
+          offset: 0,
+        });
+      });
+    });
+  };
 }
 
 //function subscriptionDevices() {
@@ -427,23 +547,22 @@ function subscriptionAlarms() {
     if (callBackFunc != undefined && callBackFunc != null) {
       baja_subscribe_alarm_callback_func = callBackFunc;
     }
-  }
+  };
   // BQL訂閱結束回傳的Function
   this.setSubscribeAlarmEndCallBack = function (callBackFunc) {
     if (callBackFunc != undefined && callBackFunc != null) {
       baja_subscribe_end_alarm_callback_func = callBackFunc;
     }
-  }
-
+  };
 }
 
 function subscriptionElectricmeter() {
   // 用BQL的方式去訂閱
   this.setSubscribeElectricmeterByBql = function (tempOrdPath) {
-    if(tempOrdPath.devicePath?.includes("/")){
+    if (tempOrdPath.devicePath?.includes("/")) {
       let newDevPath = [];
-      for(var tag of tempOrdPath.devicePath?.split("/")){
-        if(!isNaN(parseInt(tag.slice(0,1)))){
+      for (var tag of tempOrdPath.devicePath?.split("/")) {
+        if (!isNaN(parseInt(tag.slice(0, 1)))) {
           tag = "$3" + tag;
         }
         newDevPath.push(tag);
@@ -457,23 +576,22 @@ function subscriptionElectricmeter() {
     if (callBackFunc != undefined && callBackFunc != null) {
       baja_subscribe_electricmeter_callback_func = callBackFunc;
     }
-  }
+  };
   // BQL訂閱結束回傳的Function
   this.setSubscribeElectricmeterEndCallBack = function (callBackFunc) {
     if (callBackFunc != undefined && callBackFunc != null) {
       baja_subscribe_end_electricmeter_callback_func = callBackFunc;
     }
-  }
+  };
 }
 
 function MyBaja() {
   // 取得使用者帳號
   this.setMyUserAccount = function (callBackFunc = null) {
-    require(['baja!'], function (baja) {
+    require(["baja!"], function (baja) {
       user_name = baja.getUserName();
       callBackFunc ? callBackFunc(user_name) : "";
     });
-
   };
 }
 
@@ -482,7 +600,6 @@ function MyBaja() {
  */
 //function BajaSubscribeDevicesByBql() {
 
-
 //    require(['baja!'], function (baja) {
 //        console.log("進入Function 準備執行BQL訂閱");
 //        startPageLoading ? startPageLoading() : ""
@@ -560,8 +677,6 @@ function MyBaja() {
 //                            $("#sub-number").html(index + 1);
 //                            total_component_index = index;
 
-
-
 //                            var target_device_number_split = this.getDisplay("slotPath").split('/');
 //                            var target_device_number = target_device_number_split[8];
 //                            //console.log(target_device_number);
@@ -597,7 +712,6 @@ function MyBaja() {
 //                                baja_subscribe_device_callback_func(modify_target_device);
 //                            }
 
-
 //                            baja.Ord.make(`local:|foxs:${port}|station:|` + this.getDisplay("slotPath"))
 //                                .get()
 //                                .then(function (component) {
@@ -670,21 +784,34 @@ function MyBaja() {
  * 使用者透過BQL指定路徑去訂閱Alarm
  */
 function BajaSubscribeAlarmsByBql(ordPathForAlarm) {
-  require(['baja!'], function (baja) {
+  require(["baja!"], function (baja) {
     console.log("進入Function 準備執行BQL訂閱");
     var init_start = new Date(Date.now());
     var sub = new baja.Subscriber();
-    startPageLoading ? startPageLoading() : ""
-    sub.attach('changed', function (prop) {
-      if (prop.getName() === 'out') {
-        var sourceState = (this.$map.$map.in10.$val.$map.$map.value.$display) == 'true' ? "Offnormal" : "Normal";
+    startPageLoading ? startPageLoading() : "";
+    sub.attach("changed", function (prop) {
+      if (prop.getName() === "out") {
+        var sourceState =
+          this.$map.$map.in10.$val.$map.$map.value.$display == "true"
+            ? "Offnormal"
+            : "Normal";
 
         var modify_target_device = {
-          "system": ordPathForAlarm.area_tag + "_" + ordPathForAlarm.building_tag + "_" + ordPathForAlarm.system_tag + "_" + ordPathForAlarm.name_tag,
-          "sourceState": sourceState ? sourceState : null
-        }
+          system:
+            ordPathForAlarm.area_tag +
+            "_" +
+            ordPathForAlarm.building_tag +
+            "_" +
+            ordPathForAlarm.system_tag +
+            "_" +
+            ordPathForAlarm.name_tag,
+          sourceState: sourceState ? sourceState : null,
+        };
 
-        if (baja_subscribe_alarm_callback_func != undefined && baja_subscribe_alarm_callback_func != null) {
+        if (
+          baja_subscribe_alarm_callback_func != undefined &&
+          baja_subscribe_alarm_callback_func != null
+        ) {
           baja_subscribe_alarm_callback_func(modify_target_device);
         }
       }
@@ -692,219 +819,300 @@ function BajaSubscribeAlarmsByBql(ordPathForAlarm) {
 
     //使用bql語法
     // console.log(`local:|foxs:${port}|alarm:|bql:select top 1 timestamp, sourceState, normalTime where alarmData.sourceName like '%${ordPathForAlarm.area_tag}_${ordPathForAlarm.building_tag}_${ordPathForAlarm.system_tag}_${ordPathForAlarm.name_tag}_%' order by timestamp desc`);
-    baja.Ord.make(`local:|foxs:${port}|alarm:|bql:select top 1 timestamp, sourceState, alarmData, alarmData.sourceName, normalTime where alarmData.sourceName like '%${ordPathForAlarm.area_tag}_${ordPathForAlarm.building_tag}_${ordPathForAlarm.system_tag}_${ordPathForAlarm.name_tag}_%' order by timestamp desc`)
-      .get(
-        function (table) {
-          var tableStart, tableFinish;
-          var subStart, subFinish;
-          var totalTargetDevice = [];
-          var component_index = 0;
-          var total_component_index = 0;
-          var readBqlFinish = new Date(Date.now());
-          console.log("讀取路徑完成-花費時間", (readBqlFinish.getTime() - init_start.getTime()) / 1000 + "sec");
+    baja.Ord.make(
+      `local:|foxs:${port}|alarm:|bql:select top 1 timestamp, sourceState, alarmData, alarmData.sourceName, normalTime where alarmData.sourceName like '%${ordPathForAlarm.area_tag}_${ordPathForAlarm.building_tag}_${ordPathForAlarm.system_tag}_${ordPathForAlarm.name_tag}_%' order by timestamp desc`
+    ).get(function (table) {
+      var tableStart, tableFinish;
+      var subStart, subFinish;
+      var totalTargetDevice = [];
+      var component_index = 0;
+      var total_component_index = 0;
+      var readBqlFinish = new Date(Date.now());
+      console.log(
+        "讀取路徑完成-花費時間",
+        (readBqlFinish.getTime() - init_start.getTime()) / 1000 + "sec"
+      );
 
-          table.cursor({
-            before: function () {
-              totalTargetDevice = [];
-              tableStart = new Date(Date.now());
-              render_start = new Date(Date.now());
-            },
-            each: function (item, index) {
-              if (index < 1) {
-                subStart = new Date(Date.now());
-              }
-              total_component_index = index;
+      table.cursor({
+        before: function () {
+          totalTargetDevice = [];
+          tableStart = new Date(Date.now());
+          render_start = new Date(Date.now());
+        },
+        each: function (item, index) {
+          if (index < 1) {
+            subStart = new Date(Date.now());
+          }
+          total_component_index = index;
 
-              var sourceState = this.getDisplay("sourceState");
-              //var sourceName = (item.$map.$map.alarmData$2esourceName.$display).replace('_', '/');
-              var sourceNameArray = (item.$map.$map.alarmData$2esourceName.$display).split('_');
-              var slotPath = sourceNameArray[0] + "/" + sourceNameArray[1] + "/" + sourceNameArray[2] + "/" + sourceNameArray[3] + "/" + sourceNameArray[4] + "/" + sourceNameArray[5] + "/" + sourceNameArray[6] + "/" + sourceNameArray[7] + "/" + sourceNameArray[8];
-              var normalTime = this.getDisplay("normalTime");
+          var sourceState = this.getDisplay("sourceState");
+          //var sourceName = (item.$map.$map.alarmData$2esourceName.$display).replace('_', '/');
+          var sourceNameArray =
+            item.$map.$map.alarmData$2esourceName.$display.split("_");
+          var slotPath =
+            sourceNameArray[0] +
+            "/" +
+            sourceNameArray[1] +
+            "/" +
+            sourceNameArray[2] +
+            "/" +
+            sourceNameArray[3] +
+            "/" +
+            sourceNameArray[4] +
+            "/" +
+            sourceNameArray[5] +
+            "/" +
+            sourceNameArray[6] +
+            "/" +
+            sourceNameArray[7] +
+            "/" +
+            sourceNameArray[8];
+          var normalTime = this.getDisplay("normalTime");
 
-              var modify_target_device = {
-                "system": ordPathForAlarm.area_tag + "_" + ordPathForAlarm.building_tag + "_" + ordPathForAlarm.system_tag + "_" + ordPathForAlarm.name_tag,
-                "sourceState": sourceState ? sourceState : null
-              }
-              totalTargetDevice.push(modify_target_device);
-              //取得component當下就更新設備點位
-              if (baja_subscribe_alarm_callback_func != undefined && baja_subscribe_alarm_callback_func != null) {
-                baja_subscribe_alarm_callback_func(modify_target_device);
-              }
+          var modify_target_device = {
+            system:
+              ordPathForAlarm.area_tag +
+              "_" +
+              ordPathForAlarm.building_tag +
+              "_" +
+              ordPathForAlarm.system_tag +
+              "_" +
+              ordPathForAlarm.name_tag,
+            sourceState: sourceState ? sourceState : null,
+          };
+          totalTargetDevice.push(modify_target_device);
+          //取得component當下就更新設備點位
+          if (
+            baja_subscribe_alarm_callback_func != undefined &&
+            baja_subscribe_alarm_callback_func != null
+          ) {
+            baja_subscribe_alarm_callback_func(modify_target_device);
+          }
 
-              baja.Ord.make("local:|foxs:|station:|slot:/" + slotPath)
-                .get()
-                .then(function (component) {
-                  component_index++;
+          baja.Ord.make("local:|foxs:|station:|slot:/" + slotPath)
+            .get()
+            .then(function (component) {
+              component_index++;
 
-                  sub.subscribe({
-                    comps: component,
-                  });
+              sub.subscribe({
+                comps: component,
+              });
 
-                  subFinish = new Date(Date.now());
-                  console.log("訂閱完成時間", (subFinish.getTime() - subStart.getTime()) / 1000 + "sec");
-                });
-            },
-            after: function () {
-              tableFinish = new Date(Date.now());
-              if (baja_subscribe_end_alarm_callback_func != undefined && baja_subscribe_end_alarm_callback_func != null) {
-                baja_subscribe_end_alarm_callback_func(totalTargetDevice);
-              }
-              endPageLoading ? endPageLoading() : ""
-              console.log("表格完成時間", (tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec");
-            },
-            limit: -1,
-            offset: 0
-          });
-        });
+              subFinish = new Date(Date.now());
+              console.log(
+                "訂閱完成時間",
+                (subFinish.getTime() - subStart.getTime()) / 1000 + "sec"
+              );
+            });
+        },
+        after: function () {
+          tableFinish = new Date(Date.now());
+          if (
+            baja_subscribe_end_alarm_callback_func != undefined &&
+            baja_subscribe_end_alarm_callback_func != null
+          ) {
+            baja_subscribe_end_alarm_callback_func(totalTargetDevice);
+          }
+          endPageLoading ? endPageLoading() : "";
+          console.log(
+            "表格完成時間",
+            (tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec"
+          );
+        },
+        limit: -1,
+        offset: 0,
+      });
+    });
   });
 }
 
 /**
  * 使用者透過BQL指定路徑去訂閱 electricmeter
  */
-function BajaSubscribeElectricmeterByBql(ordPathForElectricmeter) {
-
-
-  require(['baja!'], function (baja) {
+function BajaSubscribeElectricmeterByBql(
+  ordPathForElectricmeter,
+  callback = null
+) {
+  require(["baja!"], function (baja) {
     //console.log("進入Function 準備執行BQL訂閱");
-    startPageLoading ? startPageLoading() : ""
+    startPageLoading ? startPageLoading() : "";
     var init_start = new Date(Date.now());
     var sub = new baja.Subscriber();
 
-    sub.attach('changed', function (prop) {
-      if (prop.getName() === 'out') {
-        var out_value = this.getOutDisplay();
-        var target_device_number = this.$parent.getDisplayName().split('_').slice(0, 5).join('_');
-        var point_name = this.getDisplayName();
+    sub.attach(
+      "changed",
+      function (prop) {
+        if (prop.getName() === "out") {
+          var out_value = this.getOutDisplay();
+          var target_device_number = this.$parent
+            .getDisplayName()
+            .split("_")
+            .slice(0, 5)
+            .join("_");
+          var point_name = this.getDisplayName();
 
-        //依據Facets判斷回傳的內容值為何
-        var facets_split = this.getFacets1().$cEncStr.split('|');
-        var facets_arr = [];
-        facets_split.forEach(function (item, index) {
-          facets_arr.push(item.split('=s:'));
-        });
+          //依據Facets判斷回傳的內容值為何
+          var facets_split = this.getFacets1().$cEncStr.split("|");
+          var facets_arr = [];
+          facets_split.forEach(function (item, index) {
+            facets_arr.push(item.split("=s:"));
+          });
 
-        var facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
+          var facets = facets_arr.reduce(
+            (obj, cur) => ({ ...obj, [cur[0]]: cur[1] }),
+            {}
+          );
 
-        var point_out_split = this.getOutDisplay().split(' ');
+          var point_out_split = this.getOutDisplay().split(" ");
 
-        let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
+          let key = Object.keys(facets).find(
+            (k) => facets[k] === point_out_split[0]
+          );
 
-        if (key == undefined) {
-          key = point_out_split[0];
-        }
-
-        var modify_target_device = {
-          "device_number": target_device_number ? target_device_number : null,
-          //"device_number_full": this.$parent.getSlotPath().$names.join("_"),
-          "point_name": point_name ? point_name : null,
-          "value": key
-        }
-
-        if (baja_subscribe_electricmeter_callback_func != undefined && baja_subscribe_electricmeter_callback_func != null) {
-          baja_subscribe_electricmeter_callback_func(modify_target_device, true); //第2參數用在平面圖，刷新畫面
+          if (key == undefined) {
+            key = point_out_split[0];
+          }
+
+          var modify_target_device = {
+            device_number: target_device_number ? target_device_number : null,
+            //"device_number_full": this.$parent.getSlotPath().$names.join("_"),
+            point_name: point_name ? point_name : null,
+            value: key,
+          };
+
+          if (callback !== null) {
+            callback([modify_target_device]);
+          }
+
+          if (
+            baja_subscribe_electricmeter_callback_func != undefined &&
+            baja_subscribe_electricmeter_callback_func != null
+          ) {
+            baja_subscribe_electricmeter_callback_func(
+              modify_target_device,
+              true
+            ); //第2參數用在平面圖，刷新畫面
+          }
         }
+      },
+      function (err) {
+        console.log(err);
       }
-    }, function (err) {
-      console.log(err)
-    });
+    );
 
     //使用bql語法
-    // console.log(`local:|foxs:${port}|station:|slot:/${ordPathForElectricmeter.devicePath}|bql:select name, out, out.value, slotPath, facets from control:ControlPoint`);
-    baja.Ord.make(`local:|foxs:${port}|station:|slot:/${ordPathForElectricmeter.devicePath}|bql:select name, out, out.value, slotPath, facets from control:ControlPoint`)
-      .get(
-        function (table) {
-          var tableStart, tableFinish;
-          var subStart, subFinish;
-          var component_index = 0;
-          var total_component_index = 0;
-          var totalTargetDevice = [];
-          var readBqlFinish = new Date(Date.now());
-          //console.log("讀取路徑完成-花費時間", (readBqlFinish.getTime() - init_start.getTime()) / 1000 + "sec");
-          table.cursor({
-            before: function () {
-              totalTargetDevice = [];
-              tableStart = new Date(Date.now());
-              $("#table-start-timestamp").html(tableStart.toISOString());
-              render_start = new Date(Date.now());
+    // console.log(
+    //   `local:|foxs:${port}|station:|slot:/${ordPathForElectricmeter.devicePath}|bql:select name, out, out.value, slotPath, facets from control:ControlPoint`
+    // );
+    baja.Ord.make(
+      `local:|foxs:${port}|station:|slot:/${ordPathForElectricmeter.devicePath}|bql:select name, out, out.value, slotPath, facets from control:ControlPoint`
+    ).get(function (table) {
+      var tableStart, tableFinish;
+      var subStart, subFinish;
+      var component_index = 0;
+      var total_component_index = 0;
+      var totalTargetDevice = [];
+      var readBqlFinish = new Date(Date.now());
+      //console.log("讀取路徑完成-花費時間", (readBqlFinish.getTime() - init_start.getTime()) / 1000 + "sec");
+      table.cursor({
+        before: function () {
+          totalTargetDevice = [];
+          tableStart = new Date(Date.now());
+          $("#table-start-timestamp").html(tableStart.toISOString());
+          render_start = new Date(Date.now());
+        },
+        each: function (item, index) {
+          if (index < 1) {
+            subStart = new Date(Date.now());
+            $("#sub-start").html(subStart.toISOString());
+          }
+          $("#sub-number").html(index + 1);
+          total_component_index = index;
 
-            },
-            each: function (item, index) {
-              if (index < 1) {
-                subStart = new Date(Date.now());
-                $("#sub-start").html(subStart.toISOString());
-              }
-              $("#sub-number").html(index + 1);
-              total_component_index = index;
+          var target_device_number_split =
+            this.getDisplay("slotPath").split("/");
+          var target_device_number = target_device_number_split[8];
+          //console.log(target_device_number);
+          var point_name = this.getDisplay("name");
+          var facets = this.getDisplay("facets");
 
-
-
-              var target_device_number_split = this.getDisplay("slotPath").split('/');
-              var target_device_number = target_device_number_split[8];
-              //console.log(target_device_number);
-              var point_name = this.getDisplay("name");
-              var facets = this.getDisplay("facets");
-
-              //依據Facets判斷回傳的內容值為何
-              var facets_split = facets.split(',');
-              var facets_arr = [];
-              facets_split.forEach(function (item, index) {
-                facets_arr.push(item.split('='));
-              });
-
-              facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
-
-              var point_out_split = this.getDisplay("out").split(' ');
-
-              let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
-
-              if (key == undefined) {
-                key = point_out_split[0];
-              }
-
-              var modify_target_device = {
-                "device_number": target_device_number ? target_device_number : null,
-                //"device_number_full": this.getDisplay("slotPath").split("slot:")[1].split('/').slice(1, -1).join("_"),
-                "point_name": point_name ? point_name : null,
-                "value": key
-              }
-              totalTargetDevice.push(modify_target_device);
-              //取得component當下就更新設備點位
-              if (baja_subscribe_electricmeter_callback_func != undefined && baja_subscribe_electricmeter_callback_func != null) {
-                baja_subscribe_electricmeter_callback_func(modify_target_device);
-              }
-
-
-              baja.Ord.make(`local:|foxs:${port}|station:|` + this.getDisplay("slotPath"))
-                .get()
-                .then(function (component) {
-                  component_index++;
-                  //var target_device_number = component.$parent.getDisplayName().split('_').slice(0, 5).join('_');
-                  //var point_name = component.getDisplayName();
-
-                  sub.subscribe({
-                    comps: component,
-                  });
-                  tolSubList.push(sub);
-                  subFinish = new Date(Date.now());
-                  $("#sub-end").html(subFinish.toISOString());
-                  $("#sub-time").html((subFinish.getTime() - subStart.getTime()) / 1000 + "sec");
-                  // console.log("訂閱完成時間", (subFinish.getTime() - subStart.getTime()) / 1000 + "sec");
-                });
-            },
-            after: function () {
-              tableFinish = new Date(Date.now());
-              if (baja_subscribe_end_electricmeter_callback_func != undefined && baja_subscribe_end_electricmeter_callback_func != null) {
-                baja_subscribe_end_electricmeter_callback_func(totalTargetDevice);
-              }
-              endPageLoading ? endPageLoading() : ""
-              //console.log("表格完成時間", (tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec");
-            },
-            limit: -1,
-            offset: 0
+          //依據Facets判斷回傳的內容值為何
+          var facets_split = facets.split(",");
+          var facets_arr = [];
+          facets_split.forEach(function (item, index) {
+            facets_arr.push(item.split("="));
           });
-        });
-  })
+
+          facets = facets_arr.reduce(
+            (obj, cur) => ({ ...obj, [cur[0]]: cur[1] }),
+            {}
+          );
+
+          var point_out_split = this.getDisplay("out").split(" ");
+
+          let key = Object.keys(facets).find(
+            (k) => facets[k] === point_out_split[0]
+          );
+
+          if (key == undefined) {
+            key = point_out_split[0];
+          }
+
+          var modify_target_device = {
+            device_number: target_device_number ? target_device_number : null,
+            //"device_number_full": this.getDisplay("slotPath").split("slot:")[1].split('/').slice(1, -1).join("_"),
+            point_name: point_name ? point_name : null,
+            value: key,
+          };
+          totalTargetDevice.push(modify_target_device);
+          //取得component當下就更新設備點位
+          if (
+            baja_subscribe_electricmeter_callback_func != undefined &&
+            baja_subscribe_electricmeter_callback_func != null
+          ) {
+            baja_subscribe_electricmeter_callback_func(modify_target_device);
+          }
+
+          baja.Ord.make(
+            `local:|foxs:${port}|station:|` + this.getDisplay("slotPath")
+          )
+            .get()
+            .then(function (component) {
+              component_index++;
+              //var target_device_number = component.$parent.getDisplayName().split('_').slice(0, 5).join('_');
+              //var point_name = component.getDisplayName();
+
+              sub.subscribe({
+                comps: component,
+              });
+              tolSubList.push(sub);
+              subFinish = new Date(Date.now());
+              $("#sub-end").html(subFinish.toISOString());
+              $("#sub-time").html(
+                (subFinish.getTime() - subStart.getTime()) / 1000 + "sec"
+              );
+              // console.log("訂閱完成時間", (subFinish.getTime() - subStart.getTime()) / 1000 + "sec");
+            });
+        },
+        after: function () {
+          tableFinish = new Date(Date.now());
+          if (callback !== null) {
+            callback(totalTargetDevice);
+          }
+          if (
+            baja_subscribe_end_electricmeter_callback_func != undefined &&
+            baja_subscribe_end_electricmeter_callback_func != null
+          ) {
+            baja_subscribe_end_electricmeter_callback_func(totalTargetDevice);
+          }
+          endPageLoading ? endPageLoading() : "";
+          //console.log("表格完成時間", (tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec");
+        },
+        limit: -1,
+        offset: 0,
+      });
+    });
+  });
 }
 
 // function getAlarmCountByBaja(callback) {