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

This commit is contained in:
dev01 2023-06-27 14:55:30 +08:00
parent dea56822c3
commit a4544780ea
11 changed files with 97 additions and 45 deletions

View File

@ -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;"> -->

View File

@ -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">
<iframe src="/ord?file:^px/AllMeter.px|view:?fullScreen=true" width="100%" height="100%"></iframe>
<div style="height:85vh" class="col-12 p-0">
<iframe src="/ord?file:^px/AllMeter.px|view:?fullScreen=true" width="100%" height="100%" style="zoom:0.1"></iframe>
</div>
</div>
</div>

View File

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

View File

@ -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>

View File

@ -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 {
content: "▶";
position: absolute;
left: 19px;
.yt-navbar ul li a[data-nb-node-type=parent]::after {
content: "◀";
margin-left:1rem;
transform:rotate(0deg);
transition:0.2s
}
.yt-navbar ul li a[data-nb-node-type=parent][data-nb-node-status=open]::before {
transform:rotate(90deg);
.yt-navbar ul li a[data-nb-node-type=parent][data-nb-node-status=open]::after {
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{
@ -49,3 +53,11 @@
.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;
}

View File

@ -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();
}
// 事件先行讀取
@ -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)
if(!arg){
console.log(e, arg);
clearTimeout(refreshPageTimer);
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 = {};
@ -1412,7 +1421,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
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(
@ -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,7 +2174,9 @@ 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",
@ -2187,7 +2200,11 @@ 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);
@ -2195,16 +2212,16 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
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,

View File

@ -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路徑

View File

@ -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(){
})
}

View File

@ -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();
})
}

View File

@ -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;