diff --git a/SolarPower/Controllers/StationOverviewController.cs b/SolarPower/Controllers/StationOverviewController.cs
index f996e83..b6827f0 100644
--- a/SolarPower/Controllers/StationOverviewController.cs
+++ b/SolarPower/Controllers/StationOverviewController.cs
@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Mvc;
+using Microsoft.Extensions.Logging;
 using SolarPower.Models;
 using SolarPower.Models.PowerStation;
 using SolarPower.Repository.Interface;
@@ -24,11 +25,16 @@ namespace SolarPower.Controllers
         {
             return View();
         }
+        public IActionResult Info()
+        {
+            return View("~/Views/StationOverview/StationOverviewInfo.cshtml");
+        }
 
         /// <summary>
         /// 取得該使用者可看的所有電站分佈縣市以及各縣市電站數量
         /// </summary>
         /// <returns></returns>
+        [HttpPost]
         public async Task<ApiResult<List<PowerStation>>> GetSolarByCity(UseStatusCityGetPowerStation post)
         {
             ApiResult<List<PowerStation>> apiResult = new ApiResult<List<PowerStation>>();
@@ -53,5 +59,68 @@ namespace SolarPower.Controllers
 
             return apiResult;
         }
+
+        [HttpPost]
+        public async Task<ApiResult<MapOverview>> GetStationCard(StationIds post)
+        {
+            ApiResult<MapOverview> apiResult = new ApiResult<MapOverview>();
+
+            MapOverview mapOverview = new MapOverview();
+            try
+            {
+                List<int> powerStationIds = new List<int>() { 1, 2, 3 };
+                var overview = await overviewRepository.GetOverviewByPowerStationIds(post.Ids);
+                mapOverview.Today_kwh = overview.Today_kwh;
+                mapOverview.Total_kwh = overview.Total_kwh;
+                mapOverview.Today_irradiance = overview.Today_irradiance;
+                mapOverview.Avg_irradiance = overview.Avg_irradiance;
+                mapOverview.Today_PR = overview.Today_PR;
+                mapOverview.Avg_PR = overview.Avg_PR;
+                mapOverview.Today_kwhkwp = overview.Today_kwhkwp;
+                mapOverview.Avg_kwhkwp = overview.Avg_kwhkwp;
+                mapOverview.Today_carbon = overview.Today_carbon;
+                mapOverview.Total_carbon = overview.Total_carbon;
+
+                mapOverview.CapacityDataTables = await overviewRepository.GetCapacityDataTableByPowerStationIds(post.Ids);
+
+                var totalPowerStationCount = 0;
+                var totalCapacity = 0.0;
+
+                foreach (var capacity in mapOverview.CapacityDataTables)
+                {
+                    totalPowerStationCount += capacity.SubPowerStationCount;
+                    totalCapacity += capacity.SubTotalCapacity;
+                }
+
+                mapOverview.TotalPowerStationCount = totalPowerStationCount;
+                mapOverview.TotalCapacity = totalCapacity;
+
+                mapOverview.PowerStations = await overviewRepository.GetListPowerStationByPowerStationIds(powerStationIds);
+
+                mapOverview.UpdatedAt = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
+
+
+                apiResult.Code = "0000";
+                apiResult.Data = mapOverview;
+
+            }
+            catch (Exception exception)
+            {
+                apiResult.Code = "9999";
+                Logger.LogError("【" + controllerName + "/" + actionName + "】");
+                Logger.LogError("【" + controllerName + "/" + actionName + "】" + exception.Message);
+            }
+
+            apiResult.Msg = errorCode.GetString(apiResult.Code);
+            return apiResult;
+        }
+
+
     }
+
+
+
+
+
 }
+
diff --git a/SolarPower/Models/Overview.cs b/SolarPower/Models/Overview.cs
index 34bfb3c..481a73f 100644
--- a/SolarPower/Models/Overview.cs
+++ b/SolarPower/Models/Overview.cs
@@ -38,8 +38,12 @@ namespace SolarPower.Models
 
     public class UseStatusCityGetPowerStation
     {
-        public List<int> CityId; //都市
-        public List<int> Status; //狀態
+        public List<int> Cityid { get; set; } //都市
+        public List<int> Status { get; set; } //狀態
     }
 
