From 756b207e8d5f9bce1c89a564ad0002f18d7372ff Mon Sep 17 00:00:00 2001
From: dev01 <dev01@yourteam.tw>
Date: Wed, 23 Nov 2022 17:19:28 +0800
Subject: [PATCH] =?UTF-8?q?[FrontendWebApi]=20GetDeviceList=20=E8=A3=9C?=
 =?UTF-8?q?=E4=B8=8A=20status=20=E6=AC=84=E4=BD=8D=20|=20[=E7=B3=BB?=
 =?UTF-8?q?=E7=B5=B1=E7=9B=A3=E6=8E=A7]=20=E9=9B=BB=E6=A2=AF=E8=A8=82?=
 =?UTF-8?q?=E9=96=B1=E7=A8=8B=E5=BA=8F=E5=BB=BA=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Frontend/_sysElevator.html                    | 355 +++++++++++++++-
 Frontend/_sysMonAll.html                      | 118 +++++-
 Frontend/css/site.css                         | 390 ++++++++++++++----
 .../ApiControllers/DeviceManageController.cs  |   2 +-
 FrontendWebApi/Models/Device.cs               |  26 +-
 5 files changed, 781 insertions(+), 110 deletions(-)

diff --git a/Frontend/_sysElevator.html b/Frontend/_sysElevator.html
index b807e7f..884d548 100644
--- a/Frontend/_sysElevator.html
+++ b/Frontend/_sysElevator.html
@@ -48,7 +48,7 @@
     <!-- End-左圖區 -->
     <!-- 中間卡片區 -->
     <div class="col-7 my-3">
-        <div class="row">
+        <div id="eleCards" class="row">
             <div class="card text-white bg-info mx-1 mb-3 col-4" style="max-width: 18rem">
                 <div type="button" class="card-body" data-toggle="modal" data-target="#card1">
                     <span class="d-flex">
@@ -879,9 +879,164 @@
 
 <script>
     var floors = ["B2F", "B1F", "1F", "2F", "3F", "4F", "5F", "6F"]
+    var allDevList = [];
     $(function () {
-        setBuildFloor(floors.length,3);
+        setBuildFloor(floors.length, 3);
+        setCards();
+        subDevice();
     })
