crowd-test-service-frontend/src/components/Home.vue

<template>
  <div class="home-container" v-loading="loading">
    <div class="home-banner-wrap">
      <el-carousel height="400px" :interval="10000" arrow="always">
        <el-carousel-item v-for="(img,index) in imgList" :key="index">
          <img class="banner_back banner_back_1" v-bind:src="img">
          <router-link
            v-if="user != null && rolesPermissions != null &&( rolesPermissions.isAgency || rolesPermissions.isIndividualUser || rolesPermissions.isSystemAdministrator || rolesPermissions.isEnterpriseUser)"
            :to="{ name: 'ProjectCreate'}">
              <el-button class="btn-home-apply" type="primary">创建项目</el-button>
          </router-link>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="home-body-wrap">
      <div class="title h2">系统统计信息</div>
      <el-row type="flex" align="middle" justify="center" style="font-size: 14px;">
        <el-col :span="6" type="flex" align="middle" justify="center" >
          <el-card class="box-card" shadow="hover" style="margin-right: 40px; background-color: #20A0FF;">
            <div slot="header" class="clearfix">
              <span style="font-size: 30px;color: white"><i class="el-icon-user"></i></span>
            </div>
            <el-row type="flex" align="middle" justify="center" style="font-size: 14px;">
              <el-col :span="18" type="flex" align="middle" justify="start"><span style="font-size: 50px; color: white;">{{systemStatistics[0].value}}</span>
              </el-col>
              <el-col :span="20" type="flex" align="bottom" justify="end"><span> <el-link style="font-size: 16px; color: white;"
                                                                                          type="success"
                                                                                          :underline="false">{{systemStatistics[0].name}}</el-link></span>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="6" type="flex" align="middle" justify="center">
          <el-card class="box-card" shadow="hover" style="margin-right: 40px;background-color: #13CE66;">
            <div slot="header" class="clearfix">
              <span style="font-size: 30px;color: white;"><i class="el-icon-setting"></i></span>
            </div>
            <el-row type="flex" align="middle" justify="center" style="font-size: 14px;">
              <el-col :span="18" type="flex" align="middle" justify="start"><span style="font-size: 50px;color: white;">{{systemStatistics[1].value}}</span>
              </el-col>
              <el-col :span="20" type="flex" align="bottom" justify="end"><span> <el-link style="font-size: 16px;color: white;"
                                                                                          type="success"
                                                                                          :underline="false">{{systemStatistics[1].name}}</el-link></span>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <!--<el-col :span="4">{{project.id}}</el-col>-->
        <el-col :span="6" type="flex" align="middle" justify="center">
          <el-card class="box-card" shadow="hover" style="margin-right: 40px;background-color: #F7BA2A;">
            <div slot="header" class="clearfix">
              <span style="font-size: 30px;color: white;"><i class="el-icon-user-solid"></i></span>
            </div>
            <el-row type="flex" align="middle" justify="center" style="font-size: 14px;">
              <el-col :span="18" type="flex" align="middle" justify="start"><span style="font-size: 50px;color: white;">{{systemStatistics[2].value}}</span>
              </el-col>
              <el-col :span="20" type="flex" align="bottom" justify="end"><span> <el-link style="font-size: 16px;color: white;"
                                                                                          type="success"
                                                                                          :underline="false">{{systemStatistics[2].name}}</el-link></span>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="6" type="flex" align="middle" justify="center">
          <el-card class="box-card" shadow="hover" style="margin-right: 40px;background-color: #FF4949;">
            <div slot="header" class="clearfix">
              <span style="font-size: 30px;color: white;"><i class="el-icon-cpu"></i></span>
            </div>
            <el-row type="flex" align="middle" justify="center" style="font-size: 14px;">
              <el-col :span="18" type="flex" align="middle" justify="start"><span style="font-size: 50px;color: white;">{{systemStatistics[3].value}}</span>
              </el-col>
              <el-col :span="20" type="flex" align="bottom" justify="end"><span> <el-link style="font-size: 16px;color: white;"
                                                                                          type="success"
                                                                                          :underline="false">{{systemStatistics[3].name}}</el-link></span>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <el-row type="flex" align="middle" justify="center" style="font-size: 14px; margin-top: 15px;">
        <el-col :span="6" type="flex" align="middle" justify="center">
          <el-card class="box-card" shadow="hover" style="margin-right: 40px;background-color: #20A0FF;">
            <div slot="header" class="clearfix">
              <span style="font-size: 30px;color: white;"><i class="el-icon-coin"></i></span>
            </div>
            <el-row type="flex" align="middle" justify="center" style="font-size: 14px;">
              <el-col :span="18" type="flex" align="middle" justify="start"><span style="font-size: 50px;color: white;">{{systemStatistics[4].value}}</span>
              </el-col>
              <el-col :span="20" type="flex" align="bottom" justify="end"><span> <el-link style="font-size: 16px;color: white;"
                                                                                          type="success"
                                                                                          :underline="false">{{systemStatistics[4].name}}</el-link></span>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="6" type="flex" align="middle" justify="center">
          <el-card class="box-card" shadow="hover" style="margin-right: 40px;background-color: #13CE66;color: white;">
            <div slot="header" class="clearfix">
              <span style="font-size: 30px;color: white;"><i class="el-icon-bank-card"></i></span>
            </div>
            <el-row type="flex" align="middle" justify="center" style="font-size: 14px;">
              <el-col :span="18" type="flex" align="middle" justify="start"><span style="font-size: 50px;color: white;">{{systemStatistics[5].value}}</span>
              </el-col>
              <el-col :span="20" type="flex" align="bottom" justify="end"><span> <el-link style="font-size: 16px;color: white;"
                                                                                          type="success"
                                                                                          :underline="false">{{systemStatistics[5].name}}</el-link></span>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <!--<el-col :span="4">{{project.id}}</el-col>-->
        <el-col :span="6" type="flex" align="middle" justify="center">
          <el-card class="box-card" shadow="hover" style="margin-right: 40px;background-color: #F7BA2A;">
            <div slot="header" class="clearfix">
              <span style="font-size: 30px;color: white;"><i class="el-icon-notebook-1"></i></span>
            </div>
            <el-row type="flex" align="middle" justify="center" style="font-size: 14px;">
              <el-col :span="18" type="flex" align="middle" justify="start"><span style="font-size: 50px;color: white;">{{systemStatistics[6].value}}</span>
              </el-col>
              <el-col :span="20" type="flex" align="bottom" justify="end"><span> <el-link style="font-size: 16px;color: white;"
                                                                                          type="success"
                                                                                          :underline="false">{{systemStatistics[6].name}}</el-link></span>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="6" type="flex" align="middle" justify="center">
          <el-card class="box-card" shadow="hover" style="margin-right: 40px;background-color: #FF4949;">
            <div slot="header" class="clearfix">
              <span style="font-size: 30px;color: white;"><i class="el-icon-notebook-2"></i></span>
            </div>
            <el-row type="flex" align="middle" justify="center" style="font-size: 14px;">
              <el-col :span="18" type="flex" align="middle" justify="start"><span style="font-size: 50px;color: white;">{{systemStatistics[7].value}}</span>
              </el-col>
              <el-col :span="20" type="flex" align="bottom" justify="end"><span> <el-link style="font-size: 16px;color: white;"
                                                                                          type="success"
                                                                                          :underline="false">{{systemStatistics[7].name}}</el-link></span>
              </el-col>
            </el-row>
          </el-card>
        </el-col>

      </el-row>
    </div>
    <div class="home-body-wrap">
      <div class="home-block">
        <div class="title">
          热门任务
          <span class="more-info">
            <router-link to="/square">更多任务></router-link>
          </span>
        </div>
        <el-row :gutter="20">
          <el-col :span="6" v-for="item,index in hotTaskList" :key="index">
            <task-card :item="item"/>
          </el-col>
        </el-row>
      </div>

      <div class="home-block">
        <el-row :gutter="20">
          <el-col :xs="20" :sm="20" :md="20" :lg="12" :xl="12">
            <div class="title">机构排名</div>
            <institution-rank :item="institutionRank"/>
          </el-col>
          <el-col :xs="20" :sm="20" :md="20" :lg="12" :xl="12">
            <div class="title">用户排名</div>
            <person-rank :item="personRank"/>
          </el-col>
        </el-row>

      </div>
    </div>
  </div>
