<template>
    <div>
        <!-- <span style="float:left;margin-top: -2.5%;">值选择:</span> -->
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <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>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" icon="el-icon-close" @click="back">返回</el-button>
            </el-form-item>
        </el-form>

        <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick" :style="'height:' + vh + 'px'">
            <el-tab-pane ref="bxf" label="瞬时波形" name="first">
                <div id="ssbx" v-if="activeName == 'first'" :style="'height:' + vhh + 'px;overflow-y: scroll'">
                    <div v-loading="loading" id="boxin1" :style="`height:${vhhh}`"></div>
                    <div v-loading="loading" id="boxin2" :style="`height:${vhhh}`"></div>
                </div>
            </el-tab-pane>
            <el-tab-pane ref="rmsbxf" label="rms波形" name="second">
                <div id="rmsbx" v-if="activeName == 'second'" :style="'height:' + vhh + 'px;overflow-y: scroll'">
                    <div v-loading="loading" id="rmsboxin3" :style="`height:${vhhh}`"></div>
                    <div v-loading="loading" id="rmsboxin4" :style="`height:${vhhh}`"></div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import echarts from 'echarts'
import boxis from '@/views/Photovoltaic-system/boxi'
export default {
    props: {
        bxshuju: {
            type: Object,
            default: undefined
        }
    },
    data() {
        return {
            vh: null,
            vhh: null,
            vhhh: null,
            zoom: '',
            loading: false,
            value: 1,
            options: [
                {
                    value: 1,
                    label: '一次值'
                },
                {
                    value: 2,
                    label: '二次值'
                }
            ],
            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: [],
            pt: null,
            ct: null
            // boxi: boxis
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        // window.addEventListener("resize", () => {
        //   this.zoom = 1 / document.body.style.zoom;
        //   this.myChartes1.resize();
        //   this.myChartes2.resize();
        //   this.myChartes3.resize();
        //   this.myChartes4.resize();
        // });

        this.getBoXinFenXi()
        this.getRmsBoXinFenXi()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 58
            this.vhh = window.sessionStorage.getItem('appheight') - 120
            this.vhhh = (window.sessionStorage.getItem('appheight') - 120) / 2 + 'px'
        },
        back() {
            this.$emit('backfh')
        },
        //绘制瞬时波形
        getBoXinFenXi() {
            //this.loading = true
            //组装标题
            let data = boxis
            this.pt = data.pt
            this.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])
                }
            }
            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
            }
            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
            }

            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

                    abcminData.forEach(item => {
                        mindata.push(
                            ((item[1] / 1000) * this.pt).toFixed(2),
                            ((item[2] / 1000) * this.pt).toFixed(2),
                            ((item[3] / 1000) * this.pt).toFixed(2)
                        )
                        mindata2.push(
                            (item[4] * this.pt).toFixed(2),
                            (item[5] * this.pt).toFixed(2),
                            (item[6] * this.pt).toFixed(2)
                        )

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

                    mindata.sort(function (a, b) {
                        return a - b
                    })
                    mindata2.sort(function (a, b) {
                        return a - b
                    })

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

                    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

                    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)])
                    })

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

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

                    eventValue = firstMin
                    event.push(['0', eventValue]) //暂降触发值
                    this.$nextTick(() => {
                        this.boxiEcharts(event, firstMin, firstMax, firstMin2, firstMax2, title)
                    })
                }
            } else if (data.iPhasic == 2) {
            }

            //获取abc中最小值做位暂降触发点,最小值为y轴
        },
        //渲染瞬时波形
        boxiEcharts(event, firstMin, firstMax, firstMin2, firstMax2, title) {
            const echarts = require('echarts')
            let domIds = document.getElementById('boxin1')
            let domIdr = document.getElementById('boxin2')
            // setTimeout(() => {

            //   domIds.style.width = window.sessionStorage.getItem("appwidth") - 330+'px';
            //   domIds.style.height =   window.sessionStorage.getItem('appheight')/2+'px';
            //   domIdr.style.width = window.sessionStorage.getItem("appwidth") - 330+'px';
            //   domIdr.style.height =   window.sessionStorage.getItem('appheight')/2+'px';
            // } ,0)
            var myChartes1 = echarts.init(domIds)
            var myChartes2 = echarts.init(domIdr)
            myChartes1.clear()
            myChartes2.clear()
            var option = {
                tooltip: {
                    trigger: 'axis',
                    borderColor: 'grey',
                    backgroundColor: '#fff',
                    style: {
                        color: '#000',
                        fontSize: '15px',
                        padding: 10
                    },
                    formatter: function (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: '3%',
                    verticalAlign: 'top',
                    enabled: true,
                    itemDistance: 5
                },
                toolbox: {
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        ////restore: {},
                        saveAsImage: {}
                    },
                    right: '2%'
                },
                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: 8,
                    // minInterval:1,
                    // interval: firstMax / 5,
                    opposite: false,
                    axisLabel: {
                        formatter: '{value}'
                    },

                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#999999'
                        }
                    }
                },
                grid: {
                    left: '1%',
                    right: '2%',
                    bottom: '3%',
                    top: '10%',
                    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) {
                        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: '3%',
                    verticalAlign: 'top',
                    enabled: true,
                    itemDistance: 5
                },
                toolbox: {
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        ////restore: {},
                        saveAsImage: {}
                    },
                    right: '2%'
                },
                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: 8,
                    // minInterval:1,
                    // interval: firstMax / 5,
                    opposite: false,
                    axisLabel: {
                        formatter: '{value}'
                    },

                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#999999'
                        }
                    }
                },
                grid: {
                    left: '1%',
                    right: '2%',
                    bottom: '3%',
                    top: '10%',
                    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
                    }
                ]
            }

            myChartes1.setOption(option)
            window.echartsArr.push(myChartes1)

            myChartes2.setOption(option1)
            window.echartsArr.push(myChartes2)

            this.loading = false
            let _this = this
            _this.$erd.listenTo(_this.$refs.bxf, element => {
                //_this.$nextTick(() => {
                myChartes1.resize()
                myChartes2.resize()
                //})
            })
            echarts.connect([myChartes1, myChartes2])
        },
        //绘制rms波形
        getRmsBoXinFenXi() {
            //this.loading = true
            //组装标题
            let data = boxis
            // let pt = data.pt;
            // let ct = data.ct;
            let xdata = data.listRmsData[0][0]
            //获取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])
                }
            }
            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
            }

            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) * this.pt).toFixed(2),
                            ((item[2] / 1000) * this.pt).toFixed(2),
                            ((item[3] / 1000) * this.pt).toFixed(2)
                        )
                        rmsmindata2.push(
                            (item[4] * this.ct).toFixed(2),
                            (item[5] * this.ct).toFixed(2),
                            (item[4] * this.ct).toFixed(2)
                        )
                        rmsadata.push([item[0], ((item[1] / 1000) * this.pt).toFixed(2)])
                        rmsbdata.push([item[0], ((item[2] / 1000) * this.pt).toFixed(2)])
                        rmscdata.push([item[0], ((item[3] / 1000) * this.pt).toFixed(2)])
                        //第二组ABC波形数据
                        rmsadata2.push([item[0], (item[4] * this.ct).toFixed(2)])
                        rmsbdata2.push([item[0], (item[5] * this.ct).toFixed(2)])
                        rmscdata2.push([item[0], (item[4] * this.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
                    })

                    //得到第一组最小值
                    rmsfirstMin = rmsmindata[0]
                    fuzhi = [[xdata, rmsfirstMin]]

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

                    rmseventValue = rmsfirstMin
                    rmsevent.push(['0', rmseventValue]) //暂降触发值
                    this.$nextTick(() => {
                        this.rmsboxiEcharts(
                            rmsevent,
                            rmsfirstMin,
                            rmsfirstMax,
                            rmsfirstMin2,
                            rmsfirstMax2,
                            fuzhi,
                            title
                        )
                    })
                } else if (this.value == 2) {
                    this.rmsdws = '电压(kV)'
                    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[4].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

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

                    //得到第一组最小值
                    rmsfirstMin = rmsmindata[0]
                    fuzhi = [[xdata, rmsfirstMin]]
                    //得到第而组最小值
                    rmsfirstMin2 = rmsmindata2[0]
                    //得到第一组最大值
                    rmsfirstMax = rmsmindata[rmsmindata.length - 1]
                    //得到第二组最大值
                    rmsfirstMax2 = rmsmindata2[rmsmindata2.length - 1]

                    rmseventValue = rmsfirstMin
                    rmsevent.push(['0', rmseventValue]) //暂降触发值
                    this.rmsboxiEcharts(rmsevent, rmsfirstMin, rmsfirstMax, rmsfirstMin2, rmsfirstMax2, fuzhi, title)
                }
                //获取abc中最小值做位暂降触发点,最小值为y轴
            } else if (data.iPhasic == 2) {
            }
        },
        //渲染rms波形
        rmsboxiEcharts(rmsevent, rmsfirstMin, rmsfirstMax, rmsfirstMin2, rmsfirstMax2, fuzhi, title) {
            const echarts = require('echarts')
            let rmsdomIds = document.getElementById('rmsboxin3')
            let rmsdomIdr = document.getElementById('rmsboxin4')
            // setTimeout(() => {
            //   rmsdomIds.style.width = document.getElementById("app").offsetWidth - 330+'px';
            //   rmsdomIds.style.height =   window.sessionStorage.getItem('appheight')/2+'px';
            //   rmsdomIdr.style.width = window.sessionStorage.getItem("appwidth") - 330+'px';
            //   rmsdomIdr.style.height =   window.sessionStorage.getItem('appheight')/2+'px';
            // }, 0)
            var myChartes3 = echarts.init(rmsdomIds)
            var myChartes4 = echarts.init(rmsdomIdr)
            myChartes3.clear()
            myChartes4.clear()
            var option = {
                tooltip: {
                    trigger: 'axis',
                    borderColor: 'grey',
                    backgroundColor: '#fff',
                    style: {
                        color: '#000',
                        fontSize: '15px',
                        padding: 10
                    },
                    formatter: function (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: '7%',
                    verticalAlign: 'top',
                    enabled: true,
                    itemDistance: 8
                },
                toolbox: {
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        ////restore: {},
                        saveAsImage: {}
                    },
                    right: '2%'
                },
                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: 8,
                    opposite: false,
                    axisLabel: {
                        formatter: '{value}'
                    },

                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#999999'
                        }
                    }
                },
                grid: {
                    left: '1%',
                    right: '2%',
                    //bottom: "13%",
                    //top: "10%",
                    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) {
                        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: '4%',
                    top: '12',
                    verticalAlign: 'top',
                    enabled: true,
                    itemDistance: 5
                },
                toolbox: {
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        ////restore: {},
                        saveAsImage: {}
                    },
                    right: '2%'
                },
                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: 8,
                    opposite: false,
                    axisLabel: {
                        formatter: '{value}'
                    },

                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#999999'
                        }
                    }
                },
                grid: {
                    left: '1%',
                    right: '2%',
                    bottom: '13%',
                    top: '10%',
                    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
                    }
                ]
            }

            myChartes3.setOption(option)
            window.echartsArr.push(myChartes3)
            myChartes4.setOption(option1)
            window.echartsArr.push(myChartes4)
            this.loading = false
            let _this1 = this
            _this1.$erd.listenTo(_this1.$refs.rmsbxf, element => {
                // _this1.$nextTick(() => {
                myChartes3.resize()
                myChartes4.resize()
                // })
            })
            echarts.connect([myChartes3, myChartes4])
        },
        //标签切换
        handleClick(tab, event) {
            if (tab.name == 'first') {
                this.$nextTick(() => {
                    this.loading = true
                    this.getBoXinFenXi()
                })
            } else {
                this.$nextTick(() => {
                    this.loading = true
                    this.getRmsBoXinFenXi()
                })
            }
        },
        //值改变触发函数
        valuechange(val) {
            this.loading = true
            if (this.activeName === 'first') {
                this.$nextTick(() => {
                    this.getBoXinFenXi()
                })
            } else if (this.activeName === 'second') {
                this.$nextTick(() => {
                    this.getRmsBoXinFenXi()
                })
            }
        }
    }
}
</script>
