<!-- 安全隐患排行 -->
<template>
  <div class="troubleRankingComponents">
    <title-page-img-components :propsData="propsData"></title-page-img-components>
    <div class="eCharts-max-big-box">
      <div class="position-button-left">
        <p @click="checkButton(0)" :class="buttonType == 0?'left-border-1':'left-border-2'">年度</p>
        <p @click="checkButton(1)" :class="buttonType == 0?'center-border-2':(buttonType == 1?'center-border-1':(buttonType == 2?'center-border-3':''))">季度</p>
        <p @click="checkButton(2)" :class="buttonType == 2?'right-border-1':'right-border-2'">月度</p>
      </div>
      <div class="position-button-right">
        <div>
          <p class="colorA"></p>
          <p>已整改</p>
        </div>
        <div>
          <p class="colorB"></p>
          <p>未整改</p>
        </div>
        <div>
          <p class="colorC"></p>
          <p>暂无法整改</p>
        </div>
      </div>
      <div id="troubleRankingComponentsECharts"></div>
    </div>
  </div>
</template>
<script>
import {
  reportReportBigDataDangerSort,
} from "@/api/index";
  import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
  export default {
    name: 'troubleRankingComponents',
    components: {
      titlePageImgComponents
    },
    data () {
      return {
        propsData:{
          title:'安全隐患排行',
          checkType:'troubleRankingComponents',
        },
        eChartsTimer:null,
        buttonType:0,
      }
    },
    created () {

    },
    mounted () {
      this.timedRefresh();
    },
    methods: {
      timedRefresh(){
        let self = this;
        this.getData();
        //定时动画
        window.clearInterval(self.eChartsTimer);
        self.eChartsTimer = setInterval(function(){
          self.getData();
        },1000*30);
      },
      getData(){
        reportReportBigDataDangerSort({type:this.buttonType}).then( response => {
          let deptSortName = [];
          let notRectifyNum = [];
          let rectifyNum = [];
          let tempNum = [];
          let num = 0;
          if (response.data[0]){
            for(let i=0;i<response.data.length;i++){
              response.data[i].maxNum = response.data[i].notRectifyNum+response.data[i].rectifyNum+response.data[i].tempNum;
            }
            let len = response.data.length;
            for (let i = 0; i < len; i++) {
              for (let j = 0; j < len - 1 - i; j++) {
                if (response.data[j].maxNum < response.data[j + 1].maxNum) {
                  [response.data[j], response.data[j + 1]] = [response.data[j + 1], response.data[j]];
                }
              }
            }
            for(let i=0;i<response.data.length;i++){
              deptSortName.push(response.data[i].deptSortName)
              notRectifyNum.push(response.data[i].notRectifyNum)
              rectifyNum.push(response.data[i].rectifyNum)
              tempNum.push(response.data[i].tempNum)
              if(response.data[i].maxNum > num){
                num = response.data[i].maxNum;
              }
            }
          } else {
            deptSortName = [''];
            notRectifyNum = [0];
            rectifyNum = [0];
            tempNum = [0];
          }
          this.eChartsMethod(deptSortName,notRectifyNum,rectifyNum,tempNum,num);
        });
      },
      checkButton(type){
        if(this.buttonType != type){
          this.$set(this,'buttonType',type);
          this.getData();
        }
      },
      //
      eChartsMethod(deptSortName,notRectifyNum,rectifyNum,tempNum,num){
        let option = {
          tooltip: {
            trigger: "axis",
            textStyle: {
              fontSize: 18
            },
            axisPointer: {
              type: "shadow",
              textStyle: {
                color: "#fff",
              },
            },
          },
          grid: {
            borderWidth: 0,
            top: 110,
            bottom: 95,
            textStyle: {
              color: "#fff",
            },
          },
          calculable: true,
          xAxis: [
            {
              type: "category",
              axisLabel: {
                interval: 0,
                rotate: 35,
                margin: 20,
                textStyle: {
                  color: "#ffffff",
                  fontSize: 18,
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#D0E6E5",
                },
              },
              axisTick: {
                show: false,
              },
              splitArea: {
                show: false,
              },
              data: deptSortName,
            },
          ],
          yAxis: [
            {
              type: "value",
              splitLine: {
                lineStyle: {
                  // 使用深浅的间隔色
                  color: ["#EBFBFB"],
                  type: "dashed",
                  opacity: 0.5,
                },
              },
              axisLine: {
                lineStyle: {
                  fontSize: 18,
                  color: "#D0E6E5",
                },
              },
              axisLabel: {
                margin: 10,
                textStyle: {
                  color: "#ffffff",
                  fontSize: 18,
                },
              },
              axisTick: {
                show: false,
              },
              splitArea: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: "已整改",
              type: "bar",
              stack: "总量",
              barMaxWidth: 14,
              showBackground: true,
              backgroundStyle: {
                color: "rgba(1,36,42,0.6)",
              },
              barGap: "10%",
              itemStyle: {
                normal: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(61,216,216, 1)", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgba(61,216,216, 0)", // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                },
              },
              data:rectifyNum,
            },

            {
              name: "暂无法整改",
              type: "bar",
              stack: "总量",
              itemStyle: {
                normal: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(255,132,0, 1)", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgba(255,132,0, 0)", // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                  barBorderRadius: 0,
                },
              },
              data: tempNum,
            },

            {
              name: "未整改",
              type: "bar",
              stack: "总量",
              itemStyle: {
                normal: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(255,65,44, 1)", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgba(255,65,44, 0)", // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                  barBorderRadius: 0,
                },
              },
              data: notRectifyNum,
            },
          ],
        };
        if(num < 5){
          option.yAxis[0].max = 5;
        }else{
          option.yAxis[0].min= 0;
          option.yAxis[0].max= num; // 计算最大值
          option.yAxis[0].interval= Math.ceil(num / 5); // 平均分为5份
        }
        let echartsBox = this.$echarts.init(document.getElementById('troubleRankingComponentsECharts'));
        echartsBox.clear();
        echartsBox.setOption(option);
      },
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.eChartsTimer);
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.eChartsTimer);
    }
  }
