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

更新時(shí)間：2024年09月06日 09:19:56 作者：-風(fēng)過無痕

這篇文章主要介紹了Vue中使用Datav如何完成大屏基本布局問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

前言

在實(shí)際開發(fā)過程中，我們經(jīng)常需要一個(gè)大屏進(jìn)行一些常規(guī)數(shù)據(jù)的展示。在Vue中也是提供了這樣的容器組件

我們可以使用基于Vue的 Datav組件 + Vue-Baidu-Map地圖組件 + Echarts圖表組件 + 時(shí)間戳就實(shí)現(xiàn)基本布局

在Vue中配置大屏路由的時(shí)候，我們注意不要讓大屏的路由出現(xiàn)在側(cè)邊欄的地方，讓他點(diǎn)擊或者輸入地址出現(xiàn)

Datav 介紹

組件庫基于Vue （React版）主要用于構(gòu)建大屏（全屏）數(shù)據(jù)展示頁面即數(shù)據(jù)可視化，具有多種類型組件可供使用

帶有不同邊框的容器，用來點(diǎn)綴頁面效果，增加視覺效果，圖表組件基于Charts封裝，輕量，易用，飛線圖/水位圖/輪播表/...

在Vue中使用Datav

1.npm安裝

npm install @jiaminghi/data-view

2.引入

全局引入

// 將自動(dòng)注冊(cè)所有組件為全局組件
import dataV from '@jiaminghi/data-view'
// 掛載在Vue上
Vue.use(dataV)

按需引入

import { borderBox1 } from '@jiaminghi/data-view'
?
Vue.use(borderBox1)

使用細(xì)節(jié) - 具體的瀏覽官網(wǎng)

1.在Vue項(xiàng)目配置路由，不要讓他出現(xiàn)在左側(cè)側(cè)邊欄。

2.大屏頁面布局思路

我們先使用Datav的11邊框做一個(gè)最大的布局，讓他充滿可視化的區(qū)域，填充背景顏色。
我們?cè)谶吙蚶锩鎸懸粋€(gè)遮罩層（填充和背景一樣顏色）和一個(gè)Datav自帶的加載動(dòng)畫（絕對(duì)居中）。
為什么需要一個(gè)遮罩層和加載動(dòng)畫，因?yàn)榘俣鹊貓D個(gè)性化樣式加載的時(shí)候可能會(huì)報(bào)錯(cuò)和網(wǎng)絡(luò)原因?qū)е掳俣鹊貓D加載緩慢白屏現(xiàn)象，用了遮罩層和加載動(dòng)畫在顯得沒有那么沖突。
然后在使用Vue-Baidu-Map 加載一個(gè)百度地圖，添加地圖個(gè)性化樣式（具體操作主頁文章有詳細(xì)操作）。
然后在通過子絕父相定位，把元素定位到地圖層級(jí)上面。注意地圖加載完畢之后就要關(guān)閉遮罩層和加載動(dòng)畫。使用定位是為了讓地圖這一層級(jí)不被遮擋，導(dǎo)致地圖功能用不了。
最后在利用new Date()獲取時(shí)間，來對(duì)時(shí)間進(jìn)行操作。完成獲取當(dāng)前日期，時(shí)間。和從登錄監(jiān)測(cè)時(shí)間。
最后根據(jù)自己的實(shí)際開發(fā)要求進(jìn)行更改和填充，利用Datav自己組件 + Echarts圖表完成剩下的布局。

細(xì)節(jié)：

給Datav自帶的邊框添加背景顏色，注意：只有Datav邊框10可以直接添加邊框顏色

百度地圖api渲染個(gè)性化地圖的時(shí)候，可能會(huì)因?yàn)榫W(wǎng)絡(luò)原因?qū)е碌募虞d緩慢導(dǎo)致個(gè)性化地圖樣式加載失敗，可以加一個(gè)try{}catch{}，根據(jù)實(shí)際情況來。

給頁面左右上角添加當(dāng)前日期和當(dāng)前時(shí)間，利用new Date() 屬性和提供的相關(guān)函數(shù)方法進(jìn)行操作具體看代碼

中間的系統(tǒng)監(jiān)測(cè)時(shí)間

我們?cè)邳c(diǎn)擊登錄的時(shí)候存一個(gè)時(shí)間戳（具體在Vue中怎么操作看主頁文章-Vue Token 原理操作處理有詳細(xì)操作）但我們?cè)陧撁嬷械臅r(shí)候就獲取當(dāng)前時(shí)間戳，在相減就是登錄了多長(zhǎng)時(shí)間的時(shí)間戳。在根據(jù)時(shí)間單位進(jìn)制進(jìn)行轉(zhuǎn)換賦值，在每一秒執(zhí)行?，F(xiàn)在監(jiān)測(cè)時(shí)間是賬號(hào)登錄多長(zhǎng)時(shí)間。如果換成這個(gè)賬號(hào)注冊(cè)了多久的時(shí)間差，就在注冊(cè)賬號(hào)的時(shí)候存一個(gè)時(shí)間，或者調(diào)接口讓后端傳一個(gè)時(shí)間戳回來。剩下的同理即可。

記得在切換頁面的時(shí)候清空定時(shí)器

