epmet-work-pc-chengyang/src/views/dataBoard/overview/components/FollowUp.vue

<template>
  <div class="follow-up">
    <div class="content">
      <div class="left">
        <div class="total">
          <div class="tit">回访总数</div>
          <div class="num"><span>{{ sumNum ? sumNum : 0 }}</span>个</div>
        </div>
        <div class="left-item">
          <div class="tit">电话回访</div>
          <div class="num"><span>{{ mobileNum ? mobileNum : 0 }}</span>个</div>
        </div>
        <div class="left-item">
          <div class="tit">上门回访</div>
          <div class="num"><span>{{ visitNum ? visitNum : 0 }}</span>个</div>
        </div>
      </div>
      <div class="xc">
        <div class="tit">回访消除 <br/> 风险人数</div>
        <div class="num blue">{{ notRiskyNum ? notRiskyNum : 0 }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FollowUp",
  props: {
    date: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      org: this.$store.state.chooseArea.chooseName,
      typeList: [{
        label: '12345事件',
        value: '12345'
      }, {
        label: '事件回访',
        value: 'follow'
      }],
      type: 'follow',
      sumNum: 0,
      mobileNum: 0,
      visitNum: 0,
      notRiskyNum: 0,
    }
  },
  watch: {
    "$store.state.chooseArea.chooseName"(val) {
      if (val.orgId) {
        this.getData()
      }
    },
    date() {
      this.getData()
    }
  },
  mounted() {
    if (this.org.orgId) {
      this.getData()
    }
  },
  methods: {
    getData() {
      this.$http.get('/actual/base/streetOverview/eventAndFollowGroup?month=' + this.date + '&level=' + this.$store.state.chooseArea.chooseName.level + '&orgId=' + this.$store.state.chooseArea.chooseName.orgId + '&queryType=' + this.type).then(({data: {data}}) => {
        this.sumNum = data.sumNum
        this.mobileNum = data.mobileNum
        this.visitNum = data.visitNum
        this.notRiskyNum = data.notRiskyNum
      })
    },
    typeChange(val) {
      console.log(val,'val')
      this.type = val
      this.getData()
    }
  }
}
</script>

<style scoped lang="scss">
.follow-up {
  padding: 10px 16px;
}
.content {
  background: linear-gradient(90deg, rgba(1, 94, 234, 0.1) 0%, rgba(16, 50, 103, 0) 50%, rgba(1, 94, 234, 0.1) 100%);
  padding: 40px 19px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left {
  border-right: 1px solid #96B1CE;
  padding-right: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .total {
    .tit {
      font-size: 16px;
      font-weight: 400;
      color: #FFFFFF;
      margin-bottom: 20px;
    }

    .num {
      font-size: 14px;
      font-weight: 500;
      color: #A3B9DA;

      span {
        font-size: 36px;
        font-weight: bold;
        font-style: italic;
        color: #08EBAE;
      }
    }
  }

  .left-item {
    margin-left: 24px;
    .tit {
      font-size: 14px;
      font-weight: 400;
      color: #A3B9DA;
      line-height: 24px;
      margin-bottom: 24px;
    }

    .num {
      font-size: 14px;
      font-weight: 500;
      color: #A3B9DA;
      span {
        font-size: 30px;
        font-weight: bold;
        font-style: italic;
        color: #78C4F3;
      }
    }
  }
}

.xc {
  .tit {
    font-size: 16px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 24px;
    margin-bottom: 10px;
  }

  .num {
    font-size: 32px;
    font-weight: bold;
    font-style: italic;
    color: #FFB73C;
  }
}
</style>