<template>
  <div class="personnelAdmittanceECharts">
    <div class="left_b_t_l">
      <!--公共小标题-->
      <div class="small_title">
        <div class="small_title_l">人员违规统计-本月</div>
        <div class="small_title_r">
          <i>总违规人数：{{resultCount}}</i>
          <img class="left_b_t_l_btn" src="@/assets/image/index_icon8.png"
               @click="left_b_t_l_btn"/>
        </div>
      </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">安全准入办理统计</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,
        examBigViewNewStatistics,
    } from "@/api/index"
  export default {
    name: 'personnelAdmittanceECharts',
    data () {
      return {
          resultCount: '',
          listcount: '',
      }
    },
    created(){

    },
    mounted(){
        this.examBigViewNewStatistics();
        this.laboratoryBigViewListCollegeApplyColumn();
    },
    methods:{
        //人员违规统计
        examBigViewNewStatistics() {
            let self = this;
            examBigViewNewStatistics({}).then((res) => {
                if (res.code == 200) {
                    let dataX = [];
                    let dataValue = [];
                    let data = res.data.list;
                    self.resultCount = res.data.resultCount////总数
                    for (var i = 0; i < data.length; i++) {
                        dataX.push(data[i].content)
                        dataValue.push(data[i].count);
                    }
                    this.illegalFun(dataX, dataValue)
                }
            })
        },
        /*人员违规统计*/
        illegalFun: function (illegalX, illegalData) {
            let illegalOption = {
                grid: {
                    left: '6%',
                    right: '10%',
                    bottom: '3%',
                    top: '14%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        //rotate:(-10),
                        textStyle: {//改变X轴字体颜色
                            color: '#fff',
                            fontSize: 12,
                            align: 'center' //**
                        },
                        //设置一行显示几个字,自己设置
                        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;
                        },
                        interval: 0,//使x轴上的文字显示完全,

                    },
                    axisTick: {//去掉X轴刻度
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#848cae',//改变X轴颜色
                            width: 2,

                        }
                    },
                    data: illegalX
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#314288',
                            opacity: '.2',

                        }
                    },

                    axisLabel: {
                        formatter: '{value}',
                        textStyle: {
                            color: '#fff',
                        }
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#848cae',
                            width: 2,
                        }
                    }
                },
                series: [{
                    data: illegalData,
                    label: {
                        show: true,
                        color: '#fff',
                        formatter: function (data) {
                            return data.value;
                        }
                    },
                    type: 'line',
                    smooth: true,//让折线平滑
                    symbolSize: 8,   //拐点圆的大小
                    itemStyle: {
                        normal: {
                            color: "#917FFF",
                            lineStyle: {
                                width: 4,
                                type: 'solid'  //'dotted'虚线 'solid'实线
                            }
                        },
                    },
                    areaStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#917FFF'
                            }, {
                                offset: 1,
                                color: 'rgba(0, 0, 0, 0.5)'
                            }])
                        }
                    },
                }]
            };
            var left_m_b = this.$echarts.init(document.getElementById('left_b_t_l_b'));
            left_m_b.setOption(illegalOption);
            //定时动画
            clearInterval(this.chartReload);
            this.chartReload = setInterval(function () {
                left_m_b.clear();
                left_m_b.setOption(illegalOption);
            }, 1000 * 6);
        },
        //安全准入办理统计
        laboratoryBigViewListCollegeApplyColumn() {
            let self = this;
            laboratoryBigViewListCollegeApplyColumn({}).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)
                        })
                    }
                    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": {
          "alignWithLabel": true
      },*/
                    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": [
                    {

                        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 * 4);
        },
        //安全准入办理统计
        left_b_t_r_btn() {
            this.$router.push('./admittanceDetail')
        },
        //人员违规统计
        left_b_t_l_btn() {
            this.$router.push('./illegalDetail')
        },
    },
  }
</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;
      }
      .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: 268px;
      }
    }
    .left_b_t_r {
      width: 468px;
      padding-top: 28px;
      margin-left: 34px;
      .left_b_t_r_b {
        width: 468px;
        height: 268px;
      }
    }
  }
</style>
