左方選單展開程序調整 | 儀錶板單線圖 zoom in 調整 | dashboard 與 系統監控上方增加棟別文字
This commit is contained in:
parent
dea56822c3
commit
a4544780ea
@ -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;"> -->
|
||||
|
||||
@ -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>
|
||||
@ -16,7 +16,7 @@
|
||||
var floList = [];
|
||||
|
||||
$(function () {
|
||||
$("#sysSubText").text(pageAct.sysSubName);
|
||||
$("#sysSubText").text(pageAct.buiName +"/"+pageAct.sysSubName);
|
||||
getFloList();
|
||||
})
|
||||
|
||||
|
||||
14
Frontend/_topBuildingText.html
Normal file
14
Frontend/_topBuildingText.html
Normal 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>
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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)
|
||||
if(!arg){
|
||||
clearTimeout(refreshPageTimer);
|
||||
refreshPageTimer = setTimeout(() => {
|
||||
refreshSubPage();
|
||||
}, 0);
|
||||
}
|
||||
console.log(e, arg);
|
||||
|
||||
clearTimeout(refreshPageTimer);
|
||||
refreshPageTimer = setTimeout(() => {
|
||||
if (!arg) {
|
||||
refreshSubPage("dashboard");
|
||||
} else if(arg.triggerType == "first") {
|
||||
refreshSubPage();
|
||||
}
|
||||
}, 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(
|
||||
@ -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,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,
|
||||
|
||||
@ -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路徑
|
||||
|
||||
@ -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(){
|
||||
|
||||
})
|
||||
}
|
||||
@ -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();
|
||||
})
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user