From 50488578fafcb9f5f23c97d708709f504a991d7b Mon Sep 17 00:00:00 2001
From: dev01 <dev01@yourteam.tw>
Date: Wed, 23 Nov 2022 18:28:51 +0800
Subject: [PATCH] =?UTF-8?q?[Frontend][=E9=9B=BB=E6=A2=AF=E7=B3=BB=E7=B5=B1?=
 =?UTF-8?q?]=20=E5=8D=A1=E7=89=87=20niagara=20=E7=8B=80=E6=85=8B=E8=A8=82?=
 =?UTF-8?q?=E9=96=B1=20|=20card=20=E5=8D=B3=E6=99=82=E8=B3=87=E8=A8=8A=20?=
 =?UTF-8?q?=E5=85=A9=E9=82=8Atable=E4=BB=8B=E9=9D=A2=E5=BB=BA=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Frontend/_sysElevator.html | 114 +++++++++++++++++++++++++++++++------
 1 file changed, 96 insertions(+), 18 deletions(-)

diff --git a/Frontend/_sysElevator.html b/Frontend/_sysElevator.html
index 884d548..cf08805 100644
--- a/Frontend/_sysElevator.html
+++ b/Frontend/_sysElevator.html
@@ -1,17 +1,20 @@
 <style>
     .elevator {
-        background-color:#fff;
-        height:520px;
+        background-color: #fff;
+        height: 520px;
     }
+
     table.elevator-build {
         /*border: 1px double #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;
     }
@@ -31,7 +34,7 @@
                         <table id="floorTable" class="elevator-build m-auto">
                         </table>
                     </div>
-                   
+
                 </div>
             </div>
             <!--<div>
@@ -886,7 +889,7 @@
         subDevice();
     })
     function getFloDevList() {
-        
+
     }
 
     //baja 訂閱設備
@@ -899,19 +902,24 @@
         }
         myBaja.setSubscribeDevicesByBql(ordPath);
         myBaja.setSubscribeDevicesCallBack(function (data) {
-
+            console.log(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 == "ST") {
+                $(`#${matchDevice.device_number}_card [name=devStatus]`).text(data.value);
+            }
+
             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");
+                $(`#${matchDevice.device_number}_card`).attr("data-light-type", "normal").data("light-type", "normal");
             } else if (data.point_name == cloDevPoiName && data.value == matchDevice.device_close_point_value) {
-                $(`#${matchDevice.device_number}_status`).attr("data-light-type", "close").data("light-type", "close");
+                $(`#${matchDevice.device_number}_card`).attr("data-light-type", "close").data("light-type", "close");
             } else if (data.point_name == errDevPoiName && data.value == matchDevice.device_error_point_value) {
-                $(`#${matchDevice.device_number}_status`).attr("data-light-type", "error").data("light-type", "error");
+                $(`#${matchDevice.device_number}_card`).attr("data-light-type", "error").data("light-type", "error");
             }
             setLightColor();
         });
@@ -961,7 +969,7 @@
                     $.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;">
+                        strHtml += `<div id="${devObj.device_number}_card" class="card text-white mx-1 mb-3 col-4 " name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" data-name="${devObj.full_name}" style="max-width: 18rem;">
                                         <div type="button" class="card-body">
                                             <span class="d-flex">
                                                 <h5 class="card-title">號機別 : ${devObj.full_name}</h5>
@@ -969,13 +977,13 @@
                                             </span>
                                             <h4 class="d-flex justify-content-end">10F</h4>
                                             <span class="d-flex">
-                                                <p class="card-text">狀態 : ${devObj.device_status}</p>
+                                                <p class="card-text">狀態 : <span name="devStatus"></span></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();
@@ -991,9 +999,9 @@
             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>
@@ -1008,7 +1016,10 @@
                             <div class="card-body p-2 tab-content">
 
                                 <div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
-                                    ${drawStateTabBlo()}
+                                    <div class="row">
+                                        <div class="col-xl-6">${drawImdStaBlock()}</div>
+                                        <div class="col-xl-6">${drawOpeModBlock()}</div>
+                                    </div>
                                 </div>
                                 <div id="info" data-tabname="cardTab" data-tabrole="child">
 
@@ -1038,7 +1049,7 @@
         })
     }
 
-    function setBuildFloor(floorCnt = 10,eleCnt = 3) {
+    function setBuildFloor(floorCnt = 10, eleCnt = 3) {
         let tbody = creEle("tbody");
         //樓層從小到大
         let rfloors = floors.reverse();
@@ -1051,10 +1062,10 @@
                 if (e == 1) {
                     td.addClass("t-black")
                     td.text(rfloors[f - 1]);
-                } else if (e == eleCnt + 2) { 
+                } else if (e == eleCnt + 2) {
                 }
                 else {
-                    let div = creDiv(["d-flex", "justify-content-center", "align-items-end","h-100"]);
+                    let div = creDiv(["d-flex", "justify-content-center", "align-items-end", "h-100"]);
                     div.append(`<i class="fas fa-door-open fs-1-05"></i>`)
                     td.append(div)
                 }
@@ -1063,7 +1074,7 @@
             tbody.append(tr);
             $("#floorTable_wrapper").append(eleCircle)
         }
-        
+
         $("#floorTable").html(tbody);
 
 
@@ -1095,6 +1106,73 @@
         return strHtml;
     }
 
+    function drawImdStaBlock() {
+        let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`);
+        let tbody = tabEle.append("<tbody>");
+        let rows =
+            [
+                { id: "devNum", text: "號機" },
+                { id: "status", text: "狀態" },
+                { id: "group", text: "組別" },
+                { id: "weight", text: "載重" },
+            ];
+        let cols = [
+            { width: "30%" },
+            { width: "40%" },
+            { width: "30%" },
+        ]
+        $.each(rows, (index, row) => {
+            let tr = $("<tr></tr>");
+            $.each(cols, (index2, col) => {
+                let td = $("<td></td>");
+                td.prop("id", row.id)
+                td.css("width", col.width)
+                if (index2 == 0) {
+                    td.text(row.text);
+                }
+                tr.append(td);
+            })
+            tbody.append(tr);
+        })
+
+        return tabEle.outerHtml();
+    }
+
+    function drawOpeModBlock() {
+        let tabEle = $(`<table id="opeModTable" class="table table-bordered table-striped text-center m-0">`);
+        let tbody = tabEle.append("<tbody>");
+        let rows =
+            [
+                { id: "imdStaTabDevNum", text: "自動" },
+                { id: "imdStaTabDevNumStatus", text: "VIP" },
+                { id: "imdStaTabDevNumGroup", text: "獨立運轉" },
+                { id: "imdStaTabDevNumWeight", text: "手動" },
+                { id: "imdStaTabDevNumWeight", text: "運轉保養" },
+                { id: "imdStaTabDevNumWeight", text: "回歸完了" },
+                { id: "imdStaTabDevNumWeight", text: "不服務樓層" },
+            ];
+        let cols = [
+            { width: "30%" },
+            { width: "40%" },
+            { width: "30%" },
+        ]
+        $.each(rows, (index, row) => {
+            let tr = $("<tr></tr>");
+            $.each(cols, (index2, col) => {
+                let td = $("<td></td>");
+                td.prop("id", row.id)
+                td.css("width", col.width)
+                if (index2 == 0) {
+                    td.text(row.text);
+                }
+                tr.append(td);
+            })
+            tbody.append(tr);
+        })
+
+        return tabEle.outerHtml();
+    }
+
     function drawInfoTabBlo(devGuid) {
         let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`);
         let tbody = tabEle.append("<tbody>");