大屏可视化方案

使用禁止缩放的方式来实现大屏数据可视化，一标准1920X1080从尺寸的方式来等比例缩放，并且禁止浏览器缩放方案：

1、封装标准尺寸的公共函数hooks：

新建useResize.js文件，代码示例如下：

import { ref, onMounted, onBeforeUnmount } from 'vue'

// 默认适配宽高
export const width = 1920
export const height = 1080


export const useResize = () => {
    const 
        w = width,
        h = height,
        fullScreen = true,
        delay = 100

    // 缩放元素
    const screenRef = ref()
    const scale = ref(1)
    function resize() {
        // 浏览器宽高
        const clientWidth = document.body.clientWidth
        const clientHeight = document.body.clientHeight
        // 计算宽高缩放比例
        const scaleW = clientWidth / w
        const scaleH = clientHeight / h

        if (clientWidth / clientHeight > w / h) {
            // 如果浏览器的宽高比大于设计稿的宽高比，就取浏览器高度和设计稿高度之比
            scale.value = scaleH
        } else {
            // 如果浏览器的宽高比小于设计稿的宽高比，就取浏览器宽度和设计稿宽度之比
            scale.value = scaleW
        }

        if (fullScreen) {
            // 如果不在乎缩放失真的情况，可以设置全屏
            screenRef.value.style.transform = `scale(${scaleW}, ${scaleH})`
        } else {
            // 否则选择适配比例缩放
            screenRef.value.style.transform = 'scale(' + scale.value + ')'
        }

    }
    function debounce(callback, delay) {
        let timerId
        return function (event) {
            // 如果上次事件还没有真正处理, 清除
            if (timerId) {
                clearTimeout(timerId)
            }

            // 发事件发生指定事件后才调用处理事件的回调函数
            // 启动定时器, 只是准备真正处理
            timerId = setTimeout(() => {
                // 正在处理事件
                callback.call(null, event)
                // 删除准备处理的标记
                timerId = null
            }, delay)
        }
    }

    const resizeDelay = debounce(resize, delay)
    onMounted(() => {
        if (screenRef.value) {
            resize()
            window.addEventListener('resize', resizeDelay)
        }
    })
    onBeforeUnmount(() => {
        window.removeEventListener('resize', resizeDelay)
    })

    return {
        scale,
        screenRef
    }
}

更加标准尺寸适配屏幕，返回缩放比率已经容器示例即可。

2、页面使用函数：

引入自定义适配文件并导出示例

import { useResize } from 'your-file-path/useResize' //布局自适应引入
const { screenRef } = useResize()//布局自适应引入

然后再页面绑定页面ref示例即可实现布局适配

<div ref="screenRef"></div>

3、页面布局设计：

可以在主页面定义一个布局组件Layout.vue文件，然后把大屏各个区域定义好，然后每个区域暴露一个插槽。然后各个插槽内定义各自区域的页面组件或者公共组件。可以统一把组件归档到components文件夹下面公共管理，布局页面的css样式自己完善即可。

 <div ref="screenRef">
        <!-- 头部 -->
        <slot name="header"></slot>
        <div class="">
            <!-- 左侧 -->
            <div class="">
                <div class="">
                    <slot name="leftTop"></slot>
                </div>
                <div class="">
                    <slot name="leftCenter"></slot>
                </div>
                <div class="">
                    <slot name="leftBottom"></slot>
                </div>
            </div>
            <!-- 中间 -->
            <div class="">
                <div class="centerTop">
                    <slot name="centerTop"></slot>
                </div>
                <div class="">
                    <slot name="centerCenter"></slot>
                </div>
                <div class="">
                    <slot name="centerBottom"></slot>
                </div>
            </div>
            <!-- 右侧 -->
            <div class="boxRight">
                <div class="">
                    <slot name="rightTop"></slot>
                </div>
                <div class="">
                    <slot name="rightCenter"></slot>
                </div>
                <div class="">
                    <slot name="rightBottom"></slot>
                </div>
            </div>
        </div>
    </div>

然后主页面引入布局即可，然后使用对应的组件在对应的位置：

<template>
    <Layout>
        <template #header>
            <Header></Header>
        </template>
    </Layout>
</template>

4、结尾

本文所属个人在处理大屏数据可视化使用的方案，不喜勿喷！谢谢！