<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div class="Top" ref="top">
                    <el-form :inline="true" class="demo-form-inline">
                        <Area @click="handleNodeClick"></Area>
                        <el-form-item>
                            <Timslot @time="time"></Timslot>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" class="ml10" icon="el-icon-search" @click="steady">
                                查询
                            </el-button>
                            <!-- <el-button type="primary" icon="el-icon-download">导出</el-button> -->
                        </el-form-item>
                    </el-form>
                    <el-tabs :tab-position="tabPosition" v-model="active" @tab-click="steady">
                        <el-tab-pane label="区域" name="region">
                            <el-row>
                                <el-col :span="12" :style="`height:${vh / 2 - 90}px`">
                                    <div id="box1" v-loading="isLoading3" style="position: relative">
                                        <div id="electr1" style="width: 100%"></div>
                                    </div>
                                </el-col>
                                <el-col :span="12" :style="`height:${vh / 2 - 90}px`">
                                    <div id="box2" v-loading="isLoading3" style="position: relative">
                                        <div id="electr3" style="width: 100%"></div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12" :style="`height:${vh / 2 - 90}px`">
                                    <div id="box3" v-loading="isLoading3" style="position: relative">
                                        <div id="electr2" style="width: 100%"></div>
                                    </div>
                                </el-col>
                                <el-col :span="12" :style="`height:${vh / 2 - 90}px`">
                                    <div id="box4" v-loading="isLoading3" style="position: relative">
                                        <div id="electr4" style="width: 100%"></div>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-tab-pane>

                        <el-tab-pane label="电压等级" name="Voltage">
                            <el-row>
                                <el-col :span="12" :style="`height:${vh / 2 - 90}px`">
                                    <div id="box5" v-loading="isLoading3" style="position: relative">
                                        <div id="electr5" style="width: 100%"></div>
                                    </div>
                                </el-col>
                                <el-col :span="12" :style="`height:${vh / 2 - 90}px`">
                                    <div id="box6" v-loading="isLoading3" style="position: relative">
                                        <div id="electr6" style="width: 100%"></div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12" :style="`height:${vh / 2 - 90}px`">
                                    <div id="box7" v-loading="isLoading3" style="position: relative">
                                        <div id="electr7" style="width: 100%"></div>
                                    </div>
                                </el-col>
                                <el-col :span="12" :style="`height:${vh / 2 - 90}px`">
                                    <div id="box8" v-loading="isLoading3" style="position: relative">
                                        <div id="electr8" style="width: 100%"></div>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                        <el-tab-pane label="监测点类型" name="MonitoringPoint">
                            <el-row>
                                <el-col :span="12" :style="`height:${vh / 2 - 90}px`">
                                    <div id="box9" v-loading="isLoading3" style="position: relative">
                                        <div id="electr9" style="width: 100%"></div>
                                    </div>
                                </el-col>
                                <el-col :span="12" :style="`height:${vh / 2 - 90}px`">
                                    <div id="box10" v-loading="isLoading3" style="position: relative">
                                        <div id="electr10" style="width: 100%"></div>
                                    </div>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="12" :style="`height:${vh / 2 - 90}px`">
                                    <div id="box11" v-loading="isLoading3" style="position: relative">
                                        <div id="electr11" style="width: 100%"></div>
                                    </div>
                                </el-col>
                                <el-col :span="12" :style="`height:${vh / 2 - 90}px`">
                                    <div id="box12" v-loading="isLoading3" style="position: relative">
                                        <div id="electr12" style="width: 100%"></div>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { dicData } from '@/assets/commjs/dictypeData'
