首页 前端知识 VUE大屏可视化实战

VUE大屏可视化实战

2024-01-24 15:01:24 前端知识 前端哥 444 861 我要收藏

前言

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

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

 1.布局

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

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

        自适应布局:要想做到自适应,div的宽和高一定得用百分比。(还有文字,echartselement的组件也要做相应的处理,这个之后再写)


大致的布局图如下:

 

 源码如下:

<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组件的应用

未完待续。。。
 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/234.html
评论
发布的文章

js向上取整

2024-02-03 16:02:53

9、jQuery

2024-02-03 12:02:49

jQuery 遍历方法总结

2024-02-03 12:02:26

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!