<template>
  <div
    v-loading="loading"
    element-loading-background="rgba(122, 122, 122, 0.8)"
    class="boxbx"
    style="position: relative"
  >
    <div id="boxsj" style="background: #343849c7">
      <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="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 url from '@/assets/img/point.png'

export default {
    props: {
        value: {
            type: Number,
            default: 2
        },
        flag: {
            type: [String, Number, Boolean],
            default: 3
        },
        parentHeight: {
            type: [String, Number, Boolean],
            default: 0
        },
        DColor: {
            type: Boolean,
            default: false
        },
        boxoList: {
            type: [Object, Array]
        },
        wp: {
            type: [Object, Array]
        }
    },
    data() {
        return {
            loading: true,
            tabvalue: this.value,
            // url: '@/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: '',
            echartlist: [null, null, null, null, null, null, null, null],
            myChartess: null,
            myChartess1: null,
            myChartess2: null,
            myChartess3: null,
            myChartess4: null,
            myChartess5: null,

        }
    },
    created() {

        if (this.flag == 1) {
            this.vh = '680px'
        } else {
            this.vh = '340px'
        }
        if (this.parentHeight != 0) {
            this.vh = '300px'

        }
        this.vw = '100%'
    },
    watch: {
        value: function (a, b) {
            if (a == 2) {
                // $("#wave1").remove();
                this.initWaves()
            } else {
                $('#wave1').remove()
                this.initWaves()
            }
        }
    },
    mounted() {
        // console.log(`123123`,this.boxoList,this.wp);
        this.zoom = 1 / document.body.style.zoom
        window.addEventListener('resize', () => {
            this.zoom = 1 / document.body.style.zoom
        })
        // this.$wave = $('#wave').eq(0)
        this.$nextTick(() => {
            this.query()
        })
    },
    beforeDestroy() {
        this.backbxlb()
  },
    methods: {
        backbxlb() {
                this.waveDatas = []
                if(this.myChartess){this.myChartess.dispose(); this.myChartess=null; }
                if(this.myChartess1){this.myChartess1.dispose(); this.myChartess1=null; }
                if(this.myChartess2){this.myChartess2.dispose(); this.myChartess2=null; }
                if(this.myChartess3){this.myChartess3.dispose(); this.myChartess3=null; }
                if(this.myChartess4){this.myChartess4.dispose(); this.myChartess4=null; }
                if(this.myChartess5){this.myChartess5.dispose(); this.myChartess5=null; }

                echarts.disconnect([this.myChartess,this.myChartess1,this.myChartess2,this.myChartess3,this.myChartess4,this.myChartess5])


            //     this.echartlist.forEach(item => {
            //         if (item) {
            //             item.dispose(); // 销��echarts实例
            //             echarts.disconnect(item)
            //             item=null
            //         }


            //     })
            //    setTimeout(()=>{
            //     console.log("🚀 ~ backbxlb ~  this.echartlist:",  this.echartlist)

            //     },1000)

        },
        download() {
            // 转换成canvas
            html2canvas(document.getElementById('boxsj'), {
                scale: 2,
            }).then(function (canvas) {
                // 创建a标签，实现下载
                let 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) {
            // console.log(1);
            /*瞬时一次值最大最小值*/
            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(2) +
                        '% 持续时间：' +
                        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(2) +
                        '% 持续时间：' +
                        this.boxoList.duration +
                        's'
                }

                //首先根据标题的长度，计算出需要绘制几份图（常见的有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,
                        shunshiF: this.shunshiF,
                        shunshiS: this.shunshiS,
                        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)
            }
        },
        //获取横向一个波形的全部数据，包括瞬时波形的一次、二次值，如果是电压的话，还需要计算出对应的最大最小值
        fliteWaveData(wp, step) {

            let shunData = wp.listWaveData
            let pt = Number(wp.pt) / 1000
            let ct = Number(wp.ct)
            let titleList = wp.waveTitle
            //首先判断当前绘制的是电压还是电流
            let xishu = pt //默认电压，二次值转一次值乘以pt
            //三相名称
            let aTitle = '',
                bTitle = '',
                cTitle = '',
                unit = '电压'
            //每个波形对应的最大最小值
            let ifmax, ifmin, ismax, ismin

            let shunshiFA = [],
                shunshiFB = [],
                shunshiFC = [],
                shunshiSA = [],
                shunshiSB = [],
                shunshiSC = []
            //给瞬时赋个初始值
            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]
                }

                //瞬时值--同时还需要获取出瞬时值的一次、二次的最大最小值
                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)
                            }

                            let shunSecondA = shunData[shun][this.iphasic * step + 1]
                            let shunSecondB = shunData[shun][this.iphasic * step + 2]
                            let 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
                    }
                }
            }
            //瞬时一次值最大最小值
            let instantFAn = {}
            let instantSAn = {}
            //let color;

            let instantF = {}
            let instantS = {}
            let shunshiF = {}
            let shunshiS = {}
            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)
            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 this.waveData(instantF, instantS, shunshiF, shunshiS, title, unit)
        },
        //开始画图
        initWave(waveDatas, time, type, severity, isOpen) {

            //清除之前增加的div
            // $("#wave ~ .bx1").remove();
            $('div.bx1').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,
                title = null,
                unit = null,
                max = null,
                min = null
            let a = null,
                b = null,
                c = null
            let adata = null,
                bdata = null,
                cdata = null
            picHeight = this.vh
            // this.$wave.css('height', picHeight)
            // this.$wave.css('width', this.vw)
            let 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('#DAA520')
                        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('#DAA520')
                        colors.push('#2E8B57')
                        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('#DAA520')
                        colors.push('#2E8B57')
                        colors.push('#A52a2a')
                        break
                }


                if (waveDatas[0].unit === '电压') {
                    if (this.value === 1) {
                        unit = 'kV'
                    } else {
                        unit = 'V'
                    }
                } else {
                    unit = 'A'
                }
                //把剩余的DIV先拼接好
                for (var step = waveDatas.length - 1; 0 < step && step < waveDatas.length; step--) {
                    let waveId = 'wave' + step
                    let newDivShunshi = $(` <div style="height:${this.vh};overflow: hidden;">
                                        <div class='bx1' id='${waveId}'>
                                        </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 * 1).toFixed(0) +
                    '% 持续时间：' +
                    this.persistTime +
                    's'
            }
            //绘制横向第一个波形图
            //绘制瞬时波形图
            // const echarts = require('echarts')
            let wave = document.getElementById('wave')

            let _this = this
            let myChartes = echarts.init(wave)
            let echartsColor = { WordColor: "#fff", thread: "#fff", FigureColor: ["#07CCCA ", "#00BFF5", "#FFBF00", "#77DA63", "#D5FF6B", "#Ff6600", "#FF9100", "#5B6E96", "#66FFCC", "#B3B3B3", "#FF00FF", "#CC00FF", "#FF9999"] }
            setTimeout(() => {
                wave.style.width = '100%';
                wave.style.height = _this.vh;
            }, 0);
            let option = {
                tooltip: {
                    top: '10px',
                    trigger: 'axis',
                    borderColor: 'grey',
                    backgroundColor: '#fff',
                    style: {
                        color: '#fff',
                        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].marker + 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.55)',
                    borderWidth: 0
                },
                title: {
                    left: 'center',
                    text:  title,
                    textStyle: {
                        fontSize: '0.8rem',
                        color: _this.DColor ? '#fff' : echartsColor.WordColor
                    }
                },
                legend: {
                    right: 50,
                    top: 25,
                    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: {
                    right: 20,
                     top: 15,
                feature: {
                    // 移除默认的 saveAsImage
                    // saveAsImage: { title: '保存图片' }
                    myCustomDownload: {
                        title: '', // 按钮标题
                        icon: 'path://M892.342857 463.238095l-73.142857-68.266666-258.438095 258.438095V29.257143h-97.52381v624.152381L204.8 394.971429 131.657143 463.238095l380.342857 380.342857zM107.27619 897.219048h804.571429v97.523809H107.27619z', // 自定义图标路径

                        onclick: function () {
                            _this.download()
                        }
                    }
                }
            },
                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: '2.8%',
                    bottom: '40px',
                    top: '70px',
                    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',
                        large: true,

                        smooth: true,
                        symbol: 'none',
                        sampling: 'average',
                        itemStyle: {
                            color: '#DAA520'
                        },
                        data: adata
                    },
                    {
                        name: b,
                        type: 'line',
                        large: true,

                        smooth: true,
                        symbol: 'none',
                        sampling: 'average',
                        itemStyle: {
                            color: '#2E8B57'
                        },
                        data: bdata
                    },
                    {
                        name: c,
                        type: 'line',
                        large: true,

                        smooth: true,
                        symbol: 'none',
                        sampling: 'average',
                        itemStyle: {
                            color: '#A52a2a'
                        },
                        data: cdata
                    },
                    {
                        name: '暂降触发点',
                        type: 'scatter',
                        symbol: 'image://' + url,
                        itemStyle: {
                            width: 18,
                            height: 18
                        },
                        data: cu
                    }
                ]
            }

            myChartes.setOption(option)
            // window.echartsArr.push(myChartes)
            setTimeout(() => {
                myChartes.resize()
                this.loading = false
            }, 400)
            // this.echartlist[0]=(myChartes)
            this.myChartess=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, title)
                }
            }
        },
        //绘制剩余横向的波形图
        drawPics(waveDataTemp, picHeight, step, show, myChartes1, title) {
            let _this = this
            step = step + 1
            //新建瞬时DIV
            let waveId = 'wave' + step
            let a = null,
                b = null,
                c = null
            let max, min, unit
            let adata = null,
                bdata = null,
                cdata = null
            let colors = []
            switch (this.iphasic) {
                case 1:
                    a = waveDataTemp.title.aTitle
                    colors.push('#DAA520')
                    colors.push('#fff')
                    colors.push('#fff')
                    break
                case 2:
                    a = waveDataTemp.title.aTitle
                    b = waveDataTemp.title.bTitle
                    colors.push('#DAA520')
                    colors.push('#2E8B57')
                    colors.push('#fff')
                    break
                case 3:
                    a = waveDataTemp.title.aTitle
                    b = waveDataTemp.title.bTitle
                    c = waveDataTemp.title.cTitle
                    colors.push('#DAA520')
                    colors.push('#2E8B57')
                    colors.push('#A52a2a')
                    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'
            }
            let titlename = ''
            // 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])

                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 myChartes = echarts.init(waveIds)
            let echartsColor = { WordColor: "#fff", thread: "#fff", FigureColor: ["#07CCCA ", "#00BFF5", "#FFBF00", "#77DA63", "#D5FF6B", "#Ff6600", "#FF9100", "#5B6E96", "#66FFCC", "#B3B3B3", "#FF00FF", "#CC00FF", "#FF9999"] }
            let option = {
                tooltip: {
                    trigger: 'axis',
                    borderColor: 'grey',
                    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: 16,
                    //   },
                    // },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.55)',
                    borderWidth: 0
                },
                title: {
                    left: 'center',
                    text: titlename,
                    textStyle: {
                        fontSize: '0.8rem',
                        color: _this.DColor ? '#fff' : echartsColor.WordColor
                    }
                },
                legend: {
                    right: 50,
                    top: 25,
                    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: '2.8%',
                    bottom: '40px',
                    top: '70px',
                    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',
                        large: true,

                        smooth: true,
                        symbol: 'none',
                        sampling: 'average',
                        itemStyle: {
                            color: '#DAA520'
                        },
                        data: adata
                    },
                    {
                        name: b,
                        type: 'line',
                        large: true,

                        smooth: true,
                        symbol: 'none',
                        sampling: 'average',
                        itemStyle: {
                            color: '#2E8B57'
                        },
                        data: bdata
                    },
                    {
                        name: c,
                        type: 'line',
                        large: true,

                        smooth: true,
                        symbol: 'none',
                        sampling: 'average',
                        itemStyle: {
                            color: '#A52a2a'
                        },
                        data: cdata
                    }
                ]
            }
            myChartes.setOption(option)
            // window.echartsArr.push(myChartes)
            setTimeout(() => {
                myChartes.resize()
                this.loading = false
            }, 400)
            // this.echartlist[step]=(myChartes)
            this[`myChartess${step}`]=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>
