<template>
  <ul class="statics-rwzx">
    <li class="item item_box">
      <div class="title">任务总数</div>
      <div class="number numb">{{ rwCount.all }}</div>
    </li>
    <li class="item item_box">
      <div class="title">超期进行中</div>
      <div class="number numb">{{ rwCount.cqjxz }}</div>
    </li>
    <li class="item item_box">
      <div class="title">超期完成</div>
      <div class="number numb">{{ rwCount.cqwc }}</div>
    </li>
    <li class="item item_box">
      <div class="title">进行中</div>
      <div class="number numb">{{ rwCount.jxz }}</div>
    </li>
    <li class="item item_box">
      <div class="title">已完成</div>
      <div class="number numb">{{ rwCount.ywc }}</div>
    </li>
    <li class="item item_box">
      <div class="title">超期未完成</div>
      <div class="number numb">{{ rwCount.cqwwc }}</div>
    </li>
  </ul>
</template>

<script setup>
import { getRwCount } from "../../../../api/rwzx.js";
import { reactive, ref, onMounted } from "vue";
//任务统计数据
const rwCount = ref({
  all: 0,
  cqjxz: 0,
  cqwc: 0,
  jxz: 0,
  ywc: 0,
  cqwwc: 0,
});
onMounted(() => {
  _getRwCount();
});
//获取统计数量
function _getRwCount() {
  getRwCount({}).then((res) => {
    if (res) rwCount.value = res;
  });
}
</script>

<style lang="scss" scoped>
@import "../../../../assets/styles/mixin.scss";
.statics-rwzx {
  width: 100%;
  height: 100%;
  min-height: 26vw;
  padding-top: 4vw;
  box-sizing: border-box;
  overflow: hidden;
  .item {
    float: left;
    width: 31%;
    border-radius: 2vw;
    overflow: hidden;
    margin-bottom: 4vw;
    .title {
      height: 7vw;
      text-align: center;
      line-height: 7vw;
      @include font_size($font_medium_s);
      background: #3e6ee8;
      color: #fff;
    }
    .number {
      height: 10vw;
      text-align: center;
      line-height: 10vw;
    }
  }
  li:nth-child(3n + 2) {
    margin-left: 3%;
    margin-right: 3%;
  }
}
</style>
