station-test-ui/src/views/dashboard/rladmin/index.vue

<template>
  <div class="dashboard-editor-container">
    
    
    
    <div class="layout-1">
      <el-row :gutter="24">
      
        <el-col class="gutter-row item item4" :span="8">
            <div class="gutter-box">
              <div class="gutter-box-title">风场统计</div>
              <div class="count-to-box">
                <span class="text">总数</span>
                <span class="number" @click="redirectPage('departments')">
                  <i class="el-icon-loading" v-if="showLoading"></i>
                  <countTo v-else :startVal='startVal' :endVal='countData.department_count' :duration='duration'></countTo>
                </span>
                个
              </div>
            </div>
        </el-col>
        
        <el-col class="gutter-row item item4" :span="8">
            <div class="gutter-box">
              <div class="gutter-box-title">设备统计</div>
              <div class="count-to-box">
                <span class="text">总数</span>
                <el-popover
                  placement="bottom"
                  width="600"
                  trigger="hover">
                  <div>
                    <device-table :tableData="countData.device_type_data" />
                  </div>
                  <span slot="reference" class="number">
                    <i class="el-icon-loading" v-if="showLoading"></i>
                    <countTo v-else :startVal='startVal' :endVal='countData.device_total_count' :duration='duration'></countTo>
                  </span>
                </el-popover>
                <!-- <span class="number" @click="redirectPage('school')">
                  <i class="el-icon-loading" v-if="showLoading"></i>
                  <countTo v-else :startVal='startVal' :endVal='countData.device_total_count' :duration='duration'></countTo>
                </span> -->个
              </div>
              <div class="count-to-box">
                <span class="text">在线数</span>
                <span class="number" @click="redirectPage('school')">
                  <i class="el-icon-loading" v-if="showLoading"></i>
                  <countTo v-else :startVal='startVal' :endVal='countData.device_online_count' :duration='duration'></countTo>
                </span>个
              </div>
            </div>
        </el-col>

      
      </el-row>
    </div>

    <div class="layout-2">

      <!-- 用户设备数据 -->
      <el-row :gutter="16">
        <el-col class="gutter-row item" :span="24">
          <device-data-chart :countData="countData" :total="countData.device_total_count" />
        </el-col>
      </el-row>

      <!-- 告警图表 -->
      <el-row :gutter="16">
        <!-- 告警提醒 -->
        <el-col class="gutter-row item" :span="8">
          <device-alarm-message />
        </el-col>
        <!-- 告警数据 -->
        <el-col class="gutter-row item" :span="16">
          <!-- <device-alarm-chart :statsData="statsData" /> -->
          <normal-card 
            showHeader
            showMenu
            title="告警数据"
            shadow="always"
            trigger="hover"
            :menuItems="alarmGrowthMenuItems"
            :bodyStyle="{height: '310px'}"
          >
            <template v-slot:content>
                <total-alarm-growth width="100%" />
            </template>
        </normal-card>
        </el-col>
      </el-row>
       <!-- 维保记录 -->
      <el-row :gutter="16">
        <!-- 告警提醒 -->
        <el-col class="gutter-row item" :span="8">
          <device-alarm-message />
        </el-col>
        <!-- 告警数据 -->
        <el-col class="gutter-row item" :span="16">
          <!-- <device-alarm-chart :statsData="statsData" /> -->
          <maintenance-alarm-chart 
            showHeader
            showMenu
            title="告警数据"
            shadow="always"
            trigger="hover"
            :menuItems="alarmGrowthMenuItems"
            :bodyStyle="{height: '310px'}"
          >
              <template v-slot:content>
                  <total-alarm-growth width="100%" />
              </template>
          </maintenance-alarm-chart>
        </el-col>
      </el-row>

    </div>
    



  </div>
</template>

<script>

