[Frontend][系統監控] forge Model 電梯物件化調整 | 電梯順序調整 | [儀錶板] 上方四個Card資料顯示 | [系統監控] 頁面跳閃問題解決 | bajatest callback object 調整 | 建置 訂閱完成 callback | [ForntendWebApi] GetDeviceList 補上 priority

This commit is contained in:
dev01 2022-12-01 19:32:32 +08:00
parent 7391959286
commit 1236eaac9c
10 changed files with 442 additions and 189 deletions

View File

@ -9,8 +9,8 @@
<div class="p-3 bg-primary-300 rounded overflow-hidden position-relative text-white mb-g"> <div class="p-3 bg-primary-300 rounded overflow-hidden position-relative text-white mb-g">
<div class=""> <div class="">
<h3 class="display-4 d-block l-h-n m-0 fw-500"> <h3 class="display-4 d-block l-h-n m-0 fw-500">
21.5k 560
<small class="m-0 l-h-n">users signed up</small> <small class="m-0 l-h-n">今日用電量 kWH</small>
</h3> </h3>
</div> </div>
<i class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i> <i class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
@ -20,8 +20,8 @@
<div class="p-3 bg-warning-400 rounded overflow-hidden position-relative text-white mb-g"> <div class="p-3 bg-warning-400 rounded overflow-hidden position-relative text-white mb-g">
<div class=""> <div class="">
<h3 class="display-4 d-block l-h-n m-0 fw-500"> <h3 class="display-4 d-block l-h-n m-0 fw-500">
$10,203 6560
<small class="m-0 l-h-n">Visual Index Figure</small> <small class="m-0 l-h-n">昨日用電量</small>
</h3> </h3>
</div> </div>
<i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4" style="font-size: 6rem;"></i> <i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4" style="font-size: 6rem;"></i>
@ -69,8 +69,8 @@
<div class="p-3 bg-success-200 rounded overflow-hidden position-relative text-white mb-g"> <div class="p-3 bg-success-200 rounded overflow-hidden position-relative text-white mb-g">
<div class=""> <div class="">
<h3 class="display-4 d-block l-h-n m-0 fw-500"> <h3 class="display-4 d-block l-h-n m-0 fw-500">
- 103.72 9,218
<small class="m-0 l-h-n">Offset Balance Ratio</small> <small class="m-0 l-h-n">即時功率</small>
</h3> </h3>
</div> </div>
<i class="fal fa-lightbulb position-absolute pos-right pos-bottom opacity-15 mb-n5 mr-n6" style="font-size: 8rem;"></i> <i class="fal fa-lightbulb position-absolute pos-right pos-bottom opacity-15 mb-n5 mr-n6" style="font-size: 8rem;"></i>
@ -80,8 +80,8 @@
<div class="p-3 bg-info-200 rounded overflow-hidden position-relative text-white mb-g"> <div class="p-3 bg-info-200 rounded overflow-hidden position-relative text-white mb-g">
<div class=""> <div class="">
<h3 class="display-4 d-block l-h-n m-0 fw-500"> <h3 class="display-4 d-block l-h-n m-0 fw-500">
+40% 8,846
<small class="m-0 l-h-n">Product level increase</small> <small class="m-0 l-h-n">即時契約容量占比 kWH</small>
</h3> </h3>
</div> </div>
<i class="fal fa-globe position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4" style="font-size: 6rem;"></i> <i class="fal fa-globe position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4" style="font-size: 6rem;"></i>

View File