</template>

<script>
import TaskCard from '@/components/commons/TaskCard'
import InstitutionRank from '@/components/InstitutionRank'
import PersonRank from '@/components/PersonRank'
import Http from '@/js/http.js'
import Apis from '@/js/api.js'
import {notify} from '@/constants/index'
import {defaultValue, getIndexStatisticsInfo, getRolesPermissions, storageGet} from '@/js/index'

export default {
  name: 'Home',
  components: {TaskCard, InstitutionRank, PersonRank},
  data () {
    return {
      user: null,
      loading: false,
      defaultValue: defaultValue,
      hotTaskList: [],
      institutionRank: [],
      personRank: [],
      imgList: [],
      rolesPermissions: {},
      statisticsData: {
        userNum: 100,
        agencyNum: 200,
        deviceNum: 345,
        projectNum: 23,
        taskNum: 123
      },
        systemStatistics: [{},{},{},{},{},{},{},{}]
    }
  },
  mounted () {
    console.log('mine mount')
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    init () {
      // storageGet('user').then((res)=>{
      //   if (res == null){
      //     //notify('warning','请登录后访问')
      //   }else{
      //     this.user = res
      //     this.setRolesPermissions()
      //     this.loadData()
      //   }
      // }).catch((error)=>{
      //   notify('error','用户信息获取失败')
      // })
      this.setUserInfo()
      // if (this.rolesPermissions == null) {
      //   let NewPage = '_empty' + '?time=' + new Date().getTime() / 500
      //   this.$router.push(NewPage)
      //   this.$router.go(-1)
      // }
      this.loadData()
    },
    //加载数据
    loadData: function () {
      this.showLoading()
      console.log('loadData')
      Http.get(Apis.PAGE.HOME_PAGE).then((res) => {
        console.log(res)
        this.hotTaskList = res.hotTaskList
        this.institutionRank = res.agencyRank
        this.personRank = res.userRank
        this.imgList = res.imgList
        this.systemStatistics = res.systemStatistics
        this.hideLoading()
      }).catch((error) => {
        this.hideLoading()
        notify('error', '主页加载失败:' + error.data)
      })
    },
    setUserInfo () {
      this.user = storageGet('user')
      this.rolesPermissions = storageGet('rolesPermissions')
    },
    showLoading () {
      this.loading = true
    },
    hideLoading () {
      this.loading = false
    },
    getStatisticsData () {
      getIndexStatisticsInfo().then((res) => {
        this.statisticsData = res
      }).catch((error) => {
        notify('error', '统计数据加载失败')
      })
    },
    getStatisticsDataSuccess () {

    },
    getStatisticsDataFail () {

    }
  },
  created: function () {
    //notify('info', 'info')
    //notify('success', 'success')
    //notify('error', 'error')
    //notify('warning', 'warning')
    //this.loadData()
  },
  watch: {
    rolesPermissions (val) {
      console.log(this.rolesPermissions)
      console.log(val)
      this.rolesPermissions = val
    }
  }
}
</script>

<style lang="less" scoped>
  .home-banner-wrap {
    background: linear-gradient(#4a90e2, rgb(74, 109, 226));
    background: -webkit-linear-gradient(#4a90e2, rgb(74, 109, 226));
    background: -o-linear-gradient(#4a90e2, rgb(74, 109, 226));
    .banner_back {
      height: 100%;
    }
    .banner_back_1 {
      width: 100%;
      //float: right;
    }
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #bed2c0;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #eeeef2;
  }

  .home-body-wrap {
    padding: 20px 80px;
  }

  .more-info {
    float: right;
    cursor: pointer;
    font-size: 1.4rem;
  }

  .btn-home-apply {
    position: absolute;
    bottom: 15%;
    left: 80%;
  }

  .home-block {
    margin: 10px 0;
  }
</style>