关于可视化大屏适配

一、目前市场上适配方案有两种;

  • vw、vh方案:

原理:按照设计稿的尺寸,将px按比例计算转为vw和vh;

优点:不会存在失真情况、可以动态计算图表的宽高,字体等,灵活性较高,当屏幕比例跟 ui 稿不一致时,不会出现两边留白情况;

缺点:类似第三方echart图表都需要单独做字体、间距、位移的适配,比较麻烦

核心代码以sass为例

/*util.scss*/
@use 'sass:math';
//默认设计稿的宽度
$designWidth: 1920;
//默认设计稿的高度
$designHeight: 1080;//px转为vw的函数
@function vw($px) {@return math.div($px, $designWidth) * 100vw;
}//px转为vh的函数
@function vh($px) {@return math.div($px, $designHeight) * 100vh;
}

然后页面中引入util.scss、将20px更换为vh(20)

@import '@/assets/style/util.scss';.dateText {padding-top: vh(20);}.weatherText {padding-top: vh(32);}

在js中使用到尺寸可以用下面这个工具方法去做转换

const styleUtil = {// px转vwpx2vw: function (_px, unit) {if (unit) {return (_px * 100.0) / designWidth + unit;}return (_px * 100.0) / designWidth + 'vw';},// px转vhpx2vh: function (_px, unit) {if (unit) {return (_px * 100.0) / designHeight + unit;}return (_px * 100.0) / designHeight + 'vh';},
};

chart 图表中的适配用以下方法、需要注意的是、在resize的时候、让echart也resize一下

const fitChartSize = (size, defaultHeight = 1080) => {// 默认宽高问设计let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;console.log('clientHeight::: ', clientHeight);if (!clientHeight) return size;let scale = clientHeight / defaultHeight;return Number((size * scale).toFixed(3));
};
  • 缩放方案

原理:按照设计稿的尺寸布局,采用等比例缩放、在不同屏幕尺寸中将其通过放大缩小最外层的dom为一定比例、来保持原本布局;

优点:代码量少,适配简单 、一次处理后不需要在各个图表中再去单独适配;

缺点:如果缩放比例超过一定程度,字体图片等就会失真、会留白


核心代码

  const usePreviewFitScale = (width, height, scaleDom, callback) => {// * 画布尺寸(px)const baseWidth = width;const baseHeight = height;// * 默认缩放值const scale = {width: 1,height: 1,};// * 需保持的比例const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));const calcRate = () => {// 当前屏幕宽高比const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5));if (scaleDom) {if (currentRate > baseProportion) {// 表示更宽 以高度为基准 需要保持比例的宽scale.width = parseFloat(((window.innerHeight * baseProportion) / baseWidth).toFixed(5));scale.height = parseFloat((window.innerHeight / baseHeight).toFixed(5));const offsetW = ((window.innerWidth - window.innerHeight * baseProportion) / 2).toFixed(5);scaleDom.style.transform = `translateX(${offsetW}px) scale(${scale.width}, ${scale.height})`;} else {// 表示更高 以宽度为基准 需要保持比例的高scale.width = parseFloat((window.innerWidth / baseWidth).toFixed(5));scale.height = parseFloat((window.innerWidth / baseProportion / baseHeight).toFixed(5));scaleDom.style.transform = `translateX(0px) scale(${scale.width}, ${scale.height})`;}if (callback) callback(scale);}};const resize = throttle(() => {calcRate();}, 200);// * 改变窗口大小重新绘制const windowResize = () => {window.addEventListener('resize', resize);};// * 卸载监听const unWindowResize = () => {window.removeEventListener('resize', resize);};return {calcRate,windowResize,unWindowResize,};
};
  • 至于还有流传rem + vw vh的方案(我是直接舍弃的)

这个rem的方案是根据单个宽度来计算的,只能适配宽度缩放、而大屏是一屏展示、而且在类似echart图表中,还需要做vw vh的单独适配、也是直接舍弃

  • 有的同学还说有设计外层盒子百分比、盒子内部图表大小固定;

这种方式怎么说呢,那就得UI配合给我们设计出对应的样式、而且这种不用动脑子想也是很丑啊、还是直接pass吧、大屏本身就是要做的好看

