MCUT_Supervisor/index3000p.html
2025-03-26 10:38:33 +08:00

555 lines
23 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<!-- <script type="text/javascript">
/* Activate smart panels */
$('#js-page-content').smartPanel();
</script> -->
<!-- <script src="js/jquery.min.js"></script> -->
<!-- add 2 -->
<!-- <script src="lib/vendors.bundle.js"></script>
<script src="lib/app.bundle.js"></script>
<script type="text/javascript">
/* Activate smart panels */
$('#js-page-content').smartPanel();
</script> -->
<!-- add 3 -->
<!-- <script src="lib/statistics/peity/peity.bundle.js"></script>
<script src="lib/statistics/flot/flot.bundle.js"></script>
<script src="lib/statistics/easypiechart/easypiechart.bundle.js"></script>
<script src="lib/datagrid/datatables/datatables.bundle.js"></script>
<script src="lib/notifications/toastr/toastr.min.js"></script>
<script src="lib/echarts.min.js"></script> -->
<!-- add 4 -->
<!-- <script src="js/yourteam/yourteam.ajax.class.js"></script>
<script src="js/yourteam/yourteam.jquery.datatables.js"></script>
<script src="js/yourteam/yourteam.utility.class.js"></script>
<script src="js/yourteam/plugins/yt-tooltip/yt-tooltip.js"></script>
<script src="js/yourteam/plugins/yt-tab/yt-tab.js"></script> -->
<script src="N4JS/js/bscriptReq.js"></script>
<script type='text/javascript'
src='/module/js/com/tridium/js/ext/require/require.min.js?version=1496767636459'></script>
<script type='text/javascript'>define('niagaraSystemProperties', function () {
return {
};
});
</script>
<script src="js/jquery.min.js"></script>
<!-- <script src="lib/vendors.bundle.js"></script>
<script src="lib/app.bundle.js"></script> -->
<!-- add 1 -->
<!-- <script src="js/toast.js"></script>
<script src="js/style.js"></script>
<script src="js/site.js"></script>
<script src="js/init.js"></script> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <script src="N4JS/js/jquery-3.1.1.min.js"></script> -->
<script src="js/bajascript/require.config.js"></script>
<!-- <script src="N4JS/js/require.config.js"></script>
<script src="N4JS/js/xml2json.js"></script> -->
<!-- <script src="N4JS/js/bajatest_ling.js"></script> -->
<!-- add 5 -->
<script src="js/FileSaver.js"></script>
<script src="js/n4js/alarmbaja.js"></script>
<script src="js/n4js/bajatest.js"></script>
<script src="js/n4js/historybaja.js"></script>
<script src="js/n4js/electricmeterbaja.js"></script>
</head>
<body>
<div id="main">
<!-- <a href="javascript:;" class=" ml-2 mb-0 " onclick="openiframe('http://localhost:8080/ord?station:%7Cslot:/TPE/B1/EE/E4/R2F/NA/WHT/N1|view:?fullScreen=true', 300, 300, 1)"> 詳細資料</a> -->
<a href="javascript:;" class="ml-2 mb-0" onclick="detailOnclick()">詳細</a>
<!-- <div><iframe src="http://localhost:8080/ord?station:%7Cslot:/TPE/B1/EE/E4/R2F/NA/WHT/N1|view:?fullScreen=true" width="100%" height="100%"></iframe></div> -->
<div><label>程式init 時間: </label>
<div id="init-timestamp" style="text-align: center;">&mdash;</div>
</div>
<div><label>讀取路徑完成時間: </label>
<div id="readPath-finish-timestamp" style="text-align: center;">&mdash;</div>
</div>
<div><label>讀取路徑完成-花費時間: </label>
<div id="readPath-finish-time" style="text-align: center;">&mdash;</div>
</div>
<div><label>表格開始時間: </label>
<div id="table-start-timestamp" style="text-align: center;">&mdash;</div>
</div>
<div><label>表格完成時間: </label>
<div id="table-finish-timestamp" style="text-align: center;">&mdash;</div>
</div>
<div><label>表格-花費時間 </label>
<div id="table-time" style="text-align: center;">&mdash;</div>
</div>
<div><label>訂閱開始時間: </label>
<div id="sub-start-timestamp" style="text-align: center;">&mdash;</div>
</div>
<div><label>當前訂閱點位: </label>
<div id="sub-point-name" style="text-align: center;">&mdash;</div>
</div>
<div><label>訂閱完成時間: </label>
<div id="sub-finish-timestamp" style="text-align: center;">&mdash;</div>
</div>
<div><label>訂閱-花費時間 </label>
<div id="sub-time" style="text-align: center;">&mdash;</div>
</div>
<div><label>改變點位名稱: </label>
<div id="update-point-name" style="text-align: center;">&mdash;</div>
</div>
<div><label>改變點位值: </label>
<div id="update-point-value" style="text-align: center;">&mdash;</div>
</div>
<div>
<label>所有點位</label>
<div id="render-points"></div>
</div>
<div style="display: none;">
<div><label>讀取資料夾開始時間: </label>
<div id="read-folder-start-timestamp" style="text-align: center;">&mdash;</div>
</div>
<div><label>讀取資料夾完成時間: </label>
<div id="read-folder-finish-timestamp" style="text-align: center;">&mdash;</div>
</div>
<div><label>讀取資料夾-花費時間: </label>
<div id="read-folder-time" style="text-align: center;">&mdash;</div>
</div>
<div><label>訂閱開始時間: </label>
<div id="folder-sub-start-timestamp" style="text-align: center;">&mdash;</div>
</div>
<div><label>當前訂閱點位: </label>
<div id="folder-sub-point-name" style="text-align: center;">&mdash;</div>
</div>
<div><label>訂閱完成時間: </label>
<div id="folder-sub-finish-timestamp" style="text-align: center;">&mdash;</div>
</div>
<div><label>訂閱-花費時間 </label>
<div id="folder-sub-time" style="text-align: center;">&mdash;</div>
</div>
</div>
<!-- test for table -->
<div class="card m-1 border device-wrap">
<div class="card-header p-2 px-3">
<div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
<button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
<button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
<button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
<button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
</div>
</div>
<div class="card-body p-2 tab-content">
<div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
<!-- ${drawStateTabBlo()} -->
</div>
<div id="info" data-tabname="cardTab" data-tabrole="child">
</div>
<div id="errRec" data-tabname="cardTab" data-tabrole="child">
</div>
<div id="opeRec" data-tabname="cardTab" data-tabrole="child">
<!-- ${drawOpeRecTabBlo()} -->
</div>
</div>
<table id="errRecTable">
<thead>
<tr>
<th>設備編號</th>
<th>發生原因</th>
<th>Ack確認</th>
<th>發生/復歸時間</th>
</tr>
</thead>
</table>
</div>
<!-- test for table end -->
</div>
<div class="modal" id="iframemodal">
<div class="modal-content">
<div class="modal-header">
<!-- <button type="button" class="close" onclick="closemodal('iframemodal')">
<span aria-hidden="true"><i class="fal fa-times"></i></span>
</button> -->
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
<script>
var myBaja;
$(function () {
//getHistoryDataByBaja("TPE_B1_EE_E4_R2F_NA_WHT_N1_A1", 1668927197000, 1668963661000, "空調設備", "Mitsubishi_Sup", callbackForHistory);
//getHistoryDataByBaja("TPE_B1_EE_E4_R2F_NA_WHT_N1_V1", 1669219200000, 1669273200000, "空調設備", "Mitsubishi_Sup", callbackForHistory);
//getAlarmByBaja(1667232000000, 1667404800000, true, false, "AlarmClass_ELEV", callbackForAlarm);
//getOneDeviceAlarmTop10ByBaja("TPE_B1_EE_E4_R2F_NA_WHT", callbackForAlarmTop10);//TPE_B1_ELEV_EL_R2F_NA
//testByBaja("", callbackFortest);
//getOneSystemAlarmStateByBaja("TPE_B1_LT_L1", callbackForOneSystemAlarmState);
//loadErrRecTable_bybaja_oriTable();
//subscriptionElectricMeter();//訂閱電表
//subscriptionElevator();//訂閱電梯
//getElevatorInfoByBaja("TPE/B1/ELEV/EL/R2F/BANK1/ELEV/N1", callbackForElevator);//電梯即時資訊
//test3000p("TPE_B1_EE_E4_R2F_NA_WHT_N1_V1", 1669219200000, 1669273200000, "空調設備", "Mitsubishi_Sup", callbackForHistory);
//getElectricMeterNoweDataByBaja("TPE/B1/EE/E4/R2F/NA/WHT/N1", callbackEMNow);
//getElectricMeterOneDayKwhByBaja("TPE/B1/EE/E4/R2F/NA/WHT/N1", 1669564800000, callbackOneDayKwh);//no
//getElectricMeterHourDataByBaja("TPE/B1/EE/E4/R2F/NA/WHT/N1", 1667232000000, 1667404799000, callbackHour);//no
//getOneSystemStateByBaja("TPE_B1_EE_E4", callbackSystemState);
//getElectricMeterKwhAvgDataByBaja("TPE_B1_EE_E4_R2F_NA_WHT_N1_KWH", "Mitsubishi_Sup", 1669737600000, 1669823999000, callbackKwhData);
//getElectricMeterHourDataByBaja("TPE_B1_EE_E4_R2F_NA_WHT_N1_KWH", "Mitsubishi_Sup", "2022-12-08T00:00:00", "2022-12-09T00:00:00", callbackHourData);
//getElectricMeterDayDataByBaja("TPE_B1_EE_E4_R2F_NA_WHT_N1_KWH", "Mitsubishi_Sup", "2022-12-08T00:00:00", "2022-12-09T00:00:00", callbackDayData);
//測試 首頁 各個系統 異常狀態與否
//var ele = ["TPE_B1_EE_E1", "TPE_B1_EE_E2", "TPE_B1_EE_E3", "TPE_B1_EE_E4", "TPE_B1_LT_L1", "TPE_B1_ME_M10", "TPE_B1_ME_M12", "TPE_B1_ELEV_EL", "TPE_B1_TEST_CT"];
//ele.forEach(element => getOneSystemStateByBaja(element, callbackSystemState));
//測試 訂閱 系統alarm
//subscriptionAlarm();
// getAlarmCountByBaja(callbackAlarmCount);//查詢異常數量
// getRecoverCountByBaja(callbackRecoverCount);//查詢復歸數量
// getCheckedAckedCountByBaja(callbackCheckActed);//查詢已確認異常數量
// getUnCheckedAckedCountByBaja(callbackUncheckActed);//查詢未確認異常數量
//getSystemAlarmByBaja(callbackAlarmSystem);//查詢正在發生異常的系統
//getOneDeviceAlarmByBaja("TPE_B1_ELEV_EL", 1670256000000, 1670428799000, true, false, "ELEV_EL_AlarmClass", callbackForOneDevice);
//getOneDeviceAlarmByBaja("TPE_B1_ELEV_EL", 1668873600000, 1670428799000, true, false, callbackForOneDevice);
// getAllDeviceAlarmByBaja(1668873600000, 1670428799000, true, false, callbackForOneDevice);
//getAlarmByBaja(1668873600000, 1670428799000, true, false, "ELEV_EL_AlarmClass", callbackForAlarm);
//getAlarmByBaja(1670428800000, 1670515199000, false, false, "ELEV_EL_AlarmClass", callbackForAlarm);
// getOneDeviceAlarmByBaja("TPE_B1_EE_E4", callbackForOneDevice);
//getAlarmForChartDataByBaja(callbackChart);
subscriptionElectricByPath();//訂閱特定路徑的電表
});
function callbackChart(result) {
console.log(result);
}
function callbackForOneDevice(result) {
console.log(result);
}
function callbackAlarmSystem(result) {
console.log(result);
}
function callbackUncheckActed(result) {
console.log("未確認異常數量:" + result);
}
function callbackCheckActed(result) {
console.log("已確認異常數量:" + result);
}
function callbackRecoverCount(result) {
console.log("復歸數量:" + result);
}
function callbackAlarmCount(result) {
console.log("異常數量:" + result);
}
function callbackDayData(result) {
console.log(result);
}
function callbackHourData(result) {
console.log(result);
}
function callbackKwhData(result) {
console.log(result);
}
function callbackSystemState(result) {
console.log(result);
}
function callbackHour(result) {
console.log(result);
}
function callbackOneDayKwh(result) {
console.log(result);
}
function callbackEMNow(result) {
console.log(result);
}
function callbackForElevator(result) {
console.log(result);
}
//---------- 電梯訂閱 example ------------------------------------------------
function subscriptionElevator() {//電梯 訂閱function
myBaja = new subscriptionDevices();
var ordPath = {
"building_tag": "B1",
"system_tag": "ELEV",
"name_tag": "EL",
}
myBaja.setSubscribeDevicesByBql(ordPath);
myBaja.setSubscribeDevicesCallBack(subscribeElevatorCallBack);
}
//訂閱電梯的回傳值
function subscribeElevatorCallBack(change_device, is_need_reset = false) {
if (change_device != undefined && change_device != null) {
console.log("device_number: " + change_device.device_number + ", point_name: " + change_device.point_name + ", value: " + change_device.value);
if(change_device.point_name == "CP") {
console.log("改變後 車廂位置:" + change_device.value + "樓");
}
else if(change_device.point_name == "RD") {
if(change_device.value == "UP") {
console.log("改變後 車廂方向:上樓");
}
else {
console.log("改變後 車廂方向:下樓");
}
}
else if(change_device.point_name == "DS") {
if(change_device.value == "trueText") {
console.log("改變後 門:開");
}
else {
console.log("改變後 門:關");
}
}
}
}
//---------------------------------------------------------------------------
//---------- 電錶訂閱 example ------------------------------------------------
function subscriptionElectricMeter() {//電表 訂閱function
myBaja = new subscriptionDevices();
var ordPath = {
"building_tag": "B1",
"system_tag": "EE",
"name_tag": "E4",
}
myBaja.setSubscribeDevicesByBql(ordPath);
myBaja.setSubscribeDevicesCallBack(subscribeElectricMeterCallBack);
}
//訂閱設備的回傳值,並塞到全域變數
function subscribeElectricMeterCallBack(change_device, is_need_reset = false) {
if (change_device != undefined && change_device != null) {
console.log("device_number: " + change_device.device_number + ", point_name: " + change_device.point_name + ", value: " + change_device.value);
}
// if (change_device != undefined && change_device != null) {
// var target_device = allDeviceRowData.filter(x => x.device_number == change_device.device_number)[0];
// if (target_device == undefined || target_device == null) {
// //新增
// obj = {
// device_number: change_device.device_number,
// points: [{
// name: change_device.point_name,
// value: change_device.value
// }]
// };
// allDeviceRowData.push(obj);
// }
// else {
// selected_device_point = target_device.points.find(x => x.name == change_device.point_name);
// if (selected_device_point != null) {
// selected_device_point.value = change_device.value;
// }
// else {
// obj = {
// name: change_device.point_name,
// value: change_device.value
// }
// target_device.points.push(obj);
// }
// }
// if(is_need_reset){
// resetData();
// }
// }
}
//---------------------------------------------------------------------------
//---------- alarm訂閱 example ------------------------------------------------
function subscriptionAlarm() {//電表 訂閱function
myBaja = new subscriptionAlarms();
var ordPathForAlarm = {
"building_tag": "B1",
"system_tag": "LT",
"name_tag": "L1"
}
myBaja.setSubscribeAlarmsByBql(ordPathForAlarm);
myBaja.setSubscribeAlarmsCallBack(subscribeAlarmCallBack);
}
//訂閱設備的回傳值,並塞到全域變數
function subscribeAlarmCallBack(change_device, is_need_reset = false) {
if (change_device != undefined && change_device != null) {
console.log("system: " + change_device.system + ", sourceState: " + change_device.sourceState);
}
}
//---------------------------------------------------------------------------
//---------- 首頁 訂閱 特定路徑的電表 ------------------------------------------------
function subscriptionElectricByPath() {//電表 訂閱function
myBaja = new subscriptionElectricmeter();
var ordPathForElectric = {
"devicePath": "TPE/B1/EE/E4/R2F/NA/WHT/N1"
}
myBaja.setSubscribeElectricmeterByBql(ordPathForElectric);
myBaja.setSubscribeElectricmeterCallBack(subscribeElectricCallBack);
}
//訂閱設備的回傳值,並塞到全域變數
function subscribeElectricCallBack(change_device, is_need_reset = false) {
if (change_device != undefined && change_device != null) {
if(change_device.point_name == "P")
console.log("device_number: " + change_device.device_number + ", point_name: " + change_device.point_name + ", value: " + change_device.value);
}
}
//---------------------------------------------------------------------------
function callbackForHistory(result)
{
console.log(result);
}
function callbackForAlarm(result)
{
console.log(result);
}
function callbackForAlarmTop10(result)
{
console.log(result);
}
function callbackForOneSystemAlarmState(result)
{
console.log(result);
}
// function callbackFortest(result)
// {
// console.log(result);
// }
function detailOnclick() {
var path = "http://localhost:8080/ord?station:%7Cslot:/TPE/B1/EE/E4/R2F/NA/WHT/N1|view:?fullScreen=true";
openiframe(path, 300, 400, 1);
//openiframe(path, 300, 300, 0);
}
function openiframe(iframeurl, width = 0, height = 0, mode = 0) {
if (mode == 0) {
$('#iframemodal > .modal-content').css("width", "80%");
$('#iframemodal > .modal-content').css("height", "85vh");
}
else {
if (width != undefined && width != null && width > 0) {
$('#iframemodal > .modal-content').css("width", width + "px");
} else {
$('#iframemodal > .modal-content').css("width", "80%");
}
if (height != undefined && height != null && height > 0) {
$('#iframemodal > .modal-content').css("height", height + "px");
} else {
$('#iframemodal > .modal-content').css("height", "85vh");
}
}
$('#iframemodal').find('.modal-body').empty();
var html ='<iframe src="';// + iframeurl + '" width="100%" height="100%"></iframe>';
html += iframeurl;
html += '" width="100%" height="100%"></iframe>';
$('#iframemodal').find('.modal-body').append(html);
$('#iframemodal').show();
}
//test table
function drawErrRecTabBlo() {
let strHtml = `<table id="errRecTable">
</table>`
return strHtml;
}
function loadErrRecTable_bybaja_oriTable(allPath) {
if (allPath != undefined && allPath != null) {
let _pathArr = allPath.split("_");//TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1
let _devicePath = _pathArr[0] + "_" + _pathArr[1] + "_" + _pathArr[2] + "_" + _pathArr[3] + "_" + _pathArr[4] + "_" + _pathArr[5];
getOneDeviceAlarmTop10ByBaja(_devicePath, callbackForErr);
}
else {
let _devicePath = "TPE_B1_ELEV_EL_R2F_NA_ELEV1";
getOneDeviceAlarmTop10ByBaja(_devicePath, callbackForErr);
}
}
function callbackForErr (result) {
console.log("--- call back Err --");
var eachTable = $('#errRecTable');
eachTable.empty();
eachTable.append('<tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th></tr>')
let json_obj = JSON.parse(result);
let data = json_obj['data']
for(var i = 0;i < json_obj['count'];i++)
{
eachTable.append(
'<tbody><tr>' +
'<td>' + data[i].uuid + '</td>' +
'<td>' + data[i].msgText + '</td>' +
'<td>' + (data[i].ackState = 1 ? data[i].normalTime : '未確認') + '</td>' +
'<td>' + data[i].timestamp + '</td>' +
'</tr></tbody>');
}
}
</script>
</body>
</html>