2022-11-15 18:47:16 +08:00
|
|
|
|
<style>
|
|
|
|
|
[id^=yt_tooltip] {
|
2022-11-18 18:30:19 +08:00
|
|
|
|
width: 650px;
|
2022-11-15 18:47:16 +08:00
|
|
|
|
}
|
2022-11-18 12:31:57 +08:00
|
|
|
|
|
|
|
|
|
.circle-light {
|
|
|
|
|
width: 25px;
|
|
|
|
|
height: 25px;
|
|
|
|
|
border-radius: 50px;
|
|
|
|
|
}
|
2022-11-15 18:47:16 +08:00
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<div class="row">
|
2022-11-18 12:31:57 +08:00
|
|
|
|
<div class="col-sm-12 col-xl-5">
|
|
|
|
|
<div class="d-flex mb-4" style="gap:15px">
|
|
|
|
|
<div class="row m-0 align-items-center">
|
2022-11-21 18:47:47 +08:00
|
|
|
|
<span id="sysNorLight" class="circle-light mr-2 " data-light-type="normal"></span>
|
2022-11-18 12:31:57 +08:00
|
|
|
|
<label class="mb-0">正常</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row m-0 align-items-center">
|
2022-11-21 18:47:47 +08:00
|
|
|
|
<span id="sysCloLight" class="circle-light mr-2" data-light-type="close"></span>
|
2022-11-18 12:31:57 +08:00
|
|
|
|
<label class="mb-0">關機</label>
|
2022-11-15 18:47:16 +08:00
|
|
|
|
</div>
|
2022-11-18 12:31:57 +08:00
|
|
|
|
<div class="row m-0 align-items-center">
|
2022-11-21 18:47:47 +08:00
|
|
|
|
<span id="sysErrLight" class="circle-light mr-2" data-light-type="error"></span>
|
2022-11-18 12:31:57 +08:00
|
|
|
|
<label class="mb-0">異常</label>
|
2022-11-15 18:47:16 +08:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2022-11-18 12:31:57 +08:00
|
|
|
|
<div class="col-12 p-0" id="floDevList">
|
2022-11-15 18:47:16 +08:00
|
|
|
|
|
2022-11-18 12:31:57 +08:00
|
|
|
|
|
|
|
|
|
</div>
|
2022-11-15 18:47:16 +08:00
|
|
|
|
</div>
|
|
|
|
|
<div class="col-sm-12 col-xl-7">
|
2022-11-18 12:31:57 +08:00
|
|
|
|
<!--<img src="img/clouds.png" class="img-fluid" style="min-height: 520px;">-->
|
2022-11-15 18:47:16 +08:00
|
|
|
|
<!--<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-21 18:47:47 +08:00
|
|
|
|
setLightColor();
|
2022-11-15 18:47:16 +08:00
|
|
|
|
})
|
|
|
|
|
|
2022-11-21 18:47:47 +08:00
|
|
|
|
//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() {
|
|
|
|
|
$("[data-light-type]").each((index, ele) => {
|
|
|
|
|
let type = $(ele).data("light-type");
|
|
|
|
|
let color = "#000";
|
|
|
|
|
switch (type) {
|
|
|
|
|
case "normal":
|
|
|
|
|
color = pageAct.sysSubObj.device_normal_color ?? "var(--theme-success)";
|
|
|
|
|
break;
|
|
|
|
|
case "close":
|
|
|
|
|
color = pageAct.sysSubObj.device_close_color ?? "var(--theme-secondary)";
|
|
|
|
|
break;
|
|
|
|
|
case "error":
|
|
|
|
|
color = pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
$(ele).css("background-color", color);
|
|
|
|
|
})
|
2022-11-18 18:30:19 +08:00
|
|
|
|
}
|
|
|
|
|
|
2022-11-16 14:53:22 +08:00
|
|
|
|
function getFloDevList() {
|
|
|
|
|
let url = baseApiUrl + "/api/Device/GetDeviceList";
|
|
|
|
|
let sendData = {
|
2022-11-17 15:32:39 +08:00
|
|
|
|
sub_system_tag: pageAct.sysSubTag,
|
2022-11-16 14:53:22 +08:00
|
|
|
|
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) => {
|
2022-11-21 18:47:47 +08:00
|
|
|
|
strHtml += `<div class='d-flex justify-content-start mb-5' style="">`
|
2022-11-18 12:31:57 +08:00
|
|
|
|
strHtml += `<button id="floItemBtn${floObj.full_name}" type="button" class="btn btn-primary waves-effect waves-themed mr-5 align-self-center" >${floObj.full_name}</button>`
|
2022-11-16 14:53:22 +08:00
|
|
|
|
|
|
|
|
|
$.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-21 18:47:47 +08:00
|
|
|
|
|
|
|
|
|
strHtml += `<div class="card m-1 border device-wrap" style="width:300px">
|
|
|
|
|
<div class="card-body p-2">
|
|
|
|
|
<div class="d-flex mb-2">
|
|
|
|
|
<div class="mr-5 cur-poi">
|
|
|
|
|
<span class="d-inline-block mr-3">
|
|
|
|
|
<img src="${baseImgUrl + varPathImg + devObj.device_master_icon}" class="profile-image rounded-circle" onerror="defDev(this)" alt="...">
|
|
|
|
|
</span>
|
|
|
|
|
<a href="javascript:;">${devObj.full_name}</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="d-flex mb-0 mt-2 align-items-center">
|
|
|
|
|
<span id="${devObj.device_number}_status" class="circle-light" data-light-type="normal"></span>
|
|
|
|
|
<span class="d-none">即時功率:</span>
|
|
|
|
|
<a href="javascript:;" name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" data-name="${devObj.full_name}" class=" ml-2 mb-0 ">詳細資料</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2022-11-16 14:53:22 +08:00
|
|
|
|
</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();
|
|
|
|
|
|
|
|
|
|
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
|
2022-11-18 10:50:46 +08:00
|
|
|
|
let devName = $(ele).data("name"); //full_name
|
2022-11-17 10:49:49 +08:00
|
|
|
|
$(ele).YTTooltip({
|
|
|
|
|
html: `<div class="card m-1 border device-wrap">
|
2022-11-23 09:08:46 +08:00
|
|
|
|
<div class="card-header p-3">
|
2022-11-21 18:47:47 +08:00
|
|
|
|
|
2022-11-18 10:50:46 +08:00
|
|
|
|
<div class="position-absolute w-50" style="word-break: break-all;">
|
|
|
|
|
<label class="m-0 mt-2">${devName}</label>
|
|
|
|
|
</div>
|
2022-11-17 10:49:49 +08:00
|
|
|
|
<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>
|
2022-11-23 09:08:46 +08:00
|
|
|
|
<button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
|
2022-11-17 10:49:49 +08:00
|
|
|
|
</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">
|
2022-11-17 15:22:45 +08:00
|
|
|
|
|
2022-11-17 10:49:49 +08:00
|
|
|
|
</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-17 15:22:45 +08:00
|
|
|
|
group: "device",
|
|
|
|
|
onShow: function (tooltipEle, oriEle) {
|
|
|
|
|
var tab = new YT.Tab({ tabName: "cardTab" })
|
2022-11-17 18:26:30 +08:00
|
|
|
|
console.log($(oriEle).data("number"))
|
2022-11-17 15:22:45 +08:00
|
|
|
|
//基本資料tab block
|
2022-11-18 11:02:19 +08:00
|
|
|
|
$("#info").html(drawInfoTabBlo(devGuid));
|
2022-11-23 11:11:40 +08:00
|
|
|
|
loadErr($(oriEle).data("number"));
|
2022-11-17 18:26:30 +08:00
|
|
|
|
loadOpeRecTable(devGuid);
|
2022-11-17 15:22:45 +08:00
|
|
|
|
}
|
|
|
|
|
})
|
2022-11-15 18:47:16 +08:00
|
|
|
|
})
|
2022-11-17 15:22:45 +08:00
|
|
|
|
}
|
2022-11-15 18:47:16 +08:00
|
|
|
|
|
2022-11-17 18:26:30 +08:00
|
|
|
|
function loadOpeRecTable(devGuid) {
|
|
|
|
|
let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;
|
2022-11-17 15:22:45 +08:00
|
|
|
|
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": "類型",
|
2022-11-18 10:50:46 +08:00
|
|
|
|
"data": "work_type_name",
|
2022-11-17 15:22:45 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "項目",
|
|
|
|
|
"data": "fix_do",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "處理人員",
|
|
|
|
|
"data": "work_person_name",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "發生/完成時間",
|
2022-11-18 09:25:11 +08:00
|
|
|
|
"data": "finishTime",
|
2022-11-18 12:31:57 +08:00
|
|
|
|
"render": function (data, type, row) {
|
2022-11-18 09:25:11 +08:00
|
|
|
|
return row.createdAt + "<br>" + data;
|
2022-11-15 18:47:16 +08:00
|
|
|
|
},
|
2022-11-17 15:22:45 +08:00
|
|
|
|
},
|
2022-11-15 18:47:16 +08:00
|
|
|
|
|
2022-11-17 15:22:45 +08:00
|
|
|
|
];
|
2022-11-18 12:31:57 +08:00
|
|
|
|
|
|
|
|
|
|
2022-11-15 18:47:16 +08:00
|
|
|
|
|
2022-11-17 15:22:45 +08:00
|
|
|
|
//let callback = function () {
|
|
|
|
|
// $('#opeRecTable').wrap("<div class='scrolledTable'></div>"); //不採用datatable內建scrollbody,會導致thead跑掉
|
|
|
|
|
// let api = this.api();
|
|
|
|
|
// api.columns.adjust();
|
|
|
|
|
//}
|
2022-11-17 09:36:53 +08:00
|
|
|
|
|
2022-11-18 12:31:57 +08:00
|
|
|
|
let opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi");
|
2022-11-17 15:22:45 +08:00
|
|
|
|
}
|
2022-11-17 09:36:53 +08:00
|
|
|
|
|
2022-11-23 11:11:40 +08:00
|
|
|
|
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) {
|
2022-11-17 15:22:45 +08:00
|
|
|
|
let tag = "#errRecTable";
|
|
|
|
|
let datas;
|
|
|
|
|
|
|
|
|
|
let column_defs = [
|
2022-11-18 18:30:19 +08:00
|
|
|
|
{ "targets": [0], "width": "15%", "sortable": true },
|
|
|
|
|
{ "targets": [1], "width": "25%", "sortable": true },
|
|
|
|
|
{ "targets": [2], "width": "25%", "sortable": true },
|
|
|
|
|
{ "targets": [3], "width": "35%", "sortable": true },
|
2022-11-17 15:22:45 +08:00
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
let columns = [
|
|
|
|
|
{
|
|
|
|
|
"title": "異常ID",
|
|
|
|
|
"data": "uuid",
|
2022-11-21 18:47:47 +08:00
|
|
|
|
|
2022-11-17 15:22:45 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "異常原因",
|
|
|
|
|
"data": "msgText",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "ACK確認",
|
|
|
|
|
"data": "ackState",
|
|
|
|
|
},
|
|
|
|
|
{
|
2022-11-23 11:11:40 +08:00
|
|
|
|
"title": "發生/完成時間",
|
|
|
|
|
"data": "normalTime",
|
|
|
|
|
"render": function (data, type, row) {
|
|
|
|
|
return row.timestamp + "<br>" + data;
|
|
|
|
|
},
|
2022-11-17 15:22:45 +08:00
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
let json_object = JSON.parse(result);
|
|
|
|
|
datas = json_object['data'];
|
2022-11-18 10:50:46 +08:00
|
|
|
|
errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "tpi");
|
2022-11-17 09:36:53 +08:00
|
|
|
|
|
2022-11-23 11:11:40 +08:00
|
|
|
|
}
|
2022-11-17 09:36:53 +08:00
|
|
|
|
|
2022-11-15 18:47:16 +08:00
|
|
|
|
</script>
|