813 lines
27 KiB
HTML
813 lines
27 KiB
HTML
|
||
<!-- jquery -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/darkly/bootstrap.min.css" integrity="sha384-nNK9n28pDUDDgIiIqZ/MiyO3F4/9vsMtReZK39klb/MtkZI3/LtjSjlmyVPS3KdN" crossorigin="anonymous">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.10.0/dist/css/bootstrap-datepicker3.min.css">
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.10.0/dist/js/bootstrap-datepicker.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
|
||
<!-- font-awesome -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||
<!-- flatpickr -->
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
|
||
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/dark.css">
|
||
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
|
||
<script src="https://npmcdn.com/flatpickr@4.6.13/dist/l10n/zh-tw.js"></script>
|
||
<!-- chart.js -->
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<!-- apexcharts -->
|
||
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
||
<div class="container-fluid">
|
||
<div class="row px-2 py-3">
|
||
<div class="col-12 mb-3">
|
||
<div class="d-flex align-items-center">
|
||
<i class="fa fa-check-circle text-success fs-1-1 ml-3 " aria-hidden="true"></i>
|
||
<label id="curLevText" class="text-light fs-1 ml-2 mb-0"></label>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 ">
|
||
<ul class="nav nav-tabs w-100" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" data-toggle="tab" href="#tab_borders_icons-1"
|
||
role="tab"><i class="fa fa-file-o mr-1" aria-hidden="true"></i> 即時資訊</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" data-toggle="tab" href="#tab_borders_icons-2"
|
||
role="tab"><i class="fa fa-area-chart mr-1"></i> 基本資料</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" data-toggle="tab" href="#tab_borders_icons-3"
|
||
role="tab"><i class="fa fa-bar-chart mr-1"></i> 逆變器監控</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" data-toggle="tab" href="#tab_borders_icons-4"
|
||
role="tab"><i class="fa fa-line-chart mr-1"></i> 逆變器分析</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" data-toggle="tab" href="#tab_borders_icons-5"
|
||
role="tab"><i class="fa fa-list-alt mr-1"></i> 歷史資料</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" data-toggle="tab" href="#tab_borders_icons-6"
|
||
role="tab"><i class="fa fa-file-text mr-1"></i> 異常紀錄</a>
|
||
</li>
|
||
</ul>
|
||
<div class="tab-content border-0 shadow-lg w-100">
|
||
<div class="tab-pane fade show active" id="tab_borders_icons-1" role="tabpanel" data-id="realTimeInfo">
|
||
|
||
</div>
|
||
<div class="tab-pane fade" id="tab_borders_icons-2" role="tabpanel" data-id="basicInfo">
|
||
|
||
</div>
|
||
<div class="tab-pane fade" id="tab_borders_icons-3" role="tabpanel" data-id="invrMon">
|
||
|
||
</div>
|
||
<div class="tab-pane fade" id="tab_borders_icons-4" role="tabpanel" data-id="invrAnal">
|
||
<div class="row p-3">
|
||
<div class="col-auto">
|
||
<div class="btn-group">
|
||
<button
|
||
onclick="setInvrAnalDate('tdy')"
|
||
type="button"
|
||
class="btn btn-secondary waves-effect waves-themed"
|
||
>
|
||
今天
|
||
</button>
|
||
<button
|
||
onclick="setInvrAnalDate('ytd')"
|
||
type="button"
|
||
class="btn btn-secondary waves-effect waves-themed"
|
||
>
|
||
昨天
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="col-auto">
|
||
<div class="form-group">
|
||
<input
|
||
class="form-control"
|
||
id="invrAnalDate"
|
||
type="text"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="col-auto">
|
||
<a
|
||
href="#"
|
||
for="serial_number"
|
||
onclick="invrAnalSearch()"
|
||
class="btn btn-info"
|
||
>查詢</a>
|
||
</div>
|
||
<div class="col-12 border-bottom pb-4 mb-4">
|
||
<div id="heatMapChart"></div>
|
||
</div>
|
||
|
||
<div class="col-auto">
|
||
<div class="btn-group">
|
||
<button
|
||
onclick="invrPowerDate('tdy')"
|
||
type="button"
|
||
class="btn btn-secondary waves-effect waves-themed"
|
||
>日</button>
|
||
<button
|
||
onclick="invrPowerDate('month')"
|
||
type="button"
|
||
class="btn btn-secondary waves-effect waves-themed"
|
||
>月</button>
|
||
<button
|
||
onclick="invrPowerDate('quarter')"
|
||
type="button"
|
||
class="btn btn-secondary waves-effect waves-themed"
|
||
>季</button>
|
||
<button
|
||
onclick="invrPowerDate('year')"
|
||
type="button"
|
||
class="btn btn-secondary waves-effect waves-themed"
|
||
>年</button>
|
||
</div>
|
||
</div>
|
||
<div class="col-auto">
|
||
<div class="form-group">
|
||
<input
|
||
class="form-control"
|
||
id="invrPowerDate"
|
||
type="text"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="col-auto">
|
||
<div class="form-group" >
|
||
<select class="form-control" id="quarterSelectors" style="display: none;">
|
||
<option value="1">1-3 月</option>
|
||
<option value="2">4-6 月</option>
|
||
<option value="3">7-9 月</option>
|
||
<option value="4">10-12 月</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="col-auto">
|
||
<a
|
||
href="#"
|
||
for="serial_number"
|
||
onclick="invrPowerSearch()"
|
||
class="btn btn-info"
|
||
>查詢</a>
|
||
</div>
|
||
<div class="col-12 pt-5">
|
||
<canvas id="invrPowerChart" width="1000" height="350"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-pane fade" id="tab_borders_icons-5" role="tabpanel" data-id="HistData">
|
||
<div class="row p-3">
|
||
<div class="col-auto">
|
||
<div class="btn-group">
|
||
<button
|
||
onclick="setHistDateType('day')"
|
||
type="button"
|
||
class="btn btn-secondary waves-effect waves-themed"
|
||
>
|
||
日
|
||
</button>
|
||
<button
|
||
onclick="setHistDateType('month')"
|
||
type="button"
|
||
class="btn btn-secondary waves-effect waves-themed"
|
||
>
|
||
月
|
||
</button>
|
||
<button
|
||
onclick="setHistDateType('year')"
|
||
type="button"
|
||
class="btn btn-secondary waves-effect waves-themed"
|
||
>
|
||
年
|
||
</button>
|
||
<button
|
||
onclick="setHistDateType('all')"
|
||
type="button"
|
||
class="btn btn-secondary waves-effect waves-themed"
|
||
>
|
||
歷年
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="col-auto">
|
||
<div class="btn-group" id="histDateBtns">
|
||
</div>
|
||
</div>
|
||
<div class="col-auto">
|
||
<div class="form-group">
|
||
<input class="form-control"
|
||
id="histDateVal"
|
||
type="text"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="col-auto">
|
||
<a
|
||
href="#"
|
||
for="serial_number"
|
||
onclick="histSearch()"
|
||
class="btn btn-info"
|
||
>查詢</a>
|
||
</div>
|
||
<div class="col-12">
|
||
<table id="histSumTable"
|
||
class="table table-bordered table-striped text-center m-0 w-100">
|
||
</table>
|
||
</div>
|
||
<div class="col-12">
|
||
<!-- 發電量及累績日照量 -->
|
||
</div>
|
||
<div class="col-12">
|
||
<!-- 詳細資料table -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-pane fade" id="tab_borders_icons-6" role="tabpanel" data-id="abnRec">
|
||
6
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
var today = new Date();
|
||
var yesterday = new Date(today);
|
||
var siteId = sessionStorage.getItem('siteId');
|
||
yesterday.setDate(today.getDate() - 1);
|
||
|
||
|
||
$(function () {
|
||
initializePage();
|
||
changeTabs();
|
||
renderHeatmapChart();
|
||
renderPowerChart();
|
||
|
||
})
|
||
|
||
// 回上一頁
|
||
function goback() {
|
||
sessionStorage.removeItem('solar');
|
||
$("#app").load(`_solarEnergy.html`);
|
||
}
|
||
|
||
// 切換tabs
|
||
function changeTabs() {
|
||
var currentSiteId = sessionStorage.getItem('siteId');
|
||
// 加載第一個
|
||
$('#tab_borders_icons-1').html(`
|
||
<iframe id="solarIframe" src="/ord?file:^Solar/${currentSiteId}_Realtime.px"
|
||
width="100%"
|
||
height="800"
|
||
class="border-0">
|
||
</iframe>
|
||
`);
|
||
|
||
// 監聽切換事件
|
||
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
||
$('#tab_borders_icons-1').html("");
|
||
$('#tab_borders_icons-2').html("");
|
||
$('#tab_borders_icons-3').html("");
|
||
$('#tab_borders_icons-6').html("");
|
||
|
||
var targetTab = $(e.target).attr("href");
|
||
if (targetTab === "#tab_borders_icons-1") {
|
||
$('#tab_borders_icons-1').html(`
|
||
<iframe id="solarIframe" src="/ord?file:^Solar/${currentSiteId}_Realtime.px"
|
||
width="100%"
|
||
height="800"
|
||
class="border-0">
|
||
</iframe>
|
||
`);
|
||
} else if (targetTab === "#tab_borders_icons-2") {
|
||
$('#tab_borders_icons-2').html(`
|
||
<iframe id="solarIframe" src="/ord?file:^Solar/${currentSiteId}_Info.px"
|
||
width="100%"
|
||
height="800"
|
||
class="border-0">
|
||
</iframe>
|
||
`);
|
||
} else if (targetTab === "#tab_borders_icons-3") {
|
||
$('#tab_borders_icons-3').html(`
|
||
<iframe id="solarIframe" src="/ord?file:^Solar/${currentSiteId}_Inverter.px"
|
||
width="100%"
|
||
height="800"
|
||
class="border-0">
|
||
</iframe>
|
||
`);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 初始化畫面
|
||
function initializePage() {
|
||
const siteId = sessionStorage.getItem('siteId');
|
||
// 使用這些數據更新頁面
|
||
$("#curLevText").text(siteId);
|
||
}
|
||
|
||
// 設置日期按鈕功能
|
||
function setInvrAnalDate(type) {
|
||
const invrAnalDateInput = $('#invrAnalDate');
|
||
invrAnalDateInput.datepicker('destroy');
|
||
invrAnalDateInput.datepicker({
|
||
format: 'yyyy/mm/dd',
|
||
autoclose: true
|
||
});
|
||
|
||
if (type === 'tdy') {
|
||
invrAnalDateInput.datepicker('setDate', new Date()); // 設置為今天的日期
|
||
} else if (type === 'ytd') {
|
||
invrAnalDateInput.datepicker('setDate', yesterday); // 設置為昨天的日期
|
||
}
|
||
}
|
||
|
||
// 查詢熱圖
|
||
function invrAnalSearch() {
|
||
const invrAnalDate = $('#invrAnalDate').val();
|
||
|
||
// 假设 API 请求是一个 GET 请求，且返回的数据格式适用于直接渲染热图
|
||
fetch(`http://your-api-endpoint?date=${invrAnalDate}`)
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
// 调用渲染热图函数，传入从 API 返回的数据
|
||
renderHeatmapChart(data);
|
||
})
|
||
.catch(error => {
|
||
console.error('API请求失敗:', error);
|
||
}
|
||
);
|
||
|
||
}
|
||
|
||
// HeatmapChart
|
||
function generateData(count, yrange) {
|
||
var i = 0;
|
||
var series = [];
|
||
while (i < count) {
|
||
var x = (i + 1).toString();
|
||
var y =
|
||
Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
|
||
|
||
series.push({
|
||
x: x,
|
||
y: y
|
||
});
|
||
i++;
|
||
}
|
||
return series;
|
||
}
|
||
function getRandomValue() {
|
||
return parseFloat(Math.random().toFixed(16)); // 生成 0-1 之間的小數點後最多 16 位的隨機數值
|
||
}
|
||
function renderHeatmapChart(data) {
|
||
var options = {
|
||
title: {
|
||
text: '各逆變器當日日均發電度數',
|
||
},
|
||
chart: {
|
||
height: 500,
|
||
type: "heatmap",
|
||
foreColor: '#fff',
|
||
},
|
||
plotOptions: {
|
||
heatmap: {
|
||
shadeIntensity: 0.5, // 透明陰影效果
|
||
radius: 0,
|
||
useFillColorAsStroke: true, // 使用填充顏色作為邊框顏色
|
||
colorScale: {
|
||
ranges: [
|
||
{ from: 0, to: 0.1249999999999999, color: '#0000ff' },
|
||
{ from: 0.125, to: 0.2499999999999999, color: '#5541b5' },
|
||
{ from: 0.25, to: 0.3749999999999999, color: '#ab836b' },
|
||
{ from: 0.375, to: 0.4999999999999999, color: '#dba841' },
|
||
{ from: 0.5, to: 0.6249999999999999, color: '#eda42f' },
|
||
{ from: 0.625, to: 0.7499999999999999, color: '#f4621c' },
|
||
{ from: 0.75, to: 0.8749999999999999, color: '#f65017' },
|
||
{ from: 0.875, to: 1, color: '#fb2109' }
|
||
]},
|
||
min: 0,
|
||
max: 1
|
||
}
|
||
},
|
||
legend: {
|
||
show: true,
|
||
position: 'bottom',
|
||
horizontalAlign: 'center',
|
||
markers: {
|
||
shape:'circle',
|
||
fillColors: [
|
||
'#0000ff',
|
||
'#5541b5',
|
||
'#ab836b',
|
||
'#dba841',
|
||
'#eda42f',
|
||
'#f4621c',
|
||
'#f65017',
|
||
'#fb2109'
|
||
],
|
||
},
|
||
onItemClick: {
|
||
toggleDataSeries: true
|
||
},
|
||
onItemHover: {
|
||
highlightDataSeries: true
|
||
},
|
||
},
|
||
dataLabels: {
|
||
enabled: false, //不在每格上顯示數據
|
||
},
|
||
series: [
|
||
{
|
||
name: '001',
|
||
data: [
|
||
{ x: '03:00', y: getRandomValue() },
|
||
{ x: '03:15', y: getRandomValue() },
|
||
{ x: '03:30', y: getRandomValue() },
|
||
{ x: '03:45', y: getRandomValue() },
|
||
{ x: '04:00', y: getRandomValue() },
|
||
{ x: '04:15', y: getRandomValue() },
|
||
{ x: '04:30', y: getRandomValue() },
|
||
{ x: '04:45', y: getRandomValue() },
|
||
{ x: '05:00', y: getRandomValue() },
|
||
{ x: '05:15', y: getRandomValue() },
|
||
{ x: '05:30', y: getRandomValue() },
|
||
{ x: '05:45', y: getRandomValue() },
|
||
{ x: '06:00', y: getRandomValue() },
|
||
{ x: '06:15', y: getRandomValue() },
|
||
{ x: '06:30', y: getRandomValue() },
|
||
{ x: '06:45', y: getRandomValue() },
|
||
{ x: '07:00', y: getRandomValue() },
|
||
{ x: '07:15', y: getRandomValue() },
|
||
{ x: '07:30', y: getRandomValue() },
|
||
{ x: '07:45', y: getRandomValue() },
|
||
{ x: '08:00', y: getRandomValue() },
|
||
{ x: '08:15', y: getRandomValue() },
|
||
{ x: '08:30', y: getRandomValue() },
|
||
{ x: '08:45', y: getRandomValue() },
|
||
{ x: '09:00', y: getRandomValue() },
|
||
{ x: '09:15', y: getRandomValue() },
|
||
{ x: '09:30', y: getRandomValue() },
|
||
{ x: '09:45', y: getRandomValue() },
|
||
{ x: '10:00', y: getRandomValue() },
|
||
{ x: '10:15', y: getRandomValue() },
|
||
{ x: '10:30', y: getRandomValue() },
|
||
{ x: '10:45', y: getRandomValue() },
|
||
{ x: '11:00', y: getRandomValue() },
|
||
{ x: '11:15', y: getRandomValue() },
|
||
{ x: '11:30', y: getRandomValue() },
|
||
{ x: '11:45', y: getRandomValue() },
|
||
{ x: '12:00', y: getRandomValue() },
|
||
{ x: '12:15', y: getRandomValue() },
|
||
{ x: '12:30', y: getRandomValue() },
|
||
{ x: '12:45', y: getRandomValue() },
|
||
{ x: '13:00', y: getRandomValue() },
|
||
{ x: '13:15', y: getRandomValue() },
|
||
{ x: '13:30', y: getRandomValue() },
|
||
{ x: '13:45', y: getRandomValue() },
|
||
{ x: '14:00', y: getRandomValue() },
|
||
]
|
||
},
|
||
{
|
||
name: '002',
|
||
data: [
|
||
{ x: '03:00', y: getRandomValue() },
|
||
{ x: '03:15', y: getRandomValue() },
|
||
{ x: '03:30', y: getRandomValue() },
|
||
{ x: '03:45', y: getRandomValue() },
|
||
{ x: '04:00', y: getRandomValue() },
|
||
{ x: '04:15', y: getRandomValue() },
|
||
{ x: '04:30', y: getRandomValue() },
|
||
{ x: '04:45', y: getRandomValue() },
|
||
{ x: '05:00', y: getRandomValue() },
|
||
{ x: '05:15', y: getRandomValue() },
|
||
{ x: '05:30', y: getRandomValue() },
|
||
{ x: '05:45', y: getRandomValue() },
|
||
{ x: '06:00', y: getRandomValue() },
|
||
{ x: '06:15', y: getRandomValue() },
|
||
{ x: '06:30', y: getRandomValue() },
|
||
{ x: '06:45', y: getRandomValue() },
|
||
{ x: '07:00', y: getRandomValue() },
|
||
{ x: '07:15', y: getRandomValue() },
|
||
{ x: '07:30', y: getRandomValue() },
|
||
{ x: '07:45', y: getRandomValue() },
|
||
{ x: '08:00', y: getRandomValue() },
|
||
{ x: '08:15', y: getRandomValue() },
|
||
{ x: '08:30', y: getRandomValue() },
|
||
{ x: '08:45', y: getRandomValue() },
|
||
{ x: '09:00', y: getRandomValue() },
|
||
{ x: '09:15', y: getRandomValue() },
|
||
{ x: '09:30', y: getRandomValue() },
|
||
{ x: '09:45', y: getRandomValue() },
|
||
{ x: '10:00', y: getRandomValue() },
|
||
{ x: '10:15', y: getRandomValue() },
|
||
{ x: '10:30', y: getRandomValue() },
|
||
{ x: '10:45', y: getRandomValue() },
|
||
{ x: '11:00', y: getRandomValue() },
|
||
{ x: '11:15', y: getRandomValue() },
|
||
{ x: '11:30', y: getRandomValue() },
|
||
{ x: '11:45', y: getRandomValue() },
|
||
{ x: '12:00', y: getRandomValue() },
|
||
{ x: '12:15', y: getRandomValue() },
|
||
{ x: '12:30', y: getRandomValue() },
|
||
{ x: '12:45', y: getRandomValue() },
|
||
{ x: '13:00', y: getRandomValue() },
|
||
{ x: '13:15', y: getRandomValue() },
|
||
{ x: '13:30', y: getRandomValue() },
|
||
{ x: '13:45', y: getRandomValue() },
|
||
{ x: '14:00', y: getRandomValue() },
|
||
]
|
||
},
|
||
{
|
||
name: '003',
|
||
data: [
|
||
{ x: '03:00', y: getRandomValue() },
|
||
{ x: '03:15', y: getRandomValue() },
|
||
{ x: '03:30', y: getRandomValue() },
|
||
{ x: '03:45', y: getRandomValue() },
|
||
{ x: '04:00', y: getRandomValue() },
|
||
{ x: '04:15', y: getRandomValue() },
|
||
{ x: '04:30', y: getRandomValue() },
|
||
{ x: '04:45', y: getRandomValue() },
|
||
{ x: '05:00', y: getRandomValue() },
|
||
{ x: '05:15', y: getRandomValue() },
|
||
{ x: '05:30', y: getRandomValue() },
|
||
{ x: '05:45', y: getRandomValue() },
|
||
{ x: '06:00', y: getRandomValue() },
|
||
{ x: '06:15', y: getRandomValue() },
|
||
{ x: '06:30', y: getRandomValue() },
|
||
{ x: '06:45', y: getRandomValue() },
|
||
{ x: '07:00', y: getRandomValue() },
|
||
{ x: '07:15', y: getRandomValue() },
|
||
{ x: '07:30', y: getRandomValue() },
|
||
{ x: '07:45', y: getRandomValue() },
|
||
{ x: '08:00', y: getRandomValue() },
|
||
{ x: '08:15', y: getRandomValue() },
|
||
{ x: '08:30', y: getRandomValue() },
|
||
{ x: '08:45', y: getRandomValue() },
|
||
{ x: '09:00', y: getRandomValue() },
|
||
{ x: '09:15', y: getRandomValue() },
|
||
{ x: '09:30', y: getRandomValue() },
|
||
{ x: '09:45', y: getRandomValue() },
|
||
{ x: '10:00', y: getRandomValue() },
|
||
{ x: '10:15', y: getRandomValue() },
|
||
{ x: '10:30', y: getRandomValue() },
|
||
{ x: '10:45', y: getRandomValue() },
|
||
{ x: '11:00', y: getRandomValue() },
|
||
{ x: '11:15', y: getRandomValue() },
|
||
{ x: '11:30', y: getRandomValue() },
|
||
{ x: '11:45', y: getRandomValue() },
|
||
{ x: '12:00', y: getRandomValue() },
|
||
{ x: '12:15', y: getRandomValue() },
|
||
{ x: '12:30', y: getRandomValue() },
|
||
{ x: '12:45', y: getRandomValue() },
|
||
{ x: '13:00', y: getRandomValue() },
|
||
{ x: '13:15', y: getRandomValue() },
|
||
{ x: '13:30', y: getRandomValue() },
|
||
{ x: '13:45', y: getRandomValue() },
|
||
{ x: '14:00', y: getRandomValue() },
|
||
]
|
||
}
|
||
],
|
||
tooltip: {
|
||
custom: function({ series, seriesIndex, dataPointIndex, w }) {
|
||
var value = series[seriesIndex][dataPointIndex];
|
||
return `<div>編號: ${w.globals.seriesNames[seriesIndex]}<br>時間: ${w.globals.labels[dataPointIndex]}<br>度數: ${value} kWh</div>`;
|
||
}
|
||
}
|
||
};
|
||
|
||
var chart = new ApexCharts(document.querySelector("#heatMapChart"), options);
|
||
|
||
chart.render();
|
||
}
|
||
|
||
|
||
// 日期選擇器邏輯
|
||
function invrPowerDate(type) {
|
||
const startDateInput = $('#invrPowerDate');
|
||
$('#quarterSelectors').hide();
|
||
|
||
startDateInput.datepicker('destroy');
|
||
|
||
if (type === 'tdy') {
|
||
// 設定今天日期
|
||
startDateInput.datepicker({
|
||
format: 'yyyy/mm/dd',
|
||
autoclose: true
|
||
}).datepicker('setDate', new Date());
|
||
} else if (type === 'month') {
|
||
startDateInput.datepicker({
|
||
format: 'yyyy/mm',
|
||
startView: 1,
|
||
minViewMode: 1,
|
||
autoclose: true
|
||
}).datepicker('setDate', new Date());
|
||
} else if (type === 'quarter') {
|
||
startDateInput.datepicker({
|
||
format: 'yyyy',
|
||
minViewMode: 2,
|
||
autoclose: true
|
||
}).datepicker('setDate', new Date());
|
||
$('#quarterSelectors').show();
|
||
} else if (type === 'year') {
|
||
startDateInput.datepicker({
|
||
format: 'yyyy',
|
||
startView: 2,
|
||
minViewMode: 2,
|
||
autoclose: true
|
||
}).datepicker('setDate', new Date());;
|
||
}else {
|
||
startDateInput.datepicker("destroy");
|
||
}
|
||
}
|
||
|
||
// 查詢逆變器發電量
|
||
function invrPowerSearch() {
|
||
const selectedDate = $('#invrPowerDate').val();
|
||
const quarter = $('#quarterSelectors').val(); // 獲取選中的季度
|
||
|
||
// 假設 API 請求 URL 是 http://your-api-endpoint，根據你的情況修改 API 請求
|
||
const apiUrl = `http://your-api-endpoint?date=${selectedDate}&quarter=${quarter}`;
|
||
|
||
fetch(apiUrl)
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
renderPowerChart(data); // 使用返回的數據渲染圖表
|
||
})
|
||
.catch(error => {
|
||
console.error('API請求失敗:', error);
|
||
});
|
||
}
|
||
|
||
function renderPowerChart() {
|
||
const Powerdata = {
|
||
time: ["10:00", "11:00", "12:00"],
|
||
plants: {
|
||
plant1: [5, 10, 15],
|
||
plant2: [6, 11, 14],
|
||
plant3: [5, 10, 14]
|
||
}
|
||
};
|
||
|
||
let ctx = $("#invrPowerChart").get(0).getContext("2d");
|
||
|
||
const labels = Powerdata.time;
|
||
const datasets = [
|
||
{
|
||
label: '001',
|
||
data: Powerdata.plants.plant1,
|
||
backgroundColor: 'rgba(255, 99, 132, 0.6)',
|
||
borderColor: 'rgba(255, 99, 132, 1)',
|
||
borderWidth: 1
|
||
},
|
||
{
|
||
label: '002',
|
||
data: Powerdata.plants.plant2,
|
||
backgroundColor: 'rgba(54, 162, 235, 0.6)',
|
||
borderColor: 'rgba(54, 162, 235, 1)',
|
||
borderWidth: 1
|
||
},
|
||
{
|
||
label: '003',
|
||
data: Powerdata.plants.plant3,
|
||
backgroundColor: 'rgba(75, 192, 192, 0.6)',
|
||
borderColor: 'rgba(75, 192, 192, 1)',
|
||
borderWidth: 1
|
||
}
|
||
];
|
||
|
||
new Chart(ctx, {
|
||
type: 'bar',
|
||
data: {
|
||
labels: labels,
|
||
datasets: datasets
|
||
},
|
||
options: {
|
||
scales: {
|
||
x: {
|
||
title: {
|
||
display: true,
|
||
text: '時間',
|
||
color: '#fff'
|
||
},
|
||
ticks: {
|
||
color: '#fff'
|
||
},
|
||
grid: {
|
||
color: 'rgba(255, 255, 255, 0.2)'
|
||
}
|
||
},
|
||
y: {
|
||
title: {
|
||
display: true,
|
||
text: '發電量 (kWh)',
|
||
color: '#fff'
|
||
},
|
||
ticks: {
|
||
color: '#fff'
|
||
},
|
||
grid: {
|
||
color: 'rgba(255, 255, 255, 0.2)'
|
||
}
|
||
}
|
||
},
|
||
plugins: {
|
||
legend: {
|
||
labels: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
title: {
|
||
display: true,
|
||
text: '逆變器發電量',
|
||
color: '#fff'
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 歷史資料日期選擇
|
||
function setHistDateType(type){
|
||
|
||
const histDateBtns = $('#histDateBtns');
|
||
histDateBtns.empty();
|
||
let buttonConfig;
|
||
|
||
const histDateVal = $('#histDateVal');
|
||
histDateVal.datepicker('destroy'); // 取消之前的 datepicker 綁定
|
||
|
||
histDateBtns.show();
|
||
histDateVal.show();
|
||
|
||
if (type === 'day') {
|
||
buttonConfig = [
|
||
{ text: '今日', value: 'tdy' },
|
||
{ text: '昨日', value: 'ytd' }
|
||
];
|
||
histDateVal.datepicker({
|
||
format: 'yyyy/mm/dd',
|
||
autoclose: true
|
||
}).datepicker('setDate', new Date());
|
||
}else if(type === 'month') {
|
||
buttonConfig = [
|
||
{ text: '本月', value: 'currentMonth' },
|
||
{ text: '上個月', value: 'lastMonth' }
|
||
];
|
||
histDateVal.datepicker({
|
||
format: 'yyyy/mm',
|
||
startView: 1,
|
||
minViewMode: 1,
|
||
autoclose: true
|
||
}).datepicker('setDate', new Date());
|
||
}else if(type === 'year'){
|
||
buttonConfig = [
|
||
{ text: '今年', value: 'currentYear' },
|
||
{ text: '去年', value: 'lastYear' }
|
||
];
|
||
histDateVal.datepicker({
|
||
format: 'yyyy',
|
||
startView: 2,
|
||
minViewMode: 2,
|
||
autoclose: true
|
||
}).datepicker('setDate', new Date());
|
||
}else if(type === 'all'){
|
||
histDateBtns.hide();
|
||
histDateVal.hide();
|
||
}
|
||
|
||
$.each(buttonConfig, function(index, config) {
|
||
const button = $('<button>')
|
||
.addClass('btn btn-secondary waves-effect waves-themed')
|
||
.text(config.text)
|
||
.attr('onclick', `setHisDate('${config.value}')`);
|
||
|
||
histDateBtns.append(button);
|
||
});
|
||
}
|
||
|
||
function setHisDate(value) {
|
||
const histDateVal = $('#histDateVal');
|
||
if (value === 'tdy') {
|
||
histDateVal.datepicker('setDate', new Date());
|
||
} else if (value === 'ytd') {
|
||
histDateVal.datepicker('setDate', yesterday);
|
||
} else if (value === 'currentMonth') {
|
||
histDateVal.datepicker('setDate', new Date(today.getFullYear(), today.getMonth(), 1));
|
||
} else if (value === 'lastMonth') {
|
||
histDateVal.datepicker('setDate', new Date(today.getFullYear(), today.getMonth() - 1, 1));
|
||
} else if (value === 'currentYear') {
|
||
histDateVal.datepicker('setDate', new Date(today.getFullYear(), 0, 1));
|
||
} else if (value === 'lastYear') {
|
||
histDateVal.datepicker('setDate', new Date(today.getFullYear() - 1, 0, 1));
|
||
}
|
||
}
|
||
|
||
|
||
</script>
|
||
|