From 258f28e056b74ed44e21b0d19094389f5880c9c1 Mon Sep 17 00:00:00 2001 From: ko1234 Date: Thu, 21 Nov 2024 09:27:30 +0800 Subject: [PATCH] =?UTF-8?q?=E7=B3=BB=E7=B5=B1=E7=9B=A3=E6=8E=A7:=20?= =?UTF-8?q?=E9=BB=9E=E6=93=8Acard=E6=99=82zoom=20in=20=E4=B8=94=20Sprite?= =?UTF-8?q?=20=E6=94=BE=E5=A4=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/forge/useForgeSprite.js | 69 ++++++++++++++++------ src/views/system/System.vue | 3 +- src/views/system/components/SystemCard.vue | 21 ++----- 3 files changed, 56 insertions(+), 37 deletions(-) diff --git a/src/hooks/forge/useForgeSprite.js b/src/hooks/forge/useForgeSprite.js index 996632c..24ad035 100644 --- a/src/hooks/forge/useForgeSprite.js +++ b/src/hooks/forge/useForgeSprite.js @@ -7,11 +7,11 @@ import useForgeFloor from "./useForgeFloor"; export default function useForgeSprite() { const { subscribeData } = inject("system_deviceList"); - const { getCurrentInfoModalData, clearSelectedDeviceInfo } = inject( - "system_selectedDevice" - ); + const { getCurrentInfoModalData, clearSelectedDeviceInfo, selected_dbid } = + inject("system_selectedDevice"); const forgeViewer = ref(null); const dataVizExtn = ref(null); + let lastClickedDbId = null; const { createHeatMap, updateViewExtension } = useForgeHeatmap(); const { updateViewerFloor } = useForgeFloor(); @@ -109,6 +109,19 @@ export default function useForgeSprite() { } ); + watch( + () => selected_dbid, + () => { + if (forgeViewer.value?.isLoadDone()) { + cardfitToView(selected_dbid.value); + } + }, + { + immediate: true, + deep: true, + } + ); + const forgeClickListener = () => { console.log("監聽forge"); @@ -122,25 +135,42 @@ export default function useForgeSprite() { ); }; - const fitToView = () => { - const { x, y, z } = JSON.parse(searchParams.value.camera_position); - const newPosition = new THREE.Vector3(x, y, z); //!<<< 相机的新位置 + const cardfitToView = async ([forge_dbid,spriteDbId]) => { + try { + // 相機調整 + const nav = forgeViewer.value.navigation; + const camera = nav.getCamera(); + forgeViewer.value.fitToView([forge_dbid], null, true); + const direction = new THREE.Vector3(); + camera.getWorldDirection(direction); + const distanceBack = 30; + camera.position.add(direction.multiplyScalar(-distanceBack)); + const target = nav.getTarget(); + const fov = nav.getVerticalFov(); + nav.setRequestTransition(true, camera.position, target, fov); - const { - x: x1, - y: y1, - z: z1, - } = JSON.parse(searchParams.value.target_position); //!<<< 计算新焦点位置 - const newTarget = new THREE.Vector3(x1, y1, z1); //!<<< 焦點的新位置 + + if (lastClickedDbId !== null && lastClickedDbId !== spriteDbId) { + dataVizExtn.value.invalidateViewables([lastClickedDbId], (viewable) => { + return { + scale: 1.0, // 恢復為 scale 1 + }; + }); + } + + dataVizExtn.value.invalidateViewables([spriteDbId], (viewable) => { + return { + scale: 2.0, // 設置為 scale 2 + }; + }); - NOP_VIEWER.navigation.getCamera().setView({ - position: newPosition.clone(), - target: newTarget.clone(), - }); - setTimeout(() => { - updateDbidPosition(NOP_VIEWER, subscribeData.value); - }, 700); + lastClickedDbId = spriteDbId; + + } catch (error) { + console.error("Error in cardfitToView:", error); + } }; + const hideAllObjects = () => { const tree = forgeViewer.value.model.getInstanceTree(); @@ -179,5 +209,6 @@ export default function useForgeSprite() { showSubSystemObjects, forgeClickListener, clear, + cardfitToView, }; } diff --git a/src/views/system/System.vue b/src/views/system/System.vue index f8895a5..10cc9aa 100644 --- a/src/views/system/System.vue +++ b/src/views/system/System.vue @@ -38,6 +38,7 @@ const data = ref([]); // filter data const route = useRoute(); const floors = ref([]); const companyOptions = ref([]); +const selected_dbid = ref([]); const getFloors = async () => { const res = await getAssetFloorList(); @@ -218,7 +219,7 @@ const clearSelectedDeviceInfo = () => { selectedDevice.value.value = null; } -provide("system_selectedDevice", { selectedDeviceRealtime, selectedDevice, getCurrentInfoModalData, clearSelectedDeviceInfo, selectedDeviceCog, }) +provide("system_selectedDevice", { selectedDeviceRealtime, selectedDevice, getCurrentInfoModalData, clearSelectedDeviceInfo, selectedDeviceCog, selected_dbid }) onBeforeUnmount(() => { clearInterval(timeId.value); diff --git a/src/views/system/components/SystemCard.vue b/src/views/system/components/SystemCard.vue index 9af0e04..f1133bb 100644 --- a/src/views/system/components/SystemCard.vue +++ b/src/views/system/components/SystemCard.vue @@ -2,26 +2,13 @@ import { computed, inject, watch } from "vue" import useSystemShowData from "@/hooks/useSystemShowData" -const { getCurrentInfoModalData } = inject("system_selectedDevice") +const { getCurrentInfoModalData, selected_dbid } = inject("system_selectedDevice") const { showData } = useSystemShowData() const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL; -const fitToView = (forge_dbid) => { - const viewer = window.NOP_VIEWER; - if (!viewer) return; - - const nav = viewer.navigation; - const camera = nav.getCamera(); - viewer.fitToView([forge_dbid], null, true); - const direction = new THREE.Vector3(); - camera.getWorldDirection(direction); - // 退後一段距離 - const distanceBack = 30; // 控制退後的距離 - camera.position.add(direction.multiplyScalar(-distanceBack)); - const target = nav.getTarget(); - const fov = nav.getVerticalFov(); - nav.setRequestTransition(true, camera.position, target, fov); +const fitToView = (forge_dbid,spriteDbId) => { + selected_dbid.value=[forge_dbid,spriteDbId]; }; @@ -35,7 +22,7 @@ const fitToView = (forge_dbid) => {

{{ d.full_name }}

-
+