<template>
  <div class="personnelAdmittanceECharts">
    <div class="left_b_t_l">
      <!--公共小标题-->
      <div class="small_title">
        <div class="small_title_l" style="padding-left:20px!important;">实验室分类分级统计</div>
        <div class="small_title_r" style="margin-right:20px;margin-top:-18px;">
          <img class="left_b_t_l_btn" src="@/assets/image/index_icon8.png"
               @click="left_b_t_l_btn"/>
        </div>
      </div>
      <div class="right_b_r_b_t">
        <li v-for='(item,index11) in classifyList' :key="index11"><i></i><i>{{item.name}}({{item.value}})</i>
        </li>
      </div>
      <div class="left_b_t_l_b" id="left_b_t_l_b"></div>
    </div>
    <div class="left_b_t_r">
      <!--公共小标题-->
      <div class="small_title">
        <div class="small_title_l" style="padding-left:40px!important;">安全准入办理统计</div>
        <!--<div class="small_title_r" @click="left_b_t_r_btn">-->
        <!--<i>准入办理总人数：{{listcount}}</i>-->
        <!--<img class="left_b_t_r_btn" src="@/assets/image/index_icon8.png"/>-->
        <!--</div>-->
      </div>
      <div class="left_b_t_r_b" id="left_b_t_r_b"></div>
    </div>
  </div>
