From 8236dad38bd8f0e6fbe63815f87dd1534de0eaf6 Mon Sep 17 00:00:00 2001
From: dev01 <dev01@yourteam.tw>
Date: Fri, 25 Nov 2022 18:46:40 +0800
Subject: [PATCH 1/2] =?UTF-8?q?[Frontend][=E7=B3=BB=E7=B5=B1=E7=9B=A3?=
 =?UTF-8?q?=E6=8E=A7]=20=E9=9B=BB=E6=A2=AF=E8=A8=AD=E5=82=99=20=E9=9B=BB?=
 =?UTF-8?q?=E6=A2=AF=E7=AE=A1=E7=90=86=20=E5=88=97=E8=A1=A8=E5=BB=BA?=
 =?UTF-8?q?=E7=BD=AE|=20=E9=9B=BB=E6=A2=AF=E7=AE=A1=E7=90=86=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E8=A8=82=E9=96=B1=E7=A8=8B=E5=BA=8F=E4=B8=B2=E6=8E=A5?=
 =?UTF-8?q?=20|=20=E9=9B=BB=E6=A2=AF=E7=AE=A1=E7=90=86=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E6=97=A5=E6=9B=86=E4=B8=B2=E6=8E=A5=20|=20=E9=9B=BB=E6=A2=AF?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=20detail=20=E7=95=AB=E9=9D=A2=E5=BB=BA?=
 =?UTF-8?q?=E7=BD=AE=20|=20=E9=9B=BB=E6=A2=AF=E7=AE=A1=E7=90=86=20Master?=
 =?UTF-8?q?=20Detail=20=E7=95=AB=E9=9D=A2=E5=BB=BA=E7=BD=AE=20|=20Modal=20?=
 =?UTF-8?q?Div=20=E5=8B=95=E7=95=AB=E6=8F=9B=E9=A0=81=E5=BB=BA=E7=BD=AE=20?=
 =?UTF-8?q?|=20Checbox=20Switch=20Css=20=E5=BB=BA=E7=BD=AE=20|=20[?=
 =?UTF-8?q?=E5=85=A8=E5=9F=9F=E5=8A=9F=E8=83=BD]=20=E6=8F=9B=E5=85=A7?=
 =?UTF-8?q?=E9=A0=81=E8=A8=82=E9=96=B1=E9=87=8B=E6=94=BE=E7=A8=8B=E5=BA=8F?=
 =?UTF-8?q?=E5=BB=BA=E7=BD=AE=20|=20=E9=9B=BB=E6=A2=AF=E9=A0=81=E9=9D=A2?=
 =?UTF-8?q?=E5=8F=B3=E4=B8=8B=E8=A7=92=20=E5=B9=B3=E9=9D=A2=E5=9C=96?=
 =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E4=B8=B2=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Frontend/_sysElevator.html   | 1334 ++++++++++++++++++++++++++++++----
 Frontend/_sysMonAll.html     |   17 +-
 Frontend/css/site.css        |   40 +
 Frontend/index.html          |  165 +++--
 Frontend/js/n4js/bajatest.js |    4 +-
 5 files changed, 1305 insertions(+), 255 deletions(-)

diff --git a/Frontend/_sysElevator.html b/Frontend/_sysElevator.html
index a253359..214b253 100644
--- a/Frontend/_sysElevator.html
+++ b/Frontend/_sysElevator.html
@@ -45,7 +45,11 @@
         <!-- <img src="img/elevator.jpg" class="img-fluid" style="min-height: 520px" /> -->
 
         <div class="mt-2">
-            <img src="img/總公司1F平面.jpg" class="img-fluid" style="min-height: 330px" />
+            <div class="pl-3 row">
+                <button id="resChartZoom" class="btn btn-info">圖檔重置</button>
+            </div>
+            <div id="floChart" style="height : 45vh!important;width:100%"></div>
+            <!--<img src="img/總公司1F平面.jpg" class="img-fluid" style="min-height: 330px" />-->
         </div>
     </div>
     <!-- End-左圖區 -->
@@ -105,8 +109,7 @@
                 </button>
             </div>
             <div>
-                <i type="button" class="fas fa-cog fa-2x ml-3 my-2" data-toggle="modal"
-                   data-target="#exampleModal1"></i>
+                <i type="button" class="fas fa-cog fa-2x ml-3 my-2" data-toggle="modal" data-target="#eleManModal"></i>
             </div>
         </div>
         <div class="card col-xxl-3 mt-3">
@@ -448,120 +451,97 @@
     </div>
     <!-- End-Modal-ReplaySystem -->
     <!-- Modal-ElevatorManagement -->
-    <div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel"
-         aria-hidden="true" data-backdrop="static" data-keyboard="false">
+    <div class="modal fade" id="eleManModal" tabindex="-1" aria-labelledby="eleManModal" aria-hidden="true" data-keyboard="false">
         <div class="modal-dialog modal-xl">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h1 class="modal-title" id="exampleModalLabel">電梯管理</h1>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <h1 class="modal-title">電梯管理</h1>
+                    <button type="button" class="close m-0 p-0 px-2 ml-auto" data-dismiss="modal" aria-label="Close">
                         <span aria-hidden="true">&times;</span>
                     </button>
                 </div>
                 <div class="modal-body">
-                    <table class="table table-hover">
-                        <thead>
-                            <tr class="text-center">
-                                <th scope="col">號機</th>
-                                <th scope="col">狀態</th>
-                                <th scope="col">所在樓層</th>
-                                <th scope="col">載重</th>
-                                <th scope="col">休止</th>
-                                <th scope="col">獨立運轉</th>
-                                <th scope="col">VIP</th>
-                                <th scope="col">回歸</th>
-                                <th scope="col">不服務樓層</th>
-                                <th scope="col"></th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr class="text-center">
-                                <th>Bank1</th>
-                                <th></th>
-                                <th></th>
-                                <th></th>
-                                <th></th>
-                                <th></th>
-                                <th></th>
-                                <th></th>
-                                <th>B2F,3F,5F</th>
-                                <th>
-                                    <button class="btn btn-info" data-target="#exampleModal2"
-                                            data-toggle="modal">
-                                        <i class="fal fa-pen"> Edit</i>
-                                    </button>
-                                </th>
-                            </tr>
-                            <tr class="text-center">
-                                <th>1</th>
-                                <th>運作中</th>
-                                <th>3F</th>
-                                <th>80%</th>
-                                <th>On</th>
-                                <th>Off</th>
-                                <th>On</th>
-                                <th>Off</th>
-                                <th></th>
-                                <th>
-                                    <button class="btn btn-info" data-target="#exampleModal1-1"
-                                            data-toggle="modal">
-                                        <i class="fal fa-pen"> Edit</i>
-                                    </button>
-                                </th>
-                            </tr>
-                            <tr class="text-center">
-                                <th>2</th>
-                                <th>保養</th>
-                                <th>2F</th>
-                                <th>0%</th>
-                                <th>On</th>
-                                <th>Off</th>
-                                <th>On</th>
-                                <th>Off</th>
-                                <th></th>
-                                <th>
-                                    <button class="btn btn-info" data-target="#exampleModal1-2"
-                                            data-toggle="modal">
-                                        <i class="fal fa-pen"> Edit</i>
-                                    </button>
-                                </th>
-                            </tr>
-                            <tr class="text-center">
-                                <th>Bank2</th>
-                                <th></th>
-                                <th></th>
-                                <th></th>
-                                <th></th>
-                                <th></th>
-                                <th></th>
-                                <th></th>
-                                <th>B1F,B2F</th>
-                                <th>
-                                    <button class="btn btn-info" data-target="#exampleModal2"
-                                            data-toggle="modal">
-                                        <i class="fal fa-pen"> Edit</i>
-                                    </button>
-                                </th>
-                            </tr>
-                            <tr class="text-center">
-                                <th>3</th>
-                                <th>運作中</th>
-                                <th>B1F</th>
-                                <th>100%</th>
-                                <th>On</th>
-                                <th>Off</th>
-                                <th>On</th>
-                                <th>Off</th>
-                                <th></th>
-                                <th>
-                                    <button class="btn btn-info" data-target="#exampleModal2-1"
-                                            data-toggle="modal">
-                                        <i class="fal fa-pen"> Edit</i>
-                                    </button>
-                                </th>
-                            </tr>
-                        </tbody>
-                    </table>
+                    <div id="tabDiv">
+                        <table id="eleManTable" class="table table-hover w-100">
+                        </table>
+                    </div>
+                    <div id="detDevDiv" style="display:none">
+                        <button class="btn btn-info" data-toggle="prevDiv"><i class="fas fa-angle-left mr-2"></i>上一頁</button>
+                        <table class="table table-hover">
+                            <thead>
+                                <tr class="text-center">
+                                    <th scope="col">號機</th>
+                                    <th scope="col">狀態</th>
+                                    <th scope="col">所在樓層</th>
+                                    <th scope="col">防疫對策</th>
+                                    <th scope="col">遠隔休止</th>
+                                    <th scope="col">獨立運轉</th>
+                                    <th scope="col">VIP</th>
+                                    <th scope="col">回歸運轉</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr class="text-center">
+                                    <td name="devName"></td>
+                                    <td name="status"></td>
+                                    <td name="curFloor"></td>
+                                    <td>
+                                        <div class="d-flex justify-content-center align-items-center">
+                                            <div class="row mr-2">
+                                                <input name="preMea" type="checkbox" class="toggle" data-toggle="toggle">
+                                            </div>
+                                            <i id="preMeaSche" data-point="DP" class="fas fa-calendar-alt fs-1-1 mr-2 cur-poi"></i>
+                                        </div>
+                                    </td>
+                                    <td>
+                                        <div class="d-flex justify-content-center align-items-center">
+                                            <div class="row mr-2">
+                                                <input name="stop" type="checkbox" class="toggle" data-toggle="toggle">
+                                            </div>
+                                            <i id="stopSche" data-point="RCS" class="fas fa-calendar-alt fs-1-1 mr-2 cur-poi"></i>
+                                        </div>
+                                    </td>
+                                    <td>
+                                        <div class="d-flex justify-content-center align-items-center">
+                                            <div class="row mr-2">
+                                                <input name="onlyOpe" type="checkbox" class="toggle" data-toggle="toggle">
+                                            </div>
+                                            <i id="onlyOpeSche" data-point="IND" class="fas fa-calendar-alt fs-1-1 mr-2 cur-poi"></i>
+                                        </div>
+                                    </td>
+                                    <td>
+                                        <div class="d-flex justify-content-center align-items-center">
+                                            <div class="row mr-2">
+                                                <input name="vip" type="checkbox" class="toggle" data-toggle="toggle">
+                                            </div>
+                                            <i id="vipSche" data-point="VIP" class="fas fa-calendar-alt fs-1-1 mr-2 cur-poi"></i>
+                                        </div>
+                                    </td>
+                                    <td>
+                                        <div class="d-flex justify-content-center align-items-center">
+                                            <div class="row mr-2">
+                                                <input name="retOpe" type="checkbox" class="toggle" data-toggle="toggle">
+                                            </div>
+                                            <i id="retOpeSche" data-point="RET" class="fas fa-calendar-alt fs-1-1 mr-2 cur-poi"></i>
+                                        </div>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                        <div id="bajaSche" class="w-100">
+
+                        </div>
+                    </div>
+                    <div id="detMasDiv" style="display:none">
+                        <button class="btn btn-info" data-toggle="prevDiv"><i class="fas fa-angle-left mr-2"></i>上一頁</button>
+                        <div class="row m-0">
+                            <table id="notSerFloTable" class="table table-hover col-xl-4">
+                            </table>
+                            <div id="bajaMasSche" class="col-xl-8">
+
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -881,7 +861,9 @@
 </div>
 
 <script>
