[Frontend][電梯系統] 卡片 niagara 狀態訂閱 | card 即時資訊 兩邊table介面建置
This commit is contained in:
parent
4166ddd3cc
commit
50488578fa
@ -1,17 +1,20 @@
|
||||
<style>
|
||||
.elevator {
|
||||
background-color:#fff;
|
||||
height:520px;
|
||||
background-color: #fff;
|
||||
height: 520px;
|
||||
}
|
||||
|
||||
table.elevator-build {
|
||||
/*border: 1px double #000;*/
|
||||
}
|
||||
|
||||
table.elevator-build td {
|
||||
padding: 0.2rem 0.5rem;
|
||||
height: 50px;
|
||||
width: 45px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
elevator .elevator-body, elevator .elevator-header {
|
||||
padding: 0.7rem;
|
||||
}
|
||||
@ -31,7 +34,7 @@
|
||||
<table id="floorTable" class="elevator-build m-auto">
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--<div>
|
||||
@ -886,7 +889,7 @@
|
||||
subDevice();
|
||||
})
|
||||
function getFloDevList() {
|
||||
|
||||
|
||||
}
|
||||
|
||||
//baja 訂閱設備
|
||||
@ -899,19 +902,24 @@
|
||||
}
|
||||
myBaja.setSubscribeDevicesByBql(ordPath);
|
||||
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 norDevPoiName = matchDevice.device_normal_point_name;
|
||||
let cloDevPoiName = matchDevice.device_close_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) {
|
||||
//顯示正常燈號
|
||||
$(`#${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) {
|
||||
$(`#${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) {
|
||||
$(`#${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();
|
||||
});
|
||||
@ -961,7 +969,7 @@
|
||||
$.each(floObj.device_list, (index2, 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">
|
||||
<span class="d-flex">
|
||||
<h5 class="card-title">號機別 : ${devObj.full_name}</h5>
|
||||
@ -969,13 +977,13 @@
|
||||
</span>
|
||||
<h4 class="d-flex justify-content-end">10F</h4>
|
||||
<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>
|
||||
</span>
|
||||
</div>
|
||||
</div>`;
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
$("#eleCards").html(strHtml);
|
||||
initPopover();
|
||||
@ -991,9 +999,9 @@
|
||||
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="position-absolute w-50" style="word-break: break-all;">
|
||||
<label class="m-0 mt-2">${devName}</label>
|
||||
</div>
|
||||
@ -1008,7 +1016,10 @@
|
||||
<div class="card-body p-2 tab-content">
|
||||
|
||||
<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 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 rfloors = floors.reverse();
|
||||
@ -1051,10 +1062,10 @@
|
||||
if (e == 1) {
|
||||
td.addClass("t-black")
|
||||
td.text(rfloors[f - 1]);
|
||||
} else if (e == eleCnt + 2) {
|
||||
} else if (e == eleCnt + 2) {
|
||||
}
|
||||
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>`)
|
||||
td.append(div)
|
||||
}
|
||||
@ -1063,7 +1074,7 @@
|
||||
tbody.append(tr);
|
||||
$("#floorTable_wrapper").append(eleCircle)
|
||||
}
|
||||
|
||||
|
||||
$("#floorTable").html(tbody);
|
||||
|
||||
|
||||
@ -1095,6 +1106,73 @@
|
||||
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) {
|
||||
let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`);
|
||||
let tbody = tabEle.append("<tbody>");
|
||||
|
||||
Loading…
Reference in New Issue
Block a user