位置: IT常识 - 正文

Vue中使用Datav 完成大屏基本布局(vue :data="data")

编辑:rootadmin
Vue中使用Datav 完成大屏基本布局 效果图

推荐整理分享Vue中使用Datav 完成大屏基本布局(vue :data="data"),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3中data,vue中:data,vue3中data,data在vue用法,vue3中data,data在vue用法,vue中:data,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项目配置路由,不要让他出现在左侧侧边栏。

Vue中使用Datav 完成大屏基本布局(vue :data=

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://www.jiuchutong.com/zhishi/300504.html 转载请保留说明!

上一篇:语音处理/语音识别基础(六)- 语音的端点检测(EPD/VAD)(语音语言)

下一篇:音乐制作:Ableton Live 11 Suite Mac(音乐制作人评刀郎新专辑)

  • e2手机怎么样(e2手机)(e28手机)

    e2手机怎么样(e2手机)(e28手机)

  • word怎么把竖着的字横过来(word怎么把竖着的表格横过来)

    word怎么把竖着的字横过来(word怎么把竖着的表格横过来)

  • 微信交易限制怎么回事(微信交易限制怎么查被限制几天)

    微信交易限制怎么回事(微信交易限制怎么查被限制几天)

  • ipadair2怎么插卡上网(ipadair2如何插卡)

    ipadair2怎么插卡上网(ipadair2如何插卡)

  • 喇叭线对音质的影响(喇叭线对音质的影响 知乎)

    喇叭线对音质的影响(喇叭线对音质的影响 知乎)

  • 抖音名字改不了怎么回事(抖音名字改不了一直说今日已达上限)

    抖音名字改不了怎么回事(抖音名字改不了一直说今日已达上限)

  • 华为手机锁定模式是什么意思(华为手机锁定模式有什么用)

    华为手机锁定模式是什么意思(华为手机锁定模式有什么用)

  • miui是什么意思在手机里(小米手机开机显示miui是什么意思)

    miui是什么意思在手机里(小米手机开机显示miui是什么意思)

  • 抖音拍照片怎么保存到相册(抖音拍照片怎么不保存到相册)

    抖音拍照片怎么保存到相册(抖音拍照片怎么不保存到相册)

  • iphone微信电话不弹出(iPhone微信电话不解锁接听)

    iphone微信电话不弹出(iPhone微信电话不解锁接听)

  • 钉钉一个号可以同时在手机和平板上使用吗(钉钉一个号可以进两个群吗)

    钉钉一个号可以同时在手机和平板上使用吗(钉钉一个号可以进两个群吗)

  • 独显主机什么意思(电脑独显主机)

    独显主机什么意思(电脑独显主机)

  • ps如何把烟雾抠出来(ps如何把烟雾抠到图上)

    ps如何把烟雾抠出来(ps如何把烟雾抠到图上)

  • 手机怎么移动文件夹(手机怎么移动文件到data文件夹)

    手机怎么移动文件夹(手机怎么移动文件到data文件夹)

  • 微信怎么点聊天记录(微信怎么聊天记录迁移到新手机)

    微信怎么点聊天记录(微信怎么聊天记录迁移到新手机)

  • 快手小店服务费是多少(快手小店服务费收取标准)

    快手小店服务费是多少(快手小店服务费收取标准)

  • 圈厨是不是小米(圈厨这个牌子好吗)

    圈厨是不是小米(圈厨这个牌子好吗)

  • 手机pc端在哪里呀(手机pc端在哪里呀,怎样打开)

    手机pc端在哪里呀(手机pc端在哪里呀,怎样打开)

  • vivox27怎么闪充(vivo27闪充怎么设置)

    vivox27怎么闪充(vivo27闪充怎么设置)

  • excel冻结特定行列(excel冻结特定行行)

    excel冻结特定行列(excel冻结特定行行)

  • cad镜像快捷键(cad镜像快捷键命令)

    cad镜像快捷键(cad镜像快捷键命令)

  • pcfmgr.exe是什么进程 pcfmgr进程查询(pc是什么文件)

    pcfmgr.exe是什么进程 pcfmgr进程查询(pc是什么文件)

  • Sublime Text v4.0(4143)破解方法

    Sublime Text v4.0(4143)破解方法

  • Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本(开发导航栏及公共部分)(vuecli项目实战)

    Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本(开发导航栏及公共部分)(vuecli项目实战)

  • 工会经费计税依据
  • 所得税汇算清缴账务处理
  • 员工餐费用应该怎么记账
  • 应付票据与应付账款
  • 单位结算卡和公账是一张卡吗
  • 专利在审可以入库吗
  • 提供咨询服务的小规模企业是一般纳税人吗
  • 资产负债表日后调整事项与非调整事项的区别
  • 哪些类型的合同无效
  • 增值税普通发票和普通发票的区别怎么交税
  • 企业所得税年报补报
  • 发票认证完是不是没开票
  • 月底结转都结转什么
  • 销售货物类型
  • 招聘签合同
  • 税友每年还要交年费?
  • 企业所得税报表模板
  • 资产减值损失列示在利润表哪里
  • 固定资产内部调拨流程
  • 企业所得税业务招待费扣除比例
  • 哪些会计凭证不需要依法保存
  • 初级如何备考
  • 企业代收代支的非税收入需要缴税吗?
  • 信息服务费发票范围
  • 增资后可以减资吗
  • 员工收到货款不交公司,法律规定
  • 微软产品提示订单失效
  • 微软发布新windows
  • 汇算清缴所得税补缴怎么处理
  • thinkphp怎么部署
  • 企业收到款项
  • php ftp功能
  • 销售货物是什么意思
  • hbuilder怎么下载
  • 收到商品的会计分录怎么写
  • ieview.exe 是什么
  • 土地开发公司是国企吗
  • 可供出售金融资产和交易性金融资产
  • 精确控制 英文
  • 手把手教你如何套路男神
  • 常用的css样式有哪些
  • php 下载上传文件
  • linux清理文件内容
  • 土地出让金抵扣进项税
  • 金蝶固定资产累计折旧凭证生成
  • 产品淘汰造成的影响
  • SQL SERVER 2000 9003错误的解决方法(只适用于SQL2000)
  • 汇算清缴补缴所得税摘要怎么写的
  • 一般纳税人认定标准2023年
  • 施工企业暂估成本
  • 增加固定资产原值
  • 银行定期利息怎么算一年
  • 一般纳税人开红字专用发票流程
  • 免税出口是什么意思
  • 扣除员工餐费怎么做分录
  • 所得税汇算清缴退税会计分录怎么做
  • 开服务业发票要交印花税吗?
  • 哪些减值准备一经计提不得转回
  • 会议费是指参加会议还是举办会议
  • 发票丢失如何处理入账
  • vistasp3
  • 怎么制作win7系统u盘装系统教程
  • dcom进程
  • mac os操作教程
  • win10如何关闭windows defender实时保护
  • centos的特点
  • win7开机进入桌面黑屏但有鼠标
  • linux查看命令帮助信息的方式
  • win10开机显示recover
  • win10系统怎么刻录光盘?win10刻录光盘详细图文步骤
  • unity优化方案
  • nodejs中的shell命令是什么意思
  • Unable to execute dex: Multiple dex files define 解决方法
  • vue如何用
  • android开发最全教程
  • shell函数写法
  • shell脚本逐条执行
  • jquery easyUI中ajax异步校验用户名
  • javascript数据结构与算法第三版
  • 表彰税务工作者们的活动策划
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设