347 lines
15 KiB
Plaintext
347 lines
15 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>今日有效日照時數(kwh/kwp)</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"
|
||
}],
|
||
"columnDefs": [{
|
||
'targets': 2,
|
||
'searchable': false,
|
||
'orderable': false,
|
||
'createdCell': function (td, cellData, rowData, row, col) {
|
||
@*$(td).append('<div class="row"></div>');*@
|
||
cellData = cellData.toFixed(3);
|
||
$(td).html(cellData);
|
||
}
|
||
}],
|
||
"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(3));
|
||
$("#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 + '" target="_blank">' +
|
||
item.name +
|
||
'</a>' +
|
||
'</h1>' +
|
||
'<div id="bodyContent">' +
|
||
'<div class="row">' +
|
||
'<div class="col-12">' +
|
||
'<div>今日發電量(kW h)：' + item.today_kWh + '</div>'+
|
||
'<div>即時日照度(k W/m<sup>2</sup>)：' + item.today_irradiance + '</div>'+
|
||
'<div>有效日照時數(kwh/kwp)：' + item.today_kwhkwp.toFixed(2) + '</div>' +
|
||
'<div>裝置容量(kWp)：' + item.generatingCapacity.toFixed(3) + '</div>' +
|
||
'<div>掛錶日期：' + item.electricityMeterAt + '</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>
|
||
}
|