大屏大概是怎么个开发法(前端)

写在前面,博主是个在北京打拼的码农,从事前端工作5年了,做过十多个大大小小不同类型的项目,最近心血来潮在这儿写点东西,欢迎大家多多指教。

  • 对于文章中出现的任何错误请大家批评指出,一定及时修改。
  • 有任何想要讨论和学习的问题可联系我:13287946835@139.com。
  • 发布文章的风格因专栏而异,均自成体系,不足之处请大家指正。

目录

简单介绍

关于echarts的使用

这中间我们可能会碰到各种各样的问题

关于SCUI  

流畅度

碎碎念

视觉效果

字体 


本次不是手把手教学,仅仅给大家伙写个开发过程大概情况,能让新人知道大屏大概是怎么个开发写法

本文关键字:vue3后台管理项目插入大屏页面、vue3大屏项目、大屏适配

简单介绍

大屏开发是针对大显示屏幕做数据可视化显示以及操作的一种技术,常用于控制中心、金融交易等领域。( 大屏做成这样,领导想不重用你都难! - 知乎)

vue开发大屏中常用的插件或组件库有

阿里DataV数据可视化

积木报表

 iGaoWei/BigDataView

jackchen0120/vueDataV

DataV-Team/Datav 7.5K

同时有第三方开源库:Echarts(Apache ECharts),AntV,Highcharts,D3.js,three.js等

单独针对某个页面做大屏适配