-    var floors = ["B2F", "B1F", "1F", "2F", "3F", "4F", "5F", "6F"]
+
+    var floors = ["B2F", "B1F", "1F", "2F", "3F", "4F", "5F", "6F"];
+    var eleManTable = null;
     var allDevList = [];
     var subSeviceData = [];
     var subOrdPath = {
@@ -889,11 +871,18 @@
         "system_tag": pageAct.sysMainTag,
         "name_tag": pageAct.sysSubTag,
     };
-
+    //平面圖參數
+    var floChart = null;
+    var currentData = [];
+    var allDeviceRowData = []; //所有設備原始資料
+    var global_emergency_alarm_device_number = [];
+    var zoomToggle = 3;
     $(function () {
+        initChart();
         setBuildFloor(floors.length, 3);
         setCards();
         subDeviceSetStatus();
+        setEleManTable();
     })
     function getFloDevList() {
 
@@ -924,13 +913,14 @@
             }
 
             let matchDevice = allDevList.filter(x => x.device_number?.split("_")[x.device_number?.split("_").length - 1] == data.device_number)[0];
-            let norDevPoiName = matchDevice.device_normal_point_name;
-            let cloDevPoiName = matchDevice.device_close_point_name;
-            let errDevPoiName = matchDevice.device_error_point_name;
-
+            let master = matchDevice.device_number.split("_")[5];
             //狀態
             if (data.point_name == "ST") {
                 $(`#${matchDevice.device_number}_card [name=devStatus]`).text(data.value);
+                //若為異常(match資料庫點位值)且後台有設定為閃爍
+                if (getValueByName("ST") == matchDevice.device_error_point_value) {
+                    $(`#${matchDevice.device_number}_card`).addClass("light-flash")
+                }
             }
             //現在樓層
             if (data.point_name == "CP") {
@@ -954,16 +944,8 @@
             //地震管制
             actLightByPoi("EER", "#earQuaCon");
 
-            if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) {
-                //顯示正常燈號
-                $(`#${matchDevice.device_number}_card`).attr("data-light-type", "normal").data("light-type", "normal");
-            } else if (data.point_name == cloDevPoiName && data.value == matchDevice.device_close_point_value) {
-                $(`#${matchDevice.device_number}_card`).attr("data-light-type", "close").data("light-type", "close");
-            } else if (data.point_name == errDevPoiName && data.value == matchDevice.device_error_point_value) {
-                $(`#${matchDevice.device_number}_card`).attr("data-light-type", "error").data("light-type", "error");
-            }
-            setLightColor();
             
+            //將訂閱值塞入 subSeviceData
             if (subSeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) {
                 let obj = {};
                 obj.device_number = matchDevice.device_number;
@@ -975,17 +957,52 @@
             if (subData) {
                 subData[data.point_name] = data.value;
             }
-
-
-            subDeviceSetTable(matchDevice.device_number)
-            /*$(`#opeModTable${matchDevice.device_number} #notSerFloor`).text(getValueByName("COR"))*/
+            setLightColor();
+            subDeviceSetTable(matchDevice.device_number);
+            // 重繪 電梯管理 列表
+            reloadEleManTable(setEleManTabDataFromBaja());
+            // 電梯管理 detail
+            subDeviceSetEleManDet(matchDevice.device_number);
+            // 電梯管理 不服務樓層 detail
+            subDeviceSetEleManNotSerFloor(master);
         });
 
     }
 
-    //baja 訂閱設備
-    function subDeviceSetTable(devNum) {
+    // baja 訂閱 變更 電梯管理 Table
+    function setEleManTabDataFromBaja() {
+        let result = [];
+        let masterList = allDevList.map(x => x.device_number.split("_")[5]).Distinct();
+        // Master(第六段) 區分
+        $.each(masterList, (idx, master) => {
+            let main = {};
+            // 匯入 Master 名稱`
+            main.devName = master;
+            main._rowType = "master";
+            result.push(main);
+            // 該 Master 底下的設備
+            let devListByMaster = allDevList.filter(x => x.device_number.split("_")[5] == master);
+            $.each(devListByMaster, (idx2, devObj) => {
+                let subData = subSeviceData.filter(x => x.device_number == devObj.device_number)[0];
+                main = {};
+                main.devNum = devObj.device_number;
+                main.devName = devObj.full_name;
+                main._rowType = "device";
+                // 該設備點位匯入
+                $.each(Object.keys(subData), (idx3, subKey) => {
+                    main[subKey] = subData[subKey];
+                })
+                // 匯入設備資訊(訂閱點位)
+                result.push(main);
+            })
+        })
+        console.log("redraw",result)
+        return result;
+    }
 
+    // Card - 設置列表中訂閱內容
+    function subDeviceSetTable(devNum) {
+        
         let subData = subSeviceData.filter(x => x.device_number == devNum)[0]
         let matchDevice = allDevList.filter(x => x.device_number == devNum)[0];
         if (!subData) {
@@ -1028,36 +1045,9 @@
         $(`#opeModTable_${devNum} #runOpe`).html(creLight(subData["MID"]))
         $(`#opeModTable_${devNum} #returnFin`).html(creLight(subData["COR"]))
         $(`#opeModTable_${devNum} #notSerFloor`).text(notSerFloors.join("、"))
-
-
-    }
-
-    function setLightColor() {
-        $("[data-light-type]").each((index, ele) => {
-            let type = $(ele).data("light-type");
-            let isFlashing = false;
-            let color = "#000";
-            switch (type) {
-                case "normal":
-                    color = pageAct.sysSubObj.device_normal_color ?? "var(--theme-success)";
-                    isFlashing = pageAct.sysSubObj.device_normal_flashing == "1"
-                    break;
-                case "close":
-                    color = pageAct.sysSubObj.device_close_color ?? "var(--theme-secondary)";
-                    isFlashing = pageAct.sysSubObj.device_close_flashing == "1"
-                    break;
-                case "error":
-                    color = pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
-                    isFlashing = pageAct.sysSubObj.device_error_flashing == "1"
-                    break;
-            }
-            $(ele).css("background-color", color);
-            if (isFlashing) {
-                $(ele).addClass("light-flash");
-            }
-        })
     }
 
+    //取得設備 並繪製Card
     function setCards() {
         let url = baseApiUrl + "/api/Device/GetDeviceList";
         let sendData = {
@@ -1075,7 +1065,7 @@
                     $.each(floObj.device_list, (index2, devObj) => {
                         allDevList.push(devObj);
 
-                        strHtml += `<div id="${devObj.device_number}_card" class="card text-white mx-1 mb-3 col-4 " name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" data-name="${devObj.full_name}" style="max-width: 18rem;">
+                        strHtml += `<div id="${devObj.device_number}_card" class="card dev-card text-white mx-1 mb-3 col-4 " name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" data-name="${devObj.full_name}" style="max-width: 18rem;">
                                         <div type="button" class="card-body">
                                             <span class="d-flex">
                                                 <h5 class="card-title">號機別 : ${devObj.full_name}</h5>
@@ -1093,12 +1083,15 @@
                 })
                 $("#eleCards").html(strHtml);
                 initPopover();
+                //平面圖載入
+                chartHandler(`${baseImgUrl}/upload/floor_map/${res.data[0].floor_map_name}`);
+                getDevice(res.data[0].device_list);
             }
         }, null, "POST").send();
 
     }
 
-
+    //左側 2D 樓層 Table
     function setBuildFloor(floorCnt = 10, eleCnt = 3) {
         let tbody = creEle("tbody");
         //樓層從小到大
@@ -1244,5 +1237,1024 @@
         return tabEle.outerHtml();
     }
 
+    function reloadEleManTable(datas) {
+        
+        let tabCols = eleManTable.context[0].aoColumns.map(x => x.data);
+        $.each(datas, (idx, data) => {
+            $.each(tabCols, (idx2, value) => {
+                if (Object.keys(data).indexOf(value) == -1) {
+                    datas[idx][value] = null;
+                }
+            })
+        })
+        
+        eleManTable.clear().rows.add(datas).draw();
+    }
 
