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

[Frontend][系統監控] 電梯 class 建置 | 切換2D/3D紐建置

Browse Source
This commit is contained in:
dev01 2022-11-28 12:38:19 +08:00
parent 8236dad38b
commit b871f5063e
5 changed files with 175 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
Frontend/_sysElevator.html
View File

@ -18,6 +18,13 @@
elevator .elevator-body, elevator .elevator-header {
padding: 0.7rem;
}
.elevator-item {
position: absolute;
width: 43px;
height: 47px;
border: 4px solid orange;
}
</style>
<div class="d-flex">
@ -27,16 +34,23 @@
<div style="position:relative ">
<div id="elevatorBlock" class="elevator">
<div class="elevator-header">
<div class="row m-0 align-items-center p-2 gap-3 btn-group btn-group-toggle">
<button class="btn btn-secondary btn-sm active" data-tabname="floShowType" data-target="#2dDiv">2D
</button>
<button class="btn btn-secondary btn-sm" data-tabname="floShowType" data-target="#3dDiv">3D
</button>
</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">
</div>
<div class="elevator-body d-flex align-items-center justify-content-center yt-table-container">
<div id="2dDiv" data-tabname="floShowType" data-tabrole="child">
<table id="floorTable" class="elevator-build m-auto">
</table>
</div>
<div id="3dDiv" data-tabname="floShowType" data-tabrole="child">
</div>
</div>
</div>
<!--<div>
<img src="img/elevator.jpg" class="img-fluid" style="min-height: 520px" />
</div>-->
@ -861,8 +875,6 @@
</div>
<script>
var floors = ["B2F", "B1F", "1F", "2F", "3F", "4F", "5F", "6F"];
var eleManTable = null;
var allDevList = [];
var subSeviceData = [];
@ -879,7 +891,7 @@
var zoomToggle = 3;
$(function () {
initChart();
setBuildFloor(floors.length, 3);
setBuildFloor();
setCards();
subDeviceSetStatus();
setEleManTable();
@ -1091,52 +1103,24 @@
}
//左側 2D 樓層 Table
function setBuildFloor(floorCnt = 10, eleCnt = 3) {
let tbody = creEle("tbody");
//樓層從小到大
let rfloors = floors.reverse();
let eleCircle = creDiv(["elevator-circle"]);
//樓層表格建置
for (let f = 1; f <= floorCnt; f++) {
let tr = creEle("tr");
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)
function setBuildFloor() {
let options = {
floors: [
{ name: "B2F", sort: 0 },
{ name: "B1F", sort: 1 },
{ name: "1F", sort: 2 },
{ name: "2F", sort: 3 },
{ name: "3F", sort: 4 },
{ name: "4F", sort: 5 },
{ name: "5F", sort: 6 },
{ name: "6F", sort: 7 },
],
}
$("#floorTable").html(tbody);
$("#floorTable tbody tr").each((index, tr) => {
$(tr).find("td:eq(0)").css("border-left", "0");
$(tr).find("td:eq(-1)").css("border-right", "0");
if (index == 0) {
$(tr).find("td").each((index, td) => {
$(td).css("border-top", "0");
})
} else if (index == $("#floorTable tbody tr").length - 1) {
$(tr).find("td").each((index, td) => {
$(td).css("border-bottom", "0");
})
}
})
let eleObj = new ElevatorHandler("#floorTable", options);
}
function drawStateTabBlo(devNum) {
@ -1426,7 +1410,7 @@
onEvent("click", `#${scheSelector}`, function () {
let devNumPath = devNum.split("_").join("/");
let point = $(this).data("point");
let ifHtml = `<iframe src="http://localhost:8080/ord?station:%7Cslot:${devNumPath}/Sch_${point}|view:?fullScreen=true" width="100%" height="100%" style="height:30rem"></iframe>`
let ifHtml = `<iframe src="/ord?station:%7Cslot:${devNumPath}/Sch_${point}|view:?fullScreen=true" width="100%" height="100%" style="height:30rem"></iframe>`
$("#bajaSche").html(ifHtml);
})
})
@ -1443,7 +1427,7 @@
modalTogDiv("#eleManModal", "#tabDiv", "#detMasDiv", "next", function () {
subDeviceSetEleManNotSerFloor(master);
let devNumPath = subData.device_number?.split("_").join("/");
let ifHtml = `<iframe src="http://localhost:8080/ord?station:%7Cslot:${devNumPath}/Sch_FLS|view:?fullScreen=true" width="100%" height="100%" style="height:30rem"></iframe>`
let ifHtml = `<iframe src="/ord?station:%7Cslot:${devNumPath}/Sch_FLS|view:?fullScreen=true" width="100%" height="100%" style="height:30rem"></iframe>`
$("#bajaMasSche").html(ifHtml);
})

4
Frontend/index.html
View File

@ -2701,8 +2701,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
}
$.each(tolSubList, (idx, sub) => {
console.log("sub",sub,idx)
//sub.unsubscribeAll();
//sub.detach();
sub.unsubscribeAll();
sub.detach();
})
$("#app").load(`_${page}.html`, loadCallback);
})

