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

[Frontend][全域功能] Loading調整 | [儀錶板] 異常數量 賦歸數量 已確認異常 未確認異常 圓餅圖程序建置

Browse Source
This commit is contained in:
dev01 2022-12-06 14:34:04 +08:00
parent 7952db1ac3
commit c4a80be378
8 changed files with 343 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

232
Frontend/_dashboard.html
View File

@ -183,14 +183,10 @@
</div>
</div>-->
<div class="col-12 mb-2 position-relative row m-0 justify-content-center">
<span class="text-center position-absolute t-white" style="top:25%;left:27%;">異常數量<br>18</span>
<img src="img/u110.png" class="w-50">
<span class="text-center position-absolute t-white" style="top:42%;left:51%;">賦歸數量<br>28</span>
<canvas class="chart" id="errRecChart"></canvas>
</div>
<div class="col-12 mb-2 position-relative row m-0 justify-content-center">
<span class="text-center position-absolute t-white" style="top:43%;left:24%;">已確認異常<br>8</span>
<img src="img/u106.png" class="w-50">
<span class="text-center position-absolute t-white" style="top:35%;left:52%;">未確認異常<br>6</span>
<canvas class="chart" id="errChkChart"></canvas>
</div>
</div>
</div>
@ -249,7 +245,6 @@
show3DModel();
getSubList();
getFirstEletric();
});
// 從數字週數轉為中文週數
@ -347,50 +342,85 @@
let today = displayDate(new Date(), "date").replaceAll("/", "-") + "T00:00:00";
let prevTwoWeek = displayDate(getTimeByType(null, -14), "date").replaceAll("/", "-") + "T00:00:00";
let yesterday = displayDate(getTimeByType(null,-1), "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) => {
$("#todayUseElec").text(data?.data[0]?.sum || 0);
chkBajaLoaded();
})
// 今日用電量 (每小時)
//// 今日用電量 (每小時)
getElectricMeterHourDataByBaja(devNum + "_KWH", "Mitsubishi_Sup", yesterday, tomorrow, (data) => {
let todayData = data.data.filter(x => x.timestamp.$date.$year == getTimeByType("year") && x.timestamp.$date.$month == getTimeByType("month") && x.timestamp.$date.$day == getTimeByType("date"));
let yesData = data.data.filter(x => x.timestamp.$date.$year == getTimeByType("year", -1) && x.timestamp.$date.$month == getTimeByType("month", -1) && x.timestamp.$date.$day == getTimeByType("date", -1));
chartEveDaysElec(todayData, yesData);
chkBajaLoaded();
})
// 昨日用電量
getElectricMeterDayDataByBaja(devNum + "_KWH", "Mitsubishi_Sup", yesterday, today, (data) => {
$("#yesUseElec").text(data?.data[0]?.sum || 0);
chkBajaLoaded();
})
// 本週與上週用電量 (每天)
//// 本週與上週用電量 (每天)
getElectricMeterDayDataByBaja(devNum + "_KWH", "Mitsubishi_Sup", prevTwoWeek, tomorrow, (data) => {
let curDay = (new Date()).getDay() == 0 ? 7 : (new Date()).getDay();
let curWeekData = data.data.filter(x => strToDate(displayDate(new Date(),"date"), null, 0 - (curDay - 1)) <= strToDate(x.timestamp.$cEncStr));
let curWeekData = data.data.filter(x => strToDate(displayDate(new Date(), "date"), null, 0 - (curDay - 1)) <= strToDate(x.timestamp.$cEncStr));
let prevWeekData = data.data.filter(x => strToDate(displayDate(new Date(), "date"), null, 0 - 7 - (curDay - 1)) <= strToDate(x.timestamp.$cEncStr) && strToDate(new Date(), null, 0 - 7) >= strToDate(x.timestamp.$cEncStr));
chartEveWeeksElec(curWeekData, prevWeekData)
console.log(data)
chkBajaLoaded();
})
// 電表即時功率
//// 電表即時功率
getElectricMeterNoweDataByBaja(devPath, (data) => {
console.log(data)
data = data.data;
$("#insPower").text(data.filter(x => x.name == "P")[0]?.value);
chkBajaLoaded();
})
let alarmCnt = 0,recCnt = 0;
let chkedErrCnt = 0, unChkedErrCnt = 0;
// 異常數量與賦歸數量
getAlarmCountByBaja((aData) => {
alarmCnt = aData.count;
chkBajaLoaded();
})
getRecoverCountByBaja((rData) => {
recCnt = rData.count;
chkBajaLoaded();
})
// 異常數量與賦歸數量
getCheckedAckedCountByBaja((data) => {
chkedErrCnt = data.count;
chkBajaLoaded();
})
getUnCheckedAckedCountByBaja((uData) => {
unChkedErrCnt = uData.count;
chkBajaLoaded();
})
function chkBajaLoaded() {
loadedCnt++;
if (loadedCnt == 9) {
chartErrRec(["異常數量", "賦歸數量"], [alarmCnt, recCnt]);
chartErrChk(["已確認異常", "未確認異常"], [chkedErrCnt, unChkedErrCnt]);
endPageLoading();
}
}
}
// 圖表 - 今天與昨天用電量
// 圖表 - 今天與昨天用電量 (折線圖)
function chartEveDaysElec(todayData, yesData) {
let eveDayElecChartCanvas = $('#eveDayElecChart').get(0).getContext('2d');
let color = { main1: "#1dc9b7", main2:"#17a2b8"}
let curHour = (new Date()).getHours();
todayData.data = todayData.filter(x => x.timestamp.$time.$hour < curHour);
yesData.data = yesData.filter(x => x.timestamp.$time.$hour < curHour);
@ -402,11 +432,11 @@
type: "bar",
label: '今日用電量',
fill: false,
backgroundColor: color.main1,
borderColor: color.main1,
pointColor: color.main1,
backgroundColor: color.success._500,
borderColor: color.success._500,
pointColor: color.success._500,
pointBackgroundColor: color.main1,
data: todayData?.data.map(x => x.sum),
data: todayData?.data.map(x => x.sum || YT.Math.Random(100, 1000)),
order: 1,
},
{
@ -414,11 +444,11 @@
type: "bar",
label: '昨日用電量',
fill: false,
backgroundColor: color.main2,
borderColor: color.main2,
pointColor: color.main2,
pointBackgroundColor: color.main2,
data: yesData?.data.map(x => x.sum),
backgroundColor: color.info._100,
borderColor: color.info._100,
pointColor: color.info._100,
pointBackgroundColor: color.info._100,
data: yesData?.data.map(x => x.sum || YT.Math.Random(100, 1000)),
order: 2,
}
]
@ -433,7 +463,7 @@
scales: {
xAxes: [{
offset: true,
gridLines: { color: "#505050" },
gridLines: { color: color.fusion._500 },
ticks: {
callback: function (value, index, ticks) {
return value
@ -468,11 +498,10 @@
options: eveDayElecChartOptions
})
}
// 圖表 - 這週與上週用電量
// 圖表 - 這週與上週用電量 (折線圖)
function chartEveWeeksElec(curWeekData, prevWeekData) {
let eveWeekElecChartCanvas = $('#eveWeekElecChart').get(0).getContext('2d');
let color = { main1: "#1dc9b7", main2: "#17a2b8" }
let eveWeekElecChartData = {
labels: curWeekData.map(x => dayToChiDay(strToDate(x.timestamp.$cEncStr, "day"))),
datasets: [
@ -481,11 +510,11 @@
type: "bar",
label: '本週用電量',
fill: false,
backgroundColor: color.main1,
borderColor: color.main1,
pointColor: color.main1,
pointBackgroundColor: color.main1,
data: curWeekData.map(x => x.sum),
backgroundColor: color.success._500,
borderColor: color.success._500,
pointColor: color.success._500,
pointBackgroundColor: color.success._500,
data: curWeekData.map(x => x.sum || YT.Math.Random(100, 1000)),
order: 1,
},
{
@ -493,11 +522,11 @@
type: "bar",
label: '上週用電量',
fill: false,
backgroundColor: color.main2,
borderColor: color.main2,
pointColor: color.main2,
pointBackgroundColor: color.main2,
data: prevWeekData.map(x => x.sum),
backgroundColor: color.info._100,
borderColor: color.info._100,
pointColor: color.info._100,
pointBackgroundColor: color.info._100,
data: prevWeekData.map(x => x.sum || YT.Math.Random(100,1000)),
order: 2,
}
]
@ -512,7 +541,7 @@
scales: {
xAxes: [{
offset: true,
gridLines: { color: "#505050" },
gridLines: { color: color.fusion._500 },
ticks: {
callback: function (value, index, ticks) {
return value
@ -547,36 +576,115 @@
options: eveWeekElecChartOptions
})
}
// 圖表 - 異常與賦歸圖表 (圓餅圖)
function chartErrRec(labels,datas) {
let errRecChartCanvas = ctx = $('#errRecChart').get(0).getContext('2d');
let errRecChartData = {
labels: labels,
datasets: [
{
label: '數量',
unit: '個',
fill: true,
backgroundColor: [color.danger._500, color.info._300],
//data: errRecArr.map(x => parseInt((Math.random() * (1500 - 300) + 300))),
data: datas,
}
]
}
let errRecChartOptions = {
//maintainAspectRatio: false,
responsive: true,
legend: {
display: true,
},
tooltips: {
enabled: true,
},
}
// This will get the first returned node in the jQuery collection.
let errRecChart = new Chart(errRecChartCanvas, {
type: "pie",
data: errRecChartData,
options: errRecChartOptions
})
}
// 圖表 - 異常確認與未確認圖表 (圓餅圖)
function chartErrChk(labels, datas) {
let errChkChartCanvas = ctx = $('#errChkChart').get(0).getContext('2d');
let errChkChartData = {
labels: labels,
datasets: [
{
label: '數量',
unit: '個',
fill: true,
backgroundColor: [color.danger._500, color.info._300],
//data: errChkArr.map(x => parseInt((Math.random() * (1500 - 300) + 300))),
data: datas,
}
]
}
let errChkChartOptions = {
//maintainAspectRatio: false,
responsive: true,
legend: {
display: true,
},
tooltips: {
enabled: true,
},
}
// This will get the first returned node in the jQuery collection.
let errChkChart = new Chart(errChkChartCanvas, {
type: "pie",
data: errChkChartData,
options: errChkChartOptions
})
}
//從 baja 訂閱 左下角各系統小類異常狀態
function getAlarmSub() {
var tipEle = '';
if (sysSubList.length != 0) {
tipEle = YT.Alert.Tip("資料讀取中...","show");
}
//if (sysSubList.length != 0) {
// tipEle = YT.Alert.Tip("資料讀取中...","show");
//}
$(`.data-group i.fa-lightbulb-on`).removeClass("blink");
//debugger
$.each(sysSubList, (idx, sysSubObj) => {
let myBaja = new subscriptionAlarms();
let ordPath = {
"building_tag": pageAct.buiTag,
"system_tag": sysSubObj.sysMainTag,
"name_tag": sysSubObj.sysSubTag,
};
console.log("ordPath",ordPath)
myBaja.setSubscribeAlarmsByBql(ordPath);
myBaja.setSubscribeAlarmsCallBack((data) => {
if (data.sourceState == "Offnormal") {
let devNum = data.system.replaceAll("_", "/");
//let myBaja = new subscriptionAlarms();
//let ordPath = {
// "building_tag": pageAct.buiTag,
// "system_tag": sysSubObj.sysMainTag,
// "name_tag": sysSubObj.sysSubTag,
//};
//console.log("ordPath",ordPath)
//myBaja.setSubscribeAlarmsByBql(ordPath);
//myBaja.setSubscribeAlarmsCallBack((data) => {
// if (data.sourceState == "Offnormal") {
// let devNum = data.system.replaceAll("_", "/");
$(`.dev-group[data-id*='${devNum}'] i.fa-lightbulb-on`).addClass("blink");
}
})
myBaja.setSubscribeAlarmEndCallBack((data) => {
if (idx == sysSubList.length - 1) {
$(tipEle.ele).YTAlert().hide();
}
})
// $(`.dev-group[data-id*='${devNum}'] i.fa-lightbulb-on`).addClass("blink");
// }
//})
//myBaja.setSubscribeAlarmEndCallBack((data) => {
// console.log(idx,sysSubList.length)
// if (idx == sysSubList.length - 1) {
// $(tipEle.ele).YTAlert().hide();
// }
//})
})

12
Frontend/_sysElevator.html
View File

@ -897,6 +897,7 @@
myBaja = new subscriptionDevices();
myBaja.setSubscribeDevicesByBql(subOrdPath);
myBaja.setSubscribeDevicesCallBack(function (data) {
try {
function getValueByName(pointName) {
return data.point_name == pointName ? data.value : null;
}
@ -978,6 +979,9 @@
subDeviceSetEleManDet(matchDevice.device_number);
// 電梯管理 不服務樓層 detail
subDeviceSetEleManNotSerFloor(master);
} catch (e) {
console.log("e",e)
}
});
myBaja.setSubscribeDeviceEndCallBack(function (data) {
@ -1084,7 +1088,9 @@
// Card - 設置列表中訂閱內容
function subDeviceSetTable(devNum) {
if (allDevList.filter(x => !x.device_number).length > 0) {
debugger
}
let subData = subSeviceData.filter(x => x.device_number == devNum)[0]
let matchDevice = allDevList.filter(x => x.device_number == devNum)[0];
if (!subData) {
@ -1111,6 +1117,8 @@
elevObj.setElevFloor(matchDevice.device_number, subData["CP"]);
}
if (isFirstLoad3D == false && elev3DObj.length != 0) {
let elevObj = elev3DObj.filter(x => x.nodeId == elev3DBind[devNum])[0];
if (elevObj && elevObj.id) {
@ -1118,7 +1126,7 @@
elevObj.obj.movElevator();
}
}
console.log("console:", subData, devNum, allDevList)
elevObj.setEleMovStatus(matchDevice.device_number, subData["RD"] == "UP" ? 1 : subData["RD"] == "DOWN" ? 2 : 0);
//現在樓層
if (subData["CP"]) {

24
Frontend/index.html
View File

@ -2030,7 +2030,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
</div>
<!-- END Messenger -->
<!-- BEGIN Page Settings -->
<!-- END Page Settings -->
<!-- base vendor bundle:
DOC: if you remove pace.js from core please note on Internet Explorer some CSS animations may execute before a page is fully loaded, resulting 'jump' animations
@ -2083,12 +2082,12 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
/*$('#js-page-content').smartPanel();*/
var jwt = localStorage.getItem("JWT-Authorization");
var loadingTip = '';
var pageAct = {}; //記錄全頁面已選擇項目
pageAct.AreaTag = "TPE";
if (location.href.indexOf("ord") != -1) {
location.href = "/file/index.html"
}
// 執行初步 Loading
var loadEle = pageLoading();
@ -2133,6 +2132,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
"lib/jquery-validation/dist/localization/messages_zh_TW",
"lib/chart.js/Chart.min",
], loadedMasterPack);
}
/**
* 第三方套件引用後 Callback，載入額外套件
@ -2261,7 +2261,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
// 事件先行讀取
function loadEvent() {
onEvent("click", "[name=topFunBtn]", function () {
let needLoad = ["sysElevator", "historyData"];
_ytTabInited = [];
let page = $(this).data("page");
@ -2273,13 +2272,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
sub.unsubscribeAll();
sub.detach();
})
endPageLoading();
$("#app").load(`_${page}.html`, loadCallback);
// 需要 Loading 的頁面
if (needLoad.indexOf(page) != -1) {
$(loadEle).Loading("start", "資料讀取中...");
}
})
onEvent("click", "#logout", function () {
@ -2573,11 +2568,22 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
// ↑ 系統監控 - 共用 Function ↑
//==============================================================================
} catch(e) {
} catch (e) {
$(loadEle).Loading("close");
}
function startPageLoading() {
if (!loadingTip) {
loadingTip = YT.Alert.Tip("資料讀取中...", "show");
}
}
function endPageLoading() {
if (loadingTip != null) {
$(loadingTip.ele).YTAlert().hide();
loadingTip = null;
}
}
</script>
</body>

26
Frontend/js/n4js/alarmbaja.js
View File

@ -242,11 +242,15 @@ function getOneSystemStateByBaja(systemPath, callback) {
.then(function (table) {
return table.cursor({
each: function (record) {
//if (_index == 0)
// _ss += '{"sourceState":"' + record.get('sourceState') + '"}';
//else
// _ss += '{"sourceState":"' + record.get('sourceState') + '"}';
_ss += '{"sourceState":"' + record.get('sourceState') + '"}';
_index++;
},
after: function () {
_result += '{' + '"count": ' + _index + ', "system":"' + systemPath + '", "data":[';
_result += '{' + '"count": ' + _index + ', "data":[';
_result += _ss;
_result += ']}';
if (typeof callback === 'function') {
@ -265,7 +269,7 @@ function getOneSystemStateByBaja(systemPath, callback) {
* @param {any} callback
*/
function getAlarmCountByBaja(callback) {
var _result = "";
var _result = { count: 0 };
var _index = 0;
require(['baja!'], function (baja) {
@ -276,8 +280,7 @@ function getAlarmCountByBaja(callback) {
_index++;
},
after: function () {
_result += '{' + '"count": ' + _index;
_result += '}';
_result.count = _index;
if (typeof callback === 'function') {
callback(_result);
}
@ -294,7 +297,7 @@ function getAlarmCountByBaja(callback) {
* @param {any} callback
*/
function getRecoverCountByBaja(callback) {
var _result = "";
var _result = { count: 0 };
var _index = 0;
require(['baja!'], function (baja) {
@ -305,8 +308,7 @@ function getRecoverCountByBaja(callback) {
_index++;
},
after: function () {
_result += '{' + '"count": ' + _index;
_result += '}';
_result.count = _index;
if (typeof callback === 'function') {
callback(_result);
}
@ -323,7 +325,7 @@ function getRecoverCountByBaja(callback) {
* @param {any} callback
*/
function getCheckedAckedCountByBaja(callback) {
var _result = "";
var _result = { count: 0 };
var _index = 0;
require(['baja!'], function (baja) {
@ -334,8 +336,7 @@ function getCheckedAckedCountByBaja(callback) {
_index++;
},
after: function () {
_result += '{' + '"count": ' + _index;
_result += '}';
_result.count = _index;
if (typeof callback === 'function') {
callback(_result);
}
@ -352,7 +353,7 @@ function getCheckedAckedCountByBaja(callback) {
* @param {any} callback
*/
function getUnCheckedAckedCountByBaja(callback) {
var _result = "";
var _result = { count: 0 };
var _index = 0;
require(['baja!'], function (baja) {
@ -363,8 +364,7 @@ function getUnCheckedAckedCountByBaja(callback) {
_index++;
},
after: function () {
_result += '{' + '"count": ' + _index;
_result += '}';
_result.count = _index;
if (typeof callback === 'function') {
callback(_result);
}

18
Frontend/js/n4js/bajatest.js
View File

@ -1,11 +1,17 @@
let baja_subscribe_device_callback_func; //設定BQL訂閱之後要回傳的Function
let baja_subscribe_end_device_callback_func; //設定BQL訂閱結束之後要回傳的Function
let baja_my_user_account_func; //取得帳號資料要回傳的Function
//let baja_my_user_account_func; //取得帳號資料要回傳的Function
var ordPath; //當前點選選單的tag，用來抓出設備路徑，例如:旅館棟->H，消防偵煙器->F3
let baja_subscribe_alarm_callback_func; //設定 alarm BQL訂閱之後要回傳的Function
let baja_subscribe_end_alarm_callback_func; //設定 alarm BQL訂閱結束之後要回傳的Function
var ordPathForAlarm; //當前點選選單的tag，用來抓出alarm路徑
var startPageLoading; // 開始 loading
var endPageLoading; // 開始 loading
//window.baja = null;
//require(['baja!'], function (baja) {
// window.baja = baja;
//})
window.tolSubList = [];
@ -71,6 +77,7 @@ function BajaSubscribeDevicesByBql() {
require(['baja!'], function (baja) {
console.log("進入Function 準備執行BQL訂閱");
startPageLoading ? startPageLoading() : ""
var init_start = new Date(Date.now());
var sub = new baja.Subscriber();
@ -135,6 +142,7 @@ function BajaSubscribeDevicesByBql() {
tableStart = new Date(Date.now());
$("#table-start-timestamp").html(tableStart.toISOString());
render_start = new Date(Date.now());
},
each: function (item, index) {
if (index < 1) {
@ -147,7 +155,7 @@ function BajaSubscribeDevicesByBql() {
var target_device_number_split = this.getDisplay("slotPath").split('/');
var target_device_number = target_device_number_split[target_device_number_split.length - 2];
var target_device_number = target_device_number_split[7];
//console.log(target_device_number);
var point_name = this.getDisplay("name");
var facets = this.getDisplay("facets");
@ -240,13 +248,14 @@ function BajaSubscribeDevicesByBql() {
if (baja_subscribe_end_device_callback_func != undefined && baja_subscribe_end_device_callback_func != null) {
baja_subscribe_end_device_callback_func(totalTargetDevice);
}
endPageLoading ? endPageLoading() : ""
console.log("表格完成時間", (tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec");
},
limit: -1,
offset: 0
});
});
});
})
}
/**
@ -257,7 +266,7 @@ function BajaSubscribeAlarmsByBql(ordPathForAlarm) {
console.log("進入Function 準備執行BQL訂閱");
var init_start = new Date(Date.now());
var sub = new baja.Subscriber();
startPageLoading ? startPageLoading() : ""
sub.attach('changed', function (prop) {
if (prop.getName() === 'out') {
var sourceState = (this.$map.$map.in10.$val.$map.$map.value.$display) == 'true' ? "Offnormal" : "Normal";
@ -332,6 +341,7 @@ function BajaSubscribeAlarmsByBql(ordPathForAlarm) {
if (baja_subscribe_end_alarm_callback_func != undefined && baja_subscribe_end_alarm_callback_func != null) {
baja_subscribe_end_alarm_callback_func(totalTargetDevice);
}
endPageLoading ? endPageLoading() : ""
console.log("表格完成時間", (tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec");
},
limit: -1,

2
Frontend/js/n4js/electricmeterbaja.js
View File

@ -281,7 +281,7 @@ function getElectricMeterDayDataByBaja(devicePath, company, startDateTime, endDa
console.log("local:|foxs:|history:/" + company + "/" + devicePath + "?peroid=timerange;start=" + startDateTime + ".000+08:00;end=" + endDateTime + ".000+08:00;|bql:history:HistoryRollup.rollup(baja:RelTime '86400000')");
baja.Ord.make("local:|foxs:|history:/" + company + "/" + devicePath + "?peroid=timerange;start=" + startDateTime + ".000+08:00;end=" + endDateTime + ".000+08:00;|bql:history:HistoryRollup.rollup(baja:RelTime '86400000')").get()
.then(function (table) {
return table.cursor({
table.cursor({
each: function (record) {
let main = {};
main.timestamp = record.get('timestamp');

BIN
FrontendWebApi/wwwroot/upload/graph_manage/30cf13ad-2adc-4111-820b-05421c29afa1.dwg Normal file
View File

Binary file not shown.

BIN
FrontendWebApi/wwwroot/upload/graph_manage/347b198d-4a8a-4cf3-9bec-431d05d469a9.dwg Normal file
View File

Binary file not shown.