二、我们先搞清楚可视化大屏适配与传统后台管理系统适配的区别

三、当然不管采用那种方式我们都要一客户需求基点、然后分析出对应的解决方式

1、 嵌入管理系统内部展示: 多数情况以非全屏展示

这种情况如果使用缩放形式、其实也可以、那得需要UI出图为实际空间占比的UI、否则当我们写完代码,因为底部程序坞和浏览器窗口操作栏的高度,导致缩放比大、就会凸显失真情况的产生,而且有留白

一般情况UI给的图就是1920*1080的尺寸比、当然如果客户要求不高、采用这种方式当然是最省事;

但如果客户要求高、还是老老实实的使用vw、vh

2、纯全屏显示:多数情况给定尺寸为大屏尺寸、全屏展示、不考虑程序坞、浏览器上方操作栏;

这种场景呢,就比较适合缩放、因为一般适配屏幕大小不会差太多、没有很多情况、即使失真、多数也在客户考虑范围之内;

因为vw vh方式,如果是正常布局的vw、vh和echart 高度比计算得出来的尺寸位置,可能会存在对不齐的情况、当然具体情况具体分析;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/804133.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

国内SSL证书应用情况如何?

随着互联网的快速发展,越来越多的网站开始意识到数据安全的重要性,并开始使用SSL证书来保护网站和用户的数据安全。在国内,SSL证书的应用也逐渐得到推广和普及。本文将介绍国内SSL证书的应用情况。 首先,国内许多大型电商平台和金…

Excel文本内容抽取工具[Python]

#创作灵感# 一堆Excel文件,每个打开看太累了。写个脚本直接显示里面的内容多好。最好这些内容可以直接复制到剪切板,方便以后编辑修改。只需要将文件拖动到全屏置顶的文本框内,就能弹出Excel里的内容。支持一次选取多个文件。 开干&#xff…

计算机视觉——引导APSF和梯度自适应卷积增强夜间雾霾图像的可见性算法与模型部署(C++/python)

摘要 在夜间雾霾场景中,可见性经常受到低光照、强烈光晕、光散射以及多色光源等多种因素的影响而降低。现有的夜间除雾方法常常难以处理光晕或低光照条件,导致视觉效果过暗或光晕效应无法被有效抑制。本文通过抑制光晕和增强低光区域来提升单张夜间雾霾…

N1922A是德科技N1922A功率传感器

181/2461/8938产品概述: N192XA 传感器是首款通过将直流参考源和开关电路集成到功率传感器中来提供内部调零和校准的传感器。此功能消除了与使用外部校准源相关的多个连接,从而最大限度地减少了连接器磨损、测试时间和测量不确定性。 连接到 DUT 时进行…

从零开始精通RTSP之请求与响应详解1

概述 RTSP是一种基于文本的应用层协议,使用UTF-8编码,并通过TCP或UDP传输。它并不直接传输媒体数据,而是用于控制媒体数据的传输,比如:播放、暂停、快进等操作。RTSP客户端通过发送请求到服务器,服务器则响…

【kears】(01)keras使用介绍

文章目录 一.特点二.keras如何支持TensorFlow、CNTK 和 Theano2.1 使用 TensorFlow 后端引擎训练和评估模型2.2 使用 TensorFlow 后端引擎训练和评估模型2.3 使用 Theano后端引擎训练和评估模型2.4 不同深度学习框架如何选择1.1 keras.datasets:包含多种常用数据集1…

InsectMamba:基于状态空间模型的害虫分类

InsectMamba:基于状态空间模型的害虫分类 摘要IntroductionRelated WorkImage ClassificationInsect Pest Classification PreliminariesInsectMambaOverall Architecture InsectMamba: Insect Pest Classification with State Space Model 摘要 害虫分类是农业技术…

Excel从零基础到高手【办公】

第1课 - 快速制作目录【上篇】第1课 - 快速制作目录【下篇】第2课 - 快速定位到工作表的天涯海角第3课 - 如何最大化显示工作表的界面第4课 - 给你的表格做个瘦身第5课 - 快速定位目标区域所在位置第6课 - 快速批量填充序号第7课 - 按自定义的序列排序第8课 - 快速删除空白行第…

C++数据结构与算法——贪心算法难题