@ -3,9 +3,11 @@
background-color: #fff; background-color: #fff;
min-height: 520px; min-height: 520px;
} }
.elevator-table-wrapper { .elevator-table-wrapper {
padding: 0.8rem; padding: 0.8rem;
} }
table.elevator-build { table.elevator-build {
/*border: 1px double #000;*/ /*border: 1px double #000;*/
} }
@ -51,10 +53,10 @@
<div id="elevatorBlock" class="elevator"> <div id="elevatorBlock" class="elevator">
<div class="elevator-header"> <div class="elevator-header">
<div class="row m-0 align-items-center p-2 gap-3 btn-group btn-group-toggle"> <div class="row m-0 align-items-center p-2 gap-3 btn-group btn-group-toggle">
<button class="btn btn-secondary btn-sm" data-tabname="floShowType" data-target="#2dDiv"> <button class="btn btn-secondary btn-sm active" data-tabname="floShowType" data-target="#2dDiv">
2D 2D
</button> </button>
<button class="btn btn-secondary btn-sm active" data-tabname="floShowType" data-target="#3dDiv" onclick="show3D()"> <button class="btn btn-secondary btn-sm" data-tabname="floShowType" data-target="#3dDiv" onclick="show3D()">
3D 3D
</button> </button>
</div> </div>
@ -88,47 +90,7 @@
<!-- 中間卡片區 --> <!-- 中間卡片區 -->
<div class="col-7 my-3"> <div class="col-7 my-3">
<div id="eleCards" class="row"> <div id="eleCards" class="row">
<div class="card text-white bg-info mx-1 mb-3 col-4" style="max-width: 18rem">
<div type="button" class="card-body" data-toggle="modal" data-target="#card1">
<span class="d-flex">
<h5 class="card-title">號機別 : 1</h5>
<i class="fas fa-caret-up fa-3x ml-auto"></i>
</span>
<h4 class="d-flex justify-content-end">10F</h4>
<span class="d-flex">
<p class="card-text">狀態 : 運行中</p>
<i class="fas fa-caret-down fa-3x ml-auto animate__animated animate__flash animate__infinite animate__slower"></i>
</span>
</div>
</div>
<div class="card text-white bg-danger mx-1 mb-3 col-4" style="max-width: 18rem">
<div type="button" class="card-body">
<span class="d-flex">
<h5 class="card-title">號機別 : 2</h5>
<i class="fas fa-caret-up fa-3x ml-auto"></i>
</span>
<h4 class="d-flex justify-content-end">5F</h4>
<span class="d-flex">
<p class="card-text animate__animated animate__flash animate__infinite animate__slower">
狀態 : 維修
</p>
<i class="fas fa-caret-down fa-3x ml-auto"></i>
</span>
</div>
</div>
<div class="card text-white bg-info mx-1 mb-3 col-4" style="max-width: 18rem">
<div type="button" class="card-body">
<span class="d-flex">
<h5 class="card-title">號機別 : 3</h5>
<i class="fas fa-caret-up fa-3x ml-auto animate__animated animate__flash animate__infinite animate__slower"></i>
</span>
<h4 class="d-flex justify-content-end">3F</h4>
<span class="d-flex">
<p class="card-text">狀態 : 運行中</p>
<i class="fas fa-caret-down fa-3x ml-auto"></i>
</span>
</div>
</div>
</div> </div>
</div> </div>
<!-- End-中間卡片區 --> <!-- End-中間卡片區 -->
@ -893,6 +855,7 @@
</div> </div>
<script> <script>
var eleManTable = null; var eleManTable = null;
var allDevList = []; //每個設備 var allDevList = []; //每個設備
var subSeviceData = []; //每個設備訂閱點位值 var subSeviceData = []; //每個設備訂閱點位值
@ -901,6 +864,7 @@
var viewer3DNodeIds = [223, 228, 233]; var viewer3DNodeIds = [223, 228, 233];
var elev3DBind = {}; var elev3DBind = {};
var elev3DOption = {}; var elev3DOption = {};
var elev3DObj = [];
var subOrdPath = { var subOrdPath = {
"building_tag": pageAct.buiTag, "building_tag": pageAct.buiTag,
"system_tag": pageAct.sysMainTag, "system_tag": pageAct.sysMainTag,
@ -913,6 +877,7 @@
var global_emergency_alarm_device_number = []; var global_emergency_alarm_device_number = [];
var zoomToggle = 3; var zoomToggle = 3;
var isFirstLoad3D = true; var isFirstLoad3D = true;
var isFirstLoadSub = true;
$(function () { $(function () {
initChart(); initChart();
@ -950,8 +915,8 @@
if (allDevList.length == 0) { if (allDevList.length == 0) {
return false; return false;
} }
data.device_number = data.device_number_full;
let matchDevice = allDevList.filter(x => x.device_number?.split("_")[x.device_number?.split("_").length - 1] == data.device_number)[0]; let matchDevice = allDevList.filter(x => x.device_number == data.device_number)[0];
let master = matchDevice.device_number.split("_")[5]; let master = matchDevice.device_number.split("_")[5];
//狀態 //狀態
if (data.point_name == "ST") { if (data.point_name == "ST") {
@ -1007,30 +972,86 @@
// 電梯管理 不服務樓層 detail // 電梯管理 不服務樓層 detail
subDeviceSetEleManNotSerFloor(master); subDeviceSetEleManNotSerFloor(master);
}); });
myBaja.setSubscribeDeviceEndCallBack(function (data) {
let devNumArr = data.map(x => x.device_number_full).Distinct();
$.each(devNumArr, (idx, devNum) => {
let subData = subSeviceData.filter(x => x.device_number == devNum)[0];
if (subData) {
// 左側 3D 電梯 nodeID 與 device_number match
if (Object.keys(elev3DBind).indexOf(devNum) == -1) {
elev3DBind[devNum] = viewer3DNodeIds[Object.keys(elev3DBind).length];
}
// 左側 3D 電梯 Viewer Option 設置
/*elev3DOption.nodes = Object.keys(elev3DBind).map(x => elev3DBind[x]);*/
elev3DOption.nodeId = elev3DBind[devNum];
elev3DOption.floorHeight = floList.map((x) => { return { floor: x } });
elev3DOption.floorHeight.forEach((floObj, idx) => {
if (floObj.floor.startsWith("B")) {
let floor = parseInt(floObj.floor.split("B")[1].split("F")[0]);
floObj.height = floor * -13;
} else {
let floor = parseInt(floObj.floor.split("F")[0]);
if (floor == 1) {
floObj.height = 0;
} else if (floor == 2) {
floObj.height = 14.75;
} else {
floObj.height = (14.75 + ((floor - 2) * 9.75));
}
}
})
if (isFirstLoad3D == false && elev3DObj.length != 0) {
let elevObj = elev3DObj.filter(x => x.nodeId == elev3DBind[devNum])[0];
if (!elevObj.id) {
elevObj.id = devNum;
}
elevObj.obj = Object.assign(elevObj.obj, elev3DOption);
elevObj.obj.init(function () {
let frags = elevObj.obj.fragProxys.filter(x => x.nodeId == elev3DBind[devNum]);
frags.forEach((fragProxy) => {
fragProxy.frag.position.z = elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0;
fragProxy.frag.updateAnimTransform()
})
elevObj.obj.viewer.impl.sceneUpdated(true);
});
}
}
})
reloadEleManTable(setEleManTabDataFromBaja());
})
} }
// baja 訂閱 變更 電梯管理 Table // baja 訂閱 變更 電梯管理 Table
function setEleManTabDataFromBaja() { function setEleManTabDataFromBaja() {
let result = []; let result = [];
let masterList = allDevList.map(x => x.device_number.split("_")[5]).Distinct(); let masterList = allDevList.map(x => x.device_number.split("_")[5]).Distinct();
// Master(第六段) 區分 // Master(第六段) 區分
$.each(masterList, (idx, master) => { $.each(masterList, (idx, master) => {
debugger
let main = {}; let main = {};
// 匯入 Master 名稱` // 匯入 Master 名稱`
main.devName = master; main.devName = master;
let subData = subSeviceData.filter(x => x.device_number.split("_")[5] == master)[0]; let subData = subSeviceData.filter(x => x.device_number.split("_")[5] == master)[0];
if (subData) {
$.each(Object.keys(subData), (idx3, subKey) => { $.each(Object.keys(subData), (idx3, subKey) => {
if (subKey.startsWith("SP_FLS_")) { if (subKey.startsWith("SP_FLS_")) {
main[subKey] = subData[subKey]; main[subKey] = subData[subKey];
} }
}) })
}
main._rowType = "master"; main._rowType = "master";
result.push(main); result.push(main);
// 該 Master 底下的設備 // 該 Master 底下的設備
let devListByMaster = allDevList.filter(x => x.device_number.split("_")[5] == master); let devListByMaster = allDevList.filter(x => x.device_number.split("_")[5] == master);
$.each(devListByMaster, (idx2, devObj) => { $.each(devListByMaster, (idx2, devObj) => {
let subData = subSeviceData.filter(x => x.device_number == devObj.device_number)[0]; let subData = subSeviceData.filter(x => x.device_number == devObj.device_number)[0];
if (subData) {
main = {}; main = {};
main.devNum = devObj.device_number; main.devNum = devObj.device_number;
main.devName = devObj.full_name; main.devName = devObj.full_name;
@ -1041,6 +1062,7 @@
}) })
// 匯入設備資訊(訂閱點位) // 匯入設備資訊(訂閱點位)
result.push(main); result.push(main);
}
}) })
}) })
return result; return result;
@ -1075,11 +1097,13 @@
elevObj.setElevFloor(matchDevice.device_number, subData["CP"]); elevObj.setElevFloor(matchDevice.device_number, subData["CP"]);
} }
// 左側 3D 電梯 nodeID 與 device_number match if (isFirstLoad3D == false && elev3DObj.length != 0) {
if (Object.keys(elev3DBind).indexOf(matchDevice.device_number) == -1) { let elevObj = elev3DObj.filter(x => x.nodeId == elev3DBind[devNum])[0];
elev3DBind[matchDevice.device_number] = viewer3DNodeIds[elev3DBind.length]; if (elevObj && elevObj.id) {
elevObj.obj.setElevatorFloor(subData["CP"])
elevObj.obj.movElevator();
}
} }
elevObj.setEleMovStatus(matchDevice.device_number, subData["RD"] == "UP" ? 1 : subData["RD"] == "DOWN" ? 2 : 0); elevObj.setEleMovStatus(matchDevice.device_number, subData["RD"] == "UP" ? 1 : subData["RD"] == "DOWN" ? 2 : 0);
//現在樓層 //現在樓層
@ -1126,19 +1150,21 @@
} else { } else {
let strHtml = ``; let strHtml = ``;
let masterArr = []; let masterArr = [];
let masDiv = "";
$("#eleCards").html("");
$.each(res.data, (index, floObj) => { $.each(res.data, (index, floObj) => {
let masters = floObj.device_list.map(x => x.device_number?.split("_")[5]).Distinct();
$.each(floObj.device_list, (index2, devObj) => { $.each(masters, (idx, master) => {
let masDiv = creDiv(["col-12","row","m-0","gap-5"]);
masDiv.append(creEle("h2", master, null, null,["col-12","p-0"]));
strHtml = ``;
floObj.device_list.filter(x => x.device_number?.split("_")[5] == master).forEach((devObj) => {
allDevList.push(devObj); allDevList.push(devObj);
if (masterArr.indexOf(devObj?.device_number?.split("_")[5]) == -1) { allDevList = allDevList.oSort("priority")
let master = devObj?.device_number?.split("_")[5]; masDiv.append($(`<div id="${devObj.device_number}_card" class="card dev-card text-white mb-3 col-4 " name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" data-name="${devObj.full_name}" style="max-width: 18rem;">
masDiv = creDiv(["col-12"]);
masDiv.append(creEle("h2", master, null, null))
masterArr.push(master);
}
strHtml += `<div id="${devObj.device_number}_card" class="card dev-card text-white mb-3 col-4 " name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" data-name="${devObj.full_name}" style="max-width: 18rem;">
<div type="button" class="card-body"> <div type="button" class="card-body">
<span class="d-flex"> <span class="d-flex">
<h5 class="card-title">號機別 : ${devObj.full_name}</h5> <h5 class="card-title">號機別 : ${devObj.full_name}</h5>
@ -1150,11 +1176,13 @@
<i name="downFloArrow" class="fas fa-caret-down fa-3x ml-auto" style="--flash-color-1:#6fe560;--flash-color-2:#fff;"></i> <i name="downFloArrow" class="fas fa-caret-down fa-3x ml-auto" style="--flash-color-1:#6fe560;--flash-color-2:#fff;"></i>
</span> </span>
</div> </div>
</div>`; </div>`));
masDiv.append(strHtml)
}) })
$("#eleCards").append(masDiv);
})
}) })
$("#eleCards").html(masDiv);
initPopover(); initPopover();
//平面圖載入 //平面圖載入
chartHandler(`${baseImgUrl}/upload/floor_map/${res.data[0].floor_map_name}`); chartHandler(`${baseImgUrl}/upload/floor_map/${res.data[0].floor_map_name}`);
@ -1272,7 +1300,6 @@
// 電梯管理 Modal - 資料更新 // 電梯管理 Modal - 資料更新
function reloadEleManTable(datas) { function reloadEleManTable(datas) {
let tabCols = eleManTable.context[0].aoColumns.map(x => x.data); let tabCols = eleManTable.context[0].aoColumns.map(x => x.data);
$.each(datas, (idx, data) => { $.each(datas, (idx, data) => {
$.each(tabCols, (idx2, value) => { $.each(tabCols, (idx2, value) => {
@ -2346,22 +2373,49 @@
//載入3D模型 //載入3D模型
function load3DModel() { function load3DModel() {
let option = { debugger
nodes: [223, 228, 233],
element: "#forgeViewer", launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dGEzaHFzZmZ6cWJub3V4a3BsZGt1a3NldzRzajIxdzUtYmltc19tb2RlbHMvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDLm53ZA==', (viewer) => {
floorHeight: [ $.each(viewer3DNodeIds, function (idx, node) {
{ floor: 1, height: 15 }, let options = {
{ floor: 2, height: 24.5 }, element: $("#forgeViewer"),
{ floor: 3, height: 34 }, viewer: viewer,
] nodeId: node,
floorHeight: elev3DOption.floorHeight ?? [],
inited: function () {
}
}
let elevator3DObj = new elevator3D(options);
let devNum = Object.keys(elev3DBind).filter(x => elev3DBind[x] == node)[0];
let subData = subSeviceData.filter(x => x.device_number == devNum)[0];
if (elev3DObj.filter(x => x.nodeId == node).length == 0) {
elev3DObj.push({ id: devNum, nodeId: node, obj: elevator3DObj });
} }
if (subData) {
let elevObj = elev3DObj.filter(x => x.nodeId == node)[0];
if (!elevObj.id) {
elevObj.id = devNum;
}
elevObj.obj = Object.assign(elevObj, elevator3DObj ?? {})
elevObj.obj.init(function () {
let frags = elevObj.obj.fragProxys.filter(x => x.nodeId == node);
frags.forEach((fragProxy) => {
fragProxy.frag.position.z = elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0;
fragProxy.frag.updateAnimTransform()
})
elevObj.obj.viewer.impl.sceneUpdated(true);
})
launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dGEzaHFzZmZ6cWJub3V4a3BsZGt1a3NldzRzajIxdzUtYmltc19tb2RlbHMvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDLm53ZA==', option, () => {
console.log($("#forgeViewer")) }
let elevator = $("#forgeViewer")[0]._elevator3D[0]; })
elevator.obj.setElevatorFloor(3)
elevator.obj.movElevator() //let elevator = elev3DObj[0];
//elevator.obj.setElevatorFloor(3)
//elevator.obj.movElevator()
//setElevatorSpeed(0.2) //setElevatorSpeed(0.2)
//setElevatorFloor(2) //setElevatorFloor(2)
//requestAnimationFrame(movElevator); //requestAnimationFrame(movElevator);

View File

@ -151,7 +151,7 @@
// Card 即時狀態 // Card 即時狀態
function drawStateTabBlo() { function drawStateTabBlo() {
let strHtml = `<div style="height:15rem"> let strHtml = `<div style="height:15rem">
<iframe src="http://localhost:8080/ord?station:%7Cslot:/TPE/B1/EE/E4/R2F/NA/WHT/N1|view:?fullScreen=true" width="100%" height="100%"></iframe> <iframe src="/ord?station:%7Cslot:/TPE/B1/EE/E4/R2F/NA/WHT/N1|view:?fullScreen=true" width="100%" height="100%"></iframe>
</div>` </div>`
return strHtml; return strHtml;
} }

View File

@ -402,6 +402,18 @@ input.toggle:checked {
gap: 5px; gap: 5px;
} }
.gap-6 {
gap: 6px;
}
.gap-7 {
gap: 7px;
}
.gap-8 {
gap: 8px;
}
/* vertical-align */ /* vertical-align */
.va-t { .va-t {
vertical-align: top; vertical-align: top;

View File

@ -2708,7 +2708,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
//事件先行讀取 //事件先行讀取
function loadEvent() { function loadEvent() {
onEvent("click", "[name=topFunBtn]", function () { onEvent("click", "[name=topFunBtn]", function () {
_ytTabInited = []
let page = $(this).data("page"); let page = $(this).data("page");
if (page != "systemMonitor") { if (page != "systemMonitor") {
@ -2720,6 +2720,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
sub.unsubscribeAll(); sub.unsubscribeAll();
sub.detach(); sub.detach();
}) })
$("#app").load(`_${page}.html`, loadCallback); $("#app").load(`_${page}.html`, loadCallback);
}) })
@ -2761,6 +2762,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
// Card - 基本資料 Table // Card - 基本資料 Table
function drawInfoTabBlo(devGuid) { function drawInfoTabBlo(devGuid) {
let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`); let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`);
let tbody = tabEle.append("<tbody>"); let tbody = tabEle.append("<tbody>");
let columnNames = ["設備編號", "設備名稱"]; let columnNames = ["設備編號", "設備名稱"];
@ -2861,6 +2863,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
// Card - 運維紀錄 Table // Card - 運維紀錄 Table
function loadOpeRecTable(devGuid) { function loadOpeRecTable(devGuid) {
let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid; let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;
let tag = "#opeRecTable"; let tag = "#opeRecTable";

View File

@ -49,7 +49,7 @@ var elevatorSpeed;
// sensorVals[i] = Math.random(); // sensorVals[i] = Math.random();
// } // }
function launchViewer(urn, eleOption ,callback) { function launchViewer(urn, callback) {
var options = { var options = {
env: 'AutodeskProduction', env: 'AutodeskProduction',
getAccessToken: getForgeToken getAccessToken: getForgeToken
@ -61,12 +61,10 @@ function launchViewer(urn, eleOption ,callback) {
viewer.start(); viewer.start();
var documentId = 'urn:' + urn; var documentId = 'urn:' + urn;
Autodesk.Viewing.Document.load(documentId, function (doc) { Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
onDocumentLoadSuccess(doc, eleOption);
}, onDocumentLoadFailure);
$("#forgeViewer").on("autodesk:loaded", function () { $("#forgeViewer").on("autodesk:loaded", function () {
callback ? callback() : ""; callback ? callback(viewer) : "";
}) })
@ -139,7 +137,7 @@ class elevator3D {
this.init(); this.init();
} }
setTreeFrag = function () { setTreeFrag = function (callback) {
let tree = this.viewer.model.getData().instanceTree; let tree = this.viewer.model.getData().instanceTree;
let nodeId = this.nodeId; let nodeId = this.nodeId;
//tree.enumNodeChildren(nodeId, (node) => { //tree.enumNodeChildren(nodeId, (node) => {
@ -155,34 +153,44 @@ class elevator3D {
// }); // });
//}) //})
if (nodeId) {
let childCnt = tree.getChildCount(nodeId);
let curIdx = 1;
this.fragProxys.filter(x => x.nodeId == nodeId).forEach((x) => {
let idx = this.fragProxys.indexOf(x);
this.fragProxys.splice(idx,1);
})
tree.enumNodeFragments(nodeId, (frag) => { tree.enumNodeFragments(nodeId, (frag) => {
let fragProxy = this.viewer.impl.getFragmentProxy(this.viewer.model, frag); let fragProxy = this.viewer.impl.getFragmentProxy(this.viewer.model, frag);
this.fragProxy = fragProxy;
this.fragProxys.push({ nodeId: nodeId, frag: fragProxy });
this.fragProxy.getAnimTransform(); this.fragProxys.push({ nodeId: nodeId, fragId: frag, frag: fragProxy });
fragProxy.getAnimTransform();
let fragPosition = new THREE.Vector3(0, 0, 0);// 一樓0 二樓15 三樓 26 let fragPosition = new THREE.Vector3(0, 0, 0);// 一樓0 二樓15 三樓 26
this.fragProxy.position = fragPosition; fragProxy.position = fragPosition;
this.fragProxy.updateAnimTransform(); fragProxy.updateAnimTransform();
if (childCnt == curIdx) {
this.initCallback ? this.initCallback() : "";
callback ? callback() : "";
}
curIdx++;
}, true); }, true);
}
this.viewer.impl.sceneUpdated(true); this.viewer.impl.sceneUpdated(true);
if (typeof $(this.ele)[0]._elevator3D == "undefined") { if (typeof $(this.ele)[0]._elevator3D == "undefined") {
$(this.ele)[0]._elevator3D = []; $(this.ele)[0]._elevator3D = [];
} }
$(this.ele)[0]._elevator3D.push({ nodeId: nodeId, obj: this }); $(this.ele)[0]._elevator3D.push({ nodeId: nodeId, obj: this });
this.initCallback ? this.initCallback() : "";
} }
init = function () { init = function (callback = null) {
this.setTreeFrag(); this.setTreeFrag(callback);
} }
setElevatorFloor = function (floor) { setElevatorFloor = function (floor) {
this.targetFloorZ = this.floorHeight.filter(x => x.floor == floor)[0].height; this.targetFloorZ = this.floorHeight.filter(x => x.floor == floor)[0]?.height ?? 0;
} }
setElevatorSpeed = function (speed) { //0.01 ~ 1 setElevatorSpeed = function (speed) { //0.01 ~ 1
@ -195,12 +203,15 @@ class elevator3D {
let nodeId = this.nodeId; let nodeId = this.nodeId;
let fragProxyZ = 0; let fragProxyZ = 0;
let movStatus = this.movStatus; // 0=no 1=up 2=down let movStatus = this.movStatus; // 0=no 1=up 2=down
let fragProxy = this.fragProxys.filter(x => x.nodeId == nodeId)[0]?.frag;
if (!fragProxy) {
return;
}
if (fragProxy.position.z > this.targetFloorZ) {
if (this.fragProxy.position.z > this.targetFloorZ) {
movStatus = 2 movStatus = 2
} }
else if (this.fragProxy.position.z < this.targetFloorZ) { else if (fragProxy.position.z < this.targetFloorZ) {
movStatus = 1 movStatus = 1
} }
@ -209,18 +220,18 @@ class elevator3D {
} }
tree.enumNodeFragments(nodeId, (frag) => { tree.enumNodeFragments(nodeId, (frag) => {
this.fragProxy = this.viewer.impl.getFragmentProxy(this.viewer.model, frag); let fragProxy = this.viewer.impl.getFragmentProxy(this.viewer.model, frag);
this.fragProxy.getAnimTransform(); fragProxy.getAnimTransform();
//let fragPosition = new THREE.Vector3(0, 0, 15);// 一樓0 二樓15 三樓 26 //let fragPosition = new THREE.Vector3(0, 0, 15);// 一樓0 二樓15 三樓 26
if (movStatus == 2) { if (movStatus == 2) {
this.fragProxy.position.z -= this.speed; fragProxy.position.z -= this.speed;
} }
else if (movStatus == 1) { else if (movStatus == 1) {
this.fragProxy.position.z += this.speed; fragProxy.position.z += this.speed;
} }
fragProxyZ = this.fragProxy.position.z; fragProxyZ = fragProxy.position.z;
this.fragProxy.updateAnimTransform() fragProxy.updateAnimTransform()
}, true); }, true);
this.viewer.impl.sceneUpdated(true); this.viewer.impl.sceneUpdated(true);
@ -269,25 +280,25 @@ function onDocumentLoadSuccess(doc,eleOption) {
//var allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex); //var allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
//var domElem = document.getElementById('all_id'); //var domElem = document.getElementById('all_id');
//domElem.innerText = allDbIdsStr; //domElem.innerText = allDbIdsStr;
let nodes = eleOption.nodes ?? []; //let nodes = eleOption.nodes ?? [];
let element = eleOption.element ?? ""; //let element = eleOption.element ?? "";
$(element)[0]._elevator3D = []; //$(element)[0]._elevator3D = [];
$.each(nodes, function (idx, node) { //$.each(nodes, function (idx, node) {
let options = { // let options = {
element: $(element), // element: $(element),
viewer: viewer, // viewer: viewer,
nodeId: node, // nodeId: node,
floorHeight: eleOption.floorHeight ?? [], // floorHeight: eleOption.floorHeight ?? [],
inited: function () { // inited: function () {
if (idx == nodes.length - 1) { // if (idx == nodes.length - 1) {
$(element).trigger("autodesk:loaded"); // $(element).trigger("autodesk:loaded");
} // }
} // }
} // }
let elevator3DObj = new elevator3D(options); // let elevator3DObj = new elevator3D(options);
})
//})
$("#forgeViewer").trigger("autodesk:loaded");
//let tree = viewer.model.getData().instanceTree; //let tree = viewer.model.getData().instanceTree;
//let nodeId = 10952; //let nodeId = 10952;
//console.log("tree", tree) //console.log("tree", tree)

View File

@ -1,4 +1,5 @@
let baja_subscribe_device_callback_func; //設定BQL訂閱之後要回傳的Function let baja_subscribe_device_callback_func; //設定BQL訂閱之後要回傳的Function
let baja_subscribe_end_device_callback_func; //設定BQL訂閱結束之後要回傳的Function
let baja_my_user_account_func; //取得帳號資料要回傳的Function let baja_my_user_account_func; //取得帳號資料要回傳的Function
var ordPath; //當前點選選單的tag用來抓出設備路徑例如:旅館棟->H消防偵煙器->F3 var ordPath; //當前點選選單的tag用來抓出設備路徑例如:旅館棟->H消防偵煙器->F3
window.tolSubList = []; window.tolSubList = [];
@ -16,6 +17,12 @@ function subscriptionDevices() {
baja_subscribe_device_callback_func = callBackFunc; baja_subscribe_device_callback_func = callBackFunc;
} }
} }
// BQL訂閱結束回傳的Function
this.setSubscribeDeviceEndCallBack = function (callBackFunc) {
if (callBackFunc != undefined && callBackFunc != null) {
baja_subscribe_end_device_callback_func = callBackFunc;
}
}
} }
@ -64,6 +71,7 @@ function BajaSubscribeDevicesByBql() {
var modify_target_device = { var modify_target_device = {
"device_number": target_device_number ? target_device_number : null, "device_number": target_device_number ? target_device_number : null,
"device_number_full": this.$parent.getSlotPath().$names.join("_"),
"point_name": point_name ? point_name : null, "point_name": point_name ? point_name : null,
"value": key "value": key
} }
@ -88,13 +96,14 @@ function BajaSubscribeDevicesByBql() {
var subStart, subFinish; var subStart, subFinish;
var component_index = 0; var component_index = 0;
var total_component_index = 0; var total_component_index = 0;
var totalTargetDevice = [];
var readBqlFinish = new Date(Date.now()); var readBqlFinish = new Date(Date.now());
// $("#readPath-finish-timestamp").html(readBqlFinish.toISOString()); // $("#readPath-finish-timestamp").html(readBqlFinish.toISOString());
// $("#readPath-finish-time").html((readBqlFinish.getTime() - init_start.getTime()) / 1000 + "sec"); // $("#readPath-finish-time").html((readBqlFinish.getTime() - init_start.getTime()) / 1000 + "sec");
console.log("讀取路徑完成-花費時間", (readBqlFinish.getTime() - init_start.getTime()) / 1000 + "sec"); console.log("讀取路徑完成-花費時間", (readBqlFinish.getTime() - init_start.getTime()) / 1000 + "sec");
table.cursor({ table.cursor({
before: function () { before: function () {
totalTargetDevice = [];
tableStart = new Date(Date.now()); tableStart = new Date(Date.now());
$("#table-start-timestamp").html(tableStart.toISOString()); $("#table-start-timestamp").html(tableStart.toISOString());
render_start = new Date(Date.now()); render_start = new Date(Date.now());
@ -108,6 +117,7 @@ function BajaSubscribeDevicesByBql() {
total_component_index = index; total_component_index = index;
var target_device_number_split = this.getDisplay("slotPath").split('/'); var target_device_number_split = this.getDisplay("slotPath").split('/');
var target_device_number = target_device_number_split[target_device_number_split.length - 2]; var target_device_number = target_device_number_split[target_device_number_split.length - 2];
//console.log(target_device_number); //console.log(target_device_number);
@ -133,10 +143,11 @@ function BajaSubscribeDevicesByBql() {
var modify_target_device = { var modify_target_device = {
"device_number": target_device_number ? target_device_number : null, "device_number": target_device_number ? target_device_number : null,
"device_number_full": this.getDisplay("slotPath").split("slot:")[1].split('/').slice(1,-1).join("_"),
"point_name": point_name ? point_name : null, "point_name": point_name ? point_name : null,
"value": key "value": key
} }
totalTargetDevice.push(modify_target_device);
//取得component當下就更新設備點位 //取得component當下就更新設備點位
if (baja_subscribe_device_callback_func != undefined && baja_subscribe_device_callback_func != null) { if (baja_subscribe_device_callback_func != undefined && baja_subscribe_device_callback_func != null) {
baja_subscribe_device_callback_func(modify_target_device); baja_subscribe_device_callback_func(modify_target_device);
@ -197,6 +208,10 @@ function BajaSubscribeDevicesByBql() {
tableFinish = new Date(Date.now()); tableFinish = new Date(Date.now());
// $("#table-finish-timestamp").html(tableFinish.toISOString()); // $("#table-finish-timestamp").html(tableFinish.toISOString());
// $("#table-time").html((tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec"); // $("#table-time").html((tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec");
//取得component當下就更新設備點位
if (baja_subscribe_end_device_callback_func != undefined && baja_subscribe_end_device_callback_func != null) {
baja_subscribe_end_device_callback_func(totalTargetDevice);
}
console.log("表格完成時間", (tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec"); console.log("表格完成時間", (tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec");
}, },
limit: -1, limit: -1,
@ -346,3 +361,159 @@ require(['baja!'], function (baja) {
// }) // })
//測試
/**
* 取得電表即時資料 by baja
* @param {any} devicePath
* @param {any} callback
*/
function getElectricMeterNoweDataByBaja(devicePath, callback) {
var _result = "";
var _ss = "";
var _index = 0;
require(['baja!'], function (baja) {//TPE/B1/EE/E4/R2F/NA/WHT/N1
console.log('local:|foxs:|station:|slot:/' + devicePath + '|bql:select name, out, out.value from control:ControlPoint');
//baja.Ord.make('local:|foxs:|station:|slot:/' + devicePath + '|bql:select name, out, out.value from control:ControlPoint').get()
baja.Ord.make('local:|foxs:|station:|slot:/TPE/B1/EE/E4/R2F/NA/WHT/N1|bql:select name, out, out.value from control:ControlPoint').get()
.then(function (table) {
return table.cursor({
each: function (record) {
if (_index == 0)
_ss += '{"name":"' + record.get('name') + '", "value":' + record.get('out').get('value') + '"}';
else
_ss += ',{"name":"' + record.get('name') + '", "value":' + record.get('out').get('value') + '"}';
_index++;
},
after: function () {
_result += '{' + '"count": ' + _index + ', "data":[';
_result += _ss;
_result += ']}';
if (typeof callback === 'function') {
callback(_result);
}
},
limit: -1,
offset: 0
});
});
});
}
/**
* 取得電表 單日kwh by baja
* @param {any} devicePath
* @param {any} date_millisecond
* @param {any} callback
*/
function getElectricMeterOneDayKwhByBaja(devicePath, date_millisecond, callback) {
var _result = "";
var _ss = "";
var _index = 0;
require(['baja!'], function (baja) {//TPE/B1/EE/E4/R2F/NA/WHT/N1
console.log('transform:slot:/' + devicePath + '/History/TR_Month|bql: select * where timestamp.millis = ' + date_millisecond);
baja.Ord.make('transform:slot:/TPE/B1/EE/E4/R2F/NA/WHT/N1/History/TR_Month|bql: select * where timestamp.millis <= 1667404799000').get()
.then(function (table) {
return table.cursor({
each: function (record) {
if (_index == 0) {
//_ss += '{"timestamp":"' + record.get('timestamp') + '", "kwh1":' + record.get('kwh1') + '"}';
_ss += '{"timestamp":"' + record.get('timestamp') + '"}';
}
else {
//_ss += ',{"timestamp":"' + record.get('timestamp') + '", "kwh1":' + record.get('kwh1') + '"}';
_ss += ',{"timestamp":"' + record.get('timestamp') + '"}';
}
_index++;
},
after: function () {
_result += '{' + '"count": ' + _index + ', "data":[';
_result += _ss;
_result += ']}';
if (typeof callback === 'function') {
callback(_result);
}
},
limit: -1,
offset: 0
});
});
});
}
/**
* 取得電表每小時資料 by baja
* @param {any} devicePath
* @param {any} startDate_millisecond
* @param {any} endDate_millisecond
* @param {any} callback
*/
function getElectricMeterHourDataByBaja(devicePath, startDate_millisecond, endDate_millisecond, callback) {
var _result = "";
var _ss = "";
var _index = 0;
require(['baja!'], function (baja) {//TPE/B1/EE/E4/R2F/NA/WHT/N1
console.log('transform:slot:/' + devicePath + '/History/TR_Daily|bql: select * where timestamp.millis > ' + startDate_millisecond + ' and timestamp.millis < ' + endDate_millisecond);
baja.Ord.make('transform:slot:/TPE/B1/EE/E4/R2F/NA/WHT/N1/History/TR_Daily|bql: select timestamp, kwh1 where timestamp.millis >= 1667232000000 and timestamp.millis <= 1667404799000').get()
.then(function (table) {
return table.cursor({
each: function (record) {
if (_index == 0)
_ss += '{"kwh1":' + record.get('kwh1') + ', "timestamp":"' + record.get('timestamp') + '"}';
else
_ss += ',{"kwh1":' + record.get('kwh1') + ', "timestamp":"' + record.get('timestamp') + '"}';
_index++;
},
after: function () {
_result += '{' + '"count": ' + _index + ', "data":[';
_result += _ss;
_result += ']}';
if (typeof callback === 'function') {
callback(_result);
}
},
limit: -1,
offset: 0
});
});
});
}
/**
* 在單一系統下取得各個系統的狀態 異常與否
* @param {any} systemPath
* @param {any} callback
*/
function getOneSystemStateByBaja(systemPath, callback) {
var _result = "";
var _ss = "";
var _index = 0;
require(['baja!'], function (baja) {
baja.Ord.make("local:|foxs:|alarm:|bql:select top 1 alarmData, alarmData.sourceName, sourceState where alarmData.sourceName like '%" + systemPath + "%' order by timestamp desc").get()
.then(function (table) {
return table.cursor({
each: function (record) {
//if (_index == 0)
// _ss += '{"sourceState":"' + record.get('sourceState') + '"}';
//else
// _ss += '{"sourceState":"' + record.get('sourceState') + '"}';
_ss += '{"sourceState":"' + record.get('sourceState') + '"}';
_index++;
},
after: function () {
_result += '{' + '"count": ' + _index + ', "data":[';
_result += _ss;
_result += ']}';
if (typeof callback === 'function') {
callback(_result);
}
},
limit: -1,
offset: 0
});
});
});
}

View File

@ -19,12 +19,13 @@ $(function () {
* 初始全頁面 yt tab * 初始全頁面 yt tab
* */ * */
function initTabsByEle() { function initTabsByEle() {
_ytTabInited = []; /*_ytTabInited = [];*/
$("[data-tabname][data-target]:not([data-tabrole=child])").each(function (index, value) { $("[data-tabname][data-target]:not([data-tabrole=child])").each(function (index, value) {
let tabName = $(value).data("tabname"); let tabName = $(value).data("tabname");
if (_ytTabInited.indexOf(tabName) == -1) {
var ytTab = new YT.Tab({ tabName: tabName }) var ytTab = new YT.Tab({ tabName: tabName })
_ytTabInited.push(tabName); _ytTabInited.push(tabName);
}
}) })
} }

View File

@ -226,7 +226,7 @@ namespace FrontendWebApi.ApiControllers
foreach (var f in fl) foreach (var f in fl)
{ {
List<DeviceLists> dl = new List<DeviceLists>(); List<DeviceLists> dl = new List<DeviceLists>();
sqlString = $@"select d.device_guid, d.full_name, d.device_coordinate, dk.device_image, d.device_number, CONCAT('{baseURL}', '{deviceKindFilePath}', dk.device_image) AS device_image_url,d.status, sqlString = $@"select d.device_guid, d.full_name, d.device_coordinate, d.priority, dk.device_image, d.device_number, CONCAT('{baseURL}', '{deviceKindFilePath}', dk.device_image) AS device_image_url,d.status,
dk.device_normal_point_id, dk.device_normal_point_guid, dk.device_normal_point_col, dk.device_normal_point_value, dk.device_normal_flashing, dk.device_normal_point_name, dk.device_normal_point_id, dk.device_normal_point_guid, dk.device_normal_point_col, dk.device_normal_point_value, dk.device_normal_flashing, dk.device_normal_point_name,
dk.device_close_point_id, dk.device_close_point_guid, dk.device_close_point_col, dk.device_close_point_value, dk.device_close_flashing, dk.device_close_point_name, dk.device_close_point_id, dk.device_close_point_guid, dk.device_close_point_col, dk.device_close_point_value, dk.device_close_flashing, dk.device_close_point_name,
dk.device_error_point_id, dk.device_error_point_guid, dk.device_error_point_col, dk.device_error_point_value, dk.device_error_flashing, dk.device_error_point_name dk.device_error_point_id, dk.device_error_point_guid, dk.device_error_point_col, dk.device_error_point_value, dk.device_error_flashing, dk.device_error_point_name

View File

@ -36,6 +36,7 @@ namespace FrontendWebApi.Models
public string device_coordinate { get; set; } public string device_coordinate { get; set; }
public string device_coordinate_3d { get; set; } public string device_coordinate_3d { get; set; }
public string status { get; set; } public string status { get; set; }
public int priority { get; set; }
public string device_status public string device_status
{ {
get get