Vue中使用Datav如何完成大屏基本布局
更新時間：2024年09月06日 09:19:56 作者：-風過無痕
這篇文章主要介紹了Vue中使用Datav如何完成大屏基本布局問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
前言
在實際開發(fā)過程中，我們經(jīng)常需要一個大屏進行一些常規(guī)數(shù)據(jù)的展示。在Vue中也是提供了這樣的容器組件
我們可以使用基于Vue的 Datav組件 + Vue-Baidu-Map地圖組件 + Echarts圖表組件 + 時間戳就實現(xiàn)基本布局
在Vue中配置大屏路由的時候，我們注意不要讓大屏的路由出現(xiàn)在側邊欄的地方，讓他點擊或者輸入地址出現(xiàn)
Datav 介紹
組件庫基于Vue （React版） 主要用于構建大屏（全屏）數(shù)據(jù)展示頁面即數(shù)據(jù)可視化，具有多種類型組件可供使用
帶有不同邊框的容器，用來點綴頁面效果，增加視覺效果，圖表組件基于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)使用細節(jié) - 具體的瀏覽官網(wǎng)
1.在Vue項目配置路由，不要讓他出現(xiàn)在左側側邊欄。
2.大屏頁面布局思路
- 我們先使用Datav的11邊框做一個最大的布局，讓他充滿可視化的區(qū)域，填充背景顏色。
- 我們在邊框里面寫一個遮罩層（填充和背景一樣顏色）和一個Datav自帶的加載動畫（絕對居中）。
- 為什么需要一個遮罩層和加載動畫，因為百度地圖個性化樣式加載的時候可能會報錯和網(wǎng)絡原因導致百度地圖加載緩慢白屏現(xiàn)象，用了遮罩層和加載動畫在顯得沒有那么沖突。
- 然后在使用Vue-Baidu-Map 加載一個百度地圖，添加地圖個性化樣式（具體操作主頁文章有詳細操作）。
- 然后在通過子絕父相定位，把元素定位到地圖層級上面。注意地圖加載完畢之后就要關閉遮罩層和加載動畫。使用定位是為了讓地圖這一層級不被遮擋，導致地圖功能用不了。
- 最后在利用new Date()獲取時間，來對時間進行操作。完成獲取當前日期，時間。和從登錄監(jiān)測時間。
- 最后根據(jù)自己的實際開發(fā)要求進行更改和填充，利用Datav自己組件 + Echarts圖表 完成剩下的布局。
細節(jié)：
給Datav自帶的邊框添加背景顏色，注意：只有Datav邊框10可以直接添加邊框顏色
百度地圖api渲染個性化地圖的時候，可能會因為網(wǎng)絡原因導致的加載緩慢導致個性化地圖樣式加載失敗，可以加一個try{}catch{}，根據(jù)實際情況來。
給頁面左右上角添加當前日期和當前時間，利用new Date() 屬性和提供的相關函數(shù)方法進行操作具體看代碼
中間的系統(tǒng)監(jiān)測時間
我們在點擊登錄的時候存一個時間戳（具體在Vue中怎么操作看主頁文章-Vue Token 原理 操作處理有詳細操作）但我們在頁面中的時候就獲取當前時間戳，在相減就是登錄了多長時間的時間戳。在根據(jù)時間單位進制進行轉換賦值，在每一秒執(zhí)行?，F(xiàn)在監(jiān)測時間是賬號登錄多長時間。如果換成這個賬號注冊了多久的時間差，就在注冊賬號的時候存一個時間，或者調接口讓后端傳一個時間戳回來。剩下的同理即可。
記得在切換頁面的時候清空定時器
// 銷毀定時器
beforeDestroy() {
console.log("銷毀定時器");
clearInterval(this.getDate) // 在Vue實例銷毀前，清除時間定時器
clearInterval(this.monitortime)
},下面是完整代碼
<template>
<div class="conter">
<dv-full-screen-container>
<dv-border-box-11 title="消防監(jiān)測系統(tǒng)">
<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>
<!-- 監(jiān)管時間 -->
<div class="monitor">
<div class="txt">系統(tǒng)監(jiān)測時間</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', //當前天數(shù)
hour: '0', //當前小時
minute: '0', //當前分鐘
second: '0', //當前秒數(shù)
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);
// 經(jīng)度
this.center.lng = 118.614312
// 維度
this.center.lat = 24.890586
// 地圖放大等級
this.zoom = 14
map.enableScrollWheelZoom() // 啟用滾輪放大縮小，默認禁用
map.enableContinuousZoom() // 可拖拽
// 地圖個性化樣式
try {
map.setMapStyleV2({
styleId: '你在引入AK賬號的百度地圖發(fā)布的個性化樣式'
})
} catch (erro) {
return false
}
// 這個是遮罩層和加載動畫的開關 默認一進到頁面加載動畫和遮罩層是開啟的
// 還有一個作用就是網(wǎng)絡不好時，百度地圖加載失敗時。會出現(xiàn)白屏現(xiàn)象，加上這個遮罩層和加載動畫會顯得比較流暢
setTimeout(() => {
this.loadinge = true
}, 3000)
},
// 每0.5秒執(zhí)行一次
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
},
// 監(jiān)測時間
monitortime() {
var _that = this
// 當前時間
let x = new Date().getTime()
console.log('當前時間戳', x)
// // 點擊登錄存的時間
// // let y = getTokenTime()
// // console.log('登錄時間戳', y)
// // 登錄之后的監(jiān)測時間
// let z = x - y
// // console.log('監(jiān)測時間', 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;
}
}
// 監(jiān)測時間
.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[主頁文章有]
可以根據(jù)具體的開發(fā)情況，進行2次修改，下面是我最終樣子
總結
經(jīng)過這一趟流程下來相信你也對 Vue中使用Datav 完成大屏基本布局 有了初步的深刻印象，但在實際開發(fā)中我 們遇到的情況肯定是不一樣的，所以我們要理解它的原理，萬變不離其宗。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue3+elementplus 樹節(jié)點過濾功能實現(xiàn)
樹節(jié)點所展示的街道是讀取的成都市金牛區(qū)的范圍邊界線的json文件,街道下對應內(nèi)容市通過fetch調用接口獲取的內(nèi)容,通過mapTreeData函數(shù)循環(huán)遍歷,對數(shù)據(jù)進行處理,這篇文章主要介紹了vue3+elementplus 樹節(jié)點過濾功能實現(xiàn),需要的朋友可以參考下2024-05-05
之前只是淺顯的使用插件進行vue開發(fā)展示,最近深入的研究了下,下面這篇文章主要給大家介紹了關于Vue3兄弟組件傳值之mitt的超詳細講解,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue-router兩種模式區(qū)別及使用注意事項,結合實例形式詳細分析了vue-router兩種模式hash模式與history模式的區(qū)別、用法與操作注意事項,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了Vue.js和Vue.runtime.js區(qū)別淺析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了Vue組件全局注冊實現(xiàn)警告框的實例,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
Vue+axios使用FormData方式向后端發(fā)送數(shù)據(jù)
在前后端分離的項目中經(jīng)常使用到Vue+axios通過FormData的方式向后端發(fā)送表單數(shù)據(jù),下面就來介紹一下如何實現(xiàn),感興趣的可以了解一下2023-09-09
vueJs函數(shù)readonly與shallowReadonly使用對比詳解
這篇文章主要為大家介紹了vueJs函數(shù)readonly與shallowReadonly使用對比詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
vue vite之LogicFlow安裝核心依賴及項目初始化詳解
這篇文章主要為大家介紹了vue vite之LogicFlow安裝核心依賴及項目初始化詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了vue?退出登錄?清除localStorage的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家總結了vue2.0開發(fā)實踐之入門,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12