jay.chang/ibms-dome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Frontend][儀錶板] 即時功率佔比設置 | 即時功率訂閱串接 | 計時器移至 index.html | topbar上方即時告警閃爍程序建置

Browse Source
This commit is contained in:
dev01 2022-12-12 15:06:35 +08:00
parent d5b35002d0
commit 7f3931d104
3 changed files with 152 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
Frontend/_dashboard.html
View File

@ -85,7 +85,7 @@
<div class="p-3 bg-info-200 rounded overflow-hidden position-relative text-white mb-g">
<div class="">
<h3 class="display-4 d-block l-h-n m-0 fw-500">
8,846
<span id="insPowerPer">--</span>
<small class="m-0 l-h-n">即時契約容量占比 kWH</small>
</h3>
</div>
@ -252,6 +252,8 @@
var eveWeekElecChart = null;
var errRecChart = null;
var errChkChart = null;
var loadedCnt = 0;
var chartDataCnt = { alarmCnt:0, recCnt:0, chkedErrCnt:0, unChkedErrCnt:0 };
var sysIconList = [
{ mainSys: "EE", subSys: "E1", iconClass: "fal fa-grip-vertical" },
@ -299,7 +301,6 @@
})
})
$("#sysSubBtnList").html(strHtml);
getAlarmSub();
}
}, null, "POST").send();
@ -323,12 +324,31 @@
tarElePath = devObj.device_number;
})
})
startPageLoading();
getSubBaja();
getElectricBaja();
}
}, null, "POST").send();
}
function getSubBaja() {
let devPath = tarElePath.split("_").slice(0, 8).join("/");
let tempOrdPath = { devicePath: devPath }
let myBaja = new subscriptionElectricmeter();
myBaja.setSubscribeElectricmeterByBql(tempOrdPath);
myBaja.setSubscribeElectricmeterCallBack(function (data) {
if (data.point_name == "P") {
let value = parseFloat(data.value).roundDecimal(2);
$("#insPower").text(value);
$("#insPowerPer").text((value / 4).roundDecimal(2) + "%");
}
})
myBaja.setSubscribeElectricmeterEndCallBack(function () {
chkBajaLoaded();
})
}
//從 baja 取得電表用電量
function getElectricBaja() {
let devNum = tarElePath.split("_").slice(0, 8).join("_");
@ -338,9 +358,9 @@
let prevTwoWeek = displayDate(getTimeByType(null, -14), "date").replaceAll("/", "-") + "T00:00:00";
let yesterday = displayDate(getTimeByType(null, -1), "date").replaceAll("/", "-") + "T00:00:00";
let tomorrow = displayDate(getTimeByType(null, 1), "date").replaceAll("/", "-") + "T00:00:00";
let loadedCnt = 0;
/* let batch = new baja.comm.Batch();*/
startPageLoading();
// 今日用電量
getElectricMeterDayDataByBaja(devNum + "_KWH", "Mitsubishi_Sup", today, tomorrow, (data) => {
let result = data?.data[0]?.sum;
@ -376,43 +396,35 @@
chkBajaLoaded();
})
// 電表即時功率
getElectricMeterNoweDataByBaja(devPath, (data) => {
data = data.data;
let result = data.filter(x => x.name == "P")[0]?.value;
result = result ? parseFloat(result).toFixed(2) : 0;
$("#insPower").text(result);
chkBajaLoaded();
})
let alarmCnt = 0,recCnt = 0;
let chkedErrCnt = 0, unChkedErrCnt = 0;
// 異常數量與賦歸數量
getAlarmCountByBaja((aData) => {
alarmCnt = aData.count;
chartDataCnt.alarmCnt = aData.count;
chkBajaLoaded();
})
getRecoverCountByBaja((rData) => {
recCnt = rData.count;
chartDataCnt.recCnt = rData.count;
chkBajaLoaded();
})
// 異常數量與賦歸數量
getCheckedAckedCountByBaja((data) => {
chkedErrCnt = data.count;
chkBajaLoaded();
})
getUnCheckedAckedCountByBaja((uData) => {
unChkedErrCnt = uData.count;
chartDataCnt.chkedErrCnt = data.count;
chkBajaLoaded();
})
function chkBajaLoaded() {
loadedCnt++;
if (loadedCnt == 9) {
chartErrRec(["異常數量", "賦歸數量"], [alarmCnt, recCnt]);
chartErrChk(["已確認異常", "未確認異常"], [chkedErrCnt, unChkedErrCnt]);
endPageLoading();
}
getUnCheckedAckedCountByBaja((uData) => {
chartDataCnt.unChkedErrCnt = uData.count;
chkBajaLoaded();
})
}
function chkBajaLoaded() {
loadedCnt++;
if (loadedCnt == 9) {
chartErrRec(["異常數量", "賦歸數量"], [chartDataCnt.alarmCnt, chartDataCnt.recCnt]);
chartErrChk(["已確認異常", "未確認異常"], [chartDataCnt.chkedErrCnt, chartDataCnt.unChkedErrCnt]);
endPageLoading();
}
}
@ -690,31 +702,21 @@
}
// 從 baja 訂閱 左下角各系統小類異常狀態
function getAlarmSub() {
var tipEle = '';
//if (sysSubList.length != 0) {
// tipEle = YT.Alert.Tip("資料讀取中...","show");
//}
/*$(`.dev-group i.fa-lightbulb-on`)*/
getSystemAlarmByBaja((data) => {
console.log(data)
$.each(data.data, (idx, alaObj) => {
if (alaObj.alarmClass.indexOf("_") != -1) {
let mainSubSys = alaObj.alarmClass.split("_").slice(0, 2).join("/");
$(`.btn-group.dev-group[data-id*='${mainSubSys}'] i`).addClass("blink");
}
})
$(`.dev-group i.fa-lightbulb-on.blink`).each((idx, ele) => {
let devPath = $(ele).parents(".dev-group").data("id");
let sysPath = devPath.split("/").slice(3, 5).join("/");
let alaDevPath = data.data.map(x => x.alarmClass?.split("_").slice(0, 2).join("/"));
if (alaDevPath.indexOf(sysPath) == -1) {
$(ele).removeClass("blink");
}
})
function getAlarmSub(data) {
$.each(data.data, (idx, alaObj) => {
if (alaObj.alarmClass.indexOf("_") != -1) {
let mainSubSys = alaObj.alarmClass.split("_").slice(0, 2).join("/");
$(`.btn-group.dev-group[data-id*='${mainSubSys}'] i`).addClass("blink");
}
})
$(`.dev-group i.fa-lightbulb-on.blink`).each((idx, ele) => {
let devPath = $(ele).parents(".dev-group").data("id");
let sysPath = devPath.split("/").slice(3, 5).join("/");
let alaDevPath = data.data.map(x => x.alarmClass?.split("_").slice(0, 2).join("/"));
if (alaDevPath.indexOf(sysPath) == -1) {
$(ele).removeClass("blink");
}
})
}
// 取得電梯資料
@ -743,15 +745,15 @@
}, null, "POST").send();
}
function timeOutGetData() {
let timeOut3s = setInterval(() => {
getAlarmSub();
}, 3000)
let timeOut5m = setInterval(() => {
getElectricBaja();
}, 5 * 60 * 1000)
timeOuters = timeOuters.concat([timeOut3s, timeOut5m]);
}
//function timeOutGetData() {
// let timeOut3s = setInterval(() => {
// getAlarmSub();
// }, 3000)
// let timeOut5m = setInterval(() => {
// getElectricBaja();
// }, 5 * 60 * 1000)
// timeOuters = timeOuters.concat([timeOut3s, timeOut5m]);
//}
function show3DModel() {
launchViewerNoTools(pageAct.urn, (viewer, nodeIds) => {
@ -904,6 +906,12 @@
})
}
$(window).on("timeout:5m", function () {
console.log("五分鐘更新")
getElectricBaja();
})
onEvent("click", "button[id^=sysSubCardBtn]", function () {
let subSysTag = $(this).data("id");
$(`#subSysBtn${subSysTag}`).click();

1
Frontend/_sysElevator.html
View File

@ -1044,7 +1044,6 @@
//地震管制
actLightByPoi("EER", "#earQuaCon");
if (data.point_name == "DNO" || data.point_name == "SP_RCS") {
debugger
//遠端休止
actLightByPoiEx("SP_RCS", "#disRes", "DNO", "trueText");
}

123
Frontend/index.html
View File

@ -1478,7 +1478,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<i class="fal fa-tv fa-2x"></i><br>系統監控
</a>
<div class="dropdown-menu dropdown-select-menu js-auto-close" id="sysMonBtnList">
</div>
</div>
<div class="btn-group mx-4">
@ -2116,7 +2116,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
// - 會被清洗，有類似程序需放入 loadPack1 Function rquired 引用
// (原 datatable.bundle.js require 會出問題，先以 cdn datatable.min.js引用)
require(["jquery"], loadedBasePack);
})
/**
@ -2166,14 +2166,14 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
cookies = new YourTeam.Utility.Cookie();
jwt = cookies.get("JWT-Authorization");
loadEvent();
if (!jwt) {
myBaja = new MyBaja();
myBaja.setMyUserAccount(Login);
} else {
isValidLogin();
}
$(loadEle).Loading("close");
}
@ -2285,7 +2285,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
})
endPageLoading();
if (typeof timeOuters != "undefined") {
$.each(timeOuters, (idx, timeOut) => {
clearInterval(timeOut);
@ -2319,13 +2319,23 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
})
$(window).on("timeout:3s", function () {
getSystemAlarmByBaja((data) => {
if (typeof getAlarmSub != "undefined" && getAlarmSub) {
getAlarmSub(data);
}
alarmIconBlink();
})
})
}
// 登入驗證
function Login(account) {
console.log(account)
/*if ($("#login-form").valid()) {*/
var url = baseApiUrl + "/api/Login/";
var send_data = {
account: account,
@ -2399,7 +2409,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
function drawErrRecTabBlo() {
let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
</table>`
</table>`
return strHtml;
}
@ -2407,7 +2417,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
function drawOpeRecTabBlo() {
let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
</table>`
</table>`
return strHtml;
}
@ -2420,37 +2430,37 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
$(ele).YTTooltip({
html: `<div class="card m-1 border device-wrap">
<div class="card-header p-3">
<div class="position-absolute w-50" style="word-break: break-all;">
<label class="m-0 mt-2">${devName}</label>
</div>
<div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
<button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
<button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
<button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
<button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
<button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
</div>
</div>
<div class="card-body p-2 tab-content">
<div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
${drawStateTabBlo(devNum)}
</div>
<div id="info" data-tabname="cardTab" data-tabrole="child">
${drawInfoTabBlo(devGuid)}
</div>
<div id="errRec" data-tabname="cardTab" data-tabrole="child">
${drawErrRecTabBlo()}
</div>
<div id="opeRec" data-tabname="cardTab" data-tabrole="child">
${drawOpeRecTabBlo()}
</div>
<div class="card-header p-3">
<div class="position-absolute w-50" style="word-break: break-all;">
<label class="m-0 mt-2">${devName}</label>
</div>
<div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
<button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
<button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
<button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
<button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
<button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
</div>
</div>
</div>`,
<div class="card-body p-2 tab-content">
<div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
${drawStateTabBlo(devNum)}
</div>
<div id="info" data-tabname="cardTab" data-tabrole="child">
${drawInfoTabBlo(devGuid)}
</div>
<div id="errRec" data-tabname="cardTab" data-tabrole="child">
${drawErrRecTabBlo()}
</div>
<div id="opeRec" data-tabname="cardTab" data-tabrole="child">
${drawOpeRecTabBlo()}
</div>
</div>
</div>`,
group: "device",
onShow: function (tooltipEle, oriEle) {
var tab = new YT.Tab({ tabName: "cardTab" })
@ -2593,18 +2603,45 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
$(loadEle).Loading("close");
}
function alarmIconBlink(data) {
if (data?.data.length != 0) {
$(".page-header [name=topFunBtn][data-page=alert] i").addClass("blink");
} else {
$(".page-header [name=topFunBtn][data-page=alert] i").removeClass("blink");
}
}
function timeOutGetData() {
let timeOut3s = null, timeOut5m = null;
let events = $._data($(window)[0], "events");
if (Object.keys(events).findIndex(x => x == "timeout:3s") != -1) {
timeOut3s = setInterval(() => {
$(window).trigger("timeout:3s");
}, 3000)
}
if (Object.keys(events).findIndex(x => x == "timeout:5m") != -1) {
timeOut5m = setInterval(() => {
$(window).trigger("timeout:5m");
}, 5 * 60 * 1000)
}
timeOuters = timeOuters.concat([timeOut3s, timeOut5m]);
}
function showMainSys() {
let url = baseApiUrl + "/Utility/isShowMaiSys";
ytAjax = new YourTeam.Ajax(url, null, function (res) {
if (!res || res.code != "0000") {
let url = baseApiUrl + "/Utility/isShowMaiSys";
ytAjax = new YourTeam.Ajax(url, null, function (res) {
if (!res || res.code != "0000") {
} else {
pageAct.mainStatus = res.data;
}
}
}, null, "POST").send();
}
}
function startPageLoading() {
if (!loadingTip) {
loadingTip = YT.Alert.Tip("資料讀取中...", "show");