diff --git a/Frontend/_historyData.html b/Frontend/_historyData.html
index 0f79cb0..ca1da80 100644
--- a/Frontend/_historyData.html
+++ b/Frontend/_historyData.html
@@ -16,7 +16,17 @@
 
         </div>
         <div class="col-sm-12 col-xl-10">
-            <div class="row bg-dark p-2 mb-5">
+            <div class="row bg-dark p-2">
+                <div>
+                    <div class="py-2 col-12" id="his_building">
+                        <div
+                        class="item btn-group btn-group-toggle"
+                        data-toggle="buttons"
+                        ></div>
+                    </div>
+                </div>
+            </div>
+            <div class="row bg-dark p-2 mb-5 align-items-center">
                 <div class="col-auto">
                     <div class="btn-group">
                         <button type="button" onclick="setDateType('day', this)" class="btn btn-secondary waves-effect waves-themed">日期</button>
@@ -70,9 +80,20 @@
 
 <script>
     var historyTable = null;
+    var buildingTag = null;
     $(function () {
-        initList();
+        let html = "";
+        for (let building of pageAct.buildList) {
+            html += `<label class="btn btn-secondary">
+                            <input type="radio" name="buildingRadio" id="radio_${building.building_tag}" value="${building.building_tag}" onChange="SelectBuild(this,'${building.building_tag}')"> ${building.full_name}
+                        </label>`;
+        }
+        $("#his_building").find(".item").empty();
+        $("#his_building").find(".item").append(html);
+        if ($("#his_building .item label").first())
+            $("#his_building .item label").first().click()
 
+        initList();
         // default list filter
         initApp.listFilter($('#js_default_list'), $('#js_default_list_filter'));
         // custom response message
@@ -161,11 +182,13 @@
                 }
             }
         });
+        
     });
 
     function initList() {
+        $(loadEle).Loading("start");
         let sendData = {
-            building_tag: pageAct.buiTag
+            building_tag: buildingTag
         }
         objSendData.Data = sendData;
         let url = baseApiUrl + "/api/History/GetMainSub";
@@ -178,9 +201,9 @@
                     strHtml += `<li>
                                     <a href="#" data-filter-tags="${val.full_name.toLowerCase()}" data-maintag="${val.main_system_tag}">
                                         <span class="nav-link-text">${val.full_name}</span>
-                                    </a>
-                                    <ul style="${index == 0 ? `display:block;` : ``}">`;
-
+                                        </a>
+                                        <ul style="${index == 0 ? `display:block;` : ``}">`;
+                                            
                     i1 = (val.history_Sub_systems != null && i1 == null) ? index : null;
                 }
 
@@ -232,6 +255,7 @@
             $('#js_nested_list').html(strHtml);
             $(`[data-tabname="hisListItem"]`).YTTab();
         }
+        $(loadEle).Loading("close");
         ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
     }
 
@@ -266,7 +290,6 @@
         var edt = new Date(new Date().setDate(sdt.getDate() + 1));
         start = start ?? sdt.toLocaleDateString();
         end = end ?? edt.toLocaleDateString();
-        $(loadEle).Loading("start");
         callBackFromHistory()
         getHistoryDataByBaja(pageAct.deviceNumber + "_" + pageAct.deviceItem,
             new Date(start).getTime(),
@@ -277,9 +300,7 @@
     }
 
     function callBackFromHistory(res = '{"count":0,"data":[]}') {
-        // console.log("@H1",res)
         res = JSON.parse(res);
-        // console.log("@history",res.data)
         loadTable(res.data);
         if (historyTable != null) {
             let t = $('#historyTable').dataTable();
@@ -288,7 +309,6 @@
             if (res.data.length > 0)
                 t.fnAddData(res.data);
         }
-        $(loadEle).Loading("close");
     }
 
     function setValue(deviceNumber, deviceName, deviceItem, elem) {
@@ -388,9 +408,10 @@
     }
 
     function loadTable(data) {
+        $(loadEle).Loading("start");
+
         if (data) {
             $.each(data, function (i, v) {
-                // console.log("loadTable",pageAct.devicePoiName.split(" ")[0])
                 v.type = pageAct.devicePoiName.split(" ")[0];
             });
 
@@ -425,7 +446,6 @@
 					"title": "紀錄時間",
 					"data": "timestamp",
 					"render": function (data) {
-						// console.log(data)
 						return displayDate(data, "datetime");
 					}
 				}
@@ -433,6 +453,7 @@
 
 			historyTable = new YourTeam.JqDataTables.getTableByStatic(tag, data, columns, column_defs, null, null, null, null, "tpi");
         }
+        $(loadEle).Loading("close");
     }
 
     function exportExcel() {
@@ -450,4 +471,26 @@
                 location.href = baseApiUrl + "/api/df?path=" + rel.data.split('/')[0] + "&fileName=" + rel.data.split('/')[1] + "&token=" + cookies.get("JWT-Authorization");
         }, null, "POST").send();
     }
+
+    //選擇棟別
+  function SelectBuild(e, building_tag) {
+    checkIsSelectedBuilding();
+  }
+
+  function checkIsSelectedBuilding() {
+    let result = false;
+    let buildingRadios = $("[name=buildingRadio]:checked");
+    buildingTag = null;
+    if (buildingRadios && buildingRadios.length > 0) {
+        $("[name=buildingRadio]").parent().removeClass("btn-info");
+        $("[name=buildingRadio]").parent().addClass("btn-secondary");
+        $("[name=buildingRadio]:checked").parent().removeClass("btn-secondary");
+        $("[name=buildingRadio]:checked").parent().addClass("btn-info");
+        buildingTag = buildingRadios.prop("id").split("_")[1]; //building tag
+        initList();
+        result = true;
+    } else {
+    }
+    return result;
+  }
 </script>
\ No newline at end of file
diff --git a/Frontend/_reportManagement.html b/Frontend/_reportManagement.html
index 351cf55..9513f51 100644
--- a/Frontend/_reportManagement.html
+++ b/Frontend/_reportManagement.html
@@ -1,1059 +1,1005 @@
 <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 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
-                  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 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>
-            </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">
+        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}
                 </label>`;
-    }
-    $("#building").find(".item").empty();
-    $("#building").find(".item").append(html);
-
-    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();
-      }
-    });
-
-    $("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");
         }