+    function setEleManTable() {
+        let tag = "#eleManTable";
+        let datas = [];
+        
+        let column_defs = [
+            { "targets": [0], "width": "11%", "sortable": true },
+            { "targets": [1], "width": "11%", "sortable": true },
+            { "targets": [2], "width": "11%", "sortable": true },
+            { "targets": [3], "width": "11%", "sortable": true },
+            { "targets": [4], "width": "11%", "sortable": true },
+            { "targets": [5], "width": "11%", "sortable": true },
+            { "targets": [6], "width": "11%", "sortable": true },
+            { "targets": [7], "width": "11%", "sortable": true },
+            { "targets": [8], "width": "12%", "sortable": true },
+        ];
+
+        let columns = [
+            {
+                "title": "號機",
+                "data": "devName",
+
+            },
+            {
+                "title": "狀態",
+                "data": "ST",
+            },
+            {
+                "title": "所在樓層",
+                "data": "CP",
+            },
+            {
+                "title": "載重",
+                "data": "LOAD",
+            },
+            {
+                "title": "休止",
+                "data": "RCS",
+            },
+            {
+                "title": "獨立運轉",
+                "data": "SP_IND",
+            },
+            {
+                "title": "VIP",
+                "data": "VIP",
+            },
+            {
+                "title": "回歸",
+                "data": "RET",
+            },
+            {
+                "title": "不服務樓層",
+                "data": null,
+                "render": function (data, type, row) {
+                    return Object.keys(row).filter(x => x.startsWith("SP_FLS_") && row[x] == "trueText").map(x => x?.split("SP_FLS_")[1]).join("、");
+                }
+            },
+            {
+                "title": "動作",
+                "data": null,
+                "className":"text-center",
+                "render": function (data, type, row) {
+                    let btn = '';
+                    if (row._rowType == "master") {
+                        btn = creBtn("編輯", "eleManMasEdit" + row.devName, null, ["btn", "btn-info"]);
+                    } else if (row._rowType == "device"){
+                        btn = creBtn("編輯", "eleManDevEdit" + row.devNum, null, ["btn", "btn-info"]);
+                    }
+                    btn.append(`<i class="fal fa-pen pl-1"></i>`);
+                    return btn.outerHtml();
+                }
+            },
+        ];
+
+        eleManTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "tpi");
+        console.log(eleManTable)
+    }
+
+    // 電梯管理 Modal - 設置 Detail 訂閱內容
+    function subDeviceSetEleManDet(devNum) {
+        if ($("#eleManModal").is(":visible") == false) {
+            return false;
+        }
+        let subData = subSeviceData.filter(x => x.device_number == devNum)[0]
+        let matchDevice = allDevList.filter(x => x.device_number == devNum)[0];
+        if (!subData) {
+            return false;
+        }
+        function bajaValToBool(boolText) {
+            return boolText == "trueText";
+        }
+       
+        $("#eleManModal #detDevDiv [name=devName]").text(matchDevice.full_name);
+        $("#eleManModal #detDevDiv [name=status]").text(subData["ST"]);
+        $("#eleManModal #detDevDiv [name=curFloor]").text(subData["CP"] + "F");
+        $("#eleManModal #detDevDiv [name=preMea]").prop("checked", bajaValToBool(subData["SP_DP"]));  //防疫對策
+        $("#eleManModal #detDevDiv [name=stop]").prop("checked", bajaValToBool(subData["SP_RCS"]));
+        $("#eleManModal #detDevDiv [name=onlyOpe]").prop("checked", bajaValToBool(subData["SP_IND"]));
+        $("#eleManModal #detDevDiv [name=vip]").prop("checked", bajaValToBool(subData["SP_VIP"]));
+        $("#eleManModal #detDevDiv [name=retOpe]").prop("checked", bajaValToBool(subData["SP_RET"]));
+    }
+
+    // 電梯管理 Modal - 設置 不服務樓層 訂閱內容
+    function subDeviceSetEleManNotSerFloor(master) {
+        if ($("#eleManModal").is(":visible") == false) {
+            return false;
+        }
+        let subData = subSeviceData.filter(x => x.device_number.split("_")[5] == master)[0];
+        let allSerFloors = Object.keys(subData).filter(x => x.startsWith("SP_FLS_")).map(x => x?.split("SP_FLS_")[1]);
+
+        $("#notSerFloTable").html(setNotSerFloTable(allSerFloors));
+        let notSerFloors = Object.keys(subData).filter(x => x.startsWith("SP_FLS_") && subData[x] == "trueText").map(x => x?.split("SP_FLS_")[1]);
+        $(`[name^=notSerChk]`).prop("checked", false);
+        $.each(notSerFloors, (idx, floor) => {
+            $(`[name=notSerChk${floor}]`).prop("checked", true);
+        })
+    }
+
+    // 電梯管理 Modal - 不服務樓層 設定列表
+    function setNotSerFloTable(floors) {
+        let tbody =$("<tbody></tbody>");
+        let rows = [];
+           
+        $.each(floors, (idx, floor) => {
+            rows.push({ id: floor, text: floor });
+        })
+        let cols = [
+            { width: "50%" },
+            { width: "50%" },
+        ]
+        let datas = [];
+        $.each(rows, (idx, row) => {
+            datas.push({
+                row: idx,
+                col: 1,
+                data: `<input name="notSerChk${row.text}" type="checkbox" class="toggle" data-toggle="toggle">`,
+            })
+        })
+        $.each(rows, (index, row) => {
+            let tr = $("<tr></tr>");
+            $.each(cols, (index2, col) => {
+                let td = $("<td></td>");
+
+                td.css("width", col.width)
+                if (index2 == 0) {
+                    td.text(row.text);
+                }
+                if (index2 == 1) {
+                    td.prop("id", row.id)
+                }
+                if (datas.filter(x => x.row == index && x.col == index2).length != 0) {
+                    let target = datas.filter(x => x.row == index && x.col == index2)[0];
+                    td.css("cssText", target.style);
+                    td.html(target.data);
+                }
+                tr.append(td);
+            })
+            tbody.append(tr);
+        })
+
+        return tbody.outerHtml();
+    }
+
+    // 電梯管理 Modal 按下設備編輯進入 Detail
+    onEvent("click", "#eleManTable [id^=eleManDevEdit]", function () {
+        let devNum = $(this).prop("id").split("eleManDevEdit")[1];
+        let scheBtn = ["preMeaSche", "stopSche", "onlyOpeSche", "vipSche", "retOpeSche"];
+        $("#bajaSche").html("");
+        // 電梯管理 Modal 切換到 detail 頁面
+        modalTogDiv("#eleManModal", "#tabDiv", "#detDevDiv","next", function () {
+            subDeviceSetEleManDet(devNum);
+            $.each(scheBtn, (idx, scheSelector) => {
+                onEvent("click", `#${scheSelector}`, function() {
+                    let devNumPath = devNum.split("_").join("/");
+                    let point = $(this).data("point");
+                    let ifHtml = `<iframe src="http://localhost:8080/ord?station:%7Cslot:${devNumPath}/Sch_${point}|view:?fullScreen=true" width="100%" height="100%" style="height:30rem"></iframe>`
+                    $("#bajaSche").html(ifHtml);
+                })
+            })
+            
+        })
+    })
+
+    // 電梯管理 Modal 按下設備編輯進入 Detail
+    onEvent("click", "#eleManTable [id^=eleManMasEdit]", function () {
+        let master = $(this).prop("id").split("eleManMasEdit")[1];
+        let subData = subSeviceData.filter(x => x.device_number.split("_")[5] == master)[0];
+        $("#bajaMasSche").html("");
+        // 電梯管理 Modal 切換到 detail 頁面
+        modalTogDiv("#eleManModal", "#tabDiv", "#detMasDiv", "next", function () {
+            subDeviceSetEleManNotSerFloor(master);
+            let devNumPath = subData.device_number?.split("_").join("/");
+            let ifHtml = `<iframe src="http://localhost:8080/ord?station:%7Cslot:${devNumPath}/Sch_FLS|view:?fullScreen=true" width="100%" height="100%" style="height:30rem"></iframe>`
+            $("#bajaMasSche").html(ifHtml);
+
+        })
+    })
+
+    // 切換 modal 內 div 頁面
+    function modalTogDiv(modal, div1, div2, type = "next", callback = null) {
+        $(modal).find(div1).parent("div").css("overflow", "hidden");
+        $(modal).find(div1).css({ "position":"relative"});
+        $(modal).find(div2).css({ "position": "relative"});
+        let aniDiv1Obj = {}, aniDiv2Obj = {};
+        if (type == "next") {
+            aniDiv1Obj.left = "-200%";
+            aniDiv2Obj.left = "0%";
+        } else if (type == "back") {
+            aniDiv1Obj.left = "200%";
+            aniDiv2Obj.left = "0%";
+        }
+        $(modal).find(div1).animate(aniDiv1Obj, 400, function () {
+            $(modal).find(div1).css("display", "none");
+            $(modal).find(div2).css("display", "block");
+            $(modal).find(div2).animate(aniDiv2Obj, 400, function () {
+                callback ? callback() : "";
+            })
+            if (type == "next") {
+                $(modal).find("[data-toggle='prevDiv']").show();
+            } else {
+                $(modal).find("[data-toggle='prevDiv']").hide();
+            }
+            let modalId = $(modal).prop("id");
+            onEvent("click", `#${modalId} [data-toggle='prevDiv']`, function () {
+                modalTogDiv(modal, div2, div1, "back", function () {
+                })
+            })
+
+        });
+    }
+
+    //=====================================================================
+    //                             樓層平面圖
+    //=====================================================================
+    function getDevice(devList) {
+        let selected_floor = devList[0];
+        //let selected_floor_objs = devList.filter(function (item) {
+        //    return item.floor_guid == selected_floor.floor_guid;
+        //});
+
+        //currentData = selected_floor_objs[0].device;
+
+        currentData = $.map(devList, function (item) {
+
+            //資料處理
+            if (selected_floor.device_number != undefined
+                && selected_floor.device_number != null
+                && selected_floor.device_number != ""
+                && selected_floor.device_number == item.device_number) {
+                item.selected = true;
+            } else {
+                item.selected = false;
+            }
+            if (item.device_coordinate != undefined && item.device_coordinate != null) {
+                var coordinate = item.device_coordinate.split(',')
+                item.value = [
+                    parseFloat(coordinate[0]),
+                    parseFloat(coordinate[1])
+                ]
+            }
+
+            if (item.device_nodes != undefined
+                && item.device_nodes != null
+                && item.device_nodes.length > 0) {
+
+                if (item.device_master_number == selected_floor.device_master) {
+                    //var datatable_data = {
+                    //    device_full_name: item.full_name,
+                    //    device_number: item.device_number,
+                    //    device_master: item.device_master_number
+                    //}
+                    //datatable_data_list.push(datatable_data);
+
+                    $.map(item.device_nodes, function (item_node) {
+                        item_node.selected = false;
+                        if (item_node.device_node_coordinate != undefined && item_node.device_node_coordinate != null) {
+                            var node_coordinate = item_node.device_node_coordinate.split(',')
+                            item_node.value = [
+                                parseFloat(node_coordinate[0]),
+                                parseFloat(node_coordinate[1])
+                            ]
+                        }
+                    });
+                }
+                else {
+                    //var index = datatable_data_list.findIndex(x => x.device_number == item.device_number);
+                    //if (index < 0) {
+                    //    var datatable_data = {
+                    //        device_number: item.device_number,
+                    //        device_master: item.device_master_number
+                    //    }
+                    //    datatable_data_list.push(datatable_data);
+                    //}
+
+                    $.map(item.device_nodes, function (item_node) {
+                        item_node.selected = false;
+                        if (item_node.device_node_coordinate != undefined && item_node.device_node_coordinate != null) {
+                            var node_coordinate = item_node.device_node_coordinate.split(',')
+                            item_node.value = [
+                                parseFloat(node_coordinate[0]),
+                                parseFloat(node_coordinate[1])
+                            ]
+                        }
+                    });
+                }
+            }
+            return item;
+        });
+        console.log(currentData)
+        if (currentData == null || currentData.length == 0) {
+            this.currentData = [];
+        }
+
+        // myBaja.setPrepareSubscribeDevices(currentData);
+        // myBaja.setCallBack(mySubscribeDevices);
+
+        //if (datatable_data_list.length > 0) {
+        //    $("#datatablediv").show();
+        //    dataTableDraw();
+        //} else {
+        //    $("#datatablediv").hide();
+        //}
+        resetData();
+    }
+
+    onEvent("click", "#resChartZoom", function () {
+        floChart.setOption({
+            geo: {
+                center: null,
+                zoom: 1.2,
+            },
+        });
+        resetData();
+    })
+
+
+    function initChart() {
+        let chartDom = $("#floChart")[0];
+        floChart = echarts.init(chartDom, null, { width: 'auto' });
+    }
+
+    function chartHandler(url) {
+        floChart.clear();
+
+        $.get(url, function (svg) {
+            if (svg == undefined || svg == null) {
+                return;
+            }
+
+            echarts.registerMap('floor_svg', { svg: svg });
+
+            option = {
+                // animationDurationUpdate: 1500,
+                tooltip: {
+                    formatter: function (params) {
+                        console.log("23", params)
+                        if (params.data.device_node_guid != undefined && params.data.device_node_guid != null && params.data.device_node_guid != "") {
+                            return `名稱：${params.data.device_node_full_name}<br>
+                                    Guid：${params.data.device_node_guid}`
+                        }
+                        else {
+                            return `名稱：${params.data.full_name}<br>
+                                    Guid：${params.data.device_guid}`
+                        }
+                    }
+                },
+                toolbox: { //工具欄
+                    show: false
+                },
+                geo: {
+                    map: 'floor_svg',
+                    roam: true,
+                    scaleLimit: {  //限制放大縮小倍數
+                        max: 32,
+                        min: 1
+                    },
+                    layoutSize: '100%',
+                    layoutCenter: [],
+                    zoom: 1.2,
+                    silent: true
+                },
+                series: [
+                    {   //不管有無被選擇(圓點)
+                        type: 'scatter',
+                        coordinateSystem: 'geo',
+                        geoIndex: 0,
+                        symbol: 'circle',
+                        symbolSize: 10,
+                        symbolOffset: [10, 10],
+                        label: {
+                            show: false
+                        },
+                        /*data: currentData,*/
+                        z: 2
+                    },
+                    {   //未選擇的設備(icon)
+                        type: 'scatter',
+                        coordinateSystem: 'geo',
+                        geoIndex: 0,
+                        symbolSize: 30,
+                        label: {
+                            formatter: '{b}',
+                            position: 'bottom',
+                            show: true,
+                            backgroundColor: 'orange'
+                        },
+                        emphasis: {
+                            label: {
+                                show: true,
+                                fontSize: '20',
+                                fontWeight: 'bold',
+                                color: 'yellow'
+                            }
+                        },
+                        selectedMode: 'single',
+                        data: null,
+                        z: 1
+                    },
+                    {   //被選擇的設備(icon)
+                        type: 'effectScatter',
+                        coordinateSystem: 'geo',
+                        geoIndex: 0,
+                        showEffectOn: 'render',
+                        symbolSize: 30,
+                        label: {
+                            formatter: '{b}',
+                            position: 'bottom',
+                            show: true,
+                            backgroundColor: 'orange'
+                        },
+                        emphasis: {
+                            label: {
+                                show: true,
+                                fontSize: '20',
+                                fontWeight: 'bold',
+                                color: 'yellow'
+                            }
+                        },
+                        selectedMode: 'single',
+                        data: null,
+                        z: 1
+                    },
+                    {   //編輯模式底下的設備(圓點，只會有一個)
+                        type: 'scatter',
+                        coordinateSystem: 'geo',
+                        geoIndex: 0,
+                        symbol: 'circle',
+                        symbolSize: 10,
+                        symbolOffset: [10, 10],
+                        label: {
+                            show: false
+                        },
+                        /*data: currentData,*/
+                        z: 2
+                    },
+                    {   //編輯模式底下的設備(icon，只會有一個)
+                        type: 'scatter',
+                        coordinateSystem: 'geo',
+                        geoIndex: 0,
+                        symbolSize: 30,
+                        label: {
+                            formatter: '{b}',
+                            position: 'bottom',
+                            show: true,
+                            backgroundColor: 'orange'
+                        },
+                        emphasis: {
+                            label: {
+                                show: true,
+                                fontSize: '20',
+                                fontWeight: 'bold',
+                                color: 'yellow'
+                            }
+                        },
+                        data: null,
+                        z: 1
+                    },
+                ],
+            };
+
+            floChart.setOption(option);
+
+
+            if (currentData != undefined && currentData != null && currentData.length > 0) {
+                resetData();
+            }
+
+            var ordPath = {
+                "building_tag": pageAct.buiTag,
+                "system_tag": pageAct.sysMainTag,
+            }
+            //myBaja.setSubscribeDevicesByBql(ordPath);
+            //myBaja.setSubscribeDevicesCallBack(subscribeCallBack);
+
+            console.log(floChart)
+            floChart.getZr().on('click', function (params) {
+                console.log("click", params);
+                var pixelPoint = [params.offsetX, params.offsetY];
+                var dataPoint = floChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
+                console.log(dataPoint);
+
+
+
+                temp_device_on_floor_map = [{
+                    device_guid: selected_temp_device.device_guid,
+                    device_full_name: selected_temp_device.device_full_name,
+                    device_node_guid: selected_temp_device.device_node_guid ? selected_temp_device.device_node_guid : null,
+                    device_node_full_name: selected_temp_device.device_node_full_name ? selected_temp_device.device_node_full_name : null,
+                    status: selected_temp_device.status,
+                    value: dataPoint
+                }];
+
+
+
+
+
+                // currentData.push([dataPoint[0], dataPoint[1], 1]);
+                // floChart.setOption(option);
+            });
+
+            //floChart.on('selectchanged', function (params) {
+
+            //    console.log("selectchanged", params);
+            //    // currentData.push([dataPoint[0], dataPoint[1], 1]);
+            //    // floChart.setOption(option);
+
+            //    currentData = $.map(currentData, function (item) {
+            //        item.selected = false;
+            //        return item;
+            //    });
+
+            //    if (params.selected.length > 0) {
+            //        currentData[params.selected[0].seriesIndex - 1].selected = true;
+            //    }
+
+
+            //});
+
+            // floChart.getZr().on('mousewheel', function (params) {
+            //     console.log(params)
+            // })
+            floChart.on('georoam', function (params) {
+                var zoom = floChart.getOption().geo[0].zoom;
+
+                if (zoom <= 2.5) {
+                    /*ResetFloorMap();*/
+                    floChart.setOption({
+                        geo: {
+                            roam: 'scale'
+                        },
+                    });
+                } else {
+                    floChart.setOption({
+                        geo: {
+                            roam: true
+                        },
+                    });
+                }
+
+                resetData();
+            });
+
+        })
+            .fail(function () {
+                toast_warning("查無該樓層地圖")
+                floChart.clear();
+            });
+
+
+
+    }
+
+    //訂閱設備的回傳值，並塞到全域變數
+    function subscribeCallBack(change_device, is_need_reset = false) {
+        if (change_device != undefined && change_device != null) {
+            var target_device = allDeviceRowData.filter(x => x.device_number == change_device.device_number)[0];
+
+            if (target_device == undefined || target_device == null) {
+                //新增
+                obj = {
+                    device_number: change_device.device_number,
+                    points: [{
+                        name: change_device.point_name,
+                        value: change_device.value
+                    }]
+                };
+
+                allDeviceRowData.push(obj);
+            }
+            else {
+                selected_device_point = target_device.points.find(x => x.name == change_device.point_name);
+                if (selected_device_point != null) {
+                    selected_device_point.value = change_device.value;
+                }
+                else {
+                    obj = {
+                        name: change_device.point_name,
+                        value: change_device.value
+                    }
+                    target_device.points.push(obj);
+                }
+            }
+
+            if (is_need_reset) {
+                resetData();
+            }
+        }
+    }
+
+    // 重設平面圖設備資料
+    function resetData() {
+
+        const scatter_symbol_convertData = function (data, zoom) { //正常、關閉排除CCVT(圓點)
+            let res = [], temp = [];
+            data.forEach(function (item, index) {
+                if (global_emergency_alarm_device_number != undefined
+                    && global_emergency_alarm_device_number != null) {
+                    if (global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) < 0 && item.device_system_category_layer3 != "C") {
+                        //如果有子節點，則只針對子節點操作
+                        if (item.device_nodes != undefined && item.device_nodes != null && item.device_nodes.length > 0) {
+                            item.device_nodes.forEach(function (item_node, item_node_index) {
+                                //添加父節點相關資訊
+                                item_node.device_system_category_layer3 = item.device_system_category_layer3;
+                                item_node.device_normal_color = item.device_normal_color;
+                                item_node.device_close_color = item.device_close_color;
+
+                                //判斷父節點狀態
+                                var device_index = allDeviceRowData.findIndex(x => x.device_number == item.device_number)
+                                var temp_point_value;
+                                if (device_index > -1) {
+                                    if (item.device_normal_point_name != null || item.device_close_point_name != null) {
+                                        //當其中point name 不為null的情況
+                                        if (item.device_normal_point_name != null) {
+                                            temp_point_value = allDeviceRowData[device_index].points.find(x => x.name == item.device_normal_point_name);
+                                            temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
+                                            if (temp_point_value == item.device_normal_point_value) {
+                                                item_node.device_color = item.device_normal_color;
+                                            }
+                                        }
+                                        if (item.device_close_point_name != null) {
+                                            temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
+                                            if (temp_point_value == item.device_close_point_value) {
+                                                item_node.device_color = item.device_close_color;
+                                            }
+                                        }
+                                    } else {
+                                        if (item.device_normal_point_name == "ER") {
+                                            temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
+                                            if (temp_point_value == "true") {
+                                                item_node.device_color = item.device_normal_color;
+                                            } else {
+                                                temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
+                                                if (temp_point_value == item.device_close_point_value) {
+                                                    item_node.device_color = item.device_close_color;
+                                                }
+                                            }
+                                        } else if (item.device_close_point_name == "ER") {
+                                            temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
+                                            if (temp_point_value == "true") {
+                                                item_node.device_color = item.device_close_color;
+                                            } else {
+                                                temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
+                                                if (temp_point_value == item.device_normal_point_value) {
+                                                    item_node.device_color = item.device_normal_color;
+                                                }
+                                            }
+                                        } else {
+                                            temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
+                                            if (temp_point_value == item.device_normal_point_value) {
+                                                item_node.device_color = item.device_normal_color;
+                                            } else if (temp_point_value == item.device_close_point_value) {
+                                                item_node.device_color = item.device_close_color;
+                                            }
+                                        }
+                                    }
+                                }
+                                temp.push(item_node);
+                            });
+                        } else {
+
+                            var device_index = allDeviceRowData.findIndex(x => x.device_number == item.device_number)
+                            if (device_index > -1) {
+                                if (item.device_normal_point_name != null || item.device_close_point_name != null) {
+                                    //當其中point name 有為null的情況
+                                    if (item.device_normal_point_name != null) {
+                                        // temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
+                                        temp_point_value = allDeviceRowData[device_index].points.find(x => x.name == item.device_normal_point_name).value;
+                                        if (temp_point_value == item.device_normal_point_value) {
+                                            item.device_color = item.device_normal_color;
+                                        }
+                                    }
+                                    if (item.device_close_point_name != null) {
+                                        // temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
+                                        temp_point_value = allDeviceRowData[device_index].points.find(x => x.name == item.device_close_point_name).value;
+                                        if (temp_point_value == item.device_close_point_value) {
+                                            item.device_color = item.device_close_color;
+                                        }
+                                    }
+                                } else {
+                                    if (item.device_normal_point_name == "ER") {
+                                        // temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
+                                        temp_point_value = allDeviceRowData[device_index].points.find(x => x.name == item.device_normal_point_name).value;
+                                        if (temp_point_value == "true") {
+                                            item.device_color = item.device_normal_color;
+                                        } else {
+                                            // temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
+                                            temp_point_value = allDeviceRowData[device_index].points.find(x => x.name == item.device_close_point_name).value;
+                                            if (temp_point_value == item.device_close_point_value) {
+                                                item.device_color = item.device_close_color;
+                                            }
+                                        }
+                                    } else if (item.device_close_point_name == "ER") {
+                                        // temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
+                                        temp_point_value = allDeviceRowData[device_index].points.find(x => x.name == item.device_close_point_name).value;
+                                        if (temp_point_value == "true") {
+                                            item.device_color = item.device_close_color;
+                                        } else {
+                                            // temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
+                                            temp_point_value = allDeviceRowData[device_index].points.find(x => x.name == item.device_normal_point_name).value;
+                                            if (temp_point_value == item.device_normal_point_value) {
+                                                item.device_color = item.device_normal_color;
+                                            }
+                                        }
+                                    } else {
+                                        // temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
+                                        temp_point_value = allDeviceRowData[device_index].points.find(x => x.name == item.device_normal_point_name).value;
+                                        if (temp_point_value == item.device_normal_point_value) {
+                                            item.device_color = item.device_normal_color;
+                                        } else if (temp_point_value == item.device_close_point_value) {
+                                            item.device_color = item.device_close_color;
+                                        }
+                                    }
+                                }
+                            }
+                            item.zoom = zoom;
+                            temp.push(item);
+                        }
+                    }
+                }
+            });
+
+            // let temp = data.filter(function (item, index) {
+            //     if (global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null) {
+            //         return global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) < 0 && item.device_system_category_layer3 != "C";
+            //     } else {
+            //         return [];
+            //     }
+            // });
+
+            temp.map(function (item) {
+
+                var obj = {
+                    device_guid: item.device_guid,
+                    device_number: item.device_number,
+                    full_name: item.full_name ? item.full_name : null,
+                    device_node_guid: item.device_node_guid ? item.device_node_guid : null,
+                    device_node_full_name: item.device_node_full_name ? item.device_node_full_name : null,
+                    device_system_category_layer3: item.device_system_category_layer3 ? item.device_system_category_layer3 : null,
+                    status: item.status,
+                    value: item.value,
+                    deviceItems: item.deviceItems,
+                    deviceURL: item.deviceURL
+                }
+
+                obj.itemStyle = { 'color': item.device_color };
+
+                res.push(obj);
+            });
+
+            return res;
+        }
+
+        const scatter_icon_convertData = function (data) { //正常、關閉(icon)
+            let res = [], temp = [];
+
+            data.forEach(function (item, index) {
+                if (global_emergency_alarm_device_number != undefined
+                    && global_emergency_alarm_device_number != null) {
+                    if (global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) < 0 && item.device_system_category_layer3 != "C") {
+                        //如果有子節點，則只針對子節點操作
+                        if (item.device_nodes != undefined && item.device_nodes != null && item.device_nodes.length > 0) {
+                            item.device_nodes.forEach(function (item_node, item_node_index) {
+
+                                //添加父節點相關資訊
+                                item_node.device_system_category_layer3 = item.device_system_category_layer3;
+                                item_node.device_normal_color = item.device_normal_color;
+                                item_node.device_image = item.device_image;
+                                temp.push(item_node);
+                            });
+                        } else {
+                            temp.push(item)
+                        }
+                    }
+                }
+            });
+
+            temp = data.filter(function (item, index) {
+                if (global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null) {
+                    return global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) < 0 && item.device_system_category_layer3 != "C";
+                } else {
+                    return [];
+                }
+            });
+
+            temp.map(function (item) {
+
+                var obj = {
+                    device_guid: item.device_guid,
+                    device_number: item.device_number,
+                    full_name: item.full_name ? item.full_name : null,
+                    device_node_guid: item.device_node_guid ? item.device_node_guid : null,
+                    device_node_full_name: item.device_node_full_name ? item.device_node_full_name : null,
+                    device_system_category_layer3: item.device_system_category_layer3 ? item.device_system_category_layer3 : null,
+                    status: item.status,
+                    symbol: 'image://' + baseImgUrl + "/upload/device_icon/" + item.device_image,
+                    value: item.value,
+                    deviceItems: item.deviceItems,
+                    deviceURL: item.deviceURL
+                }
+
+                if (item.selected) {
+                    obj.symbolSize = 50
+                }
+
+                res.push(obj);
+            });
+
+            return res;
+        }
+
+        const scatter_error_convertData = function (data) { //異常(圓點)
+            let res = [], temp = [];
+
+            data.forEach(function (item, index) {
+                if (global_emergency_alarm_device_number != undefined
+                    && global_emergency_alarm_device_number != null) {
+                    if (global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) > -1 && item.device_system_category_layer3 != "C") {
+
+                        //如果有子節點，則只針對子節點操作
+                        if (item.device_nodes != undefined && item.device_nodes != null && item.device_nodes.length > 0) {
+                            item.device_nodes.forEach(function (item_node, item_node_index) {
+                                //添加父節點相關資訊
+                                item_node.device_system_category_layer3 = item.device_system_category_layer3;
+                                item_node.device_error_color = item.device_error_color;
+                                temp.push(item_node);
+                            });
+                        } else {
+                            temp.push(item)
+                        }
+                    }
+                }
+            });
+
+            // if (global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null) {
+            //     temp = data.filter(function (item, index) {
+            //         return global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) > -1 && item.device_system_category_layer3 != "C";
+            //     });
+            // }
+
+
+            temp.map(function (item) {
+                var obj = {
+                    device_guid: item.device_guid,
+                    device_number: item.device_number,
+                    full_name: item.full_name ? item.full_name : null,
+                    device_node_guid: item.device_node_guid ? item.device_node_guid : null,
+                    device_node_full_name: item.device_node_full_name ? item.device_node_full_name : null,
+                    device_system_category_layer3: item.device_system_category_layer3 ? item.device_system_category_layer3 : null,
+                    status: item.status,
+                    value: item.value,
+                    deviceItems: item.deviceItems,
+                    deviceURL: item.deviceURL
+                }
+
+                obj.itemStyle = { 'color': item.device_error_color };
+
+                res.push(obj);
+            });
+
+            return res;
+        }
+
+        const scatter_error_icon_convertData = function (data) { //異常(icon)
+            let res = [], temp = [];
+
+            data.forEach(function (item, index) {
+                if (global_emergency_alarm_device_number != undefined
+                    && global_emergency_alarm_device_number != null) {
+                    if (global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) > -1 && item.device_system_category_layer3 != "C") {
+                        //如果有子節點，則只針對子節點操作
+                        if (item.device_nodes != undefined && item.device_nodes != null && item.device_nodes.length > 0) {
+                            item.device_nodes.forEach(function (item_node, item_node_index) {
+
+                                //添加父節點相關資訊
+                                item_node.device_system_category_layer3 = item.device_system_category_layer3;
+                                item_node.device_error_color = item.device_error_color;
+                                item_node.device_image = item.device_image;
+                                temp.push(item_node);
+                            });
+                        } else {
+                            temp.push(item)
+                        }
+                    }
+                }
+            });
+
+            if (global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null) {
+                temp = data.filter(function (item, index) {
+                    return global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) > -1 && item.device_system_category_layer3 != "C";
+                });
+            }
+
+            temp.map(function (item) {
+
+                var obj = {
+                    device_guid: item.device_guid,
+                    device_number: item.device_number,
+                    full_name: item.full_name ? item.full_name : null,
+                    device_node_guid: item.device_node_guid ? item.device_node_guid : null,
+                    device_node_full_name: item.device_node_full_name ? item.device_node_full_name : null,
+                    device_system_category_layer3: item.device_system_category_layer3 ? item.device_system_category_layer3 : null,
+                    status: item.status,
+                    symbol: 'image://' + baseImgUrl + "/upload/device_icon/" + item.device_image,
+                    value: item.value,
+                    deviceItems: item.deviceItems,
+                    deviceURL: item.deviceURL
+                }
+
+                res.push(obj);
+            });
+
+            return res;
+        }
+
+        const scatter_cctv_convertData = function (data) { //CCTV
+            let res = [];
+            let temp = data.filter(function (item, index) {
+                return item.device_system_category_layer3 == "C";
+            });
+
+            temp.map(function (item) {
+
+                var obj = {
+                    device_guid: item.device_guid,
+                    device_number: item.device_number,
+                    full_name: item.full_name,
+                    device_system_category_layer3: item.device_system_category_layer3,
+                    device_ip: item.device_ip,
+                    device_port: item.device_port,
+                    status: item.status,
+                    symbol: 'image://' + str_location_url + "/upload/device_icon/" + item.device_image,
+                    value: item.value
+                }
+
+                res.push(obj);
+            });
+
+            return res;
+        }
+
+        if (!floChart.getOption()) {
+            return;
+        }
+
+        var zoom = 0;
+        if (floChart.getOption().geo && floChart.getOption().geo.length > 0) {
+            zoom = floChart.getOption().geo[0].zoom;
+        }
+
+        if (zoom <= zoomToggle) {
+            floChart.setOption({
+                series: [{
+                    symbolOffset: [0, 0],
+                    data: scatter_symbol_convertData(currentData) //正常、關閉(圓點)
+                }, {
+                    data: [] //正常、關閉(icon)
+                }, {
+                    symbolOffset: [0, 0],
+                    data: scatter_error_convertData(currentData) //異常(圓點)
+                }, {
+                    data: [] //異常(icon)
+                }, {
+                    data: scatter_cctv_convertData(currentData) //CCTV
+                }]
+            });
+        } else {
+
+            floChart.setOption({
+                series: [{
+                    symbolOffset: [10, 10],
+
+                    data: scatter_symbol_convertData(currentData, zoom), //正常、關閉(圓點)
+
+                }, {
+                    data: scatter_icon_convertData(currentData) //正常、關閉(icon)
+                }, {
+                    symbolOffset: [10, 10],
+                    data: scatter_error_convertData(currentData) //異常(圓點)
+                }, {
+                    data: scatter_error_icon_convertData(currentData) //異常(icon)
+                }, {
+                    data: scatter_cctv_convertData(currentData) //CCTV
+                }]
+            });
+        }
+    }
 </script>
