[Frontend] LOGO 更換 | [系統監控] 按鈕高度一致 | 燈號顯示

Frontend/_sysMonAll.html

@@ -2,41 +2,38 @@
     [id^=yt_tooltip] {
         width: 600px;
     }
+
+    .circle-light {
+        width: 25px;
+        height: 25px;
+        border-radius: 50px;
+    }
 </style>
 
 <div class="row">
-    <div class="col-sm-12 col-xl-5" id="floDevList">
-        <!--<div class="d-flex justify-content-start mb-6">
-            <button type="button" class="btn btn-primary waves-effect waves-themed mr-5">19 F</button>
-            <div id="floor19" class="mr-5 cur-poi">
-                <span class="status status-success d-inline-block">
-                    <img src="img/demo/avatars/avatar-c.png" class="profile-image rounded-circle" alt="...">
-                </span> 19F 門口東
+    <div class="col-sm-12 col-xl-5">
+        <div class="d-flex mb-4" style="gap:15px">
+            <div class="row m-0 align-items-center">
+                <span class="circle-light bg-success mr-2"></span>
+                <label class="mb-0">正常</label>
             </div>
-            <div class="mr-5">
-                <span class="status status-danger d-inline-block">
-                    <img src="img/demo/avatars/avatar-c.png" class="profile-image rounded-circle" alt="...">
-                </span> 19F 戶外門口中間
+            <div class="row m-0 align-items-center">
+                <span class="circle-light bg-secondary mr-2"></span>
+                <label class="mb-0">關機</label>
+            </div>
+            <div class="row m-0 align-items-center">
+                <span class="circle-light bg-danger mr-2"></span>
+                <label class="mb-0">異常</label>
             </div>
         </div>
 
-        <div class="d-flex justify-content-start mb-6">
-            <button type="button" class="btn btn-primary waves-effect waves-themed mr-5">21 F</button>
-            <div class=" mr-5">
-                <span class="status status-success d-inline-block">
-                    <img src="img/demo/avatars/avatar-c.png" class="profile-image rounded-circle" alt="...">
-                </span> 21F 電錶01
-            </div>
-            <div class="mr-5">
-                <span class="status status-danger d-inline-block">
-                    <img src="img/demo/avatars/avatar-c.png" class="profile-image rounded-circle" alt="...">
-                </span> 21F 電錶02
-            </div>
-        </div>-->
+        <div class="col-12 p-0" id="floDevList">
 
+
+        </div>
     </div>
     <div class="col-sm-12 col-xl-7">
-        <img src="img/clouds.png" class="img-fluid" style="min-height: 520px;">
+        <!--<img src="img/clouds.png" class="img-fluid" style="min-height: 520px;">-->
         <!--<a href="javascript:;" data-toggle="modal" data-target=".default-example-modal-right-lg">
         <span class="badge border border-light bg-primary-700 position-absolute pos-top pos-left"><i class="fal fa-image fa-3x"></i></span></a>-->
     </div>
@@ -68,8 +65,8 @@
             } else {
                 let strHtml = ``;
                 $.each(res.data, (index, floObj) => {
-                    strHtml += "<div class='d-flex justify-content-start mb-6'>"
-                    strHtml += `<button id="floItemBtn${floObj.full_name}" type="button" class="btn btn-primary waves-effect waves-themed mr-5">${floObj.full_name}</button>`
+                    strHtml += `<div class='d-flex justify-content-start mb-5' style="height:60px">`
+                    strHtml += `<button id="floItemBtn${floObj.full_name}" type="button" class="btn btn-primary waves-effect waves-themed mr-5 align-self-center" >${floObj.full_name}</button>`
 
                     $.each(floObj.device_list, (index2, devObj) => {
                         console.log(">>>> url: " + baseImgUrl + " , img: " + varPathImg + ", icon: " + devObj.device_master_icon);
@@ -217,14 +214,14 @@
             {
                 "title": "發生/完成時間",
                 "data": "finishTime",
-                "render": function (data,type,row) {
+                "render": function (data, type, row) {
                     return row.createdAt + "<br>" + data;
                 },
             },
 
         ];
-        
-        
+
+
 
         //let callback = function () {
         //    $('#opeRecTable').wrap("<div class='scrolledTable'></div>");  //不採用datatable內建scrollbody，會導致thead跑掉
@@ -232,7 +229,7 @@
         //    api.columns.adjust();
         //}
 
-        let opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs,null, null, null, null, null, null, "tpi");
+        let opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi");
     }
 
     function loadErrRecTable() {