[Frontend]報表校區顯示 | dashboard 小類點擊跳轉 | 重新整理頁面跳轉

This commit is contained in:
Celeste 2023-08-24 15:13:29 +08:00
parent 716ecde2af
commit abb323c961
4 changed files with 1142 additions and 1058 deletions

View File

@ -358,11 +358,23 @@
x.mainSys == mainSysObj.main_system_tag && x.mainSys == mainSysObj.main_system_tag &&
x.subSys == subSysObj.sub_system_tag x.subSys == subSysObj.sub_system_tag
)[0]?.iconClass; )[0]?.iconClass;
strHtml += `<div class="btn-group btn-group-lg col-lg-6 mb-4 dev-group" data-id="/${pageAct.AreaTag}/${pageAct.buiTag}/${mainSysObj.main_system_tag}/${subSysObj.sub_system_tag}"> strHtml += `<div class="btn-group btn-group-lg col-lg-6 mb-4 dev-group" data-id="/${pageAct.AreaTag
<button name="topFunBtn" data-page="systemMonitor" type="button" class="btn btn-secondary col-4" > }/${pageAct.buiTag}/${mainSysObj.main_system_tag}/${subSysObj.sub_system_tag
}">
<button name="topFunBtn" data-page="systemMonitor" type="button" class="btn btn-secondary col-4" data-subSysobj=${JSON.stringify(
{
...subSysObj,
main_system_tag: mainSysObj.main_system_tag,
}
)}>
<img src="${iconClass}" class="w-100 "></img> <img src="${iconClass}" class="w-100 "></img>
</button> </button>
<button name="topFunBtn" data-page="systemMonitor" id="sysSubCardBtn${subSysObj.sub_system_tag}" type="button" class="btn btn-secondary" data-id="${subSysObj.sub_system_tag}" style="font-size: 20px">${subSysObj.full_name}</button> <button name="topFunBtn" data-page="systemMonitor" id="sysSubCardBtn${subSysObj.sub_system_tag
}" type="button" class="btn btn-secondary" data-id="${subSysObj.sub_system_tag
}" data-subSysObj=${JSON.stringify({
...subSysObj,
main_system_tag: mainSysObj.main_system_tag,
})} style="font-size: 20px">${subSysObj.full_name}</button>
</div>`; </div>`;
}); });
}); });

View File

