刪除舊資料
This commit is contained in:
parent
0225ca81b7
commit
296aace728
@ -1,814 +0,0 @@
|
|||||||
|
|
||||||
<!-- 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();
|
|
||||||
setTimeout(() => {
|
|
||||||
changeTabs();
|
|
||||||
renderHeatmapChart();
|
|
||||||
renderPowerChart();
|
|
||||||
}, 100);
|
|
||||||
})
|
|
||||||
|
|
||||||
// 回上一頁
|
|
||||||
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>
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user