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

<template>
  <div
      v-loading="loading"
      class="potential-people"
      element-loading-background="rgba(0,0,0,0.5)"
      element-loading-spinner="el-icon-loading"
      element-loading-text="加载中..."
  >
    <!--    <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 class="number-list">
      <div class="number-item" @click="
        $router.push(
          '/dataBoard/satisfactionEval/potentialPeople?countType=event'
        )">
        <div class="img">
          <img alt="" src="@/assets/images/manyidu/hf_ts.png"/>
        </div>
        <div>
          <div class="txt">
            事件未解决 <br/>
            上报人数
          </div>
          <div class="num">
            <span class="orange">{{ unSolvedNum ? unSolvedNum : 0 }}</span> 人
          </div>
        </div>
      </div>
      <div class="number-item" @click="
        $router.push(
          '/dataBoard/satisfactionEval/potentialPeople?countType=demand'
        )
      ">
        <div class="img">
          <img alt="" src="@/assets/images/manyidu/hf_bmy.png"/>
        </div>
        <div>
          <div class="txt">
            需求未满足 <br/>
            人数
          </div>
          <div class="num">
            <span class="green">{{
                unFinishNum ? unFinishNum : 0
              }}</span>
            人
          </div>
        </div>
      </div>
      <div class="number-item" @click="
        $router.push(
          '/dataBoard/satisfactionEval/potentialPeople?countType=service'
        )
      ">
        <div class="img">
          <img alt="" src="@/assets/images/manyidu/hf_zpbmy.png"/>
        </div>
        <div>
          <div class="txt">
            应享未享 <br/>
            服务人数
          </div>
          <div class="num">
            <span class="light">{{ noServiceNum ? noServiceNum : 0 }}</span> 人
          </div>
        </div>
      </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 lang="scss" scoped>
@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 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;

  .potential-people-item {
    flex: 1;
    margin: 14px;
    padding: 26px 0 31px;
    text-align: center;
    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%
    );

    .icon {
      width: 86px;
      height: 86px;
      margin: 0 auto;

      .imgIcon {
        position: relative;
        top: -58px;
        width: 30px;
        height: 30px;
      }

      .imgBg {
        display: block;
        width: 100%;
        height: 100%;
        animation: roate 5s infinite linear; //这是重点，给它一个旋转的属性
      }
    }

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

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

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

.orange {
  color: #ffb73c;
}

.green {
  color: #08ebae;
}

.light {
  color: #7fceff;
}

.number-list {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0px 15px;

  .number-item {
    display: flex;

    .image {
      width: 98px;
      height: 70px;
    }

    .txt {
      font-size: 15px;
      margin-left: -6px;
      font-weight: 400;
      color: #ffffff;
      line-height: 26px;
      margin-bottom: 17px;
      white-space: nowrap;
    }

    .num {
      font-size: 14px;
      font-weight: 500;
      color: #a3b9da;
      white-space: nowrap;
      span {
        font-size: 32px;
        font-weight: bold;
        font-style: italic;
        //color: #3ab7ff;
      }
    }
  }
}

</style>