【信贷后台管理系统之首页】-一、布局设置

创建一个layout文件夹，layout.vue。容器里存放页面的整个布局规划，使用到element-ui的container布局容器。为实现组件化管理，将aside,header部分单独放在components组件，然后在layout.vue布局里直接引用。aside是导航栏，header里右边有个admin可实现下拉菜单进行退出登录。
layout.vue代码如下：

<template>
   <div>
     <el-container>
       <el-aside width="200px">
         <common-aside />
       </el-aside>
       <el-container>
         <el-header>
           <common-header />
         </el-header>
         <el-main>
           <router-view />
         </el-main>
       </el-container>
     </el-container>
   </div>
</template>
<script>
import CommonAside from '@/components/Layout/CommonAside.vue'
import CommonHeader from '@/components/Layout/CommonHeader.vue'


export default {
  data(){
    return{}
  },
  components:{
    CommonAside,
    CommonHeader,

  }

}
</script>
<style >
a:link{
  text-decoration: none;
  color: #ffffff;
}

//状态二：已经访问过的链接
a:visited{
  text-decoration: none;
  color: #ffffff;
}

// 状态三：鼠标滑过的链接（默认红色)
a:hover{
  text-decoration: none;
  color:#ffffff;
}
// 状态四：被点击的链接
a:active{
  text-display: none;
  color: #ffffff;
}
.el-header{
  display: flex;
  align-items:center;
  padding: 0 620px;
  color: #ffffff;
  justify-content: space-between;
}
.el-footer{
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-aside{
  background-color: #545c64;
  color: #333333;
  text-align: center;
  line-height: 200px;
}
.el-main{
  background-color: #e9eef3;
  color: #333333;
  text-align: center;
}
.el-container{
  height: 100vh;
}
.el-menu-vertical-demo{
  border:none;
}
</style>

左边导航栏的CommonAside.vue代码如下

<template>
  <div>
    <el-aside width="240px">
      <el-menu
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
<!--      没有二级导航-->
      <el-menu-item index="1">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>
<!--      有二级导航-->
      <el-submenu index="2">

        <template slot="title">
          <span>贷款管理</span>
        </template>
        <el-menu-item index="2-1">贷款申请</el-menu-item>
      </el-submenu>
      </el-menu>
    </el-aside>
  </div>
</template>

<script>

</script>

<style>
a:link{
  text-decoration: none;
  color: #ffffff;
}

//状态二：已经访问过的链接
a:visited{
  text-decoration: none;
  color: #ffffff;
}

// 状态三：鼠标滑过的链接（默认红色)
a:hover{
  text-decoration: none;
  color:#ffffff;
}
// 状态四：被点击的链接
a:active{
  text-display: none;
  color: #ffffff;
}
.el-header{
  padding: 0 620px;
  display: flex;
  align-items: center;
  color: #ffffff;
  justify-content: space-between;
}
.el-footer{
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-aside{
  background-color: #545c64;
  color: #333333;
  text-align: center;
  line-height: 200px;
}
.el-main{
  background-color: #e9eef3;
  color: #333333;
  text-align: center;
}
.el-container{
  height: 100vh;
}
.el-menu-vertical-demo{
  border:none;
}
</style>

CommonHeader.vue代码如下

<template>
  <el-header>
<!--    左侧面包屑-->
    <div class="left">首页</div>
<!--    右侧用户名-->
    <div class="right">
<!--      下拉菜单-->
      <el-dropdown>
        <span class="el-dropdown-link"> admin </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </el-header>
</template>
<script>

</script>
<style>
a:link{
  text-decoration: none;
  color: #ffffff;
}

//状态二：已经访问过的链接
a:visited{
  text-decoration: none;
  color: #ffffff;
}

// 状态三：鼠标滑过的链接（默认红色)
a:hover{
  text-decoration: none;
  color:#ffffff;
}
// 状态四：被点击的链接
a:active{
  text-display: none;
  color: #ffffff;
}
.el-header{
  padding: 0 620px;
  display: flex;
  align-items: center;
  color: #ffffff;
  justify-content: space-between;
}
.el-footer{
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-aside{
  background-color: #545c64;
  color: #333333;
  text-align: center;
  line-height: 200px;
}
.el-main{
  background-color: #e9eef3;
  color: #333333;
  text-align: center;
}
.el-container{
  height: 100vh;
}
.el-menu-vertical-demo{
  border:none;
}

</style>

要想实现以上一行四列内容数据动态增加，要下载vue-count-to，并引入使用
https://www.npmjs.com/package/vue-count-to

折线图，柱状图，饼图需要安装echarts并导入使用（之前已导入使用）

使用栅格布局，设置一行四列。设计echarts图表，折线图独占一个容器，折线图和饼图一个容器views文件夹下HomeView.vue代码如下：

<template>
  <div class="home">
<!--    栅格布局-->
    <el-row :gutter="10">
      <el-col
          :xl="6"
          :lg="6"
          :md="12"
          :sm="24"
          :xs="24"
          v-for="(item,index) in list" :key="index">
        <div class="dashboard-item" :style="{background:item.color}">
          <p>{{item.title}}</p>
          <countTo :startVal='0' :endVal='item.val' :duration='3000'></countTo>
        </div>
      </el-col>
<!--      <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24"><div >1</div></el-col>-->
<!--      <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24"><div >2</div></el-col>-->
<!--      <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24"><div >3</div></el-col>-->
<!--      <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24"><div >4</div></el-col>-->
    </el-row>
<!--    echarts图表-->
    <div class="chart1"></div>
    <div class="echarts-box">
      <div class="chart2"></div>
      <div class="chart3"></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import countTo from "vue-count-to";
export default {
  components: {countTo},
  data(){
    return{
      list:[
        {val:123432,title:'最高可借金额',color:'#67ca3a'},
        {val:9843,title:'回报率',color:'#ff6600'},
        {val:6666,title:'业绩领跑',color:'#f56c6c'},
        {val:8888,title:'底薪',color:'#4093ff'},
      ],
    }
  },
  methods:{
    initCharts(){
      // this是绑定vue实例，后续改变页面大小，也更新图表大小
      this.chart1 = echarts.init(document.querySelector('.chart1'));
      //console.log(chart1)
      let option1 = {
        title: {
          text: 'Stacked Line'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: 'Direct',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: 'Search Engine',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };
      // 应用配置生成图表
      this.chart1.setOption(option1)

      // 第二个图表
      this.chart2=echarts.init(document.querySelector(".chart2"));
      // 图表配置
      let option2 = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [
              120,
              {
                value: 200,
                itemStyle: {
                  color: '#a90000'
                }
              },
              150,
              80,
              70,
              110,
              130
            ],
            type: 'bar'
          }
        ]
      };
      //应用配置生成图表
      this.chart2.setOption(option2)

      // 第三个图表
      this.chart3=echarts.init(document.querySelector(".chart3"));
      //图表配置
      let option3 = {
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: 40, name: 'rose 1' },
              { value: 38, name: 'rose 2' },
              { value: 32, name: 'rose 3' },
              { value: 30, name: 'rose 4' },
              { value: 28, name: 'rose 5' },
              { value: 26, name: 'rose 6' },
              { value: 22, name: 'rose 7' },
              { value: 18, name: 'rose 8' }
            ]
          }
        ]
      };
      //把应用配置生成图表
      this.chart3.setOption(option3)
    },
    resize(){
      this.chart1.resize();
      this.chart2.resize();
      this.chart3.resize();
    }
  },
  mounted() {
    this.initCharts();
    this.resizeCallback = this.resize.bind(this);
    window.addEventListener("resize",this.resizeCallback)
  },
};
</script>
<style >
.dashboard-item{
  height: 200px;
  line-height: 100px;
  font-weight: bold;
  color: #ffffff;
}
 > p{
   color:black;
   height: 40px;
   margin: 0;
 }
.chart1{
  height: 400px;
  width: 100%;
}
 .echarts-box{
   overflow: hidden;
   .chart2,.chart3{
   height: 400px!important;
   width: 50%;
 }
   .chart2{
     float: left;
   }
   .chart3{
     float: left;
   }
 }

</style>

关于样式学习参考：https://blog.****.net/qq_41638795/article/details/83304388
关于浏览器窗口监听学习参考：https://blog.****.net/weixin_44490109/article/details/113973991