電站管理卡片前端Jquery
This commit is contained in:
桂任 林
parent
32973c35a1
commit
1f35d413b2
@ -19,269 +19,263 @@
|
||||
<div class="subheader">
|
||||
<h1 class="subheader-title"> 電站分佈區域 </h1>
|
||||
</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-newtaipei" role="tab">
|
||||
<span class="hidden-sm-down ml-1">新北市</span> <span class="badge bg-primary-500 ml-2">4</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-taipei" role="tab">
|
||||
<span class="hidden-sm-down ml-1">台北市</span> <span class="badge bg-primary-500 ml-2">4</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-hsinchu" role="tab">
|
||||
<span class="hidden-sm-down ml-1">新竹市</span> <span class="badge bg-primary-500 ml-2">4</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-miaoli" role="tab">
|
||||
<span class="hidden-sm-down ml-1">苗栗縣</span> <span class="badge bg-primary-500 ml-2">1</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-taichung" role="tab">
|
||||
<span class="hidden-sm-down ml-1">台中市</span> <span class="badge bg-primary-500 ml-2">3</span>
|
||||
</a>
|
||||
</li>
|
||||
<ul id="areaTab" 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-newtaipei" role="tab">
|
||||
<span class="hidden-sm-down ml-1">新北市</span> <span class="badge bg-primary-500 ml-2">4</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item" id="taipei">
|
||||
<a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-taipei" role="tab">
|
||||
<span class="hidden-sm-down ml-1">台北市</span> <span class="badge bg-primary-500 ml-2">4</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-hsinchu" role="tab">
|
||||
<span class="hidden-sm-down ml-1">新竹市</span> <span class="badge bg-primary-500 ml-2">4</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-miaoli" role="tab">
|
||||
<span class="hidden-sm-down ml-1">苗栗縣</span> <span class="badge bg-primary-500 ml-2">1</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-taichung" role="tab">
|
||||
<span class="hidden-sm-down ml-1">台中市</span> <span class="badge bg-primary-500 ml-2">3</span>
|
||||
</a>
|
||||
</li>*@
|
||||
</ul>
|
||||
<div class="tab-content p-3">
|
||||
<div class="tab-pane fade show active" id="tab-newtaipei" role="tabpanel" aria-labelledby="tab-newtaipei">
|
||||
<div class="row mb-5 d-flex justify-content-between">
|
||||
<div class="col-6">
|
||||
<a asp-controller="PowerStation" asp-action="Edit" asp-route-stationId="new" class="btn btn-success waves-effect waves-themed mb-3">
|
||||
<span class="fal fa-plus mr-1"></span>
|
||||
新增電站
|
||||
<div id="area" class="tab-content p-3">
|
||||
<!--<div class="tab-pane fade show active" id="tab-newtaipei" role="tabpanel" aria-labelledby="tab-newtaipei">
|
||||
<div class="row mb-5 d-flex justify-content-between">
|
||||
<div class="col-6">
|
||||
<a asp-controller="PowerStation" asp-action="Edit" asp-route-stationId="new" class="btn btn-success waves-effect waves-themed mb-3">
|
||||
<span class="fal fa-plus mr-1"></span>
|
||||
新增電站
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-6 text-right">
|
||||
<a href="javascript:;" class="btn btn-secondary btn-icon waves-effect waves-themed"><span class="fal fa-list mr-1"></span></a>
|
||||
<a href="javascript:;" class="btn btn-secondary btn-icon waves-effect waves-themed"><span class="fal fa-grip-horizontal mr-1"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="solarCard">-->
|
||||
@*<div class="col-xl-2">
|
||||
<div class="card border m-auto m-lg-0">
|
||||
<a href="0station.html">
|
||||
<img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-6 text-right">
|
||||
<a href="javascript:;" class="btn btn-secondary btn-icon waves-effect waves-themed"><span class="fal fa-list mr-1"></span></a>
|
||||
<a href="javascript:;" class="btn btn-secondary btn-icon waves-effect waves-themed"><span class="fal fa-grip-horizontal mr-1"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-5">
|
||||
<div class="col-xl">
|
||||
<div class="card border m-auto m-lg-0">
|
||||
<a href="0station.html">
|
||||
<img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
|
||||
</a>
|
||||
<div class="card-body d-flex justify-content-between pb-0 px-2">
|
||||
<h4 class="font-weight-bold" style="line-height: 27px;">
|
||||
<a href="javascript:void(0);" class="btn btn-success btn-sm btn-icon rounded-circle waves-effect waves-themed">
|
||||
<i class="fal fa-check"></i>
|
||||
</a> 新竹巨城站
|
||||
</h4>
|
||||
<p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item px-2">
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>發電量</p>
|
||||
<p><span class="color-primary-400">185</span> kWh</p>
|
||||
<p>27°C</p>
|
||||
</div>
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>發電金額</p>
|
||||
<p><span class="color-primary-400">2,5840</span> NT</p>
|
||||
<p class="small">2021-06-30</p>
|
||||
</div>
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>Pr值</p>
|
||||
<p><span class="color-primary-400">90</span> %</p>
|
||||
<p class="small">17:50:36</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl">
|
||||
<div class="card border m-auto m-lg-0">
|
||||
<img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
|
||||
<div class="card-body d-flex justify-content-between pb-0 px-2">
|
||||
<h4 class="font-weight-bold" style="line-height: 27px;">
|
||||
<a href="javascript:void(0);" class="btn btn-success btn-sm btn-icon rounded-circle waves-effect waves-themed">
|
||||
<i class="fal fa-check"></i>
|
||||
</a> 新竹交大站
|
||||
</h4>
|
||||
<p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item px-2">
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>發電量</p>
|
||||
<p><span class="color-primary-400">185</span> kWh</p>
|
||||
<p>27°C</p>
|
||||
</div>
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>發電金額</p>
|
||||
<p><span class="color-primary-400">2,5840</span> NT</p>
|
||||
<p class="small">2021-06-30</p>
|
||||
</div>
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>Pr值</p>
|
||||
<p><span class="color-primary-400">65</span> %</p>
|
||||
<p class="small">17:50:36</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 65%;" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl">
|
||||
<div class="card border m-auto m-lg-0">
|
||||
<img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
|
||||
<div class="card-body d-flex justify-content-between pb-0 px-2">
|
||||
<h4 class="font-weight-bold" style="line-height: 27px;">
|
||||
<a href="javascript:void(0);" class="btn btn-warning btn-sm btn-icon rounded-circle waves-effect waves-themed">
|
||||
<i class="fal fa-exclamation"></i>
|
||||
</a> 新竹動物園站
|
||||
</h4>
|
||||
<p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item px-2">
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>發電量</p>
|
||||
<p><span class="color-primary-400">185</span> kWh</p>
|
||||
<p>27°C</p>
|
||||
</div>
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>發電金額</p>
|
||||
<p><span class="color-primary-400">2,5840</span> NT</p>
|
||||
<p class="small">2021-06-30</p>
|
||||
</div>
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>Pr值</p>
|
||||
<p><span class="color-primary-400">40</span> %</p>
|
||||
<p class="small">17:50:36</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl">
|
||||
<div class="card border m-auto m-lg-0">
|
||||
<img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
|
||||
<div class="card-body d-flex justify-content-between pb-0 px-2">
|
||||
<h4 class="font-weight-bold" style="line-height: 27px;">
|
||||
<a href="javascript:void(0);" class="btn btn-danger btn-sm btn-icon rounded-circle waves-effect waves-themed">
|
||||
<i class="fal fa-horizontal-rule"></i>
|
||||
</a> 新竹動物園站
|
||||
</h4>
|
||||
<p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item px-2">
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>發電量</p>
|
||||
<p><span class="color-primary-400">185</span> kWh</p>
|
||||
<p>27°C</p>
|
||||
</div>
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>發電金額</p>
|
||||
<p><span class="color-primary-400">2,5840</span> NT</p>
|
||||
<p class="small">2021-06-30</p>
|
||||
</div>
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>Pr值</p>
|
||||
<p><span class="color-primary-400">5</span> %</p>
|
||||
<p class="small">17:50:36</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 5%;" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl">
|
||||
<div class="card border m-auto m-lg-0">
|
||||
<img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
|
||||
<div class="card-body d-flex justify-content-between pb-0 px-2">
|
||||
<h4 class="font-weight-bold" style="line-height: 27px;">
|
||||
<a href="javascript:void(0);" class="btn btn-success btn-sm btn-icon rounded-circle waves-effect waves-themed">
|
||||
<i class="fal fa-check"></i>
|
||||
</a> 新竹巨城站
|
||||
</h4>
|
||||
<p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item px-2">
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>發電量</p>
|
||||
<p><span class="color-primary-400">185</span> kWh</p>
|
||||
<p>27°C</p>
|
||||
</div>
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>發電金額</p>
|
||||
<p><span class="color-primary-400">2,5840</span> NT</p>
|
||||
<p class="small">2021-06-30</p>
|
||||
</div>
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>Pr值</p>
|
||||
<p><span class="color-primary-400">90</span> %</p>
|
||||
<p class="small">17:50:36</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xl">
|
||||
<div class="card border m-auto m-lg-0">
|
||||
<img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
|
||||
<div class="card-body d-flex justify-content-between pb-0 px-2">
|
||||
<h4 class="font-weight-bold" style="line-height: 27px;">
|
||||
<a href="javascript:void(0);" class="btn btn-success btn-sm btn-icon rounded-circle waves-effect waves-themed">
|
||||
<i class="fal fa-check"></i>
|
||||
</a> 新竹交大站
|
||||
</h4>
|
||||
<p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item px-2">
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>發電量</p>
|
||||
<p><span class="color-primary-400">185</span> kWh</p>
|
||||
<p>27°C</p>
|
||||
</div>
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>發電金額</p>
|
||||
<p><span class="color-primary-400">2,5840</span> NT</p>
|
||||
<p class="small">2021-06-30</p>
|
||||
</div>
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>Pr值</p>
|
||||
<p><span class="color-primary-400">65</span> %</p>
|
||||
<p class="small">17:50:36</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 65%;" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body d-flex justify-content-between pb-0 px-2">
|
||||
<h4 class="font-weight-bold" style="line-height: 27px;">
|
||||
新竹巨城站
|
||||
</h4>
|
||||
|
||||
<div class="col-xl"></div>
|
||||
<div class="col-xl"></div>
|
||||
<div class="col-xl"></div>
|
||||
<div class="col-xl"></div>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item px-2">
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>發電量</p>
|
||||
<p><span class="color-primary-400">185</span> kWh</p>
|
||||
|
||||
</div>
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>發電金額</p>
|
||||
<p><span class="color-primary-400">2,5840</span> NT</p>
|
||||
|
||||
</div>
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>Pr值</p>
|
||||
<p><span class="color-primary-400">90</span> %</p>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-2">
|
||||
<div class="card border m-auto m-lg-0">
|
||||
<img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
|
||||
<div class="card-body d-flex justify-content-between pb-0 px-2">
|
||||
<h4 class="font-weight-bold" style="line-height: 27px;">
|
||||
<a href="javascript:void(0);" class="btn btn-success btn-sm btn-icon rounded-circle waves-effect waves-themed">
|
||||
<i class="fal fa-check"></i>
|
||||
</a> 新竹交大站
|
||||
</h4>
|
||||
<p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item px-2">
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>發電量</p>
|
||||
<p><span class="color-primary-400">185</span> kWh</p>
|
||||
<p>27°C</p>
|
||||
</div>
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>發電金額</p>
|
||||
<p><span class="color-primary-400">2,5840</span> NT</p>
|
||||
<p class="small">2021-06-30</p>
|
||||
</div>
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>Pr值</p>
|
||||
<p><span class="color-primary-400">65</span> %</p>
|
||||
<p class="small">17:50:36</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 65%;" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-2">
|
||||
<div class="card border m-auto m-lg-0">
|
||||
<img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
|
||||
<div class="card-body d-flex justify-content-between pb-0 px-2">
|
||||
<h4 class="font-weight-bold" style="line-height: 27px;">
|
||||
<a href="javascript:void(0);" class="btn btn-warning btn-sm btn-icon rounded-circle waves-effect waves-themed">
|
||||
<i class="fal fa-exclamation"></i>
|
||||
</a> 新竹動物園站
|
||||
</h4>
|
||||
<p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item px-2">
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>發電量</p>
|
||||
<p><span class="color-primary-400">185</span> kWh</p>
|
||||
<p>27°C</p>
|
||||
</div>
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>發電金額</p>
|
||||
<p><span class="color-primary-400">2,5840</span> NT</p>
|
||||
<p class="small">2021-06-30</p>
|
||||
</div>
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>Pr值</p>
|
||||
<p><span class="color-primary-400">40</span> %</p>
|
||||
<p class="small">17:50:36</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-2">
|
||||
<div class="card border m-auto m-lg-0">
|
||||
<img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
|
||||
<div class="card-body d-flex justify-content-between pb-0 px-2">
|
||||
<h4 class="font-weight-bold" style="line-height: 27px;">
|
||||
<a href="javascript:void(0);" class="btn btn-danger btn-sm btn-icon rounded-circle waves-effect waves-themed">
|
||||
<i class="fal fa-horizontal-rule"></i>
|
||||
</a> 新竹動物園站
|
||||
</h4>
|
||||
<p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item px-2">
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>發電量</p>
|
||||
<p><span class="color-primary-400">185</span> kWh</p>
|
||||
<p>27°C</p>
|
||||
</div>
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>發電金額</p>
|
||||
<p><span class="color-primary-400">2,5840</span> NT</p>
|
||||
<p class="small">2021-06-30</p>
|
||||
</div>
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>Pr值</p>
|
||||
<p><span class="color-primary-400">5</span> %</p>
|
||||
<p class="small">17:50:36</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 5%;" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-2">
|
||||
<div class="card border m-auto m-lg-0">
|
||||
<img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
|
||||
<div class="card-body d-flex justify-content-between pb-0 px-2">
|
||||
<h4 class="font-weight-bold" style="line-height: 27px;">
|
||||
<a href="javascript:void(0);" class="btn btn-success btn-sm btn-icon rounded-circle waves-effect waves-themed">
|
||||
<i class="fal fa-check"></i>
|
||||
</a> 新竹巨城站
|
||||
</h4>
|
||||
<p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item px-2">
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>發電量</p>
|
||||
<p><span class="color-primary-400">185</span> kWh</p>
|
||||
<p>27°C</p>
|
||||
</div>
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>發電金額</p>
|
||||
<p><span class="color-primary-400">2,5840</span> NT</p>
|
||||
<p class="small">2021-06-30</p>
|
||||
</div>
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>Pr值</p>
|
||||
<p><span class="color-primary-400">90</span> %</p>
|
||||
<p class="small">17:50:36</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-2">
|
||||
<div class="card border m-auto m-lg-0">
|
||||
<img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
|
||||
<div class="card-body d-flex justify-content-between pb-0 px-2">
|
||||
<h4 class="font-weight-bold" style="line-height: 27px;">
|
||||
<a href="javascript:void(0);" class="btn btn-success btn-sm btn-icon rounded-circle waves-effect waves-themed">
|
||||
<i class="fal fa-check"></i>
|
||||
</a> 新竹交大站
|
||||
</h4>
|
||||
<p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item px-2">
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>發電量</p>
|
||||
<p><span class="color-primary-400">185</span> kWh</p>
|
||||
</div>
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>發電金額</p>
|
||||
<p><span class="color-primary-400">2,5840</span> NT</p>
|
||||
</div>
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>Pr值</p>
|
||||
<p><span class="color-primary-400">65</span> %</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 65%;" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-2"></div>
|
||||
<div class="col-xl-2"></div>
|
||||
<div class="col-xl-2"></div>
|
||||
<div class="col-xl-2"></div>*@
|
||||
|
||||
<!--</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="tab-taipei" role="tabpanel" aria-labelledby="tab-taipei">
|
||||
@ -306,7 +300,7 @@
|
||||
<div class="row mb-5">
|
||||
此處放台中市數據
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -314,10 +308,123 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="templateAreaTab" hidden="hidden">
|
||||
<ul>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-newtaipei" role="tab">
|
||||
<span id="areaName" class="hidden-sm-down ml-1">新北市</span> <span class="badge bg-primary-500 ml-2">4</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="templateArea" hidden="hidden">
|
||||
<div class="tab-pane" id="tab-name" role="tabpanel" aria-labelledby="tab-name">
|
||||
<div class="row mb-5 d-flex justify-content-between">
|
||||
<div class="col-6">
|
||||
<a asp-controller="PowerStation" asp-action="Edit" asp-route-stationId="new" class="btn btn-success waves-effect waves-themed mb-3">
|
||||
<span class="fal fa-plus mr-1"></span>
|
||||
新增電站
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-6 text-right">
|
||||
<a href="javascript:;" class="btn btn-secondary btn-icon waves-effect waves-themed"><span class="fal fa-list mr-1"></span></a>
|
||||
<a href="javascript:;" class="btn btn-secondary btn-icon waves-effect waves-themed"><span class="fal fa-grip-horizontal mr-1"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="solarCard">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="templateCard" hidden="hidden">
|
||||
<div class="col-xl-2">
|
||||
<div class="card border m-auto m-lg-0">
|
||||
<a id="editSolarUrl" href="0station.html">
|
||||
<img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
|
||||
</a>
|
||||
<div class="card-body d-flex justify-content-between pb-0 px-2">
|
||||
<h4 id="solarName" class="font-weight-bold" style="line-height: 27px;">
|
||||
新竹巨城站
|
||||
</h4>
|
||||
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item px-2">
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>發電量</p>
|
||||
<p><span id="today_kwh" class="color-primary-400">185</span> kWh</p>
|
||||
|
||||
</div>
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>發電金額</p>
|
||||
<p><span id="kwhkwp" class="color-primary-400">2,5840</span> NT</p>
|
||||
|
||||
</div>
|
||||
<div class=" d-flex justify-content-between">
|
||||
<p>Pr值</p>
|
||||
<p><span id="PR" class="color-primary-400">90</span> %</p>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@section Scripts{
|
||||
<script>
|
||||
|
||||
$(function () {
|
||||
var localurl = this.location.href;
|
||||
//電站區域Tab要佳LI
|
||||
/*$('#areaTab').append('<li>');*/
|
||||
$('#templateAreaTab').find('li').attr('id', 'AreaTabtaipei').clone().appendTo($('#areaTab'));
|
||||
$('#AreaTabtaipei').find('a').attr('href', '#tab-taipei');
|
||||
$('#AreaTabtaipei').find('a').attr('class', 'nav-link fs-lg px-4 active');
|
||||
|
||||
$('#AreaTabtaipei').find('#areaName').html('台北市')
|
||||
/*$('#areaTab').append('</li>');*/
|
||||
|
||||
//$('#areaTab').append('<li>');
|
||||
$('#templateAreaTab').find('li').attr('id', 'AreaTabnewtaipei').clone().appendTo($('#areaTab'));
|
||||
$('#AreaTabnewtaipei').find('a').attr('href', '#tab-newtaipei');
|
||||
$('#AreaTabnewtaipei').find('a').attr('class', 'nav-link fs-lg px-4');
|
||||
$('#AreaTabnewtaipei').find('#areaName').html('新北市')
|
||||
//$('#areaTab').append('</li>');
|
||||
|
||||
//電站區域內容
|
||||
$('#templateArea').find('.tab-pane').attr('id', 'tab-taipei').clone().appendTo($('#area'));
|
||||
$('#tab-taipei').attr('aria-labelledby', 'tab-taipei')
|
||||
$('#tab-taipei').attr('class','tab-pane fade show active')
|
||||
$('#tab-taipei').find('#solarCard').attr('id', 'solarCardtaipei');
|
||||
|
||||
|
||||
$('#templateArea').find('.tab-pane').attr('id', 'tab-newtaipei').clone().appendTo($('#area'));
|
||||
$('#tab-newtaipei').attr('aria-labelledby', 'tab-newtaipei')
|
||||
$('#tab-newtaipei').find('#solarCard').attr('id', 'solarCardnewtaipei');
|
||||
|
||||
|
||||
|
||||
//電站卡片
|
||||
$('#templateCard').find('.col-xl-2').attr('id', '001').clone().appendTo($('#solarCardnewtaipei'));
|
||||
$('#001').find('#editSolarUrl').attr('href', localurl + '/edit?stationId=001');
|
||||
$('#001').find('#solarName').text('新竹巨城站');
|
||||
$('#001').find('#today_kwh').text('185');
|
||||
$('#001').find('#kwhkwp').text('25,840');
|
||||
$('#001').find('#PR').text('90');
|
||||
|
||||
$('#templateCard').find('.col-xl-2').attr('id', '002').clone().appendTo($('#solarCardnewtaipei'));
|
||||
$('#002').find('#editSolarUrl').attr('href', localurl + '/edit?stationId=002');
|
||||
$('#002').find('#solarName').text('新竹交大站');
|
||||
$('#002').find('#today_kwh').text('183');
|
||||
$('#002').find('#kwhkwp').text('12,245');
|
||||
$('#002').find('#PR').text('80');
|
||||
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user