<!--
 * @Description: 人员管理统计
 * @Author: 王晓颖
 * @Date:2021-01-12 09:46:35
 -->
<template>
  <div class="chart-div">
    <div class="chart-child" style="flex:2;padding:5px;">
      <div class="block-div">
        <simple-block :data="staffCount" size="small" font-family="DS-DigitalBold">
          <!--<img :src="value.icon">-->
        </simple-block>
      </div>
      <div class="block-div">
        <simple-block :data="attendanceCount" size="small" font-family="DS-DigitalBold">
          <!--<img :src="value.icon">-->
        </simple-block>
      </div>
      <div class="block-div">
        <simple-block :data="attendancePercent" size="small" font-family="DS-DigitalBold">
          <!--<img :src="value.icon">-->
        </simple-block>
      </div>
    </div>
    <div class="chart-child" style="flex:3">
      <!--<ve-pie :data="chartData" style="width:100%;height:100%;"></ve-pie>-->
      <dv-active-ring-chart :config="config" style="width:100%;height:100%" />
    </div>
  </div>
</template>

<script>
import SimpleBlock from '@/components/BigData/Block/simpleBlock'
export default {
  name: 'StaffStatistic',
  components: { SimpleBlock },
  data() {
    return {
      color: '',
      staffCount: {
        name: '人员总数', // 标题
        value: '341', // 数值
        unit: ''
      },
      attendanceCount: {
        name: '出勤总人数', // 标题
        value: '284', // 数值
        unit: ''
      },
      attendancePercent: {
        name: '出勤率', // 标题
        value: '85%', // 数值
        unit: ''
      },
      chartData: {
        columns: ['出勤状态', '人数'],
        rows: [
          { '出勤状态': '出勤', '人数': 284 },
          { '出勤状态': '未出勤', '人数': 57 }
        ]
      },
      config: {
        radius: '60%',
        activeRadius: '65%',
        color: ['#37A2DA', '#9FE6B8'],
        data: [
          {
            name: '出勤',
            value: 284
          },
          {
            name: '未出勤',
            value: 57
          }
        ],
        digitalFlopStyle: {
          fontSize: 18,
          fill: 'black'
        }
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.chart-div{
  display: flex;
  height: 100%;
  width: 100%;
  /*flex-direction: column;*/
  justify-content: space-between;
  .chart-child{
    height: 100%;
    flex:1;
    display: flex;
    flex-direction: column;
    .block-div{
      flex:1;
      padding:3px;
    }
  }

}
</style>
<style>
  .active-ring-name{
    color:black !important;
    font-size:16px !important;
  }
</style>