vue数字孪生可视化自适应

写在前面

前面博主写过一篇文章 面试官：除了 HTTP，你还用过什么通信协议？(Websocket 在数字孪生中的应用)，简述了数字孪生产品的数据更新机制，对于数字孪生产品来说，数据非常重要，孪生世界的数据呈现可以反映现实世界的真实情况，而在数据展示中，除了数据更新机制之外，还有一个非常非常重要的东西，那就是可视化表格的展现，而由于数字孪生可视化界面主要用于展示数据，因此在大部分应用场景中，它经常被放到各式各样的展示屏幕展示，可能是普通的电脑屏幕，可能是平板，也有可能是好几块屏幕组成的可视化大屏系统，那么表格的自适应便成了展示的重要衡量标准，如何完成自适应调整，将在产品体验中占据非常重要的比重！

各自适应方案对比

百分比自适应方案

按百分比实现自适应应该是最最简单的方式了，不需要额外增加如何配置，即可实现，我们来做个试验测试一下按百分比实现自适应的效果

<template>
  <div class="box">
    <div class="inner-box">
    </div>
  </div>
</template>
<style lang='scss' scope>
  .box {
    width: 100vw;
    height: 100vh;
    .inner-box {
      width: 20%;
      height: 20%;
      background: cadetblue;
    }
  }
</style>

我们先定义一个外部容器 box ，然后在 box 里创建一个用于自适应的长方形 inner-box，然后将自适应长方形宽和高都设置为20%

我们可以看到，当我们将其宽高都设置为百分比时，window 的宽、高变化时，长方形的宽和高也将随着发生变化，可以实现初步的自适应。

而当我们将这样一个自适应方案应用到数字孪生可视化界面上时，我们会发现，效果有点差强人意

通过我们模拟占位的表格可以很明显看出，当我们对窗口进行横向和竖向的缩放时，左右边的表格是进行了自适应的，而由于在这个自适应方案中宽和高并没有什么联系，导致了宽高各自自适应，最终导致了表格宽高比例严重失衡，展现得非常 ugly，所以，这个方案在数字孪生可视化这个应用场景中并不适合。

Rem + Resize

第二个方案采用的是 rem，而 rem 的原理是根据根元素 fontsize 来计算 rem 的单位长度，那么我们就可以通过监听 window 的 resize，动态修改 fontsize，进而影响 rem，最终达到自适应的效果，下面我们做个测试

// resize.js
const scaleListener = () => {
  window.addEventListener('resize', resize)
  console.log('scaleListening......')
}
const resize = () => {
  // 与原来 1080 的比值
  let scale = window.innerHeight / 1080
  document.documentElement.style.fontSize = `${16 * scale}px` 
  console.log('resize')
}
export {
  scaleListener
}
// APP.vue
<script>
import { scaleListener } from '../src/components/resize/resize';
export default {
  mounted() {
    scaleListener()
  },
}
</script>

首先我们定义了一个 resize 函数用于启动监听 window 的resize 事件，当 window 发生 resize 时，通过与事先定义的标准屏幕高度 1080 对比，计算比值，更新事先定义的标准 fontsize 16px。

这个时候，当我们在组件中使用 rem 作为单位时，随着 window 的 resize，rem 将被重置，元素也将被重置，值得注意的是，这个时候，由于表格的宽高采用的都是 rem ，因此在触发 resize 时，表格的宽高比例不会发生变化，也就达到了数字孪生可视化产品所应具有的自适应标准了

可能大家会有疑问，为啥是监听 height 而不是 width，主要的原因是数字孪生可视化界面一般表格都处于左右两边，宽度变化对于表格并不会造成大的影响，只要表格做到靠左、靠右显示即可，而高度才是影响表格的重要因素，当高度变化时，表格如果不进行缩放，表格的内容将会无法完整显示。