引用px檔
This commit is contained in:
parent
c438cb0fc4
commit
6aac7bfc6d
@ -1,6 +1,14 @@
|
|||||||
<main id="js-page-content" role="main" class="page-content">
|
<main id="js-page-content" role="main" class="page-content">
|
||||||
<h1 class="p-2 mb-0">太陽能管理</h1>
|
|
||||||
<div class="row">
|
<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 class="col-sm-12 col-xl-12">
|
||||||
<div id="pageIframe" ></div>
|
<div id="pageIframe" ></div>
|
||||||
</div>
|
</div>
|
||||||
@ -20,20 +28,41 @@ $(function () {
|
|||||||
function initPage() {
|
function initPage() {
|
||||||
// 初始載入 iframe
|
// 初始載入 iframe
|
||||||
$('#pageIframe').html(`
|
$('#pageIframe').html(`
|
||||||
<iframe src="/ord?file:^Solar/Site.px|view:?fullScreen=true"
|
<iframe id="solarIframe" src="/ord?file:^Solar/Site.px|view:?fullScreen=true"
|
||||||
width="100%"
|
width="100%"
|
||||||
height="600">
|
height="800"
|
||||||
|
class="border-0"
|
||||||
|
>
|
||||||
</iframe>
|
</iframe>
|
||||||
`);
|
`);
|
||||||
// 監聽 iframe 中的點擊事件
|
|
||||||
$('#pageIframe iframe').on('load', function() {
|
$('#solarIframe').on('load', function() {
|
||||||
$(this).contents().on('click', function() {
|
const iframe = this;
|
||||||
sessionStorage.setItem("solar", JSON.stringify({'siteID': "133", 'siteName': "大眾電腦內湖總部"}));
|
const currentUrl = iframe.contentWindow.location.href;
|
||||||
$("#app").load(`_solarEnergyItem.html`);
|
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>
|
</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