引用px檔
This commit is contained in:
parent
c438cb0fc4
commit
6aac7bfc6d
@ -1,6 +1,14 @@
|
||||
<main id="js-page-content" role="main" class="page-content">
|
||||
<h1 class="p-2 mb-0">太陽能管理</h1>
|
||||
|
||||
<div class="row">
|
||||
<div class="d-flex mb-2">
|
||||
<h1 class="p-2 mb-0">太陽能管理</h1>
|
||||
<button
|
||||
class="btn btn-info btn-m-s btn-sm"
|
||||
id="backButton"
|
||||
onclick="goback()"
|
||||
>回上一頁</button>
|
||||
</div>
|
||||
<div class="col-sm-12 col-xl-12">
|
||||
<div id="pageIframe" ></div>
|
||||
</div>
|
||||
@ -18,22 +26,43 @@ $(function () {
|
||||
});
|
||||
|
||||
function initPage() {
|
||||
// 初始載入 iframe
|
||||
$('#pageIframe').html(`
|
||||
<iframe src="/ord?file:^Solar/Site.px|view:?fullScreen=true"
|
||||
width="100%"
|
||||
height="600">
|
||||
</iframe>
|
||||
`);
|
||||
// 監聽 iframe 中的點擊事件
|
||||
$('#pageIframe iframe').on('load', function() {
|
||||
$(this).contents().on('click', function() {
|
||||
sessionStorage.setItem("solar", JSON.stringify({'siteID': "133", 'siteName': "大眾電腦內湖總部"}));
|
||||
$("#app").load(`_solarEnergyItem.html`);
|
||||
// 初始載入 iframe
|
||||
$('#pageIframe').html(`
|
||||
<iframe id="solarIframe" src="/ord?file:^Solar/Site.px|view:?fullScreen=true"
|
||||
width="100%"
|
||||
height="800"
|
||||
class="border-0"
|
||||
>
|
||||
</iframe>
|
||||
`);
|
||||
|
||||
$('#solarIframe').on('load', function() {
|
||||
const iframe = this;
|
||||
const currentUrl = iframe.contentWindow.location.href;
|
||||
console.log("currentUrl",currentUrl)
|
||||
|
||||
// 檢查 URL 是否包含 'solarEnergyItem'
|
||||
if (currentUrl.includes('solarEnergyItem')) {
|
||||
// 解析 URL 的查詢參數
|
||||
const queryString = currentUrl.split('?')[1];
|
||||
const urlParams = new URLSearchParams(queryString);
|
||||
const siteId = urlParams.get('siteId');
|
||||
|
||||
if (siteId) {
|
||||
sessionStorage.setItem('siteId', siteId);
|
||||
} else {
|
||||
console.log('未找到 siteId 參數');
|
||||
}
|
||||
} else {
|
||||
console.log('當前 URL 不包含期望的結構');
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function goback() {
|
||||
sessionStorage.removeItem('siteId');
|
||||
// 回復到初始頁面
|
||||
initPage();
|
||||
}
|
||||
</script>
|
||||
|
||||
813
Frontend/solarEnergyItem.html
Normal file
813
Frontend/solarEnergyItem.html
Normal file
@ -0,0 +1,813 @@
|
||||
|
||||
<!-- 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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user