MCUT_Supervisor/N4JS/js/site.js
2025-03-26 10:38:33 +08:00

442 lines
18 KiB
JavaScript

// Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
// for details on configuring this project to bundle and minify static web assets.
// Write your JavaScript code.
$(function () {
//驗證是否為空白
// jQuery.validator.addMethod("filterspace", function (value, element) {
// var str = value;
// var result = false;
// if (str.length > 0) {
// if ($.trim(str) != '') {
// result = true;
// }
// else {
// result = false;
// }
// }
// return result;
// }, "不可填入空白");
$.ajaxSetup({
//headers: {
// Authorization: 'Basic ' + localStorage.getItem('JWT-Authorization'),
// 'Access-Control-Allow-Origin': "*"
//},
beforeSend: function (xhr) {
xhr.setRequestHeader("Authorization", 'Bearer ' + localStorage.getItem('JWT-Authorization'));
},
xhrFields: {
withCredentials: true
},
//contentType: "application/json; charset=utf-8",
//完成请求后触发。即在success或error触发后触发
complete: function (XMLHttpRequest, status) {
// if ('400' == XMLHttpRequest.status) {
// window.location.href = "/Login/Index";
// }
},
})
});
var top_menu;
var selected_building, selected_mainsystem, selected_subsystem;
function GetMenu(account) {
var url = baseApiUrl + 'api/GetMenu';
var sentdata =
{
account: account
}
$.ajax({
type: "POST",
url: url,
data: sentdata,
success: function (rel) {
//rel = JSON.stringify(rel);
if (rel.code != "0000") {
if (rel.code == "9999") {
toast_error(rel.msg);
}
else {
toast_warning(rel.msg);
}
return;
}
else {
top_menu = rel;
$('#nav-bar-building').empty();
top_menu.data.forEach(function (building_item) {
var html = `<li class="nav-item hidden-sm-down mx-30" >
<a class="nav-link icon wb-order" style="font-size: 0.875rem; color:#fff" href="javascript:void(0)" onclick="ChangeSideMenu('${building_item.building_guid}',this)" role="button">
<i class="fal fa-building"></i>
<span>${building_item.full_name}</span>
</a>
</li>`
$('#nav-bar-building').append(html);
});
var emergency_flashing = '';
if (localStorage.getItem('emergency_alarm_device_number') != undefined && localStorage.getItem('emergency_alarm_device_number') != null && JSON.parse(localStorage.getItem('emergency_alarm_device_number')).length > 0) {
emergency_flashing = 'blink';
}
// $('#nav-bar-building').append(`<li class="nav-item hidden-sm-down mx-30">
// <a class="nav-link icon wb-order ${emergency_flashing}" id="btn-emergency" href="javascript:void(0)" role="button" onclick="Emergency()">
// <i class="fal fa-bell"></i>
// <span> 緊急應變</span>
// </a>
// </li>`);
$('#nav-bar-building').children('li').first().find('a').trigger('click');
}
if (rel.str_jwt != null) {
localStorage.setItem('JWT-Authorization', rel.str_jwt);
}
},
error: function (xhr, textStatus, thrownError) {
alert(textStatus);
}
});
}
function ChangeSideMenu(building_guid, e) {
localStorage.setItem('building_guid', building_guid);
selected_building = top_menu.data.filter(building => building.building_guid == building_guid)[0];
$('#nav-bar-building').find('.nav-item').removeClass('active');
$(e).parent('li').addClass("active");
$('#nav-bar-building').find('.emergency-btn').remove();
if (selected_building.common.indexOf('緊急應變') != -1) {
$('#nav-bar-building').append(`<li class="nav-item hidden-sm-down mx-30 emergency-btn">
<a class="nav-link icon wb-order" style="font-size: 0.875rem; color:#fff" href="javascript:void(0)" role="button" onclick="Emergency()">
<i class="fal fa-bell"></i>
<span> 緊急應變</span>
</a>
</li>`);
}
$('#js-side-menu').empty();
selected_building.main_system.forEach(function (main_system_item, main_system_item_index) {
var sub_html = '';
main_system_item.sub_system.forEach(function (sub_system_item) {
sub_html += `<li class="py-2" onclick="GetsubtoFloor('${sub_system_item.sub_system_guid}',this)">
<a href="javascript:void(0);" title="${sub_system_item.full_name}" class="waves-effect waves-themed" data-filter-tags="utilities disabled item">
<span class="nav-link-text" data-i18n="nav.utilities_disabled_item">${sub_system_item.full_name}</span>
</a>
</li>`;
});
var html = `
<div class="card" style="border: 0; border-radius: 0;">
<div class="card-header bg-primary" >
<a href="javascript:void(0);" onclick = "GetmaintoSub('${main_system_item.main_system_guid}')" class="card-title collapsed text-white" data-toggle="collapse" data-target="#main-to-sub-${main_system_item_index}" aria-expanded="false">
${main_system_item.full_name}
<span class="ml-auto">
<span class="collapsed-reveal">
<i class="fal fa-chevron-up fs-xl"></i>
</span>
<span class="collapsed-hidden">
<i class="fal fa-chevron-down fs-xl"></i>
</span>
</span>
</a>
</div>
<div id="main-to-sub-${main_system_item_index}" class="collapse" data-parent="#js-side-menu">
<div class="card-body bg-primary-900 px-0 py-0">
<ul class="nav-menu js-nav-built my-0">
${sub_html}
</ul>
</div>
</div>
</div>`;
$('#js-side-menu').append(html);
});
var sub_html = `
<li class="py-2" >
<a href="javascript:void(0);" onclick="Getrealtime()" title="即時趨勢" data-filter-tags="utilities disabled item">
<span class="nav-link-text" data-i18n="nav.utilities_disabled_item">即時趨勢</span>
</a>
</li>
<!--
<li class="py-2" >
<a href="javascript:void(0);" onclick="GetHistory()" title="歷史資料查詢(樣板)" data-filter-tags="utilities disabled item">
<span class="nav-link-text" data-i18n="nav.utilities_disabled_item">歷史資料查詢(樣板)</span>
</a>
</li>
<li class="py-2" >
<a href="javascript:void(0);" onclick="GetOperateHistory()" title="操作記錄(樣板)" data-filter-tags="utilities disabled item">
<span class="nav-link-text" data-i18n="nav.utilities_disabled_item">操作記錄(樣板)</span>
</a>
</li>-->
`;
var html = `
<div class="card" style="border: 0; border-radius: 0;">
<div class="card-header bg-primary">
<a href="javascript:void(0);" class="card-title collapsed text-white" data-toggle="collapse" data-target="#main-to-sub-common" aria-expanded="false">
數據趨勢
<span class="ml-auto">
<span class="collapsed-reveal">
<i class="fal fa-chevron-up fs-xl"></i>
</span>
<span class="collapsed-hidden">
<i class="fal fa-chevron-down fs-xl"></i>
</span>
</span>
</a>
</div>
<div id="main-to-sub-common" class="collapse" data-parent="#js-side-menu">
<div class="card-body bg-primary-900 px-0 py-0">
<ul class="nav-menu js-nav-built my-0">
${sub_html}
</ul>
</div>
</div>
</div>`;
$('#navbarColor02').empty();
$('#js-side-menu').append(html);
$('#js-side-menu .card > .card-header .card-title').first().trigger("click");
$('#js-side-menu .card > .card-header .card-title').first().removeClass("collapsed").attr("aria-expanded", "true");
$('#js-side-menu .card > .collapse').first().addClass("show");
$('#js-side-menu .card > .collapse >.card-body ul > li').first().trigger("click");
// $('#js-side-menu').append(
// `<section class="page-aside-section">
// <a class="nav-link bg-dark font-size-16" href="javascript:void(0)" onclick="RealtimeReport()" role="button"><i class="icon wb-minus-circle"
// aria-hidden="true"></i> 即時資訊</a>
// </section>`
// )
}
function GetmaintoSub(main) {
localStorage.setItem('main_system_guid', main);
selected_mainsystem = selected_building.main_system.filter(mainsystem => mainsystem.main_system_guid == main)[0];
}
function GetsubtoFloor(subsystem, e) {
$(e).parent().parent().parent().find('.active').removeClass('active');
$(e).parents('li').addClass('active');
$(e).addClass('active');
selected_subsystem = selected_mainsystem.sub_system.filter(sub_system => sub_system.sub_system_guid == subsystem)[0];
localStorage.setItem('sub_system_guid', subsystem);
var url = baseApiUrl + 'api/GetSubSystem';
var send_data = {
building_guid: selected_building.building_guid,
main_system_guid: selected_mainsystem.main_system_guid,
sub_system_guid: subsystem
}
$.ajax({
type: "POST",
url: url,
data: send_data,
success: function (rel) {
selected_subsystem = rel.data;
var floor_html = '';
$('#navbarColor02').empty();
if (selected_subsystem.drawing != 1) {
floor_html += `<li class="nav-item mr-3 active nav-floor" onclick="GetFloortoDrawing(${selected_subsystem.drawing}, '', '總覽', this, '${selected_subsystem.system_url}')">
<a class="nav-link" href="#"><i class="fal fa-bookmark"></i> 總覽 <span class="sr-only">(current)</span></a>
</li>`;
}
if (selected_subsystem.floors.length > 0) {
if (selected_subsystem.planimetric_click == 1) {
selected_subsystem.floors.forEach(function (floor_item) {
if (selected_subsystem.drawing == 1) {
if (selected_subsystem.planimetric_floor_guid == floor_item.floor_guid) {
floor_html += `<li class="nav-item mr-3 active nav-floor" id="nav-floor-${floor_item.floor_guid}" onclick="GetFloortoDrawing(${selected_subsystem.drawing}, '${floor_item.floor_guid}', '${floor_item.full_name}', this)">
<a class="nav-link" href="javascript:void(0);" ><i class="fal fa-bookmark"></i> ${floor_item.full_name}</a>
</li>`;
} else {
floor_html += `<li class="nav-item mr-3 nav-floor" id="nav-floor-${floor_item.floor_guid}" onclick="GetFloortoDrawing(${selected_subsystem.drawing}, '${floor_item.floor_guid}', '${floor_item.full_name}', this)">
<a class="nav-link" href="javascript:void(0);"><i class="fal fa-bookmark"></i> ${floor_item.full_name}</a>
</li>`;
}
} else {
floor_html += `<li class="nav-item mr-3 nav-floor" id="nav-floor-${floor_item.floor_guid}" onclick="GetFloortoDrawing(${selected_subsystem.drawing}, '${floor_item.floor_guid}', '${floor_item.full_name}', this)">
<a class="nav-link" href="javascript:void(0);"><i class="fal fa-bookmark"></i> ${floor_item.full_name}</a>
</li>`;
}
})
}
}
var htnl = `
<ul class="navbar-nav mr-auto pl-4 text-nowrap" id="navbarColor02_child">
${floor_html}
</ul>`;
$('#navbarColor02').append(htnl);
$('#navbarColor02_child').find('.active').trigger('click');
}
})
}
function GetFloortoDrawing(drawingType, floorguid, floorname, e, system_url = '') {
//alert(floorguid);
$(".nav-floor").removeClass('active');
if (floorguid == '') {
$(".nav-floor").first().addClass('active');
}
$(`#nav-floor-${floorguid}`).parents('li').addClass('active');
$(`#nav-floor-${floorguid}`).addClass('active');
$('#mainTitle').html(`${selected_building.full_name} - ${selected_mainsystem.full_name} - ${selected_subsystem.full_name} - ${floorname}`)
$('#pageContent').empty();
document.title = `${selected_subsystem.full_name} - 全方位監控系統`;
if (floorguid == "") {
if (drawingType == 4) {
$.get("views/RiserDiagram.html", function (data) {
$('#pageContent').html(data);
$("#customer-js").empty()
$("#customer-js").append(`<script src="js/jquery.keyframes.min.js"></script>`);
$("#customer-js").append(`<script src="js/RiserDiagram.js"></script>`);
});
} else if (drawingType == 2) {
if (system_url != undefined && system_url != null && system_url != "") {
system_url = system_url.replace("http://60.251.164.125:8080", "");
$('#pageContent').html(`
<div style="height:60vh;overflow: auto;">
<iframe src="${system_url}" width="100%" height="100%;" scrolling="no"></iframe>
</div>
`);
}
}
}
else {
//平面圖
localStorage.setItem('floor_guid', floorguid);
$('#pageContent').empty();
$('#pageContent').html(`
<div style="height:60vh;">
<iframe src="./_FloorMap.html?building_guid=${selected_building.building_guid}&main_system_guid=${selected_mainsystem.main_system_guid}&sub_system_guid=${selected_subsystem.sub_system_guid}&floor_guid=${floorguid}" width="100%" height="100%;" scrolling="no"></iframe>
</div>
`);
}
var tmp_main_guid = ['0E9BDB72-36D7-47B5-85E0-51DAE2EC03BC', '36D812A0-1C56-4B7B-B161-2BA1F9232122', 'F74C0BBD-CBAE-4B46-AFF6-48562D6DDA6F'];
var tmp_sub_guid = ['84BDE6CB-5CCD-49D4-BC7D-95DEE5EFC13B',
'DD0388E9-F2A4-4E9C-A7EE-258CE6DC04F5',
'2EFC794A-94F3-450E-AD75-2C2E81875DEC',
'440F7B76-D890-4EE2-8AFB-FE0A2B09A7EC',
'CA9FB750-55C9-408C-9821-EDEABB4F2F7F',
'7720DA6C-6017-4742-A29A-C90CC17FA489',
'F7535419-6C47-4AF0-9B15-A643A65039AC',
'F88A6553-30E3-447E-A67A-BA90FE51FBCF'];
if (tmp_main_guid.findIndex(x => x == selected_mainsystem.main_system_guid) > -1 &&
tmp_sub_guid.findIndex(x => x == selected_subsystem.sub_system_guid) > -1) {
//隱藏wrap - start
$(".navbar").hide();
$("#n4-alarm-table").hide();
$('#js-page-content').removeClass("mt-0");
$("#pageContent > div").css("height", "85vh")
//隱藏wrap - end
}
else {
//顯示wrap - start
$(".navbar").show();
$("#n4-alarm-table").show();
$('#js-page-content').addClass("mt-0");
$("#pageContent > div").css("height", "60vh")
//顯示wrap - end
}
}
function Emergency() {
window.open(`${baseApiUrl}Login?jwt=${localStorage.getItem('JWT-Authorization')}`);
}
function Getrealtime() {
$('#pageContent').empty();
$('#mainTitle').html("即時趨勢查詢");
$.get("views/RealTime.html", function (data) {
$('#pageContent').html(data);
});
$("#customer-js").empty()
$("#customer-js").append(`<script src="js/RealTime.js"></script>`);
//隱藏wrap - start
$(".navbar").hide();
$("#n4-alarm-table").hide();
//隱藏wrap - end
}
function GetHistory() {
$('#pageContent').empty();
$('#mainTitle').html("歷史資料查詢(樣板)");
system_url = "https://app.mockplus.com/run/prototype/K1gkp1eRWRN4/Mco38Sb8vlg/OgwLEUfuonQ?cps=collapse&ha=1";
$('#pageContent').html(`
<div style="height:80vh;">
<iframe src="${system_url}" width="100%" height="100%;" scrolling="no"></iframe>
</div>
`);
$("#customer-js").empty()
//隱藏wrap - start
$(".navbar").hide();
$("#n4-alarm-table").hide();
//隱藏wrap - end
}
function GetOperateHistory() {
$('#pageContent').empty();
$('#mainTitle').html("操作記錄(樣板)");
system_url = "https://app.mockplus.com/run/prototype/K1gkp1eRWRN4/Mco38Sb8vlg/T3q1eZHSaanA?cps=collapse&ha=1";
$('#pageContent').html(`
<div style="height:80vh;">
<iframe src="${system_url}" width="100%" height="100%;" scrolling="no"></iframe>
</div>
`);
$("#customer-js").empty()
$("#customer-js").append(`<script src="js/RealTime.js"></script>`);
//隱藏wrap - start
$(".navbar").hide();
$("#n4-alarm-table").hide();
//隱藏wrap - end
}
function RealtimeReport() {
$.get("views/RealtimeReport.html", function (data) {
$('#pageContent').html(data);
$("#customer-js").empty()
$("#customer-js").append(`<script src="js/RealtimeReport.js"></script>`);
});
}