<template>
  <div class="ruoyiUiExecutable">
    <div class="top">
      <!-- <b>巡检任务清单</b> -->
      <dv-decoration-11 class="dv11">巡检任务清单 </dv-decoration-11>
    </div>

    <div class="chartBox">
      <div class="item">
        <div class="itemTop">
          <div>
            <span>日</span> 已查：{{ day.checkCount || 0 }}
          </div>
          <p>应查：{{ day.totalCount || 0 }}</p>
        </div>
        <el-progress :format="format" :percentage="setNum(day.checkCount, day.totalCount) || 0"></el-progress>
      </div>
      <div class="item">
        <div class="itemTop">
          <div>
            <span>周</span> 已查：{{ week.checkCount || 0 }}
          </div>
          <p>应查：{{ week.totalCount || 0 }}</p>
        </div>
        <el-progress :format="format" :percentage="setNum(week.checkCount, week.totalCount) || 0"></el-progress>
      </div>
      <div class="item">
        <div class="itemTop">
          <div>
            <span>月</span> 已查：{{ month.checkCount || 0 }}
          </div>
          <p>应查：{{ month.totalCount || 0 }}</p>
        </div>
        <el-progress :format="format" :percentage="setNum(month.checkCount, month.totalCount) || 0"></el-progress>
      </div>
    </div>
  </div>
</template>

<script>
import { checkTaskInventoryStatisticsPC } from '@/api/home'
export default {
  name: 'RuoyiUiExecutable',
  computed: {
    setNum() {
      return (start, end) => {
        return start / end * 100
      }
    }
  },
  data() {
    return {
        customColor: '#409eff',
        day: {},
        week: {},
        month: {}

    }
  },

  mounted() {
    checkTaskInventoryStatisticsPC({ lastDays: 1 }).then(res => {
      if (res.code === 200) {
        this.day = res.data
      }
    })
    checkTaskInventoryStatisticsPC({ lastDays: 7 }).then(res => {
      if (res.code === 200) {
        this.week = res.data
      }
    })
    checkTaskInventoryStatisticsPC({ lastDays: 30 }).then(res => {
      if (res.code === 200) {
        this.month = res.data
      }
    })
  },

  methods: {
    format() {
        return '';
      }
  },
};
</script>

<style lang="scss" scoped>
.dv11{
  width:200px;
  height:50px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}
.item{
  width: 100%;
  padding: 6px 15px;
.itemTop{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  span{
    display: inline-block;
   padding: 5px 7px;
    background: #00bfbf;
    border-radius: 5px;
  }
  p{
    color: #ccc;
  }
}
}
.chartBox{
  /* margin-top: -30px; */
  /* display: flex;
  justify-content: space-around; */
}
.dvChart{
  width: 270px;
  height: 270px;
}
.first{
  margin-left: 30px;
}
.last{
  margin-top: -80px;
}
.top{
  margin: 5px 0 15px 10px;
  text-align: left;
}
.dv7 {
  width: 160px;
  height: 30px;
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
  color: #fff;
  /* background: #032930; */
}
.dv9{
  width: 130px;
  height: 130px;
  color: green;
  font-weight: 900;
  font-size: 20px;

}
.ruoyiUiExecutable{
  padding-top: 5px;
}
</style>
