<template>
  <div class="pd10" :style="`height:${vh}`" id="hgl">
              <div style="position:absolute;right:60px;top:18px;font-weight:bold">
                   <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>
    <!-- <el-row :gutter="20" >
              <el-col :span="24">   -->
                <el-button  style="position:absolute;right:10px;z-index:20000"
                    type="text"
                    icon="el-icon-download"
                    title="生成图片"
                    @click="download"
                    >下载</el-button>  
                <div 
                  ref="ko"
                  v-loading="loadingd"
                  id="qualifiedechart"

                  
                ></div>
                <!---->
    <!-- </el-col>
          </el-row> -->
  </div>
</template>
<script>
import yan from "@/assets/commjs/color";
import html2canvas from "html2canvas";
export default {
  data() {
    return {
      tableheight: undefined,
      device: 1,
      loadingd: this.loading,
      titlename:'区域',
      titlenamex:'区域',
      zoom: "",
      vh: null,
      myChartes:''
    };
  },
  props: {
    xdata: {
      type: Array,
      default: undefined,
    },
    ydata1: {
      type: Array,
      default: undefined,
    },
    ydata2: {
      type: Array,
      default: undefined,
    },
    ydata3: {
      type: Array,
      default: undefined,
    },
    ydata4: {
      type: Array,
      default: undefined,
    },
    ydata5: {
      type: Array,
      default: undefined,
    },
    ydata6: {
      type: Array,
      default: undefined,
    },
    ydata7: {
      type: Array,
      default: undefined,
    },
    ydata8: {
      type: Array,
      default: undefined,
    },
    title: {
      type: String,
      default: undefined,
    },
    classvalue: {
      type: String,
      default: undefined,
    },
    loading: {
      type: Boolean,
      default: undefined,
    },
  },
  watch: {
    classvalue: function (a, b) {
      if (a == "Power_Network") {
        this.titlename = "区域";
        this.titlenamex = "区域";
      } else if (a == "Manufacturer") {
        this.titlename = "终端厂家";
        this.titlenamex = "终端\n厂家";
      } else if (a == "Voltage_Level") {
        this.titlename = "电压等级";
        this.titlenamex = "电压\n等级";
      } else if (a == "Load_Type") {
        this.titlename = "干扰源类型";
        this.titlenamex = "干扰\n源类型";
      }
    },
  },
  created() {},
  mounted() {
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    this.resizeEchartd()  
    this.$nextTick(() => {
      this.qualifiedechart();
    });
   
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.vh = window.sessionStorage.getItem("appheight") - 125 + "px";
          if(this.myChartes !==''){
        this.myChartes.resize();
      }
        },
    resizeEchartd(){
      var elementResizeDetectorMaker = require("element-resize-detector")
      if(document.getElementById("hgl")){
     
      var erd = elementResizeDetectorMaker()
        erd.listenTo(document.getElementById("hgl"), (element) => {
        let  domeId=document.getElementById("hgl")
        let  domeId2=document.getElementById("qualifiedechart")
        domeId2.style.width= domeId.offsetWidth - 10 + "px"
       if(this.myChartes !==''){
        this.myChartes.resize();
       }
      
      });
      }
    },
    download() {
    // 转换成canvas
    html2canvas(document.getElementById("hgl"), {
      background:'#fff',
      scale: 1,
    }).then(function (canvas) {
      // 创建a标签，实现下载
      var creatIMg = document.createElement("a");
      creatIMg.download ="稳态合格率图表.png"; // 设置下载的文件名，
      creatIMg.href = canvas.toDataURL(); // 下载url
      creatIMg.click();
      creatIMg.remove(); // 下载之后把创建的元素删除
    });
  },
    qualifiedechart() {
      const echarts = require("echarts");
      let domID1 = document.getElementById("qualifiedechart");
      setTimeout(() => {
        domID1.style.width =
          document.getElementById("hgl").offsetWidth - 30 + "px",
          (domID1.style.height =
            window.sessionStorage.getItem("appheight") - 126 + "px");
      }, 0);
      var myChartes = echarts.init(domID1);
      this.myChartes=myChartes
      myChartes.clear();
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      var option = {
        title: {
          text: this.titlename,
          left: "center",
          textStyle: {
            fontSize: yan.EchartObject.titleNamefontSize1,
            color: echartsColor.WordColor,
          },
         
        },
        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)",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            var tips = "";
            tips += params[0].name + "</br/>";
            for (var i = 0; i < params.length; i++) {
              if (params[i].value == 3.14159) {
                tips += params[i].seriesName + ":暂无数据<br/>";
              } else {
                tips += params[i].seriesName + ":" + params[i].value + "<br/>";
              }
            }
            return tips;
          },
        },
        grid: yan.EchartObject.grid4,
             dataZoom: yan.EchartObject.dataZoom,
        xAxis: [
          {
            name: this.titlenamex,
            nameTextStyle: {
                            color: echartsColor.WordColor,
                            verticalAlign:'top',//标题位置
                            padding: [-5, 0, 0, -10]
                        },
            type: "category",
            data: this.xdata,
            splitLine: {
              show: false,
              lineStyle: {
                color: echartsColor.thread,
              },
            },
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              // formatter: function (value) {
              //             if (value.length > 8) {
              //               return `${value.slice(0, 8)}`;
              //             }
              //             return value;
              //           },
              textStyle: {
                fontFamily: yan.EchartObject.fontFamily,
                color: echartsColor.WordColor,
                fontSize:yan.EchartObject.xNamefontSize,
               

              },

             
            },
            axisLine: {
              show: true,
              symbolOffset:5,//箭头距离x轴末端距离
                        lineStyle: {
                        shadowOffsetX:5,          
                        color: echartsColor.thread,
                        shadowColor:  echartsColor.thread,   //设置阴影的颜色
                        },
              symbol: ["none", "arrow"],
            },
          },
        ],
       // toolbox:yan.EchartObject.toolbox1 ,
        yAxis: [
          {
            name: yan.EchartObject.nuit1,
            nameTextStyle: {
                            color: echartsColor.WordColor,
                            verticalAlign:'top',//标题位置
                            padding: [-22, 0, 10, 0]
                        },
            type: "value",
            min: 0,
            max: 100,
            splitLine: {
              show: true,
            },
            axisLine: {
              show: true,
              symbol: ["none", "arrow"],
              symbolOffset:25,//箭头距离x轴末端距离
                        lineStyle: {
                        shadowOffsetY:-25,          
                        color: echartsColor.thread,
                        shadowColor:  echartsColor.thread,   //设置阴影的颜色
                        },
            },
            axisLabel: {
              color: echartsColor.WordColor,
              fontSize:yan.EchartObject.xNamefontSize
            },
            splitArea: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "频率偏差",
            barMaxWidth: yan.EchartObject.barMaxWidth,
            type: "bar",
            label: {
              normal: {
                //show: true,
                position: "top",
              },
            },
            itemStyle: {
              normal: {
                // 随机显示
               

                // 定制显示（按顺序）
                color: function (params) {
                  if (params.value >= 90) {
                    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 !== 3.14159) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.qualifiedRate3,
                        },
                      ],
                      false
                    );
                  } else if (params.value == 3.14159) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#cccccc",
                        },
                      ],
                      false
                    );
                  }
                },
              },
            },
            data: this.ydata1,
          },
          {
            name: "闪变",
            barMaxWidth: yan.EchartObject.barMaxWidth,
            type: "bar",
            label: {
              normal: {
                // show: true,
                position: "top",
              },
            },
            itemStyle: {
              normal: {
                // 随机显示
                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                // 定制显示（按顺序）
                color: function (params) {
                  if (params.value >= 90) {
                    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 !== 3.14159) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.qualifiedRate3,
                        },
                      ],
                      false
                    );
                  } else if (params.value == 3.14159) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#cccccc",
                        },
                      ],
                      false
                    );
                  }
                },
              },
            },
            data: this.ydata2,
          },
          {
            name: "三相电压不平衡",
            barMaxWidth: yan.EchartObject.barMaxWidth,
            type: "bar",
            label: {
              normal: {
                // show: true,
                position: "top",
              },
            },
            itemStyle: {
              normal: {
                // 随机显示
                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                // 定制显示（按顺序）
                color: function (params) {
                  if (params.value >= 90) {
                    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 !== 3.14159) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.qualifiedRate3,
                        },
                      ],
                      false
                    );
                  } else if (params.value == 3.14159) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#cccccc",
                        },
                      ],
                      false
                    );
                  }
                },
              },
            },
            data: this.ydata3,
          },
          {
            name: "谐波电压",
            barMaxWidth: yan.EchartObject.barMaxWidth,
            type: "bar",
            label: {
              normal: {
                //show: true,
                position: "top",
              },
            },
            itemStyle: {
              normal: {
                // 随机显示
                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                // 定制显示（按顺序）
                color: function (params) {
                  if (params.value >= 90) {
                    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 !== 3.14159) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.qualifiedRate3,
                        },
                      ],
                      false
                    );
                  } else if (params.value == 3.14159) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#cccccc",
                        },
                      ],
                      false
                    );
                  }
                },
              },
            },
            data: this.ydata4,
          },
          {
            name: "电压偏差",
            barMaxWidth: yan.EchartObject.barMaxWidth,
            type: "bar",
            label: {
              normal: {
                //show: true,
                position: "top",
              },
            },
            itemStyle: {
              normal: {
                // 随机显示
                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                // 定制显示（按顺序）
                color: function (params) {
                  if (params.value >= 90) {
                    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 !== 3.14159) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.qualifiedRate3,
                        },
                      ],
                      false
                    );
                  } else if (params.value == 3.14159) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#cccccc",
                        },
                      ],
                      false
                    );
                  }
                },
              },
            },
            data: this.ydata5,
          },
          {
            name: "谐波电流",
            barMaxWidth: yan.EchartObject.barMaxWidth,
            type: "bar",
            label: {
              normal: {
                // show: true,
                position: "top",
              },
            },
            itemStyle: {
              normal: {
                // 随机显示
                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                // 定制显示（按顺序）
                color: function (params) {
                  if (params.value >= 90) {
                    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 !== 3.14159) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.qualifiedRate3,
                        },
                      ],
                      false
                    );
                  } else if (params.value == 3.14159) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#cccccc",
                        },
                      ],
                      false
                    );
                  }
                },
              },
            },
            data: this.ydata6,
          },
          {
            name: "负序电流",
            barMaxWidth: yan.EchartObject.barMaxWidth,
            type: "bar",
            label: {
              normal: {
                // show: true,
                position: "top",
              },
            },
            itemStyle: {
              normal: {
                // 随机显示
                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                // 定制显示（按顺序）
                color: function (params) {
                  if (params.value >= 90) {
                    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 !== 3.14159) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.qualifiedRate3,
                        },
                      ],
                      false
                    );
                  } else if (params.value == 3.14159) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#cccccc",
                        },
                      ],
                      false
                    );
                  }
                },
              },
            },
            data: this.ydata7,
          },
          {
            name: "间谐波电压含有率",
            barMaxWidth: yan.EchartObject.barMaxWidth,
            type: "bar",
            label: {
              normal: {
                //show: true,
                position: "top",
              },
            },
            itemStyle: {
              normal: {
                // 随机显示
                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                // 定制显示（按顺序）
                color: function (params) {
                  if (params.value >= 90) {
                    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 !== 3.14159) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.qualifiedRate3,
                        },
                      ],
                      false
                    );
                  } else if (params.value == 3.14159) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#cccccc",
                        },
                      ],
                      false
                    );
                  }
                },
              },
            },
            markLine: {
              silent: false,
              symbol: "circle",
              data: [
                {
                  name: "",
                  yAxis: 100,
                  lineStyle: {
                    color: yan.ColorObject.qualifiedRate1,
                  },
                  label: {
                    // position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.qualifiedRate1,
                    },
                  },
                },
                {
                  name: "",
                  yAxis: 90,
                  lineStyle: {
                    color: yan.ColorObject.qualifiedRate2,
                  },
                  label: {
                    // position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.qualifiedRate2,
                    },
                  },
                },
                {
                  name: "",
                  yAxis: 60,
                  lineStyle: {
                    color: yan.ColorObject.qualifiedRate3,
                  },
                  label: {
                    // position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.qualifiedRate3,
                    },
                  },
                },
              ],
            },
            data: this.ydata8,
          },
        ],
      };
      myChartes.setOption(option)
window.echartsArr.push(myChartes);
      this.loadingd = false;
      let _this = this;
      _this.$erd.listenTo(_this.$refs.ko, (element) => {
        _this.$nextTick(() => {
          domID1.style.width =document.getElementById("hgl").offsetWidth - 30 + "px",
          myChartes.resize();
        });
      });
      setTimeout(() => {
        myChartes.resize();
      }, 100);
      window.onresize = function () {
        myChartes.resize();
      };
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../styles/comStyle.less");
</style>