<template>
  <div class="main_box">
    <div class="home_left">
      <InnerBox :echartObj="echartObj1" header_title="当月缺勤数据占比" little_font="（%）" />
      <InnerBox :echartObj="echartObj2" header_title="本年度出勤率统计" little_font="（人）" />
      <InnerBox :echartObj="echartObj3" header_title="本年度缺勤人数统计" little_font="（人）" />
    </div>
    <div class="home_center">
      <div style="width: 100%;height: 10%;display: flex;justify-content: space-between;align-items: flex-start;">
        <img src="@/assets/img/humanResources/1.png" style="width: 31%;max-height: 100%;">
        <img src="@/assets/img/humanResources/2.png" style="width: 31%;max-height: 100%;">
        <img src="@/assets/img/humanResources/3.png" style="width: 31%;max-height: 100%;">
      </div>
      <!--当前员工人数和党员人数占比-->
      <dv-border-box-11 title="当前员工人数和党员人数占比(%)" :color="['#48E5E5', '#1F7DAF']" :titleWidth="400" style="height: 45%;">
        <div style="width: 100%;height: 100%;display: flex;align-items: center;">
          <img src="@/assets/img/humanResources/4.png" style="width: 95%;max-height: 100%;">
        </div>
      </dv-border-box-11>

      <!--员工年龄和学历占比(个)-->
      <dv-border-box-11 title="员工年龄和学历占比(%)" :color="['#16ADDE', '#0C7DE7']" :titleWidth="400" style="height: 40%;">

      </dv-border-box-11>
    </div>
    <div class="home_right">
      <InnerBox :echartObj="echartObj5" header_title="当前员工男女和职称比例" little_font="（%）" style="height: 50%;" />
      <InnerBox :echartObj="echartObj6" header_title="岗位分析" little_font="（人）" style="height: 50%;" />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Progress,Divider } from 'ant-design-vue';
Vue.use(Progress);
Vue.use(Divider);
import Echarts from "@/components/echarts";

