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

Merge branch 'master' of https://gitea.mjm-staging.developers-homelab.net/BIMS/BIMS

Browse Source
This commit is contained in:
dev02 2023-02-15 16:25:26 +08:00
commit fbcf4befb0
10 changed files with 2373 additions and 1659 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Frontend/_alert.html
View File

@ -646,8 +646,7 @@
let tag = "#alertTable"; let tag = "#alertTable";
$.each(data, function (i, v) { $.each(data, function (i, v) {
v.formId = AlertList(v.uuid.$val); v.formId = AlertList(v.uuid.$val || v.uuid);
}); });
let column_defs = [ let column_defs = [

60
Frontend/_sysElevator.html
View File

@ -1,25 +1,61 @@
<style> <style>
.elevator { background-color: #fff; min-height: 520px; } .elevator {
background-color: #fff;
min-height: 520px;
}
.elevator-table-wrapper { padding: 0.8rem; } .elevator-table-wrapper {
padding: 0.8rem;
}
table.elevator-build { /*border: 1px double #000;*/ } table.elevator-build { /*border: 1px double #000;*/
}
table.elevator-build td { padding: 0.2rem 0.5rem; height: 50px; width: 45px; border: 1px solid #000; } table.elevator-build td {
padding: 0.2rem 0.5rem;
height: 50px;
width: 45px;
border: 1px solid #000;
}
elevator .elevator-body, elevator .elevator-header { padding: 0.7rem; } elevator .elevator-body, elevator .elevator-header {
padding: 0.7rem;
}
.elevator-item { position: absolute; width: 43px; height: 47px; border: 4px solid orange; } .elevator-item {
position: absolute;
width: 43px;
height: 47px;
border: 4px solid orange;
}
.elevator-item-toup { border: 4px solid rgba(255,255,255,0); position: absolute; border-bottom: 0; z-index: 2; } .elevator-item-toup {
border: 4px solid rgba(255,255,255,0);
position: absolute;
border-bottom: 0;
z-index: 2;
}
.elevator-item-todown { border: 4px solid rgba(255,255,255,0); position: absolute; border-top: 0; z-index: 2; } .elevator-item-todown {
border: 4px solid rgba(255,255,255,0);
position: absolute;
border-top: 0;
z-index: 2;
}
.table-compact td { padding: 0.2rem 0.3rem; } .table-compact td {
padding: 0.2rem 0.3rem;
}
#emerTurn tr td:nth-child(2) { width: 50%; text-align: center; justify-content: center; } #emerTurn tr td:nth-child(2) {
width: 50%;
text-align: center;
justify-content: center;
}
#emerTurn tr td:nth-child(1) { width: 35%; } #emerTurn tr td:nth-child(1) {
width: 35%;
}
</style> </style>
<div class="d-flex"> <div class="d-flex">
@ -215,7 +251,7 @@
</div> </div>
<div class=""> <div class="">
<a type="button" class="mr-2" data-toggle="tooltip" data-placement="top" <a type="button" class="mr-2" data-toggle="tooltip" data-placement="top"
title="及時狀態"> title="即時狀態">
<i class="fal fa-tv fa-2x" data-toggle="modal" <i class="fal fa-tv fa-2x" data-toggle="modal"
data-target="#exampleModal"></i> data-target="#exampleModal"></i>
</a> </a>

59
Frontend/_sysMonAll.html
View File