</template>
<script>
  import {
    laboratoryBigViewListCollegeApplyColumn,
    laboratoryBigViewsSubTypeLevelCount,
    laboratoryLevelConfigGetLevelTitleList
  } from '@/api/index'

  export default {
    name: 'personnelAdmittanceECharts',
    data() {
      return {
        resultCount: '',
        listcount: '',
        classifyList:[],
        lvList:[],
        chartReload1: null,//定时器
        chartReload2: null,//定时器
      }
    },
    created() {

    },
    mounted() {
      this.laboratoryLevelConfigGetLevelTitleList()
      this.laboratoryBigViewListCollegeApplyColumn()
    },
    methods: {
      //获取分级数据
      laboratoryLevelConfigGetLevelTitleList() {
        laboratoryLevelConfigGetLevelTitleList({}).then((response) => {
          if (response.code == 200) {
            this.$set(this, 'lvList', response.data)
            this.laboratoryBigViewsSubTypeLevelCount()
          }
        })
      },
      //实验室分类分级
      laboratoryBigViewsSubTypeLevelCount() {
        let obj = {};
        if(!localStorage.getItem('deptId')){
          obj.buildId = localStorage.getItem('buildId');
        }
        laboratoryBigViewsSubTypeLevelCount(obj).then(response => {
          if (response.code == 200) {
            this.$set(this, 'classifyList', response.data.classType)
            let dataVal = response.data.levelType
            this.classifyFun(dataVal)
          }
        })
      },
      /*实验室分级统计*/
      classifyFun(dataX) {
        let lvList = this.lvList;
        let classifyOption = {
          series: [{
            type: 'pie',
            z: 3,
            center: ['45%', '55%'],
            radius: ['40%', '55%'],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 15,
            itemStyle: {
              normal: {
                color: function(params) {
                  let titleColor = '';
                  for(let i=0;i<lvList.length;i++){
                    if(lvList[i].titleName == params.name){
                      titleColor = lvList[i].titleColor
                    }
                  }
                  return titleColor
                }
              }
            },
            label: {
              normal: {
                formatter: (params) => {
                  return '{b|' + params.name + '}' + '{c|(' + params.value + ')}' + '{a|' + params.percent.toFixed(0) + ' %}'
                },
                borderWidth: 0,
                borderRadius: 4,
                padding: [0, -10],
                height: 30,
                fontSize: 12,
                align: 'center',
                color: '#fff',
                rich: {
                  b: {
                    fontSize: 12,
                    lineHeight: 12,
                    color: '#fff'

                  },
                  c: {
                    fontSize: 12,
                    lineHeight: 12,
                    color: '#fff'
                  },
                  d: {
                    fontSize: 12,
                    lineHeight: 12,
                    color: '#fff'

                  }

                }
              }
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 16,
                lineStyle: {
                  width: 1,
                  color: '#fff'
                }
              }
            },
            data: dataX
          }]
        }
        var right_b_r_b_b = this.$echarts.init(document.getElementById('left_b_t_l_b'))
        right_b_r_b_b.setOption(classifyOption)
        //定时动画
        clearInterval(this.chartReload1)
        this.chartReload1 = setInterval(function() {
          right_b_r_b_b.clear()
          right_b_r_b_b.setOption(classifyOption)
        }, 1000 * 20)
      },
      //安全准入办理统计
      laboratoryBigViewListCollegeApplyColumn() {
        let self = this;
        let obj = {};
        if(!localStorage.getItem('deptId')){
          obj.buildId = localStorage.getItem('buildId');
        }
        laboratoryBigViewListCollegeApplyColumn(obj).then((res) => {
          if (res.code == 200) {
            let illegalX = []
            let illegalData = []
            let data = res.data.listTg;
            self.listcount = res.data.listcount//总数
            if (data.length <= 0) {
              for (let i = 0; i < 4; i++) {
                illegalX.push('其他')
                illegalData.push(0)
              }
            } else {
              data.forEach(function(item) {
                illegalX.push(item.applyMonth)
                illegalData.push(item.applyNum)
              })
            }

            // let illegalData = [0,0,0,0,0,62,67,77,71,81,66,94,];
            // let illegalX = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',];
            this.admittanceFun(illegalX, illegalData)
          }
        })
      },
      /*安全准入办理统计*/
      admittanceFun: function(dataX, dataValue) {
        var paperDataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAABqCAYAAAC1StHGAAAAAXNSR0IArs4c6QAAAx9JREFUWEfFmVlv00AUhc+1E6ep6AK8AC/8A/4E7zzywjPiiQdU9kVICCEEiH0pRYAoKkuhLGUTW1ERQuyV+A1tQyElblrsxok9aCYOWCVIIacSVxpFGXu+OfeM72icCHT0uQtTpfIKqchalcZKlUV75FiibDGXESrYQaTER1EqGFK26qlk0p+xprMgGCgsR6DWiS2rYallykIWFmAaYgAUEME0ieAjlHGJVH/kyFlB/1QvJFoFCx2w4zEqMbaqAZpheDEIEaYQWoOCa4VJ2FhkbtI36GZmrxN6sAb9gokrdnc+H3bai5GOLySVJxl6UC30JAGQcsOCtHeNuqUlTkd5aQqRI7/Trqmpya99KkBKCk6ugpZcqSgd60c9JchGjoWw00bYbiHMClRGAMuqyo0iSKBg+RFSxQi2G8EKIp2tL20bxjxRKmvMkViB1HFRKUAlVkX0V/GlrUsDkDXpGZOU8TGJqKVv+vUksclKtIKuMQ+IAUmTkqbVjJ3bp1NYsHHck7mAxIIkmXMXVhnApnEPtRT+svx1u6t2+NK6ub6CRlhGQesWEpDdmvvTxEamr97jS8u2XF0TG2GYFFq2s4AdJCCz8wvnQWbX/wY4rIL07gnOAwOQOdXYyENQ3aF8Se2ZaK6YqiUeA+qUc4MifLH3fuUUGACjwNpHKjAARoHs/8Z5YACMAhwgFRgApeBgngQcynMm4jCr4AgLODpJenCMBRxnASe+kymcZAGnWMBpFnCmQHrQzQLOsoAeFnDOJT0475LlfGE+ANSWdrHoAap62P7nEF9wqehBH/ebCX3cNwBKQS8LuDxNKuibJj3QAMqDKyzg6gyp4PoM6YEGUB70swpu/CAV3GQBAyzgFgu4zQLueKSJd1nAIAu4xwLu+6QHD1jAQxbwiAU89sn94MksCXjKAp6xgOfzAaD2xKFZ8ojzggUMaw+afP3Xb+/QAOqIM1wiq/FliUzh1XwAKA9eswo0gFLwJiDLWQNoBRTgrU6BeZTfsSm8ZwEfymQtGECTHuhfdfGRBXxiASPlADD/sDQTZcFIxQWU08xoQIKf1XEgxrNrNF0AAAAASUVORK5CYII='
        var admittanceOption = {
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '16%',
            containLabel: true
          },

          xAxis: [{
            type: 'category',
            data: dataX,
            axisTick: {
              show: false

            },
            nameTextStyle: {
              color: '#82b0ec'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#486CC2',
                width: 2
              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontSize: 12
              },
              //设置一行显示几个字,自己设置
              formatter: function(params) {
                var newParamsName = ''
                var paramsNameNumber = params.length
                var provideNumber = 3
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = ''
                    var start = p * provideNumber
                    var end = start + provideNumber
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber)
                    } else {
                      tempStr = params.substring(start, end) + '\n'
                    }
                    newParamsName += tempStr
                  }
                } else {
                  newParamsName = params
                }
                return newParamsName
              }
            }
          }],
          yAxis: [
            {
              name:'人',
              nameTextStyle:{
                color:'#fff',
              },
              min:0,
              minInterval:1,
              axisTick: {
                show: false

              },
              //坐标轴
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#486CC2',
                  width: 2
                }
              },
              //坐标值标注
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 12
                }
              },
              //分格线
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#4784e8',
                  type: 'dashed',
                  opacity: 0.4
                }
              }
            }
          ],

          series: [

            {
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
              data: dataValue,
              type: 'pictorialBar',
              barMaxWidth: '20',
              symbolPosition: 'end',
              // symbol: "diamond",
              symbol: 'image://' + paperDataURI,
              // symbolOffset: [0, "-50%"],
              //symbolSize: [30, 22],
              zlevel: 2
            }

          ],
          tooltip: {
            trigger: 'axis',
            show: false
          }
        }
        var left_b_b = this.$echarts.init(document.getElementById('left_b_t_r_b'))
        left_b_b.setOption(admittanceOption)
        //定时动画
        clearInterval(this.chartReload2)
        this.chartReload2 = setInterval(function() {
          left_b_b.clear()
          left_b_b.setOption(admittanceOption)
        }, 1000 * 20)
      },
      //安全准入办理统计
      left_b_t_r_btn() {
        this.$router.push('./admittanceDetail')
      },
      //实验室分类分级
      left_b_t_l_btn() {
        this.$router.push('./classifyGradeDetail')
      }
    }
  }