+    public class StationIds
+    {
+        public List<int> Ids { get; set; }
+    }
 }
diff --git a/SolarPower/Repository/Implement/OverviewRepository.cs b/SolarPower/Repository/Implement/OverviewRepository.cs
index 1620e6b..03fb6aa 100644
--- a/SolarPower/Repository/Implement/OverviewRepository.cs
+++ b/SolarPower/Repository/Implement/OverviewRepository.cs
@@ -120,6 +120,7 @@ namespace SolarPower.Repository.Implement
 
         public async Task<List<PowerStation>> GetSolarByCity(MyUser User, UseStatusCityGetPowerStation post)
         {
+
             using IDbConnection conn = _databaseHelper.GetConnection();
             List<PowerStation> powerstation = new List<PowerStation>();
             conn.Open();
@@ -127,7 +128,7 @@ namespace SolarPower.Repository.Implement
             try
             {
                 var ids = "";
-                foreach (var id in post.CityId)
+                foreach (var id in post.Cityid)
                 {
                     ids = ids + id + ",";
                 }
@@ -138,19 +139,19 @@ namespace SolarPower.Repository.Implement
                 if (User.Role.Layer == 0 || User.Role.Layer == 1)
                 {
                     var sql = "SELECT * FROM power_station WHERE CityId IN @IDs AND HealthStatus IN @Status";
-                    powerstation = (await conn.QueryAsync<PowerStation>(sql, new { IDs = post.CityId , Status = post.Status})).ToList();
+                    powerstation = (await conn.QueryAsync<PowerStation>(sql, new { IDs = post.Cityid, Status = post.Status})).ToList();
                     trans.Commit();
                 }
                 else if (User.Role.Layer == 2)
                 {
                     var sql = "SELECT * FROM power_station WHERE CityId IN @IDs AND CompanyId=@CompanyId AND HealthStatus IN @Status";
-                    powerstation = (await conn.QueryAsync<PowerStation>(sql, new { IDs = post.CityId, CompanyId = User.CompanyId , Status = post.Status })).ToList();
+                    powerstation = (await conn.QueryAsync<PowerStation>(sql, new { IDs = post.Cityid, CompanyId = User.CompanyId , Status = post.Status })).ToList();
                     trans.Commit();
                 }
                 else
                 {
                     var sql = "SELECT power_station.* FROM power_station LEFT JOIN power_station_operation_personnel ON power_station.Id = power_station_operation_personnel.PowerStationId WHERE CityId IN @IDs AND Userid = @UserId AND HealthStatus IN @Status";
-                    powerstation = (await conn.QueryAsync<PowerStation>(sql, new { IDs = post.CityId, UserId = User.Id , Status = post.Status })).ToList();
+                    powerstation = (await conn.QueryAsync<PowerStation>(sql, new { IDs = post.Cityid, UserId = User.Id , Status = post.Status })).ToList();
                     trans.Commit();
                 }
             }
diff --git a/SolarPower/Views/MapOverview/Index.cshtml b/SolarPower/Views/MapOverview/Index.cshtml
index 91096e2..8957e97 100644
--- a/SolarPower/Views/MapOverview/Index.cshtml
+++ b/SolarPower/Views/MapOverview/Index.cshtml
@@ -79,11 +79,11 @@
             </div>
             <div class="card-body">
                 <div class="d-flex justify-content-between">
-                    <p>總減碳量</p>
+                    <p>今日減碳量</p>
                     <p><span class="color-info-700 fs-xl font-weight-bold" id="today_carbon">6,091.78</span> KG</p>
                 </div>
                 <div class="d-flex justify-content-between">
-                    <p>今日減碳量</p>
+                    <p>總減碳量</p>
                     <p><span class="color-info-700 fs-xl font-weight-bold" id="total_carbon">985.98</span> KG</p>
                 </div>
             </div>
diff --git a/SolarPower/Views/StationOverview/Index.cshtml b/SolarPower/Views/StationOverview/Index.cshtml
index 66454e5..1edc79b 100644
--- a/SolarPower/Views/StationOverview/Index.cshtml
+++ b/SolarPower/Views/StationOverview/Index.cshtml
@@ -84,11 +84,11 @@
                                     <div class="card-body" style="min-height: 148px;">
                                         <div class="d-flex justify-content-between">
                                             <p>今日發電量</p>
-                                            <p><span class="color-info-700">126,161.72</span> kWh</p>
+                                            <p><span class="color-info-700" id="today_kwh">126,161.72</span> kWh</p>
                                         </div>
                                         <div class="d-flex justify-content-between">
                                             <p>累積發電量</p>
-                                            <p><span class="color-info-700">4,069.73</span> kWh</p>
+                                            <p><span class="color-info-700" id="total_kwh">4,069.73</span> kWh</p>
                                         </div>
                                     </div>
                                 </div>
@@ -99,11 +99,11 @@
                                     <div class="card-body" style="min-height: 148px;">
                                         <div class="d-flex justify-content-between">
                                             <p>即時平均日照度</p>
-                                            <p><span class="color-info-700">126,161.72</span> kW/m<sup>2</sup></p>
+                                            <p><span class="color-info-700" id="today_irradiance">126,161.72</span> kW/m<sup>2</sup></p>
                                         </div>
                                         <div class="d-flex justify-content-between">
                                             <p>平均日照度(30天)</p>
-                                            <p><span class="color-info-700">4,069.73</span> kW/m<sup>2</sup></p>
+                                            <p><span class="color-info-700" id="avg_irradiance">4,069.73</span> kW/m<sup>2</sup></p>
                                         </div>
                                     </div>
                                 </div>
@@ -114,11 +114,11 @@
                                     <div class="card-body" style="min-height: 148px;">
                                         <div class="d-flex justify-content-between">
                                             <p>即時平均 PR 值</p>
-                                            <p><span class="color-info-700">119.04</span></p>
+                                            <p><span class="color-info-700" id="today_PR">119.04</span></p>
                                         </div>
                                         <div class="d-flex justify-content-between">
                                             <p>平均 PR 值(30天)</p>
-                                            <p><span class="color-info-700">3.84</span></p>
+                                            <p><span class="color-info-700" id="avg_PR">3.84</span></p>
                                         </div>
                                     </div>
                                 </div>
@@ -129,11 +129,11 @@
                                     <div class="card-body" style="min-height: 148px;">
                                         <div class="d-flex justify-content-between">
                                             <p>即時平均 kWh / kWp</p>
-                                            <p><span class="color-info-700">140.39</span></p>
+                                            <p><span class="color-info-700" id="today_kwhkwp">140.39</span></p>
                                         </div>
                                         <div class="d-flex justify-content-between">
                                             <p>平均 kWh / kWp (30天)</p>
-                                            <p><span class="color-info-700">4.53</span></p>
+                                            <p><span class="color-info-700" id="avg_kwhkwp">4.53</span></p>
                                         </div>
                                     </div>
                                 </div>
@@ -144,11 +144,11 @@
                                     <div class="card-body" style="min-height: 148px;">
                                         <div class="d-flex justify-content-between">
                                             <p>今日減碳量</p>
-                                            <p><span class="color-info-700">6,091.78</span> kG</p>
+                                            <p><span class="color-info-700" id="today_carbon">6,091.78</span> kG</p>
                                         </div>
                                         <div class="d-flex justify-content-between">
                                             <p>累積減碳量</p>
-                                            <p><span class="color-info-700">985.98</span> kG</p>
+                                            <p><span class="color-info-700" id="total_carbon">985.98</span> kG</p>
                                         </div>
                                     </div>
                                 </div>
@@ -259,12 +259,21 @@
 
 @section Scripts{
     <script>
+        var localurl = this.location.href;
         var tablocation = "";
         var ids = new Array(0);//當前選擇縣市
         var powerids = new Array(0);//當前選擇電站
         var Allids = new Array(0);//全部縣市
         var Allpowerids = new Array(0);//全部電站
-        var status = [1, 2, 3];
+        //#region Array.Remove
+        Array.prototype.remove = function (val) {
+            var index = this.indexOf(val);
+            if (index > -1) {
+                this.splice(index, 1);
+            }
+        };
+        //#endregion
+        
         $(function () {
             var Nurl = "/PowerStation/GetSolarCitySummary";
             $.post(Nurl, function (rel) {
@@ -278,23 +287,45 @@
                         rel.data[i].city +
                         "<span class= 'badge bg-success-700 ml-2' >" + rel.data[i].amount + "</span >" +
                         "</button >");
-                    ids.push(String(rel.data[i].cityId));
-                    Allids.push(String(rel.data[i].cityId));
+                    ids.push(rel.data[i].cityId);
+                    Allids.push(rel.data[i].cityId);
                 }
-                //getStation(ids);
-            })
+                getStation(ids);
+            }, 'json');
             
         });
