<template>
    <div>
        <el-page-header @back="goBack" content="波形分析"></el-page-header>
        <div class="boxing">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane lazy label="瞬时波形" name="first">
                </el-tab-pane>
                <el-tab-pane lazy label="RMS波形" name="second">
                </el-tab-pane>
            </el-tabs>
            <div id="瞬时波形" style="height: 50vh;" v-if="activeName == 'first'"></div>
            <div id="RMS波形" style="height: 50vh;" v-if="activeName == 'second'"></div>
        </div>
    </div>
</template>
<script>
import Device from './device'
import Steady from './steady'
import Transient from './transient'
import * as echarts from 'echarts';
export default {
    components: {
        Device,
        Steady,
        Transient
    },
    data() {
        return {
            activeName: 'first',

        };
    },
    mounted() {
        this.初始化瞬时波形();
    },
    methods: {
        goBack() {
            this.$router.push({
                path: '/app/alarm?tab=3'
            })
        },
        handleClick(tab, event) {
            console.log(tab, event);
            setTimeout(() => {
                if (this.activeName == 'first') {
                    this.初始化瞬时波形();
                } else {
                    this.初始化RMS波形();
                }
            }, 100);
        },
        初始化RMS波形() {
            console.log("init");
            var chartDom = document.getElementById('RMS波形');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [20, 22, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44],
                        type: 'line',
                        smooth: true
                    }
                ]
            };
            option && myChart.setOption(option)
window.echartsArr.push(myChart);
        },
        初始化瞬时波形() {
            console.log("init");
            var chartDom = document.getElementById('瞬时波形');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        smooth: true
                    }
                ]
            };
            option && myChart.setOption(option)
window.echartsArr.push(myChart);
        },
    }
};
</script>

<style lang="scss">
.el-page-header {
    padding: 20px;
    background: #fff;
}

.boxing {
    padding: 10px;
}
</style>