import countTo from 'vue-count-to'
import NormalCard from '@/components/Card/NormalCard'
import StationDataChart from './components/StationDataChart'
import DeviceDataChart from './components/DeviceDataChart'
import DeviceAlarmMessage from './components/DeviceAlarmMessage'
import TotalAlarmGrowth from './components/TotalAlarmGrowth'
import StationTable from './components/StationTable'
import DeviceTable from './components/DeviceTable'
import MaintenanceAlarmChart from './components/MaintenanceAlarmChart'

export default {
  name: 'DashboardAdmin',
  components: {
    countTo,
    NormalCard,
    StationDataChart,
    DeviceDataChart,
    TotalAlarmGrowth,
    DeviceAlarmMessage,
    StationTable,
    DeviceTable,
    MaintenanceAlarmChart
  },
  deactivated() {
    // 选中本页面时重新加载，以便获取最新数据
    var cached = this.$store.state.tagsView.cachedViews.filter(item => {
      return item != "Dashboard"
    })
    this.$store.state.tagsView.cachedViews = cached
  },
  data() {
    return {
      statsData: {}, // 统计数据
      cardColors: {},
      duration: 3000,
      showLoading: true,
      // showAddLoading: true,
      startVal: 0,
      //维保记录规律统计
      Maintenance:{

      },

      countData: {
       department_count:24,
       device_online_count:31,
       device_total_count:215,
       device_type_data:[
         {
           'alarm': 62,
          'online': 31,
          'text': "液压泵",
          'total': 40,
          'value': "0",
         },
          {
           'alarm': 80,
          'online': 32,
          'text': "法兰",
          'total': 75,
          'value': "0",
         },
         {
           'alarm': 80,
          'online': 32,
          'text': "液压扳手",
          'total': 100,
          'value': "0",
         },
       ]
      },
      alarmGrowthMenuItems: [
          {
              name: '全屏',
              command: 'full',
              icon: 'full-screen',
          }
      ]
    }
  },
  created() {
    this.$appConfig.netState && this.$appConfig.netState.forEach(item => {
      this.cardColors[item.value] = item.color
    })
    // 查询近期统计数据
    this.getHomePageCountData()
  },
  methods: {
    /**
     * 获取首页数量数据
     */
    getHomePageCountData() {
      // this.$http.get('total/getHomePageCountData')
      //           .then((resp) => {
      //             if(resp.code == 10000){
      //               this.countData = resp.data
                    this.showLoading = false
      //             }
      //           })
    },
    redirectPage(type) {
      let path = '';

      switch(type) {
        case 'departments':
          path = '/permissions/departments'
          break;
        case 'student':
          path = '/schoolsys/student'
          break;
        default:
          break;
      }
      this.$router.push({ path: path})
    }
  }
}
</script>

