ibms-dome/Frontend/_sysMonAll.html

382 lines
16 KiB
HTML
Raw Normal View History

<style>
</style>
<div class="row">
<div id="leftDiv" class="col-sm-12 col-xl-6">
</div>
<div id="rightDiv" class="col-sm-12 col-xl-6">
</div>
</div>
<!-- Modal center Add -->
<div class="modal fade" id="lightSchModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-dialog-centered" role="document" style="min-width:60%">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
燈控排程
</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fal fa-times"></i></span>
</button>
</div>
<div class="modal-body">
<table id="lightSchTable" class="table table-bordered table-striped text-center m-0 w-100">
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
<button type="button" id="lightSchSavBtn" class="btn btn-primary">儲存</button>
</div>
</div>
</div>
</div>
<script>
var allDevList = []; //全設備清單
var heatMap = null;
$(function () {
getBuildMenu((arr, data) => {
if (arr.indexOf(4) != -1) {
getFloDevList();
setLightColor();
}
if (arr.indexOf(3) != -1) {
getHotspotPoint(() => {
show3DModel(data.urn_3D);
});
}
});
})
// 依據 drawing type 決定呈現畫面
function getHtmlByType(type = 0, data = {}) {
let strHtml = ``;
switch (type) {
case 2:
strHtml = `<div style="height:85vh">
<iframe src="${data.system_url}" width="100%" height="100%"></iframe>
</div>`;
break;
case 4:
strHtml = `<div class="d-flex mb-4" style="gap:15px">
<div class="row m-0 align-items-center">
<span id="sysNorLight" class="circle-light mr-2 " data-light-type="normal"></span>
<label class="mb-0">正常</label>
</div>
<div class="row m-0 align-items-center">
<span id="sysCloLight" class="circle-light mr-2" data-light-type="close"></span>
<label class="mb-0">關機</label>
</div>
<div class="row m-0 align-items-center">
<span id="sysErrLight" class="circle-light mr-2" data-light-type="error"></span>
<label class="mb-0">異常</label>
</div>
</div>
<div class="col-12 p-0" id="floDevList">
</div>`;
break;
case 3:
strHtml = `<div name="forgeViewer" style="height:85vh;"></div>`;
break;
}
return strHtml;
}
//baja 訂閱設備
function subDevice() {
let myBaja = new subscriptionDevices();
var ordPath = {
"area_tag": pageAct.AreaTag,
"building_tag": pageAct.buiTag,
"system_tag": pageAct.sysMainTag,
"name_tag": pageAct.sysSubTag,
}
myBaja.setSubscribeDevicesByBql(ordPath);
myBaja.setSubscribeDevicesCallBack(function (data) {
let matchDevice = allDevList.filter(x => x.device_number == data.device_number_full)[0];
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") {
console.log(data)
heatMap?.changeTemp(data.device_number_full, !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0);
let devIdx = allDevList.findIndex(x => x.device_number == data.device_number_full);
allDevList[devIdx]._temp = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0;
}
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");
} 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");
} 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");
}
setLightColor();
});
myBaja.setSubscribeDeviceEndCallBack(function (data) {
endPageLoading();
});
}
function setLightColor() {
$("[data-light-type]").each((index, ele) => {
let type = $(ele).data("light-type");
let isFlashing = false;
let color = "#000";
switch (type) {
case "normal":
color = pageAct.sysSubObj.device_normal_color ?? "var(--theme-success)";
isFlashing = pageAct.sysSubObj.device_normal_flashing == "1";
break;
case "close":
color = pageAct.sysSubObj.device_close_color ?? "var(--theme-secondary)";
isFlashing = pageAct.sysSubObj.device_close_flashing == "1";
break;
case "error":
color = pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
isFlashing = pageAct.sysSubObj.device_error_flashing == "1";
break;
}
$(ele).css("background-color", color);
//是否閃爍
if (isFlashing) {
$(ele).parents(".card.device-wrap").addClass("light-flash");
}
})
}
//取得設備列表 並繪製卡片
function getFloDevList() {
let url = baseApiUrl + "/api/Device/GetDeviceList";
let sendData = {
2022-11-17 15:32:39 +08:00
sub_system_tag: pageAct.sysSubTag,
building_tag: pageAct.buiTag,
floor_tag: pageAct.floTag,
};
objSendData.Data = sendData;
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
let strHtml = ``;
$.each(res.data, (index, floObj) => {
strHtml += `<div class='d-flex justify-content-start mb-5 ' style="">`
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))">`
$.each(floObj.device_list, (index2, devObj) => {
allDevList.push(devObj);
strHtml += `<div class="card m-1 border device-wrap">
<div class="card-body p-2">
<div class="d-flex mb-2">
<div class="mr-5 cur-poi">
<span class="d-inline-block mr-3">
<img src="${baseImgUrl + varPathDevIcon + devObj.device_image}" class="profile-image rounded-circle" onerror="defDev(this)" alt="...">
</span>
<a href="javascript:;">${devObj.full_name}</a>
</div>
</div>
<div class="d-flex mb-0 mt-2 align-items-center">
<span id="${devObj.device_number}_status" class="circle-light"></span>
<span class="d-none">即時功率:</span>
<a href="javascript:;" name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" data-name="${devObj.full_name}" class=" ml-2 mb-0 ">詳細資料</a>
</div>
</div>
</div>`;
})
strHtml += "</div></div>";
})
// Niagara 產生 file 開頭字串問題
strHtml = strHtml.replaceAll(`src="/file/`, `src="`);
if (!res.data || res.data.length == 0) {
endPageLoading();
} else {
subDevice();
}
$("#floDevList").append(strHtml);
initPopover();
}
}, null, "POST").send();
}
function getBuildMenu(callback = null) {
let url = baseApiUrl + "/api/Device/GetBuildMenu";
let sendData = {
main_system_tag: pageAct.sysMainTag,
sub_system_tag: pageAct.sysSubTag,
building_tag: pageAct.buiTag,
};
objSendData.Data = sendData;
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
let leftData = {}, rightData = {};
for (var key in res.data) {
if (key.startsWith("left")) {
leftData[key.split("left_")[1]] = res.data[key];
} else if (key.startsWith("right")) {
rightData[key.split("right_")[1]] = res.data[key];
}
}
if (res.data.left_drawing != null) {
$("#leftDiv").html(getHtmlByType(res.data.left_drawing, leftData));
} else {
$("#leftDiv").html(getHtmlByType(0, leftData));
}
if (res.data.right_drawing != null) {
$("#rightDiv").html(getHtmlByType(res.data.right_drawing), rightData);
} else {
$("#rightDiv").html(getHtmlByType(0, rightData));
}
callback ? callback([res.data.left_drawing, res.data.right_drawing], res.data) : "";
}
}, null, "POST").send();
}
// Card 即時狀態
function drawStateTabBlo() {
let strHtml = `<div style="height:15rem">
<iframe src="/ord?station:%7Cslot:/TPE/B1/EE/E4/R2F/NA/WHT/N1|view:?fullScreen=true" width="100%" height="100%"></iframe>
</div>`
return strHtml;
}
function show3DModel(urn) {
$(loadEle).Loading("start");
launchViewerForHotspot(urn, (viewer, nodeIds) => {
let devDbIds = allDevList.map(x => x.forge_dbid);
hideAllObjects(devDbIds);
$(loadEle).Loading("close");
let devices = allDevList.map(x => {
return {
roomDbId: !isNaN(parseInt(x.room_dbid)) ? parseInt(x.room_dbid) : -1,
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
sensorTypes: ["temperature", "humidity"]
}
})
let option = {
devices: devices,
}
heatMap = new ADHeatMaps(option);
heatMap.onComplete = () => {
$.each(allDevList, (idx, dev) => {
heatMap.changeTemp(dev.device_number, dev._temp || 0);
})
}
let elevOption = {
selector:"[name=forgeViewer]",
viewer: viewer,
ordPath: {
"area_tag": pageAct.AreaTag,
"building_tag": pageAct.buiTag,
},
}
// 電梯移動訂閱程序載入
let forge3DElev = new Forge3DElevFull(elevOption);
forge3DElev.bajaEndCallback = function () {
endPageLoading();
}
forge3DElev.init();
}, () => {
$(loadEle).Loading("close");
}, "[name=forgeViewer]");
}
function getHotspotPoint(callback = null) {
let url = baseApiUrl + "/api/GetDevForCor";
let sendData = {
"device_area_tag": pageAct.AreaTag,
"device_building_tag": pageAct.buiTag,
"device_system_tag": pageAct.sysMainTag,
"device_name_tag": pageAct.sysSubTag,
};
objSendData.Data = sendData;
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
let myDataList = [];
$.each(res.data, (idx, data) => {
let item = {};
item.position = {};
if (data.device_coordinate_3d != null && isJSON(data.device_coordinate_3d)) {
item.position = JSON.parse(data.device_coordinate_3d);
}
$.extend(item, data);
myDataList.push(item);
})
console.log("1", myDataList)
setHotspotPoint(myDataList);
callback ? callback() : "";
}
}, null, "POST").send();
}
function setHotspotPoint(myDataList = []) {
console.log(myDataList)
getHopspotPoint(myDataList);
}
var parentEle = "";
onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj) {
forgeUnFocusAll();
let position = [obj.event.target.toolController.lastClickX, obj.event.target.toolController.lastClickY];
let devObj = obj.myData;
let name = allDevList.filter(x => x.device_guid == devObj.device_guid)[0]?.full_name;
devObj.full_name = name;
parentEle = crePosPopover(position, devObj);
$(parentEle).click();
})
onEvent("autodesk:clickOut:sprite", "[name=forgeViewer]", function (e) {
$(parentEle).YTTooltip("hide");
})
onEvent("autodesk:complete:sprite", "[name=forgeViewer]", function (e, obj) {
$("#floDevList a[name=devItem]").each((idx, ele) => {
let devNum = $(ele).data("number");
let dbid = obj.myDataList.filter(x => x.device_number == devNum)[0]?._dbId;
$(ele).data("dbId", dbid);
})
})
onEvent("yt:tooltip:show", "[name=devItem]", function (e, obj) {
forgeUnFocusAll();
})
function forgeUnFocusAll() {
$("#floDevList a[name=devItem]").each((idx, ele) => {
controlFocusHotspot($(ele).data("dbId"), false);
})
}
</script>