291 lines
12 KiB
Plaintext
291 lines
12 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 col-xl-12">
|
|
<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">
|
|
<div class="d-flex justify-content-between">
|
|
<p>總發電量</p>
|
|
<p><span class="color-info-700 fs-xl font-weight-bold" id="today_kwh">126,161.72</span> kWh</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">4,069.73</span> kWh</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-dollar-sign mr-1"></span> 日照度</h4>
|
|
</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">126,161.72</span> kW/m<sup>2</sup></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">4,069.73</span> kW/m<sup>2</sup></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>
|
|
<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">119.04</span> hr</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">3.84</span> hr</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> kWh / kWp</h4>
|
|
</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">140.39</span> kW/m2</p>
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<p>平均 kWh / kWp (30天)</p>
|
|
<p><span class="color-info-700 fs-xl font-weight-bold" id="avg_kwhkwp">4.53</span> kW/m2</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>
|
|
<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">6,091.78</span> KG</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">985.98</span> KG</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">52</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">1288.63</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>裝置容量 MWp</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);
|
|
$("#total_kwh").html(mapOverview.total_kwh);
|
|
$("#today_irradiance").html(mapOverview.today_irradiance);
|
|
$("#avg_irradiance").html(mapOverview.avg_irradiance);
|
|
$("#today_PR").html(mapOverview.today_PR);
|
|
$("#avg_PR").html(mapOverview.avg_PR);
|
|
$("#today_kwhkwp").html(mapOverview.today_kwhkwp);
|
|
$("#avg_kwhkwp").html(mapOverview.avg_kwhkwp);
|
|
$("#today_carbon").html(mapOverview.today_carbon);
|
|
$("#total_power_station_count").html(mapOverview.totalPowerStationCount);
|
|
$("#total_capacity").html(mapOverview.totalCapacity);
|
|
$("#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) {
|
|
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({ lat: parseFloat(split[0]), lng: parseFloat(split[1]) })
|
|
}
|
|
});
|
|
|
|
const map = new google.maps.Map(document.getElementById("map"), {
|
|
zoom: 7,
|
|
center: { lat: 23.5, lng: 123 },
|
|
});
|
|
// Create an array of alphabetical characters used to label the markers.
|
|
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
|
// 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) => {
|
|
return new google.maps.Marker({
|
|
position: location,
|
|
label: labels[i % labels.length],
|
|
map: map
|
|
});
|
|
});
|
|
// Add a marker clusterer to manage the markers.
|
|
new MarkerClusterer(map, markers, {
|
|
imagePath:
|
|
"https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
|
|
});
|
|
}
|
|
</script>
|
|
}
|