admin_home/src/views/dashboard/admin/index.vue

<template>
  <div class="dashboard-editor-container">
    <!--网站，内容，公共栏目数量 start------------------------------------------>
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="topWindowBox">
          <div class="twbTitle">
            <div class="twbIconbgRed">
              <img src="@/assets/index/twbIconbgBlue.png"/>
            </div>
            网站数量
          </div>
          <div class="twbNumber">{{topData.website.count}}</div>
          <!-- <div class="twbStatus"><img src="@/assets/index/arrow-up.png"/> +12% <span>较上周</span></div> -->
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="topWindowBox">
          <div class="twbTitle">
            <div class="twbIconbgBlue">
              <img src="@/assets/index/twbIconbgRed.png"/>
            </div>
            文章发布数量
          </div>
          <div class="twbNumber">{{topData.article.count}}</div>
          <!-- <div class="twbStatus"><img src="@/assets/index/arrow-up.png"/> +18% <span>较昨天</span></div> -->
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="topWindowBox">
          <div class="twbTitle">
            <div class="twbIconbgPurple">
              <img src="@/assets/index/twbIconbgPurple.png"/>
            </div>
            公共栏目数量
          </div>
          <div class="twbNumber">{{topData.category.count}}</div>
          <!-- <div class="twbStatusDown"><img src="@/assets/index/arrow-down.png"/> -2% <span>较上个月</span></div> -->
        </div>
      </el-col>
    </el-row>
    <!--网站，内容，公共栏目数量 end------------------------------------------>
    <!--chart start------------------------------------------>
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="16">
        <div class="chartBox">
          <div class="chartTitle">平台文章增长数量</div>
          <el-row style="background:#fff;padding:16px 16px 0;">
            <line-chart :chart-data="chartData.lineChartData"/>
          </el-row>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chartBox">
          <div class="chartTitle">用户类型</div>
          <div class="chart-wrapper">
            <ring-chart :chart-data="chartData.ringChartData"/>
          </div>
        </div>
      </el-col>
    </el-row>
    <!--chart end------------------------------------------>
  </div>
</template>

<script>
// import GithubCorner from '@/components/GithubCorner'
// import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'//折线图
// import RaddarChart from './components/RaddarChart'
// import PieChart from './components/PieChart'
// import BarChart from './components/BarChart'
// import TransactionTable from './components/TransactionTable'
// import TodoList from './components/TodoList'
// import BoxCard from './components/BoxCard'
import RingChart from './components/RingChart'//圆环图


export default {
  name: 'DashboardAdmin',
  components: {
    // GithubCorner,
    // PanelGroup,
    LineChart,
    // RaddarChart,
    // PieChart,
    // BarChart,
    // TransactionTable,
    // TodoList,
    // BoxCard,
    RingChart
  },
  data() {
    return {
      topData:{
        website:{//网站
          count:0,//总数
          growth_rate:0//增长数
        },
        article:{//文章
          count:0,//总数
          growth_rate:0//增长数
        },
        category:{//栏目
          count:0,//总数
          growth_rate:0//增长数
        }
      },
      chartData:{
        lineChartData:[],//折线图数据
        ringChartData:[]//圆环图数据
      }
    }
  },
  methods: {
    getData(){
      //获取首页数据
      this.$store.dispatch('public/getAdminIndex').then(res=> {
        this.topData.article.count = res.data.article.count;
        this.topData.category.count = res.data.category.count;
        this.topData.website.count = res.data.website.count;
        this.chartData.lineChartData = res.data.monthArticle;
        this.chartData.ringChartData = res.data.userType;

        console.log(this.chartData.lineChartData)
        console.log(this.chartData.ringChartData)
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '网络错误，请重试！'
        });
      })
    },
  },
  mounted(){
    this.getData()
  }
}
</script>

<style lang="less" scoped>
  @title: #212227;
  @bgColor: #FFFFFF;
  .topWindowBox{
    background:@bgColor;
    border-Radius:20px;
    height:160px;
    width:100%;
    margin-bottom:30px;
    padding:25px;
    box-sizing: border-box;
    .twbTitle {
      display:flex;
      align-items: center;
      font-size:16px;
      color:@title;
      .twbIconbgRed,.twbIconbgBlue,.twbIconbgPurple{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 15px;
      }
      // .twbIconbgRed {
      //   background: #EA79BA;
      // }
      // .twbIconbgBlue {
      //   background: #6DACE7;
      // }
      // .twbIconbgPurple{
      //   background: #AA7AEB;
      // }
    }
    .twbNumber {
      font-size: 30px;
      margin-top:32px;
      font-weight: 1000;
    }
    .twbStatus,.twbStatusDown {
      font-size:14px;
      margin-top: 35px;
      display:flex;
      img {
        display: block;
        margin-right: 4px;
      }
      span {
        color:#707B81;
        margin-left: 8px;
      }
    }
    .twbStatus {
      color:#23C581;
    }
    .twbStatusDown {
      color:#E74545
    }
  }

  .chartBox {
    width: 100%;
    height: 440px;
    border-radius: 20px;
    overflow: hidden;
    background-color: @bgColor;
    .chartTitle {
      color: @title;
      padding: 30px 30px 0 30px;
      font-size: 16px;
    }
  }

  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .github-corner {
      position: absolute;
      top: 0px;
      border: 0;
      right: 0;
    }

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>