437 lines
20 KiB
Plaintext
437 lines
20 KiB
Plaintext
@{
|
|
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-monitor-heart-rate 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-info-square 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-history 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-analytics 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-sensor-alert 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-digital-tachograph 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;
|
|
var stationOverview;
|
|
|
|
$(function () {
|
|
var url = new URL(location.href);
|
|
stationId = url.searchParams.get('stationId');
|
|
|
|
//#region 即時資訊tab
|
|
var url = "/StationOverview/GetOneStationUpToDateInfo";
|
|
var send_data = {
|
|
ids: [stationId]
|
|
};
|
|
$.post(url, send_data, function (rel) {
|
|
if (rel.code != "0000") {
|
|
toast_error(rel.msg);
|
|
return;
|
|
}
|
|
|
|
stationOverview = rel.data;
|
|
$("#today_kwh").html(stationOverview.today_kwh);
|
|
$("#total_kwh").html(stationOverview.total_kwh);
|
|
$("#today_irradiance").html(stationOverview.today_irradiance);
|
|
$("#avg_irradiance").html(stationOverview.avg_irradiance);
|
|
$("#today_PR").html(stationOverview.today_PR);
|
|
$("#avg_PR").html(stationOverview.avg_PR);
|
|
$("#today_kwhkwp").html(stationOverview.today_kwhkwp);
|
|
$("#avg_kwhkwp").html(stationOverview.avg_kwhkwp);
|
|
$("#total_money").html(stationOverview.total_money);
|
|
$("#today_money").html(stationOverview.today_money);
|
|
$("#today_carbon").html(stationOverview.today_carbon);
|
|
$("#total_carbon").html(stationOverview.total_carbon);
|
|
$("#update_at").html(stationOverview.updatedAt);
|
|
|
|
if (stationOverview.isShowMoney == 1) {
|
|
$(".money-card").show();
|
|
$(".irradiance-card").hide();
|
|
} else {
|
|
$(".money-card").hide();
|
|
$(".irradiance-card").show();
|
|
}
|
|
|
|
}, 'json');
|
|
|
|
//#region 載入上傳資料 - 電站圖片
|
|
var url_image = "/PowerStation/GetAllPowerStationImage";
|
|
var send_data = {
|
|
powerStationId: stationId
|
|
};
|
|
|
|
$.post(url_image, send_data, function (rel) {
|
|
if (rel.code != "0000") {
|
|
toast_error(rel.msg);
|
|
return;
|
|
}
|
|
|
|
carouselExampleIndicators = $("#carouselExampleIndicators");
|
|
carouselExampleIndicators.find(".carousel-indicators").empty();
|
|
carouselExampleIndicators.find(".carousel-inner").empty();
|
|
rel.data.forEach(function (value, index) {
|
|
CreatePowerStationImagecarousel(carouselExampleIndicators, value, index);
|
|
});
|
|
|
|
carouselExampleIndicators.find(".carousel-indicators > li").first().addClass("active");
|
|
carouselExampleIndicators.find(".carousel-inner > .carousel-item").first().addClass("active");
|
|
|
|
}, 'json');
|
|
//#endregion
|
|
|
|
|
|
//#endregion
|
|
|
|
//#region 基本資料tab
|
|
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);
|
|
|
|
//#region 電站基本資料
|
|
SetStationInfo();
|
|
//#endregion
|
|
|
|
//#region 能源局與台電資料
|
|
SetBoETPCInfo();
|
|
//#endregion
|
|
|
|
//#region 土地與房屋資料
|
|
SetLandBuildingInfo();
|
|
//#endregion
|
|
|
|
}, 'json');
|
|
|
|
//#region 載入上傳資料 - 單線圖
|
|
var url_image = "/PowerStation/GetAllPowerStationSingleLine";
|
|
var send_data = {
|
|
powerStationId: stationId
|
|
};
|
|
|
|
$.post(url_image, send_data, function (rel) {
|
|
if (rel.code != "0000") {
|
|
toast_error(rel.msg);
|
|
return;
|
|
}
|
|
|
|
var powerStationSingleLines = rel.data;
|
|
|
|
countPowerStationSingleLine = powerStationSingleLines.length;
|
|
|
|
powerStationSingleLineCard = $("#power-station-single-line-card > .row");
|
|
powerStationSingleLineCard.empty();
|
|
rel.data.forEach(function (value, index) {
|
|
CreatePowerStationSingleLineBox(powerStationSingleLineCard, value);
|
|
});
|
|
|
|
|
|
|
|
}, 'json');
|
|
//#endregion
|
|
|
|
//#region 預先載入運維人員下拉式選單select_option
|
|
var url_user_select_option = "/PowerStation/GetUserSelectOptionList";
|
|
$.get(url_user_select_option, function (rel) {
|
|
if (rel.code != "0000") {
|
|
toast_error(rel.msg);
|
|
return;
|
|
}
|
|
|
|
$("#power_station_operation_personnel").empty();
|
|
|
|
$.each(rel.data, function (index, val) {
|
|
$("#power_station_operation_personnel").append($("<option />").val(val.value).text(val.text));
|
|
});
|
|
|
|
if (powerStationData) {
|
|
$("#power_station_operation_personnel").val(powerStationData.operationPersonnelIds);
|
|
}
|
|
});
|
|
|
|
$('.js-example-basic-multiple').select2();
|
|
//#endregion
|
|
//#endregion
|
|
})
|
|
|
|
//#region 設定電站基本資料
|
|
function SetStationInfo() {
|
|
|
|
$("#select_solar_tpye").val(powerStationData.solarType);
|
|
$("#select_solar_tpye").attr("disabled", true);
|
|
|
|
//#region 電站基本資料 文字
|
|
$("#city_name_text").html(powerStationData.cityName);
|
|
$("#area_name_text").html(powerStationData.areaName);
|
|
$("#address_detail_text").html(powerStationData.address);
|
|
$("#power_station_code_text").html(powerStationData.code);
|
|
$("#power_station_name_text").html(powerStationData.name);
|
|
$("#electricity_meter_at_text").html(powerStationData.electricityMeterAt);
|
|
$("#estimated_recovery_time_text").html(powerStationData.estimatedRecoveryTime);
|
|
$("#created_by_text").html(powerStationData.creatorName);
|
|
|
|
$("#generating_capacity_text").html(powerStationData.generatingCapacity);
|
|
$("#escrow_name_text").html(powerStationData.escrowName);
|
|
$("#power_rate_text").html(powerStationData.powerRate);
|
|
$("#coordinate_text").html(powerStationData.coordinate);
|
|
$("#created_at_text").html(powerStationData.createdAt);
|
|
$("#power_station_operation_personnel").val(powerStationData.operationPersonnelIds).trigger("change");
|
|
$("#power_station_operation_personnel").attr("disabled", true);
|
|
|
|
//光電板
|
|
$("#photovoltaic_panel_brand_text").html(powerStationData.photovoltaicPanelBrand);
|
|
$("#photovoltaic_panel_product_model_text").html(powerStationData.photovoltaicPanelProductModel);
|
|
$("#photovoltaic_panel_specification_text").html(powerStationData.photovoltaicPanelSpecification);
|
|
$("#photovoltaic_panel_amount_text").html(powerStationData.photovoltaicPanelAmount);
|
|
//#endregion
|
|
|
|
//#region 電站基本資料 input
|
|
$("#check_escrow").attr("checked", powerStationData.isEscrow == 1 ? true : false);
|
|
$("#check_escrow_label").html(powerStationData.isEscrow == 1 ? "Yes" : "No");
|
|
//#endregion
|
|
}
|
|
//#endregion
|
|
|
|
//#region 設定能源局與台電資料
|
|
function SetBoETPCInfo() {
|
|
$("#link-boe-file").html(powerStationData.boEFileName).attr("href", powerStationData.boEFile);
|
|
$("#BoE_discount_rate_text").html(powerStationData.boEDiscountRate);
|
|
$("#BoE_device_register_number_text").html(powerStationData.boEDeviceRegisterNumber);
|
|
$("#BoE_rent_ratio_text").html(powerStationData.boERentRatio);
|
|
|
|
$("#TPC_contract_number_text").html(powerStationData.tpcContractNumber);
|
|
$("#TPC_contract_at_text").html(powerStationData.tpcContractAt);
|
|
$("#TPC_sell_deadline_text").html(powerStationData.tpcSellDeadline);
|
|
$("#TPC_meter_reading_text").html(powerStationData.tpcMeterReading);
|
|
$("#TPC_purchase_electricity_at_text").html(powerStationData.tpcPurchaseElectricityAt);
|
|
$("#TPC_sell_electricity_at_text").html(powerStationData.tpcSellElectricityAt);
|
|
$("#BOE_TPC_created_by_text").html(powerStationData.creatorName);
|
|
$("#BOE_TPC_created_at_text").html(powerStationData.createdAt);
|
|
}
|
|
//#endregion
|
|
|
|
//#region 設定土地與房屋資料
|
|
function SetLandBuildingInfo() {
|
|
var landBuildingCard = $("#land_buildingPart");
|
|
|
|
landBuildingCard.empty();
|
|
powerStationData.landBuildings.forEach(function (value, index) {
|
|
CreateLandBuildingCard(landBuildingCard, value);
|
|
});
|
|
}
|
|
//#endregion
|
|
|
|
//#region 創建每份土地房屋資訊卡片
|
|
function CreateLandBuildingCard(dom, value) {
|
|
|
|
//資料重整
|
|
value.address = value.address ? value.address : '';
|
|
value.coordinate = value.coordinate ? value.coordinate : '';
|
|
value.leaseNotarizationAt = value.leaseNotarizationAt ? value.leaseNotarizationAt : '';
|
|
value.leaseRate = value.leaseRate ? value.leaseRate : 0;
|
|
value.landowner = value.landowner ? value.landowner : '';
|
|
value.phone = value.phone ? value.phone : '';
|
|
value.purpose = value.purpose ? value.purpose : '';
|
|
|
|
var appendStr = "";
|
|
appendStr += '<div class="card border mb-g w-100" data-land-building-id="' + value.id + '">' +
|
|
'<div class="card-header bg-fusion-50 pr-3 d-flex align-items-center flex-wrap justify-content-between">' +
|
|
'<div class="card-title font-weight-bold">土地房屋資料</div>' +
|
|
'</div>';
|
|
|
|
appendStr += '<div class="card-body">' +
|
|
'<div class="row d-flex justify-content-between card-land-building" data-id="' + value.id + '">' +
|
|
'<div class="col-xl">' +
|
|
'<div class="row mb-3">' +
|
|
'<label class="col-xl-4 form-label">地址</label>' +
|
|
'<div class="col-xl-8">' +
|
|
'<label id="land_building_address_text_' + value.id + '" class="color-info-600">' + value.address + '</label>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="row">' +
|
|
'<label class="col-xl-4 form-label">經緯度</label>' +
|
|
'<div class="col-xl-8">' +
|
|
'<label id="land_building_coordinate_text_' + value.id + '" class="color-info-600">' + value.coordinate + '</label>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="col-xl">' +
|
|
'<div class="row mb-3">' +
|
|
'<label class="col-xl-4 form-label">租約公證日期</label>' +
|
|
'<div class="col-xl-8">' +
|
|
'<label id="lease_notarization_at_text_' + value.id + '" class="color-info-600">' + value.leaseNotarizationAt + '</label>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="row">' +
|
|
'<label class="col-xl-4 form-label">租金比例 (%)</label>' +
|
|
'<div class="col-xl-8">' +
|
|
'<label id="land_building_lease_Rate_text_' + value.id + '" class="color-info-600">' + value.leaseRate + '</label>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="col-xl">' +
|
|
'<div class="row mb-3">' +
|
|
'<label class="col-xl-4 form-label">地主姓名</label>' +
|
|
'<div class="col-xl-8">' +
|
|
'<label id="land_building_landowner_text_' + value.id + '" class="color-info-600">' + value.landowner + '</label>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="row">' +
|
|
'<label class="col-xl-4 form-label">電話</label>' +
|
|
'<div class="col-xl-8">' +
|
|
'<label id="land_building_phone_text_' + value.id + '" class="color-info-600">' + value.phone + '</label>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="col-xl">' +
|
|
'<div class="row mb-3">' +
|
|
'<label class="col-xl-4 form-label">房屋用途</label>' +
|
|
'<div class="col-xl-8">' +
|
|
'<label id="land_building_purpose_text_' + value.id + '" class="color-info-600">' + value.purpose + '</label>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="col-xl">' +
|
|
'<div class="row mb-3">' +
|
|
'<label class="col-xl-4 form-label">資料建立</label>' +
|
|
'<div class="col-xl-8">' +
|
|
'<label id="land_building_created_by_text_' + value.id + '" class="color-info-600">' + value.creatorName + '</label>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="row">' +
|
|
'<label class="col-xl-4 form-label">建立時間</label>' +
|
|
'<div class="col-xl-8">' +
|
|
'<label id="land_building_created_at_text_' + value.id + '" class="color-info-600">' + value.createdAt + '</label>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>';
|
|
|
|
dom.append(appendStr);
|
|
}
|
|
//#endregion
|
|
|
|
//#region 創建單線圖box
|
|
function CreatePowerStationSingleLineBox(dom, value) {
|
|
var str = '<div class="col-xl" style="max-width: 20%;">' +
|
|
'<div class="card border m-auto m-lg-0" style="padding: 9.5px;">' +
|
|
'<img src="' + value.image + '" class="card-img-top img-zoom" alt="...">' +
|
|
'</div>' +
|
|
'</div>';
|
|
|
|
dom.append(str);
|
|
}
|
|
//#endregion
|
|
|
|
//#region 創建電站圖片box
|
|
function CreatePowerStationImagecarousel(dom, value, index) {
|
|
var indicators = '<li data-target="#carouselExampleIndicators" data-slide-to="' + index + '"></li>'
|
|
var carousel_item = '<div class="carousel-item">' +
|
|
'<img class="d-block w-100" src="' + value.image + '">' +
|
|
'</div>'
|
|
|
|
dom.find(".carousel-indicators").append(indicators);
|
|
dom.find(".carousel-inner").append(carousel_item);
|
|
}
|
|
//#endregion
|
|
</script>
|
|
} |