+    function getFloDevList() {
+        
+    }
+
+    //baja 訂閱設備
+    function subDevice() {
+        myBaja = new subscriptionDevices();
+        var ordPath = {
+            "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.split("_")[x.device_number.split("_").length - 1] == data.device_number)[0];
+            let norDevPoiName = matchDevice.device_normal_point_name;
+            let cloDevPoiName = matchDevice.device_close_point_name;
+            let errDevPoiName = matchDevice.device_error_point_name;
+
+            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();
+        });
+
+    }
+
+    function setLightColor() {
+        $("[data-light-type]").each((index, ele) => {
+            let type = $(ele).data("light-type");
+            let isFlashing = false;
+            let color = "#000";
+            switch (type) {
+                case "normal":
+                    color = pageAct.sysSubObj.device_normal_color ?? "var(--theme-success)";
+                    isFlashing = pageAct.sysSubObj.device_normal_flashing == "1"
+                    break;
+                case "close":
+                    color = pageAct.sysSubObj.device_close_color ?? "var(--theme-secondary)";
+                    isFlashing = pageAct.sysSubObj.device_close_flashing == "1"
+                    break;
+                case "error":
+                    color = pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
+                    isFlashing = pageAct.sysSubObj.device_error_flashing == "1"
+                    break;
+            }
+            $(ele).css("background-color", color);
+            if (isFlashing) {
+                $(ele).addClass("light-flash");
+            }
+        })
+    }
+
+    function setCards() {
+        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) => {
+                    $.each(floObj.device_list, (index2, devObj) => {
+                        allDevList.push(devObj);
+
+                        strHtml += `<div class="card text-white mx-1 mb-3 col-4 " name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" data-name="${devObj.full_name}" style="max-width: 18rem;">
+                                        <div type="button" class="card-body">
+                                            <span class="d-flex">
+                                                <h5 class="card-title">號機別 : ${devObj.full_name}</h5>
+                                                <i class="fas fa-caret-up fa-3x ml-auto"></i>
+                                            </span>
+                                            <h4 class="d-flex justify-content-end">10F</h4>
+                                            <span class="d-flex">
+                                                <p class="card-text">狀態 : ${devObj.device_status}</p>
+                                                <i class="fas fa-caret-down fa-3x ml-auto animate__animated animate__flash animate__infinite animate__slower"></i>
+                                            </span>
+                                        </div>
+                                    </div>`;
+                    })
+                    
+                })
+                $("#eleCards").html(strHtml);
+                initPopover();
+            }
+        }, null, "POST").send();
+
+    }
+
+    function initPopover() {
+        $("[name=devItem]").each((index, ele) => {
+            let devNum = $(ele).data("number"); //設備編號
+            let devGuid = $(ele).data("id"); //guid
+            let devName = $(ele).data("name"); //full_name
+            $(ele).YTTooltip({
+                html: `<div class="card m-1 border device-wrap">
+                            
+                            <div class="card-header p-3">
+                                
+                                <div class="position-absolute w-50" style="word-break: break-all;">
+                                    <label class="m-0 mt-2">${devName}</label>
+                                </div>
+                                <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
+                                    <button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
+                                    <button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
+                                    <button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
+                                    <button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
+                                    <button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
+                                </div>
+                            </div>
+                            <div class="card-body p-2 tab-content">
+
+                                <div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
+                                    ${drawStateTabBlo()}
+                                </div>
+                                <div id="info" data-tabname="cardTab" data-tabrole="child">
+
+                                </div>
+                                <div id="errRec" data-tabname="cardTab" data-tabrole="child">
+                                    ${drawErrRecTabBlo()}
+                                </div>
+                                <div id="opeRec" data-tabname="cardTab" data-tabrole="child">
+                                    ${drawOpeRecTabBlo()}
+                                </div>
+
+
+                                    </div>
+                                </div>`,
+                group: "device",
+                onShow: function (tooltipEle, oriEle) {
+                    var tab = new YT.Tab({ tabName: "cardTab" })
+                    console.log($(oriEle).data("number"))
+                    //基本資料tab block
+                    $("#info").html(drawInfoTabBlo(devGuid));
+                    loadOpeRecTable(devGuid);
+                    //loadErrRecTable2($(oriEle).data("number"));
+                    //loadErrRecTable();
+                    loadErr($(oriEle).data("number"));
+                }
+            })
+        })
+    }
 
     function setBuildFloor(floorCnt = 10,eleCnt = 3) {
         let tbody = creEle("tbody");
@@ -930,4 +1085,200 @@
 
     }
 
