[電梯管理] Card 內容訂閱程序建置 | Table 訂閱程序建置 | 右側緊急迴轉店用程序建置
This commit is contained in:
parent
6303bef388
commit
08054e1574
@ -121,12 +121,12 @@
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-check-label h4" for="flexRadioDefault1">
|
||||
<label id="emerReturnText" class="form-check-label h4" for="flexRadioDefault1">
|
||||
未動作
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<span id="emerReturn" class="circle-light"></span>
|
||||
<span id="emerReturn" class="circle-light bg-secondary"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-around mt-2">
|
||||
@ -136,12 +136,12 @@
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-check-label h4" for="flexRadioDefault1">
|
||||
<label id="groConFailText" class="form-check-label h4" for="flexRadioDefault1">
|
||||
未動作
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<span id="groConFail" class="circle-light"></span>
|
||||
<span id="groConFail" class="circle-light bg-secondary"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-around mt-2">
|
||||
@ -151,12 +151,12 @@
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-check-label h4" for="flexRadioDefault1">
|
||||
<label id="emerPowerText" class="form-check-label h4" for="flexRadioDefault1">
|
||||
未動作
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<span id="emerPower" class="circle-light"></span>
|
||||
<span id="emerPower" class="circle-light bg-secondary"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-around mt-2">
|
||||
@ -166,12 +166,12 @@
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-check-label h4" for="flexRadioDefault1">
|
||||
<label id="fireReturnText" class="form-check-label h4" for="flexRadioDefault1">
|
||||
未動作
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<span id="fireReturn" class="circle-light"></span>
|
||||
<span id="fireReturn" class="circle-light bg-secondary"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-around mt-2">
|
||||
@ -181,12 +181,12 @@
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-check-label h4" for="flexRadioDefault1">
|
||||
<label id="earQuaConText" class="form-check-label h4" for="flexRadioDefault1">
|
||||
未動作
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<span id="earQuaCon" class="circle-light"></span>
|
||||
<span id="earQuaCon" class="circle-light bg-secondary"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -898,23 +898,27 @@
|
||||
function getFloDevList() {
|
||||
|
||||
}
|
||||
//emerReturn
|
||||
//groConFail
|
||||
//emerPower
|
||||
//fireReturn
|
||||
//earQuaCon
|
||||
|
||||
//baja 訂閱設備
|
||||
function subDeviceSetStatus() {
|
||||
|
||||
myBaja = new subscriptionDevices();
|
||||
myBaja.setSubscribeDevicesByBql(subOrdPath);
|
||||
myBaja.setSubscribeDevicesCallBack(function (data) {
|
||||
|
||||
console.log(data)
|
||||
function getValueByName(pointName) {
|
||||
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) {
|
||||
return false;
|
||||
}
|
||||
@ -928,6 +932,27 @@
|
||||
if (data.point_name == "ST") {
|
||||
$(`#${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) {
|
||||
//顯示正常燈號
|
||||
@ -938,15 +963,20 @@
|
||||
$(`#${matchDevice.device_number}_card`).attr("data-light-type", "error").data("light-type", "error");
|
||||
}
|
||||
setLightColor();
|
||||
|
||||
|
||||
if (subSeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) {
|
||||
let obj = {};
|
||||
obj.device_number = matchDevice.device_number;
|
||||
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)
|
||||
/*$(`#opeModTable${matchDevice.device_number} #notSerFloor`).text(getValueByName("COR"))*/
|
||||
});
|
||||
@ -955,8 +985,9 @@
|
||||
|
||||
//baja 訂閱設備
|
||||
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) {
|
||||
return false;
|
||||
}
|
||||
@ -967,11 +998,23 @@
|
||||
}
|
||||
|
||||
let masterTag = devNum?.split("_")[5];
|
||||
|
||||
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)
|
||||
$(`#imdStaTable_${devNum} #devName`).text(matchDevice.full_name);
|
||||
$(`#imdStaTable_${devNum} #devNum`).text(devNum);
|
||||
$(`#imdStaTable_${devNum} #status`).text(subData["ST"])
|
||||
$(`#imdStaTable_${devNum} #group`).text(masterTag);
|
||||
@ -985,7 +1028,7 @@
|
||||
$(`#opeModTable_${devNum} #runOpe`).html(creLight(subData["MID"]))
|
||||
$(`#opeModTable_${devNum} #returnFin`).html(creLight(subData["COR"]))
|
||||
$(`#opeModTable_${devNum} #notSerFloor`).text(notSerFloors.join("、"))
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -1036,12 +1079,12 @@
|
||||
<div type="button" class="card-body">
|
||||
<span class="d-flex">
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
</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) {
|
||||
let tbody = creEle("tbody");
|
||||
@ -1158,14 +1146,11 @@
|
||||
|
||||
}
|
||||
|
||||
|
||||
function drawStateTabBlo() {
|
||||
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>`
|
||||
return strHtml;
|
||||
function drawStateTabBlo(devNum) {
|
||||
let div = creDiv(["row"]);
|
||||
div.append(creDiv(["col-xl-6"]).append(drawImdStaBlock(devNum)))
|
||||
div.append(creDiv(["col-xl-6"]).append(drawOpeModBlock(devNum)))
|
||||
return div.outerHtml();
|
||||
}
|
||||
|
||||
function drawImdStaBlock(devNum) {
|
||||
@ -1173,7 +1158,8 @@
|
||||
let tbody = tabEle.append("<tbody>");
|
||||
let rows =
|
||||
[
|
||||
{ id: "devNum", text: "號機" },
|
||||
{ id: "devName", text: "號機" },
|
||||
{ id: "devNum", text: "Tag Name" },
|
||||
{ id: "status", text: "狀態" },
|
||||
{ id: "group", text: "組別" },
|
||||
{ id: "weight", text: "載重" },
|
||||
@ -1183,18 +1169,37 @@
|
||||
{ width: "40%" },
|
||||
{ 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) => {
|
||||
let tr = $("<tr></tr>");
|
||||
$.each(cols, (index2, col) => {
|
||||
let td = $("<td></td>");
|
||||
td.css("width", col.width)
|
||||
if (index2 == 0) {
|
||||
td.text(row.text);
|
||||
if (index < 1 || index > 99 || index2 != 2) {
|
||||
let td = $("<td></td>");
|
||||
td.css("width", col.width)
|
||||
if (index2 == 0) {
|
||||
td.text(row.text);
|
||||
}
|
||||
if (index2 == 1) {
|
||||
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);
|
||||
}
|
||||
if (index2 == 1) {
|
||||
td.prop("id", row.id)
|
||||
}
|
||||
tr.append(td);
|
||||
})
|
||||
tbody.append(tr);
|
||||
})
|
||||
@ -1216,15 +1221,14 @@
|
||||
{ id: "notSerFloor", text: "不服務樓層" },
|
||||
];
|
||||
let cols = [
|
||||
{ width: "40%" },
|
||||
{ width: "30%" },
|
||||
{ width: "30%" },
|
||||
{ width: "50%" },
|
||||
{ width: "50%" },
|
||||
]
|
||||
$.each(rows, (index, row) => {
|
||||
let tr = $("<tr></tr>");
|
||||
$.each(cols, (index2, col) => {
|
||||
let td = $("<td></td>");
|
||||
|
||||
|
||||
td.css("width", col.width)
|
||||
if (index2 == 0) {
|
||||
td.text(row.text);
|
||||
@ -1240,190 +1244,5 @@
|
||||
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>
|
||||
@ -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() {
|
||||
$("[data-light-type]").each((index, ele) => {
|
||||
let type = $(ele).data("light-type");
|
||||
@ -175,283 +157,5 @@
|
||||
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>
|
||||
@ -44,24 +44,50 @@ label[id$='-error'].error {
|
||||
}
|
||||
|
||||
.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% {
|
||||
background: #ffa100;
|
||||
color: var(--flash-color-1);
|
||||
}
|
||||
|
||||
49% {
|
||||
background: #ffa100;
|
||||
color: var(--flash-color-1);
|
||||
}
|
||||
|
||||
50% {
|
||||
background: #26272b;
|
||||
color: var(--flash-color-2);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.bg-orange {
|
||||
background-color:#ffa100;
|
||||
}
|
||||
|
||||
/* text color */
|
||||
.t-main-purple {
|
||||
color: #623c80 !important;
|
||||
|
||||
1188
Frontend/index.html
1188
Frontend/index.html
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user