diff --git a/Frontend/_alert.html b/Frontend/_alert.html
index 90358bf..1f69c26 100644
--- a/Frontend/_alert.html
+++ b/Frontend/_alert.html
@@ -1074,10 +1074,11 @@
 					const building_name = pageAct.buildList.find(
 						({ building_tag }) => building_tag === data.split("_")[1]
 					)?.full_name;
+                   
 					return allDevices.find((d) => d.device_number === data)?.full_name ||
-						row.alarmClass === "Sys_Con_AlarmClass"
+						(row.alarmClass === "Sys_Con_AlarmClass"
 						? `${building_name}_電錶邊緣控制器_${data.split("_")[7]}`
-						: "";
+						: "");
 				},
 			},
 			{
diff --git a/Frontend/_historyData.html b/Frontend/_historyData.html
index a64bb72..31c112e 100644
--- a/Frontend/_historyData.html
+++ b/Frontend/_historyData.html
@@ -6,14 +6,17 @@
       <div class="rounded border border-white">
         <div class="d-flex position-relative py-3 px-4">
           <i class="fal fa-search color-success-700 position-absolute pos-left fs-lg px-3 py-2 mt-1 ml-4"></i>
-          <input type="text" id="js_nested_list_filter" class="form-control shadow-inset-1 pl-6 border-success" placeholder="輸入兩字以上">
+          <input type="text"
+                 id="js_nested_list_filter"
+                 class="form-control shadow-inset-1 pl-6 border-success"
+                 placeholder="輸入兩字以上" />
         </div>
         <!-- nav-menu-reset will reset the font colors -->
-        <ul id="js_nested_list" class="nav-menu nav-menu-reset nav-menu-compact mb-sm-4 mb-md-0 rounded border border-white" data-nav-accordion="true">
-        </ul>
+        <ul id="js_nested_list"
+            class="nav-menu nav-menu-reset nav-menu-compact mb-sm-4 mb-md-0 rounded border border-white"
+            data-nav-accordion="true"></ul>
         <div class="filter-message js-filter-message m-0 text-left pl-4 py-3 fw-500"></div>
       </div>
-
     </div>
     <div class="col-sm-12 col-xl-10">
       <div class="row bg-dark p-2">
@@ -27,54 +30,89 @@
       <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>
-            <button type="button" onclick="setDateType('range', this)" class="btn btn-secondary waves-effect waves-themed">區間</button>
-            <button type="button" onclick="setDateType('month', this)" class="btn btn-secondary waves-effect waves-themed">月</button>
+            <button type="button"
+                    onclick="setDateType('day', this)"
+                    class="btn btn-secondary waves-effect waves-themed">
+              日期
+            </button>
+            <button type="button"
+                    onclick="setDateType('range', this)"
+                    class="btn btn-secondary waves-effect waves-themed">
+              區間
+            </button>
+            <button type="button"
+                    onclick="setDateType('month', this)"
+                    class="btn btn-secondary waves-effect waves-themed">
+              月
+            </button>
           </div>
         </div>
         <div class="col-auto">
           <div class="btn-group">
-            <button type="button" onclick="setDateType('today', this)" class="btn btn-secondary waves-effect waves-themed">今天</button>
-            <button type="button" onclick="setDateType('ytd', this)" class="btn btn-secondary waves-effect waves-themed">昨天</button>
+            <button type="button"
+                    onclick="setDateType('today', this)"
+                    class="btn btn-secondary waves-effect waves-themed">
+              今天
+            </button>
+            <button type="button"
+                    onclick="setDateType('ytd', this)"
+                    class="btn btn-secondary waves-effect waves-themed">
+              昨天
+            </button>
           </div>
         </div>
         <div class="col-auto">
           <div class="form-group">
-            <input class="form-control flatpickr flatpickr-input selectDate" id="his_startdate" data-val="" type="date" name="date" value="">
-            <input class="form-control" id="getmonth" type="month" style="display: none" />
+            <input class="form-control flatpickr flatpickr-input selectDate"
+                   id="his_startdate"
+                   data-val=""
+                   type="date"
+                   name="date"
+                   value="" />
+            <input class="form-control flatpickr flatpickr-input selectDate"
+                   id="getmonth"
+                   type="month"
+                   style="display: none" />
           </div>
         </div>
         <div class="col-auto" id="his_enddate" style="display: none">
           <div class="form-group">
-            <input class="form-control" type="date" data-val="" name="date" value="">
+            <input class="form-control flatpickr flatpickr-input selectDate"
+                   type="date"
+                   data-val=""
+                   name="date"
+                   value="" />
           </div>
         </div>
         <div class="col-auto">
           <a href="#" onclick="searchDate()" class="btn btn-info">查詢</a>
-          <a href="#" onclick="exportExcel()" class="btn btn-info waves-effect waves-themed">
+          <a href="#"
+             onclick="exportExcel()"
+             class="btn btn-info waves-effect waves-themed">
             <span class="fal fa-file-excel mr-1"></span>
             匯出
           </a>
         </div>
       </div>
 
-      <div class="row-cols-1  mb-2">
-        <div id="devPointsList" class="btn-group">
-
-        </div>
+      <div class="row-cols-1 mb-2">
+        <div id="devPointsList" class="btn-group"></div>
       </div>
 
       <div>
         <div class="frame-wrap">
-          <table id="historyTable" class="table table-bordered table-striped text-center m-0 w-100">
-          </table>
+          <table id="historyTable"
+                 class="table table-bordered table-striped text-center m-0 w-100"></table>
         </div>
       </div>
-
     </div>
-
   </div>
 </main>
+<style>
+  .flatpickr-monthDropdown-month {
+    color: black !important;
+  }
+</style>
 <script>
   var historyTable = null;
   var buildingTag = null;
@@ -91,138 +129,174 @@
     $("#his_building").find(".item").empty();
     $("#his_building").find(".item").append(html);
     if ($("#his_building .item label").first())
-      $("#his_building .item label").first().click()
+      $("#his_building .item label").first().click();
 
     initList();
     // default list filter
-    initApp.listFilter($('#js_default_list'), $('#js_default_list_filter'));
+    initApp.listFilter($("#js_default_list"), $("#js_default_list_filter"));
     // custom response message
-    initApp.listFilter($('#js-list-msg'), $('#js-list-msg-filter'));
+    initApp.listFilter($("#js-list-msg"), $("#js-list-msg-filter"));
     //accordion filter
-    initApp.listFilter($('#js_list_accordion'), $('#js_list_accordion_filter'));
+    initApp.listFilter($("#js_list_accordion"), $("#js_list_accordion_filter"));
     // nested list filter
-    initApp.listFilter($('#js_nested_list'), $('#js_nested_list_filter'));
+    initApp.listFilter($("#js_nested_list"), $("#js_nested_list_filter"));
     //init navigation
-    initApp.buildNavigation($('#js_nested_list'));
+    initApp.buildNavigation($("#js_nested_list"));
 
     loadTable(null);
     $(`[onclick="setDateType('day', this)"]`).click();
     $(`[onclick="setDateType('today', this)"]`).click();
 
-    onEvent('change', '#his_startdate', function () {
-      let today = displayDate(new Date(Date.now()), 'date').replaceAll('/', '-');
-      let ytd = displayDate(new Date(new Date().setDate(new Date(Date.now()).getDate() - 1)), 'date').replaceAll('/', '-');
+    onEvent("change", "#his_startdate", function () {
+      let today = displayDate(new Date(Date.now()), "date").replaceAll(
+        "/",
+        "-"
+      );
+      let ytd = displayDate(
+        new Date(new Date().setDate(new Date(Date.now()).getDate() - 1)),
+        "date"
+      ).replaceAll("/", "-");
 
-      if (pageAct.dateType == 'range') {
-        if ($('#his_startdate').val() > $('#his_enddate input').val() && ($('#his_startdate').val() != "" && $('#his_enddate input').val() != "")) {
-          $('#his_startdate').val($('#his_startdate').data('val'));
-          toast_error('不可選擇大於結束時間');
-        }
-        else {
-          $('#his_startdate').data('val', $('#his_startdate').val());
-          $('#his_enddate input').data('val', $('#his_enddate input').val());
+      if (pageAct.dateType == "range") {
+        if (
+          $("#his_startdate").val() > $("#his_enddate input").val() &&
+          $("#his_startdate").val() != "" &&
+          $("#his_enddate input").val() != ""
+        ) {
+          $("#his_startdate").val($("#his_startdate").data("val"));
+          toast_error("不可選擇大於結束時間");
+        } else {
+          $("#his_startdate").data("val", $("#his_startdate").val());
+          $("#his_enddate input").data("val", $("#his_enddate input").val());
 
-          $(`[onclick="setDateType('today', this)"]`).addClass('btn-secondary');
-          $(`[onclick="setDateType('today', this)"]`).removeClass('btn-info');
-          $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');
-          $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-info');
+          $(`[onclick="setDateType('today', this)"]`).addClass("btn-secondary");
+          $(`[onclick="setDateType('today', this)"]`).removeClass("btn-info");
+          $(`[onclick="setDateType('ytd', this)"]`).addClass("btn-secondary");
+          $(`[onclick="setDateType('ytd', this)"]`).removeClass("btn-info");
 
-          if ($('#his_startdate').val() == $('#his_enddate input').val()) {
-            if ($('#his_startdate').val() == today) {
-              $(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary');
-              $(`[onclick="setDateType('today', this)"]`).addClass('btn-info');
-            }
-            else if ($('#his_startdate').val() == ytd) {
-              $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-secondary');
-              $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-info');
+          if ($("#his_startdate").val() == $("#his_enddate input").val()) {
+            if ($("#his_startdate").val() == today) {
+              $(`[onclick="setDateType('today', this)"]`).removeClass(
+                "btn-secondary"
+              );
+              $(`[onclick="setDateType('today', this)"]`).addClass("btn-info");
+            } else if ($("#his_startdate").val() == ytd) {
+              $(`[onclick="setDateType('ytd', this)"]`).removeClass(
+                "btn-secondary"
+              );
+              $(`[onclick="setDateType('ytd', this)"]`).addClass("btn-info");
             }
           }
         }
-      }
-      else if ($(this).val() == today) {
-        $(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary');
-        $(`[onclick="setDateType('today', this)"]`).addClass('btn-info');
-        $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');
-        $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-info');
-      }
-      else if ($(this).val() == ytd) {
-        $(`[onclick="setDateType('today', this)"]`).addClass('btn-secondary');
-        $(`[onclick="setDateType('today', this)"]`).removeClass('btn-info');
-        $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-secondary');
-        $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-info');
+      } else if ($(this).val() == today) {
+        $(`[onclick="setDateType('today', this)"]`).removeClass(
+          "btn-secondary"
+        );
+        $(`[onclick="setDateType('today', this)"]`).addClass("btn-info");
+        $(`[onclick="setDateType('ytd', this)"]`).addClass("btn-secondary");
+        $(`[onclick="setDateType('ytd', this)"]`).removeClass("btn-info");
+      } else if ($(this).val() == ytd) {
+        $(`[onclick="setDateType('today', this)"]`).addClass("btn-secondary");
+        $(`[onclick="setDateType('today', this)"]`).removeClass("btn-info");
+        $(`[onclick="setDateType('ytd', this)"]`).removeClass("btn-secondary");
+        $(`[onclick="setDateType('ytd', this)"]`).addClass("btn-info");
       }
     });
 
-    onEvent('change', '#his_enddate input', function () {
-      let today = displayDate(new Date(Date.now()), 'date').replaceAll('/', '-');
-      let ytd = displayDate(new Date(new Date().setDate(new Date(Date.now()).getDate() - 1)), 'date').replaceAll('/', '-');
+    onEvent("change", "#his_enddate input", function () {
+      let today = displayDate(new Date(Date.now()), "date").replaceAll(
+        "/",
+        "-"
+      );
+      let ytd = displayDate(
+        new Date(new Date().setDate(new Date(Date.now()).getDate() - 1)),
+        "date"
+      ).replaceAll("/", "-");
 
-      if ($('#his_startdate').val() > $('#his_enddate input').val() && ($('#his_startdate').val() != "" && $('#his_enddate input').val() != "")) {
-        $('#his_enddate input').val($('#his_enddate input').data('val'));
-        toast_error('不可選擇大於結束時間');
-      }
-      else {
-        $('#his_startdate').data('val', $('#his_startdate').val());
-        $('#his_enddate input').data('val', $('#his_enddate input').val());
+      if (
+        $("#his_startdate").val() > $("#his_enddate input").val() &&
+        $("#his_startdate").val() != "" &&
+        $("#his_enddate input").val() != ""
+      ) {
+        $("#his_enddate input").val($("#his_enddate input").data("val"));
+        toast_error("不可選擇大於結束時間");
+      } else {
+        $("#his_startdate").data("val", $("#his_startdate").val());
+        $("#his_enddate input").data("val", $("#his_enddate input").val());
 
-        $(`[onclick="setDateType('today', this)"]`).addClass('btn-secondary');
-        $(`[onclick="setDateType('today', this)"]`).removeClass('btn-info');
-        $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');
-        $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-info');
+        $(`[onclick="setDateType('today', this)"]`).addClass("btn-secondary");
+        $(`[onclick="setDateType('today', this)"]`).removeClass("btn-info");
+        $(`[onclick="setDateType('ytd', this)"]`).addClass("btn-secondary");
+        $(`[onclick="setDateType('ytd', this)"]`).removeClass("btn-info");
 
-        if ($('#his_startdate').val() == $('#his_enddate input').val()) {
-          if ($('#his_startdate').val() == today) {
-            $(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary');
-            $(`[onclick="setDateType('today', this)"]`).addClass('btn-info');
-          }
-          else if ($('#his_startdate').val() == ytd) {
-            $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-secondary');
-            $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-info');
+        if ($("#his_startdate").val() == $("#his_enddate input").val()) {
+          if ($("#his_startdate").val() == today) {
+            $(`[onclick="setDateType('today', this)"]`).removeClass(
+              "btn-secondary"
+            );
+            $(`[onclick="setDateType('today', this)"]`).addClass("btn-info");
+          } else if ($("#his_startdate").val() == ytd) {
+            $(`[onclick="setDateType('ytd', this)"]`).removeClass(
+              "btn-secondary"
+            );
+            $(`[onclick="setDateType('ytd', this)"]`).addClass("btn-info");
           }
         }
       }
     });
-
   });
 
   function initList() {
     let sendData = {
-      building_tag: buildingTag
-    }
+      building_tag: buildingTag,
+    };
     objSendData.Data = sendData;
     let url = baseApiUrl + "/api/History/GetMainSub";
     function success(res) {
       let strHtml = ``;
-      let i1 = null, i2 = null, first = true;
+      let i1 = null,
+        i2 = null,
+        first = true;
 
       $.each(res.data.history_Main_Systems, function (index, val) {
         if (pageAct.mainStatus) {
           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 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;` : ``}">`;
+                                        <ul style="${index == 0 ? `display:block;` : ``
+            }">`;
 
-          i1 = (val.history_Sub_systems != null && i1 == null) ? index : null;
+          i1 = val.history_Sub_systems != null && i1 == null ? index : null;
         }
 
         $.each(val.history_Sub_systems, function (index2, val2) {
-          i2 = (val2.device != null && i2 == null) ? index2 : null;
+          i2 = val2.device != null && i2 == null ? index2 : null;
 
           strHtml += `<li>
-                                    <a href="#" data-filter-tags="${val2.full_name.toLowerCase()}"  data-subtag="${val2.sub_system_tag}">
+                                    <a href="#" data-filter-tags="${val2.full_name.toLowerCase()}"  data-subtag="${val2.sub_system_tag
+            }">
                                         <span class="nav-link-text">
                                             ${val2.full_name}
                                         </span>
                                     </a>
-                                    <ul style="${(i1 != null ? index == i1 : first) && index2 == i2 ? `display:block;` : ``}">`;
+                                    <ul style="${(i1 != null ? index == i1 : first) &&
+              index2 == i2
+              ? `display:block;`
+              : ``
+            }">`;
 
           $.each(val2.device, function (index3, val3) {
             if (val3.device_number.includes("$3"))
               val3.device_number = val3.device_number.replace("$3", "");
 
             strHtml += `<li data-tabname="hisListItem">
-                                        <a href="#" onClick="setValue('${val3.device_number}', '${val3.full_name}', null)" data-filter-tags="${val3.full_name.toLowerCase()} ${val3.device_serial_tag.toLowerCase()}" data-devnum="${val3.device_number}">
+                                        <a href="#" onClick="setValue('${val3.device_number
+              }', '${val3.full_name
+              }', null)" data-filter-tags="${val3.full_name.toLowerCase()} ${val3.device_serial_tag.toLowerCase()}" data-devnum="${val3.device_number
+              }">
                                             <span class="nav-link-text">
                                                 ${val3.full_name}
                                             </span>
@@ -236,8 +310,7 @@
                 pageAct.deviceName = val3.full_name;
                 devPointsList();
               }
-            }
-            else {
+            } else {
               if (index2 == i2 && first) {
                 first = false;
                 pageAct.deviceNumber = val3.device_number;
@@ -254,7 +327,7 @@
         }
       });
 
-      $('#js_nested_list').html(strHtml);
+      $("#js_nested_list").html(strHtml);
       $(`[data-tabname="hisListItem"]`).YTTab();
     }
     $(loadEle).Loading("close");
@@ -263,8 +336,8 @@
 
   function devPointsList() {
     let sendData = {
-      device_number: pageAct.deviceNumber
-    }
+      device_number: pageAct.deviceNumber,
+    };
     objSendData.Data = sendData;
     let url = baseApiUrl + "/api/History/GetDevPoi";
     function success(res) {
@@ -272,15 +345,19 @@
 
       $.each(res.data, function (index, val) {
         if (index == 0) {
-          strHtml += `<button onClick="setValue(null, null, '${val.points}', this)" type="button" class="btn btn-info waves-effect waves-themed">${val.full_name || val.points}</button>`;
+          strHtml += `<button onClick="setValue(null, null, '${val.points
+            }', this)" type="button" class="btn btn-info waves-effect waves-themed">${val.full_name || val.points
+            }</button>`;
           pageAct.deviceItem = val.points;
-          pageAct.devicePoiName = val.full_name + ' ' + val.points;
+          pageAct.devicePoiName = val.full_name + " " + val.points;
         } else {
-          strHtml += `<button onClick="setValue(null, null, '${val.points}', this)" type="button" class="btn btn-secondary waves-effect waves-themed">${val.full_name || val.points}</button>`;
+          strHtml += `<button onClick="setValue(null, null, '${val.points
+            }', this)" type="button" class="btn btn-secondary waves-effect waves-themed">${val.full_name || val.points
+            }</button>`;
         }
       });
 
-      $('#devPointsList').html(strHtml);
+      $("#devPointsList").html(strHtml);
 
       if (!hisFirst) {
         searchDate();
@@ -298,48 +375,60 @@
 
     let sendData = {
       device_number: pageAct.deviceNumber,
-      device_point: pageAct.deviceItem
-    }
+      device_point: pageAct.deviceItem,
+    };
     objSendData.Data = sendData;
     let url = baseApiUrl + "/api/DevGetWay";
-    ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
-      if (res && res.code == "0000") {
-        pageAct.hisBuiName = res.data;
-        getHistoryDataByBaja(pageAct.deviceNumber + "_" + pageAct.deviceItem,
-          new Date(start).getTime(),
-          new Date(end).getTime(),
-          pageAct.deviceName,
-          pageAct.hisBuiName,
-          callBackFromHistory);
-      }
-      else {
+    ytAjax = new YourTeam.Ajax(
+      url,
+      objSendData,
+      function (res) {
+        if (res && res.code == "0000") {
+          pageAct.hisBuiName = res.data;
+          getHistoryDataByBaja(
+            pageAct.deviceNumber + "_" + pageAct.deviceItem,
+            new Date(start).getTime(),
+            new Date(end).getTime(),
+            pageAct.deviceName,
+            pageAct.hisBuiName,
+            callBackFromHistory
+          );
+        } else {
+          $(loadEle).Loading("close");
+        }
+      },
+      function (res) {
         $(loadEle).Loading("close");
-      }
-    }, function (res) { $(loadEle).Loading("close"); }, "POST", true).send();
+      },
+      "POST",
+      true
+    ).send();
   }
 
   function callBackFromHistory(res = '{"count":0,"data":[]}') {
     res = JSON.parse(res);
     loadTable(res.data);
     if (historyTable != null) {
-      let t = $('#historyTable').dataTable();
+      let t = $("#historyTable").dataTable();
       t.fnClearTable();
-      if (res.data.length > 0)
-        t.fnAddData(res.data);
+      if (res.data.length > 0) t.fnAddData(res.data);
     }
-
   }
 
   function setValue(deviceNumber, deviceName, deviceItem, elem) {
     hisFirst = false;
     btnSelCss(elem);
 
-    if ((deviceNumber != null && deviceNumber != undefined) && (deviceName != null && deviceName != undefined)) {
+    if (
+      deviceNumber != null &&
+      deviceNumber != undefined &&
+      deviceName != null &&
+      deviceName != undefined
+    ) {
       pageAct.deviceNumber = deviceNumber;
       pageAct.deviceName = deviceName;
       devPointsList();
-    }
-    else if (deviceItem != null && deviceItem != undefined) {
+    } else if (deviceItem != null && deviceItem != undefined) {
       pageAct.devicePoiName = $(elem).text();
       pageAct.deviceItem = deviceItem;
 
@@ -352,67 +441,82 @@
 
     pageAct.dateType = type;
     let now = formatDate(new Date(Date.now()), "date");
-    let ytd = formatDate(new Date(new Date().setDate(new Date().getDate() - 1)), "date");
-    let tmr = formatDate(new Date(new Date().setDate(new Date().getDate() + 1)), "date");
+    let ytd = formatDate(
+      new Date(new Date().setDate(new Date().getDate() - 1)),
+      "date"
+    );
+    let tmr = formatDate(
+      new Date(new Date().setDate(new Date().getDate() + 1)),
+      "date"
+    );
 
     if (type == "day" || type == "today" || type == "ytd") {
       let date = type == "ytd" ? ytd : now;
-      $('#his_startdate').css('display', 'block');
-      $('#his_enddate').css('display', 'none');
-      $('#getmonth').css('display', 'none');
-      $('#his_startdate').val(date);
+      $("#his_startdate").css("display", "block");
+      $("#his_enddate").css("display", "none");
+      $("#getmonth").css("display", "none");
+      $("#his_startdate").val(date);
 
       if (type == "today")
         getData(formatDate(now, "date", true), formatDate(now, "date", true));
       else if (type == "ytd")
         getData(formatDate(ytd, "date", true), formatDate(ytd, "date", true));
       else {
-        $(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary');
-        $(`[onclick="setDateType('today', this)"]`).addClass('btn-info');
+        $(`[onclick="setDateType('today', this)"]`).removeClass(
+          "btn-secondary"
+        );
+        $(`[onclick="setDateType('today', this)"]`).addClass("btn-info");
       }
-    }
-    else if (type == "range") {
-      $(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).removeClass('btn-info');
-      $(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');
+    } else if (type == "range") {
+      $(
+        `[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`
+      ).removeClass("btn-info");
+      $(
+        `[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`
+      ).addClass("btn-secondary");
 
-      $('#his_startdate').css('display', 'block');
-      $('#his_enddate').css('display', 'block');
-      $('#getmonth').css('display', 'none');
-      $('#his_startdate').val(now);
-      $('#his_startdate').data('val', now);
-      $('#his_enddate input').val(tmr);
-      $('#his_enddate input').data('val', tmr);
-    }
-    else if (type == "month") {
-      $(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).removeClass('btn-info');
-      $(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');
+      $("#his_startdate").css("display", "block");
+      $("#his_enddate").css("display", "block");
+      $("#getmonth").css("display", "none");
+      $("#his_startdate").val(now);
+      $("#his_startdate").data("val", now);
+      $("#his_enddate input").val(tmr);
+      $("#his_enddate input").data("val", tmr);
+    } else if (type == "month") {
+      $(
+        `[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`
+      ).removeClass("btn-info");
+      $(
+        `[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`
+      ).addClass("btn-secondary");
 
-      $('#his_startdate').css('display', 'none');
-      $('#his_enddate').css('display', 'none');
-      $('#getmonth').css('display', 'block');
-      $('#getmonth').val(now.substr(0, 7));
-    }
-    else if (type == "ytd") {
-      $('#his_startdate').css('display', 'block');
-      $('#his_enddate').css('display', 'none');
-      $('#getmonth').css('display', 'none');
-      $('#his_startdate').val(ytd);
+      $("#his_startdate").css("display", "none");
+      $("#his_enddate").css("display", "none");
+      $("#getmonth").css("display", "block");
+      $("#getmonth").val(now.substr(0, 7));
+    } else if (type == "ytd") {
+      $("#his_startdate").css("display", "block");
+      $("#his_enddate").css("display", "none");
+      $("#getmonth").css("display", "none");
+      $("#his_startdate").val(ytd);
     }
   }
 
   function searchDate() {
-    let start = new Date($('#his_startdate').val());
-    let end = new Date($('#his_enddate input').val());
+    let start = new Date($("#his_startdate").val());
+    let end = new Date($("#his_enddate input").val());
 
-    if (pageAct.dateType == "today" || pageAct.dateType == "day" || pageAct.dateType == "ytd")
+    if (
+      pageAct.dateType == "today" ||
+      pageAct.dateType == "day" ||
+      pageAct.dateType == "ytd"
+    )
       end = start;
     else if (pageAct.dateType == "month") {
-      start = new Date($('#getmonth').val());
+      start = new Date($("#getmonth").val());
       end = new Date(start.valueOf()).setMonth(start.getMonth() + 1);
       end = new Date(new Date(end).setDate(new Date(end).getDate() - 1));
-    }
-    else if (pageAct.dateType != "range")
-      return;
+    } else if (pageAct.dateType != "range") return;
 
     pageAct.hisStartDate = start;
     pageAct.hisEndDate = end;
@@ -420,20 +524,18 @@
   }
 
   function formatDate(date, type, send = false) {
-    if (!send)
-      return displayDate(date, type).replaceAll("/", "-");
+    if (!send) return displayDate(date, type).replaceAll("/", "-");
     else {
       date = displayDate(date, type);
-      let month = date.split('/')[1];
-      let year = date.split('/')[0];
-      let day = date.split('/')[2];
+      let month = date.split("/")[1];
+      let year = date.split("/")[0];
+      let day = date.split("/")[2];
       return month + "/" + day + "/" + year;
     }
   }
 
   function loadTable(data) {
     if (data) {
-
       $.each(data, function (i, v) {
         v.type = pageAct.devicePoiName.split(" ")[0];
       });
@@ -441,41 +543,51 @@
       let tag = "#historyTable";
 
       let column_defs = [
-        { "targets": [0], "width": "20%", "sortable": true },
-        { "targets": [1], "width": "20%", "sortable": true },
-        { "targets": [2], "width": "20%", "sortable": true }
+        { targets: [0], width: "20%", sortable: true },
+        { targets: [1], width: "20%", sortable: true },
+        { targets: [2], width: "20%", sortable: true },
       ];
 
       let columns = [
         {
-          "title": "類別",
-          "data": "type"
+          title: "類別",
+          data: "type",
         },
         {
-          "title": "設備名稱",
-          "data": "deviceName",
+          title: "設備名稱",
+          data: "deviceName",
         },
         {
-          "title": "數值",
-          "data": "value",
-          "render": function (data) {
+          title: "數值",
+          data: "value",
+          render: function (data) {
             if (isNaN(data.toString())) {
-              return data
+              return data;
             }
             return data.roundDecimal(2);
-          }
+          },
         },
         {
-          "title": "紀錄時間",
-          "data": "timestamp",
-          "render": function (data) {
+          title: "紀錄時間",
+          data: "timestamp",
+          render: function (data) {
             return displayDate(data, "datetime");
-          }
-        }
+          },
+        },
       ];
 
-      historyTable = new YourTeam.JqDataTables.getTableByStatic(tag, data, columns, column_defs, null, null, null, null, "tpi");
-      $(tag).DataTable().order([3, 'desc']);
+      historyTable = new YourTeam.JqDataTables.getTableByStatic(
+        tag,
+        data,
+        columns,
+        column_defs,
+        null,
+        null,
+        null,
+        null,
+        "tpi"
+      );
+      $(tag).DataTable().order([3, "desc"]);
     }
   }
 
@@ -543,10 +655,10 @@
       $("[name=buildingRadio]:checked").parent().removeClass("btn-secondary");
       $("[name=buildingRadio]:checked").parent().addClass("btn-info");
       buildingTag = buildingRadios.val(); //building tag
-      pageAct.hisBuiName = buildingRadios.prop('id').split("-")[1];
+      pageAct.hisBuiName = buildingRadios.prop("id").split("-")[1];
       initList();
       result = true;
     }
     return result;
   }
-</script>
\ No newline at end of file
+</script>
diff --git a/Frontend/index.html b/Frontend/index.html
index f9b0e76..bfb7c23 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -190,7 +190,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
                             <!--<span class="page-logo-text mr-1">SmartAdmin WebApp</span>-->
                             <!--<span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
-                                      <i class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>-->
+                                                  <i class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>-->
                         </a>
                     </div>
                     <!--DOC: nav menu layout change shortcut-->
@@ -234,21 +234,21 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     </div>
 
                     <!-- <div class="dropdown">
-                      <a
-                        class="dropdown-toggle fs-1"
-                        href="javascript:;"
-                        role="button"
-                        id="buiActDrop"
-                        data-target="buiList"
-                        data-toggle="dropdown"
-                        aria-haspopup="true"
-                      >
-                      </a>
-                      <div
-                        id="buiList"
-                        class="dropdown-menu dropdown-select-menu js-auto-close"
-                      ></div>
-                    </div> -->
+                              <a
+                                class="dropdown-toggle fs-1"
+                                href="javascript:;"
+                                role="button"
+                                id="buiActDrop"
+                                data-target="buiList"
+                                data-toggle="dropdown"
+                                aria-haspopup="true"
+                              >
+                              </a>
+                              <div
+                                id="buiList"
+                                class="dropdown-menu dropdown-select-menu js-auto-close"
+                              ></div>
+                            </div> -->
 
                     <div class="ml-auto d-flex" id="froLisPage"></div>
                     <div class="ml-auto d-flex mr-3">
@@ -257,7 +257,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                id="toggleNoticeBtn"
                                class="d-flex align-items-center justify-content-center ml-2">
                                 <!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
-                                            alt="Dr. Codex Lantern">-->
+                                                          alt="Dr. Codex Lantern">-->
                                 <!--you can also add username next to the avatar with the codes below:-->
                                 <div class="row m-0 justify-content-center userblock">
                                     <i id="noticeConIcon" class="fs-1-5 w-100 text-center"></i>
@@ -275,7 +275,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                data-target="logoutList"
                                class="d-flex align-items-center justify-content-center ml-2">
                                 <!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
-                                            alt="Dr. Codex Lantern">-->
+                                                          alt="Dr. Codex Lantern">-->
                                 <!--you can also add username next to the avatar with the codes below:-->
                                 <div class="row m-0 justify-content-center userblock">
                                     <i class="fas fa-user-circle fs-1-5 w-100 text-center"></i>
@@ -295,10 +295,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     </div>
                     <div class="ml-2 text-center">
                         <!-- <label class="mb-0 fs-1-2">
-                          Diamond Controls<span class="fs-09 position-absolute"
-                            >®</span
-                          > </label
-                        ><br /> -->
+                                    Diamond Controls<span class="fs-09 position-absolute"
+                                      >®</span
+                                    > </label
+                                  ><br /> -->
                         <!-- <label class="mb-0 fs-1-1">智慧大樓管理平台</label> -->
                     </div>
                 </header>
@@ -314,25 +314,25 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                      data-class="mobile-nav-on"></div>
 
                 <!-- <div id="sysMonNavbar" class="yt-navbar yt-left-navbar">
-                  <div class="yt-navbar-content">
-                    <ul id="sysMonBtnList"></ul>
-                  </div>
-                </div> -->
+                        <div class="yt-navbar-content">
+                          <ul id="sysMonBtnList"></ul>
+                        </div>
+                      </div> -->
                 <!-- END Page Content -->
                 <!-- BEGIN Page Footer -->
                 <!--<footer class="page-footer" role="contentinfo">
-                        <div class="d-flex align-items-center flex-1 text-muted">
-                            <span class="hidden-md-down fw-700">2022 © SmartAdmin by&nbsp;<a href='https://www.gotbootstrap.com' class='text-primary fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a></span>
-                        </div>
-                        <div>
-                            <ul class="list-table m-0">
-                                <li><a href="intel_introduction.html" class="text-secondary fw-700">About</a></li>
-                                <li class="pl-3"><a href="info_app_licensing.html" class="text-secondary fw-700">License</a></li>
-                                <li class="pl-3"><a href="info_app_docs.html" class="text-secondary fw-700">Documentation</a></li>
-                                <li class="pl-3 fs-xl"><a href="https://wrapbootstrap.com/user/MyOrange" class="text-secondary" target="_blank"><i class="fal fa-question-circle" aria-hidden="true"></i></a></li>
-                            </ul>
-                        </div>
-                    </footer>-->
+                              <div class="d-flex align-items-center flex-1 text-muted">
+                                  <span class="hidden-md-down fw-700">2022 © SmartAdmin by&nbsp;<a href='https://www.gotbootstrap.com' class='text-primary fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a></span>
+                              </div>
+                              <div>
+                                  <ul class="list-table m-0">
+                                      <li><a href="intel_introduction.html" class="text-secondary fw-700">About</a></li>
+                                      <li class="pl-3"><a href="info_app_licensing.html" class="text-secondary fw-700">License</a></li>
+                                      <li class="pl-3"><a href="info_app_docs.html" class="text-secondary fw-700">Documentation</a></li>
+                                      <li class="pl-3 fs-xl"><a href="https://wrapbootstrap.com/user/MyOrange" class="text-secondary" target="_blank"><i class="fal fa-question-circle" aria-hidden="true"></i></a></li>
+                                  </ul>
+                              </div>
+                          </footer>-->
                 <!-- END Page Footer -->
                 <!-- BEGIN Shortcuts -->
                 <!-- END Shortcuts -->
@@ -1032,7 +1032,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 checkDevState();
                 loadNoticeConSta();
 
-                refreshSubPage()
+                refreshSubPage();
 
                 allDevices = getAllDevice();
                 if (pageAct.isShowBuildingInMenu) {
@@ -1354,7 +1354,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                         } else {
                             $(
                                 `#subSysBtn${lastPageAct.sysSubTag
-                                }[data-building-tag=${buildingTagOnJquery(lastPageAct.buiTag)}]`
+                                }[data-building-tag=${buildingTagOnJquery(
+                                    lastPageAct.buiTag
+                                )}]`
                             ).click();
                         }
                     } else {
@@ -1418,7 +1420,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             function drawErrRecTabBlo() {
                 let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
 
-                                                                                  </table>`;
+                                                                                      </table>`;
                 return strHtml;
             }
 
@@ -1426,7 +1428,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             function drawOpeRecTabBlo() {
                 let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
 
-                                                                                  </table>`;
+                                                                                      </table>`;
                 return strHtml;
             }
 
@@ -1453,45 +1455,45 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                         html: `<div class="card m-1 border device-wrap" data-number="${deviceNumber(
                             devNum
                         )}" data-position="left">
-                                              <div class="card-header p-3">
+                                                  <div class="card-header p-3">
 
-                                                  <div class="position-absolute mr-5" style="word-break: break-all;">
-                                                      <label class="m-0 mt-2">${devName}</label>
-                                                  </div>
-                                                  <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
-                                                      <button type="button" id="state-tab"
-                                                      data-toggle="tooltip" data-placement="bottom" title="即時監控"
-                                                      class="px-2 btn btn-icon border-0 nav-link active mx-1" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon fa-2x"></i></button>
-                                                      ${lightHtml}
-                                                      <button type="button" id="info-tab"
-                                                      data-toggle="tooltip" data-placement="bottom" title="基本資料"
-                                                      class="px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon fa-2x"></i></button>
-                                                      <button type="button"
-                                                      d data-toggle="tooltip" data-placement="bottom" title="告警資料"
-                                                      id="errRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1 position-relative " role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle fa-2x"></i></button>
-                                                      <button type="button"
-                                                      data-toggle="tooltip" data-placement="bottom" title="運維紀錄"
-                                                      id="opeRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon fa-2x"></i></button>
+                                                      <div class="position-absolute mr-5" style="word-break: break-all;">
+                                                          <label class="m-0 mt-2">${devName}</label>
+                                                      </div>
+                                                      <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
+                                                          <button type="button" id="state-tab"
+                                                          data-toggle="tooltip" data-placement="bottom" title="即時監控"
+                                                          class="px-2 btn btn-icon border-0 nav-link active mx-1" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon fa-2x"></i></button>
+                                                          ${lightHtml}
+                                                          <button type="button" id="info-tab"
+                                                          data-toggle="tooltip" data-placement="bottom" title="基本資料"
+                                                          class="px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon fa-2x"></i></button>
+                                                          <button type="button"
+                                                          d data-toggle="tooltip" data-placement="bottom" title="告警資料"
+                                                          id="errRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1 position-relative " role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle fa-2x"></i></button>
+                                                          <button type="button"
+                                                          data-toggle="tooltip" data-placement="bottom" title="運維紀錄"
+                                                          id="opeRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon fa-2x"></i></button>
 
-                                                      <button type="button" class="px-2 btn btn-icon border-0 nav-link mx-1"><i class="fas fa-times text-white-50 fa-2x" data-close="yttooltip"></i></button>
+                                                          <button type="button" class="px-2 btn btn-icon border-0 nav-link mx-1"><i class="fas fa-times text-white-50 fa-2x" data-close="yttooltip"></i></button>
 
+                                                      </div>
                                                   </div>
-                                              </div>
-                                              <div class="card-body p-2 tab-content w-100">
-                                                  <div id="state" class="show active w-100" data-tabname="cardTab" data-tabrole="child" >
-                                                      ${drawStateTabBlo(devNum)}
-                                                  </div>
-                                                  <div id="info" data-tabname="cardTab" data-tabrole="child">
+                                                  <div class="card-body p-2 tab-content w-100">
+                                                      <div id="state" class="show active w-100" data-tabname="cardTab" data-tabrole="child" >
+                                                          ${drawStateTabBlo(devNum)}
+                                                      </div>
+                                                      <div id="info" data-tabname="cardTab" data-tabrole="child">
 
+                                                      </div>
+                                                      <div id="errRec" data-tabname="cardTab" data-tabrole="child">
+                                                          ${drawErrRecTabBlo()}
+                                                      </div>
+                                                      <div id="opeRec" data-tabname="cardTab" data-tabrole="child">
+                                                          ${drawOpeRecTabBlo()}
+                                                      </div>
                                                   </div>
-                                                  <div id="errRec" data-tabname="cardTab" data-tabrole="child">
-                                                      ${drawErrRecTabBlo()}
-                                                  </div>
-                                                  <div id="opeRec" data-tabname="cardTab" data-tabrole="child">
-                                                      ${drawOpeRecTabBlo()}
-                                                  </div>
-                                              </div>
-                                          </div>`,
+                                              </div>`,
                         group: "device",
                         // 在 _sysElevator.html 及 _sysMonAll.html 會用到
                         onShow: function (tooltipEle, oriEle) {
@@ -1850,27 +1852,27 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     sysSubObj.device_normal_point_value != null
                 ) {
                     strHtml += ` <div class="row m-0 align-items-center">
-                                  <span id="sysNorLight" class="circle-light mr-2 " data-light-type="normal"></span>
-                                  <label class="mb-0">${sysSubObj.device_normal_text}</label>
-                              </div>`;
+                                      <span id="sysNorLight" class="circle-light mr-2 " data-light-type="normal"></span>
+                                      <label class="mb-0">${sysSubObj.device_normal_text}</label>
+                                  </div>`;
                 }
                 if (
                     sysSubObj.device_close_point_name != null &&
                     sysSubObj.device_close_point_value != null
                 ) {
                     strHtml += ` <div class="row m-0 align-items-center">
-                                          <span id="sysCloLight" class="circle-light mr-2" data-light-type="close"></span>
-                                          <label class="mb-0">${sysSubObj.device_close_text}</label>
-                                  </div>`;
+                                              <span id="sysCloLight" class="circle-light mr-2" data-light-type="close"></span>
+                                              <label class="mb-0">${sysSubObj.device_close_text}</label>
+                                      </div>`;
                 }
                 if (
                     sysSubObj.device_error_point_name != null &&
                     sysSubObj.device_error_point_value != null
                 ) {
                     strHtml += ` <div class="row m-0 align-items-center">
-                                  <span id="sysErrLight" class="circle-light mr-2" data-light-type="error"></span>
-                                  <label class="mb-0">${sysSubObj.device_error_text}</label>
-                              </div>`;
+                                      <span id="sysErrLight" class="circle-light mr-2" data-light-type="error"></span>
+                                      <label class="mb-0">${sysSubObj.device_error_text}</label>
+                                  </div>`;
                 }
 
                 return strHtml;
@@ -1909,7 +1911,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
         }
 
         function setSysTagForPageAct(obj) {
-            console.log($(obj).data("subsysobj"))
+            console.log($(obj).data("subsysobj"));
             pageAct.sysMainTag =
                 $(obj).data("subsysobj")?.main_system_tag ||
                 pageAct.sysSubObj.main_system_tag;
@@ -2035,28 +2037,28 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     if (!res || res.code != "0000" || !res.data) {
                     } else {
                         let strHtml = `<div class="btn-group mx-4">
-                                                                              <a href="javascript:;" id="homeBtn" data-toggle="dropdown" data-page="dashboard" data-tabname="topFunBtn" class="text-center">
-                                                                                  <i class="fal fa-home fa-2x"></i><br>首頁
-                                                                              </a>
-                                                                              <div class="dropdown-menu">
-                                                                                  <button class="dropdown-item d-none" name="topFunBtn" data-tabname="topFunBtn" data-page="dashboard" type="button" >儀錶板</button>
-                                                                                  <button class="dropdown-item" name="topFunBtn" data-tabname="topFunBtn" data-page="schoolView" type="button">校園總覽</button>
-                                                                                  <button class="dropdown-item" name="topFunBtn" data-tabname="topFunBtn" data-page="elecSingleLine" type="button">電表單線圖</button>
-                                                                              </div>
-                                                                          </div>`;
+                                                                                  <a href="javascript:;" id="homeBtn" data-toggle="dropdown" data-page="dashboard" data-tabname="topFunBtn" class="text-center">
+                                                                                      <i class="fal fa-home fa-2x"></i><br>首頁
+                                                                                  </a>
+                                                                                  <div class="dropdown-menu">
+                                                                                      <button class="dropdown-item d-none" name="topFunBtn" data-tabname="topFunBtn" data-page="dashboard" type="button" >儀錶板</button>
+                                                                                      <button class="dropdown-item" name="topFunBtn" data-tabname="topFunBtn" data-page="schoolView" type="button">校園總覽</button>
+                                                                                      <button class="dropdown-item" name="topFunBtn" data-tabname="topFunBtn" data-page="elecSingleLine" type="button">電表單線圖</button>
+                                                                                  </div>
+                                                                              </div>`;
 
                         $.each(res.data, function (i, v) {
                             if (v.authCode == "PF1") {
                                 strHtml += `<div class="btn-group mx-4" >
-                                                                                  <a href="javascript:;" id="sysMonTopBtn" class="text-center dropdown-toggle" data-toggle="dropdown" data-tabname="topFunBtn" class="text-center">
-                                                                                      <i class="fal fa-tv fa-2x"></i><br>${v.subName}
-                                                                                  </a>
-                                                                                 <div style="transform: translateY(5%)">
-                                                                                  <div class="dropdown-menu dropdown-menu-right sys_building_dropdown_menu" >
+                                                                                      <a href="javascript:;" id="sysMonTopBtn" class="text-center dropdown-toggle" data-toggle="dropdown" data-tabname="topFunBtn" class="text-center">
+                                                                                          <i class="fal fa-tv fa-2x"></i><br>${v.subName}
+                                                                                      </a>
+                                                                                     <div style="transform: translateY(5%)">
+                                                                                      <div class="dropdown-menu dropdown-menu-right sys_building_dropdown_menu" >
+                                                                                      </div>
                                                                                   </div>
-                                                                              </div>
-                                                                              </div>
-                                                                              `;
+                                                                                  </div>
+                                                                                  `;
 
                                 hasMonitor = true;
                             } else {
@@ -2077,11 +2079,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                                                 ? "fa-user"
                                                                 : "";
                                 strHtml += `<div class="btn-group mx-4">
-                                                                                  <a href="javascript:;" name="topFunBtn" data-tabname="topFunBtn" class="dropdown-toggle no-arrow text-center"
-                                                                                     data-page="${v.showView}">
-                                                                                      <i class="fal ${icon} fa-2x"></i><br>${v.subName}
-                                                                                  </a>
-                                                                              </div>`;
+                                                                                      <a href="javascript:;" name="topFunBtn" data-tabname="topFunBtn" class="dropdown-toggle no-arrow text-center"
+                                                                                         data-page="${v.showView}">
+                                                                                          <i class="fal ${icon} fa-2x"></i><br>${v.subName}
+                                                                                      </a>
+                                                                                  </div>`;
                             }
                         });
 
@@ -2236,9 +2238,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                             {
                                                 page: page,
                                                 tabname: "systemMonitor",
-                                                "building-tag": buildingTagOnJquery(
-                                                    pageAct.buiTag
-                                                ),
+                                                "building-tag": buildingTagOnJquery(pageAct.buiTag),
                                             },
                                             "topFunBtn"
                                         );
@@ -2328,16 +2328,25 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             ];
             // 向 niagara 取得告警資料
             getDeviceAlarmCardByBaja(null, now, false, false, function (bajaDatas) {
-                let datas = bajaDatas.data.filter(({ alarmClass }) => alarmClass!== "defaultAlarmClass");
+                let datas = bajaDatas.data.filter(
+                    ({ alarmClass }) => alarmClass !== "defaultAlarmClass"
+                );
                 let titleHtml = `異常通知`;
                 let notices = [];
                 // 遍歷每個告警資料
                 $.each(datas ?? [], (idx, data) => {
                     if (noticeOptArr.findIndex((x) => x.id == data.uuid) == -1) {
                         // 針對該告警對象的設備，從 allDevices 找出設備名稱
-                        datas[idx].full_name = allDevices.filter(
-                            (x) => x.device_number == data.devicePath
-                        )[0]?.full_name;
+                        const building_name = pageAct.buildList.find(
+                            ({ building_tag }) =>
+                                building_tag === data.devicePath.split("_")[1]
+                        )?.full_name;
+
+                        datas[idx].full_name =
+                            allDevices.filter((x) => x.device_number == data.devicePath)[0]
+                                ?.full_name || (data.alarmClass === "Sys_Con_AlarmClass"
+                                ? `${building_name}_電錶邊緣控制器_${data.split("_")[7]}`
+                                : "");
 
                         let div1 = creDiv(["col-12"]);
                         let button = creBtn(