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)在側(cè)邊欄的地方，讓他點擊或者輸入地址出現(xiàn)

Datav 介紹

組件庫基于Vue （React版）主要用于構(gòu)建大屏（全屏）數(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)在左側(cè)側(cè)邊欄。

2.大屏頁面布局思路

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

細節(jié)：

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

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

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

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

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

記得在切換頁面的時候清空定時器

// 銷毀定時器
  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
      }
      // 這個是遮罩層和加載動畫的開關(guān) 默認一進到頁面加載動畫和遮罩層是開啟的
      // 還有一個作用就是網(wǎng)絡(luò)不好時，百度地圖加載失敗時。會出現(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>

注意：如果你全部復(fù)制會報錯，因為你要在Vue中使用Vue-Baidu-Map加個性化樣式[版本問題導(dǎo)致個性化地圖渲染不出來的問題，主頁文章有]，和登錄存儲時間戳的方法getTokenTime （）[可以直接刪除]，和在Vue中使用Datav[主頁文章有]

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