cardCount.vue

<template>
  <div>
    <div class="card_stc">
      <a-row>
        <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-for="(item, index) in cardData" :key="'comment2' + index">
          <div class="card-box card-hover card-shadow">
            <div class="box_logo">
              <div class="logo_icon">
                <Icon :type="item.iconType" :style="{ fontSize: '40px', color: '#08c' }" />
              </div>
            </div>
            <div class="box_con">
              <div class="box-card">
                <div class="box-card-title">
                  <span>{{ item.title }}</span><span class="box-count">{{ item.count }}</span>
                </div>
                <div class="box-card-content">
                  <div class="content_nav">
                    <Icon type="clock-circle" :style="{ fontSize: '16px', color: '#08c' }" />
                    <span class="item-title">{{item.children[0].title}}</span>
                    <span class="item-count" style="color:red">{{item.children[0].count}}</span>
                  </div>
                  <div class="content_nav">
                    <Icon type="check-circle" :style="{ fontSize: '16px', color: '#08c' }" />
                    <span class="item-title">{{item.children[1].title}}</span>
                    <span class="item-count" style="color:green">{{item.children[1].count}}</span>
                  </div>
                </div>
                <div class="box-card-foot">
                  <Icon type="message" :style="{ fontSize: '16px', color: '#08c' }" />
                  <span class="item-title">{{item.foot.title}}</span>
                  <span class="item-count">{{item.foot.count}}</span>
                </div>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
import { getType } from '@/views/utils/auth'
import { Icon } from 'ant-design-vue';
export default {
  name: "cardCount",
  components: { Icon },
  props: {

  },
  data () {
    return {
      cardData: [],
      list1: [
        { iconType: 'file', title: '总上报项目数', count: 0, children: [{ title: '待审核', count: 0 }, { title: '已审核', count: 0 }], foot: { title: '今日新上报', count: 0 } },
        { iconType: 'profile', title: '注册机构数', count: 0, children: [{ title: '待审核', count: 0 }, { title: '已审核', count: 0 }], foot: { title: '今日新注册', count: 0 } },
      ],
      list2: [
        { iconType: 'file', title: '总上报项目数', count: 0, children: [{ title: '待审核', count: 0 }, { title: '已审核', count: 0 }], foot: { title: '今日新上报', count: 0 } },
        { iconType: 'user', title: '注册申报人员数', count: 0, children: [{ title: '待审核', count: 0 }, { title: '已审核', count: 0 }], foot: { title: '今日新注册', count: 0 } },
      ],
      isGovRole: false,
    }
  },
  props: {
    reportYear: {
      type: Number,
      default () {
        return null
      }
    },
  },
  created () {
    const user = JSON.parse(window.sessionStorage.getItem('user'))
    if (user && user.roles && user.roles.indexOf("1") != -1) {
      this.cardData = this.list1
      this.getRegisterUnitCount()
    } else {
      this.cardData = this.list2
      this.getRegisterPersonCount()
    }
    this.changeType()
  },
  computed: {
    projType: {
      get () {
        return this.$store.state.app.projType
      },
      set () {
      }
    },
  },
  methods: {
    changeType () {
      if (!!this.reportYear) {
        this.geAuditCount()
      }
    },
    geAuditCount () {
      this.$api.statistical.geFirstAuditCount({ auditType: 1, projType: getType(), reportYear: this.reportYear }).then(({ data = {} }) => {
        if (data) {
          this.setCardDataList(0, data.count5, data.count1, data.count2, data.count3)
        }
      }).catch(() => { })
    },
    getRegisterUnitCount () {
      this.$api.statistical.getRegisterUnitCount().then(({ data = {} }) => {
        if (data) {
          this.setCardDataList(1, data.count5, data.count1, data.count2, data.count3)
        }
      }).catch(() => { })
    },
    getRegisterPersonCount () {
      this.$api.statistical.getRegisterPersonCount().then(({ data = {} }) => {
        if (data) {
          this.setCardDataList(1, data.count5, data.count1, data.count2, data.count3)
        }
      }).catch(() => { })
    },
    setCardDataList (index, c1, c2, c3, c4) {
      this.cardData[index].count = c1
      if (this.cardData[index].children.length > 0) {
        this.cardData[index].children[0].count = c2
        this.cardData[index].children[1].count = c3
      }
      this.cardData[index].foot.count = c4
    },
  },
  watch: {
    projType: {
      handler (value) {
        if (!!value) {
          this.changeType()
        }
      }
    },
    reportYear: {
      handler (value) {
        if (!!value) {
          this.changeType()
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.card-shadow {
  box-shadow: 3px 3px 5px #d3d8dfc2;
}
.card-hover {
  transition: all 0.1s linear 0s;
}
.card-hover:hover {
  border: 1px solid rgb(205, 207, 207) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transform: translate(0, -0.1px);
  background: #f8f9fa;
  // cursor: pointer;
}
.card_stc {
  .ant-row .ant-col {
    padding: 6px;
  }
  .card-box:hover {
    // .box_logo .logo_icon {
    //   background: #1890ff;
    //   .anticon {
    //     color: #fff !important;
    //   }
    // }
    cursor: pointer;
  }
  .card-box {
    display: flex;
    height: 120px;
    border-radius: 5px;
    border: 1px solid #e6ebf5;
    .box_logo {
      height: 100%;
      width: 120px;
      position: relative;
      border-radius: 5px;
      .logo_icon {
        width: 80px;
        height: 80px;
        padding: 20px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 6px;
        background: #1890ff;
        .anticon {
          color: #fff !important;
        }
      }
    }
    .box_con {
      height: 100%;
      width: calc(100% - 120px);
      padding: 6px;
    }
    .box-card {
      .box-card-title {
        height: 34px;
        line-height: 34px;
        font-size: 16px;
        .box-count {
          // font-style: italic;
          margin-left: 4px;
          color: #000;
          font-size: 19px;
        }
      }
      .box-card-content {
        width: 100%;
        height: 42px;
        line-height: 42px;
        border-bottom: 1px solid #e6ebf5;
      }
      .content_nav {
        margin-right: 12px;
        position: relative;
        display: inline-block;
        .anticon {
          position: absolute;
          top: 14px;
        }
      }
      .item-title {
        margin-left: 18px;
        padding: 0 3px;
      }
      .item-count {
        padding: 0 0px;
        font-size: 16px;
        // font-style: italic;
        font-weight: 400;
        color: #000;
      }
      .box-card-foot {
        position: relative;
        height: 30px;
        line-height: 30px;
        .anticon {
          position: absolute;
          top: 7px;
        }
      }
    }
  }
}
</style>