yxk-storeroom-system/src/views/dashboard/PanelGroup.vue

<template>
  <el-row :gutter="20" class="panel-group" type="flex" justify="space-between">
    <el-col class="card-panel-col">
      <div class="card-panel danganzongliang" @click="handleSetLineChartData('archives')">
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="danganzongliang" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            <count-to :start-val="0" :end-val="archivesNum" :duration="3200" class="card-panel-num" />
          </div>
          档案总量
        </div>
      </div>
    </el-col>
    <el-col class="card-panel-col">
      <div class="card-panel danganhezongliang" @click="handleSetLineChartData('case')">
        <div class="card-panel-icon-wrapper icon-message">
          <svg-icon icon-class="danganhezongliang" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            <count-to :start-val="0" :end-val="caseNum" :duration="3200" class="card-panel-num" />
          </div>
          档案盒总量
        </div>
      </div>
    </el-col>
    <el-col class="card-panel-col">
      <div class="card-panel quanbushebei" @click="handleSetLineChartData('device')">
        <div class="card-panel-icon-wrapper icon-money">
          <svg-icon icon-class="quanbushebei" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            <count-to v-if="getDeviceFlag" :start-val="0" :end-val="totalDeviceNum" :duration="3200" class="card-panel-num" />
            <div v-if="!getDeviceFlag" class="card-panel-text"><span class="card-panel-num">获取中...</span></div>
          </div>
          全部设备
        </div>
      </div>
    </el-col>
    <el-col class="card-panel-col">
      <div class="card-panel zaixianshebei" @click="handleSetLineChartData('device')">
        <div class="card-panel-icon-wrapper icon-shopping">
          <svg-icon icon-class="zaixianshebei" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            <count-to v-if="getDeviceFlag" :start-val="0" :end-val="onlineDeviceNum" :duration="3200" class="card-panel-num" />
            <div v-if="!getDeviceFlag" class="card-panel-text"><span class="card-panel-num">获取中...</span></div>
          </div>
          在线设备
        </div>
      </div>
    </el-col>
    <el-col class="card-panel-col">
      <div class="card-panel lixianshebei" @click="handleSetLineChartData('device')">
        <div class="card-panel-icon-wrapper icon-shopping">
          <svg-icon icon-class="lixianshebei" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            <count-to v-if="getDeviceFlag" :start-val="0" :end-val="offlineDeviceNum" :duration="3200" class="card-panel-num" />
            <div v-if="!getDeviceFlag" class="card-panel-text"><span class="card-panel-num">获取中...</span></div>
          </div>
          离线设备
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import CountTo from 'vue-count-to'
import { FetchGetArchivesNum, FetchGetCaseNum } from '@/api/archivesManage/statistics'
import { getDeviceList } from '@/api/storeManage/deviceManage/device'
import { getOnlineDevice } from '@/api/home/device'
import { mapGetters } from 'vuex'

