<template>
  <div class="pd10" :style="`height:${vh}`" id="zdzt">
    <!-- <el-row :gutter="20">
                                       <span style="color:#ccc;font-size:16px;font-weight: bold;margin-top:0.5%;margin-left:4%;position:absolute;">左柱</span>
                                       <el-col :span="2"><p style="width:30px;height:15px;background:#0099CC;line-height:6px;border-radius:4px;margin-left:90%"></p></el-col>
                                       <el-col :span="2"><span style="color:#0099CC;margin-top:0.5%;margin-right:0%;position:absolute;">投运</span></el-col>
                                       <el-col :span="2"><p style="width:30px;height:15px;background:#996600;line-height:6px;border-radius:4px;margin-left:100%"></p></el-col>
                                       <el-col :span="3" ><span style="color:#996600;margin-top:0.5%;position:absolute;margin-left:0.8%">热备用</span></el-col>
                                       <el-col :span="3"><p style="width:30px;height:15px;background:#ccc;line-height:6px;border-radius:4px;margin-left:92%"></p></el-col>
                                       <el-col :span="2"> <span style="color:#ccc;margin-top:0.5%;position:absolute;">停运</span></el-col>
                                    </el-row>    -->
            <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-button  style="position:absolute;right:10px;z-index:20000"
                    type="text"
                    icon="el-icon-download"
                    title="生成图片"
                    @click="download"
                    >下载</el-button> 
    <div
      ref="df"
      v-loading="loadingd"
      id="terminalonlinerateechart"

      
    ></div>
    <!---->
  </div>
