|
|
@@ -0,0 +1,214 @@
|
|
|
+<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>
|