\ No newline at end of file
diff --git a/Frontend/_sysMonAll.html b/Frontend/_sysMonAll.html
index a09ecd6..d0c529b 100644
--- a/Frontend/_sysMonAll.html
+++ b/Frontend/_sysMonAll.html
@@ -25,9 +25,7 @@
         </div>
     </div>
     <div class="col-sm-12 col-xl-7">
-        <!--<img src="img/clouds.png" class="img-fluid" style="min-height: 520px;">-->
-        <!--<a href="javascript:;" data-toggle="modal" data-target=".default-example-modal-right-lg">
-        <span class="badge border border-light bg-primary-700 position-absolute pos-top pos-left"><i class="fal fa-image fa-3x"></i></span></a>-->
+       
     </div>
 </div>
 
@@ -38,7 +36,7 @@
 
 
 <script>
-    var allDevList = [];
+    var allDevList = [];  //全設備清單
     $(function () {
         getFloDevList();
         setLightColor();
@@ -74,7 +72,7 @@
         });
         
     }
-
+    //根據 data-type 設置顏色 (判斷後台是否有設定，若無則帶預設)
     function setLightColor() {
         $("[data-light-type]").each((index, ele) => {
             let type = $(ele).data("light-type");
@@ -83,24 +81,26 @@
             switch (type) {
                 case "normal":
                     color = pageAct.sysSubObj.device_normal_color ?? "var(--theme-success)";
-                    isFlashing = pageAct.sysSubObj.device_normal_flashing == "1"
+                    isFlashing = pageAct.sysSubObj.device_normal_flashing == "1";
                     break;
                 case "close":
                     color = pageAct.sysSubObj.device_close_color ?? "var(--theme-secondary)";
-                    isFlashing = pageAct.sysSubObj.device_close_flashing == "1"
+                    isFlashing = pageAct.sysSubObj.device_close_flashing == "1";
                     break;
                 case "error":
                     color = pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
-                    isFlashing = pageAct.sysSubObj.device_error_flashing == "1"
+                    isFlashing = pageAct.sysSubObj.device_error_flashing == "1";
                     break;
             }
             $(ele).css("background-color", color);
+            //是否閃爍
             if (isFlashing) {
                 $(ele).parents(".card.device-wrap").addClass("light-flash");
             }
         })
     }
 
