diff --git a/src/views/dashboard/overview/index.vue b/src/views/dashboard/overview/index.vue index cf8f4fbf..be8c3467 100644 --- a/src/views/dashboard/overview/index.vue +++ b/src/views/dashboard/overview/index.vue @@ -38,42 +38,42 @@ const appStore = useAppStore(); const { t } = useI18n(); const { wsSend, userActivitySend, upfTFSend, reSendUPF } = useWS(); -const viewportDom = ref(null); - -// 定义 resize 处理函数,确保能正确移除事件监听器 -const handleResize = () => { - setTimeout(calculateScale, 100); -}; - - - - - -// 计算缩放比例的函数 -const calculateScale = () => { - const container = document.querySelector('.dashboard-container') as HTMLElement; - const wrapper = document.querySelector('.dashboard-wrapper') as HTMLElement; - - if (!container || !wrapper) return; - - const containerWidth = 1400; // 设计宽度 - const containerHeight = 900; // 设计高度 - - // 获取可用空间(减去padding) - const availableWidth = wrapper.clientWidth - 40; - const availableHeight = wrapper.clientHeight - 40; - - // 计算缩放比例 - const scaleX = availableWidth / containerWidth; - const scaleY = availableHeight / containerHeight; - - // 选择较小的比例,确保内容完全可见 - const scale = Math.min(scaleX, scaleY); - - - container.style.transform = `scale(${scale})`; - container.style.transformOrigin = 'center center'; -}; +// const viewportDom = ref(null); +// +// // 定义 resize 处理函数,确保能正确移除事件监听器 +// const handleResize = () => { +// setTimeout(calculateScale, 100); +// }; +// +// +// +// +// +// // 计算缩放比例的函数 +// const calculateScale = () => { +// const container = document.querySelector('.dashboard-container') as HTMLElement; +// const wrapper = document.querySelector('.dashboard-wrapper') as HTMLElement; +// +// if (!container || !wrapper) return; +// +// const containerWidth = 1400; // 设计宽度 +// const containerHeight = 900; // 设计高度 +// +// // 获取可用空间(减去padding) +// const availableWidth = wrapper.clientWidth - 40; +// const availableHeight = wrapper.clientHeight - 40; +// +// // 计算缩放比例 +// const scaleX = availableWidth / containerWidth; +// const scaleY = availableHeight / containerHeight; +// +// // 选择较小的比例,确保内容完全可见 +// const scale = Math.min(scaleX, scaleY); +// +// +// container.style.transform = `scale(${scale})`; +// container.style.transformOrigin = 'center center'; +// }; /**概览状态类型 */ type SkimStateType = { @@ -114,6 +114,7 @@ let skimState: SkimStateType = reactive({ let neCascaderOptions = ref[]>([]); /**总览节点 */ +const viewportDom = ref(null); const { isFullscreen, toggle } = useFullscreen(viewportDom); let initFlag = false; @@ -357,22 +358,23 @@ const getPopupContainer = () => { // 使用 ref 或其他方式来引用你的 views 容器 // 如果 views 容器直接在这个组件内部,你可以使用 ref // 但在这个例子中,我们假设它是通过类名来获取的 - return document.querySelector('.dashboard-wrapper'); + // return document.querySelector('.dashboard-wrapper'); + return document.querySelector('.viewport'); }; onMounted(() => { - // 使用自定义缩放方案 - nextTick(() => { - // 确保DOM完全渲染 - setTimeout(() => { - calculateScale(); - }, 100); - - // 监听窗口大小变化 - window.addEventListener('resize', handleResize); - }); + // // 使用自定义缩放方案 + // nextTick(() => { + // // 确保DOM完全渲染 + // setTimeout(() => { + // calculateScale(); + // }, 100); + // + // // 监听窗口大小变化 + // window.addEventListener('resize', handleResize); + // }); neInfoStore .fnNelist() @@ -467,14 +469,14 @@ onBeforeUnmount(() => { clearInterval(interval5s.value); interval5s.value = null; initFlag = false; - // 清理事件监听和样式 - window.removeEventListener('resize', handleResize); + // // 清理事件监听和样式 + // window.removeEventListener('resize', handleResize); });