This commit is contained in:
dev02 2022-11-28 15:34:50 +08:00
commit 2c3704f5a6
8 changed files with 1457 additions and 308 deletions

File diff suppressed because it is too large Load Diff

View File

@ -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>

View File

@ -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);

View File

@ -2531,7 +2531,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<script src="js/bajascript/bscriptReq.js"></script>
<!--<script type='text/javascript' src='/module/js/com/tridium/js/ext/require/require.min.js?version=1496767636459'></script>-->
<script src='js/bajascript/require.js'></script>
<script type='text/javascript'>
define('niagaraSystemProperties', function () {
@ -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"); //設備編號
@ -2774,38 +2785,38 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
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>
<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>

View File

@ -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");

View File

@ -106,4 +106,104 @@ function creSelect(id = null, cls = [], name = null, data = {}, attr = {}, text
function creOption(text = null, value = null, data = {}, attr = {}, cls = [], name = null, id = null) {
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");
})
}
})
}
}

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+/); };

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);