+
+    function drawStateTabBlo() {
+        let strHtml = `<table class="table table-bordered table-striped text-center m-0" id="iframemodal">
+                        <div class="modal-body">
+                            <iframe src="http://localhost:8080/ord?station:%7Cslot:/TPE/B1/EE/E4/R2F/NA/WHT/N1|view:?fullScreen=true" width="100%" height="100%"></iframe>
+                        </div>
+                       </table>`
+        return strHtml;
+    }
+
+    function drawInfoTabBlo(devGuid) {
+        let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`);
+        let tbody = tabEle.append("<tbody>");
+        let columnNames = ["設備編號", "設備名稱"];
+
+        $.each(columnNames, (index, colName) => {
+            let tr = $("<tr></tr>");
+            let td = $("<td></td>");
+            td.text(colName);
+            tr.append(td);
+            tbody.append(tr);
+        })
+
+        let url = baseApiUrl + "/api/Device/GetBaseDevice";
+        let sendData = {
+            device_guid: devGuid,
+        };
+        objSendData.Data = sendData;
+        ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+            if (!res || res.code != "0000" || !res.data) {
+
+            } else {
+                tbody.find("tr").eq(0).append(creEle("td", res.data.device_number));
+                tbody.find("tr").eq(1).append(creEle("td", res.data.full_name));
+            }
+        }, null, "POST").send();
+
+        return tabEle.prop("outerHTML");
+    }
+
+    function drawErrRecTabBlo() {
+        let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
+
+                        </table>`
+        return strHtml;
+    }
+
+    function drawOpeRecTabBlo() {
+        let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
+
+                        </table>`
+        return strHtml;
+    }
+
+
+    function loadOpeRecTable(devGuid) {
+        let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;
+        let tag = "#opeRecTable";
+
+        let column_defs = [
+            { "targets": [0], "width": "8%", "sortable": true },
+            { "targets": [1], "width": "8%", "sortable": true },
+            { "targets": [2], "width": "7%", "sortable": true },
+            { "targets": [3], "width": "7%", "sortable": true },
+        ];
+
+        let columns = [
+            {
+                "title": "類型",
+                "data": "work_type_name",
+            },
+            {
+                "title": "項目",
+                "data": "fix_do",
+            },
+            {
+                "title": "處理人員",
+                "data": "work_person_name",
+            },
+            {
+                "title": "發生/完成時間",
+                "data": "finishTime",
+                "render": function (data, type, row) {
+                    return row.createdAt + "<br>" + data;
+                },
+            },
+
+        ];
+
+
+
+        //let callback = function () {
+        //    $('#opeRecTable').wrap("<div class='scrolledTable'></div>");  //不採用datatable內建scrollbody，會導致thead跑掉
+        //    let api = this.api();
+        //    api.columns.adjust();
+        //}
+
+        let opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi");
+    }
+
+    function loadErrRecTable() {
+        let tag = "#errRecTable";
+        let datas;
+        //getOneDeviceAlarmTop10ByBaja(_devicePath, callback);
+
+        let column_defs = [
+            { "targets": [0], "width": "15%", "sortable": true },
+            { "targets": [1], "width": "25%", "sortable": true },
+            { "targets": [2], "width": "25%", "sortable": true },
+            { "targets": [3], "width": "35%", "sortable": true },
+        ];
+
+        let columns = [
+            {
+                "title": "異常ID",
+                "data": "uuid",
+
+            },
+            {
+                "title": "異常原因",
+                "data": "msgText",
+            },
+            {
+                "title": "ACK確認",
+                "data": "ackState",
+            },
+            {
+                "title": "發生/賦歸時間",
+                "data": "timestamp",
+                "width": "45%",
+            },
+
+        ];
+
+        //let callback = function (result) {
+        //    datas = result;
+        //}
+        let result = '{"count": 2,"data":[{ "uuid": "43dc7846-bd96-4be2-ab35-f11aec729c60","msgText": "","ackState": "1","timestamp": "2022-Nov-16 10:30:24.951 AM UTC+08:00"},{"uuid": "7c309846-d862-4a8b-803b-cdc8e0efa092","msgText": "","ackState": "1","timestamp": "2022-Nov-16 10:00:24.893 AM UTC+08:00"}]}';
+        let json_object = JSON.parse(result);
+        datas = json_object['data'];
+        errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "tpi");
+    }
+
+    function loadErr(allPath) {
+        if (allPath != undefined && allPath != null) {
+            let _pathArr = allPath.split("_");//TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1
+            let _devicePath = _pathArr[0] + "_" + _pathArr[1] + "_" + _pathArr[2] + "_" + _pathArr[3] + "_" + _pathArr[4] + "_" + _pathArr[5];
+            getOneDeviceAlarmTop10ByBaja(_devicePath, callbackForErr);
+        }
+        else {
+            console.log("no device");
+        }
+    }
+
+    function callbackForErr(result) {
+        let tag = "#errRecTable";
+        let datas;
+
+        let column_defs = [
+            { "targets": [0], "width": "15%", "sortable": true },
+            { "targets": [1], "width": "25%", "sortable": true },
+            { "targets": [2], "width": "25%", "sortable": true },
+            { "targets": [3], "width": "35%", "sortable": true },
+        ];
+
+        let columns = [
+            {
+                "title": "異常ID",
+                "data": "uuid",
+
+            },
+            {
+                "title": "異常原因",
+                "data": "msgText",
+            },
+            {
+                "title": "ACK確認",
+                "data": "ackState",
+            },
+            {
+                "title": "發生/完成時間",
+                "data": "normalTime",
+                "render": function (data, type, row) {
+                    return row.timestamp + "<br>" + data;
+                },
+            },
+
+        ];
+
+        let json_object = JSON.parse(result);
+        datas = json_object['data'];
+        errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "tpi");
+
+    }
+
+
 </script>
\ No newline at end of file
diff --git a/Frontend/_sysMonAll.html b/Frontend/_sysMonAll.html
index c89460c..d549608 100644
--- a/Frontend/_sysMonAll.html
+++ b/Frontend/_sysMonAll.html
@@ -1,13 +1,5 @@
 <style>
-    [id^=yt_tooltip] {
-        width: 650px;
-    }
-
-    .circle-light {
-        width: 25px;
-        height: 25px;
-        border-radius: 50px;
-    }
+    
 </style>
 
 <div class="row">
@@ -51,10 +43,11 @@
         getFloDevList();
         setLightColor();
         
-        initSub();
+        subDevice();
     })
 
-    function initSub() {
+    //baja 訂閱設備
+    function subDevice() {
         myBaja = new subscriptionDevices();
         var ordPath = {
             "building_tag": pageAct.buiTag,
@@ -72,7 +65,6 @@
             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) {
@@ -104,19 +96,26 @@
     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");
+            }
         })
     }
 
@@ -140,6 +139,7 @@
                     $.each(floObj.device_list, (index2, devObj) => {
                         console.log(">>>> url: " + baseImgUrl + " , img: " + varPathImg + ", icon: " + devObj.device_master_icon);
                         allDevList.push(devObj);
+                        
                         strHtml += `<div class="card m-1 border device-wrap" style="width:300px">
                                         <div class="card-body p-2">
                                             <div class="d-flex mb-2">
@@ -226,10 +226,8 @@
             let devName = $(ele).data("name"); //full_name
             $(ele).YTTooltip({
                 html: `<div class="card m-1 border device-wrap">
-                            <div class="col-12 p-0 row justify-content-end m-0">
-                                <button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
-                            </div>
-                            <div class="card-header p-2 px-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>
@@ -239,6 +237,7 @@
                                     <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">
@@ -265,11 +264,10 @@
                     console.log($(oriEle).data("number"))
                     //基本資料tab block
                     $("#info").html(drawInfoTabBlo(devGuid));
-                    loadErr($(oriEle).data("number"));
                     loadOpeRecTable(devGuid);
                     //loadErrRecTable2($(oriEle).data("number"));
                     //loadErrRecTable();
-                    
+                    loadErr($(oriEle).data("number"));
                 }
             })
         })
@@ -320,6 +318,49 @@
         let opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi");
     }
 
+    function loadErrRecTable() {
+        let tag = "#errRecTable";
+        let datas;
+        //getOneDeviceAlarmTop10ByBaja(_devicePath, callback);
+
+        let column_defs = [
+            { "targets": [0], "width": "15%", "sortable": true },
+            { "targets": [1], "width": "25%", "sortable": true },
+            { "targets": [2], "width": "25%", "sortable": true },
+            { "targets": [3], "width": "35%", "sortable": true },
+        ];
+
+        let columns = [
+            {
+                "title": "異常ID",
+                "data": "uuid",
+
+            },
+            {
+                "title": "異常原因",
+                "data": "msgText",
+            },
+            {
+                "title": "ACK確認",
+                "data": "ackState",
+            },
+            {
+                "title": "發生/賦歸時間",
+                "data": "timestamp",
+                "width": "45%",
+            },
+
+        ];
+
+        //let callback = function (result) {
+        //    datas = result;
+        //}
+        let result = '{"count": 2,"data":[{ "uuid": "43dc7846-bd96-4be2-ab35-f11aec729c60","msgText": "","ackState": "1","timestamp": "2022-Nov-16 10:30:24.951 AM UTC+08:00"},{"uuid": "7c309846-d862-4a8b-803b-cdc8e0efa092","msgText": "","ackState": "1","timestamp": "2022-Nov-16 10:00:24.893 AM UTC+08:00"}]}';
+        let json_object = JSON.parse(result);
+        datas = json_object['data'];
+        errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "tpi");
+    }
+
     function loadErr(allPath) {
         if (allPath != undefined && allPath != null) {
             let _pathArr = allPath.split("_");//TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1
@@ -372,4 +413,45 @@
 
     }
 
+        //function loadErrRecTable2(allPath) {
+        //    if (allPath != undefined && allPath != null) {
+        //        let _pathArr = allPath.split("_");//TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1
+        //        let _devicePath = _pathArr[0] + "_" + _pathArr[1] + "_" + _pathArr[2] + "_" + _pathArr[3] + "_" + _pathArr[4] + "_" + _pathArr[5];
+        //        //getOneDeviceAlarmTop10ByBaja(_devicePath, callback);
+        //        console.log("devicePath: " + _devicePath);
+        //        let result = '{"count": 2,"0": { "uuid": "43dc7846-bd96-4be2-ab35-f11aec729c60","timestamp": "2022-Nov-16 10:30:24.951 AM UTC+08:00","sourceName": "TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1_TRIP","sourceState": "1","msgText": "","ackState": "1","normalTime": "1970-Jan-1 08:00:00.000 AM UTC+08:00"},"1": {"uuid": "7c309846-d862-4a8b-803b-cdc8e0efa092","timestamp": "2022-Nov-16 10:00:24.893 AM UTC+08:00","sourceName": "TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1_TRIP","sourceState": "0","msgText": "","ackState": "1","normalTime": "2022-Nov-16 10:15:24.939 AM UTC+08:00"}}';
+        //        let result_Json = JSON.parse(result)
+        //        var eachTable = $('.each-table tbody');
+
+        //        for (var i = 0; i < result_Json['count']; i++)
+        //        {
+        //            item = result_Json[i.toString()];
+        //            eachTable.append(
+        //                '<tr>' +
+        //                '<td>' + item.uuid + '</td>' +
+        //                '<td>' + item.msgText + '</td>' +
+        //                '<td>' + (item.ackState = 1 ? item.normalTime : '未確認') + '</td>' +
+        //                '<td>' + item.timestamp + '</td>' +
+        //                '</tr>');
+        //        }
+
+        //    }
+
+        //    let callback = function (result) {
+        //        var eachTable = $('.each-table tbody');
+        //        $.each(result, function (index, element) {
+        //            eachTable.append(
+        //                '<tr>' +
+        //                '<td>' + element[index].uuid + '</td>' +
+        //                '<td>' + element[index].msgText + '</td>' +
+        //                '<td>' + (element[index].ackState = 1 ? element[index].normalTime : '未確認') + '</td>' +
+        //                '<td>' + element[index].timestamp + '</td>' +
+        //                '</tr>');
+        //        });
+        //    }
+        //}
+   // }
+
+
+
 </script>
\ No newline at end of file
diff --git a/Frontend/css/site.css b/Frontend/css/site.css
index a4c5944..d30980c 100644
--- a/Frontend/css/site.css
+++ b/Frontend/css/site.css
@@ -11,8 +11,8 @@
     --yt-gray-4: #dddddd;
     --yt-pink: #ff95d0;
     --yt-pink-hover: #ef84c0;
-    --yt-red-2:#d34949;
-    --yt-yellow-1:#ffc902;
+    --yt-red-2: #d34949;
+    --yt-yellow-1: #ffc902;
 }
 
 
@@ -25,113 +25,351 @@
 }
 
 .table.dataTable td {
-    word-break:break-all;
+    word-break: break-all;
 }
 
 label[id$='-error'].error {
     color: var(--yt-red-2);
 }
 
+[id^=yt_tooltip] {
+    width: 650px;
+}
+
+.circle-light {
+    width: 25px;
+    height: 25px;
+    border-radius: 50px;
+}
+
+.light-flash {
+    animation: flashing 0.5s linear infinite;
+}
+
+@keyframes flashing {
+    0% {
+        background: #ffa100;
+    }
+
+    49% {
+        background: #ffa100;
+    }
+
+    50% {
+        background: #26272b;
+    }
+
+    99% {
+        background: #26272b;
+    }
+}
+
 /* ================================================================ */
 /*                             單一方法                             */
 /* ================================================================ */
 
 
 /* cursor */
-.cur-def { cursor:default !important;}
-.cur-poi { cursor:pointer !important;}
+.cur-def {
+    cursor: default !important;
+}
+
+.cur-poi {
+    cursor: pointer !important;
+}
 
 /*left 距離*/
-.left-05 { left: 0.5rem !important; }
-.left-04 { left: 0.4rem !important; }
-.left-03 { left: 0.3rem !important; }
-.left-02 { left: 0.2rem !important; }
-.left-01 { left: 0.1rem !important; }
+.left-05 {
+    left: 0.5rem !important;
+}
+
+.left-04 {
+    left: 0.4rem !important;
+}
+
+.left-03 {
+    left: 0.3rem !important;
+}
+
+.left-02 {
+    left: 0.2rem !important;
+}
+
+.left-01 {
+    left: 0.1rem !important;
+}
 
 /*right 距離*/
-.right-05 { right: 0.5rem !important; }
-.right-04 { right: 0.4rem !important; }
-.right-03 { right: 0.3rem !important; }
-.right-02 { right: 0.2rem !important; }
-.right-01 { right: 0.1rem !important; }
+.right-05 {
+    right: 0.5rem !important;
+}
+
+.right-04 {
+    right: 0.4rem !important;
+}
+
+.right-03 {
+    right: 0.3rem !important;
+}
+
+.right-02 {
+    right: 0.2rem !important;
+}
+
+.right-01 {
+    right: 0.1rem !important;
+}
 
 /*bottom 0.5rem*/
-.bm-05 { bottom: 0.5rem !important; }
-.bm-04 { bottom: 0.4rem !important; }
-.bm-03 { bottom: 0.3rem !important; }
-.bm-02 { bottom: 0.2rem !important; }
-.bm-01 { bottom: 0.1rem !important; }
+.bm-05 {
+    bottom: 0.5rem !important;
+}
+
+.bm-04 {
+    bottom: 0.4rem !important;
+}
+
+.bm-03 {
+    bottom: 0.3rem !important;
+}
+
+.bm-02 {
+    bottom: 0.2rem !important;
+}
+
+.bm-01 {
+    bottom: 0.1rem !important;
+}
 
 /*top 0.5rem*/
-.tp-05 { top: 0.5rem !important; }
-.tp-04 { top: 0.4rem !important; }
-.tp-03 { top: 0.3rem !important; }
-.tp-02 { top: 0.2rem !important; }
-.tp-01 { top: 0.1rem !important; }
+.tp-05 {
+    top: 0.5rem !important;
+}
+
+.tp-04 {
+    top: 0.4rem !important;
+}
+
+.tp-03 {
+    top: 0.3rem !important;
+}
+
+.tp-02 {
+    top: 0.2rem !important;
+}
+
+.tp-01 {
+    top: 0.1rem !important;
+}
 
 /* font-weight */
-.fw-1 { font-weight: 100; }
-.fw-2 { font-weight: 200; }
-.fw-3 { font-weight: 300; }
-.fw-4 { font-weight: 400; }
-.fw-5 { font-weight: 500; }
-.fw-6 { font-weight: 600; }
-.fw-7 { font-weight: 700; }
-.fw-8 { font-weight: 800; }
-.fw-9 { font-weight: 900; }
+.fw-1 {
+    font-weight: 100;
+}
+
+.fw-2 {
+    font-weight: 200;
+}
+
+.fw-3 {
+    font-weight: 300;
+}
+
+.fw-4 {
+    font-weight: 400;
+}
+
+.fw-5 {
+    font-weight: 500;
+}
+
+.fw-6 {
+    font-weight: 600;
+}
+
+.fw-7 {
+    font-weight: 700;
+}
+
+.fw-8 {
+    font-weight: 800;
+}
+
+.fw-9 {
+    font-weight: 900;
+}
 
 /* font-size */
-.fs-05 { font-size: 0.5rem; }
-.fs-075 { font-size: 0.75rem; }
-.fs-09 { font-size: 0.9rem; }
-.fs-1-05 { font-size: 1.05rem; }
-.fs-1-1 { font-size: 1.1rem; }
-.fs-1-2 { font-size: 1.2rem; }
-.fs-1-3 { font-size: 1.3rem; }
-.fs-1-5 { font-size: 1.5rem; }
-.fs-2 { font-size: 2rem; }
-.fs-2-5 { font-size: 2.5rem; }
+.fs-05 {
+    font-size: 0.5rem;
+}
+
+.fs-075 {
+    font-size: 0.75rem;
+}
+
+.fs-09 {
+    font-size: 0.9rem;
+}
+
+.fs-1-05 {
+    font-size: 1.05rem;
+}
+
+.fs-1-1 {
+    font-size: 1.1rem;
+}
+
+.fs-1-2 {
+    font-size: 1.2rem;
+}
+
+.fs-1-3 {
+    font-size: 1.3rem;
+}
+
+.fs-1-5 {
+    font-size: 1.5rem;
+}
+
+.fs-2 {
+    font-size: 2rem;
+}
+
+.fs-2-5 {
+    font-size: 2.5rem;
+}
 
 /* border width */
-.bd-0 { border-width: 0px; }
-.bd-1 { border-width: 1px; }
-.bd-2 { border-width: 2px; }
+.bd-0 {
+    border-width: 0px;
+}
+
+.bd-1 {
+    border-width: 1px;
+}
+
+.bd-2 {
+    border-width: 2px;
+}
 
 /* border direction */
-.bd-l { border-left-style:solid;}
-.bd-r { border-right-style:solid;}
-.bd-t { border-top-style:solid;}
-.bd-b { border-bottom-style:solid;}
+.bd-l {
+    border-left-style: solid;
+}
+
+.bd-r {
+    border-right-style: solid;
+}
+
+.bd-t {
+    border-top-style: solid;
+}
+
+.bd-b {
+    border-bottom-style: solid;
+}
 
 /* border radius */
-.br-1 { border-radius: 1px; }
-.br-2 { border-radius: 2px; }
-.br-3 { border-radius: 3px; }
-.br-4 { border-radius: 4px; }
-.br-5 { border-radius: 5px; }
+.br-1 {
+    border-radius: 1px;
+}
+
+.br-2 {
+    border-radius: 2px;
+}
+
+.br-3 {
+    border-radius: 3px;
+}
+
+.br-4 {
+    border-radius: 4px;
+}
+
+.br-5 {
+    border-radius: 5px;
+}
 
 /* flex-gap */
-.gap-1 { gap: 1px;}
-.gap-2 { gap: 2px;}
-.gap-3 { gap: 3px;}
-.gap-4 { gap: 4px;}
-.gap-5 { gap: 5px;}
+.gap-1 {
+    gap: 1px;
+}
+
+.gap-2 {
+    gap: 2px;
+}
+
+.gap-3 {
+    gap: 3px;
+}
+
+.gap-4 {
+    gap: 4px;
+}
+
+.gap-5 {
+    gap: 5px;
+}
 
 /* vertical-align */
-.va-t {vertical-align: top;}
-.va-m {vertical-align: middle;}
-.va-b {vertical-align: bottom;}
+.va-t {
+    vertical-align: top;
+}
+
+.va-m {
+    vertical-align: middle;
+}
+
+.va-b {
+    vertical-align: bottom;
+}
 
 /* text color */
-.t-main-purple { color: #623c80 !important; }
-.t-black { color: #000 !important; }
-.t-white { color:#fff !important;}
-.t-fb-blue { color: #466ac2 !important; }
-.t-line-green { color: #54C814 !important; }
-.t-red { color: #db0000 !important;}
-.t-red-2 { color:var(--yt-red-2) !important;}
-.t-gray { color:var(--yt-gray); }
-.t-main-gray { color: var(--yt-main-gray); }
-.t-gray-2 { color: var(--yt-gray-2) !important; }
-.t-gray-3 { color: var(--yt-gray-3); }
-.t-yellow { color: var(--yt-yellow-1);}
+.t-main-purple {
+    color: #623c80 !important;
+}
+
+.t-black {
+    color: #000 !important;
+}
+
+.t-white {
+    color: #fff !important;
+}
+
+.t-fb-blue {
+    color: #466ac2 !important;
+}
+
+.t-line-green {
+    color: #54C814 !important;
+}
+
+.t-red {
+    color: #db0000 !important;
+}
+
+.t-red-2 {
+    color: var(--yt-red-2) !important;
+}
+
+.t-gray {
+    color: var(--yt-gray);
+}
+
+.t-main-gray {
+    color: var(--yt-main-gray);
+}
+
+.t-gray-2 {
+    color: var(--yt-gray-2) !important;
+}
+
+.t-gray-3 {
+    color: var(--yt-gray-3);
+}
+
+.t-yellow {
+    color: var(--yt-yellow-1);
+}
diff --git a/FrontendWebApi/ApiControllers/DeviceManageController.cs b/FrontendWebApi/ApiControllers/DeviceManageController.cs
index 2e85807..3d3b8c8 100644
--- a/FrontendWebApi/ApiControllers/DeviceManageController.cs
+++ b/FrontendWebApi/ApiControllers/DeviceManageController.cs
@@ -226,7 +226,7 @@ namespace FrontendWebApi.ApiControllers
                 foreach (var f in fl)
                 {
                     List<DeviceLists> dl = new List<DeviceLists>();
-                    sqlString = $@"select d.device_guid, d.full_name, d.device_coordinate, dk.device_image, d.device_number, CONCAT('{baseURL}', '{deviceKindFilePath}', dk.device_image) AS device_image_url,
+                    sqlString = $@"select d.device_guid, d.full_name, d.device_coordinate, dk.device_image, d.device_number, CONCAT('{baseURL}', '{deviceKindFilePath}', dk.device_image) AS device_image_url,d.status,
 				                          dk.device_normal_point_id, dk.device_normal_point_guid, dk.device_normal_point_col, dk.device_normal_point_value, dk.device_normal_flashing, dk.device_normal_point_name,
 				                          dk.device_close_point_id, dk.device_close_point_guid, dk.device_close_point_col, dk.device_close_point_value, dk.device_close_flashing, dk.device_close_point_name,
 				                          dk.device_error_point_id, dk.device_error_point_guid, dk.device_error_point_col, dk.device_error_point_value, dk.device_error_flashing, dk.device_error_point_name
diff --git a/FrontendWebApi/Models/Device.cs b/FrontendWebApi/Models/Device.cs
index 810ca87..59a6a85 100644
--- a/FrontendWebApi/Models/Device.cs
+++ b/FrontendWebApi/Models/Device.cs
@@ -36,19 +36,19 @@ namespace FrontendWebApi.Models
         public string device_coordinate { get; set; }
         public string device_coordinate_3d { get; set; }
         public string status { get; set; }
-        //public string device_status
-        //{
-        //    get
-        //    {
-        //        Dictionary<string, string> name = new Dictionary<string, string>()
-        //        {
-        //            { "0", "關閉"},
-        //            { "1", "正常"},
-        //            { "2", "異常"}
-        //        };
-        //        return name[status];
-        //    }
-        //}
+        public string device_status
+        {
+            get
+            {
+                Dictionary<string, string> name = new Dictionary<string, string>()
+                {
+                    { "0", "關閉"},
+                    { "1", "正常"},
+                    { "2", "異常"}
+                };
+                return name[status];
+            }
+        }
         public string device_image { get; set; }
         public string device_image_url { get; set; }
         public string device_normal_point_id { get; set; }