[電梯管理] Card 內容訂閱程序建置 | Table 訂閱程序建置 | 右側緊急迴轉店用程序建置
This commit is contained in:
parent
6303bef388
commit
08054e1574
@ -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>
|
@ -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>
|
@ -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;
|
||||||
|
@ -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="popover bg-white border-white" role="tooltip"><div class="arrow"></div><h3 class="popover-header bg-transparent"></h3><div class="popover-body fs-xs"></div></div>"><i
|
data-template="<div class="popover bg-white border-white" role="tooltip"><div class="arrow"></div><h3 class="popover-header bg-transparent"></h3><div class="popover-body fs-xs"></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="popover bg-white border-white" role="tooltip"><div class="arrow"></div><h3 class="popover-header bg-transparent"></h3><div class="popover-body fs-xs"></div></div>"><i
|
data-template="<div class="popover bg-white border-white" role="tooltip"><div class="arrow"></div><h3 class="popover-header bg-transparent"></h3><div class="popover-body fs-xs"></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>
|
||||||
|
Loading…
Reference in New Issue
Block a user