import {
    getDistributedPvOverviewArea,
    getDistributedPvOverviewVoltage,
    getDistributedPvOverviewLineSort
} from '@/api/SpecialAnalysisModuleDesign/DistributedPhotovoltaic/index'
import Area from '@/views/components/Area/Area.vue'
import Timslot from './Timeslot.vue'
export default {
    components: { Area, Timslot },
    data() {
        return {
            vh: 0,
            option11: [],
            data1: [],
            data2: [],
            data3: [],
            data4: [],
            data5: [],
            data6: [],
            data7: [],
            data8: [],
            data9: [],
            data10: [],
            data11: [],
            data12: [],
            kai: true,
            start: '',
            end: '',
            active_active: 'first-first',
            zoom: undefined, //图表焦点校验
            getHeight: '',
            tabPosition: 'top',
            active: 'region',
            isLoading: false,
            isLoading2: false,
            isLoading3: false,
            isLoading4: false,
            id: JSON.parse(window.sessionStorage.getItem('Info')).deptId
        }
    },
    created() {
        this.option11 = dicData('area_pq_event_type', [], 1)
        // console.log(this.option11, "hshshu");
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        //echarts图表调用

        this.zoom = 1 / document.body.style.zoom

        this.steady()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight')
            this.zoom = 1 / document.body.style.zoom
            let domID1 = document.getElementById('electr1')
            let domID2 = document.getElementById('electr2')
            let domID3 = document.getElementById('electr3')
            let domID4 = document.getElementById('electr4')
            setTimeout(() => {
                // ( box.style.height= window.sessionStorage.getItem('appheight') / 2  +"px")
                ;(domID1.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 20 + 'px'),
                    (domID1.style.height = window.sessionStorage.getItem('appheight') / 2 - 90 + 'px')
                ;(domID2.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 20 + 'px'),
                    (domID2.style.height = window.sessionStorage.getItem('appheight') / 2 - 90 + 'px')
                ;(domID3.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 20 + 'px'),
                    (domID3.style.height = window.sessionStorage.getItem('appheight') / 2 - 90 + 'px')
                ;(domID4.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 20 + 'px'),
                    (domID4.style.height = window.sessionStorage.getItem('appheight') / 2 - 90 + 'px')
            }, 0)
            let domID5 = document.getElementById('electr5')
            let domID6 = document.getElementById('electr6')
            let domID7 = document.getElementById('electr7')
            let domID8 = document.getElementById('electr8')
            setTimeout(() => {
                ;(domID5.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 20 + 'px'),
                    (domID5.style.height = window.sessionStorage.getItem('appheight') / 2 - 90 + 'px')
                ;(domID6.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 20 + 'px'),
                    (domID6.style.height = window.sessionStorage.getItem('appheight') / 2 - 90 + 'px')
                ;(domID7.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 20 + 'px'),
                    (domID7.style.height = window.sessionStorage.getItem('appheight') / 2 - 90 + 'px')
                ;(domID8.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 20 + 'px'),
                    (domID8.style.height = window.sessionStorage.getItem('appheight') / 2 - 90 + 'px')
            }, 0)
            let domID9 = document.getElementById('electr9')
            let domID10 = document.getElementById('electr10')
            let domID11 = document.getElementById('electr11')
            let domID12 = document.getElementById('electr12')
            setTimeout(() => {
                ;(domID9.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 20 + 'px'),
                    (domID9.style.height = window.sessionStorage.getItem('appheight') / 2 - 90 + 'px')
                ;(domID10.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 20 + 'px'),
                    (domID10.style.height = window.sessionStorage.getItem('appheight') / 2 - 90 + 'px')
                ;(domID11.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 20 + 'px'),
                    (domID11.style.height = window.sessionStorage.getItem('appheight') / 2 - 90 + 'px')
                ;(domID12.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 20 + 'px'),
                    (domID12.style.height = window.sessionStorage.getItem('appheight') / 2 - 90 + 'px')
            }, 0)
        },

        time(val) {
            ;(this.start = val[0]), (this.end = val[1])
            this.type = val[2]
        },
        handleNodeClick(data) {
            this.id = data.id
        },

        //方法调用获取稳态指标超标统计数据接口
        steady() {
            this.isLoading = true
            if (this.active == 'region') {
                this.regionTab()
            } else if (this.active == 'Voltage') {
                this.VoltageTab()
            } else if (this.active == 'MonitoringPoint') {
                this.MonitoringPointTab()
            }

            //稳态指标超标统计
            // getSteadyData().then((res) => {
            //   this.isLoading = false;
            //   this.totalData = res.data;
            // });
        },

        //监测终端统计echarts图表
        async regionTab() {
            await getDistributedPvOverviewArea({
                id: this.id,
                endTime: this.end,
                startTime: this.start,
                type: 0
            }).then(res => {
                ;(this.data1 = res.data.voltageOutOfLimit),
                    (this.data2 = res.data.flowReversal),
                    (this.data3 = res.data.pvPermeability),
                    (this.data4 = res.data.lowPowerFactor)
            })
            let echarts = require('echarts')
            let domID1 = document.getElementById('electr1')
            let domID2 = document.getElementById('electr2')
            let domID3 = document.getElementById('electr3')
            let domID4 = document.getElementById('electr4')
            setTimeout(() => {
                // ( box.style.height= window.sessionStorage.getItem('appheight') / 2  +"px")
                ;(domID1.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 20 + 'px'),
                    (domID1.style.height = window.sessionStorage.getItem('appheight') / 2 - 90 + 'px')
                ;(domID2.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 20 + 'px'),
                    (domID2.style.height = window.sessionStorage.getItem('appheight') / 2 - 90 + 'px')
                ;(domID3.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 20 + 'px'),
                    (domID3.style.height = window.sessionStorage.getItem('appheight') / 2 - 90 + 'px')
                ;(domID4.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 20 + 'px'),
                    (domID4.style.height = window.sessionStorage.getItem('appheight') / 2 - 90 + 'px')

                this.isLoading3 = false
            }, 0)
            let myChart1 = echarts.init(domID1)
            let myChart2 = echarts.init(domID2)
            let myChart3 = echarts.init(domID3)
            let myChart4 = echarts.init(domID4)
            let list = []
            let list1 = []
            let list2 = []
            let list3 = []
            let list4 = []
            let list5 = []
            let list6 = []
            let list7 = []
            this.data1.forEach(res => {
                list.push(res.type)
            })
            this.data1.forEach(res => {
                list1.push(res.monitor)
            })
            this.data2.forEach(res => {
                list2.push(res.type)
            })
            this.data2.forEach(res => {
                list3.push(res.monitor)
            })
            this.data3.forEach(res => {
                list4.push(res.type)
            })
            this.data3.forEach(res => {
                list5.push(res.monitor)
            })
            this.data4.forEach(res => {
                list6.push(res.type)
            })
            this.data4.forEach(res => {
                list7.push(res.monitor)
            })

            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let option1 = {
                title: {
                    text: '电压越限',
                    left: 'center',
                    textStyle: {
                        color: echartsColor.WordColor
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        // //restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {},
                tooltip: {
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 14
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },

                xAxis: {
                    type: 'category',
                    data: list,
                    axisTick: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    }
                },
                yAxis: {
                    name: '监测点数',
                    minInterval: 1,
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },

                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: [echartsColor.thread],
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                },
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [
                    {
                        type: 'bar',
                        barMaxWidth: 30,
                        data: list1,

                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            },
                            fontSize: 12
                        },
                        itemStyle: {
                            normal: { show: true, color: echartsColor.FigureColor[0] }
                        }
                    }
                ]
            }
            let option2 = {
                title: {
                    text: '潮流倒送',
                    left: 'center',
                    textStyle: {
                        color: echartsColor.WordColor
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        // //restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {},
                tooltip: {
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 14
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },

                xAxis: {
                    type: 'category',
                    axisTick: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    data: list2
                },
                yAxis: {
                    name: '监测点数',
                    minInterval: 1,
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },

                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: [echartsColor.thread],
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                },
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [
                    {
                        type: 'bar',
                        barMaxWidth: 30,
                        data: list3,
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            },
                            fontSize: 12
                        },
                        itemStyle: {
                            normal: { show: true, color: echartsColor.FigureColor[0] }
                        }
                    }
                ]
            }
            let option3 = {
                title: {
                    text: '光伏渗透率',
                    left: 'center',
                    textStyle: {
                        color: echartsColor.WordColor
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        // //restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {},
                tooltip: {
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 14
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },

                xAxis: {
                    type: 'category',
                    axisTick: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    data: list4
                },
                yAxis: {
                    name: '监测点数',
                    minInterval: 1,
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },

                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: [echartsColor.thread],
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                },
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [
                    {
                        type: 'bar',
                        barMaxWidth: 30,
                        data: list5,
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            },
                            fontSize: 12
                        },
                        itemStyle: {
                            normal: { show: true, color: echartsColor.FigureColor[0] }
                        }
                    }
                ]
            }
            let option4 = {
                title: {
                    text: '低功率因数',
                    left: 'center',
                    textStyle: {
                        color: echartsColor.WordColor
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        // //restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {},
                tooltip: {
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 14
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },

                xAxis: {
                    type: 'category',
                    axisTick: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    data: list6
                },
                yAxis: {
                    name: '监测点数',
                    minInterval: 1,
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },

                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: [echartsColor.thread],
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                },
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [
                    {
                        type: 'bar',
                        barMaxWidth: 30,
                        data: list7,
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            },
                            fontSize: 12
                        },
                        itemStyle: {
                            normal: { show: true, color: echartsColor.FigureColor[0] }
                        }
                    }
                ]
            }
            option1 && myChart1.setOption(option1, true)
            window.echartsArr.push(myChart1)
            option2 && myChart2.setOption(option2, true)
            window.echartsArr.push(myChart2)
            option3 && myChart3.setOption(option3, true)
            window.echartsArr.push(myChart3)
            option4 && myChart4.setOption(option4, true)
            window.echartsArr.push(myChart4)
            setTimeout(function () {
                myChart1.resize()
            }, 0)
            setTimeout(() => {
                myChart2.resize()
            }, 0)
            setTimeout(() => {
                myChart3.resize()
            }, 0)
            setTimeout(() => {
                myChart4.resize()
            }, 0)
        },
        async VoltageTab() {
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            await getDistributedPvOverviewVoltage({
                id: this.id,
                endTime: this.end,
                startTime: this.start,
                type: 0
            }).then(res => {
                ;(this.data5 = res.data.voltageOutOfLimit),
                    (this.data6 = res.data.flowReversal),
                    (this.data7 = res.data.pvPermeability),
                    (this.data8 = res.data.lowPowerFactor)
            })
            let echarts = require('echarts')
            let domID5 = document.getElementById('electr5')
            let domID6 = document.getElementById('electr6')
            let domID7 = document.getElementById('electr7')
            let domID8 = document.getElementById('electr8')
            setTimeout(() => {
                ;(domID5.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 20 + 'px'),
                    (domID5.style.height = window.sessionStorage.getItem('appheight') / 2 - 90 + 'px')

                this.isLoading3 = false
                ;(domID6.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 20 + 'px'),
                    (domID6.style.height = window.sessionStorage.getItem('appheight') / 2 - 90 + 'px')

                this.isLoading3 = false
                ;(domID7.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 20 + 'px'),
                    (domID7.style.height = window.sessionStorage.getItem('appheight') / 2 - 90 + 'px')
                ;(domID8.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 20 + 'px'),
                    (domID8.style.height = window.sessionStorage.getItem('appheight') / 2 - 90 + 'px')

                this.isLoading3 = false
            }, 0)

            let myChart5 = echarts.init(domID5)
            let myChart6 = echarts.init(domID6)
            let myChart7 = echarts.init(domID7)
            let myChart8 = echarts.init(domID8)
            let list8 = []
            let list9 = []
            let list10 = []
            let list11 = []
            let list12 = []
            let list13 = []
            let list14 = []
            let list15 = []
            this.data5.forEach(res => {
                dicData('Dev_Voltage', [], 1).forEach(item => {
                    if (item.id == res.type) {
                        list8.push(item.name)
                    }
                })
            })
            this.data5.forEach(res => {
                list9.push(res.monitor)
            })
            this.data6.forEach(res => {
                dicData('Dev_Voltage', [], 1).forEach(item => {
                    if (item.id == res.type) {
                        list10.push(item.name)
                    }
                })
            })
            this.data6.forEach(res => {
                list11.push(res.monitor)
            })
            this.data7.forEach(res => {
                dicData('Dev_Voltage', [], 1).forEach(item => {
                    if (item.id == res.type) {
                        list12.push(item.name)
                    }
                })
            })
            this.data7.forEach(res => {
                list13.push(res.monitor)
            })
            this.data8.forEach(res => {
                dicData('Dev_Voltage', [], 1).forEach(item => {
                    if (item.id == res.type) {
                        list14.push(item.name)
                    }
                })
            })
            this.data8.forEach(res => {
                list15.push(res.monitor)
            })
            let option5 = {
                title: {
                    text: '电压越限',
                    left: 'center',
                    textStyle: {
                        color: echartsColor.WordColor
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        // //restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {},
                tooltip: {
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 14
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },

                xAxis: {
                    type: 'category',
                    axisTick: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    data: list8
                },
                yAxis: {
                    name: '监测点数',
                    minInterval: 1,
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },

                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: [echartsColor.thread],
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                },
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [
                    {
                        type: 'bar',
                        barMaxWidth: 30,
                        data: list9,
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            },
                            fontSize: 12
                        },
                        itemStyle: {
                            normal: { show: true, color: echartsColor.FigureColor[0] }
                        }
                    }
                ]
            }
            let option6 = {
                title: {
                    text: '潮流倒送',
                    left: 'center',
                    textStyle: {
                        color: echartsColor.WordColor
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        // //restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {},
                tooltip: {
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 14
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },

                xAxis: {
                    type: 'category',
                    axisTick: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    data: list10
                },
                yAxis: {
                    name: '监测点数',
                    minInterval: 1,
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },

                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: [echartsColor.thread],
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                },
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [
                    {
                        type: 'bar',
                        barMaxWidth: 30,
                        data: list11,
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            },
                            fontSize: 12
                        },
                        itemStyle: {
                            normal: { show: true, color: echartsColor.FigureColor[0] }
                        }
                    }
                ]
            }
            let option7 = {
                title: {
                    text: '光伏渗透率',
                    left: 'center',
                    textStyle: {
                        color: echartsColor.WordColor
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        // //restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {},
                tooltip: {
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 14
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },

                xAxis: {
                    type: 'category',
                    axisTick: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    data: list12
                },
                yAxis: {
                    name: '监测点数',
                    minInterval: 1,
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },

                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: [echartsColor.thread],
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                },
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [
                    {
                        type: 'bar',
                        barMaxWidth: 30,
                        data: list13,
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            },
                            fontSize: 12
                        },
                        itemStyle: {
                            normal: { show: true, color: echartsColor.FigureColor[0] }
                        }
                    }
                ]
            }
            let option8 = {
                title: {
                    text: '低功率因数',
                    left: 'center',
                    textStyle: {
                        color: echartsColor.WordColor
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        // //restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {},
                tooltip: {
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 14
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },

                xAxis: {
                    type: 'category',
                    axisTick: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    data: list14
                },
                yAxis: {
                    name: '监测点数',
                    minInterval: 1,
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },

                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: [echartsColor.thread],
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                },
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [
                    {
                        type: 'bar',
                        barMaxWidth: 30,
                        data: list15,
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            },
                            fontSize: 12
                        },
                        itemStyle: {
                            normal: { show: true, color: echartsColor.FigureColor[0] }
                        }
                    }
                ]
            }
            option5 && myChart5.setOption(option5, true)
            window.echartsArr.push(myChart5)
            option6 && myChart6.setOption(option6, true)
            window.echartsArr.push(myChart6)
            option7 && myChart7.setOption(option7, true)
            window.echartsArr.push(myChart7)
            option8 && myChart8.setOption(option8, true)
            window.echartsArr.push(myChart8)
            setTimeout(function () {
                myChart5.resize()

                myChart6.resize()

                myChart7.resize()

                myChart8.resize()
            }, 0)
        },
        async MonitoringPointTab() {
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            await getDistributedPvOverviewLineSort({
                id: this.id,
                endTime: this.end,
                startTime: this.start,
                type: 0
            }).then(res => {
                ;(this.data9 = res.data.voltageOutOfLimit),
                    (this.data10 = res.data.flowReversal),
                    (this.data11 = res.data.pvPermeability),
                    (this.data12 = res.data.lowPowerFactor)
            })
            let echarts = require('echarts')
            let domID9 = document.getElementById('electr9')
            let domID10 = document.getElementById('electr10')
            let domID11 = document.getElementById('electr11')
            let domID12 = document.getElementById('electr12')
            setTimeout(() => {
                ;(domID9.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 20 + 'px'),
                    (domID9.style.height = window.sessionStorage.getItem('appheight') / 2 - 90 + 'px')

                this.isLoading3 = false
                ;(domID10.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 20 + 'px'),
                    (domID10.style.height = window.sessionStorage.getItem('appheight') / 2 - 90 + 'px')

                this.isLoading3 = false
                ;(domID11.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 20 + 'px'),
                    (domID11.style.height = window.sessionStorage.getItem('appheight') / 2 - 90 + 'px')

                this.isLoading3 = false
                ;(domID12.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 20 + 'px'),
                    (domID12.style.height = window.sessionStorage.getItem('appheight') / 2 - 90 + 'px')

                this.isLoading3 = false
            }, 0)
            let myChart9 = echarts.init(domID9)
            let myChart10 = echarts.init(domID10)
            let myChart11 = echarts.init(domID11)
            let myChart12 = echarts.init(domID12)

            let list16 = []
            let list17 = []
            let list18 = []
            let list19 = []
            let list20 = []
            let list21 = []
            let list22 = []
            let list23 = []

            this.data9.forEach(res => {
                dicData('Line_Sort', [], 1).forEach(item => {
                    if (item.id == res.type) {
                        list16.push(item.name)
                    }
                })
            })
            this.data9.forEach(res => {
                list17.push(res.monitor)
            })
            this.data10.forEach(res => {
                dicData('Line_Sort', [], 1).forEach(item => {
                    if (item.id == res.type) {
                        list18.push(item.name)
                    }
                })
            })
            this.data10.forEach(res => {
                list19.push(res.monitor)
            })
            this.data11.forEach(res => {
                dicData('Line_Sort', [], 1).forEach(item => {
                    if (item.id == res.type) {
                        list20.push(item.name)
                    }
                })
            })
            this.data11.forEach(res => {
                list21.push(res.monitor)
            })
            this.data12.forEach(res => {
                dicData('Line_Sort', [], 1).forEach(item => {
                    if (item.id == res.type) {
                        list22.push(item.name)
                    }
                })
            })
            this.data12.forEach(res => {
                list23.push(res.monitor)
            })

            let option9 = {
                title: {
                    text: '电压越限',
                    left: 'center',
                    textStyle: {
                        color: echartsColor.WordColor
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        // //restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {},
                tooltip: {
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 14
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },

                xAxis: {
                    type: 'category',
                    axisTick: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    data: list16
                },
                yAxis: {
                    name: '监测点数',
                    minInterval: 1,
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },

                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: [echartsColor.thread],
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                },
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [
                    {
                        type: 'bar',
                        barMaxWidth: 30,
                        data: list17,
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            },
                            fontSize: 12
                        },
                        itemStyle: {
                            normal: { show: true, color: echartsColor.FigureColor[0] }
                        }
                    }
                ]
            }
            let option10 = {
                title: {
                    text: '潮流倒送',
                    left: 'center',
                    textStyle: {
                        color: echartsColor.WordColor
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        // //restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {},
                tooltip: {
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 14
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },

                xAxis: {
                    type: 'category',
                    axisTick: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    data: list18
                },
                yAxis: {
                    name: '监测点数',
                    minInterval: 1,
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },

                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: [echartsColor.thread],
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                },
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [
                    {
                        type: 'bar',
                        barMaxWidth: 30,
                        data: list19,
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            },
                            fontSize: 12
                        },
                        itemStyle: {
                            normal: { show: true, color: echartsColor.FigureColor[0] }
                        }
                    }
                ]
            }
            let option11 = {
                title: {
                    text: '光伏渗透率',
                    left: 'center',
                    textStyle: {
                        color: echartsColor.WordColor
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        // //restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {},
                tooltip: {
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 14
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },

                xAxis: {
                    type: 'category',
                    axisTick: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    data: list20
                },
                yAxis: {
                    name: '监测点数',
                    minInterval: 1,
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },

                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: [echartsColor.thread],
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                },
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [
                    {
                        type: 'bar',
                        barMaxWidth: 30,
                        data: list21,
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            },
                            fontSize: 12
                        },
                        itemStyle: {
                            normal: { show: true, color: echartsColor.FigureColor[0] }
                        }
                    }
                ]
            }
            let option12 = {
                title: {
                    text: '低功率因数',
                    left: 'center',
                    textStyle: {
                        color: echartsColor.WordColor
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        // //restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {},
                tooltip: {
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 14
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },

                xAxis: {
                    type: 'category',
                    axisTick: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    data: list22
                },
                yAxis: {
                    name: '监测点数',
                    minInterval: 1,
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },

                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: [echartsColor.thread],
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                },
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [
                    {
                        type: 'bar',
                        barMaxWidth: 30,
                        data: list23,
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            },
                            fontSize: 12
                        },
                        itemStyle: {
                            normal: { show: true, color: echartsColor.FigureColor[0] }
                        }
                    }
                ]
            }

            option9 && myChart9.setOption(option9, true)
            window.echartsArr.push(myChart9)
            option10 && myChart10.setOption(option10, true)
            window.echartsArr.push(myChart10)
            option11 && myChart11.setOption(option11, true)
            window.echartsArr.push(myChart11)
            option12 && myChart12.setOption(option12, true)
            window.echartsArr.push(myChart12)

            setTimeout(function () {
                myChart9.resize()

                myChart10.resize()

                myChart11.resize()

                myChart12.resize()
            }, 0)
        }
    }
}
</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;
}
.prop {
    font-weight: 600;
}
::v-deep .el-table__body-wrapper.is-scrolling-none {
}
.tips {
    position: absolute;
    width: 120px;
    height: 30px;
    font-size: 14px;
    line-height: 30px;
    color: white;
    text-align: center;
    background-color: cadetblue;
}
.box {
    height: 50%;
}
.ttips {
    position: absolute;
    right: 0%;
    bottom: 10px;
}
</style>
