292 lines
9.8 KiB
JavaScript
292 lines
9.8 KiB
JavaScript
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('<figure class="highcharts-figure"><div id="real-time-report"></div></figure>');
|
||
// 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: '<b>{series.name}</b><br/>',
|
||
// // pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{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: '<b>{series.name}</b><br/>',
|
||
// pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
|
||
// },
|
||
yAxis: myYAxis,
|
||
series: local_mySeries
|
||
});
|
||
} |