[電梯管理] Card 內容訂閱程序建置 | Table 訂閱程序建置 | 右側緊急迴轉店用程序建置

This commit is contained in:
dev01 2022-11-24 19:23:48 +08:00
parent 6303bef388
commit 08054e1574
4 changed files with 895 additions and 1028 deletions

View File

@ -121,12 +121,12 @@
</label> </label>
</div> </div>
<div> <div>
<label class="form-check-label h4" for="flexRadioDefault1"> <label id="emerReturnText" class="form-check-label h4" for="flexRadioDefault1">
未動作 未動作
</label> </label>
</div> </div>
<div> <div>
<span id="emerReturn" class="circle-light"></span> <span id="emerReturn" class="circle-light bg-secondary"></span>
</div> </div>
</div> </div>
<div class="d-flex justify-content-around mt-2"> <div class="d-flex justify-content-around mt-2">
@ -136,12 +136,12 @@
</label> </label>
</div> </div>
<div> <div>
<label class="form-check-label h4" for="flexRadioDefault1"> <label id="groConFailText" class="form-check-label h4" for="flexRadioDefault1">
未動作 未動作
</label> </label>
</div> </div>
<div> <div>
<span id="groConFail" class="circle-light"></span> <span id="groConFail" class="circle-light bg-secondary"></span>
</div> </div>
</div> </div>
<div class="d-flex justify-content-around mt-2"> <div class="d-flex justify-content-around mt-2">
@ -151,12 +151,12 @@
</label> </label>
</div> </div>
<div> <div>
<label class="form-check-label h4" for="flexRadioDefault1"> <label id="emerPowerText" class="form-check-label h4" for="flexRadioDefault1">
未動作 未動作
</label> </label>
</div> </div>
<div> <div>
<span id="emerPower" class="circle-light"></span> <span id="emerPower" class="circle-light bg-secondary"></span>
</div> </div>
</div> </div>
<div class="d-flex justify-content-around mt-2"> <div class="d-flex justify-content-around mt-2">
@ -166,12 +166,12 @@
</label> </label>
</div> </div>
<div> <div>
<label class="form-check-label h4" for="flexRadioDefault1"> <label id="fireReturnText" class="form-check-label h4" for="flexRadioDefault1">
未動作 未動作
</label> </label>
</div> </div>
<div> <div>
<span id="fireReturn" class="circle-light"></span> <span id="fireReturn" class="circle-light bg-secondary"></span>
</div> </div>
</div> </div>
<div class="d-flex justify-content-around mt-2"> <div class="d-flex justify-content-around mt-2">
@ -181,12 +181,12 @@
</label> </label>
</div> </div>
<div> <div>
<label class="form-check-label h4" for="flexRadioDefault1"> <label id="earQuaConText" class="form-check-label h4" for="flexRadioDefault1">
未動作 未動作
</label> </label>
</div> </div>
<div> <div>
<span id="earQuaCon" class="circle-light"></span> <span id="earQuaCon" class="circle-light bg-secondary"></span>
</div> </div>
</div> </div>
</div> </div>
@ -898,23 +898,27 @@
function getFloDevList() { function getFloDevList() {
} }
//emerReturn
//groConFail
//emerPower
//fireReturn
//earQuaCon
//baja 訂閱設備 //baja 訂閱設備
function subDeviceSetStatus() { function subDeviceSetStatus() {
myBaja = new subscriptionDevices(); myBaja = new subscriptionDevices();
myBaja.setSubscribeDevicesByBql(subOrdPath); myBaja.setSubscribeDevicesByBql(subOrdPath);
myBaja.setSubscribeDevicesCallBack(function (data) { myBaja.setSubscribeDevicesCallBack(function (data) {
console.log(data)
function getValueByName(pointName) { function getValueByName(pointName) {
return data.point_name == pointName ? data.value : null; return data.point_name == pointName ? data.value : null;
} }
function actLightByPoi(pointName, selector) {
if (getValueByName(pointName) == "trueText") {
$(selector).removeClass("bg-secondary").addClass("bg-orange");
$(selector).parent("div").prev().find("label").text("運轉中");
} else if (getValueByName(pointName) == "falseText") {
$(selector).removeClass("bg-orange").addClass("bg-secondary");
$(selector).parent("div").prev().find("label").text("未動作");
}
}
if (allDevList.length == 0) { if (allDevList.length == 0) {
return false; return false;
} }
@ -928,6 +932,27 @@
if (data.point_name == "ST") { if (data.point_name == "ST") {
$(`#${matchDevice.device_number}_card [name=devStatus]`).text(data.value); $(`#${matchDevice.device_number}_card [name=devStatus]`).text(data.value);
} }
//現在樓層
if (data.point_name == "CP") {
$(`#${matchDevice.device_number}_card [name=curFloor]`).text(data.value + "F");
}
//往上或往下
if (getValueByName("RD") == "UP") {
$(`#${matchDevice.device_number}_card [name=upFloArrow]`).addClass("light-flash-c");
}
if (getValueByName("RD") == "DOWN") {
$(`#${matchDevice.device_number}_card [name=downFloArrow]`).addClass("light-flash-c");
}
//消防回歸
actLightByPoi("FE", "#emerReturn");
//群控故障
actLightByPoi("GCM", "#groConFail");
//緊急電源
actLightByPoi("EPS", "#emerPower");
//火災回歸
actLightByPoi("FER", "#fireReturn");
//地震管制
actLightByPoi("EER", "#earQuaCon");
if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) { if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) {
//顯示正常燈號 //顯示正常燈號
@ -943,10 +968,15 @@
let obj = {}; let obj = {};
obj.device_number = matchDevice.device_number; obj.device_number = matchDevice.device_number;
subSeviceData.push(obj) subSeviceData.push(obj)
} else {
let subData = subSeviceData.filter(x => x.device_number == matchDevice.device_number)[0];
subData[data.point_name] = data.value
} }
let subData = subSeviceData.filter(x => x.device_number == matchDevice.device_number)[0];
if (subData) {
subData[data.point_name] = data.value;
}
subDeviceSetTable(matchDevice.device_number) subDeviceSetTable(matchDevice.device_number)
/*$(`#opeModTable${matchDevice.device_number} #notSerFloor`).text(getValueByName("COR"))*/ /*$(`#opeModTable${matchDevice.device_number} #notSerFloor`).text(getValueByName("COR"))*/
}); });
@ -955,8 +985,9 @@
//baja 訂閱設備 //baja 訂閱設備
function subDeviceSetTable(devNum) { function subDeviceSetTable(devNum) {
let subData = subSeviceData.filter(x => x.device_number == devNum)[0]
let subData = subSeviceData.filter(x => x.device_number == devNum)[0]
let matchDevice = allDevList.filter(x => x.device_number == devNum)[0];
if (!subData) { if (!subData) {
return false; return false;
} }
@ -970,8 +1001,20 @@
let notSerFloors = Object.keys(subData).filter(x => x.startsWith("SP_FLS_") && subData[x] == "trueText").map(x => x?.split("SP_FLS_")[1]); let notSerFloors = Object.keys(subData).filter(x => x.startsWith("SP_FLS_") && subData[x] == "trueText").map(x => x?.split("SP_FLS_")[1]);
//現在樓層
if (subData["CP"]) {
$(`#imdStaTable_${devNum} [name=curFloor]`).text(subData["CP"] + "F");
}
//往上或往下
if (subData["RD"] == "UP") {
$(`#imdStaTable_${devNum} [name=upFloArrow]`).addClass("light-flash-c");
}
if (subData["RD"] == "DOWN") {
$(`#imdStaTable_${devNum} [name=downFloArrow]`).addClass("light-flash-c");
}
//即時狀態(左側Table) //即時狀態(左側Table)
$(`#imdStaTable_${devNum} #devName`).text(matchDevice.full_name);
$(`#imdStaTable_${devNum} #devNum`).text(devNum); $(`#imdStaTable_${devNum} #devNum`).text(devNum);
$(`#imdStaTable_${devNum} #status`).text(subData["ST"]) $(`#imdStaTable_${devNum} #status`).text(subData["ST"])
$(`#imdStaTable_${devNum} #group`).text(masterTag); $(`#imdStaTable_${devNum} #group`).text(masterTag);
@ -1036,12 +1079,12 @@
<div type="button" class="card-body"> <div type="button" class="card-body">
<span class="d-flex"> <span class="d-flex">
<h5 class="card-title">號機別 : ${devObj.full_name}</h5> <h5 class="card-title">號機別 : ${devObj.full_name}</h5>
<i class="fas fa-caret-up fa-3x ml-auto"></i> <i name="upFloArrow" class="fas fa-caret-up fa-3x ml-auto" style="--flash-color-1:#6fe560;--flash-color-2:#fff;"></i>
</span> </span>
<h4 class="d-flex justify-content-end">10F</h4> <h4 name="curFloor" class="d-flex justify-content-end mb-0"></h4>
<span class="d-flex"> <span class="d-flex">
<p class="card-text">狀態 : <span name="devStatus"></span></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> <i name="downFloArrow" class="fas fa-caret-down fa-3x ml-auto" style="--flash-color-1:#6fe560;--flash-color-2:#fff;"></i>
</span> </span>
</div> </div>
</div>`; </div>`;
@ -1055,61 +1098,6 @@
} }
function initPopover() {
$("[name=devItem]").each((index, ele) => {
let devNum = $(ele).data("number"); //設備編號
let devGuid = $(ele).data("id"); //guid
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">
<div class="row">
<div class="col-xl-6">${drawImdStaBlock(devNum)}</div>
<div class="col-xl-6">${drawOpeModBlock(devNum)}</div>
</div>
</div>
<div id="info" data-tabname="cardTab" data-tabrole="child">
</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" })
console.log($(oriEle).data("number"))
//基本資料tab block
$("#info").html(drawInfoTabBlo(devGuid));
loadOpeRecTable(devGuid);
loadErr($(oriEle).data("number"));
subDeviceSetTable($(oriEle).data("number"));
}
})
})
}
function setBuildFloor(floorCnt = 10, eleCnt = 3) { function setBuildFloor(floorCnt = 10, eleCnt = 3) {
let tbody = creEle("tbody"); let tbody = creEle("tbody");
@ -1158,14 +1146,11 @@
} }
function drawStateTabBlo(devNum) {
function drawStateTabBlo() { let div = creDiv(["row"]);
let strHtml = `<table class="table table-bordered table-striped text-center m-0" id="iframemodal"> div.append(creDiv(["col-xl-6"]).append(drawImdStaBlock(devNum)))
<div class="modal-body"> div.append(creDiv(["col-xl-6"]).append(drawOpeModBlock(devNum)))
<iframe src="http://localhost:8080/ord?station:%7Cslot:/TPE/B1/EE/E4/R2F/NA/WHT/N1|view:?fullScreen=true" width="100%" height="100%"></iframe> return div.outerHtml();
</div>
</table>`
return strHtml;
} }
function drawImdStaBlock(devNum) { function drawImdStaBlock(devNum) {
@ -1173,7 +1158,8 @@
let tbody = tabEle.append("<tbody>"); let tbody = tabEle.append("<tbody>");
let rows = let rows =
[ [
{ id: "devNum", text: "號機" }, { id: "devName", text: "號機" },
{ id: "devNum", text: "Tag Name" },
{ id: "status", text: "狀態" }, { id: "status", text: "狀態" },
{ id: "group", text: "組別" }, { id: "group", text: "組別" },
{ id: "weight", text: "載重" }, { id: "weight", text: "載重" },
@ -1183,9 +1169,19 @@
{ width: "40%" }, { width: "40%" },
{ width: "30%" }, { width: "30%" },
] ]
let data = [{
row: 0, col: 2, style:"vertical-align:middle",
data: `<div class="flex-column">
<i name="upFloArrow" class="fas fa-caret-up fa-3x ml-auto" style="--flash-color-1:#6fe560;--flash-color-2:#fff;"></i>
<h4 name="curFloor" class="d-flex justify-content-center mb-0"></h4>
<i name="downFloArrow" class="fas fa-caret-down fa-3x ml-auto" style="--flash-color-1:#6fe560;--flash-color-2:#fff;"></i>
</div>
`}]
$.each(rows, (index, row) => { $.each(rows, (index, row) => {
let tr = $("<tr></tr>"); let tr = $("<tr></tr>");
$.each(cols, (index2, col) => { $.each(cols, (index2, col) => {
if (index < 1 || index > 99 || index2 != 2) {
let td = $("<td></td>"); let td = $("<td></td>");
td.css("width", col.width) td.css("width", col.width)
if (index2 == 0) { if (index2 == 0) {
@ -1194,7 +1190,16 @@
if (index2 == 1) { if (index2 == 1) {
td.prop("id", row.id) td.prop("id", row.id)
} }
if (index == 0 && index2 == 2) {
td.attr("rowspan", 99)
}
if (data.filter(x => x.row == index && x.col == index2).length != 0) {
let target = data.filter(x => x.row == index && x.col == index2)[0];
td.css("cssText", target.style);
td.html(target.data);
}
tr.append(td); tr.append(td);
}
}) })
tbody.append(tr); tbody.append(tr);
}) })
@ -1216,9 +1221,8 @@
{ id: "notSerFloor", text: "不服務樓層" }, { id: "notSerFloor", text: "不服務樓層" },
]; ];
let cols = [ let cols = [
{ width: "40%" }, { width: "50%" },
{ width: "30%" }, { width: "50%" },
{ width: "30%" },
] ]
$.each(rows, (index, row) => { $.each(rows, (index, row) => {
let tr = $("<tr></tr>"); let tr = $("<tr></tr>");
@ -1240,190 +1244,5 @@
return tabEle.outerHtml(); return tabEle.outerHtml();
} }
function drawInfoTabBlo(devGuid) {
let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`);
let tbody = tabEle.append("<tbody>");
let columnNames = ["設備編號", "設備名稱"];
$.each(columnNames, (index, colName) => {
let tr = $("<tr></tr>");
let td = $("<td></td>");
td.text(colName);
tr.append(td);
tbody.append(tr);
})
let url = baseApiUrl + "/api/Device/GetBaseDevice";
let sendData = {
device_guid: devGuid,
};
objSendData.Data = sendData;
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
tbody.find("tr").eq(0).append(creEle("td", res.data.device_number));
tbody.find("tr").eq(1).append(creEle("td", res.data.full_name));
}
}, null, "POST").send();
return tabEle.prop("outerHTML");
}
function drawErrRecTabBlo() {
let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
</table>`
return strHtml;
}
function drawOpeRecTabBlo() {
let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
</table>`
return strHtml;
}
function loadOpeRecTable(devGuid) {
let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;
let tag = "#opeRecTable";
let column_defs = [
{ "targets": [0], "width": "8%", "sortable": true },
{ "targets": [1], "width": "8%", "sortable": true },
{ "targets": [2], "width": "7%", "sortable": true },
{ "targets": [3], "width": "7%", "sortable": true },
];
let columns = [
{
"title": "類型",
"data": "work_type_name",
},
{
"title": "項目",
"data": "fix_do",
},
{
"title": "處理人員",
"data": "work_person_name",
},
{
"title": "發生/完成時間",
"data": "finishTime",
"render": function (data, type, row) {
return row.createdAt + "<br>" + data;
},
},
];
//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");
}
function loadErr(allPath) {
if (allPath != undefined && allPath != null) {
let _pathArr = allPath.split("_");//TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1
let _devicePath = _pathArr[0] + "_" + _pathArr[1] + "_" + _pathArr[2] + "_" + _pathArr[3] + "_" + _pathArr[4] + "_" + _pathArr[5];
getOneDeviceAlarmTop10ByBaja(_devicePath, callbackForErr);
}
else {
console.log("no device");
}
}
function callbackForErr(result) {
let tag = "#errRecTable";
let datas;
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": "normalTime",
"render": function (data, type, row) {
return row.timestamp + "<br>" + data;
},
},
];
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");
}
</script> </script>

View File

@ -75,24 +75,6 @@
} }
//function loadStaLight() {
// if (pageAct.sysSubObj.device_normal_color) {
// $("#sysNorLight").css("background-color", pageAct.sysSubObj.device_normal_color);
// } else {
// $("#sysNorLight").addClass("bg-success");
// }
// if (pageAct.sysSubObj.device_close_color) {
// $("#sysCloLight").css("background-color", pageAct.sysSubObj.device_close_color);
// } else {
// $("#sysCloLight").addClass("bg-secondary");
// }
// if (pageAct.sysSubObj.device_error_color) {
// $("#sysErrLight").css("background-color", pageAct.sysSubObj.device_error_color);
// } else {
// $("#sysErrLight").addClass("bg-danger");
// }
//}
function setLightColor() { function setLightColor() {
$("[data-light-type]").each((index, ele) => { $("[data-light-type]").each((index, ele) => {
let type = $(ele).data("light-type"); let type = $(ele).data("light-type");
@ -175,283 +157,5 @@
return strHtml; return strHtml;
} }
function drawInfoTabBlo(devGuid) {
let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`);
let tbody = tabEle.append("<tbody>");
let columnNames = ["設備編號", "設備名稱"];
$.each(columnNames, (index, colName) => {
let tr = $("<tr></tr>");
let td = $("<td></td>");
td.text(colName);
tr.append(td);
tbody.append(tr);
})
let url = baseApiUrl + "/api/Device/GetBaseDevice";
let sendData = {
device_guid: devGuid,
};
objSendData.Data = sendData;
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
tbody.find("tr").eq(0).append(creEle("td", res.data.device_number));
tbody.find("tr").eq(1).append(creEle("td", res.data.full_name));
}
}, null, "POST").send();
return tabEle.prop("outerHTML");
}
function drawErrRecTabBlo() {
let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
</table>`
return strHtml;
}
function drawOpeRecTabBlo() {
let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
</table>`
return strHtml;
}
function initPopover() {
$("[name=devItem]").each((index, ele) => {
let devNum = $(ele).data("number"); //設備編號
let devGuid = $(ele).data("id"); //guid
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">
</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" })
console.log($(oriEle).data("number"))
//基本資料tab block
$("#info").html(drawInfoTabBlo(devGuid));
loadOpeRecTable(devGuid);
//loadErrRecTable2($(oriEle).data("number"));
//loadErrRecTable();
loadErr($(oriEle).data("number"));
}
})
})
}
function loadOpeRecTable(devGuid) {
let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;
let tag = "#opeRecTable";
let column_defs = [
{ "targets": [0], "width": "8%", "sortable": true },
{ "targets": [1], "width": "8%", "sortable": true },
{ "targets": [2], "width": "7%", "sortable": true },
{ "targets": [3], "width": "7%", "sortable": true },
];
let columns = [
{
"title": "類型",
"data": "work_type_name",
},
{
"title": "項目",
"data": "fix_do",
},
{
"title": "處理人員",
"data": "work_person_name",
},
{
"title": "發生/完成時間",
"data": "finishTime",
"render": function (data, type, row) {
return row.createdAt + "<br>" + data;
},
},
];
//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");
}
function loadErr(allPath) {
if (allPath != undefined && allPath != null) {
let _pathArr = allPath.split("_");//TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1
let _devicePath = _pathArr[0] + "_" + _pathArr[1] + "_" + _pathArr[2] + "_" + _pathArr[3] + "_" + _pathArr[4] + "_" + _pathArr[5];
getOneDeviceAlarmTop10ByBaja(_devicePath, callbackForErr);
}
else {
console.log("no device");
}
}
function callbackForErr(result) {
let tag = "#errRecTable";
let datas;
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": "normalTime",
"render": function (data, type, row) {
return row.timestamp + "<br>" + data;
},
},
];
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");
}
//function loadErrRecTable2(allPath) {
// if (allPath != undefined && allPath != null) {
// let _pathArr = allPath.split("_");//TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1
// let _devicePath = _pathArr[0] + "_" + _pathArr[1] + "_" + _pathArr[2] + "_" + _pathArr[3] + "_" + _pathArr[4] + "_" + _pathArr[5];
// //getOneDeviceAlarmTop10ByBaja(_devicePath, callback);
// console.log("devicePath: " + _devicePath);
// let result = '{"count": 2,"0": { "uuid": "43dc7846-bd96-4be2-ab35-f11aec729c60","timestamp": "2022-Nov-16 10:30:24.951 AM UTC+08:00","sourceName": "TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1_TRIP","sourceState": "1","msgText": "","ackState": "1","normalTime": "1970-Jan-1 08:00:00.000 AM UTC+08:00"},"1": {"uuid": "7c309846-d862-4a8b-803b-cdc8e0efa092","timestamp": "2022-Nov-16 10:00:24.893 AM UTC+08:00","sourceName": "TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1_TRIP","sourceState": "0","msgText": "","ackState": "1","normalTime": "2022-Nov-16 10:15:24.939 AM UTC+08:00"}}';
// let result_Json = JSON.parse(result)
// var eachTable = $('.each-table tbody');
// for (var i = 0; i < result_Json['count']; i++)
// {
// item = result_Json[i.toString()];
// eachTable.append(
// '<tr>' +
// '<td>' + item.uuid + '</td>' +
// '<td>' + item.msgText + '</td>' +
// '<td>' + (item.ackState = 1 ? item.normalTime : '未確認') + '</td>' +
// '<td>' + item.timestamp + '</td>' +
// '</tr>');
// }
// }
// let callback = function (result) {
// var eachTable = $('.each-table tbody');
// $.each(result, function (index, element) {
// eachTable.append(
// '<tr>' +
// '<td>' + element[index].uuid + '</td>' +
// '<td>' + element[index].msgText + '</td>' +
// '<td>' + (element[index].ackState = 1 ? element[index].normalTime : '未確認') + '</td>' +
// '<td>' + element[index].timestamp + '</td>' +
// '</tr>');
// });
// }
//}
// }
</script> </script>

