VUE大屏可视化实战

前言

框架：若依 VUE+SpringBoot前后端分离

基于此框架开发一个可视化自适应大屏（包括echarts和element的各种组件）

 1.布局

        通过div将大的布局框出来，div一定要由大到小的写，否则太容易画错了，为了便于更直观的看到自己的div大小，可以在style中加上border: 1px dashed #aaa;把div的边框显示出来。

        我的页面布局分为上下2个部分，下面的部分又分为左中右3个模块，左中右模块的每个模块又会分成上中下三个小模块，各个模块中会放一些echarts的图例（柱状图，饼图，折线图）和element的table表格，当然这还没有结束,小的模块下面还会有更小的div。

        自适应布局：要想做到自适应，div的宽和高一定得用百分比。（还有文字，echarts和element的组件也要做相应的处理，这个之后再写）

大致的布局图如下：

 源码如下：

<template>
  <div class="wrap">
    <!--    头部div-->
    <div class="header">
      {{ nowTime }}
    </div>
    <!--    下部容器div-->
    <div class="container">
      <!--左边模块-->
      <div class="leftpart">
        <!--左边上模块-->
        <div class="leftrighttopback"></div>
        <!--左边模块分割-->
        <div style="width:100%;height:2%;"></div>
        <!--左边下模块-->
        <div class="leftrightbottomback"></div>
      </div>
 
      <!--中间模块-->
      <div class="centerpart"></div>
 
      <!--右边模块-->
      <div class="rtghtpart">
        <!--右边第一个模块-->
        <div class="leftrighttopback"></div>
        <!--右边模块分割-->
        <div style="width:100%;height:2%;"></div>
        <!--右边第二个模块-->
        <div class="leftrightbottomback"></div>
      </div>
 
    </div>
  </div>
 
</template>
<script>
 
export default {
  data() {
    return {
      nowTime: ''
    };
  },
  mounted() {
    this.getNowTime();
 
  },
  methods: {
    getNowTime () {
      let speed = 1000
      let that = this
      let theNowTime = function () {
        that.nowTime = that.timeNumber()
      }
      setInterval(theNowTime, speed)
    },
    timeNumber () {
      let today = new Date()
      let date = today.getFullYear() + '-' + this.twoDigits(today.getMonth() + 1) + '-' + this.twoDigits(today.getDate())
      let time = this.twoDigits(today.getHours()) + ':' + this.twoDigits(today.getMinutes()) + ':' + this.twoDigits(today.getSeconds())
      return date + '  ' + time
    },
    twoDigits (val) {
      if (val < 10) return '0' + val
      return val
    },
  },
}
</script>
 
<style scoped>
.wrap {
  background: url("../../../assets/img/visualMonitoringlogo/wh_singleback.png");
  background-size: cover;
  width: 100%;
  height: 50vw;
  border: 2px dashed #aaa;
}
.header {
  font-size: 1vw;
  height: 8%;
  color: #ffffff;
  text-align: right;
  line-height:4vw;
  border: 2px dashed #aaa;
}
.container {
  margin: 0 0.5vw 0.5vw;
  display: flex;
  justify-content: space-between;
  height: 92%;
  border: 2px dashed #aaa;
}
.leftpart{
  float:left;
  width:28%;
  height:98%;
  border: 2px dashed #aaa;
}
.centerpart{
  float:left;
  width:44%;
  height:98%;
  border: 2px dashed #aaa;
}
.rtghtpart{
  float:left;
  width:28%;
  height:98%;
  border: 2px dashed #aaa;
}
.leftrighttopback {
  width:100%;
  height:42%;
  background-color: rgba(46, 66, 96, 0.4);
  border: 2px dashed #aaa;
}
.leftrightbottomback {
  width:100%;
  height:56%;
  background-color: rgba(46, 66, 96, 0.4);
  border: 2px dashed #aaa;
}
 
</style>复制

2.echarts图例+element组件的应用

未完待续。。。