+    //取得設備列表 並繪製卡片
     function getFloDevList() {
         let url = baseApiUrl + "/api/Device/GetDeviceList";
         let sendData = {
@@ -148,6 +148,7 @@
         }, null, "POST").send();
     }
 
+    // Card 即時狀態
     function drawStateTabBlo() {
         let strHtml = `<div style="height:15rem">
                             <iframe src="http://localhost:8080/ord?station:%7Cslot:/TPE/B1/EE/E4/R2F/NA/WHT/N1|view:?fullScreen=true" width="100%" height="100%"></iframe>
diff --git a/Frontend/css/site.css b/Frontend/css/site.css
index ac4b78b..17352a4 100644
--- a/Frontend/css/site.css
+++ b/Frontend/css/site.css
@@ -55,6 +55,46 @@ label[id$='-error'].error {
     animation: flashing-c 0.5s linear infinite;
 }
 
+/* checkbox switch */
+input.toggle:checked::before {
+   content: '';
+   position: absolute;
+   top: 2px;
+   left: 24px;
+   display: block;
+   border-radius: 25px;
+   width: 20px;
+   height: 20px;
+   background: #3f8635;
+}
+input.toggle::before {
+   content: '';
+   position: absolute;
+   top: 2px;
+   left: 3px;
+   display: block;
+   border-radius: 25px;
+   width: 20px;
+   height: 20px;
+   background: #656565;
+   transition: 0.2s;
+}
+
+input.toggle {
+   cursor:pointer;
+   appearance: none;
+   position:relative;
+   width: 48px;
+   height: 24px;
+   background: #464646;
+   border-radius: 50px;
+   align-content: center;
+}
+input.toggle:checked {
+   background: #97c193;
+}
+
+
 @keyframes flashing-c {
     0% {
         color: var(--flash-color-1);
diff --git a/Frontend/index.html b/Frontend/index.html
index 825edf0..ba0b61a 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -2531,7 +2531,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
     <script src="js/bajascript/bscriptReq.js"></script>
     <!--<script type='text/javascript' src='/module/js/com/tridium/js/ext/require/require.min.js?version=1496767636459'></script>-->
     <script src='js/bajascript/require.js'></script>
-    
+
 
     <script type='text/javascript'>
         define('niagaraSystemProperties', function () {
@@ -2699,7 +2699,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     $("#sysMonBtnList .dropdown-item").removeClass("active");
                     pageAct.sysMainTag = null;
                 }
-
+                $.each(tolSubList, (idx, sub) => {
+                    console.log("sub",sub,idx)
+                    //sub.unsubscribeAll();
+                    //sub.detach();
+                })
                 $("#app").load(`_${page}.html`, loadCallback);
             })
 
@@ -2722,7 +2726,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
         }
 
+        //==============================================================================
+        //                       ↓  系統監控 - 共用 Function ↓
+        //==============================================================================
 
+        // Card - 基本資料 Table
         function drawInfoTabBlo(devGuid) {
             let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`);
             let tbody = tabEle.append("<tbody>");