export default {
  components: {
    CountTo
  },
  data() {
    return {
      archivesNum: 0,
      caseNum: 0,
      getDeviceFlag: false,
      totalDeviceNum: 0,
      onlineDeviceNum: 0,
      offlineDeviceNum: 0
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  mounted() {
    this.handleArchivesNum()
    this.handleCaseNum()
    this.handleTotalDeviceNum()
  },
  methods: {
    handleSetLineChartData(type) {
      // this.$emit('handleSetLineChartData', type)
      if (type === 'archives') {
        if (this.roles.includes('archivesList:list') || this.roles.includes('admin')) {
          this.$router.push({
            name: 'ArchivesList'
          })
        } else {
          this.$message({
            message: '当前账号没有权限',
            type: 'warning'
          })
        }
      } else if (type === 'case') {
        if (this.roles.includes('caseManage:list') || this.roles.includes('admin')) {
          this.$router.push({
            name: 'caseManage'
          })
        } else {
          this.$message({
            message: '当前账号没有权限',
            type: 'warning'
          })
        }
      } else if (type === 'device') {
        if (this.roles.includes('deviceManage:list') || this.roles.includes('admin')) {
          this.$router.push({
            name: 'DeviceManage'
          })
        } else {
          this.$message({
            message: '当前账号没有权限',
            type: 'warning'
          })
        }
      }
    },
    // 档案总数
    handleArchivesNum() {
      FetchGetArchivesNum().then(data => {
        this.archivesNum = data
      })
    },
    // 档案盒总数
    handleCaseNum() {
      FetchGetCaseNum().then(data => {
        this.caseNum = data
      })
    },
    // 设备总数,在线设备数,离线设备数
    handleTotalDeviceNum() {
      Promise.all([getDeviceList({ page: 0, size: 10 }), getOnlineDevice()]).then((result) => {
        this.getDeviceFlag = true
        this.totalDeviceNum = result[0].totalElements
        this.onlineDeviceNum = result[1]
        this.offlineDeviceNum = this.totalDeviceNum - this.onlineDeviceNum
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  .card-panel-col {
    margin-bottom: 20px;
  }

  .card-panel {
    cursor: pointer;
    height: 100px;
    // height: 108px;
    // cursor: pointer;
    font-size: 15px;
    position: relative;
    overflow: hidden;
    opacity: 0.86;
    // box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    // border-color: rgba(0, 0, 0, .05);
    &.danganzongliang {
      color: #21aae1;
      background: linear-gradient(
        180deg,
        rgba(51, 159, 210, 0.5) 0%,
        rgba(56, 158, 225, 0) 100%
      );
      border-top: 2px #21aae1 solid;
      & span.card-panel-num {
        background: linear-gradient(180deg, #ffffff 0%, #21aae1 100%);
      }
    }
    &.danganhezongliang {
      color: #793cba;
      background: linear-gradient(
        180deg,
        rgba(121, 60, 186, 0.5) 0%,
        rgba(121, 60, 186, 0) 100%
      );
      border-top: 2px #793cba solid;
      & span.card-panel-num {
        background: linear-gradient(180deg, #ffffff 0%, #793cba 100%);
      }
    }
    &.quanbushebei {
      color: #008e81;
      background: linear-gradient(
        180deg,
        rgba(0, 142, 129, 0.5) 0%,
        rgba(0, 142, 129, 0) 100%
      );
      border-top: 2px #008e81 solid;
      & span.card-panel-num {
        background: linear-gradient(180deg, #ffffff 0%, #008e81 100%);
      }
    }
    &.zaixianshebei {
      color: #c4c859;
      background: linear-gradient(
        180deg,
        rgba(196, 200, 89, 0.5) 0%,
        rgba(196, 200, 89, 0) 100%
      );
      border-top: 2px #c4c859 solid;
      & span.card-panel-num {
        background: linear-gradient(180deg, #ffffff 0%, #bfc458 100%);
      }
    }
    &.lixianshebei {
      color: #f65164;
      background: linear-gradient(
        180deg,
        rgba(246, 81, 100, 0.5) 0%,
        rgba(247, 80, 100, 0) 100%
      );
      border-top: 2px #f65164 solid;
      & span.card-panel-num {
        background: linear-gradient(180deg, #ffffff 0%, #f55164 100%);
      }
    }
    // &:hover {
    //   .card-panel-icon-wrapper {
    //     color: #fff;
    //   }

    //   .icon-people {
    //     background: #40c9c6;
    //   }

    //   .icon-message {
    //     background: #36a3f7;
    //   }

    //   .icon-money {
    //     background: #f4516c;
    //   }

    //   .icon-shopping {
    //     background: #34bfa3
    //   }
    // }

    // .icon-danganzongliang {
    //   color: #21AAE1;
    // }

    // .icon-danganhezongliang {
    //   color: #793CBA;
    // }

    // .icon-quanbushebei {
    //   color: #008E81;
    // }

    // .icon-zaixianshebei {
    //   color: #C4C859
    // }

    // .icon-lixianshebei {
    //   color: #F65164
    // }

    .card-panel-icon-wrapper {
      float: left;
      margin: 0 10px 0 12px;
      padding: 20px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 60px;
    }

    .card-panel-description {
      // float: right;
      // font-weight: bold;
      margin: 19px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 30px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 28px;
        margin-bottom: 11px;
        & span {
          // background: linear-gradient(180deg, #FFFFFF 0%, #21AAE1 100%);
          -webkit-background-clip: text;
          color: transparent;
          font-weight: bold;
        }
      }

      // .card-panel-num {
      //   font-size: 20px;
      // }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>