From 05cee2fd8780626c6d8adf68da840d48dbfb2a68 Mon Sep 17 00:00:00 2001
From: Celeste <aafree2014@gmail.com>
Date: Mon, 13 Feb 2023 09:25:47 +0800
Subject: [PATCH 1/3] =?UTF-8?q?[=E5=89=8D=E5=8F=B0]=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E7=92=B0=E5=A2=83=E6=84=9F=E6=B8=AC=E5=99=A8=E9=A0=81=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Frontend/_sysSensor.html           | 555 +++++++++++++++++++++++++++++
 Frontend/index.html                | 128 +++----
 Frontend/lib/skins/skin-master.css |   5 +-
 3 files changed, 624 insertions(+), 64 deletions(-)
 create mode 100644 Frontend/_sysSensor.html

diff --git a/Frontend/_sysSensor.html b/Frontend/_sysSensor.html
new file mode 100644
index 0000000..4954ac4
--- /dev/null
+++ b/Frontend/_sysSensor.html
@@ -0,0 +1,555 @@
+<style>
+</style>
+
+<div class="row">
+    <div id="leftDiv" class="col-sm-12 col-xl-6">
+
+    </div>
+    <div id="rightDiv" class="col-sm-12 col-xl-6">
+
+    </div>
+</div>
+
+<!-- Modal center Add -->
+<div class="modal fade" id="lightSchModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+    <div class="modal-dialog modal-dialog-centered" role="document" style="min-width:60%">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">
+                    燈控排程
+                </h4>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true"><i class="fal fa-times"></i></span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <!--<table id="lightSchTable" class="table table-bordered table-striped text-center m-0 w-100">
+                </table>-->
+                <div id="lightSchBlock" style="height:60vh"></div>
+
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
+                <button type="button" id="lightSchSavBtn" class="btn btn-primary">儲存</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    var allDevList = [];  //全設備清單
+    var subDeviceData = [];
+    var heatMap = null;
+    var buildMenuData = {};
+    var forgeInvType = null;
+    var forgeInvTypeDef = null;
+
+    $(function () {
+        getBuildMenu((arr, data) => {
+            buildMenuData = data;
+            if (arr.indexOf(4) != -1) {
+                getFloDevList(arr[0] == 4 ? "left" :"right");
+                setLightColor();
+            }
+            if (arr.indexOf(3) != -1) {
+                getHotspotPoint(() => {
+                    show3DModel(data.urn_3D);
+                    getInviForge();
+                });
+            }
+        });
+    })
+
+    // 依據 drawing type 決定呈現畫面
+    function getHtmlByType(type = 0, data = {}) {
+        let strHtml = ``;
+        switch (type) {
+            case 2:
+                strHtml = `<div style="height:85vh">
+                                <iframe src="${data.system_url}" width="100%" height="100%"></iframe>
+                           </div>`;
+                break;
+            case 4:
+                strHtml = `<div class="d-flex mb-4" style="gap:15px">
+                                ${setTopLight()}
+                            </div>
+
+                            <div class="col-12 p-0" id="floDevList">
+
+                            </div>`;
+                break;
+            case 3:
+                strHtml = `<div class="d-flex mb-4" style="gap:15px">
+                                ${setTopHeatBar()}
+                            </div>
+                            <div name="forgeViewer" style="height:85vh;"></div>`;
+                break;
+        }
+
+        return strHtml;
+    }
+    //baja 訂閱設備
+    function subDevice() {
+
+        let myBaja = new subscriptionDevices();
+        var ordPath = {
+            "area_tag": pageAct.AreaTag,
+            "building_tag": pageAct.buiTag,
+            "system_tag": pageAct.sysMainTag,
+            "name_tag": pageAct.sysSubTag,
+        }
+        myBaja.setSubscribeDevicesByBql(ordPath);
+        myBaja.setSubscribeDevicesCallBack(function (data) {
+
+            let matchDevice = allDevList.filter(x => x.device_number == data.device_number_full)[0];
+            if (!matchDevice) {
+                return false;
+            }
+
+            //將訂閱值塞入 subDeviceData
+            if (subDeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) {
+                let obj = {};
+                obj.device_number = matchDevice.device_number;
+                obj.dbid = matchDevice.forge_dbid;
+                subDeviceData.push(obj)
+            }
+
+            let subData = subDeviceData.filter(x => x.device_number == matchDevice.device_number)[0];
+
+            if (subData) {
+                subData[data.point_name] = data.value;
+            }
+
+            let norDevPoiName = matchDevice.device_normal_point_name;
+            let cloDevPoiName = matchDevice.device_close_point_name;
+            let errDevPoiName = matchDevice.device_error_point_name;
+
+            if (data.point_name == "Temp") {
+                heatMap?.changeTemp(data.device_number_full, !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0);
+                let devIdx = allDevList.findIndex(x => x.device_number == data.device_number_full);
+                allDevList[devIdx]._temp = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0;
+            }
+
+            if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) {
+                //顯示正常燈號
+                $(`#${matchDevice.device_number}_status`).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}_status`).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}_status`).attr("data-light-type", "error").data("light-type", "error");
+            }
+
+            setLightColor();
+            setForgeHotSpotColor(matchDevice);
+            lightDevForgeSpotLig(matchDevice)
+            // 從設備訂閱更新每個設備卡片即時點位
+            setDevItemPoiValBySub(data);
+        });
+
+        myBaja.setSubscribeDeviceEndCallBack(function (data) {
+          endPageLoading();
+            if (data.findIndex(x => x.point_name == "Temp") != -1) {
+                // 顯示溫度條
+                showHeat("[name=forgeHeatBar]");
+            }
+        });
+
+    }
+
+    function lightDevForgeSpotLig(devObj) {
+
+
+    }
+
+    // 從設備訂閱更新每個設備卡片即時點位
+    function setDevItemPoiValBySub(data) {
+
+        let pointSpan = $(`.card.device-wrap[data-number=${data.device_number_full}] span[name=devItemPoiVal]`);
+        if (pointSpan && pointSpan.data("point") == data.point_name) {
+            console.log(data)
+            pointSpan.text(data.value);
+        }
+    }
+
+    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).parents(".card.device-wrap").addClass("light-flash");
+            } else {
+                $(ele).parents(".card.device-wrap").removeClass("light-flash");
+            }
+        })
+    }
+
+    // 設置昇位圖上方 燈號
+    function setTopLight() {
+        let sysSubObj = pageAct.sysSubObj;
+        let strHtml = ``;
+        if (sysSubObj.device_normal_point_name != null && sysSubObj.device_normal_point_value != null) {
+            strHtml += ` <div class="row m-0 align-items-center">
+                            <span id="sysNorLight" class="circle-light mr-2 " data-light-type="normal"></span>
+                            <label class="mb-0">${sysSubObj.device_normal_text}</label>
+                        </div>`;
+        }
+        if (sysSubObj.device_close_point_name != null && sysSubObj.device_close_point_value != null) {
+            strHtml += ` <div class="row m-0 align-items-center">
+                                    <span id="sysCloLight" class="circle-light mr-2" data-light-type="close"></span>
+                                    <label class="mb-0">${sysSubObj.device_close_text}</label>
+                            </div>`;
+        }
+        if (sysSubObj.device_error_point_name != null && sysSubObj.device_error_point_value != null) {
+            strHtml += ` <div class="row m-0 align-items-center">
+                            <span id="sysErrLight" class="circle-light mr-2" data-light-type="error"></span>
+                            <label class="mb-0">${sysSubObj.device_error_text}</label>
+                        </div>`;
+        }
+
+        return strHtml;
+    }
+
+    function setLightSchBlcok(obj) {
+        let devNum = $(obj).parents(".device-wrap").data("number");
+        let devPath = devNum.replaceAll("_", "/");
+        let iframe = `<iframe src="/ord?station:%7Cslot:/${devPath}/Sch|view:?fullScreen=true" style="min-height:100px;width:100%;height:100%"></iframe>`
+        $("#lightSchBlock").html(iframe);
+    }
+
+    // forge 3D 異常點位變紅色
+    function setForgeHotSpotColor(device) {
+        let subData = subDeviceData.filter(x => x.device_number == device.device_number)[0]
+        if (subData && subData[device.device_error_point_name] == device.device_error_point_value && !isNaN(parseInt(device.spriteDbid))) {
+            changeColorForHotspot(parseInt(device.spriteDbid), "error");
+        }
+    }
+
+    // 取得昇位圖點位 (deviceItem)
+    function getRiserPoiObj() {
+        let tarDevItem = pageAct.devItems?.filter(x => x.is_show_riserDiagram == 1);
+        if (tarDevItem && tarDevItem[0]) {
+            return tarDevItem[0];
+        }
+        return null;
+    }
+
+    // 取得設備列表 並繪製卡片
+    function getFloDevList(position = "left") {
+        let url = baseApiUrl + "/api/Device/GetDeviceList";
+        let sendData = {
+            sub_system_tag: pageAct.sysSubTag,
+            building_tag: pageAct.buiTag,
+            floor_tag: pageAct.floTag,
+        };
+        objSendData.Data = sendData;
+        ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+            if (!res || res.code != "0000" || !res.data) {
+
+            } else {
+                let strHtml = ``;
+                $.each(res.data, (index, floObj) => {
+                    strHtml += `<div class='d-flex justify-content-start mb-5 ' style="">`
+                    strHtml += `<button id="floItemBtn${floObj.full_name}" type="button" class="btn btn-primary waves-effect waves-themed mr-5 mt-1 align-self-start" >${floObj.full_name}</button>`
+                    strHtml += `<div class="col p-0 d-grid grid-gap-5 grid-temp-col-c" style="--c-grid-temp-col:repeat(auto-fill,minmax(250px,1fr))">`
+                    $.each(floObj.device_list, (index2, devObj) => {
+                        allDevList.push(devObj);
+                        let devItem = getRiserPoiObj();
+                        strHtml += `<div class="card m-1 border device-wrap" data-number="${devObj.device_number}" data-position="${position}">
+                                        <div class="card-body p-2">
+                                            <div class="d-flex mb-2">
+                                                <div  class="mr-5 cur-poi">
+                                                    <span class="d-inline-block mr-3">
+                                                        <img src="${baseImgUrl + varPathDevIcon + devObj.device_image}" class="profile-image rounded-circle" onerror="defDev(this)" alt="...">
+                                                    </span>
+                                                    <a name="devItemName" data-number="${devObj.device_number}" href="javascript:;">${devObj.full_name}</a>
+                                                </div>
+                                            </div>
+                                        <div class="d-flex mb-0 mt-2 align-items-center">
+                                                <span id="${devObj.device_number}_status" class="circle-light"></span>
+                                                <span class="${devItem ? "" : "d-none"} ml-2">${devItem?.full_name}：<span name="devItemPoiVal" data-point="${devItem?.points}"></span>${devItem?.unit}</span>
+                                                <a href="javascript:;" name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" data-name="${devObj.full_name}" class=" ml-2 mb-0 ">詳細資料</a>
+                                            </div>
+                                        </div>
+                                    </div>`;
+                    })
+                    strHtml += "</div></div>";
+                })
+                // Niagara 產生 file 開頭字串問題
+                strHtml = strHtml.replaceAll(`src="/file/`, `src="`);
+
+                if (!res.data || res.data.length == 0) {
+                    endPageLoading();
+                } else {
+                    // 訂閱 baja 設備
+                    subDevice();
+                }
+
+                // 繪製 html
+                $("#floDevList").append(strHtml);
+
+                // 存入 device 基本資料至元素 data 屬性
+                $("#floDevList a[name=devItem]").each((idx, ele) => {
+                    if (allDevList.findIndex(x => x.device_number == $(ele).data("number")) != -1) {
+                        $(ele).data("devobj", allDevList.filter(x => x.device_number == $(ele).data("number"))[0]);
+                    }
+                })
+
+                // 初始化 pop 視窗
+                initPopover();
+                // 卡片設備名稱點擊事件
+                devItemNameEvent();
+            }
+        }, null, "POST").send();
+    }
+
+    function getBuildMenu(callback = null) {
+        let url = baseApiUrl + "/api/Device/GetBuildMenu";
+        let sendData = {
+            main_system_tag: pageAct.sysMainTag,
+            sub_system_tag: pageAct.sysSubTag,
+            building_tag: pageAct.buiTag,
+        };
+        objSendData.Data = sendData;
+        ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+            if (!res || res.code != "0000" || !res.data) {
+
+            } else {
+                let leftData = {}, rightData = {};
+
+                for (var key in res.data) {
+                    if (key.startsWith("left")) {
+                        leftData[key.split("left_")[1]] = res.data[key];
+                    } else if (key.startsWith("right")) {
+                        rightData[key.split("right_")[1]] = res.data[key];
+                    }
+                }
+
+                if (res.data.left_drawing != null) {
+                    $("#leftDiv").html(getHtmlByType(res.data.left_drawing, leftData));
+                } else {
+                    $("#leftDiv").html(getHtmlByType(0, leftData));
+                }
+                if (res.data.right_drawing != null) {
+                    $("#rightDiv").html(getHtmlByType(res.data.right_drawing), rightData);
+                } else {
+                    $("#rightDiv").html(getHtmlByType(0, rightData));
+                }
+
+                callback ? callback([res.data.left_drawing, res.data.right_drawing], res.data) : "";
+            }
+        }, null, "POST").send();
+    }
+
+    // Card 即時狀態
+    function drawStateTabBlo(devNum) {
+        let devPath = devNum.replaceAll("_", "/");
+        let position = $(`.card.device-wrap[data-number=${devNum}]`).data("position");
+        let width = buildMenuData[position + "_icon_click_url_width"] ? buildMenuData[position + "_icon_click_url_width"] + "px" : "100%";
+        let height = buildMenuData[position + "_icon_click_url_height"] ? buildMenuData[position + "_icon_click_url_height"] + "px" : "100%";
+        let strHtml = `<div style="height:100%;width:100%">
+                            <iframe src="/ord?station:%7Cslot:/${devPath}|view:?fullScreen=true" style="width:${width};height:${height};min-height:100px;"></iframe>
+                       </div>`
+        return strHtml;
+    }
+
+    function iframeResize(obj) {
+        obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
+    }
+
+    function show3DModel(urn) {
+        $(loadEle).Loading("start");
+        launchViewerForHotspot(urn, (viewer, nodeIds) => {
+            addHotPoint(viewer)
+            let devDbIds = allDevList.map(x => x.forge_dbid);
+
+                const devices = allDevList.forEach((device) => {
+                    const sensorObj = new Forge3DSensor({
+                        viewer: viewer,
+                        ordPath: {
+                            "area_tag": pageAct.AreaTag,
+                            "building_tag": pageAct.buiTag,
+                        },
+                        curDevice: {
+                            roomDbId: !isNaN(parseInt(device.room_dbid)) ? parseInt(device.room_dbid) : -1,
+                            id: device.device_number,
+                            position: isJSON(device.device_coordinate_3d) ? JSON.parse(device.device_coordinate_3d) : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
+                            temp: 25,
+                            forge_dbid: parseInt(device.forge_dbid)
+                        }
+                    });
+                })
+
+            // 從資料庫設定不可視模型的類型，若沒有取道該小類不可視類型，則套用資料庫設定預設類型
+            if (forgeInvType) {
+                setInviForge(forgeInvType, devDbIds);
+            } else {
+                setInviForge(forgeInvTypeDef, devDbIds);
+            }
+
+            $(loadEle).Loading("close");
+
+
+            let elevOption = {
+                selector: "[name=forgeViewer]",
+                viewer: viewer,
+                ordPath: {
+                    "area_tag": pageAct.AreaTag,
+                    "building_tag": pageAct.buiTag,
+                },
+            }
+
+            // 電梯移動訂閱程序載入
+            let forge3DElev = new Forge3DElevFull(elevOption);
+            forge3DElev.bajaEndCallback = function () {
+                endPageLoading();
+            }
+            forge3DElev.init();
+
+            if (subDeviceData.length != 0) {
+                let stSubArr = subDeviceData.map(x => Object.keys(x).filter(y => y == "ST").map(y => x));
+
+                for (let sub of stSubArr) {
+                    let matchDevice = allDevList.filter(x => x.device_number == sub[0]?.device_number)[0];
+                    if (matchDevice) {
+                        setForgeHotSpotColor(matchDevice);
+                    }
+                }
+            }
+
+            getWaterNodeId();
+        }, () => {
+            $(loadEle).Loading("close");
+        }, "[name=forgeViewer]");
+    }
+
+
+    function getHotspotPoint(callback = null) {
+        let url = baseApiUrl + "/api/GetDevForCor";
+        let sendData = {
+            "device_area_tag": pageAct.AreaTag,
+            "device_building_tag": pageAct.buiTag,
+            "device_system_tag": pageAct.sysMainTag,
+            "device_name_tag": pageAct.sysSubTag,
+        };
+        objSendData.Data = sendData;
+        ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+            if (!res || res.code != "0000" || !res.data) {
+
+            } else {
+
+                let myDataList = [];
+                $.each(res.data, (idx, data) => {
+                    let item = {};
+                    item.position = {};
+                    if (data.device_coordinate_3d != null && isJSON(data.device_coordinate_3d)) {
+                        item.position = JSON.parse(data.device_coordinate_3d);
+                    }
+                    $.extend(item, data);
+                    myDataList.push(item);
+                })
+
+                setHotspotPoint(myDataList);
+                if (pageAct.sysMainTag == "LT") {
+                    setLightPoint(myDataList);
+                }
+                callback ? callback() : "";
+            }
+        }, null, "POST").send();
+
+    }
+
+    function setHotspotPoint(myDataList = []) {
+        console.log(myDataList)
+        getHopspotPoint(myDataList);
+    }
+
+    function setLightPoint(myDataList = []) {
+        console.log(myDataList)
+        getLightData(myDataList);
+    }
+
+    // 取得 不可視 3D 模型類型
+    function getInviForge() {
+        let url = baseApiUrl + "/api/Device/GetForgeInvType";
+
+        ytAjax = new YourTeam.Ajax(url, null, function (res) {
+            if (!res || res.code != "0000" || !res.data) {
+
+            } else {
+                let datas = res.data;
+
+                forgeInvType = datas.filter(x => x.sub_system_tag == pageAct.sysSubTag)[0]?.invisible_value;
+                forgeInvTypeDef = datas.filter(x => x.invisible_type == "default_value")[0]?.invisible_value;
+            }
+        }, null, "POST").send();
+    }
+
+    // 設置 模型隱藏或透明
+    function setInviForge(type, devDbIds) {
+        console.log("devDbIds",devDbIds)
+        if (type == "Hide") {
+            hideAllObjects(devDbIds);
+        } else if (type == "Opacity") {
+            setTransparentBuilding(0, devDbIds);
+        }
+    }
+
+    var parentEle = "";
+    onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj) {
+        forgeUnFocusAll();
+        let position = [obj.event.target.toolController.lastClickX, obj.event.target.toolController.lastClickY];
+        let devObj = obj.myData;
+        let name = allDevList.filter(x => x.device_guid == devObj.device_guid)[0]?.full_name;
+        devObj.full_name = name;
+        parentEle = crePosPopover(position, devObj);
+
+        $(parentEle).click();
+    })
+
+    onEvent("autodesk:clickOut:sprite", "[name=forgeViewer]", function (e) {
+        $(parentEle).YTTooltip("hide");
+    })
+
+    onEvent("autodesk:complete:sprite", "[name=forgeViewer]", function (e, obj) {
+
+        $("#floDevList a[name=devItem]").each((idx, ele) => {
+            let devNum = $(ele).data("number");
+            let dbid = obj.myDataList.filter(x => x.device_number == devNum)[0]?._dbId;
+            allDevList.forEach((dev, idx) => {
+                if (dev.device_number == devNum) {
+                    dev.spriteDbid = dbid;
+                    setForgeHotSpotColor(dev);
+                }
+            })
+            $(ele).data("dbId", dbid);
+
+        })
+    })
+
+    onEvent("yt:tooltip:show", "[name=devItem]", function (e, obj) {
+        forgeUnFocusAll();
+    })
+
+    function forgeUnFocusAll() {
+        $("#floDevList a[name=devItem]").each((idx, ele) => {
+            controlFocusHotspot($(ele).data("dbId"), false);
+        })
+    }
+</script>
\ No newline at end of file
diff --git a/Frontend/index.html b/Frontend/index.html
index 95db2ec..63327e8 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -198,7 +198,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                         <div class="dropdown">
                             <a href="javascript:;" id="toggleNoticeBtn" class="d-flex align-items-center justify-content-center ml-2">
                                 <!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
-            alt="Dr. Codex Lantern">-->
+                                alt="Dr. Codex Lantern">-->
                                 <!--you can also add username next to the avatar with the codes below:-->
                                 <div class="row m-0 justify-content-center userblock">
                                     <i id="noticeConIcon" class=" fs-1-5 w-100 text-center"></i>
@@ -206,13 +206,13 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                 </div>
 
                             </a>
-                            
+
                         </div>
                         <!--app user menu-->
                         <div class="dropdown">
                             <a href="#" data-toggle="dropdown" data-target="logoutList" class="d-flex align-items-center justify-content-center ml-2">
                                 <!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
-            alt="Dr. Codex Lantern">-->
+                                alt="Dr. Codex Lantern">-->
                                 <!--you can also add username next to the avatar with the codes below:-->
                                 <div class="row m-0 justify-content-center userblock">
                                     <i class="fas fa-user-circle fs-1-5 w-100 text-center"></i>
@@ -733,7 +733,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
     </script>
     <script src="js/n4js/bajatest.js"></script>
     <script src="js/n4js/electricmeterbaja.js"></script>
-      <script src="js/n4js/elevatorbaja.js"></script>
+    <script src="js/n4js/elevatorbaja.js"></script>
     <script src="js/bajascript/require.config.js"></script>
     <script src="js/FileSaver.js"></script>
 
@@ -870,7 +870,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     if (isJSON(sessionStorage.getItem("pageAct"))) {
                         lastPageAct = JSON.parse(sessionStorage.getItem("pageAct"));
                     }
