142 lines
3.9 KiB
JavaScript
142 lines
3.9 KiB
JavaScript
import { watch, inject, markRaw, ref, computed, onMounted } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
import useHeatmapBarStore from "@/stores/useHeatmapBarStore";
|
|
import useSystemShowData from "@/hooks/useSystemShowData";
|
|
|
|
export default function useForgeHeatmap() {
|
|
const route = useRoute();
|
|
const { subscribeData, realtimeData } = inject("system_deviceList");
|
|
|
|
const store = useHeatmapBarStore();
|
|
|
|
const forgeViewer = ref(null);
|
|
const dataVizExtn = ref(null);
|
|
const updateViewExtension = (viewer, dataVisualization) => {
|
|
forgeViewer.value = viewer;
|
|
dataVizExtn.value = dataVisualization;
|
|
};
|
|
|
|
//create the heatmap
|
|
function getSensorValue(device, sensorType, pointData) {
|
|
const dev = realtimeData.value.find(
|
|
({ device_number }) => device_number === device.id
|
|
);
|
|
if (dev) {
|
|
const [min, max] = store.heatmapConfig?.range;
|
|
const point = dev.data.find(({ point }) => point === route.query?.gas);
|
|
console.log(9, device, dev, point, (point?.value - min || 0) / max);
|
|
|
|
return Math.random();
|
|
}
|
|
return 0;
|
|
}
|
|
|
|
const { flatSubData } = useSystemShowData();
|
|
|
|
const data = computed(() =>
|
|
flatSubData.value?.map((d) => ({
|
|
...d,
|
|
...Object.fromEntries(
|
|
d.points.map(({ point, value }) => [point, 0]) || []
|
|
),
|
|
}))
|
|
);
|
|
|
|
watch(
|
|
() => realtimeData,
|
|
() => {
|
|
dataVizExtn.value &&
|
|
Object.keys(dataVizExtn.value?.surfaceShading)?.length &&
|
|
dataVizExtn.value.updateSurfaceShading(getSensorValue);
|
|
},
|
|
{
|
|
deep: true,
|
|
}
|
|
);
|
|
|
|
const createHeatMap = async () => {
|
|
if (!dataVizExtn.value) return;
|
|
const heatMapName = `iot_heatmap_${route.query?.gas}`;
|
|
console.log("createHeatMap", heatMapName);
|
|
const {
|
|
SurfaceShadingData,
|
|
SurfaceShadingPoint,
|
|
SurfaceShadingNode,
|
|
SurfaceShadingGroup,
|
|
} = Autodesk.DataVisualization.Core;
|
|
const shadingGroup = new SurfaceShadingGroup(`${heatMapName}`);
|
|
const rooms = new Map();
|
|
|
|
const roomSet = new Set(data.value.map(({ room_dbid }) => room_dbid));
|
|
|
|
// 每個room是一個node
|
|
[...roomSet].forEach((roomDbId) => {
|
|
if (!roomDbId) {
|
|
return;
|
|
}
|
|
const room = new SurfaceShadingNode(`room_${roomDbId}`, roomDbId);
|
|
|
|
//相同room內的設備
|
|
data.value
|
|
.filter(({ room_dbid }) => room_dbid === roomDbId)
|
|
.forEach(
|
|
({
|
|
device_number: id,
|
|
device_coordinate_3d: position,
|
|
sensorTypes,
|
|
}) =>
|
|
room.addPoint(new SurfaceShadingPoint(id, position, sensorTypes))
|
|
);
|
|
|
|
shadingGroup.addChild(room);
|
|
});
|
|
|
|
// data.value.forEach(
|
|
// ({
|
|
// device_number: id,
|
|
// room_dbid: roomDbId,
|
|
// device_coordinate_3d: position,
|
|
// sensorTypes,
|
|
// }) => {
|
|
// if (!id || roomDbId == -1 || !roomDbId) {
|
|
// return;
|
|
// }
|
|
// if (!rooms.has(roomDbId)) {
|
|
// const room = new SurfaceShadingNode(id, roomDbId);
|
|
// shadingGroup.addChild(room);
|
|
// rooms.set(roomDbId, room);
|
|
// }
|
|
// const room = rooms.get(roomDbId);
|
|
// room.addPoint(new SurfaceShadingPoint(id, position, route.query.gas));
|
|
// }
|
|
// );
|
|
const shadingData = new SurfaceShadingData(`${heatMapName}`);
|
|
shadingData.addChild(shadingGroup);
|
|
shadingData.initialize(forgeViewer.value?.model);
|
|
await dataVizExtn.value.setupSurfaceShading(
|
|
forgeViewer.value.model,
|
|
shadingData
|
|
);
|
|
dataVizExtn.value.registerSurfaceShadingColors(
|
|
route.query?.gas,
|
|
store.heatmapConfig?.color
|
|
);
|
|
dataVizExtn.value.renderSurfaceShading(
|
|
heatMapName,
|
|
route.query?.gas,
|
|
getSensorValue
|
|
);
|
|
};
|
|
|
|
watch(
|
|
data,
|
|
(newValue, oldValue) => {
|
|
dataVizExtn.value?.removeSurfaceShading();
|
|
createHeatMap(route.query.gas);
|
|
},
|
|
{ deep: true }
|
|
);
|
|
|
|
return { createHeatMap, updateViewExtension };
|
|
}
|