diff --git a/src/components/forge/ForgeForSystem.vue b/src/components/forge/ForgeForSystem.vue index b39106a..3e111b8 100644 --- a/src/components/forge/ForgeForSystem.vue +++ b/src/components/forge/ForgeForSystem.vue @@ -33,7 +33,7 @@ const updateHeatBarIsShow = (isShow) => { heat_bar_isShow.value = isShow; }; -const { updateDataVisualization, createSprites, hideAllObjects, forgeClickListener } = useForgeSprite() +const { updateDataVisualization, createSprites, hideAllObjects, forgeClickListener, clear } = useForgeSprite() const forgeDom = ref(null); @@ -163,12 +163,9 @@ const initForge = async () => { viewer.isLoadDone() ); - if (viewer.isLoadDone()) { - // updateForgeViewer(viewer); - hideAllObjects(); - createSprites(); - forgeClickListener(); - } + hideAllObjects(); + createSprites(); + forgeClickListener(); }) }; @@ -197,7 +194,7 @@ const getCurrentInfoModalData = (e, position, value) => { onUnmounted(() => { console.log("Forge 銷毀"); - NOP_VIEWER.tearDown(); + clear(); }); diff --git a/src/hooks/forge/useForgeFloor.js b/src/hooks/forge/useForgeFloor.js new file mode 100644 index 0000000..04a3307 --- /dev/null +++ b/src/hooks/forge/useForgeFloor.js @@ -0,0 +1,70 @@ +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); + } + ); + }); + }; + + // function getCutPlaneParam(idx, n, viewer, levels) { + // if (idx < 0 || !n) return; + + // const level = levels[idx]; + // if (!level) return; + + // 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; + + // return new THREE.Vector4(0, 0, n, d); + // } + + // 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]); + // } + + + + return { findLevels, profile }; +} + +export default useForgeFloor; diff --git a/src/hooks/forge/useForgeSprite.js b/src/hooks/forge/useForgeSprite.js index f1c5398..6a6678c 100644 --- a/src/hooks/forge/useForgeSprite.js +++ b/src/hooks/forge/useForgeSprite.js @@ -7,6 +7,9 @@ import useSelectedFloor from "@/hooks/useSelectedFloor"; 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 updateDataVisualization = async (viewer) => { @@ -20,12 +23,27 @@ export default function useForgeSprite() { dataVizExtn.value = markRaw(dataVisualization); }; - const onSpriteClicked = (event) => { + function onSpriteClicked(event) { event.hasStopped = true; - console.log("onSpriteClicked", event); - // const data = deviceList.value.find((d) => d.spriteDbId === event.dbId); + + if (event.type === Autodesk.DataVisualization.Core.MOUSE_CLICK_OUT) return; + + const data = subscribeData.value.find( + (d) => + d.spriteDbId === event.dbId || d.forge_dbid === event.dbIdArray?.[0] + ); + console.log("onSpriteClicked", event.target); + console.log("onSpriteClicked", data); // modalContent.value = data; - }; + debugger; + if (data) { + getCurrentInfoModalData( + event, + { left: event.target.startX, top: event.target.startY }, + data + ); + } + } const { selectedFloor } = useSelectedFloor(); const showData = computed(() => @@ -90,12 +108,14 @@ export default function useForgeSprite() { ); const forgeClickListener = () => { + console.log("監聽forge"); + forgeViewer.value.addEventListener( Autodesk.DataVisualization.Core.MOUSE_CLICK, onSpriteClicked ); forgeViewer.value.addEventListener( - Autodesk.Viewing.SELECTION_CHANGED_EVENT, + Autodesk.DataVisualization.Core.MOUSE_CLICK_OUT, onSpriteClicked ); }; @@ -134,10 +154,23 @@ export default function useForgeSprite() { forgeViewer.value.impl.invalidate(true); }; + const clear = () => { + forgeViewer.value.removeEventListener( + Autodesk.DataVisualization.Core.MOUSE_CLICK, + onSpriteClicked + ); + forgeViewer.value.removeEventListener( + Autodesk.DataVisualization.Core.MOUSE_CLICK_OUT, + onSpriteClicked + ); + forgeViewer.value.tearDown(); + }; + return { createSprites, updateDataVisualization, hideAllObjects, forgeClickListener, + clear }; } diff --git a/src/views/system/System.vue b/src/views/system/System.vue index dbba160..ef6779d 100644 --- a/src/views/system/System.vue +++ b/src/views/system/System.vue @@ -35,6 +35,7 @@ const data = ref([]) // filter data const route = useRoute() const getData = async () => { + if (!route.params.sub_system_id) return const res = await getSystemDevices({ sub_system_tag: route.params.sub_system_id, building_tag: buildingStore.selectedBuilding?.building_tag, @@ -167,7 +168,8 @@ 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 + + selectedDevice.value.value = null; } provide("system_selectedDevice", { selectedDeviceRealtime, selectedDevice, getCurrentInfoModalData, clearSelectedDeviceInfo }) @@ -206,8 +208,10 @@ provide("system_selectedDevice", { selectedDeviceRealtime, selectedDevice, getCu
- -
+ +
diff --git a/src/views/system/SystemFloor.vue b/src/views/system/SystemFloor.vue index 417d39f..dba1a11 100644 --- a/src/views/system/SystemFloor.vue +++ b/src/views/system/SystemFloor.vue @@ -12,7 +12,17 @@ const { getCurrentInfoModalData } = inject("system_selectedDevice") const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL; const asset_floor_chart = ref(null); -const defaultOption = (map, data = []) => ({ +const sameOption = { + type: "effectScatter", + coordinateSystem: "geo", + geoIndex: 0, + symbolSize: 10, + encode: { + tooltip: 2, + }, +} +const defaultOption = (map, data = []) => { +return { tooltip: {}, geo: { tooltip: { @@ -21,20 +31,24 @@ const defaultOption = (map, data = []) => ({ map, roam: true, // 一定要关闭拖拽 }, - series: { - type: "effectScatter", - coordinateSystem: "geo", - geoIndex: 0, - symbolSize: 10, - itemStyle: { - color: "#b02a02", + series: [ + { + ...sameOption, + itemStyle: { + color: data?.[0]?.[2]?.device_normal_color || "#b02a02", + }, + data, }, - encode: { - tooltip: 2, - }, - data, - }, -}); + // { + // itemStyle: { + // color: "#555555", + // }, + // data: data?.[1], + // } + ], +} + +}; const { selectedFloor } = useSelectedFloor() @@ -46,7 +60,7 @@ watch([selectedFloor, () => asset_floor_chart,], ([newValue, newChart], [oldValu path: `${FILE_BASEURL}/${newValue.map_url}`, }, - defaultOption(newValue?.title, subscribeData.value.filter(d => d.device_coordinate && d.floor_guid === route.params.floor_id).map(d => [...d.device_coordinate.split(","), d])) + defaultOption(newValue?.title, subscribeData.value?.filter(d => d.device_coordinate && d.floor_guid === route.params.floor_id).map(d => [...d.device_coordinate.split(","), d]) || []) ); newChart.value.chart.on("click", function (params) { console.log(params, params.data[2]) diff --git a/src/views/system/components/SystemCard.vue b/src/views/system/components/SystemCard.vue index a8c06d4..3969ab8 100644 --- a/src/views/system/components/SystemCard.vue +++ b/src/views/system/components/SystemCard.vue @@ -25,21 +25,22 @@ watch(selectedFloor, (newValue) => {

{{ d.full_name }}

-
-
-
+
+
+
{{ device.full_name }}
-
+
- - {{$t("system.status")}}： - + + {{ $t("system.status") }}： + {{ device.device_status }}
+ @click.stop.prevent="(e) => getCurrentInfoModalData(e, { left: e.clientX, top: e.clientY }, device)">{{ + $t("system.details") }}
@@ -129,11 +130,11 @@ watch(selectedFloor, (newValue) => { align-items: center; } -.equipment-show .item .sec03 span:nth-child(1) { +/* .equipment-show .item .sec03 span:nth-child(1) { width: 15px; height: 15px; border-radius: 100%; display: block; margin-right: 10px; -} +} */ \ No newline at end of file diff --git a/src/views/system/components/SystemInfoModal.vue b/src/views/system/components/SystemInfoModal.vue index a6df1d2..125a217 100644 --- a/src/views/system/components/SystemInfoModal.vue +++ b/src/views/system/components/SystemInfoModal.vue @@ -14,7 +14,6 @@ const position = ref({ watch( data, (newValue) => { - console.log(newValue.value) if (!newValue.value) { position.value = { display: "none" diff --git a/src/views/system/components/SystemInfoModalContent.vue b/src/views/system/components/SystemInfoModalContent.vue index 279aeb2..6513217 100644 --- a/src/views/system/components/SystemInfoModalContent.vue +++ b/src/views/system/components/SystemInfoModalContent.vue @@ -65,7 +65,7 @@ const onCancel = () => {
-
+
diff --git a/src/views/system/components/SystemInfoModalDesktop.vue b/src/views/system/components/SystemInfoModalDesktop.vue index 90f40df..57d3e87 100644 --- a/src/views/system/components/SystemInfoModalDesktop.vue +++ b/src/views/system/components/SystemInfoModalDesktop.vue @@ -8,10 +8,10 @@ const { selectedDevice, selectedDeviceRealtime } = inject("system_selectedDevice const data = computed(() => { - return selectedDeviceRealtime?.value && selectedDevice.value?.value.points.map((d) => ({ + return selectedDevice.value?.value?.points?.map((d) => ({ ...d, value: selectedDeviceRealtime?.value?.find(({ point }) => point === d.points)?.value || "無資料" - })) + })) || [] }) const columns = [{