<template>
  <div>
    <div style="height:30px;height:20px;position:absolute;right:10px">
      <el-tag  style="background:#CC0000;width:30px;height:15px;border:1px solid #CC0000;float:left;margin-top:2px"></el-tag>
        <span style="color:#CC0000;font-weight:400;;float:left">&nbsp&nbsp合格率<60% &nbsp&nbsp</span>
      <el-tag size="mini" style="background:#FFCC33;width:30px;height:15px;border:1px solid #FFCC33;float:left;margin-top:2px"></el-tag>
        <span style="color:#FFCC33;font-weight:400;float:left" >&nbsp&nbsp60%≤合格率<90% &nbsp&nbsp</span>
      <el-tag style="background:#339966;width:30px;height:15px;border:1px solid #339966;float:left;margin-top:2px"></el-tag>
        <span style="color:#339966;font-weight:400;float:left" >&nbsp&nbsp合格率≥90%</span>
   </div>
  <div ref="kofghj" id="qualifiedechartko" style="width: 100%;"></div>
  </div>
</template>
<script>
import yan from "@/assets/commjs/color";
import { dicData } from "@/assets/commjs/dictypeData";
import api from '@/api/harmonic/onlineData'
export default {
  props: {
    item: {
      type: Object,
      default: null,
    },
    item2: {
      type: Object,
      default: null,
    },
    height:{
      type:Number,
      default: null,
    },
    height2:{
      type:Number,
      default: null,
    }
  },
  watch: {
    height2(a, b) {
      if (a == 24) {
        this.$refs.kofghj.style.height =  document.getElementById('conmentId').offsetHeight -50 + 'px';

      } else {
        return;
      }
    },
    height(a, b) {
      if (a == 6 || a==8 || a==9 || a==16) {
        setTimeout(()=>{
        let str = document.getElementById('steadyratechart').style.height
        let strsec = str.split('p')
        let height = parseInt(strsec) - 50 +'px'
        this.$refs.kofghj.style.height =  height
        },200)
      } else {
        return;
      }
    },
  },
  data() {
    return {
      tableData: [],
      statisticalType: null,
      classificationData: [],
      time: this.timefamt(),
      xdata: [],
      yData: [],
      yData1: [],
      formData1:{
        id:'333ff66a28acd0c68834f5a0d4ca68bd',
        periodBeginTime: "",
        periodEndTime: "",
        searchBeginTime:'',
        searchEndTime:''
      }
     
    };
  },
  created() {
    this.getIndexType();
    this.queryData();
  },
  mounted() {
    setTimeout(()=>{
    let str = document.getElementById('steadyratechart').style.height
    let strsec = str.split('p')
    let height = parseInt(strsec) - 50 +'px'
     this.$refs.kofghj.style.height =  height
    },200)
  },
  methods: {
    queryData() {
      this.formData1.searchBeginTime = this.time[0]
      this.formData1.searchEndTime = this.time[1]
      api.getSteadyData(this.formData1).then((res) => {
         if(res.code =='A0000'){
              var data =  res.data.steadyInfoList
              var data1 =  res.data.steadyInfoData
              var arr=[],arr2=[]
               for(var i=0;i<data.length;i++){
                   if(data[i]==3.1415){
                       data[i]=1
                    arr.push(data[i])
                   }else if(data[i]==3.14159){
                       data[i]=1
                    arr.push(data[i])
                   }else if(data[i] !==3.14159){
                    arr.push(data[i])
                   }
                }
               this.yData = arr
               for(var i=0;i<data1.length;i++){
                   if(data1[i]==3.1415){
                       data1[i]=1
                    arr2.push(data1[i])
                   }else if(data1[i]==3.14159){
                       data1[i]=1
                    arr2.push(data1[i])
                   }else if(data1[i] !==3.14159){
                    arr2.push(data1[i])
                   }
                }
                this.yData1 = arr2
        this.qualifiedechart();
         }
      });
    },
    getIndexType() {
      var code = "Indicator_Type";
      this.classificationData = dicData(code, [
        "PLPC",
        "DYPC",
        "SXDYBPHD",
        "CSSB",
        "FXDL",
        "JXBDY",
      ]);
      this.statisticalType = this.classificationData[0];
    },
    timefamt() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      month = month > 9 ? month : "0" + month;
      day = day < 10 ? "0" + day : day;
      var arr = [];
      var time1 = year + "-" + month + "-01";
      arr.push(time1);
      var time2 = year + "-" + month + "-" + day ;
      arr.push(time2);
      return arr;
    },
    qualifiedechart() {
      const echarts = require("echarts");
      var myChartes = echarts.init(document.getElementById("qualifiedechartko"));
      var xData=['频率偏差', '闪变', '三相电压不平衡', '谐波电压', '谐波电流', '电压偏差', '负序电流', '间谐波电压含有率']
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      myChartes.clear();
      var option = {
                        title: {
                        //text: "稳态指标合格率",
                        left: "center",
                        top:"0px",
                        // subtext:this.thname , //副标题
                        textStyle: {
                            color:  '#fff',
                            fontSize:  yan.EchartObject.titleNamefontSize,
                        },
                        subtextStyle: {
                            name:this.thname,
                            color: '#000',
                            fontSize:  yan.EchartObject.xNamefontSize,
                        },
                    },
                        tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: "shadow",
                            label: {
                            color: "#fff",
                            fontSize: 16,
                            },
                        },
                        textStyle: {
                            color: "#fff",
                            fontStyle: "normal",
                            opacity: 0.35,
                            fontSize: 14,
                        },
                        backgroundColor: "rgba(0,0,0,0.35)",
                        formatter: function(params) {
                            //console.log(params)
                            var msg = "";
                            msg += '指标类型<br/>' ;
                            for (let i in params) {
                                 if(params[i].data==1){
                                    msg +=params[i].name +":暂无数据<br/>"
                                 
                                }else{
                                    msg +=params[i].name +':'+params[i].data+'<br/>'
                                 
                                }
                            
                            }
                            return msg;
                        }
                    },
                    grid:  yan.EchartObject.gridf,
                    dataZoom: yan.EchartObject.dataZoom,
                    xAxis: {
                        name:yan.EchartObject.Indicatortype,
                        nameTextStyle: {
                        color: '#fff',
                        },
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                color:  '#fff',
                                width: 1
                            },
                            symbol:['none', 'arrow']
                        },
                        axisTick: {
                        show: false,
                        },
                        axisLabel: {
                            textStyle: {
                            fontFamily: 'dinproRegular',
                            color:  '#fff'
                        },
                        rotate: yan.rotate(this.yData.length), 
                        },
                        data: xData,
                    },
                    //   toolbox: {
                    //         feature: {
                    //        // restore: {},
                    //         saveAsImage: {}
                    //         }
                    //     },
                    yAxis: [
                        {
                        name: yan.EchartObject.nuit1,
                        type: "value",
                        min:0,
                        max:100,
                        nameTextStyle: {
                                color: '#fff',
                                fontSize:yan.EchartObject.NamefontSize ,
                               // left:'0%'
                            
                        },
                        position:'left',
                        splitLine: {
                        show:false
                        },
                        axisLine: {
                            lineStyle: {
                                color:  '#fff',
                                width: 1
                            },
                            symbol:['none', 'arrow']
                        },
                        axisLabel: {
                            textStyle: {
                            fontFamily: yan.EchartObject.fontFamily,
                            color:  '#fff'
                        },
                        rotate:0,  
                        },
                       },
                        {
                        position:'left',
                        axisLine: {
                            show:true,
                            lineStyle: {
                                color: '#fff',
                                    
                            },
                             symbol:['none', 'arrow']
                        },
                        splitLine: { //分割线配置
                            lineStyle: {
                                color: "#fff",
                            }
                        },
                    }],
                
                    series:[
                    {
                            name: this.time,
                            type: 'bar',
                        // stack: '余额',
                            barMaxWidth:yan.EchartObject.barMaxWidth,
                            label: {
                            show: false,
                            position: 'center',
                            distance: 2,
                            color: '#fff',
                            fontWeight: 'bolder',
                            fontSize: yan.EchartObject.NamefontSize,
                            },
                        data:this.yData ,
                          markLine: { 
                               silent:false,  
                               symbol :'circle',     
                                        data: [
                                            {
                                                name:"",
                                                yAxis: 100,
                                                lineStyle:{
                                                    color:yan.ColorObject.qualifiedRate1,   
                                                },
                                                 label: {
                                                    color: yan.ColorObject.qualifiedRate1,  // 文字颜色
                                                   // position: "middle",
                                                    padding: [2, 2, 5, 0], // 可用padding调整图片内文字距离
                                                    show: true,
                                                    formatter:function (params){
                                                    // alert(params)
                                                    var tips = "";
                                                        tips+=''
                                                      
                                                    return tips
                                                    }
                                                 }
                                            },
                                            {
                                                name:"",
                                                yAxis: 90,
                                                lineStyle:{
                                                    color:yan.ColorObject.qualifiedRate2,   
                                                },
                                                label: {
                                                    //position: "middle",
                                                    color: yan.ColorObject.qualifiedRate2,  // 文字颜色
                                                    padding: [2, 2, 5, 0], // 可用padding调整图片内文字距离
                                                    show: true,
                                                    formatter:function (params){
                                                    // alert(params)
                                                    var tips = "";
                                                        tips+=''
                                                      
                                                    return tips
                                                    }
                                                 }
                                            },
                                        {
                                                name:"",
                                                yAxis: 60,
                                                lineStyle:{
                                                    color:yan.ColorObject.qualifiedRate3,   
                                                },
                                                label: {
                                                   // position: "middle",
                                                    color: yan.ColorObject.qualifiedRate3,  // 文字颜色
                                                    padding: [2, 2, 5, 0], // 可用padding调整图片内文字距离
                                                    show: true,
                                                    formatter:function (params){
                                                    // alert(params)
                                                    var tips = "";
                                                        tips+=''
                                                      
                                                    return tips
                                                    }
                                                 }
                                            },
                                    
                                    
                                        ]
                                        },
                        itemStyle: {
                                normal: {
                                color:function(params){
                                        if(params.value >=90 && params.value<=100){
                                            return   new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                                {
                                                offset: 1,
                                                color: yan.ColorObject.qualifiedRate1 
                                            }
                                            ],false)
                                        }else if(params.value >=60 && params.value<=90 ){
                                            return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                                {
                                                offset: 1,
                                                color: yan.ColorObject.qualifiedRate2 
                                            }
                                            ],false)
                                        }else if(params.value <=60 && params.value >=10){
                                            return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                                {
                                                offset: 1,
                                                color: yan.ColorObject.qualifiedRate3
                                            }
                                            ],false)
                                        }else if(params.value <=5 && params.value >0){
                                             return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                                {
                                                offset: 1,
                                                color: '#ccc'
                                            }
                                            ],false)
                                        }else if(params.value <=8 && params.value >5){
                                             return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                                {
                                                offset: 1,
                                                color: '#ccc'
                                            }
                                            ],false)
                                        }
                                    
                                    } 

                                },
                        },
                        }
                    ]
                    }; 
      myChartes.setOption(option)
window.echartsArr.push(myChartes);
      setTimeout(() => {
        this.$nextTick(() => {
          myChartes.resize();
        });
      }, 0);
      let _this = this;
      _this.$erd.listenTo(_this.$refs.kofghj, (element) => {
        _this.$nextTick(() => {
          myChartes.resize();
        });
      });
      window.onresize = function () {
        myChartes.resize();
      };
    },
  },
};
</script>
