<template>
    <div>
        <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item>
                <Area @click="handleNodeClick"></Area>
            </el-form-item>
            <el-form-item>
                <Timeinterval :interval="3" ref="interval"></Timeinterval>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="ml10" icon="el-icon-search">查询</el-button>
                <!-- <el-button type="primary" icon="el-icon-download"
                  >导出</el-button
                > -->
            </el-form-item>
        </el-form>

        <!-- ITIC F4c曲线 -->
        <div class="box">
            <el-tabs :tab-position="tabPosition" @tab-click="handleClick" v-model="activeName" style="width: 100%">
                <el-tab-pane label="ITIC曲线" name="first" :style="'height:' + vh + ';'">
                    <el-row :gutter="20" type="flex" justify=" space-between">
                        <el-col :span="8">
                            <!-- 剩余电压表格 -->
                            <el-table
                                stripe
                                :data="voltageData"
                                border
                                v-loading="isLoading6"
                                style="width: 100%"
                                header-cell-class-name="table_header"
                            >
                                <template v-for="(item, index) in tableHeaderVoltage">
                                    <el-table-column
                                        :prop="item.prop"
                                        :label="item.label"
                                        :key="index"
                                        :min-width="item.width"
                                    ></el-table-column>
                                </template>
                            </el-table>
                        </el-col>
                        <!-- echarts图1 -->
                        <el-col :span="8">
                            <div class="flex_3" ref="getMain" v-loading="loading1">
                                <div id="main" ref="chartDom" style="width: 100%; height: 100%"></div>
                            </div>
                        </el-col>
                        <!-- echarts图2 -->
                        <el-col :span="8">
                            <div class="flex_3" ref="getMains">
                                <div id="main1" style="width: 100%; height: 100%"></div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row class="mt10">
                        <div class="dw">
                            <el-table
                                stripe
                                :data="tolerateData"
                                border
                                style="width: 100%"
                                header-cell-class-name="table_header"
                            >
                                <template v-for="(item, index) in tableHeaderTolerate">
                                    <el-table-column
                                        :prop="item.prop"
                                        :label="item.label"
                                        :key="index"
                                        :min-width="item.width"
                                    ></el-table-column>
                                </template>
                            </el-table>
                        </div>

                        <!-- :style="
                    ``
                  " -->

                        <div id="itic" style="width: 100%; height: 100%"></div>

                        <!--
                        style="width:100%;height:100%;" -->
                    </el-row>
                </el-tab-pane>

                <el-tab-pane label="SEMI F47曲线" name="second" :style="'height:' + vh + ';'">
                    <el-row :gutter="20" type="flex" justify=" space-between">
                        <el-col :span="8">
                            <el-table
                                stripe
                                :data="voltageData"
                                border
                                v-loading="isLoading7"
                                style="width: 100%"
                                header-cell-class-name="table_header"
                            >
                                <template v-for="(item, index) in tableHeaderVoltage">
                                    <el-table-column
                                        :prop="item.prop"
                                        :label="item.label"
                                        :key="index"
                                        :min-width="item.width"
                                    ></el-table-column>
                                </template>
                            </el-table>
                        </el-col>
                        <el-col :span="8">
                            <div class="flex_3">
                                <div id="main2" style="width: 100%; height: 100%"></div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="flex_3">
                                <div id="main3" style="width: 100%; height: 100%"></div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row class="mt10">
                        <div class="dw">
                            <el-table
                                stripe
                                :data="tolerateData"
                                border
                                style="width: 100%"
                                header-cell-class-name="table_header"
                            >
                                <template v-for="(item, index) in tableHeaderTolerate">
                                    <el-table-column
                                        :prop="item.prop"
                                        :label="item.label"
                                        :key="index"
                                        :min-width="item.width"
                                    ></el-table-column>
                                </template>
                            </el-table>
                        </div>
                        <div id="semi" style="width: 100%; height: 100%"></div>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import { getResidualData, getTolerancenData } from '@/api/TransientStateIndex'

import Area from '@/views/components/Area/Area.vue'
import Timeinterval from '@/views/components/Timeinterval.vue'

