[Frontend][系統監控] 電梯設備 電梯管理 列表建置| 電梯管理列表訂閱程序串接 | 電梯管理列表日曆串接 | 電梯管理 detail 畫面建置 | 電梯管理 Master Detail 畫面建置 | Modal Div 動畫換頁建置 | Checbox Switch Css 建置 | [全域功能] 換內頁訂閱釋放程序建置 | 電梯頁面右下角 平面圖程序串接
This commit is contained in:
parent
f5a3e6af2a
commit
8236dad38b
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);
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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");
|
||||
|
||||
Loading…
Reference in New Issue
Block a user