君泰BI大屏提交

张诺

8 小时以前 e73f1a0bcc36ada8043ea67c1daebf1de88f49b1

君泰BI大屏提交

 src/views/reportAnalysis/dataDashboard/index.vue

@@ -1,6 +1,6 @@
<template>
    <div class="scale-container" :style="{ transform: `scale(${scaleRatio})` }">
      <div class="data-dashboard">
        <div class="scale-container">
            <div class="data-dashboard" :style="{ transform: `scale(${scaleRatio})` }">
      <!-- 全屏按钮 - 移动到左上角 -->
      <button class="fullscreen-btn" @click="toggleFullscreen" :title="isFullscreen ? '退出全屏' : '全屏显示'">
        <svg v-if="!isFullscreen" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -609,8 +609,9 @@
  if (!container) return
  
  // 获取容器的实际尺寸
  const containerWidth = container.clientWidth || window.innerWidth
  const containerHeight = container.clientHeight || window.innerHeight
    const rect = container.getBoundingClientRect?.()
    const containerWidth = container.clientWidth || rect?.width || window.innerWidth
    const containerHeight = container.clientHeight || rect?.height || window.innerHeight
  
  // 计算宽高缩放比例，取较小值以保证内容完整显示（等比缩放）
  const scaleX = containerWidth / designWidth
@@ -1088,14 +1089,14 @@
/* 外部缩放容器 - 占据整个视口 */
.scale-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
    width: 100%;
    /* 页面在常规布局下（有顶栏）默认减去 84px，避免内容被裁切 */
    height: calc(100vh - 84px);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  background-color: #000;
    overflow: hidden;
}

/* 内部内容区域 - 固定设计尺寸 */
@@ -1107,12 +1108,13 @@
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform-origin: center center;
}

/* 全屏状态的样式 - 作用于scale-container */
.scale-container:fullscreen {
  width: 100vw;
  height: 100vh;
    width: 100vw;
    height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #000;
@@ -1143,7 +1145,7 @@
.dashboard-header {
  position: relative;
  z-index: 1;
  height: 170px;
    height: 86px;
    background-image: url("@/assets/BI/biaoti.png");
    background-size: cover;
    background-position: center;
@@ -1157,7 +1159,7 @@
  font-weight: 600;
font-size: 52px;
color: #FFFFFF;
top: 32px;
top: 16px;
position: absolute;
}

@@ -1190,7 +1192,7 @@
  display: flex;
  gap: 30px;
  padding: 0 30px;
  height: calc(100% - 120px);
    height: calc(100% - 86px);
  overflow: hidden;
}