<template>
<div class="dataScreen-container">
<div class="dataScreen" ref="dataScreenRef">
123123
</div>
</div>
</template>
<script setup lang="ts" name="dataScreen">
import { ref, Ref, onMounted, onBeforeUnmount, reactive } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const dataScreenRef = ref<HTMLElement | null>(null);
onMounted(() => {
// 初始化时为外层盒子加上缩放属性,防止刷新界面时就已经缩放
if (dataScreenRef.value) {
dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
dataScreenRef.value.style.width = `1920px`;
dataScreenRef.value.style.height = `1080px`;
}
// 初始化 echarts
// initCharts();
// 为浏览器绑定事件
window.addEventListener("resize", resize);
});
// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 1080) => {
let ww = window.innerWidth / width;
let wh = window.innerHeight / height;
return ww < wh ? ww : wh;
};
// 监听浏览器 resize 事件
const resize = () => {
if (dataScreenRef.value) {
dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
}
// 使用了 scale 的echarts其实不需要需要重新计算缩放比例
Object.values(dataScreen).forEach(chart => {
chart && chart.resize();
});
};
</script>
<style lang="scss" scoped>
.dataScreen-container {
width : 100%;
height : 100%;
background : url("./images/bg.png") no-repeat;
background-repeat : no-repeat;
background-attachment: fixed;
background-position : center;
background-size : 100% 100%;
background-size : cover;
}
.dataScreen {
position : fixed;
top : 50%;
left : 50%;
z-index : 999;
display : flex;
flex-direction : column;
overflow : hidden;
transition : transform 0.3s;
transform-origin: left top;
}
</style>
大小收缩 适用于数据大屏
最新推荐文章于 2024-10-10 09:56:47 发布