@ -11,7 +11,8 @@
</div> </div>
<!-- Modal center Add --> <!-- 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 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-dialog modal-dialog-centered" role="document" style="min-width:60%">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
@ -46,6 +47,7 @@
$(function () { $(function () {
getBuildMenu((arr, data) => { getBuildMenu((arr, data) => {
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");
@ -166,7 +168,7 @@
let pointSpan = $(`.card.device-wrap[data-number=${data.device_number_full}] span[name=devItemPoiVal]`); let pointSpan = $(`.card.device-wrap[data-number=${data.device_number_full}] span[name=devItemPoiVal]`);
if (pointSpan && pointSpan.data("point") == data.point_name) { if (pointSpan && pointSpan.data("point") == data.point_name) {
console.log(data) // console.log(data)
pointSpan.text(data.value); pointSpan.text(data.value);
} }
} }
@ -284,7 +286,7 @@
<div class="d-flex mb-0 mt-2 align-items-center"> <div class="d-flex mb-0 mt-2 align-items-center">
<span id="${devObj.device_number}_status" class="circle-light"></span> <span id="${devObj.device_number}_status" class="circle-light"></span>
<span class="${devItem ? "" : "d-none"} ml-2">${devItem?.full_name}：<span name="devItemPoiVal" data-point="${devItem?.points}"></span>${devItem?.unit}</span> <span class="${devItem ? "" : "d-none"} ml-2">${devItem?.full_name}：<span name="devItemPoiVal" data-point="${devItem?.points}"></span>${devItem?.unit}</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> <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 " data-toggle="tooltip" title="默认的 Tooltip">詳細資料</a>
</div> </div>
</div> </div>
</div>`; </div>`;
@ -376,12 +378,15 @@
function show3DModel(urn) { function show3DModel(urn) {
$(loadEle).Loading("start"); $(loadEle).Loading("start");
launchViewerForHotspot(urn, (viewer, nodeIds) => { launchViewerForHotspot(urn, (viewer, nodeIds) => {
let devDbIds = allDevList.map(x => x.forge_dbid); // 大類
console.log(allDevList); addHotPoint(viewer)
let devDbIds = allDevList.map(x => x.forge_dbid);
// 大類
let subDevDbId = []; let subDevDbId = [];
allDevList.forEach(({ device_nodes }) => { allDevList.forEach(({ device_nodes }) => {
subDevDbId = [...subDevDbId, ...device_nodes.map(n => n.forge_dbid)] subDevDbId = [...subDevDbId, ...device_nodes.map(n => n.forge_dbid)]
}) })
// 從資料庫設定不可視模型的類型，若沒有取道該小類不可視類型，則套用資料庫設定預設類型 // 從資料庫設定不可視模型的類型，若沒有取道該小類不可視類型，則套用資料庫設定預設類型
if (forgeInvType) { if (forgeInvType) {
setInviForge(forgeInvType, [...devDbIds, ...subDevDbId]); setInviForge(forgeInvType, [...devDbIds, ...subDevDbId]);
@ -390,21 +395,43 @@
} }
$(loadEle).Loading("close"); $(loadEle).Loading("close");
let sensorObjs = []
let devices = allDevList.map(x => { let devices = []
if (pageAct.sysSubTag === "M12") {
allDevList.forEach((device) => {
const sensorObj = new Forge3DSensor({
viewer: viewer,
ordPath: {
"area_tag": pageAct.AreaTag,
"building_tag": pageAct.buiTag,
},
curDevice: {
roomDbId: !isNaN(parseInt(device.room_dbid)) ? parseInt(device.room_dbid) : -1,
id: device.device_number,
position: isJSON(device.device_coordinate_3d) ? JSON.parse(device.device_coordinate_3d) : {}, // x: 0, y: 25, z: -2.5 (3.35, -4.81, 12.88
temp: 25,
forge_dbid: parseInt(device.forge_dbid)
}
});
sensorObjs.push(sensorObj)
})
} else {
allDevList.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"],
temp: 0,
} }
}) })
}
let option = { let option = {
devices: devices, devices: devices,
} }
if (pageAct.sysMainTag !== "LT") { if (pageAct.sysMainTag !== "LT" && pageAct.sysSubTag !== "M12") {
heatMap = new ADHeatMaps(option); heatMap = new ADHeatMaps(option);
heatMap.onComplete = () => { heatMap.onComplete = () => {
$.each(allDevList, (idx, dev) => { $.each(allDevList, (idx, dev) => {
@ -420,6 +447,7 @@
"area_tag": pageAct.AreaTag, "area_tag": pageAct.AreaTag,
"building_tag": pageAct.buiTag, "building_tag": pageAct.buiTag,
}, },
sensorObjs
} }
// 電梯移動訂閱程序載入 // 電梯移動訂閱程序載入
@ -439,13 +467,16 @@
} }
} }
} }
if (pageAct.sub_system_tag == "W2") { if (pageAct.sysSubTag == "W2") {
getWaterNodeId(); // console.log("@@",pageAct, pageAct.sub_system_tag)
getWaterNodeId(viewer);
} }
}, () => { }, () => {
$(loadEle).Loading("close"); $(loadEle).Loading("close");
}, "[name=forgeViewer]"); }, "[name=forgeViewer]");
} }
// 供水系統 - 取得欲染色 dbid // 供水系統 - 取得欲染色 dbid
@ -463,11 +494,12 @@
// console.log(res.data) // console.log(res.data)
// } // }
// }, null, "POST").send(); // }, null, "POST").send();
// console.log("1",viewer.model)
viewer.model.search("給水", (nodeIds) => { viewer.model.search("給水", (nodeIds) => {
console.log(nodeIds) // console.log("2",nodeIds)
viewer.show(nodeIds) viewer.show(nodeIds)
}, (e) => { console.log(e) }) }, (e) => { console.log(e) })
} }
function getHotspotPoint(callback = null) { function getHotspotPoint(callback = null) {
@ -533,7 +565,6 @@
// 設置 模型隱藏或透明 // 設置 模型隱藏或透明
function setInviForge(type, devDbIds) { function setInviForge(type, devDbIds) {
console.log("devDbIds",devDbIds)
if (type == "Hide") { if (type == "Hide") {
hideAllObjects(devDbIds); hideAllObjects(devDbIds);
} else if (type == "Opacity") { } else if (type == "Opacity") {

555
Frontend/_sysSensor.html Normal file
View File

@ -0,0 +1,555 @@
<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 id="lightSchBlock" style="height:60vh"></div>
</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 subDeviceData = [];
var heatMap = null;
var buildMenuData = {};
var forgeInvType = null;
var forgeInvTypeDef = null;
$(function () {
getBuildMenu((arr, data) => {
buildMenuData = data;
if (arr.indexOf(4) != -1) {
getFloDevList(arr[0] == 4 ? "left" :"right");
setLightColor();
}
if (arr.indexOf(3) != -1) {
getHotspotPoint(() => {
show3DModel(data.urn_3D);
getInviForge();
});
}
});
})
// 依據 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">
${setTopLight()}
</div>
<div class="col-12 p-0" id="floDevList">
</div>`;
break;
case 3:
strHtml = `<div class="d-flex mb-4" style="gap:15px">
${setTopHeatBar()}
</div>
<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;
}
//將訂閱值塞入 subDeviceData
if (subDeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) {
let obj = {};
obj.device_number = matchDevice.device_number;
obj.dbid = matchDevice.forge_dbid;
subDeviceData.push(obj)
}
let subData = subDeviceData.filter(x => x.device_number == matchDevice.device_number)[0];
if (subData) {
subData[data.point_name] = data.value;
}
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") {
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();
setForgeHotSpotColor(matchDevice);
lightDevForgeSpotLig(matchDevice)
// 從設備訂閱更新每個設備卡片即時點位
setDevItemPoiValBySub(data);
});
myBaja.setSubscribeDeviceEndCallBack(function (data) {
endPageLoading();
if (data.findIndex(x => x.point_name == "Temp") != -1) {
// 顯示溫度條
showHeat("[name=forgeHeatBar]");
}
});
}
function lightDevForgeSpotLig(devObj) {
}
// 從設備訂閱更新每個設備卡片即時點位
function setDevItemPoiValBySub(data) {
let pointSpan = $(`.card.device-wrap[data-number=${data.device_number_full}] span[name=devItemPoiVal]`);
if (pointSpan && pointSpan.data("point") == data.point_name) {
console.log(data)
pointSpan.text(data.value);
}
}
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");
} else {
$(ele).parents(".card.device-wrap").removeClass("light-flash");
}
})
}
// 設置昇位圖上方 燈號
function setTopLight() {
let sysSubObj = pageAct.sysSubObj;
let strHtml = ``;
if (sysSubObj.device_normal_point_name != null && sysSubObj.device_normal_point_value != null) {
strHtml += ` <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">${sysSubObj.device_normal_text}</label>
</div>`;
}
if (sysSubObj.device_close_point_name != null && sysSubObj.device_close_point_value != null) {
strHtml += ` <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">${sysSubObj.device_close_text}</label>
</div>`;
}
if (sysSubObj.device_error_point_name != null && sysSubObj.device_error_point_value != null) {
strHtml += ` <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">${sysSubObj.device_error_text}</label>
</div>`;
}
return strHtml;
}
function setLightSchBlcok(obj) {
let devNum = $(obj).parents(".device-wrap").data("number");
let devPath = devNum.replaceAll("_", "/");
let iframe = `<iframe src="/ord?station:%7Cslot:/${devPath}/Sch|view:?fullScreen=true" style="min-height:100px;width:100%;height:100%"></iframe>`
$("#lightSchBlock").html(iframe);
}
// forge 3D 異常點位變紅色
function setForgeHotSpotColor(device) {
let subData = subDeviceData.filter(x => x.device_number == device.device_number)[0]
if (subData && subData[device.device_error_point_name] == device.device_error_point_value && !isNaN(parseInt(device.spriteDbid))) {
changeColorForHotspot(parseInt(device.spriteDbid), "error");
}
}
// 取得昇位圖點位 (deviceItem)
function getRiserPoiObj() {
let tarDevItem = pageAct.devItems?.filter(x => x.is_show_riserDiagram == 1);
if (tarDevItem && tarDevItem[0]) {
return tarDevItem[0];
}
return null;
}
// 取得設備列表 並繪製卡片
function getFloDevList(position = "left") {
let url = baseApiUrl + "/api/Device/GetDeviceList";
let sendData = {
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);
let devItem = getRiserPoiObj();
strHtml += `<div class="card m-1 border device-wrap" data-number="${devObj.device_number}" data-position="${position}">
<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 name="devItemName" data-number="${devObj.device_number}" 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="${devItem ? "" : "d-none"} ml-2">${devItem?.full_name}：<span name="devItemPoiVal" data-point="${devItem?.points}"></span>${devItem?.unit}</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 {
// 訂閱 baja 設備
subDevice();
}
// 繪製 html
$("#floDevList").append(strHtml);
// 存入 device 基本資料至元素 data 屬性
$("#floDevList a[name=devItem]").each((idx, ele) => {
if (allDevList.findIndex(x => x.device_number == $(ele).data("number")) != -1) {
$(ele).data("devobj", allDevList.filter(x => x.device_number == $(ele).data("number"))[0]);
}
})
// 初始化 pop 視窗
initPopover();
// 卡片設備名稱點擊事件
devItemNameEvent();
}
}, 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(devNum) {
let devPath = devNum.replaceAll("_", "/");
let position = $(`.card.device-wrap[data-number=${devNum}]`).data("position");
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 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>
</div>`
return strHtml;
}
function iframeResize(obj) {
obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
}
function show3DModel(urn) {
$(loadEle).Loading("start");
launchViewerForHotspot(urn, (viewer, nodeIds) => {
addHotPoint(viewer)
let devDbIds = allDevList.map(x => x.forge_dbid);
const devices = allDevList.forEach((device) => {
const sensorObj = new Forge3DSensor({
viewer: viewer,
ordPath: {
"area_tag": pageAct.AreaTag,
"building_tag": pageAct.buiTag,
},
curDevice: {
roomDbId: !isNaN(parseInt(device.room_dbid)) ? parseInt(device.room_dbid) : -1,
id: device.device_number,
position: isJSON(device.device_coordinate_3d) ? JSON.parse(device.device_coordinate_3d) : {}, // x: 0, y: 25, z: -2.5 (3.35, -4.81, 12.88
temp: 25,
forge_dbid: parseInt(device.forge_dbid)
}
});
})
// 從資料庫設定不可視模型的類型，若沒有取道該小類不可視類型，則套用資料庫設定預設類型
if (forgeInvType) {
setInviForge(forgeInvType, devDbIds);
} else {
setInviForge(forgeInvTypeDef, devDbIds);
}
$(loadEle).Loading("close");
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();
if (subDeviceData.length != 0) {
let stSubArr = subDeviceData.map(x => Object.keys(x).filter(y => y == "ST").map(y => x));
for (let sub of stSubArr) {
let matchDevice = allDevList.filter(x => x.device_number == sub[0]?.device_number)[0];
if (matchDevice) {
setForgeHotSpotColor(matchDevice);
}
}
}
getWaterNodeId();
}, () => {
$(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);
})
setHotspotPoint(myDataList);
if (pageAct.sysMainTag == "LT") {
setLightPoint(myDataList);
}
callback ? callback() : "";
}
}, null, "POST").send();
}
function setHotspotPoint(myDataList = []) {
console.log(myDataList)
getHopspotPoint(myDataList);
}
function setLightPoint(myDataList = []) {
console.log(myDataList)
getLightData(myDataList);
}
// 取得 不可視 3D 模型類型
function getInviForge() {
let url = baseApiUrl + "/api/Device/GetForgeInvType";
ytAjax = new YourTeam.Ajax(url, null, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
let datas = res.data;
forgeInvType = datas.filter(x => x.sub_system_tag == pageAct.sysSubTag)[0]?.invisible_value;
forgeInvTypeDef = datas.filter(x => x.invisible_type == "default_value")[0]?.invisible_value;
}
}, null, "POST").send();
}
// 設置 模型隱藏或透明
function setInviForge(type, devDbIds) {
console.log("devDbIds",devDbIds)
if (type == "Hide") {
hideAllObjects(devDbIds);
} else if (type == "Opacity") {
setTransparentBuilding(0, devDbIds);
}
}
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;
allDevList.forEach((dev, idx) => {
if (dev.device_number == devNum) {
dev.spriteDbid = dbid;
setForgeHotSpotColor(dev);
}
})
$(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>

7
Frontend/img/forge/sensor_circle.svg Normal file
View File

@ -0,0 +1,7 @@
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1">
<g>
<title>Layer 1</title>
<circle fill="none" id="svg_1" r="8" cy="8" cx="8"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 197 B

41
Frontend/index.html
View File

@ -801,7 +801,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
/*"lib/jquery-validation/dist/additional-methods.min",*/ /* 會影響 messages_zh_TW 文字呈現 */ /*"lib/jquery-validation/dist/additional-methods.min",*/ /* 會影響 messages_zh_TW 文字呈現 */
"lib/jquery-validation/dist/localization/messages_zh_TW", "lib/jquery-validation/dist/localization/messages_zh_TW",
"lib/jquery-ui/jquery-ui.min", "lib/jquery-ui/jquery-ui.min",
"lib/chart.js/chart.min", "lib/chart.js_4.1.2/chart.umd",
"lib/dropzone/dropzone-min", "lib/dropzone/dropzone-min",
"lib/jstree-master/jstree.min", "lib/jstree-master/jstree.min",
"lib/notifications/sweetalert2/sweetalert2.bundle", "lib/notifications/sweetalert2/sweetalert2.bundle",
@ -870,7 +870,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
if (isJSON(sessionStorage.getItem("pageAct"))) { if (isJSON(sessionStorage.getItem("pageAct"))) {
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"
) {
$(`#subSysBtn${lastPageAct.sysSubTag}`).click(); $(`#subSysBtn${lastPageAct.sysSubTag}`).click();
$("#sysMonTopBtn").YTTab("set"); $("#sysMonTopBtn").YTTab("set");
} else { } else {
@ -927,7 +929,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
// } // }
// }) // })
console.log(result); // console.log(result);
} }
} }
@ -946,7 +948,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
if (!page) { if (!page) {
return; return;
} }
if (page != "systemMonitor" && page != "sysElevator") { if (page != "systemMonitor" && page != "sysElevator"
// && page != "sysSensor"
) {
$("#sysMonBtnList [name=topFunBtn]").removeClass("active"); $("#sysMonBtnList [name=topFunBtn]").removeClass("active");
pageAct.sysMainTag = null; pageAct.sysMainTag = null;
pageAct.sysSubTag = null; pageAct.sysSubTag = null;
@ -1161,12 +1165,22 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<label class="m-0 mt-2">${devName}</label> <label class="m-0 mt-2">${devName}</label>
</div> </div>
<div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist"> <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="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} ${lightHtml}
<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="info-tab"
<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> data-toggle="tooltip" data-placement="bottom" title="基本資料"
<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> 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 class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></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>
<div class="card-body p-2 tab-content"> <div class="card-body p-2 tab-content">
@ -1202,11 +1216,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
controlFocusHotspot($(oriEle).data("dbId")); controlFocusHotspot($(oriEle).data("dbId"));
} }
// 3D 視角 ZOOM IN 聚焦 // 3D 視角 ZOOM IN 聚焦
/*
if (devObj) { if (devObj) {
moveViewToDevice(devObj?.forge_dbid); moveViewToDevice(devObj?.forge_dbid);
} }
*/
// pop 視窗卡片可拖移功能初始化 // pop 視窗卡片可拖移功能初始化
$(tooltipEle).draggable({ $(tooltipEle).draggable({
cursor: "move", cursor: "move",
@ -1379,6 +1393,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)
if (errRecTable) { if (errRecTable) {
errRecTable.destroy(); errRecTable.destroy();
} }
@ -1626,6 +1641,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
if (subSysObj.sub_system_tag == "EL") { if (subSysObj.sub_system_tag == "EL") {
page = "sysElevator"; page = "sysElevator";
} }
// console.log(subSysObj.sub_system_tag)
// if (subSysObj.sub_system_tag == "M12") {
// page = "sysSensor";
// }
let li = creEle("li"); let li = creEle("li");
let a = creA(subSysObj.full_name, { "href": "javascript:;" }, [], `subSysBtn${subSysObj.sub_system_tag}`, { page: page, tabname: "systemMonitor" }, "topFunBtn"); let a = creA(subSysObj.full_name, { "href": "javascript:;" }, [], `subSysBtn${subSysObj.sub_system_tag}`, { page: page, tabname: "systemMonitor" }, "topFunBtn");

92
Frontend/js/forge/forgemodel.js
View File

@ -90,7 +90,6 @@ function launchViewerForHotspot(urn, callback, failCallback, _selector = "#forge
setShadowShow(); setShadowShow();
$(selector).on("autodesk:loaded", function (e, nodeIds) { $(selector).on("autodesk:loaded", function (e, nodeIds) {
callback ? callback(viewer, nodeIds) : ""; callback ? callback(viewer, nodeIds) : "";
console.log(viewer.get)
}) })
$(selector).on("autodesk:loaded:fail", function (e) { $(selector).on("autodesk:loaded:fail", function (e) {
@ -168,6 +167,7 @@ class elevator3D {
this.movStatus = 0; this.movStatus = 0;
this.targetFloorZ = 0; this.targetFloorZ = 0;
this.floorHeight = option.floorHeight ?? [{}]; this.floorHeight = option.floorHeight ?? [{}];
this.sensorObjs = option.sensorObjs ?? null;
this.init(); this.init();
} }
@ -219,6 +219,12 @@ class elevator3D {
let fragPosition = new THREE.Vector3(0, 0, 0);// 一樓0 二樓15 三樓 26 let fragPosition = new THREE.Vector3(0, 0, 0);// 一樓0 二樓15 三樓 26
// 設置當前片段的位置 // 設置當前片段的位置
fragProxy.position = fragPosition; fragProxy.position = fragPosition;
// if(nodeId === 13704) {
// // 改變感測器熱點位置
// this.sensorObjs&&this.sensorObjs[0]?.changePos(13706, fragProxy.position.z)
// }
// 更新當前片段的動畫變換矩陣 // 更新當前片段的動畫變換矩陣
fragProxy.updateAnimTransform(); fragProxy.updateAnimTransform();
}) })
@ -298,6 +304,11 @@ class elevator3D {
tarFrag.frag.position.z = fragProxy.position.z; tarFrag.frag.position.z = fragProxy.position.z;
} }
fragProxyZ = fragProxy.position.z; fragProxyZ = fragProxy.position.z;
if (nodeId === 13704) {
// 改變感測器熱點位置
this.sensorObjs && this.sensorObjs[0]?.changePos(13706, fragProxyZ)
}
fragProxy.updateAnimTransform() fragProxy.updateAnimTransform()
}) })
@ -349,7 +360,7 @@ function onDocumentLoadSuccess(doc, eleOption) {
viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () { viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () {
let instanceTree = viewer.model?.getData().instanceTree; let instanceTree = viewer.model?.getData().instanceTree;
console.log(instanceTree.nodeAccess) // console.log(instanceTree.nodeAccess)
allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex); allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
/*getNodeIdByDbIds("【電梯】", (nodeIds) => {*/ /*getNodeIdByDbIds("【電梯】", (nodeIds) => {*/
$(selector).trigger("autodesk:loaded"); $(selector).trigger("autodesk:loaded");
@ -560,8 +571,12 @@ class ADHeatMaps {
init = async function () { init = async function () {
// 載入 Autodesk Viewer 的資料視覺化擴充功能 // 載入 Autodesk Viewer 的資料視覺化擴充功能
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization"); const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
this.dataVizExtn = dataVizExtn;
// 儲存 Viewer 的模型 // 儲存 Viewer 的模型
this.model = viewer.model; this.model = viewer.model;
this.addHeatMaps()
}
async addHeatMaps() {
const { const {
SurfaceShadingData, SurfaceShadingData,
SurfaceShadingPoint, SurfaceShadingPoint,
@ -584,11 +599,12 @@ class ADHeatMaps {
this.devices.filter(x => x.roomDbId == rDbid).forEach((device) => { this.devices.filter(x => x.roomDbId == rDbid).forEach((device) => {
const shadingPoint = new SurfaceShadingPoint( const shadingPoint = new SurfaceShadingPoint(
device.id, device.id,
device.position, undefined,
device.sensorTypes device.sensorTypes
); );
shadingPoint.positionFromDBId(this.model, device.roomDbId)
shadingNode.addPoint(shadingPoint); shadingNode.addPoint(shadingPoint);
device.temp = 0; // device.temp = 0;
}); });
heatmapData.addChild(shadingNode); heatmapData.addChild(shadingNode);
@ -598,12 +614,10 @@ class ADHeatMaps {
heatmapData.initialize(this.model); heatmapData.initialize(this.model);
// 對模型做表面顏色的渲染 // 對模型做表面顏色的渲染
await dataVizExtn.setupSurfaceShading(this.model, heatmapData); await this.dataVizExtn.setupSurfaceShading(this.model, heatmapData);
// 對 "temperature" 的溫度設定兩種顏色：紅色和藍色 // 對 "temperature" 的溫度設定兩種顏色：紅色和藍色
dataVizExtn.registerSurfaceShadingColors("temperature", [0x0000ff, 0x00ff00, 0xffff00, 0xff0000]); this.dataVizExtn.registerSurfaceShadingColors("temperature", [0x0000ff, 0x00ff00, 0xffff00, 0xff0000]);
this.dataVizExtn = dataVizExtn;
$.each(this.roomDbIds, (idx, rDbid) => { $.each(this.roomDbIds, (idx, rDbid) => {
this.dataVizExtn.renderSurfaceShading("RoomPanel" + rDbid, "temperature", this.getSensorValue.bind(this)); this.dataVizExtn.renderSurfaceShading("RoomPanel" + rDbid, "temperature", this.getSensorValue.bind(this));
@ -615,6 +629,7 @@ class ADHeatMaps {
getSensorValue = function (device, sensorType) { getSensorValue = function (device, sensorType) {
let dev = this.devices.filter(x => x.id == device.id)[0]; let dev = this.devices.filter(x => x.id == device.id)[0];
// shadingPoint.positionFromDBId(this.model, device.roomDbId)
return dev.temp / 40; return dev.temp / 40;
} }
@ -627,7 +642,7 @@ class ADHeatMaps {
dev.temp = temp; dev.temp = temp;
} }
}) })
$.each(this.roomDbIds, (idx, rDbid) => { $.each(this.roomDbIds, async (idx, rDbid) => {
this.dataVizExtn.renderSurfaceShading("RoomPanel" + rDbid, "temperature", this.getSensorValue.bind(this)); this.dataVizExtn.renderSurfaceShading("RoomPanel" + rDbid, "temperature", this.getSensorValue.bind(this));
}) })
//if (rDbid != null) { //if (rDbid != null) {
@ -753,17 +768,23 @@ async function testNewLight(dataList) {
//------------------- 加入熱點 ----------------- //------------------- 加入熱點 -----------------
async function addHotPoint(data) { async function addHotPoint(data) {
var viewer = data.target; var viewer = data.target ? data.target : data;
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization"); const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
const DataVizCore = Autodesk.DataVisualization.Core; const DataVizCore = Autodesk.DataVisualization.Core;
const viewableType = Autodesk.DataVisualization.Core.ViewableType.SPRITE;//DataVizCore.ViewableType.SPRITE; const viewableType = Autodesk.DataVisualization.Core.ViewableType.SPRITE;//DataVizCore.ViewableType.SPRITE;
const spriteColor = new THREE.Color(0xffffff); let spriteColor = null;
let spriteIcon = "";
const dbIdStart = 10; const dbIdStart = 10;
const dbIdEnd = 19; const dbIdEnd = 19;
let spriteIcon = "/file/img/forge/hotspot.svg"; if (pageAct.sysSubTag === "M12") {
return
} else {
spriteColor = new THREE.Color(0xffffff);
spriteIcon = "/file/img/forge/hotspot.svg";
if (location.href.indexOf("localhost:5966") != -1) { if (location.href.indexOf("localhost:5966") != -1) {
spriteIcon = "/img/forge/hotspot.svg"; spriteIcon = "/img/forge/hotspot.svg";
} }
}
const style = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIcon); const style = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIcon);
@ -793,14 +814,27 @@ async function addHotPoint(data) {
await viewableData.finish(); await viewableData.finish();
dataVizExtn.addViewables(viewableData); dataVizExtn.addViewables(viewableData);
// console.log(dataVizExtn)
$(selector).trigger("autodesk:complete:sprite", { myDataList }); $(selector).trigger("autodesk:complete:sprite", { myDataList });
//---------------- 熱點點擊事件 -------------------- //---------------- 熱點點擊事件 --------------------
function onSpriteClicked(event) { function onSpriteClicked(event) {
event.hasStopped = true; event.hasStopped = true;
if (pageAct.sysSubTag === "M12" && event != undefined && event != null) {
if (event.dbId >= dbIdStart) {
changeColorForHotspot(event.dbId);
changeScaleForHotspot(event.dbId, false);
let myData = [this.curDevice].filter(x => x.forge_dbid == event.dbId)[0];
moveViewToDevice(myData.forge_dbid);//移動視角至該設備
$(selector).trigger("autodesk:click:sprite", { event, myData });
} else {
$(selector).trigger("autodesk:clickOut:sprite", { event });
}
}
if (event != undefined && event != null) { if (event != undefined && event != null) {
if (event.dbId >= dbIdStart) {//event.dbId > 0 && event.dbId < 19 if (event.dbId >= dbIdStart) {//event.dbId > 0 && event.dbId < 19
console.log(`Sprite clicked: ${event.dbId}`); // console.log(`Sprite clicked: ${event.dbId}`);
for (let i = dbIdStart; i <= myDataList.length + 10; i++) { for (let i = dbIdStart; i <= myDataList.length + 10; i++) {
changeColorForHotspot(i); changeColorForHotspot(i);
@ -821,7 +855,7 @@ async function addHotPoint(data) {
//document.getElementById('deviceName').innerHTML = viewer.model.getInstanceTree().getNodeName(event.clickInfo.dbId); //document.getElementById('deviceName').innerHTML = viewer.model.getInstanceTree().getNodeName(event.clickInfo.dbId);
//document.getElementById('deviceDbid').innerHTML = event.clickInfo.dbId; //document.getElementById('deviceDbid').innerHTML = event.clickInfo.dbId;
//document.getElementById('devicePosition').innerHTML = "(" + (event.clickInfo.point.x).toFixed(2) + ", " + (event.clickInfo.point.y).toFixed(2) + ", " + (event.clickInfo.point.z).toFixed(2) + ")"; //document.getElementById('devicePosition').innerHTML = "(" + (event.clickInfo.point.x).toFixed(2) + ", " + (event.clickInfo.point.y).toFixed(2) + ", " + (event.clickInfo.point.z).toFixed(2) + ")";
console.log(`event>> dbId: ${event.clickInfo.dbId}, id: ${event.clickInfo.object.id}, position.x: ${event.clickInfo.point.x}, y: ${event.clickInfo.point.y}, z: ${event.clickInfo.point.z}, name: ${viewer.model.getInstanceTree().getNodeName(event.clickInfo.dbId)}`); // console.log(`event>> dbId: ${event.clickInfo.dbId}, id: ${event.clickInfo.object.id}, position.x: ${event.clickInfo.point.x}, y: ${event.clickInfo.point.y}, z: ${event.clickInfo.point.z}, name: ${viewer.model.getInstanceTree().getNodeName(event.clickInfo.dbId)}`);
} }
} }
} }
@ -847,8 +881,9 @@ async function addHotPoint(data) {
// 熱點 更換顏色 // 熱點 更換顏色
async function changeColorForHotspot(dbId, type = null) { async function changeColorForHotspot(dbId, type = null) {
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization"); const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
let spriteColorFocus = new THREE.Color(0xffffff); // console.log(dbId, dataVizExtn.viewableData.getViewableColor(dbId, false))
if (type == "focus") { let spriteColorFocus = dataVizExtn.viewableData?.getViewableColor(dbId, false) || new THREE.Color(0xffffff);
if (type == "focus" && pageAct.sysSubTag !== "M12") {
spriteColorFocus = new THREE.Color(0x00ffe1); spriteColorFocus = new THREE.Color(0x00ffe1);
} else if (type == "error") { } else if (type == "error") {
spriteColorFocus = new THREE.Color(0xff0000); spriteColorFocus = new THREE.Color(0xff0000);
@ -861,6 +896,27 @@ async function changeColorForHotspot(dbId, type = null) {
}); });
} }
// 熱點 更換顏色---環境感知器
async function changeColorForSensorHotspot(dbId, temp) {
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
const temps = [new THREE.Color(0x0000ff), new THREE.Color(0x00ff00), new THREE.Color(0xffff00), new THREE.Color(0xff0000)]
let index = Math.floor(temp / 10);
if (index > 3) {
index = 3
}
const viewablesToUpdate = dbId;
const color = temps[index]
dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
return {
color: color,
};
});
console.log(dataVizExtn)
}
// 熱點 更換大小 // 熱點 更換大小
async function changeScaleForHotspot(dbId, type = true) { async function changeScaleForHotspot(dbId, type = true) {
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization"); const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
@ -1050,7 +1106,7 @@ async function loadHeatmapForFloor() {
//------------ 剖面 ---------------------- //------------ 剖面 ----------------------
async function getRemoteLevels() { async function getRemoteLevels() {
const aecData = await Autodesk.Viewing.Document.getAecModelData(this.viewer.model.getDocumentNode()); const aecData = await Autodesk.Viewing.Document.getAecModelData(this.viewer.model.getDocumentNode());
if (!aecData.levels) return null; if (!aecData || !aecData.levels) return null;
const levels2 = aecData.levels; const levels2 = aecData.levels;
levels2.sort((a, b) => b.elevation - a.elevation); levels2.sort((a, b) => b.elevation - a.elevation);
@ -1106,7 +1162,7 @@ async function newLight(lightPosition) {
//聚光燈 //聚光燈
var spotLight = new THREE.SpotLight(0xffffff, 200, 20, 0.6, 0.5, 10); var spotLight = new THREE.SpotLight(0xffffff, 200, 20, 0.6, 0.5, 10);
spotLight.position.set(lightPosition.x, lightPosition.y, lightPosition.z); spotLight.position.set(lightPosition.x, lightPosition.y, lightPosition.z);
console.log(lightPosition.x, lightPosition.y, lightPosition.z) // console.log(lightPosition.x, lightPosition.y, lightPosition.z)
spotLight.castShadow = false; spotLight.castShadow = false;
spotLight.visible = true; spotLight.visible = true;
spotLight.target.position.set(lightPosition.x, lightPosition.y, lightPosition.z - 20); spotLight.target.position.set(lightPosition.x, lightPosition.y, lightPosition.z - 20);

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

@ -93,12 +93,13 @@ 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 from openAlarms 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 from openAlarms 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) {
return table.cursor({ return table.cursor({
each: function (record) { each: function (record) {
// console.log(record)
const alarmDisplayName = record.get('alarmData').get('sourceName').split(":")[1] ?? record.get('alarmData').get('sourceName').split(":")[0] const alarmDisplayName = record.get('alarmData').get('sourceName').split(":")[1] ?? record.get('alarmData').get('sourceName').split(":")[0]
//console.log(alarmDisplayName) //console.log(alarmDisplayName)
_sourceTmp = alarmDisplayName.split('_'); _sourceTmp = alarmDisplayName.split('_');
@ -568,14 +569,14 @@ 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 from openAlarms 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 from openAlarms 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()
.then(function (table) { .then(function (table) {
return table.cursor({ return table.cursor({
each: function (record) { each: function (record) {
// console.log(record,record.get('alarmData').get('sourceName').split(':')) // console.log(record)
let main = {}; let main = {};
// console.log(record.get('alarmData').get('sourceName'),record.get('timestamp').$cEncStr) // console.log(record.get('alarmData').get('sourceName'),record.get('timestamp').$cEncStr)
const alarmDisplayName = record.get('alarmData').get('sourceName').split(":")[1] ?? record.get('alarmData').get('sourceName').split(":")[0] const alarmDisplayName = record.get('alarmData').get('sourceName').split(":")[1] ?? record.get('alarmData').get('sourceName').split(":")[0]
@ -597,7 +598,9 @@ function getAllDeviceAlarmByBaja(startDate_millisecond, endDate_millisecond, isR
main.normalTime = record.get('normalTime'); main.normalTime = record.get('normalTime');
main.priority = record.get('priority'); main.priority = record.get('priority');
main.ackedTime = record.get('ackTime').$cEncStr; main.ackedTime = record.get('ackTime').$cEncStr;
main.ackState = record.get('ackState').$ordinal
if (!_sourceTmp.includes("undefined")) { if (!_sourceTmp.includes("undefined")) {
// console.log(main.ackState)
_result.data.push(main); _result.data.push(main);
} }
_index++; _index++;
@ -623,42 +626,50 @@ function getDeviceAlarmCardByBaja(startDate_millisecond, endDate_millisecond, is
var _recoverState = isRecover ? "!= null" : "= null"; var _recoverState = isRecover ? "!= null" : "= null";
var _ackState = isAck ? "= 'acked'" : "= 'unacked'"; var _ackState = isAck ? "= 'acked'" : "= 'unacked'";
require(['baja!'], function (baja) {
let startUrl = ""; let startUrl = "";
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 from openAlarms 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 from openAlarms where " + startUrl + "timestamp.millis <= " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp desc");
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 from openAlarms 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()
.then(function (table) { .then(function (table) {
return table.cursor({ return table.cursor({
each: function (record) { each: function (record) {
// console.log(record)
let main = {}; let main = {};
//console.log(record.get('alarmData').get('sourceName')) // console.log(record.get('alarmData').get('sourceName'),record.get('timestamp').$cEncStr)
_sourcePoint = (record.get('alarmData').get('sourceName')).toString().split(':')[1]; const alarmDisplayName = record.get('alarmData').get('sourceName').split(":")[1] ?? record.get('alarmData').get('sourceName').split(":")[0]
//console.log(_sourcePoint) //console.log(alarmDisplayName)
_sourceTmp = _sourcePoint.split("_"); _sourceTmp = alarmDisplayName.split('_');
let _bfName = _sourceTmp[1] + "-" + _sourceTmp[4]
let _sourceName = _sourceTmp.slice(0, 8).join("_");
_sourceTmp = _sourceTmp[7] + "-" + _sourceTmp[8];
let _bfName = _sourceTmp[1] + "-" + _sourceTmp[4];
let _sourceName = _sourceTmp[7] + "-" + _sourceTmp[8];
main.buildingFloorName_zh = _bfName; main.buildingFloorName_zh = _bfName;
main.sourceName_zh = _sourceName; main.sourceName_zh = _sourceName;
main.uuid = record.get('uuid').$val; main.uuid = record.get('uuid').$val;
main.timestamp = record.get('timestamp'); main.timestamp = record.get('timestamp').$cEncStr;
main.alarmClass = record.get('alarmClass'); main.alarmClass = record.get('alarmClass');
main.point = _sourcePoint; main.point = _sourceTmp;
main.devicePath = _sourceTmp.slice(0, 8).join("_");; main.sourceTmp = _sourceTmp;
main.devicePath = _sourceName;
main.msgText = record.get('alarmData').get('msgText'); main.msgText = record.get('alarmData').get('msgText');
main.normalTime = record.get('normalTime'); main.normalTime = record.get('normalTime');
main.priority = record.get('priority'); main.priority = record.get('priority');
main.ackedTime = record.get('ackTime').$cEncStr; main.ackedTime = record.get('ackTime').$cEncStr;
main.ackState = record.get('ackState').$ordinal
if (!_sourceTmp.includes("undefined")) {
// console.log(main.ackState)
_result.data.push(main); _result.data.push(main);
}
_index++; _index++;
}, },
after: function () { after: function () {
_result.count = _index; _result.count = _index;
if (typeof callback === 'function') { if (typeof callback === 'function') {
//console.log(_result)
callback(_result); callback(_result);
} }
}, },

337
Frontend/js/site.js
View File

@ -484,17 +484,18 @@ class Forge3DElevFull {
this.selector = option.selector ?? "#forgeViewer"; this.selector = option.selector ?? "#forgeViewer";
this.bajaChaCallback = option.bajaChaCallback ?? null; this.bajaChaCallback = option.bajaChaCallback ?? null;
this.bajaEndCallback = option.bajaEndCallback ?? null; this.bajaEndCallback = option.bajaEndCallback ?? null;
this.sensorObj = null this.sensorObjs = option.sensorObjs ?? null;
} }
init = function () { init = function () {
this.sensorObj = new Forge3DSensor({
viewer: this.viewer,
ordPath: { ...this.ordPath },
})
// 系統大類、小類固定 // 系統大類、小類固定
this.ordPath.system_tag = this.sysMainTag; this.ordPath.system_tag = this.sysMainTag;
this.ordPath.name_tag = this.sysSubTag; this.ordPath.name_tag = this.sysSubTag;
// if (pageAct.sysSubTag === "M12") {
// console.log("@@",pageAct, pageAct.sysSubTag)
// this.getSensorDevList();
// }
this.getElevDevList(); this.getElevDevList();
} }
@ -534,6 +535,7 @@ class Forge3DElevFull {
if (this.elev3DObj.length != 0) { if (this.elev3DObj.length != 0) {
let elevObj = this.elev3DObj.filter(x => x.nodeId == this.elev3DBind[matchDevice.device_number])[0]; let elevObj = this.elev3DObj.filter(x => x.nodeId == this.elev3DBind[matchDevice.device_number])[0];
if (elevObj && elevObj.id) { if (elevObj && elevObj.id) {
elevObj.obj.setElevatorFloor(data.value) elevObj.obj.setElevatorFloor(data.value)
elevObj.obj.movElevator(); elevObj.obj.movElevator();
} }
@ -593,6 +595,13 @@ class Forge3DElevFull {
frags.forEach((fragProxy) => { frags.forEach((fragProxy) => {
fragProxy.frag.position.z = this.elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0; fragProxy.frag.position.z = this.elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0;
console.log("1", fragProxy.frag.position.z)
let start = 0;
if (node === 13704 && start == 0) {
// 改變感測器熱點位置
this.sensorObjs && this.sensorObjs[0]?.changePos(13706, fragProxy.frag.position.z);
start = 1;
}
fragProxy.frag.updateAnimTransform(); fragProxy.frag.updateAnimTransform();
}) })
elevObj.obj.viewer.impl.sceneUpdated(true); elevObj.obj.viewer.impl.sceneUpdated(true);
@ -617,6 +626,7 @@ class Forge3DElevFull {
viewer: this.viewer, viewer: this.viewer,
nodeId: node, nodeId: node,
floorHeight: this.elev3DOption.floorHeight ?? [], floorHeight: this.elev3DOption.floorHeight ?? [],
sensorObjs: this.sensorObjs,
inited: function () { inited: function () {
} }
@ -637,9 +647,16 @@ class Forge3DElevFull {
elevObj.obj = Object.assign(elevObj, elevator3DObj ?? {}) elevObj.obj = Object.assign(elevObj, elevator3DObj ?? {})
elevObj.obj.init(() => { elevObj.obj.init(() => {
let frags = elevObj.obj.fragProxys.filter(x => x.nodeId == node); let frags = elevObj.obj.fragProxys.filter(x => x.nodeId == node);
frags.forEach((fragProxy) => { frags.forEach((fragProxy) => {
fragProxy.frag.position.z = this.elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0; fragProxy.frag.position.z = this.elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0;
console.log("2", fragProxy.frag.position.z)
// debugger
let start = 0;
if (node === 13704 && start == 0) {
// 改變感測器熱點位置
this.sensorObjs && this.sensorObjs[0]?.changePos(13706, fragProxy.frag.position.z);
start = 1;
}
fragProxy.frag.updateAnimTransform() fragProxy.frag.updateAnimTransform()
}) })
elevObj.obj.viewer.impl.sceneUpdated(true); elevObj.obj.viewer.impl.sceneUpdated(true);
@ -677,6 +694,8 @@ class Forge3DElevFull {
} }
} }
/** /**
* 取得資料庫溫度感測器 * 取得資料庫溫度感測器
* 1. baja 取得溫度感測器改變顏色 * 1. baja 取得溫度感測器改變顏色
@ -684,7 +703,6 @@ class Forge3DElevFull {
* */ * */
class Forge3DSensor { class Forge3DSensor {
constructor(option = {}) { constructor(option = {}) {
this.allSensorDevList = []; //溫度調節器設備清單
this.subDeviceData = []; //每個設備訂閱點位值 this.subDeviceData = []; //每個設備訂閱點位值
this.viewer = option.viewer ?? null; this.viewer = option.viewer ?? null;
this.ordPath = option.ordPath; // TPE_B1 this.ordPath = option.ordPath; // TPE_B1
@ -696,6 +714,9 @@ class Forge3DSensor {
this.bajaEndCallback = option.bajaEndCallback ?? null; this.bajaEndCallback = option.bajaEndCallback ?? null;
this.floorHeight = 0; this.floorHeight = 0;
this.dataVizExtn = null; this.dataVizExtn = null;
this.DataVizCore = null;
this.tempVal = 20;
this.curDevice = option.curDevice ?? null;
this.#init(); this.#init();
} }
@ -704,78 +725,148 @@ class Forge3DSensor {
this.ordPath.system_tag = this.sysMainTag; this.ordPath.system_tag = this.sysMainTag;
this.ordPath.name_tag = this.sysSubTag; this.ordPath.name_tag = this.sysSubTag;
this.dataVizExtn = await this.viewer.loadExtension("Autodesk.DataVisualization"); this.dataVizExtn = await this.viewer.loadExtension("Autodesk.DataVisualization");
//this.getSensorDevList(); this.DataVizCore = Autodesk.DataVisualization.Core;
} await this.addHotPoint();
// 取得Sensor設備列表 this.changeColorForSensorHotspot(this.curDevice.forge_dbid, 35)
getSensorDevList = function () { this.subSensorDevice();
let url = baseApiUrl + "/api/Device/GetDeviceList";
let sendData = {
sub_system_tag: this.ordPath.name_tag, // M12
building_tag: this.ordPath.building_tag, //B1
};
objSendData.Data = sendData;
ytAjax = new YourTeam.Ajax(url, objSendData, (res) => {
if (!res || res.code != "0000" || !res.data) {
} else {
$.each(res.data, (index, floObj) => {
$.each(floObj.device_list, (index2, devObj) => {
this.allSensorDevList.push(devObj);
})
})
let devices = this.allSensorDevList.map((x) => {
if (x.device_number.includes("ME_M12")) {
return {
roomDbId: 12879, // Bank2 電梯
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"],
};
} }
// 建立熱點
async addHotPoint() {
// this.dataVizExtn.removeAllViewables()
await this.registerHotPoint()
this.subSensorDevice();
// console.log("2",this.dataVizExtn)
}
async registerHotPoint(color = "") {
var viewer = this.viewer;
const viewableType = this.DataVizCore.ViewableType.SPRITE;//DataVizCore.ViewableType.SPRITE;
const spriteColor = new THREE.Color(0x000000);
// const highlightedColor = new THREE.Color(0xe0e0ff);
let spriteIcon = "/file/img/forge/sensor_circle.svg";
if (location.href.indexOf("localhost:5966") != -1) {
spriteIcon = "/img/forge/sensor_circle.svg";
}
const style = new this.DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIcon);
const viewableData = new this.DataVizCore.ViewableData();
viewableData.spriteSize = 30; // Sprites as points of size 24 x 24 pixels
// console.log(this.curDevice, [this.curDevice])
[this.curDevice].forEach((myData, index) => {
// console.log(myData)
const dbId = myData.forge_dbid;
const myPosition = myData.position;
const viewable = new this.DataVizCore.SpriteViewable(myPosition, style, dbId);
myData._dbId = dbId;
viewableData.addViewable(viewable);
}); });
//this.heatMap = new ADHeatMaps({ // console.log(viewableData)
// devices await viewableData.finish();
//}); this.dataVizExtn.addViewables(viewableData);
//this.subSensorDevice(); // console.log("1",this.dataVizExtn)
viewer.addEventListener(this.DataVizCore.MOUSE_CLICK, onSpriteClicked.bind(this));// SPRITE_SELECTED
// ---------------- 熱點點擊事件 --------------------
function onSpriteClicked(event) {
event.hasStopped = true;
const dbIdStart = 10;
// debugger
if (event != undefined && event != null) {
if (event.dbId >= dbIdStart) {
changeColorForHotspot(event.dbId);
changeScaleForHotspot(event.dbId, false);
let myData = [this.curDevice].filter(x => x.forge_dbid == event.dbId)[0];
moveViewToDevice(myData.forge_dbid);//移動視角至該設備
$(selector).trigger("autodesk:click:sprite", { event, myData });
} else {
$(selector).trigger("autodesk:clickOut:sprite", { event });
} }
}, null, "POST").send(); }
}
}
// 改變熱點位置
changePos(dbId, positionZ) {
this.dataVizExtn.invalidateViewables(dbId, (viewable) => {
// console.log(viewable._position)
const z = viewable._position.z + positionZ
const newPos = { ...viewable._position, z }
return {
// Move the viewable to a new location.
position: newPos
};
});
}
// 熱點 更換顏色---環境感知器
changeColorForSensorHotspot(dbId, temp) {
const temps = [new THREE.Color(0x00009c), new THREE.Color(0xffff31), new THREE.Color(0xff8c00), new THREE.Color(0xff0000)]
let index = Math.floor(temp / 10) - 1 || 0;
if (index > 3) {
index = 3
}
const viewablesToUpdate = dbId;
const color = temps[index]
// debugger
// this.registerHotPoint(color)
// const _this=this
// setInterval(() => {
// _this.dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
// return { color: color };
// });
// // sceneUpdated(true)
// }, 1000);
this.dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
return {
color: color,
};
});
// debugger
// console.log("3", this.dataVizExtn)
} }
// 訂閱sensor設備 // 訂閱sensor設備
subSensorDevice = function () { subSensorDevice() {
let myBaja = new subscriptionDevices(); // console.log("sensor 訂閱")
let ordPath = this.ordPath; // require(["baja!"], (baja)=>{
// const sub = new baja.subscriber();
// sub.attach("changed",function(){
// console.log(this)
// })
// baja.Ord.make("local:|foxs:|station:|slot:/TPE/B1/ME/M12/U1F/NA/TH/N1/TEMP").get({subscribe: sub})
// })
let myBaja = new subscriptionDevices();
myBaja.setSubscribeDevicesByBql(this.ordPath);
myBaja.setSubscribeDevicesByBql(ordPath);
myBaja.setSubscribeDevicesCallBack((data) => { myBaja.setSubscribeDevicesCallBack((data) => {
// console.log(data)
this.bajaChaCallback ? this.bajaChaCallback(data) : ""; this.bajaChaCallback ? this.bajaChaCallback(data) : "";
if (this.allSensorDevList.length == 0) { if (this.curDevice == null) {
return false; return false;
} }
data.device_number = data.device_number_full; // "TPE_B1_ME_M12_U1F_NA_TH_N1" (forge TPE_B1_ME_M12_R2F_NA_TH_N1) data.device_number = data.device_number_full; // "TPE_B1_ME_M12_U1F_NA_TH_N1" (forge TPE_B1_ME_M12_R2F_NA_TH_N1)
let matchDevice = this.allSensorDevList.find(
(x) =>
x.device_number == data.device_number ||
x.device_number == "TPE_B1_ME_M12_R2F_NA_TH_N1",
);
if (!matchDevice) {
return;
}
//將訂閱值塞入 subDeviceData //將訂閱值塞入 subDeviceData
if ( if (
this.subDeviceData.findIndex(d => d.device_number == matchDevice.device_number) == -1 this.subDeviceData.findIndex(d => d.device_number == this.curDevice.id) == -1
) { ) {
let obj = {}; let obj = {};
obj.device_number = matchDevice.device_number; obj.device_number = this.curDevice.id;
obj.dbid = matchDevice.forge_dbid; obj.dbid = this.curDevice.roomDbId;
this.subDeviceData.push(obj); this.subDeviceData.push(obj);
} }
let subData = this.subDeviceData.find( let subData = this.subDeviceData.find(
(x) => x.device_number == matchDevice.device_number || x.device_number == "TPE_B1_ME_M12_R2F_NA_TH_N1" (x) => x.device_number == this.curDevice.id || x.device_number == "TPE_B1_ME_M12_R2F_NA_TH_N1"
); );
if (subData) { if (subData) {
@ -784,122 +875,30 @@ class Forge3DSensor {
//let norDevPoiName = matchDevice.device_normal_point_name; //let norDevPoiName = matchDevice.device_normal_point_name;
//let cloDevPoiName = matchDevice.device_close_point_name || ""; //let cloDevPoiName = matchDevice.device_close_point_name || "";
//let errDevPoiName = matchDevice.device_error_point_name; //let errDevPoiName = matchDevice.device_error_point_name;
if (data.point_name == "Temp" || data.point_name == "TEMP") { if (data.point_name == "Temp" || data.point_name == "TEMP") {
this.heatMap?.changeTemp( this.tempVal = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0;
matchDevice.device_number, // this.heatMap?.changeTemp(
!isNaN(parseInt(data.value)) ? parseInt(data.value) : 0, // this.curDevice.id,
); // !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0,
let devIdx = this.allSensorDevList.findIndex( // );
(x) => this.curDevice.temp = this.tempVal;
x.device_number == data.device_number_full || // console.log(data.value, parseInt(data.value))
x.device_number == "TPE_B1_ME_M12_R2F_NA_TH_N1", this.changeColorForSensorHotspot(this.curDevice.forge_dbid, parseInt(data.value))
); // changeColorForSensorHotspot(this.curDevice.forge_dbid, parseInt(data.value))
this.allSensorDevList[devIdx]._temp = !isNaN(parseInt(data.value))
? parseInt(data.value)
: 0;
} }
}); });
//myBaja.setSubscribeDeviceEndCallBack((data) => { myBaja.setSubscribeDeviceEndCallBack((data) => {
// if (data.findIndex((x) => x.point_name == "Temp" || x.point_name == "TEMP") != -1) { if (data.findIndex((x) => x.point_name == "Temp" || x.point_name == "TEMP") != -1) {
// // 顯示溫度條 // 顯示溫度條
// console.log(showHeat) showHeat("[name=forgeHeatBar]");
// showHeat("[name=forgeHeatBar]");
// }
//});
} }
// 位置呈現
changeSensorPos = async function () {
this.dataVizExtn.removeAllViewables();
const DataVizCore = Autodesk.DataVisualization.Core;
const viewableType = DataVizCore.ViewableType.SPRITE;
const spriteColor = new THREE.Color(0x000000);
let spriteIcon = "/file/img/forge/hotspot.svg";
if (location.href.indexOf("localhost:5966") != -1) {
spriteIcon = "/img/forge/hotspot.svg";
} const style = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIcon);
const viewableData = new DataVizCore.ViewableData();
viewableData.spriteSize = 30
// test 1
// const myDataList = [{ position: { x: 0, y: 0, z: this.floorHeight } }];
// myDataList.forEach((myData, index) => {
// const position = myData.position;
// const viewable = new DataVizCore.SpriteViewable(position, style, 12982);
// console.log(viewable)
// viewableData.addViewable(viewable);
// });
// await viewableData.finish();
// this.dataVizExtn.addViewables(viewableData);
// console.log(this.floorHeight,this.dataVizExtn)
// test 2
const myDataList = [{ position: { x: 0, y: 0, z: 0 } }];
myDataList.forEach((myData, index) => {
const position = myData.position;
const viewable = new DataVizCore.SpriteViewable(position, style, 12982);
viewableData.addViewable(viewable);
}); });
await viewableData.finish(); // window.x = 28
this.dataVizExtn.addViewables(viewableData); // setInterval(()=>{
let spritesToUpdate = this.dataVizExtn.viewableData.viewables.map((v) => v.dbId); // this.changeColorForSensorHotspot(this.curDevice.forge_dbid, x++)
this.dataVizExtn.invalidateViewables(spritesToUpdate, (viewable) => { // }, 2000)
return {
// Move the viewable to a new location.
position: { x: 0, y: 0, z: 100 },
};
});
console.log(this.floorHeight, this.dataVizExtn)
console.log("site")
//let nodeIds = this.allSensorDevList
// .filter((x) => !isNaN(parseInt(x.forge_dbid)))
// .map((x) => {
// return { devNum: x.device_number, nodeId: parseInt(x.forge_dbid) };
// });
//console.log("sensor", nodeIds)
//$.each(nodeIds, (idx, node) => {
// let options = {
// element: $(this.selector),
// viewer: this.viewer,
// nodeId: node,
// floorHeight: this.floorHeight ?? [],
// inited: function () {
// }
// }
// let elevator3DObj = new elevator3D(options);
// elevator3DObj.init(() => {
// const frags = this.viewer.model.getFragmentList();
// let scale = new THREE.Vector3();
// let rotation = new THREE.Quaternion();
// let translation = new THREE.Vector3();
// frags.getAnimTransform(node.nodeId, scale, rotation, translation);
// console.log(frags.getAnimTransform(node.nodeId, scale, rotation, translation))
// translation.z = this.floorHeight;
// frags.updateAnimTransform(node.nodeId, scale, rotation, translation);
// console.log(frags, frags.getAnimTransform(node.nodeId, scale, rotation, translation))
// // let frags = elevator3DObj.fragProxys.filter(x => x.nodeId == node);
// // console.log("sensor",elevator3DObj, frags)
// // let fragProxy = this.viewer.impl.getFragmentProxy(this.viewer.model, node.nodeId)
// // fragProxy.position = new THREE.Vector3(0, 0, 0)
// // console.log(node,fragProxy)
// // fragProxy.position.z = this.floorHeight
// // fragProxy.updateAnimTransform()
// // frags.forEach((fragProxy) => {
// // console.log("sensor", this)
// // console.log("elev2")
// // fragProxy.frag.position.z = this.floorHeight
// // console.log("sensor", fragProxy, fragProxy.frag)
// // fragProxy.frag.updateAnimTransform()
// // })
// this.viewer.impl.sceneUpdated(true)
// })
//})
} }
} }

5
Frontend/lib/skins/skin-master.css
View File

@ -301,8 +301,9 @@ body:not(.mod-skin-light):not(.mod-skin-dark) #skin-default:before {
color: #bdbdbd; } color: #bdbdbd; }
.mod-skin-dark:not(.mod-skin-light) .page-content-wrapper a:not(.btn):not(.badge):not(.dropdown-item):not(.nav-link):not(.navbar-brand):not(.card-title):not([class*="fc-"]):not([class*="text-"]):not(.btn-search-close), .mod-skin-dark:not(.mod-skin-light) .page-content-wrapper a:not(.btn):not(.badge):not(.dropdown-item):not(.nav-link):not(.navbar-brand):not(.card-title):not([class*="fc-"]):not([class*="text-"]):not(.btn-search-close),
.mod-skin-dark:not(.mod-skin-light) .modal-body a:not(.btn):not(.badge):not(.dropdown-item):not(.nav-link):not(.page-link):not(.navbar-brand):not(.card-title) { .mod-skin-dark:not(.mod-skin-light) .modal-body a:not(.btn):not(.badge):not(.dropdown-item):not(.nav-link):not(.page-link):not(.navbar-brand):not(.card-title) {
color: #ffffff; /*color: #ffffff;*/
/*color: var(--theme-primary-200);*/ } color: var(--theme-primary-200);
}
.mod-skin-dark:not(.mod-skin-light) .text-success { .mod-skin-dark:not(.mod-skin-light) .text-success {
color: var(--theme-success-300) !important; } color: var(--theme-success-300) !important; }
.mod-skin-dark:not(.mod-skin-light) .text-danger { .mod-skin-dark:not(.mod-skin-light) .text-danger {