[Frontend] forge 加入熱點、點燈、聚光燈，燈的開關，點擊熱點開起小視窗；測試wsp模型(取token)
This commit is contained in:
wanli
parent
e4a3cc9597
commit
a8ef4358ac
@ -31,7 +31,8 @@
|
|||||||
<button id="11F1oor" onclick="move11Floor()">11 Floor</button>
|
<button id="11F1oor" onclick="move11Floor()">11 Floor</button>
|
||||||
<button id="12F1oor" onclick="move12Floor()">12 Floor</button>
|
<button id="12F1oor" onclick="move12Floor()">12 Floor</button>
|
||||||
<button id="13F1oor" onclick="moveB1Floor()">B1 Floor</button>
|
<button id="13F1oor" onclick="moveB1Floor()">B1 Floor</button>
|
||||||
<input id="lightBar" type="range" min="0" max="100" step="5" onchange="changeLightPower()">亮度
|
<button type="button" class="btn btn-secondary" onclick="openOrCloseLight()">電源</button>
|
||||||
|
<!--<input id="lightBar" type="range" min="0" max="100" step="5" onchange="changeLightPower()">亮度-->
|
||||||
<!-- <input type="range">Main Axis</input> -->
|
<!-- <input type="range">Main Axis</input> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -39,6 +40,115 @@
|
|||||||
<div id="forgeViewer"></div>
|
<div id="forgeViewer"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="modal" id="hotspotModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
|
||||||
|
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<a class="nav-link py-3 px-4" id="pills-register-tab" data-toggle="pill" href="#pills-register" role="tab" aria-controls="pills-register" aria-selected="false">即時值</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<a class="nav-link py-3 px-4 active" id="pills-login-tab" data-toggle="pill" href="#pills-login" role="tab" aria-controls="pills-login" aria-selected="true">基本資料</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<a class="nav-link py-3 px-4" id="pills-alarm-tab" data-toggle="pill" href="#pills-alarm" role="tab" aria-controls="pills-alarm" aria-selected="false">異常</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<a class="nav-link py-3 px-4" id="pills-operation-tab" data-toggle="pill" href="#pills-operation" role="tab" aria-controls="pills-operation" aria-selected="false">運維</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="tab-content" id="pills-tabContent">
|
||||||
|
<div class="tab-pane fade" id="pills-register" role="tabpanel" aria-labelledby="pills-register-tab">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="loginModalLabel">即時值資訊</h5>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form>
|
||||||
|
<div class="form-group">
|
||||||
|
<input id="lightBar" type="range" min="0" max="100" step="1" onchange="changeLightPower()">明亮度
|
||||||
|
<!--<button type="button" class="btn btn-secondary" onclick="openOrCloseLight()">電源</button>-->
|
||||||
|
</div>
|
||||||
|
<!--<div class="form-group">
|
||||||
|
<label for="register-recipient-name" class="col-form-label">訂閱時間:</label>
|
||||||
|
<label class="col-form-label">100</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="register-pwd-text" class="col-form-label">執行時間:</label>
|
||||||
|
<label class="col-form-label">200</label>
|
||||||
|
</div>-->
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeHotspotModal()">返回</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-pane fade" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="loginModalLabel">基本資料</h5>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="login-recipient-name" class="col-form-label">設備名稱:</label>
|
||||||
|
<label class="col-form-label" id="deviceName"></label>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="login-message-text" class="col-form-label">DBID:</label>
|
||||||
|
<label class="col-form-label" id="deviceDbid"></label>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="login-message-text" class="col-form-label">位置:</label>
|
||||||
|
<label class="col-form-label" id="devicePosition"></label>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeHotspotModal()">返回</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-pane fade" id="pills-alarm" role="tabpanel" aria-labelledby="pills-alarm-tab">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="loginModalLabel">異常資訊</h5>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="alarm-recipient-name" class="col-form-label">異常狀況:</label>
|
||||||
|
<label class="col-form-label" id="alarmStatus"></label>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeHotspotModal()">返回</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-pane fade" id="pills-operation" role="tabpanel" aria-labelledby="pills-operation-tab">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="loginModalLabel">運維資訊</h5>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="operation-recipient-name" class="col-form-label">運維人員:</label>
|
||||||
|
<label class="col-form-label" id="operationStatus"></label>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeHotspotModal()">返回</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!--Base JS-->
|
<!--Base JS-->
|
||||||
@ -64,12 +174,19 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script >
|
<script>
|
||||||
|
var curLightIsOpen = true;
|
||||||
|
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDLm53ZA');
|
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDLm53ZA');
|
||||||
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dGEzaHFzZmZ6cWJub3V4a3BsZGt1a3NldzRzajIxdzUtYmltc19tb2RlbHMvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDMjAyMjEyMDEubndk');
|
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dGEzaHFzZmZ6cWJub3V4a3BsZGt1a3NldzRzajIxdzUtYmltc19tb2RlbHMvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDMjAyMjEyMDEubndk');
|
||||||
launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MCVFNSU4RiVCMCVFNSU4QyU5NyVFNCVCOCVBRCVFOCU4RiVCMSVFNSVBNCVBNyVFNiVBOCU5MyVFMyU4MCU5MUFSQ18yMDIyMTIwNS5ud2Q');
|
|
||||||
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MCVFNSU4RiVCMCVFNSU4QyU5NyVFNCVCOCVBRCVFOCU4RiVCMSVFNSVBNCVBNyVFNiVBOCU5MyVFMyU4MCU5MUFSQ18yMDIyMTIwNS5ud2Q');
|
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MCVFNSU4RiVCMCVFNSU4QyU5NyVFNCVCOCVBRCVFOCU4RiVCMSVFNSVBNCVBNyVFNiVBOCU5MyVFMyU4MCU5MUFSQ18yMDIyMTIwNS5ud2Q');
|
||||||
|
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MCVFNSU4RiVCMCVFNSU4QyU5NyVFNCVCOCVBRCVFOCU4RiVCMSVFNSVBNCVBNyVFNiVBOCU5MyVFMyU4MCU5MUFSQ18yMDIyMTIwNS5ud2Q');
|
||||||
|
launchViewer('dXJuOmFkc2sud2lwcHJvZDpmcy5maWxlOnZmLmJ1NzRfMG9kUW1XWUlXWGI2bFBQemc_dmVyc2lvbj02');//wsp
|
||||||
|
|
||||||
|
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxXzIwMjJfMTJfMTMubndk');//new ARC
|
||||||
|
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwTUVQJUUzJTgwJTkxXzIwMjJfMTJfMTMubndj');//new MEP
|
||||||
|
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxJUU1JTg1JUE4JUU2JUEzJTlGXzIwMjJfMTJfMTMubndj');//全棟 ARC
|
||||||
});
|
});
|
||||||
function move1Floor() {
|
function move1Floor() {
|
||||||
setElevatorSpeed(0.2);
|
setElevatorSpeed(0.2);
|
||||||
@ -151,12 +268,25 @@
|
|||||||
|
|
||||||
function changeLightPower() {
|
function changeLightPower() {
|
||||||
var value = document.getElementById('lightBar').value;
|
var value = document.getElementById('lightBar').value;
|
||||||
console .log("power: " + value);
|
console.log("power: " + value);
|
||||||
setLightPower(value);
|
setLightPower(value);
|
||||||
}
|
}
|
||||||
|
|
||||||
</script >
|
function openOrCloseLight() {
|
||||||
|
if (curLightIsOpen) {
|
||||||
|
curLightIsOpen = false;
|
||||||
|
setLightOpenOrClose(curLightIsOpen);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
curLightIsOpen = true;
|
||||||
|
setLightOpenOrClose(curLightIsOpen);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
</body >
|
</body>
|
||||||
</html >
|
</html >
|
||||||
|
|||||||
7
Frontend/img/forge/hotspot.svg
Normal file
7
Frontend/img/forge/hotspot.svg
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
|
||||||
|
<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
|
||||||
|
<g><path d="M956.7,696.7L556.4,555.4c-14.6-5.2-22.1,2-16.6,15.8l150.4,379.4c5.5,13.8,15.4,14.2,22,0.8c0,0,36.8-74.8,69.6-122.3l97.8,95.4c9.3,9.1,24.7,9.3,34.3,0.4l22.8-21.3c9.5-8.9,9.7-23.6,0.4-32.7l-97.7-95.4c48-29,117.9-58.5,117.9-58.5C971.6,710.9,971.3,701.8,956.7,696.7z"/><path d="M846.5,169.1c-191.4-182.7-501.6-182.7-693,0c-191.4,182.7-191.4,479,0,661.8c106.7,101.9,250.3,147,389.7,135.2l-18.3-65.3c-116,6.8-234.4-32.1-323-116.7c-164-156.6-164-410.6,0-567.2c164-156.6,430-156.6,594,0c92.8,88.7,133.1,208.5,120.9,324.2l69.4,17.8C1004.4,420.4,957.9,275.5,846.5,169.1z"/><path d="M744.3,266.2C608,136,387,136,250.7,266.2c-136.3,130.2-136.3,341.2,0,471.4c70.4,67.3,163.4,99.7,255.7,97.5l-18.7-66.7c-68.2-2.3-135.6-28.2-187.6-77.9c-109-104.1-109-273,0-377.1c109-104.1,285.8-104.1,394.9,0c55.4,53,82.7,122.6,81.8,192l69.1,17.7C852,430.8,818.1,336.6,744.3,266.2z"/></g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -3,8 +3,11 @@ let fragProxy;
|
|||||||
var targetFloorZ;
|
var targetFloorZ;
|
||||||
var elevatorSpeed;
|
var elevatorSpeed;
|
||||||
var allDbIdsStr;
|
var allDbIdsStr;
|
||||||
|
let bulbLight;//點燈
|
||||||
|
let spotLight;//聚光燈
|
||||||
|
|
||||||
function launchViewer(urn) {
|
function launchViewer(urn) {
|
||||||
|
var av = Autodesk.Viewing;
|
||||||
var options = {
|
var options = {
|
||||||
env: 'AutodeskProduction',
|
env: 'AutodeskProduction',
|
||||||
getAccessToken: getForgeToken
|
getAccessToken: getForgeToken
|
||||||
@ -15,8 +18,14 @@ function launchViewer(urn) {
|
|||||||
//viewer = new Autodesk.Viewing.Viewer3D(document.getElementById('forgeViewer'));//沒有工具列
|
//viewer = new Autodesk.Viewing.Viewer3D(document.getElementById('forgeViewer'));//沒有工具列
|
||||||
viewer.start();
|
viewer.start();
|
||||||
var documentId = 'urn:' + urn;
|
var documentId = 'urn:' + urn;
|
||||||
|
|
||||||
|
viewer.addEventListener(av.GEOMETRY_LOADED_EVENT, addHotPoint, {
|
||||||
|
once: true,
|
||||||
|
});
|
||||||
|
|
||||||
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
|
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -122,8 +131,9 @@ function onDocumentLoadSuccess(doc) {
|
|||||||
|
|
||||||
viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () {
|
viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () {
|
||||||
var instanceTree = viewer.model.getData().instanceTree;
|
var instanceTree = viewer.model.getData().instanceTree;
|
||||||
allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
|
|
||||||
var domElem = document.getElementById('all_id');
|
var domElem = document.getElementById('all_id');
|
||||||
|
allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
|
||||||
domElem.innerText = allDbIdsStr;
|
domElem.innerText = allDbIdsStr;
|
||||||
|
|
||||||
//parseInt(allDbIdsStr[i]
|
//parseInt(allDbIdsStr[i]
|
||||||
@ -147,48 +157,191 @@ function onDocumentLoadSuccess(doc) {
|
|||||||
var tagId = 0;
|
var tagId = 0;
|
||||||
var _parentId = 0;
|
var _parentId = 0;
|
||||||
var _childId = 0;
|
var _childId = 0;
|
||||||
//var childIdArr = new Array();
|
var itemName = '';
|
||||||
|
var childIdArr = new Array();
|
||||||
let evelMap = new Map();
|
let evelMap = new Map();
|
||||||
|
|
||||||
|
let tree = viewer.model.getData().instanceTree;
|
||||||
|
const model = viewer.model;
|
||||||
|
const fragList = model.getFragmentList();
|
||||||
|
|
||||||
|
//allDbIdsStr.forEach((dbId) => {
|
||||||
|
// curDbId = parseInt(dbId);
|
||||||
|
// viewer.getProperties(curDbId, function (e) {
|
||||||
|
// e.properties.forEach(function (item) {
|
||||||
|
// if (item.displayName == "tag_id" && e.name == "【電梯】") {
|
||||||
|
|
||||||
|
// //getFragmentWorldMatrixByNodeId(e.dbId, viewer);
|
||||||
|
// //let fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
|
||||||
|
|
||||||
|
// tree.enumNodeFragments(e.dbId, function (frag) {
|
||||||
|
|
||||||
|
// let fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
|
||||||
|
// let matrix = new THREE.Matrix4();
|
||||||
|
// console.log("proxy: " + fragProxy.position);
|
||||||
|
|
||||||
|
// fragProxy.getWorldMatrix(matrix);
|
||||||
|
|
||||||
|
// });
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// tagId = e.dbId;
|
||||||
|
// viewer.getProperties(tagId, function (e2) {
|
||||||
|
// e2.properties.forEach(function (item2) {
|
||||||
|
// if (item2.displayName == "child") {
|
||||||
|
// _parentId = item2.displayValue;
|
||||||
|
|
||||||
|
// viewer.getProperties(_parentId, function (e3) {
|
||||||
|
// let itemMap = new Map();
|
||||||
|
// e3.properties.forEach(function (item3) {
|
||||||
|
// if (item3.displayName == "child") {
|
||||||
|
// _childId = item3.displayValue;
|
||||||
|
// childIdArr.push(_childId);
|
||||||
|
|
||||||
|
// var n = 0;
|
||||||
|
// viewer.getProperties(childIdArr[n], function (e5) {
|
||||||
|
// e5.properties.forEach(function (item5) {
|
||||||
|
// if (item5.displayName == "Name") {
|
||||||
|
// itemName = item5.displayValue;
|
||||||
|
// itemMap.set(childIdArr[0], itemName)
|
||||||
|
// console.log("childIdArr[0] ", childIdArr[0])
|
||||||
|
// console.log("item name: ", itemName);
|
||||||
|
// n += 3;
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// })
|
||||||
|
|
||||||
|
// n = 1;
|
||||||
|
// viewer.getProperties(childIdArr[n], function (e6) {
|
||||||
|
// e6.properties.forEach(function (item6) {
|
||||||
|
// if (item6.displayName == "Name") {
|
||||||
|
// itemName = item6.displayValue;
|
||||||
|
// itemMap.set(childIdArr[1], itemName)
|
||||||
|
// console.log("childIdArr[1] ", childIdArr[1])
|
||||||
|
// console.log("item name: ", itemName);
|
||||||
|
// n += 3;
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// })
|
||||||
|
|
||||||
|
// n = 2;
|
||||||
|
// viewer.getProperties(childIdArr[n], function (e7) {
|
||||||
|
// e7.properties.forEach(function (item7) {
|
||||||
|
// if (item7.displayName == "Name") {
|
||||||
|
// itemName = item7.displayValue;
|
||||||
|
// itemMap.set(childIdArr[2], itemName)
|
||||||
|
// console.log("childIdArr[2] ", childIdArr[2])
|
||||||
|
// console.log("item name: ", itemName);
|
||||||
|
// n += 3;
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// })
|
||||||
|
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// evelMap.set(item.displayValue, itemMap)
|
||||||
|
// })
|
||||||
|
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
// })
|
||||||
|
|
||||||
|
//})
|
||||||
|
|
||||||
allDbIdsStr.forEach((dbId) => {
|
allDbIdsStr.forEach((dbId) => {
|
||||||
curDbId = parseInt(dbId);
|
curDbId = parseInt(dbId);
|
||||||
viewer.getProperties(curDbId, function (e) {
|
viewer.getProperties(curDbId, function (e) {
|
||||||
e.properties.forEach(function (item) {
|
e.properties.forEach(function (item) {
|
||||||
if (item.displayName == "tag_id" && e.name == "【電梯】") {
|
if (item.displayName == "Tag_name") { // Tag_name tag_id 【tag_id】
|
||||||
|
if (item.displayValue != "") {
|
||||||
tagId = e.dbId;
|
console.log("Tag_name dbid: " + e.dbId);
|
||||||
viewer.getProperties(tagId, function (e2) {
|
console.log("value: " + item.displayValue);
|
||||||
e2.properties.forEach(function (item2) {
|
//var v = getFragmentWorldMatrixByNodeId(e.dbId, viewer);
|
||||||
if (item2.displayName == "child") {
|
//console.log("v: " + v);
|
||||||
_parentId = item2.displayValue;
|
|
||||||
|
|
||||||
viewer.getProperties(_parentId, function (e3) {
|
|
||||||
var childIdArr = new Array();
|
|
||||||
|
|
||||||
e3.properties.forEach(function (item3) {
|
|
||||||
if (item3.displayName == "child") {
|
|
||||||
_childId = item3.displayValue;
|
|
||||||
childIdArr.push(_childId);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
evelMap.set(item.displayValue, childIdArr)
|
|
||||||
console.log("map: " + evelMap);
|
|
||||||
})
|
|
||||||
|
|
||||||
}
|
|
||||||
});
|
//tree.enumNodeFragments(e.dbId, function (frag) {
|
||||||
})
|
// fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
|
||||||
|
// fragProxy.getAnimTransform();
|
||||||
|
// console.log("postion: " + fragProxy.position + ", fragP: " + fragProxy.fragPosition);
|
||||||
|
//});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
let bounds = new THREE.Box3();
|
||||||
|
|
||||||
|
instanceTree.enumNodeFragments(e.dbId, (fragId) => {
|
||||||
|
let box = new THREE.Box3();
|
||||||
|
fragList.getWorldBounds(fragId, box);
|
||||||
|
bounds.union(box);
|
||||||
|
}, true);
|
||||||
|
var position = bounds.center();
|
||||||
|
console.log("position: (" + position.x + ", " + position.y + ", " + position.z + ")");
|
||||||
|
}
|
||||||
|
//getFragmentWorldMatrixByNodeId(e.dbId, viewer);
|
||||||
|
//let fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
//---------------------- end ---------------------------------------------------
|
//---------------------- end ---------------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//var curDbId = 0;
|
||||||
|
//var tagId = 0;
|
||||||
|
//var _parentId = 0;
|
||||||
|
//var _childId = 0;
|
||||||
|
////var childIdArr = new Array();
|
||||||
|
//let evelMap = new Map();
|
||||||
|
|
||||||
|
//allDbIdsStr.forEach((dbId) => {
|
||||||
|
// curDbId = parseInt(dbId);
|
||||||
|
// viewer.getProperties(curDbId, function (e) {
|
||||||
|
// e.properties.forEach(function (item) {
|
||||||
|
// if (item.displayName == "tag_id" && e.name == "【電梯】") {
|
||||||
|
|
||||||
|
// tagId = e.dbId;
|
||||||
|
// viewer.getProperties(tagId, function (e2) {
|
||||||
|
// e2.properties.forEach(function (item2) {
|
||||||
|
// if (item2.displayName == "child") {
|
||||||
|
// _parentId = item2.displayValue;
|
||||||
|
|
||||||
|
// viewer.getProperties(_parentId, function (e3) {
|
||||||
|
// var childIdArr = new Array();
|
||||||
|
|
||||||
|
// e3.properties.forEach(function (item3) {
|
||||||
|
// if (item3.displayName == "child") {
|
||||||
|
// _childId = item3.displayValue;
|
||||||
|
// childIdArr.push(_childId);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// evelMap.set(item.displayValue, childIdArr)
|
||||||
|
// console.log("map: " + evelMap);
|
||||||
|
// })
|
||||||
|
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
// })
|
||||||
|
|
||||||
|
//})
|
||||||
|
|
||||||
|
|
||||||
let tree = viewer.model.getData().instanceTree;
|
//let tree = viewer.model.getData().instanceTree;
|
||||||
let nodeId = 12112;//12104; //749; //10952;
|
let nodeId = 12112;//12104; //749; //10952;
|
||||||
let nodeId2 = 12111;//12105; //750;
|
let nodeId2 = 12111;//12105; //750;
|
||||||
let nodeId3 = 12110;//12104; //751;
|
let nodeId3 = 12110;//12104; //751;
|
||||||
@ -271,9 +424,164 @@ function onDocumentLoadSuccess(doc) {
|
|||||||
//};
|
//};
|
||||||
|
|
||||||
|
|
||||||
//NOP_VIEWER.getProperties(NOP_VIEWER.getSelection(), data => console.log(data));
|
//加入點燈光
|
||||||
|
//bulbLight = new THREE.PointLight(0xffffff, 1, 1, 2);//0xff0000
|
||||||
|
//bulbLight.position.set(-17.33, 51.03, -2.52);//17.880840301513672
|
||||||
|
//bulbLight.castShadow = true;
|
||||||
|
//bulbLight.intensity = 50;
|
||||||
|
//bulbLight.distance = 1;
|
||||||
|
//bulbLight.emissiveIntensity = bulbLight.intensity / Math.pow(0.02, 2.0);
|
||||||
|
//viewer.scene.add(bulbLight);
|
||||||
|
|
||||||
|
//聚光燈
|
||||||
|
spotLight = new THREE.SpotLight(0xffffff, 80, 10);//0xffffff
|
||||||
|
spotLight.position.set(-17.33, 51.03, -2.52);
|
||||||
|
spotLight.castShadow = true;
|
||||||
|
spotLight.visible = true;
|
||||||
|
var geom = new THREE.BoxGeometry(); //create 幾何對象 -17.33, 51.03, -4.52
|
||||||
|
var material = new THREE.MeshLambertMaterial({ color: 0xff0000 });
|
||||||
|
var cube = new THREE.Mesh(geom, material);
|
||||||
|
cube.position.set(-17.33, 51.03, -10);//-4.52
|
||||||
|
viewer.scene.add(cube);
|
||||||
|
spotLight.target = cube;
|
||||||
|
viewer.scene.add(spotLight);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//------------------- 加入熱點 -----------------
|
||||||
|
async function addHotPoint(data) {
|
||||||
|
var viewer = data.target;
|
||||||
|
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
|
||||||
|
const DataVizCore = Autodesk.DataVisualization.Core;
|
||||||
|
const viewableType = Autodesk.DataVisualization.Core.ViewableType.SPRITE;//DataVizCore.ViewableType.SPRITE;
|
||||||
|
const spriteColor = new THREE.Color(0xffffff);
|
||||||
|
const spriteIcon = "/img/forge/hotspot.svg";
|
||||||
|
|
||||||
|
const style = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIcon);
|
||||||
|
|
||||||
|
//熱點 點擊事件註冊
|
||||||
|
viewer.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);
|
||||||
|
viewer.addEventListener(
|
||||||
|
Autodesk.Viewing.SELECTION_CHANGED_EVENT,
|
||||||
|
onSelectionChange
|
||||||
|
);
|
||||||
|
|
||||||
|
const viewableData = new DataVizCore.ViewableData();
|
||||||
|
viewableData.spriteSize = 24; // Sprites as points of size 24 x 24 pixels
|
||||||
|
|
||||||
|
const myDataList = [{ position: { x: -17.33, y: 51.03, z: -2.52 } }, { position: { x: -23.21, y: 51.03, z: -2.52 } }];
|
||||||
|
|
||||||
|
myDataList.forEach((myData, index) => {
|
||||||
|
const dbId = 10 + index;
|
||||||
|
const myPosition = myData.position;
|
||||||
|
const viewable = new DataVizCore.SpriteViewable(myPosition, style, dbId);
|
||||||
|
|
||||||
|
viewableData.addViewable(viewable);
|
||||||
|
});
|
||||||
|
|
||||||
|
await viewableData.finish();
|
||||||
|
dataVizExtn.addViewables(viewableData);
|
||||||
|
|
||||||
|
}
|
||||||
|
//------------------- end --------------
|
||||||
|
|
||||||
|
//---------------- 熱點點擊事件 --------------------
|
||||||
|
function onSpriteClicked(event) {
|
||||||
|
if (event != undefined && event != null) {
|
||||||
|
if (event.dbId == 10 || event.dbId == 11) {//event.dbId > 0 && event.dbId < 19
|
||||||
|
console.log(`Sprite clicked: ${event.dbId}`);
|
||||||
|
//alert("I am an alert box! " + event.dbId);
|
||||||
|
openHotspotModal();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (event.clickInfo != null) {
|
||||||
|
//document.getElementById('lbltipAddedComment').innerHTML .toFixed(2);
|
||||||
|
document.getElementById('deviceName').innerHTML = viewer.model.getInstanceTree().getNodeName(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) + ")";
|
||||||
|
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)}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSelectionChange(event) {
|
||||||
|
if (event != undefined && event != null) {
|
||||||
|
const dbIds = event.dbIdArray;
|
||||||
|
|
||||||
|
if (dbIds.length > 0) {
|
||||||
|
// 處理已選取元件的邏輯
|
||||||
|
console.log(`------ name: ${viewer.model.getInstanceTree().getNodeName(dbIds)} , dbId: ${dbIds}`);//, id: ${event.clickInfo.object.id}, position.x: ${event.clickInfo.point.x}, y: ${event.clickInfo.point.y}, z: ${event.clickInfo.point.z}
|
||||||
|
} else {
|
||||||
|
// 處理沒有選取元件的邏輯
|
||||||
|
console.log("no item");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//---------------- end -----------------------------
|
||||||
|
|
||||||
|
//----------------- 開關熱點小視窗 ----------------------
|
||||||
|
function openHotspotModal() {
|
||||||
|
var modal = document.getElementById("hotspotModal");
|
||||||
|
modal.style.display = "block";
|
||||||
|
$("#pills-register-tab").removeClass("active");
|
||||||
|
$("#pills-alarm-tab").removeClass("active");
|
||||||
|
$("#pills-operation-tab").removeClass("active");
|
||||||
|
$("#pills-login-tab").tab("show");
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeHotspotModal() {
|
||||||
|
var modal = document.getElementById("hotspotModal");
|
||||||
|
modal.style.display = "none";
|
||||||
|
}
|
||||||
|
//------------------ end --------------------------------
|
||||||
|
|
||||||
|
//-------------- 更改燈光範圍 --------------------------
|
||||||
|
function setLightPower(value) {
|
||||||
|
//bulbLight.intensity = (value * 10);
|
||||||
|
//bulbLight.distance = value;
|
||||||
|
viewer.impl.sceneUpdated(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setLightOpenOrClose(value) {
|
||||||
|
if (value)
|
||||||
|
spotLight.visible = true;
|
||||||
|
else {
|
||||||
|
spotLight.visible = false;
|
||||||
|
}
|
||||||
|
viewer.impl.sceneUpdated(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setLightTransparency(value) {
|
||||||
|
bulbLight.intensity = (value * 10);
|
||||||
|
//bulbLight.
|
||||||
|
viewer.impl.sceneUpdated(true);
|
||||||
|
}
|
||||||
|
//------------- end -----------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
//function getPosition(nodeId) {
|
||||||
|
function getFragmentWorldMatrixByNodeId(nodeId, viewer) {
|
||||||
|
let tree = viewer.model.getData().instanceTree;
|
||||||
|
let result = {
|
||||||
|
fragId: [],
|
||||||
|
matrix: [],
|
||||||
|
};
|
||||||
|
//let viewer = this.viewer;
|
||||||
|
tree.enumNodeFragments(nodeId, function (frag) {
|
||||||
|
|
||||||
|
let fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
|
||||||
|
let matrix = new THREE.Matrix4();
|
||||||
|
|
||||||
|
fragProxy.getWorldMatrix(matrix);
|
||||||
|
|
||||||
|
result.fragId.push(frag);
|
||||||
|
result.matrix.push(matrix);
|
||||||
|
});
|
||||||
|
console.log("position: " + result);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
//}
|
||||||
|
|
||||||
function setTransparentBuilding() {
|
function setTransparentBuilding() {
|
||||||
//allDbIdsStr.forEach((dbId) => {
|
//allDbIdsStr.forEach((dbId) => {
|
||||||
// setTransparency(dbId, 0.2);
|
// setTransparency(dbId, 0.2);
|
||||||
@ -609,12 +917,22 @@ function onDocumentLoadFailure(viewerErrorCode) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function getForgeToken(callback) {
|
function getForgeToken(callback) {
|
||||||
fetch(baseApiUrl + '/api/forge/oauth/token').then(res => {
|
//fetch(baseApiUrl + '/api/forge/oauth/token').then(res => {
|
||||||
|
// res.json().then(data => {
|
||||||
|
// callback(data.dictionary.access_token, data.dictionary.expires_in);
|
||||||
|
// });
|
||||||
|
//});
|
||||||
|
|
||||||
|
//for wsp get token
|
||||||
|
var wspApiUrl = "https://quick-sonar-302302.de.r.appspot.com";
|
||||||
|
fetch(wspApiUrl + '/api/forge/getToken').then(res => {
|
||||||
res.json().then(data => {
|
res.json().then(data => {
|
||||||
callback(data.dictionary.access_token, data.dictionary.expires_in);
|
callback(data.access_token, data.expires_in);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
//callback("eyJhbGciOiJSUzI1NiIsImtpZCI6IlU3c0dGRldUTzlBekNhSzBqZURRM2dQZXBURVdWN2VhIn0.eyJzY29wZSI6WyJkYXRhOndyaXRlIiwiZGF0YTpyZWFkIiwiYnVja2V0OnJlYWQiLCJidWNrZXQ6dXBkYXRlIiwiYnVja2V0OmNyZWF0ZSJdLCJjbGllbnRfaWQiOiJUQTNocXNGZnpRYk5PVVhLcGxkS1VLU2V3NFNKMjF3NSIsImF1ZCI6Imh0dHBzOi8vYXV0b2Rlc2suY29tL2F1ZC9hand0ZXhwNjAiLCJqdGkiOiJiemxzWE5qWElvZ2R1UjUzTUJkdlhrTTNTT01qeVB1bHJrMmdTVWJudGNTeDg1b01kRG1xejg3Z05jenJkRzhpIiwiZXhwIjoxNjY4MTgzMDM2fQ.VU3qLwTJ9nlXnomKCdk4y5UcgszGEO_zlvE7w5mWWajeBMwKLo-zw7LJEqUEajRksvssppR9SbVsjLSx-vDVc3DRhCo3jYTWKPT1T3wQrlkOSqLeIrAdnKdBDNBWKgrGJt_xcmXc3dZ3XNKf9L_F6Ex808rUlo6cem1mcPpKl1jCBDqKu1mAX7aDtZ65TTQZbGGhbG4HdnET-d1i5w4LunGN11UAHhDUW3n0SWWIBL27PiiUQONZttajhD5st6IngYLcjr93BYVyJmDF7-wm4WZlHSw2OnXIfbJcFXEd83uVv_Rej4UXjzZ0e6kHwzc2nvGvKSIFu3Nt7CabdR8CkA", 3599);
|
//callback("eyJhbGciOiJSUzI1NiIsImtpZCI6IlU3c0dGRldUTzlBekNhSzBqZURRM2dQZXBURVdWN2VhIn0.eyJzY29wZSI6WyJkYXRhOndyaXRlIiwiZGF0YTpyZWFkIiwiYnVja2V0OnJlYWQiLCJidWNrZXQ6dXBkYXRlIiwiYnVja2V0OmNyZWF0ZSJdLCJjbGllbnRfaWQiOiJUQTNocXNGZnpRYk5PVVhLcGxkS1VLU2V3NFNKMjF3NSIsImF1ZCI6Imh0dHBzOi8vYXV0b2Rlc2suY29tL2F1ZC9hand0ZXhwNjAiLCJqdGkiOiJiemxzWE5qWElvZ2R1UjUzTUJkdlhrTTNTT01qeVB1bHJrMmdTVWJudGNTeDg1b01kRG1xejg3Z05jenJkRzhpIiwiZXhwIjoxNjY4MTgzMDM2fQ.VU3qLwTJ9nlXnomKCdk4y5UcgszGEO_zlvE7w5mWWajeBMwKLo-zw7LJEqUEajRksvssppR9SbVsjLSx-vDVc3DRhCo3jYTWKPT1T3wQrlkOSqLeIrAdnKdBDNBWKgrGJt_xcmXc3dZ3XNKf9L_F6Ex808rUlo6cem1mcPpKl1jCBDqKu1mAX7aDtZ65TTQZbGGhbG4HdnET-d1i5w4LunGN11UAHhDUW3n0SWWIBL27PiiUQONZttajhD5st6IngYLcjr93BYVyJmDF7-wm4WZlHSw2OnXIfbJcFXEd83uVv_Rej4UXjzZ0e6kHwzc2nvGvKSIFu3Nt7CabdR8CkA", 3599);
|
||||||
|
//callback("eyJhbGciOiJSUzI1NiIsImtpZCI6IlU3c0dGRldUTzlBekNhSzBqZURRM2dQZXBURVdWN2VhIn0.eyJzY29wZSI6WyJkYXRhOnJlYWQiXSwiY2xpZW50X2lkIjoib0FoWVJBZkpvUkFRVFFqZmtBdExRSGkwYTIyc2pwSEoiLCJhdWQiOiJodHRwczovL2F1dG9kZXNrLmNvbS9hdWQvYWp3dGV4cDYwIiwianRpIjoiMm1EZ25yN0puYnhNUU91d2h2Y0lhTlZTOTIxOU9WMDlLZkZIRmhpa3BuMTUwbUNVbmRsVU9ZazdCMWxURXA4QiIsImV4cCI6MTY3MDk4NjgwM30.EfXtO7rdW25_WFxcFdYA-yWMUnRenuWc8MtvrM3i92jJU1_gZ7L1GJCLTH1MRJqnxp9X-oO4NToq1kt2sbUYWgwUPd3BvJwckr55s9hagy-0WENfUfEgX1csnrrKpnnbmlHIGQBgsUTklRRXleW6A63A0XkVH0GvJFv4h7K6-4gAi21SLhE_GwmbTWXSOxuoDnluIAVEDEf0ZmUYgnb4nImujScz876e4A0PagW0yf9-RSqmzNUctsasP6MBzLQxOHMd97jQvBDCFEzQqGgpbSTyc43Gdhy2wQM9sSxc_vR3ZvzJPm_78uda0HjH9M8B9SjwY07XHHdhGmbH-1FBQw", 3599);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function loadHeatmaps(model) {
|
async function loadHeatmaps(model) {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user