oil-station/fuintAdmin/src/views/index.vue

<template>
  <div class="app-container">
    <topindex></topindex>
    <centenrindex></centenrindex>
    <bottomindex></bottomindex>
    <bottom_z></bottom_z>
  </div>
</template>

<script>
import { getHomeData, getStatisticData } from "@/api/home";
import topindex from "@/views/indexcomponents/topindex.vue";
import centenrindex from "@/views/indexcomponents/centenrindex.vue";
import bottomindex from "@/views/indexcomponents/bottomindex.vue";
import bottom_z from "@/views/indexcomponents/bottom_z.vue";
export default {
  name: "HomePage",
  components: {
    centenrindex,
    topindex,
    bottomindex,
    bottom_z

  },
  data() {
    return {
       loading: false,
       homeData: { todayUser: 0, totalUser: 0, todayOrder: 0, totalOrder: 0, todayPay: 0, totalPay: 0, todayActiveUser: 0, totalPayUser: 0 },
       chart1: { title: '近七日订单数量', color: '#ff5b57', chartType: 'bar', header: ['订单统计'] },
       chart2: { title: '近七日会员活跃数', color: '#00acac', chartType: 'line', header: ['会员统计'] },
       chartData1: [],
       chartData2: [],
    };
  },
  created() {
    // this.getHomeData();
    this.getChartsData();

  },
  methods: {
    // 查询首页数据
    getHomeData() {
      this.loading = true;
      getHomeData().then(response => {
          this.homeData = response.data;
          this.loading = false
        }
      );
    },
    // 查询统计数据
    getChartsData() {
      const app = this;
      app.loading = true;
      // 近7日订单数量和活跃会员数量
      getStatisticData({ tag : 'order,user_active' }).then(response => {
          const data = response.data;
          const labelData1 = data.data[0] ? data.data[0] : [];
          const labelData2 = data.data[1] ? data.data[1] : [];
          const dataList1 = [];
          const dataList2 = [];

          data.labels.forEach(function(label, index) {
             const value1 = labelData1[index] ? labelData1[index] : 0;
             const value2 = labelData2[index] ? labelData2[index] : 0;
             dataList1.push( { name: label, value0: value1 } );
             dataList2.push( { name: label, value0: value2 } );
          })
          app.chartData1 = dataList1;
          app.chartData2 = dataList2;
          app.loading = false;
        }
      )
    },
    // 页面跳转
    toTarget(url) {
       this.$router.push( { path: url } );
    },
    // 去收银台
    toCashier(url) {
       const routeLink = this.$router.resolve({ path: url });
       window.open(routeLink.href, '_blank');
    }
  },
};
</script>

<style scoped lang="scss">
.app-container{
  height: 100%;
}
.top-box{
  width: 100%;
  display: flex;
  align-items: center;
}
.top-sl{
  width: 16%;
  background: #FFFFFF;
  border-radius: 8px;
  background: #FFFFFF;
  box-sizing: border-box;
  padding: 15px;

}
.box-title{
  font-size: 14px;
  font-weight: 400;
  color: rgba(0,0,0,0.6);
}
.box-size{
  font-size: 28px;
  font-weight: 400;
  color: rgba(0,0,0,0.9);
  margin-top: 5px;
  margin-bottom: 15px;
}
.box-but{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(0,0,0,0.6);
  font-size: 14px;
}
.icon-lv{
  width: 71px;
  height: 24px;
  background: #E3F9E9;
  border-radius: 3px 3px 3px 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #2BA471;
}

   .overview {
       min-height: 270px;
       background: #FFFFFF;
       margin-bottom: 0px;
       box-shadow: 0 1px 2px #d5d7d8;
       .title {
         margin: 10px 0px 0px 0px;
         padding: 10px 0px 0px 10px;
         height: 44px;
         border: 1px solid #e2e1e1;
         background: #f4f4f4;
         color: #333;
         font-weight: bold;
       }
       .content {
           padding: 15px;
           border: solid 1px #d5d7d8;
           .item {
               display: block;
               border-right: none;
               border-bottom: none;
               min-height: 100px;
               padding: 6px;
               text-align: center;
               cursor: pointer;
               .do {
                   border: solid 1px #cccccc;
                   padding: 20px;
                   border-radius: 2px;
               }
               .icon {
                 height: 40px;
                 width: 40px;
                 display: block;
                 padding: 5px;
                 float: left;
                 border: solid #8a8a8a 1px;
                 border-radius: 30px;
               }
             .text {
                 text-align: left;
                 margin: 0px;
                 text-indent: 10px;
                 font-size: 14px;
             }
             .number {
                 text-align: left;
                 margin: 0px;
                 font-weight: bold;
                 text-indent: 10px;
                 font-size: 18px;
                 color: #ff5b57;
             }
           }
           .home-tools {
             .do {
                 height: 90px;
                 margin-bottom: 10px;
                 cursor: pointer;
                 font-weight: bold;
                 color: #666666;
                 border-radius: 2px;
                 text-align: left;
                 padding: 20px 0px 10px 20px;
                 float: left;
                 width: 100%;
                 background: #ffffff;
                 border: solid 1px #cccccc;
                 .text {
                     margin-top: 14px;
                 }
             }
             .t-icon {
                 width: 50px;
                 height: 50px;
                 float: left;
             }
           }
       }
   }
</style>