C第二阶段——数据结构和算法,之前学过一点点数据结构,当时是基于Python来学习的,现在基于C查漏补缺,尤其是树的部分。这一部分计划一个月,主要利用代码随想录来学习,刷题使用力扣网站,不定时更…

计算机视觉异常检测——PatchCore面向全召回率的工业异常检测

1. 概述 异常检测问题在工业图像数据分析中扮演着至关重要的角色,其目的是从大量正常数据中识别出异常行为或模式。这一任务的挑战在于,正常数据的样本相对容易获取,而异常情况却因其稀有性和多样性而难以收集。为了解决这一问题&#xff0c…

跟TED演讲学英文:Why AI will spark exponential economic growth by Cathie Wood

TED英文文稿 文章目录 TED英文文稿Why AI will spark exponential economic growthIntroductionVocabularyTranscriptSummary Why AI will spark exponential economic growth Link: https://www.ted.com/talks/cathie_wood_why_ai_will_spark_exponential_economic_growth? …

家庭网络防御系统搭建-将NDR系统的zeek日志集成到securit yonion

在前面的文章中安装了zeek,这里,安装了securityonion,这里,本文讲述如何将zeek生成的日志发送到siem security onion之中。 所有日志集成的步骤分为如下几步: 日志收集配置日志发送接收日志解析配置日志展示配置 ZEEK日志收集配…

[leetcode] 164. 最大间距

给定一个无序的数组 nums,返回 数组在排序之后,相邻元素之间最大的差值 。如果数组元素个数小于 2,则返回 0 。 您必须编写一个在「线性时间」内运行并使用「线性额外空间」的算法。 示例 1: 输入: nums [3,6,9,1] 输出: 3 解释: 排序后的…

大型语言模型如何助力推荐系统:综述研究

论文地址:https://arxiv.org/pdf/2306.05817.pdf 这篇论文主要探讨了推荐系统(RS)如何从大型语言模型(LLM)中获益。论文首先指出,随着在线服务和网络应用的快速发展,推荐系统已成为缓解信息过载…

路由器如何端口映射到外网?

随着互联网的发展和普及,远程访问已经成为了现代社会的一个重要需求。在复杂的网络环境下,特别是涉及异地组网的情况下,实现远程访问变得更加困难。本文将介绍一种名为【天联】的组网产品,它可以解决复杂网络环境下的远程连接问题…

搜维尔科技:Patchwork 3D工业仿真实时渲染,将CAD 数据转换成真实感的3D模型以用于工业用途

Patchwork 3D工业仿真 实时渲染点击跳转官网 从实时渲染到真实照片 根据工作阶段所需的逼真度,您可以使用三个渲染引擎,从最快的(OpenGL,交互式)到最逼真的(光线跟踪,Iray物理逼真)…

vue中使用axios获取不到响应头Content-Disposition的解决办法

项目中,后端返回的文件流; 前端需要拿到响应头里的Content-Disposition字段的值,从中获取文件名 在控制台Headers中可以看到相关的字段和文件名,但是在axios里面却获取不到 如果想要让客户端访问到相关信息,服务器不仅要在head…

xilinx fpga 程序固化(含sdk)

一、前言 xilinx 旗下的产品主要有包含有处理器的SOC系列,也有只有纯逻辑的fpga,两者的程序固化的方法并不相同,本文介绍含有处理器或者microblaze中有程序的固化。 二、固化流程 2.1 在sdk中固化 SDK中选择Xilinx Tools–Program FPGA&a…

web安全学习笔记【22】——文件上传(1)

WEB攻防-PHP应用&文件上传&函数缺陷&条件竞争&二次渲染&黑白名单&JS绕过 演示案例: PHP-原生态-文件上传-前后端验证PHP-原生态-文件上传-类型文件头验证PHP-原生态-文件上传-后缀黑白名单验证PHP-原生态-文件上传-解析配置&二次渲染…

Android Camera API 1打开相机失败

目前Camera API 1使用的比较少了,一般代码如下。遇到的问题是camera1接口无法打开相机,cam2接口打开正常。最后排查结果是 sensor的 frameRate 配置不对。 Camera camera;CameraPreview mPreview;SuppressLint("MissingPermission")Overridepr…