export default {
  data() {
    return {
      // 当月缺勤数据占比
      echartObj1: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          right: '10',
          top: 'center',
          orient: 'vertical',
          data: ['事假', '病假', '调休','婚假','年假','产假',],
          textStyle: {
            color: '#FFFFFF',
            lineHeight: 18
          },
          formatter: (name) => {
            let data = this.echartObj1.series[0].data
            let total = 0
            let tarValue
            for (let i = 0; i < data.length; i++) {
              total += data[i].value
              if (data[i].name == name) {
                tarValue = data[i].value
              }
            }
            //计算出百分比
            let p = Math.round((tarValue / total) * 100, 2) + '%'
            return `${name}(${p})`
          }
        },
        color: ['#4AA2CB','#91CC75','#68A400','#3D7DFA','#48E5E5','#FAC858'],
        toolbox: {
          show: false,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {
              show: true,
              type: ['pie', 'funnel']
            },
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        series: [
          {
            name: '占比分析',
            type: 'pie',
            radius: [30, 100],
            top: 'middle',
            label: {
              show: false,
              position: 'inside',
              formatter: '{d}%',
            },
            data: [
              {value: 32.35, name: '事假'},
              {value: 7.71, name: '病假'},
              {value: 23.53, name: '调休'},
              {value: 8.88, name: '婚假'},
              {value: 17.59, name: '年假'},
              {value: 9.94, name: '产假'},
            ]
          }
        ]
      },
      // 本年度出勤率统计
      echartObj2: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 10,
            }
          },
          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
        },
        yAxis: {
          type: 'value',
          axisLabel: {//y轴文字的配置
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: ['#1F7DAF']
            }
          },
        },
        series: [
          {
            data: [
              {name: '1月', value: 300},
              {name: '2月', value: 470},
              {name: '3月', value: 380},
              {name: '4月', value: 480},
              {name: '5月', value: 400},
              {name: '6月', value: 330},
              {name: '7月', value: 480},
              {name: '8月', value: 500},
              {name: '9月', value: 500},
              {name: '10月', value: 400},
              {name: '11月', value: 350},
              {name: '12月', value: 220},
            ],
            type: 'bar',
            barGap:'100%',
            barWidth: 10,
            itemStyle: this.setSeriesItemStyle('lan', {label: {show: false}}),
          },
        ]
      },
      // 本年度缺勤人数统计
      echartObj3: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 10,
            }
          },
          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
        },
        yAxis: {
          type: 'value',
          axisLabel: {//y轴文字的配置
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: ['#1F7DAF']
            }
          },
        },
        series: [
          {
            data: [
              {name: '1月', value: 300},
              {name: '2月', value: 470},
              {name: '3月', value: 380},
              {name: '4月', value: 480},
              {name: '5月', value: 400},
              {name: '6月', value: 330},
              {name: '7月', value: 480},
              {name: '8月', value: 500},
              {name: '9月', value: 500},
              {name: '10月', value: 400},
              {name: '11月', value: 350},
              {name: '12月', value: 220},
            ],
            type: 'bar',
            barGap:'100%',
            barWidth: 10,
            itemStyle: this.setSeriesItemStyle('huang', {label: {show: false}}),
          },
        ]
      },
      echartObj5: {},
      echartObj6: {},
    }
  },
  created() {
    this.init();
  },
  components: {
    Echarts,
  },
  methods: {
    init() {
      this.getData();
    },
    search() {
      this.init();
    },
    getData() {
    },
    setSeriesItemStyle(color, obj={}){
      let colors = {
        qing: ['#48E5E5', 'rgba(72,228,229,0.30)'],
        lan: ['#2B8EF3', 'rgba(25,118,226,0.30)'],
        // huang: ['#F5B12D', 'rgba(255,123,0,0.30)'],
        huang: ['#FF7B00', 'rgba(255,123,0,0.30)'],
        lv: ['#07F090', 'rgba(60,212,149,0.28)'],
        zi: ['#9B64D3', 'rgba(155,100,211,0.24)'],
      }
      return {
        normal: {
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#FFFFFF',
              fontSize: 12
            },
          },
          color: () => {
            return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: colors[color][0] },
              { offset: 1, color: colors[color][1] },
            ]);
          },
          ...obj,
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .ant-progress-circle .ant-progress-text {
  color: #FFFFFF;
  font-size: 20px;
}
/deep/ .ant-progress-circle-trail{
  stroke:#334D60 !important;
}
.main_box{
  padding: 0 2rem;
  > div{
    padding: 0;
  }
  .inner_box{
    overflow: hidden;
  }
  .home_left,
  .home_right{
    width: 25%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    .inner_box{
      width: 100%;
      height: 32%;
    }
  }
  .home_center{
    width: 50%;
    padding: 0 1em;
    .dv-border-box-11 {
      font-size: 1rem;
      /deep/ .border-box-content {
        padding: 4rem 1.5rem 1rem;
      }
    }
    .zz{
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      overflow: hidden;
      .dv-border-box-8{
        margin-right: 1%;
      }
      .box8{
        width: 15%;
        /deep/ .border-box-content {
          padding: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      }
      .zz1{
        width: 50%;
        background: linear-gradient(89deg, #088152 3%, #01190C 99%);
        padding: 0 1rem;

        height: 100%;
        border-radius: 100vw;
        border: 3px solid #038F81;
        display: flex;
        justify-content: space-between;
        align-items: center;

        /*/deep/ .border-box-content{
          padding: 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }*/
        .circle{
          display: inline-block;
          position: absolute;
          width: 12px;
          height: 1.5em;
          border-left: 1px solid;
          border-bottom: 1px solid;
          border-color: #00B4FF;
          margin-left: -12px;
          // margin-top: -0.5em;
          &:after{
            content: "";
            display: block;
            width: 7px;
            height: 7px;
            border-radius: 7px;
            background: #00B4FF;
            position: absolute;
            margin-top: -7px;
            margin-left: -3.5px;
          }
        }
        .circle2{
          border-color: #F77802;
          &:after{
            background: #F77802;
          }
        }
      }
    }
    .inner_box /deep/ .box_content{
      flex: 1;
      height: calc(100% - 60px);
    }
  }
  .echart5{
    padding: 1rem 0;
    display: flex;
    justify-content: space-around !important;
    > div{
      font-size: 1rem;
      color: #FFFFFF;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
}
</style>