// 銷毀定時(shí)器
  beforeDestroy() {
      console.log("銷毀定時(shí)器");
      clearInterval(this.getDate) // 在Vue實(shí)例銷毀前，清除時(shí)間定時(shí)器
      clearInterval(this.monitortime)
  },

下面是完整代碼

<template>
  <div class="conter">
    <dv-full-screen-container>
      <dv-border-box-11 title="消防監(jiān)測(cè)系統(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)管時(shí)間 -->
          <div class="monitor">
            <div class="txt">系統(tǒng)監(jiān)測(cè)時(shí)間</div>
            <div class="reader">
              <div>
                <i>{{ day }}</i
                >天
              </div>
              <div>
                <i>{{ hour }}</i
                >時(shí)
              </div>
              <div>
                <i>{{ minute }}</i
                >分
              </div>
              <div>
                <i>{{ second }}</i
                >秒
              </div>
            </div>
          </div>
        </baidu-map>
        <!-- 當(dāng)前日期+當(dāng)前星期 -->
        <div class="datae">
          {{ nowDate + ' ' + nowWeek }}
        </div>
        <!-- 當(dāng)前時(shí)間 -->
        <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,
      // 動(dòng)畫開光
      loadinge: false,
      nowDate: '', // 當(dāng)前日期
      nowTime: '', // 當(dāng)前時(shí)間
      nowWeek: '', // 當(dāng)前星期
?
      day: '0', //當(dāng)前天數(shù)
      hour: '0', //當(dāng)前小時(shí)
      minute: '0', //當(dāng)前分鐘
      second: '0', //當(dāng)前秒數(shù)
      dialogTableVisible: false
    }
  },
  mounted() {
    this.currentTime()
  },
  // 銷毀定時(shí)器
  beforeDestroy() {
      console.log("銷毀定時(shí)器");
      clearInterval(this.getDate) // 在Vue實(shí)例銷毀前，清除時(shí)間定時(shí)器
      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
      // 地圖放大等級(jí)
      this.zoom = 14
      map.enableScrollWheelZoom() // 啟用滾輪放大縮小，默認(rèn)禁用
      map.enableContinuousZoom() // 可拖拽
      // 地圖個(gè)性化樣式
      try {
        map.setMapStyleV2({
          styleId: '你在引入AK賬號(hào)的百度地圖發(fā)布的個(gè)性化樣式'
        })
      } catch (erro) {
        return false
      }
      // 這個(gè)是遮罩層和加載動(dòng)畫的開關(guān) 默認(rèn)一進(jìn)到頁面加載動(dòng)畫和遮罩層是開啟的
      // 還有一個(gè)作用就是網(wǎng)絡(luò)不好時(shí)，百度地圖加載失敗時(shí)。會(huì)出現(xiàn)白屏現(xiàn)象，加上這個(gè)遮罩層和加載動(dòng)畫會(huì)顯得比較流暢
      setTimeout(() => {
        this.loadinge = true
      }, 3000)
    },
    // 每0.5秒執(zhí)行一次
    currentTime() {
      setInterval(this.getDate, 500)
      setInterval(this.monitortime, 1000)
    },
    // 獲取當(dāng)前日期時(shí)間的方法
    getDate() {
      var _this = this
      //獲取年
      let yy = new Date().getFullYear()
      //獲取月,注意時(shí)間是0-11，0代表1月份
      let mm = new Date().getMonth() + 1
      // 獲取具體哪一天
      let dd = new Date().getDate()
      // 獲取星期 0-6 0是星期天
      let week = new Date().getDay()
      //獲取小時(shí)
      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)測(cè)時(shí)間
    monitortime() {
   var _that = this
      // 當(dāng)前時(shí)間
      let x = new Date().getTime()
      console.log('當(dāng)前時(shí)間戳', x)
      //   // 點(diǎn)擊登錄存的時(shí)間
      //   //   let y = getTokenTime()
      //   // console.log('登錄時(shí)間戳', y)
      //   // 登錄之后的監(jiān)測(cè)時(shí)間
      //   let z = x - y
      //   // console.log('監(jiān)測(cè)時(shí)間', z)
      _that.day = parseInt(x / 1000 / 60 / 60 / 24) //日
      _that.hour = parseInt((x / 1000 / 60 / 60) % 24) //時(shí)
      _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 右邊不會(huì)生效 要改成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;
        // 去除百度地圖的圖標(biāo)
        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)測(cè)時(shí)間
        .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;
      }
      // 右上角的當(dāng)前時(shí)間
      .timer {
        // background-color: skyblue;
        font-size: 18px;
        position: absolute;
        top: 7px;
        right: 200px;
        color: #fff;
      }
    }
  }
}
</style>

注意：如果你全部復(fù)制會(huì)報(bào)錯(cuò)，因?yàn)槟阋赩ue中使用Vue-Baidu-Map加個(gè)性化樣式[版本問題導(dǎo)致個(gè)性化地圖渲染不出來的問題，主頁文章有]，和登錄存儲(chǔ)時(shí)間戳的方法getTokenTime （）[可以直接刪除]，和在Vue中使用Datav[主頁文章有]

可以根據(jù)具體的開發(fā)情況，進(jìn)行2次修改，下面是我最終樣子