ko.ko/CviLux_fe
1
1
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Merge branch 'feature/system'

Browse Source
This commit is contained in:
koko 2024-10-28 15:08:31 +08:00
commit 9f09bd1b2c
10 changed files with 373 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
public/config.json Normal file
View File

@ -0,0 +1,44 @@
{
"heatmap": {
"temp": {
"range": [0, 50],
"color": ["#0023F5", "#FF1C05"],
"unit": "°C"
},
"humi": {
"range": [15, 95],
"color": ["#ADD8E6", "#00008B"],
"unit": "%"
},
"CO2": {
"range": [0, 5000],
"color": ["#FFDAB9", "#FF8C00"],
"unit": "ppm"
},
"CO": {
"range": [0, 1000],
"color": ["#FFFFE0", "#FFD700"],
"unit": "ppm"
},
"CH2O": {
"range": [0, 100],
"color": ["#90EE90", "#006400"],
"unit": "ppb"
},
"PM1": {
"range": [0, 20],
"color": ["#E6E6FA", "#800080"],
"unit": "µg/m³"
},
"PM2.5": {
"range": [0, 55],
"color": ["#FFB6C1", "#FF0000"],
"unit": "µg/m³"
},
"PM10": {
"range": [0, 150],
"color": ["#FFDDC1", "#FF1493"],
"unit": "µg/m³"
}
}
}

40
src/components/forge/ForgeForSystem.vue
View File