</script>
<style scoped lang="scss">
  .personnelAdmittanceECharts {
    display: flex;
    justify-content: flex-start;

    .small_title {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .small_title_l {
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #1ED0F8;
        line-height: 18px;
        margin-bottom: 20px;
      }
      .small_title_r {
        width: 280px;
        text-align: right;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        > i {
          // width: 200px;
          display: inline-block;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 14px;
          text-align: right;
          margin-right: 12px;
        }
        > img {
          width: 12px;
          height: 12px;
          cursor: pointer;
          position: relative;
          top: 0;
        }
      }
      .small_title_r2 {
        //width: 140px;
        text-align: right;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        > i {
          width: 100px;
          display: inline-block;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 14px;
          text-align: center;
        }
        > img {
          width: 12px;
          height: 12px;
          cursor: pointer;
        }
      }
    }
    .left_b_t_l {
      width: 482px;
      padding-top: 28px;
      margin-left: 14px;
      .left_b_t_l_b {
        width: 482px;
        height: 295px;
      }
      .right_b_r_b_t {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: 10px;
        height: 60px;
        margin-left:30px;
        > li {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-right: 30px;
          > i:nth-of-type(1) {
            width: 8px;
            height: 8px;
            background: #FFFFFF;
            border-radius: 4px;
            margin-right: 4px;
          }
          > i:nth-of-type(2) {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 32px;
          }
        }
      }
      .right_b_r_b_b {
        width: 344px;
        height: 166px;

      }
    }
    .left_b_t_r {
      width: 500px;
      padding-top: 28px;
      .left_b_t_r_b {
        width: 500px;
        height: 348px;
      }
    }
  }
</style>