-        function getStation(ids)
-        {
-            var send_data = {
-                cityid: ids,
-                status: status
-            }
+
+
+        $('#citytest').on("click", "button", function () {
+            var clickid = $(this).attr('id');
+            var classid = clickid.split("_");
+            var Newpowerids = new Array(0);
+            var value = document.getElementById(clickid).className;
             ids.sort(function (a, b) {
                 return a - b;
             });
-            ids.sort();
+            if (value == 'btn btn-outline-success waves-effect waves-themed ml-2') {  //選擇
+                document.getElementById(clickid).setAttribute("class", 'btn btn-success waves-effect waves-themed ml-2');
+                ids.push(Number(classid[1]));
+            }
+            else { //取消
+                document.getElementById(clickid).setAttribute("class", 'btn btn-outline-success waves-effect waves-themed ml-2');
+                ids.remove(Number(classid[1]));
+            }
+            getStation(ids);
+        })
+
+        function getStation(ids)
+        {
+            var status = [1,2,3];
+            var send_data = {
+                cityid: ids,
+                status: status,
+            };
+            //ids.sort(function (a, b) {
+            //    return a - b;
+            //});
+            //ids.sort();
             var Nurl = "/StationOverview/GetSolarByCity";
             $.post(Nurl, send_data, function (rel) {
                 if (rel.code != "0000") {
@@ -308,24 +339,52 @@
                     $('#card_' + val.id).find('#Temp').html(val.todayWeatherTemp);
                     var type = "";
                     switch (val.solarType) {
-                        case 0 : type = "自建躉售"; break;
-                        case 1 : type = "租建躉售"; break;
-                        case 2 : type = "自建自用"; break;
+                        case 0: type = "自建躉售"; break;
+                        case 1: type = "租建躉售"; break;
+                        case 2: type = "自建自用"; break;
                         default:
                             console.log(`Sorry, we are out of ${val.solarType}.`);
                     }
                     $('#card_' + val.id).find('#stationtype').html(type);
                     var time = new Date(val.createdAt);
+                    $('#card_' + val.id).find('#editSolarUrl').attr('href', localurl + '/Info?stationId=' + val.id);
                     $('#card_' + val.id).find('#date').html(time.getMonth() + "/" + time.getDate() + " " + time.getHours() + ":" + time.getMinutes());
                     $('#card_' + val.id).find('#Capacity').html(val.generatingCapacity);
                     $('#card_' + val.id).find('#PowerRate').html(val.generatingCapacity * val.powerRate);
                     $('#card_' + val.id).find('#PR').html(val.pr);
                     $('#card_' + val.id).find('#aria').attr('aria-valuenow', val.pr);
-                    $('#card_' + val.id).find('#aria').attr('style', "width:" + val.pr +"%;" );
+                    $('#card_' + val.id).find('#aria').attr('style', "width:" + val.pr + "%;");
+                    powerids.push(val.id);
                 });
-            })
+                GetStationCard();
+            }, 'json');
+        }
+        function GetStationCard()
+        {
+            var send_data = {
+                ids: powerids
+            };
+            var url = "/StationOverview/GetStationCard";
+            $.post(url, send_data, function (rel) {
+                if (rel.code != "0000") {
+                    toast_error(rel.msg);
+                    return;
+                }
+                mapOverview = rel.data;
+                $("#today_kwh").html(mapOverview.today_kwh);
+                $("#total_kwh").html(mapOverview.total_kwh);
+                $("#today_irradiance").html(mapOverview.today_irradiance);
+                $("#avg_irradiance").html(mapOverview.avg_irradiance);
+                $("#today_PR").html(mapOverview.today_PR);
+                $("#avg_PR").html(mapOverview.avg_PR);
+                $("#today_kwhkwp").html(mapOverview.today_kwhkwp);
+                $("#avg_kwhkwp").html(mapOverview.avg_kwhkwp);
+                $("#today_carbon").html(mapOverview.today_carbon);
+                $("#total_power_station_count").html(mapOverview.totalPowerStationCount);
+                $("#total_capacity").html(mapOverview.totalCapacity);
+                $("#update_at").html(mapOverview.updatedAt);
+            });
         }