-                    if ((lastPageAct.sysSubTag && lastPage == "systemMonitor") || lastPage == "sysElevator") {
+                    if ((lastPageAct.sysSubTag && lastPage == "systemMonitor") || lastPage == "sysElevator" || lastPage == "sysSensor") {
                         $(`#subSysBtn${lastPageAct.sysSubTag}`).click();
                         $("#sysMonTopBtn").YTTab("set");
                     } else {
@@ -946,7 +946,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     if (!page) {
                         return;
                     }
-                    if (page != "systemMonitor" && page != "sysElevator") {
+                    if (page != "systemMonitor" && page != "sysElevator" && page != "sysSenesor") {
                         $("#sysMonBtnList [name=topFunBtn]").removeClass("active");
                         pageAct.sysMainTag = null;
                         pageAct.sysSubTag = null;
@@ -960,11 +960,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                         sub.unsubscribeAll();
                         sub.detach();
                     })
-                    // 清空 baja 訂閱紀錄 
+                    // 清空 baja 訂閱紀錄
                     tolSubList = [];
                     // 清空 loading 狀態
                     endPageLoading();
-                    
+
                     $(loadEle).Loading("close");
                     $(".yt-alert").YTAlert().hide();
                     // 取得使用者資訊
@@ -1019,10 +1019,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 //onEvent("click", "button[id^=noticeChkBtn]", function () {
                 //    $(this).parents(".toast").YTNotice("hide");
                 //})
-                
+
                 onEvent("click", "button[id^=noticeChkBtn]", function () {  /**button[id^=bajaAckBtn] */
                     let uuid = $(this).data("uuid");
-                    let url = window.location.origin + "/obix/alarm/"+uuid+"/ack";
+                    let url = window.location.origin + "/obix/alarm/" + uuid + "/ack";
                     let myBaja = new MyBaja();
                     myBaja.setMyUserAccount((data) => {
                         let sendData = '<obj is="obix:AckAlarmIn"><str name="ackUser" val="obix" /></obj>';
@@ -1043,7 +1043,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                         if (typeof getAlarmSub != "undefined" && getAlarmSub) {
                             getAlarmSub(data);
                         }
-                       
+
                         alarmIconBlink();
 
                     })
@@ -1130,7 +1130,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             function drawErrRecTabBlo() {
                 let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
 
-                                                                        </table>`
+                                                                            </table>`
                 return strHtml;
             }
 
@@ -1138,7 +1138,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             function drawOpeRecTabBlo() {
                 let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
 
-                                                                        </table>`
+                                                                            </table>`
                 return strHtml;
             }
 
@@ -1155,35 +1155,35 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     let lightHtml = type == "light" ? `<button type="button" id="lightSch-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#lightSch"><i class="fas fa-calendar-alt"></i></button>` : "";
                     let option = {
                         html: `<div class="card m-1 border device-wrap" data-number="${devNum}">
-                                    <div class="card-header p-3">
+                                        <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 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>
+                                                ${lightHtml}
+                                                <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 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>
-                                            ${lightHtml}
-                                            <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" style="height:100%;width:100%">
-                                            ${drawStateTabBlo(devNum)}
-                                        </div>
-                                        <div id="info" data-tabname="cardTab" data-tabrole="child">
+                                        <div class="card-body p-2 tab-content">
+                                            <div id="state" class="show active" data-tabname="cardTab" data-tabrole="child" style="height:100%;width:100%">
+                                                ${drawStateTabBlo(devNum)}
+                                            </div>
+                                            <div id="info" data-tabname="cardTab" data-tabrole="child">
 
+                                            </div>
+                                            <div id="errRec" data-tabname="cardTab" data-tabrole="child">
+                                                ${drawErrRecTabBlo()}
+                                            </div>
+                                            <div id="opeRec" data-tabname="cardTab" data-tabrole="child">
+                                                ${drawOpeRecTabBlo()}
+                                            </div>
                                         </div>
-                                        <div id="errRec" data-tabname="cardTab" data-tabrole="child">
-                                            ${drawErrRecTabBlo()}
-                                        </div>
-                                        <div id="opeRec" data-tabname="cardTab" data-tabrole="child">
-                                            ${drawOpeRecTabBlo()}
-                                        </div>
-                                    </div>
-                                </div>`,
+                                    </div>`,
                         group: "device",
                         // 在 _sysElevator.html 及 _sysMonAll.html 會用到
                         onShow: function (tooltipEle, oriEle) {
@@ -1203,7 +1203,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             }
                             // 3D 視角 ZOOM IN 聚焦
                             /*
-                            if (devObj) { 
+                            if (devObj) {
                                 moveViewToDevice(devObj?.forge_dbid);
                             }
                             */
@@ -1567,35 +1567,35 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
                 } else {
                     let strHtml = `<div class="btn-group mx-4">
-                                                                    <a href="javascript:;" name="topFunBtn" data-page="dashboard" data-tabname="topFunBtn" class="text-center">
-                                                                        <i class="fal fa-home fa-2x"></i><br>首頁
-                                                                    </a>
-                                                                    <!--<div class="dropdown-menu">
-                                                                        <button class="dropdown-item" type="button">Action</button>
-                                                                        <button class="dropdown-item" type="button">Another action</button>
-                                                                        <button class="dropdown-item" type="button">Something else here</button>
-                                                                    </div>-->
-                                                                </div>`;
+                                                                        <a href="javascript:;" name="topFunBtn" data-page="dashboard" data-tabname="topFunBtn" class="text-center">
+                                                                            <i class="fal fa-home fa-2x"></i><br>首頁
+                                                                        </a>
+                                                                        <!--<div class="dropdown-menu">
+                                                                            <button class="dropdown-item" type="button">Action</button>
+                                                                            <button class="dropdown-item" type="button">Another action</button>
+                                                                            <button class="dropdown-item" type="button">Something else here</button>
+                                                                        </div>-->
+                                                                    </div>`;
 
                     $.each(res.data, function (i, v) {
                         if (v.authCode == 'PF1') {
                             strHtml += `<div class="btn-group mx-4" >
-                                                                        <a href="javascript:;" id="sysMonTopBtn" class="text-center" data-toggle="navbar" data-target="#sysMonNavbar" data-tabname="topFunBtn" aria-haspopup="true" aria-expanded="false">
-                                                                            <i class="fal fa-tv fa-2x"></i><br>${v.subName}
-                                                                        </a>
+                                                                            <a href="javascript:;" id="sysMonTopBtn" class="text-center" data-toggle="navbar" data-target="#sysMonNavbar" data-tabname="topFunBtn" aria-haspopup="true" aria-expanded="false">
+                                                                                <i class="fal fa-tv fa-2x"></i><br>${v.subName}
+                                                                            </a>
 
-                                                                    </div>`;
+                                                                        </div>`;
 
                             hasMonitor = true;
                         }
                         else {
                             let icon = v.authCode == 'PF2' ? 'fa-chart-pie' : v.authCode == 'PF3' ? 'fa-chart-area' : v.authCode == 'PF4' ? 'fa-chart-line' : v.authCode == 'PF5' ? 'fa-bell' : v.authCode == 'PF6' ? 'fa-server' : v.authCode == 'PF7' ? 'fa-image' : v.authCode == 'PF8' ? 'fa-user' : '';
                             strHtml += `<div class="btn-group mx-4">
-                                                                        <a href="javascript:;" name="topFunBtn" data-tabname="topFunBtn" class="dropdown-toggle no-arrow text-center"
-                                                                           data-page="${v.showView}">
-                                                                            <i class="fal ${icon} fa-2x"></i><br>${v.subName}
-                                                                        </a>
-                                                                    </div>`;
+                                                                            <a href="javascript:;" name="topFunBtn" data-tabname="topFunBtn" class="dropdown-toggle no-arrow text-center"
+                                                                               data-page="${v.showView}">
+                                                                                <i class="fal ${icon} fa-2x"></i><br>${v.subName}
+                                                                            </a>
+                                                                        </div>`;
                         }
 
                     });
@@ -1626,6 +1626,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             if (subSysObj.sub_system_tag == "EL") {
                                 page = "sysElevator";
                             }
+                            console.log(subSysObj.sub_system_tag)
+                            if (subSysObj.sub_system_tag == "M12") {
+                                page = "sysSensor";
+                            }
 
                             let li = creEle("li");
                             let a = creA(subSysObj.full_name, { "href": "javascript:;" }, [], `subSysBtn${subSysObj.sub_system_tag}`, { page: page, tabname: "systemMonitor" }, "topFunBtn");
@@ -1668,10 +1672,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
                 } else {
                     let datas = res.data;
-                    
+
 
                 }
-            }, null, "POST",true).send();
+            }, null, "POST", true).send();
         }
 
         function getAlarm() {
@@ -1696,7 +1700,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                         datas[idx].full_name = allDevices.filter(x => x.device_number == data.devicePath)[0]?.full_name;
 
                         let div1 = creDiv(["col-12"]);
-                        let button = creBtn("確認", "noticeChkBtn", null, ["btn btn-sm btn-secondary ml-auto col-4"], {uuid:data.uuid});
+                        let button = creBtn("確認", "noticeChkBtn", null, ["btn btn-sm btn-secondary ml-auto col-4"], { uuid: data.uuid });
                         let btnDiv = creDiv(["d-flex m-0 gap-5 mt-2"]);
                         btnDiv.append(button);
                         // 繪製 每行告警資訊
@@ -1732,7 +1736,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
         function getAllDevice() {
             let url = baseApiUrl + "/api/Device/GetAllDevice";
             let result = [];
-           
+
             ytAjax = new YourTeam.Ajax(url, null, function (res) {
                 if (!res || res.code != "0000" || !res.data) {
 
@@ -1783,7 +1787,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 })
                 localStorage.setItem("noticeStatus", "hide");
             }
-            
+
         }
     </script>
 
diff --git a/Frontend/lib/skins/skin-master.css b/Frontend/lib/skins/skin-master.css
index d8e6611..56b7f03 100644
--- a/Frontend/lib/skins/skin-master.css
+++ b/Frontend/lib/skins/skin-master.css
@@ -301,8 +301,9 @@ body:not(.mod-skin-light):not(.mod-skin-dark) #skin-default:before {
     color: #bdbdbd; }
   .mod-skin-dark:not(.mod-skin-light) .page-content-wrapper a:not(.btn):not(.badge):not(.dropdown-item):not(.nav-link):not(.navbar-brand):not(.card-title):not([class*="fc-"]):not([class*="text-"]):not(.btn-search-close),
   .mod-skin-dark:not(.mod-skin-light) .modal-body a:not(.btn):not(.badge):not(.dropdown-item):not(.nav-link):not(.page-link):not(.navbar-brand):not(.card-title) {
-    color: #ffffff;
-    /*color: var(--theme-primary-200);*/ }
+    /*color: #ffffff;*/
+    color: var(--theme-primary-200); 
+  }
   .mod-skin-dark:not(.mod-skin-light) .text-success {
     color: var(--theme-success-300) !important; }
   .mod-skin-dark:not(.mod-skin-light) .text-danger {

From 092c055c2ea372282561647ad9a7975fa5ef3a0f Mon Sep 17 00:00:00 2001
From: Celeste <aafree2014@gmail.com>
Date: Tue, 14 Feb 2023 15:16:11 +0800
Subject: [PATCH 2/3] =?UTF-8?q?[=E5=89=8D=E5=8F=B0]=E7=B3=BB=E7=B5=B1?=
 =?UTF-8?q?=E7=9B=A3=E6=8E=A7=E8=A9=B3=E7=B4=B0=E8=B3=87=E6=96=99=20zoom?=
 =?UTF-8?q?=20in=20=20|=20=E6=84=9F=E6=B8=AC=E8=A8=AD=E5=82=99=E9=9A=A8?=
 =?UTF-8?q?=E9=9B=BB=E6=A2=AF=E7=A7=BB=E5=8B=95=E5=8F=8A=E6=BA=AB=E5=BA=A6?=
 =?UTF-8?q?=E8=AE=8A=E5=8C=96=20|=20=20=E7=B3=BB=E7=B5=B1=E7=9B=A3?=
 =?UTF-8?q?=E6=8E=A7=20pop=20=E5=B0=8F=E5=8D=A1=20icon=20=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Frontend/_sysElevator.html           |  72 +++-
 Frontend/_sysMonAll.html             | 159 ++++----
 Frontend/img/forge/sensor_circle.svg |   7 +
 Frontend/index.html                  |  51 ++-
 Frontend/js/forge/forgemodel.js      | 140 +++++---
 Frontend/js/site.js                  | 519 +++++++++++++--------------
 6 files changed, 546 insertions(+), 402 deletions(-)
 create mode 100644 Frontend/img/forge/sensor_circle.svg

diff --git a/Frontend/_sysElevator.html b/Frontend/_sysElevator.html
index 1f6330f..18f02c4 100644
--- a/Frontend/_sysElevator.html
+++ b/Frontend/_sysElevator.html
@@ -1,25 +1,61 @@
 <style>
-    .elevator { background-color: #fff; min-height: 520px; }
+    .elevator {
+        background-color: #fff;
+        min-height: 520px;
+    }
 
-    .elevator-table-wrapper { padding: 0.8rem; }
+    .elevator-table-wrapper {
+        padding: 0.8rem;
+    }
 
-    table.elevator-build { /*border: 1px double #000;*/ }
+    table.elevator-build { /*border: 1px double #000;*/
+    }
 
-    table.elevator-build td { padding: 0.2rem 0.5rem; height: 50px; width: 45px; border: 1px solid #000; }
+        table.elevator-build td {
+            padding: 0.2rem 0.5rem;
+            height: 50px;
+            width: 45px;
+            border: 1px solid #000;
+        }
 
-    elevator .elevator-body, elevator .elevator-header { padding: 0.7rem; }
+    elevator .elevator-body, elevator .elevator-header {
+        padding: 0.7rem;
+    }
 
-    .elevator-item { position: absolute; width: 43px; height: 47px; border: 4px solid orange; }
+    .elevator-item {
+        position: absolute;
+        width: 43px;
+        height: 47px;
+        border: 4px solid orange;
+    }
 
-    .elevator-item-toup { border: 4px solid rgba(255,255,255,0); position: absolute; border-bottom: 0; z-index: 2; }
+    .elevator-item-toup {
+        border: 4px solid rgba(255,255,255,0);
+        position: absolute;
+        border-bottom: 0;
+        z-index: 2;
+    }
 
-    .elevator-item-todown { border: 4px solid rgba(255,255,255,0); position: absolute; border-top: 0; z-index: 2; }
+    .elevator-item-todown {
+        border: 4px solid rgba(255,255,255,0);
+        position: absolute;
+        border-top: 0;
+        z-index: 2;
+    }
 
-    .table-compact td { padding: 0.2rem 0.3rem; }
+    .table-compact td {
+        padding: 0.2rem 0.3rem;
+    }
 
-    #emerTurn tr td:nth-child(2) { width: 50%; text-align: center; justify-content: center; }
+    #emerTurn tr td:nth-child(2) {
+        width: 50%;
+        text-align: center;
+        justify-content: center;
+    }
 
-    #emerTurn tr td:nth-child(1) { width: 35%; }
+    #emerTurn tr td:nth-child(1) {
+        width: 35%;
+    }
 </style>
 
 <div class="d-flex">
@@ -215,7 +251,7 @@
                     </div>
                     <div class="">
                         <a type="button" class="mr-2" data-toggle="tooltip" data-placement="top"
-                           title="及時狀態">
+                           title="即時狀態">
                             <i class="fal fa-tv fa-2x" data-toggle="modal"
                                data-target="#exampleModal"></i>
                         </a>
@@ -899,7 +935,7 @@
 
         setBuildFloor();
         setCards();
-        
+
         setEleManTable();
         show3D();
     })
@@ -2374,7 +2410,7 @@
     //                         ↑  樓層平面圖  ↑
     //=====================================================================
 
