diff --git a/Frontend/_energyManagement.html b/Frontend/_energyManagement.html
new file mode 100644
index 0000000..f9edd82
--- /dev/null
+++ b/Frontend/_energyManagement.html
@@ -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>
\ No newline at end of file
diff --git a/Frontend/index.html b/Frontend/index.html
index 4c48366..2705a6a 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -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);
 
                 })
diff --git a/FrontendWebApi/ApiControllers/EnergeManageController.cs b/FrontendWebApi/ApiControllers/EnergeManageController.cs
new file mode 100644
index 0000000..6dfe8fa
--- /dev/null
+++ b/FrontendWebApi/ApiControllers/EnergeManageController.cs
@@ -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);
+        }
+    }
+}
diff --git a/FrontendWebApi/Models/Energe.cs b/FrontendWebApi/Models/Energe.cs
new file mode 100644
index 0000000..08eddc1
--- /dev/null
+++ b/FrontendWebApi/Models/Energe.cs
@@ -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; }
+    }
+}
diff --git a/FrontendWebApi/appsettings.json b/FrontendWebApi/appsettings.json
index af29da8..5b437bf 100644
--- a/FrontendWebApi/appsettings.json
+++ b/FrontendWebApi/appsettings.json
@@ -9,7 +9,7 @@
   "JwtSettings": {
     "Issuer": "Admin", //�o�e��
     "SignKey": "TaipeiDome123456", //ñ��//�̤�16�r��
-    "JwtLifeSeconds": 1800
+    "JwtLifeSeconds": 86400
   },
   "DBConfig": {
     //"MySqlDBConfig": {