自适应功能

src/views/dashboard/overview/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
+import { onBeforeUnmount, onMounted, reactive, ref, nextTick } from 'vue';
 import svgBase from '@/assets/svg/base.svg';
 import svgUserIMS from '@/assets/svg/userIMS.svg';
 import svgUserSMF from '@/assets/svg/userSMF.svg';
@@ -38,6 +38,43 @@ const appStore = useAppStore();
 const { t } = useI18n();
 const { wsSend, userActivitySend, upfTFSend, reSendUPF } = useWS();
 
+const viewportDom = ref<HTMLElement | null>(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 = {
   /**UDM签约用户数量 */
@@ -77,7 +114,6 @@ let skimState: SkimStateType = reactive({
 let neCascaderOptions = ref<Record<string, any>[]>([]);
 
 /**总览节点 */
-const viewportDom = ref<HTMLElement | null>(null);
 const { isFullscreen, toggle } = useFullscreen(viewportDom);
 
 let initFlag = false;
@@ -321,10 +357,23 @@ const getPopupContainer = () => {
   // 使用 ref 或其他方式来引用你的 views 容器
   // 如果 views 容器直接在这个组件内部，你可以使用 ref
   // 但在这个例子中，我们假设它是通过类名来获取的
-  return document.querySelector('.viewport');
+  return document.querySelector('.dashboard-wrapper');
 };
 
 onMounted(() => {
+
+
+  // 使用自定义缩放方案
+  nextTick(() => {
+    // 确保DOM完全渲染
+    setTimeout(() => {
+      calculateScale();
+    }, 100);
+
+    // 监听窗口大小变化
+    window.addEventListener('resize', handleResize);
+  });
+
   neInfoStore
     .fnNelist()
     .then(res => {
@@ -418,21 +467,25 @@ onBeforeUnmount(() => {
   clearInterval(interval5s.value);
   interval5s.value = null;
   initFlag = false;
+  // 清理事件监听和样式
+  window.removeEventListener('resize', handleResize);
 });
 </script>
 
 <template>
-  <div class="viewport" ref="viewportDom">
-    <div class="brand">
-      <div
-        class="brand-title"
-        @click="toggle"
-        :title="t('views.dashboard.overview.fullscreen')"
-      >
-        {{ t('views.dashboard.overview.title') }}
-        <FullscreenExitOutlined v-if="isFullscreen" />
-        <FullscreenOutlined v-else />
-      </div>
+  <div class="dashboard-wrapper">
+    <div class="dashboard-container">
+      <div class="viewport" ref="viewportDom">
+      <div class="brand">
+        <div
+          class="brand-title"
+          @click="toggle"
+          :title="t('views.dashboard.overview.fullscreen')"
+        >
+          {{ t('views.dashboard.overview.title') }}
+          <FullscreenExitOutlined v-if="isFullscreen" />
+          <FullscreenOutlined v-else />
+        </div>
       <div class="brand-desc">{{ appStore.appName }}</div>
     </div>
 
@@ -807,14 +860,39 @@ onBeforeUnmount(() => {
             <NeResources />
           </div>
         </div>
+        </div>
       </div>
     </div>
   </div>
-</template>
-
-<style lang="less" scoped>
+  </div>
+</template><style lang="less" scoped>
 @import url('./css/index.css');
 
+/* Dashboard 页面专用包装器，不影响其他页面 */
+.dashboard-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #0b1023;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.dashboard-container {
+  width: 1400px;
+  height: 900px;
+  background: #0b1023;
+  position: relative;
+  overflow: visible;
+  flex-shrink: 0;
+}
+
 .toDeep {
   --editor-background-color: blue;
 }