epmet-work-pc/src/views/dataBoard/satisfactionEval/modules/PotentialPeople/index.vue

<template>
  <div
    class="potential-people"
    v-loading="loading"
    element-loading-text="加载中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0,0,0,0.5)"
  >
    <div
      class="potential-people-item"
      @click="
        $router.push(
          '/dataBoard/satisfactionEval/potentialPeople?countType=event'
        )
      "
    >
      <div class="icon">
        <img
          class="imgBg"
          src="@/assets/images/manyidu/xuanzhuan-bg.png"
          alt=""
        />
        <img class="imgIcon" src="@/assets/images/manyidu/qz_wjj.png" alt="" />
      </div>
      <div class="txt">
        事件未解决 <br />
        上报人数
      </div>
      <div class="num"><span style="margin-right: 4px;" class="orange">{{ unSolvedNum ? unSolvedNum : 0 }}</span>人</div>
    </div>
    <div
      class="potential-people-item"
      @click="
        $router.push(
          '/dataBoard/satisfactionEval/potentialPeople?countType=demand'
        )
      "
    >
      <div class="icon">
        <img
          class="imgBg"
          src="@/assets/images/manyidu/xuanzhuan-bg.png"
          alt=""
        />
        <img class="imgIcon" src="@/assets/images/manyidu/qz_wmz.png" alt="" />
      </div>
      <div class="txt">
        需求未满足 <br />
        人数
      </div>
      <div class="num"><span style="margin-right: 4px" class="green">{{ unFinishNum ? unFinishNum : 0 }}</span>人</div>
    </div>
    <div
      class="potential-people-item"
      @click="
        $router.push(
          '/dataBoard/satisfactionEval/potentialPeople?countType=service'
        )
      "
    >
      <div class="icon">
        <img
          class="imgBg"
          src="@/assets/images/manyidu/xuanzhuan-bg.png"
          alt=""
        />
        <img class="imgIcon" src="@/assets/images/manyidu/qz_wx.png" alt="" />
      </div>
      <div class="txt">
        应享未享 <br />
        服务人数
      </div>
      <div class="num"><span style="margin-right: 4px" class="light">{{ noServiceNum ? noServiceNum : 0 }}</span>人</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PotentialPeople",
  data() {
    return {
      noServiceNum: 0,
      unFinishNum: 0,
      unSolvedNum: 0,
      loading: true,
    };
  },
  props: {
    date: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    "$store.state.chooseArea.chooseName"(val) {
      if (val.orgId) {
        this.getData();
      }
    },
    date() {
      this.getData();
    },
  },
  mounted() {
    if (this.$store.state.chooseArea.chooseName.orgId) {
      this.getData();
    }
  },

  methods: {
    getData() {
      this.loading = true;
      let params = {
        level: this.$store.state.chooseArea.chooseName.level,
        orgId: this.$store.state.chooseArea.chooseName.orgId,
        ...this.date,
      };
      this.$http
        .get(
          "/governance/satisfactionOverview/potentialSatisfactionGroup?" +
            this.$paramsFormat(params)
        )
        .then(({ data: { data } }) => {
          this.noServiceNum = data.noServiceNum;
          this.unFinishNum = data.unFinishNum;
          this.unSolvedNum = data.unSolvedNum;
          this.loading = false;
        });
    },
  },
};
</script>

<style scoped lang="scss">
@keyframes roate {
  0% {
    transform: rotateZ(0);
    -ms-transform: rotateZ(0);
    -moz-transform: rotateZ(0);
    -webkit-transform: rotateZ(0);
    -o-transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
  }
}
.potential-people {
  padding: 16px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .potential-people-item {
    margin: 14px;
    text-align: center;
    flex: 1;
    border: 1px solid rgba(28, 67, 111, 0.22);
    background: linear-gradient(
      0deg,
      rgba(31, 121, 255, 0.22) 0%,
      rgba(31, 121, 255, 0) 100%
    );
    padding: 26px 0 31px;

    .icon {
      width: 86px;
      height: 86px;
      margin: 0 auto;
      .imgIcon {
        width: 30px;
        height: 30px;
        margin-top: -100px;
      }
      .imgBg {
        display: block;
        width: 100%;
        height: 100%;
        animation: roate 5s infinite linear; //这是重点，给它一个旋转的属性
      }
    }

    .txt {
      font-size: 14px;
      font-weight: 400;
      color: #a3b9da;
      line-height: 24px;
      margin: 11px 0 22px;
      white-space: normal;
    }

    .num {
      font-size: 14px;
      font-weight: 500;
      color: #a3b9da;
      white-space: normal;

      span {
        font-size: 32px;
        font-weight: bold;
        font-style: italic;
      }
    }
  }
}

.orange {
  color: #ffb73c;
}

.green {
  color: #08ebae;
}

.light {
  color: #7fceff;
}
</style>