<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></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-button type="primary" icon="el-icon-download" @click="chakan" v-show="ischakan">
                                查看
                            </el-button>
                            <el-button type="primary" icon="el-icon-download" @click="fanhui" v-show="!ischakan">
                                返回
                            </el-button>
                        </el-form-item>
                    </el-form>
                    <el-tabs :tab-position="tabPosition" v-model="active">
                        <el-tab-pane label="稳态指标" name="first">
                            <el-tabs :tab-position="tabPosition" v-model="active_active" v-show="ischakan">
                                <el-col :span="24" class="mt10">
                                    <el-table
                                        stripe
                                        :data="serialData"
                                        :height="height"
                                        style="width: 100%; margin-bottom: 10px"
                                        v-loading="isLoading"
                                        header-cell-class-name="table_header"
                                        :cell-style="cellStyle"
                                    >
                                        <el-table-column prop="number" label="单位名称" width="200"></el-table-column>
                                        <el-table-column label="日均监测变电站座数">
                                            <el-table-column prop="point" label="日均"></el-table-column>
                                            <el-table-column prop="voltage" label="累计"></el-table-column>
                                        </el-table-column>
                                        <el-table-column label="日均指标超标变电站数">
                                            <el-table-column prop="point" label="日均"></el-table-column>
                                            <el-table-column prop="voltage" label="累计"></el-table-column>
                                        </el-table-column>
                                        <el-table-column label="闪变">
                                            <el-table-column prop="point" label="日均"></el-table-column>
                                            <el-table-column prop="voltage" label="累计"></el-table-column>
                                        </el-table-column>
                                        <el-table-column label="谐波电压">
                                            <el-table-column prop="point" label="日均"></el-table-column>
                                            <el-table-column prop="voltage" label="累计"></el-table-column>
                                        </el-table-column>
                                        <el-table-column label="谐波电流">
                                            <el-table-column prop="point" label="日均"></el-table-column>
                                            <el-table-column prop="voltage" label="累计"></el-table-column>
                                        </el-table-column>
                                        <el-table-column label="间谐波电压">
                                            <el-table-column prop="point" label="日均"></el-table-column>
                                            <el-table-column prop="voltage" label="累计"></el-table-column>
                                        </el-table-column>
                                        <el-table-column label="三相电压不平衡度">
                                            <el-table-column prop="point" label="日均"></el-table-column>
                                            <el-table-column prop="voltage" label="累计"></el-table-column>
                                        </el-table-column>
                                        <el-table-column label="负序电流">
                                            <el-table-column prop="point" label="日均"></el-table-column>
                                            <el-table-column prop="voltage" label="累计"></el-table-column>
                                        </el-table-column>
                                        <el-table-column label="总稳态指标">
                                            <el-table-column prop="point" label="日均"></el-table-column>
                                            <el-table-column prop="voltage" label="累计"></el-table-column>
                                        </el-table-column>
                                    </el-table>
                                </el-col>
                            </el-tabs>

                            <el-tabs :tab-position="tabPosition" v-model="active_active" v-show="!ischakan">
                                <el-row>
                                    <el-col :span="12" class="mt10">
                                        <div ref="getHeight" :style="'height:' + vh + ';'" v-loading="isLoading3">
                                            <div id="electr13" style="width: 100%; height: 100%"></div>
                                        </div>
                                    </el-col>
                                    <el-col :span="12" class="mt10">
                                        <div ref="getHeight" :style="'height:' + vh + ';'" v-loading="isLoading3">
                                            <div id="electr113" style="width: 100%; height: 100%"></div>
                                        </div>
                                    </el-col>
                                </el-row>

                                <el-row>
                                    <div ref="getHeight" :style="'height:' + vh + ';'" v-loading="isLoading3">
                                        <div id="electr1113" style="width: 100%; height: 100%"></div>
                                    </div>
                                </el-row>
                            </el-tabs>
                        </el-tab-pane>
                        <el-tab-pane label="暂态指标" name="second">
                            <el-tabs :tab-position="tabPosition" v-model="active_active" v-show="ischakan">
                                <el-col :span="24" class="mt10">
                                    <el-table
                                        stripe
                                        :data="serialData"
                                        :height="height"
                                        style="width: 100%; height: 100%"
                                        v-loading="isLoading"
                                        header-cell-class-name="table_header"
                                        :cell-style="cellStyle"
                                    >
                                        <el-table-column prop="number" label="名称" width="200"></el-table-column>
                                        <el-table-column label="频率偏差">
                                            <el-table-column prop="point" label="日均"></el-table-column>
                                            <el-table-column prop="voltage" label="累计"></el-table-column>
                                        </el-table-column>
                                        <el-table-column label="电压偏差">
                                            <el-table-column prop="point" label="日均"></el-table-column>
                                            <el-table-column prop="voltage" label="累计"></el-table-column>
                                        </el-table-column>
                                        <el-table-column label="闪变">
                                            <el-table-column prop="point" label="日均"></el-table-column>
                                            <el-table-column prop="voltage" label="累计"></el-table-column>
                                        </el-table-column>
                                        <el-table-column label="谐波电压">
                                            <el-table-column prop="point" label="日均"></el-table-column>
                                            <el-table-column prop="voltage" label="累计"></el-table-column>
                                        </el-table-column>
                                        <el-table-column label="谐波电流">
                                            <el-table-column prop="point" label="日均"></el-table-column>
                                            <el-table-column prop="voltage" label="累计"></el-table-column>
                                        </el-table-column>
                                        <el-table-column label="间谐波电压">
                                            <el-table-column prop="point" label="日均"></el-table-column>
                                            <el-table-column prop="voltage" label="累计"></el-table-column>
                                        </el-table-column>
                                        <el-table-column label="三相电压不平衡度">
                                            <el-table-column prop="point" label="日均"></el-table-column>
                                            <el-table-column prop="voltage" label="累计"></el-table-column>
                                        </el-table-column>
                                        <el-table-column label="负序电流">
                                            <el-table-column prop="point" label="日均"></el-table-column>
                                            <el-table-column prop="voltage" label="累计"></el-table-column>
                                        </el-table-column>
                                        <el-table-column label="总稳态指标">
                                            <el-table-column prop="point" label="日均"></el-table-column>
                                            <el-table-column prop="voltage" label="累计"></el-table-column>
                                        </el-table-column>
                                    </el-table>
                                </el-col>
                            </el-tabs>
                            <el-tabs :tab-position="tabPosition" v-model="active_active" v-show="!ischakan">
                                <el-row>
                                    <el-col :span="12" class="mt10">
                                        <div ref="getHeight" :style="'height:' + vh + ';'" v-loading="isLoading3">
                                            <div id="electr12" style="width: 100%; height: 100%"></div>
                                        </div>
                                    </el-col>
                                    <el-col :span="12" class="mt10">
                                        <div ref="getHeight" :style="'height:' + vh + ';'" v-loading="isLoading3">
                                            <div id="electr112" style="width: 100%; height: 100%"></div>
                                        </div>
                                    </el-col>
                                </el-row>

                                <el-row>
                                    <div ref="getHeight" :style="'height:' + vh + ';'" v-loading="isLoading3">
                                        <div id="electr1112" style="width: 100%; height: 100%"></div>
                                    </div>
                                </el-row>
                            </el-tabs>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Area from '@/views/components/Area/Area.vue'