mounted() {	this.$nextTick(() => {// 监控屏幕尺寸变化var bodyStyle = document.createElement("style");// 这里根据具体的设计稿尺寸来定bodyStyle.innerHTML = `body{width:1920px; height:1080px!important;}`;document.documentElement.firstElementChild.appendChild(bodyStyle);this.screenWidth = document.body.clientWidth;this.screenHeight = document.body.clientHeight;window.onresize = () => {return (() => {this.screenWidth = document.documentElement.clientWidth;this.screenHeight = document.documentElement.clientHeight;})();};document.addEventListener("keydown", (e) => {if (e.code == "F11") {this.screenWidth = document.documentElement.clientWidth;this.screenHeight = document.documentElement.clientHeight;}});});},
watch: {screenWidth: {handler: function () {// console.log("val", val);let docWidth = document.documentElement.clientWidth;let docHeight = document.documentElement.clientHeight;var designWidth = 1920, // 这里根据具体的设计稿尺寸来定designHeight = 1080, // 这里根据具体的设计稿尺寸来定widthRatio = docWidth / designWidth,heightRatio = docHeight / designHeight;document.body.style = `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;overflow: hidden;`;// 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况setTimeout(function () {var lateWidth = document.documentElement.clientWidth,lateHeight = document.documentElement.clientHeight;if (lateWidth === docWidth) return;widthRatio = lateWidth / designWidth;heightRatio = lateHeight / designHeight;document.body.style ="transform:scale(" +widthRatio +"," +heightRatio +");transform-origin:left top;overflow: hidden;";}, 0);},immediate: true,deep: true,},screenHeight: {handler: function () {// console.log("val", val);let docWidth = document.documentElement.clientWidth;let docHeight = document.documentElement.clientHeight;var designWidth = 1920, // 这里根据具体的设计稿尺寸来定designHeight = 1080, // 这里根据具体的设计稿尺寸来定widthRatio = docWidth / designWidth,heightRatio = docHeight / designHeight;document.body.style = `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;overflow: hidden;`;// 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况setTimeout(function () {var lateWidth = document.documentElement.clientWidth,lateHeight = document.documentElement.clientHeight;if (lateWidth === docWidth) return;widthRatio = lateWidth / designWidth;heightRatio = lateHeight / designHeight;document.body.style ="transform:scale(" +widthRatio +"," +heightRatio +");transform-origin:left top;overflow: hidden;";}, 0);},immediate: true,deep: true,},},

  (上方适配代码来源于-最简单的vue大屏实现方式 - 简书)

关于echarts的使用

Echarts相对简单些,容易上手,很多项目二次开发。

echarts等组件库需要写大量的样式覆盖才行,所以有的企业会要求新人会改源码

但实际上很多时候我们通过官方提供的配置项隐藏元素再自己写一些内容定位到指定位置也能实现

其实echart每次图标注入数据有的时候要花不少时间,因为后端返回的数据是不能直接用的,要自己转换过滤成适合插件的格式

而echart图表类型多种多样,我们不可能记住所有方法属性,所以每次基本上都是随用随查

这中间我们可能会碰到各种各样的问题

比如echart初次加载样式错乱(相关文章)、页面全屏后出现留白、echarts视图页面窗口调整后才正常(页面初始化时样式错乱)

x轴数据过长轮播展示

相关文章

在这中间我们可能碰到一些问题,比如echarts词云初始化加载窗口挤到一起,调整浏览器后才自适应,或是柱状图横坐标文字太长需要做倾斜处理这种问题

让eacharts的横坐标文字倾斜:

   xAxis: [{data: [],axisLabel: {margin: 10,color: 'rgba(202, 215, 245, 1)',textStyle: {fontSize: 7,}, rotate: 50, // 设置标签倾斜角度,单位为度},}]

数据太多还会引起图叠在一起,解决方法:相关文章

就是加滚动条

关于SCUI  

SCUI (SCUI)是一个中后台前端解决方案,基于VUE3和elementPlus实现。

使用最新的前端技术栈,提供各类实用的组件方便在业务开发时的调用,并且持续性的提供丰富的业务模板帮助你快速搭建企业级中后台前端任务。

SCUI的宗旨是 让一切复杂的东西傻瓜化。

今天接到了一个在SCUI后台管理系统中开发一个大屏页面的需求,公司买了一个图书馆管理大屏的项目源码供参考,只有原型没有设计图,只能先借助其他项目的psd图和图标来用,时间紧迫。

直接把大屏项目的视图代码全拷过去,有报错解决报错,缺库引库,谨慎起见直接按照大屏项目库的原版本安装 

大屏项目源码是使用的flexible适配,暂时不知道需不需要对大屏页面单独做适配,图书馆这个适配做的一般,窗口上下缩小字和元素都挤到一块了,正常应该取消或调整一些元素的展示

流畅度

大屏项目的流畅度需要很多插件支持,动画效果常使用的animate动画库如下

import WOW from "wow.js";

mounted里写

   var wow = new WOW({boxClass: "wow", // animated element css class (default is wow)animateClass: "animated", // animation css class (default is animated)offset: 0, // distance to the element when triggering the animation (default is 0)mobile: true, // trigger animations on mobile devices (default is true)live: true, // act on asynchronously loaded content (default is true)callback: function () {// the callback is fired every time an animation is started// the argument that is passed in is the DOM node being animated},scrollContainer: null, // optional scroll container selector, otherwise use window,resetAnimation: true, // reset animation on end (default is true)});this.$nextTick(() => wow.init());

最后通过class名wow加开启指定动画的class启用

gsap动效库

wow.js动画库

数字丝滑滚动(vue3 数字滚动插件vue-number-roll-plus - 完竣世界) vue3-number-roll-plus 

echarts-wordcloud词云库( 一堆五颜六色的词汇的聚在一块,有大有小的散落着)(相关文章)

项目中获取各类时间的地方不少,用的是dayjs

大屏的页面,需求用到无缝滚动列表vue3-seamless-scroll,这个很好用,常用的属性就那么几个,引入后使用,完成列表滚动,说真的这个滚动一加,那味马上就上来了,高级感,这个插件使用起来特别简单好用

import {Vue3SeamlessScroll} from "vue3-seamless-scroll";components: {Vue3SeamlessScroll},<Vue3SeamlessScroll :step="0.5" :wheel="true" :hover="true" :list="list" class="tableBody"></Vue3SeamlessScroll>

碎碎念

有高级感的大屏需要各种丝滑动效插件,很多本质上就是一些封装好的marquee动画

关于大屏我们很多的element插件都不太实用,像表格样式之类的我们要覆盖很久,所以很多时候不如自己写一些,毕竟大屏一般不会有分页

大屏项目要写很多组件,毕竟一小块一小块的方便维护,我推荐使用vuex做数据传递(

我在这里碰到了vuex自动导入文件内容的坑

写完新文件需要重启项目才能生效,各位如果没有设置自动导入可以忽略

),因为组件封装层次比较深的话会方便祖孙组件通信,组件内通过computed实现监听,两天时间做出两个大屏页面听起来确实有点扯,但大家可以结合很多开源项目,或直接买别人的大屏项目源码,在成型的架子上改动,很快就能完成大屏页面的开发

视觉效果

我们经常看到大屏的一些闪动效果感觉很牛,实际上有些视觉效果是通过一个个图片通过canvas循环播放形成的,就像以前的动画片一样,一帧一帧播放

<template>
<canvas ref="animation_canvas" class="animation_canvas" id="animation_canvas"></canvas>
</template><script>export default {
name: "sequence",
data() {return {}},
props: {// 文件数量fileLength: {type: Number,default() {return 70;}},// 动画间隔IntervalTime: {type: Number,default() {return 80;}},},
async mounted() {var that = this;await that.Sequence()},
methods: {async Sequence() {var that = this;//初始化参数var canvas = null;var ctx = null;var sources = [];async function loadImages2() {for (let i = 0; i <= 74; i++) {const image = await import(`./topbg/topbg_${i}.png`);sources.push(image.default);}}await loadImages2();var width = this.$refs.animation_canvas.offsetWidthvar height = this.$refs.animation_canvas.offsetHeightcanvas = this.$refs.animation_canvas;canvas.width = width;canvas.height = height;ctx = canvas.getContext("2d");//预加载序列图片function loadImages(sources, callback) {var loadedImages = 0;var numImages = 0;var images = [];// get num of sourcesnumImages = sources.length;for (var i = 0, len = sources.length; i < len; i++) {images[i] = new Image();//当一张图片加载完成时执行images[i].onload = function () {//当所有图片加载完成时,执行回调函数callbackif (++loadedImages >= numImages) {callback(images);}};//把sources中的图片信息导入images数组images[i].src = sources[i];
//            console.log(images);}}//播放图片动画function playImages(images) {var imageNum = images.length;var imageNow = 0;setInterval(function () {ctx.fillStyle = "rgba(0,0,0,0)";ctx.clearRect(0, 0, width, height);ctx.fillRect(0, 0, width, height);ctx.drawImage(images[imageNow], 0, 0, width, height);imageNow++;if (imageNow >= imageNum) {imageNow = 0;}}, that.IntervalTime)}//ctx.globalAlpha=0.5//执行图片预加载,加载完成后执行mainloadImages(sources, function (images) {playImages(images)});}},
}
</script><style lang="scss" scoped>
.animation_canvas {
position: absolute;
left: 0;
top: 0px;
width: 100%;
height: 100%;
z-index: -1;
}
</style>

字体 

大屏的字体是怎么整出来的

 最后设定所有接口5分钟调用一次,给数据重新赋值实现实时刷新

文章传送门:

vue的html2canvas使用解读,完美避免可能会造成的问题

dicom胶片展示,使用基石插件cornerstoneTools完成

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

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

相关文章

AutoDL云服务器的使用

目录 简介使用流程租借连接服务器输入登录指令以及密码设置服务器环境和同步文件 使用技巧查看远程主机资源上传下载数据如果上传的文件是压缩包 我的心得将大文件用百度云盘上传&#xff0c;小文件通过同步区域上传跨实例拷贝数据如果本实例没GPU选择其他实例 简介 使用此云服…

位移贴图的实现原理

在以前的文章中介绍过GLTF编辑器 &#xff0c; 编辑器可以对模型的各种材质纹理进行编辑修改&#xff0c;但是有一些新手用户可能对这些材质纹理不太了解&#xff0c;所以我收集了一些资料对这些材质纹理做一下详细的介绍&#xff0c;今天这篇文章主要是介绍位移贴图。 1、什么…

CMOS图像传感器——Stack Pixel(2)

在去年的时候, 就写过Sony大法的Stack Pixel CMOS图像传感器——Stack Pixel_stacked-pixel cis_沧海一升的博客-CSDN博客对索尼的2-Layer Transistor Pixel技术进行了介绍_stacked-pixel cishttps://blog.csdn.net/qq_21842097/article/details/127007460 IEDM 2021 上…

【好文推荐】openGauss 5.0.0 数据库安全——全密态探究

前言 写此文章的目的&#xff0c;主要是验证&#xff1a; openGauss 5.0.0 数据库能够实现哪种加密方式的全密态全密态数据库的特点 一、全密态介绍 全密态数据库意在解决数据全生命周期的隐私保护问题&#xff0c;使得系统无论在何种业务场景和环境下&#xff0c;数据在传…

Vue中的深度监听(Deep Watch):详细解析与实际示例

Vue中的深度监听&#xff08;Deep Watch&#xff09;&#xff1a;详细解析与实际示例 Vue.js 是一款流行的前端 JavaScript 框架&#xff0c;其响应式系统是其核心特性之一。通过响应式系统&#xff0c;Vue允许开发者轻松地监听数据的变化并对其做出响应。在某些情况下&#x…

Redis的softMinEvictableIdleTimeMillis和minEvictableIdleTimeMillis参数

背景&#xff1a; Redis的softMinEvictableIdleTimeMillis&#xff0c;minEvictableIdleTimeMillis是一个令人疑惑两个参数&#xff0c;特别是当它和minIdle组合起来时就更难理解了&#xff0c;本文就来梳理下他们的之间的关系 softMinEvictableIdleTimeMillis&#xff0c;mi…

2023智慧云打印小程序源码多店铺开源版 +前端

智慧自助云打印系统/智慧云打印小程序源码 前端 这是一款全新的基于Thinkphp的最新自助打印系统&#xff0c;最新UI界面设计的云打印小程序源码

【Java 基础篇】Java网络编程实战:P2P文件共享详解

Java网络编程是现代软件开发中不可或缺的一部分&#xff0c;因为它允许不同计算机之间的数据传输和通信。在本篇博客中&#xff0c;我们将深入探讨Java中的P2P文件共享&#xff0c;包括什么是P2P文件共享、如何实现它以及一些相关的重要概念。 什么是P2P文件共享&#xff1f; …

投资理财知识分享:100个金融知识专业术语

大家好&#xff0c;我是财富智星&#xff0c;今天跟大家分享一下投资理财知识方面100个金融知识专业术语&#xff0c;希望能帮助大家了解更多金融知识。 1. 股票&#xff1a;代表对一家公司所有权的证券。 2. 债券&#xff1a;公司或政府发行的借款证券。 3. 投资组合&#xff…

2023羊城杯决赛赛后记录

文章目录 前言ez_SSTIbreakfix easyuploadbreakfix BabyMemobreakfix fuzee_rcebreakfix Oh! My PDFbreakfix easy00aeshacker黑客的秘密LmqHmAsk 前言 参加了羊城杯决赛&#xff0c;一直都没自己重新搭环境对题目做一个复现和记录&#xff0c;当时还有有几道题是没有弄出来的…

中睿天下受邀参加2023北京数字交通大会暨博览会并发表主题演讲

2023年9月11号由中国交通报社、中国交通运输协会联合主办的2023北京数字交通大会暨博览会&#xff08;简称大会暨博览会&#xff09;在北京中国国际展览中心&#xff08;新馆&#xff09;举行。这次大会主题是“数字新时代、交通新未来”&#xff0c;将聚焦数字交通创新发展&am…

如何使用show profile 查看sql的执行周期

修改配置文件/etc/my.cnf 新增一行&#xff1a;query_cache_type1 重启mysql 先开启 show variables like %profiling%; set profiling1;select * from xxx ;show profiles; #显示最近的几次查询show profile cpu,block io for query 编号 #查看程序的执行步骤

Redis原理(一):Redis数据结构(上)

文章目录 1、 Redis数据结构-动态字符串2、 Redis数据结构-intset3、 Redis数据结构-Dict4、 Redis数据结构-ZipList5、 Redis数据结构-ZipList的连锁更新问题6、 Redis数据结构-QuickList1、 Redis数据结构-动态字符串 我们都知道Redis中保存的Key是字符串,value往往是字符串…

【Java 基础篇】Java 图书管理系统详解

介绍 图书管理系统是一种用于管理图书信息、借阅记录、用户信息等的软件系统。它可以帮助图书馆、书店或个人管理和组织图书资源&#xff0c;提供了方便的借阅和查询功能。在这篇博客中&#xff0c;我们将详细介绍如何使用Java编程语言创建一个简单的图书管理系统。 功能需求…

HTML+VUE+element-ui通过点击不同按钮展现不同页面

完整源码可以私聊我&#xff0c;需要一点点费用~ 页面展示 方案一 方案二 代码解释 方案一&#xff1a;使用v-show 这种方案只适合有两种页面 现在form表单中设置好要展现的页面名&#xff08;此处的url没有作用不用管&#xff09; 通过一个两个for循环分别将form表单填入…

基于 Socket 网络编程

基于 Socket 网络编程 前言一、基于Socket的网络通信传输&#xff08;传输层&#xff09;二、UDP 的数据报套接字编程1、UDP 套接字编程 API2、使用 UDP Socket 实现简单通信 三、TCP 流套接字编程1、TCP 流套接字编程 API2、使用 TCP Socket 实现简单通信3、使用 Tcp 协议进行…

GIT 提交过滤非必要文件

1、git ls-files&#xff1a;该命令会列出Git仓库中管理的所有文件 2、git rm -r -f --cached . -f 是强制删除 最后的点 是删除所有 git rm -r --cached . 3、 进入Preferences->plugins 中下载一个(.ignore)插件  在项目本地new一个(.gitignore)的文件新增需要过滤文…

推荐一个AI人工智能技术网站(一键收藏,应有尽有)

1、Mental AI MentalAI&#xff08;https://ai.ciyundata.com/&#xff09;是一种基于星火大模型和文心大模型的知识增强大语言模型&#xff0c;专注于自然语言处理&#xff08;NLP&#xff09;领域的技术研发。 它具备强大的语义理解和生成能力&#xff0c;能够处理各种复杂的…

C语言自定义类型(下)

大家好&#xff0c;我们今天来学习C语言自定义类型剩下的内容。 目录 1.枚举 2.联合 1.枚举类型 枚举顾名思义就是一一列举。 把可能的取值一一列举。 一周的星期一到星期日是有限的7天&#xff0c;可以一一列举。 性别有&#xff1a;男、女、保密&#xff0c;也可以一一列…

windows Visual Studio 2022 opengl开发环境配置

1. 安装glew(GL), GLFW, glm, soil2-debug 还需要premake生成visual studio solution cmake for windows也要安装一个&#xff0c; 但是不用安装MinGW64, bug多 下载源码&#xff0c;找到xxx.sln文件用visual stidio打开solution编译代码&#xff0c;找到xxx.lib, xxx.dll文件…