<template>
  <div>
    <div style="height:30px;height:20px;position:absolute;right:10px">
      <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优质(4.5,5] &nbsp&nbsp</span>
      <el-tag size="mini" style="background:#99CC99;width:30px;height:15px;border:1px solid #99CC99;float:left;margin-top:2px"></el-tag>
        <span style="color:#99CC99;font-weight:400;float:left" >&nbsp&nbsp良好(4,5] &nbsp&nbsp</span>
      <el-tag style="background:#FF9900;width:30px;height:15px;border:1px solid #FF9900;float:left;margin-top:2px"></el-tag>
        <span style="color:#FF9900;font-weight:400;float:left" >&nbsp&nbsp合格(3,4]&nbsp&nbsp</span>
        <el-tag style="background:#996600;width:30px;height:15px;border:1px solid #996600;float:left;margin-top:2px"></el-tag>
        <span style="color:#996600;font-weight:400;float:left" >&nbsp&nbsp较差(2,3]&nbsp&nbsp</span>
        <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极差[1,2]</span>
   </div>
  <div id="powerqualitydd" ref="pwerf" style="width: 100%; "></div>
</div>
</template>
<script>
import yan from "@/assets/commjs/color";
import { dicData } from "@/assets/commjs/dictypeData";
import api from '@/api/pollution/pollution'
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.pwerf.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('powerquality').style.height
        let strsec = str.split('p')
        let height = parseInt(strsec) - 50 +'px'
        this.$refs.pwerf.style.height =  height
        },200)
      } else {
        return;
      }
    },
  },
  data() {
    return {
      echartsheight: undefined,
      deptIndex: "",
      xdata: [],
      ydata: [],
      statisticalType: null,
      formData: {
        deptIndex:JSON.parse(window.sessionStorage.getItem('Info')).deptId ,
        id: "",
        monitorFlag: 2,
        powerFlag: 2,
        reportFlag: 3,
        statisticalType: null,
      },
      classificationData: [],
      time: this.timefamt(),
    };
  },
  created() {
    this.getIndexType()
    this.queryData()
  },
  mounted() {
    setTimeout(()=>{
    let str = document.getElementById('powerquality').style.height
    let strsec = str.split('p')
    let height = parseInt(strsec) - 50 +'px'
     this.$refs.pwerf.style.height =  height
    },200);
    
  },
  methods: {
    queryData() {
      this.formData.searchBeginTime=this.time[0]
      this.formData.searchEndTime=this.time[1]
      api.deptSubstationRelations(this.formData).then((res) => {
        if(res.code=='A0000'){
            //this.tableData = res.data
             var xdata = []
             var ydata = []
             var arr = []
             this.loading = false
             for(var i=0;i<res.data.length;i++){
              
               if(res.data[i].data==3.14159){
                 res.data[i].data=0.2
               var p = {
                 name:res.data[i].name.substr(0,2),
                 value:res.data[i].data
               }
               arr.push(p)
                 ydata.push(res.data[i].data)
               }else{
                 ydata.push(res.data[i].data)
               }
                 xdata.push(res.data[i].name)
               
             }
            //this.dataList = arr
            this.xdata = xdata
            this.ydata = ydata
           }
         this.powerquality()
      });
    },
    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;
    },
     //字典获取数据指标类型
     getIndexType() {
      var code = "Pollution_Statis";
      this.classificationData = dicData(code, [
        "I_Neg",
        "V_Inharm",
        "V_Dev",
        "V_Unbalance",
        "Plt",
        "Freq_Dev",
      ]);
      this.formData.statisticalType = this.classificationData[0];
    },
    powerquality() {
      //debugger
      //var  _this1 = this
      const echarts = require("echarts");
      var myChartes = echarts.init(document.getElementById("powerqualitydd"));
      var option = {
        title: {
          //text: this.title,
          //subtext: "单位(级)",
        },
        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) {
            var tips = "";
            tips += params[0].name + "</br/>";
            for (var i = 0; i < params.length; i++) {
              if (params[i].value == 0.2) {
                tips += params[i].seriesName + ":暂无数据<br/>";
              } else {
                tips += params[i].seriesName + ":" + params[i].value + "%<br/>";
              }
            }
            return tips;
          },
        },
        grid: yan.EchartObject.gridf,
        xAxis: [
          {
            name:yan.EchartObject.area,
            type: "category",
            data: this.xdata,
            splitLine: {
              show: false,
            },
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              textStyle: {
                fontFamily: yan.EchartObject.fontFamily,
                color: "#fff",
                fontSize: yan.EchartObject.xNamefontSize,
              },
              rotate: 0,
            },
            axisLine: {
              show: true,
              lineStyle: {
              color: "#fff",
            },
              symbol: ["none", "arrow"],
            },
          },
        ],
       
        yAxis: {
          name:yan.EchartObject.grade ,
          type: "value",
          min: 0,
          max: 5,
          axisLabel: {
            show: true,

            textStyle: {
              color: "#fff",
              fonSize:yan.EchartObject.xNamefontSize,
            },
            // 这里重新定义就可以
            formatter: function (value, index) {
              var texts = [];
              if (value === 1) {
                texts.push("1级[1,2]");
              } else if (value === 2) {
                texts.push("2级(2,3]");
              } else if (value === 3) {
                texts.push("3级(3,4]");
              } else if (value === 4) {
                texts.push("4级(4,5]");
              } else if (value === 5) {
                texts.push("5级(4,5.5]");
              }
              return texts;
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
              type:yan.EchartObject.type
            },
            symbol: ["none", "arrow"],
          },
        },
        dataZoom: yan.EchartObject.dataZoom,
        series: [
          {
            name: "综合评估",
            barMaxWidth: yan.EchartObject.barMaxWidth,
            type: "bar",
            label: {
              normal: {
                show: false,
                position: "top",
              },
            },
            itemStyle: {
              normal: {
                // 随机显示
                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                // 定制显示（按顺序）
                color: function (params) {
                  if (params.value >= 5 && params.value !== 0.2) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.electricEQuality,
                        },
                      ],
                      false
                    );
                  } else if (4 < params.value && params.value <= 5 && params.value !== 0.2) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.electricGood,
                        },
                      ],
                      false
                    );
                  } else if (3 < params.value && params.value <= 4 && params.value !== 0.2) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.electricQualified,
                        },
                      ],
                      false
                    );
                  } else if (2 < params.value && params.value <= 3 && params.value !== 0.2) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.electricPoor,
                        },
                      ],
                      false
                    );
                  } else if (0 <= params.value && params.value <= 2 && params.value !== 0.2) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.electricRange,
                        },
                      ],
                      false
                    );
                  } else if ((params.value = 0.2)) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#999999",
                        },
                      ],
                      false
                    );
                  }
                },
              },
            },
            markLine: {
              silent: false,
              symbol: "circle",
              data: [
                {
                  name: "",
                  yAxis: 5,
                  lineStyle: {
                    color: yan.ColorObject.electricEQuality,
                  },
                  label: {
                    //position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.electricEQuality,
                    },
                  },
                },
                {
                  name: "",
                  yAxis: 4,
                  lineStyle: {
                    color: yan.ColorObject.electricGood,
                  },
                  label: {
                   // position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.electricGood,
                    },
                  },
                },
                {
                  name: "",
                  yAxis: 3,
                  lineStyle: {
                    color: yan.ColorObject.electricQualified,
                  },
                  label: {
                   // position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.electricQualified,
                    },
                  },
                },
                {
                  name: "",
                  yAxis: 2,
                  lineStyle: {
                    color: yan.ColorObject.electricPoor,
                  },
                  label: {
                   // position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.electricPoor,
                    },
                  },
                },
                {
                  name: "",
                  yAxis: 1,
                  lineStyle: {
                    color: yan.ColorObject.electricRange,
                  },
                  label: {
                   // position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.electricRange,
                    },
                  },
                },
              ],
            },
            data: this.ydata,
          },
        ],
      };
      myChartes.setOption(option)
window.echartsArr.push(myChartes);
      let _this = this;
      _this.$erd.listenTo(_this.$refs.pwerf, (element) => {
        _this.$nextTick(() => {
          myChartes.resize();
        });
      });
      window.onresize = function () {
        myChartes.resize();
      };
    },
  },
};
</script>