-    // 設置 模型隱藏或透明 
+    // 設置 模型隱藏或透明
     function setInviForge(type, devDbIds) {
         console.log("devDbIds", devDbIds)
         if (type == "Hide") {
@@ -2402,8 +2438,8 @@
     //載入3D模型
     function load3DModel() {
         launchViewer(pageAct.urn, (viewer) => {
-            
-            
+
+
             let elevOption = {
                 selector: "#forgeViewer",
                 viewer: viewer,
@@ -2427,8 +2463,8 @@
                 subDeviceSetStatus(data);
             }
             forge3DElev.init();
-             
-            
+
+
         });
 
     }
diff --git a/Frontend/_sysMonAll.html b/Frontend/_sysMonAll.html
index e30f7d3..4c12cd9 100644
--- a/Frontend/_sysMonAll.html
+++ b/Frontend/_sysMonAll.html
@@ -11,7 +11,8 @@
 </div>
 
 <!-- Modal center Add -->
-<div class="modal fade" id="lightSchModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+<div class="modal fade" id="lightSchModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
+     data-keyboard="false">
     <div class="modal-dialog modal-dialog-centered" role="document" style="min-width:60%">
         <div class="modal-content">
             <div class="modal-header">
@@ -24,9 +25,9 @@
             </div>
             <div class="modal-body">
                 <!--<table id="lightSchTable" class="table table-bordered table-striped text-center m-0 w-100">
-    </table>-->
+                </table>-->
                 <div id="lightSchBlock" style="height:60vh"></div>
-                
+
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
@@ -46,9 +47,10 @@
 
     $(function () {
         getBuildMenu((arr, data) => {
+            console.log(arr)
             buildMenuData = data;
             if (arr.indexOf(4) != -1) {
-                getFloDevList(arr[0] == 4 ? "left" :"right");
+                getFloDevList(arr[0] == 4 ? "left" : "right");
                 setLightColor();
             }
             if (arr.indexOf(3) != -1) {
@@ -100,12 +102,12 @@
         }
         myBaja.setSubscribeDevicesByBql(ordPath);
         myBaja.setSubscribeDevicesCallBack(function (data) {
-           
+
             let matchDevice = allDevList.filter(x => x.device_number == data.device_number_full)[0];
             if (!matchDevice) {
                 return false;
             }
-           
+
             //將訂閱值塞入 subDeviceData
             if (subDeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) {
                 let obj = {};
@@ -138,7 +140,7 @@
             } else if (data.point_name == errDevPoiName && data.value == matchDevice.device_error_point_value) {
                 $(`#${matchDevice.device_number}_status`).attr("data-light-type", "error").data("light-type", "error");
             }
-            
+
             setLightColor();
             setForgeHotSpotColor(matchDevice);
             lightDevForgeSpotLig(matchDevice)
@@ -147,7 +149,7 @@
         });
 
         myBaja.setSubscribeDeviceEndCallBack(function (data) {
-          endPageLoading();
+            endPageLoading();
             if (data.findIndex(x => x.point_name == "Temp") != -1) {
                 // 顯示溫度條
                 showHeat("[name=forgeHeatBar]");
@@ -157,16 +159,16 @@
     }
 
     function lightDevForgeSpotLig(devObj) {
-        
-        
+
+
     }
 
     // 從設備訂閱更新每個設備卡片即時點位
-    function setDevItemPoiValBySub(data) { 
-        
+    function setDevItemPoiValBySub(data) {
+
         let pointSpan = $(`.card.device-wrap[data-number=${data.device_number_full}] span[name=devItemPoiVal]`);
         if (pointSpan && pointSpan.data("point") == data.point_name) {
-            console.log(data)
+            // console.log(data)
             pointSpan.text(data.value);
         }
     }
@@ -284,7 +286,7 @@
                                         <div class="d-flex mb-0 mt-2 align-items-center">
                                                 <span id="${devObj.device_number}_status" class="circle-light"></span>
                                                 <span class="${devItem ? "" : "d-none"} ml-2">${devItem?.full_name}：<span name="devItemPoiVal" data-point="${devItem?.points}"></span>${devItem?.unit}</span>
-                                                <a href="javascript:;" name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" data-name="${devObj.full_name}" class=" ml-2 mb-0 ">詳細資料</a>
+                                                <a href="javascript:;" name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" data-name="${devObj.full_name}" class=" ml-2 mb-0 " data-toggle="tooltip" title="默认的 Tooltip">詳細資料</a>
                                             </div>
                                         </div>
                                     </div>`;
@@ -376,42 +378,67 @@
     function show3DModel(urn) {
         $(loadEle).Loading("start");
         launchViewerForHotspot(urn, (viewer, nodeIds) => {
-          let devDbIds = allDevList.map(x => x.forge_dbid); // 大類
-          console.log(allDevList);
-          let subDevDbId = [];
-          allDevList.forEach(({ device_nodes }) => {
-            subDevDbId = [...subDevDbId, ...device_nodes.map(n => n.forge_dbid)]
-          })
+
+            addHotPoint(viewer)
+            let devDbIds = allDevList.map(x => x.forge_dbid);
+            // 大類
+            let subDevDbId = [];
+            allDevList.forEach(({ device_nodes }) => {
+                subDevDbId = [...subDevDbId, ...device_nodes.map(n => n.forge_dbid)]
+            })
+
             // 從資料庫設定不可視模型的類型，若沒有取道該小類不可視類型，則套用資料庫設定預設類型
             if (forgeInvType) {
-              setInviForge(forgeInvType, [...devDbIds, ...subDevDbId]);
+                setInviForge(forgeInvType, [...devDbIds, ...subDevDbId]);
             } else {
-              setInviForge(forgeInvTypeDef, [...devDbIds, ...subDevDbId]);
+                setInviForge(forgeInvTypeDef, [...devDbIds, ...subDevDbId]);
             }
 
             $(loadEle).Loading("close");
-
-            let devices = allDevList.map(x => {
-                return {
-                    roomDbId: !isNaN(parseInt(x.room_dbid)) ? parseInt(x.room_dbid) : -1,
-                    id: x.device_number,
-                    position: isJSON(x.device_coordinate_3d) ? JSON.parse(x.device_coordinate_3d) : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
-                    sensorTypes: ["temperature", "humidity"]
-                }
-            })
+            let sensorObjs = []
+            let devices = []
+            if (pageAct.sysSubTag === "M12") {
+                allDevList.forEach((device) => {
+                    const sensorObj = new Forge3DSensor({
+                        viewer: viewer,
+                        ordPath: {
+                            "area_tag": pageAct.AreaTag,
+                            "building_tag": pageAct.buiTag,
+                        },
+                        curDevice: {
+                            roomDbId: !isNaN(parseInt(device.room_dbid)) ? parseInt(device.room_dbid) : -1,
+                            id: device.device_number,
+                            position: isJSON(device.device_coordinate_3d) ? JSON.parse(device.device_coordinate_3d) : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
+                            temp: 25,
+                            forge_dbid: parseInt(device.forge_dbid)
+                        }
+                    });
+                    sensorObjs.push(sensorObj)
+                })
+            } else {
+                allDevList.map(x => {
+                    return {
+                        roomDbId: !isNaN(parseInt(x.room_dbid)) ? parseInt(x.room_dbid) : -1,
+                        id: x.device_number,
+                        position: isJSON(x.device_coordinate_3d) ? JSON.parse(x.device_coordinate_3d) : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
+                        sensorTypes: ["temperature", "humidity"],
+                        temp: 0,
+                    }
+                })
+            }
 
             let option = {
                 devices: devices,
             }
 
-          if (pageAct.sysMainTag !== "LT") {
-            heatMap = new ADHeatMaps(option);
-            heatMap.onComplete = () => {
-              $.each(allDevList, (idx, dev) => {
-                heatMap.changeTemp(dev.device_number, dev._temp || 0);
-              })
+            if (pageAct.sysMainTag !== "LT" && pageAct.sysSubTag !== "M12") {
+                heatMap = new ADHeatMaps(option);
+                heatMap.onComplete = () => {
+                    $.each(allDevList, (idx, dev) => {
+                        heatMap.changeTemp(dev.device_number, dev._temp || 0);
+                    })
+                }
             }
-          }
 
             let elevOption = {
                 selector: "[name=forgeViewer]",
@@ -420,6 +447,7 @@
                     "area_tag": pageAct.AreaTag,
                     "building_tag": pageAct.buiTag,
                 },
+                sensorObjs
             }
 
             // 電梯移動訂閱程序載入
@@ -438,36 +466,40 @@
                         setForgeHotSpotColor(matchDevice);
                     }
                 }
-          }
-          if (pageAct.sub_system_tag == "W2") {
-            getWaterNodeId();
-          }
+            }
+            if (pageAct.sysSubTag == "W2") {
+                // console.log("@@",pageAct, pageAct.sub_system_tag)
+                getWaterNodeId(viewer);
+            }
 
         }, () => {
             $(loadEle).Loading("close");
         }, "[name=forgeViewer]");
+
+
     }
 
     // 供水系統 - 取得欲染色 dbid
     function getWaterNodeId() {
-        //let url = baseApiUrl + "/api/Device/GetForgeNodeIdFromVar";
-        //let sendData = { forgeNodeKey: "water_wupply" };
-        //objSendData.Data = sendData;
-        //ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
-        //    if (!res || res.code != "0000" || !res.data) {
+        // let url = baseApiUrl + "/api/Device/GetForgeNodeIdFromVar";
+        // let sendData = { forgeNodeKey: "water_wupply" };
+        // objSendData.Data = sendData;
+        // ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+        //     if (!res || res.code != "0000" || !res.data) {
 
-        //    } else {
-        //        if (!isNaN(parseInt(res.data[0]?.system_value))) {
-        //            changeColor(parseInt(res.data[0]?.system_value))
-        //        }
-        //        console.log(res.data)
-        //    }
-        //}, null, "POST").send();
+        //     } else {
+        //         if (!isNaN(parseInt(res.data[0]?.system_value))) {
+        //             changeColor(parseInt(res.data[0]?.system_value))
+        //         }
+        //         console.log(res.data)
+        //     }
+        // }, null, "POST").send();
+        // console.log("1",viewer.model)
+        viewer.model.search("給水", (nodeIds) => {
+            // console.log("2",nodeIds)
+            viewer.show(nodeIds)
+        }, (e) => { console.log(e) })
 
-      viewer.model.search("給水", (nodeIds) => {
-        console.log(nodeIds)
-        viewer.show(nodeIds)
-      }, (e) => { console.log(e) })
     }
 
     function getHotspotPoint(callback = null) {
@@ -494,7 +526,7 @@
                     $.extend(item, data);
                     myDataList.push(item);
                 })
-               
+
                 setHotspotPoint(myDataList);
                 if (pageAct.sysMainTag == "LT") {
                     setLightPoint(myDataList);
@@ -518,22 +550,21 @@
     // 取得 不可視 3D 模型類型
     function getInviForge() {
         let url = baseApiUrl + "/api/Device/GetForgeInvType";
-       
+
         ytAjax = new YourTeam.Ajax(url, null, function (res) {
             if (!res || res.code != "0000" || !res.data) {
 
             } else {
                 let datas = res.data;
-                
+
                 forgeInvType = datas.filter(x => x.sub_system_tag == pageAct.sysSubTag)[0]?.invisible_value;
                 forgeInvTypeDef = datas.filter(x => x.invisible_type == "default_value")[0]?.invisible_value;
             }
         }, null, "POST").send();
     }
 
-    // 設置 模型隱藏或透明 
+    // 設置 模型隱藏或透明
     function setInviForge(type, devDbIds) {
-        console.log("devDbIds",devDbIds)
         if (type == "Hide") {
             hideAllObjects(devDbIds);
         } else if (type == "Opacity") {
@@ -558,7 +589,7 @@
     })
 
     onEvent("autodesk:complete:sprite", "[name=forgeViewer]", function (e, obj) {
-        
+
         $("#floDevList a[name=devItem]").each((idx, ele) => {
             let devNum = $(ele).data("number");
             let dbid = obj.myDataList.filter(x => x.device_number == devNum)[0]?._dbId;
diff --git a/Frontend/img/forge/sensor_circle.svg b/Frontend/img/forge/sensor_circle.svg
new file mode 100644
index 0000000..e7b0325
--- /dev/null
+++ b/Frontend/img/forge/sensor_circle.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1">
+
+ <g>
+  <title>Layer 1</title>
+  <circle fill="none" id="svg_1" r="8" cy="8" cx="8"/>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/Frontend/index.html b/Frontend/index.html
index fb37597..ed3b2d2 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -801,7 +801,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                         /*"lib/jquery-validation/dist/additional-methods.min",*/  /* 會影響 messages_zh_TW 文字呈現 */
                         "lib/jquery-validation/dist/localization/messages_zh_TW",
                         "lib/jquery-ui/jquery-ui.min",
-                        "lib/chart.js/chart.min",
+                        "lib/chart.js_4.1.2/chart.umd",
                         "lib/dropzone/dropzone-min",
                         "lib/jstree-master/jstree.min",
                         "lib/notifications/sweetalert2/sweetalert2.bundle",
@@ -870,7 +870,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     if (isJSON(sessionStorage.getItem("pageAct"))) {
                         lastPageAct = JSON.parse(sessionStorage.getItem("pageAct"));
                     }
-                    if ((lastPageAct.sysSubTag && lastPage == "systemMonitor") || lastPage == "sysElevator" || lastPage == "sysSensor") {
+                    if ((lastPageAct.sysSubTag && lastPage == "systemMonitor") || lastPage == "sysElevator"
+                        //  || lastPage == "sysSensor"
+                    ) {
                         $(`#subSysBtn${lastPageAct.sysSubTag}`).click();
                         $("#sysMonTopBtn").YTTab("set");
                     } else {
@@ -927,7 +929,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     //     }
                     // })
 
-                    console.log(result);
+                    // console.log(result);
                 }
             }
 
@@ -946,7 +948,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     if (!page) {
                         return;
                     }
-                    if (page != "systemMonitor" && page != "sysElevator" && page != "sysSenesor") {
+                    if (page != "systemMonitor" && page != "sysElevator"
+                        //  && page != "sysSensor"
+                    ) {
                         $("#sysMonBtnList [name=topFunBtn]").removeClass("active");
                         pageAct.sysMainTag = null;
                         pageAct.sysSubTag = null;
@@ -1161,12 +1165,22 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                                 <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="state-tab"
+                                                data-toggle="tooltip" data-placement="bottom" title="即時監控"
+                                                class="px-2 btn btn-icon border-0 nav-link active mx-1" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon fa-2x"></i></button>
                                                 ${lightHtml}
-                                                <button type="button" id="info-tab" 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>
+                                                <button type="button" id="info-tab"
+                                                data-toggle="tooltip" data-placement="bottom" title="基本資料"
+                                                class="px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon fa-2x"></i></button>
+                                                <button type="button"
+                                                d data-toggle="tooltip" data-placement="bottom" title="告警資料"
+                                                id="errRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1 position-relative " role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle fa-2x"></i></button>
+                                                <button type="button"
+                                                data-toggle="tooltip" data-placement="bottom" title="運維紀錄"
+                                                id="opeRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon fa-2x"></i></button>
+
+                                                <button type="button" class="px-2 btn btn-icon border-0 nav-link mx-1"><i class="fas fa-times text-white-50 fa-2x" data-close="yttooltip"></i></button>
+
                                             </div>
                                         </div>
                                         <div class="card-body p-2 tab-content">
@@ -1202,11 +1216,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                 controlFocusHotspot($(oriEle).data("dbId"));
                             }
                             // 3D 視角 ZOOM IN 聚焦
-                            /*
+
                             if (devObj) {
                                 moveViewToDevice(devObj?.forge_dbid);
                             }
-                            */
+
                             // pop 視窗卡片可拖移功能初始化
                             $(tooltipEle).draggable({
                                 cursor: "move",
@@ -1379,6 +1393,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
             // Card - 異常紀錄 Table
             function callbackForErr(result) {
+                console.log("@@@", result)
                 if (errRecTable) {
                     errRecTable.destroy();
                 }
@@ -1410,9 +1425,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     {
                         "title": "發生/完成時間",
                         "data": "normalTime",
-                        //"render": function (data, type, row) {
-                        //    return row.timestamp + "<br>" + data;
-                        //},
+                        // "render": function (data, type, row) {
+                        //     return row.timestamp + "<br>" + data;
+                        // },
                     },
 
                 ];
@@ -1626,10 +1641,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             if (subSysObj.sub_system_tag == "EL") {
                                 page = "sysElevator";
                             }
-                            console.log(subSysObj.sub_system_tag)
-                            if (subSysObj.sub_system_tag == "M12") {
-                                page = "sysSensor";
-                            }
+                            // console.log(subSysObj.sub_system_tag)
+                            // if (subSysObj.sub_system_tag == "M12") {
+                            //     page = "sysSensor";
+                            // }
 
                             let li = creEle("li");
                             let a = creA(subSysObj.full_name, { "href": "javascript:;" }, [], `subSysBtn${subSysObj.sub_system_tag}`, { page: page, tabname: "systemMonitor" }, "topFunBtn");
diff --git a/Frontend/js/forge/forgemodel.js b/Frontend/js/forge/forgemodel.js
index a30b5c1..435e3e0 100644
--- a/Frontend/js/forge/forgemodel.js
+++ b/Frontend/js/forge/forgemodel.js
@@ -11,7 +11,7 @@ var levels;//剖面用
 var lowerIdx;//剖面的下方樓層
 var upperIdx;//剖面的上方樓層
 
-function launchViewer(urn, callback,failCallback, _selector = "#forgeViewer") {
+function launchViewer(urn, callback, failCallback, _selector = "#forgeViewer") {
     selector = _selector;
     var options = {
         env: 'AutodeskProduction',
@@ -38,7 +38,7 @@ function launchViewer(urn, callback,failCallback, _selector = "#forgeViewer") {
             failCallback ? failCallback(viewer) : "";
         })
 
-        //test 
+        //test
         // for (let i = 0; i < urn.length; i++) {
         //     Autodesk.Viewing.Document.load(urn[i]["urn"], async (doc) => {
         //         let viewables = doc.getRoot().getDefaultGeometry();
@@ -90,7 +90,6 @@ function launchViewerForHotspot(urn, callback, failCallback, _selector = "#forge
         setShadowShow();
         $(selector).on("autodesk:loaded", function (e, nodeIds) {
             callback ? callback(viewer, nodeIds) : "";
-            console.log(viewer.get)
         })
 
         $(selector).on("autodesk:loaded:fail", function (e) {
@@ -168,6 +167,7 @@ class elevator3D {
         this.movStatus = 0;
         this.targetFloorZ = 0;
         this.floorHeight = option.floorHeight ?? [{}];
+        this.sensorObjs = option.sensorObjs ?? null;
         this.init();
     }
 
@@ -177,7 +177,7 @@ class elevator3D {
             // 定義結果陣列
             let result = [];
             // 使用 InstanceTree.enumNodeFragments 遍歷模型中的所有片段
-            this.viewer?.model?.getData().instanceTree.enumNodeFragments(nodeId,(fragId) => {
+            this.viewer?.model?.getData().instanceTree.enumNodeFragments(nodeId, (fragId) => {
                 // 將遍歷到的片段 ID 添加到結果陣列中
                 result.push(fragId);
             }, (nodeId) => {
@@ -219,6 +219,12 @@ class elevator3D {
                 let fragPosition = new THREE.Vector3(0, 0, 0);// 一樓0 二樓15 三樓 26
                 // 設置當前片段的位置
                 fragProxy.position = fragPosition;
+
+                // if(nodeId === 13704) {
+                //   // 改變感測器熱點位置
+                //   this.sensorObjs&&this.sensorObjs[0]?.changePos(13706, fragProxy.position.z)
+                // }
+
                 // 更新當前片段的動畫變換矩陣
                 fragProxy.updateAnimTransform();
             })
@@ -294,10 +300,15 @@ class elevator3D {
                 fragProxy.position.z += this.speed;
             }
             let tarFrag = this.fragProxys.filter(x => x.nodeId == nodeId && x.fragId == frag)[0];
-            if (tarFrag) { 
+            if (tarFrag) {
                 tarFrag.frag.position.z = fragProxy.position.z;
             }
             fragProxyZ = fragProxy.position.z;
+
+            if (nodeId === 13704) {
+                // 改變感測器熱點位置
+                this.sensorObjs && this.sensorObjs[0]?.changePos(13706, fragProxyZ)
+            }
             fragProxy.updateAnimTransform()
         })
 
@@ -349,20 +360,20 @@ function onDocumentLoadSuccess(doc, eleOption) {
 
     viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () {
         let instanceTree = viewer.model?.getData().instanceTree;
-        console.log(instanceTree.nodeAccess)
+        // console.log(instanceTree.nodeAccess)
         allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
         /*getNodeIdByDbIds("【電梯】", (nodeIds) => {*/
         $(selector).trigger("autodesk:loaded");
         /*});*/
 
-        
+
     });
 
-    
+
 }
 
 // 輔助函數，使用 Promise 封裝 viewer.getProperties 函數
-function viewerGetProperties(dbIds,attributeName = null) {
+function viewerGetProperties(dbIds, attributeName = null) {
     // 在這裡，我們使用 viewer.getProperties 函數的成功回調函數作為 resolve 函數，
     // 並使用 viewer.getProperties 函數的失敗回調函數作為 resolve 函數的參數
     // 這樣，當 viewer.getProperties 函數成功時，Promise 會傳回 properties 物件；
@@ -373,9 +384,9 @@ function viewerGetProperties(dbIds,attributeName = null) {
             option.propFilter = [attributeName]; // 限制只返回指定的屬性
         }
         viewer.model.getBulkProperties2(dbIds, option,    // 取得指定元素的屬性信息
-        function (elements) {
-            resolve(elements);   // 成功時傳回 elements 物件
-        })
+            function (elements) {
+                resolve(elements);   // 成功時傳回 elements 物件
+            })
     });
 }
 
@@ -390,12 +401,12 @@ async function getNodeIdBySearch(text) {
     })
 }
 
-// 主函數 - 透過 model 全部 node 取得特定 nodeId 
+// 主函數 - 透過 model 全部 node 取得特定 nodeId
 async function getNodeIdByDbIds(checkValue = [], callback = null) {
     let evelMap = new Map();
     let hasElement = false; // 設置是否有 【tag_id】的node
     let targetNodeIds = await getNodeIdBySearch(checkValue);
-    let elements = await viewerGetProperties(targetNodeIds,"【tag_id】");
+    let elements = await viewerGetProperties(targetNodeIds, "【tag_id】");
 
     // 從 elements 中篩選出包含 【tag_id】 屬性的元素
     elements = elements.filter(x => x.properties.findIndex(y => y.displayName == "【tag_id】" && checkValue.indexOf(y.displayValue) != -1) != -1);
@@ -413,7 +424,7 @@ async function getNodeIdByDbIds(checkValue = [], callback = null) {
         // 二次篩選
         chiElements = targetNodeIds.filter(x => x.properties.findIndex(y => y.displayName == "child") != -1);
 
-         // 獲取子元素的 nodeId
+        // 獲取子元素的 nodeId
         targetNodeIds = chiElements.map(x => x.properties[0].displayValue);
         // 獲取子元素的屬性信息
         chiElements = await viewerGetProperties(targetNodeIds);
@@ -560,8 +571,12 @@ class ADHeatMaps {
     init = async function () {
         // 載入 Autodesk Viewer 的資料視覺化擴充功能
         const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
+        this.dataVizExtn = dataVizExtn;
         // 儲存 Viewer 的模型
         this.model = viewer.model;
+        this.addHeatMaps()
+    }
+    async addHeatMaps() {
         const {
             SurfaceShadingData,
             SurfaceShadingPoint,
@@ -584,11 +599,12 @@ class ADHeatMaps {
             this.devices.filter(x => x.roomDbId == rDbid).forEach((device) => {
                 const shadingPoint = new SurfaceShadingPoint(
                     device.id,
-                    device.position,
+                    undefined,
                     device.sensorTypes
                 );
+                shadingPoint.positionFromDBId(this.model, device.roomDbId)
                 shadingNode.addPoint(shadingPoint);
-                device.temp = 0;
+                // device.temp = 0;
             });
 
             heatmapData.addChild(shadingNode);
@@ -598,12 +614,10 @@ class ADHeatMaps {
         heatmapData.initialize(this.model);
 
         // 對模型做表面顏色的渲染
-        await dataVizExtn.setupSurfaceShading(this.model, heatmapData);
+        await this.dataVizExtn.setupSurfaceShading(this.model, heatmapData);
 
         // 對 "temperature" 的溫度設定兩種顏色：紅色和藍色
-        dataVizExtn.registerSurfaceShadingColors("temperature", [0x0000ff, 0x00ff00, 0xffff00, 0xff0000]);
-
-        this.dataVizExtn = dataVizExtn;
+        this.dataVizExtn.registerSurfaceShadingColors("temperature", [0x0000ff, 0x00ff00, 0xffff00, 0xff0000]);
 
         $.each(this.roomDbIds, (idx, rDbid) => {
             this.dataVizExtn.renderSurfaceShading("RoomPanel" + rDbid, "temperature", this.getSensorValue.bind(this));
@@ -613,8 +627,9 @@ class ADHeatMaps {
         this.onComplete ? this.onComplete() : "";
     }
 
-    getSensorValue = function(device, sensorType) {
+    getSensorValue = function (device, sensorType) {
         let dev = this.devices.filter(x => x.id == device.id)[0];
+        // shadingPoint.positionFromDBId(this.model, device.roomDbId)
         return dev.temp / 40;
     }
 
@@ -627,7 +642,7 @@ class ADHeatMaps {
                 dev.temp = temp;
             }
         })
-        $.each(this.roomDbIds, (idx, rDbid) => {
+        $.each(this.roomDbIds, async (idx, rDbid) => {
             this.dataVizExtn.renderSurfaceShading("RoomPanel" + rDbid, "temperature", this.getSensorValue.bind(this));
         })
         //if (rDbid != null) {
@@ -732,7 +747,7 @@ async function getLightData(data) {
 async function testNewLight(dataList) {
     dataList.forEach((myData, index) => {
         const position = JSON.parse(myData.device_coordinate_3d);
-        if (lightList.findIndex(x => x.device_guid == myData.device_guid) == -1) { 
+        if (lightList.findIndex(x => x.device_guid == myData.device_guid) == -1) {
             lightList.push({ dbid: myData.forge_dbid, device_guid: myData.device_guid, lightObject: new THREE.SpotLight(0xff0000, 200, 20, 0.6, 0.5, 10) });
         }
 
@@ -745,7 +760,7 @@ async function testNewLight(dataList) {
 
         //let spotLightHelper = new THREE.SpotLightHelper(lightList[index].lightObject);
         //viewer.scene.add(spotLightHelper);
-        
+
 
     });
     viewer.impl.sceneUpdated(true);
@@ -753,16 +768,22 @@ async function testNewLight(dataList) {
 
 //------------------- 加入熱點 -----------------
 async function addHotPoint(data) {
-    var viewer = data.target;
+    var viewer = data.target ? data.target : data;
     const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
     const DataVizCore = Autodesk.DataVisualization.Core;
     const viewableType = Autodesk.DataVisualization.Core.ViewableType.SPRITE;//DataVizCore.ViewableType.SPRITE;
-    const spriteColor = new THREE.Color(0xffffff);
+    let spriteColor = null;
+    let spriteIcon = "";
     const dbIdStart = 10;
     const dbIdEnd = 19;
-    let spriteIcon = "/file/img/forge/hotspot.svg";
-    if (location.href.indexOf("localhost:5966") != -1) {
-        spriteIcon = "/img/forge/hotspot.svg";
+    if (pageAct.sysSubTag === "M12") {
+        return
+    } else {
+        spriteColor = new THREE.Color(0xffffff);
+        spriteIcon = "/file/img/forge/hotspot.svg";
+        if (location.href.indexOf("localhost:5966") != -1) {
+            spriteIcon = "/img/forge/hotspot.svg";
+        }
     }
 
     const style = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIcon);
@@ -770,7 +791,7 @@ async function addHotPoint(data) {
     if (lightDataList != undefined && lightDataList != null && lightDataList.length > 0) {
         testNewLight(lightDataList);
     }
-    
+
 
     //熱點 點擊事件註冊
     viewer.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);// SPRITE_SELECTED
@@ -793,15 +814,28 @@ async function addHotPoint(data) {
 
     await viewableData.finish();
     dataVizExtn.addViewables(viewableData);
+    // console.log(dataVizExtn)
     $(selector).trigger("autodesk:complete:sprite", { myDataList });
 
     //---------------- 熱點點擊事件 --------------------
     function onSpriteClicked(event) {
         event.hasStopped = true;
+        if (pageAct.sysSubTag === "M12" && event != undefined && event != null) {
+            if (event.dbId >= dbIdStart) {
+                changeColorForHotspot(event.dbId);
+                changeScaleForHotspot(event.dbId, false);
+                let myData = [this.curDevice].filter(x => x.forge_dbid == event.dbId)[0];
+                moveViewToDevice(myData.forge_dbid);//移動視角至該設備
+
+                $(selector).trigger("autodesk:click:sprite", { event, myData });
+            } else {
+                $(selector).trigger("autodesk:clickOut:sprite", { event });
+            }
+        }
         if (event != undefined && event != null) {
             if (event.dbId >= dbIdStart) {//event.dbId > 0 && event.dbId < 19
-                console.log(`Sprite clicked: ${event.dbId}`);
-                
+                // console.log(`Sprite clicked: ${event.dbId}`);
+
                 for (let i = dbIdStart; i <= myDataList.length + 10; i++) {
                     changeColorForHotspot(i);
                     changeScaleForHotspot(i, false);
@@ -821,7 +855,7 @@ async function addHotPoint(data) {
                 //document.getElementById('deviceName').innerHTML = viewer.model.getInstanceTree().getNodeName(event.clickInfo.dbId);
                 //document.getElementById('deviceDbid').innerHTML = event.clickInfo.dbId;
                 //document.getElementById('devicePosition').innerHTML = "(" + (event.clickInfo.point.x).toFixed(2) + ", " + (event.clickInfo.point.y).toFixed(2) + ", " + (event.clickInfo.point.z).toFixed(2) + ")";
-                console.log(`event>>  dbId: ${event.clickInfo.dbId}, id: ${event.clickInfo.object.id}, position.x: ${event.clickInfo.point.x}, y: ${event.clickInfo.point.y}, z: ${event.clickInfo.point.z}, name: ${viewer.model.getInstanceTree().getNodeName(event.clickInfo.dbId)}`);
+                // console.log(`event>>  dbId: ${event.clickInfo.dbId}, id: ${event.clickInfo.object.id}, position.x: ${event.clickInfo.point.x}, y: ${event.clickInfo.point.y}, z: ${event.clickInfo.point.z}, name: ${viewer.model.getInstanceTree().getNodeName(event.clickInfo.dbId)}`);
             }
         }
     }
@@ -847,12 +881,13 @@ async function addHotPoint(data) {
 // 熱點 更換顏色
 async function changeColorForHotspot(dbId, type = null) {
     const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
-    let spriteColorFocus = new THREE.Color(0xffffff); 
-    if (type == "focus") {
+    // console.log(dbId, dataVizExtn.viewableData.getViewableColor(dbId, false))
+    let spriteColorFocus = dataVizExtn.viewableData?.getViewableColor(dbId, false) || new THREE.Color(0xffffff);
+    if (type == "focus" && pageAct.sysSubTag !== "M12") {
         spriteColorFocus = new THREE.Color(0x00ffe1);
     } else if (type == "error") {
         spriteColorFocus = new THREE.Color(0xff0000);
-    } 
+    }
     const viewablesToUpdate = dbId;
     dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
         return {
@@ -861,6 +896,27 @@ async function changeColorForHotspot(dbId, type = null) {
     });
 }
 
+
+// 熱點 更換顏色---環境感知器
+async function changeColorForSensorHotspot(dbId, temp) {
+    const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
+    const temps = [new THREE.Color(0x0000ff), new THREE.Color(0x00ff00), new THREE.Color(0xffff00), new THREE.Color(0xff0000)]
+    let index = Math.floor(temp / 10);
+    if (index > 3) {
+        index = 3
+    }
+    const viewablesToUpdate = dbId;
+    const color = temps[index]
+
+    dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
+        return {
+            color: color,
+        };
+    });
+    console.log(dataVizExtn)
+}
+
+
 // 熱點 更換大小
 async function changeScaleForHotspot(dbId, type = true) {
     const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
@@ -1050,7 +1106,7 @@ async function loadHeatmapForFloor() {
 //------------ 剖面 ----------------------
 async function getRemoteLevels() {
     const aecData = await Autodesk.Viewing.Document.getAecModelData(this.viewer.model.getDocumentNode());
-    if (!aecData.levels) return null;
+    if (!aecData || !aecData.levels) return null;
 
     const levels2 = aecData.levels;
     levels2.sort((a, b) => b.elevation - a.elevation);
@@ -1058,7 +1114,7 @@ async function getRemoteLevels() {
 }
 
 async function getLevelsData(lowerFloor, upperFloor, callback = null) {
-    // 樓層正規化 取得樓層 
+    // 樓層正規化 取得樓層
     const floorRegex = /[\d|\w]+F/gmi;
     const data = await this.getRemoteLevels();
     for (var i = 0; i < data.length; i++) {
@@ -1106,10 +1162,10 @@ async function newLight(lightPosition) {
     //聚光燈
     var spotLight = new THREE.SpotLight(0xffffff, 200, 20, 0.6, 0.5, 10);
     spotLight.position.set(lightPosition.x, lightPosition.y, lightPosition.z);
-    console.log(lightPosition.x, lightPosition.y, lightPosition.z)
+    // console.log(lightPosition.x, lightPosition.y, lightPosition.z)
     spotLight.castShadow = false;
     spotLight.visible = true;
-    spotLight.target.position.set(lightPosition.x, lightPosition.y, lightPosition.z-20);
+    spotLight.target.position.set(lightPosition.x, lightPosition.y, lightPosition.z - 20);
     viewer.scene.add(spotLight.target);
     viewer.scene.add(spotLight);
     viewer.impl.sceneUpdated(true);
@@ -1119,7 +1175,7 @@ async function newLight(lightPosition) {
 
 //調整燈光 強度、顏色
 async function setLightValues(deviceGuid, intensity, color) {
-    for (var i = 0; i < lightList.length; i++) { 
+    for (var i = 0; i < lightList.length; i++) {
         if (lightList[i].device_guid == deviceGuid) {
             lightList[i].lightObject.intensity = intensity;
 
diff --git a/Frontend/js/site.js b/Frontend/js/site.js
index d48d678..fdd43bc 100644
--- a/Frontend/js/site.js
+++ b/Frontend/js/site.js
@@ -5,25 +5,25 @@
 
 })
 
-/** 
- * fn 定義 | 手動初始化 Bootstrap dropdown select 
- */
+/**
+* fn 定義 | 手動初始化 Bootstrap dropdown select
+*/
 $.fn.droSetItem = function () {
     setDropdownItem(this);
     return this;
 }
-/** 
- * fn 定義 | 輸出含原元素 html
- */
+/**
+* fn 定義 | 輸出含原元素 html
+*/
 $.fn.outerHtml = function () {
     return $(this).prop("outerHTML");
 }
 
 /**
- * fn 定義 | Loading 操作
- * @param {any} type - close / start / exceed , exceed => 繼續執行並可切換文字
- * @param {any} text - 右下角 Alert 文字
- */
+* fn 定義 | Loading 操作
+* @param {any} type - close / start / exceed , exceed => 繼續執行並可切換文字
+* @param {any} text - 右下角 Alert 文字
+*/
 $.fn.Loading = function (type = "close", text) {
     let ele = this;
     let aleObj = $(this)[0]._aleObj;
@@ -34,7 +34,7 @@ $.fn.Loading = function (type = "close", text) {
         $("body").css("overflow", "auto");
         $(aleObj.ele).YTAlert().hide();
         $(ele).animate({ opacity: 0 }, 300, () => {
-            if ($(ele).data("loading-show-status") == "close") { 
+            if ($(ele).data("loading-show-status") == "close") {
                 $(ele).hide();
             }
         })
@@ -82,9 +82,9 @@ $.fn.YTAlert = function () {
 }
 
 /**
- * 設置 bootstrap dropdown 為下拉選單 
- * @param {any} menuEle - .dropdown-menu element
- */
+* 設置 bootstrap dropdown 為下拉選單
+* @param {any} menuEle - .dropdown-menu element
+*/
 function setDropdownItem(menuEle) {
     if ($(menuEle).find(".dropdown-item.active").length == 0) {
         $(menuEle).find(".dropdown-item").first().addClass("active");
@@ -106,19 +106,19 @@ function setDropdownItem(menuEle) {
 }
 
 /**
- * 預設設備圖像
- * @param {any} obj
- */
+* 預設設備圖像
+* @param {any} obj
+*/
 function defDev(obj) {
     let defSrc = 'img/defdev.png';
     obj.src = defSrc;
 }
 
 /**
- * jquery datatable - ajax send data reset
- * @param {any} table
- * @param {any} sendData
- */
+* jquery datatable - ajax send data reset
+* @param {any} table
+* @param {any} sendData
+*/
 function dtAjaxResetSendData(table, sendData) {
     table.context[0].ajax.data = function (d) {
         d = sendData;
@@ -128,14 +128,14 @@ function dtAjaxResetSendData(table, sendData) {
 
 
 /**
- * element 建造 
- * @param {any} text
- * @param {any} id
- * @param {any} name
- * @param {any} cls
- * @param {any} data
- * @param {any} attr
- */
+* element 建造
+* @param {any} text
+* @param {any} id
+* @param {any} name
+* @param {any} cls
+* @param {any} data
+* @param {any} attr
+*/
 function eleBuild(text = null, id = null, name = null, cls = [], data = {}, attr = {}) {
     cls = cls ?? [], data = data ?? {}, attr = attr ?? {};
     id = id ? `id="${id}"` : "";
@@ -193,8 +193,8 @@ function creSpan(text = null, cls = [], id = null, attr = {}, data = {}, name =
     return creEle("span", text, id, name, cls, data, attr);
 }
 /**
- * 根據該棟建築底下的'所有'電梯執行緒物件
- * */
+* 根據該棟建築底下的'所有'電梯執行緒物件
+* */
 class ElevatorHandler {
     constructor(ele, option = {}) {
         this.ele = ele;
@@ -428,7 +428,7 @@ function dateRanCutPart(start, end, cutNum) {
     let cutTimeArr = [];
     if (sTime < eTime) return [];
 
-    
+
     let partNum = (sTime - eTime) / cutNum;
     for (let i = eTime; i <= sTime; i = i + partNum) {
         cutTimeArr.push(i)
@@ -448,27 +448,27 @@ function isJSON(str) {
     }
 }
 
-function addBsToast(container, type = "warning",title="",content ="", id, datas = {}, option = {}) {
+function addBsToast(container, type = "warning", title = "", content = "", id, datas = {}, option = {}) {
     datas = Object.keys(datas).length != 0 ? `${Object.keys(datas).map(x => `data-${x}="${datas[x]}"`).join(" ")}` : "";
     let iconClass = option.iconHtml ?? `fas fa-exclamation-triangle`;
-    let strHtml = `<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" ${datas}> 
-                        <div class="toast-header ${warning ? `bg-` + warning : ""}">
-                            <i class="${iconClass}"></i>
-                            <strong class="mr-auto">${title}</strong>
-                            <small class="text-muted">just now</small>
-                            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
-                                <span aria-hidden="true">&times;</span>
-                            </button>
-                        </div>
-                        <div class="toast-body">
-                            ${content}
-                        </div>
-                    </div>`
+    let strHtml = `<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" ${datas}>
+                      <div class="toast-header ${warning ? `bg-` + warning : ""}">
+                          <i class="${iconClass}"></i>
+                          <strong class="mr-auto">${title}</strong>
+                          <small class="text-muted">just now</small>
+                          <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+                              <span aria-hidden="true">&times;</span>
+                          </button>
+                      </div>
+                      <div class="toast-body">
+                          ${content}
+                      </div>
+                  </div>`
 }
 
 /**
- * 取得資料庫電梯設備，根據 baja 訂閱移動 3D 電梯
- * */
+* 取得資料庫電梯設備，根據 baja 訂閱移動 3D 電梯
+* */
 class Forge3DElevFull {
     constructor(option = {}) {
         this.allElevDevList = [];  //全電梯設備清單
@@ -484,17 +484,18 @@ class Forge3DElevFull {
         this.selector = option.selector ?? "#forgeViewer";
         this.bajaChaCallback = option.bajaChaCallback ?? null;
         this.bajaEndCallback = option.bajaEndCallback ?? null;
-        this.sensorObj = null
+        this.sensorObjs = option.sensorObjs ?? null;
     }
 
-  init = function () {
-        this.sensorObj = new Forge3DSensor({
-          viewer: this.viewer,
-          ordPath: { ...this.ordPath },
-        })
+    init = function () {
         // 系統大類、小類固定
         this.ordPath.system_tag = this.sysMainTag;
         this.ordPath.name_tag = this.sysSubTag;
+
+        // if (pageAct.sysSubTag === "M12") {
+        //   console.log("@@",pageAct, pageAct.sysSubTag)
+        //   this.getSensorDevList();
+        // }
         this.getElevDevList();
     }
 
@@ -534,6 +535,7 @@ class Forge3DElevFull {
                 if (this.elev3DObj.length != 0) {
                     let elevObj = this.elev3DObj.filter(x => x.nodeId == this.elev3DBind[matchDevice.device_number])[0];
                     if (elevObj && elevObj.id) {
+
                         elevObj.obj.setElevatorFloor(data.value)
                         elevObj.obj.movElevator();
                     }
@@ -593,6 +595,13 @@ class Forge3DElevFull {
 
                         frags.forEach((fragProxy) => {
                             fragProxy.frag.position.z = this.elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0;
+                            console.log("1", fragProxy.frag.position.z)
+                            let start = 0;
+                            if (node === 13704 && start == 0) {
+                                // 改變感測器熱點位置
+                                this.sensorObjs && this.sensorObjs[0]?.changePos(13706, fragProxy.frag.position.z);
+                                start = 1;
+                            }
                             fragProxy.frag.updateAnimTransform();
                         })
                         elevObj.obj.viewer.impl.sceneUpdated(true);
@@ -617,6 +626,7 @@ class Forge3DElevFull {
                 viewer: this.viewer,
                 nodeId: node,
                 floorHeight: this.elev3DOption.floorHeight ?? [],
+                sensorObjs: this.sensorObjs,
                 inited: function () {
 
                 }
@@ -637,9 +647,16 @@ class Forge3DElevFull {
                 elevObj.obj = Object.assign(elevObj, elevator3DObj ?? {})
                 elevObj.obj.init(() => {
                     let frags = elevObj.obj.fragProxys.filter(x => x.nodeId == node);
-
                     frags.forEach((fragProxy) => {
                         fragProxy.frag.position.z = this.elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0;
+                        console.log("2", fragProxy.frag.position.z)
+                        // debugger
+                        let start = 0;
+                        if (node === 13704 && start == 0) {
+                            // 改變感測器熱點位置
+                            this.sensorObjs && this.sensorObjs[0]?.changePos(13706, fragProxy.frag.position.z);
+                            start = 1;
+                        }
                         fragProxy.frag.updateAnimTransform()
                     })
                     elevObj.obj.viewer.impl.sceneUpdated(true);
@@ -677,229 +694,211 @@ class Forge3DElevFull {
     }
 }
 
+
+
 /**
- * 取得資料庫溫度感測器
- * 1. baja 取得溫度感測器改變顏色
- * 2. 參數取得要移動到的電梯位置
- * */
+* 取得資料庫溫度感測器
+* 1. baja 取得溫度感測器改變顏色
+* 2. 參數取得要移動到的電梯位置
+* */
 class Forge3DSensor {
-  constructor(option = {}) {
-    this.allSensorDevList = [];  //溫度調節器設備清單
-    this.subDeviceData = [];    //每個設備訂閱點位值
-    this.viewer = option.viewer ?? null;
-    this.ordPath = option.ordPath; // TPE_B1
-    this.sysMainTag = "ME";
-    this.sysSubTag = "M12";
-    this.selector = "#forgeViewer";
-    this.heatMap = null;
-    this.bajaChaCallback = option.bajaChaCallback ?? null;
-    this.bajaEndCallback = option.bajaEndCallback ?? null;
-    this.floorHeight = 0;
-    this.dataVizExtn = null;
-    this.#init();
-  }
+    constructor(option = {}) {
+        this.subDeviceData = [];    //每個設備訂閱點位值
+        this.viewer = option.viewer ?? null;
+        this.ordPath = option.ordPath; // TPE_B1
+        this.sysMainTag = "ME";
+        this.sysSubTag = "M12";
+        this.selector = "#forgeViewer";
+        this.heatMap = null;
+        this.bajaChaCallback = option.bajaChaCallback ?? null;
+        this.bajaEndCallback = option.bajaEndCallback ?? null;
+        this.floorHeight = 0;
+        this.dataVizExtn = null;
+        this.DataVizCore = null;
+        this.tempVal = 20;
+        this.curDevice = option.curDevice ?? null;
+        this.#init();
+    }
 
-  #init = async function () {
-    // 系統大類、小類固定
-    this.ordPath.system_tag = this.sysMainTag;
-    this.ordPath.name_tag = this.sysSubTag;
-    this.dataVizExtn = await this.viewer.loadExtension("Autodesk.DataVisualization");
-    //this.getSensorDevList();
-  }
-  // 取得Sensor設備列表
-  getSensorDevList = function () {
-    let url = baseApiUrl + "/api/Device/GetDeviceList";
-    let sendData = {
-      sub_system_tag: this.ordPath.name_tag, // M12
-      building_tag: this.ordPath.building_tag, //B1
-    };
-    objSendData.Data = sendData;
-    ytAjax = new YourTeam.Ajax(url, objSendData, (res) => {
-      if (!res || res.code != "0000" || !res.data) {
+    #init = async function () {
+        // 系統大類、小類固定
+        this.ordPath.system_tag = this.sysMainTag;
+        this.ordPath.name_tag = this.sysSubTag;
+        this.dataVizExtn = await this.viewer.loadExtension("Autodesk.DataVisualization");
+        this.DataVizCore = Autodesk.DataVisualization.Core;
+        await this.addHotPoint();
+        this.changeColorForSensorHotspot(this.curDevice.forge_dbid, 35)
+        this.subSensorDevice();
 
-      } else {
-        $.each(res.data, (index, floObj) => {
-          $.each(floObj.device_list, (index2, devObj) => {
-            this.allSensorDevList.push(devObj);
-          })
-        })
-        let devices = this.allSensorDevList.map((x) => {
-          if (x.device_number.includes("ME_M12")) {
-            return {
-              roomDbId: 12879, // Bank2 電梯
-              id: x.device_number,
-              position: isJSON(x.device_coordinate_3d)
-                ? JSON.parse(x.device_coordinate_3d)
-                : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
-              sensorTypes: ["temperature", "humidity"],
-            };
-          }
+
+    }
+
+    // 建立熱點
+    async addHotPoint() {
+
+        // this.dataVizExtn.removeAllViewables()
+        await this.registerHotPoint()
+        this.subSensorDevice();
+        // console.log("2",this.dataVizExtn)
+    }
+
+    async registerHotPoint(color = "") {
+        var viewer = this.viewer;
+        const viewableType = this.DataVizCore.ViewableType.SPRITE;//DataVizCore.ViewableType.SPRITE;
+        const spriteColor = new THREE.Color(0x000000);
+        // const highlightedColor = new THREE.Color(0xe0e0ff);
+        let spriteIcon = "/file/img/forge/sensor_circle.svg";
+        if (location.href.indexOf("localhost:5966") != -1) {
+            spriteIcon = "/img/forge/sensor_circle.svg";
+        }
+        const style = new this.DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIcon);
+
+        const viewableData = new this.DataVizCore.ViewableData();
+        viewableData.spriteSize = 30; // Sprites as points of size 24 x 24 pixels
+        // console.log(this.curDevice, [this.curDevice])
+
+        [this.curDevice].forEach((myData, index) => {
+            // console.log(myData)
+            const dbId = myData.forge_dbid;
+            const myPosition = myData.position;
+            const viewable = new this.DataVizCore.SpriteViewable(myPosition, style, dbId);
+            myData._dbId = dbId;
+            viewableData.addViewable(viewable);
         });
-        //this.heatMap = new ADHeatMaps({
-        //  devices
-        //});
-        //this.subSensorDevice();
-      }
-    }, null, "POST").send();
-  }
+        // console.log(viewableData)
+        await viewableData.finish();
+        this.dataVizExtn.addViewables(viewableData);
+        // console.log("1",this.dataVizExtn)
+        viewer.addEventListener(this.DataVizCore.MOUSE_CLICK, onSpriteClicked.bind(this));// SPRITE_SELECTED
 
-  // 訂閱sensor設備
-  subSensorDevice = function () {
-    let myBaja = new subscriptionDevices();
-    let ordPath = this.ordPath;
+        // ---------------- 熱點點擊事件 --------------------
+        function onSpriteClicked(event) {
+            event.hasStopped = true;
+            const dbIdStart = 10;
+            // debugger
+            if (event != undefined && event != null) {
+                if (event.dbId >= dbIdStart) {
+                    changeColorForHotspot(event.dbId);
+                    changeScaleForHotspot(event.dbId, false);
+                    let myData = [this.curDevice].filter(x => x.forge_dbid == event.dbId)[0];
+                    moveViewToDevice(myData.forge_dbid);//移動視角至該設備
 
-    myBaja.setSubscribeDevicesByBql(ordPath);
-    myBaja.setSubscribeDevicesCallBack((data) => {
-      this.bajaChaCallback ? this.bajaChaCallback(data) : "";
-      if (this.allSensorDevList.length == 0) {
-        return false;
-      }
-      data.device_number = data.device_number_full; // "TPE_B1_ME_M12_U1F_NA_TH_N1" (forge TPE_B1_ME_M12_R2F_NA_TH_N1)
+                    $(selector).trigger("autodesk:click:sprite", { event, myData });
+                } else {
+                    $(selector).trigger("autodesk:clickOut:sprite", { event });
+                }
+            }
+        }
+    }
 
-      let matchDevice = this.allSensorDevList.find(
-        (x) =>
-          x.device_number == data.device_number ||
-          x.device_number == "TPE_B1_ME_M12_R2F_NA_TH_N1",
-      );
 
-      if (!matchDevice) {
-        return;
-      }
-      //將訂閱值塞入 subDeviceData
-      if (
-        this.subDeviceData.findIndex(d => d.device_number == matchDevice.device_number) == -1
-      ) {
-        let obj = {};
-        obj.device_number = matchDevice.device_number;
-        obj.dbid = matchDevice.forge_dbid;
-        this.subDeviceData.push(obj);
-      }
-      let subData = this.subDeviceData.find(
-        (x) => x.device_number == matchDevice.device_number || x.device_number == "TPE_B1_ME_M12_R2F_NA_TH_N1"
-      );
+    // 改變熱點位置
+    changePos(dbId, positionZ) {
+        this.dataVizExtn.invalidateViewables(dbId, (viewable) => {
+            // console.log(viewable._position)
+            const z = viewable._position.z + positionZ
+            const newPos = { ...viewable._position, z }
+            return {
+                // Move the viewable to a new location.
+                position: newPos
+            };
+        });
+    }
 
-      if (subData) {
-        subData[data.point_name] = data.value;
-      }
-      //let norDevPoiName = matchDevice.device_normal_point_name;
-      //let cloDevPoiName = matchDevice.device_close_point_name || "";
-      //let errDevPoiName = matchDevice.device_error_point_name;
-      if (data.point_name == "Temp" || data.point_name == "TEMP") {
-        this.heatMap?.changeTemp(
-          matchDevice.device_number,
-          !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0,
-        );
-        let devIdx = this.allSensorDevList.findIndex(
-          (x) =>
-            x.device_number == data.device_number_full ||
-            x.device_number == "TPE_B1_ME_M12_R2F_NA_TH_N1",
-        );
-        this.allSensorDevList[devIdx]._temp = !isNaN(parseInt(data.value))
-          ? parseInt(data.value)
-          : 0;
-      }
-    });
+    // 熱點 更換顏色---環境感知器
+    changeColorForSensorHotspot(dbId, temp) {
+        const temps = [new THREE.Color(0x00009c), new THREE.Color(0xffff31), new THREE.Color(0xff8c00), new THREE.Color(0xff0000)]
+        let index = Math.floor(temp / 10) - 1 || 0;
+        if (index > 3) {
+            index = 3
+        }
+        const viewablesToUpdate = dbId;
+        const color = temps[index]
+        // debugger
+        // this.registerHotPoint(color)
+        //   const _this=this
+        //   setInterval(() => {
+        //     _this.dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
+        //         return { color: color };
+        //     });
+        //     // sceneUpdated(true)
+        // }, 1000);
+        this.dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
 
-    //myBaja.setSubscribeDeviceEndCallBack((data) => {
-    //  if (data.findIndex((x) => x.point_name == "Temp" || x.point_name == "TEMP") != -1) {
-    //    // 顯示溫度條
-    //    console.log(showHeat)
-    //    showHeat("[name=forgeHeatBar]");
-    //  }
-    //});
-  }
+            return {
+                color: color,
+            };
+        });
+        // debugger
+        // console.log("3", this.dataVizExtn)
+    }
 
-  // 位置呈現
-  changeSensorPos = async function () {
-    this.dataVizExtn.removeAllViewables();
-    const DataVizCore = Autodesk.DataVisualization.Core;
-    const viewableType = DataVizCore.ViewableType.SPRITE;
-    const spriteColor = new THREE.Color(0x000000);
-    let spriteIcon = "/file/img/forge/hotspot.svg";
-    if (location.href.indexOf("localhost:5966") != -1) {
-      spriteIcon = "/img/forge/hotspot.svg";
-    } const style = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIcon);
-    const viewableData = new DataVizCore.ViewableData();
-    viewableData.spriteSize = 30
+    // 訂閱sensor設備
+    subSensorDevice() {
+        // console.log("sensor 訂閱")
+        // require(["baja!"], (baja)=>{
+        //   const sub = new baja.subscriber();
+        //   sub.attach("changed",function(){
+        //     console.log(this)
+        //   })
+        //   baja.Ord.make("local:|foxs:|station:|slot:/TPE/B1/ME/M12/U1F/NA/TH/N1/TEMP").get({subscribe: sub})
+        // })
 
-    // test 1    
-    //   const myDataList = [{ position: { x: 0, y: 0, z: this.floorHeight } }];
-    //   myDataList.forEach((myData, index) => {
-    //     const position = myData.position;
-    //     const viewable = new DataVizCore.SpriteViewable(position, style, 12982);
-    //     console.log(viewable)
-    //     viewableData.addViewable(viewable);
-    //   });
-    //   await viewableData.finish();
-    //   this.dataVizExtn.addViewables(viewableData);
-    //   console.log(this.floorHeight,this.dataVizExtn)
+        let myBaja = new subscriptionDevices();
+        myBaja.setSubscribeDevicesByBql(this.ordPath);
 
-    // test 2
-    const myDataList = [{ position: { x: 0, y: 0, z: 0 } }];
-    myDataList.forEach((myData, index) => {
-      const position = myData.position;
-      const viewable = new DataVizCore.SpriteViewable(position, style, 12982);
-      viewableData.addViewable(viewable);
-    });
-    await viewableData.finish();
-    this.dataVizExtn.addViewables(viewableData);
-    let spritesToUpdate = this.dataVizExtn.viewableData.viewables.map((v) => v.dbId);
-    this.dataVizExtn.invalidateViewables(spritesToUpdate, (viewable) => {
-      return {
-        // Move the viewable to a new location.
-        position: { x: 0, y: 0, z: 100 },
+        myBaja.setSubscribeDevicesCallBack((data) => {
+            // console.log(data)
+            this.bajaChaCallback ? this.bajaChaCallback(data) : "";
+            if (this.curDevice == null) {
+                return false;
+            }
 
-      };
-    });
-    console.log(this.floorHeight, this.dataVizExtn)
-    console.log("site")
-    //let nodeIds = this.allSensorDevList
-    //  .filter((x) => !isNaN(parseInt(x.forge_dbid)))
-    //  .map((x) => {
-    //    return { devNum: x.device_number, nodeId: parseInt(x.forge_dbid) };
-    //  });
-    //console.log("sensor", nodeIds)
-    //$.each(nodeIds, (idx, node) => {
-    //  let options = {
-    //    element: $(this.selector),
-    //    viewer: this.viewer,
-    //    nodeId: node,
-    //    floorHeight: this.floorHeight ?? [],
-    //    inited: function () {
+            data.device_number = data.device_number_full; // "TPE_B1_ME_M12_U1F_NA_TH_N1" (forge TPE_B1_ME_M12_R2F_NA_TH_N1)
 
-    //    }
-    //  }
-    //  let elevator3DObj = new elevator3D(options);
-    //  elevator3DObj.init(() => {
+            //將訂閱值塞入 subDeviceData
+            if (
+                this.subDeviceData.findIndex(d => d.device_number == this.curDevice.id) == -1
+            ) {
+                let obj = {};
+                obj.device_number = this.curDevice.id;
+                obj.dbid = this.curDevice.roomDbId;
+                this.subDeviceData.push(obj);
+            }
+            let subData = this.subDeviceData.find(
+                (x) => x.device_number == this.curDevice.id || x.device_number == "TPE_B1_ME_M12_R2F_NA_TH_N1"
+            );
 
-    //    const frags = this.viewer.model.getFragmentList();
-    //    let scale = new THREE.Vector3();
-    //    let rotation = new THREE.Quaternion();
-    //    let translation = new THREE.Vector3();
-    //    frags.getAnimTransform(node.nodeId, scale, rotation, translation);
-    //    console.log(frags.getAnimTransform(node.nodeId, scale, rotation, translation))
-    //    translation.z = this.floorHeight;
-    //    frags.updateAnimTransform(node.nodeId, scale, rotation, translation);
-    //    console.log(frags, frags.getAnimTransform(node.nodeId, scale, rotation, translation))
-    //    // let frags = elevator3DObj.fragProxys.filter(x => x.nodeId == node);
-    //    // console.log("sensor",elevator3DObj, frags)
+            if (subData) {
+                subData[data.point_name] = data.value;
+            }
+            //let norDevPoiName = matchDevice.device_normal_point_name;
+            //let cloDevPoiName = matchDevice.device_close_point_name || "";
+            //let errDevPoiName = matchDevice.device_error_point_name;
 
-    //    // let fragProxy = this.viewer.impl.getFragmentProxy(this.viewer.model, node.nodeId)
-    //    // fragProxy.position = new THREE.Vector3(0, 0, 0)
-    //    // console.log(node,fragProxy)
-    //    // fragProxy.position.z = this.floorHeight
-    //    // fragProxy.updateAnimTransform()
+            if (data.point_name == "Temp" || data.point_name == "TEMP") {
+                this.tempVal = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0;
+                // this.heatMap?.changeTemp(
+                //   this.curDevice.id,
+                //   !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0,
+                // );
+                this.curDevice.temp = this.tempVal;
+                // console.log(data.value, parseInt(data.value))
+                this.changeColorForSensorHotspot(this.curDevice.forge_dbid, parseInt(data.value))
+                // changeColorForSensorHotspot(this.curDevice.forge_dbid, parseInt(data.value))
+            }
+        });
 
-    //    //   frags.forEach((fragProxy) => {
-    //    //     console.log("sensor", this)
-    //    //     console.log("elev2")
-    //    //     fragProxy.frag.position.z = this.floorHeight
-    //    //     console.log("sensor", fragProxy, fragProxy.frag)
-    //    //     fragProxy.frag.updateAnimTransform()
-    //    //   })
+        myBaja.setSubscribeDeviceEndCallBack((data) => {
+            if (data.findIndex((x) => x.point_name == "Temp" || x.point_name == "TEMP") != -1) {
+                // 顯示溫度條
+                showHeat("[name=forgeHeatBar]");
+            }
+        });
+        // window.x = 28
+        // setInterval(()=>{
+        //   this.changeColorForSensorHotspot(this.curDevice.forge_dbid, x++)
+        // }, 2000)
+    }
 
-    //    this.viewer.impl.sceneUpdated(true)
-    //  })
-    //})
-  }
 }
\ No newline at end of file

From b6f7ff0b75654f0d6d86f13fa4816b5b85ed0592 Mon Sep 17 00:00:00 2001
From: Celeste <aafree2014@gmail.com>
Date: Wed, 15 Feb 2023 16:05:59 +0800
Subject: [PATCH 3/3] =?UTF-8?q?[=E5=89=8D=E5=8F=B0]=20=E5=91=8A=E8=AD=A6?=
 =?UTF-8?q?=E7=B3=BB=E7=B5=B1=20=E7=B6=AD=E4=BF=AE=E5=96=AE=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E5=8F=8A=E9=A1=AF=E7=A4=BA=20|=20=E5=8F=96=E5=BE=97?=
 =?UTF-8?q?=20N4=20=E8=B3=87=E6=96=99=20Ord=20=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Frontend/_alert.html          | 1635 ++++++++++++++++-----------------
 Frontend/js/n4js/alarmbaja.js |  783 ++++++++--------
 2 files changed, 1214 insertions(+), 1204 deletions(-)

diff --git a/Frontend/_alert.html b/Frontend/_alert.html
index ac70a77..98cc5b4 100644
--- a/Frontend/_alert.html
+++ b/Frontend/_alert.html
@@ -1,867 +1,866 @@
 <main id="js-page-content" role="main" class="page-content">
-		<div class="row">
-				<div class="col-sm-12 col-xl-12">
-						<h1 class="p-2 mb-0">即時告警</h1>
-						<div class="row bg-dark p-2">
-								<div class="col-auto">
-										<div class="btn-group">
-												<button id="returnFalse" onclick="setReturn(false)" type="button" class="btn btn-secondary waves-effect waves-themed">未復歸</button>
-												<button id="returnTrue" onclick="setReturn(true)" type="button" class="btn btn-secondary waves-effect waves-themed">已復歸</button>
-										</div>
-								</div>
-								<div class="col-auto">
-										<div class="btn-group">
-												<button id="unconfirmed" onclick="setConfirm(false)" type="button" class="btn btn-secondary waves-effect waves-themed">未確認</button>
-												<button id="confirmed" onclick="setConfirm(true)" type="button" class="btn btn-secondary waves-effect waves-themed">已確認</button>
-										</div>
-								</div>
-								<div class="col-auto">
-										<a href="#" id="nearthirty" class="btn btn-secondary">近30天</a>
-								</div>
-								<div class="col-auto">
-										<div class="form-group">
-												<input class="form-control" id="alr_startdate" data-val="" type="date" name="alr_startdate" value="" style="cursor: pointer">
-										</div>
-								</div>
-								<div class="col-auto">
-										<div class="form-group">
-												<input class="form-control" id="alr_enddate" data-val="" type="date" name="alr_enddate" value="" style="cursor: pointer">
-										</div>
-								</div>
-								<hr>
-
-						</div>
-
-						<div class="row bg-dark p-2 align-items-center">
-								<div class="col-auto">
-										<a href="#" id="selAllSys" onclick="selAllSysVal(this)" class="btn btn-info">全選類別</a>
-								</div>
-								<div class="col-auto">
-										<div id="alr_mainList" class="frame-wrap">
-										</div>
-								</div>
-						</div>
-						<div class="row bg-dark p-2 mb-5 align-items-center">
-								<div class="col-auto" style="padding-left: 133px">
-										<div id="alr_subList" class="frame-wrap">
-										</div>
-								</div>
-						</div>
-						<!--<div class="row bg-dark p-2 align-items-center" id="alr_mainList">
-						</div>
-						<div class="row bg-dark p-2 mb-5 align-items-center" id="alr_subList">
-						</div>-->
-
-						<div>
-								<div class="frame-wrap">
-										<table id="alertTable" class="table table-bordered table-striped text-center m-0 w-100">
-										</table>
-								</div>
-						</div>
+	<div class="row">
+		<div class="col-sm-12 col-xl-12">
+			<h1 class="p-2 mb-0">即時告警</h1>
+			<div class="row bg-dark p-2">
+				<div class="col-auto">
+					<div class="btn-group">
+						<button id="returnFalse" onclick="setReturn(false)" type="button" class="btn btn-secondary waves-effect waves-themed">未復歸</button>
+						<button id="returnTrue" onclick="setReturn(true)" type="button" class="btn btn-secondary waves-effect waves-themed">已復歸</button>
+					</div>
 				</div>
+				<div class="col-auto">
+					<div class="btn-group">
+						<button id="unconfirmed" onclick="setConfirm(false)" type="button" class="btn btn-secondary waves-effect waves-themed">未確認</button>
+						<button id="confirmed" onclick="setConfirm(true)" type="button" class="btn btn-secondary waves-effect waves-themed">已確認</button>
+					</div>
+				</div>
+				<div class="col-auto">
+					<a href="#" id="nearthirty" class="btn btn-secondary">近30天</a>
+				</div>
+				<div class="col-auto">
+					<div class="form-group">
+						<input class="form-control" id="alr_startdate" data-val="" type="date" name="alr_startdate" value="" style="cursor: pointer">
+					</div>
+				</div>
+				<div class="col-auto">
+					<div class="form-group">
+						<input class="form-control" id="alr_enddate" data-val="" type="date" name="alr_enddate" value="" style="cursor: pointer">
+					</div>
+				</div>
+				<hr>
+
+			</div>
+
+			<div class="row bg-dark p-2 align-items-center">
+				<div class="col-auto">
+					<a href="#" id="selAllSys" onclick="selAllSysVal(this)" class="btn btn-info">全選類別</a>
+				</div>
+				<div class="col-auto">
+					<div id="alr_mainList" class="frame-wrap">
+					</div>
+				</div>
+			</div>
+			<div class="row bg-dark p-2 mb-5 align-items-center">
+				<div class="col-auto" style="padding-left: 133px">
+					<div id="alr_subList" class="frame-wrap">
+					</div>
+				</div>
+			</div>
+			<!--<div class="row bg-dark p-2 align-items-center" id="alr_mainList">
+			</div>
+			<div class="row bg-dark p-2 mb-5 align-items-center" id="alr_subList">
+			</div>-->
+
+			<div>
+				<div class="frame-wrap">
+					<table id="alertTable" class="table table-bordered table-striped text-center m-0 w-100">
+					</table>
+				</div>
+			</div>
 		</div>
+	</div>
 </main>
 
 <!-- Modal center 保養/維修 -->
 <div class="modal fade" id="alr_opeRecModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
-		<div class="modal-dialog modal-dialog-centered" role="document">
-				<div class="modal-content">
-						<div class="modal-header">
-								<h4 id="opeRecTitle" class="modal-title">
-										新增維修單
-								</h4>
-								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-										<span aria-hidden="true"><i class="fal fa-times"></i></span>
-								</button>
+	<div class="modal-dialog modal-dialog-centered" role="document">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h4 id="opeRecTitle" class="modal-title">
+					新增維修單
+				</h4>
+				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+					<span aria-hidden="true"><i class="fal fa-times"></i></span>
+				</button>
+			</div>
+			<form id="opeRecForm">
+				<div class="modal-body">
+					<div class="row">
+						<div class="col-md-6">
+							<div class="form-group">
+								<label class="form-label" for="inpErrCode">異常編號</label>
+								<select class="form-control" id="inpErrCode" name="inpErrCode" disabled>
+									<option value=''>未選擇</option>
+								</select>
+							</div>
 						</div>
-						<form id="opeRecForm">
-								<div class="modal-body">
-										<div class="row">
-												<div class="col-md-6">
-														<div class="form-group">
-																<label class="form-label" for="inpErrCode">異常編號</label>
-																<select class="form-control" id="inpErrCode" name="inpErrCode" disabled>
-																		<option value=''>未選擇</option>
-																</select>
-														</div>
-												</div>
-												<div class="col-md-6">
-														<div class="form-group">
-																<label class="form-label" for="inpStaTime">預計開始時間</label>
-																<input type="date" id="inpStaTime" name="inpStaTime" class="form-control">
-														</div>
-												</div>
-												<div class="col-md-6">
-														<div class="form-group">
-																<label class="form-label" for="inpWorTyp">項目</label>
-																<select class="form-control custom-select-ri" id="inpWorTyp" name="inpWorTyp" disabled>
-																		<option value='2' selected>維修</option>
-																</select>
-														</div>
-												</div>
-												<div class="col-md-6">
-														<div class="form-group">
-																<label class="form-label" for="inpFixDo">維修項目</label>
-																<input type="text" id="inpFixDo" name="inpFixDo" class="form-control">
-														</div>
-												</div>
-												<div class="col-md-6">
-														<div class="form-group">
-																<label class="form-label" for="inpFixDoCode">維修項目代碼(設備編號)</label>
-																<select class="form-control" id="inpFixDoCode" name="inpFixDoCode">
-																		<option value=''>未選擇</option>
-																</select>
-														</div>
-												</div>
-												<div class="col-md-6">
-														<div class="form-group">
-																<label class="form-label" for="inpFixFirm">負責廠商</label>
-																<select class="form-control" id="inpFixFirm" name="inpFixFirm">
-																		<option value=''>未選擇</option>
-																</select>
-														</div>
-												</div>
-												<div class="col-md-6">
-														<div class="form-group">
-																<label class="form-label" for="inpStatus">狀態</label>
-																<div class="form-control" id="inpStatus">
-																		<div class="row container">
-																				<div class="">
-																						<input class="custom-radio-input" type="radio" name="inpSta" id="inpSta_0" value="0" checked>
-																						<label class="form-label" for="inpSta_0">未完成</label>
-																				</div>
-
-																				<div class="px-4">
-																						<input class="custom-radio-input" type="radio" name="inpSta" id="inpSta_1" value="1">
-																						<label class="form-label" for="inpSta_1">完成</label>
-																				</div>
-																		</div>
-																</div>
-														</div>
-												</div>
-												<div class="col-md-6">
-														<div class="form-group">
-																<label class="form-label" for="inpWorPerId">工作人員編號</label>
-																<select class="form-control" id="inpWorPerId" name="inpWorPerId">
-																		<option value=''>未選擇</option>
-																</select>
-														</div>
-												</div>
-												<div class="col-md-12">
-														<div class="form-group">
-																<label class="form-label" for="inpNotice">注意事項</label>
-																<textarea class="form-control" type="text" id="inpNotice" name="inpNotice" rows="7"></textarea>
-														</div>
-												</div>
-												<div class="col-md-12">
-														<div class="form-group">
-																<label class="form-label" for="inpDescription">結果描述</label>
-																<textarea class="form-control" type="text" id="inpDescription" name="inpDescription" rows="7"></textarea>
-														</div>
-												</div>
-												<div class="col-md-12">
-														<label class="form-label">上傳檔案</label>
-														<div id='alr_forImage' class="col-sm-12 forimage mt-2 p-0">
-														</div>
-														<div id='alr_forFile' class="col-sm-12 forfile mt-2 p-0">
-														</div>
-
-														<div class="form-group dropzone" id="alr_dropZone">
-																<div class="dz-message">
-																		<div class="drag-icon-cph">
-																				<i class="material-icons">backup</i>
-																		</div>
-																		<h3>選擇一個文件或拖放到這裡</h3>
-																		<p class="mb-0 col-grey">
-																				PDF檔案不超過 3MB
-																		</p>
-																</div>
-																<div class="fallback">
-																		<input name="file" type="file" multiple />
-																</div>
-														</div>
-												</div>
+						<div class="col-md-6">
+							<div class="form-group">
+								<label class="form-label" for="inpStaTime">預計開始時間</label>
+								<input type="date" id="inpStaTime" name="inpStaTime" class="form-control">
+							</div>
+						</div>
+						<div class="col-md-6">
+							<div class="form-group">
+								<label class="form-label" for="inpWorTyp">項目</label>
+								<select class="form-control custom-select-ri" id="inpWorTyp" name="inpWorTyp" disabled>
+									<option value='2' selected>維修</option>
+								</select>
+							</div>
+						</div>
+						<div class="col-md-6">
+							<div class="form-group">
+								<label class="form-label" for="inpFixDo">維修項目</label>
+								<input type="text" id="inpFixDo" name="inpFixDo" class="form-control">
+							</div>
+						</div>
+						<div class="col-md-6">
+							<div class="form-group">
+								<label class="form-label" for="inpFixDoCode">維修項目代碼(設備編號)</label>
+								<select class="form-control" id="inpFixDoCode" name="inpFixDoCode">
+									<option value=''>未選擇</option>
+								</select>
+							</div>
+						</div>
+						<div class="col-md-6">
+							<div class="form-group">
+								<label class="form-label" for="inpFixFirm">負責廠商</label>
+								<select class="form-control" id="inpFixFirm" name="inpFixFirm">
+									<option value=''>未選擇</option>
+								</select>
+							</div>
+						</div>
+						<div class="col-md-6">
+							<div class="form-group">
+								<label class="form-label" for="inpStatus">狀態</label>
+								<div class="form-control" id="inpStatus">
+									<div class="row container">
+										<div class="">
+											<input class="custom-radio-input" type="radio" name="inpSta" id="inpSta_0" value="0" checked>
+											<label class="form-label" for="inpSta_0">未完成</label>
 										</div>
+
+										<div class="px-4">
+											<input class="custom-radio-input" type="radio" name="inpSta" id="inpSta_1" value="1">
+											<label class="form-label" for="inpSta_1">完成</label>
+										</div>
+									</div>
 								</div>
-								<div class="modal-footer">
-										<button type="button" class="btn btn-secondary" id="OpeRecCanBtn" data-dismiss="modal">關閉</button>
-										<button type="button" class="btn btn-primary" id="OpeRecSendBtn" e-prevent>儲存</button>
+							</div>
+						</div>
+						<div class="col-md-6">
+							<div class="form-group">
+								<label class="form-label" for="inpWorPerId">工作人員編號</label>
+								<select class="form-control" id="inpWorPerId" name="inpWorPerId">
+									<option value=''>未選擇</option>
+								</select>
+							</div>
+						</div>
+						<div class="col-md-12">
+							<div class="form-group">
+								<label class="form-label" for="inpNotice">注意事項</label>
+								<textarea class="form-control" type="text" id="inpNotice" name="inpNotice" rows="7"></textarea>
+							</div>
+						</div>
+						<div class="col-md-12">
+							<div class="form-group">
+								<label class="form-label" for="inpDescription">結果描述</label>
+								<textarea class="form-control" type="text" id="inpDescription" name="inpDescription" rows="7"></textarea>
+							</div>
+						</div>
+						<div class="col-md-12">
+							<label class="form-label">上傳檔案</label>
+							<div id='alr_forImage' class="col-sm-12 forimage mt-2 p-0">
+							</div>
+							<div id='alr_forFile' class="col-sm-12 forfile mt-2 p-0">
+							</div>
+
+							<div class="form-group dropzone" id="alr_dropZone">
+								<div class="dz-message">
+									<div class="drag-icon-cph">
+										<i class="material-icons">backup</i>
+									</div>
+									<h3>選擇一個文件或拖放到這裡</h3>
+									<p class="mb-0 col-grey">
+										PDF檔案不超過 3MB
+									</p>
 								</div>
-						</form>
+								<div class="fallback">
+									<input name="file" type="file" multiple />
+								</div>
+							</div>
+						</div>
+					</div>
 				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" id="OpeRecCanBtn" data-dismiss="modal">關閉</button>
+					<button type="button" class="btn btn-primary" id="OpeRecSendBtn" e-prevent>儲存</button>
+				</div>
+			</form>
 		</div>
+	</div>
 </div>
 
 <script>
-		pageAct.selSysMain = null;
-		pageAct.selSysSub = null;
-		pageAct.alr_startdate = null;
-		pageAct.alr_enddate = null;
-		pageAct.imageFile = [];
-		pageAct.alrSelSysMain = []
-		pageAct.alrSelSysSub = [];
-		pageAct.selAllSysSub = false;
-		first = true;
+	pageAct.selSysMain = null;
+	pageAct.selSysSub = null;
+	pageAct.alr_startdate = null;
+	pageAct.alr_enddate = null;
+	pageAct.imageFile = [];
+	pageAct.alrSelSysMain = []
+	pageAct.alrSelSysSub = [];
+	pageAct.selAllSysSub = false;
+	first = true;
 
-		$(function () {
-				initDropzone();
-				setReturn(false);
-				setConfirm(false);
-				event();
-				sysList();
-				$('#nearthirty').click();
+	$(function () {
+		initDropzone();
+		setReturn(false);
+		setConfirm(false);
+		event();
+		sysList();
+		$('#nearthirty').click();
 
-				$('input[type=checkbox][data-type=main]').parent().on('change', function () {
-						pageAct.main_system_tag = $('input[type=checkbox]').map(function (i, v) {
-								if ($(v).data('type') == 'main') {
-										if ($(v).is(':checked')) {
-												$(`[data-main=` + $(v).prop('id') + `]`).attr('hidden', false);
-												return $(v).prop('id')
-										}
-										else
-												$(`[data-main=` + $(v).prop('id') + `]`).attr('hidden', true);
-								}
-						}).toArray();
+		$('input[type=checkbox][data-type=main]').parent().on('change', function () {
+			pageAct.main_system_tag = $('input[type=checkbox]').map(function (i, v) {
+				if ($(v).data('type') == 'main') {
+					if ($(v).is(':checked')) {
+						$(`[data-main=` + $(v).prop('id') + `]`).attr('hidden', false);
+						return $(v).prop('id')
+					}
+					else
+						$(`[data-main=` + $(v).prop('id') + `]`).attr('hidden', true);
+				}
+			}).toArray();
 
-						pageAct.SysType = null;
-				});
-
-				$('input[type=checkbox][data-type=sub]').on('click', function () {
-						if (!pageAct.selAllSysSub) {
-								console.log(this);
-								pageAct.selAllSysSub = true;
-
-								$.each($('input[type=checkbox][data-type=sub]:checked'), function (i, v) {
-										$(v).click();
-								});
-
-								if (pageAct.SysType == "all") {
-										if (!$(this).is(':checked')) {
-												$(this).prop('checked', true);
-												$(this).click();
-										}
-								}
-								pageAct.selAllSysSub = false;
-
-								$('#selAllSys').html('全選類別');
-
-								pageAct.SysType = null;
-								getData();
-						}
-				});
-
-				//$('#alr_mainList').on('click', 'a[data-type=alr_main]', function () {
-				//	$(this).parent().parent().find('a').removeClass('btn-info');
-				//	$(this).parent().parent().find('a').addClass('btn-secondary');
-				//	$(this).addClass('btn-info');
-
-				//	$('a[data-type=alr_sub]').parent().parent().find('a').removeClass('btn-info');
-				//	$('a[data-type=alr_sub]').parent().parent().find('a').addClass('btn-secondary');
-
-				//	pageAct.SysType = null;
-				//});
-
-				//$('#alr_subList, #alr_mainList').on('click', 'a[data-type=alr_sub][id!=selAllSys]', function () {
-				//	pageAct.selSysMain = $(this).parent().data('main');
-				//	pageAct.selSysSub = $(this).prop('id');
-
-				//	if ($('#selAllSys').hasClass('btn-info')) {
-				//		$('#selAllSys').removeClass('btn-info');
-				//		$('#selAllSys').addClass('btn-secondary');
-				//		$('#alr_mainList a[data-type=alr_main]').removeClass('btn-info');
-				//		$('#alr_mainList a[data-type=alr_main]').addClass('btn-secondary');
-				//		$(`#alr_mainList a[data-type=alr_main][id=` + pageAct.selSysMain + `]`).addClass('btn-info');
-				//		$('#alr_subList a[data-type=alr_sub]').parent().attr('hidden', true);
-				//		$('#alr_subList a[data-type=alr_sub]').parent('[data-main=' + pageAct.selSysMain + ']').attr('hidden', false);
-				//	}
-
-				//	$(this).parent().parent().find('a').removeClass('btn-info');
-				//	$(this).parent().parent().find('a').addClass('btn-secondary');
-				//	$(this).addClass('btn-info');
-
-				//	pageAct.SysType = null;
-				//	getData();
-				//});
-
-				first = false;
+			pageAct.SysType = null;
 		});
 
-		function event() {
-				onEvent('click', '#nearthirty', function () {
-						let today = displayDate(new Date(Date.now()), "date").replaceAll('/', '-');
-						let thirtyDays = displayDate(new Date(new Date().setDate(new Date(Date.now()).getDate() - 30)), "date").replaceAll('/', '-');
-						$('#alr_startdate').val(thirtyDays);
-						$('#alr_startdate').data('val', thirtyDays);
-						$('#alr_enddate').val(today);
-						$('#alr_enddate').data('val', today);
-						if (!$(this).hasClass('btn-info'))
-								elemSelCol($(this));
-
-						pageAct.alr_startdate = $("#alr_startdate").val();
-						pageAct.alr_enddate = $("#alr_enddate").val();
-						getData();
-				});
-
-				onEvent('change', '#alr_startdate, #alr_enddate', function () {
-						if ($('#alr_startdate').val() > $('#alr_enddate').val()) {
-								$('#alr_startdate').val($('#alr_startdate').data('val'));
-								$('#alr_enddate').val($('#alr_enddate').data('val'));
-								toast_error('不可選擇大於結束時間');
-						}
-						else {
-								let today = displayDate(new Date(Date.now()), "date").replaceAll('/', '-');
-								let alr_enddate = displayDate(new Date(new Date().setDate(new Date($('#alr_enddate').val()).getDate() - 30)), "date").replaceAll('/', '-');
-								let alr_startdate = $('#alr_startdate').val();
-								if (alr_enddate == alr_startdate && $('#alr_enddate').val() == today) {
-										$('#nearthirty').click();
-								}
-								else {
-										$('#nearthirty').removeClass('btn-info');
-										$('#nearthirty').addClass('btn-secondary');
-								}
-
-								$('#alr_startdate').data('val', $('#alr_startdate').val());
-								$('#alr_enddate').data('val', $('#alr_enddate').val());
-						}
-
-						pageAct.alr_startdate = $("#alr_startdate").val();
-						pageAct.alr_enddate = $("#alr_enddate").val();
-						getData();
-				});
-
-				onEvent('click', 'a[data-type=alr_main]', function () {
-						$(`a[data-type=alr_sub]`).parent(`[data-main!=` + $(this).prop('id') + `]`).attr('hidden', true);
-						$(`a[data-type=alr_sub]`).parent(`[data-main=` + $(this).prop('id') + `]`).attr('hidden', false);
-				});
-
-				onEvent('click', '#alertTable a[id=alr_recModal]', function () {
-						$('#alr_forImage').html('');
-						$('#alr_forFile').html('');
-						$('#inpNotice').val('');
-						$('#inpDescription').val('');
-						let alr_table = $('#alertTable').DataTable();
-						let alr_elem = $(this).parent().parent();
-						let alr_tableData = alr_table.row(alr_elem).data();
-						$('#inpErrCode').html(`<option value = ${alr_tableData.uuid}>${alr_tableData.msgText}</option>`);
-						$('#inpStaTime').val(displayDate(new Date(Date.now()), "date").replaceAll('/', '-'));
-						let deviceNumber = null
-
-						deviceNumber = pageAct.AreaTag + "_" + alr_tableData.buildingFloorName_zh.toString().split('-')[0] + "_" + alr_tableData.alarmClass.toString().split('_')[0] + "_"
-								+ alr_tableData.alarmClass.toString().split('_')[1] + "_" + alr_tableData.buildingFloorName_zh.toString().split('-')[1] + "_" + alr_tableData.sourceName_zh.toString().split('-')[0] + "_"
-								+ alr_tableData.sourceName_zh.toString().split('-')[1];
-
-						selUser();
-						selDevice();
-						selOpeFir();
-						getUser();
-
-						$('#inpFixDoCode option[data-sub=' + alr_tableData.alarmClass.toString().split('_')[1] + '][data-main=' + alr_tableData.alarmClass.toString().split('_')[0] + ']').attr('hidden', false);
-						$('#inpFixDoCode option[data-sub!=' + alr_tableData.alarmClass.toString().split('_')[1] + '][data-main!=' + alr_tableData.alarmClass.toString().split('_')[0] + ']').attr('hidden', true);
-
-						let alr_fixDoCode = $($('#inpFixDoCode option[data-sub=' + alr_tableData.alarmClass.toString().split('_')[1] + '][data-main=' + alr_tableData.alarmClass.toString().split('_')[0] + ']')[0]).val();
-						$('#inpFixDoCode').val(alr_fixDoCode);
-				});
-
-				onEvent('click', '#OpeRecSendBtn', function () {
-						let form = $("#opeRecForm");
-						$(form).validate({
-								rules: {
-										inpWorTyp: { required: true },
-										inpFixDo: { required: true },
-										inpFixDoCode: { required: true },
-										inpFixFirm: { required: true },
-										inpStatus: { required: true },
-										inpWorPerId: { required: true },
-								}
-						});
-
-						if ($(form).valid()) {
-								let url = baseApiUrl + "/operation/SavOpeRecord";
-
-								let fd = new FormData();
-								$.each(pageAct.imageFile, function (i, v) {
-										fd.append("lorf[" + i + "].id", v.id);
-										fd.append("lorf[" + i + "].file", v.file);
-										fd.append("lorf[" + i + "].save_file_name", v.save_file_name);
-										fd.append("lorf[" + i + "].ori_file_name", v.ori_file_name);
-								});
-
-								fd.append("error_code", $('#inpErrCode').val());
-								fd.append("location", "台北" + $('#buiActDrop').text() + pageAct.floor);
-								fd.append("location_code", pageAct.AreaTag + pageAct.buiTag + pageAct.floor);
-								fd.append("device_system_category_layer2", pageAct.selSysMain);
-								fd.append("device_system_category_layer3", pageAct.selSysSub);
-								fd.append("work_type", parseInt($('#inpWorTyp').val()));
-								fd.append("fix_do", $('#inpFixDo').val());
-								fd.append("fix_do_code", $('#inpFixDoCode').val());
-								fd.append("fix_firm", parseInt($('#inpFixFirm').val()));
-								fd.append("status", parseInt($('#inpStatus').val()));
-								fd.append("work_person_id", $('#inpWorPerId').val());
-								fd.append("start_time", ($('#inpStaTime').val() || null) == null ? null : new Date($('#inpStaTime').val()).toISOString());
-								fd.append("notice", $('#inpNotice').val() || null);
-								fd.append("description", $('#inpDescription').val() || null);
-
-								objSendData.Data = sendData;
-								$.ajax({
-										url: url,
-										type: "POST",
-										data: fd,
-										async: false,
-										cache: false,
-										contentType: false,
-										processData: false,
-										beforeSend: function (xhr) { xhr.setRequestHeader('Authorization', "Bearer " + cookies.get("JWT-Authorization")) },
-										success: function (res) {
-												if (!res || res.code != "0000" || !res.data) {
-
-												} else {
-														//toast_ok(common.AddSuc);
-														//$("#opeFirmModal").modal("hide");
-														$("#OpeRecCanBtn").click();
-														getData();
-												}
-										}
-								});
-
-								//ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
-								//	if (!res || res.code != "0000" || !res.data) {
-
-								//	} else {
-								//		//toast_ok(common.AddSuc);
-								//		//$("#opeFirmModal").modal("hide");
-								//		$("#OpeRecCanBtn").click();
-								//		refTable();
-								//	}
-								//}, null, "POST").send();
-						}
-				});
-		}
-
-		function setReturn(bool) {
-				pageAct.return = bool;
-				$('#returnFalse').removeClass('btn-info');
-				$('#returnTrue').removeClass('btn-info');
-				if (!bool) {
-						$('#returnFalse').removeClass('btn-secondary');
-						$('#returnFalse').addClass('btn-info');
-						$('#returnTrue').addClass('btn-secondary');
-				}
-				else {
-						$('#returnTrue').removeClass('btn-secondary');
-						$('#returnTrue').addClass('btn-info');
-						$('#returnFalse').addClass('btn-secondary');
-				}
-
-				if (!first)
-						getData();
-		}
-
-		function setConfirm(bool) {
-				pageAct.confirm = bool;
-				$('#unconfirmed').removeClass('btn-info');
-				$('#confirmed').removeClass('btn-info');
-				if (!bool) {
-						$('#unconfirmed').removeClass('btn-secondary');
-						$('#unconfirmed').addClass('btn-info');
-						$('#confirmed').addClass('btn-secondary');
-				}
-				else {
-						$('#confirmed').removeClass('btn-secondary');
-						$('#confirmed').addClass('btn-info');
-						$('#unconfirmed').addClass('btn-secondary');
-				}
-				if (!first)
-						getData();
-		}
-
-		function elemSelCol(elem) {
-				if (elem.hasClass('btn-secondary')) {
-						$(elem).removeClass('btn-secondary');
-						$(elem).addClass('btn-info');
-				}
-				else if (elem.hasClass('btn-info')) {
-						$(elem).removeClass('btn-info');
-						$(elem).addClass('btn-secondary');
-				}
-		}
-
-		function sysList() {
-				let url = baseApiUrl + "/api/GetMainSub";
-				let sendData = {
-						building_tag: pageAct.buiTag
-				}
-				objSendData.Data = sendData;
-				function success(res) {
-						let mainStrHtml = ``;
-						let subStrHtml = ``;
-						let display = pageAct.mainStatus ? "hidden" : "";
-						let firstSub = '';
-						let firstMain = '';
-
-						//if (pageAct.mainStatus) {
-						//	mainStrHtml += `<div class="col-auto">
-						//						<a href="#" id="selAllSys" onclick="selAllSysVal(this)" class="btn btn-secondary">全部類別</a>
-						//					</div>`;
-						//}
-						//else {
-						//	subStrHtml += `<div class="col-auto">
-						//						<a href="#" id="selAllSys" onclick="selAllSysVal(this)" class="btn btn-secondary">全部類別</a>
-						//					</div>`;
-						//}
-
-						//$.each(res.data.history_Main_Systems, function (i, v) {
-						//	if (pageAct.mainStatus) {
-						//		mainStrHtml += `<div class="col-auto">
-						//							<a href="#" class="btn btn-secondary" id=${v.main_system_tag} data-type="alr_main">${v.full_name}</a>
-						//						</div>`;
-						//	}
-
-						//	$.each(v.history_Sub_systems, function (i2, v2) {
-						//		let selected = (i2 == 0 && i == 0) ? "info" : "secondary";
-						//		subStrHtml += `<div class="col-auto" data-main="${v.main_system_tag}" ${display}>
-						//							<a href="#" class="btn btn-${selected}" id="${v2.sub_system_tag}" data-type="alr_sub">${v2.full_name}</a>
-						//						</div>`;
-
-						//		if (i2 == 0 && i == 0) {
-						//			pageAct.selSysSub = v2.sub_system_tag;
-						//			pageAct.selSysMain = v.main_system_tag;
-						//		}
-						//	});
-						//});
-
-						$.each(res.data.history_Main_Systems, function (i, v) {
-								if (pageAct.mainStatus) {
-										mainStrHtml += `<div class="custom-control custom-checkbox custom-control-inline">
-										<input type="checkbox" class="custom-control-input" data-type="main" id="${v.main_system_tag}">
-										<label class="custom-control-label" for="${v.main_system_tag}">${v.full_name}</label>
-									</div>`;
-
-										pageAct.alrSelSysMain.push(v);
-								}
-
-								$.each(v.history_Sub_systems, function (i2, v2) {
-										var firDis = (i == 0) ? "" : display;
-										subStrHtml += `<div class="custom-control custom-checkbox custom-control-inline" data-main="${v.main_system_tag}" ${firDis}>
-										<input type="checkbox" class="custom-control-input" data-type="sub" id="${v2.sub_system_tag}">
-										<label class="custom-control-label" for="${v2.sub_system_tag}">${v2.full_name}</label>
-									</div>`;
-
-										pageAct.alrSelSysSub.push(v2);
-
-										if (i2 == 0 && i == 0) {
-												firstMain = v.main_system_tag;
-												firstSub = v2.sub_system_tag;
-										}
-								});
-						});
-
-						if (pageAct.mainStatus) {
-								$('#alr_mainList').html(mainStrHtml);
-								$('#alr_subList').html(subStrHtml);
-								$('input[data-type=main][id=' + firstMain + ']').click();
-						}
-						else {
-								$('#alr_mainList').html(subStrHtml);
-						}
-
-						$('input[data-type=sub][id=' + firstSub + ']').click();
-				}
-				ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
-		}
-
-		function selAllSysVal(elem) {
-				$(loadEle).Loading("start");
+		$('input[type=checkbox][data-type=sub]').on('click', function () {
+			if (!pageAct.selAllSysSub) {
+				console.log(this);
 				pageAct.selAllSysSub = true;
-				if ($(elem).html() == '全選類別') {
-						$('#alr_mainList input').map(function (i, v) {
-								if (!$(v).is(':checked')) {
-										$(v).click();
-								}
-						});
-						$('#alr_subList input').map(function (i, v) {
-								if (!$(v).is(':checked')) {
-										$(v).click();
-								}
-						});
-						$(elem).html('取消全選');
-						pageAct.SysType = 'all';
-				}
-				else {
-						$('#alr_mainList input').map(function (i, v) {
-								if ($(v).is(':checked'))
-										$(v).click();
-						});
-						$('#alr_subList input').map(function (i, v) {
-								if ($(v).is(':checked'))
-										$(v).click();
-						});
-						$(elem).html('全選類別');
-						pageAct.SysType = null;
-				}
 
-				getData();
-				pageAct.selAllSysSub = false;
-		}
-
-		function getData(type = null) {
-				let enddate = new Date(new Date().setDate(new Date(pageAct.alr_enddate).getDate() + 1)).getTime();
+				$.each($('input[type=checkbox][data-type=sub]:checked'), function (i, v) {
+					$(v).click();
+				});
 
 				if (pageAct.SysType == "all") {
-						getAllDeviceAlarmByBaja(new Date(pageAct.alr_startdate).getTime(), enddate, pageAct.return, pageAct.confirm, callBackFromAllDeviceAlert);
+					if (!$(this).is(':checked')) {
+						$(this).prop('checked', true);
+						$(this).click();
+					}
+				}
+				pageAct.selAllSysSub = false;
+
+				$('#selAllSys').html('全選類別');
+
+				pageAct.SysType = null;
+				getData();
+			}
+		});
+
+		//$('#alr_mainList').on('click', 'a[data-type=alr_main]', function () {
+		//	$(this).parent().parent().find('a').removeClass('btn-info');
+		//	$(this).parent().parent().find('a').addClass('btn-secondary');
+		//	$(this).addClass('btn-info');
+
+		//	$('a[data-type=alr_sub]').parent().parent().find('a').removeClass('btn-info');
+		//	$('a[data-type=alr_sub]').parent().parent().find('a').addClass('btn-secondary');
+
+		//	pageAct.SysType = null;
+		//});
+
+		//$('#alr_subList, #alr_mainList').on('click', 'a[data-type=alr_sub][id!=selAllSys]', function () {
+		//	pageAct.selSysMain = $(this).parent().data('main');
+		//	pageAct.selSysSub = $(this).prop('id');
+
+		//	if ($('#selAllSys').hasClass('btn-info')) {
+		//		$('#selAllSys').removeClass('btn-info');
+		//		$('#selAllSys').addClass('btn-secondary');
+		//		$('#alr_mainList a[data-type=alr_main]').removeClass('btn-info');
+		//		$('#alr_mainList a[data-type=alr_main]').addClass('btn-secondary');
+		//		$(`#alr_mainList a[data-type=alr_main][id=` + pageAct.selSysMain + `]`).addClass('btn-info');
+		//		$('#alr_subList a[data-type=alr_sub]').parent().attr('hidden', true);
+		//		$('#alr_subList a[data-type=alr_sub]').parent('[data-main=' + pageAct.selSysMain + ']').attr('hidden', false);
+		//	}
+
+		//	$(this).parent().parent().find('a').removeClass('btn-info');
+		//	$(this).parent().parent().find('a').addClass('btn-secondary');
+		//	$(this).addClass('btn-info');
+
+		//	pageAct.SysType = null;
+		//	getData();
+		//});
+
+		first = false;
+	});
+
+	function event() {
+		onEvent('click', '#nearthirty', function () {
+			let today = displayDate(new Date(Date.now()), "date").replaceAll('/', '-');
+			let thirtyDays = displayDate(new Date(new Date().setDate(new Date(Date.now()).getDate() - 30)), "date").replaceAll('/', '-');
+			$('#alr_startdate').val(thirtyDays);
+			$('#alr_startdate').data('val', thirtyDays);
+			$('#alr_enddate').val(today);
+			$('#alr_enddate').data('val', today);
+			if (!$(this).hasClass('btn-info'))
+				elemSelCol($(this));
+
+			pageAct.alr_startdate = $("#alr_startdate").val();
+			pageAct.alr_enddate = $("#alr_enddate").val();
+			getData();
+		});
+
+		onEvent('change', '#alr_startdate, #alr_enddate', function () {
+			if ($('#alr_startdate').val() > $('#alr_enddate').val()) {
+				$('#alr_startdate').val($('#alr_startdate').data('val'));
+				$('#alr_enddate').val($('#alr_enddate').data('val'));
+				toast_error('不可選擇大於結束時間');
+			}
+			else {
+				let today = displayDate(new Date(Date.now()), "date").replaceAll('/', '-');
+				let alr_enddate = displayDate(new Date(new Date().setDate(new Date($('#alr_enddate').val()).getDate() - 30)), "date").replaceAll('/', '-');
+				let alr_startdate = $('#alr_startdate').val();
+				if (alr_enddate == alr_startdate && $('#alr_enddate').val() == today) {
+					$('#nearthirty').click();
 				}
 				else {
-						let elem = $('input[type=checkbox][data-type=sub]:checked');
-						pageAct.selSysMain = $(elem).parent().data('main');
-						pageAct.selSysSub = $(elem).prop('id');
-						getAlarmByBaja(new Date(pageAct.alr_startdate).getTime(), enddate, pageAct.return, pageAct.confirm, pageAct.selSysMain + "_" + pageAct.selSysSub + "_AlarmClass", callBackFromOneDeviceAlert);
+					$('#nearthirty').removeClass('btn-info');
+					$('#nearthirty').addClass('btn-secondary');
 				}
-		}
 
-		function callBackFromAllDeviceAlert(res) {
-				refTable(res.data);
-				if (historyTable != null) {
-						let t = $('#alertTable').dataTable();
+				$('#alr_startdate').data('val', $('#alr_startdate').val());
+				$('#alr_enddate').data('val', $('#alr_enddate').val());
+			}
 
-						t.fnClearTable();
-						if (res.data.length > 0)
-								t.fnAddData(res.data);
+			pageAct.alr_startdate = $("#alr_startdate").val();
+			pageAct.alr_enddate = $("#alr_enddate").val();
+			getData();
+		});
+
+		onEvent('click', 'a[data-type=alr_main]', function () {
+			$(`a[data-type=alr_sub]`).parent(`[data-main!=` + $(this).prop('id') + `]`).attr('hidden', true);
+			$(`a[data-type=alr_sub]`).parent(`[data-main=` + $(this).prop('id') + `]`).attr('hidden', false);
+		});
+
+		onEvent('click', '#alertTable a[id=alr_recModal]', function () {
+			$('#alr_forImage').html('');
+			$('#alr_forFile').html('');
+			$('#inpNotice').val('');
+			$('#inpDescription').val('');
+			let alr_table = $('#alertTable').DataTable();
+			let alr_elem = $(this).parent().parent();
+			let alr_tableData = alr_table.row(alr_elem).data();
+			$('#inpErrCode').html(`<option value = ${alr_tableData.uuid}>${alr_tableData.msgText}</option>`);
+			$('#inpStaTime').val(displayDate(new Date(Date.now()), "date").replaceAll('/', '-'));
+			let deviceNumber = null
+
+			deviceNumber = pageAct.AreaTag + "_" + alr_tableData.buildingFloorName_zh.toString().split('-')[0] + "_" + alr_tableData.alarmClass.toString().split('_')[0] + "_"
+				+ alr_tableData.alarmClass.toString().split('_')[1] + "_" + alr_tableData.buildingFloorName_zh.toString().split('-')[1] + "_" + alr_tableData.sourceName_zh.toString().split('-')[0] + "_"
+				+ alr_tableData.sourceName_zh.toString().split('-')[1];
+
+			selUser();
+			selDevice();
+			selOpeFir();
+			getUser();
+
+			$('#inpFixDoCode option[data-sub=' + alr_tableData.alarmClass.toString().split('_')[1] + '][data-main=' + alr_tableData.alarmClass.toString().split('_')[0] + ']').attr('hidden', false);
+			$('#inpFixDoCode option[data-sub!=' + alr_tableData.alarmClass.toString().split('_')[1] + '][data-main!=' + alr_tableData.alarmClass.toString().split('_')[0] + ']').attr('hidden', true);
+
+			let alr_fixDoCode = $($('#inpFixDoCode option[data-sub=' + alr_tableData.alarmClass.toString().split('_')[1] + '][data-main=' + alr_tableData.alarmClass.toString().split('_')[0] + ']')[0]).val();
+			$('#inpFixDoCode').val(alr_fixDoCode);
+		});
+
+		onEvent('click', '#OpeRecSendBtn', function () {
+			let form = $("#opeRecForm");
+			$(form).validate({
+				rules: {
+					inpWorTyp: { required: true },
+					inpFixDo: { required: true },
+					inpFixDoCode: { required: true },
+					inpFixFirm: { required: true },
+					inpStatus: { required: true },
+					inpWorPerId: { required: true },
 				}
-				$(loadEle).Loading("close");
-		}
+			});
 
-		function callBackFromOneDeviceAlert(res) {
-				//res = JSON.parse(res);
-				refTable(res.data);
-				if (historyTable != null) {
-						let t = $('#alertTable').dataTable();
+			if ($(form).valid()) {
+				let url = baseApiUrl + "/operation/SavOpeRecord";
 
-						t.fnClearTable();
-						if (res.data.length > 0)
-								t.fnAddData(res.data);
-				}
-				$(loadEle).Loading("close");
-		}
-
-		function refTable(data) {
-			let tag = "#alertTable";
-			
-			$.each(data, function (i, v) {
-					v.formId = AlertList(v.uuid.$val);
-				
+				let fd = new FormData();
+				$.each(pageAct.imageFile, function (i, v) {
+					fd.append("lorf[" + i + "].id", v.id);
+					fd.append("lorf[" + i + "].file", v.file);
+					fd.append("lorf[" + i + "].save_file_name", v.save_file_name);
+					fd.append("lorf[" + i + "].ori_file_name", v.ori_file_name);
 				});
 
-				let column_defs = [
-						{ "targets": [0], "width": "5%", "sortable": true },
-						{ "targets": [1], "width": "5%", "sortable": true },
-						{ "targets": [2], "width": "5%", "sortable": true },
-						{ "targets": [3], "width": "5%", "sortable": true },
-						{ "targets": [4], "width": "5%", "sortable": true },
-						{ "targets": [5], "width": "5%", "sortable": true },
-						{ "targets": [6], "width": "5%", "sortable": true },
-						{ "targets": [7], "width": "5%", "sortable": true },
-						{ "targets": [8], "width": "5%", "sortable": true },
-				];
+				fd.append("error_code", $('#inpErrCode').val());
+				fd.append("location", "台北" + $('#buiActDrop').text() + pageAct.floor);
+				fd.append("location_code", pageAct.AreaTag + pageAct.buiTag + pageAct.floor);
+				fd.append("device_system_category_layer2", pageAct.selSysMain);
+				fd.append("device_system_category_layer3", pageAct.selSysSub);
+				fd.append("work_type", parseInt($('#inpWorTyp').val()));
+				fd.append("fix_do", $('#inpFixDo').val());
+				fd.append("fix_do_code", $('#inpFixDoCode').val());
+				fd.append("fix_firm", parseInt($('#inpFixFirm').val()));
+				fd.append("status", parseInt($('#inpStatus').val()));
+				fd.append("work_person_id", $('#inpWorPerId').val());
+				fd.append("start_time", ($('#inpStaTime').val() || null) == null ? null : new Date($('#inpStaTime').val()).toISOString());
+				fd.append("notice", $('#inpNotice').val() || null);
+				fd.append("description", $('#inpDescription').val() || null);
 
-				let columns = [
-						{
-								"title": "棟別-樓層",
-								"data": "buildingFloorName_zh"
-						},
-						{
-								"title": "異常ID",
-								"data": "uuid",
-						},
-						{
-								"title": "異常類別",
-								"data": "alarmClass",
-								"render": function (data) {
-										return data.split('_')[0] + "-" + data.split('_')[1];
-								}
-						},
-						{
-								"title": "設備名稱",
-								"data": "sourceName_zh",
-								render: (data) => {
-										return allDevices.find(d => d.device_number === data)?.full_name || ""
-								}
-						},
-						{
-								"title": "設備編號",
-								"data": "sourceTmp",
-						},
-						{
-								"title": "發生時間",
-								"data": "timestamp",
-								"render": function (data) {
-										return new Date(data).toLocaleString('zh-tw', { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" }), displayDate(data, "datetime");
-								}
-						},
-						{
-								"title": "異常原因",
-								"data": "msgText",
-								"render": function (data) {
-										return data.split(':')[0];
-								}
-						},
-						{
-								"title": "Ack 確認",
-								"data": "ackState",
-								"render": function (data, type, row, meta) {
-										let confirm = data == "1" ? "未確認" : "確認";
-										let btnCol = data == "1" ? "warning" : "info";
-										return data == "1" ? `<td><button onclick="chgAck('${row.uuid}')" class="btn btn-${btnCol}">${confirm}</button></td>` :
-												`<td><span>${new Date(row.ackedTime
-												).toLocaleString('zh-tw')}</span></td>` /*`<td><button class="btn btn-${btnCol}">${confirm}</button></td>`*/;
-								}
-						},
-						{
-								"title": "派工/維運單號",
-								"data": "formId",
-								"render": function (data) {
-										return data ?? `<td><a href="#" id="alr_recModal" class="btn btn-info" data-toggle="modal" data-target="#alr_opeRecModal">+ 維修單</a></td>`;
-								}
-						}
-				];
-
-				historyTable = new YourTeam.JqDataTables.getTableByStatic(tag, data, columns, column_defs, null, null, null, null, "tpi");
-		}
-
-		function AlertList(errCode) {
-				objSendData.Data = { uuid: errCode };
-				let a = null
-				url = baseApiUrl + "/Alert/AlertList";
-				ytAjax = new YourTeam.Ajax(url, objSendData, function (rel) {
-						if (rel.code == "0000")
-								a = rel.data;
-				}, null, "POST").send();
-
-				return a;
-		}
-
-		function selDevice() {
-				let url = baseApiUrl + "/operation/DevList";
-				let lsst = [];
-				$('input[data-type=sub]').map(function (i, v) { lsst.push($(v).prop('id')); });
-				sendData = {
-						device_area_tag: pageAct.AreaTag,
-						device_building_tag: pageAct.buiTag,
-						list_sub_system_tag: lsst,
-				};
 				objSendData.Data = sendData;
-				ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+				$.ajax({
+					url: url,
+					type: "POST",
+					data: fd,
+					async: false,
+					cache: false,
+					contentType: false,
+					processData: false,
+					beforeSend: function (xhr) { xhr.setRequestHeader('Authorization', "Bearer " + cookies.get("JWT-Authorization")) },
+					success: function (res) {
 						if (!res || res.code != "0000" || !res.data) {
 
 						} else {
-								strHtml = ``;
-								$("#inpFixDoCode").html();
-								$.each(res.data, (index, roleObj) => {
-										strHtml += `<option value='${roleObj.device_number}' data-floor=${roleObj.device_floor_tag} data-main=${roleObj.device_system_tag} data-sub=${roleObj.device_name_tag} hidden>${roleObj.device_name}</option>`;
-
-										if (index == 0) {
-												pageAct.sysMain = roleObj.device_system_tag;
-												pageAct.sysSub = roleObj.device_name_tag;
-												pageAct.floor = roleObj.device_floor_tag;
-												pageAct.number = roleObj.device_number;
-										}
-								})
-								$("#inpFixDoCode").html(strHtml);
-						}
-				}, null, "POST").send();
-		}
-
-		function selUser() {
-				let url = baseApiUrl + "/User/UserManagerList";
-				ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
-						if (!res || res.code != "0000" || !res.data) {
-
-						} else {
-								$("#inpWorPerId").html();
-								strHtml = ``;
-								strHtml += `<option value=''>未選擇</option>`;
-								$.each(res.data, (index, roleObj) => {
-										strHtml += `<option value='${roleObj.userinfo_guid}'>${roleObj.full_name}</option>`;
-								})
-								$("#inpWorPerId").html(strHtml);
-						}
-				}, null, "POST").send();
-		}
-
-		function selOpeFir() {
-				let url = baseApiUrl + "/operation/OpeFirSel";
-				objSendData.Data = { sub_system_tag: $('input[data-type=sub]').map(function (i, v) { return $(v).prop('id'); }).toArray() };
-				console.log(objSendData.Data)
-				ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
-						if (!res || res.code != "0000" || !res.data) {
-
-						} else {
-								$("#inpFixFirm").html();
-								strHtml = ``;
-								strHtml += `<option value=''>未選擇</option>`;
-								$.each(res.data, (index, roleObj) => {
-										strHtml += `<option value='${roleObj.id}'>${roleObj.name}</option>`;
-								})
-								$("#inpFixFirm").html(strHtml);
-						}
-				}, null, "POST").send();
-		}
-
-		//上傳檔案 dropzone
-		function initDropzone() {
-				uploader = $("#alr_dropZone").dropzone({
-						url: baseApiUrl + '/api/Upload',
-						previewsContainer: false,
-						addRemoveLinks: false,
-						dictRemoveFile: `<span class="material-icons mi-delete">delete</span>`,
-						dictInvalidFileType: `上傳格式錯誤`,
-						dictCancelUploadConfirmation: `確定要取消上傳此檔案嗎？`,
-						dictCancelUpload: `<span class="material-icons mi-cancel">cancel</span>`,
-						maxFilesize: 3,
-						filesizeBase: 1024,
-						maxFiles: 50,
-						acceptedFiles: ".pdf, .docx, .doc, .xls, .xlsm, .xlsx, .ppt, .pptx, .gif, .png, .jpg, .jpeg",
-						headers: { "Authorization": 'Bearer ' + cookies.get("JWT-Authorization") },
-						accept: function (file, done) {
-								let fileHelper = new YourTeam.Utility.File();
-								tmpGuidArr = [];
-
-								if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
-										fileHelper.readAndPreviewImages(file, 'alr_forImage', 70, 70, '<span class="file-item m-1">', '<button class="btn-dark m-1" name="btnDelImg"><i class="fa fa-times"></i></button></span>');
-
-										pageAct.imageFile.map(function (v, i) { tmpGuidArr.push(v.file.guid) });
-										if (jQuery.inArray(file.guid, tmpGuidArr) == -1) { //not in array
-												let fd = new FormData();
-												let f = file;
-												fd.append('file', f);
-												pageAct.imageFile.push({ "ori_file_name": f.name, "save_file_name": f.guid, "file": fd.get("file") });
-										}
-								}
-								else if (/\.(xls?x|doc?x|ptt?x|pdf|zip|rar|7zip|txt|odt|xml|rtf|ods|odp|pps?x)$/i.test(file.name)) {
-										fileHelper.readAndPreviewFiles(file, 'alr_forFile', 70, 70, "<div class='file-item'><i class='fas fa-file-alt fa-2x m-1'></i>", "<button class='btn-dark m-1' name='btnDelImg'><i class='fa fa-times'></i></button></div>");
-
-										pageAct.imageFile.map(function (v, i) { tmpGuidArr.push(v.file.guid) });
-										if (jQuery.inArray(file.guid, tmpGuidArr) == -1) { //not in array
-												let fd = new FormData();
-												let f = file;
-												fd.append('file', f);
-												pageAct.imageFile.push({ "ori_file_name": f.name, "save_file_name": f.guid, "file": fd.get("file") });
-										}
-								}
+							//toast_ok(common.AddSuc);
+							//$("#opeFirmModal").modal("hide");
+							$("#OpeRecCanBtn").click();
+							getData();
 						}
+					}
 				});
+
+				//ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+				//	if (!res || res.code != "0000" || !res.data) {
+
+				//	} else {
+				//		//toast_ok(common.AddSuc);
+				//		//$("#opeFirmModal").modal("hide");
+				//		$("#OpeRecCanBtn").click();
+				//		refTable();
+				//	}
+				//}, null, "POST").send();
+			}
+		});
+	}
+
+	function setReturn(bool) {
+		pageAct.return = bool;
+		$('#returnFalse').removeClass('btn-info');
+		$('#returnTrue').removeClass('btn-info');
+		if (!bool) {
+			$('#returnFalse').removeClass('btn-secondary');
+			$('#returnFalse').addClass('btn-info');
+			$('#returnTrue').addClass('btn-secondary');
+		}
+		else {
+			$('#returnTrue').removeClass('btn-secondary');
+			$('#returnTrue').addClass('btn-info');
+			$('#returnFalse').addClass('btn-secondary');
 		}
 
-		function getUser() {
-				ytAjax = new YourTeam.Ajax(baseApiUrl + "/api/getUser", null, function (res) {
-						if (!res || res.code != "0000" || !res.data) {
+		if (!first)
+			getData();
+	}
 
-						} else {
-								$(pageAct.work_type == '1' ? '#inpWorPerId' : '#inpWorPerId_2').val(res.data);
-						}
-				}, null, "POST").send();
+	function setConfirm(bool) {
+		pageAct.confirm = bool;
+		$('#unconfirmed').removeClass('btn-info');
+		$('#confirmed').removeClass('btn-info');
+		if (!bool) {
+			$('#unconfirmed').removeClass('btn-secondary');
+			$('#unconfirmed').addClass('btn-info');
+			$('#confirmed').addClass('btn-secondary');
+		}
+		else {
+			$('#confirmed').removeClass('btn-secondary');
+			$('#confirmed').addClass('btn-info');
+			$('#unconfirmed').addClass('btn-secondary');
+		}
+		if (!first)
+			getData();
+	}
+
+	function elemSelCol(elem) {
+		if (elem.hasClass('btn-secondary')) {
+			$(elem).removeClass('btn-secondary');
+			$(elem).addClass('btn-info');
+		}
+		else if (elem.hasClass('btn-info')) {
+			$(elem).removeClass('btn-info');
+			$(elem).addClass('btn-secondary');
+		}
+	}
+
+	function sysList() {
+		let url = baseApiUrl + "/api/GetMainSub";
+		let sendData = {
+			building_tag: pageAct.buiTag
+		}
+		objSendData.Data = sendData;
+		function success(res) {
+			let mainStrHtml = ``;
+			let subStrHtml = ``;
+			let display = pageAct.mainStatus ? "hidden" : "";
+			let firstSub = '';
+			let firstMain = '';
+
+			//if (pageAct.mainStatus) {
+			//	mainStrHtml += `<div class="col-auto">
+			//						<a href="#" id="selAllSys" onclick="selAllSysVal(this)" class="btn btn-secondary">全部類別</a>
+			//					</div>`;
+			//}
+			//else {
+			//	subStrHtml += `<div class="col-auto">
+			//						<a href="#" id="selAllSys" onclick="selAllSysVal(this)" class="btn btn-secondary">全部類別</a>
+			//					</div>`;
+			//}
+
+			//$.each(res.data.history_Main_Systems, function (i, v) {
+			//	if (pageAct.mainStatus) {
+			//		mainStrHtml += `<div class="col-auto">
+			//							<a href="#" class="btn btn-secondary" id=${v.main_system_tag} data-type="alr_main">${v.full_name}</a>
+			//						</div>`;
+			//	}
+
+			//	$.each(v.history_Sub_systems, function (i2, v2) {
+			//		let selected = (i2 == 0 && i == 0) ? "info" : "secondary";
+			//		subStrHtml += `<div class="col-auto" data-main="${v.main_system_tag}" ${display}>
+			//							<a href="#" class="btn btn-${selected}" id="${v2.sub_system_tag}" data-type="alr_sub">${v2.full_name}</a>
+			//						</div>`;
+
+			//		if (i2 == 0 && i == 0) {
+			//			pageAct.selSysSub = v2.sub_system_tag;
+			//			pageAct.selSysMain = v.main_system_tag;
+			//		}
+			//	});
+			//});
+
+			$.each(res.data.history_Main_Systems, function (i, v) {
+				if (pageAct.mainStatus) {
+					mainStrHtml += `<div class="custom-control custom-checkbox custom-control-inline">
+									<input type="checkbox" class="custom-control-input" data-type="main" id="${v.main_system_tag}">
+									<label class="custom-control-label" for="${v.main_system_tag}">${v.full_name}</label>
+								</div>`;
+
+					pageAct.alrSelSysMain.push(v);
+				}
+
+				$.each(v.history_Sub_systems, function (i2, v2) {
+					var firDis = (i == 0) ? "" : display;
+					subStrHtml += `<div class="custom-control custom-checkbox custom-control-inline" data-main="${v.main_system_tag}" ${firDis}>
+									<input type="checkbox" class="custom-control-input" data-type="sub" id="${v2.sub_system_tag}">
+									<label class="custom-control-label" for="${v2.sub_system_tag}">${v2.full_name}</label>
+								</div>`;
+
+					pageAct.alrSelSysSub.push(v2);
+
+					if (i2 == 0 && i == 0) {
+						firstMain = v.main_system_tag;
+						firstSub = v2.sub_system_tag;
+					}
+				});
+			});
+
+			if (pageAct.mainStatus) {
+				$('#alr_mainList').html(mainStrHtml);
+				$('#alr_subList').html(subStrHtml);
+				$('input[data-type=main][id=' + firstMain + ']').click();
+			}
+			else {
+				$('#alr_mainList').html(subStrHtml);
+			}
+
+			$('input[data-type=sub][id=' + firstSub + ']').click();
+		}
+		ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
+	}
+
+	function selAllSysVal(elem) {
+		$(loadEle).Loading("start");
+		pageAct.selAllSysSub = true;
+		if ($(elem).html() == '全選類別') {
+			$('#alr_mainList input').map(function (i, v) {
+				if (!$(v).is(':checked')) {
+					$(v).click();
+				}
+			});
+			$('#alr_subList input').map(function (i, v) {
+				if (!$(v).is(':checked')) {
+					$(v).click();
+				}
+			});
+			$(elem).html('取消全選');
+			pageAct.SysType = 'all';
+		}
+		else {
+			$('#alr_mainList input').map(function (i, v) {
+				if ($(v).is(':checked'))
+					$(v).click();
+			});
+			$('#alr_subList input').map(function (i, v) {
+				if ($(v).is(':checked'))
+					$(v).click();
+			});
+			$(elem).html('全選類別');
+			pageAct.SysType = null;
 		}
 
-		function chgAck(devUuid) {
-				$.post(window.location.origin + '/obix/alarm/' + devUuid + '/ack', '<obj is="obix:AckAlarmIn"><str name="ackUser" val="obix" /></obj>', null, "text");
-				getData();
+		getData();
+		pageAct.selAllSysSub = false;
+	}
+
+	function getData(type = null) {
+		let enddate = new Date(new Date().setDate(new Date(pageAct.alr_enddate).getDate() + 1)).getTime();
+
+		if (pageAct.SysType == "all") {
+			getAllDeviceAlarmByBaja(new Date(pageAct.alr_startdate).getTime(), enddate, pageAct.return, pageAct.confirm, callBackFromAllDeviceAlert);
 		}
+		else {
+			let elem = $('input[type=checkbox][data-type=sub]:checked');
+			pageAct.selSysMain = $(elem).parent().data('main');
+			pageAct.selSysSub = $(elem).prop('id');
+			getAlarmByBaja(new Date(pageAct.alr_startdate).getTime(), enddate, pageAct.return, pageAct.confirm, pageAct.selSysMain + "_" + pageAct.selSysSub + "_AlarmClass", callBackFromOneDeviceAlert);
+		}
+	}
+
+	function callBackFromAllDeviceAlert(res) {
+		refTable(res.data);
+		if (historyTable != null) {
+			let t = $('#alertTable').dataTable();
+
+			t.fnClearTable();
+			if (res.data.length > 0)
+				t.fnAddData(res.data);
+		}
+		$(loadEle).Loading("close");
+	}
+
+	function callBackFromOneDeviceAlert(res) {
+		//res = JSON.parse(res);
+		refTable(res.data);
+		if (historyTable != null) {
+			let t = $('#alertTable').dataTable();
+
+			t.fnClearTable();
+			if (res.data.length > 0)
+				t.fnAddData(res.data);
+		}
+		$(loadEle).Loading("close");
+	}
+
+	function refTable(data) {
+		let tag = "#alertTable";
+
+		$.each(data, function (i, v) {
+			v.formId = AlertList(v.uuid.$val || v.uuid);
+		});
+
+		let column_defs = [
+			{ "targets": [0], "width": "5%", "sortable": true },
+			{ "targets": [1], "width": "5%", "sortable": true },
+			{ "targets": [2], "width": "5%", "sortable": true },
+			{ "targets": [3], "width": "5%", "sortable": true },
+			{ "targets": [4], "width": "5%", "sortable": true },
+			{ "targets": [5], "width": "5%", "sortable": true },
+			{ "targets": [6], "width": "5%", "sortable": true },
+			{ "targets": [7], "width": "5%", "sortable": true },
+			{ "targets": [8], "width": "5%", "sortable": true },
+		];
+
+		let columns = [
+			{
+				"title": "棟別-樓層",
+				"data": "buildingFloorName_zh"
+			},
+			{
+				"title": "異常ID",
+				"data": "uuid",
+			},
+			{
+				"title": "異常類別",
+				"data": "alarmClass",
+				"render": function (data) {
+					return data.split('_')[0] + "-" + data.split('_')[1];
+				}
+			},
+			{
+				"title": "設備名稱",
+				"data": "sourceName_zh",
+				render: (data) => {
+					return allDevices.find(d => d.device_number === data)?.full_name || ""
+				}
+			},
+			{
+				"title": "設備編號",
+				"data": "sourceTmp",
+			},
+			{
+				"title": "發生時間",
+				"data": "timestamp",
+				"render": function (data) {
+					return new Date(data).toLocaleString('zh-tw', { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" }), displayDate(data, "datetime");
+				}
+			},
+			{
+				"title": "異常原因",
+				"data": "msgText",
+				"render": function (data) {
+					return data.split(':')[0];
+				}
+			},
+			{
+				"title": "Ack 確認",
+				"data": "ackState",
+				"render": function (data, type, row, meta) {
+					let confirm = data == "1" ? "未確認" : "確認";
+					let btnCol = data == "1" ? "warning" : "info";
+					return data == "1" ? `<td><button onclick="chgAck('${row.uuid}')" class="btn btn-${btnCol}">${confirm}</button></td>` :
+						`<td><span>${new Date(row.ackedTime
+						).toLocaleString('zh-tw')}</span></td>` /*`<td><button class="btn btn-${btnCol}">${confirm}</button></td>`*/;
+				}
+			},
+			{
+				"title": "派工/維運單號",
+				"data": "formId",
+				"render": function (data) {
+					return data ?? `<td><a href="#" id="alr_recModal" class="btn btn-info" data-toggle="modal" data-target="#alr_opeRecModal">+ 維修單</a></td>`;
+				}
+			}
+		];
+
+		historyTable = new YourTeam.JqDataTables.getTableByStatic(tag, data, columns, column_defs, null, null, null, null, "tpi");
+	}
+
+	function AlertList(errCode) {
+		objSendData.Data = { uuid: errCode };
+		let a = null
+		url = baseApiUrl + "/Alert/AlertList";
+		ytAjax = new YourTeam.Ajax(url, objSendData, function (rel) {
+			if (rel.code == "0000")
+				a = rel.data;
+		}, null, "POST").send();
+
+		return a;
+	}
+
+	function selDevice() {
+		let url = baseApiUrl + "/operation/DevList";
+		let lsst = [];
+		$('input[data-type=sub]').map(function (i, v) { lsst.push($(v).prop('id')); });
+		sendData = {
+			device_area_tag: pageAct.AreaTag,
+			device_building_tag: pageAct.buiTag,
+			list_sub_system_tag: lsst,
+		};
+		objSendData.Data = sendData;
+		ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+			if (!res || res.code != "0000" || !res.data) {
+
+			} else {
+				strHtml = ``;
+				$("#inpFixDoCode").html();
+				$.each(res.data, (index, roleObj) => {
+					strHtml += `<option value='${roleObj.device_number}' data-floor=${roleObj.device_floor_tag} data-main=${roleObj.device_system_tag} data-sub=${roleObj.device_name_tag} hidden>${roleObj.device_name}</option>`;
+
+					if (index == 0) {
+						pageAct.sysMain = roleObj.device_system_tag;
+						pageAct.sysSub = roleObj.device_name_tag;
+						pageAct.floor = roleObj.device_floor_tag;
+						pageAct.number = roleObj.device_number;
+					}
+				})
+				$("#inpFixDoCode").html(strHtml);
+			}
+		}, null, "POST").send();
+	}
+
+	function selUser() {
+		let url = baseApiUrl + "/User/UserManagerList";
+		ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+			if (!res || res.code != "0000" || !res.data) {
+
+			} else {
+				$("#inpWorPerId").html();
+				strHtml = ``;
+				strHtml += `<option value=''>未選擇</option>`;
+				$.each(res.data, (index, roleObj) => {
+					strHtml += `<option value='${roleObj.userinfo_guid}'>${roleObj.full_name}</option>`;
+				})
+				$("#inpWorPerId").html(strHtml);
+			}
+		}, null, "POST").send();
+	}
+
+	function selOpeFir() {
+		let url = baseApiUrl + "/operation/OpeFirSel";
+		objSendData.Data = { sub_system_tag: $('input[data-type=sub]').map(function (i, v) { return $(v).prop('id'); }).toArray() };
+		console.log(objSendData.Data)
+		ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+			if (!res || res.code != "0000" || !res.data) {
+
+			} else {
+				$("#inpFixFirm").html();
+				strHtml = ``;
+				strHtml += `<option value=''>未選擇</option>`;
+				$.each(res.data, (index, roleObj) => {
+					strHtml += `<option value='${roleObj.id}'>${roleObj.name}</option>`;
+				})
+				$("#inpFixFirm").html(strHtml);
+			}
+		}, null, "POST").send();
+	}
+
+	//上傳檔案 dropzone
+	function initDropzone() {
+		uploader = $("#alr_dropZone").dropzone({
+			url: baseApiUrl + '/api/Upload',
+			previewsContainer: false,
+			addRemoveLinks: false,
+			dictRemoveFile: `<span class="material-icons mi-delete">delete</span>`,
+			dictInvalidFileType: `上傳格式錯誤`,
+			dictCancelUploadConfirmation: `確定要取消上傳此檔案嗎？`,
+			dictCancelUpload: `<span class="material-icons mi-cancel">cancel</span>`,
+			maxFilesize: 3,
+			filesizeBase: 1024,
+			maxFiles: 50,
+			acceptedFiles: ".pdf, .docx, .doc, .xls, .xlsm, .xlsx, .ppt, .pptx, .gif, .png, .jpg, .jpeg",
+			headers: { "Authorization": 'Bearer ' + cookies.get("JWT-Authorization") },
+			accept: function (file, done) {
+				let fileHelper = new YourTeam.Utility.File();
+				tmpGuidArr = [];
+
+				if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
+					fileHelper.readAndPreviewImages(file, 'alr_forImage', 70, 70, '<span class="file-item m-1">', '<button class="btn-dark m-1" name="btnDelImg"><i class="fa fa-times"></i></button></span>');
+
+					pageAct.imageFile.map(function (v, i) { tmpGuidArr.push(v.file.guid) });
+					if (jQuery.inArray(file.guid, tmpGuidArr) == -1) { //not in array
+						let fd = new FormData();
+						let f = file;
+						fd.append('file', f);
+						pageAct.imageFile.push({ "ori_file_name": f.name, "save_file_name": f.guid, "file": fd.get("file") });
+					}
+				}
+				else if (/\.(xls?x|doc?x|ptt?x|pdf|zip|rar|7zip|txt|odt|xml|rtf|ods|odp|pps?x)$/i.test(file.name)) {
+					fileHelper.readAndPreviewFiles(file, 'alr_forFile', 70, 70, "<div class='file-item'><i class='fas fa-file-alt fa-2x m-1'></i>", "<button class='btn-dark m-1' name='btnDelImg'><i class='fa fa-times'></i></button></div>");
+
+					pageAct.imageFile.map(function (v, i) { tmpGuidArr.push(v.file.guid) });
+					if (jQuery.inArray(file.guid, tmpGuidArr) == -1) { //not in array
+						let fd = new FormData();
+						let f = file;
+						fd.append('file', f);
+						pageAct.imageFile.push({ "ori_file_name": f.name, "save_file_name": f.guid, "file": fd.get("file") });
+					}
+				}
+			}
+		});
+	}
+
+	function getUser() {
+		ytAjax = new YourTeam.Ajax(baseApiUrl + "/api/getUser", null, function (res) {
+			if (!res || res.code != "0000" || !res.data) {
+
+			} else {
+				$(pageAct.work_type == '1' ? '#inpWorPerId' : '#inpWorPerId_2').val(res.data);
+			}
+		}, null, "POST").send();
+	}
+
+	function chgAck(devUuid) {
+		$.post(window.location.origin + '/obix/alarm/' + devUuid + '/ack', '<obj is="obix:AckAlarmIn"><str name="ackUser" val="obix" /></obj>', null, "text");
+		getData();
+	}
 </script>
\ No newline at end of file
diff --git a/Frontend/js/n4js/alarmbaja.js b/Frontend/js/n4js/alarmbaja.js
index 1e63d7f..d15ce11 100644
--- a/Frontend/js/n4js/alarmbaja.js
+++ b/Frontend/js/n4js/alarmbaja.js
@@ -1,6 +1,6 @@
 
 function addzero(num) {
-  return num < 10 ? '0' + num : num;
+    return num < 10 ? '0' + num : num;
 }
 
 /**
@@ -85,45 +85,46 @@ function addzero(num) {
 //     });
 // }
 function getAlarmByBaja(startDate_millisecond, endDate_millisecond, isRecover, isAck, alarmClass, callback) {
-  let _sourceTmp;
-  var _result = "";
-  var _ss = [];
-  var _bfName = "";
-  var _sourceName = "";
-  var _index = 0;
-  var _recoverState = isRecover ? "!= null" : "= null";
-  var _ackState = isAck ? "= 'acked'" : "= 'unacked'";
-  console.log("local:|foxs:|alarm:|bql:select timestamp, ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime from openAlarms where alarmClass = '" + alarmClass + "' and timestamp.millis > " + startDate_millisecond + " and timestamp.millis < " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp asc")
-  require(['baja!'], function (baja) {
-    baja.Ord.make("local:|foxs:|alarm:|bql:select timestamp, ackTime, ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime from openAlarms where alarmClass = '" + alarmClass + "' and timestamp.millis > " + startDate_millisecond + " and timestamp.millis < " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp asc").get()
-      .then(function (table) {
-        return table.cursor({
-          each: function (record) {
-            const alarmDisplayName = record.get('alarmData').get('sourceName').split(":")[1] ?? record.get('alarmData').get('sourceName').split(":")[0]
-            //console.log(alarmDisplayName)
-            _sourceTmp = alarmDisplayName.split('_');
-            _bfName = _sourceTmp[1] + "-" + _sourceTmp[4];
-            _sourceName = _sourceTmp.slice(0, 8).join("_");
-            _sourceTmp = _sourceTmp[7] + "-" + _sourceTmp[8];
-            if (!_sourceTmp.includes("undefined")) {
-              _ss.push({ buildingFloorName_zh: _bfName, uuid: record.get('uuid'), timestamp: record.get('timestamp').$cEncStr, alarmClass: record.get('alarmClass'), sourceName_zh: _sourceName, sourceTmp: _sourceTmp, msgText: record.get('alarmData').get('msgText'), ackState: record.get('ackState'), normalTime: record.get('normalTime'), ackedTime: record.get('ackTime').$cEncStr })
-            }
-            _index++
-          },
-          after: function () {
-            _result = { count: _index, data: _ss }
+    let _sourceTmp;
+    var _result = "";
+    var _ss = [];
+    var _bfName = "";
+    var _sourceName = "";
+    var _index = 0;
+    var _recoverState = isRecover ? "!= null" : "= null";
+    var _ackState = isAck ? "= 'acked'" : "= 'unacked'";
+    console.log("local:|foxs:|alarm:|bql:select timestamp, ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where alarmClass = '" + alarmClass + "' and timestamp.millis > " + startDate_millisecond + " and timestamp.millis < " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp asc")
+    require(['baja!'], function (baja) {
+        baja.Ord.make("local:|foxs:|alarm:|bql:select timestamp, ackTime, ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where alarmClass = '" + alarmClass + "' and timestamp.millis > " + startDate_millisecond + " and timestamp.millis < " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp asc").get()
+            .then(function (table) {
+                return table.cursor({
+                    each: function (record) {
+                        // console.log(record)
+                        const alarmDisplayName = record.get('alarmData').get('sourceName').split(":")[1] ?? record.get('alarmData').get('sourceName').split(":")[0]
+                        //console.log(alarmDisplayName)
+                        _sourceTmp = alarmDisplayName.split('_');
+                        _bfName = _sourceTmp[1] + "-" + _sourceTmp[4];
+                        _sourceName = _sourceTmp.slice(0, 8).join("_");
+                        _sourceTmp = _sourceTmp[7] + "-" + _sourceTmp[8];
+                        if (!_sourceTmp.includes("undefined")) {
+                            _ss.push({ buildingFloorName_zh: _bfName, uuid: record.get('uuid'), timestamp: record.get('timestamp').$cEncStr, alarmClass: record.get('alarmClass'), sourceName_zh: _sourceName, sourceTmp: _sourceTmp, msgText: record.get('alarmData').get('msgText'), ackState: record.get('ackState'), normalTime: record.get('normalTime'), ackedTime: record.get('ackTime').$cEncStr })
+                        }
+                        _index++
+                    },
+                    after: function () {
+                        _result = { count: _index, data: _ss }
 
-            //console.log(552, _result);
+                        //console.log(552, _result);
 
-            if (typeof callback === 'function') {
-              callback(_result);
-            }
-          },
-          limit: -1,
-          offset: 0
-        });
-      });
-  });
+                        if (typeof callback === 'function') {
+                            callback(_result);
+                        }
+                    },
+                    limit: -1,
+                    offset: 0
+                });
+            });
+    });
 }
 
 /**
@@ -161,45 +162,45 @@ function getAlarmByBaja(startDate_millisecond, endDate_millisecond, isRecover, i
 //     });
 // }
 function getOneDeviceAlarmTop10ByBaja(devicePath, callback) {
-  var _result = {};
-  var _ss = [];
-  var _occurrenceTime = "";
-  var _normalTime = "";
-  var _index = 0;
-  //{ "count":2,"data": [{ "time": "2022/11/14 15:00:00", "errId": "0001", "ackCheck": "未確認", "errReason": "燈泡故障" }, { "time": "2022/11/14 15:00:00", "errId": "0002", "ackCheck": "未確認", "errReason": "燈泡故障" }]}
-  require(['baja!'], function (baja) {
-    baja.Ord.make("local:|foxs:|alarm:|bql:select top 10 timestamp, ackState, alarmData, alarmData.sourceName, sourceState, uuid, alarmData.msgText, normalTime where alarmData.sourceName like '%" + devicePath + "%' order by timestamp desc").get()
-      .then(function (table) {
-        return table.cursor({
-          each: function (record) {
-            _occurrenceTime = "";
-            _normalTime = "";
-            // console.log(record.get('timestamp'),record.get('normalTime') )
-            var _resultUuid = record.get('uuid').toString().split("-");//43dc7846-bd96-4be2-ab35-f11aec729c60
+    var _result = {};
+    var _ss = [];
+    var _occurrenceTime = "";
+    var _normalTime = "";
+    var _index = 0;
+    //{ "count":2,"data": [{ "time": "2022/11/14 15:00:00", "errId": "0001", "ackCheck": "未確認", "errReason": "燈泡故障" }, { "time": "2022/11/14 15:00:00", "errId": "0002", "ackCheck": "未確認", "errReason": "燈泡故障" }]}
+    require(['baja!'], function (baja) {
+        baja.Ord.make("local:|foxs:|alarm:|bql:select top 10 timestamp, ackState, alarmData, alarmData.sourceName, sourceState, uuid, alarmData.msgText, normalTime where alarmData.sourceName like '%" + devicePath + "%' order by timestamp desc").get()
+            .then(function (table) {
+                return table.cursor({
+                    each: function (record) {
+                        _occurrenceTime = "";
+                        _normalTime = "";
+                        // console.log(record.get('timestamp'),record.get('normalTime') )
+                        var _resultUuid = record.get('uuid').toString().split("-");//43dc7846-bd96-4be2-ab35-f11aec729c60
 
-            var _occurrenceTime = new Date(record.get('timestamp').$cEncStr).toLocaleString('zh-tw', { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" });
-            // _occurrenceTime += _timestampTemp.getFullYear().toString() + "-" + addzero(_timestampTemp.getMonth() + 1).toString() + "-" + addzero(_timestampTemp.getDate()).toString() + " " + addzero(_timestampTemp.getHours()).toString() + ":" + addzero(_timestampTemp.getMinutes()).toString() + ":" + addzero(_timestampTemp.getSeconds()).toString();
+                        var _occurrenceTime = new Date(record.get('timestamp').$cEncStr).toLocaleString('zh-tw', { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" });
+                        // _occurrenceTime += _timestampTemp.getFullYear().toString() + "-" + addzero(_timestampTemp.getMonth() + 1).toString() + "-" + addzero(_timestampTemp.getDate()).toString() + " " + addzero(_timestampTemp.getHours()).toString() + ":" + addzero(_timestampTemp.getMinutes()).toString() + ":" + addzero(_timestampTemp.getSeconds()).toString();
 
-            //var _occurrenceTime = _timestamp.format("yyyy-MM-dd hh:mm:ss");//.toLocaleString();
-            var _normalTime = new Date(record.get('normalTime').$cEncStr).toLocaleString('zh-tw', { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" });
-            // _normalTime += _normaltime.getFullYear().toString() + "-" + addzero(_normaltime.getMonth() + 1).toString() + "-" + addzero(_normaltime.getDate()).toString() + " " + addzero(_normaltime.getHours()).toString() + ":" + addzero(_normaltime.getMinutes()).toString() + ":" + addzero(_normaltime.getSeconds()).toString();
+                        //var _occurrenceTime = _timestamp.format("yyyy-MM-dd hh:mm:ss");//.toLocaleString();
+                        var _normalTime = new Date(record.get('normalTime').$cEncStr).toLocaleString('zh-tw', { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" });
+                        // _normalTime += _normaltime.getFullYear().toString() + "-" + addzero(_normaltime.getMonth() + 1).toString() + "-" + addzero(_normaltime.getDate()).toString() + " " + addzero(_normaltime.getHours()).toString() + ":" + addzero(_normaltime.getMinutes()).toString() + ":" + addzero(_normaltime.getSeconds()).toString();
 
-            var _msgText = record.get('alarmData').get('msgText');// == 1 ? _occurrenceTime : "未確認";
-            var _ackText = record.get('ackState') == 1 ? _occurrenceTime : "未確認";
-            _ss.push({ uuid: _resultUuid[0], msgText: _msgText, ackState: _ackText, timestamp: _occurrenceTime, normalTime: _normalTime })
-            _index++;
-          },
-          after: function () {
-            _result = JSON.stringify({ count: _index, data: _ss })
-            if (typeof callback === 'function') {
-              callback(_result);
-            }
-          },
-          limit: -1,
-          offset: 0
-        });
-      });
-  });
+                        var _msgText = record.get('alarmData').get('msgText');// == 1 ? _occurrenceTime : "未確認";
+                        var _ackText = record.get('ackState') == 1 ? _occurrenceTime : "未確認";
+                        _ss.push({ uuid: _resultUuid[0], msgText: _msgText, ackState: _ackText, timestamp: _occurrenceTime, normalTime: _normalTime })
+                        _index++;
+                    },
+                    after: function () {
+                        _result = JSON.stringify({ count: _index, data: _ss })
+                        if (typeof callback === 'function') {
+                            callback(_result);
+                        }
+                    },
+                    limit: -1,
+                    offset: 0
+                });
+            });
+    });
 }
 
 /**
@@ -233,34 +234,34 @@ function getOneDeviceAlarmTop10ByBaja(devicePath, callback) {
 //     });
 // }
 function getOneSystemAlarmStateByBaja(systemPath, callback) {
-  var _result = "";
-  var _ss = "";
-  var _index = 0;
-/*  console.log("local:|foxs:|alarm:|bql:select alarmData, alarmData.sourceName, sourceState, uuid where alarmData.sourceName like '%" + systemPath + "%' order by timestamp desc")*/
-  require(['baja!'], function (baja) {
-    baja.Ord.make("local:|foxs:|alarm:|bql:select alarmData, alarmData.sourceName, sourceState, uuid where alarmData.sourceName like '%" + systemPath + "%' order by timestamp desc").get()
-      .then(function (table) {
-        return table.cursor({
-          each: function (record) {
-            if (_index == 0)
-              _ss += '{"uuid":"' + record.get('uuid') + '", "sourceName":"' + record.get('alarmData').get('sourceName') + '", "sourceState":"' + record.get('sourceState') + '"}';
-            else
-              _ss += ',{"uuid":"' + record.get('uuid') + '", "sourceName":"' + record.get('alarmData').get('sourceName') + '", "sourceState":"' + record.get('sourceState') + '"}';
-            _index++;
-          },
-          after: function () {
-            _result += '{' + '"count": ' + _index + ', "data":[';
-            _result += _ss;
-            _result += ']}';
-            if (typeof callback === 'function') {
-              callback(_result);
-            }
-          },
-          limit: -1,
-          offset: 0
-        });
-      });
-  });
+    var _result = "";
+    var _ss = "";
+    var _index = 0;
+    /*  console.log("local:|foxs:|alarm:|bql:select alarmData, alarmData.sourceName, sourceState, uuid where alarmData.sourceName like '%" + systemPath + "%' order by timestamp desc")*/
+    require(['baja!'], function (baja) {
+        baja.Ord.make("local:|foxs:|alarm:|bql:select alarmData, alarmData.sourceName, sourceState, uuid where alarmData.sourceName like '%" + systemPath + "%' order by timestamp desc").get()
+            .then(function (table) {
+                return table.cursor({
+                    each: function (record) {
+                        if (_index == 0)
+                            _ss += '{"uuid":"' + record.get('uuid') + '", "sourceName":"' + record.get('alarmData').get('sourceName') + '", "sourceState":"' + record.get('sourceState') + '"}';
+                        else
+                            _ss += ',{"uuid":"' + record.get('uuid') + '", "sourceName":"' + record.get('alarmData').get('sourceName') + '", "sourceState":"' + record.get('sourceState') + '"}';
+                        _index++;
+                    },
+                    after: function () {
+                        _result += '{' + '"count": ' + _index + ', "data":[';
+                        _result += _ss;
+                        _result += ']}';
+                        if (typeof callback === 'function') {
+                            callback(_result);
+                        }
+                    },
+                    limit: -1,
+                    offset: 0
+                });
+            });
+    });
 }
 
 /**
@@ -269,35 +270,35 @@ function getOneSystemAlarmStateByBaja(systemPath, callback) {
  * @param {any} callback
  */
 function getOneSystemStateByBaja(systemPath, callback) {
-  var _result = "";
-  var _ss = "";
-  var _index = 0;
+    var _result = "";
+    var _ss = "";
+    var _index = 0;
 
-  require(['baja!'], function (baja) {
-    baja.Ord.make("local:|foxs:|alarm:|bql:select top 1 alarmData, alarmData.sourceName, sourceState where alarmData.sourceName like '%" + systemPath + "%' order by timestamp desc").get()
-      .then(function (table) {
-        return table.cursor({
-          each: function (record) {
-            //if (_index == 0)
-            //    _ss += '{"sourceState":"' + record.get('sourceState') + '"}';
-            //else
-            //    _ss += '{"sourceState":"' + record.get('sourceState') + '"}';
-            _ss += '{"sourceState":"' + record.get('sourceState') + '"}';
-            _index++;
-          },
-          after: function () {
-            _result += '{' + '"count": ' + _index + ', "data":[';
-            _result += _ss;
-            _result += ']}';
-            if (typeof callback === 'function') {
-              callback(_result);
-            }
-          },
-          limit: -1,
-          offset: 0
-        });
-      });
-  });
+    require(['baja!'], function (baja) {
+        baja.Ord.make("local:|foxs:|alarm:|bql:select top 1 alarmData, alarmData.sourceName, sourceState where alarmData.sourceName like '%" + systemPath + "%' order by timestamp desc").get()
+            .then(function (table) {
+                return table.cursor({
+                    each: function (record) {
+                        //if (_index == 0)
+                        //    _ss += '{"sourceState":"' + record.get('sourceState') + '"}';
+                        //else
+                        //    _ss += '{"sourceState":"' + record.get('sourceState') + '"}';
+                        _ss += '{"sourceState":"' + record.get('sourceState') + '"}';
+                        _index++;
+                    },
+                    after: function () {
+                        _result += '{' + '"count": ' + _index + ', "data":[';
+                        _result += _ss;
+                        _result += ']}';
+                        if (typeof callback === 'function') {
+                            callback(_result);
+                        }
+                    },
+                    limit: -1,
+                    offset: 0
+                });
+            });
+    });
 }
 
 /**
@@ -305,27 +306,27 @@ function getOneSystemStateByBaja(systemPath, callback) {
  * @param {any} callback
  */
 function getAlarmCountByBaja(callback) {
-  var _result = { count: 0 };
-  var _index = 0;
+    var _result = { count: 0 };
+    var _index = 0;
 
-  require(['baja!'], function (baja) {
-    baja.Ord.make("local:|foxs:|alarm:|bql:select sourceState where sourceState = 'offnormal'").get()
-      .then(function (table) {
-        return table.cursor({
-          each: function (record) {
-            _index++;
-          },
-          after: function () {
-            _result.count = _index;
-            if (typeof callback === 'function') {
-              callback(_result);
-            }
-          },
-          limit: -1,
-          offset: 0
-        });
-      });
-  });
+    require(['baja!'], function (baja) {
+        baja.Ord.make("local:|foxs:|alarm:|bql:select sourceState where sourceState = 'offnormal'").get()
+            .then(function (table) {
+                return table.cursor({
+                    each: function (record) {
+                        _index++;
+                    },
+                    after: function () {
+                        _result.count = _index;
+                        if (typeof callback === 'function') {
+                            callback(_result);
+                        }
+                    },
+                    limit: -1,
+                    offset: 0
+                });
+            });
+    });
 }
 
 /**
@@ -333,27 +334,27 @@ function getAlarmCountByBaja(callback) {
  * @param {any} callback
  */
 function getRecoverCountByBaja(callback) {
-  var _result = { count: 0 };
-  var _index = 0;
+    var _result = { count: 0 };
+    var _index = 0;
 
-  require(['baja!'], function (baja) {
-    baja.Ord.make("local:|foxs:|alarm:|bql:select normalTime where normalTime != null").get()
-      .then(function (table) {
-        return table.cursor({
-          each: function (record) {
-            _index++;
-          },
-          after: function () {
-            _result.count = _index;
-            if (typeof callback === 'function') {
-              callback(_result);
-            }
-          },
-          limit: -1,
-          offset: 0
-        });
-      });
-  });
+    require(['baja!'], function (baja) {
+        baja.Ord.make("local:|foxs:|alarm:|bql:select normalTime where normalTime != null").get()
+            .then(function (table) {
+                return table.cursor({
+                    each: function (record) {
+                        _index++;
+                    },
+                    after: function () {
+                        _result.count = _index;
+                        if (typeof callback === 'function') {
+                            callback(_result);
+                        }
+                    },
+                    limit: -1,
+                    offset: 0
+                });
+            });
+    });
 }
 
 /**
@@ -361,27 +362,27 @@ function getRecoverCountByBaja(callback) {
  * @param {any} callback
  */
 function getCheckedAckedCountByBaja(callback) {
-  var _result = { count: 0 };
-  var _index = 0;
+    var _result = { count: 0 };
+    var _index = 0;
 
-  require(['baja!'], function (baja) {
-    baja.Ord.make("local:|foxs:|alarm:|bql:select ackState from openAlarms where ackState ='acked'").get()
-      .then(function (table) {
-        return table.cursor({
-          each: function (record) {
-            _index++;
-          },
-          after: function () {
-            _result.count = _index;
-            if (typeof callback === 'function') {
-              callback(_result);
-            }
-          },
-          limit: -1,
-          offset: 0
-        });
-      });
-  });
+    require(['baja!'], function (baja) {
+        baja.Ord.make("local:|foxs:|alarm:|bql:select ackState from openAlarms where ackState ='acked'").get()
+            .then(function (table) {
+                return table.cursor({
+                    each: function (record) {
+                        _index++;
+                    },
+                    after: function () {
+                        _result.count = _index;
+                        if (typeof callback === 'function') {
+                            callback(_result);
+                        }
+                    },
+                    limit: -1,
+                    offset: 0
+                });
+            });
+    });
 }
 
 /**
@@ -389,27 +390,27 @@ function getCheckedAckedCountByBaja(callback) {
  * @param {any} callback
  */
 function getUnCheckedAckedCountByBaja(callback) {
-  var _result = { count: 0 };
-  var _index = 0;
+    var _result = { count: 0 };
+    var _index = 0;
 
-  require(['baja!'], function (baja) {
-    baja.Ord.make("local:|foxs:|alarm:|bql:select ackState from openAlarms where ackState ='unacked'").get()
-      .then(function (table) {
-        return table.cursor({
-          each: function (record) {
-            _index++;
-          },
-          after: function () {
-            _result.count = _index;
-            if (typeof callback === 'function') {
-              callback(_result);
-            }
-          },
-          limit: -1,
-          offset: 0
-        });
-      });
-  });
+    require(['baja!'], function (baja) {
+        baja.Ord.make("local:|foxs:|alarm:|bql:select ackState from openAlarms where ackState ='unacked'").get()
+            .then(function (table) {
+                return table.cursor({
+                    each: function (record) {
+                        _index++;
+                    },
+                    after: function () {
+                        _result.count = _index;
+                        if (typeof callback === 'function') {
+                            callback(_result);
+                        }
+                    },
+                    limit: -1,
+                    offset: 0
+                });
+            });
+    });
 }
 
 /**
@@ -417,32 +418,32 @@ function getUnCheckedAckedCountByBaja(callback) {
  * @param {any} callback
  */
 function getSystemAlarmByBaja(callback) {
-  var _result = { count: 0, data: [] };
-  var _index = 0;
+    var _result = { count: 0, data: [] };
+    var _index = 0;
 
-  require(['baja!'], function (baja) {
-    //baja.Ord.make("local:|foxs:|alarm:|bql:select timestamp, ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where isAlarm").get()
-    baja.Ord.make("local:|foxs:|alarm:|bql:select alarmClass where isAlarm").get()
-      .then(function (table) {
-        return table.cursor({
-          each: function (record) {
-            let main = {};
-            main.alarmClass = record.get('alarmClass');
+    require(['baja!'], function (baja) {
+        //baja.Ord.make("local:|foxs:|alarm:|bql:select timestamp, ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where isAlarm").get()
+        baja.Ord.make("local:|foxs:|alarm:|bql:select alarmClass where isAlarm").get()
+            .then(function (table) {
+                return table.cursor({
+                    each: function (record) {
+                        let main = {};
+                        main.alarmClass = record.get('alarmClass');
 
-            _result.data.push(main);
-            _index++;
-          },
-          after: function () {
-            _result.count = _index;
-            if (typeof callback === 'function') {
-              callback(_result);
-            }
-          },
-          limit: -1,
-          offset: 0
-        });
-      });
-  });
+                        _result.data.push(main);
+                        _index++;
+                    },
+                    after: function () {
+                        _result.count = _index;
+                        if (typeof callback === 'function') {
+                            callback(_result);
+                        }
+                    },
+                    limit: -1,
+                    offset: 0
+                });
+            });
+    });
 }
 
 // /**
@@ -523,150 +524,160 @@ function getSystemAlarmByBaja(callback) {
  * @param {any} callback
  */
 function getOneDeviceAlarmByBaja(devicePath, callback) {
-  let _sourceTmp;
-  var _result = "";
-  var _ss = [];
-  var _bfName = "";
-  var _sourceName = "";
-  var _index = 0;
+    let _sourceTmp;
+    var _result = "";
+    var _ss = [];
+    var _bfName = "";
+    var _sourceName = "";
+    var _index = 0;
 
-  require(['baja!'], function (baja) {
-/*    console.log("local:|foxs:|alarm:|bql:select timestamp, ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime from openAlarms where alarmData.sourceName like '%" + devicePath + "%' order by timestamp desc");*/
-    baja.Ord.make("local:|foxs:|alarm:|bql:select timestamp, ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime from openAlarms where alarmData.sourceName like '%" + devicePath + "%' order by timestamp desc").get()
-      .then(function (table) {
-        return table.cursor({
-          each: function (record) {
-            _sourceTmp = (record.get('alarmData').get('sourceName')).toString().split('_');
-            _bfName = _sourceTmp[1] + "-" + _sourceTmp[4];
-            _sourceName = _sourceTmp[7] + "-" + _sourceTmp[8];
-            _ss.push({ buildingFloorName_zh: _bfName, uuid: record.get('uuid'), timestamp: record.get('timestamp'), alarmClass: record.get('alarmClass'), sourceName_zh: _sourceName, msgText: record.get('alarmData').get('msgText'), ackState: record.get('ackState'), normalTime: record.get('normalTime') })
-            _index++
-          },
-          after: function () {
-            _result = { count: _index, data: _ss }
+    require(['baja!'], function (baja) {
+        /*    console.log("local:|foxs:|alarm:|bql:select timestamp, ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime from openAlarms where alarmData.sourceName like '%" + devicePath + "%' order by timestamp desc");*/
+        baja.Ord.make("local:|foxs:|alarm:|bql:select timestamp, ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime from openAlarms where alarmData.sourceName like '%" + devicePath + "%' order by timestamp desc").get()
+            .then(function (table) {
+                return table.cursor({
+                    each: function (record) {
+                        _sourceTmp = (record.get('alarmData').get('sourceName')).toString().split('_');
+                        _bfName = _sourceTmp[1] + "-" + _sourceTmp[4];
+                        _sourceName = _sourceTmp[7] + "-" + _sourceTmp[8];
+                        _ss.push({ buildingFloorName_zh: _bfName, uuid: record.get('uuid'), timestamp: record.get('timestamp'), alarmClass: record.get('alarmClass'), sourceName_zh: _sourceName, msgText: record.get('alarmData').get('msgText'), ackState: record.get('ackState'), normalTime: record.get('normalTime') })
+                        _index++
+                    },
+                    after: function () {
+                        _result = { count: _index, data: _ss }
 
-            //console.log(552, _result);
+                        //console.log(552, _result);
 
-            if (typeof callback === 'function') {
-              callback(_result);
-            }
-          },
-          limit: -1,
-          offset: 0
-        });
-      });
-  });
+                        if (typeof callback === 'function') {
+                            callback(_result);
+                        }
+                    },
+                    limit: -1,
+                    offset: 0
+                });
+            });
+    });
 }
 
 function getAllDeviceAlarmByBaja(startDate_millisecond, endDate_millisecond, isRecover, isAck, callback) {
-  var _result = { count: 0, data: [] };
-  var _index = 0;
-  var _recoverState = isRecover ? "!= null" : "= null";
-  var _ackState = isAck ? "= 'acked'" : "= 'unacked'";
+    var _result = { count: 0, data: [] };
+    var _index = 0;
+    var _recoverState = isRecover ? "!= null" : "= null";
+    var _ackState = isAck ? "= 'acked'" : "= 'unacked'";
 
-  let startUrl = "";
-  if (startDate_millisecond) {
-    startUrl = "timestamp.millis >= " + startDate_millisecond + " and ";
-  }
-  // console.log("local:|foxs:|alarm:|bql:select timestamp, ackTime, priority ,ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime from openAlarms where " + startUrl + "timestamp.millis <= " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp desc");
-  require(['baja!'], function (baja) {
+    let startUrl = "";
+    if (startDate_millisecond) {
+        startUrl = "timestamp.millis >= " + startDate_millisecond + " and ";
+    }
+    console.log("local:|foxs:|alarm:|bql:select timestamp, ackTime, priority ,ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where " + startUrl + "timestamp.millis <= " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp desc");
+    require(['baja!'], function (baja) {
 
-    baja.Ord.make("local:|foxs:|alarm:|bql:select timestamp, ackTime, priority ,ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime from openAlarms where " + startUrl + "timestamp.millis <= " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp desc").get()
-      .then(function (table) {
-        return table.cursor({
-          each: function (record) {
-            // console.log(record,record.get('alarmData').get('sourceName').split(':'))
-            let main = {};
-            // console.log(record.get('alarmData').get('sourceName'),record.get('timestamp').$cEncStr)
-            const alarmDisplayName = record.get('alarmData').get('sourceName').split(":")[1] ?? record.get('alarmData').get('sourceName').split(":")[0]
-            //console.log(alarmDisplayName)
-            _sourceTmp = alarmDisplayName.split('_');
-            let _bfName = _sourceTmp[1] + "-" + _sourceTmp[4]
-            let _sourceName = _sourceTmp.slice(0, 8).join("_");
-            _sourceTmp = _sourceTmp[7] + "-" + _sourceTmp[8];
+        baja.Ord.make("local:|foxs:|alarm:|bql:select timestamp, ackTime, priority ,ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where " + startUrl + "timestamp.millis <= " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp desc").get()
+            .then(function (table) {
+                return table.cursor({
+                    each: function (record) {
+                        // console.log(record)
+                        let main = {};
+                        // console.log(record.get('alarmData').get('sourceName'),record.get('timestamp').$cEncStr)
+                        const alarmDisplayName = record.get('alarmData').get('sourceName').split(":")[1] ?? record.get('alarmData').get('sourceName').split(":")[0]
+                        //console.log(alarmDisplayName)
+                        _sourceTmp = alarmDisplayName.split('_');
+                        let _bfName = _sourceTmp[1] + "-" + _sourceTmp[4]
+                        let _sourceName = _sourceTmp.slice(0, 8).join("_");
+                        _sourceTmp = _sourceTmp[7] + "-" + _sourceTmp[8];
 
-            main.buildingFloorName_zh = _bfName;
-            main.sourceName_zh = _sourceName;
-            main.uuid = record.get('uuid').$val;
-            main.timestamp = record.get('timestamp').$cEncStr;
-            main.alarmClass = record.get('alarmClass');
-            main.point = _sourceTmp;
-            main.sourceTmp = _sourceTmp;
-            main.devicePath = _sourceName;
-            main.msgText = record.get('alarmData').get('msgText');
-            main.normalTime = record.get('normalTime');
-            main.priority = record.get('priority');
-            main.ackedTime = record.get('ackTime').$cEncStr;
-            if (!_sourceTmp.includes("undefined")) {
-              _result.data.push(main);
-            }
-            _index++;
-          },
-          after: function () {
-            _result.count = _index;
-            if (typeof callback === 'function') {
-              //console.log(_result)
-              callback(_result);
-            }
-          },
-          limit: -1,
-          offset: 0
-        });
-      });
-  });
+                        main.buildingFloorName_zh = _bfName;
+                        main.sourceName_zh = _sourceName;
+                        main.uuid = record.get('uuid').$val;
+                        main.timestamp = record.get('timestamp').$cEncStr;
+                        main.alarmClass = record.get('alarmClass');
+                        main.point = _sourceTmp;
+                        main.sourceTmp = _sourceTmp;
+                        main.devicePath = _sourceName;
+                        main.msgText = record.get('alarmData').get('msgText');
+                        main.normalTime = record.get('normalTime');
+                        main.priority = record.get('priority');
+                        main.ackedTime = record.get('ackTime').$cEncStr;
+                        main.ackState = record.get('ackState').$ordinal
+                        if (!_sourceTmp.includes("undefined")) {
+                            // console.log(main.ackState)
+                            _result.data.push(main);
+                        }
+                        _index++;
+                    },
+                    after: function () {
+                        _result.count = _index;
+                        if (typeof callback === 'function') {
+                            //console.log(_result)
+                            callback(_result);
+                        }
+                    },
+                    limit: -1,
+                    offset: 0
+                });
+            });
+    });
 }
 
 
 function getDeviceAlarmCardByBaja(startDate_millisecond, endDate_millisecond, isRecover, isAck, callback) {
-  var _result = { count: 0, data: [] };
-  var _index = 0;
-  var _recoverState = isRecover ? "!= null" : "= null";
-  var _ackState = isAck ? "= 'acked'" : "= 'unacked'";
+    var _result = { count: 0, data: [] };
+    var _index = 0;
+    var _recoverState = isRecover ? "!= null" : "= null";
+    var _ackState = isAck ? "= 'acked'" : "= 'unacked'";
 
-  require(['baja!'], function (baja) {
     let startUrl = "";
     if (startDate_millisecond) {
-      startUrl = "timestamp.millis >= " + startDate_millisecond + " and ";
+        startUrl = "timestamp.millis >= " + startDate_millisecond + " and ";
     }
-/*    console.log("local:|foxs:|alarm:|bql:select timestamp, ackTime, priority ,ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime from openAlarms where " + startUrl + "timestamp.millis <= " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp desc");*/
+    // console.log("首頁","local:|foxs:|alarm:|bql:select timestamp, ackTime, priority ,ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime from openAlarms where " + startUrl + "timestamp.millis <= " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp desc");
+    require(['baja!'], function (baja) {
 
-    baja.Ord.make("local:|foxs:|alarm:|bql:select timestamp, ackTime, priority ,ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime from openAlarms where " + startUrl + "timestamp.millis <= " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp desc").get()
-      .then(function (table) {
-        return table.cursor({
-          each: function (record) {
-            let main = {};
-            //console.log(record.get('alarmData').get('sourceName'))
-            _sourcePoint = (record.get('alarmData').get('sourceName')).toString().split(':')[1];
-            //console.log(_sourcePoint)
-            _sourceTmp = _sourcePoint.split("_");
+        baja.Ord.make("local:|foxs:|alarm:|bql:select timestamp, ackTime, priority ,ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where " + startUrl + "timestamp.millis <= " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp desc").get()
+            .then(function (table) {
+                return table.cursor({
+                    each: function (record) {
+                        // console.log(record)
+                        let main = {};
+                        // console.log(record.get('alarmData').get('sourceName'),record.get('timestamp').$cEncStr)
+                        const alarmDisplayName = record.get('alarmData').get('sourceName').split(":")[1] ?? record.get('alarmData').get('sourceName').split(":")[0]
+                        //console.log(alarmDisplayName)
+                        _sourceTmp = alarmDisplayName.split('_');
+                        let _bfName = _sourceTmp[1] + "-" + _sourceTmp[4]
+                        let _sourceName = _sourceTmp.slice(0, 8).join("_");
+                        _sourceTmp = _sourceTmp[7] + "-" + _sourceTmp[8];
 
-            let _bfName = _sourceTmp[1] + "-" + _sourceTmp[4];
-            let _sourceName = _sourceTmp[7] + "-" + _sourceTmp[8];
-            main.buildingFloorName_zh = _bfName;
-            main.sourceName_zh = _sourceName;
-            main.uuid = record.get('uuid').$val;
-            main.timestamp = record.get('timestamp');
-            main.alarmClass = record.get('alarmClass');
-            main.point = _sourcePoint;
-            main.devicePath = _sourceTmp.slice(0, 8).join("_");;
-            main.msgText = record.get('alarmData').get('msgText');
-            main.normalTime = record.get('normalTime');
-            main.priority = record.get('priority');
-            main.ackedTime = record.get('ackTime').$cEncStr;
-            _result.data.push(main);
-            _index++;
-          },
-          after: function () {
-            _result.count = _index;
-            if (typeof callback === 'function') {
-              callback(_result);
-            }
-          },
-          limit: -1,
-          offset: 0
-        });
-      });
-  });
+                        main.buildingFloorName_zh = _bfName;
+                        main.sourceName_zh = _sourceName;
+                        main.uuid = record.get('uuid').$val;
+                        main.timestamp = record.get('timestamp').$cEncStr;
+                        main.alarmClass = record.get('alarmClass');
+                        main.point = _sourceTmp;
+                        main.sourceTmp = _sourceTmp;
+                        main.devicePath = _sourceName;
+                        main.msgText = record.get('alarmData').get('msgText');
+                        main.normalTime = record.get('normalTime');
+                        main.priority = record.get('priority');
+                        main.ackedTime = record.get('ackTime').$cEncStr;
+                        main.ackState = record.get('ackState').$ordinal
+                        if (!_sourceTmp.includes("undefined")) {
+                            // console.log(main.ackState)
+                            _result.data.push(main);
+                        }
+                        _index++;
+                    },
+                    after: function () {
+                        _result.count = _index;
+                        if (typeof callback === 'function') {
+                            //console.log(_result)
+                            callback(_result);
+                        }
+                    },
+                    limit: -1,
+                    offset: 0
+                });
+            });
+    });
 }
 
 /**
@@ -674,32 +685,32 @@ function getDeviceAlarmCardByBaja(startDate_millisecond, endDate_millisecond, is
  * @param {any} callback
  */
 function getAlarmForChartDataByBaja(callback) {
-  var _result = "";
-  var _ss = "";
-  var _index = 0;
+    var _result = "";
+    var _ss = "";
+    var _index = 0;
 
-  require(['baja!'], function (baja) {
-    baja.Ord.make("local:|foxs:|alarm:|bql:select alarmClass, ackState, normalTime where isAlarm").get()
-      .then(function (table) {
-        return table.cursor({
-          each: function (record) {
-            if (_index == 0)
-              _ss += '{"alarmClass":"' + record.get('alarmClass') + '", "ackState":"' + record.get('ackState') + '", "normalTime":"' + record.get('normalTime') + '"}';
-            else
-              _ss += ',{"alarmClass":"' + record.get('alarmClass') + '", "ackState":"' + record.get('ackState') + '", "normalTime":"' + record.get('normalTime') + '"}';
-            _index++;
-          },
-          after: function () {
-            _result += '{' + '"count": ' + _index + ', "data":[';
-            _result += _ss;
-            _result += ']}';
-            if (typeof callback === 'function') {
-              callback(_result);
-            }
-          },
-          limit: -1,
-          offset: 0
-        });
-      });
-  });
+    require(['baja!'], function (baja) {
+        baja.Ord.make("local:|foxs:|alarm:|bql:select alarmClass, ackState, normalTime where isAlarm").get()
+            .then(function (table) {
+                return table.cursor({
+                    each: function (record) {
+                        if (_index == 0)
+                            _ss += '{"alarmClass":"' + record.get('alarmClass') + '", "ackState":"' + record.get('ackState') + '", "normalTime":"' + record.get('normalTime') + '"}';
+                        else
+                            _ss += ',{"alarmClass":"' + record.get('alarmClass') + '", "ackState":"' + record.get('ackState') + '", "normalTime":"' + record.get('normalTime') + '"}';
+                        _index++;
+                    },
+                    after: function () {
+                        _result += '{' + '"count": ' + _index + ', "data":[';
+                        _result += _ss;
+                        _result += ']}';
+                        if (typeof callback === 'function') {
+                            callback(_result);
+                        }
+                    },
+                    limit: -1,
+                    offset: 0
+                });
+            });
+    });
 }
\ No newline at end of file