位置: 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(音乐制作人评刀郎新专辑)

  • 华为p50怎么设置快速通话(华为p50怎么设置输入法)

    华为p50怎么设置快速通话(华为p50怎么设置输入法)

  • oppo长截屏怎么弄(oppo长截屏怎么拼图)

    oppo长截屏怎么弄(oppo长截屏怎么拼图)

  • 快手小黄车手续费多少(快手小黄车需要什么手续)

    快手小黄车手续费多少(快手小黄车需要什么手续)

  • QQ被暂时冻结怎么解除(qq被暂时冻结怎么看恢复时间)

    QQ被暂时冻结怎么解除(qq被暂时冻结怎么看恢复时间)

  • AMDcpu睿频是自动开的吗(amd是自动睿频吗)

    AMDcpu睿频是自动开的吗(amd是自动睿频吗)

  • 闲鱼买手机要注意什么(闲鱼买手机要注意的问题)

    闲鱼买手机要注意什么(闲鱼买手机要注意的问题)

  • vivo有虚拟男友吗(vivo虚拟男友怎么注销)

    vivo有虚拟男友吗(vivo虚拟男友怎么注销)

  • 华为mate20pro充电发烫(华为mate20pro充电器多少w)

    华为mate20pro充电发烫(华为mate20pro充电器多少w)

  • 电子版和扫描件的区别(什么是电子扫描件)

    电子版和扫描件的区别(什么是电子扫描件)

  • honor 9x如何隐藏应用(华为荣耀9如何隐藏)

    honor 9x如何隐藏应用(华为荣耀9如何隐藏)

  • 华为荣耀x10什么时候发布(华为荣耀X10什么时候上市的)

    华为荣耀x10什么时候发布(华为荣耀X10什么时候上市的)

  • 拼多多怎样截图给商家(拼多多怎样截图给客服)

    拼多多怎样截图给商家(拼多多怎样截图给客服)

  • 怎么样删除淘宝评价(怎么样删除淘宝评价和追评)

    怎么样删除淘宝评价(怎么样删除淘宝评价和追评)

  • 手机视频源格式错误怎么解决(手机视频源格式错误怎么办)

    手机视频源格式错误怎么解决(手机视频源格式错误怎么办)

  • 被别人举报加不了好友(被别人举报成功怎么办)

    被别人举报加不了好友(被别人举报成功怎么办)

  • word里面简历模板在哪(word里面简历模板)

    word里面简历模板在哪(word里面简历模板)

  • 华为mate30怎么设置通知亮屏(华为mate30怎么设置桌面钟表)

    华为mate30怎么设置通知亮屏(华为mate30怎么设置桌面钟表)

  • airpods可以以旧换新吗(airpords可以以旧换新嘛)

    airpods可以以旧换新吗(airpords可以以旧换新嘛)

  • 苹果11pro背面是什么材质(苹果11pro背面是什么材质呀)

    苹果11pro背面是什么材质(苹果11pro背面是什么材质呀)

  • 微信怎么打开微云文件(微信怎么打开微信步数)

    微信怎么打开微云文件(微信怎么打开微信步数)

  • 微信漂流瓶何时重新上线(微信漂流瓶什么时候没的)

    微信漂流瓶何时重新上线(微信漂流瓶什么时候没的)

  • 软件危机表现在哪些方面(软件危机现象)

    软件危机表现在哪些方面(软件危机现象)

  • qq如何查看好友生日(qq如何查看好友的情侣空间)

    qq如何查看好友生日(qq如何查看好友的情侣空间)

  • ios白包是什么意思啊(app白包是什么)

    ios白包是什么意思啊(app白包是什么)

  • 美团外卖会员怎么取消自动续费(美团外卖会员怎么退款申请退款)

    美团外卖会员怎么取消自动续费(美团外卖会员怎么退款申请退款)

  • Windows10 开机如何跳过锁屏直接输入密码?(windows10开机如何换帐号)

    Windows10 开机如何跳过锁屏直接输入密码?(windows10开机如何换帐号)

  • 什么企业的纳税最多
  • 用友财务软件怎么设置二级科目
  • 取得社会团体会费专用票据可以税前扣除吗
  • 加计抵扣进项税额会计分录
  • 建筑企业收到预售款时需要缴纳增值税吗
  • 农产品核定扣除范围
  • 质量问题扣对方货款账务处理
  • 固定资产抵扣对账怎么算
  • 一般纳税人农业增值税如何申报
  • 预支的采购备用金是什么
  • 个人所得税免征项目有哪些
  • 亏损弥补额的年数如何计算?
  • 自然人纳税系统
  • 企业进口应税物资在进口环节应交的消费税,应计入
  • 退休返钱怎么算的
  • 总资产周转率计算公式用不用乘100%
  • 港口建设费2021年归国家税务总局
  • 汽车维修单位提成比例
  • 免征的教育费附加如何账务处理
  • 公司账上亏损
  • 收购破产债权
  • 上市公司非限售股股票转让收入
  • 实验耗材发票内容怎么写
  • 没有生产产品,费用怎么结转
  • 联营店铺收取的收入如何账务处理?
  • 稽查查补是什么意思
  • 公司付电费发票怎么做账
  • 房租税收怎么算?
  • 股东退股未分配股利
  • 怎么用u盘启动dos
  • 联想一体机如何调节屏幕亮度
  • php 反射 性能
  • 购销合同印花税税率2023
  • 鹤望兰的养殖方法和注意事项浇水
  • 材料报废 开什么发票
  • framework怎么用
  • 施工单位老板
  • 挖机出租给公司
  • php的implode
  • php微信公众号商城源码
  • react避免子组件更新
  • 建筑行业预交增值税怎么结转
  • sql server评估期已过版本升级时重启失败
  • 异地预交个人所得税
  • 食堂买菜是什么费用
  • 新会计准则应付账款
  • sql server 2008简介
  • 企业生产经营发展
  • 红字发票的数量乘以单价可以不等于含税金额吗
  • 主营业务成本和营业成本的区别
  • 在建工程的预付款账务处理
  • 小规模纳税人享受3%征收率减按1%征收,销售额计算公式
  • 建筑劳务公司是什么性质
  • 财务管理考试时间不够怎么办
  • 库存商品暂估入库是什么意思
  • 现金日记账怎么记账
  • 非营利性代收代缴税款
  • 工会活动支出如何记账
  • 营业收入要包括什么
  • 未达起征点怎么报税
  • utilman.exe - utilman是什么进程
  • win7桌面计算机
  • win8.1玩英雄联盟
  • ubuntu彻底删除
  • win10家庭版关闭
  • glsl fract
  • nodejs常用api
  • javascript中的继承
  • html5webview交互
  • c语言 ls
  • Android platform build guide for Exynos-4412(odroid -X/X2/U2/U3/Q2/Q)
  • 单例 python
  • js验证身份证合法性
  • 前端跑马灯实现
  • Unity Batch 对 Vertex Shader 产生影响
  • android怎么学
  • js简单网速测试方法
  • 浙江国地税申报网
  • 小额贷款公司在职人员和离职人员情节哪种轻
  • 尾矿治理文件
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设