[Frontend][系統監控] 樓層 加入剖面框
This commit is contained in:
parent
95e2780568
commit
f662d22a4f
@ -256,7 +256,7 @@
|
|||||||
|
|
||||||
function show3DModel(urn) {
|
function show3DModel(urn) {
|
||||||
launchViewerForHotspot(urn, (viewer, nodeIds) => {
|
launchViewerForHotspot(urn, (viewer, nodeIds) => {
|
||||||
|
loadHeatmap();
|
||||||
}, "[name=forgeViewer]");
|
}, "[name=forgeViewer]");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -30,9 +30,12 @@
|
|||||||
var allDeviceRowData = []; //所有設備原始資料
|
var allDeviceRowData = []; //所有設備原始資料
|
||||||
var global_emergency_alarm_device_number = [];
|
var global_emergency_alarm_device_number = [];
|
||||||
var zoomToggle = 3;
|
var zoomToggle = 3;
|
||||||
|
var urn_all = "dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1pdHN1YmlzaGkvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDJUU5JTlCJTk5JUU5JUExJUFGXzEyMjgubndk";
|
||||||
|
|
||||||
$(function () {
|
$(function () {
|
||||||
show3DModel();
|
getHotspotPoint(() => {
|
||||||
|
show3DModel(urn_all);
|
||||||
|
});
|
||||||
initChart();
|
initChart();
|
||||||
getFloData();
|
getFloData();
|
||||||
subDevice();
|
subDevice();
|
||||||
@ -864,9 +867,49 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function show3DModel() {
|
function show3DModel(urn) {
|
||||||
launchViewer("dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxQjFGXzIwMjJfMTJfMDQubndj", (viewer, nodeIds) => {
|
launchViewerForHotspot(urn, (viewer, nodeIds) => {
|
||||||
|
getLevelsData();
|
||||||
|
loadHeatmapForFloor();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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,
|
||||||
|
"device_floor_tag": pageAct.floTag,
|
||||||
|
};
|
||||||
|
objSendData.Data = sendData;
|
||||||
|
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
|
||||||
|
if (!res || res.code != "0000" || !res.data) {
|
||||||
|
|
||||||
|
} else {
|
||||||
|
debugger
|
||||||
|
let myDataList = [];
|
||||||
|
$.each(res.data, (idx, data) => {
|
||||||
|
let item = {};
|
||||||
|
item.position = {};
|
||||||
|
if (item.device_coordinate_3d != null && isJSON(item.device_coordinate_3d)) {
|
||||||
|
item.position = JSON.parse(x.device_coordinate_3d);
|
||||||
|
}
|
||||||
|
$.extend(item, data);
|
||||||
|
myDataList.push(item);
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log("1", myDataList)
|
||||||
|
setHotspotPoint(myDataList);
|
||||||
|
callback ? callback() : "";
|
||||||
|
}
|
||||||
|
}, null, "POST").send();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function setHotspotPoint(myDataList = []) {
|
||||||
|
console.log(myDataList)
|
||||||
|
getHopspotPoint(myDataList);
|
||||||
|
}
|
||||||
</script>
|
</script>
|
@ -5,6 +5,7 @@ var targetFloorZ;
|
|||||||
var elevatorSpeed;
|
var elevatorSpeed;
|
||||||
var selector = "#forgeViewer";
|
var selector = "#forgeViewer";
|
||||||
let myDataList;
|
let myDataList;
|
||||||
|
var levels;//剖面用
|
||||||
|
|
||||||
function launchViewer(urn, callback, _selector = "#forgeViewer") {
|
function launchViewer(urn, callback, _selector = "#forgeViewer") {
|
||||||
selector = _selector;
|
selector = _selector;
|
||||||
@ -479,61 +480,75 @@ function getForgeToken(callback) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function loadHeatmaps(model) {
|
async function loadHeatmaps(model) {
|
||||||
|
|
||||||
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
|
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
|
||||||
|
|
||||||
// Given a model loaded from Forge
|
|
||||||
const structureInfo = new Autodesk.DataVisualization.Core.ModelStructureInfo(model);
|
|
||||||
|
|
||||||
const devices = [
|
const devices = [
|
||||||
{
|
{
|
||||||
id: "Oficina 6",
|
id: "Oficina 5",
|
||||||
name: "Oficina-",
|
position: { x: 6.98, y: -19.00, z: 16.86 },
|
||||||
position: { x: 22.475382737884104, y: 7.4884431474006163, z: 3.0 },
|
sensorTypes: ["temperature", "humidity"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Oficina 4",
|
||||||
|
position: { x: 35.85, y: -2.24, z: 16.86 },
|
||||||
|
sensorTypes: ["temperature", "humidity"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Oficina 3",
|
||||||
|
position: { x: 6.98, y: -2.24, z: 16.86 },
|
||||||
sensorTypes: ["temperature", "humidity"]
|
sensorTypes: ["temperature", "humidity"]
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
var offset = Autodesk.viewer.model.getGlobalOffset();
|
// Initialize sensor values
|
||||||
removeOffset(devices[0], offset)
|
let sensorVals = [];
|
||||||
|
for (let i = 0; i < devices.length; i++) {
|
||||||
|
sensorVals[i] = Math.random();
|
||||||
|
}
|
||||||
|
const roomDbIds = [];
|
||||||
|
|
||||||
|
roomDbIds.push(7567);
|
||||||
|
|
||||||
|
const {
|
||||||
|
SurfaceShadingData,
|
||||||
|
SurfaceShadingPoint,
|
||||||
|
SurfaceShadingNode,
|
||||||
|
} = Autodesk.DataVisualization.Core;
|
||||||
|
|
||||||
|
const shadingNode = new SurfaceShadingNode("Room Panel", roomDbIds);
|
||||||
|
|
||||||
|
devices.forEach((device) => {
|
||||||
|
const shadingPoint = new SurfaceShadingPoint(
|
||||||
|
device.id,
|
||||||
|
device.position,
|
||||||
|
device.sensorTypes
|
||||||
|
);
|
||||||
|
shadingNode.addPoint(shadingPoint);
|
||||||
|
});
|
||||||
|
|
||||||
// Generates `SurfaceShadingData` after assigning each device to a room.
|
// Generates `SurfaceShadingData` after assigning each device to a room.
|
||||||
|
const heatmapData = new SurfaceShadingData();
|
||||||
|
heatmapData.addChild(shadingNode);
|
||||||
|
heatmapData.initialize(model);
|
||||||
|
|
||||||
const shadingData = await Autodesk.structureInfo.generateSurfaceShadingData(devices);
|
// Setup surface shading
|
||||||
|
await dataVizExtn.setupSurfaceShading(model, heatmapData);
|
||||||
|
|
||||||
// Use the resulting shading data to generate heatmap from.
|
dataVizExtn.registerSurfaceShadingColors("temperature", [0xff0000, 0x0000ff]);
|
||||||
await dataVizExtn.setupSurfaceShading(model, shadingData);
|
|
||||||
|
|
||||||
// Register color stops for the heatmap. Along with the normalized sensor value
|
function getSensorValue(device, sensorType) {
|
||||||
// in the range of [0.0, 1.0], `renderSurfaceShading` will interpolate the final
|
return sensorVals[parseInt(device.id.slice(-1)) - 1];
|
||||||
// heatmap color based on these specified colors.
|
|
||||||
const sensorColors = [0x0000ff, 0x00ff00, 0xffff00, 0xff0000];
|
|
||||||
|
|
||||||
// Set heatmap colors for temperature
|
|
||||||
const sensorType = "temperature";
|
|
||||||
dataVizExtn.registerSurfaceShadingColors(sensorType, sensorColors);
|
|
||||||
|
|
||||||
// Function that provides sensor value in the range of [0.0, 1.0]
|
|
||||||
|
|
||||||
function getSensorValue(surfaceShadingPoint, sensorType) {
|
|
||||||
// The `SurfaceShadingPoint.id` property matches one of the identifiers passed
|
|
||||||
// to `generateSurfaceShadingData` function. In our case above, this will either
|
|
||||||
// be "cafeteria-entrace-01" or "cafeteria-exit-01".
|
|
||||||
const deviceId = surfaceShadingPoint.id;
|
|
||||||
|
|
||||||
// Read the sensor data, along with its possible value range
|
|
||||||
let sensorValue = readSensorValue(deviceId, sensorType);
|
|
||||||
const maxSensorValue = getMaxSensorValue(sensorType);
|
|
||||||
const minSensorValue = getMinSensorValue(sensorType);
|
|
||||||
|
|
||||||
// Normalize sensor value to [0, 1.0]
|
|
||||||
sensorValue = (sensorValue - minSensorValue) / (maxSensorValue - minSensorValue);
|
|
||||||
return clamp(sensorValue, 0.0, 1.0);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// This value can also be a room instead of a floor
|
dataVizExtn.renderSurfaceShading("Room Panel", "temperature", getSensorValue);
|
||||||
const floorName = "01 - Entry Level";
|
|
||||||
dataVizExtn.renderSurfaceShading(floorName, sensorType, getSensorValue);
|
setInterval(() => {
|
||||||
|
// Modify sensor values.
|
||||||
|
for (let i = 0; i < devices.length; i++) {
|
||||||
|
sensorVals[i] = Math.random();
|
||||||
|
}
|
||||||
|
dataVizExtn.updateSurfaceShading(getSensorValue);
|
||||||
|
}, 2000);
|
||||||
}
|
}
|
||||||
|
|
||||||
function setTransparentBuilding() {
|
function setTransparentBuilding() {
|
||||||
@ -747,3 +762,229 @@ function closeHotspotModal() {
|
|||||||
|
|
||||||
}
|
}
|
||||||
//------------------ end --------------------------------
|
//------------------ end --------------------------------
|
||||||
|
|
||||||
|
//------------------ 熱圖 -------------------------------
|
||||||
|
async function loadHeatmaps(model) {
|
||||||
|
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
|
||||||
|
|
||||||
|
//取三個空調設備的位置打點
|
||||||
|
const devices = [
|
||||||
|
//{
|
||||||
|
// id: "Oficina 5",
|
||||||
|
// position: { x: -4.93, y: -20.61, z: 16.86 }, // x: 0, y: 25, z: -2.5
|
||||||
|
// sensorTypes: ["temperature", "humidity"]
|
||||||
|
//},
|
||||||
|
//{
|
||||||
|
// id: "Oficina 4",
|
||||||
|
// position: { x: 23.94, y: -3.85, z: 16.86 }, // x: 0, y: 25.03, z: -2.52
|
||||||
|
// sensorTypes: ["temperature", "humidity"]
|
||||||
|
//},
|
||||||
|
//{
|
||||||
|
// id: "Oficina 3",
|
||||||
|
// position: { x: -4.93, y: -3.85, z: 16.86 }, // x: 0, y: 25.03, z: -2.52
|
||||||
|
// sensorTypes: ["temperature", "humidity"]
|
||||||
|
//}
|
||||||
|
{
|
||||||
|
id: "Oficina 5",
|
||||||
|
//name: "Oficina-",
|
||||||
|
position: { x: 3.35, y: -4.81, z: 12.88 }, // x: 0, y: 25, z: -2.5 (3.35, -4.81, 12.88
|
||||||
|
sensorTypes: ["temperature", "humidity"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Oficina 4",
|
||||||
|
//name: "Oficina-",
|
||||||
|
position: { x: 37.03, y: -4.81, z: 12.88 }, // x: 0, y: 25.03, z: -2.52 (37.03, -4.81, 12.88)
|
||||||
|
sensorTypes: ["temperature", "humidity"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Oficina 3",
|
||||||
|
//name: "Oficina-",
|
||||||
|
position: { x: 2.83, y: -22.60, z: 12.88 }, // x: 0, y: 25.03, z: -2.52 (2.83, -22.60, 12.88)
|
||||||
|
sensorTypes: ["temperature", "humidity"]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
//冷氣N5: (-4.93, -20.61, 16.86), N4: (23.94, -3.85, 16.86), N3: (-4.93, -3.85, 16.86)
|
||||||
|
|
||||||
|
// Initialize sensor values
|
||||||
|
let sensorVals = [];
|
||||||
|
for (let i = 0; i < devices.length; i++) {
|
||||||
|
sensorVals[i] = Math.random();
|
||||||
|
}
|
||||||
|
|
||||||
|
const roomDbIds = [];
|
||||||
|
roomDbIds.push(8181);//房間的dbid 七樓的 Room3-5 792
|
||||||
|
roomDbIds.push(8183);
|
||||||
|
roomDbIds.push(8185);
|
||||||
|
|
||||||
|
const {
|
||||||
|
SurfaceShadingData,
|
||||||
|
SurfaceShadingPoint,
|
||||||
|
SurfaceShadingNode,
|
||||||
|
} = Autodesk.DataVisualization.Core;
|
||||||
|
|
||||||
|
const shadingNode = new SurfaceShadingNode("Room Panel", roomDbIds);
|
||||||
|
|
||||||
|
devices.forEach((device) => {
|
||||||
|
const shadingPoint = new SurfaceShadingPoint(
|
||||||
|
device.id,
|
||||||
|
device.position,
|
||||||
|
device.sensorTypes
|
||||||
|
);
|
||||||
|
shadingNode.addPoint(shadingPoint);
|
||||||
|
});
|
||||||
|
|
||||||
|
const heatmapData = new SurfaceShadingData();
|
||||||
|
heatmapData.addChild(shadingNode);
|
||||||
|
heatmapData.initialize(model);
|
||||||
|
|
||||||
|
// Setup surface shading
|
||||||
|
await dataVizExtn.setupSurfaceShading(model, heatmapData);
|
||||||
|
|
||||||
|
dataVizExtn.registerSurfaceShadingColors("temperature", [0xff0000, 0x0000ff]);
|
||||||
|
|
||||||
|
function getSensorValue(device, sensorType) {
|
||||||
|
return sensorVals[parseInt(device.id.slice(-1)) - 1];
|
||||||
|
}
|
||||||
|
|
||||||
|
dataVizExtn.renderSurfaceShading("Room Panel", "temperature", getSensorValue);
|
||||||
|
|
||||||
|
setInterval(() => {
|
||||||
|
// Modify sensor values.
|
||||||
|
for (let i = 0; i < devices.length; i++) {
|
||||||
|
sensorVals[i] = Math.random();
|
||||||
|
}
|
||||||
|
dataVizExtn.updateSurfaceShading(getSensorValue);
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
//------------------ end --------------------------------
|
||||||
|
async function loadHeatmapsForFloor(model) {
|
||||||
|
|
||||||
|
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
|
||||||
|
|
||||||
|
//x: -17.33, y: 51.03, z: -2.52
|
||||||
|
const devices = [
|
||||||
|
{
|
||||||
|
id: "Oficina 5",
|
||||||
|
//name: "Oficina-",
|
||||||
|
position: { x: 6.98, y: -19.00, z: 16.86 }, // x: 0, y: 25, z: -2.5 (-4.93, -20.61, 16.86)
|
||||||
|
sensorTypes: ["temperature", "humidity"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Oficina 4",
|
||||||
|
//name: "Oficina-",
|
||||||
|
position: { x: 35.85, y: -2.24, z: 16.86 }, // x: 0, y: 25.03, z: -2.52 (23.94, -3.85, 16.86)
|
||||||
|
sensorTypes: ["temperature", "humidity"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Oficina 3",
|
||||||
|
//name: "Oficina-",
|
||||||
|
position: { x: 6.98, y: -2.24, z: 16.86 }, // x: 0, y: 25.03, z: -2.52 (-4.93, -3.85, 16.86)
|
||||||
|
sensorTypes: ["temperature", "humidity"]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// Initialize sensor values
|
||||||
|
let sensorVals = [];
|
||||||
|
for (let i = 0; i < devices.length; i++) {
|
||||||
|
sensorVals[i] = Math.random();
|
||||||
|
}
|
||||||
|
|
||||||
|
const roomDbIds = [];
|
||||||
|
|
||||||
|
roomDbIds.push(7567);
|
||||||
|
|
||||||
|
const {
|
||||||
|
SurfaceShadingData,
|
||||||
|
SurfaceShadingPoint,
|
||||||
|
SurfaceShadingNode,
|
||||||
|
} = Autodesk.DataVisualization.Core;
|
||||||
|
|
||||||
|
const shadingNode = new SurfaceShadingNode("Room Panel", roomDbIds);
|
||||||
|
|
||||||
|
devices.forEach((device) => {
|
||||||
|
const shadingPoint = new SurfaceShadingPoint(
|
||||||
|
device.id,
|
||||||
|
device.position,
|
||||||
|
device.sensorTypes
|
||||||
|
);
|
||||||
|
shadingNode.addPoint(shadingPoint);
|
||||||
|
});
|
||||||
|
|
||||||
|
const heatmapData = new SurfaceShadingData();
|
||||||
|
heatmapData.addChild(shadingNode);
|
||||||
|
heatmapData.initialize(model);
|
||||||
|
|
||||||
|
// Setup surface shading
|
||||||
|
await dataVizExtn.setupSurfaceShading(model, heatmapData);
|
||||||
|
|
||||||
|
//dataVizExtn.registerSurfaceShadingColors("co2", [0x00ff00, 0xff0000]);
|
||||||
|
dataVizExtn.registerSurfaceShadingColors("temperature", [0xff0000, 0x0000ff]);
|
||||||
|
|
||||||
|
function getSensorValue(device, sensorType) {
|
||||||
|
return sensorVals[parseInt(device.id.slice(-1)) - 1];
|
||||||
|
}
|
||||||
|
|
||||||
|
dataVizExtn.renderSurfaceShading("Room Panel", "temperature", getSensorValue);
|
||||||
|
|
||||||
|
setInterval(() => {
|
||||||
|
// Modify sensor values.
|
||||||
|
for (let i = 0; i < devices.length; i++) {
|
||||||
|
sensorVals[i] = Math.random();
|
||||||
|
}
|
||||||
|
dataVizExtn.updateSurfaceShading(getSensorValue);
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
async function loadHeatmap() {
|
||||||
|
const model = viewer.model;
|
||||||
|
loadHeatmaps(model);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadHeatmapForFloor() {
|
||||||
|
const model = viewer.model;
|
||||||
|
loadHeatmapsForFloor(model);
|
||||||
|
}
|
||||||
|
|
||||||
|
//------------ 剖面 ----------------------
|
||||||
|
async function getRemoteLevels() {
|
||||||
|
const aecData = await Autodesk.Viewing.Document.getAecModelData(this.viewer.model.getDocumentNode());
|
||||||
|
if (!aecData.levels) return null;
|
||||||
|
|
||||||
|
const levels2 = aecData.levels;
|
||||||
|
levels2.sort((a, b) => b.elevation - a.elevation);
|
||||||
|
return levels2;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getLevelsData() {
|
||||||
|
const data = await this.getRemoteLevels();
|
||||||
|
this.levels = data;
|
||||||
|
profile();
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCutPlaneParam(idx, n) {
|
||||||
|
if (idx < 0 || !n) return;
|
||||||
|
|
||||||
|
const level = this.levels[idx];
|
||||||
|
if (!level) return;
|
||||||
|
|
||||||
|
const model = this.viewer.model;
|
||||||
|
const globalOffset = model.getData().globalOffset;
|
||||||
|
const units = model.getUnitString();
|
||||||
|
const elevRaw = Autodesk.Viewing.Private.convertUnits('ft', units, 1, level.elevation);
|
||||||
|
|
||||||
|
let d = elevRaw - globalOffset.z - 0.5;
|
||||||
|
if (n == 1)
|
||||||
|
d = -1 * d;
|
||||||
|
|
||||||
|
return new THREE.Vector4(0, 0, n, d);
|
||||||
|
}
|
||||||
|
|
||||||
|
function profile() {
|
||||||
|
const upperIdx = 6;
|
||||||
|
const upperCutPlaneParam = this.getCutPlaneParam(upperIdx, 1);
|
||||||
|
const lowerIdx = 7;
|
||||||
|
const lowerCutPlaneParam = this.getCutPlaneParam(lowerIdx, -1);
|
||||||
|
this.viewer.setCutPlanes([upperCutPlaneParam, lowerCutPlaneParam]);
|
||||||
|
}
|
||||||
|
//----------------- end -----------------------------------------------
|
Loading…
Reference in New Issue
Block a user