336 lines
14 KiB
Plaintext
336 lines
14 KiB
Plaintext
@{
|
|
ViewData["MainNum"] = "1";
|
|
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">地圖總覽</li>
|
|
<li class="position-absolute pos-top pos-right d-none d-sm-block">最後更新時間 <span id="update_at"></span></li>
|
|
</ol>
|
|
|
|
<!-- Your main content goes below here: -->
|
|
|
|
<div class="row mb-5">
|
|
<div class="card-columns">
|
|
<div class="card">
|
|
<div class="card-header bg-fusion-25 py-2 pr-3 d-flex align-items-center flex-wrap">
|
|
<h4 class="mb-0 font-weight-bold"><span class="fal fa-bolt mr-1"></span> 發電量</h4>
|
|
<div class="ml-auto">kW h</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between">
|
|
<p>即時總發電量</p>
|
|
<p><span class="color-info-700 fs-xl font-weight-bold" id="today_kwh">0.00</span></p>
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<p>累積發電量</p>
|
|
<p><span class="color-info-700 fs-xl font-weight-bold" id="total_kwh">0.00</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header bg-fusion-25 py-2 pr-3 d-flex align-items-center flex-wrap">
|
|
<h4 class="mb-0 font-weight-bold"><span class="fal fa-sun mr-1"></span> 日照度</h4>
|
|
<div class="ml-auto">k W/m<sup>2</sup></div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between">
|
|
<p>即時平均日照度</p>
|
|
<p><span class="color-info-700 fs-xl font-weight-bold" id="today_irradiance">0.00</span></p>
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<p>平均日照度(30天)</p>
|
|
<p><span class="color-info-700 fs-xl font-weight-bold" id="avg_irradiance">0.00</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header bg-fusion-25 py-2 pr-3 d-flex align-items-center flex-wrap">
|
|
<h4 class="mb-0 font-weight-bold"><span class="fal fa-bolt mr-1"></span> PR值</h4>
|
|
<div class="ml-auto">%</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between">
|
|
<p>即時平均 PR 值</p>
|
|
<p><span class="color-info-700 fs-xl font-weight-bold" id="today_PR">0.00</span></p>
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<p>平均 PR 值(30天)</p>
|
|
<p><span class="color-info-700 fs-xl font-weight-bold" id="avg_PR">0.00</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header bg-fusion-25 py-2 pr-3 d-flex align-items-center flex-wrap">
|
|
<h4 class="mb-0 font-weight-bold"><span class="fal fa-sun mr-1"></span>有效日照時數</h4>
|
|
<div class="ml-auto">hr</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between">
|
|
<p>即時平均有效日照時數</p>
|
|
<p><span class="color-info-700 fs-xl font-weight-bold" id="today_kwhkwp">0.00</span></p>
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<p>平均有效日照時數 (30天)</p>
|
|
<p><span class="color-info-700 fs-xl font-weight-bold" id="avg_kwhkwp">0.00</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header bg-fusion-25 py-2 pr-3 d-flex align-items-center flex-wrap">
|
|
<h4 class="mb-0 font-weight-bold"><span class="fal fa-cow mr-1"></span> 減碳量</h4>
|
|
<div class="ml-auto">kG</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between">
|
|
<p>今日減碳量</p>
|
|
<p><span class="color-info-700 fs-xl font-weight-bold" id="today_carbon">0.00</span></p>
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<p>總減碳量</p>
|
|
<p><span class="color-info-700 fs-xl font-weight-bold" id="total_carbon">0.00</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-auto" style="width: 60%;">
|
|
<div id="panel-1" class="panel">
|
|
<div class="panel-hdr">
|
|
<h2>電站分佈圖</h2>
|
|
</div>
|
|
<div class="panel-container show">
|
|
<div class="panel-content">
|
|
<div class="map-respondive">
|
|
<div id="map" style="width: 100%; height:450px"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto" style="width: 40%;">
|
|
<div class="row">
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-header bg-fusion-25 py-2 pr-3 d-flex align-items-center flex-wrap">
|
|
<h4 class="mb-0 font-weight-bold"><span class="fal fa-bolt mr-1"></span> 電站總數</h4>
|
|
</div>
|
|
<div class="card-body" style="min-height: 148px;">
|
|
<p class="text-center display-3"><span class="color-info-700 font-weight-bold" id="total_power_station_count">0</span></p>
|
|
<p class="text-right mb-0">廠</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-header bg-fusion-25 py-2 pr-3 d-flex align-items-center flex-wrap">
|
|
<h4 class="mb-0 font-weight-bold"><span class="fal fa-bolt mr-1"></span> 總裝置容量</h4>
|
|
</div>
|
|
<div class="card-body" style="min-height: 148px;">
|
|
<p class="text-center display-3"><span class="color-info-700 font-weight-bold" id="total_capacity">0.00</span></p>
|
|
<p class="text-right mb-0">MWp</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-12 mt-4">
|
|
<div id="panel-1" class="panel">
|
|
<div class="panel-hdr">
|
|
<h2>電站分佈小計</h2>
|
|
</div>
|
|
<div class="panel-container show">
|
|
<div class="panel-content">
|
|
<table id="capacity-Table" class="table text-center m-0">
|
|
<thead class="thead-themed">
|
|
<tr>
|
|
<th>縣市</th>
|
|
<th>電站數量</th>
|
|
<th>電廠裝置容量 kWp</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xl-12">
|
|
<div id="map" style="width: 100%; height:60vh"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@section Scripts{
|
|
|
|
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
|
|
<script src="https://unpkg.com/@@googlemaps/markerclustererplus/dist/index.min.js"></script>
|
|
|
|
<script>
|
|
var capacityTable;
|
|
var mapOverview;
|
|
var locations = [];
|
|
|
|
|
|
$(function () {
|
|
//#region 公司管理列表 DataTable
|
|
capacityTable = $("#capacity-Table").DataTable({
|
|
"paging": true,
|
|
"lengthChange": false,
|
|
"searching": false,
|
|
"ordering": false,
|
|
"info": true,
|
|
"autoWidth": false,
|
|
"responsive": true,
|
|
"columns": [{
|
|
"data": "cityName"
|
|
}, {
|
|
"data": "subPowerStationCount"
|
|
}, {
|
|
"data": "subTotalCapacity"
|
|
}],
|
|
"language": {
|
|
"emptyTable": "查無資料",
|
|
"processing": "處理中...",
|
|
"loadingRecords": "載入中...",
|
|
"lengthMenu": "顯示 _MENU_ 項結果",
|
|
"zeroRecords": "沒有符合的結果",
|
|
"info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
|
|
"infoEmpty": "顯示第 0 至 0 項結果，共 0 項",
|
|
"infoFiltered": "(從 _MAX_ 項結果中過濾)",
|
|
"infoPostFix": "",
|
|
"search": "搜尋:",
|
|
"paginate": {
|
|
"first": "第一頁",
|
|
"previous": "上一頁",
|
|
"next": "下一頁",
|
|
"last": "最後一頁"
|
|
},
|
|
"aria": {
|
|
"sortAscending": ": 升冪排列",
|
|
"sortDescending": ": 降冪排列"
|
|
}
|
|
},
|
|
"data": []
|
|
});
|
|
//#endregion
|
|
|
|
var url = "/MapOverview/GetMapOverview";
|
|
$.post(url, null, function (rel) {
|
|
if (rel.code != "0000") {
|
|
toast_error(rel.msg);
|
|
return;
|
|
}
|
|
|
|
mapOverview = rel.data;
|
|
|
|
$("#today_kwh").html(mapOverview.today_kwh.toFixed(2));
|
|
$("#total_kwh").html(mapOverview.total_kwh.toFixed(2));
|
|
$("#today_irradiance").html(mapOverview.today_irradiance.toFixed(2));
|
|
$("#avg_irradiance").html(mapOverview.avg_irradiance.toFixed(2));
|
|
$("#today_PR").html(mapOverview.today_PR.toFixed(2));
|
|
$("#avg_PR").html(mapOverview.avg_PR.toFixed(2));
|
|
$("#today_kwhkwp").html(mapOverview.today_kwhkwp.toFixed(2));
|
|
$("#avg_kwhkwp").html(mapOverview.avg_kwhkwp.toFixed(2));
|
|
$("#today_carbon").html(mapOverview.today_carbon.toFixed(2));
|
|
$("#total_carbon").html(mapOverview.total_carbon.toFixed(2));
|
|
$("#total_power_station_count").html(mapOverview.totalPowerStationCount);
|
|
$("#total_capacity").html(mapOverview.totalCapacity.toFixed(2));
|
|
$("#update_at").html(mapOverview.updatedAt);
|
|
|
|
capacityTable.clear().rows.add(mapOverview.capacityDataTables).draw();
|
|
|
|
//#region google map
|
|
initMap();
|
|
//#endregion
|
|
});
|
|
});
|
|
|
|
function initMap() {
|
|
|
|
|
|
mapOverview.powerStations.forEach(function (item, index) {
|
|
var contentString = '<div id="content">' +
|
|
'<div id="siteNotice"></div>' +
|
|
'<h1 id="firstHeading" class="firstHeading">' +
|
|
'<a href="StationOverview/Info?stationId=' + item.id + '">' +
|
|
item.name +
|
|
'</a>' +
|
|
'</h1>' +
|
|
'<div id="bodyContent">' +
|
|
'<div class="row">' +
|
|
'<div class="col-12">' +
|
|
'<div>即時總發電量：' + item.today_kWh + '</div>'+
|
|
'<div>即時平均日照度：' + item.today_irradiance + '</div>'+
|
|
'<div>發電小時：' + item.solarHour + '</div>' +
|
|
'<div>裝置容量：' + item.generatingCapacity + '</div>' +
|
|
'<div>天氣：' + item.wx + '</div>'+
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>';
|
|
|
|
if (item.coordinate != null) {
|
|
var split = item.coordinate.split(',');
|
|
if (split[0] == undefined || split[0] == null) {
|
|
split[0] = 23
|
|
}
|
|
|
|
if (split[1] == undefined || split[1] == null) {
|
|
split[1] = 122
|
|
}
|
|
|
|
locations.push([item.name, contentString, split[0], split[1]]); //format:[標籤名、infoWindow、緯度、經度]
|
|
}
|
|
});
|
|
|
|
const map = new google.maps.Map(document.getElementById("map"), {
|
|
zoom: 7,
|
|
center: { lat: 23.5, lng: 123 },
|
|
});
|
|
|
|
var infowindow = new google.maps.InfoWindow();
|
|
// Create an array of alphabetical characters used to label the markers.
|
|
// Add some markers to the map.
|
|
// Note: The code uses the JavaScript Array.prototype.map() method to
|
|
// create an array of markers based on a given "locations" array.
|
|
// The map() method here has nothing to do with the Google Maps API.
|
|
const markers = locations.map((location, i) => {
|
|
marker = new google.maps.Marker({
|
|
position: new google.maps.LatLng(location[2], location[3]),
|
|
@*label: location[0],*@
|
|
map: map
|
|
});
|
|
|
|
google.maps.event.addListener(marker, 'click', (function (marker, i) {
|
|
return function () {
|
|
infowindow.setContent(location[1]);
|
|
|
|
google.maps.event.addListener(infowindow, 'domready', function () {
|
|
$(document).find('#content').parent().css('overflow-x', 'hidden');
|
|
|
|
});
|
|
|
|
infowindow.open(map, marker);
|
|
}
|
|
})(marker, i));
|
|
|
|
return marker;
|
|
});
|
|
// Add a marker clusterer to manage the markers.
|
|
new MarkerClusterer(map, markers, {
|
|
imagePath:
|
|
"https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
|
|
});
|
|
}
|
|
</script>
|
|
}
|