938 lines
34 KiB
HTML
938 lines
34 KiB
HTML
<main id="js-page-content" role="main" class="page-content">
|
||
<h1 class="p-2 mb-0">能源管理</h1>
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="btn-group mb-3">
|
||
<button type="button" class="btn btn-secondary waves-effect waves-themed active" data-id="0" data-tabname="energyTab">用電管理</button>
|
||
<button type="button" class="btn btn-secondary waves-effect waves-themed" data-id="1" data-tabname="energyTab">天然氣管理</button>
|
||
<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">
|
||
<div id="eneSubSysList" class="row col-12 m-0 p-0"></div>
|
||
|
||
<div class="col-sm-12 col-xl-12 align-self-end">
|
||
<div id="panel-2" class="panel panel-locked mb-0" data-panel-sortable data-panel-collapsed data-panel-close>
|
||
<div class="panel-hdr">
|
||
<h2>
|
||
<span id="actSubSysText"></span> - 用電狀況
|
||
</h2>
|
||
</div>
|
||
<div class="panel-container show">
|
||
<div class="row">
|
||
<div class="col-sm-12 col-lg-6 d-flex flex-column">
|
||
<h4 class="p-3 todayElecNoDataTitle text-center">今日耗電量 (kWh)</h4>
|
||
<div class="panel-content poisition-relative" style="min-height: 346.84px;">
|
||
<div id="todayElecNoData" class="row justify-content-center align-items-center h-100" style="display:none;">
|
||
<h4>無資料</h4>
|
||
</div>
|
||
<div style="width:100%; min-height:300px;">
|
||
<canvas class="chart" id="todayElecChart"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-12 col-lg-6 d-flex flex-column">
|
||
<h4 class="py-3 elecCompNoDataTitle text-center">用電比較</h4>
|
||
<div id="elecCompNoData" class="row justify-content-center align-items-center h-100" style="display:none;">
|
||
<h4>無資料</h4>
|
||
</div>
|
||
<div style="width:100%; min-height:300px;">
|
||
<canvas class="chart" id="elecCompChart"></canvas>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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 mr-1"></i>自動需量管理</h4>
|
||
|
||
<button id="ediAutDemBtn" class="btn btn-success"><i class="fal fa-pencil"></i> 編輯</button>
|
||
</div>
|
||
<div class="row align-items-center justify-content-between d-flex flex-column">
|
||
<!-- <div class="col d-flex">
|
||
<p class="card-text color-white d-flex justify-content-between mr-3">
|
||
<span>契約容量</span>
|
||
<span><span data-id="contract_capacity"></span> kW</span>
|
||
</p>
|
||
<p class="card-text color-white d-flex justify-content-between mr-3">
|
||
<span>警戒容量</span>
|
||
<span><span data-id="warning_capacity"></span> kW</span>
|
||
</p>
|
||
<p class="card-text color-white d-flex justify-content-between mr-3">
|
||
<span>復歸值</span>
|
||
<span><span data-id="resetting_value"></span> kW</span>
|
||
</p>
|
||
</div> -->
|
||
<div class="col" style=" min-height:250px;">
|
||
<canvas class="chart" id="autDemChart"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row col mx-0">
|
||
<ul class="nav nav-tabs w-100 align-items-end" role="tablist">
|
||
<li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#tab_borders_icons-1" role="tab">自動卸載設定</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab_borders_icons-2" role="tab">手動卸載控制</a> </li>
|
||
</ul>
|
||
<div class="tab-content border border-top-0 p-3 w-100">
|
||
<div class="tab-pane fade show active" id="tab_borders_icons-1" role="tabpanel">
|
||
<div class="frame-wrap">
|
||
<table class="table table-bordered table-striped text-center m-0">
|
||
<thead class="thead-themed">
|
||
<tr>
|
||
<th>日期</th>
|
||
<th>開始-結束</th>
|
||
<th>卸載時長<br>minutes</th>
|
||
<th>預計卸載量<br>kW</th>
|
||
<th>是否啟用</th>
|
||
<th>名稱</th>
|
||
<th>功能</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>2022-09-01</td>
|
||
<td>11:00:00<br>11:30:00</td>
|
||
<td>30</td>
|
||
<td>40</td>
|
||
<td><input type="checkbox"> 啟用</td>
|
||
<td>停車場單號照明</td>
|
||
<td><a href="#" class="btn btn-info">修改</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>2022-09-01</td>
|
||
<td>11:00:00<br>11:30:00</td>
|
||
<td>30</td>
|
||
<td>40</td>
|
||
<td><input type="checkbox"> 啟用</td>
|
||
<td>停車場單號照明</td>
|
||
<td><a href="#" class="btn btn-info">修改</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>2022-09-01</td>
|
||
<td>11:00:00<br>11:30:00</td>
|
||
<td>30</td>
|
||
<td>40</td>
|
||
<td><input type="checkbox"> 啟用</td>
|
||
<td>停車場單號照明</td>
|
||
<td><a href="#" class="btn btn-info">修改</a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="tab-pane fade" id="tab_borders_icons-2" role="tabpanel">
|
||
<div class="frame-wrap">
|
||
<div class="mb-3"> <a href="#" class="btn btn-success">+ 新增</a> </div>
|
||
<table class="table table-bordered table-striped text-center m-0">
|
||
<thead class="thead-themed">
|
||
<tr>
|
||
<th>編號</th>
|
||
<th>名稱</th>
|
||
<th>建立人</th>
|
||
<th>建立時間</th>
|
||
<th>功能</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>1</td>
|
||
<td>平台管理員</td>
|
||
<td>王小明</td>
|
||
<td>2022-05-02 12:08</td>
|
||
<td><a href="#" class="btn btn-info">修改</a> <a href="#" class="btn btn-danger">刪除</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>平台運維</td>
|
||
<td>王小明</td>
|
||
<td>2022-05-02 12:08</td>
|
||
<td>
|
||
<div class="custom-control custom-switch">
|
||
<input type="radio" class="custom-control-input" id="customSwitch2radio" checked="" name="defaultSwitchRadioExample">
|
||
<label class="custom-control-label" for="customSwitch2radio">Checked</label>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>客戶管理員</td>
|
||
<td>王小明</td>
|
||
<td>2022-05-02 12:08</td>
|
||
<td><a href="#" class="btn btn-info">修改</a> <a href="#" class="btn btn-danger">刪除</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>4</td>
|
||
<td>客戶運維</td>
|
||
<td>王小明</td>
|
||
<td>2022-05-02 12:08</td>
|
||
<td><a href="#" class="btn btn-info">修改</a> <a href="#" class="btn btn-danger">刪除</a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
|
||
|
||
|
||
</main>
|
||
|
||
<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();
|
||
})
|
||
|
||
// 左上方 系統小類卡片區塊
|
||
function getSubSysList(type = 0) {
|
||
subSysList = [];
|
||
let url = baseApiUrl + "/api/Energe/GetElecBySubSysTag";
|
||
// let sendData = {
|
||
// building_tag: pageAct.buiTag,
|
||
// };
|
||
// objSendData.Data = sendData;
|
||
ytAjax = new YourTeam.Ajax(
|
||
url,
|
||
null,
|
||
function (res) {
|
||
if (!res || res.code != "0000" || !res.data) {
|
||
} else {
|
||
let strHtml = "";
|
||
$.each(res.data, (index, mainSysObj) => {
|
||
if (type == 0)
|
||
// && filNotShowSysSub.indexOf(subSysObj.sub_system_tag) == -1
|
||
{
|
||
document.querySelector(".elecCompNoDataTitle").textContent= "用電比較";
|
||
document.querySelector(".todayElecNoDataTitle").textContent= "今日耗電量 (kWh)";
|
||
const full_name = mainSysObj.system_remark.split("-")[1];
|
||
strHtml += `<div class="col-sm-12 col-xl-4 mb-2">
|
||
<div class="card elecCard cur-poi" data-id="${mainSysObj.mainSubTag}" data-name="${mainSysObj.mainSubTag}">
|
||
<div class="card-body">
|
||
<h4 class="card-title color-white">${full_name}用電</h4>
|
||
<p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
|
||
<span>${elecCardConText[type]?.text1}</span>
|
||
<span id="insPow${mainSysObj.mainSubTag}"></span>
|
||
</p>
|
||
<p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
|
||
<span>${elecCardConText[type]?.text2}</span>
|
||
<span id="insPowPer${mainSysObj.mainSubTag}"></span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>`;
|
||
} else if(type == 3 && mainSysObj.mainSubTag == "ELEV_EL"){
|
||
document.querySelector(".elecCompNoDataTitle").textContent= "供電比較";
|
||
document.querySelector(".todayElecNoDataTitle").textContent= "今日供電量 (kWh)";
|
||
|
||
|
||
const full_name = mainSysObj.system_remark.split("-")[1];
|
||
strHtml += `<div class="col-sm-12 col-xl-4 mb-2">
|
||
<div class="card elecCard cur-poi" data-id="${mainSysObj.mainSubTag}" data-name="${mainSysObj.mainSubTag}">
|
||
<div class="card-body">
|
||
<h4 class="card-title color-white">${full_name}供電</h4>
|
||
<p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
|
||
<span>${elecCardConText[type]?.text1}</span>
|
||
<span id="insPow${mainSysObj.mainSubTag}"></span>
|
||
</p>
|
||
<p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
|
||
<span>${elecCardConText[type]?.text2}</span>
|
||
<span id="insPowPer${mainSysObj.mainSubTag}"></span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>`;
|
||
}
|
||
});
|
||
if (type == 3) {
|
||
strHtml += `<div class="col-sm-12 col-xl-4 mb-2">
|
||
<div class="card elecCard cur-poi">
|
||
<div class="card-body">
|
||
<h4 class="card-title color-white">太陽能設備供電</h4>
|
||
<p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
|
||
<span>${elecCardConText[type]?.text1}</span>
|
||
<span id="insPow">---</span>
|
||
</p>
|
||
<p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
|
||
<span>${elecCardConText[type]?.text2}</span>
|
||
<span id="insPow">---</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>`;
|
||
}
|
||
$("#eneSubSysList").html(strHtml);
|
||
}
|
||
},
|
||
null,
|
||
"POST",
|
||
).send();
|
||
}
|
||
|
||
// 取得 對應系統小類的總電錶
|
||
function getElecBySubSysTag(type = 0) {
|
||
let url = baseApiUrl + "/api/Energe/GetElecBySubSysTag";
|
||
|
||
ytAjax = new YourTeam.Ajax(url, null, function (res) {
|
||
if (!res || res.code != "0000" || !res.data) {
|
||
|
||
} else {
|
||
subSysElecList = res.data;
|
||
tarElePath = subSysElecList.filter(x => x.mainSubTag == "total")[0]?.system_device_tag ?? "";
|
||
getBajaData(type);
|
||
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 > 35) {
|
||
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 > 35) {
|
||
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 < 35; i++) {
|
||
autDemChart.data.labels.push("");
|
||
}
|
||
|
||
autDemChart.update();
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// 取得 baja 即時資料
|
||
function getBajaData(type = 0) {
|
||
startPageLoading();
|
||
let yesterday = displayDate(getTimeByType(null, -1), "date").replaceAll("/", "-") + "T00:00:00";
|
||
let tomorrow = displayDate(getTimeByType(null, 1), "date").replaceAll("/", "-") + "T00:00:00";
|
||
let prevThirtyDay = displayDate(getTimeByType(null, -30), "date").replaceAll("/", "-") + "T00:00:00";
|
||
let lastTimeout = null;
|
||
let totalPow = 0;
|
||
let loadedCnt = 0;
|
||
|
||
// 取系統小類 總即時功率 (total)
|
||
let devPath = subSysElecList.filter(x => x.mainSubTag == "total")[0]?.system_device_tag?.split("_").slice(0, 8).join("/");
|
||
if (devPath) {
|
||
getElectricMeterNoweDataByBaja(devPath, (data) => {
|
||
data = data.data;
|
||
let result = data.filter(x => x.name == "P")[0]?.value;
|
||
result = result ? result.roundDecimal(2) : 0;
|
||
totalPow = result;
|
||
chkBajaLoaded();
|
||
})
|
||
}
|
||
// 每個系統小類 即時功率
|
||
$.each(subSysElecList, (idx, elecObj) => {
|
||
let devPath
|
||
devPath = elecObj.system_device_tag?.split("_").slice(0, 8).join("/");
|
||
getElectricMeterNoweDataByBaja(devPath, (data) => {
|
||
data = data.data;
|
||
let result = 0;
|
||
if (type == "3") {
|
||
result = data.filter(x => x.name == "P_rec")[0]?.value?.roundDecimal(2);
|
||
$(`#insPow${elecObj.mainSubTag}`).text(result);
|
||
result = data.filter(x => x.name == "KWH_rec")[0]?.value?.roundDecimal(2);
|
||
$(`#insPowPer${elecObj.mainSubTag}`).text((result / result * 100).roundDecimal(2) + " %");
|
||
} else {
|
||
/* result = result ? result.roundDecimal(2) : 0;*/
|
||
result = data.filter(x => x.name == "P")[0]?.value?.roundDecimal(2);
|
||
$(`#insPow${elecObj.mainSubTag}`).text(result);
|
||
$(`#insPowPer${elecObj.mainSubTag}`).text((result / totalPow * 100).roundDecimal(2) + " %");
|
||
}
|
||
|
||
clearTimeout(lastTimeout);
|
||
lastTimeout = setTimeout(() => {
|
||
chkBajaLoaded();
|
||
}, 10)
|
||
})
|
||
|
||
// 無對應資料系統小類
|
||
if (idx == subSysElecList.length - 1) {
|
||
let mainSubTags = subSysElecList.filter(x => x.mainSubTag);
|
||
$(".elecCard [id^=insPow]").each((idx, ele) => {
|
||
let tarMainSubTag = $(ele).prop("id").split("insPow")[1];
|
||
if (mainSubTags.indexOf(tarMainSubTag) == -1) {
|
||
$(ele).text("---");
|
||
}
|
||
})
|
||
}
|
||
})
|
||
|
||
onEvent("click", ".elecCard", function () {
|
||
let tarMainSubTag = $(this).data("id");
|
||
|
||
$("#actSubSysText").text($(this).data("name"));
|
||
$("#todayElecNoData,#elecCompNoData").hide();
|
||
$("#todayElecChart,#elecCompChart").parent().show();
|
||
|
||
// 空調系統 今日用電量 (每小時)
|
||
let tarDevNum = subSysElecList.filter(x => x.mainSubTag == tarMainSubTag)[0]?.system_device_tag;
|
||
if (!tarDevNum) {
|
||
$("#todayElecNoData,#elecCompNoData").show();
|
||
$("#todayElecChart,#elecCompChart").parent().hide();
|
||
elecCompChart?.destroy();
|
||
todayElecChart?.destroy();
|
||
return;
|
||
}
|
||
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", n4Sup, prevThirtyDay, tomorrow, (data) => {
|
||
// let curDay = (new Date()).getDay() == 0 ? 7 : (new Date()).getDay();
|
||
let curDay = 7;
|
||
let eveWeek = [];
|
||
let curWeekData = data.data.filter(x => strToDate(displayDate(new Date(), "date"), null, 0 - (curDay - 1)) <= strToDate(x.timestamp.$cEncStr));
|
||
for (let i = 1; i <= curDay; i++) {
|
||
let tarDayData = data.data.filter(x => strToDate(x.timestamp.$cEncStr, "day") == i);
|
||
let tarDayElecs = tarDayData.map(x => x.sum);
|
||
eveWeek.push(tarDayElecs.sum() / tarDayElecs.length);
|
||
}
|
||
|
||
chartEveWeeksElec(curWeekData, eveWeek)
|
||
chkBajaLoaded();
|
||
})
|
||
})
|
||
|
||
$(".elecCard").first().click();
|
||
|
||
function chkBajaLoaded() {
|
||
|
||
loadedCnt++;
|
||
if (loadedCnt == 2) {
|
||
endPageLoading();
|
||
}
|
||
}
|
||
}
|
||
|
||
// 取得 自動須量
|
||
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) {
|
||
todayElecChart?.destroy();
|
||
let todayElecChartCanvas = $('#todayElecChart').get(0).getContext('2d');
|
||
let curHour = (new Date()).getHours();
|
||
todayData.data = todayData.filter(x => x.timestamp.$time.$hour < curHour);
|
||
let todayElecChartData = {
|
||
labels: todayData?.data.map(x => x.timestamp.$time.$hour),
|
||
datasets: [
|
||
{
|
||
type: 'line',
|
||
label: '今日用電量',
|
||
fill: false,
|
||
data: todayData?.data.map(x => x.sum),
|
||
borderColor: color.success._500,
|
||
backgroundColor: color.success._500,
|
||
pointBackgroundColor: color.success._500,
|
||
order: 1,
|
||
borderWidth: 3,
|
||
}
|
||
]
|
||
}
|
||
|
||
let todayElecChartOptions = {
|
||
maintainAspectRatio: false,
|
||
responsive: true,
|
||
legend: {
|
||
display: true,
|
||
},
|
||
scales: {
|
||
x: {
|
||
offset: true,
|
||
/*grid: { color: color.fusion._100 },*/
|
||
ticks: {
|
||
callback: function (value, index, ticks) {
|
||
return value
|
||
}
|
||
},
|
||
},
|
||
y: {
|
||
grid: { color: color.fusion._500 },
|
||
beginAtZero: true,
|
||
ticks: {
|
||
min: 0,
|
||
},
|
||
}
|
||
},
|
||
tooltips: {
|
||
callbacks: {
|
||
label: function (tooltipItem) {
|
||
return "用電量 : " + tooltipItem.value + " kWH";
|
||
},
|
||
title: function (tooltipItem) {
|
||
let result = tooltipItem[0].xLabel.toString().padStart(2, "0") + ":00";
|
||
return result;
|
||
}
|
||
}
|
||
},
|
||
}
|
||
|
||
// This will get the first returned node in the jQuery collection.
|
||
todayElecChart = new Chart(todayElecChartCanvas, {
|
||
data: todayElecChartData,
|
||
options: todayElecChartOptions
|
||
})
|
||
}
|
||
|
||
// 圖表 - 今日與30日內平均用電量比較 (長條圖)
|
||
function chartEveWeeksElec(curWeekData, avgData) {
|
||
const labels = curWeekData.map(x => dayToChiDay(strToDate(x.timestamp.$cEncStr, "day")))
|
||
elecCompChart?.destroy()
|
||
let elecCompChartCanvas = $('#elecCompChart').get(0).getContext('2d');
|
||
let elecCompChartData = {
|
||
labels,
|
||
datasets: [
|
||
{
|
||
id: "today",
|
||
type: "bar",
|
||
label: '今日用電量',
|
||
fill: false,
|
||
backgroundColor: color.success._500,
|
||
borderColor: color.success._500,
|
||
pointColor: color.success._500,
|
||
pointBackgroundColor: color.success._500,
|
||
data: curWeekData.map(x => x.sum),
|
||
order: 1,
|
||
},
|
||
{
|
||
id: "avg",
|
||
type: "bar",
|
||
label: '30日內平均用電量',
|
||
fill: false,
|
||
backgroundColor: color.info._100,
|
||
borderColor: color.info._100,
|
||
pointColor: color.info._100,
|
||
pointBackgroundColor: color.info._100,
|
||
data: avgData,
|
||
order: 2,
|
||
}
|
||
]
|
||
}
|
||
|
||
let elecCompChartOptions = {
|
||
maintainAspectRatio: false,
|
||
responsive: true,
|
||
legend: {
|
||
display: true,
|
||
},
|
||
scales: {
|
||
x: {
|
||
offset: true,
|
||
grid: { color: color.fusion._500 },
|
||
ticks: {
|
||
// callback: function (value, index, ticks) {
|
||
// console.log("@@@@圖表的",value)
|
||
// 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;
|
||
}
|
||
}
|
||
},
|
||
}
|
||
|
||
// This will get the first returned node in the jQuery collection.
|
||
elecCompChart = new Chart(elecCompChartCanvas, {
|
||
type: "bar",
|
||
data: elecCompChartData,
|
||
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,
|
||
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: {
|
||
font: {
|
||
size: 16,
|
||
lineHeight: "40px",
|
||
},
|
||
usePointStyle: true,
|
||
generateLabels: (chart) => {
|
||
if (!chart.data) return [];
|
||
return chart.data.datasets.map(
|
||
(dataset, index) => ({
|
||
datasetIndex: index,
|
||
text: dataset.label !== "即時功率"?`${dataset.label} ${dataset.data[0]} KW`: `${dataset.label} KW`,
|
||
fontColor: color.fusion._100,
|
||
lineDash: dataset.borderDash ? [5, 5] : [],
|
||
lineWidth: 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,
|
||
plugins: [{
|
||
beforeInit: function(chart, args, options) {
|
||
chart.legend.afterFit = function() {
|
||
this.height = this.height + 50;
|
||
};
|
||
}
|
||
}]
|
||
})
|
||
} 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");
|
||
getSubSysList(type);
|
||
getElecBySubSysTag(type);
|
||
if (type == "1" || type == "2") {
|
||
$("#eneSubSysList").parent("div").hide();
|
||
}
|
||
// 自動需量
|
||
if (type != "0") {
|
||
$("#elecAutoDem").hide();
|
||
} else {
|
||
$("#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> |