export default {
    components: { Area, Timeinterval },
    data() {
        return {
            vh: undefined,
            tabPosition: 'left',
            activeName: 'first',
            echartsheight: '420px',
            date: '',
            input: '',
            vws: undefined,
            height: null,
            form: {
                time: '' //统计时间
            },
            isLoading5: false,
            loading1: false,
            loading2: false,
            loading3: false,
            loading4: false,
            isLoading6: false,
            isLoading7: false,
            zoom: '', //图表焦点校验
            //暂态事件分布统计表格数据
            tableHeaderVoltage: [
                { prop: 'residuals', label: '剩余电压(%)', width: 110 },
                { prop: '20msec', label: '20ms' },
                { prop: '100msec', label: '100ms' },
                { prop: '500msec', label: '500ms' },
                { prop: '1secs', label: '1s' },
                { prop: '3secs', label: '3s' },
                { prop: '20secs', label: '20s' },
                { prop: '60secs', label: '60s' },
                { prop: '180secs', label: '180s' }
            ],
            voltageData: [],
            //可容忍表格数据
            tableHeaderTolerate: [
                { prop: 'toleranceName', label: '名称', width: 130 },
                { prop: 'totalEvents', label: '事件总数', width: 110 },
                { prop: 'tolerable', label: '可容忍', width: 110 },
                { prop: 'Intolerable', label: '不可容忍', width: 110 }
            ],
            tolerateData: [],
            //ITIC模拟数据
            datalist: [
                {
                    timeid: null,
                    ms: 0,
                    describe: null,
                    wavetype: null,
                    persisttime: 0.07,
                    eventvalue: 56.0,
                    persisttimea: 0.0,
                    eventvaluea: 0.0,
                    persisttimeb: 0.0,
                    eventvalueb: 0.0,
                    persisttimec: 0.0,
                    eventvaluec: 0.0,
                    state: null,
                    time: '2022-02-20 14:17:34.944',
                    severity: 0.887,
                    eventDetailIndex: 'a90e7821-acc3-4d53-80f0-49838e8662e6',
                    lineId: 1641,
                    eventassIndex: null,
                    lineName: '电源总进线1',
                    gdName: '常熟市',
                    subName: '常熟森泉印染厂_6600087524',
                    scale: '10kV',
                    loadType: null,
                    eventName: null,
                    fileFlag: '0',
                    type: '暂降',
                    eventReason: '其他',
                    eventType: '其他'
                },
                {
                    timeid: null,
                    ms: 0,
                    describe: null,
                    wavetype: null,
                    persisttime: 0.075,
                    eventvalue: 73.0,
                    persisttimea: 0.0,
                    eventvaluea: 0.0,
                    persisttimeb: 0.0,
                    eventvalueb: 0.0,
                    persisttimec: 0.0,
                    eventvaluec: 0.0,
                    state: null,
                    time: '2022-02-20 14:17:32.782',
                    severity: 0.536,
                    eventDetailIndex: '6578ad55-baaf-4503-988a-4ae9e663b466',
                    lineId: 1641,
                    eventassIndex: null,
                    lineName: '电源总进线1',
                    gdName: '常熟市',
                    subName: '常熟森泉印染厂_6600087524',
                    scale: '10kV',
                    loadType: null,
                    eventName: null,
                    fileFlag: '1',
                    type: '暂降',
                    eventReason: '其他',
                    eventType: '其他'
                }
            ],
            pointI: [],
            pointIun: [],
            pointF: [],
            pointFun: [],
            white: '#ffffff',
            top: [
                [0.001, 200],
                [0.003, 140],
                [0.003, 120],
                [0.5, 120],
                [0.5, 110],
                [10, 110],
                [1000, 110]
            ],
            bot: [
                [0.02, 0],
                [0.02, 70],
                [0.5, 70],
                [0.5, 80],
                [10, 80],
                [10, 90],
                [1000, 90]
            ],
            part: [
                [0.05, 0],
                [0.05, 50],
                [0.2, 50],
                [0.2, 70],
                [0.5, 70],
                [0.5, 80],
                [10, 80],
                [1000, 80]
            ]
        }
    },
    created() {
        this.transient()
        // this.dictionaries();
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.device = window.devicePixelRatio
        // this.vws = document.getElementById("app-main-in").offsetWidth - 85 ;
        this.zoom = 1 / document.body.style.zoom
        window.addEventListener('resize', () => {
            this.zoom = 1 / document.body.style.zoom
        })
        this.echarts()
        this.echarts2()
        this.echarts3()
        this.echarts4()
        this.$nextTick(function () {
            this.iticData()
            this.semif()
        })
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 125 + 'px'
        },
        handleClick(tab, event) {
            // console.log(tab, event, "=========================");
        },
        //获取暂态事件分布统计数据
        transient() {
            this.isLoading6 = true
            this.isLoading7 = true
            this.voltageData = []
            this.tolerateData = []
            getResidualData().then(res => {
                // console.log("暂态事件分布统计表格:", res);
                this.isLoading6 = false
                this.isLoading7 = false
                this.voltageData = res.data
            })
            //方法调用获取容忍事件数据接口
            getTolerancenData().then(res => {
                // console.log("暂态事件分布统计可容忍事件个数表格:", res);
                this.tolerateData = res.data
            })
        },
        //公共的方法
        gongfunction() {
            let standI = 0
            let unstandI = 0
            let standF = 0
            let unstandF = 0
            let total = 0
            total = this.datalist.length
            if (total == 0) {
            } else {
                for (let i = 0; i < this.datalist.length; i++) {
                    let point = []
                    let xx = this.datalist[i].persisttime
                    let yy = this.datalist[i].eventvalue
                    let time = this.datalist[i].time
                    let index = this.datalist[i].eventDetailIndex
                    point = [xx, yy, time, index]

                    if (xx <= 0.003) {
                        let line = 0
                        line = 230 - 30000 * xx
                        if (yy > line) {
                            unstandI++
                            this.pointIun.push({
                                value: point,
                                itemStyle: { normal: { color: 'red' } }
                            })
                        } else {
                            standI++
                            this.pointI.push({
                                value: point,
                                itemStyle: { normal: { color: 'green' } }
                            })
                        }
                    } else if (xx <= 0.02) {
                        if (yy > 120) {
                            unstandI++
                            this.pointIun.push({
                                value: point,
                                itemStyle: { normal: { color: 'red' } }
                            })
                        } else {
                            standI++
                            this.pointI.push({
                                value: point,
                                itemStyle: { normal: { color: 'green' } }
                            })
                        }
                    } else if (xx <= 0.5) {
                        if (yy > 120 || yy < 70) {
                            unstandI++
                            this.pointIun.push({
                                value: point,
                                itemStyle: { normal: { color: 'red' } }
                            })
                        } else {
                            standI++
                            this.pointI.push({
                                value: point,
                                itemStyle: { normal: { color: 'green' } }
                            })
                        }
                    } else if (xx <= 10) {
                        if (yy > 110 || yy < 80) {
                            unstandI++
                            this.pointIun.push({
                                value: point,
                                itemStyle: { normal: { color: 'red' } }
                            })
                        } else {
                            standI++
                            this.pointI.push({
                                value: point,
                                itemStyle: { normal: { color: 'green' } }
                            })
                        }
                    } else {
                        if (yy > 110 || yy < 90) {
                            unstandI++
                            this.pointIun.push({
                                value: point,
                                itemStyle: { normal: { color: 'red' } }
                            })
                        } else {
                            standI++
                            this.pointI.push({
                                value: point,
                                itemStyle: { normal: { color: 'green' } }
                            })
                        }
                    }

                    if (xx < 0.05) {
                        standF++
                        this.pointF.push({
                            value: point,
                            itemStyle: { normal: { color: 'green' } }
                        })
                    } else if (xx < 0.2) {
                        if (yy > 50) {
                            standF++
                            this.pointF.push({
                                value: point,
                                itemStyle: { normal: { color: 'green' } }
                            })
                        } else {
                            unstandF++
                            this.pointFun.push({
                                value: point,
                                itemStyle: { normal: { color: 'red' } }
                            })
                        }
                    } else if (xx < 0.5) {
                        if (yy > 70) {
                            standF++
                            this.pointF.push({
                                value: point,
                                itemStyle: { normal: { color: 'green' } }
                            })
                        } else {
                            unstandF++
                            this.pointFun.push({
                                value: point,
                                itemStyle: { normal: { color: 'red' } }
                            })
                        }
                    } else {
                        if (yy > 80) {
                            standF++
                            this.pointF.push({
                                value: point,
                                itemStyle: { normal: { color: 'green' } }
                            })
                        } else {
                            unstandF++
                            this.pointFun.push({
                                value: point,
                                itemStyle: { normal: { color: 'red' } }
                            })
                        }
                    }
                }
            }
        },
        //itic曲线图
        iticData() {
            this.gongfunction()
            let white = '#000'
            const echarts = require('echarts')
            let domID1 = document.getElementById('itic')
            let myChartes = echarts.init(domID1)
            setTimeout(() => {
                ;(domID1.style.width = document.getElementById('app-main-in').offsetWidth - 190 + 'px'),
                    (domID1.style.height = window.sessionStorage.getItem('appheight') - 385 + 'px')
            }, 0)
            let option = {
                backgroundColor: '#f9f9f9', //地图背景色深蓝
                title: {
                    text: 'ITIC曲线',
                    x: 'center'
                },
                grid: {
                    top: '20%',
                    left: '4%',
                    right: '5%',
                    bottom: '10px',
                    containLabel: true
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: { show: true }
                    }
                },
                tooltip: {
                    trigger: 'item',
                    show: true,
                    formatter: function (a) {
                        let relVal = ''
                        relVal = "<font style='color:" + white + "'>发生时间:" + '2022-08-01 10:00:00' + '</font><br/>'
                        relVal += "<font style='color:" + white + "'>持续时间:" + a.value[0] + 's</font><br/>'
                        relVal += "<font style='color:" + white + "'>特征幅值:" + a.value[1] + '%</font>'
                        return relVal
                    }
                },
                legend: {
                    data: ['上限', '下限', '可容忍事件', '不可容忍事件'],

                    x: 'left'
                },
                color: ['#FF8C00', '#00BFFF', 'green', 'red'],
                xAxis: [
                    {
                        type: 'log',
                        min: '0.001',
                        max: '1000',
                        splitLine: {
                            show: false
                        },
                        name: 's'
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitNumber: 10,
                        minInterval: 3,
                        name: '%'
                    }
                ],
                series: [
                    {
                        name: '上限',
                        type: 'line',
                        data: this.top,
                        showSymbol: false,
                        tooltips: {
                            show: false
                        }
                    },
                    {
                        name: '下限',
                        type: 'line',
                        data: this.bot,
                        showSymbol: false,
                        tooltips: {
                            show: false
                        }
                    },
                    {
                        name: '可容忍事件',
                        type: 'scatter',
                        symbol: 'circle',
                        data: [
                            [0.01, 70],
                            [0.002, 30],
                            [0.003, 20],
                            [0.01, 15],
                            [0.005, 17],
                            [0.003, 13],
                            [0.008, 47],
                            [0.004, 70],
                            [0.003, 80],
                            [0.009, 70]
                        ]
                    },
                    {
                        name: '不可容忍事件',
                        type: 'scatter',
                        symbol: 'circle',
                        data: [
                            [0.1, 20],
                            [0.2, 40],
                            [0.5, 40],
                            [0.3, 55],
                            [0.2, 58],
                            [0.6, 23],
                            [10, 20],
                            [5, 25],
                            [20, 35],
                            [35, 20]
                        ]
                    }
                ]
            }

            myChartes.setOption(option)
            window.echartsArr.push(myChartes)
            setTimeout(() => {
                myChartes.resize()
            }, 0)
        },
        //SeMIf4c曲线图
        semif() {
            this.gongfunction()
            let white = '#000'
            const echarts = require('echarts')
            let domID1 = document.getElementById('semi')
            setTimeout(() => {
                ;(domID1.style.width = document.getElementById('app-main-in').offsetWidth - 190 + 'px'),
                    (domID1.style.height = window.sessionStorage.getItem('appheight') - 395 + 'px')
            }, 0)
            var myChartes = echarts.init(domID1)
            myChartes.clear()
            var option = {
                backgroundColor: '#f9f9f9', //地图背景色深蓝
                title: {
                    text: 'F47曲线',
                    x: 'center'
                },
                grid: {
                    top: '20%',
                    left: '4%',
                    right: '5%',
                    bottom: '10px',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'item',
                    show: true,
                    formatter: function (a) {
                        let relVal = ''
                        relVal = "<font style='color:" + white + "'>发生时间:" + '2022-08-01 10:00:00' + '</font><br/>'
                        relVal += "<font style='color:" + white + "'>持续时间:" + a.value[0] + 's</font><br/>'
                        relVal += "<font style='color:" + white + "'>特征幅值:" + a.value[1] + '%</font>'
                        return relVal
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: { show: true }
                    }
                },
                legend: {
                    data: ['分割线', '可容忍事件', '不可容忍事件'],
                    //   selectedMode: false,
                    x: 'left'
                },
                color: ['yellow', 'green', 'red'],
                xAxis: [
                    {
                        type: 'log',
                        min: '0.001',
                        max: '1000',
                        splitLine: {
                            show: false
                        },
                        name: 's'
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        max: function (value) {
                            return value.max + 20
                        },
                        splitNumber: 10,
                        minInterval: 0.1,
                        name: '%'
                    }
                ],
                series: [
                    {
                        name: '分割线',
                        type: 'line',
                        data: this.part,
                        showSymbol: false,
                        tooltips: {
                            show: false
                        }
                    },
                    {
                        name: '可容忍事件',
                        type: 'scatter',
                        symbol: 'circle',
                        data: [
                            [0.01, 70],
                            [0.002, 30],
                            [0.003, 20],
                            [0.01, 15],
                            [0.005, 17],
                            [0.003, 13],
                            [0.008, 47],
                            [0.004, 70],
                            [0.003, 80],
                            [0.009, 70],
                            [0.1, 60][(1, 65)]
                        ]
                    },
                    {
                        name: '不可容忍事件',
                        type: 'scatter',
                        symbol: 'circle',
                        data: [
                            [2, 30],
                            [3, 20],
                            [10, 15],
                            [5, 17],
                            [3, 13],
                            [8, 47],
                            [4, 25],
                            [3, 60],
                            [9, 60],
                            [100, 50][(10, 58)],
                            [12, 35]
                        ]
                    }
                ]
            }
            myChartes.setOption(option)
            window.echartsArr.push(myChartes)
            setTimeout(() => {
                myChartes.resize()
            }, 100)
        },
        echarts() {
            this.loading1 = true
            let echarts = require('echarts')
            let domID1 = document.getElementById('main')
            setTimeout(() => {
                ;(domID1.style.width = this.$refs.getMain.offsetWidth + 'px'),
                    (domID1.style.height = this.$refs.getMain.offsetHeight + 'px')
                $('#main').css('width', '502px')
                $('#main').css('height', '245px')
                this.loading1 = false
            }, 0)
            let myChart = echarts.init(domID1)
            let option = {
                backgroundColor: '#f9f9f9', //地图背景色深蓝
                title: {
                    text: '持续时间的概率分布函数 ',
                    left: 'center',
                    top: 0
                },
                grid: {
                    top: '10%',
                    left: '13%',
                    bottom: '18%',
                    right: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: ['0', '0.1', '0.25', '0.5', '1', '1.1'],
                    name: '总量(MW)',
                    nameLocation: 'middle',
                    nameTextStyle: {
                        padding: 10
                    }
                },
                yAxis: {
                    //   type: "value",
                    name: '总量(MW)',
                    nameLocation: 'middle',
                    nameTextStyle: {
                        padding: 20
                    }
                },
                tooltip: {},
                series: [
                    {
                        data: [0, 150, 170, 190, 210, 220],
                        type: 'line'
                    }
                ]
            }
            option && myChart.setOption(option, true)
            window.echartsArr.push(myChart)
            setTimeout(function () {
                myChart.resize()
            }, 600)
        },
        echarts2() {
            let echarts = require('echarts')
            let domID1 = document.getElementById('main2')
            setTimeout(() => {
                ;(domID1.style.width = this.$refs.getMain.offsetWidth + 'px'),
                    (domID1.style.height = this.$refs.getMain.offsetHeight + 'px')
                $('#main2').css('width', '502px')
                $('#main2').css('height', '245px')
            }, 0)
            let myChart = echarts.init(domID1)
            let option = {
                backgroundColor: '#f9f9f9', //地图背景色深蓝
                title: {
                    text: '持续时间的概率分布函数 ',
                    left: 'center',
                    top: 0
                },
                grid: {
                    top: '10%',
                    left: '13%',
                    bottom: '18%',
                    right: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: ['0', '0.1', '0.25', '0.5', '1', '1.1'],
                    name: '总量(MW)',
                    nameLocation: 'middle',
                    nameTextStyle: {
                        padding: 10
                    }
                },
                tooltip: {},
                yAxis: {
                    name: '总量(MW)',
                    nameLocation: 'middle',
                    nameTextStyle: {
                        padding: 20
                    }
                },
                series: [
                    {
                        data: [0, 150, 170, 190, 210, 220],
                        type: 'line'
                    }
                ]
            }
            option && myChart.setOption(option, true)
            window.echartsArr.push(myChart)
            setTimeout(function () {
                myChart.resize()
            }, 600)
        },
        echarts3() {
            let echarts = require('echarts')
            let domID1 = document.getElementById('main1')
            setTimeout(() => {
                ;(domID1.style.width = this.$refs.getMains.offsetWidth + 'px'),
                    (domID1.style.height = this.$refs.getMains.offsetHeight + 'px')
                $('#main1').css('width', '502px')
                $('#main1').css('height', '245px')
            }, 0)
            let myChart1 = echarts.init(domID1)
            let option = {
                backgroundColor: '#f9f9f9', //地图背景色深蓝
                title: {
                    text: '暂降幅值的概率分布函数 ',
                    left: 'center',
                    top: 0
                },
                grid: {
                    top: '10%',
                    left: '13%',
                    bottom: '18%',
                    right: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: ['0', '0.1', '0.25', '0.5', '1', '1.1'],
                    name: '总量(MW)',
                    nameLocation: 'middle',
                    nameTextStyle: {
                        padding: 10
                    }
                },
                tooltip: {},
                yAxis: {
                    name: '总量(MW)',
                    nameLocation: 'middle',
                    nameTextStyle: {
                        padding: 20
                    }
                },
                series: [
                    {
                        data: [0, 0, 0, 0, 0, 220],
                        type: 'line'
                    }
                ]
            }
            option && myChart1.setOption(option, true)
            window.echartsArr.push(myChart1)
            setTimeout(function () {
                myChart1.resize()
            }, 600)
        },
        echarts4() {
            let echarts = require('echarts')
            let domID1 = document.getElementById('main3')
            setTimeout(() => {
                ;(domID1.style.width = this.$refs.getMains.offsetWidth + 'px'),
                    (domID1.style.height = this.$refs.getMains.offsetHeight + 'px')
                $('#main3').css('width', '502px')
                $('#main3').css('height', '245px')
            }, 0)
            let myChart1 = echarts.init(domID1)
            let option = {
                backgroundColor: '#f9f9f9', //地图背景色深蓝
                title: {
                    text: '暂降幅值的概率分布函数 ',
                    left: 'center',
                    top: 0
                },
                grid: {
                    top: '10%',
                    left: '13%',
                    bottom: '18%',
                    right: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: ['0', '0.1', '0.25', '0.5', '1', '1.1'],
                    name: '总量(MW)',
                    nameLocation: 'middle',
                    nameTextStyle: {
                        padding: 10
                    }
                },
                tooltip: {},
                yAxis: {
                    name: '总量(MW)',
                    nameLocation: 'middle',
                    nameTextStyle: {
                        padding: 20
                    }
                },
                series: [
                    {
                        data: [0, 0, 0, 0, 0, 220],
                        type: 'line'
                    }
                ]
            }
            option && myChart1.setOption(option, true)
            window.echartsArr.push(myChart1)
            setTimeout(function () {
                myChart1.resize()
            }, 600)
        },
        // 字典表
        // dictionaries() {
        //   dictypeData().then(res => {
        //     res.data.forEach(item => {
        //       if (item.name == "单位") {
        //         this.CompanyList = item.children;
        //       }
        //     });
        //   });
        // },
        // 切换选项
        handleNodeClick(data) {
            // console.log(data);
        }
    }
}
</script>

<style lang="less" scoped>
// @import url("../../../../styles/comStyle.less");
::v-deep .el-table .cell {
    text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}
.flex_3 {
    height: 245px;
}
::v-deep .el-table.el-table--small td {
    height: 40px;
}
.box {
    display: flex;
}
.dw {
    position: absolute;
    top: 5px;
    left: 900px;
    z-index: 2;
}
::v-deep .el-row {
    width: 100%;
}

.flex {
    display: flex;
    align-items: center;
}
::v-deep .form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .el-form-item {
        display: flex;
        width: 48%;
        .el-form-item__content {
            flex: 1 !important;
            .el-select {
                width: 100%;
            }
            .el-input__inner {
                width: 100% !important;
            }
            .el-date-editor {
                width: 100%;
            }
        }
    }
}
</style>
<style lang="scss" scoped>
.back {
    float: right;
    margin-right: 10px;
    margin-left: auto;
    font-size: 29px;
    line-height: 32px;
    color: $themeColor;
    cursor: pointer;
    &:hover {
        color: $themeColor;
        opacity: 0.9;
    }
}
</style>
