300 lines
18 KiB
HTML
300 lines
18 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">用電管理</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="{"fill": ["#fff"], "width": 27, "height": 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="{"fill": ["#fff"], "width": 27, "height": 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="{"fill": ["#fff"], "width": 27, "height": 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> |