前言
框架:若依 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组件的应用
未完待续。。。