</script>
<style scoped lang="scss">
  .troubleRankingComponents{
    width:800px;
    height:475px;
    .eCharts-max-big-box {
      background: linear-gradient(180deg, rgba(4, 117, 129, 0.2) 0%, rgba(0, 15, 22, 0) 100%);
      position: relative;
      .position-button-left {
        z-index:5;
        position: absolute;
        margin:21px 0 0 29px;
        display: flex;
        p{
          width:70px;
          line-height:36px;
          text-align: center;
          color:#fff;
          font-size:18px;
          background-color: #063D40;
          cursor: pointer;
        }
        p:nth-child(1){
          border-top-left-radius:4px;
          border-bottom-left-radius:4px;
        }
        p:nth-child(3){
          border-top-right-radius:4px;
          border-bottom-right-radius:4px;
        }
        .left-border-1{
          border: 1px solid #00E6FF;
          color:#00E6FF;
        }
        .left-border-2{
          border: 1px solid #15827C;
          border-right:none;
        }
        .center-border-1{
          border: 1px solid #00E6FF;
          color:#00E6FF;
        }
        .center-border-2{
          border: 1px solid #15827C;
          border-left:none;
        }
        .center-border-3{
          border: 1px solid #15827C;
          border-right:none;
        }
        .right-border-1{
          border: 1px solid #00E6FF;
          color:#00E6FF;
        }
        .right-border-2{
          border: 1px solid #15827C;
          border-left:none;
        }
      }
      .position-button-right {
        z-index:5;
        position: absolute;
        top:24px;
        left:430px;
        display: flex;
        div{
          display: flex;
          p:nth-child(1){
            width:16px;
            height:16px;
            border-radius:2px;
            margin:6px 10px 0 0;
          }
          p:nth-child(2){
            color: #fff;
            margin-right:30px;
            line-height:30px;
            font-size:18px;
          }
          .colorA{
            background-color: #3DD8D8;
          }
          .colorB{
            background-color: #FF412C;
          }
          .colorC{
            background-color: #FF8400;
          }
        }
      }
      #troubleRankingComponentsECharts {
        width: 800px;
        height: 413px;
      }
    }
  }
</style>
