jay.chang/ibms-dome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Frontend][電梯系統] 卡片 niagara 狀態訂閱 | card 即時資訊 兩邊table介面建置

Browse Source
This commit is contained in:
dev01 2022-11-23 18:28:51 +08:00
parent 4166ddd3cc
commit 50488578fa
1 changed files with 96 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
Frontend/_sysElevator.html
View File

@ -1,17 +1,20 @@
<style> <style>
.elevator { .elevator {
background-color:#fff; background-color: #fff;
height:520px; height: 520px;
} }
table.elevator-build { table.elevator-build {
/*border: 1px double #000;*/ /*border: 1px double #000;*/
} }
table.elevator-build td { table.elevator-build td {
padding: 0.2rem 0.5rem; padding: 0.2rem 0.5rem;
height: 50px; height: 50px;
width: 45px; width: 45px;
border: 1px solid #000; border: 1px solid #000;
} }
elevator .elevator-body, elevator .elevator-header { elevator .elevator-body, elevator .elevator-header {
padding: 0.7rem; padding: 0.7rem;
} }
@ -31,7 +34,7 @@
<table id="floorTable" class="elevator-build m-auto"> <table id="floorTable" class="elevator-build m-auto">
</table> </table>
</div> </div>
</div> </div>
</div> </div>
<!--<div> <!--<div>
@ -886,7 +889,7 @@
subDevice(); subDevice();
}) })
function getFloDevList() { function getFloDevList() {
} }
//baja 訂閱設備 //baja 訂閱設備
@ -899,19 +902,24 @@
} }
myBaja.setSubscribeDevicesByBql(ordPath); myBaja.setSubscribeDevicesByBql(ordPath);
myBaja.setSubscribeDevicesCallBack(function (data) { myBaja.setSubscribeDevicesCallBack(function (data) {
console.log(data)
let matchDevice = allDevList.filter(x => x.device_number.split("_")[x.device_number.split("_").length - 1] == data.device_number)[0]; 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 norDevPoiName = matchDevice.device_normal_point_name;
let cloDevPoiName = matchDevice.device_close_point_name; let cloDevPoiName = matchDevice.device_close_point_name;
let errDevPoiName = matchDevice.device_error_point_name; let errDevPoiName = matchDevice.device_error_point_name;
//狀態
if (data.point_name == "ST") {
$(`#${matchDevice.device_number}_card [name=devStatus]`).text(data.value);
}
if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) { 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"); $(`#${matchDevice.device_number}_card`).attr("data-light-type", "normal").data("light-type", "normal");
} else if (data.point_name == cloDevPoiName && data.value == matchDevice.device_close_point_value) { } 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"); $(`#${matchDevice.device_number}_card`).attr("data-light-type", "close").data("light-type", "close");
} else if (data.point_name == errDevPoiName && data.value == matchDevice.device_error_point_value) { } 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"); $(`#${matchDevice.device_number}_card`).attr("data-light-type", "error").data("light-type", "error");
} }
setLightColor(); setLightColor();
}); });
@ -961,7 +969,7 @@
$.each(floObj.device_list, (index2, devObj) => { $.each(floObj.device_list, (index2, devObj) => {
allDevList.push(devObj); allDevList.push(devObj);
strHtml += `<div class="card text-white mx-1 mb-3 col-4 " name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" data-name="${devObj.full_name}" style="max-width: 18rem;"> strHtml += `<div id="${devObj.device_number}_card" class="card text-white mx-1 mb-3 col-4 " name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" data-name="${devObj.full_name}" style="max-width: 18rem;">
<div type="button" class="card-body"> <div type="button" class="card-body">
<span class="d-flex"> <span class="d-flex">
<h5 class="card-title">號機別 : ${devObj.full_name}</h5> <h5 class="card-title">號機別 : ${devObj.full_name}</h5>
@ -969,13 +977,13 @@
</span> </span>
<h4 class="d-flex justify-content-end">10F</h4> <h4 class="d-flex justify-content-end">10F</h4>
<span class="d-flex"> <span class="d-flex">
<p class="card-text">狀態 : ${devObj.device_status}</p> <p class="card-text">狀態 : <span name="devStatus"></span></p>
<i class="fas fa-caret-down fa-3x ml-auto animate__animated animate__flash animate__infinite animate__slower"></i> <i class="fas fa-caret-down fa-3x ml-auto animate__animated animate__flash animate__infinite animate__slower"></i>
</span> </span>
</div> </div>
</div>`; </div>`;
}) })
}) })
$("#eleCards").html(strHtml); $("#eleCards").html(strHtml);
initPopover(); initPopover();
@ -991,9 +999,9 @@
let devName = $(ele).data("name"); //full_name let devName = $(ele).data("name"); //full_name
$(ele).YTTooltip({ $(ele).YTTooltip({
html: `<div class="card m-1 border device-wrap"> html: `<div class="card m-1 border device-wrap">
<div class="card-header p-3"> <div class="card-header p-3">
<div class="position-absolute w-50" style="word-break: break-all;"> <div class="position-absolute w-50" style="word-break: break-all;">
<label class="m-0 mt-2">${devName}</label> <label class="m-0 mt-2">${devName}</label>
</div> </div>
@ -1008,7 +1016,10 @@
<div class="card-body p-2 tab-content"> <div class="card-body p-2 tab-content">
<div id="state" class="show active" data-tabname="cardTab" data-tabrole="child"> <div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
${drawStateTabBlo()} <div class="row">
<div class="col-xl-6">${drawImdStaBlock()}</div>
<div class="col-xl-6">${drawOpeModBlock()}</div>
</div>
</div> </div>
<div id="info" data-tabname="cardTab" data-tabrole="child"> <div id="info" data-tabname="cardTab" data-tabrole="child">
@ -1038,7 +1049,7 @@
}) })
} }
function setBuildFloor(floorCnt = 10,eleCnt = 3) { function setBuildFloor(floorCnt = 10, eleCnt = 3) {
let tbody = creEle("tbody"); let tbody = creEle("tbody");
//樓層從小到大 //樓層從小到大
let rfloors = floors.reverse(); let rfloors = floors.reverse();
@ -1051,10 +1062,10 @@
if (e == 1) { if (e == 1) {
td.addClass("t-black") td.addClass("t-black")
td.text(rfloors[f - 1]); td.text(rfloors[f - 1]);
} else if (e == eleCnt + 2) { } else if (e == eleCnt + 2) {
} }
else { else {
let div = creDiv(["d-flex", "justify-content-center", "align-items-end","h-100"]); 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>`) div.append(`<i class="fas fa-door-open fs-1-05"></i>`)
td.append(div) td.append(div)
} }
@ -1063,7 +1074,7 @@
tbody.append(tr); tbody.append(tr);
$("#floorTable_wrapper").append(eleCircle) $("#floorTable_wrapper").append(eleCircle)
} }
$("#floorTable").html(tbody); $("#floorTable").html(tbody);
@ -1095,6 +1106,73 @@
return strHtml; return strHtml;
} }
function drawImdStaBlock() {
let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`);
let tbody = tabEle.append("<tbody>");
let rows =
[
{ id: "devNum", text: "號機" },
{ id: "status", text: "狀態" },
{ id: "group", text: "組別" },
{ id: "weight", text: "載重" },
];
let cols = [
{ width: "30%" },
{ width: "40%" },
{ width: "30%" },
]
$.each(rows, (index, row) => {
let tr = $("<tr></tr>");
$.each(cols, (index2, col) => {
let td = $("<td></td>");
td.prop("id", row.id)
td.css("width", col.width)
if (index2 == 0) {
td.text(row.text);
}
tr.append(td);
})
tbody.append(tr);
})
return tabEle.outerHtml();
}
function drawOpeModBlock() {
let tabEle = $(`<table id="opeModTable" class="table table-bordered table-striped text-center m-0">`);
let tbody = tabEle.append("<tbody>");
let rows =
[
{ id: "imdStaTabDevNum", text: "自動" },
{ id: "imdStaTabDevNumStatus", text: "VIP" },
{ id: "imdStaTabDevNumGroup", text: "獨立運轉" },
{ id: "imdStaTabDevNumWeight", text: "手動" },
{ id: "imdStaTabDevNumWeight", text: "運轉保養" },
{ id: "imdStaTabDevNumWeight", text: "回歸完了" },
{ id: "imdStaTabDevNumWeight", text: "不服務樓層" },
];
let cols = [
{ width: "30%" },
{ width: "40%" },
{ width: "30%" },
]
$.each(rows, (index, row) => {
let tr = $("<tr></tr>");
$.each(cols, (index2, col) => {
let td = $("<td></td>");
td.prop("id", row.id)
td.css("width", col.width)
if (index2 == 0) {
td.text(row.text);
}
tr.append(td);
})
tbody.append(tr);
})
return tabEle.outerHtml();
}
function drawInfoTabBlo(devGuid) { function drawInfoTabBlo(devGuid) {
let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`); let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`);
let tbody = tabEle.append("<tbody>"); let tbody = tabEle.append("<tbody>");