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

[FrontendWebApi][能源管理] 後端API 撈取總電表 建置

Browse Source
This commit is contained in:
dev01 2022-12-09 14:24:35 +08:00
parent 9af66aec8e
commit 2c599b962c
4 changed files with 364 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

300
Frontend/_energyManagement.html Normal file
View File

@ -0,0 +1,300 @@
<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">用電管理</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed">天然氣管理</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed">水資源管理</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed">再生能源</button>
</div>
<div class="row" >
<div id="eneSubSysList" class="row col-12"></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>
空調系統 - 用電狀況
</h2>
</div>
<div class="panel-container show">
<div class="row">
<div class="col-sm-12 col-lg-6">
<h4 class="p-3">今日耗電量 kWh</h4>
<div class="panel-content poisition-relative" style="min-height: 346.84px;">
<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">
<div class='icon-stack mr-2'>
<i class="base base-7 icon-stack-3x opacity-100 color-success-600"></i>
<i class="base base-7 icon-stack-2x opacity-100 color-success-500"></i>
<i class="fal fa-arrow-up icon-stack-1x opacity-100 color-white"></i>
</div>
$44.34 / GE
</div>
<span class="m-0 fs-xs text-muted">Increased Profit as per redux margins and estimates</span>
</div>
</div>
<div class="js-easy-pie-chart color-info-400 position-relative d-inline-flex align-items-center justify-content-center" data-percent="35" data-piesize="95" data-linewidth="10" data-scalelength="5">
<div class="js-easy-pie-chart color-success-400 position-relative position-absolute pos-left pos-right pos-top pos-bottom d-flex align-items-center justify-content-center" data-percent="65" data-piesize="60" data-linewidth="5" data-scalelength="1" data-scalecolor="#fff">
<div class="position-absolute pos-top pos-left pos-right pos-bottom d-flex align-items-center justify-content-center fw-500 fs-xl text-dark">78%</div>
</div>
</div>
</div>
<div id="flot-area" style="width:100%; height:300px;"></div>
</div>
</div>
<div class="col-sm-12 col-lg-6">
<h4 class="py-3">用電比較</h4>
<div class="pb-5 pt-3">
<div class="row">
<div class="col-6 col-xl-3 d-sm-flex align-items-center">
<div class="p-2 mr-3 bg-info-200 rounded">
<span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">3,4,5,8,2</span>
</div>
<div>
<label class="fs-sm mb-0">Bounce Rate</label>
<h4 class="font-weight-bold mb-0">37.56%</h4>
</div>
</div>
<div class="col-6 col-xl-3 d-sm-flex align-items-center">
<div class="p-2 mr-3 bg-info-300 rounded">
<span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">5,3,1,7,9</span>
</div>
<div>
<label class="fs-sm mb-0">Sessions</label>
<h4 class="font-weight-bold mb-0">759</h4>
</div>
</div>
<div class="col-6 col-xl-3 d-sm-flex align-items-center">
<div class="p-2 mr-3 bg-success-300 rounded">
<span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">3,4,3,5,5</span>
</div>
<div>
<label class="fs-sm mb-0">New Sessions</label>
<h4 class="font-weight-bold mb-0">12.17%</h4>
</div>
</div>
</div>
</div>
<div id="flotVisit" style="width:100%; height:208px;"></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 = [];
$(function () {
getSubSysList();
getElecBySubSysTag();
})
// 左上方 系統小類卡片區塊
function getSubSysList() {
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);
strHtml += `<div class="col-sm-12 col-xl-4 mb-2">
<div class="card">
<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>即時功耗 kW</span>
<span id="imdPow${subSysObj.sub_system_tag}"></span>
</p>
<p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
<span>佔比 %</span>
<span id="imdPowPer${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;
}
}, null, "POST").send();
}
function getBajaData() {
$.each(subSysElecList, (idx, subSysObj) => {
})
}
</script>

6
Frontend/index.html
View File

@ -1483,7 +1483,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
</div>
<div class="btn-group mx-4">
<a href="javascript:;" name="topFunBtn" class="dropdown-toggle no-arrow text-center"
data-page="dashboard">
data-page="energyManagement">
<i class="fal fa-chart-pie fa-2x"></i><br>能源管理
</a>
</div>
@ -2194,7 +2194,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
if (!res || res.code != "0000" || !res.data) {
} else {
$("#sysMonBtnList").html()
$("#sysMonBtnList").html("")
$.each(res.data.history_Main_Systems, (index, mainSysObj) => {
$.each(mainSysObj.history_Sub_systems, (index2, subSysObj) => {
let page = "systemMonitor";
@ -2281,7 +2281,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
})
endPageLoading();
timeOutor ? clearInterval(timeOutor) : ""; // dashboard 定時更新 baja 資料定時器關閉
typeof timeOutor != "undefined" ? clearInterval(timeOutor) : ""; // dashboard 定時更新 baja 資料定時器關閉
$("#app").load(`_${page}.html`, loadCallback);
})

51
FrontendWebApi/ApiControllers/EnergeManageController.cs Normal file
View File

@ -0,0 +1,51 @@
using FrontendWebApi.Models;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using NPOI.SS.Formula.Functions;
using Repository.BackendRepository.Interface;
using Repository.FrontendRepository.Interface;
using System;
using System.Collections.Generic;
using System.Data.SqlTypes;
using System.IO;
using System.Threading.Tasks;
namespace FrontendWebApi.ApiControllers
{
public class EnergeManageController : MyBaseApiController<EnergeManageController>
{
private readonly IBackendRepository backendRepository;
private readonly IFrontendRepository frontendRepository;
public EnergeManageController(IBackendRepository backendRepository, IFrontendRepository frontendRepository)
{
this.backendRepository = backendRepository;
this.frontendRepository = frontendRepository;
}
[HttpPost]
[Route("api/Energe/GetElecBySubSysTag")]
public async Task<ActionResult<ApiResult<List<ElecSubSystem>>>> GetElecBySubSysTag()
{
ApiResult<List<ElecSubSystem>> apiResult = new ApiResult<List<ElecSubSystem>>();
try
{
var sqlString = $@"SELECT system_key as MainSubTag ,system_value as system_device_tag,system_priority as priority, system_remark FROM variable
where system_type = 'meter_for_subsystem' and deleted = '0'";
var ess = await backendRepository.GetAllAsync<ElecSubSystem>(sqlString);
apiResult.Code = "0000";
apiResult.Data = ess;
}
catch (Exception exception)
{
apiResult.Code = "9999";
apiResult.Msg = "系統內部錯誤，請聯絡管理者。";
Logger.LogError("【" + controllerName + "/" + actionName + "】" + exception.Message);
return Ok(apiResult);
}
return Ok(apiResult);
}
}
}

10
FrontendWebApi/Models/Energe.cs Normal file
View File

@ -0,0 +1,10 @@
namespace FrontendWebApi.Models
{
public class ElecSubSystem
{
public string MainSubTag { get; set; }
public string system_device_tag { get; set; }
public string system_remark { get; set; }
public string priority { get; set; }
}
}