<style lang='scss' scoped>

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

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }
  
  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }

  .layout-1 {
    margin-bottom: 25px;
    .item {
      color: #fff;
      .gutter-box {
        height: 160px;
        border-radius: 5px;
        box-shadow: 0 4px 5px rgba(0,0,0,.15);
        .today-add {
          font-size: 12px;
          .number {
            padding-left: 10px;
            font-size: 22px;
            font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
            span:hover {
              cursor: pointer;
              color: #000;
            }
          }
          display: flex;
          margin-left: 20px;
          height: 46px;
          line-height: 46px;
        }

        .gutter-box-title {
          font-size: 1.5rem;
          margin-left: 20px;
          height: 46px;
          line-height: 46px;
        }

      }
    }
    .item1 > .gutter-box{
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHIAAABOCAYAAAD8ZUKrAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowNkI0ODE2MUE1QUMxMUU4QkVCRThERDMyMUJCMDZFNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowNkI0ODE2MkE1QUMxMUU4QkVCRThERDMyMUJCMDZFNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjA2QjQ4MTVGQTVBQzExRThCRUJFOEREMzIxQkIwNkU2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjA2QjQ4MTYwQTVBQzExRThCRUJFOEREMzIxQkIwNkU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+oXRIKgAACoRJREFUeNrsXflvVFUUPi1tgS6ApdKylU0UsKyKCAgoi0QJIq7IpkQTY/SP8E/QxB9IVMSAoCJEQkCBsMqqItBadhDKVmhZCrS0tDDez/e9zOXZmelsb97M3JOcPIZ58+bN++459zvLvc3w+XxiJPkly/E6R+kopb2VdkzzZ9Ok9JLSA0obvH6zGZpFdlM6T2lnM74fEoD4vdKqZAASlvmx0keU3ld6TGljmgOYrXQwj/VKv1B61+uudTBBBKrLlf5jDPE/KVb6gdI8pSOV7vHqjWby2J3HagPiQ3JFex7dvXyjmZobgdw22LVKeiDtk4m1OuUjupd0k0/DOLdM6Rg+pxwX7q1F6XWl5Ur3ktOEBNJIcHlR6bgEGB8ijKlK+yv9DmC2FcgKpWfTgNg8E8b5jxHEB0r3Ka0kWXRDemhAPqd0R1uBrGJgnMryeJhAjuIR7m2zy/d6iaHQm0qfApCZxjtGLN14PJ2g7z/GYyfMzQbI6BIGNvlIhNzXow8DZIqIF1grkvM9lRYq7cLXOdqoQxx3h5T7stJrLpIKA2SIJEQfpU8oHUgAM8L4PCZ5ZFuOU5MpJzyUpCpST3iZDLklkUDmk+mBZTkrLM20tBtiJagbtfvrQEst5MQOix1CxeeOKN1PJpdoQT52gli52ZNKf+HvgQxS+nqU139Saa7STYkAEg9+PKm97TLhGs+TeSE+rWY8FkoKxKqVDqRF40cNp+LBbeWoTYTgfmZpr8s48L7h7+2nsc2KCK6P3zpDu46rQA5n9iOPrxsYj0JvRnC927RAaDs+vNH8cQMZpOPaW8T9ktNQHg8q/Vvp20pLlRYprdHcaS2TB+FKZwKZ6SaQGD2vcj4Qusq91HsxpN82qHhgk5X2Vfo0v/dnpWcSFJZkax7GFWIWDyCdnQZwJRuU3gpxH2Cuj9IdZXPk3dMY6/kgxAaZp29pFdN5jQVKf9AC53jLQc5hZVThQKrlv+3f/yx5QrhiE8I6t4AcSxDBrNbzBwaa74bRHfbSAuxAgpF9lQ+nohVyg/fL+f5spQPEKpa7Jcjw/EQ+UMDXOik5wKmgVxTPHYNhm1tA7ufo2UcS4xTMGZM4ep3+vokjroXXyNXiSrwupo6lhe4kydEFFryc1l3jslutDDL/gR98RRaeEeH1GwO56ngAWc35qbW5A/PYGA1AUPOjSk8pvSiBC9udOJJhvYMJbm+6cMSU6+h+ndbrRYlL3OtWHNmNLK4rX6OFYheJyv02uhSb2GxgDDmBVgfGigL4MvF4p1sqZHamEsQmhgZ/tjFubE1aOBdWMACfplmoAdIFRgeXst3hAkOxNF8I8vMXWWlPSVw5Ka2APEoNJEUMHUrphnMJZAPnunMkEVcDkIiTkuaS6OoHLGmKWC0LgRILfamTCCjo91kx4hkgEVPN0ah4M2PAC2SvLQSyhEAjcY6qyUKlS9N5PvQakM0aHd/J+a4xyHzZm1mREu2zRjwAJKzvczLZUAluHy3QWKFH58jWKiCZDFVwvCaJ64kxQEYhIxhz5mtud4dYVRMjSQIk6oozHP+HvOR0HrcZuLwPJNjpNP4buVq0SCB1N5mMFem4Q2K1ghgJMB95QQAWKhxI261gvIgwBCuF63mfgw1c3gfS3q8ADFYvQKOwbBdSOxm4vO9ar2mAovfGTrkhXVfsOCcVBIX3npxSMHiRerySCkCeJVAIO1DuOsA5Eu2T7fhjK1MAQHQtvCBWbdUpKCbsZmLEl6xAYm5Em8RCWuUY7T3EkaslCbZICSIZJHPjtAQHenluk5HD66Bvdya5wCrxr5ROuvAD/aiLxVrv14fzN7oGUICuSXJLnEIQASBaYfY4uADAREMWCgPogkAOepmEUbP1WkIAxGZ9ivEQ5IjHa14HXQ79aKGFZOWVTHqcolfC+2PpapMSyFSU5+ladxDEiZwn9QYs9OGWMdxaq3QuPdPv0sYCgVlWF1/JY4zcSOsqJYggcshULRGrB+ku2ToSHyfEKg50JDkSA6Q33Cos7wwtayRfb6GFVtHqVvH8ETwe57FXrF0r2jBKUvyhx2MPPjv5b6cWC3l0LmU4w+RHFy0UsS06pkCWUtNZIimnNWqsVLQQqsSRAEBHfI7GZDs4Ph81kKfFv3Yh3eV+BJ+5rgEnZKeIE1HRuUNLhJXO5vtHeOzJ481YAbnJ4Bd1bFxPYHoQSLBTLHpd4DgXma3tYqXtyjRDMmTHA+IjmYFgmWE2ic0WzdoaeM7XzObMoms9EY43NHFk/AWBPladoQAwX+kapb9R9SZsgPeWWN2F98L1hgbI+AtAWan0XRJGbHBcQbdZR2baV6zV3bnizy3XRgKkzcjam+f+P3kQBWu1BaB8qfQ1gjZK/FugOc9DZud8uF9gA1mjsaVErCv0qsDd9XM8o0gFocVSsTI9ZUwW5DPEqCZjrZQIFzdlabR3Kk17kVirperSHMRcZmI60T2Wx+i6ZyQOextkaYEnMvNz+AMmGmN8KBGwmnGfZyXLMVJQDxzPSdktIpTHrAYeWKBMfzbvp9nFB4r7QT000BJ6zwJpZyLWuXwP2A0KuVysoQxUi4TbR1kHy8xXGCdhEgIGSCPJ5VrdEJSLkHcsIiPsHcZn8bc3ZpOcYa68Sr0pab71pxtAIhYbSB0gYdTYWpECZkCccoeZEixvPyGRbzRhgAxgPaNJZLJbyZbUMUguFn/9LZTU0QJxfqE2KPLFv0skzvlDrG61ZgNkdK5zKrMXGRpw52ktOF7mQ0bY8UkYQMKFrtQsLpduegAtvkj7fgwiLAY6ZoAMX/BA3xD/Wo4btI7D4t+AVo8N54l/TceFINe130O/K8o8awkmSkCnqJsY/2J5+iACigQHekg3p/ocGksgYRHvkAmjKwyb4B4IMF8hOT+XwED2EuxAAqvazWTFcH4HtknTq/YA6hwVTUsz6bbRGIwU23YTfoSWXFqK3R2+mJbYGoiYzxZpIAKgjW34js3Msgjn3TkSeEdJWDAKtXZOEynHrgbI0DKUANk7MwZLuGORTgktaKOE91dsfhVrBxDbA7wU5FxY4SqGKpnib58wQAYRe547J6F36NjMh7xaItsbYCsHAObcXSHOvSv+3bJSen1lrOZIu1bXnw8s2G7JaMr9TKJbXYUBcKgNgwbtFXZHWq2xyNByhKEB2Op7ErpDOhZL5EKBiFVNWBDTjtZ72AAZWuAqf+R8hED9faWviNVt4LbAAtHENJ/ztn1vDakMZCzDD+wxjr4UtP0hf4qeFFTYz4o/dXYzTr8DAwYrmoZorhSCOuIaic9uyo2MVXMShJ3O2FtinRBAk+0S8f+5WrjYftSXxap3XmJmp5qvb0nbu7iz+PAKyXx7UJ3rNqoZqpRL/PKuFxmnljEh4bYM4xFLD1oyfL64JjxgHSOYaSkIcp79Z5Sa5OH1DhlMHrQX/0b1wa5xnHPhORceJIjUh5yD8Z1onHJju7V2jMHH8t/wOOXxBlIHBO6vlOAW83V2hNdrIVO+Ssuo4sh0Ow03lImQRPUH77bjcLeADCQFdIv5tLgOJGD2n4doomtsosXVc569I97JncLNI0FfRAuJt/j4DMp1z/OvAAMAVPpxr6yc9YYAAAAASUVORK5CYII=') 20px 48px no-repeat #32c5d2;
    }
    .item2 > .gutter-box {
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABOCAYAAACt8XHIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MUZFREY1QkE1QUMxMUU4QTBDRkY5NDk2NDQxQ0E5NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MUZFREY1Q0E1QUMxMUU4QTBDRkY5NDk2NDQxQ0E5NiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQxRkVERjU5QTVBQzExRThBMENGRjk0OTY0NDFDQTk2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQxRkVERjVBQTVBQzExRThBMENGRjk0OTY0NDFDQTk2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/CLBTgAAB7lJREFUeNrsXPlvVFUU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') 20px 48px no-repeat;
    //  #4CAF50
    }
    .item3 > .gutter-box {
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAABQCAYAAAD1NTBhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2NjUxNzI0OEE1QUMxMUU4ODE5RUFGMThGQzU0OEYxMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2NjUxNzI0OUE1QUMxMUU4ODE5RUFGMThGQzU0OEYxMCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjY2NTE3MjQ2QTVBQzExRTg4MTlFQUYxOEZDNTQ4RjEwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY2NTE3MjQ3QTVBQzExRTg4MTlFQUYxOEZDNTQ4RjEwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+pX+/0AAACM5JREFUeNrsXflvFVUY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') 20px 48px no-repeat;
      //  #7ba7bd
    }
    .item4 > .gutter-box {
      background: #00bcd4 ;
      // background-image: url('/icons/organization.png') 20px 38px no-repeat;
      // background-size: 114px 78px;
      //  #e7505a
    }
    .item5 > .gutter-box {
      background: #00bcd4 url('/icons/student_104.png') 20px 38px no-repeat;
      //  #e7505a
    }
    .count-to-box {
      margin-left: 20px;
      margin-right: 20px;
      text-align: left;
      // position: relative;
      // right: 50px;
      .text {
        display: inline-block;
        width: 100px;
        font-size: 16px;
        height: 28px;
        line-height: 28px;
      }
      .number {
        font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
        font-size: 2rem;
        height: 52px;
        line-height: 52px;
        /* span {
          float: right;
          width: 100px;
        } */
        span:hover {
          cursor: pointer;
          color: #000;
        }
      }
    }
    /** 5等分 */
    .el-col-5,
    .el-col-5,
    .el-col-5,
    .el-col-5 {
        position: relative;
        min-height: 1px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .el-col-5 {
        width: 20%;
        float: left;
    }

    @media (min-width: 768px) {
        .el-col-5 {
            width: 20%;
            float: left;
        }
    }

    @media (min-width: 992px) {
        .el-col-5 {
            width: 20%;
            float: left;
        }
    }

    @media (min-width: 1200px) {
        .el-col-5 {
            width: 20%;
            float: left;
        }
    }
  }

  .layout-2 {
    margin-bottom: 25px;
    .item {
      margin-bottom: 25px;
    }

    .charts-icon {
      float: right;
      color: #000;
    }
    .charts-icon:hover {
      cursor: pointer;
    }
  }
  
</style>