<template>
    <div id="dd" style="padding: 10px 10px 10px 10px">
        <div class="boxDiv">
            <div>
                <span>值选择:</span>
                <el-select v-model="value" placeholder="请选择" @change="valuechange">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <el-button type="primary" icon="el-icon-view" @click="whole">全屏</el-button>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card" class="mt10">
            <el-tab-pane label="瞬时波形" name="first" id="first">
                <div id="box1">
                    <div
                        v-loading="loading"
                        id="boxin"
                        style=""
                        :style="`width: ${vws}px; height: ${vhs}px; background: #fff;`"
                    ></div>
                    <div
                        v-loading="loading"
                        id="boxin2"
                        :style="`width: ${vws}px; height: ${vhs}px; background: #fff;`"
                    ></div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="rms波形" name="second" id="second" :style="'height:' + vh + 'px;'">
                <div id="box2">
                    <div
                        v-loading="loading"
                        id="rmsboxin"
                        :style="`width: ${vws}px; height: ${vhs}px; background: #fff;`"
                    ></div>
                    <div
                        v-loading="loading"
                        id="rmsboxin2"
                        :style="`width: ${vws}px; height: ${vhs}px; background: #fff;`"
                    ></div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import echarts from 'echarts'
import boxis from './boxi.js'
export default {
    data() {
        return {
            vhs: 0,
            vws: 0,
            zoom: 1,
            boxId: 'box1',
            loading: true,
            options: [
                {
                    value: 1,
                    label: '一次值'
                },
                {
                    value: 2,
                    label: '二次值'
                }
            ],
            vh: undefined,
            vw: undefined,
            value: 1,
            activeName: 'first',
            url: require('@/assets/point.png'),
            url2: require('@/assets/dw.png'),
            //瞬时波形数据
            a: '',
            b: '',
            c: '',
            dws: '',
            dws2: '',
            legends: [],
            legends2: [],
            adata: [],
            bdata: [],
            cdata: [],
            //第一组
            adata2: [],
            bdata2: [],
            cdata2: [],

            //rms波形数据
            rmsdws: '',
            rmsdws2: '',
            rmslegends: [],
            rmslegends2: [],
            rsmadata: [],
            rsmbdata: [],
            rsmcdata: [],
            //第二组
            rsmadata2: [],
            rsmbdata2: [],
            rsmcdata2: [],
            boxi: boxis
        }
    },
    mounted() {
        // this.$nextTick(()=>{
        //   this.getBoXinFenXi(); //调用echarts图表方法
        // })
        this.getBoXinFenXi()

        // this.getRmsBoXinFenXi()
        // this.zoom = 1 / document.body.style.zoom;
        // window.addEventListener("resize", () => {
        //   this.zoom = 1 / document.body.style.zoom;
        // });
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 125
            this.vw = document.getElementById('app-main-in').offsetWidth
            this.vws = document.getElementById('app-main-in').offsetWidth - 40
            this.vhs = (window.sessionStorage.getItem('appheight') - 125) / 2
            if (this.vhs != document.getElementById(this.boxId).offsetHeight / 2) {
                this.vws = document.getElementById(this.boxId).offsetWidth
                this.vhs = document.getElementById(this.boxId).offsetHeight / 2
            } else {
                this.vws = document.getElementById('app-main-in').offsetWidth - 40
                this.vhs = (window.sessionStorage.getItem('appheight') - 125) / 2
            }
        },
        //绘制瞬时波形
        getBoXinFenXi() {
            this.loading = true

            //组装标题
            let data = this.boxi
            let pt = data.pt
            let ct = data.ct
            //获取ABC3相图列
            //获取ABC中的最小值,最大值
            let waveTitle = data.waveTitle
            let legend = []
            let legend2 = []

            // if (data.iPhasic == 3) {
            //   for (let i = 1; i < waveTitle.length - 3; i++) {
            //     legend.push(waveTitle[i]);
            //   }
            //   for (let i = data.iPhasic + 1; i <= waveTitle.length - 1; i++) {
            //     legend2.push(waveTitle[i]);
            //   }
            // }
            for (let i = 1; i < waveTitle.length - data.iPhasic; i++) {
                legend.push(waveTitle[i])
            }
            for (let i = data.iPhasic + 1; i <= waveTitle.length - 1; i++) {
                legend2.push(waveTitle[i])
            }
            legend.push('暂降触发点')
            if (legend[0] == 'UA相' || legend[0] == 'UB相' || legend[0] == 'UC相') {
                let dws = '电压(kV)'
                this.dws = dws
            } else if (legend[0] == 'IA相' || legend[0] == 'IB相' || legend[0] == 'IC相') {
                let dws = '电流(A)'
                this.dws = dws
            }

            // console.log(
            // legend
            // );
            this.legends = legend
            this.legends2 = legend2
            if (legend2[0] == 'UA相' || legend2[0] == 'UB相' || legend2[0] == 'UC相') {
                let dws2 = '电压(kV)'
                this.dws2 = dws2
            } else if (legend2[0] == 'IA相' || legend2[0] == 'IB相' || legend2[0] == 'IC相') {
                let dws2 = '电流(A)'
                this.dws2 = dws2
            }

            // console.log(
            // legend2
            // );
            //this.a = data.a
            // this.b = data.b
            //this.c = data.c
            let title =
                '变电站名称:' +
                data.subName +
                '--监测点名称:' +
                data.lineName +
                '--发生时刻:' +
                data.time +
                '--暂降幅值:' +
                data.eventValue +
                '%--持续时间:' +
                data.persistTime +
                's'

            let firstMin //第一个图最小值
            let firstMax //第一个图最大值
            let firstMin2 //第二个图最小值
            let firstMax2 //第二个图最大值
            let mindata = [] //存放abc混合数据找最小值
            let mindata2 = [] //存放第二组abc混合数据找最小值
            let eventValue = '' //存暂降y值
            let event = [] //暂降点数据存放
            //根据返回iPhasic相别标志,判断有几个图
            if (data.iPhasic == 3) {
                if (this.value == 1) {
                    this.adata = []
                    this.bdata = []
                    this.cdata = []
                    //第二组A
                    this.adata2 = []
                    this.bdata2 = []
                    this.cdata2 = []
                    this.dws = '电压(kV)'
                    let abcminData = data.listWaveData
                    // for(let i = 0;i<abcminData.length;i++){
                    //    for(let j = 1;j<=data.iPhasic;j++){
                    //        let ptvalue = ((abcminData[i][j]).toFixed(2))
                    //        mindata.push(ptvalue)
                    //    }
                    // }
                    abcminData.forEach(item => {
                        mindata.push(
                            ((item[1] / 1000) * pt).toFixed(2),
                            ((item[2] / 1000) * pt).toFixed(2),
                            ((item[3] / 1000) * pt).toFixed(2)
                        )
                        mindata2.push(item[4] * ct.toFixed(2), item[5] * ct.toFixed(2), item[6] * ct.toFixed(2))

                        //第一组ABC波形数据
                        this.adata.push([item[0], ((item[1] / 1000) * pt).toFixed(2)])
                        this.bdata.push([item[0], ((item[2] / 1000) * pt).toFixed(2)])
                        this.cdata.push([item[0], ((item[3] / 1000) * pt).toFixed(2)])
                        //第二组ABC波形数据
                        this.adata2.push([item[0], item[4] * ct.toFixed(2)])
                        this.bdata2.push([item[0], item[5] * ct.toFixed(2)])
                        this.cdata2.push([item[0], item[6] * ct.toFixed(2)])
                    })

                    //  let iPhasic =  data.iPhasic+1 //第二组起始下标
                    //   for(let i = 0;i<abcminData.length;i++){
                    //      for(let j = iPhasic;j<=waveTitle.length-1;j++){
                    //          let ctvalue = ((abcminData[i][j]).toFixed(2))
                    //          mindata2.push(ctvalue)
                    //      }
                    //   }

                    // console.log(
                    // mindata
                    // );
                    //将数据从小到大排序
                    mindata.sort(function (a, b) {
                        return a - b
                    })
                    mindata2.sort(function (a, b) {
                        return a - b
                    })

                    // console.log(
                    // mindata
                    // );

                    // console.log(
                    // mindata2
                    // );
                    //得到第一组最小值
                    firstMin = (mindata[0] * 1.2).toFixed(2)
                    //得到第而组最小值
                    firstMin2 = (mindata2[0] * 1.2).toFixed(2)
                    //得到第一组最大值
                    firstMax = (mindata[mindata.length - 1] * 1.2).toFixed(2)
                    //得到第二组最大值
                    firstMax2 = (mindata2[mindata2.length - 1] * 1.2).toFixed(2)

                    eventValue = firstMin
                    event.push(['0', eventValue]) //暂降触发值
                    // this.shuju(abcminData)
                    this.boxiEcharts(event, firstMin, firstMax, firstMin2, firstMax2, title)
                } else if (this.value == 2) {
                    this.adata = []
                    this.bdata = []
                    this.cdata = []
                    //第二组A
                    this.adata2 = []
                    this.bdata2 = []
                    this.cdata2 = []
                    this.dws = '电压(V)'
                    let abcminData = data.listWaveData
                    // for(let i = 0;i<abcminData.length;i++){
                    //    for(let j = 1;j<=data.iPhasic;j++){
                    //        let ptvalue = ((abcminData[i][j]).toFixed(2))
                    //        mindata.push(ptvalue)
                    //    }
                    // }
                    abcminData.forEach(item => {
                        mindata.push(item[1].toFixed(2), item[2].toFixed(2), item[3].toFixed(2))
                        mindata2.push(item[4].toFixed(2), item[5].toFixed(2), item[6].toFixed(2))

                        //第一组ABC波形数据
                        this.adata.push([item[0], item[1].toFixed(2)])
                        this.bdata.push([item[0], item[2].toFixed(2)])
                        this.cdata.push([item[0], item[3].toFixed(2)])
                        //第二组ABC波形数据
                        this.adata2.push([item[0], item[4].toFixed(2)])
                        this.bdata2.push([item[0], item[5].toFixed(2)])
                        this.cdata2.push([item[0], item[6].toFixed(2)])
                    })

                    //  let iPhasic =  data.iPhasic+1 //第二组起始下标
                    //   for(let i = 0;i<abcminData.length;i++){
                    //      for(let j = iPhasic;j<=waveTitle.length-1;j++){
                    //          let ctvalue = ((abcminData[i][j]).toFixed(2))
                    //          mindata2.push(ctvalue)
                    //      }
                    //   }

                    // console.log(

                    //将数据从小到大排序
                    mindata.sort(function (a, b) {
                        return a - b
                    })
                    mindata2.sort(function (a, b) {
                        return a - b
                    })

                    // console.log(

                    //得到第一组最小值
                    firstMin = (mindata[0] * 1.2).toFixed(2)
                    //得到第而组最小值
                    firstMin2 = (mindata2[0] * 1.2).toFixed(2)
                    //得到第一组最大值
                    firstMax = (mindata[mindata.length - 1] * 1.2).toFixed(2)
                    //得到第二组最大值
                    firstMax2 = (mindata2[mindata2.length - 1] * 1.2).toFixed(2)

                    eventValue = firstMin
                    event.push(['0', eventValue]) //暂降触发值
                    // this.shuju(abcminData)
                    this.boxiEcharts(event, firstMin, firstMax, firstMin2, firstMax2, title)
                }
            } else if (data.iPhasic == 2) {
                console.log('===========================')
                if (this.value == 1) {
                    this.adata = []
                    this.bdata = []
                    this.cdata = []
                    //第二组A
                    this.adata2 = []
                    this.bdata2 = []
                    this.cdata2 = []
                    this.dws = '电压(kV)'
                    let abcminData = data.listWaveData
                    // for(let i = 0;i<abcminData.length;i++){
                    //    for(let j = 1;j<=data.iPhasic;j++){
                    //        let ptvalue = ((abcminData[i][j]).toFixed(2))
                    //        mindata.push(ptvalue)
                    //    }
                    // }
                    abcminData.forEach(item => {
                        mindata.push(((item[1] / 1000) * pt).toFixed(2), ((item[2] / 1000) * pt).toFixed(2))
                        mindata2.push(item[4] * ct.toFixed(2), item[5] * ct.toFixed(2))

                        //第一组ABC波形数据
                        this.adata.push([item[0], ((item[1] / 1000) * pt).toFixed(2)])
                        this.bdata.push([item[0], ((item[2] / 1000) * pt).toFixed(2)])
                        //第二组ABC波形数据
                        this.adata2.push([item[0], item[4] * ct.toFixed(2)])
                        this.bdata2.push([item[0], item[5] * ct.toFixed(2)])
                    })

                    //  let iPhasic =  data.iPhasic+1 //第二组起始下标
                    //   for(let i = 0;i<abcminData.length;i++){
                    //      for(let j = iPhasic;j<=waveTitle.length-1;j++){
                    //          let ctvalue = ((abcminData[i][j]).toFixed(2))
                    //          mindata2.push(ctvalue)
                    //      }
                    //   }

                    // console.log(

                    //将数据从小到大排序
                    mindata.sort(function (a, b) {
                        return a - b
                    })
                    mindata2.sort(function (a, b) {
                        return a - b
                    })

                    // console.log(

                    //得到第一组最小值
                    firstMin = (mindata[0] * 1.2).toFixed(2)
                    //得到第而组最小值
                    firstMin2 = (mindata2[0] * 1.2).toFixed(2)
                    //得到第一组最大值
                    firstMax = (mindata[mindata.length - 1] * 1.2).toFixed(2)
                    //得到第二组最大值
                    firstMax2 = (mindata2[mindata2.length - 1] * 1.2).toFixed(2)

                    eventValue = firstMin
                    event.push(['0', eventValue]) //暂降触发值
                    // this.shuju(abcminData)
                    this.boxiEcharts(event, firstMin, firstMax, firstMin2, firstMax2, title)
                } else if (this.value == 2) {
                    this.adata = []
                    this.bdata = []
                    this.cdata = []
                    //第二组A
                    this.adata2 = []
                    this.bdata2 = []
                    this.cdata2 = []
                    this.dws = '电压(V)'
                    let abcminData = data.listWaveData
                    // for(let i = 0;i<abcminData.length;i++){
                    //    for(let j = 1;j<=data.iPhasic;j++){
                    //        let ptvalue = ((abcminData[i][j]).toFixed(2))
                    //        mindata.push(ptvalue)
                    //    }
                    // }
                    abcminData.forEach(item => {
                        mindata.push(item[1].toFixed(2), item[2].toFixed(2))
                        mindata2.push(item[4].toFixed(2), item[5].toFixed(2))

                        //第一组ABC波形数据
                        this.adata.push([item[0], item[1].toFixed(2)])
                        this.bdata.push([item[0], item[2].toFixed(2)])
                        //第二组ABC波形数据
                        this.adata2.push([item[0], item[4].toFixed(2)])
                        this.bdata2.push([item[0], item[5].toFixed(2)])
                    })

                    //  let iPhasic =  data.iPhasic+1 //第二组起始下标
                    //   for(let i = 0;i<abcminData.length;i++){
                    //      for(let j = iPhasic;j<=waveTitle.length-1;j++){
                    //          let ctvalue = ((abcminData[i][j]).toFixed(2))
                    //          mindata2.push(ctvalue)
                    //      }
                    //   }

                    //将数据从小到大排序
                    mindata.sort(function (a, b) {
                        return a - b
                    })
                    mindata2.sort(function (a, b) {
                        return a - b
                    })

                    //得到第一组最小值
                    firstMin = (mindata[0] * 1.2).toFixed(2)
                    //得到第而组最小值
                    firstMin2 = (mindata2[0] * 1.2).toFixed(2)
                    //得到第一组最大值
                    firstMax = (mindata[mindata.length - 1] * 1.2).toFixed(2)
                    //得到第二组最大值
                    firstMax2 = (mindata2[mindata2.length - 1] * 1.2).toFixed(2)

                    eventValue = firstMin
                    event.push(['0', eventValue]) //暂降触发值
                    // this.shuju(abcminData)
                    this.boxiEcharts(event, firstMin, firstMax, firstMin2, firstMax2, title)
                }
            }

            //获取abc中最小值做位暂降触发点,最小值为y轴
        },
        //第一个图组装波形数据
        shujuyicizhi(data, pt, ct) {
            //A相数据
            let adata = []
            //B相数据
            let bdata = []
            //C相数据
            let cdata = []

            //A相数据
            let adata2 = []
            //B相数据
            let bdata2 = []
            //C相数据
            let cdata2 = []
            for (let i = 0; i < data.length; i++) {
                //第一组ABC波形数据
                adata.push([data[i][0], ((data[i][1] * pt) / 1000).toFixed(2)])
                bdata.push([data[i][0], ((data[i][2] * pt) / 1000).toFixed(2)])
                cdata.push([data[i][0], ((data[i][3] * pt) / 1000).toFixed(2)])
                //第二组ABC波形数据
                adata2.push([data[i][0], (data[i][4] * ct).toFixed(2)])
                bdata2.push([data[i][0], (data[i][5] * ct).toFixed(2)])
                cdata2.push([data[i][0], (data[i][6] * ct).toFixed(2)])
            }

            this.adata = adata
            this.bdata = bdata
            this.cdata = cdata
            this.adata2 = adata2
            this.bdata2 = bdata2
            this.cdata2 = cdata2
        },
        //二次瞬时波形数据
        shuju(data) {
            //A相数据
            let adata = []
            //B相数据
            let bdata = []
            //C相数据
            let cdata = []

            //A相数据
            let adata2 = []
            //B相数据
            let bdata2 = []
            //C相数据
            let cdata2 = []
            for (let i = 0; i < data.length; i++) {
                //第一组ABC波形数据
                adata.push([data[i][0], data[i][1].toFixed(2)])
                bdata.push([data[i][0], data[i][2].toFixed(2)])
                cdata.push([data[i][0], data[i][3].toFixed(2)])
                //第二组ABC波形数据
                adata2.push([data[i][0], data[i][4].toFixed(2)])
                bdata2.push([data[i][0], data[i][5].toFixed(2)])
                cdata2.push([data[i][0], data[i][6].toFixed(2)])
            }

            this.adata = adata
            this.bdata = bdata
            this.cdata = cdata
            this.adata2 = adata2
            this.bdata2 = bdata2
            this.cdata2 = cdata2
        },
        //渲染瞬时波形
        boxiEcharts(event, firstMin, firstMax, firstMin2, firstMax2, title) {
            const echarts = require('echarts')
            // let w = document.getElementById("app-main-in").offsetWidth - 30;
            // let h = window.sessionStorage.getItem('appheight') -120
            let domIds = document.getElementById('boxin')
            // domIds.style.width = w+"px";
            // domIds.style.height = h/2 +'px';
            let domIdr = document.getElementById('boxin2')
            // domIdr.style.width = w+"px";
            // domIdr.style.height = h/2 +'px';
            var myChartes = echarts.init(domIds)
            var myChartes2 = echarts.init(domIdr)
            myChartes.clear()
            myChartes2.clear()
            var option = {
                tooltip: {
                    trigger: 'axis',
                    borderColor: 'grey',
                    backgroundColor: '#fff',
                    style: {
                        color: '#000',
                        fontSize: '15px',
                        padding: 10
                    },
                    formatter: function (params) {
                        // console.log(params)
                        var tips = ''
                        tips += '时刻:' + params[0].data[0] + '</br/>'

                        for (var i = 0; i < params.length; i++) {
                            tips += params[i].seriesName + ':' + params[i].value[1] + '<br/>'
                        }
                        return tips
                    }
                },
                title: {
                    left: 'center',
                    text: title,
                    textStyle: {
                        fontSize: '14px'
                    }
                },
                legend: {
                    data: this.legends,
                    left: '5%',
                    top: '25',
                    verticalAlign: 'top',
                    enabled: true,
                    itemDistance: 5
                },
                toolbox: {
                    //
                    show: true,
                    feature: {
                        myFull: {
                            show: true,
                            title: '全屏查看',
                            icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                            onclick: () => {
                                this.fullFlag = true
                                let element = document.getElementById('boxin')

                                // 一些浏览器的兼容性
                                if (element.requestFullScreen) {
                                    // HTML W3C 提议
                                    element.requestFullScreen()
                                } else if (element.msRequestFullscreen) {
                                    // IE11
                                    element.msRequestFullScreen()
                                } else if (element.webkitRequestFullScreen) {
                                    // Webkit (works in Safari5.1 and Chrome 15)
                                    element.webkitRequestFullScreen()
                                } else if (element.mozRequestFullScreen) {
                                    // Firefox (works in nightly)
                                    element.mozRequestFullScreen()
                                }

                                // 退出全屏
                                if (element.requestFullScreen) {
                                    document.exitFullscreen()
                                } else if (element.msRequestFullScreen) {
                                    document.msExitFullscreen()
                                } else if (element.webkitRequestFullScreen) {
                                    document.webkitCancelFullScreen()
                                } else if (element.mozRequestFullScreen) {
                                    document.mozCancelFullScreen()
                                }
                            }
                        },
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        ////restore: {},
                        saveAsImage: {}
                    }
                },

                xAxis: {
                    type: 'category',
                    name: 'ms',
                    boundaryGap: false,
                    title: {
                        text: 'ms',
                        enabled: true,
                        align: 'high'
                    },
                    labels: {
                        formatter: function () {
                            return this.value
                        }
                    }
                    //	data: this.syncExtremes
                },
                yAxis: {
                    type: 'value',
                    name: this.dws,
                    boundaryGap: [0, '100%'],
                    showLastLabel: true,
                    max: firstMax,
                    min: firstMin,

                    splitNumber: 1,
                    opposite: false,
                    axisLabel: {
                        formatter: '{value}'
                    },

                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#999999'
                        }
                    }
                },
                grid: {
                    left: '0%',
                    right: '2%',
                    bottom: '6%',
                    top: '15%',
                    containLabel: true
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 100
                    },
                    {
                        start: 0,
                        end: 100
                    }
                ],
                series: [
                    {
                        name: this.legends[0],
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'yellow'
                        },
                        data: this.adata
                    },
                    {
                        name: this.legends[1],
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'green'
                        },
                        data: this.bdata
                    },
                    {
                        name: this.legends[2],
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'red'
                        },
                        data: this.cdata
                    },
                    {
                        name: this.legends[3],
                        type: 'scatter',
                        symbol: 'image://' + this.url,
                        itemStyle: {
                            width: 16,
                            height: 16
                        },
                        data: event
                    }
                ]
            }

            var option1 = {
                tooltip: {
                    trigger: 'axis',
                    borderColor: 'grey',
                    backgroundColor: '#fff',
                    style: {
                        color: '#000',
                        fontSize: '15px',
                        padding: 10
                    },
                    formatter: function (params) {
                        // console.log(params)
                        var tips = ''
                        tips += '时刻:' + params[0].data[0] + '</br/>'

                        for (var i = 0; i < params.length; i++) {
                            tips += params[i].seriesName + ':' + params[i].value[1] + 'A<br/>'
                        }
                        return tips
                    }
                },
                title: {
                    left: 'center',
                    //text: title,
                    textStyle: {
                        fontSize: '14px'
                    }
                },
                legend: {
                    data: this.legends2,
                    left: '5%',
                    top: '25',
                    verticalAlign: 'top',
                    enabled: true,
                    itemDistance: 5
                },
                toolbox: {
                    //
                    show: true,
                    feature: {
                        myFull: {
                            show: true,
                            title: '全屏查看',
                            icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                            onclick: () => {
                                this.fullFlag = true
                                let element = document.getElementById('boxin2')

                                // 一些浏览器的兼容性
                                if (element.requestFullScreen) {
                                    // HTML W3C 提议
                                    element.requestFullScreen()
                                } else if (element.msRequestFullscreen) {
                                    // IE11
                                    element.msRequestFullScreen()
                                } else if (element.webkitRequestFullScreen) {
                                    // Webkit (works in Safari5.1 and Chrome 15)
                                    element.webkitRequestFullScreen()
                                } else if (element.mozRequestFullScreen) {
                                    // Firefox (works in nightly)
                                    element.mozRequestFullScreen()
                                }

                                // 退出全屏
                                if (element.requestFullScreen) {
                                    document.exitFullscreen()
                                } else if (element.msRequestFullScreen) {
                                    document.msExitFullscreen()
                                } else if (element.webkitRequestFullScreen) {
                                    document.webkitCancelFullScreen()
                                } else if (element.mozRequestFullScreen) {
                                    document.mozCancelFullScreen()
                                }
                            }
                        },
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        ////restore: {},
                        saveAsImage: {}
                    }
                },

                xAxis: {
                    type: 'category',
                    name: 'ms',
                    boundaryGap: false,
                    title: {
                        text: 'ms',
                        enabled: true,
                        align: 'high'
                    },
                    labels: {
                        formatter: function () {
                            return this.value
                        }
                    }
                    //	data: this.syncExtremes
                },
                yAxis: {
                    name: this.dws2,
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    showLastLabel: true,
                    max: firstMax2,
                    min: firstMin2,

                    splitNumber: 1,
                    opposite: false,
                    axisLabel: {
                        formatter: '{value}'
                    },

                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#999999'
                        }
                    }
                },
                grid: {
                    left: '0%',
                    right: '2%',
                    bottom: '6%',
                    top: '15%',
                    containLabel: true
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 100
                    },
                    {
                        start: 0,
                        end: 100
                    }
                ],
                series: [
                    {
                        name: this.legends2[0],
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'yellow'
                        },
                        data: this.adata2
                    },
                    {
                        name: this.legends2[1],
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'green'
                        },
                        data: this.bdata2
                    },
                    {
                        name: this.legends2[2],
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'red'
                        },
                        data: this.cdata2
                    }
                ]
            }

            myChartes.setOption(option)
            window.echartsArr.push(myChartes)
            myChartes2.setOption(option1)
            window.echartsArr.push(myChartes2)
            echarts.connect([myChartes, myChartes2])
            setInterval(() => {
                myChartes.resize()
                myChartes2.resize()
            }, 1000)
            setTimeout(() => {
                this.loading = false
            }, 500)
        },
        //绘制rms波形
        getRmsBoXinFenXi() {
            this.loading = true

            //组装标题
            let data = this.boxi
            let pt = data.pt
            let ct = data.ct
            //获取ABC3相图列
            //获取ABC中的最小值,最大值
            let rmswaveTitle = data.waveTitle
            let rmslegend = []
            let rmslegend2 = []

            // if (data.iPhasic == 3) {
            //   for (let i = 1; i < rmswaveTitle.length - 3; i++) {
            //     rmslegend.push(rmswaveTitle[i]);
            //   }
            //   for (let i = data.iPhasic + 1; i <= rmswaveTitle.length - 1; i++) {
            //     rmslegend2.push(rmswaveTitle[i]);
            //   }
            // }
            for (let i = 1; i < rmswaveTitle.length - data.iPhasic; i++) {
                rmslegend.push(rmswaveTitle[i])
            }
            for (let i = data.iPhasic + 1; i <= rmswaveTitle.length - 1; i++) {
                rmslegend2.push(rmswaveTitle[i])
            }
            rmslegend.push('暂降触发点')
            rmslegend.push('最小暂降幅值')
            if (rmslegend[0] == 'UA相' || rmslegend[0] == 'UB相' || rmslegend[0] == 'UC相') {
                let rmsdws = '电压(kV)'
                this.rmsdws = rmsdws
            } else if (rmslegend[0] == 'IA相' || rmslegend[0] == 'IB相' || rmslegend[0] == 'IC相') {
                let rmsdws = '电流(A)'
                this.rmsdws = rmsdws
            }

            this.rmslegends = rmslegend
            this.rmslegends2 = rmslegend2
            if (rmslegend2[0] == 'UA相' || rmslegend2[0] == 'UB相' || rmslegend2[0] == 'UC相') {
                let rmsdws2 = '电压(kV)'
                this.rmsdws2 = rmsdws2
            } else if (rmslegend2[0] == 'IA相' || rmslegend2[0] == 'IB相' || rmslegend2[0] == 'IC相') {
                let rmsdws2 = '电流(A)'
                this.rmsdws2 = rmsdws2
            }

            // console.log(

            // this.a = data.a
            // this.b = data.b
            // this.c = data.c
            let title =
                '变电站名称:' +
                data.subName +
                '--监测点名称:' +
                data.lineName +
                '--发生时刻:' +
                data.time +
                '--暂降幅值:' +
                data.eventValue +
                '%--持续时间:' +
                data.persistTime +
                's'

            let rmsfirstMin //第一个图最小值
            let rmsfirstMax //第一个图最大值
            let rmsfirstMin2 //第二个图最小值
            let rmsfirstMax2 //第二个图最大值
            let rmsmindata = [] //存放abc混合数据找最小值
            let rmsmindata2 = [] //存放第二组abc混合数据找最小值
            let rmseventValue = '' //存暂降y值
            let rmsevent = [] //暂降点数据存放
            let fuzhi = [] //最小暂降幅值数据存放
            //A相数据
            let rmsadata = []
            //B相数据
            let rmsbdata = []
            //C相数据
            let rmscdata = []

            //A相数据
            let rmsadata2 = []
            //B相数据
            let rmsbdata2 = []
            //C相数据
            let rmscdata2 = []
            //根据返回iPhasic相别标志,判断有几个图
            if (data.iPhasic == 3) {
                if (this.value == 1) {
                    this.rmsdws = '电压(kV)'
                    let rmsAbcminData = data.listRmsData
                    //判断一次值二次值
                    rmsAbcminData.forEach(item => {
                        rmsmindata.push(
                            ((item[1] / 1000) * pt).toFixed(2),
                            ((item[2] / 1000) * pt).toFixed(2),
                            ((item[3] / 1000) * pt).toFixed(2)
                        )
                        rmsmindata2.push(
                            (item[4] * ct).toFixed(2),
                            (item[5] * ct).toFixed(2),
                            (item[4] * ct).toFixed(2)
                        )
                        rmsadata.push([item[0], ((item[1] / 1000) * pt).toFixed(2)])
                        rmsbdata.push([item[0], ((item[2] / 1000) * pt).toFixed(2)])
                        rmscdata.push([item[0], ((item[3] / 1000) * pt).toFixed(2)])
                        //第二组ABC波形数据
                        rmsadata2.push([item[0], (item[4] * ct).toFixed(2)])
                        rmsbdata2.push([item[0], (item[5] * ct).toFixed(2)])
                        rmscdata2.push([item[0], (item[4] * ct).toFixed(2)])
                    })

                    this.rmsadata = rmsadata
                    this.rmsbdata = rmsbdata
                    this.rmscdata = rmscdata
                    this.rmsadata2 = rmsadata2
                    this.rmsbdata2 = rmsbdata2
                    this.rmscdata2 = rmscdata2

                    // console.log(

                    //将数据从小到大排序
                    rmsmindata.sort(function (a, b) {
                        return a - b
                    })
                    rmsmindata2.sort(function (a, b) {
                        return a - b
                    })
                    // debugger
                    // for(let i=0;i<rmsAbcminData.length;i++){
                    //     if(((rmsAbcminData[i][1]).toFixed(2))==rmsmindata[0]){
                    //      // debugger
                    //        fuzhi.push([rmsAbcminData[i][0],rmsmindata[0]])
                    //        break;
                    //     }else if(((rmsAbcminData[i][2]).toFixed(2))==rmsmindata){
                    //        fuzhi.push([rmsAbcminData[i][0],rmsmindata[0]])
                    //        break;
                    //     }else if(((rmsAbcminData[i][3]).toFixed(2))==rmsmindata[0]){
                    //        fuzhi.push([rmsAbcminData[i][0],rmsmindata[0]])
                    //       break;
                    //     }

                    // }

                    // console.log(

                    //得到第一组最小值
                    rmsfirstMin = (rmsmindata[0] * 1.2).toFixed(2)
                    fuzhi = [['-27.66', rmsfirstMin]]

                    //得到第而组最小值
                    rmsfirstMin2 = (rmsmindata2[0] * 1.2).toFixed(2)
                    //得到第一组最大值
                    rmsfirstMax = (rmsmindata[rmsmindata.length - 1] * 1.2).toFixed(2)
                    //得到第二组最大值
                    rmsfirstMax2 = (rmsmindata2[rmsmindata2.length - 1] * 1.2).toFixed(2)

                    rmseventValue = rmsfirstMin
                    rmsevent.push(['0', rmseventValue]) //暂降触发值
                    // this.rmsshuju(rmsAbcminData);
                    this.rmsboxiEcharts(rmsevent, rmsfirstMin, rmsfirstMax, rmsfirstMin2, rmsfirstMax2, fuzhi, title)
                } else if (this.value == 2) {
                    this.rmsdws = '电压(V)'
                    let rmsAbcminData = data.listRmsData
                    //判断一次值二次值
                    rmsAbcminData.forEach(item => {
                        rmsmindata.push(item[1].toFixed(2), item[2].toFixed(2), item[3].toFixed(2))
                        rmsmindata2.push(item[4].toFixed(2), item[5].toFixed(2), item[6].toFixed(2))
                        rmsadata.push([item[0], item[1].toFixed(2)])
                        rmsbdata.push([item[0], item[2].toFixed(2)])
                        rmscdata.push([item[0], item[3].toFixed(2)])
                        //第二组ABC波形数据
                        rmsadata2.push([item[0], item[4].toFixed(2)])
                        rmsbdata2.push([item[0], item[5].toFixed(2)])
                        rmscdata2.push([item[0], item[6].toFixed(2)])
                    })
                    this.rmsadata = rmsadata
                    this.rmsbdata = rmsbdata
                    this.rmscdata = rmscdata
                    this.rmsadata2 = rmsadata2
                    this.rmsbdata2 = rmsbdata2
                    this.rmscdata2 = rmscdata2
                    //   for(let i = 0;i<rmsAbcminData.length;i++){
                    //      for(let j = 1;j<=data.iPhasic;j++){
                    //          let ptvalue = (rmsAbcminData[i][j]).toFixed(2)
                    //          rmsmindata.push(ptvalue)
                    //      }
                    //   }
                    //  let iPhasic =  data.iPhasic+1 //第二组起始下标
                    //   for(let i = 0;i<rmsAbcminData.length;i++){
                    //      for(let j = iPhasic;j<=rmswaveTitle.length-1;j++){
                    //          let ctvalue = (rmsAbcminData[i][j]).toFixed(2)
                    //          rmsmindata2.push(ctvalue)
                    //      }
                    //   }

                    // console.log(

                    //将数据从小到大排序
                    rmsmindata.sort(function (a, b) {
                        return a - b
                    })
                    rmsmindata2.sort(function (a, b) {
                        return a - b
                    })
                    // debugger
                    // for(let i=0;i<rmsAbcminData.length;i++){
                    //     if(((rmsAbcminData[i][1]).toFixed(2))==rmsmindata[0]){
                    //      // debugger
                    //        fuzhi.push([rmsAbcminData[i][0],rmsmindata[0]])
                    //        break;
                    //     }else if(((rmsAbcminData[i][2]).toFixed(2))==rmsmindata){
                    //        fuzhi.push([rmsAbcminData[i][0],rmsmindata[0]])
                    //        break;
                    //     }else if(((rmsAbcminData[i][3]).toFixed(2))==rmsmindata[0]){
                    //        fuzhi.push([rmsAbcminData[i][0],rmsmindata[0]])
                    //       break;
                    //     }

                    // }

                    // console.log(

                    // );
                    //得到第一组最小值
                    rmsfirstMin = (rmsmindata[0] * 1.2).toFixed(2)
                    fuzhi = [['-27.66', rmsfirstMin]]
                    //得到第而组最小值
                    rmsfirstMin2 = (rmsmindata2[0] * 1.2).toFixed(2)
                    //得到第一组最大值
                    rmsfirstMax = (rmsmindata[rmsmindata.length - 1] * 1.2).toFixed(2)
                    //得到第二组最大值
                    rmsfirstMax2 = (rmsmindata2[rmsmindata2.length - 1] * 1.2).toFixed(2)

                    rmseventValue = rmsfirstMin
                    rmsevent.push(['0', rmseventValue]) //暂降触发值
                    // this.rmsshuju(rmsAbcminData);
                    this.rmsboxiEcharts(rmsevent, rmsfirstMin, rmsfirstMax, rmsfirstMin2, rmsfirstMax2, fuzhi, title)
                }
                //获取abc中最小值做位暂降触发点,最小值为y轴
            } else if (data.iPhasic == 2) {
                if (this.value == 1) {
                    this.rmsdws = '电压(kV)'
                    let rmsAbcminData = data.listRmsData
                    //判断一次值二次值
                    rmsAbcminData.forEach(item => {
                        rmsmindata.push(((item[1] / 1000) * pt).toFixed(2), ((item[2] / 1000) * pt).toFixed(2))
                        rmsmindata2.push((item[4] * ct).toFixed(2), (item[5] * ct).toFixed(2))
                        rmsadata.push([item[0], ((item[1] / 1000) * pt).toFixed(2)])
                        rmsbdata.push([item[0], ((item[2] / 1000) * pt).toFixed(2)])
                        //第二组ABC波形数据
                        rmsadata2.push([item[0], (item[4] * ct).toFixed(2)])
                        rmsbdata2.push([item[0], (item[5] * ct).toFixed(2)])
                    })

                    this.rmsadata = rmsadata
                    this.rmsbdata = rmsbdata
                    this.rmscdata = rmscdata
                    this.rmsadata2 = rmsadata2
                    this.rmsbdata2 = rmsbdata2
                    this.rmscdata2 = rmscdata2

                    //将数据从小到大排序
                    rmsmindata.sort(function (a, b) {
                        return a - b
                    })
                    rmsmindata2.sort(function (a, b) {
                        return a - b
                    })
                    // debugger
                    // for(let i=0;i<rmsAbcminData.length;i++){
                    //     if(((rmsAbcminData[i][1]).toFixed(2))==rmsmindata[0]){
                    //      // debugger
                    //        fuzhi.push([rmsAbcminData[i][0],rmsmindata[0]])
                    //        break;
                    //     }else if(((rmsAbcminData[i][2]).toFixed(2))==rmsmindata){
                    //        fuzhi.push([rmsAbcminData[i][0],rmsmindata[0]])
                    //        break;
                    //     }else if(((rmsAbcminData[i][3]).toFixed(2))==rmsmindata[0]){
                    //        fuzhi.push([rmsAbcminData[i][0],rmsmindata[0]])
                    //       break;
                    //     }

                    // }

                    //得到第一组最小值
                    rmsfirstMin = (rmsmindata[0] * 1.2).toFixed(2)
                    fuzhi = [['-27.66', rmsfirstMin]]

                    //得到第而组最小值
                    rmsfirstMin2 = (rmsmindata2[0] * 1.2).toFixed(2)
                    //得到第一组最大值
                    rmsfirstMax = (rmsmindata[rmsmindata.length - 1] * 1.2).toFixed(2)
                    //得到第二组最大值
                    rmsfirstMax2 = (rmsmindata2[rmsmindata2.length - 1] * 1.2).toFixed(2)

                    rmseventValue = rmsfirstMin
                    rmsevent.push(['0', rmseventValue]) //暂降触发值
                    // this.rmsshuju(rmsAbcminData);
                    this.rmsboxiEcharts(rmsevent, rmsfirstMin, rmsfirstMax, rmsfirstMin2, rmsfirstMax2, fuzhi, title)
                } else if (this.value == 2) {
                    this.rmsdws = '电压(V)'
                    let rmsAbcminData = data.listRmsData
                    //判断一次值二次值
                    rmsAbcminData.forEach(item => {
                        rmsmindata.push(item[1].toFixed(2), item[2].toFixed(2))
                        rmsmindata2.push(item[4].toFixed(2), item[5].toFixed(2))
                        rmsadata.push([item[0], item[1].toFixed(2)])
                        rmsbdata.push([item[0], item[2].toFixed(2)])
                        //第二组ABC波形数据
                        rmsadata2.push([item[0], item[4].toFixed(2)])
                        rmsbdata2.push([item[0], item[5].toFixed(2)])
                    })
                    this.rmsadata = rmsadata
                    this.rmsbdata = rmsbdata
                    this.rmscdata = rmscdata
                    this.rmsadata2 = rmsadata2
                    this.rmsbdata2 = rmsbdata2
                    this.rmscdata2 = rmscdata2
                    //   for(let i = 0;i<rmsAbcminData.length;i++){
                    //      for(let j = 1;j<=data.iPhasic;j++){
                    //          let ptvalue = (rmsAbcminData[i][j]).toFixed(2)
                    //          rmsmindata.push(ptvalue)
                    //      }
                    //   }
                    //  let iPhasic =  data.iPhasic+1 //第二组起始下标
                    //   for(let i = 0;i<rmsAbcminData.length;i++){
                    //      for(let j = iPhasic;j<=rmswaveTitle.length-1;j++){
                    //          let ctvalue = (rmsAbcminData[i][j]).toFixed(2)
                    //          rmsmindata2.push(ctvalue)
                    //      }
                    //   }

                    // console.log(

                    //将数据从小到大排序
                    rmsmindata.sort(function (a, b) {
                        return a - b
                    })
                    rmsmindata2.sort(function (a, b) {
                        return a - b
                    })
                    // debugger
                    // for(let i=0;i<rmsAbcminData.length;i++){
                    //     if(((rmsAbcminData[i][1]).toFixed(2))==rmsmindata[0]){
                    //      // debugger
                    //        fuzhi.push([rmsAbcminData[i][0],rmsmindata[0]])
                    //        break;
                    //     }else if(((rmsAbcminData[i][2]).toFixed(2))==rmsmindata){
                    //        fuzhi.push([rmsAbcminData[i][0],rmsmindata[0]])
                    //        break;
                    //     }else if(((rmsAbcminData[i][3]).toFixed(2))==rmsmindata[0]){
                    //        fuzhi.push([rmsAbcminData[i][0],rmsmindata[0]])
                    //       break;
                    //     }

                    // }

                    // console.log(

                    //得到第一组最小值
                    rmsfirstMin = (rmsmindata[0] * 1.2).toFixed(2)
                    fuzhi = [['-27.66', rmsfirstMin]]
                    //得到第而组最小值
                    rmsfirstMin2 = (rmsmindata2[0] * 1.2).toFixed(2)
                    //得到第一组最大值
                    rmsfirstMax = (rmsmindata[rmsmindata.length - 1] * 1.2).toFixed(2)
                    //得到第二组最大值
                    rmsfirstMax2 = (rmsmindata2[rmsmindata2.length - 1] * 1.2).toFixed(2)

                    rmseventValue = rmsfirstMin
                    rmsevent.push(['0', rmseventValue]) //暂降触发值
                    // this.rmsshuju(rmsAbcminData);
                    this.rmsboxiEcharts(rmsevent, rmsfirstMin, rmsfirstMax, rmsfirstMin2, rmsfirstMax2, fuzhi, title)
                }
            }
        },
        rmsshujuyicizhi(data, pt, ct) {
            //A相数据
            let rmsadata = []
            //B相数据
            let rmsbdata = []
            //C相数据
            let rmscdata = []

            //A相数据
            let rmsadata2 = []
            //B相数据
            let rmsbdata2 = []
            //C相数据
            let rmscdata2 = []
            for (let i = 0; i < data.length; i++) {
                //第一组ABC波形数据
                rmsadata.push([data[i][0], ((data[i][1] * pt) / 1000).toFixed(2)])
                rmsbdata.push([data[i][0], ((data[i][2] * pt) / 1000).toFixed(2)])
                rmscdata.push([data[i][0], ((data[i][3] * pt) / 1000).toFixed(2)])
                //第二组ABC波形数据
                rmsadata2.push([data[i][0], (data[i][4] * ct).toFixed(2)])
                rmsbdata2.push([data[i][0], (data[i][5] * ct).toFixed(2)])
                rmscdata2.push([data[i][0], (data[i][6] * ct).toFixed(2)])
            }
            this.rmsadata = rmsadata
            this.rmsbdata = rmsbdata
            this.rmscdata = rmscdata
            this.rmsadata2 = rmsadata2
            this.rmsbdata2 = rmsbdata2
            this.rmscdata2 = rmscdata2
            // console.log(
        },

        //渲染rms波形
        rmsboxiEcharts(rmsevent, rmsfirstMin, rmsfirstMax, rmsfirstMin2, rmsfirstMax2, fuzhi, title) {
            const echarts = require('echarts')
            // let w = document.getElementById("app-main-in").offsetWidth - 30;
            // let h = window.sessionStorage.getItem('appheight') - 120;
            let rmsdomIds = document.getElementById('rmsboxin')
            // rmsdomIds.style.width = w+"px";
            // rmsdomIds.style.height =  h/2 +'px';
            let rmsdomIdr = document.getElementById('rmsboxin2')
            // rmsdomIdr.style.width = w+"px";
            // rmsdomIdr.style.height =  h/2 +'px';
            var myChartes = echarts.init(rmsdomIds)
            var myChartes2 = echarts.init(rmsdomIdr)
            myChartes.clear()
            myChartes2.clear()
            var option = {
                tooltip: {
                    trigger: 'axis',
                    borderColor: 'grey',
                    backgroundColor: '#fff',
                    style: {
                        color: '#000',
                        fontSize: '15px',
                        padding: 10
                    },
                    formatter: function (params) {
                        // console.log(params)
                        var tips = ''
                        tips += '时刻:' + params[0].data[0] + '</br/>'

                        for (var i = 0; i < params.length; i++) {
                            tips += params[i].seriesName + ':' + params[i].value[1] + 'V<br/>'
                        }
                        return tips
                    }
                },
                title: {
                    left: 'center',
                    //top:'2%',
                    text: title,
                    textStyle: {
                        fontSize: '14px'
                    }
                },
                legend: {
                    data: this.rmslegends,
                    left: '5%',
                    top: '25',
                    verticalAlign: 'top',
                    enabled: true,
                    itemDistance: 8
                },
                toolbox: {
                    //
                    show: true,
                    feature: {
                        myFull: {
                            show: true,
                            title: '全屏查看',
                            icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                            onclick: () => {
                                this.fullFlag = true
                                let element = document.getElementById('rmsboxin')

                                // 一些浏览器的兼容性
                                if (element.requestFullScreen) {
                                    // HTML W3C 提议
                                    element.requestFullScreen()
                                } else if (element.msRequestFullscreen) {
                                    // IE11
                                    element.msRequestFullScreen()
                                } else if (element.webkitRequestFullScreen) {
                                    // Webkit (works in Safari5.1 and Chrome 15)
                                    element.webkitRequestFullScreen()
                                } else if (element.mozRequestFullScreen) {
                                    // Firefox (works in nightly)
                                    element.mozRequestFullScreen()
                                }

                                // 退出全屏
                                if (element.requestFullScreen) {
                                    document.exitFullscreen()
                                } else if (element.msRequestFullScreen) {
                                    document.msExitFullscreen()
                                } else if (element.webkitRequestFullScreen) {
                                    document.webkitCancelFullScreen()
                                } else if (element.mozRequestFullScreen) {
                                    document.mozCancelFullScreen()
                                }
                            }
                        },
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        ////restore: {},
                        saveAsImage: {}
                    }
                },

                xAxis: {
                    type: 'category',
                    name: 'ms',
                    boundaryGap: false,
                    title: {
                        text: 'ms',
                        enabled: true,
                        align: 'high'
                    },
                    labels: {
                        formatter: function () {
                            return this.value
                        }
                    }
                    //	data: this.syncExtremes
                },
                yAxis: {
                    type: 'value',
                    name: this.rmsdws,
                    boundaryGap: [0, '100%'],
                    showLastLabel: true,
                    max: rmsfirstMax,
                    min: rmsfirstMin,

                    splitNumber: 1,
                    opposite: false,
                    axisLabel: {
                        formatter: '{value}'
                    },

                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#999999'
                        }
                    }
                },
                grid: {
                    left: '0%',
                    right: '2%',
                    bottom: '6%',
                    top: '15%',
                    containLabel: true
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 100
                    },
                    {
                        start: 0,
                        end: 100
                    }
                ],
                series: [
                    {
                        name: this.rmslegends[0],
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'yellow'
                        },
                        data: this.rmsadata
                    },
                    {
                        name: this.rmslegends[1],
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'green'
                        },
                        data: this.rmsbdata
                    },
                    {
                        name: this.rmslegends[2],
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'red'
                        },
                        data: this.rmscdata
                    },
                    {
                        name: this.rmslegends[3],
                        type: 'scatter',
                        symbol: 'image://' + this.url,
                        itemStyle: {
                            width: 16,
                            height: 16
                        },
                        data: rmsevent
                    },
                    {
                        name: this.rmslegends[4],
                        type: 'scatter',
                        symbol: 'image://' + this.url2,
                        itemStyle: {
                            width: 45,
                            height: 45
                        },
                        label: {
                            show: true,
                            position: [5, -25],
                            color: '#0099FF',
                            fontSize: '14px',
                            fontWeight: 'bold',
                            borderType: 'solid',
                            borderWidth: 0.5,
                            backgroundColor: '#ccc',
                            borderColor: '0099FF'
                        },
                        data: fuzhi
                    }
                ]
            }

            var option1 = {
                tooltip: {
                    trigger: 'axis',
                    borderColor: 'grey',
                    backgroundColor: '#fff',
                    style: {
                        color: '#000',
                        fontSize: '15px',
                        padding: 10
                    },
                    formatter: function (params) {
                        // console.log(params)
                        var tips = ''
                        tips += '时刻:' + params[0].data[0] + '</br/>'

                        for (var i = 0; i < params.length; i++) {
                            tips += params[i].seriesName + ':' + params[i].value[1] + 'A<br/>'
                        }
                        return tips
                    }
                },
                title: {
                    left: 'center',
                    //text: title,
                    textStyle: {
                        fontSize: '14px'
                    }
                },
                legend: {
                    data: this.rmslegends2,
                    left: '5%',
                    top: '25',
                    verticalAlign: 'top',
                    enabled: true,
                    itemDistance: 5
                },
                toolbox: {
                    //
                    show: true,
                    feature: {
                        myFull: {
                            show: true,
                            title: '全屏查看',
                            icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                            onclick: () => {
                                this.fullFlag = true
                                let element = document.getElementById('rmsboxin2')

                                // 一些浏览器的兼容性
                                if (element.requestFullScreen) {
                                    // HTML W3C 提议
                                    element.requestFullScreen()
                                } else if (element.msRequestFullscreen) {
                                    // IE11
                                    element.msRequestFullScreen()
                                } else if (element.webkitRequestFullScreen) {
                                    // Webkit (works in Safari5.1 and Chrome 15)
                                    element.webkitRequestFullScreen()
                                } else if (element.mozRequestFullScreen) {
                                    // Firefox (works in nightly)
                                    element.mozRequestFullScreen()
                                }

                                // 退出全屏
                                // 退出全屏
                                if (element.requestFullScreen) {
                                    document.exitFullscreen()
                                } else if (element.msRequestFullScreen) {
                                    document.msExitFullscreen()
                                } else if (element.webkitRequestFullScreen) {
                                    document.webkitCancelFullScreen()
                                } else if (element.mozRequestFullScreen) {
                                    document.mozCancelFullScreen()
                                }
                            }
                        },
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        ////restore: {},
                        saveAsImage: {}
                    }
                },

                xAxis: {
                    type: 'category',
                    name: 'ms',
                    boundaryGap: false,
                    title: {
                        text: 'ms',
                        enabled: true,
                        align: 'high'
                    },
                    labels: {
                        formatter: function () {
                            return this.value
                        }
                    }
                    //	data: this.syncExtremes
                },
                yAxis: {
                    name: this.rmsdws2,
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    showLastLabel: true,
                    max: rmsfirstMax2,
                    min: rmsfirstMin2,

                    splitNumber: 1,
                    opposite: false,
                    axisLabel: {
                        formatter: '{value}'
                    },

                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#999999'
                        }
                    }
                },
                grid: {
                    left: '0%',
                    right: '2%',
                    bottom: '6%',
                    top: '15%',
                    containLabel: true
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 100
                    },
                    {
                        start: 0,
                        end: 100
                    }
                ],
                series: [
                    {
                        name: this.rmslegends2[0],
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'yellow'
                        },
                        data: this.rmsadata2
                    },
                    {
                        name: this.rmslegends2[1],
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'green'
                        },
                        data: this.rmsbdata2
                    },
                    {
                        name: this.rmslegends2[2],
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'red'
                        },
                        data: this.rmscdata2
                    }
                ]
            }

            myChartes.setOption(option)
            window.echartsArr.push(myChartes)
            myChartes2.setOption(option1)
            window.echartsArr.push(myChartes2)
            echarts.connect([myChartes, myChartes2])
            setInterval(() => {
                myChartes.resize()
                myChartes2.resize()
            }, 1000)
            setTimeout(() => {
                this.loading = false
            }, 500)
        },
        //标签切换
        handleClick(tab, event) {
            this.loading = true
            console.log(this.loading)
            if (tab.name == 'first') {
                this.boxId = 'box1'
                //this.$nextTick(()=> {
                this.getBoXinFenXi()
                // })
            } else {
                this.boxId = 'box2'

                //this.$nextTick(()=> {
                this.getRmsBoXinFenXi()
                // })
            }
        },
        //值改变触发函数
        valuechange(val) {
            console.log(this.loading)

            this.loading = true
            this.getBoXinFenXi()
            this.getRmsBoXinFenXi()
        },
        // 全屏展示
        whole() {
            this.fullFlag = true

            let element = document.getElementById(this.boxId)

            // 一些浏览器的兼容性
            if (element.requestFullScreen) {
                // HTML W3C 提议
                element.requestFullScreen()
            } else if (element.msRequestFullscreen) {
                // IE11
                element.msRequestFullScreen()
            } else if (element.webkitRequestFullScreen) {
                // Webkit (works in Safari5.1 and Chrome 15)
                element.webkitRequestFullScreen()
            } else if (element.mozRequestFullScreen) {
                // Firefox (works in nightly)
                element.mozRequestFullScreen()
            } else {
                // 退出全屏
                if (element.requestFullScreen) {
                    document.exitFullscreen()
                } else if (element.msRequestFullScreen) {
                    document.msExitFullscreen()
                } else if (element.webkitRequestFullScreen) {
                    document.webkitCancelFullScreen()
                } else if (element.mozRequestFullScreen) {
                    document.mozCancelFullScreen()
                }
            }
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../styles/comStyle.less');
.history_trend :-webkit-full-screen {
    width: 100%;
    height: 100%;
    padding-top: 100px;
    padding-left: 100px;
    background-color: white !important;
}
.history_trend :-moz-full-screen {
    background-color: white !important;
}
.history_trend :-ms-full-screen {
    background-color: white !important;
}
.history_trend :fullscreen {
    background-color: white !important;
}
.history_trend .dialog_wrapper .el-checkbox-group {
    width: 100% !important;
}
.boxDiv {
    display: flex;
    justify-content: space-between;
    padding-right: 20px;
}
</style>
