This commit is contained in:
GiteaAdmin 2023-06-17 11:43:22 +08:00
commit 681e11de8a

View File

@ -2,9 +2,10 @@
<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;"> -->
<div id="forgeViewer"
class="position-absolute"
style="width: 96%; height: 96%"></div>
<div class="position-absolute index-img" style="width: 96%; height: 96%">
<img src="img/backgrounds/bg_w.png" style="width: 100%" />
</div>
<!-- <video playsInline autoPlay muted>
<source src="./media/video/TEST_RENDER.mp4" type="video/mp4" />
</video> -->
@ -12,41 +13,53 @@
<div class="col-sm-12 col-xl-4">
<div class="row">
<div class="col-sm-6 col-xl-6">
<div class="p-3 bg-primary-300 rounded overflow-hidden position-relative text-white mb-g">
<div
class="p-3 bg-primary-300 rounded overflow-hidden position-relative text-white mb-g"
>
<div class="">
<h3 class="display-4 d-block l-h-n m-0 fw-500">
<span id="todayUseElec">--</span>
<small class="m-0 l-h-n">今日用電量 kWH</small>
</h3>
</div>
<i class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1"
style="font-size: 6rem"></i>
<i
class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1"
style="font-size: 6rem"
></i>
</div>
</div>
<div class="col-sm-6 col-xl-6">
<div class="p-3 bg-warning-400 rounded overflow-hidden position-relative text-white mb-g">
<div
class="p-3 bg-warning-400 rounded overflow-hidden position-relative text-white mb-g"
>
<div class="">
<h3 class="display-4 d-block l-h-n m-0 fw-500">
<span id="yesUseElec">--</span>
<small class="m-0 l-h-n">昨日用電量 kWH</small>
</h3>
</div>
<i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4"
style="font-size: 6rem"></i>
<i
class="fal fa-gem position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4"
style="font-size: 6rem"
></i>
</div>
</div>
<div class="col-lg-12">
<div id="panel-2"
<div
id="panel-2"
class="panel"
data-panel-sortable
data-panel-collapsed
data-panel-close>
data-panel-close
>
<div class="panel-hdr">
<h2>昨日/今日用電比較 (kWh)</h2>
</div>
<div class="panel-container show">
<div class="panel-content poisition-relative">
<div class="p-1 position-absolute pos-right pos-top mt-3 mr-3 z-index-cloud d-flex align-items-center justify-content-center">
<div
class="p-1 position-absolute pos-right pos-top mt-3 mr-3 z-index-cloud d-flex align-items-center justify-content-center"
>
<!--<div class="border-faded border-top-0 border-left-0 border-bottom-0 py-2 pr-4 mr-3 hidden-sm-down">
<div class="text-right fw-500 l-h-n d-flex flex-column">
<div class="h3 m-0 d-flex align-items-center justify-content-end">
@ -78,35 +91,45 @@
<div class="col-sm-12 col-xl-4">
<div class="row">
<div class="col-sm-6 col-xl-6">
<div class="p-3 bg-success-200 rounded overflow-hidden position-relative text-white mb-g">
<div
class="p-3 bg-success-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">
<span id="insPower">--</span>
<small class="m-0 l-h-n">即時功率 kW</small>
</h3>
</div>
<i class="fal fa-lightbulb position-absolute pos-right pos-bottom opacity-15 mb-n5 mr-n6"
style="font-size: 8rem"></i>
<i
class="fal fa-lightbulb position-absolute pos-right pos-bottom opacity-15 mb-n5 mr-n6"
style="font-size: 8rem"
></i>
</div>
</div>
<div class="col-sm-6 col-xl-6">
<div class="p-3 bg-info-200 rounded overflow-hidden position-relative text-white mb-g">
<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">
<span id="insPowerPer">--</span>
<small class="m-0 l-h-n">即時契約容量占比 %</small>
</h3>
</div>
<i class="fal fa-globe position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4"
style="font-size: 6rem"></i>
<i
class="fal fa-globe position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4"
style="font-size: 6rem"
></i>
</div>
</div>
<div class="col-lg-12">
<div id="panel-3"
<div
id="panel-3"
class="panel"
data-panel-sortable
data-panel-collapsed
data-panel-close>
data-panel-close
>
<div class="panel-hdr">
<h2>本週/上週用電比較 (kWh)</h2>
</div>
@ -164,10 +187,12 @@
</div>
<div class="row">
<div class="col-sm-12 col-lg-8">
<div class="col-sm-12 col-lg-4">
<div class="row" id="sysSubBtnList"></div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="row"></div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="row h-100">
<div class="col-lg-6">
@ -177,12 +202,16 @@
</div>
<div class="panel-container h-100 show">
<div class="panel-content poisition-relative p-0 row p-0 h-100">
<div class="col-12 mb-2 position-relative row m-0 justify-content-center"
style="max-height: 150px">
<div
class="col-12 mb-2 position-relative row m-0 justify-content-center"
style="max-height: 150px"
>
<canvas class="chart" id="errRecChart"></canvas>
</div>
<div class="col-12 mb-2 position-relative row m-0 justify-content-center"
style="max-height: 150px">
<div
class="col-12 mb-2 position-relative row m-0 justify-content-center"
style="max-height: 150px"
>
<canvas class="chart" id="errChkChart"></canvas>
</div>
</div>
@ -196,12 +225,16 @@
</div>
<div class="panel-container h-100 show">
<div class="panel-content poisition-relative row p-0 h-100 p-0">
<div class="col-12 mb-2 position-relative row m-0 justify-content-center"
style="max-height: 150px">
<div
class="col-12 mb-2 position-relative row m-0 justify-content-center"
style="max-height: 150px"
>
<canvas class="chart" id="worOrdErrChart"></canvas>
</div>
<div class="col-12 mb-2 position-relative row m-0 justify-content-center"
style="max-height: 150px">
<div
class="col-12 mb-2 position-relative row m-0 justify-content-center"
style="max-height: 150px"
>
<canvas class="chart" id="worOrdFinChart"></canvas>
</div>
</div>
@ -230,6 +263,7 @@
chkedErrCnt: 0,
unChkedErrCnt: 0,
};
var contractCapacity = 0;
var sysIconList = [
{ mainSys: "EE", subSys: "E1", iconClass: "./gif/E1_white.png" },
@ -257,18 +291,20 @@
];
var tempSysSubText = [
{ text: "電梯系統", mainSys: "ELEV", subSys: "EL" }, // 1
{ text: "水錶系統", mainSys: "WP", subSys: "W1" },
{ text: "空調系統", mainSys: "ME", subSys: "M10" }, // 2
{ text: "照明系統", mainSys: "LT", subSys: "L1" }, // 3
{ text: "CCTV系統", mainSys: "S", subSys: "C" }, //12
{ text: "太陽能管理", mainSys: "S", subSys: "C" }, //12
{ text: "冰水主機", mainSys: "WP", subSys: "W2" }, // 6
{ text: "緊急發電機", mainSys: "EE", subSys: "E3" }, //10
{ text: "電梯系統", mainSys: "ELEV", subSys: "EL" }, // 1
{ text: "環境感測設備", mainSys: "ME", subSys: "M12" }, // 4
{ text: "電錶系統", mainSys: "EE", subSys: "E4" }, // 5
{ text: "供水系統", mainSys: "WP", subSys: "W2" }, // 6
{ text: "高壓配電盤", mainSys: "EE", subSys: "E1" }, // 7
{ text: "汙廢水設備", mainSys: "WP", subSys: "P1" }, // 8
{ text: "低壓配電盤", mainSys: "EE", subSys: "E2" }, //9
{ text: "緊急發電機", mainSys: "EE", subSys: "E3" }, //10
{ text: "消防設備", mainSys: "FE", subSys: "F1" }, //11
{ text: "CCTV系統", mainSys: "S", subSys: "C" }, //12
{ text: "門禁系統", mainSys: "S", subSys: "R" }, //13
{ text: "停管系統", mainSys: "P", subSys: "PSC" }, //14
{ text: "緊急求救系統", mainSys: "S", subSys: "P" }, //15
@ -286,7 +322,7 @@
$(loadEle).Loading("close");
show3DModel();
getSubList();
getFirstEletric();
getAutDemVal();
});
function demoSubList() {
@ -298,12 +334,12 @@
$.each(tempSysSubText, (idx, obj) => {
if (
isExiNames.indexOf(obj.text) == -1 &&
$("#sysSubBtnList .dev-group").length < 16
$("#sysSubBtnList .dev-group").length < 8
) {
let iconObj = sysIconList.filter(
(x) => x.mainSys == obj.mainSys && x.subSys == obj.subSys
)[0];
strHtml = `<div class="btn-group btn-group-lg col-lg-3 mb-4 dev-group">
strHtml = `<div class="btn-group btn-group-lg col-lg-6 mb-4 dev-group">
<button name="topFunBtn" data-page="alert" type="button" class="btn btn-secondary col-4 d-flex jusity-content-center">
<img src="${iconObj.iconClass}" class="w-100"></img>
</button>
@ -342,7 +378,7 @@
x.mainSys == mainSysObj.main_system_tag &&
x.subSys == subSysObj.sub_system_tag
)[0]?.iconClass;
strHtml += `<div class="btn-group btn-group-lg col-lg-3 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}/${pageAct.buiTag}/${mainSysObj.main_system_tag}/${subSysObj.sub_system_tag}">
<button name="topFunBtn" data-page="alert" type="button" class="btn btn-secondary col-4">
<img src="${iconClass}" class="w-100 "></img>
</button>
@ -358,10 +394,34 @@
"POST"
).send();
}
// 取得 自動須量
function getAutDemVal() {
let url = baseApiUrl + "/api/Energe/GetAutDemVal";
let sendData = {
building_tag: pageAct.buiTag,
};
objSendData.Data = sendData;
ytAjax = new YourTeam.Ajax(
url,
objSendData,
function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
let setKeyValue = {};
$.each(res.data || [], (idx, data) => {
setKeyValue[data.system_key] = data.system_value || 0;
})
contractCapacity = setKeyValue["contract_capacity"];
getFirstEletric()
}
},
null,
"POST"
).send();
}
//取得第一筆電錶
function getFirstEletric() {
let url = baseApiUrl + "/api/Energe/GetElecBySubSysTag";
let url = baseApiUrl + "/api/Dashboard/GetTotalElec";
ytAjax = new YourTeam.Ajax(
url,
@ -370,12 +430,12 @@
if (!res || res.code != "0000" || !res.data) {
} else {
subSysElecList = res.data;
tarElePath =
subSysElecList.filter((x) => x.mainSubTag == "total")[0]
?.system_device_tag ?? "";
subSysElecList.filter((x) => x.building_tag == pageAct.buiTag)[0]
?.device_number ?? "";
getSubBaja();
getElectricBaja();
getChart();
}
},
null,
@ -384,7 +444,7 @@
}
function getSubBaja() {
let devPath = tarElePath.split("_").slice(0, 8).join("/");
let devPath = tarElePath.split("/")[1].split("_").slice(0, 8).join("/");
let tempOrdPath = { devicePath: devPath };
let myBaja = new subscriptionElectricmeter();
@ -393,16 +453,25 @@
if (data.point_name == "P") {
let value = parseFloat(data.value).roundDecimal(2);
$("#insPower").text(value);
$("#insPowerPer").text((value / 4).roundDecimal(2));
// $("#insPowerPer").text((value / 4).roundDecimal(2));
$("#insPowerPer").text((value / contractCapacity).roundDecimal(2));
}
});
myBaja.setSubscribeElectricmeterEndCallBack(function () { });
myBaja.setSubscribeElectricmeterEndCallBack(function () {
chkBajaLoaded();
});
}
//從 baja 取得電表用電量
function getElectricBaja() {
let devNum = tarElePath.split("_").slice(0, 8).join("_");
let devPath = tarElePath.split("_").slice(0, 8).join("/");
let devNum =
tarElePath.split("/")[0] +
"/" +
tarElePath.split("/")[1].split("_").slice(0, 8).join("_");
let devPath =
tarElePath.split("/")[0] +
"/" +
tarElePath.split("/")[1].split("_").slice(0, 8).join("_");
let today =
displayDate(new Date(), "date").replaceAll("/", "-") + "T00:00:00";
@ -426,6 +495,7 @@
let result = data?.data[0]?.sum;
result = result ? parseFloat(result).toFixed(2) : 0;
$("#todayUseElec").text(result);
chkBajaLoaded();
}
);
@ -449,6 +519,7 @@
x.timestamp.$date.$day == getTimeByType("date", -1)
);
chartEveDaysElec(todayData, yesData);
chkBajaLoaded();
}
);
@ -462,6 +533,7 @@
let result = data?.data[0]?.sum;
result = result ? parseFloat(result).toFixed(2) : 0;
$("#yesUseElec").text(result);
chkBajaLoaded();
}
);
@ -487,25 +559,28 @@
);
chartEveWeeksElec(curWeekData, prevWeekData);
chkBajaLoaded();
}
);
}
function getChart() {
// 異常數量與復歸數量
getAlarmCountByBaja((aData) => {
chartDataCnt.alarmCnt = aData;
chartDataCnt.alarmCnt = aData.count;
chkBajaLoaded();
});
getRecoverCountByBaja((rData) => {
chartDataCnt.recCnt = rData;
chartDataCnt.recCnt = rData.count;
chkBajaLoaded();
});
// 異常數量與復歸數量
getCheckedAckedCountByBaja((data) => {
chartDataCnt.chkedErrCnt = data;
chartDataCnt.chkedErrCnt = data.count;
chkBajaLoaded();
});
getUnCheckedAckedCountByBaja((uData) => {
chartDataCnt.unChkedErrCnt = uData;
chartDataCnt.unChkedErrCnt = uData.count;
chkBajaLoaded();
});
// 獲取所有異常數量
@ -516,6 +591,9 @@
const token = cookies.get("JWT-Authorization");
fetch(url, {
method: "POST",
body: {
data: "{}",
},
headers: {
"Content-Type": "application/json",
Authorization: `bearer ${token}`,
@ -530,15 +608,14 @@
allAlarmCount - (finish + notfinish),
finish + notfinish,
]);
chkBajaLoaded();
});
});
}
function chkBajaLoaded() {
// loadedCnt++;
loadedCnt++;
// if (loadedCnt >= 9) {
if (loadedCnt == 9) {
const ErrRecLabel = () => {
const normal = `異常 ${chartDataCnt.alarmCnt}`;
const offnormal = `復歸 ${chartDataCnt.recCnt}`;
@ -556,7 +633,7 @@
chartDataCnt.unChkedErrCnt,
]);
$(loadEle).Loading("close");
// }
}
}
// 圖表 - 今天與昨天用電量 (長條圖)
@ -629,30 +706,20 @@
};
if (eveDayElecChart == null) {
// console.log(eveDayElecChart)
eveDayElecChart = new Chart(eveDayElecChartCanvas, {
data: eveDayElecChartData,
options: eveDayElecChartOptions,
});
console.log(eveDayElecChart);
// console.log(eveDayElecChart)
} else {
eveDayElecChart.data.datasets.forEach((dataset) => {
if (dataset.order == 1) {
dataset.data.splice(
0,
dataset.data.length,
...todayData?.data.map((x) => x.sum)
);
// dataset.data = todayData?.data.map((x) => x.sum);
dataset.data = todayData?.data.map((x) => x.sum);
} else {
dataset.data.splice(
0,
dataset.data.length,
...yesData?.data.map((x) => x.sum)
);
// dataset.data = yesData?.data.map((x) => x.sum);
dataset.data = yesData?.data.map((x) => x.sum);
}
});
eveDayElecChart.update();
}
}
@ -735,22 +802,11 @@
} else {
eveWeekElecChart.data.datasets.forEach((dataset) => {
if (dataset.order == 1) {
dataset.data.splice(
0,
dataset.data.length,
...curWeekData?.data.map((x) => x.sum)
);
// dataset.data = curWeekData.map((x) => x.sum);
dataset.data = curWeekData.map((x) => x.sum);
} else {
dataset.data.splice(
0,
dataset.data.length,
...prevWeekData?.data.map((x) => x.sum)
);
// dataset.data = prevWeekData.map((x) => x.sum);
dataset.data = prevWeekData.map((x) => x.sum);
}
});
eveWeekElecChart.update();
}
}
@ -794,17 +850,10 @@
data: errRecChartData,
options: errRecChartOptions,
});
} else if (
datas[0] !== errRecChart.data.datasets[0].data[0] ||
datas[1] !== errRecChart.data.datasets[0].data[1]
) {
const newLable = labelsFn();
errRecChart.data.labels.splice(0, 2, newLable[0], newLable[1]);
} else {
errRecChart.data.datasets.forEach((dataset) => {
dataset.data.splice(0, 2, datas[0], datas[1]);
dataset.data = datas;
});
errRecChart.update();
// console.log("圖表 - 異常與復歸圖表 (圓餅圖)", labelsFn(), datas, errRecChart.data.datasets);
}
}
@ -847,16 +896,10 @@
data: errChkChartData,
options: errChkChartOptions,
});
} else if (
datas[0] !== errChkChart.data.datasets[0].data[0] ||
datas[1] !== errChkChart.data.datasets[0].data[1]
) {
const newLable = labelsFn();
errChkChart.data.labels.splice(0, 2, newLable[0], newLable[1]);
} else {
errChkChart.data.datasets.forEach((dataset) => {
dataset.data.splice(0, 2, datas[0], datas[1]);
dataset.data = datas;
});
errChkChart.update();
}
}
@ -902,16 +945,10 @@
data: worOrdErrChartData,
options: worOrdErrChartOptions,
});
} else if (
datas[0] !== worOrdErrChart.data.datasets[0].data[0] ||
datas[1] !== worOrdErrChart.data.datasets[0].data[1]
) {
const newLable = labelsFn();
worOrdErrChart.data.labels.splice(0, 2, newLable[0], newLable[1]);
} else {
worOrdErrChart.data.datasets.forEach((dataset) => {
dataset.data.splice(0, 2, datas[0], datas[1]);
dataset.data = datas;
});
worOrdErrChart.update();
}
}
@ -957,16 +994,10 @@
data: worOrdFinChartData,
options: worOrdFinChartOptions,
});
} else if (
datas[0] !== worOrdFinChart.data.datasets[0].data[0] ||
datas[1] !== worOrdFinChart.data.datasets[0].data[1]
) {
const newLable = labelsFn();
worOrdFinChart.data.labels.splice(0, 2, newLable[0], newLable[1]);
} else {
worOrdFinChart.data.datasets.forEach((dataset) => {
dataset.data.splice(0, 2, datas[0], datas[1]);
dataset.data = datas;
});
worOrdFinChart.update();
}
}
@ -1010,8 +1041,9 @@
}
function show3DModel() {
launchViewerNoTools(pageAct.urn, (viewer) => {
document.querySelector("#guiviewer3d-toolbar").style.display = "none";
launchViewerNoTools(
pageAct.urn,
(viewer) => {
let elevOption = {
selector: "#forgeViewer",
viewer: viewer,
@ -1029,24 +1061,17 @@
};
forge3DElev.init();
}
});
},
() => {
endPageLoading();
}
);
}
$(window).on("timeout:1h", function () {
$(window).on("timeout:5m", function () {
console.log("五分鐘更新");
getElectricBaja();
});
$(window).on("timeout:3s", function () {
if (
$("#worOrdFinChart")?.get(0) &&
$("#worOrdErrChart")?.get(0) &&
$("#errRecChart")?.get(0) &&
$("#errChkChart")?.get(0)
) {
console.log("3s chart....");
getChart();
}
});
onEvent("click", "button[id^=sysSubCardBtn]", function () {
let subSysTag = $(this).data("id");