View File

@ -44,24 +44,50 @@ label[id$='-error'].error {
} }
.light-flash { .light-flash {
animation: flashing 0.5s linear infinite; --flash-color-1: #ffa100;
--flash-color-2: #26272b;
animation: flashing-bg 0.5s linear infinite;
} }
@keyframes flashing { .light-flash-c {
--flash-color-1: #ffa100;
--flash-color-2: #26272b;
animation: flashing-c 0.5s linear infinite;
}
@keyframes flashing-c {
0% { 0% {
background: #ffa100; color: var(--flash-color-1);
} }
49% { 49% {
background: #ffa100; color: var(--flash-color-1);
} }
50% { 50% {
background: #26272b; color: var(--flash-color-2);
} }
99% { 99% {
background: #26272b; color: var(--flash-color-2);
}
}
@keyframes flashing-bg {
0% {
background: var(--flash-color-1);
}
49% {
background: var(--flash-color-1);
}
50% {
background: var(--flash-color-2);
}
99% {
background: var(--flash-color-2);
} }
} }
@ -326,6 +352,10 @@ label[id$='-error'].error {
vertical-align: bottom; vertical-align: bottom;
} }
.bg-orange {
background-color:#ffa100;
}
/* text color */ /* text color */
.t-main-purple { .t-main-purple {
color: #623c80 !important; color: #623c80 !important;

View File

@ -64,8 +64,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
>>> more settings are described inside documentation page >>> >>> more settings are described inside documentation page >>>
--> -->
<body <body class="mod-bg-1 mod-nav-link mod-skin-dark mod-hide-info-card nav-function-top nav-function-fixed mod-lean-subheader desktop chrome webkit pace-done blur">
class="mod-bg-1 mod-nav-link mod-skin-dark mod-hide-info-card nav-function-top nav-function-fixed mod-lean-subheader desktop chrome webkit pace-done blur">
<!-- DOC: script to save and load page settings --> <!-- DOC: script to save and load page settings -->
<script> <script>
/** /**
@ -177,16 +176,20 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<a href="intel_analytics_dashboard.html" title="Analytics Dashboard" <a href="intel_analytics_dashboard.html" title="Analytics Dashboard"
data-filter-tags="application intel analytics dashboard"> data-filter-tags="application intel analytics dashboard">
<span class="nav-link-text" <span class="nav-link-text"
data-i18n="nav.application_intel_analytics_dashboard">Analytics data-i18n="nav.application_intel_analytics_dashboard">
Dashboard</span> Analytics
Dashboard
</span>
</a> </a>
</li> </li>
<li class="active"> <li class="active">
<a href="intel_marketing_dashboard.html" title="Marketing Dashboard" <a href="intel_marketing_dashboard.html" title="Marketing Dashboard"
data-filter-tags="application intel marketing dashboard"> data-filter-tags="application intel marketing dashboard">
<span class="nav-link-text" <span class="nav-link-text"
data-i18n="nav.application_intel_marketing_dashboard">Marketing data-i18n="nav.application_intel_marketing_dashboard">
Dashboard</span> Marketing
Dashboard
</span>
</a> </a>
</li> </li>
<li> <li>
@ -214,15 +217,19 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<li> <li>
<a href="settings_how_it_works.html" title="How it works" <a href="settings_how_it_works.html" title="How it works"
data-filter-tags="theme settings how it works"> data-filter-tags="theme settings how it works">
<span class="nav-link-text" data-i18n="nav.theme_settings_how_it_works">How it <span class="nav-link-text" data-i18n="nav.theme_settings_how_it_works">
works</span> How it
works
</span>
</a> </a>
</li> </li>
<li> <li>
<a href="settings_layout_options.html" title="Layout Options" <a href="settings_layout_options.html" title="Layout Options"
data-filter-tags="theme settings layout options"> data-filter-tags="theme settings layout options">
<span class="nav-link-text" data-i18n="nav.theme_settings_layout_options">Layout <span class="nav-link-text" data-i18n="nav.theme_settings_layout_options">
Options</span> Layout
Options
</span>
</a> </a>
</li> </li>
<li> <li>
@ -235,8 +242,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<li> <li>
<a href="settings_skin_options.html" title="Skin Options" <a href="settings_skin_options.html" title="Skin Options"
data-filter-tags="theme settings skin options"> data-filter-tags="theme settings skin options">
<span class="nav-link-text" data-i18n="nav.theme_settings_skin_options">Skin <span class="nav-link-text" data-i18n="nav.theme_settings_skin_options">
Options</span> Skin
Options
</span>
</a> </a>
</li> </li>
<li> <li>
@ -257,8 +266,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<li> <li>
<a href="docs_general.html" title="General Docs" <a href="docs_general.html" title="General Docs"
data-filter-tags="documentation general docs"> data-filter-tags="documentation general docs">
<span class="nav-link-text" data-i18n="nav.documentation_general_docs">General <span class="nav-link-text" data-i18n="nav.documentation_general_docs">
Docs</span> General
Docs
</span>
</a> </a>
</li> </li>
<li> <li>
@ -299,8 +310,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<li> <li>
<a href="docs_buildnotes.html" title="Build Notes" <a href="docs_buildnotes.html" title="Build Notes"
data-filter-tags="documentation build notes"> data-filter-tags="documentation build notes">
<span class="nav-link-text" data-i18n="nav.documentation_build_notes">Build <span class="nav-link-text" data-i18n="nav.documentation_build_notes">
Notes</span> Build
Notes
</span>
<span class="">v4.5.1</span> <span class="">v4.5.1</span>
</a> </a>
</li> </li>
@ -345,8 +358,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<li> <li>
<a href="ui_button_group.html" title="Button Group" <a href="ui_button_group.html" title="Button Group"
data-filter-tags="ui components button group"> data-filter-tags="ui components button group">
<span class="nav-link-text" data-i18n="nav.ui_components_button_group">Button <span class="nav-link-text" data-i18n="nav.ui_components_button_group">
Group</span> Button
Group
</span>
</a> </a>
</li> </li>
<li> <li>
@ -378,8 +393,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<li> <li>
<a href="ui_list_filter.html" title="List Filter" <a href="ui_list_filter.html" title="List Filter"
data-filter-tags="ui components list filter"> data-filter-tags="ui components list filter">
<span class="nav-link-text" data-i18n="nav.ui_components_list_filter">List <span class="nav-link-text" data-i18n="nav.ui_components_list_filter">
Filter</span> List
Filter
</span>
</a> </a>
</li> </li>
<li> <li>
@ -414,8 +431,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<li> <li>
<a href="ui_progress_bars.html" title="Progress Bars" <a href="ui_progress_bars.html" title="Progress Bars"
data-filter-tags="ui components progress bars"> data-filter-tags="ui components progress bars">
<span class="nav-link-text" data-i18n="nav.ui_components_progress_bars">Progress <span class="nav-link-text" data-i18n="nav.ui_components_progress_bars">
Bars</span> Progress
Bars
</span>
</a> </a>
</li> </li>
<li> <li>
@ -428,8 +447,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<li> <li>
<a href="ui_side_panel.html" title="Side Panel" <a href="ui_side_panel.html" title="Side Panel"
data-filter-tags="ui components side panel"> data-filter-tags="ui components side panel">
<span class="nav-link-text" data-i18n="nav.ui_components_side_panel">Side <span class="nav-link-text" data-i18n="nav.ui_components_side_panel">
Panel</span> Side
Panel
</span>
</a> </a>
</li> </li>
<li> <li>
@ -442,8 +463,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<li> <li>
<a href="ui_tabs_pills.html" title="Tabs & Pills" <a href="ui_tabs_pills.html" title="Tabs & Pills"
data-filter-tags="ui components tabs & pills"> data-filter-tags="ui components tabs & pills">
<span class="nav-link-text" data-i18n="nav.ui_components_tabs_&_pills">Tabs & <span class="nav-link-text" data-i18n="nav.ui_components_tabs_&_pills">
Pills</span> Tabs &
Pills
</span>
</a> </a>
</li> </li>
<li> <li>
@ -481,15 +504,19 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<li> <li>
<a href="utilities_color_pallet.html" title="Color Pallet" <a href="utilities_color_pallet.html" title="Color Pallet"
data-filter-tags="utilities color pallet"> data-filter-tags="utilities color pallet">
<span class="nav-link-text" data-i18n="nav.utilities_color_pallet">Color <span class="nav-link-text" data-i18n="nav.utilities_color_pallet">
Pallet</span> Color
Pallet
</span>
</a> </a>
</li> </li>
<li> <li>
<a href="utilities_display_property.html" title="Display Property" <a href="utilities_display_property.html" title="Display Property"
data-filter-tags="utilities display property"> data-filter-tags="utilities display property">
<span class="nav-link-text" data-i18n="nav.utilities_display_property">Display <span class="nav-link-text" data-i18n="nav.utilities_display_property">
Property</span> Display
Property
</span>
</a> </a>
</li> </li>
<li> <li>
@ -518,8 +545,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<li> <li>
<a href="utilities_responsive_grid.html" title="Responsive Grid" <a href="utilities_responsive_grid.html" title="Responsive Grid"
data-filter-tags="utilities responsive grid"> data-filter-tags="utilities responsive grid">
<span class="nav-link-text" data-i18n="nav.utilities_responsive_grid">Responsive <span class="nav-link-text" data-i18n="nav.utilities_responsive_grid">
Grid</span> Responsive
Grid
</span>
</a> </a>
</li> </li>
<li> <li>
@ -543,24 +572,30 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<li> <li>
<a href="javascript:void(0);" title="Menu child" <a href="javascript:void(0);" title="Menu child"
data-filter-tags="utilities menu child"> data-filter-tags="utilities menu child">
<span class="nav-link-text" data-i18n="nav.utilities_menu_child">Menu <span class="nav-link-text" data-i18n="nav.utilities_menu_child">
child</span> Menu
child
</span>
</a> </a>
<ul> <ul>
<li> <li>
<a href="javascript:void(0);" title="Sublevel Item" <a href="javascript:void(0);" title="Sublevel Item"
data-filter-tags="utilities menu child sublevel item"> data-filter-tags="utilities menu child sublevel item">
<span class="nav-link-text" <span class="nav-link-text"
data-i18n="nav.utilities_menu_child_sublevel_item">Sublevel data-i18n="nav.utilities_menu_child_sublevel_item">
Item</span> Sublevel
Item
</span>
</a> </a>
</li> </li>
<li> <li>
<a href="javascript:void(0);" title="Another Item" <a href="javascript:void(0);" title="Another Item"
data-filter-tags="utilities menu child another item"> data-filter-tags="utilities menu child another item">
<span class="nav-link-text" <span class="nav-link-text"
data-i18n="nav.utilities_menu_child_another_item">Another data-i18n="nav.utilities_menu_child_another_item">
Item</span> Another
Item
</span>
</a> </a>
</li> </li>
</ul> </ul>
@ -568,8 +603,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<li class="disabled"> <li class="disabled">
<a href="javascript:void(0);" title="Disabled item" <a href="javascript:void(0);" title="Disabled item"
data-filter-tags="utilities disabled item"> data-filter-tags="utilities disabled item">
<span class="nav-link-text" data-i18n="nav.utilities_disabled_item">Disabled <span class="nav-link-text" data-i18n="nav.utilities_disabled_item">
item</span> Disabled
item
</span>
</a> </a>
</li> </li>
</ul> </ul>
@ -578,15 +615,16 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<a href="#" title="Font Icons" data-filter-tags="font icons"> <a href="#" title="Font Icons" data-filter-tags="font icons">
<i class="fal fa-map-marker-alt"></i> <i class="fal fa-map-marker-alt"></i>
<span class="nav-link-text" data-i18n="nav.font_icons">Font Icons</span> <span class="nav-link-text" data-i18n="nav.font_icons">Font Icons</span>
<span <span class="dl-ref bg-primary-500 hidden-nav-function-minify hidden-nav-function-top">7,500+</span>
class="dl-ref bg-primary-500 hidden-nav-function-minify hidden-nav-function-top">7,500+</span>
</a> </a>
<ul> <ul>
<li> <li>
<a href="javascript:void(0);" title="FontAwesome" <a href="javascript:void(0);" title="FontAwesome"
data-filter-tags="font icons fontawesome"> data-filter-tags="font icons fontawesome">
<span class="nav-link-text" data-i18n="nav.font_icons_fontawesome">FontAwesome <span class="nav-link-text" data-i18n="nav.font_icons_fontawesome">
Pro</span> FontAwesome
Pro
</span>
</a> </a>
<ul> <ul>
<li> <li>
@ -629,8 +667,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<li> <li>
<a href="javascript:void(0);" title="NextGen Icons" <a href="javascript:void(0);" title="NextGen Icons"
data-filter-tags="font icons nextgen icons"> data-filter-tags="font icons nextgen icons">
<span class="nav-link-text" data-i18n="nav.font_icons_nextgen_icons">NextGen <span class="nav-link-text" data-i18n="nav.font_icons_nextgen_icons">
Icons</span> NextGen
Icons
</span>
</a> </a>
<ul> <ul>
<li> <li>
@ -652,8 +692,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<li> <li>
<a href="javascript:void(0);" title="Stack Icons" <a href="javascript:void(0);" title="Stack Icons"
data-filter-tags="font icons stack icons"> data-filter-tags="font icons stack icons">
<span class="nav-link-text" data-i18n="nav.font_icons_stack_icons">Stack <span class="nav-link-text" data-i18n="nav.font_icons_stack_icons">
Icons</span> Stack
Icons
</span>
</a> </a>
<ul> <ul>
<li> <li>
@ -667,8 +709,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<a href="icons_stack_generate.html?layers=3" title="Generate Stack" <a href="icons_stack_generate.html?layers=3" title="Generate Stack"
data-filter-tags="font icons stack icons generate stack"> data-filter-tags="font icons stack icons generate stack">
<span class="nav-link-text" <span class="nav-link-text"
data-i18n="nav.font_icons_stack_icons_generate_stack">Generate data-i18n="nav.font_icons_stack_icons_generate_stack">
Stack</span> Generate
Stack
</span>
</a> </a>
</li> </li>
</ul> </ul>
@ -684,15 +728,19 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<li> <li>
<a href="tables_basic.html" title="Basic Tables" <a href="tables_basic.html" title="Basic Tables"
data-filter-tags="tables basic tables"> data-filter-tags="tables basic tables">
<span class="nav-link-text" data-i18n="nav.tables_basic_tables">Basic <span class="nav-link-text" data-i18n="nav.tables_basic_tables">
Tables</span> Basic
Tables
</span>
</a> </a>
</li> </li>
<li> <li>
<a href="tables_generate_style.html" title="Generate Table Style" <a href="tables_generate_style.html" title="Generate Table Style"
data-filter-tags="tables generate table style"> data-filter-tags="tables generate table style">
<span class="nav-link-text" data-i18n="nav.tables_generate_table_style">Generate <span class="nav-link-text" data-i18n="nav.tables_generate_table_style">
Table Style</span> Generate
Table Style
</span>
</a> </a>
</li> </li>
</ul> </ul>
@ -706,22 +754,28 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<li> <li>
<a href="form_basic_inputs.html" title="Basic Inputs" <a href="form_basic_inputs.html" title="Basic Inputs"
data-filter-tags="form stuff basic inputs"> data-filter-tags="form stuff basic inputs">
<span class="nav-link-text" data-i18n="nav.form_stuff_basic_inputs">Basic <span class="nav-link-text" data-i18n="nav.form_stuff_basic_inputs">
Inputs</span> Basic
Inputs
</span>
</a> </a>
</li> </li>
<li> <li>
<a href="form_checkbox_radio.html" title="Checkbox & Radio" <a href="form_checkbox_radio.html" title="Checkbox & Radio"
data-filter-tags="form stuff checkbox & radio"> data-filter-tags="form stuff checkbox & radio">
<span class="nav-link-text" data-i18n="nav.form_stuff_checkbox_&_radio">Checkbox <span class="nav-link-text" data-i18n="nav.form_stuff_checkbox_&_radio">
& Radio</span> Checkbox
& Radio
</span>
</a> </a>
</li> </li>
<li> <li>
<a href="form_input_groups.html" title="Input Groups" <a href="form_input_groups.html" title="Input Groups"
data-filter-tags="form stuff input groups"> data-filter-tags="form stuff input groups">
<span class="nav-link-text" data-i18n="nav.form_stuff_input_groups">Input <span class="nav-link-text" data-i18n="nav.form_stuff_input_groups">
Groups</span> Input
Groups
</span>
</a> </a>
</li> </li>
<li> <li>
@ -743,8 +797,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<li> <li>
<a href="plugins_faq.html" title="Plugins FAQ" <a href="plugins_faq.html" title="Plugins FAQ"
data-filter-tags="plugins plugins faq"> data-filter-tags="plugins plugins faq">
<span class="nav-link-text" data-i18n="nav.plugins_plugins_faq">Plugins <span class="nav-link-text" data-i18n="nav.plugins_plugins_faq">
FAQ</span> Plugins
FAQ
</span>
</a> </a>
</li> </li>
<li> <li>
@ -813,9 +869,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<a href="#" title="Datatables" data-filter-tags="datatables datagrid"> <a href="#" title="Datatables" data-filter-tags="datatables datagrid">
<i class="fal fa-table"></i> <i class="fal fa-table"></i>
<span class="nav-link-text" data-i18n="nav.datatables">Datatables</span> <span class="nav-link-text" data-i18n="nav.datatables">Datatables</span>
<span <span class="dl-ref bg-primary-500 hidden-nav-function-minify hidden-nav-function-top">
class="dl-ref bg-primary-500 hidden-nav-function-minify hidden-nav-function-top">235 235
KB</span> KB
</span>
</a> </a>
<ul> <ul>
<li> <li>
@ -886,8 +943,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<li> <li>
<a href="datatables_responsive_alt.html" title="Responsive Alt" <a href="datatables_responsive_alt.html" title="Responsive Alt"
data-filter-tags="datatables datagrid responsive alt"> data-filter-tags="datatables datagrid responsive alt">
<span class="nav-link-text" data-i18n="nav.datatables_responsive_alt">Responsive <span class="nav-link-text" data-i18n="nav.datatables_responsive_alt">
Alt</span> Responsive
Alt
</span>
</a> </a>
</li> </li>
<li> <li>
@ -955,8 +1014,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<li> <li>
<a href="statistics_c3.html" title="C3 Charts" <a href="statistics_c3.html" title="C3 Charts"
data-filter-tags="statistics chart graphs c3 charts"> data-filter-tags="statistics chart graphs c3 charts">
<span class="nav-link-text" data-i18n="nav.statistics_c3_charts">C3 <span class="nav-link-text" data-i18n="nav.statistics_c3_charts">
Charts</span> C3
Charts
</span>
<span class="dl-ref label bg-primary-600 ml-2">197 KB</span> <span class="dl-ref label bg-primary-600 ml-2">197 KB</span>
</a> </a>
</li> </li>
@ -978,8 +1039,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<li> <li>
<a href="statistics_easypiechart.html" title="Easy Pie Chart" <a href="statistics_easypiechart.html" title="Easy Pie Chart"
data-filter-tags="statistics chart graphs easy pie chart"> data-filter-tags="statistics chart graphs easy pie chart">
<span class="nav-link-text" data-i18n="nav.statistics_easy_pie_chart">Easy Pie <span class="nav-link-text" data-i18n="nav.statistics_easy_pie_chart">
Chart</span> Easy Pie
Chart
</span>
<span class="dl-ref label bg-primary-700 ml-2">4 KB</span> <span class="dl-ref label bg-primary-700 ml-2">4 KB</span>
</a> </a>
</li> </li>
@ -1024,22 +1087,28 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<li> <li>
<a href="form_plugins_colorpicker.html" title="Color Picker" <a href="form_plugins_colorpicker.html" title="Color Picker"
data-filter-tags="form plugins color picker"> data-filter-tags="form plugins color picker">
<span class="nav-link-text" data-i18n="nav.form_plugins_color_picker">Color <span class="nav-link-text" data-i18n="nav.form_plugins_color_picker">
Picker</span> Color
Picker
</span>
</a> </a>
</li> </li>
<li> <li>
<a href="form_plugins_datepicker.html" title="Date Picker" <a href="form_plugins_datepicker.html" title="Date Picker"
data-filter-tags="form plugins date picker"> data-filter-tags="form plugins date picker">
<span class="nav-link-text" data-i18n="nav.form_plugins_date_picker">Date <span class="nav-link-text" data-i18n="nav.form_plugins_date_picker">
Picker</span> Date
Picker
</span>
</a> </a>
</li> </li>
<li> <li>
<a href="form_plugins_daterange_picker.html" title="Date Range Picker" <a href="form_plugins_daterange_picker.html" title="Date Range Picker"
data-filter-tags="form plugins date range picker"> data-filter-tags="form plugins date range picker">
<span class="nav-link-text" data-i18n="nav.form_plugins_date_range_picker">Date <span class="nav-link-text" data-i18n="nav.form_plugins_date_range_picker">
Range Picker</span> Date
Range Picker
</span>
</a> </a>
</li> </li>
<li> <li>
@ -1066,8 +1135,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<li> <li>
<a href="form_plugins_imagecropper.html" title="Image Cropper" <a href="form_plugins_imagecropper.html" title="Image Cropper"
data-filter-tags="form plugins image cropper"> data-filter-tags="form plugins image cropper">
<span class="nav-link-text" data-i18n="nav.form_plugins_image_cropper">Image <span class="nav-link-text" data-i18n="nav.form_plugins_image_cropper">
Cropper</span> Image
Cropper
</span>
</a> </a>
</li> </li>
<li> <li>
@ -1101,8 +1172,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<li> <li>
<a href="miscellaneous_lightgallery.html" title="Light Gallery" <a href="miscellaneous_lightgallery.html" title="Light Gallery"
data-filter-tags="miscellaneous light gallery"> data-filter-tags="miscellaneous light gallery">
<span class="nav-link-text" data-i18n="nav.miscellaneous_light_gallery">Light <span class="nav-link-text" data-i18n="nav.miscellaneous_light_gallery">
Gallery</span> Light
Gallery
</span>
<span class="dl-ref label bg-primary-500 ml-2">61 KB</span> <span class="dl-ref label bg-primary-500 ml-2">61 KB</span>
</a> </a>
</li> </li>
@ -1182,8 +1255,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<li> <li>
<a href="page_invoice.html" title="Invoice (printable)" <a href="page_invoice.html" title="Invoice (printable)"
data-filter-tags="pages invoice (printable)"> data-filter-tags="pages invoice (printable)">
<span class="nav-link-text" data-i18n="nav.pages_invoice_(printable)">Invoice <span class="nav-link-text" data-i18n="nav.pages_invoice_(printable)">
(printable)</span> Invoice
(printable)
</span>
</a> </a>
</li> </li>
<li> <li>
@ -1197,16 +1272,20 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<a href="page_forget.html" title="Forget Password" <a href="page_forget.html" title="Forget Password"
data-filter-tags="pages authentication forget password"> data-filter-tags="pages authentication forget password">
<span class="nav-link-text" <span class="nav-link-text"
data-i18n="nav.pages_authentication_forget_password">Forget data-i18n="nav.pages_authentication_forget_password">
Password</span> Forget
Password
</span>
</a> </a>
</li> </li>
<li> <li>
<a href="page_locked.html" title="Locked Screen" <a href="page_locked.html" title="Locked Screen"
data-filter-tags="pages authentication locked screen"> data-filter-tags="pages authentication locked screen">
<span class="nav-link-text" <span class="nav-link-text"
data-i18n="nav.pages_authentication_locked_screen">Locked data-i18n="nav.pages_authentication_locked_screen">
Screen</span> Locked
Screen
</span>
</a> </a>
</li> </li>
<li> <li>
@ -1263,8 +1342,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<a href="page_error_announced.html" title="Announced Error" <a href="page_error_announced.html" title="Announced Error"
data-filter-tags="pages error pages announced error"> data-filter-tags="pages error pages announced error">
<span class="nav-link-text" <span class="nav-link-text"
data-i18n="nav.pages_error_pages_announced_error">Announced data-i18n="nav.pages_error_pages_announced_error">
Error</span> Announced
Error
</span>
</a> </a>
</li> </li>
</ul> </ul>
@ -1282,8 +1363,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<li> <li>
<a href="page_search.html" title="Search Results" <a href="page_search.html" title="Search Results"
data-filter-tags="pages search results"> data-filter-tags="pages search results">
<span class="nav-link-text" data-i18n="nav.pages_search_results">Search <span class="nav-link-text" data-i18n="nav.pages_search_results">
Results</span> Search
Results
</span>
</a> </a>
</li> </li>
</ul> </ul>
@ -1457,8 +1540,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
</span> </span>
<div class="info-card-text"> <div class="info-card-text">
<div class="fs-lg text-truncate text-truncate-lg">Dr. Codex Lantern</div> <div class="fs-lg text-truncate text-truncate-lg">Dr. Codex Lantern</div>
<span <span class="text-truncate text-truncate-md opacity-80">drlantern@gotbootstrap.com</span>
class="text-truncate text-truncate-md opacity-80">drlantern@gotbootstrap.com</span>
</div> </div>
</div> </div>
</div> </div>
@ -1682,11 +1764,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
</div> </div>
<div class="modal-body p-0 h-100 d-flex"> <div class="modal-body p-0 h-100 d-flex">
<!-- BEGIN msgr-list --> <!-- BEGIN msgr-list -->
<div <div class="msgr-list d-flex flex-column bg-faded border-faded border-top-0 border-right-0 border-bottom-0 position-absolute pos-top pos-bottom">
class="msgr-list d-flex flex-column bg-faded border-faded border-top-0 border-right-0 border-bottom-0 position-absolute pos-top pos-bottom">
<div> <div>
<div <div class="height-4 width-3 h3 m-0 d-flex justify-content-center flex-column color-primary-500 pl-3 mt-2">
class="height-4 width-3 h3 m-0 d-flex justify-content-center flex-column color-primary-500 pl-3 mt-2">
<i class="fal fa-search"></i> <i class="fal fa-search"></i>
</div> </div>
<input type="text" class="form-control bg-white" id="msgr_listfilter_input" <input type="text" class="form-control bg-white" id="msgr_listfilter_input"
@ -1963,8 +2043,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<!-- END custom-scroll --> <!-- END custom-scroll -->
<!-- BEGIN msgr__chatinput --> <!-- BEGIN msgr__chatinput -->
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<div <div class="border-faded border-right-0 border-bottom-0 border-left-0 flex-1 mr-3 ml-3 position-relative shadow-top">
class="border-faded border-right-0 border-bottom-0 border-left-0 flex-1 mr-3 ml-3 position-relative shadow-top">
<div class="pt-3 pb-1 pr-0 pl-0 rounded-0" tabindex="-1"> <div class="pt-3 pb-1 pr-0 pl-0 rounded-0" tabindex="-1">
<div id="msgr_input" contenteditable="true" <div id="msgr_input" contenteditable="true"
data-placeholder="Type your message here..." data-placeholder="Type your message here..."
@ -2238,8 +2317,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
data-placement="top" title="" data-html="true" data-placement="top" title="" data-html="true"
data-content="The settings below uses <code>localStorage</code> to load the external <strong>CSS</strong> file as an overlap to the base css. Due to network latency and <strong>CPU utilization</strong>, you may experience a brief flickering effect on page load which may show the intial applied theme for a split second. Setting the prefered style/theme in the header will prevent this from happening." data-content="The settings below uses <code>localStorage</code> to load the external <strong>CSS</strong> file as an overlap to the base css. Due to network latency and <strong>CPU utilization</strong>, you may experience a brief flickering effect on page load which may show the intial applied theme for a split second. Setting the prefered style/theme in the header will prevent this from happening."
data-original-title="<span class='text-primary'><i class='fal fa-exclamation-triangle mr-1'></i> Heads up!</span>" data-original-title="<span class='text-primary'><i class='fal fa-exclamation-triangle mr-1'></i> Heads up!</span>"
data-template="<div class=&quot;popover bg-white border-white&quot; role=&quot;tooltip&quot;><div class=&quot;arrow&quot;></div><h3 class=&quot;popover-header bg-transparent&quot;></h3><div class=&quot;popover-body fs-xs&quot;></div></div>"><i data-template="<div class=&quot;popover bg-white border-white&quot; role=&quot;tooltip&quot;><div class=&quot;arrow&quot;></div><h3 class=&quot;popover-header bg-transparent&quot;></h3><div class=&quot;popover-body fs-xs&quot;></div></div>">
class="fal fa-info-circle mr-1"></i> more info</a> <i class="fal fa-info-circle mr-1"></i> more info
</a>
</h5> </h5>
</div> </div>
</div> </div>
@ -2338,8 +2418,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
data-placement="top" title="" data-html="true" data-placement="top" title="" data-html="true"
data-content="This is a brand new technique we are introducing which uses CSS variables to infiltrate color options. While this has been working nicely on modern browsers without much issues, some users <strong>may still face issues on Internet Explorer </strong>. Until these issues are resolved or Internet Explorer improves, this feature will remain in Beta" data-content="This is a brand new technique we are introducing which uses CSS variables to infiltrate color options. While this has been working nicely on modern browsers without much issues, some users <strong>may still face issues on Internet Explorer </strong>. Until these issues are resolved or Internet Explorer improves, this feature will remain in Beta"
data-original-title="<span class='text-primary'><i class='fal fa-question-circle mr-1'></i> Why beta?</span>" data-original-title="<span class='text-primary'><i class='fal fa-question-circle mr-1'></i> Why beta?</span>"
data-template="<div class=&quot;popover bg-white border-white&quot; role=&quot;tooltip&quot;><div class=&quot;arrow&quot;></div><h3 class=&quot;popover-header bg-transparent&quot;></h3><div class=&quot;popover-body fs-xs&quot;></div></div>"><i data-template="<div class=&quot;popover bg-white border-white&quot; role=&quot;tooltip&quot;><div class=&quot;arrow&quot;></div><h3 class=&quot;popover-header bg-transparent&quot;></h3><div class=&quot;popover-body fs-xs&quot;></div></div>">
class="fal fa-question-circle mr-1"></i> why beta?</a> <i class="fal fa-question-circle mr-1"></i> why beta?
</a>
</h5> </h5>
</div> </div>
</div> </div>
@ -2356,8 +2437,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
data-toggle="tooltip" data-placement="top" title="" data-toggle="tooltip" data-placement="top" title=""
class="d-flex bg-white border border-primary rounded overflow-hidden text-success js-waves-on" class="d-flex bg-white border border-primary rounded overflow-hidden text-success js-waves-on"
data-original-title="Default Mode" style="height: 80px"> data-original-title="Default Mode" style="height: 80px">
<div <div class="bg-primary-600 bg-primary-gradient px-2 pt-0 border-right border-primary">
class="bg-primary-600 bg-primary-gradient px-2 pt-0 border-right border-primary">
</div> </div>
<div class="d-flex flex-column flex-1"> <div class="d-flex flex-column flex-1">
<div class="bg-white border-bottom border-primary py-1"></div> <div class="bg-white border-bottom border-primary py-1"></div>
@ -2438,7 +2518,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
+ waves.js (extension) + waves.js (extension)
+ smartpanels.js (extension) + smartpanels.js (extension)
+ src/../jquery-snippets.js (core) --> + src/../jquery-snippets.js (core) -->
<!-- verdors.bundle.js 已含有 jquery Library v3.5.1--> <!-- verdors.bundle.js 已含有 jquery Library v3.5.1-->
<script src="lib/vendors.bundle.js"></script> <script src="lib/vendors.bundle.js"></script>
<!-- toast 第三方套件 若 require 此套件只能用 define 使用,先暫時 html 引用--> <!-- toast 第三方套件 若 require 此套件只能用 define 使用,先暫時 html 引用-->
@ -2452,7 +2531,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<script src="js/bajascript/bscriptReq.js"></script> <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 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 src='js/bajascript/require.js'></script>
<!--<script src='js/require.js'></script>-->
<script type='text/javascript'> <script type='text/javascript'>
define('niagaraSystemProperties', function () { define('niagaraSystemProperties', function () {
return { return {
@ -2642,6 +2722,240 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
} }
function drawInfoTabBlo(devGuid) {
let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`);
let tbody = tabEle.append("<tbody>");
let columnNames = ["設備編號", "設備名稱"];
$.each(columnNames, (index, colName) => {
let tr = $("<tr></tr>");
let td = $("<td></td>");
td.text(colName);
tr.append(td);
tbody.append(tr);
})
let url = baseApiUrl + "/api/Device/GetBaseDevice";
let sendData = {
device_guid: devGuid,
};
objSendData.Data = sendData;
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
tbody.find("tr").eq(0).append(creEle("td", res.data.device_number));
tbody.find("tr").eq(1).append(creEle("td", res.data.full_name));
}
}, null, "POST").send();
return tabEle.prop("outerHTML");
}
function drawErrRecTabBlo() {
let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
</table>`
return strHtml;
}
function drawOpeRecTabBlo() {
let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
</table>`
return strHtml;
}
function initPopover() {
$("[name=devItem]").each((index, ele) => {
let devNum = $(ele).data("number"); //設備編號
let devGuid = $(ele).data("id"); //guid
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>
</div>`,
group: "device",
onShow: function (tooltipEle, oriEle) {
var tab = new YT.Tab({ tabName: "cardTab" })
loadOpeRecTable(devGuid);
//loadErrRecTable2($(oriEle).data("number"));
//loadErrRecTable();
loadErr($(oriEle).data("number"));
}
})
})
}
function loadOpeRecTable(devGuid) {
let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;
let tag = "#opeRecTable";
let column_defs = [
{ "targets": [0], "width": "8%", "sortable": true },
{ "targets": [1], "width": "8%", "sortable": true },
{ "targets": [2], "width": "7%", "sortable": true },
{ "targets": [3], "width": "7%", "sortable": true },
];
let columns = [
{
"title": "類型",
"data": "work_type_name",
},
{
"title": "項目",
"data": "fix_do",
},
{
"title": "處理人員",
"data": "work_person_name",
},
{
"title": "發生/完成時間",
"data": "finishTime",
"render": function (data, type, row) {
return row.createdAt + "<br>" + data;
},
},
];
//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");
}
function loadErr(allPath) {
if (allPath != undefined && allPath != null) {
let _pathArr = allPath.split("_");//TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1
let _devicePath = _pathArr[0] + "_" + _pathArr[1] + "_" + _pathArr[2] + "_" + _pathArr[3] + "_" + _pathArr[4] + "_" + _pathArr[5];
getOneDeviceAlarmTop10ByBaja(_devicePath, callbackForErr);
}
else {
console.log("no device");
}
}
function callbackForErr(result) {
let tag = "#errRecTable";
let datas;
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": "normalTime",
"render": function (data, type, row) {
return row.timestamp + "<br>" + data;
},
},
];
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");
}
</script> </script>
</body> </body>