statement_web/statement-pc/src/views/dashboard/index-d5c.vue

<template>
  <div class="dashboard-container">
    <header-container></header-container>

    <div class="d5cA-table">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="6">
          <div class="d5cA-table__pane">
            <p class="d5cA-table__title">充值金额(元)</p>
            <h2 class="d5cA-table__totalPrice">
              <count-to :startVal="0" :endVal="homeData.total_invest" :duration="3000" :decimals="2"></count-to>
            </h2>
            <p class="d5cA-table__projectPrice">
              订单总额
              <span>
                <count-to :startVal="0" :endVal="homeData.total_project" :duration="3000" :decimals="2"></count-to>
              </span>
              元
            </p>
            <div class="d5cA-table__people">
              <div class="wid borderRight">
                <p>小程序粉丝总数(人)</p>
                <h3><count-to :startVal="0" :endVal="homeData.platform_total_fans" :duration="2000"></count-to></h3>
              </div>
              <div class="wid">
                <p>注册总数(人)</p>
                <h3><count-to :startVal="0" :endVal="homeData.total_register" :duration="2000"></count-to></h3>
              </div>
            </div>
          </div>
          <div class="d5cA-table__pane">
            <fanmap-chart></fanmap-chart>
          </div>
        </el-col>

        <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="18">
          <div>
            <el-row :gutter="0">
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <div class="d5cA-table__pane">
                  <user-chart></user-chart>
                </div>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <div class="d5cA-table__pane">
                  <fans-chart :fansData="fansChart"></fans-chart>
                </div>
              </el-col>
            </el-row>
          </div>

          <div>
            <el-row :gutter="0">
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <div class="d5cA-table__pane">
                  <invest-chart></invest-chart>
                </div>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <div class="d5cA-table__pane">
                  <growth-chart :fansData="fansChart"></growth-chart>
                </div>
              </el-col>
            </el-row>
          </div>

        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
import UserChart from './components/UserChart'
import FansChart from './components/FansChart'
import GrowthChart from './components/GrowthChart'
import InvestChart from './components/InvestChart'
import FanmapChart from './components/FanmapChart'
import request from '@/utils/request'
import CountTo from 'vue-count-to'
import Screenfull from '@/components/Screenfull'
import HeaderContainer from '@/components/HeaderContainer'
import { mapGetters } from 'vuex'
export default {
  name: 'dashboard',
  components: {
    UserChart,
    FansChart,
    GrowthChart,
    InvestChart,
    FanmapChart,
    Screenfull,
    CountTo,
    HeaderContainer
  },
  data() {
    return {
      homeData: {},
      fansChart: {}
    }
  },
  computed: {
    ...mapGetters(['user'])
  },
  methods: {
    getFansGrowth() {
      request({
        url: '/v1/fans_month_grouth',
        methods: 'get'
      }).then(response => {
        this.fansChart = response.data
      }).catch(error => {
        console.log(error)
      })
    },
    getHomeTotal() {
      request({
        url: '/v1/home_left_top_data',
        methods: 'get'
      }).then(response => {
        this.homeData = response.data
      }).catch(error => {
        console.log(error)
      })
    }
  },
  mounted() {
    // this.investChart()
  },
  created() {
    this.$store.dispatch('GetUserInfo')
    this.getHomeTotal()
    this.getFansGrowth()
  },
  watch: {
    'user': function(val) {
      if (val) {
        console.log(val)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  background-color: #334051;
  min-height: 100%;
}
.d5cA {
  &-table {
    width: 94%;
    margin: 0 auto;
  }
  &-table__pane {
    width: 100%;
    background-color: #37475b;
    padding: 18px 20px;
    margin-top: 10px;
  }
  &-table__title {
    text-align: center;
    font-size: 16px;
    color: #808fa1;
    margin-top: 18px;
  }
  &-table__totalPrice {
    font-size: 42px;
    color: #fff;
    text-align: center;
    font-weight: bold;
    margin-top: 36px;
  }
  &-table__people {
    width: 100%;
    height: 150px;
    background-color: #344355;
    padding: 18px;
    box-sizing: border-box;
    margin-top: 40px;
    .wid {
      float: left;
      width: 50%;
      height: 114px;
      text-align: center;
      font-size: 16px;
      color: #808fa1;
      box-sizing: border-box;
      p {
        margin-top: 10px;
      }
      h3 {
        font-size: 24px;
        color: #fff;
        font-weight: bold;
        margin-top: 54px;
      }
    }
    .borderRight {
      border-right: 1px solid #223040;
    }
  }
  &-table__projectPrice {
    font-size: 16px;
    color: #808fa1;
    text-align: center;
    margin-top: 36px;
    span {
      color: #fff;
    }
  }
}
</style>