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

<template>
  <div class="dashboard-editor-container">
    <!--超级管理员-->
    <div v-if="userType==10000">
      <!--网站，内容，公共栏目数量 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>
    <!--调研员-->
    <div v-if="userType==4">
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="24">
          <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-row>
    </div>
    <!--个人会员-->
    <div v-if="userType==1">
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="24">
          <div class="noData">
            欢迎使用恒星管理平台
          </div>
        </el-col>
      </el-row>
    </div>
  </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 {
      userType:0,//用户身份
      topData:{
        website:{//网站
          count:0,//总数
          growth_rate:0//增长数
        },
        article:{//文章
          count:0,//总数
          growth_rate:0//增长数
        },
        category:{//栏目
          count:0,//总数
          growth_rate:0//增长数
        }
      },
      chartData:{
        lineChartData:[],//折线图数据
        ringChartData:[]//圆环图数据
      }
    }
  },
  methods: {
    //获取用户身份信息
    getUserInfo(fun){
      this.$store.dispatch('public/getInfo').then(res=> {
        console.log(res)
        this.userType = res.data.type_id;
        //if(res.data.type_id==10000){}//管理员
        //if(res.data.type_id==4){}//调研员
        //个人会员=1 政务会员=2 企业会员=3 调研员=4 管理员=10000 游客=20000
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '网络错误，请重试！'
        });
      })
      fun();
    },
    getData(){
      //获取首页数据
      this.$store.dispatch('public/getAdminIndex').then(res=> {
        //如果是调研员就不显示其他的
        if(this.userType==4){
          this.chartData.lineChartData = res.data.letterOfComplaintList;
        }else{
          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;
        }
      })
    },
  },
  mounted(){
    //先获取用户身份
    this.getUserInfo(this.getData)
    //再获取数据
    // 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;
    }
  }

  .noData {
    color: #CCCCCC;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    height: 740px;
    line-height: 740px;
  }

  .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>