import { figure, serial, diagram, monthly } from '@/api/accountstatistics.js'
import { viewheight } from '@/assets/commjs/common'
import { Classification } from '@/api/Statistical-analysis/indicatorClassification'
import first from 'ee-first'
import Timslot from './Timeslot.vue'
export default {
    components: { Area, Timslot },
    data() {
        return {
            ischakan: true,
            active_active: 'first-first',
            zoom: undefined, //图表焦点校验
            vh: '',
            height: null,
            device: '',
            getHeight: '',
            tabPosition: 'top',
            active: 'first',
            isLoading: false,
            isLoading2: false,
            isLoading3: false,
            isLoading4: false,
            serialData: [],
            monthlyData: []
        }
    },
    created() {
        this.account()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        //echarts图表调用
        this.getCensus()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.height = window.sessionStorage.getItem('appheight') - 210 + 'px'
            this.device = window.devicePixelRatio
            this.vh = (viewheight() - 90) / 2 + 'px'
            setTimeout(() => {
                this.getHeight = Number(this.$refs.getHeight.offsetHeight - 45)
            }, 0)
        },
        steady() {},
        handleNodeClick() {},
        fanhui() {
            this.ischakan = true
        },
        chakan() {
            this.ischakan = false
            // console.log(1111, "111111");
        },
        cellStyle(row, column, rowIndex, columnIndex) {
            // console.log(row);
            if (row.columnIndex == 2 || row.columnIndex == 3 || row.columnIndex == 4 || row.columnIndex == 5) {
                return 'font-weight: 600;'
            }
        },
        //监测终端统计echarts图表
        async getCensus() {
            this.isLoading3 = true
            const { data } = await figure()
            // console.log("data11111111111111:",data)
            let echarts = require('echarts')
            let domID12 = document.getElementById('electr12')
            let domID112 = document.getElementById('electr112')
            let domID1112 = document.getElementById('electr1112')
            let domID13 = document.getElementById('electr13')
            let domID113 = document.getElementById('electr113')
            let domID1113 = document.getElementById('electr1113')
            setTimeout(() => {
                ;(domID12.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 90 + 'px'),
                    (domID12.style.height = window.sessionStorage.getItem('appheight') / 2 - 45 + 'px')
                //$("#electr1").css("width", "1667px")

                this.isLoading3 = false
            }, 0)
            setTimeout(() => {
                ;(domID112.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 90 + 'px'),
                    (domID112.style.height = window.sessionStorage.getItem('appheight') / 2 - 45 + 'px')

                this.isLoading3 = false
            }, 0)
            setTimeout(() => {
                ;(domID1112.style.width = document.getElementById('app-main-in').offsetWidth + 'px'),
                    (domID1112.style.height = window.sessionStorage.getItem('appheight') / 2 - 145 + 'px')
                //$("#electr1").css("width", "1667px")

                this.isLoading3 = false
            }, 0)
            setTimeout(() => {
                ;(domID1113.style.width = document.getElementById('app-main-in').offsetWidth + 'px'),
                    (domID1113.style.height = window.sessionStorage.getItem('appheight') / 2 - 145 + 'px')
                //$("#electr1").css("width", "1667px")

                this.isLoading3 = false
            }, 0)
            setTimeout(() => {
                ;(domID13.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 90 + 'px'),
                    (domID13.style.height = window.sessionStorage.getItem('appheight') / 2 - 45 + 'px')
                //$("#electr1").css("width", "1667px")

                this.isLoading3 = false
            }, 0)
            setTimeout(() => {
                ;(domID113.style.width = document.getElementById('app-main-in').offsetWidth / 2 - 90 + 'px'),
                    (domID113.style.height = window.sessionStorage.getItem('appheight') / 2 - 45 + 'px')
                //  $("#electr2").css("width", "1667px");

                this.isLoading3 = false
            }, 0)

            let myChart13 = echarts.init(domID13)
            let myChart113 = echarts.init(domID113)
            let myChart1113 = echarts.init(domID1113)
            let myChart12 = echarts.init(domID12)
            let myChart112 = echarts.init(domID112)
            let myChart1112 = echarts.init(domID1112)

            let echartsData = data
            let list = [
                echartsData[0].monitoring,
                echartsData[1].monitoring,
                echartsData[2].monitoring,
                echartsData[3].monitoring,
                echartsData[4].monitoring,
                echartsData[5].monitoring
            ] //城市
            let list1 = [
                echartsData[0].quality,
                echartsData[1].quality,
                echartsData[2].quality,
                echartsData[3].quality,
                echartsData[4].quality,
                echartsData[5].quality
            ] //电能质量检测终端
            let list2 = [
                echartsData[0].Intelligent,
                echartsData[1].Intelligent,
                echartsData[2].Intelligent,
                echartsData[3].Intelligent,
                echartsData[4].Intelligent,
                echartsData[5].Intelligent
            ] //智能融合终端

            let option = {
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        //restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {},
                tooltip: {},
                dataset: {
                    source: [
                        ['product', '日计', '累计'],
                        [list[0], list1[0], list2[0]],
                        [list[1], list1[1], list2[1]],
                        [list[2], list1[2], list2[2]],
                        [list[3], list1[3], list2[3]],
                        [list[4], list1[4], list2[4]],
                        [list[5], list1[5], list2[5]],
                        [list[6], list1[6], list2[6]]
                    ]
                },
                xAxis: { type: 'category' },
                yAxis: {},
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
            }
            let option1 = {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['日计', '累计']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        //restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: list
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '日计',
                        type: 'line',
                        stack: 'Total',
                        data: list1
                    },
                    {
                        name: '累计',
                        type: 'line',
                        stack: 'Total',
                        data: list2
                    }
                ]
            }
            let option2 = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // Use axis to trigger tooltip
                        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                    }
                },
                legend: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    data: list
                },
                series: [
                    {
                        name: 'Direct',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [320, 302, 301, 334, 390, 330, 320]
                    },
                    {
                        name: 'Mail Ad',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: 'Affiliate Ad',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: 'Video Ad',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [150, 212, 201, 154, 190, 330, 410]
                    },
                    {
                        name: 'Search Engine',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [820, 832, 901, 934, 1290, 1330, 1320]
                    }
                ]
            }
            option && myChart13.setOption(option, true)
            window.echartsArr.push(myChart13)
            option1 && myChart113.setOption(option1, true)
            window.echartsArr.push(myChart113)
            option2 && myChart1113.setOption(option2, true)
            window.echartsArr.push(myChart1113)
            option && myChart12.setOption(option, true)
            window.echartsArr.push(myChart12)
            option1 && myChart112.setOption(option1, true)
            window.echartsArr.push(myChart112)
            option2 && myChart1112.setOption(option2, true)
            window.echartsArr.push(myChart1112)

            setTimeout(function () {
                myChart13.resize()
            }, 0)
            setTimeout(function () {
                myChart113.resize()
            }, 0)
            setTimeout(function () {
                myChart1113.resize()
            }, 0)
            setTimeout(function () {
                myChart12.resize()
            }, 0)
            setTimeout(function () {
                myChart112.resize()
            }, 0)
            setTimeout(function () {
                myChart1112.resize()
            }, 0)
        },

        //方法调用台账统计数据接口
        account() {
            this.isLoading = true
            this.isLoading2 = true
            //监测终端统计单位表格数据
            Classification().then(res => {
                this.isLoading = false
                this.serialData = res.data
            })
            //监测终端统计月份表格数据
            monthly().then(res => {
                this.isLoading2 = false
                this.monthlyData = res.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;
}
.prop {
    font-weight: 600;
}
::v-deep .el-table__body-wrapper.is-scrolling-none {
    height: 227px !important;
}
</style>
