Merge branch 'master' of https://gitea.mjm-staging.developers-homelab.net/BIMS/BIMS
This commit is contained in:
commit
2c3704f5a6
File diff suppressed because it is too large
Load Diff
@ -25,9 +25,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-xl-7">
|
||||
<!--<img src="img/clouds.png" class="img-fluid" style="min-height: 520px;">-->
|
||||
<!--<a href="javascript:;" data-toggle="modal" data-target=".default-example-modal-right-lg">
|
||||
<span class="badge border border-light bg-primary-700 position-absolute pos-top pos-left"><i class="fal fa-image fa-3x"></i></span></a>-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -38,7 +36,7 @@
|
||||
|
||||
|
||||
<script>
|
||||
var allDevList = [];
|
||||
var allDevList = []; //全設備清單
|
||||
$(function () {
|
||||
getFloDevList();
|
||||
setLightColor();
|
||||
@ -74,7 +72,7 @@
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
//根據 data-type 設置顏色 (判斷後台是否有設定，若無則帶預設)
|
||||
function setLightColor() {
|
||||
$("[data-light-type]").each((index, ele) => {
|
||||
let type = $(ele).data("light-type");
|
||||
@ -83,24 +81,26 @@
|
||||
switch (type) {
|
||||
case "normal":
|
||||
color = pageAct.sysSubObj.device_normal_color ?? "var(--theme-success)";
|
||||
isFlashing = pageAct.sysSubObj.device_normal_flashing == "1"
|
||||
isFlashing = pageAct.sysSubObj.device_normal_flashing == "1";
|
||||
break;
|
||||
case "close":
|
||||
color = pageAct.sysSubObj.device_close_color ?? "var(--theme-secondary)";
|
||||
isFlashing = pageAct.sysSubObj.device_close_flashing == "1"
|
||||
isFlashing = pageAct.sysSubObj.device_close_flashing == "1";
|
||||
break;
|
||||
case "error":
|
||||
color = pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
|
||||
isFlashing = pageAct.sysSubObj.device_error_flashing == "1"
|
||||
isFlashing = pageAct.sysSubObj.device_error_flashing == "1";
|
||||
break;
|
||||
}
|
||||
$(ele).css("background-color", color);
|
||||
//是否閃爍
|
||||
if (isFlashing) {
|
||||
$(ele).parents(".card.device-wrap").addClass("light-flash");
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//取得設備列表 並繪製卡片
|
||||
function getFloDevList() {
|
||||
let url = baseApiUrl + "/api/Device/GetDeviceList";
|
||||
let sendData = {
|
||||
@ -148,6 +148,7 @@
|
||||
}, null, "POST").send();
|
||||
}
|
||||
|
||||
// Card 即時狀態
|
||||
function drawStateTabBlo() {
|
||||
let strHtml = `<div style="height:15rem">
|
||||
<iframe src="http://localhost:8080/ord?station:%7Cslot:/TPE/B1/EE/E4/R2F/NA/WHT/N1|view:?fullScreen=true" width="100%" height="100%"></iframe>
|
||||
|
||||
@ -55,6 +55,46 @@ label[id$='-error'].error {
|
||||
animation: flashing-c 0.5s linear infinite;
|
||||
}
|
||||
|
||||
/* checkbox switch */
|
||||
input.toggle:checked::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 24px;
|
||||
display: block;
|
||||
border-radius: 25px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #3f8635;
|
||||
}
|
||||
input.toggle::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 3px;
|
||||
display: block;
|
||||
border-radius: 25px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #656565;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
input.toggle {
|
||||
cursor:pointer;
|
||||
appearance: none;
|
||||
position:relative;
|
||||
width: 48px;
|
||||
height: 24px;
|
||||
background: #464646;
|
||||
border-radius: 50px;
|
||||
align-content: center;
|
||||
}
|
||||
input.toggle:checked {
|
||||
background: #97c193;
|
||||
}
|
||||
|
||||
|
||||
@keyframes flashing-c {
|
||||
0% {
|
||||
color: var(--flash-color-1);
|
||||
|
||||
@ -2699,7 +2699,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
$("#sysMonBtnList .dropdown-item").removeClass("active");
|
||||
pageAct.sysMainTag = null;
|
||||
}
|
||||
|
||||
$.each(tolSubList, (idx, sub) => {
|
||||
console.log("sub",sub,idx)
|
||||
sub.unsubscribeAll();
|
||||
sub.detach();
|
||||
})
|
||||
$("#app").load(`_${page}.html`, loadCallback);
|
||||
})
|
||||
|
||||
@ -2722,7 +2726,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
|
||||
}
|
||||
|
||||
//==============================================================================
|
||||
// ↓ 系統監控 - 共用 Function ↓
|
||||
//==============================================================================
|
||||
|
||||
// Card - 基本資料 Table
|
||||
function drawInfoTabBlo(devGuid) {
|
||||
let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`);
|
||||
let tbody = tabEle.append("<tbody>");
|
||||
@ -2753,20 +2761,23 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
return tabEle.prop("outerHTML");
|
||||
}
|
||||
|
||||
// Card - 異常紀錄 block
|
||||
function drawErrRecTabBlo() {
|
||||
let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
|
||||
|
||||
</table>`
|
||||
</table>`
|
||||
return strHtml;
|
||||
}
|
||||
|
||||
// Card - 運維紀錄 block
|
||||
function drawOpeRecTabBlo() {
|
||||
let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
|
||||
|
||||
</table>`
|
||||
</table>`
|
||||
return strHtml;
|
||||
}
|
||||
|
||||
// Card 呈現初始化
|
||||
function initPopover() {
|
||||
$("[name=devItem]").each((index, ele) => {
|
||||
let devNum = $(ele).data("number"); //設備編號
|
||||
@ -2775,37 +2786,37 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
$(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>
|
||||
<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>
|
||||
<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">
|
||||
|
||||
<div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
|
||||
${drawStateTabBlo()}
|
||||
</div>
|
||||
<div id="info" data-tabname="cardTab" data-tabrole="child">
|
||||
${drawInfoTabBlo(devGuid)}
|
||||
</div>
|
||||
<div id="errRec" data-tabname="cardTab" data-tabrole="child">
|
||||
${drawErrRecTabBlo()}
|
||||
</div>
|
||||
<div id="opeRec" data-tabname="cardTab" data-tabrole="child">
|
||||
${drawOpeRecTabBlo()}
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>`,
|
||||
<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>
|
||||
<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">
|
||||
|
||||
<div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
|
||||
${drawStateTabBlo(devNum)}
|
||||
</div>
|
||||
<div id="info" data-tabname="cardTab" data-tabrole="child">
|
||||
${drawInfoTabBlo(devGuid)}
|
||||
</div>
|
||||
<div id="errRec" data-tabname="cardTab" data-tabrole="child">
|
||||
${drawErrRecTabBlo()}
|
||||
</div>
|
||||
<div id="opeRec" data-tabname="cardTab" data-tabrole="child">
|
||||
${drawOpeRecTabBlo()}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>`,
|
||||
group: "device",
|
||||
onShow: function (tooltipEle, oriEle) {
|
||||
var tab = new YT.Tab({ tabName: "cardTab" })
|
||||
@ -2813,10 +2824,13 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
//loadErrRecTable2($(oriEle).data("number"));
|
||||
//loadErrRecTable();
|
||||
loadErr($(oriEle).data("number"));
|
||||
subDeviceSetTable ? subDeviceSetTable($(oriEle).data("number")) : ""
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// Card - 運維紀錄 Table
|
||||
function loadOpeRecTable(devGuid) {
|
||||
let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;
|
||||
let tag = "#opeRecTable";
|
||||
@ -2851,60 +2865,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
|
||||
];
|
||||
|
||||
|
||||
|
||||
//let callback = function () {
|
||||
// $('#opeRecTable').wrap("<div class='scrolledTable'></div>"); //不採用datatable內建scrollbody，會導致thead跑掉
|
||||
// let api = this.api();
|
||||
// api.columns.adjust();
|
||||
//}
|
||||
|
||||
let opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi");
|
||||
}
|
||||
|
||||
function loadErrRecTable() {
|
||||
let tag = "#errRecTable";
|
||||
let datas;
|
||||
//getOneDeviceAlarmTop10ByBaja(_devicePath, callback);
|
||||
|
||||
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": "timestamp",
|
||||
"width": "45%",
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
//let callback = function (result) {
|
||||
// datas = result;
|
||||
//}
|
||||
let result = '{"count": 2,"data":[{ "uuid": "43dc7846-bd96-4be2-ab35-f11aec729c60","msgText": "","ackState": "1","timestamp": "2022-Nov-16 10:30:24.951 AM UTC+08:00"},{"uuid": "7c309846-d862-4a8b-803b-cdc8e0efa092","msgText": "","ackState": "1","timestamp": "2022-Nov-16 10:00:24.893 AM UTC+08:00"}]}';
|
||||
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");
|
||||
}
|
||||
|
||||
// Baja 取得異常紀錄
|
||||
function loadErr(allPath) {
|
||||
if (allPath != undefined && allPath != null) {
|
||||
let _pathArr = allPath.split("_");//TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1
|
||||
@ -2916,6 +2880,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
}
|
||||
}
|
||||
|
||||
// Card - 異常紀錄 Table
|
||||
function callbackForErr(result) {
|
||||
let tag = "#errRecTable";
|
||||
let datas;
|
||||
@ -2956,6 +2921,38 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "tpi");
|
||||
|
||||
}
|
||||
|
||||
//根據 data-type 設置顏色 (判斷後台是否有設定，若無則帶預設)
|
||||
function setLightColor() {
|
||||
$(".dev-card").each((index, ele) => {
|
||||
let type = $(ele).find("[data-light-type]").data("light-type");
|
||||
let isFlashing = false;
|
||||
let color = "#000";
|
||||
switch (type) {
|
||||
case "normal":
|
||||
color = pageAct.sysSubObj.device_normal_color ?? "var(--theme-success)";
|
||||
isFlashing = pageAct.sysSubObj.device_normal_flashing == "1";
|
||||
break;
|
||||
case "close":
|
||||
color = pageAct.sysSubObj.device_close_color ?? "var(--theme-secondary)";
|
||||
isFlashing = pageAct.sysSubObj.device_close_flashing == "1";
|
||||
break;
|
||||
case "error":
|
||||
color = pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
|
||||
isFlashing = pageAct.sysSubObj.device_error_flashing == "1";
|
||||
break;
|
||||
}
|
||||
$(ele).find("[data-light-type]").css("background-color", color);
|
||||
//是否閃爍
|
||||
if (isFlashing) {
|
||||
$(ele).addClass("light-flash");
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//==============================================================================
|
||||
// ↑ 系統監控 - 共用 Function ↑
|
||||
//==============================================================================
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
let baja_subscribe_device_callback_func; //設定BQL訂閱之後要回傳的Function
|
||||
var ordPath; //當前點選選單的tag，用來抓出設備路徑，例如:旅館棟->H，消防偵煙器->F3
|
||||
|
||||
window.tolSubList = [];
|
||||
function subscriptionDevices() {
|
||||
// 用BQL的方式去訂閱
|
||||
this.setSubscribeDevicesByBql = function (tempOrdPath) {
|
||||
@ -173,7 +173,7 @@ function BajaSubscribeDevicesByBql() {
|
||||
sub.subscribe({
|
||||
comps: component,
|
||||
});
|
||||
|
||||
tolSubList.push(sub);
|
||||
subFinish = new Date(Date.now());
|
||||
$("#sub-end").html(subFinish.toISOString());
|
||||
$("#sub-time").html((subFinish.getTime() - subStart.getTime()) / 1000 + "sec");
|
||||
|
||||
@ -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");
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -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+/); };
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user