jay.chang/ibms-dome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[前台] 首頁 系統大類異常樣式修正 | 系統監控 樓層小卡片大小修正

Browse Source
This commit is contained in:
Celeste 2023-02-17 11:01:29 +08:00
parent 887fcef66a
commit aecb795124
5 changed files with 1828 additions and 965 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2435
Frontend/_dashboard.html
View File

File diff suppressed because it is too large Load Diff

16
Frontend/_sysMonAll.html
View File

@ -47,7 +47,7 @@
$(function () { $(function () {
getBuildMenu((arr, data) => { getBuildMenu((arr, data) => {
console.log(arr) // console.log(arr)
buildMenuData = data; buildMenuData = data;
if (arr.indexOf(4) != -1) { if (arr.indexOf(4) != -1) {
getFloDevList(arr[0] == 4 ? "left" : "right"); getFloDevList(arr[0] == 4 ? "left" : "right");
@ -267,7 +267,7 @@
} else { } else {
let strHtml = ``; let strHtml = ``;
$.each(res.data, (index, floObj) => { $.each(res.data, (index, floObj) => {
strHtml += `<div class='d-flex justify-content-start mb-5 ' style="">` strHtml += `<div class='d-flex justify-content-start mb-5'>`
strHtml += `<button id="floItemBtn${floObj.full_name}" type="button" class="btn btn-primary waves-effect waves-themed mr-5 mt-1 align-self-start" >${floObj.full_name}</button>` strHtml += `<button id="floItemBtn${floObj.full_name}" type="button" class="btn btn-primary waves-effect waves-themed mr-5 mt-1 align-self-start" >${floObj.full_name}</button>`
strHtml += `<div class="col p-0 d-grid grid-gap-5 grid-temp-col-c" style="--c-grid-temp-col:repeat(auto-fill,minmax(250px,1fr))">` strHtml += `<div class="col p-0 d-grid grid-gap-5 grid-temp-col-c" style="--c-grid-temp-col:repeat(auto-fill,minmax(250px,1fr))">`
$.each(floObj.device_list, (index2, devObj) => { $.each(floObj.device_list, (index2, devObj) => {
@ -362,11 +362,12 @@
// Card 即時狀態 // Card 即時狀態
function drawStateTabBlo(devNum) { function drawStateTabBlo(devNum) {
let devPath = devNum.replaceAll("_", "/"); let devPath = devNum.replaceAll("_", "/");
let position = $(`.card.device-wrap[data-number=${devNum}]`).data("position"); let position = $(`.card.device-wrap[data-number=${devNum}]`).data("position") || "left";
let width = buildMenuData[position + "_icon_click_url_width"] ? buildMenuData[position + "_icon_click_url_width"] + "px" : "100%"; let width = buildMenuData[position + "_icon_click_url_width"] ? buildMenuData[position + "_icon_click_url_width"] + "px" : "100%";
let height = buildMenuData[position + "_icon_click_url_height"] ? buildMenuData[position + "_icon_click_url_height"] + "px" : "100%"; let height = buildMenuData[position + "_icon_click_url_height"] ? buildMenuData[position + "_icon_click_url_height"] + "px" : "100%";
let strHtml = `<div style="height:100%;width:100%">
<iframe src="/ord?station:%7Cslot:/${devPath}|view:?fullScreen=true" style="width:${width};height:${height};min-height:100px;"></iframe> let strHtml = `<div style="width:${width};height:${height};">
<iframe src="/ord?station:%7Cslot:/${devPath}|view:?fullScreen=true" style="width:${width};height:${height};"></iframe>
</div>` </div>`
return strHtml; return strHtml;
} }
@ -538,12 +539,12 @@
} }
function setHotspotPoint(myDataList = []) { function setHotspotPoint(myDataList = []) {
console.log(myDataList) // console.log(myDataList)
getHopspotPoint(myDataList); getHopspotPoint(myDataList);
} }
function setLightPoint(myDataList = []) { function setLightPoint(myDataList = []) {
console.log(myDataList) // console.log(myDataList)
getLightData(myDataList); getLightData(myDataList);
} }
@ -580,7 +581,6 @@
let name = allDevList.filter(x => x.device_guid == devObj.device_guid)[0]?.full_name; let name = allDevList.filter(x => x.device_guid == devObj.device_guid)[0]?.full_name;
devObj.full_name = name; devObj.full_name = name;
parentEle = crePosPopover(position, devObj); parentEle = crePosPopover(position, devObj);
$(parentEle).click(); $(parentEle).click();
}) })

169
Frontend/_sysMonFloor.html
View File

@ -1,6 +1,6 @@
<style> <style>
[id^=yt_tooltip] { [id^=yt_tooltip] {
width: 450px; min-width: 520px;
} }
</style> </style>
@ -15,7 +15,7 @@
</div> --> </div> -->
<div class="d-flex"> <div class="d-flex">
<div class="col-6 my-3"> <div class="col-6 my-3">
<div id="floChart" style="height : 80vh!important;width:100%"></div> <div id="floChart" style="height:80vh!important;width:100%"></div>
</div> </div>
<div class="col-6 my-3"> <div class="col-6 my-3">
<div id="forgeHeatBarDiv" class="d-flex mb-4" style="gap:15px"> <div id="forgeHeatBarDiv" class="d-flex mb-4" style="gap:15px">
@ -35,12 +35,14 @@
var global_emergency_alarm_device_number = []; var global_emergency_alarm_device_number = [];
var zoomToggle = 3; var zoomToggle = 3;
$(function () { $(function () {
console.log("floor")
drawHeatBar(); drawHeatBar();
getHotspotPoint(() => { getHotspotPoint(() => {
show3DModel(pageAct.urn); show3DModel(pageAct.urn);
}); });
initChart(); initChart();
getFloData(); getFloData();
subDevice(); subDevice();
}) })
@ -164,7 +166,7 @@
function initChart() { function initChart() {
let chartDom = $("#floChart")[0]; let chartDom = $("#floChart")[0];
floChart = echarts.init(chartDom, null, { width: 'auto'}); floChart = echarts.init(chartDom, null, { width: 'auto' });
} }
function chartHandler(url) { function chartHandler(url) {
@ -182,12 +184,14 @@
tooltip: { tooltip: {
formatter: function (params) { formatter: function (params) {
if (params.data.device_node_guid != undefined && params.data.device_node_guid != null && params.data.device_node_guid != "") { if (params.data.device_node_guid != undefined && params.data.device_node_guid != null && params.data.device_node_guid != "") {
return `名稱：${params.data.device_node_full_name}<br> return `<div >
Guid：${params.data.device_node_guid}` 名稱：${params.data.device_node_full_name}<br>
Guid：${params.data.device_node_guid}
</div>`
} }
else { else {
return `名稱：${params.data.full_name}<br> return `<div >名稱：${params.data.full_name}<br>
Guid：${params.data.device_guid}` Guid：${params.data.device_guid}</div>`
} }
} }
}, },
@ -327,7 +331,6 @@
let position = [params.event.event.clientX, params.event.event.clientY]; let position = [params.event.event.clientX, params.event.event.clientY];
data._dbId = data._dbId ?? null; data._dbId = data._dbId ?? null;
parentEle = crePosPopover(position, data); parentEle = crePosPopover(position, data);
$(parentEle).click(); $(parentEle).click();
} else { } else {
$(parentEle).YTTooltip("hide"); $(parentEle).YTTooltip("hide");
@ -338,7 +341,7 @@
/*console.log("click", params);*/ /*console.log("click", params);*/
var pixelPoint = [params.offsetX, params.offsetY]; var pixelPoint = [params.offsetX, params.offsetY];
var dataPoint = floChart.convertFromPixel({ geoIndex: 0 }, pixelPoint); var dataPoint = floChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
if (!(params?.target?.shape?.symbolType == "circle")) { if (!(params?.target?.shape?.symbolType == "circle")) {
$(parentEle).YTTooltip("hide"); $(parentEle).YTTooltip("hide");
} }
@ -370,7 +373,7 @@
(series.data ?? []).forEach(function (point) { (series.data ?? []).forEach(function (point) {
let dbid = obj.myDataList.filter(x => x.device_number == point.device_number)[0]?._dbId; let dbid = obj.myDataList.filter(x => x.device_number == point.device_number)[0]?._dbId;
point._dbId = dbid; point._dbId = dbid;
currentData.forEach(function (cData) { currentData.forEach(function (cData) {
if (cData.device_guid == point.device_guid) { if (cData.device_guid == point.device_guid) {
cData._dbId = dbid; cData._dbId = dbid;
} }
@ -432,55 +435,55 @@
} }
//baja 訂閱設備 //baja 訂閱設備
function subDevice() { function subDevice() {
let floMyBaja = new subscriptionDevices(); let floMyBaja = new subscriptionDevices();
var ordPath = { var ordPath = {
"area_tag": pageAct.AreaTag, "area_tag": pageAct.AreaTag,
"building_tag": pageAct.buiTag, "building_tag": pageAct.buiTag,
"system_tag": pageAct.sysMainTag, "system_tag": pageAct.sysMainTag,
"name_tag": pageAct.sysSubTag, "name_tag": pageAct.sysSubTag,
}
floMyBaja.setSubscribeDevicesByBql(ordPath);
floMyBaja.setSubscribeDevicesCallBack(function (data) {
let matchDevice = currentData.filter(x => x.device_number == data.device_number_full)[0];
if (!matchDevice) {
return false;
} }
floMyBaja.setSubscribeDevicesByBql(ordPath); let norDevPoiName = matchDevice.device_normal_point_name;
floMyBaja.setSubscribeDevicesCallBack(function (data) { let cloDevPoiName = matchDevice.device_close_point_name;
let matchDevice = currentData.filter(x => x.device_number == data.device_number_full)[0]; let errDevPoiName = matchDevice.device_error_point_name;
if (!matchDevice) {
return false;
}
let norDevPoiName = matchDevice.device_normal_point_name;
let cloDevPoiName = matchDevice.device_close_point_name;
let errDevPoiName = matchDevice.device_error_point_name;
if (data.point_name == "Temp") { if (data.point_name == "Temp") {
heatMap?.changeTemp(data.device_number_full, !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0); heatMap?.changeTemp(data.device_number_full, !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0);
let devIdx = currentData.findIndex(x => x.device_number == data.device_number_full); let devIdx = currentData.findIndex(x => x.device_number == data.device_number_full);
currentData[devIdx]._temp = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0; currentData[devIdx]._temp = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0;
} }
if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) { if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) {
//顯示正常燈號 //顯示正常燈號
$(`#${matchDevice.device_number}_status`).attr("data-light-type", "normal").data("light-type", "normal"); $(`#${matchDevice.device_number}_status`).attr("data-light-type", "normal").data("light-type", "normal");
} else if (data.point_name == cloDevPoiName && data.value == matchDevice.device_close_point_value) { } else if (data.point_name == cloDevPoiName && data.value == matchDevice.device_close_point_value) {
$(`#${matchDevice.device_number}_status`).attr("data-light-type", "close").data("light-type", "close"); $(`#${matchDevice.device_number}_status`).attr("data-light-type", "close").data("light-type", "close");
} else if (data.point_name == errDevPoiName && data.value == matchDevice.device_error_point_value) { } else if (data.point_name == errDevPoiName && data.value == matchDevice.device_error_point_value) {
$(`#${matchDevice.device_number}_status`).attr("data-light-type", "error").data("light-type", "error"); $(`#${matchDevice.device_number}_status`).attr("data-light-type", "error").data("light-type", "error");
} }
}); });
floMyBaja.setSubscribeDeviceEndCallBack(function (data) {
endPageLoading();
if (data.findIndex(x => x.point_name == "Temp") != -1) {
// 顯示溫度條
showHeat("[name=forgeHeatBar]");
}
});
floMyBaja.setSubscribeDeviceEndCallBack(function (data) {
endPageLoading();
if (data.findIndex(x => x.point_name == "Temp") != -1) {
// 顯示溫度條
showHeat("[name=forgeHeatBar]");
}
});
} }
function drawHeatBar() { function drawHeatBar() {
$("#forgeHeatBarDiv").html(setTopHeatBar()); $("#forgeHeatBarDiv").html(setTopHeatBar());
} }
// 電梯 3D 位置呈現 // 電梯 3D 位置呈現
function set3DElevPos(viewer) { function set3DElevPos(viewer) {
@ -623,7 +626,7 @@
// 重設平面圖設備資料 // 重設平面圖設備資料
function resetData() { function resetData() {
const scatter_symbol_convertData = function (data,zoom) { //正常、關閉排除CCVT(圓點) const scatter_symbol_convertData = function (data, zoom) { //正常、關閉排除CCVT(圓點)
let res = [], temp = []; let res = [], temp = [];
data.forEach(function (item, index) { data.forEach(function (item, index) {
if (global_emergency_alarm_device_number != undefined if (global_emergency_alarm_device_number != undefined
@ -766,7 +769,7 @@
tempData = Object.assign(tempData, oldTarObj) tempData = Object.assign(tempData, oldTarObj)
} }
}) })
temp.map(function (item) { temp.map(function (item) {
var obj = { var obj = {
@ -787,8 +790,8 @@
res.push(obj); res.push(obj);
}); });
return res; return res;
} }
@ -912,7 +915,7 @@
//如果有子節點，則只針對子節點操作 //如果有子節點，則只針對子節點操作
if (item.device_nodes != undefined && item.device_nodes != null && item.device_nodes.length > 0) { if (item.device_nodes != undefined && item.device_nodes != null && item.device_nodes.length > 0) {
item.device_nodes.forEach(function (item_node, item_node_index) { item.device_nodes.forEach(function (item_node, item_node_index) {
//添加父節點相關資訊 //添加父節點相關資訊
item_node.device_system_category_layer3 = item.device_system_category_layer3; item_node.device_system_category_layer3 = item.device_system_category_layer3;
item_node.device_error_color = item.device_error_color; item_node.device_error_color = item.device_error_color;
@ -1006,13 +1009,13 @@
}] }]
}); });
} else { } else {
floChart.setOption({ floChart.setOption({
series: [{ series: [{
symbolOffset: [10, 10], symbolOffset: [10, 10],
data: scatter_symbol_convertData(currentData, zoom), //正常、關閉(圓點) data: scatter_symbol_convertData(currentData, zoom), //正常、關閉(圓點)
}, { }, {
data: scatter_icon_convertData(currentData) //正常、關閉(icon) data: scatter_icon_convertData(currentData) //正常、關閉(icon)
}, { }, {
@ -1028,7 +1031,7 @@
} }
function getNextFloor(floGuid = null) { function getNextFloor(floGuid = null) {
let url = baseApiUrl + "/api/Device/GetNextFloor"; let url = baseApiUrl + "/api/Device/GetNextFloor";
objSendData.Data = { floor_guid: floGuid } objSendData.Data = { floor_guid: floGuid }
let result = ""; let result = "";
@ -1049,7 +1052,7 @@
launchViewerForHotspot(urn, (viewer, nodeIds) => { launchViewerForHotspot(urn, (viewer, nodeIds) => {
let nextFloor = getNextFloor(pageAct.floGuid); let nextFloor = getNextFloor(pageAct.floGuid);
let curFloTag = pageAct.floTag; let curFloTag = pageAct.floTag;
if (!nextFloor) { if (!nextFloor) {
toast_warning("超出樓層範圍"); toast_warning("超出樓層範圍");
return; return;
@ -1085,28 +1088,28 @@
} }
function setHeatMap() { function setHeatMap() {
console.log("currentData", currentData) if (pageAct.sysMainTag !== "LT") {
let devices = currentData.map(x => { let devices = currentData.map(x => {
return { return {
roomDbId: !isNaN(parseInt(x.room_dbid)) ? parseInt(x.room_dbid) : -1, roomDbId: !isNaN(parseInt(x.room_dbid)) ? parseInt(x.room_dbid) : -1,
id: x.device_number, id: x.device_number,
position: isJSON(x.device_coordinate_3d) ? JSON.parse(x.device_coordinate_3d) : {}, // x: 0, y: 25, z: -2.5 (3.35, -4.81, 12.88 position: isJSON(x.device_coordinate_3d) ? JSON.parse(x.device_coordinate_3d) : {}, // x: 0, y: 25, z: -2.5 (3.35, -4.81, 12.88
sensorTypes: ["temperature", "humidity"] sensorTypes: ["temperature", "humidity"]
}
})
let option = {
devices: devices,
} }
})
let option = { heatMap = new ADHeatMaps(option);
devices: devices, heatMap.onComplete = () => {
}
if (pageAct.sysMainTag !== "LT") { $.each(currentData, (idx, dev) => {
heatMap = new ADHeatMaps(option); heatMap.changeTemp(dev.device_number, dev._temp || 0);
heatMap.onComplete = () => { })
$.each(currentData, (idx, dev) => { }
heatMap.changeTemp(dev.device_number, dev._temp || 0);
})
} }
}
} }
function getHotspotPoint(callback = null) { function getHotspotPoint(callback = null) {
@ -1133,7 +1136,7 @@
$.extend(item, data); $.extend(item, data);
myDataList.push(item); myDataList.push(item);
}) })
setHotspotPoint(myDataList); setHotspotPoint(myDataList);
callback ? callback() : ""; callback ? callback() : "";
} }
@ -1154,7 +1157,7 @@
devObj.full_name = name; devObj.full_name = name;
parentEle = crePosPopover(position, devObj); parentEle = crePosPopover(position, devObj);
$(parentEle).click(); $(parentEle).click();
let option = floChart.getOption(); let option = floChart.getOption();
option.series.forEach(function (series) { option.series.forEach(function (series) {
series.data.forEach(function (point) { series.data.forEach(function (point) {
@ -1164,7 +1167,7 @@
}); });
}); });
floChart.setOption(option); floChart.setOption(option);
}) })
onEvent("autodesk:clickOut:sprite", "#forgeViewer", function (e) { onEvent("autodesk:clickOut:sprite", "#forgeViewer", function (e) {
@ -1176,7 +1179,7 @@
controlFocusHotspot(cData._dbId, false); controlFocusHotspot(cData._dbId, false);
}) })
} }
function chartUnFocusAll() { function chartUnFocusAll() {
let option = floChart.getOption(); let option = floChart.getOption();
option.series.forEach(function (series) { option.series.forEach(function (series) {
@ -1187,7 +1190,7 @@
floChart.setOption(option); floChart.setOption(option);
} }
// 解除 series 聚焦 // 解除 series 聚焦
function chartUnFocus(ele) { function chartUnFocus(ele) {
let devGuid = $(ele).data("id"); let devGuid = $(ele).data("id");
let option = floChart.getOption(); let option = floChart.getOption();

169
Frontend/index.html
View File

@ -47,6 +47,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<link rel="stylesheet" href="css/yourteam/plugins/yt-notice/yt-notice.css" /> <link rel="stylesheet" href="css/yourteam/plugins/yt-notice/yt-notice.css" />
<link rel="stylesheet" href="css/yourteam/plugins/yt-alert/ytpop-alert.css" /> <link rel="stylesheet" href="css/yourteam/plugins/yt-alert/ytpop-alert.css" />
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css"> <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
</head> </head>
<!-- BEGIN Body --> <!-- BEGIN Body -->
<!-- Possible Classes <!-- Possible Classes
@ -871,8 +873,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
lastPageAct = JSON.parse(sessionStorage.getItem("pageAct")); lastPageAct = JSON.parse(sessionStorage.getItem("pageAct"));
} }
if ((lastPageAct.sysSubTag && lastPage == "systemMonitor") || lastPage == "sysElevator" if ((lastPageAct.sysSubTag && lastPage == "systemMonitor") || lastPage == "sysElevator"
// || lastPage == "sysSensor" // || lastPage == "sysSensor"
) { ) {
$(`#subSysBtn${lastPageAct.sysSubTag}`).click(); $(`#subSysBtn${lastPageAct.sysSubTag}`).click();
$("#sysMonTopBtn").YTTab("set"); $("#sysMonTopBtn").YTTab("set");
} else { } else {
@ -949,8 +951,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
return; return;
} }
if (page != "systemMonitor" && page != "sysElevator" if (page != "systemMonitor" && page != "sysElevator"
// && page != "sysSensor" // && page != "sysSensor"
) { ) {
$("#sysMonBtnList [name=topFunBtn]").removeClass("active"); $("#sysMonBtnList [name=topFunBtn]").removeClass("active");
pageAct.sysMainTag = null; pageAct.sysMainTag = null;
pageAct.sysSubTag = null; pageAct.sysSubTag = null;
@ -1026,7 +1028,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
onEvent("click", "button[id^=noticeChkBtn]", function () { /**button[id^=bajaAckBtn] */ onEvent("click", "button[id^=noticeChkBtn]", function () { /**button[id^=bajaAckBtn] */
let uuid = $(this).data("uuid"); let uuid = $(this).data("uuid");
let url = window.location.origin + "/obix/alarm/" + uuid + "/ack"; let url = window.location.origin + "/obix/alarm/"+uuid+"/ack";
let myBaja = new MyBaja(); let myBaja = new MyBaja();
myBaja.setMyUserAccount((data) => { myBaja.setMyUserAccount((data) => {
let sendData = '<obj is="obix:AckAlarmIn"><str name="ackUser" val="obix" /></obj>'; let sendData = '<obj is="obix:AckAlarmIn"><str name="ackUser" val="obix" /></obj>';
@ -1134,7 +1136,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
function drawErrRecTabBlo() { function drawErrRecTabBlo() {
let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100"> let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
</table>` </table>`
return strHtml; return strHtml;
} }
@ -1142,7 +1144,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
function drawOpeRecTabBlo() { function drawOpeRecTabBlo() {
let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100"> let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
</table>` </table>`
return strHtml; return strHtml;
} }
@ -1156,48 +1158,49 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
let devNum = $(ele).data("number"); //設備編號 let devNum = $(ele).data("number"); //設備編號
let devGuid = $(ele).data("id"); //guid let devGuid = $(ele).data("id"); //guid
let devName = $(ele).data("name"); //full_name let devName = $(ele).data("name"); //full_name
let lightHtml = type == "light" ? `<button type="button" id="lightSch-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#lightSch"><i class="fas fa-calendar-alt"></i></button>` : ""; let lightHtml = type == "light" ? `<button type="button" data-toggle="tooltip" data-placement="bottom" title="燈控排程" id="lightSch-tab" class="px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#lightSch"><i class="fas fa-calendar-alt icon fa-2x"></i></button>` : "";
let option = { let option = {
html: `<div class="card m-1 border device-wrap" data-number="${devNum}"> html: `<div class="card m-1 border device-wrap" data-number="${devNum}" data-position="left">
<div class="card-header p-3"> <div class="card-header p-3">
<div class="position-absolute w-50" style="word-break: break-all;"> <div class="position-absolute mr-5" style="word-break: break-all;">
<label class="m-0 mt-2">${devName}</label> <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"
data-toggle="tooltip" data-placement="bottom" title="即時監控"
class="px-2 btn btn-icon border-0 nav-link active mx-1" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon fa-2x"></i></button>
${lightHtml}
<button type="button" id="info-tab"
data-toggle="tooltip" data-placement="bottom" title="基本資料"
class="px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon fa-2x"></i></button>
<button type="button"
d data-toggle="tooltip" data-placement="bottom" title="告警資料"
id="errRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1 position-relative " role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle fa-2x"></i></button>
<button type="button"
data-toggle="tooltip" data-placement="bottom" title="運維紀錄"
id="opeRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon fa-2x"></i></button>
<button type="button" class="px-2 btn btn-icon border-0 nav-link mx-1"><i class="fas fa-times text-white-50 fa-2x" data-close="yttooltip"></i></button>
</div>
</div> </div>
<div class="card-body p-2 tab-content"> <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
<div id="state" class="show active" data-tabname="cardTab" data-tabrole="child" style="height:100%;width:100%"> <button type="button" id="state-tab"
${drawStateTabBlo(devNum)} data-toggle="tooltip" data-placement="bottom" title="即時監控"
</div> class="px-2 btn btn-icon border-0 nav-link active mx-1" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon fa-2x"></i></button>
<div id="info" data-tabname="cardTab" data-tabrole="child"> ${lightHtml}
<button type="button" id="info-tab"
data-toggle="tooltip" data-placement="bottom" title="基本資料"
class="px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon fa-2x"></i></button>
<button type="button"
d data-toggle="tooltip" data-placement="bottom" title="告警資料"
id="errRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1 position-relative " role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle fa-2x"></i></button>
<button type="button"
data-toggle="tooltip" data-placement="bottom" title="運維紀錄"
id="opeRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon fa-2x"></i></button>
<button type="button" class="px-2 btn btn-icon border-0 nav-link mx-1"><i class="fas fa-times text-white-50 fa-2x" data-close="yttooltip"></i></button>
</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>
</div>`, </div>
<div class="card-body p-2 tab-content w-100">
<div id="state" class="show active w-100" data-tabname="cardTab" data-tabrole="child" >
${drawStateTabBlo(devNum)}
</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", group: "device",
// 在 _sysElevator.html 及 _sysMonAll.html 會用到 // 在 _sysElevator.html 及 _sysMonAll.html 會用到
onShow: function (tooltipEle, oriEle) { onShow: function (tooltipEle, oriEle) {
@ -1229,24 +1232,24 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
scroll: true scroll: true
}); });
// pop 視窗卡片可縮放功能初始化 // pop 視窗卡片可縮放功能初始化
$(tooltipEle).resizable({ // $(tooltipEle).resizable({
resize: function (event, ui) { // // resize: function (event, ui) {
let iframe = $(ui.element).find("iframe"); // // let iframe = $(ui.element).find("iframe");
if (iframe.length != 0) { // // if (iframe.length != 0) {
if (ui.size.width != ui.originalSize.width) { // // if (ui.size.width != ui.originalSize.width) {
iframe.css("width", "100%"); // // iframe.css("width", "100%");
} else if (ui.size.height != ui.originalSize.height) { // // } else if (ui.size.height != ui.originalSize.height) {
iframe.css("height", "100%"); // // iframe.css("height", "100%");
} // // }
} // // }
let cardBodyHeight = $(ui.element).find(".card-body").css("height"); // // let cardBodyHeight = $(ui.element).find(".card-body").css("height");
$(ui.element).find(".scrolledTable").css("height", cardBodyHeight) // // $(ui.element).find(".scrolledTable").css("height", cardBodyHeight)
errRecTable.draw(false) // // errRecTable.draw(false)
}, // // },
minWidth: 200, // // minWidth: 200,
minHeight: 150, // // minHeight: 150,
}); // });
// 電梯管理 - Card table 更新 // 電梯管理 - Card table 更新
typeof subDeviceSetTable != "undefined" ? subDeviceSetTable($(oriEle).data("number")) : "" typeof subDeviceSetTable != "undefined" ? subDeviceSetTable($(oriEle).data("number")) : ""
}, },
@ -1393,7 +1396,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
// Card - 異常紀錄 Table // Card - 異常紀錄 Table
function callbackForErr(result) { function callbackForErr(result) {
console.log("@@@", result) console.log("@@@",result)
if (errRecTable) { if (errRecTable) {
errRecTable.destroy(); errRecTable.destroy();
} }
@ -1582,35 +1585,35 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
} else { } else {
let strHtml = `<div class="btn-group mx-4"> let strHtml = `<div class="btn-group mx-4">
<a href="javascript:;" name="topFunBtn" data-page="dashboard" data-tabname="topFunBtn" class="text-center"> <a href="javascript:;" name="topFunBtn" data-page="dashboard" data-tabname="topFunBtn" class="text-center">
<i class="fal fa-home fa-2x"></i><br>首頁 <i class="fal fa-home fa-2x"></i><br>首頁
</a> </a>
<!--<div class="dropdown-menu"> <!--<div class="dropdown-menu">
<button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button> <button class="dropdown-item" type="button">Something else here</button>
</div>--> </div>-->
</div>`; </div>`;
$.each(res.data, function (i, v) { $.each(res.data, function (i, v) {
if (v.authCode == 'PF1') { if (v.authCode == 'PF1') {
strHtml += `<div class="btn-group mx-4" > strHtml += `<div class="btn-group mx-4" >
<a href="javascript:;" id="sysMonTopBtn" class="text-center" data-toggle="navbar" data-target="#sysMonNavbar" data-tabname="topFunBtn" aria-haspopup="true" aria-expanded="false"> <a href="javascript:;" id="sysMonTopBtn" class="text-center" data-toggle="navbar" data-target="#sysMonNavbar" data-tabname="topFunBtn" aria-haspopup="true" aria-expanded="false">
<i class="fal fa-tv fa-2x"></i><br>${v.subName} <i class="fal fa-tv fa-2x"></i><br>${v.subName}
</a> </a>
</div>`; </div>`;
hasMonitor = true; hasMonitor = true;
} }
else { else {
let icon = v.authCode == 'PF2' ? 'fa-chart-pie' : v.authCode == 'PF3' ? 'fa-chart-area' : v.authCode == 'PF4' ? 'fa-chart-line' : v.authCode == 'PF5' ? 'fa-bell' : v.authCode == 'PF6' ? 'fa-server' : v.authCode == 'PF7' ? 'fa-image' : v.authCode == 'PF8' ? 'fa-user' : ''; let icon = v.authCode == 'PF2' ? 'fa-chart-pie' : v.authCode == 'PF3' ? 'fa-chart-area' : v.authCode == 'PF4' ? 'fa-chart-line' : v.authCode == 'PF5' ? 'fa-bell' : v.authCode == 'PF6' ? 'fa-server' : v.authCode == 'PF7' ? 'fa-image' : v.authCode == 'PF8' ? 'fa-user' : '';
strHtml += `<div class="btn-group mx-4"> strHtml += `<div class="btn-group mx-4">
<a href="javascript:;" name="topFunBtn" data-tabname="topFunBtn" class="dropdown-toggle no-arrow text-center" <a href="javascript:;" name="topFunBtn" data-tabname="topFunBtn" class="dropdown-toggle no-arrow text-center"
data-page="${v.showView}"> data-page="${v.showView}">
<i class="fal ${icon} fa-2x"></i><br>${v.subName} <i class="fal ${icon} fa-2x"></i><br>${v.subName}
</a> </a>
</div>`; </div>`;
} }
}); });
@ -1690,7 +1693,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
} }
}, null, "POST", true).send(); }, null, "POST",true).send();
} }
function getAlarm() { function getAlarm() {
@ -1704,7 +1707,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
{ title: "異常訊息", data: "msgText" }, { title: "異常訊息", data: "msgText" },
]; ];
// 向 niagara 取得告警資料 // 向 niagara 取得告警資料
getAllDeviceAlarmByBaja(null, now, false, false, function (bajaDatas) { getDeviceAlarmCardByBaja(null, now, false, false, function (bajaDatas) {
let datas = bajaDatas.data; let datas = bajaDatas.data;
let titleHtml = `異常通知`; let titleHtml = `異常通知`;
let notices = []; let notices = [];
@ -1715,7 +1718,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
datas[idx].full_name = allDevices.filter(x => x.device_number == data.devicePath)[0]?.full_name; datas[idx].full_name = allDevices.filter(x => x.device_number == data.devicePath)[0]?.full_name;
let div1 = creDiv(["col-12"]); let div1 = creDiv(["col-12"]);
let button = creBtn("確認", "noticeChkBtn", null, ["btn btn-sm btn-secondary ml-auto col-4"], { uuid: data.uuid }); let button = creBtn("確認", "noticeChkBtn", null, ["btn btn-sm btn-secondary ml-auto col-4"], {uuid:data.uuid});
let btnDiv = creDiv(["d-flex m-0 gap-5 mt-2"]); let btnDiv = creDiv(["d-flex m-0 gap-5 mt-2"]);
btnDiv.append(button); btnDiv.append(button);
// 繪製 每行告警資訊 // 繪製 每行告警資訊

4
Frontend/js/n4js/alarmbaja.js
View File

@ -93,7 +93,7 @@ function getAlarmByBaja(startDate_millisecond, endDate_millisecond, isRecover, i
var _index = 0; var _index = 0;
var _recoverState = isRecover ? "!= null" : "= null"; var _recoverState = isRecover ? "!= null" : "= null";
var _ackState = isAck ? "= 'acked'" : "= 'unacked'"; var _ackState = isAck ? "= 'acked'" : "= 'unacked'";
console.log("local:|foxs:|alarm:|bql:select timestamp, ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where alarmClass = '" + alarmClass + "' and timestamp.millis > " + startDate_millisecond + " and timestamp.millis < " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp asc") //console.log("local:|foxs:|alarm:|bql:select timestamp, ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where alarmClass = '" + alarmClass + "' and timestamp.millis > " + startDate_millisecond + " and timestamp.millis < " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp asc")
require(['baja!'], function (baja) { require(['baja!'], function (baja) {
baja.Ord.make("local:|foxs:|alarm:|bql:select timestamp, ackTime, ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where alarmClass = '" + alarmClass + "' and timestamp.millis > " + startDate_millisecond + " and timestamp.millis < " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp asc").get() baja.Ord.make("local:|foxs:|alarm:|bql:select timestamp, ackTime, ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where alarmClass = '" + alarmClass + "' and timestamp.millis > " + startDate_millisecond + " and timestamp.millis < " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp asc").get()
.then(function (table) { .then(function (table) {
@ -569,7 +569,7 @@ function getAllDeviceAlarmByBaja(startDate_millisecond, endDate_millisecond, isR
if (startDate_millisecond) { if (startDate_millisecond) {
startUrl = "timestamp.millis >= " + startDate_millisecond + " and "; startUrl = "timestamp.millis >= " + startDate_millisecond + " and ";
} }
console.log("local:|foxs:|alarm:|bql:select timestamp, ackTime, priority ,ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where " + startUrl + "timestamp.millis <= " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp desc"); //console.log("告警", "local:|foxs:|alarm:|bql:select timestamp, ackTime, priority ,ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where " + startUrl + "timestamp.millis <= " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp desc");
require(['baja!'], function (baja) { require(['baja!'], function (baja) {
baja.Ord.make("local:|foxs:|alarm:|bql:select timestamp, ackTime, priority ,ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where " + startUrl + "timestamp.millis <= " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp desc").get() baja.Ord.make("local:|foxs:|alarm:|bql:select timestamp, ackTime, priority ,ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where " + startUrl + "timestamp.millis <= " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp desc").get()