@@ -2753,20 +2761,23 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             return tabEle.prop("outerHTML");
         }
 
+        // Card - 異常紀錄 block
         function drawErrRecTabBlo() {
             let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
 
-                        </table>`
+                            </table>`
             return strHtml;
         }
 
+        // Card - 運維紀錄 block
         function drawOpeRecTabBlo() {
             let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
 
-                        </table>`
+                            </table>`
             return strHtml;
         }
 
+        // Card 呈現初始化
         function initPopover() {
             $("[name=devItem]").each((index, ele) => {
                 let devNum = $(ele).data("number"); //設備編號
@@ -2774,38 +2785,38 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 let devName = $(ele).data("name"); //full_name
                 $(ele).YTTooltip({
                     html: `<div class="card m-1 border device-wrap">
-                            
-                            <div class="card-header p-3">
-                                
-                                <div class="position-absolute w-50" 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" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
-                                    <button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
-                                    <button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
-                                    <button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
-                                    <button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
-                                </div>
-                            </div>
-                            <div class="card-body p-2 tab-content">
-
-                                <div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
-                                    ${drawStateTabBlo()}
-                                </div>
-                                <div id="info" data-tabname="cardTab" data-tabrole="child">
-                                    ${drawInfoTabBlo(devGuid)}
-                                </div>
-                                <div id="errRec" data-tabname="cardTab" data-tabrole="child">
-                                    ${drawErrRecTabBlo()}
-                                </div>
-                                <div id="opeRec" data-tabname="cardTab" data-tabrole="child">
-                                    ${drawOpeRecTabBlo()}
-                                </div>
 
+                                <div class="card-header p-3">
 
+                                    <div class="position-absolute w-50" style="word-break: break-all;">
+                                        <label class="m-0 mt-2">${devName}</label>
                                     </div>
-                                </div>`,
+                                    <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
+                                        <button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
+                                        <button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
+                                        <button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
+                                        <button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
+                                        <button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
+                                    </div>
+                                </div>
+                                <div class="card-body p-2 tab-content">
+
+                                    <div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
+                                        ${drawStateTabBlo(devNum)}
+                                    </div>
+                                    <div id="info" data-tabname="cardTab" data-tabrole="child">
+                                        ${drawInfoTabBlo(devGuid)}
+                                    </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>`,
                     group: "device",
                     onShow: function (tooltipEle, oriEle) {
                         var tab = new YT.Tab({ tabName: "cardTab" })
@@ -2813,10 +2824,13 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                         //loadErrRecTable2($(oriEle).data("number"));
                         //loadErrRecTable();
                         loadErr($(oriEle).data("number"));
+                        subDeviceSetTable ? subDeviceSetTable($(oriEle).data("number")) : ""
                     }
                 })
             })
         }
+
+        // Card - 運維紀錄 Table
         function loadOpeRecTable(devGuid) {
             let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;
             let tag = "#opeRecTable";
@@ -2851,60 +2865,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
             ];
 
-
-
-            //let callback = function () {
-            //    $('#opeRecTable').wrap("<div class='scrolledTable'></div>");  //不採用datatable內建scrollbody，會導致thead跑掉
-            //    let api = this.api();
-            //    api.columns.adjust();
-            //}
-
             let opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi");
         }
 
-        function loadErrRecTable() {
-            let tag = "#errRecTable";
-            let datas;
-            //getOneDeviceAlarmTop10ByBaja(_devicePath, callback);
-
-            let column_defs = [
-                { "targets": [0], "width": "15%", "sortable": true },
-                { "targets": [1], "width": "25%", "sortable": true },
-                { "targets": [2], "width": "25%", "sortable": true },
-                { "targets": [3], "width": "35%", "sortable": true },
-            ];
-
-            let columns = [
-                {
-                    "title": "異常ID",
-                    "data": "uuid",
-
-                },
-                {
-                    "title": "異常原因",
-                    "data": "msgText",
-                },
-                {
-                    "title": "ACK確認",
-                    "data": "ackState",
-                },
-                {
-                    "title": "發生/賦歸時間",
-                    "data": "timestamp",
-                    "width": "45%",
-                },
-
-            ];
-
-            //let callback = function (result) {
-            //    datas = result;
-            //}
-            let result = '{"count": 2,"data":[{ "uuid": "43dc7846-bd96-4be2-ab35-f11aec729c60","msgText": "","ackState": "1","timestamp": "2022-Nov-16 10:30:24.951 AM UTC+08:00"},{"uuid": "7c309846-d862-4a8b-803b-cdc8e0efa092","msgText": "","ackState": "1","timestamp": "2022-Nov-16 10:00:24.893 AM UTC+08:00"}]}';
-            let json_object = JSON.parse(result);
-            datas = json_object['data'];
-            errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "tpi");
-        }
-
+        // Baja 取得異常紀錄
         function loadErr(allPath) {
             if (allPath != undefined && allPath != null) {
                 let _pathArr = allPath.split("_");//TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1
@@ -2916,6 +2880,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             }
         }
 
+        // Card - 異常紀錄 Table
         function callbackForErr(result) {
             let tag = "#errRecTable";
             let datas;
@@ -2956,6 +2921,38 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "tpi");
 
         }
+
+        //根據 data-type 設置顏色 (判斷後台是否有設定，若無則帶預設)
+        function setLightColor() {
+            $(".dev-card").each((index, ele) => {
+                let type = $(ele).find("[data-light-type]").data("light-type");
+                let isFlashing = false;
+                let color = "#000";
+                switch (type) {
+                    case "normal":
+                        color = pageAct.sysSubObj.device_normal_color ?? "var(--theme-success)";
+                        isFlashing = pageAct.sysSubObj.device_normal_flashing == "1";
+                        break;
+                    case "close":
+                        color = pageAct.sysSubObj.device_close_color ?? "var(--theme-secondary)";
+                        isFlashing = pageAct.sysSubObj.device_close_flashing == "1";
+                        break;
+                    case "error":
+                        color = pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
+                        isFlashing = pageAct.sysSubObj.device_error_flashing == "1";
+                        break;
+                }
+                $(ele).find("[data-light-type]").css("background-color", color);
+                //是否閃爍
+                if (isFlashing) {
+                    $(ele).addClass("light-flash");
+                }
+            })
+        }
+
+            //==============================================================================
+            //                       ↑  系統監控 - 共用 Function ↑
+            //==============================================================================
     </script>
 
 </body>
diff --git a/Frontend/js/n4js/bajatest.js b/Frontend/js/n4js/bajatest.js
index 678a54c..194da23 100644
--- a/Frontend/js/n4js/bajatest.js
+++ b/Frontend/js/n4js/bajatest.js
@@ -1,6 +1,6 @@
 let baja_subscribe_device_callback_func; //設定BQL訂閱之後要回傳的Function
 var ordPath; //當前點選選單的tag，用來抓出設備路徑，例如:旅館棟->H，消防偵煙器->F3
-
+window.tolSubList = [];
 function subscriptionDevices() {
     // 用BQL的方式去訂閱
     this.setSubscribeDevicesByBql = function (tempOrdPath) {
@@ -173,7 +173,7 @@ function BajaSubscribeDevicesByBql() {
                                     sub.subscribe({
                                         comps: component,
                                     });
-
+                                    tolSubList.push(sub);
                                     subFinish = new Date(Date.now());
                                     $("#sub-end").html(subFinish.toISOString());
                                     $("#sub-time").html((subFinish.getTime() - subStart.getTime()) / 1000 + "sec");

From b871f5063eb6f11b60a9ab99168cc2c987e8825f Mon Sep 17 00:00:00 2001
From: dev01 <dev01@yourteam.tw>
Date: Mon, 28 Nov 2022 12:38:19 +0800
Subject: [PATCH 2/2] =?UTF-8?q?[Frontend][=E7=B3=BB=E7=B5=B1=E7=9B=A3?=
 =?UTF-8?q?=E6=8E=A7]=20=E9=9B=BB=E6=A2=AF=20class=20=E5=BB=BA=E7=BD=AE=20?=
 =?UTF-8?q?|=20=E5=88=87=E6=8F=9B2D/3D=E7=B4=90=E5=BB=BA=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Frontend/_sysElevator.html                    | 128 ++++++++----------
 Frontend/index.html                           |   4 +-
 Frontend/js/site.js                           | 100 ++++++++++++++
 Frontend/js/style.js                          |  13 ++
 .../yourteam/plugins/yt-tooltip/yt-tooltip.js |   6 +-
 5 files changed, 175 insertions(+), 76 deletions(-)

diff --git a/Frontend/_sysElevator.html b/Frontend/_sysElevator.html
index 214b253..5490cad 100644
--- a/Frontend/_sysElevator.html
+++ b/Frontend/_sysElevator.html
@@ -18,6 +18,13 @@
     elevator .elevator-body, elevator .elevator-header {
         padding: 0.7rem;
     }
+
+    .elevator-item {
+        position: absolute;
+        width: 43px;
+        height: 47px;
+        border: 4px solid orange;
+    }
 </style>
 
 <div class="d-flex">
@@ -27,14 +34,21 @@
         <div style="position:relative ">
             <div id="elevatorBlock" class="elevator">
                 <div class="elevator-header">
-
+                    <div class="row m-0 align-items-center p-2 gap-3 btn-group btn-group-toggle">
+                        <button class="btn btn-secondary btn-sm active" data-tabname="floShowType" data-target="#2dDiv">2D
+                        </button>
+                        <button class="btn btn-secondary btn-sm" data-tabname="floShowType" data-target="#3dDiv">3D
+                        </button>
+                    </div>
                 </div>
-                <div class="elevator-body d-flex align-items-center justify-content-center h-100 yt-table-container">
-                    <div id="floorTable_wrapper" class="elevator-build-container">
+                <div class="elevator-body d-flex align-items-center justify-content-center yt-table-container">
+                    <div id="2dDiv" data-tabname="floShowType" data-tabrole="child">
                         <table id="floorTable" class="elevator-build m-auto">
                         </table>
                     </div>
+                    <div id="3dDiv" data-tabname="floShowType" data-tabrole="child">
 
+                    </div>
                 </div>
             </div>
             <!--<div>
@@ -139,7 +153,7 @@
                 </label>
             </div>
             <div>
-                <label id="groConFailText"  class="form-check-label h4" for="flexRadioDefault1">
+                <label id="groConFailText" class="form-check-label h4" for="flexRadioDefault1">
                     未動作
                 </label>
             </div>
@@ -154,7 +168,7 @@
                 </label>
             </div>
             <div>
-                <label id="emerPowerText"  class="form-check-label h4" for="flexRadioDefault1">
+                <label id="emerPowerText" class="form-check-label h4" for="flexRadioDefault1">
                     未動作
                 </label>
             </div>
@@ -861,8 +875,6 @@
 </div>
 
 <script>
-
-    var floors = ["B2F", "B1F", "1F", "2F", "3F", "4F", "5F", "6F"];
     var eleManTable = null;
     var allDevList = [];
     var subSeviceData = [];
@@ -879,7 +891,7 @@
     var zoomToggle = 3;
     $(function () {
         initChart();
-        setBuildFloor(floors.length, 3);
+        setBuildFloor();
         setCards();
         subDeviceSetStatus();
         setEleManTable();
@@ -944,13 +956,13 @@
             //地震管制
             actLightByPoi("EER", "#earQuaCon");
 
-            
+
             //將訂閱值塞入 subSeviceData
             if (subSeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) {
                 let obj = {};
                 obj.device_number = matchDevice.device_number;
                 subSeviceData.push(obj)
-            } 
+            }
 
             let subData = subSeviceData.filter(x => x.device_number == matchDevice.device_number)[0];
 
@@ -996,13 +1008,13 @@
                 result.push(main);
             })
         })
-        console.log("redraw",result)
+        console.log("redraw", result)
         return result;
     }
 
     // Card - 設置列表中訂閱內容
     function subDeviceSetTable(devNum) {
-        
+
         let subData = subSeviceData.filter(x => x.device_number == devNum)[0]
         let matchDevice = allDevList.filter(x => x.device_number == devNum)[0];
         if (!subData) {
@@ -1017,7 +1029,7 @@
         let masterTag = devNum?.split("_")[5];
 
         let notSerFloors = Object.keys(subData).filter(x => x.startsWith("SP_FLS_") && subData[x] == "trueText").map(x => x?.split("SP_FLS_")[1]);
-        
+
         //現在樓層
         if (subData["CP"]) {
             $(`#imdStaTable_${devNum} [name=curFloor]`).text(subData["CP"] + "F");
@@ -1091,52 +1103,24 @@
 
     }
 
+    
+
     //左側 2D 樓層 Table
-    function setBuildFloor(floorCnt = 10, eleCnt = 3) {
-        let tbody = creEle("tbody");
-        //樓層從小到大
-        let rfloors = floors.reverse();
-        let eleCircle = creDiv(["elevator-circle"]);
-        //樓層表格建置
-        for (let f = 1; f <= floorCnt; f++) {
-            let tr = creEle("tr");
-            for (let e = 1; e <= eleCnt + 2; e++) {
-                let td = creEle("td");
-                if (e == 1) {
-                    td.addClass("t-black")
-                    td.text(rfloors[f - 1]);
-                } else if (e == eleCnt + 2) {
-                }
-                else {
-                    let div = creDiv(["d-flex", "justify-content-center", "align-items-end", "h-100"]);
-                    div.append(`<i class="fas fa-door-open fs-1-05"></i>`)
-                    td.append(div)
-                }
-                tr.append(td);
-            }
-            tbody.append(tr);
-            $("#floorTable_wrapper").append(eleCircle)
+    function setBuildFloor() {
+        let options = {
+            floors: [
+                { name: "B2F", sort: 0 },
+                { name: "B1F", sort: 1 },
+                { name: "1F", sort: 2 },
+                { name: "2F", sort: 3 },
+                { name: "3F", sort: 4 },
+                { name: "4F", sort: 5 },
+                { name: "5F", sort: 6 },
+                { name: "6F", sort: 7 },
+            ],
         }
 
-        $("#floorTable").html(tbody);
-
-
-        $("#floorTable tbody tr").each((index, tr) => {
-
-            $(tr).find("td:eq(0)").css("border-left", "0");
-            $(tr).find("td:eq(-1)").css("border-right", "0");
-
-            if (index == 0) {
-                $(tr).find("td").each((index, td) => {
-                    $(td).css("border-top", "0");
-                })
-            } else if (index == $("#floorTable tbody tr").length - 1) {
-                $(tr).find("td").each((index, td) => {
-                    $(td).css("border-bottom", "0");
-                })
-            }
-        })
-
+        let eleObj = new ElevatorHandler("#floorTable", options);
     }
 
     function drawStateTabBlo(devNum) {
@@ -1164,7 +1148,7 @@
         ]
 
         let data = [{
-            row: 0, col: 2, style:"vertical-align:middle",
+            row: 0, col: 2, style: "vertical-align:middle",
             data: `<div class="flex-column">
                         <i name="upFloArrow" class="fas fa-caret-up fa-3x ml-auto" style="--flash-color-1:#6fe560;--flash-color-2:#fff;"></i>
                         <h4 name="curFloor" class="d-flex justify-content-center mb-0"></h4>
@@ -1238,7 +1222,7 @@
     }
 
     function reloadEleManTable(datas) {
-        
+
         let tabCols = eleManTable.context[0].aoColumns.map(x => x.data);
         $.each(datas, (idx, data) => {
             $.each(tabCols, (idx2, value) => {
@@ -1247,14 +1231,14 @@
                 }
             })
         })
-        
+
         eleManTable.clear().rows.add(datas).draw();
     }
 
     function setEleManTable() {
         let tag = "#eleManTable";
         let datas = [];
-        
+
         let column_defs = [
             { "targets": [0], "width": "11%", "sortable": true },
             { "targets": [1], "width": "11%", "sortable": true },
@@ -1311,12 +1295,12 @@
             {
                 "title": "動作",
                 "data": null,
-                "className":"text-center",
+                "className": "text-center",
                 "render": function (data, type, row) {
                     let btn = '';
                     if (row._rowType == "master") {
                         btn = creBtn("編輯", "eleManMasEdit" + row.devName, null, ["btn", "btn-info"]);
-                    } else if (row._rowType == "device"){
+                    } else if (row._rowType == "device") {
                         btn = creBtn("編輯", "eleManDevEdit" + row.devNum, null, ["btn", "btn-info"]);
                     }
                     btn.append(`<i class="fal fa-pen pl-1"></i>`);
@@ -1342,7 +1326,7 @@
         function bajaValToBool(boolText) {
             return boolText == "trueText";
         }
-       
+
         $("#eleManModal #detDevDiv [name=devName]").text(matchDevice.full_name);
         $("#eleManModal #detDevDiv [name=status]").text(subData["ST"]);
         $("#eleManModal #detDevDiv [name=curFloor]").text(subData["CP"] + "F");
@@ -1371,9 +1355,9 @@
 
     // 電梯管理 Modal - 不服務樓層 設定列表
     function setNotSerFloTable(floors) {
-        let tbody =$("<tbody></tbody>");
+        let tbody = $("<tbody></tbody>");
         let rows = [];
-           
+
         $.each(floors, (idx, floor) => {
             rows.push({ id: floor, text: floor });
         })
@@ -1420,17 +1404,17 @@
         let scheBtn = ["preMeaSche", "stopSche", "onlyOpeSche", "vipSche", "retOpeSche"];
         $("#bajaSche").html("");
         // 電梯管理 Modal 切換到 detail 頁面
-        modalTogDiv("#eleManModal", "#tabDiv", "#detDevDiv","next", function () {
+        modalTogDiv("#eleManModal", "#tabDiv", "#detDevDiv", "next", function () {
             subDeviceSetEleManDet(devNum);
             $.each(scheBtn, (idx, scheSelector) => {
-                onEvent("click", `#${scheSelector}`, function() {
+                onEvent("click", `#${scheSelector}`, function () {
                     let devNumPath = devNum.split("_").join("/");
                     let point = $(this).data("point");
-                    let ifHtml = `<iframe src="http://localhost:8080/ord?station:%7Cslot:${devNumPath}/Sch_${point}|view:?fullScreen=true" width="100%" height="100%" style="height:30rem"></iframe>`
+                    let ifHtml = `<iframe src="/ord?station:%7Cslot:${devNumPath}/Sch_${point}|view:?fullScreen=true" width="100%" height="100%" style="height:30rem"></iframe>`
                     $("#bajaSche").html(ifHtml);
                 })
             })
-            
+
         })
     })
 
@@ -1443,7 +1427,7 @@
         modalTogDiv("#eleManModal", "#tabDiv", "#detMasDiv", "next", function () {
             subDeviceSetEleManNotSerFloor(master);
             let devNumPath = subData.device_number?.split("_").join("/");
-            let ifHtml = `<iframe src="http://localhost:8080/ord?station:%7Cslot:${devNumPath}/Sch_FLS|view:?fullScreen=true" width="100%" height="100%" style="height:30rem"></iframe>`
+            let ifHtml = `<iframe src="/ord?station:%7Cslot:${devNumPath}/Sch_FLS|view:?fullScreen=true" width="100%" height="100%" style="height:30rem"></iframe>`
             $("#bajaMasSche").html(ifHtml);
 
         })
@@ -1452,8 +1436,8 @@
     // 切換 modal 內 div 頁面
     function modalTogDiv(modal, div1, div2, type = "next", callback = null) {
         $(modal).find(div1).parent("div").css("overflow", "hidden");
-        $(modal).find(div1).css({ "position":"relative"});
-        $(modal).find(div2).css({ "position": "relative"});
+        $(modal).find(div1).css({ "position": "relative" });
+        $(modal).find(div2).css({ "position": "relative" });
         let aniDiv1Obj = {}, aniDiv2Obj = {};
         if (type == "next") {
             aniDiv1Obj.left = "-200%";
diff --git a/Frontend/index.html b/Frontend/index.html
index ba0b61a..98a1ea3 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -2701,8 +2701,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 }
                 $.each(tolSubList, (idx, sub) => {
                     console.log("sub",sub,idx)
-                    //sub.unsubscribeAll();
-                    //sub.detach();
+                    sub.unsubscribeAll();
+                    sub.detach();
                 })
                 $("#app").load(`_${page}.html`, loadCallback);
             })
diff --git a/Frontend/js/site.js b/Frontend/js/site.js
index c192b99..bcf87d2 100644
--- a/Frontend/js/site.js
+++ b/Frontend/js/site.js
@@ -106,4 +106,104 @@ function creSelect(id = null, cls = [], name = null, data = {}, attr = {}, text
 function creOption(text = null, value = null, data = {}, attr = {}, cls = [], name = null, id = null) {
     attr = value != null ? attr.value = value : attr;
     return creEle("option", text, id, name, cls, data, attr);
+}
+
+class ElevatorHandler {
+    constructor(ele, option = {}) {
+        this.ele = ele;
+        this.eleId = "";
+        this.eleWra = $("<div></div>");
+        this.speed = 0;
+        this.monStatus = 0;  // 0=no 1=up 2=down
+        this.floorHeight = typeof option.fHeight == "undefined" ? 50 : option.fHeight;
+        this.floorWidth = typeof option.fWidth == "undefined" ? 45 : option.fWidth;
+        this.floors = typeof option.floors == "undefined" ? [{}] : option.floors;
+        this.eleCnt = typeof option.eleCnt == "undefined" ? 3 : option.eleCnt;
+        this.init();
+    }
+
+    init = function () {
+        this.setTabWra();
+        this.setTabFloor();
+    }
+
+    // 設置 wrapper
+    setTabWra = function () {
+        let id = $(this.ele).prop("id");
+        this.eleId = id;
+        if ($(this.ele).parent(".elevator-table-wrapper").length != 0) {
+            $(this.ele).unwrap(".elevator-table-wrapper");
+        }
+        let wrapper = creDiv(["elevator-table-wrapper"], null, `${id}_wrapper`);
+        $(this.ele).wrap(wrapper);
+        this.eleWra = wrapper;
+    }
+
+    // 設置 table 樓層
+    setTabFloor = function () {
+        let _w = this.floorWidth, _h = this.floorHeight;
+        let thead = creEle("thead"), tbody = creEle("tbody");
+        let _floors = this.floors, _ele = this.ele, _eleCnt = this.eleCnt;
+        //樓層從小到大
+        _floors = _floors.oSort("sort").reverse().map(x => x.name);
+
+        let theadTr = creEle("tr");
+        for (let e = 1; e <= _eleCnt + 2; e++) {
+            let th = creEle("th");
+            th.css({ "width": `${_w}px`, "height": `${_h}px` });
+            if (e != 1 && e != _eleCnt + 2) {
+                // 電梯方框
+                let span = creEle("span", null, "elevator-item-" + (e - 1), null, ["elevator-item"]);
+                span.css({ "width": `${_w - 3}px`, "height": `${_h - 3}px`, "top": `1.5px`})
+                th.append(span);
+            }
+            theadTr.append(th);
+        }
+        thead.css("position", "absolute");
+        thead.append(theadTr);
+
+        //樓層表格建置 tbody
+        for (let f = 1; f <= _floors.length; f++) {
+            let tr = creEle("tr");
+            for (let e = 1; e <= _eleCnt + 2; e++) {
+                let td = creEle("td");
+                td.css({ "width": `${_w}px`, "height": `${_h}px` });
+                if (e == 1) {
+                    td.addClass("t-black")
+                    td.text(_floors[f - 1]);
+                } else if (e == _eleCnt + 2) {
+                }
+                else {
+                    let div = creDiv(["d-flex", "justify-content-center", "align-items-end", "h-100"]);
+                    div.append(`<i class="fas fa-door-open fs-1-05"></i>`)
+                    td.append(div)
+                }
+                tr.append(td);
+            }
+            tbody.append(tr);
+        }
+
+        $(_ele).append(thead);
+        $(_ele).append(tbody);
+
+        //表格外圍無框線
+        $(_ele).find("tbody tr").each((index, tr) => {
+
+            $(tr).find("td:eq(0)").css("border-left", "0");
+            $(tr).find("td:eq(-1)").css("border-right", "0");
+
+            if (index == 0) {
+                $(tr).find("td").each((index, td) => {
+                    $(td).css("border-top", "0");
+                })
+            } else if (index == $("#floorTable tbody tr").length - 1) {
+                $(tr).find("td").each((index, td) => {
+                    $(td).css("border-bottom", "0");
+                })
+            }
+        })
+
+    }
+
+
 }
\ No newline at end of file
diff --git a/Frontend/js/style.js b/Frontend/js/style.js
index f784a36..013724d 100644
--- a/Frontend/js/style.js
+++ b/Frontend/js/style.js
@@ -51,6 +51,19 @@ Array.prototype.DistinctBy = function (...otherCol) {
 
     return result;
 }
+Array.prototype.nSort = function () {
+    function compareNumbers(a, b) {
+        return a - b;
+    }
+    return this.sort(compareNumbers);
+}
+
+Array.prototype.oSort = function (key) {
+    function compareNumbers(a, b) {
+        return a[key] - b[key];
+    }
+    return this.sort(compareNumbers);
+}
 BigInt.prototype.toJSON = function () { return this.toString() }
 
 $.fn.classList = function () { return this[0].className.split(/\s+/); };
diff --git a/Frontend/js/yourteam/plugins/yt-tooltip/yt-tooltip.js b/Frontend/js/yourteam/plugins/yt-tooltip/yt-tooltip.js
index 167f11e..a5d153c 100644
--- a/Frontend/js/yourteam/plugins/yt-tooltip/yt-tooltip.js
+++ b/Frontend/js/yourteam/plugins/yt-tooltip/yt-tooltip.js
@@ -71,7 +71,7 @@ $.fn.YTTooltip = function (option) {
                 obj.tooltipDiv = clone;
                 //顯示 tooltip
                 $(clone).css({ "display": display, "position": "absolute" });
-                obj.onShow ? obj.onShow(clone,obj.ele,obj) : "";
+                
                 //tooltip 高寬
                 let toolWidth = $(clone)[0].offsetWidth;
                 let toolHeight = $(clone)[0].offsetHeight;
@@ -95,7 +95,9 @@ $.fn.YTTooltip = function (option) {
                 } else if (obj.direction == "top" || obj.direction == "bottom"){
                     $(clone).css({ left: offset.left, top: top});
                 }
-
+                setTimeout(function () { 
+                    obj.onShow ? obj.onShow(clone, obj.ele, obj) : "";
+                }, 10)
                 event();
             } else {
                 obj.hideTooltipEvent(tooId);