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: "",
    },
    currentLevelData: {
      type: Object,
      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: {
    currentLevelData(val) {
      if (val.orgId) {
        this.getData(val);
      }
    },
    date() {
      this.getData(this.currentLevelData);
    },
  },
  mounted() {
    if (this.currentLevelData.orgId) {
      this.getData(this.currentLevelData);
    }
  },
  methods: {
    getData(item) {
      this.$http
        .get(
          "/actual/base/streetOverview/eventAndFollowGroup?month=" +
            this.date +
            "&level=" +
            item.orgLevel +
            "&orgId=" +
            item.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) {
      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%
  );
  height: 190px;
  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>