</template>
<script>
import yan from "@/assets/commjs/color";
export default {
  data() {
    return {
      tableheight: undefined,
      device: 1,
      title: "区域",
      titlename: '区域',
      titlenamex:'区域',
      loadingd: this.loading,
      zoom: "",
      vh: null,
      myChartes:''
    };
  },
  props: {
    timeValue: {
      type: String,
      default: undefined,
    },
    timehuanbiValue: {
      type: String,
      default: undefined,
    },
    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,
    },
    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.terminalonlinerateechart();
    });
  
    },
    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("zdzt")){
     
      var erd = elementResizeDetectorMaker()
        erd.listenTo(document.getElementById("zdzt"), (element) => {
        let  domeId=document.getElementById("zdzt")
        let  domeId2=document.getElementById("terminalonlinerateechart")
        domeId2.style.width= domeId.offsetWidth - 10 + "px"
       if(this.myChartes !==''){
        this.myChartes.resize();
       }
      
      });
      }
    },
    download() {
    // 转换成canvas
    html2canvas(document.getElementById("zdzt"), {
      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(); // 下载之后把创建的元素删除
    });
  },
    terminalonlinerateechart() {
      const echarts = require("echarts");
      let domID1 = document.getElementById("terminalonlinerateechart");
      setTimeout(() => {
        (domID1.style.width =
        document.getElementById("zdzt").offsetWidth -10+'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 = {
        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 +=
              "<span style:font-weight: bold;>" +
              params[0].name +
              "</span></br/>";
            tips += params[0].seriesName + ":" + params[0].value + "<br/>";
            tips += params[1].seriesName + ":" + params[1].value + "<br/>";
            tips += params[2].seriesName + ":" + params[2].value + "<br/>";
            if (params[3].value == 0.5) {
              tips += params[3].seriesName + ":暂无数据<br/>";
            } else {
              tips += params[3].seriesName + ":" + params[3].value + "<br/>";
            }

            return tips;
          },
        },
        grid: yan.EchartObject.grid78,
        legend: {
          data: ["投运", "热备用", "停运"],
          left: yan.EchartObject.lengd1,
          top: "0px",
          textStyle: {
            color: "#666666",
          },
          itemWidth: 30,
          itemHeight: 15,
          itemGap: 25,
        },
        xAxis: {
          name:this.titlenamex,
          // nameTextStyle: {
          //                   color: echartsColor.WordColor,
          //                   verticalAlign:'top',//标题位置
          //                   padding: [-5, 0, 0, -10]
          //               },
          type: "category",
          // data: ['江苏省', '江西省', '安徽省', '湖北省', '浙江省', '湖南省', '广东省', '福建省', '海南省', '四川省', '青海省', '河北省'],
          data: this.xdata,
          axisLine: {
            // symbol: ["none", "arrow"],
              symbolOffset:5,//箭头距离x轴末端距离
                        lineStyle: {
                        // shadowOffsetX:5,          
                        color: echartsColor.thread,
                        // shadowColor:  echartsColor.thread,   //设置阴影的颜色
                        },
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: echartsColor.WordColor
            },
          },
        },
        // toolbox:yan.EchartObject.toolbox3,
        yAxis: [
          {
            type: "value",
            name: yan.EchartObject.dwt,
            nameTextStyle: {
                            color: echartsColor.WordColor,
                            verticalAlign:'top',//标题位置
                            padding: [-22, 0, 10, 0]
                        },
            // max:50,
            // interval: 2,
            splitLine: {
              show: true,
            },
            axisLabel: {
              textStyle: {
                color: echartsColor.WordColor
              },
            },
            axisLine: {
              show: true,
              symbol: ["none", "arrow"],
              symbolOffset:25,//箭头距离x轴末端距离
                        lineStyle: {
                        shadowOffsetY:-25,          
                        color: echartsColor.thread,
                        shadowColor:  echartsColor.thread,   //设置阴影的颜色
                        },
            },
          },
          {
            type: "value",
            name: yan.EchartObject.nuit1,
            nameTextStyle: {
                            color: echartsColor.WordColor,
                            verticalAlign:'top',//标题位置
                            padding: [-22, 0, 10, 0]
                        },
            max: 100,
           
            nameTextStyle: {
              color: echartsColor.WordColor,
            },
            position: "right",
            offset: 0,
            axisLine: {
              show: true,
             // symbol: ["none", "arrow"],
              symbolOffset:20,//箭头距离x轴末端距离
                        lineStyle: {
                        shadowOffsetY:-20,          
                        color: echartsColor.thread,
                        shadowColor:  echartsColor.thread,   //设置阴影的颜色
                        },
            },
            splitLine: {
              show: true,
            },
            axisLabel: {
              show: true,
              formatter: "{value} ", //右侧Y轴文字显示
              textStyle: {
                color: echartsColor.WordColor,
              },
            },
          },
        ],
        dataZoom:yan.EchartObject.dataZoom,
        series: [
          {
            name: "投运",
            type: "bar",
            stack: "false",
            barMaxWidth: yan.EchartObject.barMaxWidth,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#0099CC",
                  },
                  {
                    offset: 1,
                    color: "#0099CC",
                  },
                ]),
                barBorderRadius: 0,
              },
            },
            // data: [0, 1, 8, 5, 7, 6,1, 4, 7, 7,3,2]
            data: this.ydata1,
          },
          {
            name: "热备用",
            type: "bar",
            stack: "false",
            barMaxWidth: yan.EchartObject.barMaxWidth,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#996600",
                  },
                  {
                    offset: 1,
                    color: "#996600",
                  },
                ]),
                barBorderRadius: 0,
              },
            },
            //data: [2, 1, 8, 5, 7, 6, 1, 4, 7, 7,3,2]
            data: this.ydata2,
          },
          {
            name: "停运",
            type: "bar",
            stack: "false",
            barMaxWidth: yan.EchartObject.barMaxWidth,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#CCCCCC",
                  },
                  {
                    offset: 1,
                    color: "#CCCCCC",
                  },
                ]),
                barBorderRadius: 0,
              },
            },
            // data: [2, 5, 8, 5, 7, 6, 2, 4, 7, 7,3,2]
            data: this.ydata3,
          },
          {
            name: "在线率",
            type: "bar",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: false, //平滑曲线显示
            barMaxWidth: yan.EchartObject.barMaxWidth,
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 8, //标记的大小
            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.Integrity1,
                        },
                      ],
                      false
                    );
                  } else if (params.value >= 60 && params.value <= 90) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.Integrity2,
                        },
                      ],
                      false
                    );
                  } else if (params.value > 0.5 && params.value <= 60) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.Integrity3,
                        },
                      ],
                      false
                    );
                  } else if (params.value > 0 && params.value <= 0.5) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#ccc",
                        },
                      ],
                      false
                    );
                  }
                },
              },
            },
            lineStyle: {
              color: "#ffa43a",
            },
            markLine: {
              silent: false,
              symbol: "circle",
              data: [
                {
                  name: "",
                  yAxis: 100,
                  lineStyle: {
                    color: yan.ColorObject.Integrity1,
                  },
                  label: {
                    //position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.Integrity1,
                    },
                  },
                },
                {
                  name: "",
                  yAxis: 90,
                  lineStyle: {
                    color: yan.ColorObject.Integrity2,
                  },
                  label: {
                    //position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.Integrity2,
                    },
                  },
                },
                {
                  name: "",
                  yAxis: 60,
                  lineStyle: {
                    color: yan.ColorObject.Integrity3,
                  },
                  label: {
                    //position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.Integrity3,
                    },
                  },
                },
              ],
            },

            //data: [22.6, 75.9, 39.0, 66.4, 28.7, 90.7, 95.6, 82.2, 78.7, 58.8, 86.0, 72.3]
            data: this.ydata4,
          },
        ],
      };
      myChartes.clear();
      myChartes.setOption(option)
window.echartsArr.push(myChartes);
      
      let _this = this;
      _this.$erd.listenTo(_this.$refs.df, (element) => {
        _this.$nextTick(() => {
          domID1.style.width = document.getElementById("zdzt").offsetWidth -10+'px'
          myChartes.resize();
        });
      });
      window.onresize = function () {
        myChartes.resize();
      };

 
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../styles/comStyle.less");
</style>