var chart;
var series = [], myYAxis = []; mySeries = [];
var global_history = [];
var is_reset_series = false; //是否需要重設數組
$(function () {
// myBaja.setSubscribeRealtimeReportDevices([]);
myBaja.setRealtimeReportCallBack(ReloadHighCharts)
$('#real-time-report-convas-div').empty();
$('#real-time-report-convas-div').append('');
// Highcharts.Chart("real-time-report", {
// lang: { //匯出相關中文名稱配置
// printChart: '列印圖表',
// downloadJPEG: '下載JPEG檔案',
// downloadPDF: '下載PDF檔案',
// downloadPNG: '下載PNG檔案',
// downloadSVG: '下載SVG檔案',
// downloadCSV: '下載CSV檔案',
// downloadXLS: '下載XLS檔案',
// viewData: '檢視資料表格',
// viewFullscreen: '全屏檢視'
// },
// chart: {
// renderTo: 'real-time-report',
// height: 600,
// animation: false
// },
// title: {
// text: '測試'
// },
// xAxis: {
// categories: listmonth,
// },
// yAxis: [{
// title: {
// text: "溫度(℃)"
// },
// id: "E",
// opposite: true,
// showEmpty: false
// }],
// series: [{
// type: 'spline',
// name: "Ramp",
// data: listtemperature,
// yAxis: "E",
// color: "rgb(255, 192, 0)",
// zIndex: 4
// }],
// });
// Highcharts.setOptions({
// global: {
// useUTC: false
// }
// });
var devices = [{
"device_number": "H_B_B1F_MVCB_MVCBH",
"points": [
{
"point_name": 'V1',
"unit": 'V',
}, {
"point_name": 'A1',
"unit": 'A',
}, {
"point_name": 'P',
"unit": 'W',
}]
}]
ResetHighChartsYAxis(devices);
var intervalId = setInterval(function () {
myBaja.setSubscribeRealtimeReportDevices(devices)
}, 5000);
});
/*
未使用
*/
function myRealtimeReportData(specify_device_number = []) {
console.log("specify_device_number", specify_device_number)
if (specify_device_number.length > 0) {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, parseFloat(specify_device_number[0].points["V1"])], true, true);
// series.push(specify_device_number[0].points["Ramp"])
// console.log(series);
}
}
//修改Y軸後,重新繪製
function ResetHighChartsYAxis(devices) {
var temp_series = [];
devices.map(function (item, index) {
//判斷數組是否需要存在
mySeries.forEach(function (series_index, series) {
series_split = series.name.split(":")
if(series_split[0] == item.device_number){
temp_series.push(series)
}
})
mySeries = temp_series;
item.points.map(function (point, point_index) {
if (myYAxis.length <= 6 && myYAxis.findIndex(x => x.id == point.unit) < 0) {
var yAxis = {
title: {
text: point.unit,
},
id: point.unit,
opposite: myYAxis.length > 0 ? true : false,
showEmpty: false
}
myYAxis.push(yAxis);
}
})
});
is_reset_series = true;
InitHighChart();
}
function ReloadHighCharts(history) {
// console.log("history", history);
if (history != undefined && history != null && Object.keys(history).length > 0) {
// myXAxis = Object.keys(history);
// console.log("原本的排序", Object.keys(history))
// console.log("原本的排序取最後10筆", Object.keys(history).slice(-10))
const ordered = Object.keys(history).sort().reduce(
(obj, key) => {
obj[key] = history[key];
return obj;
},
{}
);
global_history = ordered
// console.log(ordered)
// console.log("調整的排序", Object.keys(ordered))
// console.log("調整的排序取最後10筆", Object.keys(ordered).slice(-10))
Object.keys(ordered).slice(-50).map(function (item, index) {
history[item].map(function (item_device) {
var temp_series = mySeries.find(x => x.name == (item_device.device_number + ':' + item_device.point))
var temp_timestamp = item.replaceAll("/", "-");
if (temp_series != undefined && temp_series != null) {
temp_series.data.push({ x: new Date(temp_timestamp).getTime(), y: parseFloat(item_device.value) });
} else {
var series = {
type: 'spline',
name: item_device.device_number + ':' + item_device.point,
data: [],
yAxis: item_device.unit,
};
series.data.push({ x: new Date(temp_timestamp).getTime(), y: parseFloat(item_device.value) });
mySeries.push(series);
}
});
});
if (mySeries != undefined && mySeries.length > 0 && is_reset_series) {
is_reset_series = false;
mySeries.forEach(element => {
chart.addSeries(element);
});
// InitHighChart(mySeries);
}
if (mySeries != undefined) {
// console.log("mySeries", mySeries);
// Highcharts.chart('real-time-report', {
// lang: { //匯出相關中文名稱配置
// printChart: '列印圖表',
// downloadJPEG: '下載JPEG檔案',
// downloadPDF: '下載PDF檔案',
// downloadPNG: '下載PNG檔案',
// downloadSVG: '下載SVG檔案',
// downloadCSV: '下載CSV檔案',
// downloadXLS: '下載XLS檔案',
// viewData: '檢視資料表格',
// viewFullscreen: '全屏檢視'
// },
// chart: {
// type: 'spline',
// },
// title: {
// text: 'Live Data'
// },
// exporting: {
// enabled: false
// },
// xAxis: {
// categories: myXAxis,
// },
// // tooltip: {
// // headerFormat: '{series.name}
',
// // pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}
{point.y:.2f}'
// // },
// // yAxis: myYAxis,
// series: mySeries
// });
}
}
}
function InitHighChart(local_mySeries) {
chart = Highcharts.chart('real-time-report', {
lang: { //匯出相關中文名稱配置
printChart: '列印圖表',
downloadJPEG: '下載JPEG檔案',
downloadPDF: '下載PDF檔案',
downloadPNG: '下載PNG檔案',
downloadSVG: '下載SVG檔案',
downloadCSV: '下載CSV檔案',
downloadXLS: '下載XLS檔案',
viewData: '檢視資料表格',
viewFullscreen: '全屏檢視'
},
time: {
useUTC: false
},
chart: {
type: 'spline',
events: {
load: function () {
var series = this.series;
setInterval(function () {
var date = (new Date(new Date().getTime() - 5000)) //-5秒
const formatDate = (date) => {
let formatted_date = date.getFullYear() + "/" + ((date.getMonth() + 1) < 10 ? "0" + (date.getMonth() + 1) : (date.getMonth() + 1)) + "/" + date.getDate() + " " + (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":" + (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ":" + (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());
return formatted_date;
}
// console.log(formatDate(date));
var timestamp = formatDate(date);
console.log(timestamp);
console.log(global_history);
series.forEach(function (item) {
var target_name_split = item.name.split(":");
if (global_history[timestamp] != undefined) {
// item
var temp_history = global_history[timestamp].find(x => x.device_number == target_name_split[0] && x.point == target_name_split[1])
if (temp_history != undefined && temp_history != null) {
item.addPoint([date.getTime(), parseFloat(temp_history.value)], true, true);
}
}
});
}, 1000);
}
}
},
title: {
text: 'Live Data'
},
exporting: {
enabled: false
},
xAxis: {
type: 'datetime',
},
// tooltip: {
// headerFormat: '{series.name}
',
// pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}
{point.y:.2f}'
// },
yAxis: myYAxis,
series: local_mySeries
});
}