iot-ui-plus/src/views/data-visual/index.vue

<template>
  <div ref="screenRef" class="screenContainer" :style="{ width: `${baseWidth}px`, height: `${baseHeight}px` }">
    <div class="header">
      <Header />
    </div>
    <div class="main">
      <section class="charts">
        <Charts />
      </section>
      <section class="table">
        <Table />
      </section>
    </div>
  </div>
</template>
<script lang="ts" setup>
import Header from './components/header.vue';
import Charts from './components/charts.vue';
import Table from './components/table.vue';
const screenRef = ref<HTMLElement>();
const drawTiming = ref();
// * 默认缩放值
const scale = {
  width: '1',
  height: '1'
};

// * 设计稿尺寸（px）
const baseWidth = 2560;
const baseHeight = 1440;

// * 需保持的比例（默认32:9）
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));
onMounted(() => {
  calcRate();
});
window.addEventListener('resize', () => {
  // 监听窗口改变，改变后重新获取
  resize();
});
function calcRate() {
  const appRef = screenRef.value;
  if (!appRef) return;
  // 当前宽高比
  const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5));
  if (appRef) {
    if (currentRate > baseProportion) {
      // 表示更宽
      scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5);
      scale.height = (window.innerHeight / baseHeight).toFixed(5);
      appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
    } else {
      // 表示更高
      scale.height = (window.innerWidth / baseProportion / baseHeight).toFixed(5);
      scale.width = (window.innerWidth / baseWidth).toFixed(5);
      appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
    }
  }
}
function resize() {
  clearTimeout(drawTiming.value);
  drawTiming.value = setTimeout(() => {
    calcRate();
  }, 200);
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>