2022-11-15 18:47:16 +08:00
< style >
[id^=yt_tooltip] {
width: 450px;
}
< / style >
< div class = "row" >
2022-11-16 14:53:22 +08:00
< div class = "col-sm-12 col-xl-5" id = "floDevList" >
<!-- <div class="d - flex justify - content - start mb - 6">
2022-11-15 18:47:16 +08:00
< button type = "button" class = "btn btn-primary waves-effect waves-themed mr-5" > 19 F< / button >
< div id = "floor19" class = "mr-5 cur-poi" >
< span class = "status status-success d-inline-block" >
< img src = "img/demo/avatars/avatar-c.png" class = "profile-image rounded-circle" alt = "..." >
< / span > 19F 門口東
< / div >
< div class = "mr-5" >
< span class = "status status-danger d-inline-block" >
< img src = "img/demo/avatars/avatar-c.png" class = "profile-image rounded-circle" alt = "..." >
< / span > 19F 戶外門口中間
< / div >
< / div >
< div class = "d-flex justify-content-start mb-6" >
< button type = "button" class = "btn btn-primary waves-effect waves-themed mr-5" > 21 F< / button >
< div class = " mr-5" >
< span class = "status status-success d-inline-block" >
< img src = "img/demo/avatars/avatar-c.png" class = "profile-image rounded-circle" alt = "..." >
< / span > 21F 電錶01
< / div >
< div class = "mr-5" >
< span class = "status status-danger d-inline-block" >
< img src = "img/demo/avatars/avatar-c.png" class = "profile-image rounded-circle" alt = "..." >
< / span > 21F 電錶02
< / div >
2022-11-16 14:53:22 +08:00
< / div > -->
2022-11-15 18:47:16 +08:00
< / 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 >
< script >
$(function () {
2022-11-16 14:53:22 +08:00
getFloDevList();
2022-11-15 18:47:16 +08:00
})
2022-11-16 14:53:22 +08:00
function getFloDevList() {
let url = baseApiUrl + "/api/Device/GetDeviceList";
let sendData = {
main_system_tag: pageAct.sysMainTag,
building_tag: pageAct.buiTag,
floor_tag: pageAct.floTag,
};
objSendData.Data = sendData;
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
let strHtml = ``;
$.each(res.data, (index, floObj) => {
strHtml += "< div class = 'd-flex justify-content-start mb-6' > "
strHtml += `< button id = "floItemBtn${floObj.full_name}" type = "button" class = "btn btn-primary waves-effect waves-themed mr-5" > ${floObj.full_name}< / button > `
$.each(floObj.device_list, (index2, devObj) => {
2022-11-17 09:36:53 +08:00
console.log(">>>> url: " + baseImgUrl + " , img: " + varPathImg + ", icon: " + devObj.device_master_icon);
2022-11-16 17:23:00 +08:00
strHtml += `< div name = "devItem" data-id = "${devObj.device_guid}" data-number = "${devObj.device_number}" class = "mr-5 cur-poi" >
2022-11-16 14:53:22 +08:00
< span class = "status status-success d-inline-block" >
< img src = "${baseImgUrl + varPathImg + devObj.device_master_icon}" class = "profile-image rounded-circle" onerror = "defDev(this)" alt = "..." >
< / span > ${devObj.full_name}
< / div > `;
})
strHtml += "< / div > "
})
$("#floDevList").append(strHtml);
initPopover();
}
}, null, "POST").send();
}
2022-11-15 18:47:16 +08:00
function drawStateTabBlo() {
2022-11-17 09:36:53 +08:00
let strHtml = `< table class = "table table-bordered table-striped text-center m-0" id = "iframemodal" >
< div class = "modal-body" >
< iframe src = "http://localhost:8080/ord?station:%7Cslot:/TPE/B1/EE/E4/R2F/NA/WHT/N1|view:?fullScreen=true" width = "100%" height = "100%" > < / iframe >
< / div >
< / table > `
2022-11-15 18:47:16 +08:00
return strHtml;
}
2022-11-17 10:49:49 +08:00
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();
//let strHtml = `< table class = "table table-bordered table-striped text-center m-0" >
// < tbody >
// < tr >
// < td > 設備編號< / td >
// < td > B01-B2-19F-CR-001< / td >
// < / tr >
// < tr >
// < td > 設備名稱< / td >
// < td > A區迴路001< / td >
// < / tr >
// < / tbody >
// < / table > `
return tabEle.prop("outerHTML");
2022-11-15 18:47:16 +08:00
}
function drawErrRecTabBlo() {
2022-11-17 09:36:53 +08:00
let strHtml = `< table id = "errRecTable" class = "table table-bordered table-striped text-center m-0 w-100" >
2022-11-15 18:47:16 +08:00
< / 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() {
2022-11-17 10:49:49 +08:00
$("[name=devItem]").each((index, ele) => {
let devNum = $(ele).data("number"); //設備編號
let devGuid = $(ele).data("id"); //guid
$(ele).YTTooltip({
html: `< div class = "card m-1 border device-wrap" >
< div class = "card-header p-2 px-3" >
< 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 >
< / 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 >
2022-11-15 18:47:16 +08:00
< / div >
< / div > `,
2022-11-16 14:53:22 +08:00
group:"device",
2022-11-16 17:23:00 +08:00
onShow: function (tooltipEle, oriEle) {
2022-11-15 18:47:16 +08:00
var tab = new YT.Tab({ tabName: "cardTab" })
2022-11-17 10:51:14 +08:00
//基本資料tab block
$("#info").append(drawInfoTabBlo(devGuid))
2022-11-15 18:47:16 +08:00
loadOpeRecTable();
2022-11-17 09:36:53 +08:00
//loadErrRecTable2($(oriEle).data("number"));
loadErrRecTable();
2022-11-15 18:47:16 +08:00
}
})
function loadOpeRecTable() {
let url = "https://api.npoint.io/31e717774a0f5822cc7b";
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": "異常ID",
"data": "errId",
},
{
"title": "異常原因",
"data": "errReason",
},
{
"title": "ACK確認",
"data": "ackCheck",
},
{
"title": "發生/賦歸時間",
"data": "time",
},
];
let callback = function () {
$('#opeRecTable').wrap("< div class = 'scrolledTable' > < / div > "); //不採用datatable內建scrollbody，
let api = this.api();
api.columns.adjust();
}
opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, callback, null, null, null, null, null, "tpi");
}
2022-11-17 09:36:53 +08:00
function loadErrRecTable() {
let tag = "#errRecTable";
let datas;
//getOneDeviceAlarmTop10ByBaja(_devicePath, callback);
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": "異常ID",
"data": "uuid",
},
{
"title": "異常原因",
"data": "msgText",
},
{
"title": "ACK確認",
"data": "ackState",
},
{
"title": "發生/賦歸時間",
"data": "timestamp",
},
];
//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);
}
//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 > ');
// });
// }
//}
2022-11-15 18:47:16 +08:00
}
2022-11-17 09:36:53 +08:00
2022-11-15 18:47:16 +08:00
< / script >