@ -113,6 +113,13 @@
</div> </div>
</h2> </h2>
</div> </div>
<div class="panel-hdr" style="min-height: auto">
<h2 class="py-2 col-12" id="school_zone">
<div class="col-1">校區</div>
<div class="item btn-group btn-group-toggle"
data-toggle="buttons"></div>
</h2>
</div>
<div class="panel-hdr" style="min-height: auto"> <div class="panel-hdr" style="min-height: auto">
<h2 class="py-2 col-12" id="building"> <h2 class="py-2 col-12" id="building">
<div class="col-1">棟別</div> <div class="col-1">棟別</div>
@ -173,7 +180,7 @@
</div> </div>
<span class="d-flex justify-content-end">單位kWh </span> <span class="d-flex justify-content-end">單位kWh </span>
<table id="report_table" <table id="report_table"
class="table table-bordered table-striped text-center m-0"></table> class="table table-bordered table-striped text-center m-0 w-100"></table>
</div> </div>
</div> </div>
</div> </div>
@ -211,9 +218,11 @@
}, },
}; };
var token = cookies.get("JWT-Authorization"); var token = cookies.get("JWT-Authorization");
var school_zone = "0";
$(function () { $(function () {
console.log("即時趨勢進入點"); console.log("即時趨勢進入點");
getSchoolZone();
setNameByType(); setNameByType();
initDatePicker(); initDatePicker();
eventsInit(); eventsInit();
@ -232,14 +241,15 @@
//調整畫面 //調整畫面
$("#js-page-content").removeClass("mt-0"); $("#js-page-content").removeClass("mt-0");
var html = ""; // var html = "";
for (let building of pageAct.buildList) { // for (let building of pageAct.buildList) {
html += `<label class="btn btn-outline-success waves-effect waves-themed"> // html += `<label class="btn btn-outline-success waves-effect waves-themed">
<input type="checkbox" name="buildingRadio" id="radio_${building.building_tag}" value="${building.building_tag}" onChange="SelectBuild(this,'${building.building_tag}')"> ${building.full_name} // <input type="checkbox" name="buildingRadio" id="radio_${building.building_tag}" value="${building.building_tag}" onChange="SelectBuild(this,'${building.building_tag}')"> ${building.full_name}
</label>`; // </label>`;
} // }
$("#building").find(".item").empty(); // $("#building").find(".item").empty();
$("#building").find(".item").append(html); // $("#building").find(".item").append(html);
getbuildings(school_zone);
checkIsSelectedBuilding(); checkIsSelectedBuilding();
}); });
@ -808,7 +818,6 @@
data: "total_price", data: "total_price",
sWidth: "70px", sWidth: "70px",
render: function (data) { render: function (data) {
console.log(data)
return parseInt(data) === 0 ? "" : data; return parseInt(data) === 0 ? "" : data;
}, },
}, },
@ -839,8 +848,7 @@
} }
} }
} }
console.log("datas", datas);
console.log("totalColumns", totalColumns);
datatable = $("#report_table").DataTable({ datatable = $("#report_table").DataTable({
data: datas, data: datas,
destroy: true, destroy: true,
@ -1021,4 +1029,63 @@
function SelectFloor(e, floor_guid) { function SelectFloor(e, floor_guid) {
// getMeterData(); // getMeterData();
} }
function getSchoolZone() {
var url = baseApiUrl + "/api/Device/GetSchoolZone";
$.ajax({
type: "POST",
url: url,
headers: {
Authorization: "Bearer " + token,
},
success: function (rel) {
if (rel.code != "0000") {
if (rel.code == "9999") {
toast_error(rel.msg);
} else {
toast_warning(rel.msg);
}
return;
}
if (rel.data && rel.data.length > 0) {
console.log("getSchoolZone", rel);
let htmlStr = "";
rel.data.forEach(({ system_key, system_value }) => {
htmlStr += `
<label
class="btn btn-outline-success waves-effect waves-themed ${school_zone === system_key ? "active" : ""
}"
>
<input type="radio" name="buildingRadio" value=${system_key} />${system_value}
</label>`;
});
$("#school_zone>.btn-group").append(htmlStr);
}
},
});
}
$("#school_zone").on("click", function (event) {
event.stopPropagation();
if (event.target.tagName !== "INPUT") {
$("#school_zone label.active").removeClass("active");
$(event.target).addClass("active");
} else {
school_zone = event.target.value;
getbuildings(school_zone);
}
});
function getbuildings(value) {
var html = "";
for (let building of pageAct.buildList.filter(
({ school_zone }) => school_zone === value
)) {
html += `<label class="btn btn-outline-success waves-effect waves-themed">
<input type="checkbox" name="buildingRadio" id="radio_${building.building_tag}" value="${building.building_tag}" onChange="SelectBuild(this,'${building.building_tag}')"> ${building.full_name}
</label>`;
}
$("#building").find(".item").empty();
$("#building").find(".item").append(html);
}
</script> </script>

View File

@ -1,5 +1,5 @@
<div class="container-fluid px-0"> <div class="container-fluid px-0">
<div class="row no-gutters" style="min-height: 90vh;"> <div class="row no-gutters" style="height: calc(100vh - 72px)">
<div class="col-1"> <div class="col-1">
<aside id="sysMonNavbar" class="w-100 yt-navbar yt-left-navbar h-100 mt-0"> <aside id="sysMonNavbar" class="w-100 yt-navbar yt-left-navbar h-100 mt-0">
<div class="yt-navbar-content"> <div class="yt-navbar-content">

View File

@ -1190,7 +1190,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
pageAct.buiTag = $(actEle).prop("id").split("buiBtn")[1]; pageAct.buiTag = $(actEle).prop("id").split("buiBtn")[1];
pageAct.buiName = $(actEle).text(); pageAct.buiName = $(actEle).text();
pageAct.urn = $(actEle).data("urn"); pageAct.urn = $(actEle).data("urn");
console.log("building");
clearTimeout(refreshPageTimer); clearTimeout(refreshPageTimer);
refreshPageTimer = setTimeout(() => { refreshPageTimer = setTimeout(() => {
@ -1344,7 +1343,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
) { ) {
lastPageAct = JSON.parse(sessionStorage.getItem("pageAct")); lastPageAct = JSON.parse(sessionStorage.getItem("pageAct"));
} }
if ( if (
(lastPageAct.sysSubTag && lastPage == "systemMonitor") || (lastPageAct.sysSubTag && lastPage == "systemMonitor") ||
lastPage == "sysElevator" lastPage == "sysElevator"
@ -1352,11 +1350,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
) { ) {
$("#sysMonTopBtn").YTTab("set"); $("#sysMonTopBtn").YTTab("set");
if (!pageAct.isShowBuildingInMenu) { if (!pageAct.isShowBuildingInMenu) {
$(`#subSysBtn${lastPageAct.sysSubTag}`).click(); $(`#buiBtn${lastPageAct.buiTag}`).click();
} else { } else {
$( $(
`#subSysBtn${lastPageAct.sysSubTag `#subSysBtn${lastPageAct.sysSubTag
}[data-building-tag=${buildingTagOnJquery(pageAct.buiTag)}]` }[data-building-tag=${buildingTagOnJquery(lastPageAct.buiTag)}]`
).click(); ).click();
} }
} else { } else {
@ -1911,15 +1909,16 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
} }
function setSysTagForPageAct(obj) { function setSysTagForPageAct(obj) {
console.log($(obj).data("subsysobj"))
pageAct.sysMainTag = pageAct.sysMainTag =
$(obj).data("subSysObj")?.main_system_tag || $(obj).data("subsysobj")?.main_system_tag ||
pageAct.sysSubObj.main_system_tag; pageAct.sysSubObj.main_system_tag;
pageAct.sysSubTag = pageAct.sysSubTag =
$(obj).data("subSysObj")?.sub_system_tag || $(obj).data("subsysobj")?.sub_system_tag ||
pageAct.sysSubObj.sub_system_tag; pageAct.sysSubObj.sub_system_tag;
pageAct.sysSubName = pageAct.sysSubName =
$(obj).data("subSysObj")?.full_name || pageAct.sysSubName; $(obj).data("subsysobj")?.full_name || pageAct.sysSubName;
pageAct.sysSubObj = $(obj).data("subSysObj") || pageAct.sysSubObj; pageAct.sysSubObj = $(obj).data("subsysobj") || pageAct.sysSubObj;
getDevItem(); getDevItem();
} }
@ -2234,7 +2233,13 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
{ href: "javascript:;" }, { href: "javascript:;" },
[], [],
`subSysBtn${subSysObj.sub_system_tag}`, `subSysBtn${subSysObj.sub_system_tag}`,
{ page: page, tabname: "systemMonitor" }, {
page: page,
tabname: "systemMonitor",
"building-tag": buildingTagOnJquery(
pageAct.buiTag
),
},
"topFunBtn" "topFunBtn"
); );
li.append(a); li.append(a);
@ -2243,10 +2248,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
subSysObj.main_system_tag = mainSysObj.main_system_tag; subSysObj.main_system_tag = mainSysObj.main_system_tag;
$("#sysMonBtnList").append(li); $("#sysMonBtnList").append(li);
if (index === 0 && index2 === 0) { if (index === 0 && index2 === 0) {
pageAct.sysMainTag = mainSysObj.main_system_tag; // pageAct.sysMainTag = mainSysObj.main_system_tag;
pageAct.sysSubName = subSysObj.full_name; // pageAct.sysSubName = subSysObj.full_name;
pageAct.sysSubObj = subSysObj; // pageAct.sysSubObj = subSysObj;
pageAct.sysSubTag = subSysObj.sub_system_tag; // pageAct.sysSubTag = subSysObj.sub_system_tag;
$(`#subSysBtn${subSysObj.sub_system_tag}`).addClass( $(`#subSysBtn${subSysObj.sub_system_tag}`).addClass(
"active" "active"
); );