[Frontend] [系統監控] 燈號後端資料串接 | 上方樓層topbar高度調窄

Frontend/_sysMonAll.html

@@ -1,6 +1,6 @@
 <style>
     [id^=yt_tooltip] {
-        width: 600px;
+        width: 650px;
     }
 
     .circle-light {
@@ -14,15 +14,15 @@
     <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>
+                <span id="sysNorLight" class="circle-light mr-2"></span>
                 <label class="mb-0">正常</label>
             </div>
             <div class="row m-0 align-items-center">
-                <span class="circle-light bg-secondary mr-2"></span>
+                <span id="sysCloLight" class="circle-light 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>
+                <span id="sysErrLight" class="circle-light mr-2"></span>
                 <label class="mb-0">異常</label>
             </div>
         </div>
@@ -49,8 +49,27 @@
 
     $(function () {
         getFloDevList();
+        loadStaLight();
     })
 
+    function loadStaLight() {
+        if (pageAct.sysSubObj.device_normal_color) {
+            $("#sysNorLight").css("background-color", pageAct.sysSubObj.device_normal_color);
+        } else {
+            $("#sysNorLight").addClass("bg-success");
+        }
+        if (pageAct.sysSubObj.device_close_color) {
+            $("#sysCloLight").css("background-color", pageAct.sysSubObj.device_close_color);
+        } else {
+            $("#sysCloLight").addClass("bg-secondary");
+        }
+        if (pageAct.sysSubObj.device_error_color) {
+            $("#sysErrLight").css("background-color", pageAct.sysSubObj.device_error_color);
+        } else {
+            $("#sysErrLight").addClass("bg-danger");
+        }
+    }
+
     function getFloDevList() {
         let url = baseApiUrl + "/api/Device/GetDeviceList";
         let sendData = {
@@ -238,16 +257,17 @@
         //getOneDeviceAlarmTop10ByBaja(_devicePath, callback);
 
         let column_defs = [
-            { "targets": [0], "width": "8%", "sortable": true },
+            { "targets": [0], "width": "15%", "sortable": true },
-            { "targets": [1], "width": "8%", "sortable": true },
+            { "targets": [1], "width": "25%", "sortable": true },
-            { "targets": [2], "width": "7%", "sortable": true },
+            { "targets": [2], "width": "25%", "sortable": true },
-            { "targets": [3], "width": "7%", "sortable": true },
+            { "targets": [3], "width": "35%", "sortable": true },
         ];
 
         let columns = [
             {
                 "title": "異常ID",
                 "data": "uuid",
+                
             },
             {
                 "title": "異常原因",
@@ -260,6 +280,7 @@
             {
                 "title": "發生/賦歸時間",
                 "data": "timestamp",
+                "width": "45%",
             },
 
         ];

Frontend/_systemMonitor.html

@@ -1,12 +1,12 @@
 <style>
     [id^=yt_tooltip] {
-        width: 450px;
+        width: 650px;
     }    
 </style>
 <div class="container-fluid">
-    <div class="row bg-dark">
+    <div class="row bg-dark align-items-center">
-        <h1 id="sysSubText" class="p-2 mx-5 mb-0"></h1>
+        <label id="sysSubText" class=" mx-5 mb-0 fs-1-05"></label>
-        <div class="btn-group my-2" id="floList">
+        <div class="btn-group my-1" id="floList">
             
         </div>
 
@@ -47,9 +47,9 @@
             if (!res || res.code != "0000" || !res.data) {
 
             } else {
-                let strHtml = `<button name="floBtn" data-id="all" type="button" class="btn btn-secondary waves-effect waves-themed" data-tabname="floor" data-target="all">總覽</button>`;
+                let strHtml = `<button name="floBtn" data-id="all" type="button" class="btn btn-secondary waves-effect waves-themed btn-sm-2" data-tabname="floor" data-target="all">總覽</button>`;
                 $.each(res.data, (index, floObj) => {
-                    strHtml += `<button name="floBtn" data-id="${floObj.floor_tag}" class="btn btn-secondary waves-effect waves-themed" data-tabname="floor" data-target="${floObj.floor_tag}">${floObj.floor_tag}</button>`;
+                    strHtml += `<button name="floBtn" data-id="${floObj.floor_tag}" class="btn btn-secondary waves-effect waves-themed btn-sm-2" data-tabname="floor" data-target="${floObj.floor_tag}">${floObj.floor_tag}</button>`;
                 })
                 $("#floList").html(strHtml);
                 floList = res.data;

Frontend/css/site.css

@@ -3,7 +3,13 @@
     background: rgba(0, 0, 0, 0.03);
 }
 
+.btn-sm-2 {
+    padding: 2px 19px;
+}
 
+.table.dataTable td {
+    word-break:break-all;
+}
 
 /* ================================================================ */
 /*                             單一方法                             */

Frontend/index.html

@@ -2077,8 +2077,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
         }
 
         $(function () {
-            getSysMonBtnList();
             getBuiList();
+            getSysMonBtnList();
         })
 
 
@@ -2095,9 +2095,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
         onEvent("active:change", "#sysMonBtnList", function (e, actEle) {
             if (actEle) {
-                pageAct.sysMainTag = $(actEle).data("maintag");
+                pageAct.sysMainTag = $(actEle).data("subSysObj").main_system_tag;
-                pageAct.sysSubTag = $(actEle).prop("id").split("subSysBtn")[1];
+                pageAct.sysSubTag = $(actEle).data("subSysObj").sub_system_tag;
-                pageAct.sysSubName = $(actEle).text();
+                pageAct.sysSubName = $(actEle).data("subSysObj").full_name;
+                pageAct.sysSubObj = $(actEle).data("subSysObj");
             }
             $(this).trigger("change");
         })
@@ -2115,17 +2116,23 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
         function getSysMonBtnList() {
             let url = baseApiUrl + "/api/Device/GetMainSub";
-            ytAjax = new YourTeam.Ajax(url, null, function (res) {
+            let sendData = {
+                building_tag: pageAct.buiTag,
+            };
+            objSendData.Data = sendData;
+            ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
                 if (!res || res.code != "0000" || !res.data) {
 
                 } else {
-                    let strHtml = ``;
+                    $("#sysMonBtnList").html()
                     $.each(res.data.history_Main_Systems, (index, mainSysObj) => {
                         $.each(mainSysObj.history_Sub_systems, (index2, subSysObj) => {
-                            strHtml += `<button id="subSysBtn${subSysObj.sub_system_tag}" data-maintag="${mainSysObj.main_system_tag}"class="dropdown-item" type="button" data-page="systemMonitor" name="topFunBtn">${subSysObj.full_name}</button>`;
+                            let btn = creBtn(subSysObj.full_name, `subSysBtn${subSysObj.sub_system_tag}`, "topFunBtn", ["dropdown-item"], { page: "systemMonitor" });
+                            subSysObj.main_system_tag = mainSysObj.main_system_tag;
+                            btn.data("subSysObj", subSysObj);
+                            $("#sysMonBtnList").append(btn);
                         })
                     })
-                    $("#sysMonBtnList").append(strHtml);
                 }
             }, null, "POST").send();
         }

FrontendWebApi/ApiControllers/DeviceManageController.cs

@@ -61,7 +61,7 @@ namespace FrontendWebApi.ApiControllers
             {
                 var dbsub = await frontendRepository.GetAllAsync<HistoryDBMainSub>(
                     @$"select distinct v1.system_key main_name, v1.system_value main_system_tag, v2.system_key sub_name, v2.system_value sub_system_tag, v1.system_priority, v2.system_priority,
-                                dk.device_normal_color, dk.device_error_color, dk.device_error_color
+                                dk.device_normal_color, dk.device_close_color, dk.device_error_color
                         from role_auth a
                         join auth_page b on a.AuthCode = b.AuthCode
                         join userinfo c on c.role_guid = a.role_guid