-
 
 
 
diff --git a/SolarPower/Views/StationOverview/StationOverviewInfo.cshtml b/SolarPower/Views/StationOverview/StationOverviewInfo.cshtml
new file mode 100644
index 0000000..9bfbba6
--- /dev/null
+++ b/SolarPower/Views/StationOverview/StationOverviewInfo.cshtml
@@ -0,0 +1,124 @@
+@{
+    ViewData["MainNum"] = "1";
+    ViewData["SubNum"] = "2";
+    ViewData["Title"] = "電站總覽";
+}
+
+<ol class="breadcrumb page-breadcrumb">
+    <li class="breadcrumb-item"><a href="javascript:void(0);">總覽</a></li>
+    <li class="breadcrumb-item">@ViewData["Title"]</li>
+    <li class="breadcrumb-item city-name">新竹市</li>
+    <li class="breadcrumb-item power-station-name active">新竹巨城站</li>
+    <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
+</ol>
+<div class="row">
+    <div class="col-xl-12">
+        <div id="panel-5" class="panel">
+            <div class="panel-container show">
+                <div class="panel-content">
+                    <div class="row subheader">
+                        <div class="col-xl-2">
+                            <h1 class="subheader-title">
+                                <span class="icon-stack fa-1x">
+                                    <i class="base-7 icon-stack-3x color-info-500"></i>
+                                    <i class="base-7 icon-stack-2x color-info-700"></i>
+                                    <i class="ni ni-graph icon-stack-1x text-white"></i>
+                                </span>
+                                <span id="power-station-title">新竹巨城站</span>
+                            </h1>
+                        </div>
+                        <div class="col-xl-3 d-flex justify-content-start">
+                            <p class="card-text px-3"><i class="fal fa-cloud-sun-rain fa-3x"></i></p>
+                            <p class="font-weight-bold">27°C<br>降雨幾率: 15%</p>
+                        </div>
+                    </div>
+                    <ul class="nav nav-tabs mb-5" role="tablist">
+                        <li class="nav-item">
+                            <a class="nav-link fs-lg px-4 active" data-toggle="tab" href="#tab-overview-uptodate" role="tab">
+                                <i class="fal fa-home text-success"></i> <span class="hidden-sm-down ml-1">即時資訊</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-overview-info" role="tab">
+                                <i class="fal fa-home text-success"></i> <span class="hidden-sm-down ml-1">基本資料</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-overview-history" role="tab">
+                                <i class="fal fa-home text-success"></i> <span class="hidden-sm-down ml-1">歷史資料</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-overview-inverter" role="tab">
+                                <i class="fal fa-home text-success"></i> <span class="hidden-sm-down ml-1">逆變器分析</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-overview-exception" role="tab">
+                                <i class="fal fa-home text-success"></i> <span class="hidden-sm-down ml-1">異常記錄</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-overview-operationRecord" role="tab">
+                                <i class="fal fa-home text-success"></i> <span class="hidden-sm-down ml-1">運維記錄</span>
+                            </a>
+                        </li>
+                    </ul>
+                    <div class="tab-content p-3">
+                        <div class="tab-pane fade show active" id="tab-overview-uptodate" role="tabpanel" aria-labelledby="tab-overview-uptodate">
+                            @Html.Partial("_UpToDate")
+                        </div>
+
+                        <div class="tab-pane fade" id="tab-overview-info" role="tabpanel" aria-labelledby="tab-overview-info">
+                            @Html.Partial("_Info")
+                        </div>
+
+                        <div class="tab-pane fade" id="tab-overview-history" role="tabpanel" aria-labelledby="tab-overview-history">
+                            @Html.Partial("_History")
+                        </div>
+
+                        <div class="tab-pane fade" id="tab-overview-inverter" role="tabpanel" aria-labelledby="tab-overview-inverter">
+                            @Html.Partial("_Inverter")
+                        </div>
+
+                        <div class="tab-pane fade" id="tab-overview-exception" role="tabpanel" aria-labelledby="tab-overview-exception">
+                            @Html.Partial("_Exception")
+                        </div>
+
+                        <div class="tab-pane fade" id="tab-overview-operationRecord" role="tabpanel" aria-labelledby="tab-overview-operationRecord">
+                            @Html.Partial("_OperationRecord")
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+@section Scripts{
+    <script>
+        var stationId;
+        var powerStationData;
+        $(function () {
+            var url = new URL(location.href);
+            stationId = url.searchParams.get('stationId');
+            var url = "/PowerStation/GetOnePowerStation"
+
+            var send_data = {
+                id: stationId
+            }
+
+            $.post(url, send_data, function (rel) {
+                if (rel.code != "0000") {
+                    toast_error(rel.msg);
+                    return;
+                }
+
+                powerStationData = rel.data;
+                $(".city-name").html(powerStationData.cityName);
+                $(".power-station-name").html(powerStationData.name);
+                $("#power-station-title").html(powerStationData.name);
+            }, 'json');
+        })
+    </script>
+}
\ No newline at end of file
diff --git a/SolarPower/Views/StationOverview/_Exception.cshtml b/SolarPower/Views/StationOverview/_Exception.cshtml
new file mode 100644
index 0000000..3b919e6
--- /dev/null
+++ b/SolarPower/Views/StationOverview/_Exception.cshtml
@@ -0,0 +1 @@
+<p>1</p>
\ No newline at end of file
diff --git a/SolarPower/Views/StationOverview/_History.cshtml b/SolarPower/Views/StationOverview/_History.cshtml
new file mode 100644
index 0000000..0838d1a
--- /dev/null
+++ b/SolarPower/Views/StationOverview/_History.cshtml
@@ -0,0 +1 @@
+<p>2</p>
\ No newline at end of file
diff --git a/SolarPower/Views/StationOverview/_Info.cshtml b/SolarPower/Views/StationOverview/_Info.cshtml
new file mode 100644
index 0000000..e75769b
--- /dev/null
+++ b/SolarPower/Views/StationOverview/_Info.cshtml
@@ -0,0 +1 @@
+<p>3</p>
\ No newline at end of file
diff --git a/SolarPower/Views/StationOverview/_Inverter.cshtml b/SolarPower/Views/StationOverview/_Inverter.cshtml
new file mode 100644
index 0000000..026ce36
--- /dev/null
+++ b/SolarPower/Views/StationOverview/_Inverter.cshtml
@@ -0,0 +1 @@
+<p>4</p>
\ No newline at end of file
diff --git a/SolarPower/Views/StationOverview/_OperationRecord.cshtml b/SolarPower/Views/StationOverview/_OperationRecord.cshtml
new file mode 100644
index 0000000..94571ea
--- /dev/null
+++ b/SolarPower/Views/StationOverview/_OperationRecord.cshtml
@@ -0,0 +1 @@
+<p>5</p>
\ No newline at end of file
diff --git a/SolarPower/Views/StationOverview/_UpToDate.cshtml b/SolarPower/Views/StationOverview/_UpToDate.cshtml
new file mode 100644
index 0000000..2759cb4
--- /dev/null
+++ b/SolarPower/Views/StationOverview/_UpToDate.cshtml
@@ -0,0 +1 @@
+<p>6</p>
\ No newline at end of file