1200 lines
39 KiB
JavaScript
1200 lines
39 KiB
JavaScript
var default_building = localStorage.getItem('default_building');
|
||
|
||
var MainSub;//取得所有大類
|
||
var Building;//取得所有棟別
|
||
|
||
var SelectMain = new Array(0);//選擇的大類
|
||
var SelectSub = new Array(0);//選擇的小類
|
||
var SelectBuildings = new Array(0);//選擇的區域
|
||
var allbuildingbool = true;
|
||
var allsubbool = true;
|
||
|
||
var device_data = [];
|
||
var datatable;
|
||
var Selectdatatable;
|
||
var Itemdatatable;
|
||
var select_data = new Array(0);
|
||
var recordPage = 1;//總設備table
|
||
var selectrecordPage = 1;//選擇的設備table
|
||
var selectitem = new Array(0);
|
||
var selectitemjson = new Array(0);
|
||
|
||
var chart;
|
||
var series = [], myYAxis = []; mySeries = [];
|
||
var global_history = [];
|
||
var is_reset_series = false; //是否需要重設數組
|
||
var intervalId, chartIntervalId;
|
||
|
||
var combinations = [];
|
||
var selected_combination;
|
||
|
||
var combination_dataTable;
|
||
var combination_detail_dataTable;
|
||
var recordCombinationPage = 1;//常見組合table
|
||
|
||
var selected_edit_combination; //選擇編輯的常用組合
|
||
|
||
$(function () {
|
||
console.log("enter point");
|
||
|
||
myBaja.setRealtimeReportCallBack(ReloadHighCharts);
|
||
|
||
var url = baseApiUrl + 'api/History/GetMainSub';
|
||
var sentdata =
|
||
{
|
||
account: localStorage.getItem('account')
|
||
}
|
||
$.ajax({
|
||
type: "POST",
|
||
url: url,
|
||
data: sentdata,
|
||
success: function (rel) {
|
||
if (rel.code != "0000") {
|
||
if (rel.code == "9999") {
|
||
toast_error(rel.msg);
|
||
}
|
||
else {
|
||
toast_warning(rel.msg);
|
||
}
|
||
return;
|
||
}
|
||
//console.log(rel.data);
|
||
MainSub = rel.data.history_Main_Systems;
|
||
Building = rel.data.history_Builds;
|
||
var html = "";
|
||
Building.forEach(function (building) {
|
||
html += `<button type="button" class="btn ml-2 btn-outline-success" onclick="SelectBuild(this)" id="${building.building_guid}">${building.full_name}</button>`;
|
||
});
|
||
$('#building').find('.item').empty();
|
||
$('#building').find('.item').append(html);
|
||
html = "";
|
||
var subhtml = "";
|
||
MainSub.forEach(function (mainsystem) {
|
||
html += `<button type="button" class="btn ml-2 btn-outline-success" onclick="GetSubSystem('${mainsystem.main_system_guid}',this)" >${mainsystem.full_name}</button>`;
|
||
|
||
mainsystem.history_Sub_systems.forEach(function (subsystem) {
|
||
subhtml += `<button type="button" class="btn ml-2 btn-outline-success hide mainbtn-${mainsystem.main_system_guid}" onclick="SelectSubSystem(this)" id="${subsystem.sub_system_guid}">${subsystem.full_name}</button>`;
|
||
});
|
||
});
|
||
$('#mainsystem').find('.item').empty();
|
||
$('#mainsystem').find('.item').append(html);
|
||
$('#subsystem').find('.item').empty();
|
||
$('#subsystem').find('.item').append(subhtml);
|
||
$('#subsystem').find('.item').find('.btn-outline-success').hide();
|
||
|
||
}
|
||
|
||
})
|
||
|
||
//取得常用組合
|
||
GetRealTimeCombination();
|
||
|
||
datatable = new simpleDatatables.DataTable('#Device_menu_table', {
|
||
searchable: false,
|
||
//paging: false,
|
||
perPage: 20,
|
||
data: {
|
||
"data": []
|
||
},
|
||
layout: {
|
||
top: "",
|
||
bottom: "{info}{pager}",
|
||
},
|
||
columns: [{
|
||
select: 3,
|
||
sort: "desc",
|
||
}]
|
||
});
|
||
Selectdatatable = new simpleDatatables.DataTable('#Device_select_table', {
|
||
searchable: false,
|
||
//paging: false,
|
||
perPage: 20,
|
||
data: {
|
||
"data": []
|
||
},
|
||
layout: {
|
||
top: "",
|
||
bottom: "{info}{pager}",
|
||
}
|
||
});
|
||
Itemdatatable = new simpleDatatables.DataTable('#Device_item_table', {
|
||
searchable: false,
|
||
//paging: false,
|
||
perPage: 10,
|
||
data: {
|
||
"data": new Array(0)
|
||
},
|
||
layout: {
|
||
top: "",
|
||
bottom: "{info}{pager}",
|
||
}
|
||
});
|
||
|
||
combination_dataTable = new simpleDatatables.DataTable('#combination-table', {
|
||
searchable: false,
|
||
//paging: false,
|
||
perPage: 10,
|
||
data: {
|
||
"data": []
|
||
},
|
||
layout: {
|
||
top: "",
|
||
bottom: "{info}{pager}",
|
||
},
|
||
});
|
||
|
||
combination_detail_dataTable = new simpleDatatables.DataTable('#combination-detail-table', {
|
||
searchable: false,
|
||
//paging: false,
|
||
perPage: 10,
|
||
data: {
|
||
"data": []
|
||
},
|
||
layout: {
|
||
top: "",
|
||
bottom: "{info}{pager}",
|
||
},
|
||
});
|
||
|
||
//選擇常用組合
|
||
$("#real-time-combination").change(function () {
|
||
selected_combination = combinations.filter(x => x.combination_guid == $(this).val())[0];
|
||
if (selected_combination != undefined && selected_combination != null) {
|
||
//重新繪製已選擇設備table
|
||
select_data = new Array();
|
||
selected_combination.details.forEach(function (item, index) {
|
||
var obj = {
|
||
building: item.building_full_name,
|
||
device_number: item.device_number,
|
||
device_name: item.device_full_name,
|
||
main_name: item.main_system_full_name,
|
||
sub_name: item.sub_system_full_name,
|
||
device_guid: item.device_guid
|
||
}
|
||
select_data.push(obj)
|
||
});
|
||
}
|
||
else {
|
||
selected_combination = {};
|
||
select_data = [];
|
||
}
|
||
|
||
JudgeCurrentDeviceData();
|
||
RedrawDataTable();
|
||
RedrawSelectedDataTable();
|
||
});
|
||
|
||
|
||
})
|
||
|
||
function DeviceNameSearch() {
|
||
var device_name = $("#device_name_search").val();
|
||
|
||
if (device_name != null && device_name.length > 0) {
|
||
var sent_data = {
|
||
device_name: device_name
|
||
}
|
||
|
||
var url = baseApiUrl + 'api/History/GetDevice';
|
||
|
||
$.ajax({
|
||
type: "POST",
|
||
url: url,
|
||
data: sent_data,
|
||
success: function (rel) {
|
||
if (rel.code != "0000") {
|
||
if (rel.code == "9999") {
|
||
toast_error(rel.msg);
|
||
}
|
||
else {
|
||
toast_warning(rel.msg);
|
||
}
|
||
return;
|
||
}
|
||
|
||
device_data = rel.data.map(function (item, index) {
|
||
item.is_selected = 0;
|
||
return item;
|
||
});
|
||
JudgeCurrentDeviceData();
|
||
RedrawDataTable();
|
||
}
|
||
})
|
||
}
|
||
else {
|
||
toast_warning("請輸入欲查詢內容");
|
||
}
|
||
}
|
||
|
||
//按大類顯示小類
|
||
function GetSubSystem(mainguid, e) {
|
||
if ($(e).hasClass('btn-outline-success')) {
|
||
$(e).removeClass('btn-outline-success').addClass('btn-success');
|
||
$('#subsystem').find('.item').find('.mainbtn-' + mainguid).removeClass('hide').addClass('show').show();
|
||
}
|
||
else {
|
||
$(e).removeClass('btn-success').addClass('btn-outline-success');
|
||
$('#subsystem').find('.item').find('.mainbtn-' + mainguid).find('.btn-success').removeClass('btn-success').addClass('btn-outline-success');
|
||
$('#subsystem').find('.item').find('.mainbtn-' + mainguid).removeClass('show').addClass('hide').hide();
|
||
}
|
||
GetDevice();
|
||
}
|
||
//全選小類
|
||
function allsub() {
|
||
if (allsubbool) {
|
||
$('#subsystem').find('.btn-outline-success.show').removeClass('btn-outline-success').addClass('btn-success');
|
||
allsubbool = false;
|
||
}
|
||
else {
|
||
$('#subsystem').find('.btn-success.show').removeClass('btn-success').addClass('btn-outline-success');
|
||
allsubbool = true;
|
||
}
|
||
SelectSub = new Array(0);
|
||
$('#subsystem').find('.item').find('.show.btn-success').each(function () {
|
||
SelectSub.push($(this).attr("id"));
|
||
});
|
||
GetDevice();
|
||
}
|
||
|
||
//全選棟別
|
||
function allbuilding() {
|
||
if (allbuildingbool) {
|
||
$('#building').find('.btn-outline-success').removeClass('btn-outline-success').addClass('btn-success');
|
||
allbuildingbool = false;
|
||
}
|
||
else {
|
||
$('#building').find('.btn-success').removeClass('btn-success').addClass('btn-outline-success');
|
||
allbuildingbool = true;
|
||
}
|
||
SelectBuildings = new Array(0);
|
||
$('#building').find('.item').find('.btn-success').each(function () {
|
||
SelectBuildings.push($(this).attr("id"));
|
||
});
|
||
GetDevice();
|
||
}
|
||
//選擇小類
|
||
function SelectSubSystem(e) {
|
||
if ($(e).hasClass('btn-outline-success')) {
|
||
$(e).removeClass('btn-outline-success').addClass('btn-success');
|
||
}
|
||
else {
|
||
$(e).removeClass("btn-success").addClass("btn-outline-success");
|
||
}
|
||
SelectSub = new Array(0);
|
||
$('#subsystem').find('.item').find('.show.btn-success').each(function () {
|
||
SelectSub.push($(this).attr("id"));
|
||
});
|
||
GetDevice();
|
||
}
|
||
//選擇區域
|
||
function SelectBuild(e) {
|
||
if ($(e).hasClass('btn-outline-success')) {
|
||
$(e).removeClass('btn-outline-success').addClass('btn-success');
|
||
}
|
||
else {
|
||
$(e).removeClass("btn-success").addClass("btn-outline-success");
|
||
}
|
||
SelectBuildings = new Array(0);
|
||
$('#building').find('.item').find('.btn-success').each(function () {
|
||
SelectBuildings.push($(this).attr("id"));
|
||
});
|
||
GetDevice();
|
||
}
|
||
|
||
//取得設備
|
||
function GetDevice() {
|
||
|
||
if ((SelectSub == undefined || SelectSub == null || SelectSub.length == 0)
|
||
|| (SelectBuildings == undefined || SelectBuildings == null || SelectBuildings.length == 0)) {
|
||
device_data = [];
|
||
RedrawDataTable();
|
||
return;
|
||
}
|
||
|
||
var sentdata = {
|
||
SelectSub: SelectSub,
|
||
SelectBuildings: SelectBuildings
|
||
}
|
||
|
||
var url = baseApiUrl + 'api/History/GetDevice';
|
||
$.ajax({
|
||
type: "POST",
|
||
url: url,
|
||
data: sentdata,
|
||
success: function (rel) {
|
||
if (rel.code != "0000") {
|
||
if (rel.code == "9999") {
|
||
toast_error(rel.msg);
|
||
}
|
||
else {
|
||
toast_warning(rel.msg);
|
||
}
|
||
return;
|
||
}
|
||
|
||
device_data = rel.data.map(function (item, index) {
|
||
item.is_selected = 0;
|
||
return item;
|
||
});
|
||
JudgeCurrentDeviceData();
|
||
RedrawDataTable();
|
||
}
|
||
})
|
||
}
|
||
|
||
//選擇設備至右方表格
|
||
function SelectOneDevice(building, main_name, sub_name, device_number, device_name, device_guid, e) {
|
||
// datatable.page(recordPage);
|
||
var tbody = ($(e).closest("tr"))[0].rowIndex - 1 + (recordPage - 1) * 20;
|
||
if (Math.ceil(datatable.rows().dt.activeRows.length / 20) == recordPage && (($(e).closest("tr"))[0].rowIndex - 1) == 0 && tbody + 1 == datatable.rows().dt.activeRows.length) {
|
||
if (recordPage != 1) {
|
||
recordPage--;
|
||
}
|
||
}
|
||
|
||
datatable.rows().remove(tbody);
|
||
|
||
JudgeCurrentDeviceData(device_guid);
|
||
RedrawDataTable(recordPage);
|
||
|
||
var selectobject = {
|
||
building: building,
|
||
device_number: device_number,
|
||
device_name: device_name,
|
||
main_name: main_name,
|
||
sub_name: sub_name,
|
||
device_guid: device_guid
|
||
}
|
||
select_data.push(selectobject);
|
||
|
||
RedrawSelectedDataTable();
|
||
}
|
||
|
||
//取消已選擇設備
|
||
function UnSelect(building, main_name, sub_name, device_number, device_name, device_guid, e) {
|
||
// Selectdatatable.page(selectrecordPage);
|
||
var tbody = ($(e).closest("tr"))[0].rowIndex - 1 + (selectrecordPage - 1) * 20;
|
||
if (Math.ceil(Selectdatatable.rows().dt.activeRows.length / 20) == selectrecordPage && (($(e).closest("tr"))[0].rowIndex - 1) == 0 && tbody + 1 == Selectdatatable.rows().dt.activeRows.length) {
|
||
if (selectrecordPage != 1) {
|
||
selectrecordPage--;
|
||
}
|
||
}
|
||
Selectdatatable.rows().remove(tbody);
|
||
|
||
select_data.filter(function (n, i) {
|
||
if (n.device_guid === device_guid) {
|
||
JudgeCurrentDeviceData(device_guid);
|
||
select_data.splice(i, 1);
|
||
}
|
||
});
|
||
|
||
RedrawDataTable(recordPage);
|
||
RedrawSelectedDataTable(selectrecordPage);
|
||
// datatable.rows().add([building, main_name, sub_name, device_number, device_name, `<button type="button" class="btn ml-2 btn-success" onclick="SelectOneDevice('${building}','${main_name}','${sub_name}','${device_number}','${device_name}','${device_guid}',this)"> 選擇</button>`]);
|
||
}
|
||
|
||
//清空已選擇
|
||
function CleanAll() {
|
||
|
||
select_data = [];
|
||
device_data.map(function (item, index) {
|
||
item.is_selected = 0
|
||
});
|
||
|
||
RedrawDataTable();
|
||
RedrawSelectedDataTable();
|
||
}
|
||
|
||
//判斷左邊table的資料來源是否被選擇
|
||
function JudgeCurrentDeviceData(selected_device_guid = "") {
|
||
|
||
if (device_data != undefined && device_data != null && device_data.length > 0) {
|
||
if (selected_device_guid != undefined && selected_device_guid != null && selected_device_guid != "") {
|
||
var temp_data = device_data.filter(x => x.device_guid == selected_device_guid);
|
||
if (temp_data != undefined && temp_data != null && temp_data.length > 0) {
|
||
if (temp_data[0].is_selected > 0) {
|
||
temp_data[0].is_selected = 0;
|
||
} else {
|
||
temp_data[0].is_selected = 1;
|
||
}
|
||
}
|
||
} else if (select_data != undefined && select_data != null && select_data.length > 0) {
|
||
select_data.forEach(function (selected_item, selected_index) {
|
||
var temp_data = device_data.filter(x => x.device_guid == selected_item.device_guid);
|
||
if (temp_data != undefined && temp_data != null && temp_data.length > 0) {
|
||
// if (temp_data[0].is_selected > 0) {
|
||
// temp_data[0].is_selected = 0;
|
||
// } else {
|
||
// temp_data[0].is_selected = 1;
|
||
// }
|
||
|
||
temp_data[0].is_selected = 1;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
//重新繪製設備列表
|
||
function RedrawDataTable(current_page = 1) {
|
||
var temp_data = device_data.filter(x => x.is_selected == 0);
|
||
|
||
var dataTable_data = $.map(temp_data, function (item, index) {
|
||
var object = {
|
||
building_name: item.building_name,
|
||
main_name: item.main_name,
|
||
sub_name: item.sub_name,
|
||
device_number: item.device_number,
|
||
device_name: item.device_name,
|
||
check: `<button type="button" class="btn ml-2 btn-success" onclick="SelectOneDevice('${item.building_name}','${item.main_name}','${item.sub_name}','${item.device_number}','${item.device_name}','${item.device_guid}',this)"> 選擇</button>`
|
||
}
|
||
return [Object.values(object)];
|
||
});
|
||
datatable.destroy();
|
||
datatable.init({
|
||
perPage: 20,
|
||
data: {
|
||
"data": dataTable_data
|
||
},
|
||
layout: {
|
||
top: "",
|
||
bottom: "{info}{pager}",
|
||
},
|
||
columns: [{
|
||
select: 3,
|
||
sort: "desc",
|
||
}]
|
||
});
|
||
// recordPage = 1;
|
||
datatable.on('datatable.page', function (page) {
|
||
recordPage = page;
|
||
});
|
||
|
||
if (current_page != 1) {
|
||
datatable.page(current_page);
|
||
}
|
||
}
|
||
|
||
//重新繪製已選擇設備
|
||
function RedrawSelectedDataTable(current_page = 1) {
|
||
var data = $.map(select_data, function (item, index) {
|
||
var object =
|
||
{
|
||
building: item.building,
|
||
device_number: item.device_number,
|
||
device_name: item.device_name,
|
||
check: `<button type="button" class="btn ml-2 btn-danger" onclick="UnSelect('${item.building}','${item.main_name}','${item.sub_name}','${item.device_number}','${item.device_name}','${item.device_guid}',this)">移除</button>`
|
||
};
|
||
return [Object.values(object)];
|
||
});
|
||
Selectdatatable.destroy();
|
||
Selectdatatable.init({
|
||
perPage: 20,
|
||
data: {
|
||
"data": data
|
||
},
|
||
layout: {
|
||
top: "",
|
||
bottom: "{info}{pager}",
|
||
}
|
||
});
|
||
Selectdatatable.on('datatable.page', function (page) {
|
||
selectrecordPage = page;
|
||
});
|
||
|
||
if (current_page != 1) {
|
||
datatable.page(current_page);
|
||
}
|
||
}
|
||
|
||
function LookRealTime() {
|
||
if (select_data.length == 0) {
|
||
toast_warning('請先選擇設備');
|
||
}
|
||
else {
|
||
var sentdata =
|
||
{
|
||
select_data: select_data
|
||
}
|
||
var url = baseApiUrl + 'api/History/LookRealTime';
|
||
$.ajax({
|
||
type: "POST",
|
||
url: url,
|
||
data: sentdata,
|
||
success: function (rel) {
|
||
if (rel.code != "0000") {
|
||
if (rel.code == "9999") {
|
||
toast_error(rel.msg);
|
||
}
|
||
else {
|
||
toast_warning(rel.msg);
|
||
}
|
||
return;
|
||
}
|
||
var itemdata = $.map(rel.data, function (item, index) {
|
||
// console.log(item);
|
||
var checkbox = "";
|
||
checkbox += `
|
||
<div class="custom-control custom-checkbox nucheck" >
|
||
<input type="checkbox" class="custom-control-input nucheck" onclick="checkitem(this,'${item.device_number}','${item.points}','${item.unit}')" id="${item.device_number}_${item.points}" >
|
||
<label class="custom-control-label" for="${item.device_number}_${item.points}"></label>
|
||
</div>`;
|
||
var object =
|
||
{
|
||
check: checkbox,
|
||
building_name: item.building_name,
|
||
device_number: item.device_number,
|
||
device_name: item.device_name,
|
||
item_name: item.item_name,
|
||
};
|
||
return [Object.values(object)];
|
||
});
|
||
Itemdatatable.destroy();
|
||
Itemdatatable.init({
|
||
searchable: false,
|
||
perPage: 10,
|
||
data: {
|
||
"data": itemdata
|
||
},
|
||
layout: {
|
||
top: "",
|
||
bottom: "{info}{pager}",
|
||
}
|
||
});
|
||
|
||
// $('#real-time-report-convas-div').empty();
|
||
// $('#real-time-report-convas-div').append('<figure class="highcharts-figure"><div id="real-time-report" style="height:600px;"></div></figure>');
|
||
|
||
intervalId = setInterval(function () {
|
||
myBaja.setSubscribeRealtimeReportDevices(selectitemjson);
|
||
}, 5000);
|
||
|
||
$('#RealTimemodal').show();
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
//開啟常見組合管理
|
||
function OpenCombinationModal() {
|
||
GetRealTimeCombination();
|
||
// var combination_temp_data = $.map(combinations, function (item, index) {
|
||
// var fun = `<div>
|
||
// <button class="btn btn-primary edit-btn" onclick="EditCombination('${item.combination_guid}')">修改</button>
|
||
// <button class="btn btn-danger del-btn" onclick="DeleteCombination('${item.combination_guid}')">刪除</button>
|
||
// </div>`;
|
||
// var obj = {
|
||
// building_name: `<div><a href="javascript:void(0)" onclick="GetCombinationDetailTable('${item.combination_guid}')">${item.combination_full_name}</a></div>`,
|
||
// device_amount: item.details.length,
|
||
// fun: fun,
|
||
// };
|
||
|
||
// return [Object.values(obj)];
|
||
// });
|
||
|
||
// combination_dataTable.destroy();
|
||
// combination_dataTable.init({
|
||
// perPage: 5,
|
||
// data: {
|
||
// "data": combination_temp_data
|
||
// },
|
||
// layout: {
|
||
// top: "",
|
||
// bottom: "{info}{pager}",
|
||
// },
|
||
// });
|
||
|
||
// combination_dataTable.on('datatable.page', function (page) {
|
||
// recordCombinationPage = page;
|
||
// });
|
||
|
||
$('#combination-modal').show();
|
||
}
|
||
|
||
//重新繪製常用組合
|
||
function RedrawCombinationDataTable(current_page = 1) {
|
||
var combination_temp_data = $.map(combinations, function (item, index) {
|
||
var fun = `<div>
|
||
<button class="btn btn-primary edit-btn" onclick="EditCombination('${item.combination_guid}')">修改</button>
|
||
<button class="btn btn-danger del-btn" onclick="DeleteCombination('${item.combination_guid}')">刪除</button>
|
||
</div>`;
|
||
var obj = {
|
||
building_name: `<div><a href="javascript:void(0)" onclick="GetCombinationDetailTable('${item.combination_guid}')">${item.combination_full_name}</a></div>`,
|
||
device_amount: item.details.length,
|
||
fun: fun,
|
||
};
|
||
|
||
return [Object.values(obj)];
|
||
});
|
||
|
||
combination_dataTable.destroy();
|
||
combination_dataTable.init({
|
||
perPage: 5,
|
||
data: {
|
||
"data": combination_temp_data
|
||
},
|
||
layout: {
|
||
top: "",
|
||
bottom: "{info}{pager}",
|
||
},
|
||
});
|
||
|
||
combination_dataTable.on('datatable.page', function (page) {
|
||
recordCombinationPage = page;
|
||
});
|
||
}
|
||
|
||
function GetCombinationDetailTable(selected_combination_guid) {
|
||
var temp_data = combinations.filter(x => x.combination_guid == selected_combination_guid)
|
||
|
||
temp_data[0]
|
||
|
||
var combination_detail_temp_data = $.map(temp_data[0].details, function (item, index) {
|
||
var obj = {
|
||
building_name: item.building_full_name,
|
||
main_system_full_name: item.main_system_full_name,
|
||
sub_system_full_name: item.main_system_full_name,
|
||
device_number: item.device_number,
|
||
device_name: item.device_full_name,
|
||
};
|
||
|
||
return [Object.values(obj)];
|
||
});
|
||
|
||
combination_detail_dataTable.destroy();
|
||
combination_detail_dataTable.init({
|
||
perPage: 5,
|
||
data: {
|
||
"data": combination_detail_temp_data
|
||
},
|
||
layout: {
|
||
top: "",
|
||
bottom: "{info}{pager}",
|
||
},
|
||
});
|
||
|
||
}
|
||
|
||
function checkitem(e, device_number, points, unit) {
|
||
if ($(e).hasClass('nucheck')) {
|
||
$(e).removeClass('nucheck').addClass('check');
|
||
var sobject =
|
||
{
|
||
device_number: device_number,
|
||
points: points,
|
||
unit: unit
|
||
}
|
||
selectitem.push(sobject);
|
||
}
|
||
else {
|
||
$(e).removeClass('check').addClass('nucheck');
|
||
selectitem.filter(function (n, i) {
|
||
if (n.device_number === device_number && n.points === points) {
|
||
selectitem.splice(i, 1);
|
||
}
|
||
});
|
||
}
|
||
|
||
selectitemjson = new Array(0);
|
||
|
||
$.each(selectitem, function (index, val) {
|
||
var inpoints = 0;
|
||
selectitemjson.filter(function (n, i) {
|
||
if (n.device_number === val.device_number) {
|
||
var point =
|
||
{
|
||
point_name: val.points,
|
||
unit: val.unit
|
||
}
|
||
n.points.push(point);
|
||
inpoints = 1;
|
||
}
|
||
});
|
||
|
||
if (inpoints == 0) {
|
||
var devices =
|
||
{
|
||
device_number: val.device_number,
|
||
points: new Array(0)
|
||
}
|
||
var point =
|
||
{
|
||
point_name: val.points,
|
||
unit: val.unit
|
||
}
|
||
devices.points.push(point);
|
||
selectitemjson.push(devices);
|
||
}
|
||
})
|
||
|
||
ResetHighChartsYAxis(selectitemjson);
|
||
}
|
||
|
||
function closemodal(modalid) {
|
||
|
||
$('#' + modalid).hide();
|
||
|
||
//移除定時抓取bajascript資料
|
||
if (intervalId != undefined && intervalId != null && intervalId > 0) {
|
||
clearInterval(intervalId)
|
||
intervalId = undefined;
|
||
}
|
||
|
||
//移除定時更新 Char 資料
|
||
if (chartIntervalId != undefined && chartIntervalId != null && chartIntervalId > 0) {
|
||
clearInterval(chartIntervalId)
|
||
chartIntervalId = undefined;
|
||
}
|
||
//移除 chart
|
||
chart.destroy();
|
||
chart = undefined;
|
||
series = [];
|
||
myYAxis = [];
|
||
mySeries = [];
|
||
global_history = [];
|
||
selectitem = [];
|
||
selectitemjson = [];
|
||
}
|
||
|
||
function CloseCombinationmodal(modalid) {
|
||
$('#' + modalid).hide();
|
||
}
|
||
|
||
//修改Y軸後，重新繪製
|
||
function ResetHighChartsYAxis(devices) {
|
||
var temp_series = [];
|
||
var temp_myYAxis = [];
|
||
devices.map(function (item, index) {
|
||
|
||
//判斷數組是否需要存在
|
||
mySeries.forEach(function (series, series_index) {
|
||
series_split = series.name.split(":")
|
||
if (series_split[0] == item.device_number && item.points.findIndex(x => x.point_name == series_split[1]) > -1) {
|
||
temp_series.push(series)
|
||
}
|
||
})
|
||
|
||
mySeries = temp_series;
|
||
|
||
//移除不需要存在的Y軸
|
||
myYAxis.forEach(function (yAxis, yAxis_index) {
|
||
if (item.points.findIndex(x => x.unit == yAxis.id) > -1) {
|
||
temp_myYAxis.push(yAxis);
|
||
}
|
||
});
|
||
|
||
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;
|
||
if (chart != undefined && chart != null) {
|
||
chart.destroy();
|
||
}
|
||
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) {
|
||
|
||
//移除定時更新 Char 資料
|
||
if (chartIntervalId != undefined && chartIntervalId != null && chartIntervalId > 0) {
|
||
clearInterval(chartIntervalId)
|
||
}
|
||
|
||
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;
|
||
|
||
chartIntervalId = 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) {
|
||
if (item != undefined && item.name != undefined && item.name != null) {
|
||
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: '即時趨勢圖'
|
||
},
|
||
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
|
||
});
|
||
}
|
||
|
||
//取得所有常用組合
|
||
function GetRealTimeCombination(redraw = false) {
|
||
var combination_url = baseApiUrl + 'api/History/RealTimeCombination';
|
||
var send_data = {
|
||
building_guid: default_building
|
||
};
|
||
$.ajax({
|
||
type: "POST",
|
||
url: combination_url,
|
||
data: send_data,
|
||
success: function (rel) {
|
||
if (rel.code != "0000") {
|
||
if (rel.code == "9999") {
|
||
toast_error(rel.msg);
|
||
}
|
||
else {
|
||
toast_warning(rel.msg);
|
||
}
|
||
return;
|
||
}
|
||
|
||
if (rel.data.length > 0) {
|
||
combinations = rel.data;
|
||
|
||
$('#real-time-combination').empty();
|
||
$('#real-time-combination').append('<option value="">請選擇</option>');
|
||
$.each(rel.data, function (index, val) {
|
||
$('#real-time-combination').append($("<option />").val(val.combination_guid).text(val.combination_full_name));
|
||
});
|
||
$('#real-time-combination').val($("#real-time-combination option:first").val())
|
||
|
||
if (redraw) {
|
||
RedrawCombinationDataTable();
|
||
// RedrawDataTable();
|
||
// RedrawSelectedDataTable();
|
||
}
|
||
} else {
|
||
$('#real-time-combination').empty();
|
||
$('#real-time-combination').append('<option value="" disabled>請先新增常用組合</option>');
|
||
$('#real-time-combination').val($("#real-time-combination option:first").val()).trigger('change');
|
||
}
|
||
|
||
if (selected_combination != undefined && selected_combination != null) {
|
||
$('#real-time-combination').val(selected_combination.combination_guid).trigger('change');
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
//儲存常用組合前處理
|
||
function SaveRealTimeCombination() {
|
||
|
||
if (select_data.length <= 0) {
|
||
toast_warning("請先選擇設備");
|
||
return;
|
||
}
|
||
|
||
Swal.fire(
|
||
{
|
||
title: "儲存常用組合",
|
||
text: "請選擇儲存覆蓋或另存新的常用組合?",
|
||
showDenyButton: true,
|
||
showCancelButton: true,
|
||
confirmButtonText: "儲存",
|
||
denyButtonText: "另存",
|
||
cancelButtonText: "取消"
|
||
}).then(function (result) {
|
||
|
||
var details = select_data.map(function (item, index) {
|
||
return { device_guid: item.device_guid, device_number: item.device_number }
|
||
});
|
||
|
||
if (result.isConfirmed) {
|
||
if (selected_combination != undefined && selected_combination != null) {
|
||
PostSaveRealTimeCombination(selected_combination.combination_guid, selected_combination.building_guid, "", 0, details);
|
||
}
|
||
else {
|
||
Swal.fire(
|
||
{
|
||
title: "請輸入常用組合名稱",
|
||
input: 'text',
|
||
showCancelButton: true,
|
||
confirmButtonText: "確定",
|
||
cancelButtonText: "取消"
|
||
}).then(function (result) {
|
||
if (result.isConfirmed) {
|
||
PostSaveRealTimeCombination("", default_building, result.value, 1, details);
|
||
}
|
||
});
|
||
}
|
||
} else if (result.isDenied) {
|
||
|
||
Swal.fire(
|
||
{
|
||
title: "請輸入常用組合名稱",
|
||
input: 'text',
|
||
showCancelButton: true,
|
||
confirmButtonText: "確定",
|
||
cancelButtonText: "取消"
|
||
}).then(function (result) {
|
||
if (result.isConfirmed) {
|
||
var send_data = {
|
||
Building_guid: default_building,
|
||
Combination_guid: "",
|
||
Full_name: result.value,
|
||
Save_type: 1,
|
||
Details: details
|
||
}
|
||
|
||
var url = baseApiUrl + 'api/History/SaveRealTimeCombination';
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
//儲存常用組合
|
||
function PostSaveRealTimeCombination(combination_guid = "", building_guid, full_name, save_type, details) {
|
||
var send_data = {
|
||
Combination_guid: combination_guid,
|
||
Building_guid: building_guid,
|
||
Full_name: full_name,
|
||
Save_type: save_type,
|
||
Details: details
|
||
}
|
||
|
||
var url = baseApiUrl + 'api/History/SaveRealTimeCombination';
|
||
|
||
$.ajax({
|
||
type: "POST",
|
||
url: url,
|
||
data: send_data,
|
||
success: function (rel) {
|
||
if (rel.code != "0000") {
|
||
if (rel.code == "9999") {
|
||
toast_error(rel.msg);
|
||
}
|
||
else {
|
||
toast_warning(rel.msg);
|
||
}
|
||
return;
|
||
}
|
||
toast_ok(rel.msg);
|
||
selected_combination = {
|
||
combination_guid: combination_guid,
|
||
building_guid: building_guid,
|
||
full_name: full_name,
|
||
details: details,
|
||
};
|
||
|
||
GetRealTimeCombination();
|
||
}
|
||
})
|
||
}
|
||
|
||
//修改常用組合名稱前處理
|
||
function EditCombination(combination_guid) {
|
||
|
||
selected_edit_combination = combinations.filter(x => x.combination_guid == combination_guid)[0];
|
||
|
||
if (selected_edit_combination != undefined && selected_edit_combination != null) {
|
||
$("#combination_name_modal").val(selected_edit_combination.combination_full_name)
|
||
$('#combination-edit-modal').show();
|
||
}
|
||
}
|
||
|
||
//修改常用組合名稱
|
||
function SaveEditCombination() {
|
||
var combination_name = $("#combination_name_modal").val();
|
||
|
||
if (combination_name != null && combination_name != "" && combination_name.length > 0) {
|
||
var url = baseApiUrl + "api/History/EditRealTimeCombination";
|
||
var send_data = {
|
||
combination_guid: selected_edit_combination.combination_guid,
|
||
full_name: combination_name
|
||
}
|
||
|
||
$.ajax({
|
||
type: "POST",
|
||
url: url,
|
||
data: send_data,
|
||
success: function (rel) {
|
||
if (rel.code != "0000") {
|
||
if (rel.code == "9999") {
|
||
toast_error(rel.msg);
|
||
}
|
||
else {
|
||
toast_warning(rel.msg);
|
||
}
|
||
return;
|
||
}
|
||
toast_ok(rel.msg);
|
||
GetRealTimeCombination(true);
|
||
$('#combination-edit-modal').hide();
|
||
}
|
||
})
|
||
}
|
||
else {
|
||
toast_warning("請填寫常用組合名稱");
|
||
}
|
||
}
|
||
|
||
//刪除常用組合
|
||
function DeleteCombination(combination_guid) {
|
||
var url = baseApiUrl + "api/History/DeleteRealTimeCombination";
|
||
var send_data = {
|
||
guid: combination_guid,
|
||
}
|
||
|
||
$.ajax({
|
||
type: "POST",
|
||
url: url,
|
||
data: send_data,
|
||
success: function (rel) {
|
||
if (rel.code != "0000") {
|
||
if (rel.code == "9999") {
|
||
toast_error(rel.msg);
|
||
}
|
||
else {
|
||
toast_warning(rel.msg);
|
||
}
|
||
return;
|
||
}
|
||
toast_ok(rel.msg);
|
||
GetRealTimeCombination(true);
|
||
}
|
||
})
|
||
} |