左方選單展開程序調整 | 儀錶板單線圖 zoom in 調整 | dashboard 與 系統監控上方增加棟別文字

Frontend/_dashboard.html

@@ -1,4 +1,6 @@
 <main id="js-page-content" role="main" class="page-content">
+  <div class="top-building-text-container"></div>
+
   <div class="row">
     <div class="col-sm-12 col-xl-4 poisition-relative">
       <!-- <img src="img/clouds.png" class="img-fluid" style="min-height: 520px;"> -->

Frontend/_elecSingleLine.html

@@ -2,8 +2,8 @@
 <div class="container-fluid">
     <div class="row bg-dark align-items-center">
         <label id="sysSubText" class=" mx-5 mb-0 fs-1-05"></label>
-        <div style="height:85vh" class="col-12">
+        <div style="height:85vh" class="col-12 p-0">
-            <iframe src="/ord?file:^px/AllMeter.px|view:?fullScreen=true" width="100%" height="100%"></iframe>
+            <iframe src="/ord?file:^px/AllMeter.px|view:?fullScreen=true" width="100%" height="100%" style="zoom:0.1"></iframe>
        </div>
     </div>
 </div>

Frontend/_systemMonitor.html

@@ -16,7 +16,7 @@
     var floList = [];
    
     $(function () {
-        $("#sysSubText").text(pageAct.sysSubName);
+        $("#sysSubText").text(pageAct.buiName +"/"+pageAct.sysSubName);
         getFloList();
     })
 

Frontend/_topBuildingText.html

@@ -0,0 +1,14 @@
+<div class="row col-12 align-items-center" style="margin-top:-0.5rem">
+    <h2 id="topBuildingText"></h2>
+</div>
+
+<script>
+    $(function(){
+        _setTopBuildingText();
+
+    })
+
+    function _setTopBuildingText(){
+        $("#topBuildingText").text("系統監控/" + (pageAct.buiName ?? ""));
+    }
+</script>

Frontend/css/site.css

