<template>
  <Card title="人员概况">
    <div class="contentBox">

      <div class="contentbut">
        <div class="lw">
          <p>今日出勤</p>
          <p class="number">{{ list.todayAtte||0}}</p>
        </div>
        <div class="cq">
          <p>在场</p>
          <p class="number">{{ list.bePresent||0 }}</p>
        </div>
        <div class="tc">
          <p>今日出勤率</p>
          <p class="number">{{ list.atteRatio ||0}}</p>
        </div>
       
      </div>
      <div class="contentbut">
        <div class="lw">
          <p>现场</p>
          <p class="number">{{ list.scene||0 }}</p>
        </div>
        <div class="cq">
          <p>今日进场</p>
          <p class="number">{{ list.todayMobilization||0 }}</p>
        </div>
        <div class="tc">
          <p>今日退场</p>
          <p class="number">{{ list.todayExit||0}}</p>
        </div>
       
      </div>
    </div>
  </Card>
</template>

<script>
import Card from "../components/Card.vue";
import { getworkerInfoApi } from '@/assets/js/api/zhongjianFourth'
export default {
  components: { Card },
  data() {
    return {
    list:{
      todayAtte:'',//今日出勤
      bePresent:'',//在场
      atteRatio:'',//今日出勤率
      scene:'',//现场
      todayMobilization:'',//今日进场
      todayExit:'',//今日退场
    },
    projectSn:'',
    };
  },
  created() {
    this.projectSn = this.$store.state.projectSn
   this.getList()
  },
  methods:{
     /** 查询人员概况 */
     getList() {
    
      getworkerInfoApi({ projectSn: this.projectSn }).then(res => {
        console.log('人员概况: ', res);
        this.list=res.result
      })
    },
  }

};
</script>

<style lang="less" scoped>
.contentBox {
  box-sizing: border-box;
  // padding-top: 20px;
  padding-bottom: 10px;
 
  .contentbut {
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(255, 255, 255);
    // flex-wrap: wrap;
    .lw,
    .cq,
    .tc {
      width: 102px;
      text-align: center;
      margin-right: 50px;
      font-size: 14px;
      margin-top: 21px;
      .number {
        height: 43px;
        width: 102px;
        line-height: 43px;
        font-size: 19px;
        background-image: url(../assets/images/common/num_bg.png);
        background-repeat: no-repeat;
        background-size: 100%;
        color: #66d4d9;
      }
    }
    .lw {
      margin-left: 40px;
    }
  }
}
</style>
