Vue中使用Datav 完成大屏基本布局

效果图

因为开发完了才写的，效果图不能展示全，效果不是很全

大屏

前言

• 在实际开发过程中，我们经常需要一个大屏进行一些常规数据的展示。在Vue中也是提供了这样的容器组件

• 我们可以使用基于Vue的 Datav组件 + Vue-Baidu-Map地图组件 + Echarts图表组件 + 时间戳就实现基本布局

• 在Vue中配置大屏路由的时候，我们注意不要让大屏的路由出现在侧边栏的地方，让他点击或者输入地址出现

Datav 介绍

组件库基于Vue （React版） 主要用于构建大屏（全屏）数据展示页面即数据可视化，具有多种类型组件可供使用

带有不同边框的容器，用来点缀页面效果，增加视觉效果，图表组件基于Charts封装，轻量，易用，飞线图/水位图/轮播表/...

官方文档

官方文档

在Vue中使用Datav

1.npm安装

npm install @jiaminghi/data-view

2.引入

全局引入

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
// 挂载在Vue上
Vue.use(dataV)

按需引入

import { borderBox1 } from '@jiaminghi/data-view'
​
Vue.use(borderBox1)

使用细节 - 具体的浏览官网

1.在Vue项目配置路由，不要让他出现在左侧侧边栏。

2.大屏页面布局思路

• 我们先使用Datav的11边框做一个最大的布局，让他充满可视化的区域，填充背景颜色。

• 我们在边框里面写一个遮罩层（填充和背景一样颜色）和一个Datav自带的加载动画（绝对居中）。

• 为什么需要一个遮罩层和加载动画，因为百度地图个性化样式加载的时候可能会报错和网络原因导致百度地图加载缓慢白屏现象，用了遮罩层和加载动画在显得没有那么冲突。

• 然后在使用Vue-Baidu-Map 加载一个百度地图，添加地图个性化样式（具体操作主页文章有详细操作）。

• 然后在通过子绝父相定位，把元素定位到地图层级上面。注意地图加载完毕之后就要关闭遮罩层和加载动画。使用定位是为了让地图这一层级不被遮挡，导致地图功能用不了。

• 最后在利用new Date()获取时间，来对时间进行操作。完成获取当前日期，时间。和从登录监测时间。

• 最后根据自己的实际开发要求进行更改和填充，利用Datav自己组件 + Echarts图表 完成剩下的布局。

细节：

给Datav自带的边框添加背景颜色，注意：只有Datav边框10可以直接添加边框颜色

参考文章

百度地图api渲染个性化地图的时候，可能会因为网络原因导致的加载缓慢导致个性化地图样式加载失败，可以加一个try{}catch{}，根据实际情况来。

给页面左右上角添加当前日期和当前时间，利用new Date() 属性和提供的相关函数方法进行操作具体看代码

中间的系统监测时间

我们在点击登录的时候存一个时间戳（具体在Vue中怎么操作看主页文章-Vue Token 原理 操作处理有详细操作）但我们在页面中的时候就获取当前时间戳，在相减就是登录了多长时间的时间戳。在根据时间单位进制进行转换赋值，在每一秒执行。现在监测时间是账号登录多长时间。如果换成这个账号注册了多久的时间差，就在注册账号的时候存一个时间，或者调接口让后端传一个时间戳回来。剩下的同理即可。

记得在切换页面的时候清空定时器

// 销毁定时器
  beforeDestroy() {
      console.log("销毁定时器");
      clearInterval(this.getDate) // 在Vue实例销毁前，清除时间定时器
      clearInterval(this.monitortime)
  },

下面是完整代码

注意：如果你全部复制会报错，因为你要在Vue中使用Vue-Baidu-Map加个性化样式[版本问题导致个性化地图渲染不出来的问题，主页文章有]，和登录存储时间戳的方法getTokenTime （）[可以直接删除]，和在Vue中使用Datav[主页文章有]

可以根据具体的开发情况，进行2次修改，下面是我最终样子

---

总结：

经过这一趟流程下来相信你也对 Vue中使用Datav 完成大屏基本布局 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