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 item1" :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 item2" :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 item3" :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="table_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>
              </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-use-chart :countData="useCountData" :total="useCountData.device_total_count" />
        </el-col>
      </el-row>
      <!-- 故障分析 -->
      <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">
       <normal-card 
        trigger="hover"
        shadow="always"
        title="维保记录"
        showMenu
        :bodyStyle="{height: '500px'}"
    >
    <template v-slot:content>
         <!--压力分析-->
        <el-col class="gutter-row item" :span="12">
          <!-- <device-alarm-chart :statsData="statsData" /> -->
          <normal-card
            showHeader
            showMenu
            title="压力分析"
            shadow="always"
            trigger="hover"
            :menuItems="alarmGrowthMenuItems"
            :bodyStyle="{height: '400px'}"
          >
              <template v-slot:content>
                  <maintenance-alarm-chart width="100%" :options="pressure" />
              </template>
          </normal-card>
        </el-col>
        <!--压力分析-->
        <el-col class="gutter-row item" :span="12">
          <!-- <device-alarm-chart :statsData="statsData" /> -->
          <normal-card
            showHeader
            showMenu
            title="扭矩分析"
            shadow="always"
            trigger="hover"
            :menuItems="alarmGrowthMenuItems"
            :bodyStyle="{height: '400px'}"
          >
              <template v-slot:content>
                  <maintenance-alarm-chart width="100%"  :options="torque" />
              </template>
          </normal-card>
        </el-col>
        </template>
         </normal-card>
      </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 DeviceUseChart from './components/DeviceUseChart'
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,
    DeviceUseChart,
    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,
      useCountData:{
        device_total_count:115,
         device_type_data:[
         {
          'text': "液压泵",
          'total': 40,

         },
          {
          'text': "液压扳手",
          'total': 75,
 
         }
       ]
      },
      //维保记录规律统计
<<<<<<< HEAD
       torque:{
         name:"扭矩",
         url:'',
       },
       pressure:{
         name:'压力',
         url:''
       },

//
=======
      Maintenance:{

      },
      table_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",
         },
       ],
>>>>>>> 30c9f6aee676707746ad5265ca62f6ecba845c15
      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,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') 20px 48px no-repeat #32c5d2;
      background-position: 80%;
    }
    .item2 > .gutter-box{
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABUFJREFUeF7tmo2RDUEQgLsjQASIABEgAicCRIAIEAEiQASIABE4ESACRNDqe9X9am7sz+xsn3tbd1N19eq9m52d/qb/pmdUVjYzeysir1T1eOVQZ/K4rn2rmX0WkUuqemvtWGfxfBaA2yJyV1WBsamWAeCDiNwTkY+qerQp6UUkA8BzEXnmgl9R1d9bgpABgFV/70I/VdVX5w3ANRH57kJ/UdU75woAwpoZan9pi2aw2gQcQDhCvt5XVb5vomUBeCIiL13i16rK9/RmZtdU9UfmwFkASj9wfBpJkZk9FJGj7FCbAsDNgJW5elp+wMwwq8vZTjYTAOHvsQNIzwrN7JeIfDtkADdF5KsDeKGqJEgpDdv3UJseZtM0oDKDd6qKzaY0MyO3+CQiBw8gokHqRM0s0u3UcVmdbA24LCI4QyJBWka4GQBuBqzWnWQAkWil5xipGuAAcFjYK5rwQVVfr3UEXnSh5pDqXE/DBMqEKOR+q6qP1kAoAKSH11QN8PrggwFhr69JYQsAq8YZWoRsAJTEUNW6PY0cQVW/LNUGB3BTVXGyqS0bQLkpion+FBG2yzeKmfOdKjLA+CS8jVaSHMCPzNwi5pIGwMxQfSrDrFKYAcKzgTn2zQwRIvYL9UoGEJKoEyV2MwMsANK32asBeJr6htAXXtozNyBQIjuxsmZGCY0skULqWOMZhCWCIDxjoS3UGlJrjqsAmBn5PyGPVf/mEBAQIDRW7fqQlGbGM/QFHJ9RURrSDH5jnM8Hsx12lQ5B/3jyg6rXjrApdDlMYPAH2NpUWHl8RWrpvUsDKuFZnUeqyhEZ9cEuAP4sgqPuQMB/YAbxncSK3x6uCam1ei0GMCD8iexsKQA3BYTE1kmkaJgTgqJRoRXhGCnBA4b3rj6PXARgQPh/tr2tANx5UkDBIUZ8x5Sel2cLZhaFFuz/bjUH/geIbsfYDKBFeFdjKjdlwnLCB/iKI3hZMEFwhOGUuY4ato/Zqrv5VnPBNDDBrnPJJgCtwvvk9hP2ie9NxEMgjjMAYdOAYNM0uIpmVo63P3pz08AUInqgOS+WpomzANw7R6mL8SerPdWE6b8DYGYIjrojNKvVdKegGm9Im4AQ6ffiXGESgKsrx16xYrNnfxMAcGa/lzquKQCx2p4pxrkEjhGTaHKQcwBIcpg4NvokQt2Umo0BWKqahXClCYzmFO5UCcVoA+ZE31kIowAKu9+HpBYhMgEUxdB49WxS5X4Gv8KtlcEstJRjCsDOSy8tb581gEJzSKpIxSdD5KwTbFn1ss+hAGid9wWAVlIt/YrYjDNC9di4kMF1nRb3+ICWeTb5gKUDeRJExCCfp/rDJ3GZ5KXrmMwBkDsAlLGx6d2mK6udhgmQN8Smhnl2X5jwPIT4DoRdgaQ35R0DlgpgIGvkvd3X5wbGm03ElmpGNoA4xCzn0X2e5zE9bqDt0+qlQk71P3QA5R3ECwBbOBrLNoHNaUB5azRMb40P2ByAesJAGC2Nzzmz4l5AdD340+EhAGyoupztAIBubfpfecAFgOLq/B76hQb0mwB5f3nf4NyZQH3KdO4AlLdPV+0rtuoEy9unyLA/g5wLoa3/7wpPY4OP3RHqdYJeY2BrTYZJYSX1qjzjZwMYuyN0q6VEXYI1M0ryQ43EatWts3LQbAC1ze7e1aMBngSNAUirCmUDQF05jChve6Tf7my175Z+qQDihV7IwIFxZzj9YlOLYK19UgB46SrO5sbezUam6wi7VZieflkABvcA1YTSk5gegetnsgBQtY0LU1Ma0FUezxB0bIy/btHcX/xYkBwAAAAASUVORK5CYII=') 20px 48px no-repeat #32c5d2;
      background-position: 80%;
    }
    .item3 > .gutter-box{
      background: url('data:image/png;base64,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') 20px 48px no-repeat #32c5d2;
      background-position: 80%;
    }
    
    .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>