@@ -79,7 +79,7 @@ input:-webkit-autofill { background-color: rgba(0, 0, 0, 0.15) !important; }
 .vakata-context, .vakata-context ul { background-color: #3f3f3f; box-shadow: 2px 2px 2px #111111; }
 .vakata-context li > a { color: white; text-shadow: 1px 1px 0 #4b4b4b; }
 .vakata-context .vakata-context-hover > a { background-color: #666666; box-shadow: 0 0 2px #2f2f2f; }
-.vakata-context li > a:hover { background-color: #636363; box-shadow: 0 0 2px #2f2f2f; }
+.vakata-context li > a:hover { background-color: #636363; box-shadow: 0 0 2px #2f2f2f; }    
 
 .card-header.p-3.ui-draggable-handle:hover { cursor: move; }
 

Frontend/css/yourteam/plugins/yt-navbar/yt-navbar.css

@@ -24,20 +24,24 @@
 .yt-left-navbar { position: fixed; left: 0; top: 0; height: 100%; z-index: 10; background-color: rgb(25 25 25 / 95%); width: auto; max-width: 300px; margin-top: 4.125rem; }
 .yt-navbar-content ul { padding: 1rem 0rem; list-style-type: none; }
 .yt-navbar-content ul li { position: relative; display: flex; flex-wrap: wrap; flex-direction: column; }
-.yt-navbar-content ul li a { font-size: 0.9rem; padding: 0.75rem 2.5rem; position: relative; width: 100%; }
+.yt-navbar-content ul li a { font-size: 0.9rem; padding: 0.75rem 1rem 0.75rem 2rem; position: relative; width: 100%; display:flex; justify-content: space-between;}
 .yt-navbar-content ul li a:hover { background-color: var(--theme-fusion-600); }
 .yt-navbar-content ul li a:active, .yt-navbar-content ul li a.active { background-color: var(--theme-light); }
 
-.yt-navbar ul li a[data-nb-node-type=parent]::before {
+.yt-navbar ul li a[data-nb-node-type=parent]::after {
-  content: "▶";
+  content: "◀";
-  position: absolute;
+  margin-left:1rem;
-  left: 19px;
   transform:rotate(0deg);
   transition:0.2s
 }
 
-.yt-navbar ul li a[data-nb-node-type=parent][data-nb-node-status=open]::before {
+.yt-navbar ul li a[data-nb-node-type=parent][data-nb-node-status=open]::after {
-  transform:rotate(90deg);
+  transform:rotate(-90deg);
+}
+
+.yt-navbar-content ul li a[data-nb-node-type=parent] span:hover {
+  color: #886ab5;
+  background: white;
 }
 
 .yt-navbar ul li a[data-nb-node-type=parent] ~ ul{
@@ -48,4 +52,12 @@
 }
 .yt-navbar ul li a[data-nb-node-type=parent][data-nb-node-status=open] ~ ul{
   transition: transform 0.3s;
-}
+}
+
+.yt-navbar-content ul.yt-navbar-dropdown {
+  padding:0;
+}
+
+.yt-navbar-content ul.yt-navbar-dropdown li a {
+  padding: 0.75rem 0.5rem 0.75rem 2.5rem;
+}

Frontend/index.html

@@ -1133,7 +1133,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
           loadNoticeConSta();
 
           allDevices = getAllDevice();
-          if(pageAct.isShowBuildingInMenu){
+          if (pageAct.isShowBuildingInMenu) {
             $("#buiActDrop").hide();
           }
 
@@ -1153,7 +1153,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                   });
                   pageAct.buildList = res.data;
 
-                  $("#buiList").append(strHtml).droSetItem(); //droSetItem 預設第一筆 active
+                  //$("#buiList").append(strHtml).droSetItem(); //droSetItem 預設第一筆 active
                 }
               },
               null,
@@ -1197,6 +1197,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
           initTabsByEle();
           resetYTTooltip();
           $("#sysMonTopBtn").YTNavbar("hide");
+          setTopBuildingText();
         }
 
         // 事件先行讀取
@@ -1223,7 +1224,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
               setSysTagForPageAct(this);
               $("#sysMonTopBtn").YTTab("set");
               $(`#subSysBtn${pageAct.sysSubTag}`).YTTab("set");
-              if(pageAct.isShowBuildingInMenu){
+              if (pageAct.isShowBuildingInMenu) {
                 let building_tag = $(this).data("building-tag");
                 $(`#buildTab${building_tag}`).YTTab("set");
               }
@@ -1257,6 +1258,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
           onEvent("active:change", "#buiList", function (e, actEle) {
             if (actEle) {
               pageAct.buiTag = $(actEle).prop("id").split("buiBtn")[1];
+              pageAct.buiName = $(actEle).text();
               pageAct.urn = $(actEle).data("urn");
               console.log("building");
 
@@ -1272,18 +1274,21 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             "[data-tabname=buildTab]",
             function (e, arg) {
               pageAct.buiTag = $(this).prop("id").split("buildTab")[1];
+              pageAct.buiName = $(this).text();
               pageAct.urn = $(this).data("urn");
               console.log("building");
               $(this).parents("ul").find("a").removeClass("active");
               $(this).parent("a").addClass("active");
-              console.log(e,arg)
+              console.log(e, arg);
-              if(!arg){
+
-                clearTimeout(refreshPageTimer);
+              clearTimeout(refreshPageTimer);
-                refreshPageTimer = setTimeout(() => {
+              refreshPageTimer = setTimeout(() => {
+                if (!arg) {
+                  refreshSubPage("dashboard");
+                } else if(arg.triggerType == "first") {
                   refreshSubPage();
-                }, 0);
+                }
-              }
+              }, 0);
-              
             }
           );
 
@@ -1393,9 +1398,13 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
           });
         }
 
-        function refreshSubPage() {
+        function refreshSubPage(toPage = null) {
           lastPage = sessionStorage.getItem("lastPage");
           console.log("lastPage", lastPage);
+          if (toPage) {
+            lastPage = toPage;
+          }
+
           if (lastPage) {
             let lastPageAct = {};
 
@@ -1409,10 +1418,12 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
               //  || lastPage == "sysSensor"
             ) {
               $("#sysMonTopBtn").YTTab("set");
-              if(!pageAct.isShowBuildingInMenu){
+              if (!pageAct.isShowBuildingInMenu) {
                 $(`#subSysBtn${lastPageAct.sysSubTag}`).click();
               } else {
-                $(`#subSysBtn${lastPageAct.sysSubTag}[data-building-tag=${pageAct.buiTag}]`).click();
+                $(
+                  `#subSysBtn${lastPageAct.sysSubTag}[data-building-tag=${pageAct.buiTag}]`
+                ).click();
               }
             } else {
               $(`[data-tabname=topFunBtn][data-page=${lastPage}]`).YTTab(
@@ -2127,7 +2138,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
               });
 
               $("#froLisPage").html(strHtml);
-              
+
               // $("#homeBtn").YTNavbar("init");
             }
           },
@@ -2150,9 +2161,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
               if (!res || res.code != "0000" || !res.data) {
               } else {
                 $("#sysMonBtnList").html("");
-                console.log("data",res.data)
+
                 $.each(res.data, (i, building) => {
-                  let li = creEle("li",null,null,null,[],);
+                  let li = creEle("li", null, null, null, []);
                   let a = creA(
                     building.building_name,
                     { href: "javascript:;" },
@@ -2163,11 +2174,13 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     },
                     ""
                   );
-                  a.html(`<span id="buildTab${building.building_tag}" data-tabname="buildTab" data-urn="${building.urn_3D}">${building.building_name}</span>`);
+                  a.html(
+                    `<span id="buildTab${building.building_tag}" data-tabname="buildTab" data-urn="${building.urn_3D}">${building.building_name}</span>`
+                  );
                   li.append(a);
                   let ul = creEle("ul", null, null, null, [
-                          "yt-navbar-dropdown",
+                    "yt-navbar-dropdown",
-                        ]);
+                  ]);
                   $.each(building.history_Main_Systems, (index, mainSysObj) => {
                     $.each(
                       mainSysObj.history_Sub_systems,
@@ -2187,24 +2200,28 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                           { href: "javascript:;" },
                           [],
                           `subSysBtn${subSysObj.sub_system_tag}`,
-                          { page: page, tabname: "systemMonitor","building-tag":building.building_tag },
+                          {
+                            page: page,
+                            tabname: "systemMonitor",
+                            "building-tag": building.building_tag,
+                          },
                           "topFunBtn"
                         );
                         li2.append(a2);
                         ul.append(li2);
-                       
+
                         a2.data("subSysObj", subSysObj);
                         subSysObj.main_system_tag = mainSysObj.main_system_tag;
-                        
                       }
                     );
                   });
-                  
+
                   li.append(ul);
                   $("#sysMonBtnList").append(li);
-
                 });
                 $("#sysMonTopBtn").YTNavbar("init");
