FIC_Solar/SolarPower/Views/PowerStation/Index.cshtml
2021-09-01 16:29:36 +08:00

555 lines
31 KiB
Plaintext

@{
ViewData["MainNum"] = "6";
ViewData["SubNum"] = "1";
ViewData["Title"] = "電站管理";
}
<ol class="breadcrumb page-breadcrumb">
<li class="breadcrumb-item"><a href="javascript:void(0);">總覽</a></li>
<li class="breadcrumb-item active">@ViewData["Title"]</li>
<li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
</ol>
<!-- Your main content goes below here: -->
<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="subheader">
<h1 class="subheader-title"> 電站分佈區域 </h1>
<div>
<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>
<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 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 class="card-body d-flex justify-content-between pb-0 px-2">
<h4 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 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">
<div class="row mb-5">
此處放台北市數據
</div>
</div>
<div class="tab-pane fade" id="tab-hsinchu" role="tabpanel" aria-labelledby="tab-hsinchu">
<div class="row mb-5">
此處放新竹市數據
</div>
</div>
<div class="tab-pane fade" id="tab-miaoli" role="tabpanel" aria-labelledby="tab-miaoli">
<div class="row mb-5">
此處放苗栗縣數據
</div>
</div>
<div class="tab-pane fade" id="tab-taichung" role="tabpanel" aria-labelledby="tab-taichung">
<div class="row mb-5">
此處放台中市數據
</div>
</div>-->
</div>
</div>
</div>
</div>
</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 id="solarCount" 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-end">
<div class="col-6 text-right">
<a href="javascript:TableDisplay();" class="btn btn-secondary btn-icon waves-effect waves-themed mr-1" style="width: 47px;"><span class="fal fa-list fa-2x mt-2"></span></a>
<a href="javascript:CardDisplay();" class="btn btn-secondary btn-icon waves-effect waves-themed mr-1" style="width: 47px;"><span class="fal fa-grip-horizontal fa-2x mt-2"></span></a>
</div>
</div>*@
<div class="row solarCard" id="solarCard">
</div>
<div class="TableArea">
<table id="solarTable" class="table table-bordered table-hover m-0 text-center">
<thead class="thead-themed">
<tr>
<th>編號</th>
<th>電站名稱</th>
<th>裝置容量(kWp)</th>
<th>逆變器數量</th>
<th>台電掛表日</th>
<th>功能</th>
</tr>
</thead>
<tbody>
@*<tr>
<th scope="row">PEP-NTP001-PYR-01</th>
<td>日照計01</td>
<td>日照計</td>
<td>ADTEK</td>
<td>CS1</td>
<td></td>
<td>CS1</td>
<td></td>
<td></td>
<td>
<button type="button" class="btn btn-primary btn-pills waves-effect waves-themed">修改</button>
</td>
</tr>*@
</tbody>
</table>
</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 id="Solarimg" 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>裝置容量(kWp)</p>
<p><span id="generating_capacity" class="color-primary-400">185</span> kWh</p>
</div>
<div class=" d-flex justify-content-between">
<p>逆變器數量</p>
<p><span id="inverter_amount" class="color-primary-400">2,5840</span></p>
</div>
<div class=" d-flex justify-content-between">
<p>台電掛表日</p>
<p><span id="electricity_meter_at" class="color-primary-400">90</span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
@section Scripts{
<script>
var tablocation = "";
var ids = new Array(0);
var localurl = this.location.href;
$(function () {
Cityes();
$('.nav-tabs a[href="#tab-newtaipei"]').tab('show');
TableDisplay();
});
function Cityes() {
var url = "/PowerStation/GetSolarCitySummary";
$.post(url, function (rel) {
if (rel.code != "0000") {
toast_error(rel.msg);
return;
}
else {
$('#areaTab').empty();
$.each(rel.data, function (index, val) {
//電站區域
if (index == 0) {
tablocation = val.cityId;
}
ids.push(val.cityId);
$('#templateAreaTab').find('li').attr('id', 'AreaTab' + val.cityId).clone().appendTo($('#areaTab'));
$('#AreaTab' + val.cityId).find('a').attr('href', '#tab-' + val.cityId);
$('#AreaTab' + val.cityId).find('a').attr('class', 'nav-link fs-lg px-4');
$('#AreaTab' + val.cityId).find('#areaName').html(val.city)
$('#AreaTab' + val.cityId).find('#solarCount').html(val.amount)
//alert(val.cityId+val.city + val.amount);
//電站區域內容
$('#templateArea').find('.tab-pane').attr('id', 'tab-' + val.cityId).clone().appendTo($('#area'));
$('#tab-' + val.cityId).attr('aria-labelledby', val.cityId)
$('#tab-' + val.cityId).find('#solarCard').attr('id', 'solarCard' + val.cityId);
$('#tab-' + val.cityId).find('#solarTable').attr('id', 'solarTable' + val.cityId);
});
addPowerStationCard(ids);
$("#areaTab").find(".nav-item > a").first().click();
return;
}
}, 'json');
}
function addPowerStationCard(idsd) {
//alert(ids);
var url = "/PowerStation/GetSolarByCity";
var send_data = {
cityid: idsd
}
$.post(url, send_data, function (rel) {
if (rel.code != "0000") {
toast_error(rel.msg);
return;
}
else {
$.each(rel.data, function (index, val) {
$('#solarTable' + val.cityId).find('tbody').empty();
});
$.each(rel.data, function (index, val) {
//電站卡片
$('#templateCard').find('.col-xl-2').attr('id', 'card' + val.id).clone().appendTo($('#solarCard' + val.cityId));
$('#card' + val.id).find('#editSolarUrl').attr('href', localurl + '/edit?stationId=' + val.id);
$('#card' + val.id).find('#editSolarUrl').find('#Solarimg').attr('src', val.mainDisplay);
$('#card' + val.id).find('#editSolarUrl').find('#Solarimg').attr('style', "width: 100%;height: 138px;");
$('#card' + val.id).find('#solarName').text(val.name);
$('#card' + val.id).find('#generating_capacity').text(val.generatingCapacity);
$('#card' + val.id).find('#inverter_amount').text(val.inverterAmount);
$('#card' + val.id).find('#electricity_meter_at').text(val.electricityMeterAt);
$('#solarTable' + val.cityId).find('tbody').append('<tr data-id="' + val.id + '" datacity-id="' + val.cityId+'"">' +
'<td>' + val.id + '</td>' +
'<td>' + val.name + '</td>' +
'<td>' + val.generatingCapacity.toFixed(2) + '</td>' +
'<td>' + val.inverterAmount + '</td>' +
'<td>' + val.electricityMeterAt + '</td>' +
'<td> <button type="button" class="btn btn-primary btn-pills waves-effect waves-themed" onclick="location.href=\'' + localurl + '/edit?stationId=' + val.id + '\'">選擇</button> <button type="button" class="btn btn-danger btn-pills waves-effect waves-themed del-btnto">刪除</button></td>' +
'</tr>');
});
$('.nav-tabs a[href="#' + tablocation + '"]').tab('show');
return;
}
}, 'json');
}
function CardDisplay() {
$('.TableArea').hide();
$('.solarCard').show();
}
$(document).on("click", "button.del-btnto", function () {
var selected_id = $(this).parents('tr').attr('data-id');
var selected_cityid = $(this).parents('tr').attr('datacity-id');
Swal.fire(
{
title: "刪除",
text: "你確定是否刪除此筆資料?",
icon: 'warning',
showCancelButton: true,
confirmButtonText: "是",
cancelButtonText: "否"
}).then(function (result) {
if (result.value) {
//刪除單一運維紀錄
var url = "/PowerStation/DeletePowerStation/";
var send_data = {
stationId: selected_id
}
$.post(url, send_data, function (rel) {
if (rel.code == "9999") {
toast_error(rel.msg);
return;
}
toast_ok(rel.msg);
var cityamount = $('#ul-List-' + selected_cityid).text();
$('#ul-List-' + selected_cityid).text(cityamount - 1);
$('#li-List-' + selected_id).hide();
Cityes();
}, 'json');
}
});
});
function TableDisplay() {
$('.TableArea').show();
$('.solarCard').hide();
}
</script>
}