[Frontend][系統監控] niagara 訂閱串接
This commit is contained in:
parent
acd7906d2c
commit
2c248f485a
@ -8,8 +8,8 @@
|
||||
}
|
||||
table.elevator-build td {
|
||||
padding: 0.2rem 0.5rem;
|
||||
height: 40px;
|
||||
width: 55px;
|
||||
height: 50px;
|
||||
width: 45px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
elevator .elevator-body, elevator .elevator-header {
|
||||
@ -27,10 +27,12 @@
|
||||
|
||||
</div>
|
||||
<div class="elevator-body d-flex align-items-center justify-content-center h-100 yt-table-container">
|
||||
<div id="floorTable_wrapper" class="elevator-build-container">
|
||||
<table id="floorTable" class="elevator-build m-auto">
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--<div>
|
||||
<img src="img/elevator.jpg" class="img-fluid" style="min-height: 520px" />
|
||||
@ -892,15 +894,24 @@
|
||||
for (let e = 1; e <= eleCnt + 2; e++) {
|
||||
let td = creEle("td");
|
||||
if (e == 1) {
|
||||
td.addClass("t-black")
|
||||
td.text(rfloors[f - 1]);
|
||||
} else if (e == eleCnt + 2) {
|
||||
}
|
||||
else {
|
||||
let div = creDiv(["d-flex", "justify-content-center", "align-items-end","h-100"]);
|
||||
div.append(`<i class="fas fa-door-open fs-1-05"></i>`)
|
||||
td.append(div)
|
||||
}
|
||||
tr.append(td);
|
||||
}
|
||||
tbody.append(tr);
|
||||
$("#floorTable_wrapper").append(eleCircle)
|
||||
}
|
||||
|
||||
$("#floorTable").html(tbody);
|
||||
|
||||
|
||||
$("#floorTable tbody tr").each((index, tr) => {
|
||||
|
||||
$(tr).find("td:eq(0)").css("border-left", "0");
|
||||
@ -919,61 +930,4 @@
|
||||
|
||||
}
|
||||
|
||||
function initYTTable(element) {
|
||||
let obj = { init: null, SetContainer: null, Ele: element || $(".yt-table") };
|
||||
|
||||
obj.init = function () {
|
||||
this.SetContainer();
|
||||
this.SetBorder();
|
||||
this.SetEndCellRightBorderRemove();
|
||||
this.SetEndCellBottomBorderRemove();
|
||||
}
|
||||
|
||||
obj.SetContainer = function () {
|
||||
$(this.Ele).each(function (index, value) {
|
||||
if ($(value).parent(".yt-table-container").length != 0) {
|
||||
$(value).unwrap(".yt-table-container");
|
||||
}
|
||||
let strHtml = $(`<div class="yt-table-container"></div>`);
|
||||
$(value).wrap(strHtml);
|
||||
$(value).parent(".yt-table-container").parent().addClass("table-div");
|
||||
})
|
||||
}
|
||||
|
||||
obj.SetBorder = function () {
|
||||
console.log("123123", $(this.Ele))
|
||||
$(`${$(this.Ele).selector}.th-td-br th,${$(this.Ele).selector}.th-td-br td`).css("border-right", "1px solid #adadad");
|
||||
$(`${$(this.Ele).selector}.th-bd thead th`).css("border-bottom", "1px solid #adadad");
|
||||
$(`${$(this.Ele).selector}.td-bd tbody td`).css("border-bottom", "1px solid #adadad");
|
||||
}
|
||||
|
||||
obj.SetEndCellRightBorderRemove = function () {
|
||||
let notBorder = 0;
|
||||
$(`${$(this.Ele).selector} thead th:last-child,.yt-table tbody td:last-child`).each(function (index, value) {
|
||||
if (index >= notBorder) {
|
||||
$(value).css("border-right", "0px");
|
||||
}
|
||||
if ($(value).attr("rowspan")) {
|
||||
let rowspan = parseInt($(value).attr("rowspan"));
|
||||
notBorder = index + rowspan;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
obj.SetEndCellBottomBorderRemove = function () {
|
||||
$(`${$(this.Ele).selector} tr:last-child td`).each(function (index, value) {
|
||||
$(value).css("border-bottom", "0px");
|
||||
})
|
||||
|
||||
$(`${$(this.Ele).selector} tr td[rowspan]`).each(function (index, value) {
|
||||
let tr = $(value).closest("tr");
|
||||
let oriTrInd = $(tr).index();
|
||||
let lastTrInd = $(tr).parent("tbody").find("tr:last-child").index();
|
||||
if (lastTrInd - oriTrInd == $(value).prop("rowspan") - 1) {
|
||||
$(value).css("border-bottom", "0px");
|
||||
}
|
||||
})
|
||||
}
|
||||
obj.init();
|
||||
}
|
||||
</script>
|
||||
@ -46,12 +46,43 @@
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
var allDevList = [];
|
||||
$(function () {
|
||||
getFloDevList();
|
||||
setLightColor();
|
||||
|
||||
initSub();
|
||||
})
|
||||
|
||||
function initSub() {
|
||||
myBaja = new subscriptionDevices();
|
||||
var ordPath = {
|
||||
"building_tag": pageAct.buiTag,
|
||||
"system_tag": pageAct.sysMainTag,
|
||||
"name_tag": pageAct.sysSubTag,
|
||||
}
|
||||
myBaja.setSubscribeDevicesByBql(ordPath);
|
||||
myBaja.setSubscribeDevicesCallBack(function (data) {
|
||||
|
||||
let matchDevice = allDevList.filter(x => x.device_number.split("_")[x.device_number.split("_").length - 1] == data.device_number)[0];
|
||||
let norDevPoiName = matchDevice.device_normal_point_name;
|
||||
let cloDevPoiName = matchDevice.device_close_point_name;
|
||||
let errDevPoiName = matchDevice.device_error_point_name;
|
||||
|
||||
if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) {
|
||||
//顯示正常燈號
|
||||
$(`#${matchDevice.device_number}_status`).attr("data-light-type", "normal").data("light-type", "normal");
|
||||
|
||||
} else if (data.point_name == cloDevPoiName && data.value == matchDevice.device_close_point_value) {
|
||||
$(`#${matchDevice.device_number}_status`).attr("data-light-type", "close").data("light-type", "close");
|
||||
} else if (data.point_name == errDevPoiName && data.value == matchDevice.device_error_point_value) {
|
||||
$(`#${matchDevice.device_number}_status`).attr("data-light-type", "error").data("light-type", "error");
|
||||
}
|
||||
setLightColor();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
//function loadStaLight() {
|
||||
// if (pageAct.sysSubObj.device_normal_color) {
|
||||
// $("#sysNorLight").css("background-color", pageAct.sysSubObj.device_normal_color);
|
||||
@ -108,7 +139,7 @@
|
||||
|
||||
$.each(floObj.device_list, (index2, devObj) => {
|
||||
console.log(">>>> url: " + baseImgUrl + " , img: " + varPathImg + ", icon: " + devObj.device_master_icon);
|
||||
|
||||
allDevList.push(devObj);
|
||||
strHtml += `<div class="card m-1 border device-wrap" style="width:300px">
|
||||
<div class="card-body p-2">
|
||||
<div class="d-flex mb-2">
|
||||
@ -120,7 +151,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex mb-0 mt-2 align-items-center">
|
||||
<span id="${devObj.device_number}_status" class="circle-light" data-light-type="normal"></span>
|
||||
<span id="${devObj.device_number}_status" class="circle-light"></span>
|
||||
<span class="d-none">即時功率：</span>
|
||||
<a href="javascript:;" name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" data-name="${devObj.full_name}" class=" ml-2 mb-0 ">詳細資料</a>
|
||||
</div>
|
||||
@ -195,7 +226,10 @@
|
||||
let devName = $(ele).data("name"); //full_name
|
||||
$(ele).YTTooltip({
|
||||
html: `<div class="card m-1 border device-wrap">
|
||||
<div class="card-header p-3">
|
||||
<div class="col-12 p-0 row justify-content-end m-0">
|
||||
<button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
|
||||
</div>
|
||||
<div class="card-header p-2 px-3">
|
||||
|
||||
<div class="position-absolute w-50" style="word-break: break-all;">
|
||||
<label class="m-0 mt-2">${devName}</label>
|
||||
@ -205,7 +239,6 @@
|
||||
<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>
|
||||
<button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-2 tab-content">
|
||||
@ -234,7 +267,8 @@
|
||||
$("#info").html(drawInfoTabBlo(devGuid));
|
||||
loadOpeRecTable(devGuid);
|
||||
//loadErrRecTable2($(oriEle).data("number"));
|
||||
loadErrRecTable();
|
||||
//loadErrRecTable();
|
||||
loadErr($(oriEle).data("number"));
|
||||
}
|
||||
})
|
||||
})
|
||||
@ -328,6 +362,58 @@
|
||||
errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "tpi");
|
||||
}
|
||||
|
||||
function loadErr(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 {
|
||||
console.log("no device");
|
||||
}
|
||||
}
|
||||
|
||||
function callbackForErr(result) {
|
||||
let tag = "#errRecTable";
|
||||
let datas;
|
||||
|
||||
let column_defs = [
|
||||
{ "targets": [0], "width": "15%", "sortable": true },
|
||||
{ "targets": [1], "width": "25%", "sortable": true },
|
||||
{ "targets": [2], "width": "25%", "sortable": true },
|
||||
{ "targets": [3], "width": "35%", "sortable": true },
|
||||
];
|
||||
|
||||
let columns = [
|
||||
{
|
||||
"title": "異常ID",
|
||||
"data": "uuid",
|
||||
|
||||
},
|
||||
{
|
||||
"title": "異常原因",
|
||||
"data": "msgText",
|
||||
},
|
||||
{
|
||||
"title": "ACK確認",
|
||||
"data": "ackState",
|
||||
},
|
||||
{
|
||||
"title": "發生/完成時間",
|
||||
"data": "normalTime",
|
||||
"render": function (data, type, row) {
|
||||
return row.timestamp + "<br>" + data;
|
||||
},
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
let json_object = JSON.parse(result);
|
||||
datas = json_object['data'];
|
||||
errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "tpi");
|
||||
|
||||
}
|
||||
|
||||
//function loadErrRecTable2(allPath) {
|
||||
// if (allPath != undefined && allPath != null) {
|
||||
// let _pathArr = allPath.split("_");//TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1
|
||||
|
||||
@ -2459,6 +2459,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<script src="js/n4js/bajatest.js"></script>
|
||||
<script src="js/bajascript/require.config.js"></script>
|
||||
<script src="js/FileSaver.js"></script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user