+
+                $("span[id^=buildTab]").first().YTTab("setAndClick",{triggerType:"first"});
               }
             },
             null,

Frontend/js/init.js

@@ -3,14 +3,14 @@
 // var baseImgUrl = "https://localhost:44376"; // 本地開發用
 
 // Mitsubishi
-// var baseApiUrl = "http://220.132.206.5:8005"; // production 用
+var baseApiUrl = "http://220.132.206.5:8005"; // production 用
 var baseImgUrl = "http://220.132.206.5:8053"; // production 用
 
 // WSP
 // var baseApiUrl = "http://192.168.0.136:8005"; // production 用
 // var baseImgUrl = "http://192.168.0.136:8053"; // production 用
 
-var baseApiUrl = "http://localhost:3604";
+// var baseApiUrl = "http://localhost:3604";
 //var baseImgUrl = "http://localhost:8848";
 
 var varRegApiUrl = "/reg/api/";  //註冊API路徑

Frontend/js/site.js

@@ -2,6 +2,7 @@
   $(".dropdown-menu.dropdown-select-menu").each((index, value) => {
     setDropdownItem(value);
   });
+  setTopBuildingText();
 });
 
 /**
@@ -1246,3 +1247,9 @@ class Forge3DSensor {
     // }, 2000)
   }
 }
+
+function setTopBuildingText(){
+  $(".top-building-text-container").load("_topBuildingText.html",function(){
+
+  })
+}

Frontend/js/yourteam/plugins/yt-navbar/yt-navbar.js

@@ -105,8 +105,6 @@ class YourTeamNavbar {
             let target = $(ele).data("target");
             if ($(this.element)[0] == $(target)[0]) {
                 $(ele).on("click", (e) => {
-                    console.log(ele)
-                    debugger
                     this.toggle();
                 })
             }

Frontend/js/yourteam/plugins/yt-tab/yt-tab.js

@@ -79,7 +79,7 @@ class YourTeamTab {
         let clsObj = this;
 
         // Tab Item 按鈕 click
-        $(`[data-tabname=${this.tabName}]`).on("click", function (e) {
+        $(`[data-tabname=${this.tabName}]`).on("click", function (e,arg) {
             let target = $(this).data("target");
             let obj = this;
             clsObj.eventArg.cancel = false;
@@ -91,7 +91,7 @@ class YourTeamTab {
             clsObj.activeEle = obj;
             clsObj.updActClass();
             // 觸發 yt:tab:change事件
-            $(obj).trigger("yt:tab:change");
+            $(obj).trigger("yt:tab:change",arg);
             if (target) {
                 let tabName = $(target).data("tabname");
                 if (tabName) {
@@ -122,14 +122,16 @@ $.fn.YTTab = function (method,...arg) {
             return this;
         }
     }
-    
+    let triggerArg = {};
     if (method == "set") {
         tabObj.setActItem(this);
         tabObj.updActClass();
-        $(this).trigger("yt:tab:change",{method:"set"});
+        triggerArg = Object.assign({method:"set"},(arg[0] ?? {}));
+        $(this).trigger("yt:tab:change",triggerArg);
     } else if (method == "setAndClick") {
         tabObj.setActItem(this);
-        $(this).click();
+        triggerArg = Object.assign({method:"setAndClick"},(arg[0] ?? {}));
+        $(this).trigger("click",triggerArg);
     }
 
     return tabObj;