@ -16,6 +16,7 @@ import useSystemStatusByBaja from "@/hooks/baja/useSystemStatusByBaja";
import ForgeInfoModal from "../../views/system/components/SystemInfoModal.vue";
import useAlarmStore from "@/stores/useAlarmStore";
import useForgeSprite from "@/hooks/forge/useForgeSprite";
import useHeatmapBarStore from "@/stores/useHeatmapBarStore";
const props = defineProps({
initialData: Object,
@ -27,13 +28,9 @@ const props = defineProps({
},
},
});
const store = useHeatmapBarStore();
const heat_bar_isShow = ref(false);
const updateHeatBarIsShow = (isShow) => {
heat_bar_isShow.value = isShow;
};
const { updateDataVisualization, createSprites, hideAllObjects, forgeClickListener, clear } = useForgeSprite()
const { updateDataVisualization, createSprites, showSubSystemObjects, forgeClickListener, clear } = useForgeSprite()
const forgeDom = ref(null);
@ -92,9 +89,10 @@ const loadModel = (viewer, filePath) => {
});
};
// const loadModel = (viewer, urn) => {
// const loadModel = (viewer) => {
// return new Promise(function (resolve, reject) {
// async function onDocumentLoadSuccess(doc) {
// console.log("模型加載完成");
// viewer.setGroundShadow(false);
// viewer.impl.renderer().setClearAlpha(0); //clear alpha channel
// viewer.impl.glrenderer().setClearColor(0xffffff, 0); //set transparent background, color code does not matter
@ -163,7 +161,7 @@ const initForge = async () => {
viewer.isLoadDone()
);
hideAllObjects();
showSubSystemObjects();
createSprites();
forgeClickListener();
})
@ -201,22 +199,18 @@ onUnmounted(() => {
<template>
<ForgeInfoModal :data="currentInfoModalData" />
<div id="forge-preview" ref="forgeDom" class="relative w-full h-full min-h-full">
<div v-show="heat_bar_isShow" class="absolute z-10 heatbar">
<div v-show="store.heat_bar_isShow" class="absolute z-10 heatbar">
<div class="w-40 flex justify-between text-[10px] mb-1">
<span class="text-gradient-1">10 °C</span>
<span class="text-gradient-2">20 °C</span>
<span class="text-gradient-3">30 °C</span>
<span class="text-gradient-4">40 °C</span>
<span v-for="value in store.heatmapConfig?.range" class="text-gradient-1">{{ value }} {{
store.heatmapConfig?.unit }}</span>
</div>
<div class="w-40 h-3" style="
background: linear-gradient(
<div class="w-40 h-3" :style="{
background: `linear-gradient(
to right,
#0000ff 0%,
#00ff00 33%,
#ffff00 66%,
#ff0000 100%
);
"></div>
${store.heatmapConfig?.color[0]} 0%,
${store.heatmapConfig?.color[1]} 100%
)`
}"></div>
</div>
<!-- label -->
<!-- https://github.com/augustogoncalves/forge-plant-operation/blob/master/forgeSample/wwwroot/js/iconExtension.js -->
@ -264,11 +258,11 @@ onUnmounted(() => {
}
.homeViewWrapper {
transform: scale(0.9) !important;
transform: scale(2) !important;
}
.heatbar {
right: v-bind("`${props.cubeStyle.right + 2}%`") !important;
/* right: v-bind("`${props.cubeStyle.right + 2}%`") !important; */
top: 0% !important;
}
</style>

156
src/hooks/forge/useForgeFloor.js
View File

@ -1,70 +1,112 @@
import useSelectedFloor from "@/hooks/useSelectedFloor";
import { watch, ref, inject } from "vue";
import { useRoute } from "vue-router";
function useForgeFloor() {
const findLevels = (viewer) => {
return new Promise((resolve, reject) => {
viewer.model.search(
"layer",
(nodeIds) => {
let levels = [];
const tree = viewer.model.getInstanceTree();
for (let i = 0; i < nodeIds.length; i++) {
const dbId = nodeIds[i];
const name = tree.getNodeName(dbId);
if (!name || name.includes("<沒有層級>")) continue;
levels.push({
guid: dbId,
name,
dbId,
extension: {
buildingStory: true,
structure: false,
computationHeight: 0,
groundPlane: false,
hasAssociatedViewPlans: false,
},
});
}
levels = levels.sort((a, b) => b.elevation - a.elevation);
resolve(levels);
},
(e) => {
reject(e);
}
);
});
const route = useRoute();
const levelList = ref([]);
const { selectedFloor } = useSelectedFloor();
const { subscribeData } = inject("system_deviceList");
const forgeViewer = ref(null);
const dataVizExtn = ref(null);
const updateViewerFloor = (viewer, dataVisualization) => {
forgeViewer.value = viewer;
dataVizExtn.value = dataVisualization;
};
// function getCutPlaneParam(idx, n, viewer, levels) {
// if (idx < 0 || !n) return;
const findLevels = () => {
forgeViewer.value.model.search(
"layer",
(nodeIds) => {
let levels = [];
const tree = forgeViewer.value.model.getInstanceTree();
for (let i = 0; i < nodeIds.length; i++) {
const dbId = nodeIds[i];
const name = tree.getNodeName(dbId);
if (!name || name.includes("<沒有層級>")) continue;
levels.push({
guid: dbId,
name,
dbId,
extension: {
buildingStory: true,
structure: false,
computationHeight: 0,
groundPlane: false,
hasAssociatedViewPlans: false,
},
});
}
levels = levels.sort((a, b) => b.elevation - a.elevation);
console.log(levels);
levelList.value = levels;
},
(e) => {
console.log(e);
}
);
};
// const level = levels[idx];
// if (!level) return;
watch(forgeViewer, () => {
findLevels();
});
// const model = 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;
const hideDbIdFn = () => {
const tree = forgeViewer.value?.model.getInstanceTree();
const allDbIdsStr = Object.keys(tree.nodeAccess.dbIdToIndex);
for (var i = 0; i < allDbIdsStr.length; i++) {
forgeViewer.value.hide(parseInt(allDbIdsStr[i]));
}
};
const showDbIdFn = () => {
hideDbIdFn();
subscribeData.value.forEach((value, index) => {
forgeViewer.value.show(value.forge_dbid);
});
// return new THREE.Vector4(0, 0, n, d);
// }
forgeViewer.value.impl.invalidate(true);
};
// function profile(viewer, levels) {
// //const upperIdx = 6;
// const upperCutPlaneParam = getCutPlaneParam(2, 1, viewer, levels);
// //const lowerIdx = 7;
// const lowerCutPlaneParam = getCutPlaneParam(3, -1, viewer, levels);
// viewer.setCutPlanes([upperCutPlaneParam, lowerCutPlaneParam]);
// }
const showLevels = () => {
if (forgeViewer.value) {
const currentFloorName =
selectedFloor.value?.title?.replaceAll(/U/gi, "") || "";
const level = levelList.value.find(({ name }) =>
name.includes(currentFloorName)
);
console.log(currentFloorName, level);
if (!level) {
forgeViewer.value?.impl.toggleGhosting(true);
forgeViewer.value?.fitToView([forgeViewer.value.model.getRootId()]);
showDbIdFn();
} else {
hideDbIdFn();
// forgeViewer.value.clearSelection();
// forgeViewer.value.model.setAllVisibility(0);
forgeViewer.value.impl.toggleGhosting(false);
// forgeViewer.value.impl.toggleGroundShadow(false);
forgeViewer.value.show(level.dbId);
forgeViewer.value.impl.invalidate(true);
forgeViewer.value.fitToView([level.dbId]);
}
}
};
return { findLevels, profile };
watch(
() => route,
(newValue) => {
console.log(newValue);
newValue && showLevels();
},
{
deep: true,
}
);
return { findLevels, showLevels, updateViewerFloor };
}
export default useForgeFloor;

138
src/hooks/forge/useForgeHeatmap.js
View File

@ -1,49 +1,141 @@
import { watch, inject, markRaw, ref } from "vue";
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(dataVizExtn, forgeViewer){
const { subscribeData } = inject("system_deviceList");
export default function useForgeHeatmap() {
const route = useRoute();
const { subscribeData, realtimeData } = inject("system_deviceList");
const createHeatMap = async (heatMapName) => {
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(`iot_heatmap_${heatMapName}`);
const shadingGroup = new SurfaceShadingGroup(`${heatMapName}`);
const rooms = new Map();
for (const { id, roomDbId, position, sensorTypes } of subscribeData.value) {
if (!id || roomDbId == -1 || !roomDbId) {
continue;
}
const roomSet = new Set(data.value.map(({ room_dbid }) => room_dbid));
if (!rooms.has(roomDbId)) {
const room = new SurfaceShadingNode(id, roomDbId);
shadingGroup.addChild(room);
rooms.set(roomDbId, room);
// 每個room是一個node
[...roomSet].forEach((roomDbId) => {
if (!roomDbId) {
return;
}
const room = rooms.get(roomDbId);
room.addPoint(new SurfaceShadingPoint(id, position, sensorTypes));
}
const room = new SurfaceShadingNode(`room_${roomDbId}`, roomDbId);
const shadingData = new SurfaceShadingData();
//相同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(
heatMapName,
[0x0000ff, 0x00ff00, 0xffff00, 0xff0000]
route.query?.gas,
store.heatmapConfig?.color
);
dataVizExtn.value.renderSurfaceShading(
`iot_heatmap_${heatMapName}`,
heatMapName,
route.query?.gas,
getSensorValue
);
};
}
watch(
data,
(newValue, oldValue) => {
dataVizExtn.value?.removeSurfaceShading();
createHeatMap(route.query.gas);
},
{ deep: true }
);
return { createHeatMap, updateViewExtension };
}

44
src/hooks/forge/useForgeSprite.js
View File

@ -1,17 +1,21 @@
import { watch, inject, markRaw, ref, computed } from "vue";
import { watch, inject, markRaw, ref, computed, provide } from "vue";
import useAlarmStore from "@/stores/useAlarmStore";
import hexToRgb from "@/util/hexToRgb";
import { useRoute } from "vue-router";
import useSelectedFloor from "@/hooks/useSelectedFloor";
import useSystemShowData from "@/hooks/useSystemShowData"
import useForgeHeatmap from "./useForgeHeatmap";
import useForgeFloor from "./useForgeFloor";
export default function useForgeSprite() {
const store = useAlarmStore();
const { subscribeData } = inject("system_deviceList");
const { getCurrentInfoModalData, clearSelectedDeviceInfo } = inject(
"system_selectedDevice"
);
const forgeViewer = ref(null);
const dataVizExtn = ref(null);
const { createHeatMap, updateViewExtension } = useForgeHeatmap();
const { updateViewerFloor } = useForgeFloor();
const updateDataVisualization = async (viewer) => {
if (!forgeViewer.value) {
forgeViewer.value = markRaw(viewer);
@ -21,6 +25,8 @@ export default function useForgeSprite() {
"Autodesk.DataVisualization"
);
dataVizExtn.value = markRaw(dataVisualization);
updateViewExtension(markRaw(viewer), markRaw(dataVisualization));
updateViewerFloor(markRaw(viewer), markRaw(dataVisualization))
};
function onSpriteClicked(event) {
@ -35,7 +41,6 @@ export default function useForgeSprite() {
console.log("onSpriteClicked", event.target);
console.log("onSpriteClicked", data);
// modalContent.value = data;
debugger;
if (data) {
getCurrentInfoModalData(
event,
@ -45,14 +50,7 @@ export default function useForgeSprite() {
}
}
const { selectedFloor } = useSelectedFloor();
const showData = computed(() =>
selectedFloor.value?.key === "main"
? subscribeData.value
: subscribeData.value.filter(
({ floor_guid }) => floor_guid === selectedFloor.value?.key
) || []
);
const { flatSubData } = useSystemShowData()
// 創建 sprites
const createSprites = async () => {
@ -70,9 +68,8 @@ export default function useForgeSprite() {
);
const viewableData = new DataVizCore.ViewableData();
viewableData.spriteSize = 24; // Sprites as points of size 24 x 24 pixels
showData.value?.forEach((d, index) => {
flatSubData.value?.forEach((d, index) => {
if (d.device_coordinate_3d) {
console.log(d.device_coordinate_3d);
const position = d.device_coordinate_3d;
style.color = new THREE.Color(hexToRgb(d.device_normal_color));
const viewable = new DataVizCore.SpriteViewable(
@ -89,6 +86,7 @@ export default function useForgeSprite() {
viewableData.finish().then(
() => {
dataVizExtn.value.addViewables(viewableData);
createHeatMap();
},
(error) => {
console.log(error);
@ -98,9 +96,12 @@ export default function useForgeSprite() {
};
watch(
() => showData,
() => flatSubData,
() => {
forgeViewer.value?.isLoadDone() && createSprites();
if (forgeViewer.value?.isLoadDone()) {
createSprites();
showSubSystemObjects();
}
},
{
deep: true,
@ -146,7 +147,10 @@ export default function useForgeSprite() {
for (var i = 0; i < allDbIdsStr.length; i++) {
forgeViewer.value.hide(parseInt(allDbIdsStr[i]));
}
};
const showSubSystemObjects = () => {
hideAllObjects();
subscribeData.value.forEach((value, index) => {
forgeViewer.value.show(value.forge_dbid);
});
@ -166,11 +170,13 @@ export default function useForgeSprite() {
forgeViewer.value.tearDown();
};
return {
createSprites,
updateDataVisualization,
hideAllObjects,
showSubSystemObjects,
forgeClickListener,
clear
clear,
};
}

27
src/hooks/useSystemShowData.js Normal file
View File

@ -0,0 +1,27 @@
import useSelectedFloor from "@/hooks/useSelectedFloor";
import { computed, inject, watch } from "vue";
function useSystemShowData() {
const { data } = inject("system_deviceList");
const { selectedFloor } = useSelectedFloor();
const showData = computed(() =>
selectedFloor.value?.key === "main"
? data.value
: data.value.filter(
({ floor_guid }) => floor_guid === selectedFloor.value?.key
) || []
);
const flatSubData = computed(() => {
let items = [];
showData.value.forEach((device) => {
items = [...items, ...device.device_list];
});
return items;
});
return { showData, flatSubData };
}
export default useSystemShowData;

31
src/stores/useHeatmapBarStore.js Normal file
View File

@ -0,0 +1,31 @@
import { defineStore } from "pinia";
import axios from "axios";
import { useRoute } from "vue-router";
import { computed, ref, onMounted } from "vue";
const useHeatmapBarStore = defineStore("heatmap", () => {
const route = useRoute();
const allHeatMaps = ref({});
const heatmapConfig = computed(() => allHeatMaps.value[route.query?.gas]);
const getConfig = async () => {
const api =
import.meta.env.MODE === "production"
? "/dist/config.json"
: "/config.json";
const res = await axios.get(api);
console.log(res);
allHeatMaps.value = res.data.heatmap;
};
onMounted(() => {
getConfig();
});
const heat_bar_isShow = computed(() => Boolean(heatmapConfig.value));
return { heatmapConfig, heat_bar_isShow };
});
export default useHeatmapBarStore;

9
src/views/system/System.vue
View File

@ -41,12 +41,11 @@ const getData = async () => {
building_tag: buildingStore.selectedBuilding?.building_tag,
})
const devices = res.data.map(d => ({
...d, key: d.full_name, device_list: d.device_list.map((dev, index) => ({
...d, key: d.full_name, device_list: d.device_list.filter(({ device_coordinate_3d }) => device_coordinate_3d).map((dev, index) => ({
...dev,
forge_dbid: parseInt(dev.forge_dbid),
device_coordinate_3d: dev.device_coordinate_3d
? JSON.parse(dev.device_coordinate_3d)
: null,
room_dbid: parseInt(dev.room_dbid),
device_coordinate_3d: JSON.parse(dev.device_coordinate_3d),
alarmMsg: "",
is_show: true,
currentColor: dev.device_normal_point_color,
@ -168,7 +167,7 @@ const getCurrentInfoModalData = (e, position, value) => {
const selectedDeviceRealtime = computed(() => realtimeData.value?.find(({ device_number }) => device_number === selectedDevice.value?.value?.device_number)?.data)
const clearSelectedDeviceInfo = () => {
selectedDevice.value.value = null;
}

21
src/views/system/components/SystemCard.vue
View File

@ -1,19 +1,18 @@
<script setup>
import { computed, inject, watch } from "vue"
import useSelectedFloor from "@/hooks/useSelectedFloor"
const { data } = inject("system_deviceList")
import useSystemShowData from "@/hooks/useSystemShowData"
const { getCurrentInfoModalData } = inject("system_selectedDevice")
const { selectedFloor } = useSelectedFloor()
const { showData } = useSystemShowData()
const showData = computed(() => selectedFloor.value?.key === 'main' ? data.value : data.value.filter(({ floor_guid }) => floor_guid === selectedFloor.value?.key) || [])
watch(selectedFloor, (newValue) => {
console.log(newValue)
})
const fitToView = (forge_dbid) => {
// console.log(forge_dbid)
// window.NOP_VIEWER.hide(forge_dbid + 3);
// window.NOP_VIEWER.impl.invalidate(true);
window.NOP_VIEWER.fitToView([forge_dbid])
}
</script>
<template>
@ -25,7 +24,7 @@ watch(selectedFloor, (newValue) => {
<p class="title">{{ d.full_name }}</p>
<div class="grid grid-cols-3 gap-5">
<div class="col-auto relative" v-for="device in d.device_list" :key="device.device_guid">
<div class="item h-36">
<div class="item h-36" @click="() => fitToView(device.forge_dbid)">
<div class="left w-4/5 h-full flex flex-wrap justify-center">
<div class="sec02 w-full">
<img v-if="device.device_image_url" :src="device.device_image_url" alt="" class="w-8 h-8">
@ -39,7 +38,7 @@ watch(selectedFloor, (newValue) => {
<span>{{ device.device_status }}</span>
</div>
<button class="btn-text border-0 "
@click.stop.prevent="(e) => getCurrentInfoModalData(e, { left: e.clientX, top: e.clientY }, device)">{{
@click.prevent="(e) => getCurrentInfoModalData(e, { left: e.clientX, top: e.clientY }, device)">{{
$t("system.details") }}</button>
</div>
</div>

2
src/views/system/components/SystemFloorBar.vue
View File

@ -39,7 +39,7 @@ const onClick = (item) => {
router.push({
name: 'sub_system', params: {
...route.params, floor_id: item.key
}, query: { ...route.query, gas: route.query.gas }
}, query: { ...route.query, gas: route.query.gas, mode: route.params.floor_id === "main" ? "3D" : route.query.mode }
})
}