| | |
| | | |
| | | <!-- 顶部标题栏 --> |
| | | <div class="dashboard-header"> |
| | | <div class="factory-name">生产数据分析</div> |
| | | <div class="factory-name">质量数据分析</div> |
| | | </div> |
| | | |
| | | <!-- 主要内容区域 --> |
| | |
| | | |
| | | <!-- 右侧区域 --> |
| | | <div class="right-panel"> |
| | | |
| | | <RightTop /> |
| | | <RightBottom /> |
| | | </div> |
| | |
| | | <script setup> |
| | | import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue' |
| | | import autofit from 'autofit.js' |
| | | import LeftBottom from './components/left-bottom.vue' |
| | | import CenterCenter from './components/center-center.vue' |
| | | import RightTop from './components/right-top.vue' |
| | | import RightBottom from './components/right-bottom.vue' |
| | |
| | | |
| | | // 缩放比例 |
| | | const scaleRatio = ref(1) |
| | | // 设计尺寸(基准尺寸)- 根据实际设计稿调整 |
| | | // 设计规格型号(基准规格型号)- 根据实际设计稿调整 |
| | | const designWidth = 1920 |
| | | const designHeight = 1080 |
| | | |
| | |
| | | const container = document.querySelector('.scale-container') |
| | | if (!container) return |
| | | |
| | | // 获取容器的实际尺寸 |
| | | // 获取容器的实际规格型号 |
| | | const rect = container.getBoundingClientRect?.() |
| | | const containerWidth = container.clientWidth || rect?.width || window.innerWidth |
| | | const containerHeight = container.clientHeight || rect?.height || window.innerHeight |
| | |
| | | overflow: hidden; |
| | | } |
| | | |
| | | /* 内部内容区域 - 固定设计尺寸 */ |
| | | /* 内部内容区域 - 固定设计规格型号 */ |
| | | .data-dashboard { |
| | | position: relative; |
| | | width: 1920px; |