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

[Fromtend][能源管理] 自動須量圖表及編輯呈現更新

Browse Source
This commit is contained in:
dev01 2023-02-02 15:26:38 +08:00
parent 6c215f987b
commit bb49a7a823
1 changed files with 372 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

402
Frontend/_energyManagement.html
View File

@ -7,7 +7,7 @@
<button type="button" class="btn btn-secondary waves-effect waves-themed" data-id="2" data-tabname="energyTab">水資源管理</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed" data-id="3" data-tabname="energyTab">再生能源</button>
</div>
</div>
<div class="row col-12">
<div class="row col-xl-6 m-0 p-0">
@ -48,31 +48,32 @@
</div>
</div>
</div>
<div id="elecAutoReq" class="row flex-column col-xl-6 m-0 p-0">
<div id="elecAutoDem" class="row flex-column col-xl-6 m-0 p-0">
<div class="col-auto mb-2">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<h4 class="mb-0"><i class="fal fa-server"></i> 自動需量管理</h4>
<a href="#" class="btn btn-success"><i class="fal fa-pencil"></i> Edit</a>
<button id="ediAutDemBtn" class="btn btn-success"><i class="fal fa-pencil"></i> 編輯</button>
</div>
<div class="row align-items-center">
<div class="col-sm-12 col-lg-5">
<p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
<span>契約容量</span>
<span>1000 kW</span>
<span><span data-id="contract_capacity"></span> kW</span>
</p>
<p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
<span>警戒容量</span>
<span>800 kW</span>
<span><span data-id="warning_capacity"></span> kW</span>
</p>
<p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
<span>復歸值</span>
<span>600 kW</span>
<span><span data-id="resetting_value"></span> kW</span>
</p>
</div>
<div class="col-sm-12 col-lg-7">
<img src="img/clouds.png" class="img-fluid" style="min-height: 220px;">
<div class="col-sm-12 col-lg-7" style=" min-height:250px;">
<canvas class="chart" id="autDemChart"></canvas>
</div>
</div>
</div>
@ -186,13 +187,56 @@
</div>
</div>
</div>
</div>
<!-- Modal center Add -->
<div class="modal fade" id="autDemModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
編輯自動需量
</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fal fa-times"></i></span>
</button>
</div>
<form id="autDemForm">
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-group mb-2">
<label class="form-label" for="txtConCap">契約容量</label>
<input type="text" id="txtConCap" name="txtConCap" class="form-control" data-id="contract_capacity">
</div>
</div>
<div class="col-md-12">
<div class="form-group mb-2">
<label class="form-label" for="txtWarCap">警戒容量</label>
<input type="text" id="txtWarCap" name="txtWarCap" class="form-control" data-id="warning_capacity">
</div>
</div>
<div class="col-md-12">
<div class="form-group mb-2">
<label class="form-label" for="txtResCap">復歸值</label>
<input type="text" id="txtResCap" name="txtResCap" class="form-control" data-id="resetting_value">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary" id="autDemSavBtn" >儲存</button>
</div>
</form>
</div>
</div>
</div>
@ -201,13 +245,16 @@
<script>
var subSysList = [];
var subSysElecList = [];
var powerTimeVals = [];
var todayElecChart = null;
var elecCompChart = null;
var autDemChart = null;
var elecCardConText = [{ text1: "即時功耗 kW", text2:"佔比 %"},{ text1: "即時功耗 kW", text2:"佔比 %"},{ text1: "即時功耗 kW", text2:"佔比 %"},{ text1: "即時發電功率 kW", text2:"供電佔比 %"}]
var filNotShowSysSub = ["E1", "E4"];
$(function () {
getSubSysList();
getElecBySubSysTag();
getAutDemVal();
})
// 左上方 系統小類卡片區塊
@ -226,7 +273,7 @@
$.each(res.data.history_Main_Systems, (index, mainSysObj) => {
$.each(mainSysObj.history_Sub_systems, (index2, subSysObj) => {
subSysList.push(subSysObj);
if (type == 0 || (type == 3 && mainSysObj.main_system_tag == "ELEV")) {
if ((type == 0 || (type == 3 && mainSysObj.main_system_tag == "ELEV")) && filNotShowSysSub.indexOf(subSysObj.sub_system_tag) == -1) {
strHtml += `<div class="col-sm-12 col-xl-4 mb-2">
<div class="card elecCard cur-poi" data-id="${mainSysObj.main_system_tag}_${subSysObj.sub_system_tag}" data-name="${subSysObj.full_name}">
<div class="card-body">
@ -277,11 +324,77 @@
} else {
subSysElecList = res.data;
tarElePath = subSysElecList.filter(x => x.mainSubTag == "total")[0]?.system_device_tag ?? "";
getBajaData();
getSubBaja();
}
}, 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);
let time = new Date();
if (!autDemChart) {
return;
}
let conCapVal = autDemChart.data.datasets[0].data[0];
let warCapVal = autDemChart.data.datasets[1].data[0];
let resCapVal = autDemChart.data.datasets[2].data[0];
if (autDemChart.data.labels.length > 0) {
// 當 label 還未補齊，則直接替換 array 裡的值，已補齊之後就從後面補值
if (autDemChart.data.labels.filter(x => x != "").length > 10) {
autDemChart.data.labels.push(displayDate(time, "Hms"));
} else {
let cnt = autDemChart.data.labels.filter(x => x != "").length;
autDemChart.data.labels[cnt] = displayDate(time, "Hms");
}
autDemChart.data.datasets[0].data.push(parseInt(conCapVal));
autDemChart.data.datasets[1].data.push(parseInt(warCapVal));
autDemChart.data.datasets[2].data.push(resCapVal);
autDemChart.data.datasets[3].data.push(value);
}
if (autDemChart.data.labels.filter(x => x != "").length > 10) {
autDemChart.data.labels.shift();
autDemChart.data.datasets[0].data.shift();
autDemChart.data.datasets[1].data.shift();
autDemChart.data.datasets[2].data.shift();
autDemChart.data.datasets[3].data.shift();
}
autDemChart.update();
/*autDemChart.update();*/
}
})
myBaja.setSubscribeElectricmeterEndCallBack(function (data) {
let time = new Date();
for (let d of data) {
if (d.point_name == "P") {
if (autDemChart) {
autDemChart.data.labels.push(displayDate(time, "Hms"));
autDemChart.data.datasets[3].data.push(d.value);
// 補齊空缺 最多10個
for (let i = autDemChart.data.labels.length; i < 10; i++) {
autDemChart.data.labels.push("");
}
autDemChart.update();
console.log(autDemChart)
}
}
}
})
}
// 取得 baja 即時資料
function getBajaData() {
startPageLoading();
@ -346,15 +459,15 @@
todayElecChart?.destroy();
return;
}
getElectricMeterHourDataByBaja(tarDevNum + "_KWH", "Mitsubishi_Sup", yesterday, tomorrow, (data) => {
getElectricMeterHourDataByBaja(tarDevNum + "_KWH", n4Sup, 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"));
chartTodaysElec(todayData);
chkBajaLoaded();
})
// 空調系統 今日與30日內平均用電比較
getElectricMeterDayDataByBaja(tarDevNum + "_KWH", "Mitsubishi_Sup", prevThirtyDay, tomorrow, (data) => {
getElectricMeterDayDataByBaja(tarDevNum + "_KWH", n4Sup, prevThirtyDay, tomorrow, (data) => {
let curDay = (new Date()).getDay() == 0 ? 7 : (new Date()).getDay();
let eveWeek = [];
let curWeekData = data.data.filter(x => strToDate(displayDate(new Date(), "date"), null, 0 - (curDay - 1)) <= strToDate(x.timestamp.$cEncStr));
@ -381,6 +494,50 @@
}
}
// 取得 自動須量
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) => {
$("#elecAutoDem").find(`[data-id=${data.system_key}]`).text(data.system_value || 0);
setKeyValue[data.system_key] = data.system_value || 0;
})
chartAutDem(setKeyValue["contract_capacity"], setKeyValue["warning_capacity"], setKeyValue["resetting_value"])
}
}, null, "POST").send();
}
// 編輯 自動須量
function ediAutDemVal(sucFn = null,errFn = null) {
let url = baseApiUrl + "/api/Energe/EdiAutDemVal";
let sendData = [];
$("#autDemForm input").each((idx, inp) => {
let main = {};
main.system_key = $(inp).data("id");
main.system_value = $(inp).val();
sendData.push(main);
})
objSendData.Data = sendData;
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
if (!res || res.code != "0000") {
toast_error(res.msg || common.SysErr);
errFn ? errFn(res) : "";
} else {
toast_ok("編輯成功");
sucFn ? sucFn(res) : "";
}
}, null, "POST").send();
}
// 圖表 - 今天用電量 (折線圖)
function chartTodaysElec(todayData) {
let todayElecChartCanvas = $('#todayElecChart').get(0).getContext('2d');
@ -397,7 +554,6 @@
borderColor: color.success._500,
backgroundColor: color.success._500,
pointBackgroundColor: color.success._500,
order: 1,
borderWidth: 3,
}
@ -411,22 +567,22 @@
display: true,
},
scales: {
xAxes: [{
x: {
offset: true,
gridLines: { color: color.fusion._500 },
/*grid: { color: color.fusion._100 },*/
ticks: {
callback: function (value, index, ticks) {
return value
}
},
}],
yAxes: [{
},
y: {
grid: { color: color.fusion._500 },
beginAtZero: true,
ticks: {
min: 0,
beginAtZero: true
},
}]
}
},
tooltips: {
callbacks: {
@ -489,22 +645,22 @@
display: true,
},
scales: {
xAxes: [{
x: {
offset: true,
gridLines: { color: color.fusion._500 },
grid: { color: color.fusion._500 },
ticks: {
callback: function (value, index, ticks) {
return value
}
},
}],
yAxes: [{
},
y: {
ticks: {
min: 0,
beginAtZero: true
},
}]
}
},
tooltips: {
callbacks: {
@ -526,6 +682,155 @@
options: elecCompChartOptions
})
}
// 圖表 - 自動需量 (折線圖)
function chartAutDem(conCapVal = 0, warCapVal = 0, resCapVal = 0) {
let autDemChartCanvas = $('#autDemChart').get(0).getContext('2d');
let conCapData = [], warCapData = [], resCapData = [];
if (autDemChart == null) {
labels = [];
conCapData = [parseInt(conCapVal)];
warCapData = [parseInt(warCapVal)];
resCapData = [resCapVal];
let autDemChartData = {
labels: labels,
datasets: [
{
id: "conCap",
type: "line",
label: '契約容量',
fill: false,
backgroundColor: color.danger._500,
borderColor: color.danger._500,
pointColor: color.danger._500,
pointBackgroundColor: color.danger._500,
data: conCapData,
order: 1,
spanGaps: true
},
{
id: "warCap",
type: "line",
label: '警戒容量',
fill: false,
borderDash: [5, 5],
backgroundColor: color.danger._500,
borderColor: color.danger._500,
pointColor: color.danger._500,
pointBackgroundColor: color.danger._500,
data: warCapData,
order: 2,
spanGaps: true
},
{
id: "resCap",
type: "line",
label: '復歸值',
fill: false,
backgroundColor: color.info._500,
borderColor: color.info._500,
pointColor: color.info._500,
pointBackgroundColor: color.info._500,
data: resCapData,
order: 3,
spanGaps: true
},
{
id: "kWH",
type: "line",
label: '即時功率',
fill: false,
backgroundColor: color.success._100,
borderColor: color.success._100,
pointColor: color.success._100,
pointBackgroundColor: color.success._100,
data: [],
order: 4,
spanGaps: true
}
]
}
let autDemChartOptions = {
maintainAspectRatio: false,
responsive: true,
animation: {
y: { duration: 0 },
x: { duration: 200 },
},
plugins: {
legend: {
display: true,
fullSize: true,
labels: {
usePointStyle: true,
generateLabels: (chart) => {
if (!chart.data) return [];
return chart.data.datasets.map(
(dataset, index) => ({
datasetIndex:index,
text: dataset.label,
fontColor: color.fusion._100,
lineDash: dataset.borderDash ? [5,5] : [],
fillStyle: dataset.backgroundColor,
strokeStyle: dataset.borderColor,
pointStyle: "line",
hidden: !chart.getDatasetMeta(index).visible,
})
)
},
},
},
},
scales: {
x: {
offset: true,
grid: { color: color.fusion._500 },
ticks: {
//maxTicksLimit: 10,
//count: 10,
//callback: function (value, index, ticks) {
// return value
//}
},
},
y: {
ticks: {
min: 0,
beginAtZero: true
},
}
},
//tooltips: {
// callbacks: {
// label: function (tooltipItem) {
// let isTodayOrYes = tooltipItem.datasetIndex == 1 ? "上週" : "本週";
// return isTodayOrYes + "用電量 : " + tooltipItem.value + " kWH";
// },
// title: function (tooltipItem) {
// let result = tooltipItem[0].xLabel.toString();
// return result;
// }
// }
//},
}
autDemChart = new Chart(autDemChartCanvas, {
data: autDemChartData,
options: autDemChartOptions
})
} else {
autDemChart.data.datasets[0].data.forEach((x, i) => autDemChart.data.datasets[0].data[i] = conCapVal);
autDemChart.data.datasets[1].data.forEach((x, i) => autDemChart.data.datasets[1].data[i] = warCapVal);
autDemChart.data.datasets[2].data.forEach((x, i) => autDemChart.data.datasets[2].data[i] = resCapVal);
autDemChart.update();
}
}
onEvent("yt:tab:change", "[data-tabname=energyTab]", function () {
$("#eneSubSysList").parent("div").show();
@ -537,9 +842,46 @@
}
// 自動需量
if (type != "0") {
$("#elecAutoReq").hide();
$("#elecAutoDem").hide();
} else {
$("#elecAutoReq").show();
$("#elecAutoDem").show();
}
})
onEvent("click", "#ediAutDemBtn", function () {
$("#txtConCap").val($("[data-id=contract_capacity]").text());
$("#txtWarCap").val($("[data-id=warning_capacity]").text());
$("#txtResCap").val($("[data-id=resetting_value]").text());
$("#autDemModal").modal("show");
})
onEvent("click", "#autDemSavBtn", function () {
formValidate(() => {
ediAutDemVal(() => {
$("#autDemModal").modal("hide");
getAutDemVal();
});
});
})
function formValidate(validFn = null) {
$("#autDemForm").validate({
rules: {
txtConCap: { number: true },
txtWarCap: { number: true },
txtResCap: { number: true },
},
message: {
txtConCap: { number: "請輸入數字" },
txtWarCap: { number: "請輸入數字" },
txtResCap: { number: "請輸入數字" },
}
})
if ($("#autDemForm").valid()) {
validFn ? validFn() : "";
}
}
</script>