[Frontend][監控系統][電錶系統] 模型中加入熱點
This commit is contained in:
wanli
parent
6fdeb7096b
commit
00c9d700cb
@ -12,6 +12,7 @@
|
||||
|
||||
<script>
|
||||
var allDevList = []; //全設備清單
|
||||
let devicePointList = [];
|
||||
|
||||
$(function () {
|
||||
getBuildMenu((arr,data) => {
|
||||
@ -20,7 +21,10 @@
|
||||
setLightColor();
|
||||
}
|
||||
if (arr.indexOf(5) != -1) {
|
||||
setHotspotPoint();
|
||||
show3DModel(data.urn_3D);
|
||||
console.log("start ---------");
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
@ -228,8 +232,38 @@
|
||||
}
|
||||
|
||||
function show3DModel(urn) {
|
||||
launchViewer(urn, (viewer, nodeIds) => {
|
||||
launchViewerForHotspot(urn, (viewer, nodeIds) => {
|
||||
|
||||
},"[name=forgeViewer]");
|
||||
}
|
||||
|
||||
function getHotspotPoint() {
|
||||
let url = baseApiUrl + "/api/GetDevForCor";
|
||||
let sendData = {
|
||||
"area_tag": pageAct.AreaTag,
|
||||
"building_tag": pageAct.buiTag,
|
||||
"system_tag": pageAct.sysMainTag,
|
||||
"name_tag": pageAct.sysSubTag,
|
||||
};
|
||||
objSendData.Data = sendData;
|
||||
$.post(url, sendData, function (rel) {
|
||||
if (rel.code == "9999") {
|
||||
toast_error(rel.msg);
|
||||
return;
|
||||
}
|
||||
devicePointList.push(rel.data.device_coordinate_3d);
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
function setHotspotPoint() {
|
||||
//先假設有抓到點位的座標 之後api改input後再接
|
||||
const mydatalist = [{ position: { x: -21.95, y: 8.92, z: 63.27 } },
|
||||
{ position: { x: -21.95, y: 7.61, z: 63.27 } },
|
||||
{ position: { x: -21.95, y: 6.43, z: 63.27 } },
|
||||
{ position: { x: -21.95, y: 5.31, z: 63.27 } }
|
||||
];
|
||||
getHopspotPoint(mydatalist);
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@ -1,54 +1,10 @@
|
||||
var viewer;
|
||||
|
||||
// const devices = [
|
||||
// {
|
||||
// id: "Sensor 1",
|
||||
// position: {
|
||||
// x: -22.779729106182415,
|
||||
// y: 5.431043023608719,
|
||||
// z: 4.553068469137088,
|
||||
// },
|
||||
// type: "combo",
|
||||
// sensorTypes: ["temperature", "co2"],
|
||||
// dbId: 1,
|
||||
// },
|
||||
// {
|
||||
// id: "Sensor 2",
|
||||
// position: {
|
||||
// x: 0.20752051811882666,
|
||||
// y: 5.431043023608719,
|
||||
// z: 4.553068469137088,
|
||||
// },
|
||||
// type: "combo",
|
||||
// sensorTypes: ["temperature", "co2"],
|
||||
// dbId: 2,
|
||||
// },
|
||||
// ];
|
||||
|
||||
// var sensorStyleDefinitions = {
|
||||
// co2: {
|
||||
// url: "https://d2zqnmauvnpnnm.cloudfront.net/assets-1/images/co2.svg",
|
||||
// color: 0xffffff,
|
||||
// },
|
||||
// temperature: {
|
||||
// url: "https://d2zqnmauvnpnnm.cloudfront.net/assets-1/images/thermometer.svg",
|
||||
// color: 0xffffff,
|
||||
// },
|
||||
// default: {
|
||||
// url: "https://d2zqnmauvnpnnm.cloudfront.net/assets-1/images/circle.svg",
|
||||
// color: 0xffffff,
|
||||
// },
|
||||
// };
|
||||
|
||||
// Initialize sensor values
|
||||
//let sensorVals = [];
|
||||
let fragProxy;
|
||||
var targetFloorZ;
|
||||
var elevatorSpeed;
|
||||
var selector = "#forgeViewer";
|
||||
// for (let i = 0; i < devices.length; i++) {
|
||||
// sensorVals[i] = Math.random();
|
||||
// }
|
||||
let myDataList;
|
||||
|
||||
function launchViewer(urn, callback, selector = "#forgeViewer") {
|
||||
var options = {
|
||||
@ -96,6 +52,30 @@ function launchViewer(urn, callback,selector = "#forgeViewer") {
|
||||
});
|
||||
}
|
||||
|
||||
function launchViewerForHotspot(urn, callback, selector = "#forgeViewer") {
|
||||
var av = Autodesk.Viewing;
|
||||
var options = {
|
||||
env: 'AutodeskProduction',
|
||||
getAccessToken: getForgeToken
|
||||
};
|
||||
|
||||
Autodesk.Viewing.Initializer(options, () => {
|
||||
viewer = new Autodesk.Viewing.GuiViewer3D($(selector)[0]);
|
||||
viewer.start();
|
||||
var documentId = 'urn:' + urn;
|
||||
|
||||
viewer.addEventListener(av.GEOMETRY_LOADED_EVENT, addHotPoint, {
|
||||
once: true,
|
||||
});
|
||||
|
||||
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
|
||||
|
||||
$(selector).on("autodesk:loaded", function (e, nodeIds) {
|
||||
callback ? callback(viewer, nodeIds) : "";
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
function launchViewerNoTools(urn, callback) {
|
||||
var options = {
|
||||
env: 'AutodeskProduction',
|
||||
@ -594,3 +574,99 @@ function hideColor(nodeId) {//顏色改成透明
|
||||
},true)
|
||||
|
||||
}
|
||||
|
||||
//------------------ 紀錄熱點座標 ---------------
|
||||
function getHopspotPoint(data) {
|
||||
//var av = Autodesk.Viewing;
|
||||
myDataList = data;
|
||||
//viewer.addEventListener(av.GEOMETRY_LOADED_EVENT, addHotPoint, {
|
||||
// once: true,
|
||||
//});
|
||||
}
|
||||
//-------------------- end ----------------------
|
||||
|
||||
//------------------- 加入熱點 -----------------
|
||||
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);// SPRITE_SELECTED
|
||||
|
||||
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
|
||||
|
||||
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);
|
||||
|
||||
//---------------- 熱點點擊事件 --------------------
|
||||
function onSpriteClicked(event) {
|
||||
if (event != undefined && event != null) {
|
||||
if (event.dbId >= 10 && event.dbId <= 13) {//event.dbId > 0 && event.dbId < 19
|
||||
console.log(`Sprite clicked: ${event.dbId}`);
|
||||
openHotspotModal();
|
||||
}
|
||||
|
||||
if (event.clickInfo != null) {
|
||||
//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) {
|
||||
// 處理已選取元件的邏輯
|
||||
|
||||
//openHotspotModal();
|
||||
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 --------------------------------
|
||||
Loading…
Reference in New Issue
Block a user