admin-sjzx/src/components/echarts/rmsboxi.vue

<template>
  <div v-loading="loading" style="position: relative">
    <div id="boxr">
      <div id="rmsp" :style="`height:${vh};overflow: hidden;`">
        <div class="bx" id="rms"></div>
      </div>
    </div>
    <!-- <el-button
            style="position: absolute; right: 10px; top: 0px; z-index: 20000"
            type="primary"
            link
            icon="el-icon-Download"
            title="生成图片"
            @click="download"
        >
            下载
        </el-button> -->
  </div>
</template>
<script lang="js">
import html2canvas from "html2canvas";
import $ from "jquery";
import * as echarts from 'echarts'
import { mainHeight } from '@/utils/layout'
// url: '@/assets/img/point.png',
//       url2: ("@/assets/dw.png"),
import url from '@/assets/img/point.png';
import url2 from '@/assets/img/dw.png';
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],
    },
    height: {
      type: [String, Number],
      default: false,
    },

  },
  data() {
    return {
      zoom: "",
      loading: true,
      tabvalue: this.value,
      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: [],
      fz: "",
      titles: "",
      vh: null,
      vw: null,
      echartlist: null
    };
  },
  watch: {
    value: function (a, b) {
      if (a == 2) {
        //alert(a)
        this.initWaves();
      } else {
        //alert(a)
        this.initWaves();
      }
    },
  },
  created() {
    if (this.flag == 1) {
      this.vh = mainHeight(165).height
    } else if (this.height != false) {
      this.vh = this.height
    } else {
      this.vh = mainHeight(165, 2).height
    }
    this.vw = '100%'
  },
  mounted() {
    // this.$wave = $("#wave").eq(0);
    this.zoom = 1 / document.body.style.zoom;
    window.addEventListener("resize", () => {
      this.zoom = 1 / document.body.style.zoom;
    });
    // this.$rms = $("#rms").eq(0);
    this.query();
  },
  methods: {
    backbxlb() {

      if (this.echartlist.length > 0) {
      
        this.waveDatas = []
        this.echartlist.forEach(item => {
          item.dispose(); // 销毁echarts实例


        })


      }
    },
    download() {
      // 转换成canvas
      html2canvas(document.getElementById("boxr"), {
        scale: 2,
      }).then(function (canvas) {
        // 创建a标签，实现下载
        let creatIMg = document.createElement("a");
        creatIMg.download = "rms波形.png"; // 设置下载的文件名，
        creatIMg.href = canvas.toDataURL(); // 下载url
        creatIMg.click();
        creatIMg.remove(); // 下载之后把创建的元素删除
      });
    },
    query() {
      this.loading = true;
      //                   let from={
      //         lineId:this.boxoList.lineId,
      //         timeId:this.boxoList.timeId,
      //     }
      //    getMonitorEventAnalyseWave(from).then(res=>{
      //     this.wp=res.data
      this.initWaves();
      //    })
    },
    //波形总体数据构造函数
    waveData(
      instantF,
      instantS,
      RMSF,
      RMSS,
      RMSFMinDetail,
      RMSSMinDetail,
      shunshiF,
      shunshiS,
      RMSFWave,
      RMSSWave,
      title,
      unit
    ) {
      /*瞬时一次值最大最小值*/
      this.instantF = instantF;
      /*瞬时二次值最大最小值*/
      this.instantS = instantS;
      /*RMS一次值最大最小值*/
      this.RMSF = RMSF;
      /*RMS二次值最大最小值*/
      this.RMSS = RMSS;
      /*RMS一次值最小值具体的X Y周的位置，已经具体的相别*/
      this.RMSFMinDetail = RMSFMinDetail;
      /*RMS二次值最小值具体的X Y周的位置，已经具体的相别*/
      this.RMSSMinDetail = RMSSMinDetail;
      /*瞬时值一次值3相详细数据*/
      this.shunshiF = shunshiF;
      /*瞬时值二次值3相详细数据*/
      this.shunshiS = shunshiS;
      /*RMS一次值3相详细数据*/
      this.RMSFWave = RMSFWave;
      /*RMS二次值3相详细数据*/
      this.RMSSWave = RMSSWave;
      /*三相名称*/
      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";
        }

        // this.eventValue = this.boxoList.eventValue;
        // this.persistTime = this.boxoList.persistTime;
        // this.lineName = this.boxoList.lineName; //监测点名称：
        // this.isOpen = this.boxoList.openTri;
        // this.subName = this.boxoList.subName; //变电站名称：
        //首先根据标题的长度，计算出需要绘制几份图（常见的有1张或2张，后期如果出现双路电压电流，便是4张波形图），考虑到波形的相数，实际情况更复杂些
        //相的数量
        this.iphasic = this.wp.iphasic;
        if (this.iphasic === 0) {
          this.iphasic = 1;
        }
        let picCounts = (this.wp.waveTitle.length - 1) / this.iphasic;
        this.waveDatas = [];
        //循环筛选需求的数据
        for (let i = 0; i < picCounts; i++) {
          this.fliteWaveData(this.wp, i)
          this.waveDatas.push({
            instantF: this.instantF,
            instantS: this.instantS,
            RMSF: this.RMSF,
            RMSS: this.RMSS,
            RMSFMinDetail: this.RMSFMinDetail,
            RMSSMinDetail: this.RMSSMinDetail,
            shunshiF: this.shunshiF,
            shunshiS: this.shunshiS,
            RMSFWave: this.RMSFWave,
            RMSSWave: this.RMSSWave,
            title: this.title,
            unit: this.unit

          });
        }
        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);
      }
    },
    //获取横向一个波形的全部数据，包括瞬时波形的一次、二次值，RMS波形的一次、二次值，如果是电压的话，还需要计算出对应的最大最小值
    fliteWaveData(wp, step) {
      let shunData = wp.listWaveData;
      let rmsData = wp.listRmsData;
      // console.log(
      //   rmsData
      // );
      let pt = Number(wp.pt) / 1000;
      let ct = Number(wp.ct);
      let titleList = wp.waveTitle;
      //首先判断当前绘制的是电压还是电流
      let xishu = pt; //默认电压，二次值转一次值乘以pt
      //三相名称
      let aTitle = "",
        bTitle = "",
        cTitle = "",
        unit = "电压";
      //RMS最小值横、纵坐标、相别名称
      let rmsvFirstX = 0,
        rmsvFirstY = 0,
        rmsvSecondX = 0,
        rmsvSecondY = 0,
        firstZhou = "a",
        secondeZhou = "a";
      //每个波形对应的最大最小值
      let ifmax, ifmin, ismax, ismin, rfmax, rfmin, rsmax, rsmin;
      let shunshiFA = [],
        shunshiFB = [],
        shunshiFC = [],
        shunshiSA = [],
        shunshiSB = [],
        shunshiSC = [],
        rmsFA = [],
        rsmFB = [],
        rmsFC = [],
        rmsSA = [],
        rsmSB = [],
        rmsSC = [];
      //给瞬时赋个初始值
      if (shunData.length > 0) {
        if (titleList[this.iphasic * step + 1].substring(0, 1) !== "U") {
          xishu = ct;
          unit = "电流";
        }
        for (let 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];
        }

        if (rmsData[0][this.iphasic * step + 1] !== undefined) {
          rfmax = rmsData[0][this.iphasic * step + 1] * xishu;
          rfmin = rmsData[0][this.iphasic * step + 1] * xishu;
          rmsvFirstY = rmsData[0][this.iphasic * step + 1] * xishu;
          rmsvFirstX = rmsData[0][0];
          rsmax = rmsData[0][this.iphasic * step + 1];
          rsmin = rmsData[0][this.iphasic * step + 1];
          rmsvSecondY = rmsData[0][this.iphasic * step + 1];
          rmsvSecondX = rmsData[0][0];
        }
        //瞬时值--同时还需要获取出瞬时值的一次、二次的最大最小值
        for (let shun = 0; shun < shunData.length; shun++) {
          if (shunData[shun][this.iphasic * step + 1] === undefined) {
            break;
          }
          let shunFirstA = []
          let shunFirstB = []
          let shunFirstC = []
          let shunSecondA = []
          let shunSecondB = []
          let shunSecondC = []
          //根据波形数据相的数量来筛选数据
          switch (this.iphasic) {
            case 1:
              shunFirstA = shunData[shun][this.iphasic * step + 1] * xishu;
              shunshiFA.push([shunData[shun][0], shunFirstA]);
              ifmax = ifmax > shunFirstA ? ifmax : shunFirstA;
              ifmin = ifmin < shunFirstA ? ifmin : shunFirstA;

              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:
              shunFirstA = shunData[shun][this.iphasic * step + 1] * xishu;
              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);

              shunSecondA = shunData[shun][this.iphasic * step + 1];
              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:
              shunFirstA = shunData[shun][this.iphasic * step + 1] * xishu;

              shunFirstB = shunData[shun][this.iphasic * step + 2] * xishu;
              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);
              }

              shunSecondA = shunData[shun][this.iphasic * step + 1];
              shunSecondB = shunData[shun][this.iphasic * step + 2];
              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;
          }
        }

        //RMS值--同时还需要获取出RMS值的一次、二次的最大最小值
        for (let rms = 0; rms < rmsData.length; rms++) {
          if (rmsData[rms][this.iphasic * step + 1] === undefined) {
            break;
          }
          let rmsFirstA = []
          let rmsFirstB = []
          let rmsFirstC = []
          let rmsSecondA = []
          let rmsSecondB = []
          let rmsSecondC = []
          //根据波形数据相的数量来筛选数据
          switch (this.iphasic) {
            case 1:
              rmsFirstA = rmsData[rms][this.iphasic * step + 1] * xishu;
              rmsFA.push([rmsData[rms][0], rmsFirstA]);
              rfmax = rfmax > rmsFirstA ? rfmax : rmsFirstA;
              rfmin = rfmin < rmsFirstA ? rfmin : rmsFirstA;
              if (rfmin < rmsvFirstY) {
                rmsvFirstY = rfmin;
                firstZhou = "a";
                rmsvFirstX = rmsData[rms][0];
              }

              rmsSecondA = rmsData[rms][this.iphasic * step + 1];
              rmsSA.push([rmsData[rms][0], rmsSecondA]);
              rsmax = rsmax > rmsSecondA ? rsmax : rmsSecondA;
              rsmin = rsmin < rmsSecondA ? rsmin : rmsSecondA;
              if (rsmin < rmsvSecondY) {
                rmsvSecondY = rsmin;
                secondeZhou = "a";
                rmsvSecondX = rmsData[rms][0];
              }
              break;
            case 2:
              rmsFirstA = rmsData[rms][this.iphasic * step + 1] * xishu;
              rmsFirstB = rmsData[rms][this.iphasic * step + 2] * xishu;
              rmsFA.push([rmsData[rms][0], rmsFirstA]);
              rsmFB.push([rmsData[rms][0], rmsFirstB]);
              rfmax = this.getMaxTwo(rfmax, rmsFirstA, rmsFirstB);
              rfmin = this.getMinOpen(rfmin, rmsFirstA, rmsFirstB);
              if (rfmin < rmsvFirstY) {
                rmsvFirstY = rfmin;
                if (rfmin === rmsFirstA) {
                  firstZhou = "a";
                } else if (rfmin === rmsFirstB) {
                  firstZhou = "b";
                }
                rmsvFirstX = rmsData[rms][0];
              }

              rmsSecondA = rmsData[rms][this.iphasic * step + 1];
              rmsSecondB = rmsData[rms][this.iphasic * step + 2];
              rmsSA.push([rmsData[rms][0], rmsSecondA]);
              rsmSB.push([rmsData[rms][0], rmsSecondB]);
              rsmax = this.getMaxTwo(rsmax, rmsSecondA, rmsSecondB);
              rsmin = this.getMinOpen(rsmin, rmsSecondA, rmsSecondB);
              if (rsmin < rmsvSecondY) {
                rmsvSecondY = rsmin;
                if (rsmin === rmsSecondA) {
                  secondeZhou = "a";
                } else if (rsmin === rmsSecondB) {
                  secondeZhou = "b";
                }
                rmsvSecondX = rmsData[rms][0];
              }
              break;
            case 3:
              rmsFirstA = rmsData[rms][this.iphasic * step + 1] * xishu;
              rmsFirstB = rmsData[rms][this.iphasic * step + 2] * xishu;
              rmsFirstC = rmsData[rms][this.iphasic * step + 3] * xishu;
              rmsFA.push([rmsData[rms][0], rmsFirstA]);
              rsmFB.push([rmsData[rms][0], rmsFirstB]);
              rmsFC.push([rmsData[rms][0], rmsFirstC]);
              rfmax = this.getMax(rfmax, rmsFirstA, rmsFirstB, rmsFirstC);
              if (this.isOpen) {
                rfmin = this.getMinOpen(rfmin, rmsFirstA, rmsFirstC);
              } else {
                rfmin = this.getMin(rfmin, rmsFirstA, rmsFirstB, rmsFirstC);
              }
              if (rfmin < rmsvFirstY) {
                rmsvFirstY = rfmin;
                if (rfmin === rmsFirstA) {
                  firstZhou = "a";
                } else if (rfmin === rmsFirstB) {
                  firstZhou = "b";
                } else {
                  firstZhou = "c";
                }
                rmsvFirstX = rmsData[rms][0];
              }

              rmsSecondA = rmsData[rms][this.iphasic * step + 1];
              rmsSecondB = rmsData[rms][this.iphasic * step + 2];
              rmsSecondC = rmsData[rms][this.iphasic * step + 3];
              rmsSA.push([rmsData[rms][0], rmsSecondA]);
              rsmSB.push([rmsData[rms][0], rmsSecondB]);
              rmsSC.push([rmsData[rms][0], rmsSecondC]);
              rsmax = this.getMax(rsmax, rmsSecondA, rmsSecondB, rmsSecondC);
              if (this.isOpen) {
                rsmin = this.getMinOpen(rsmin, rmsSecondA, rmsSecondC);
              } else {
                rsmin = this.getMin(rsmin, rmsSecondA, rmsSecondB, rmsSecondC);
              }
              if (rsmin < rmsvSecondY) {
                rmsvSecondY = rsmin;
                if (rsmin === rmsSecondA) {
                  secondeZhou = "a";
                } else if (rsmin === rmsSecondB) {
                  secondeZhou = "b";
                } else {
                  secondeZhou = "c";
                }
                rmsvSecondX = rmsData[rms][0];
              }
              break;
          }
        }
      }
      //瞬时一次值最大最小值
      let instantFAn = {};
      let instantSAn = {};
      //let color;

      let instantF = {};
      let instantS = {};
      let RMSF = {};
      let RMSS = {};
      let RMSFMinDetail = {};
      let RMSSMinDetail = {};
      let shunshiF = {};
      let shunshiS = {};
      let RMSFWave = {};
      let RMSSWave = {};
      let 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);
      rmsFA = rmsFA.slice(0);
      rsmFB = rsmFB.slice(0);
      rmsFC = rmsFC.slice(0);

      shunshiSA = shunshiSA.slice(0);
      shunshiSB = shunshiSB.slice(0);
      shunshiSC = shunshiSC.slice(0);
      rmsSA = rmsSA.slice(0);
      rsmSB = rsmSB.slice(0);
      rmsSC = rmsSC.slice(0);

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

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

      RMSFWave.rmsFA = rmsFA;
      RMSFWave.rmsFB = rsmFB;
      RMSFWave.rmsFC = rmsFC;

      RMSSWave.rmsSA = rmsSA;
      RMSSWave.rmsSB = rsmSB;
      RMSSWave.rmsSC = rmsSC;

      //赋值对应的最大最小值
      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;
      }
      RMSF.max = rfmax;
      RMSF.min = rfmin;
      RMSS.max = rsmax;
      RMSS.min = rsmin;
      //精确到小数位2位
      rmsvFirstY = rmsvFirstY;
      rmsvSecondY = rmsvSecondY;
      RMSFMinDetail.rmsvFirstX = rmsvFirstX;
      RMSFMinDetail.rmsvFirstY = rmsvFirstY;
      RMSFMinDetail.firstZhou = firstZhou;

      RMSSMinDetail.rmsvSecondX = rmsvSecondX;
      RMSSMinDetail.rmsvSecondY = rmsvSecondY;
      RMSSMinDetail.secondeZhou = secondeZhou;
      return this.waveData(
        instantF,
        instantS,
        RMSF,
        RMSS,
        RMSFMinDetail,
        RMSSMinDetail,
        shunshiF,
        shunshiS,
        RMSFWave,
        RMSSWave,
        title,
        unit
      );
    },
    //开始画图
    initWave(waveDatas, time, type, severity, isOpen) {
      //清除之前增加的div
      // $("#wave ~ .bx").remove();
      this.echartlist = []
      $("#rms ~ .bx").remove();
      //设置暂降触发点的位置 一次值与二次值Y轴不同（不是计算出来的）
      // let height = $(window).height() - 90;
      let picHeight;
      let show = true;
      if (isOpen) {
        show = false;
      }
      //let v = $("#interval").val();
      let isvisible = false;
      let cu = null,
        rmscu = null,
        rmscm = null,
        title =null,
        unit =null,
        max =null,
        min=null;
      let a = null,
        b = "",
        c = "";
      let adata = null,
        bdata = null,
        cdata = null;
      let radata = null,
        rbdata = null,
        rcdata = null;
      let rmsvX = 0,
        rmsvY = 0,
        zhou = 0;
      // if (null == waveDatas || waveDatas.length === 1) {
      //   picHeight = height;
      // } else if (waveDatas.length > 1) {
      //   picHeight = height * 0.45;
      // }
      picHeight = this.vh;
      //this.waveHeight = picHeight
      // this.waveHeight = picHeight
      this.rmsHeight = picHeight;
      // this.$rms.css("height", picHeight);
      // this.$rms.css("width", this.vw);
      // this.rmsHeight = picHeight
      // $wave.css("height", picHeight);
      // $rms.css("height", picHeight);
      let colors = [];
      if (null == waveDatas) {
        cu = [];
        rmscu = [];
        rmscm = [];
        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]];
              rmscu = [[0, waveDatas[0].RMSF.min]];
              rmscm = [[0, waveDatas[0].RMSF.max]];
              max = waveDatas[0].instantF.max;
              min = waveDatas[0].instantF.min;
              adata = waveDatas[0].shunshiF.shunshiFA;

              radata = waveDatas[0].RMSFWave.rmsFA;

              rmsvX = waveDatas[0].RMSFMinDetail.rmsvFirstX;
              rmsvY = waveDatas[0].RMSFMinDetail.rmsvFirstY;
              zhou = waveDatas[0].RMSFMinDetail.firstZhou;
            } else {
              cu = [[0, waveDatas[0].instantS.min]];
              rmscu = [[0, waveDatas[0].RMSS.min]];
              rmscm = [[0, waveDatas[0].RMSS.max]];
              max = waveDatas[0].instantS.max;
              min = waveDatas[0].instantS.min;
              adata = waveDatas[0].shunshiS.shunshiSA;

              radata = waveDatas[0].RMSSWave.rmsSA;

              rmsvX = waveDatas[0].RMSSMinDetail.rmsvSecondX;
              rmsvY = waveDatas[0].RMSSMinDetail.rmsvSecondY;
              zhou = waveDatas[0].RMSSMinDetail.secondeZhou;
            }

            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]];
              rmscu = [[0, waveDatas[0].RMSF.min]];
              rmscm = [[0, waveDatas[0].RMSF.max]];
              max = waveDatas[0].instantF.max;
              min = waveDatas[0].instantF.min;
              adata = waveDatas[0].shunshiF.shunshiFA;
              bdata = waveDatas[0].shunshiF.shunshiFB;

              radata = waveDatas[0].RMSFWave.rmsFA;
              rbdata = waveDatas[0].RMSFWave.rmsFB;

              rmsvX = waveDatas[0].RMSFMinDetail.rmsvFirstX;
              rmsvY = waveDatas[0].RMSFMinDetail.rmsvFirstY;
              zhou = waveDatas[0].RMSFMinDetail.firstZhou;
            } else {
              cu = [[0, waveDatas[0].instantS.min]];
              rmscu = [[0, waveDatas[0].RMSS.min]];
              rmscm = [[0, waveDatas[0].RMSS.max]];
              max = waveDatas[0].instantS.max;
              min = waveDatas[0].instantS.min;
              adata = waveDatas[0].shunshiS.shunshiSA;
              bdata = waveDatas[0].shunshiS.shunshiSB;

              radata = waveDatas[0].RMSSWave.rmsSA;
              rbdata = waveDatas[0].RMSSWave.rmsSB;

              rmsvX = waveDatas[0].RMSSMinDetail.rmsvSecondX;
              rmsvY = waveDatas[0].RMSSMinDetail.rmsvSecondY;
              zhou = waveDatas[0].RMSSMinDetail.secondeZhou;
            }
            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]];
              rmscu = [[0, waveDatas[0].RMSF.min]];
              rmscm = [[0, waveDatas[0].RMSF.max]];
              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;
              radata = waveDatas[0].RMSFWave.rmsFA;
              rbdata = waveDatas[0].RMSFWave.rmsFB;
              rcdata = waveDatas[0].RMSFWave.rmsFC;
              rmsvX = waveDatas[0].RMSFMinDetail.rmsvFirstX;
              rmsvY = waveDatas[0].RMSFMinDetail.rmsvFirstY;
              zhou = waveDatas[0].RMSFMinDetail.firstZhou;
            } else {
              cu = [[0, waveDatas[0].instantS.min]];
              rmscu = [[0, waveDatas[0].RMSS.min]];
              rmscm = [[0, waveDatas[0].RMSS.max]];
              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;
              radata = waveDatas[0].RMSSWave.rmsSA;
              rbdata = waveDatas[0].RMSSWave.rmsSB;
              rcdata = waveDatas[0].RMSSWave.rmsSC;
              rmsvX = waveDatas[0].RMSSMinDetail.rmsvSecondX;
              rmsvY = waveDatas[0].RMSSMinDetail.rmsvSecondY;
              zhou = waveDatas[0].RMSSMinDetail.secondeZhou;
            }
            colors.push("#FFCC00");
            colors.push("#009900");
            colors.push("#CC0000");
            break;
        }
        if (waveDatas[0].unit === "电压") {
          let xdata = this.wp.listRmsData[0][0];
          if (this.value === 1) {
            this.fz = [
              this.wp.listRmsMinData[0][0],
              (
                (this.wp.listRmsMinData[0][1] * Number(this.wp.pt)) /
                1000
              ).toFixed(2),
            ];
            //  (this.fz * Number(this.wp.pt)) / 1000;
            unit = "kV";
          } else {
            this.fz = [
              this.wp.listRmsMinData[0][0],
              this.wp.listRmsMinData[0][1],
            ];
            unit = "V";
          }
        } else {
          unit = "A";
        }
        //把剩余的DIV先拼接好
        for (let step = 1; step < waveDatas.length; step++) {
          let rmsId = "rms" + step;
          let newDivRms = $(
            ` <div style="height:${this.vh
            };overflow: hidden;"><div class='bx' id='${rmsId}'  ></div></div>`
          );
          newDivRms.insertAfter($("#rmsp"));
          $("#" + rmsId).css("height", picHeight);
          $("#" + rmsId).css("width", this.vw);
        }
      } else {
        cu = [];
        // rmscu = [];
        title =
          "变电站名称：" +
          this.subName +
          " 监测点名称：" +
          this.lineName +
          " 发生时刻：" +
          this.time +
          " 暂降(骤升)幅值：" +
          (this.eventValue * 100).toFixed(0) +
          "% 持续时间：" +
          this.persistTime +
          "s";
      }
      //绘制横向第一个波形图
      //绘制瞬时波形图
      // 绘制RMS波形图
      let _this = this;

      let myChartes = echarts.init(document.getElementById("rms"));
      // console.log("==========", radata);
      let echartsColor = { WordColor: "#000", thread: "#000000", FigureColor: ["#07CCCA ", "#00BFF5", "#FFBF00", "#77DA63", "#D5FF6B", "#Ff6600", "#FF9100", "#5B6E96", "#66FFCC", "#B3B3B3", "#FF00FF", "#CC00FF", "#FF9999"] }
      setTimeout(() => {
        document.getElementById("rms").style.width = '100%';
        document.getElementById("rms").style.height = _this.vh;
      }, 0);
      let option = {
        tooltip: {
          top: "10px",
          trigger: "axis",
          borderColor: "grey",
          formatter: function (params) {
            let tips = "";
            tips += "时刻:" + params[0].data[0] + "</br/>";

            for (let 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: '0.8rem',
          //   },
          // },
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            opacity: 0.35,
            fontSize: 14,
          },
          backgroundColor: "rgba(0,0,0,0.35)",
          borderWidth: 0,
        },
        title: {
          left: "center",
          text: "电网侧-电压    " + title,
          subtitle: {
            text: "电压",
            align: "left",
          },
          textStyle: {
            fontSize: "0.8rem",
            color: _this.DColor ? "#fff" : echartsColor.WordColor,
          },
        },
        legend: {
          left: "70px",
          top: "20",
          verticalAlign: "top",
          enabled: true,
          itemDistance: 5,
          textStyle: {
            fontSize: "0.7rem",
            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)",
          min: _this.wp.listRmsData[0][0],
          max: _this.wp.listRmsData[_this.wp.listRmsData.length - 1][0] + 1,
          boundaryGap: false,
          title: {
            text: "ms",
            textStyle: {
              fontSize: "0.6rem",
              color: _this.DColor ? "#fff" : echartsColor.WordColor,
            },
            enabled: true,
            align: "high",
          },
          nameTextStyle: {
            fontSize: "0.6rem",
          },
          labels: {
            formatter: function () {
              return this.value;
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              color: _this.DColor ? "#fff" : echartsColor.thread,
            },
            onZero: false, //-----------重点
          },
          axisLabel: {
            fontSize: "0.6rem",
            color: _this.DColor ? "#fff" : echartsColor.WordColor,
            // interval: 50,
            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,
          },
          max: rmscm[0][1] * 1.06,
          min: rmscu[0][1] - rmscu[0][1] * 0.04,
          boundaryGap: [0, "100%"],
          showLastLabel: true,
          // max: max.toFixed(2),
          // min: min.toFixed(2),
          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: "45px",
          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: "average",
            itemStyle: {
              color: "#FFCC00",
            },
            data: radata,
          },
          {
            name: b,
            type: "line",
            smooth: true,
            symbol: "none",
            sampling: "average",
            itemStyle: {
              color: "#009900",
            },
            data: rbdata,
          },
          {
            name: c,
            type: "line",
            smooth: true,
            symbol: "none",
            sampling: "average",
            itemStyle: {
              color: "#CC0000",
            },
            data: rcdata,
          },
          {
            name: "暂降触发点",
            type: "scatter",
            symbol: "image://" + url,
            itemStyle: {
              width: 18,
              height: 18,
            },
            data: rmscu,
          },
          //   {
          //     type: 'flags',
          //     color: '#34c0e2',
          //     name: '最小暂降幅值',
          //     cursor: 'pointer',
          //     visible: isvisible,
          //     showInLegend: isvisible,
          //     data: [{
          //         x: rmsvX,
          //         title: rmsvY
          //     }],
          //     onSeries: zhou,
          //     shape: 'flag'
          // }
          {
            name: "最小暂降幅值",
            type: "scatter",
            symbol: "image://" + url2,
            itemStyle: {
              width: 45,
              height: 45,
            },
            label: {
              show: true,
              position: [5, -20],
              color: "#000",
              fontSize: "14px",
              fontWeight: "bold",
              borderType: "solid",
              borderWidth: 0.5,
              backgroundColor: "#ffff",
              borderColor: "#0099FF",
            },
            data: [this.fz],
          },
        ],
      };
      myChartes.setOption(option)
      // window.echartsArr.push(myChartes);
      setTimeout(() => {
        myChartes.resize();
        this.loading = false;
      }, 500);
      this.echartlist.push(myChartes)
      //第一个波形图数据绘制完毕后，绘制后续的波形图
      if (waveDatas !== null && waveDatas.length > 1) {
        let waveDatasTemp = waveDatas.slice(1);
        waveDatasTemp.reverse();
        for (let step = 0; step < waveDatasTemp.length; step++) {
          let waveDataTemp = waveDatasTemp[step];

          this.drawPics(waveDataTemp, picHeight, step, show, myChartes, rmscm, rmscu, title);
        }
      }
    },
    //绘制剩余横向的波形图
    drawPics(waveDataTemp, picHeight, step, show, myChartes1, rmscm, rmscu, title) {
      step = step + 1;
      //新建瞬时DIV和RMS波形DIV
      // let waveId = 'wave' + step;
      let rmsId = "rms" + step;
      // let v = $("#interval").val();
      let a = "",
        b = "",
        c = "";
      let max, min, unit;
      let adata =null,
        bdata =null,
        cdata =null;
      let radata =null,
        rbdata =null,
        rcdata =null;
      let colors =[];
      switch (this.iphasic) {
        case 1:
          a = waveDataTemp.title.aTitle;
          colors.push("yellow");
          colors.push("#fff");
          colors.push("#fff");
          break;
        case 2:
          a = waveDataTemp.title.aTitle;
          b = waveDataTemp.title.bTitle;
          colors.push("yellow");
          colors.push("green");
          colors.push("#fff");
          break;
        case 3:
          a = waveDataTemp.title.aTitle;
          b = waveDataTemp.title.bTitle;
          c = waveDataTemp.title.cTitle;
          colors.push("yellow");
          colors.push("green");
          colors.push("red");
          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;
        radata = waveDataTemp.RMSFWave.rmsFA;
        rbdata = waveDataTemp.RMSFWave.rmsFB;
        rcdata = waveDataTemp.RMSFWave.rmsFC;
      } else {
        max = waveDataTemp.instantS.max;
        min = waveDataTemp.instantS.min;
        adata = waveDataTemp.shunshiS.shunshiSA;
        bdata = waveDataTemp.shunshiS.shunshiSB;
        cdata = waveDataTemp.shunshiS.shunshiSC;
        radata = waveDataTemp.RMSSWave.rmsSA;
        rbdata = waveDataTemp.RMSSWave.rmsSB;
        rcdata = waveDataTemp.RMSSWave.rmsSC;
      }
      if (waveDataTemp.unit === "电压") {
        if (this.value === 1) {
          unit = "kV";
        } else {
          unit = "V";
        }
      } else {
        unit = "A";
      }
      //绘制rms波形
      let _this = this;

      let myChartes = echarts.init(document.getElementById(rmsId));
      //debugger
         let titlename = ''
      if (this.boxoList.systemType == "ZL") {
        let str = []
        str = rmsId.split('s')
        let str1 = Number(str[1])
     
        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
            }
          }

        });
      }
      let echartsColor = { WordColor: "#000", thread: "#000000", FigureColor: ["#07CCCA ", "#00BFF5", "#FFBF00", "#77DA63", "#D5FF6B", "#Ff6600", "#FF9100", "#5B6E96", "#66FFCC", "#B3B3B3", "#FF00FF", "#CC00FF", "#FF9999"] }
      let option = {
        tooltip: {
          trigger: "axis",
          borderColor: "grey",
          backgroundColor: "#fff",
          style: {
            color: "#000",
            fontSize: "15px",
            padding: 10,
          },
          formatter: function (params) {
            // console.log(params)
            let tips = "";
            tips += "时刻:" + params[0].data[0] + "</br/>";

            for (let 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: '0.8rem',
          //   },
          // },
          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.7rem",
            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)",
          min: _this.wp.listRmsData[0][0],
          max: _this.wp.listRmsData[_this.wp.listRmsData.length - 1][0] + 1,
          boundaryGap: false,
          title: {
            text: "ms",
            textStyle: {
              fontSize: "0.6rem",
              color: _this.DColor ? "#fff" : echartsColor.WordColor,
            },
            enabled: true,
            align: "high",
          },
          labels: {
            formatter: function () {
              return this.value;
            },
          },
          nameTextStyle: {
            fontSize: "0.6rem",
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              color: _this.DColor ? "#fff" : echartsColor.thread,
            },
            onZero: false, //-----------重点
          },
          axisLabel: {
            fontSize: "0.6rem",
            color: _this.DColor ? "#fff" : echartsColor.WordColor,
            // interval: 50,
            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,
          },
          // max: rmscm[0][1] * 1.01,
          // min: rmscu[0][1] - rmscu[0][1] * 0.01,
          boundaryGap: [0, "100%"],
          showLastLabel: true,
          // max: max.toFixed(2),
          // min: min.toFixed(2),
          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: "45px",
          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: "average",
            itemStyle: {
              color: "#FFCC00",
            },
            data: radata,
          },
          {
            name: b,
            type: "line",
            smooth: true,
            symbol: "none",
            sampling: "average",
            itemStyle: {
              color: "#009900",
            },
            data: rbdata,
          },
          {
            name: c,
            type: "line",
            smooth: true,
            symbol: "none",
            sampling: "average",
            itemStyle: {
              color: "#CC0000",
            },
            data: rcdata,
          },
        ],
      };
      myChartes.setOption(option)
      // window.echartsArr.push(myChartes);
      setTimeout(() => {
        myChartes.resize();
        this.loading = false;
      }, 500);
      this.echartlist.push(myChartes)
      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>