Vue中使用Datav如何完成大屏基本布局
更新時間：2024年09月06日 09:19:56 作者：-風過無痕
這篇文章主要介紹了Vue中使用Datav如何完成大屏基本布局問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
前言
在實際開發(fā)過程中，我們經常需要一個大屏進行一些常規(guī)數據的展示。在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)使用細節(jié) - 具體的瀏覽官網
1.在Vue項目配置路由，不要讓他出現在左側側邊欄。
2.大屏頁面布局思路
- 我們先使用Datav的11邊框做一個最大的布局，讓他充滿可視化的區(qū)域，填充背景顏色。
- 我們在邊框里面寫一個遮罩層（填充和背景一樣顏色）和一個Datav自帶的加載動畫（絕對居中）。
- 為什么需要一個遮罩層和加載動畫，因為百度地圖個性化樣式加載的時候可能會報錯和網絡原因導致百度地圖加載緩慢白屏現象，用了遮罩層和加載動畫在顯得沒有那么沖突。
- 然后在使用Vue-Baidu-Map 加載一個百度地圖，添加地圖個性化樣式（具體操作主頁文章有詳細操作）。
- 然后在通過子絕父相定位，把元素定位到地圖層級上面。注意地圖加載完畢之后就要關閉遮罩層和加載動畫。使用定位是為了讓地圖這一層級不被遮擋，導致地圖功能用不了。
- 最后在利用new Date()獲取時間，來對時間進行操作。完成獲取當前日期，時間。和從登錄監(jiān)測時間。
- 最后根據自己的實際開發(fā)要求進行更改和填充，利用Datav自己組件 + Echarts圖表 完成剩下的布局。
細節(jié)：
給Datav自帶的邊框添加背景顏色，注意：只有Datav邊框10可以直接添加邊框顏色
百度地圖api渲染個性化地圖的時候，可能會因為網絡原因導致的加載緩慢導致個性化地圖樣式加載失敗，可以加一個try{}catch{}，根據實際情況來。
給頁面左右上角添加當前日期和當前時間，利用new Date() 屬性和提供的相關函數方法進行操作具體看代碼
中間的系統(tǒng)監(jiān)測時間
我們在點擊登錄的時候存一個時間戳（具體在Vue中怎么操作看主頁文章-Vue Token 原理 操作處理有詳細操作）但我們在頁面中的時候就獲取當前時間戳，在相減就是登錄了多長時間的時間戳。在根據時間單位進制進行轉換賦值，在每一秒執(zhí)行。現在監(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', //當前天數
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賬號的百度地圖發(fā)布的個性化樣式'
})
} catch (erro) {
return false
}
// 這個是遮罩層和加載動畫的開關 默認一進到頁面加載動畫和遮罩層是開啟的
// 還有一個作用就是網絡不好時，百度地圖加載失敗時。會出現白屏現象，加上這個遮罩層和加載動畫會顯得比較流暢
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[主頁文章有]
可以根據具體的開發(fā)情況，進行2次修改，下面是我最終樣子
總結
經過這一趟流程下來相信你也對 Vue中使用Datav 完成大屏基本布局 有了初步的深刻印象，但在實際開發(fā)中我 們遇到的情況肯定是不一樣的，所以我們要理解它的原理，萬變不離其宗。
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue3+elementplus 樹節(jié)點過濾功能實現
樹節(jié)點所展示的街道是讀取的成都市金牛區(qū)的范圍邊界線的json文件,街道下對應內容市通過fetch調用接口獲取的內容,通過mapTreeData函數循環(huán)遍歷,對數據進行處理,這篇文章主要介紹了vue3+elementplus 樹節(jié)點過濾功能實現,需要的朋友可以參考下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組件全局注冊實現警告框的實例,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
Vue+axios使用FormData方式向后端發(fā)送數據
在前后端分離的項目中經常使用到Vue+axios通過FormData的方式向后端發(fā)送表單數據,下面就來介紹一下如何實現,感興趣的可以了解一下2023-09-09
vueJs函數readonly與shallowReadonly使用對比詳解
這篇文章主要為大家介紹了vueJs函數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