100
Frontend/js/site.js
View File

@ -107,3 +107,103 @@ function creOption(text = null, value = null, data = {}, attr = {}, cls = [], na
attr = value != null ? attr.value = value : attr;
return creEle("option", text, id, name, cls, data, attr);
}
class ElevatorHandler {
constructor(ele, option = {}) {
this.ele = ele;
this.eleId = "";
this.eleWra = $("<div></div>");
this.speed = 0;
this.monStatus = 0; // 0=no 1=up 2=down
this.floorHeight = typeof option.fHeight == "undefined" ? 50 : option.fHeight;
this.floorWidth = typeof option.fWidth == "undefined" ? 45 : option.fWidth;
this.floors = typeof option.floors == "undefined" ? [{}] : option.floors;
this.eleCnt = typeof option.eleCnt == "undefined" ? 3 : option.eleCnt;
this.init();
}
init = function () {
this.setTabWra();
this.setTabFloor();
}
// 設置 wrapper
setTabWra = function () {
let id = $(this.ele).prop("id");
this.eleId = id;
if ($(this.ele).parent(".elevator-table-wrapper").length != 0) {
$(this.ele).unwrap(".elevator-table-wrapper");
}
let wrapper = creDiv(["elevator-table-wrapper"], null, `${id}_wrapper`);
$(this.ele).wrap(wrapper);
this.eleWra = wrapper;
}
// 設置 table 樓層
setTabFloor = function () {
let _w = this.floorWidth, _h = this.floorHeight;
let thead = creEle("thead"), tbody = creEle("tbody");
let _floors = this.floors, _ele = this.ele, _eleCnt = this.eleCnt;
//樓層從小到大
_floors = _floors.oSort("sort").reverse().map(x => x.name);
let theadTr = creEle("tr");
for (let e = 1; e <= _eleCnt + 2; e++) {
let th = creEle("th");
th.css({ "width": `${_w}px`, "height": `${_h}px` });
if (e != 1 && e != _eleCnt + 2) {
// 電梯方框
let span = creEle("span", null, "elevator-item-" + (e - 1), null, ["elevator-item"]);
span.css({ "width": `${_w - 3}px`, "height": `${_h - 3}px`, "top": `1.5px`})
th.append(span);
}
theadTr.append(th);
}
thead.css("position", "absolute");
thead.append(theadTr);
//樓層表格建置 tbody
for (let f = 1; f <= _floors.length; f++) {
let tr = creEle("tr");
for (let e = 1; e <= _eleCnt + 2; e++) {
let td = creEle("td");
td.css({ "width": `${_w}px`, "height": `${_h}px` });
if (e == 1) {
td.addClass("t-black")
td.text(_floors[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);
}
$(_ele).append(thead);
$(_ele).append(tbody);
//表格外圍無框線
$(_ele).find("tbody tr").each((index, tr) => {
$(tr).find("td:eq(0)").css("border-left", "0");
$(tr).find("td:eq(-1)").css("border-right", "0");
if (index == 0) {
$(tr).find("td").each((index, td) => {
$(td).css("border-top", "0");
})
} else if (index == $("#floorTable tbody tr").length - 1) {
$(tr).find("td").each((index, td) => {
$(td).css("border-bottom", "0");
})
}
})
}
}

13
Frontend/js/style.js
View File

@ -51,6 +51,19 @@ Array.prototype.DistinctBy = function (...otherCol) {
return result;
}
Array.prototype.nSort = function () {
function compareNumbers(a, b) {
return a - b;
}
return this.sort(compareNumbers);
}
Array.prototype.oSort = function (key) {
function compareNumbers(a, b) {
return a[key] - b[key];
}
return this.sort(compareNumbers);
}
BigInt.prototype.toJSON = function () { return this.toString() }
$.fn.classList = function () { return this[0].className.split(/\s+/); };

6
Frontend/js/yourteam/plugins/yt-tooltip/yt-tooltip.js
View File

@ -71,7 +71,7 @@ $.fn.YTTooltip = function (option) {
obj.tooltipDiv = clone;
//顯示 tooltip
$(clone).css({ "display": display, "position": "absolute" });
obj.onShow ? obj.onShow(clone,obj.ele,obj) : "";
//tooltip 高寬
let toolWidth = $(clone)[0].offsetWidth;
let toolHeight = $(clone)[0].offsetHeight;
@ -95,7 +95,9 @@ $.fn.YTTooltip = function (option) {
} else if (obj.direction == "top" || obj.direction == "bottom"){
$(clone).css({ left: offset.left, top: top});
}
setTimeout(function () {
obj.onShow ? obj.onShow(clone, obj.ele, obj) : "";
}, 10)
event();
} else {
obj.hideTooltipEvent(tooId);