BI大屏自适应的构建
对于大屏自适应，网上有基于Vue编写的大屏自适应逻辑代码，本文讲解如何在一个初始化大屏的页面中使用自适应逻辑代码，以及如何解决自适应后大屏左右两边留白的问题。
首先，在编写的初始化html文件中，需要引入离线版的vue JS包和大屏自适应的js代码：
1 <script src="./assets/js/frameworkjs/vue-global-prod.js"></script>
1 <script src="./scale-screen/index.js"></script>
然后编写js逻辑代码，通过vue挂载根节点，并绑定自定义组件scaleScreen:
1 <script>
2 //引入vue
3 const { createApp, ref } = Vue;
4 const app = createApp({
5 setup() {
6 return {};
7 }
8 });
9 app.component('scaleScreen', scaleScreen);
10 app.mount('#app');
11
12 </script>
之后编写在html 中使用<scale-screen>标签把根节点内部的div块整体包起来，html完整代码如下：
1 <!DOCTYPE html>
2 <html>
4 <head>
5 <meta charset="utf-8" />
6 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
7 <meta name="description" content="" />
8 <meta name="viewport" content="width=device-width, initial-scale=1" />
9 <link rel="stylesheet" href="./assets/css/index.css" type="text/css" />
10
11 <!-- vue/datav/seamless-scroll资源本地化 -->
12 <script src="./assets/js/frameworkjs/vue-global-prod.js"></script>
15 <script src="./assets/js/frameworkjs/jquery-3.7.1.min.js"></script>
16 <script src="./assets/js/frameworkjs/echarts-4.8.0.min.js"></script>
17
18 <title>测试总控系统可视化平台</title>
19 </head>
20
21 <body>
22 <div id="app"><!--用于vue挂载-->
23 <scale-screen>
24 <!--具体的逻辑DIV划分-->
25 <div id="main">
26 <div id="top">
27 hehe
28 </div>
29 <div id="middle">
30 haha
31 </div>
32 <div id="bottom">
33 ll
34 </div>
35 </div>
38 </scale-screen>
39 </div>
41 </body>
42
44 <script src="./scale-screen/index.js"></script>
45
46 <script>
47 //引入vue 和 datav
48 const { createApp, ref } = Vue;
49
50 const app = createApp({
51 setup() {
52 return {};
53 }
54 });
55 app.component('scaleScreen', scaleScreen);
56 app.mount('#app');
58 </script>
63 </html>
为了看效果，编写index.css代码：
1 html,
2 body {
3 overflow: hidden;
4 background:#041a21;
5 width: 100vw;
6 height: 100vh;
7 }
8
9 #app,#main
10 {
11 height: 100%;
12 width: 100%;
13 color:aliceblue
14 }
15
16 #top
17 {
18 border: 1px solid red;
19 width: 99%;
20 height:10%;
21 }
22
23 #middle
24 {
25 border: 1px solid red;
26 width: 99%;
27 height:86%;
28 }
29
30 #bottom
31 {
32 border: 1px solid red;
33 width: 99%;
34 height:2%;
35 }
scale-screen下的index.js自适应源码如下（以下代码是咨询了gpt对之前已有的自适应代码修复，解决了大屏页面左右两边留白问题）
1 const scaleScreen = {
2 props: {
3 delay: {
4 type: Number,
5 default: 500
6 },
7 }, // 声明接收名为 message 的 prop
8 setup() {
9 const autoScaleBoleen = true
10 const screenWrapper = Vue.ref()
11
12 console.log(document.getElementById('screenWrapper'))
13
14 const state = Vue.reactive({
15 originalWidth: window.innerWidth,
16 originalHeight: window.innerHeight,
17 });
18
19 const styles = {
20 box: {
21 overflow: 'hidden',
22 backgroundSize: `100% 100%`,
23 background: `#000`,
24 //background: `#031b37`,
25 width: `100vw`,
26 height: `100vh`
27 },
28 wrapper: {
29 transitionProperty: `all`,
30 transitionTimingFunction: `cubic-bezier(0.4, 0, 0.2, 1)`,
31 transitionDuration: `500ms`,
32 position: `relative`,
33 overflow: `hidden`,
34 zIndex: 100,
35 transformOrigin: `left top`
36 }
37 };
38
39 const box = Vue.ref();
40
41 /**
42 * 更新大屏容器宽高
43 */
44 const updateSize = () => {
45 if (screenWrapper.value) {
46 screenWrapper.value.style.width = `${state.originalWidth}px`;
47 screenWrapper.value.style.height = `${state.originalHeight}px`;
48 }
49 };
50
51 const autoScale = (scale) => {
52 if (screenWrapper.value) {
53 screenWrapper.value.style.transform = `scale(${scale})`;
54 const mx = (window.innerWidth - (state.originalWidth * scale)) / 2;
55 const my = (window.innerHeight - (state.originalHeight * scale)) / 2;
56 screenWrapper.value.style.margin = `${my}px ${mx}px`;
57 }
58 };
59
60 const updateScale = () => {
61 const currentWidth = window.innerWidth;
62 const currentHeight = window.innerHeight;
63
64 const widthScale = currentWidth / state.originalWidth;
65 const heightScale = currentHeight / state.originalHeight;
66 const scale = Math.min(widthScale, heightScale);
67 autoScale(scale);
68 };
69
70
71 const onResize = () => {
72 state.originalWidth = window.innerWidth;
73 state.originalHeight = window.innerHeight;
74 updateSize();
75 updateScale();
76 };
77
78
79
80 const clearListener = () => {
81 window.removeEventListener('resize', onResize);
82 // state.observer?.disconnect();
83 };
84
85 const addListener = () => {
86 window.addEventListener('resize', onResize);
87 // initMutationObserver();
88 };
89
90 Vue.onMounted(() => {
91 screenWrapper.value = document.getElementById('screenWrapper')
92 box.value = document.getElementById('box')
93
94 Vue.nextTick(async () => {
95 //await initSize();
96 updateSize();
97 updateScale();
98 addListener();
99 // initMutationObserver();
100 });
101 });
102 Vue.onUnmounted(() => {
103 clearListener();
104 // state.observer?.disconnect();
105 });
106 return {
107 styles,
108 };
109 },
110 template: `
111 <section :style="{ ...styles.box }" class="v-screen-box" id="box">
112 <div :style="{ ...styles.wrapper }" class="screen-wrapper" id="screenWrapper">
113 <slot></slot>
114 </div>
115 </section>
116 `,
117 };
以上使用修复后的自适应代码的效果图，当点击浏览器的放大、缩小或者将大屏移动到分辨率不一样的显示屏，0.5s内都会重新进行自适应
附：原有完成项目的自适应左右两边留白问题效果图：
附：原有完成项目的自适应留白问题解决效果图：
另：网上还有直接使用另一种方式实现的布局自适应（pink老师），有时间可以研究学习一下：
https://www.bilibili.com/video/BV1v7411R7mp/?buvid=ZD419DDD1F5678F6481DA50A7E1CDCF3EEC0&from_spmid=search.search-result.0.0&is_story_h5=false&mid=8HVZ%2FBZGzIaku9HIHWIhnA%3D%3D&p=3&plat_id=116&share_from=ugc&share_medium=iphone&share_plat=ios&share_session_id=70E20FD8-C5DA-455A-8D4E-30F4B3F646ED&share_source=WEIXIN&share_tag=s_i&spmid=united.player-video-detail.0.0×tamp=1739372661&unique_k=Rndelnd&up_id=415434293&vd_source=9e0160ddf037e13ef69048dc349dd419
BI大屏自适应的构建的更多相关文章
- 使用rem配置PC端自适应大屏
效果如下 使得大屏不论在什么宽高比例依然能展示全部数据 安装 npm install -S postcss-pxtorem rem配置思路 原先的rem函数是能解决大部分的问题的,如果展示不全,也可以 ...
- 职场IT老手教你3步教你玩转可视化大屏设计，让领导眼前一亮！
我是制造企业的IT中心的研发人员,平常工作就是配合业务部门出出报表,选型一些商业软件,并在内部负责实施运维.最近领导出去参观了一些数字化转型比较领先的工厂和制造企业,回来就甩给我几张图,问能不能我们也 ...
- 商业智能（BI）可视化大屏的设计及使用原则
信息时代,数据是一种可贵的资源,我们可能经常听到的一句话就是:用数据说话.但是,在没有进行系统化整理之前,数据不过只是一串串冰冷的数字,我们很难从大量的数据中获取到有价值的信息.只有通过合适的可视化工 ...
- NGUI 屏幕自适应大屏与小屏（初始设定宽高为1280x720，能适应比其小或者更大的屏）
具体细节可以参考另外一篇随笔! 以下提供的算法完成的事: 1.自适应1280x720分辨率以下的屏幕 2.自适应1280x720分辨率以上的屏幕 在我设定的要求内包括的分辨率大部分都测过了,背景图.全 ...
- 设备数据通过Azure Functions 推送到 Power BI 数据大屏进行展示（2.Azure Functions实战）
本案例适用于开发者入门理解Azure Functions/ IoT Hub / Service Bus / Power BI等几款产品. 主要实战的内容为: 将设备遥测数据上传到物联网中心, 将遥测数 ...
- 设备数据通过Azure Functions 推送到 Power BI 数据大屏进行展示（1.准备工作）
本案例适用于开发者入门理解Azure Functions/ IoT Hub / Service Bus / Power BI等几款产品. 主要实战的内容为: 将设备遥测数据上传到物联网中心, 将遥测数 ...
- 15分钟构建超低成本数据大屏：DataV + DLA
第一步:准备低成本存储的业务数据和DLA表 OSS(https://www.aliyun.com/product/oss)是云上低成本数据存储的优选方案 DLA(https://www.aliyun. ...
- 一招教你轻松使用数据可视化BI软件创建旅游消费数据可视化大屏
灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件. 本文以旅游消费数据可视化大屏为 ...
- 不会用数据可视化大屏？一招教你轻松使用数据可视化BI软件创建农业公司运营数据分析大屏
灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件. 本文以农业公司运营数据分析大屏 ...
- 干货！手把手教你使用数据可视化BI软件创建企业变更流程监控大屏
灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件. 本文以企业变更流程监控大屏为例 ...
随机推荐
- 「Log」做题记录 2023.10.30-2023.11.26
\(2023.10.30-2023.11.5\) \(\color{blueviolet}{AT\_abc285\_g}\) 神秘题. 网络流是显著的,建边方式如下: 所有边容量都为 \(1\). 每 ...
- 现代 Python 包管理器 `uv`
用 uv + Python 开发命令行工具 当使用 uv 写正规一点的 CLI 应用的时候,还是应该使用 uv init --package [package name] 因为写一个命令行程序总是要安 ...
- Linux系统split对tar文件进行分片和压缩
一.简单说明 在实际的使用场景中,我们可能对压缩过的tar包上传到某个服务器或者应用,会涉及超出服务器限制的文件大小.这里我们可以对此文件进行压缩.分片.合并. 二.实际操作 2.1 压缩包分片 这里 ...
- 在Linux下使用wxWidgets进行跨平台GUI开发（三）
创建wxWidgets应用程序 在本文中,我们将了解创建wxWidgets应用程序所需的基础知识.首先创建一个简单的示例程序,展示如何显示图标:接着通过另一个示例演示事件的使用方法:最后探讨wxWid ...
- 开源项目丨一文详解一站式大数据平台运维管家ChengYing如何部署Hadoop集群
课件获取:关注公众号"数栈研习社",后台私信 "ChengYing" 获得直播课件 视频回放:点击这里 ChengYing开源项目地址:github 丨 git ...
- 用termius或者cmd等都能够连接上服务器，但是用vscode连接不上？？？
最近实验室的服务器进行重装更新了,开始使用wsl,现在直接装Linux系统的Ubantu.服务器的ip.端口.个人名字都没有变.也就相当于之前在termius等远程连接的软件上都能够连上. 我习惯用v ...
- VKProxy新增CORS设置和http响应缓存
VKProxy 是使用c#开发的基于 Kestrel 实现 L4/L7的代理(感兴趣的同学烦请点个github小赞赞呢) 目前新添加了如下功能 http响应缓存 Memory Disk Redis C ...
- 10.Java Spring框架源码分析-IOC-实例化所有非懒加载的单实例bean
目录 1. 要研究的代码 2. 实例化所有非懒加载的单实例bean 2.1. 获取所有BeanName,一个个创建 2.2. 创建单个bean 2.3. 看看之前创建bean有木有,没有再去创建[不是 ...
- ado.net基础（一）
什么是ado.net 使用.net技术操作数据库的一套类库. 命名空间 system.data:描述数据的命名空间 system.data.sqlclient:专门针对sqlserver的命名空间 四 ...
- mysql增加唯一索引
索引分为主键索引 外键 唯一索引等