-      });
+        $("#building").find(".item").empty();
+        $("#building").find(".item").append(html);
 
-    $("[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(),
-      });
+        checkIsSelectedBuilding();
     });
-    $("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 setNameByType() {
+        $(".report-type-name").text(reportTypeDict["RElec"]["chiName"]);
     }
 
-    if (Array.isArray(startTime) && startTime.length < 2) {
-      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");
+                });
+        }
     }
 
-    const endTime = tableType == "year" ? $("#elecEYearDate").val() : null;
-    if (!endTime && tableType == "year") {
-      toast_error("請選擇結束日期");
-      return;
-    }
+    function eventsInit() {
+        $("body").on("change", "[name=reportTypeRadio]", function () {
+            $(
+                "#elecMonthDate, #elecYearDate, #elecStartEndDiv, #elecCompareDiv"
+            ).hide();
+            $("#compareTypeBtnsDiv").hide();
 
-    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;
-      });
-    }
-
-    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);
+            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();
             }
+        });
+
+        $("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 (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);
-          }
-        },
-      });
-    });
-    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);
-      },
-    });
-  }
 
-  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");
+        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;
+            });
+        }
+
+        return sent_data;
     }
-    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"));
+    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);
+                    }
+                },
+            });
+        });
+        debugger;
+        setReportTable(result);
     }
-    return monthOfYear;
-  }
 
-  function getStartEndYear(sYear, eYear) {
-    const years = [];
-    for (let i = sYear; i <= eYear; i++) {
-      years.push(moment().year(i).format("YYYY"));
+    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);
+            },
+        });
     }
-    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 "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,
+    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 "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;
+            case "month":
+                columns = getMonthByYear($("#elecYearDate").val()).map((dc) => {
+                    return { title: dc, data: dc, sWidth: columnWidth };
                 });
-              }
-            });
-            break;
-        }
+                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};
+                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;
-    }
-    return columns;
-  }
+        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");
 
-  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];
-      });
-    });
+        if (tableType == "compare") {
+            const com1Time =
+                compareType == "month"
+                    ? $("#elecCom1YearDate").val()
+                    : $("#elecCom1MonthDate").val();
+            const com2Time =
+                compareType == "month"
+                    ? $("#elecCom2YearDate").val()
+                    : $("#elecCom2MonthDate").val();
 
-    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";
+            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,
+            ],
+        });
     }
-    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,
-      ],
-    });
-  }
 
-  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);
+    function setExportList() {
+        const tableType = $("li.active [name=reportTypeRadio]").data("value");
+        var sent_data = getListSendData();
+        if (!Array.isArray(sent_data)) {
+            sent_data = [sent_data];
         }
-      },
-      complete: (xhr) => {
-        setLoading(false);
-      },
-    });
-  }
-
-  function setLoading(type = true, text = "列表讀取中") {
-    if (type) {
-      $("#tableLoading").fadeIn(200);
-      $("#tableLoadingText").html(text);
-    } else {
-      $("#tableLoading").fadeOut(200);
-    }
-  }
-
-  //選擇棟別
-  function SelectBuild(e, 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 (!sent_data.some((s) => s.building_tag)) {
+            toast_error("請選擇棟別");
+            return;
         }
-        if (rel.data && rel.data.length > 0) {
-          $(".allbtn").show();
+        if (!sent_data.some((s) => s.floor_tag)) {
+            toast_error("請選擇樓層");
+            return;
         }
-        drawFloorsBtn(rel.data);
-        checkIsHasFloorByBuilding();
-        //   JudgeCurrentDeviceData();
-        //   RedrawDataTable();
-      },
-    });
-  }
+        debugger
+        var url =
+            baseApiUrl + "/api/" + reportTypeDict["RElec"]["exportListApiUrl"][tableType];
 
-  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);
+                }
+            },
+            complete: (xhr) => {
+                setLoading(false);
+            },
+        });
     }
-    return result;
-  }
 
-  function checkIsHasFloorByBuilding() {
-    let result = false;
-    let floorCheckboxs = $("[name=floorCheckbox]");
-    if (!checkIsSelectedBuilding()) {
-      return null;
+    function setLoading(type = true, text = "列表讀取中") {
+        if (type) {
+            $("#tableLoading").fadeIn(200);
+            $("#tableLoadingText").html(text);
+        } else {
+            $("#tableLoading").fadeOut(200);
+        }
     }
-    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">
+    //選擇棟別
+    function SelectBuild(e, 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);
     }
 
-    $("#floors").find(".item").empty();
-    $("#floors").find(".item").append(html);
-  }
-
-  function SelectFloor(e, floor_guid) {
-    // getMeterData();
-  }
+    function SelectFloor(e, floor_guid) {
+        // getMeterData();
+    }
 </script>