515 lines
24 KiB
HTML
515 lines
24 KiB
HTML
<main id="js-page-content" role="main" class="page-content">
|
||
<div class="row">
|
||
<div class="col-sm-12 col-xl-7">
|
||
<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 class="row" >
|
||
<div id="eneSubSysList" class="row col-12 m-0 p-0"></div>
|
||
|
||
<div class="col-sm-12 col-xl-12">
|
||
<div id="panel-2" class="panel panel-locked" 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">今日耗電量 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">用電比較</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>
|
||
<div class="col-sm-12 col-xl-5">
|
||
<div class="row">
|
||
<div class="col-sm-12 col-lg-12 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>
|
||
</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>
|
||
</p>
|
||
<p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
|
||
<span>警戒容量</span>
|
||
<span>800 kW</span>
|
||
</p>
|
||
<p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
|
||
<span>復歸值</span>
|
||
<span>600 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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mt-5 mx-0">
|
||
<ul class="nav nav-tabs w-100" 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>
|
||
|
||
|
||
|
||
|
||
|
||
</main>
|
||
|
||
<script>
|
||
var subSysList = [];
|
||
var subSysElecList = [];
|
||
var todayElecChart = null;
|
||
var elecCompChart = null;
|
||
var elecCardConText = [{ text1: "即時功耗 kW", text2:"佔比 %"},{ text1: "即時功耗 kW", text2:"佔比 %"},{ text1: "即時功耗 kW", text2:"佔比 %"},{ text1: "即時發電功率 kW", text2:"供電佔比 %"}]
|
||
|
||
$(function () {
|
||
getSubSysList();
|
||
getElecBySubSysTag();
|
||
})
|
||
|
||
// 左上方 系統小類卡片區塊
|
||
function getSubSysList(type = 0) {
|
||
subSysList = [];
|
||
let url = baseApiUrl + "/api/Device/GetMainSub";
|
||
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 strHtml = '';
|
||
$.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")) {
|
||
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">
|
||
<h4 class="card-title color-white">${subSysObj.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.main_system_tag}_${subSysObj.sub_system_tag}"></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.main_system_tag}_${subSysObj.sub_system_tag}"></span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>`;
|
||
}
|
||
})
|
||
})
|
||
$("#eneSubSysList").html(strHtml);
|
||
}
|
||
}, null, "POST").send();
|
||
|
||
}
|
||
|
||
// 取得 對應系統小類的總電錶
|
||
function getElecBySubSysTag() {
|
||
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;
|
||
getBajaData();
|
||
}
|
||
}, null, "POST").send();
|
||
}
|
||
|
||
// 取得 baja 即時資料
|
||
function getBajaData() {
|
||
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 = elecObj.system_device_tag?.split("_").slice(0, 8).join("/");
|
||
getElectricMeterNoweDataByBaja(devPath, (data) => {
|
||
data = data.data;
|
||
let result = data.filter(x => x.name == "P")[0]?.value;
|
||
result = result ? result.roundDecimal(2) : 0;
|
||
$(`#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", "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"));
|
||
chartTodaysElec(todayData);
|
||
chkBajaLoaded();
|
||
})
|
||
|
||
// 空調系統 今日與30日內平均用電比較
|
||
getElectricMeterDayDataByBaja(tarDevNum + "_KWH", "Mitsubishi_Sup", 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));
|
||
|
||
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 chartTodaysElec(todayData) {
|
||
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: {
|
||
xAxes: [{
|
||
offset: true,
|
||
gridLines: { color: color.fusion._500 },
|
||
ticks: {
|
||
callback: function (value, index, ticks) {
|
||
return value
|
||
}
|
||
},
|
||
}],
|
||
yAxes: [{
|
||
|
||
ticks: {
|
||
min: 0,
|
||
beginAtZero: true
|
||
},
|
||
}]
|
||
},
|
||
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) {
|
||
|
||
let elecCompChartCanvas = $('#elecCompChart').get(0).getContext('2d');
|
||
let elecCompChartData = {
|
||
labels: curWeekData.map(x => dayToChiDay(strToDate(x.timestamp.$cEncStr, "day"))),
|
||
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: {
|
||
xAxes: [{
|
||
offset: true,
|
||
gridLines: { color: color.fusion._500 },
|
||
ticks: {
|
||
callback: function (value, index, ticks) {
|
||
return value
|
||
}
|
||
},
|
||
}],
|
||
yAxes: [{
|
||
|
||
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, {
|
||
data: elecCompChartData,
|
||
options: elecCompChartOptions
|
||
})
|
||
}
|
||
|
||
onEvent("yt:tab:change", "[data-tabname=energyTab]", function () {
|
||
let type = $(this).data("id");
|
||
getSubSysList(type);
|
||
getElecBySubSysTag();
|
||
})
|
||
</script> |