笔记&收藏&学习

Appearance

本文由 简悦 SimpRead 转码， 原文地址 mp.weixin.qq.com

Hello 大家好，我是日拱一卒的攻城师不浪，专注前端、后端、AI 学习、二三维可视化、GIS 等学习沉淀，这是 2024 年输出的第 13/100 篇文章，欢迎志同道合的朋友一起学习交流；

前言 ​

从毕业之后，自己就一直在做TOC的业务比较多，网站、H5、小程序等。

自从回到了二线城市，发现二线做自己产品的公司少之又少，而做政府或者企业的业务偏多，也就是数据可视化大屏，数字孪生类的业务较多。

因此我不得不从熟悉的 TOC 转为做TOG的业务，虽然现在自己主要负责公司的技术类产品的设计与研发，但是也主动包揽了 2 个项目的大屏开发工作，也是自己想体验并熟悉一下这块的业务开发，积累一下不同的经验。

大屏开发的特点 ​

开发完两个大屏之后，我总结了一下大屏开发与TOB业务开发一些不同点或者说难搞的一些点。

组件封装 ​

  • TOB：类似于后台管理这些系统，市面上一般都已经有比较好看且相对成熟的组件库或者相关插件了，可以直接拿来使用。

  • 大屏：大屏对应 UI 的要求还是蛮高的，而且基本上每个项目的大屏的 UI 设计都是相差巨大的，很难去封装好一个组件而用在多个项目里。

响应式设计 ​

  • TOB：后台管理系统一般很少做响应式开发，大部分都是会设置一个最小宽度，当屏幕宽度小于该宽度的时候会出现滚动条。还有一类是做了响应式，使用的是rem方案，主要用的是根据屏幕大小去动态修改像素值。

  • 大屏：大屏就必须得做响应式了，而方案也是有很多，目前主流的大屏响应式方案主要是缩放以及rem方案。

动效开发 ​

  • TOB：后台管理一般很少要求开发酷炫的动效，大多都比较朴素，与大屏的定位不同，后台管理追求的是功能好用，能够覆盖业务使用，用户体验好就行。

  • 大屏：而大屏的定位就不一样了，领导们都喜欢比较酷炫的效果，因此它必须得秀起来，越酷炫领导越高兴，就觉得越牛 X，签合同的概率就越大。因此大屏要求开发很多酷炫的效果，这就要求前端开发人员要熟悉CSS3等技术，要有一定的审美。

二维三维 ​

  • TOB：后台管理不用说了，都是二维开发，顶多加个echarts图表，看起来稍微秀一点，还是得益于 echarts 自己的动效封装😂。

  • 大屏：大屏开发很多时候会涉及到三维开发，例如数字孪生领域，会有一些三维模型，三维动效需要加载，这时候可能就会涉及到一些三维开发技术：Unreal，Unity3D，threejs，babylon.js等。

除了三维，还会涉及到一些地图以及GIS的应用。这时候又会涉及到很多 GIS 方面的前端框架，例如：openlayers、mapbox、leaflet、cesiumjs、高德地图等。

说到 GIS，又会涉及到很多 GIS 领域内的专业知识需要学习，因此如果大屏涉及到 GIS 领域的内容，对于前端开发人员来讲还是有一定的学习成本在内的。

所以，如果你发现业务开发突然变慢了，请给前端开发兄弟多一点的时间，他很有可能在苦逼的从零到一学习一些 GIS 的知识。

效率提升 ​

大屏开发虽然多变，并且一些动效，对于没怎么写过动画的开发兄弟来说，是会吃力一些。

但是，这些问题肯定是有解决方案的，下边我来总结一下经过两个大屏开发，我都总结了哪些可以提效或者优化的方案。

响应式方案 ​

  1. autofit.js：号称迄今为止最易用的自适应工具，一行代码搞定大屏繁杂的自适应工作，并且会让页面内容始终占满整个屏幕，不留空白。因为有的自适应插件为了缩放自由，会让页面留出相应的空白，这个仁者见仁，有的客户可能会不接受。
import autofit from 'autofit.js'export default {    mounted() { autofit.init({        dh: 1080,        dw: 1920,        el:"body",        resize: true    })  },}

就这样就搞定了，具体其他使用细节请自行去官网查询：https://github.com/LarryZhu-dev/autofit.js

  1. vue3-scale-box：也是基于缩放的一种方案，而且基于 vue3 进行使用，不同的是它在屏幕里会因为屏幕缩放导致四周留白，但是整个页面会一直保持原样，这个就看客户能否接受。
<template>  <ScaleBox    :width="1920"    :height="1080"    bgc="transparent"    :delay="100"    :isFlat="false"  >    <div class="ec-demo" id="ec-demo"></div>  </ScaleBox></template><script setup>import ScaleBox from "vue3-scale-box";</script>
  1. rem 方案：这个方案的原理就是实时监测屏幕缩放变化，根据屏幕大小动态修改元素的像素值。这个方案相对麻烦一些，由于篇幅有限，具体方案细节我准备放到下篇文章讲解。

大屏组件 ​

  1. DataV：一款基于vue开发的开源的大屏常用组件，包括线框、图表、装饰、水位图、数字翻牌器、轮播等等，具体可自行查看：http://datav.jiaminghi.com/

  1. elementplus-ui：这个是基于 vue3 的 UI 框架，估计玩过 vue 的同学都知道。其实这个框架可以作为大屏开发的一个底层使用UI框架

可能有人会有疑问：大屏 UI 都是自定义性特别强的，并且每个大屏也都不一样，怎么能用 elementplus 这个框架呢？

因为 elementplus 是可以根据需求去自定义修改主题色的。我们把它的主题色根据我们的 UI 都改成我们自己的，那是不是就可以愉快的去使用 element 里边的各种好用的组件了，例如弹窗、输入框、下拉框、列表等等。

  1. 封装 echarts 图表：我看到很多初中级开发工程师，每次一画图表就是从零到一去写代码，非常低效耗时。

    首先有一个开源框架：vue-echarts，它是基于 vue 对 echarts 进行了二次封装，将一些初始化以及参数修改的繁琐步骤进行封装，用起来就简单了许多。

    其次 echarts 提供了动态修改图表数据的方法：setOption。如果是同类图表，例如环状图，我们可以将它再次封装到一个组件中，将柱状图的基础参数都封装好，然后通过 setOption 动态去修改数据就可以渲染出不同的环状图了。

<template>  <div class="chart-box" :style="{ height: height }">    <v-chart class="chart" :option="option" ref="chartRef" :loading-options="LOADING_OPTS" :loading="isLoading" />  </div></template><script setup>import { computed, ref } from 'vue'import { use } from 'echarts/core'import { PieChart } from 'echarts/charts'import { SVGRenderer } from 'echarts/renderers'import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'import { LOADING_OPTS } from '@/common/constant.js'import classVar from '@/style/variables.module.less'use([PieChart, SVGRenderer, TitleComponent, TooltipComponent, LegendComponent])const chartRef = ref(null)/** * 修改图表数据 * @param {*} opts */const setChartOpts = (opts) => {  chartRef.value.setOption(opts)}

除了使用这些现成的 UI 框架，我们是不是也可以自己去封装一些常用的组件，例如数字翻牌器（与 DataV 不同效果），滚动列表等等。