[Frontend][監控系統][電錶系統] 模型中加入熱點
This commit is contained in:
wanli
parent
6fdeb7096b
commit
00c9d700cb
@ -12,6 +12,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
var allDevList = []; //全設備清單
|
var allDevList = []; //全設備清單
|
||||||
|
let devicePointList = [];
|
||||||
|
|
||||||
$(function () {
|
$(function () {
|
||||||
getBuildMenu((arr,data) => {
|
getBuildMenu((arr,data) => {
|
||||||
@ -20,7 +21,10 @@
|
|||||||
setLightColor();
|
setLightColor();
|
||||||
}
|
}
|
||||||
if (arr.indexOf(5) != -1) {
|
if (arr.indexOf(5) != -1) {
|
||||||
|
setHotspotPoint();
|
||||||
show3DModel(data.urn_3D);
|
show3DModel(data.urn_3D);
|
||||||
|
console.log("start ---------");
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -228,8 +232,38 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function show3DModel(urn) {
|
function show3DModel(urn) {
|
||||||
launchViewer(urn, (viewer, nodeIds) => {
|
launchViewerForHotspot(urn, (viewer, nodeIds) => {
|
||||||
|
|
||||||
},"[name=forgeViewer]");
|
},"[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>
|
</script>
|
||||||
@ -1,56 +1,12 @@
|
|||||||
var viewer;
|
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;
|
let fragProxy;
|
||||||
var targetFloorZ;
|
var targetFloorZ;
|
||||||
var elevatorSpeed;
|
var elevatorSpeed;
|
||||||
var selector = "#forgeViewer";
|
var selector = "#forgeViewer";
|
||||||
// for (let i = 0; i < devices.length; i++) {
|
let myDataList;
|
||||||
// sensorVals[i] = Math.random();
|
|
||||||
// }
|
|
||||||
|
|
||||||
function launchViewer(urn, callback,selector = "#forgeViewer") {
|
function launchViewer(urn, callback, selector = "#forgeViewer") {
|
||||||
var options = {
|
var options = {
|
||||||
env: 'AutodeskProduction',
|
env: 'AutodeskProduction',
|
||||||
getAccessToken: getForgeToken
|
getAccessToken: getForgeToken
|
||||||
@ -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) {
|
function launchViewerNoTools(urn, callback) {
|
||||||
var options = {
|
var options = {
|
||||||
env: 'AutodeskProduction',
|
env: 'AutodeskProduction',
|
||||||
@ -593,4 +573,100 @@ function hideColor(nodeId) {//顏色改成透明
|
|||||||
viewer.setThemingColor(chiNodeId, color);
|
viewer.setThemingColor(chiNodeId, color);
|
||||||
},true)
|
},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