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

显示全部楼层 · 2023-8-23 12:02:41

效果图

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

媒介

在实际开辟过程中，我们常常须要一个大屏举行一些通例数据的展示。在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)
},

复制代码

下面是完整代码

<template> <div class="conter"> <dv-full-screen-container> <dv-border-box-11 title="消防监测体系"> <div class="load" v-if="!this.loadinge"> <dv-loading>Loading...</dv-loading> </div>  <div class="shade" v-if="!this.loadinge">1</div> <baidu-map :center="center" :zoom="zoom" @ready="handler" class="baidu-map" > <div class="left"> <div class="one"> <dv-border-box-13></dv-border-box-13> </div> <div class="two"> <dv-border-box-10 :color="['#5378a2', '#FFF']"></dv-border-box-10> </div> <div class="three"> <dv-border-box-10 :color="['#5378a2', '#FFF']"></dv-border-box-10> </div> </div> <div class="right"> <div class="fore"> <dv-border-box-13></dv-border-box-13> </div> <div class="four"> <dv-border-box-10 :color="['#5378a2', '#FFF']"></dv-border-box-10> </div> <div class="six"> <dv-border-box-10 :color="['#5378a2', '#FFF']"></dv-border-box-10> </div> </div>  <div class="monitor"> <div class="txt">体系监测时间</div> <div class="reader"> <div> <i>{{ day }}</i >天 </div> <div> <i>{{ hour }}</i >时 </div> <div> <i>{{ minute }}</i >分 </div> <div> <i>{{ second }}</i >秒 </div> </div> </div> </baidu-map>  <div class="datae"> {{ nowDate + ' ' + nowWeek }} </div>  <div class="timer"> {{ nowTime }} </div> </dv-border-box-11> </dv-full-screen-container> </div></template><script>// import { getTokenTime } from '@/utils/auth'export default { name: 'iot', data() { return { center: { lng: 118.614312, lat: 24.890586 }, zoom: 18, // 动画开光 loadinge: false, nowDate: '', // 当前日期 nowTime: '', // 当前时间 nowWeek: '', // 当前星期 day: '0', //当前天数 hour: '0', //当前小时 minute: '0', //当前分钟 second: '0', //当前秒数 dialogTableVisible: false } }, mounted() { this.currentTime() }, // 销毁定时器
beforeDestroy() {
console.log("销毁定时器");
clearInterval(this.getDate) // 在Vue实例销毁前，清除时间定时器
clearInterval(this.monitortime)
}, methods: { handler({ BMap, map }) { let that = this // console.log(BMap, map); // 经度 this.center.lng = 118.614312 // 维度 this.center.lat = 24.890586 // 舆图放大品级 this.zoom = 14 map.enableScrollWheelZoom() // 启用滚轮放大缩小，默认禁用 map.enableContinuousZoom() // 可拖拽 // 舆图个性化样式 try { map.setMapStyleV2({ styleId: '你在引入AK账号的百度舆图发布的个性化样式' }) } catch (erro) { return false } // 这个是遮罩层和加载动画的开关默认一进到页面加载动画和遮罩层是开启的 // 另有一个作用就是网络欠好时，百度舆图加载失败时。会出现白屏现象，加上这个遮罩层和加载动画会显得比力流畅 setTimeout(() => { this.loadinge = true }, 3000) }, // 每0.5秒实行一次 currentTime() { setInterval(this.getDate, 500) setInterval(this.monitortime, 1000) }, // 获取当前日期时间的方法 getDate() { var _this = this //获取年 let yy = new Date().getFullYear() //获取月,注意时间是0-11，0代表1月份 let mm = new Date().getMonth() + 1 // 获取具体哪一天 let dd = new Date().getDate() // 获取星期 0-6 0是星期天 let week = new Date().getDay() //获取小时 let hh = new Date().getHours() //获取分钟 let ms = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds() // 获取秒钟 let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes() // 获取星期 if (week == 1) { this.nowWeek = '星期一' } else if (week == 2) { this.nowWeek = '星期二' } else if (week == 3) { this.nowWeek = '星期三' } else if (week == 4) { this.nowWeek = '星期四' } else if (week == 5) { this.nowWeek = '星期五' } else if (week == 6) { this.nowWeek = '星期六' } else { this.nowWeek = '星期日' } _this.nowTime = hh + ':' + mf + ':' + ms _this.nowDate = yy + '/' + mm + '/' + dd }, // 监测时间 monitortime() { var _that = this // 当前时间 let x = new Date().getTime() console.log('当前时间戳', x) // // 点击登录存的时间 // // let y = getTokenTime() // // console.log('登录时间戳', y) // // 登录之后的监测时间 // let z = x - y // // console.log('监测时间', z) _that.day = parseInt(x / 1000 / 60 / 60 / 24) //日 _that.hour = parseInt((x / 1000 / 60 / 60) % 24) //时 _that.minute = parseInt((x / 1000 / 60) % 60) //分 _that.second = parseInt((x / 1000) % 60) //秒 } }}</script><style lang="scss" scoped>.conter { background-color: rgb(9, 18, 32); width: 100%; height: 100%; // box-sizing: border-box; // 最大边框的样式 ::v-deep #dv-full-screen-container { .dv-border-box-11 .border-box-content { // background-color: skyblue; padding: 62px 9px 10px; overflow: hidden; border-radius: 55px; position: relative; .load { position: absolute; top: 40%; left: 50%; // margin-left: -37px; transform: translateX(-50%); z-index: 3; .loading-tip { margin-top: 15px; font-size: 18px; color: #fff; } } // 遮罩层 .shade { width: 100%; // width: 100%; 取100% margin 右边不会收效要改成width=99%才有效果 height: 100%; box-sizing: border-box !important; // background-color: skyblue; margin: 60px 8px 10px; background-color: rgb(9, 18, 32); position: absolute; z-index: 1; top: 0; left: 0; } // 舆图 .baidu-map { width: 100%; height: 100%; border-radius: 5px; // z-index: 999; display: flex; // justify-content: space-between; // 去除百度舆图的图标 position: relative; .anchorBL { display: none !important; } .left { width: 350px; height: 100%; position: absolute; top: 100px; left: 2%; // background-color: skyblue; // margin-left: 50px; .one { height: 130px; // background-color: skyblue; } .two { height: 250px; background-color: rgb(2, 52, 126); border-radius: 3px; margin: 40px 0 40px; } .three { height: 250px; background-color: rgb(2, 52, 126); border-radius: 3px; } } .right { width: 350px; height: 100%; position: absolute; top: 100px; right: 2%; // background-color: skyblue; // margin-right: 50px; .fore { height: 130px; // background-color: skyblue; } .four { height: 250px; background-color: rgb(2, 52, 126); border-radius: 3px; margin: 40px 0 40px; } .six { height: 250px; background-color: rgb(2, 52, 126); border-radius: 3px; } } // 监测时间 .monitor { width: 320px; height: 95px; // background-color: skyblue; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); .txt { width: 135px; color: #fff; font-size: 22px; margin: 2px auto; } .reader { color: #afafaf; display: flex; justify-content: space-between; margin-top: 12px; div { display: flex; align-items: baseline; i { font-style: normal; display: block; width: 50px; height: 50px; box-sizing: border-box; font-size: 20px; color: #fff; margin-right: 8px; background-color: rgb(5, 47, 115); border: 3px solid rgb(6, 116, 190); border-radius: 5px; line-height: 44px; text-align: center; } &:first-child { i { width: 80px; } } } } } } // 左上角日期星期 .datae { // background-color: skyblue; font-size: 18px; position: absolute; top: 7px; left: 200px; color: #fff; } // 右上角的当前时间 .timer { // background-color: skyblue; font-size: 18px; position: absolute; top: 7px; right: 200px; color: #fff; } } }}</style>

复制代码

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

可以根据具体的开辟环境，举行2次修改，下面是我最终样子

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

什么不敷的地方请各人指出谢谢 -- 風过无痕

来源：https://blog.csdn.net/weixin_53579656/article/details/128115778
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

[web教学] Vue中使用Datav 完成大屏基本布局

本帖子中包含更多资源