<template>
  <div v-loading="loading" style="position: relative">
    <div id="boxsj">
      <div id="shushi" :style="`height:${vh};overflow: hidden;`">
        <div class="bx" id="wave"></div>
      </div>
    </div>
    <el-button
      style="position: absolute; right: 10px; top: 0px; z-index: 20000"
      type="text"
      icon="el-icon-download"
      title="生成图片"
      @click="download"
    >
      下载
    </el-button>
  </div>
</template>
<script>
import { getMonitorEventAnalyseWave } from "@/api/monitoringpointStatistics/echart";
import html2canvas from "html2canvas";

import $ from "jquery";
export default {
  props: {
    value: {
      type: Number,
      default: 2,
    },
    flag: {
      type: [String, Number, Boolean],
      default: 3,
    },
    DColor: {
      type: Boolean,
      default: false,
    },
    boxoList: {
      type: [Object, Array],
    },
    wp: {
      type: [Object, Array],
    },
  },
  data() {
    return {
      loading: true,
      tabvalue: this.value,
      url: require("@/assets/img/point.png"),
      valA: 0,
      valB: 0,
      isOpen: false,
      time: "",
      type: "",
      severity: "",
      iphasic: "",
      eventValue: "",
      persistTime: "",
      lineName: "",
      subName: "",
      waveDatas: [],
      ptpass: "",
      waveHeight: undefined,
      rmsHeight: undefined,
      $wave: undefined,
      $rms: undefined,
      color: "#006565",
      charts: {},
      arrpoints: [],
      titles: "",
      vh: null,
      vw: null,
      zoom: "",
    };
  },
  created() {},
  watch: {
    value: function (a, b) {
      if (a == 2) {
        // $("#wave1").remove();
        this.initWaves();
      } else {
        $("#wave1").remove();
        this.initWaves();
      }
    },
  },
  mounted() {
    this.setHeight();
    window.addEventListener("resize", this.setHeight);

    this.$wave = $("#wave").eq(0);
    this.$nextTick(() => {
      this.query();
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.setHeight);
  },
  methods: {
    setHeight() {
      this.zoom = 1 / document.body.style.zoom;
      if (this.flag == 1) {
        this.vh = (window.sessionStorage.getItem("appheight") - 200) / 2 + "px";
      } else if (this.flag == 2) {
        this.vh = (window.sessionStorage.getItem("appheight") - 100) / 2 + "px";
      } else {
        this.vh = '37vh';
      }
      this.vw = '100%';
    },
    download() {
      // 转换成canvas
      html2canvas(document.getElementById("boxsj"), {
        scale: 2,
      }).then(function (canvas) {
        // 创建a标签，实现下载
        var creatIMg = document.createElement("a");
        creatIMg.download = "瞬间波形.png"; // 设置下载的文件名，
        creatIMg.href = canvas.toDataURL(); // 下载url
        creatIMg.click();
        creatIMg.remove(); // 下载之后把创建的元素删除
      });
    },
    query() {
      this.loading = true;
      this.initWaves();
    },
    //波形总体数据构造函数
    waveData(instantF, instantS, shunshiF, shunshiS, title, unit) {
      /*瞬时一次值最大最小值*/
      this.instantF = instantF;
      /*瞬时二次值最大最小值*/
      this.instantS = instantS;
      /*瞬时值一次值3相详细数据*/
      this.shunshiF = shunshiF;
      /*瞬时值二次值3相详细数据*/
      this.shunshiS = shunshiS;
      /*三相名称*/
      this.title = title;
      /*电压还是电流*/
      this.unit = unit;
    },
    //根据后台查询的数据，清洗数据
    initWaves() {
      if (null != this.wp) {
        if (this.boxoList.systemType == "pms") {
          this.titles =
            "变电站名称：" +
            this.boxoList.powerStationName +
            " 监测点名称：" +
            this.boxoList.measurementPointName +
            " 发生时刻：" +
            this.boxoList.startTime +
            " 暂降(骤升)幅值：" +
            (this.boxoList.featureAmplitude * 100).toFixed(0) +
            "% 持续时间：" +
            this.boxoList.duration +
            "s";
        } else if (this.boxoList.systemType == "ZL") {
          this.titles =
            // "变电站名称：" +
            // this.boxoList.equipmentName +
            " 监测点名称：" +
            this.boxoList.equipmentName +
            " 发生时刻：" +
            this.boxoList.startTime +
            " 暂降(骤升)幅值：" +
            this.boxoList.evtParamVVaDepth +
            " 持续时间：" +
            this.boxoList.evtParamTm +
            "s";
        } else {
          this.titles =
            "变电站名称：" +
            this.boxoList.subName +
            " 监测点名称：" +
            this.boxoList.lineName +
            " 发生时刻：" +
            this.boxoList.startTime +
            " 暂降(骤升)幅值：" +
            (this.boxoList.featureAmplitude * 100).toFixed(0) +
            "% 持续时间：" +
            this.boxoList.duration +
            "s";
        }

        //首先根据标题的长度，计算出需要绘制几份图（常见的有1张或2张，后期如果出现双路电压电流，便是4张波形图），考虑到波形的相数，实际情况更复杂些
        //相的数量
        this.iphasic = this.wp.iphasic;
        if (this.iphasic === 0) {
          this.iphasic = 1;
        }
        var picCounts = (this.wp.waveTitle.length - 1) / this.iphasic;
        this.waveDatas = [];
        //循环筛选需求的数据
        for (var i = 0; i < picCounts; i++) {
          this.waveDatas.push(this.fliteWaveData(this.wp, i));
        }
        this.time = this.wp.time;
        this.type = this.wp.waveType;
        this.severity = this.wp.yzd;
        //严重度为负，事件为暂升事件
        if (this.severity < 0) {
          this.severity = "/";
          this.type = "/";
        }
        this.initWave(
          this.waveDatas,
          this.time,
          this.type,
          this.severity,
          this.isOpen
        );
      } else {
        this.initWave(null, null, null, null, null);
      }
    },
    //获取横向一个波形的全部数据，包括瞬时波形的一次、二次值，如果是电压的话，还需要计算出对应的最大最小值
    fliteWaveData(wp, step) {
      var shunData = wp.listWaveData;
      var pt = Number(wp.pt) / 1000;
      var ct = Number(wp.ct);
      var titleList = wp.waveTitle;
      //首先判断当前绘制的是电压还是电流
      var xishu = pt; //默认电压，二次值转一次值乘以pt
      //三相名称
      var aTitle = "",
        bTitle = "",
        cTitle = "",
        unit = "电压";
      //每个波形对应的最大最小值
      var ifmax, ifmin, ismax, ismin;

      var shunshiFA = [],
        shunshiFB = [],
        shunshiFC = [],
        shunshiSA = [],
        shunshiSB = [],
        shunshiSC = [];
      //给瞬时赋个初始值
      if (shunData.length > 0) {
        if (titleList[this.iphasic * step + 1].substring(0, 1) !== "U") {
          xishu = ct;
          unit = "电流";
        }
        for (var i = 1; i <= this.iphasic; i++) {
          switch (i) {
            case 1:
              aTitle = titleList[this.iphasic * step + i].substring(1);
              break;
            case 2:
              bTitle = titleList[this.iphasic * step + i].substring(1);
              break;
            case 3:
              cTitle = titleList[this.iphasic * step + i].substring(1);
              break;
          }
        }
        if (shunData[0][this.iphasic * step + 1] !== undefined) {
          ifmax = shunData[0][this.iphasic * step + 1] * xishu;
          ifmin = shunData[0][this.iphasic * step + 1] * xishu;
          ismax = shunData[0][this.iphasic * step + 1];
          ismin = shunData[0][this.iphasic * step + 1];
        }

        //瞬时值--同时还需要获取出瞬时值的一次、二次的最大最小值
        for (var shun = 0; shun < shunData.length; shun++) {
          if (shunData[shun][this.iphasic * step + 1] === undefined) {
            break;
          }
          //根据波形数据相的数量来筛选数据
          switch (this.iphasic) {
            case 1:
              var shunFirstA = shunData[shun][this.iphasic * step + 1] * xishu;
              shunshiFA.push([shunData[shun][0], shunFirstA]);
              ifmax = ifmax > shunFirstA ? ifmax : shunFirstA;
              ifmin = ifmin < shunFirstA ? ifmin : shunFirstA;

              var shunSecondA = shunData[shun][this.iphasic * step + 1];
              shunshiSA.push([shunData[shun][0], shunSecondA]);
              ismax = ismax > shunSecondA ? ismax : shunSecondA;
              ismin = ismin < shunSecondA ? ismin : shunSecondA;
              break;
            case 2:
              var shunFirstA = shunData[shun][this.iphasic * step + 1] * xishu;
              var shunFirstB = shunData[shun][this.iphasic * step + 2] * xishu;
              shunshiFA.push([shunData[shun][0], shunFirstA]);
              shunshiFB.push([shunData[shun][0], shunFirstB]);
              ifmax = this.getMaxTwo(ifmax, shunFirstA, shunFirstB);
              ifmin = this.getMinOpen(ifmin, shunFirstA, shunFirstB);

              var shunSecondA = shunData[shun][this.iphasic * step + 1];
              var shunSecondB = shunData[shun][this.iphasic * step + 2];
              shunshiSA.push([shunData[shun][0], shunSecondA]);
              shunshiSB.push([shunData[shun][0], shunSecondB]);
              ismax = this.getMaxTwo(ismax, shunSecondA, shunSecondB);
              ismin = this.getMinOpen(ismin, shunSecondA, shunSecondB);
              break;
            case 3:
              var shunFirstA = shunData[shun][this.iphasic * step + 1] * xishu;
              var shunFirstB = shunData[shun][this.iphasic * step + 2] * xishu;
              var shunFirstC = shunData[shun][this.iphasic * step + 3] * xishu;
              shunshiFA.push([shunData[shun][0], shunFirstA]);
              shunshiFB.push([shunData[shun][0], shunFirstB]);
              shunshiFC.push([shunData[shun][0], shunFirstC]);
              ifmax = this.getMax(ifmax, shunFirstA, shunFirstB, shunFirstC);
              //如果接线方式是V
              if (this.isOpen) {
                ifmin = this.getMinOpen(ifmin, shunFirstA, shunFirstC);
              } else {
                ifmin = this.getMin(ifmin, shunFirstA, shunFirstB, shunFirstC);
              }

              var shunSecondA = shunData[shun][this.iphasic * step + 1];
              var shunSecondB = shunData[shun][this.iphasic * step + 2];
              var shunSecondC = shunData[shun][this.iphasic * step + 3];
              shunshiSA.push([shunData[shun][0], shunSecondA]);
              shunshiSB.push([shunData[shun][0], shunSecondB]);
              shunshiSC.push([shunData[shun][0], shunSecondC]);
              ismax = this.getMax(ismax, shunSecondA, shunSecondB, shunSecondC);
              //如果接线方式是V
              if (this.isOpen) {
                ismin = this.getMinOpen(ismin, shunSecondA, shunSecondC);
              } else {
                ismin = this.getMin(
                  ismin,
                  shunSecondA,
                  shunSecondB,
                  shunSecondC
                );
              }
              break;
          }
        }
      }
      //瞬时一次值最大最小值
      var instantFAn = {};
      var instantSAn = {};
      //var color;

      var instantF = {};
      var instantS = {};
      var shunshiF = {};
      var shunshiS = {};
      var title = {};

      //三相名称
      title.aTitle = aTitle;
      title.bTitle = bTitle;
      title.cTitle = cTitle;

      //电流还是电压
      title.unit = unit;

      //每个波形对应的三相数据
      shunshiFA = shunshiFA.slice(0);
      shunshiFB = shunshiFB.slice(0);
      shunshiFC = shunshiFC.slice(0);
      shunshiSA = shunshiSA.slice(0);
      shunshiSB = shunshiSB.slice(0);
      shunshiSC = shunshiSC.slice(0);

      shunshiF.shunshiFA = shunshiFA;
      shunshiF.shunshiFB = shunshiFB;
      shunshiF.shunshiFC = shunshiFC;

      shunshiS.shunshiSA = shunshiSA;
      shunshiS.shunshiSB = shunshiSB;
      shunshiS.shunshiSC = shunshiSC;

      //赋值对应的最大最小值
      instantF.max = ifmax;
      instantF.min = ifmin;
      instantS.max = ismax;
      instantS.min = ismin;
      if (step === 0) {
        instantFAn.max = ifmax;
        instantFAn.min = ifmin;
        instantSAn.max = ismax;
        instantSAn.min = ismin;
      }
      return new this.waveData(
        instantF,
        instantS,
        shunshiF,
        shunshiS,
        title,
        unit
      );
    },
    //开始画图
    initWave(waveDatas, time, type, severity, isOpen) {
      //清除之前增加的div
      // $("#wave ~ .bx1").remove();
      $("div.bx1").remove();
      //设置暂降触发点的位置 一次值与二次值Y轴不同（不是计算出来的）
      // var height = $(window).height() - 90;
      var picHeight;
      var show = true;
      if (isOpen) {
        show = false;
      }
      //var v = $("#interval").val();
      var isvisible = false;
      var cu = [],
        title,
        unit,
        max,
        min;
      var a = "",
        b = "",
        c = "";
      var adata = [],
        bdata = [],
        cdata = [];
      picHeight = this.vh;
      this.$wave.css("height", picHeight);
      this.$wave.css("width", this.vw);
      var colors = [];
      if (null == waveDatas) {
        cu = [];
        title = "该事件暂无波形图";
      } else if (waveDatas.length > 0) {
        title = this.titles;

        if (Number(this.eventValue) <= 90) {
          isvisible = true;
        }
        switch (this.iphasic) {
          case 1:
            a = waveDatas[0].title.aTitle;
            if (this.value === 1) {
              cu = [[0, waveDatas[0].instantF.min]];
              max = waveDatas[0].instantF.max;
              min = waveDatas[0].instantF.min;
              adata = waveDatas[0].shunshiF.shunshiFA;
            } else {
              cu = [[0, waveDatas[0].instantS.min]];
              max = waveDatas[0].instantS.max;
              min = waveDatas[0].instantS.min;
              adata = waveDatas[0].shunshiS.shunshiSA;
            }

            colors.push("#FFCC00");
            colors.push("#fff");
            colors.push("#fff");
            break;
          case 2:
            a = waveDatas[0].title.aTitle;
            b = waveDatas[0].title.bTitle;
            if (this.value === 1) {
              cu = [[0, waveDatas[0].instantF.min]];
              max = waveDatas[0].instantF.max;
              min = waveDatas[0].instantF.min;
              adata = waveDatas[0].shunshiF.shunshiFA;
              bdata = waveDatas[0].shunshiF.shunshiFB;
            } else {
              cu = [[0, waveDatas[0].instantS.min]];
              max = waveDatas[0].instantS.max;
              min = waveDatas[0].instantS.min;
              adata = waveDatas[0].shunshiS.shunshiSA;
              bdata = waveDatas[0].shunshiS.shunshiSB;
            }
            colors.push("#FFCC00");
            colors.push("#009900");
            colors.push("#fff");
            break;
          case 3:
            a = waveDatas[0].title.aTitle;
            b = waveDatas[0].title.bTitle;
            c = waveDatas[0].title.cTitle;
            if (this.value === 1) {
              cu = [[0, waveDatas[0].instantF.min]];
              max = waveDatas[0].instantF.max;
              min = waveDatas[0].instantF.min;
              adata = waveDatas[0].shunshiF.shunshiFA;
              bdata = waveDatas[0].shunshiF.shunshiFB;
              cdata = waveDatas[0].shunshiF.shunshiFC;
            } else {
              cu = [[0, waveDatas[0].instantS.min]];
              max = waveDatas[0].instantS.max;
              min = waveDatas[0].instantS.min;
              adata = waveDatas[0].shunshiS.shunshiSA;
              bdata = waveDatas[0].shunshiS.shunshiSB;
              cdata = waveDatas[0].shunshiS.shunshiSC;
            }

            colors.push("#FFCC00");
            colors.push("#009900");
            colors.push("#CC0000");
            break;
        }

        if (waveDatas[0].unit === "电压") {
          if (this.value === 1) {
            unit = "kV";
          } else {
            unit = "V";
          }
        } else {
          unit = "A";
        }
        //把剩余的DIV先拼接好
        for (var step = 1; step < waveDatas.length; step++) {
          var waveId = "wave" + step;
          var newDivShunshi = $(` <div style="height:${
            this.vh
          };overflow: hidden;">
                                      <div class='bx1' id='${waveId}'  style="zoom:${
            this.zoom
          };transform:scale(${1 / this.zoom});transform-origin:0 0;">
                                      </div>
                                  </div>`);
          newDivShunshi.insertAfter($("#shushi"));
          //第二个图高度宽度
          $("#" + waveId).css("height", picHeight);
          $("#" + waveId).css("width", this.vw);
        }
      } else {
        cu = [];
        title =
          "变电站名称：" +
          this.subName +
          " 监测点名称：" +
          this.lineName +
          " 发生时刻：" +
          this.time +
          " 暂降(骤升)幅值：" +
          (this.eventValue * 100).toFixed(0) +
          "% 持续时间：" +
          this.persistTime +
          "s";
      }
      //绘制横向第一个波形图
      //绘制瞬时波形图
      const echarts = require("echarts");
      let wave = document.getElementById("wave");
      let _this = this;
      var myChartes = echarts.init(wave);
      let echartsColor = {
        WordColor: "#000",
        thread: "#000000",
        FigureColor: [
          "#07CCCA ",
          "#00BFF5",
          "#FFBF00",
          "#77DA63",
          "#D5FF6B",
          "#Ff6600",
          "#FF9100",
          "#5B6E96",
          "#66FFCC",
          "#B3B3B3",
          "#FF00FF",
          "#CC00FF",
          "#FF9999",
        ],
      };
      // setTimeout(() => {
      //   wave.style.width =
      //     document.getElementById("wave").offsetWidth - 0 + "px";
      //     wave.style.height =
      //     window.sessionStorage.getItem("appheight") - 50 + "px";
      // }, 0);
      var option = {
        tooltip: {
          top: "10px",
          trigger: "axis",
          borderColor: "grey",
          backgroundColor: "#fff",
          style: {
            color: "#000",
            fontSize: "15px",
            padding: 10,
          },
          formatter: function (params) {
            // console.log(params)
            var tips = "";
            tips += "时刻:" + params[0].data[0] + "</br/>";

            for (var i = 0; i < params.length; i++) {
              if (params[i].seriesName != "暂降触发点") {
                tips +=
                  params[i].seriesName +
                  ":" +
                  (params[i].value[1] - 0).toFixed(2) +
                  "<br/>";
              }
            }
            return tips;
          },
          // axisPointer: {
          //   type: "cross",
          //   label: {
          //     color: "#fff",
          //     fontSize: 16,
          //   },
          // },
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            opacity: 0.35,
            fontSize: 14,
          },
          backgroundColor: "rgba(0,0,0,0.35)",
          borderWidth: 0,
        },
        title: {
          left: "center",
          text: "电网侧-电压    " + title,
          textStyle: {
            fontSize: "0.8rem",
            color: _this.DColor ? "#fff" : echartsColor.WordColor,
          },
        },
        legend: {
          left: "70px",
          top: "20",
          verticalAlign: "top",
          enabled: true,
          itemDistance: 5,
          textStyle: {
            fontSize: "0.6rem",
            color: _this.DColor ? "#fff" : echartsColor.WordColor,
            rich: {
              a: {
                verticalAlign: "middle",
              },
            },

            padding: [0, 0, 0, 0], //[上、右、下、左]
          },
        },
        // toolbox: {
        //   show: step != 1 ? true : false,
        //   feature: {
        //     //restore: {},
        //     saveAsImage: {
        //       iconStyle: {
        //         borderColor: _this.DColor ? "#fff" : echartsColor.WordColor,
        //       },
        //     },
        //   },
        // },
        xAxis: {
          type: "value",
          name: "时间\n(ms)",
          boundaryGap: false,
          min: _this.wp.listWaveData[0][0],
          max: _this.wp.listWaveData[_this.wp.listWaveData.length - 1][0] + 1,
          title: {
            text: "ms",
            textStyle: {
              fontSize: "0.6rem",
              color: _this.DColor ? "#fff" : echartsColor.WordColor,
            },
            enabled: true,
            align: "high",
          },
          splitLine: {
            show: false,
          },
          nameTextStyle: {
            fontSize: "0.6rem",
          },
          axisTick: {
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              color: _this.DColor ? "#fff" : echartsColor.thread,
            },
            onZero: false, //-----------重点
          },
          axisLabel: {
            fontSize: "0.6rem",
            color: _this.DColor ? "#fff" : echartsColor.WordColor,
            formatter: function (value, index) {
              if (_this.valA != (value - 0).toFixed(0)) {
                _this.valA = (value - 0).toFixed(0);
                return (value - 0).toFixed(0);
              }
            },
            //rotate:39
          },
          // data: this.syncExtremes,
        },
        yAxis: {
          type: "value",
          name: unit,
          title: {
            align: "high",
            offset: 0,
            text: unit,
            rotation: 0,
            y: -10,
          },

          boundaryGap: [0, "100%"],
          showLastLabel: true,
          max: max.toFixed(2) * 1.1,
          min:
            min.toFixed(2) > 0
              ? min.toFixed(2) - min.toFixed(2) * 0.1
              : min.toFixed(2) * 1.1,
          opposite: false,
          nameTextStyle: {
            fontSize: "0.6rem",
            color: _this.DColor ? "#fff" : echartsColor.WordColor,
          },
          //minInterval: 1,
          type: "value",
          axisLine: {
            show: true,
            lineStyle: {
              color: _this.DColor ? "#fff" : echartsColor.thread,
            },
            onZero: false, //-----------重点
          },
          axisLabel: {
            fontSize: "0.6rem",
            color: _this.DColor ? "#fff" : echartsColor.WordColor,
            formatter: function (value, index) {
              return (value - 0).toFixed(2);
            },
          },
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: [_this.DColor ? "#fff" : echartsColor.thread],
              type: "dashed",
              opacity: 0.5,
            },
          },
        },
        grid: {
          left: "1%",
          right: "4.8%",
          bottom: "40px",
          top: "15%",
          containLabel: true,
        },
        dataZoom: [
          {
            type: "inside",
            height: 13,
            start: 0,
            bottom: "20px",
            end: 100,
          },
          {
            start: 0,
            height: 13,
            bottom: "20px",
            end: 100,
          },
        ],
        series: [
          {
            name: a,
            type: "line",
            smooth: true,
            symbol: "none",
            sampling: "lttb",
            itemStyle: {
              color: "#FFCC00",
            },
            data: adata,
          },
          {
            name: b,
            type: "line",
            smooth: true,
            symbol: "none",
            sampling: "lttb",
            itemStyle: {
              color: "#009900",
            },
            data: bdata,
          },
          {
            name: c,
            type: "line",
            smooth: true,
            symbol: "none",
            sampling: "lttb",
            itemStyle: {
              color: "#CC0000",
            },
            data: cdata,
          },
          {
            name: "暂降触发点",
            type: "scatter",
            symbol: "image://" + this.url,
            itemStyle: {
              width: 18,
              height: 18,
            },
            data: cu,
          },
        ],
      };

      myChartes.setOption(option);
      // window.echartsArr.push(myChartes);
      setTimeout(() => {
        myChartes.resize();
        this.loading = false;
      }, 400);

      //第一个波形图数据绘制完毕后，绘制后续的波形图
      if (waveDatas !== null && waveDatas.length > 1) {
        let waveDatasTemp = waveDatas.slice(1);
        waveDatasTemp.reverse();
        for (var step = 0; step < waveDatasTemp.length; step++) {
          var waveDataTemp = waveDatasTemp[step];
          this.drawPics(waveDataTemp, picHeight, step, show, myChartes, title);
        }
      }
    },
    //绘制剩余横向的波形图
    drawPics(waveDataTemp, picHeight, step, show, myChartes1, title) {
      let _this = this;
      step = step + 1;
      //新建瞬时DIV
      var waveId = "wave" + step;
      var a = "",
        b = "",
        c = "";
      var max, min, unit;
      var adata = [],
        bdata = [],
        cdata = [];
      var colors = [];
      switch (this.iphasic) {
        case 1:
          a = waveDataTemp.title.aTitle;
          colors.push("#FFCC00");
          colors.push("#fff");
          colors.push("#fff");
          break;
        case 2:
          a = waveDataTemp.title.aTitle;
          b = waveDataTemp.title.bTitle;
          colors.push("#FFCC00");
          colors.push("#009900");
          colors.push("#fff");
          break;
        case 3:
          a = waveDataTemp.title.aTitle;
          b = waveDataTemp.title.bTitle;
          c = waveDataTemp.title.cTitle;
          colors.push("#FFCC00");
          colors.push("#009900");
          colors.push("#CC0000");
          break;
      }

      if (this.value === 1) {
        max = waveDataTemp.instantF.max;
        min = waveDataTemp.instantF.min;
        adata = waveDataTemp.shunshiF.shunshiFA;
        bdata = waveDataTemp.shunshiF.shunshiFB;
        cdata = waveDataTemp.shunshiF.shunshiFC;
      } else {
        max = waveDataTemp.instantS.max;
        min = waveDataTemp.instantS.min;
        adata = waveDataTemp.shunshiS.shunshiSA;
        bdata = waveDataTemp.shunshiS.shunshiSB;
        cdata = waveDataTemp.shunshiS.shunshiSC;
      }
      if (waveDataTemp.unit === "电压") {
        if (this.value === 1) {
          unit = "kV";
        } else {
          unit = "V";
        }
      } else {
        unit = "A";
      }
      const echarts = require("echarts");
      let waveIds = document.getElementById(waveId);
      if (this.boxoList.systemType == "ZL") {
        let str = [];
        str = waveId.split("e");
        let str1 = Number(str[1]);
        var titlename = "";
        this.wp.channelNames.forEach((element, i) => {
          if (i == 4 || i == 7 || i == 10) {
            if (str1 == 1 && i == 4) {
              let s = [];
              let s1 = "";
              s = element.split("A");
              if (s[0] == "LI") {
                s1 = "电网侧-电流";
              } else {
                s1 = s[0] + "侧" + s[1];
              }

              titlename = s1 + "    " + title;
            }
            if (str1 == 2 && i == 7) {
              let s = [];
              let s1 = "";
              s = element.split("A");
              if (s[0] == "SU") {
                s1 = "负载侧-电压";
              } else {
                s1 = s[0] + "侧" + s[1];
              }

              titlename = s1 + "    " + title;
            }
            if (str1 == 3 && i == 10) {
              let s = [];
              let s1 = "";
              s = element.split("A");
              if (s[0] == "SI") {
                s1 = "负载侧-电流";
              } else {
                s1 = s[0] + "侧" + s[1];
              }
              titlename = s1 + "    " + title;
            }
          }
        });
      }
      var myChartes = echarts.init(waveIds);
      let echartsColor = {
        WordColor: "#000",
        thread: "#000000",
        FigureColor: [
          "#07CCCA ",
          "#00BFF5",
          "#FFBF00",
          "#77DA63",
          "#D5FF6B",
          "#Ff6600",
          "#FF9100",
          "#5B6E96",
          "#66FFCC",
          "#B3B3B3",
          "#FF00FF",
          "#CC00FF",
          "#FF9999",
        ],
      };
      var option = {
        tooltip: {
          trigger: "axis",
          borderColor: "grey",
          formatter: function (params) {
            // console.log(params)
            var tips = "";
            tips += "时刻:" + params[0].data[0] + "</br/>";

            for (var i = 0; i < params.length; i++) {
              if (params[i].seriesName != "暂降触发点") {
                tips +=
                  params[i].seriesName +
                  ":" +
                  (params[i].value[1] - 0).toFixed(2) +
                  "<br/>";
              }
            }
            return tips;
          },
          // axisPointer: {
          //   type: "cross",
          //   label: {
          //     color: "#fff",
          //     fontSize: 16,
          //   },
          // },
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            opacity: 0.35,
            fontSize: 14,
          },
          backgroundColor: "rgba(0,0,0,0.35)",
          borderWidth: 0,
        },
        title: {
          left: "center",
          text: titlename,
          textStyle: {
            fontSize: "0.8rem",
            color: _this.DColor ? "#fff" : echartsColor.WordColor,
          },
        },
        legend: {
          left: "70px",
          top: "20",
          verticalAlign: "top",
          enabled: true,
          itemDistance: 5,
          textStyle: {
            fontSize: "0.6rem",
            color: _this.DColor ? "#fff" : echartsColor.WordColor,
            rich: {
              a: {
                verticalAlign: "middle",
              },
            },

            padding: [0, 0, 0, 0], //[上、右、下、左]
          },
        },
        toolbox: {
          show: step != 1 ? true : false,
          feature: {
            //restore: {},
            saveAsImage: {
              iconStyle: {
                borderColor: _this.DColor ? "#fff" : echartsColor.WordColor,
              },
            },
          },
        },
        xAxis: {
          type: "value",
          name: "时间\n(ms)",
          boundaryGap: false,
          min: _this.wp.listWaveData[0][0],
          max: _this.wp.listWaveData[_this.wp.listWaveData.length - 1][0] + 1,
          title: {
            text: "ms",
            textStyle: {
              fontSize: "0.6rem",
              color: _this.DColor ? "#fff" : echartsColor.WordColor,
            },
            enabled: true,
            align: "high",
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              color: _this.DColor ? "#fff" : echartsColor.thread,
            },
            onZero: false, //-----------重点
          },
          nameTextStyle: {
            fontSize: "0.6rem",
          },
          axisLabel: {
            fontSize: "0.6rem",
            color: _this.DColor ? "#fff" : echartsColor.WordColor,
            formatter: function (value, index) {
              if (_this.valB != (value - 0).toFixed(0)) {
                _this.valB = (value - 0).toFixed(0);
                return (value - 0).toFixed(0);
              }
            },
            //rotate:39
          },
          // data: this.syncExtremes,
        },
        yAxis: {
          type: "value",
          name: unit,
          title: {
            align: "high",
            offset: 0,
            text: unit,
            rotation: 0,
            y: -10,
          },
          boundaryGap: [0, "100%"],
          showLastLabel: true,
          max: max.toFixed(2) * 1.1,
          min:
            min.toFixed(2) > 0
              ? min.toFixed(2) - min.toFixed(2) * 0.1
              : min.toFixed(2) * 1.1,
          opposite: false,
          // axisLabel: {
          //   formatter: "{value}",
          // },
          nameTextStyle: {
            fontSize: "0.6rem",
            color: _this.DColor ? "#fff" : echartsColor.WordColor,
          },
          //minInterval: 1,
          type: "value",
          axisLine: {
            show: true,
            lineStyle: {
              color: _this.DColor ? "#fff" : echartsColor.thread,
            },
            onZero: false, //-----------重点
          },
          axisLabel: {
            fontSize: "0.6rem",
            color: _this.DColor ? "#fff" : echartsColor.WordColor,
            formatter: function (value, index) {
              return (value - 0).toFixed(2);
            },
          },
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: [_this.DColor ? "#fff" : echartsColor.thread],
              type: "dashed",
              opacity: 0.5,
            },
          },
        },
        grid: {
          left: "1%",
          right: "4.8%",
          bottom: "40px",
          top: "15%",
          containLabel: true,
        },
        dataZoom: [
          {
            type: "inside",
            height: 13,
            start: 0,
            bottom: "20px",
            end: 100,
          },
          {
            start: 0,
            height: 13,
            bottom: "20px",
            end: 100,
          },
        ],
        series: [
          {
            name: a,
            type: "line",
            smooth: true,
            symbol: "none",
            sampling: "lttb",
            itemStyle: {
              color: "#FFCC00",
            },
            data: adata,
          },
          {
            name: b,
            type: "line",
            smooth: true,
            symbol: "none",
            sampling: "lttb",
            itemStyle: {
              color: "#009900",
            },
            data: bdata,
          },
          {
            name: c,
            type: "line",
            smooth: true,
            symbol: "none",
            sampling: "lttb",
            itemStyle: {
              color: "#CC0000",
            },
            data: cdata,
          },
        ],
      };
      myChartes.setOption(option);
      // window.echartsArr.push(myChartes);
      setTimeout(() => {
        myChartes.resize();
        this.loading = false;
      }, 400);
      echarts.connect([myChartes1, myChartes]);
    },
    //根据多个值的比较返回其中最大值
    getMax(temp, tempA, tempB, tempC) {
      temp = temp > tempA ? temp : tempA;
      temp = temp > tempB ? temp : tempB;
      temp = temp > tempC ? temp : tempC;
      return temp;
    },
    //根据多个值的比较返回其中最大值
    getMaxTwo(temp, tempA, tempB) {
      temp = temp > tempA ? temp : tempA;
      temp = temp > tempB ? temp : tempB;
      return temp;
    },
    //根据多个值的比较返回其中最小值
    getMin(temp, tempA, tempB, tempC) {
      temp = temp < tempA ? temp : tempA;
      temp = temp < tempB ? temp : tempB;
      temp = temp < tempC ? temp : tempC;
      return temp;
    },
    getMinOpen(temp, tempA, tempB) {
      temp = temp < tempA ? temp : tempA;
      temp = temp < tempB ? temp : tempB;
      return temp;
    },
  },
};
</script>
