[Fromtend][能源管理] 自動須量圖表及編輯呈現更新
This commit is contained in:
parent
6c215f987b
commit
bb49a7a823
@ -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>
|
||||
@ -192,7 +193,50 @@
|
||||
|
||||
</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();
|
||||
@ -347,14 +460,14 @@
|
||||
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: {
|
||||
@ -527,6 +683,155 @@
|
||||
})
|
||||
}
|
||||
|
||||
// 圖表 - 自動需量 (折線圖)
|
||||
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();
|
||||
let type = $(this).data("id");
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user