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

这篇具有很好参考价值的文章主要介绍了大屏大概是怎么个开发法(前端)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

写在前面,博主是个在北京打拼的码农,从事前端工作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初次加载样式错乱(相关文章)

大屏大概是怎么个开发法(前端),项目搭建初始,前端,vue.js,html5,es6,html,scss,elementui

我们发现词云初次加载出现问题,

查看代码

<div
					:style="{ width: this.word_width + 'px' }"
					ref="wz_word_cont"
					class="wz_word_cont"
									:class="special?'large-screen':''"
					id="wz_word_cont"

					v-show="wordArr.length > 0"
				></div>



.wz_word_cont{
		width: 100% !important;
		height: 220px !important;
	}

 问题所在:宽度没指定,初始化识别不到正确的宽,解决方法如下,直接固定宽

.wz_word_cont{
		width: 340px !important;
		height: 220px !important;
	}

大屏大概是怎么个开发法(前端),项目搭建初始,前端,vue.js,html5,es6,html,scss,elementui

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

x轴数据过长轮播展示

相关文章

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

让eacharts的横坐标文字倾斜:

   xAxis: [

          {

            data: [],

            axisLabel: {

              margin: 10,

              color: 'rgba(202, 215, 245, 1)',

              textStyle: {

                fontSize: 7,



              }, rotate: 50, // 设置标签倾斜角度,单位为度

            },}]





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

就是加滚动条

大屏大概是怎么个开发法(前端),项目搭建初始,前端,vue.js,html5,es6,html,scss,elementui

关于SCUI  

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

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

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

大屏大概是怎么个开发法(前端),项目搭建初始,前端,vue.js,html5,es6,html,scss,elementui

今天接到了一个在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循环播放形成的,就像以前的动画片一样,一帧一帧播放

大屏大概是怎么个开发法(前端),项目搭建初始,前端,vue.js,html5,es6,html,scss,elementui

<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.offsetWidth
      var height = this.$refs.animation_canvas.offsetHeight
      canvas = 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 sources
        numImages = sources.length;
        for (var i = 0, len = sources.length; i < len; i++) {
          images[i] = new Image();
          //当一张图片加载完成时执行
          images[i].onload = function () {
            //当所有图片加载完成时,执行回调函数callback
            if (++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
      //执行图片预加载,加载完成后执行main
      loadImages(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>

字体 

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

大屏大概是怎么个开发法(前端),项目搭建初始,前端,vue.js,html5,es6,html,scss,elementui

 最后设定所有接口5分钟调用一次,给数据重新赋值实现实时刷新文章来源地址https://www.toymoban.com/news/detail-714406.html

到了这里,关于大屏大概是怎么个开发法(前端)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue2电商前台项目——项目的初始化及搭建

    Vue基础知识点击此处——Vue.js 使用脚手架创建项目,在需要放置项目的目录下打开cmd输入: 这个name是项目名(我的项目名是potato-mall 创建有问题或者不太熟悉的具体参考之前的脚手架配置笔记 1、脚手架目录介绍 项目创建成功后,点开项目目录,会出现以下文件: 这些文件

    2024年02月09日
    浏览(54)
  • 黑马程序员前端 Vue3 小兔鲜电商项目——(二)初始化项目

    Vue3是Vue.js最新的主要版本,它已经于2020年9月18日发布。它提供了许多新功能和性能改进,这些改进使得Vue更易于使用和更具可扩展性。 以下是Vue3的一些主要特性: 更快的渲染:Vue3使用重写的响应式系统,它使用Proxy对象来解决Vue2中的性能瓶颈问题。这使得Vue3的渲染速度比

    2024年02月11日
    浏览(42)
  • 黑马程序员前端 Vue3 小兔鲜电商项目——(一)初始化项目

    Vue3是Vue.js最新的主要版本,它已经于2020年9月18日发布。它提供了许多新功能和性能改进,这些改进使得Vue更易于使用和更具可扩展性。 以下是Vue3的一些主要特性: 更快的渲染:Vue3使用重写的响应式系统,它使用Proxy对象来解决Vue2中的性能瓶颈问题。这使得Vue3的渲染速度比

    2024年02月15日
    浏览(81)
  • 【前端Vue】社交信息头条项目完整笔记第1篇:一、项目初始化【附代码文档】

    社交媒体-信息头条项目完整开发笔记完整教程(附代码资料)主要内容讲述:一、项目初始化使用 Vue CLI 创建项目,加入 Git 版本管理,调整初始目录结构,导入图标素材。二、登录注册准备,实现基本登录功能,登录状态提示,表单验证。三、个人中心,四、首页—文章列表TabBar

    2024年03月09日
    浏览(72)
  • vue项目业务实现,视频监控-文件流,大屏适配方案(v-scale-screen),websocket前端

    最近把以前的业务场景及解决方案整理了一下,具体实现的工具如下: 监控-视频文件流==video.js + videojs-contrib-hls 大屏适配方案== v-scale-screen websocket==sockjs-client+ webstomp-client 下载video插件, 使用方法 (1)导入 (2)模板中写入标签 (3)页面渲染时调用函数,渲染视频 option

    2024年02月16日
    浏览(41)
  • 【Vue + TS】项目架构、环境搭建 -------(Vite)安装初始化(一)

    前言 “学习能力也好,执行力也罢,核心只有一个:在刚开始的时候,平静地接受自己的笨拙。” 本篇文章是 Vue项目基于 Vite初始化的过程,借此记录一下,巩固基础! 第一章 安装 Vite,本篇基于npm进行(请检测自己的node版本) 具体可看:Vite官方中文文档 全局安装vite,

    2024年02月03日
    浏览(51)
  • vue3初始搭建项目完整教程 vue3 + vite + element-ui + axios

    1. 安装 2. 创建目录 3. 在router下新增index.js 4.修改main.ts 1. 新增文件夹 2. 新增Home.vue和About.vue 1. 修改app.vue 1.unplugin-auto-import 2. 在vite.config.js中引入 1.安装element-ui 2. 按需导入 3.在vite.config.js新增插件 4.测试是否引入成功 5.如果报错 1. 网上下载reset.css 2.在assets中新增css文件夹 3.将

    2024年02月16日
    浏览(83)
  • Vue前端环境搭建以及项目搭建

    安装node.js 安装node.js主要是为了安装npm工具,用于管理js包等,类似于java的maven。 去官网下载安装。 配置新的镜像源 安装webpack webpack是前端项目打包工具。 命令: 安装vue-cli 这是vue的开发工具。 安装文档地址:https://cli.vuejs.org/zh/guide/installation.html 命令: 查看vue-cli: vue-

    2024年01月23日
    浏览(65)
  • 用React给XXL-JOB开发一个新皮肤(一):环境搭建和项目初始化

    一. 简述 二. Fork 项目 三. 搭建开发环境 四. 初始化皮肤项目 五. 添加相关依赖 六. 预览 大名鼎鼎的 xxl-job 任务调度中心我们应该都使用过,项目地址:xxl-job。它是一个分布式任务调度平台,其核心设计目标是开发迅速、学习简单、轻量级、易扩展。 该项目中的页面是使用

    2024年02月01日
    浏览(34)
  • vue3项目+TypeScript前端项目—— vue3搭建项目+eslint+husky

    今天来带大家从0开始搭建一个vue3版本的后台管理系统。一个项目要有统一的规范,需要使用eslint+stylelint+prettier来对我们的代码质量做检测和修复,需要使用husky来做commit拦截,需要使用commitlint来统一提交规范,需要使用preinstall来统一包管理工具。 下面我们就用这一套规范

    2024年02月22日
    浏览(81)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包