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

        <el-row :gutter="20" :style="`height:${vh}`">
            <el-col :span="12" :style="`height:${vh}`">
                <div v-loading="isLoading" id="electr1" style="width: 100%; height: 100%" />
            </el-col>
            <el-col :span="12" :style="`height:${vh}`">
                <div v-loading="isLoading" id="electr2" style="width: 100%; height: 100%" />
            </el-col>
        </el-row>
        <el-row :style="`height:${vh};position: relative;`">
            <el-radio-group v-model="radio1" class="radioGroup" size="mini" @change="change">
                <el-radio-button label="1">电压指标</el-radio-button>
                <el-radio-button label="2">电流指标</el-radio-button>
            </el-radio-group>
            <el-col :span="24" :style="`height:${vh}`">
                <div v-loading="isLoading" id="electr3" style="width: 100%; height: 100%" />
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { dicData } from '@/assets/commjs/dictypeData'
import {
    getHarmonicCurrent,
    getHarmonicVoltage,
    getUnitCurrent,
    getUnitVoltage
} from '@/api/SpecialAnalysisModuleDesign/WindFarm/ElectricityOverview'
import Timeinterval from '@/views/components/Timeinterval.vue'
import Area from '@/views/components/Area/Area.vue'
export default {
    components: { Area, Timeinterval },
    props: {},
    data() {
        return {
            zoom: '',
            form: {
                id: '',
                endTime: '',
                startTime: '',
                monitorTag: '',
                type: ''
            },
            isLoading: false,
            electr1List: [],
            electr2List: [],
            electr3List: [],
            vh: undefined,
            radio1: '1',
            timeOptions: [
                { label: '年份', value: 1 },
                { label: '季度', value: 2 },
                { label: '月份', value: 3 }
            ]
        }
    },
    created() {
        this.info()
    },
    mounted() {
        this.form.id = JSON.parse(window.sessionStorage.getItem('Info')).deptId

        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.onSubmit()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = (window.sessionStorage.getItem('appheight') - 130) / 2 + 'px'
            let domID1 = document.getElementById('electr1')
            setTimeout(() => {
                ;(domID1.style.width = document.getElementById('app-main-in').offsetWidth / 2 + 'px'),
                    (domID1.style.height = (window.sessionStorage.getItem('appheight') - 130) / 2 + 'px')
            }, 0)
            let domID2 = document.getElementById('electr2')
            setTimeout(() => {
                ;(domID2.style.width = document.getElementById('app-main-in').offsetWidth / 2 + 'px'),
                    (domID2.style.height = (window.sessionStorage.getItem('appheight') - 130) / 2 + 'px')
            }, 0)
            let domID3 = document.getElementById('electr3')
            setTimeout(() => {
                ;(domID3.style.width = document.getElementById('app-main-in').offsetWidth + 'px'),
                    (domID3.style.height = (window.sessionStorage.getItem('appheight') - 130) / 2 + 'px')
            }, 0)
        },
        info() {
            dicData('Monitoring_Labels', []).forEach(item => {
                if (item.code == 'Electrified_Railways') {
                    this.form.monitorTag = item.id
                }
            })
            //   字典获取数据电压等级;
        },
        change() {
            if (this.radio1 == 1) {
                //获取风电场指标总览
                getUnitVoltage(this.form).then(res => {
                    this.electr3List = res.data
                    this.electr3()
                })
            } else {
                //获取风电场指标总览
                getUnitCurrent(this.form).then(res => {
                    this.electr3List = res.data
                    this.electr3()
                })
            }
        },
        onSubmit() {
            this.isLoading = true
            this.form.startTime = this.$refs.interval.timeValue[0]
            this.form.endTime = this.$refs.interval.timeValue[1]
            this.form.type = this.$refs.interval.intervald
            // 获取风电场指标总览-谐波电流
            getHarmonicCurrent(this.form).then(res => {
                this.isLoading = false
                this.electr1List = res.data
                this.electr1()
            })
            // 获取风电场指标总览-谐波电压
            getHarmonicVoltage(this.form).then(res => {
                this.isLoading = false
                this.electr2List = res.data
                this.electr2()
            })
            //获取风电场指标总览
            getUnitVoltage(this.form).then(res => {
                this.isLoading = false
                this.electr3List = res.data
                this.electr3()
            })
        },
        handleNodeClick(data) {
            this.form.id = data.id
        },
        electr1() {
            let echarts = require('echarts')
            let domID1 = document.getElementById('electr1')
            setTimeout(() => {
                ;(domID1.style.width = document.getElementById('app-main-in').offsetWidth / 2 + 'px'),
                    (domID1.style.height = (window.sessionStorage.getItem('appheight') - 130) / 2 + 'px')
            }, 0)

            let histograms = []
            let lineCharts = []
            let nameList = []
            this.electr1List.forEach(item => {
                histograms.push(item.histograms)
                lineCharts.push(item.lineCharts)
                nameList.push(item.type)
            })
            let myChart2 = echarts.init(domID1)
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let option = {
                title: {
                    text: '电流指标',
                    left: 'center',
                    top: '5px',
                    textStyle: {
                        color: echartsColor.WordColor
                    }
                },
                tooltip: {
                    //提示框组件
                    trigger: 'axis',

                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },
                // toolbox: {
                //     show: true,
                //     top: '25',
                //     right: '25',
                //     feature: {
                //         saveAsImage: {}
                //     }
                // },
                legend: {
                    //     data: ["", "普铁"],
                    // top: "15%",
                    top: 40,
                    right: '2%',
                    itemWidth: 16,
                    itemHeight: 16,
                    itemGap: 28,
                    textStyle: {
                        color: echartsColor.WordColor,
                        rich: {
                            a: {
                                verticalAlign: 'middle'
                            }
                        },

                        padding: [2, 0, 0, 0] //[上、右、下、左]
                    }
                },
                grid: {
                    top: 100,
                    left: '50px',
                    bottom: '40px',
                    right: '50px',
                    textStyle: {
                        color: '#fff'
                    },
                    containLabel: true
                },dataZoom: [
                    {
                        type: 'inside',
                        height: 13,
                        start: 0,
                        bottom: '20px',
                        end: 100
                    },
                    {
                        start: 0,
                        height: 13,
                        bottom: '20px',
                        end: 100
                    }
                ],
                calculable: true,
                xAxis: [
                    {
                        type: 'category',

                        splitLine: {
                            show: false
                        },

                        splitArea: {
                            show: false
                        },

                        axisTick: { show: false },
                        axisLine: {
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor
                        },

                        data: nameList
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '超标点占比:%',

                        minInterval: 1,

                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor
                        },
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: [echartsColor.thread],
                                type: 'dashed',
                                opacity: 0.5
                            }
                        },
                        nameTextStyle: {
                            color: echartsColor.WordColor
                        }
                    },
                    {
                        type: 'value',
                        minInterval: 1,
                        name: '平均超标天数:天',
                        nameTextStyle: {
                            color: echartsColor.WordColor
                        },
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: echartsColor.WordColor
                        },
                        splitArea: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '超标占比',
                        type: 'bar',
                        barMaxWidth: 30, // 柱状宽度
                        itemStyle: {
                            normal: { show: true, color: echartsColor.FigureColor[0] }
                        },
                        data: histograms
                    },
                    // {
                    //   name: "普铁超标占比",
                    //   type: "bar",
                    //   barMaxWidth: 30, // 柱状宽度

                    //   itemStyle: {
                    //     normal: {
                    //       color: "#eb6f46",
                    //       //borderRadius: [10],
                    //     },
                    //   },
                    //   data: [4, 3, 6, 8, 4, 1, 6, 5, 15],
                    // },
                    {
                        name: '平均超标天数',
                        type: 'line',
                        yAxisIndex: 1,
                        symbolSize: 5, // 圆点大小
                        symbol: 'circle',
                        smooth: false, // 是否平滑曲线
                        itemStyle: {
                            // 折线圆点设置
                            normal: {
                                color: echartsColor.FigureColor[1],
                                barBorderRadius: 0
                            }
                        },
                        lineStyle: {
                            // 折线设置
                            normal: {
                                width: 2,
                                color: echartsColor.FigureColor[1]
                            }
                        },
                        data: lineCharts
                    }
                    // {
                    //   name: "普铁超标天数",
                    //   type: "line",
                    //   yAxisIndex: 1,
                    //   symbolSize: 5, // 圆点大小
                    //   symbol: "circle",
                    //   smooth: false, // 是否平滑曲线
                    //   itemStyle: {
                    //     // 折线圆点设置
                    //     normal: {
                    //       color: "#9dd4cd",
                    //       barBorderRadius: 0,
                    //     },
                    //   },
                    //   lineStyle: {
                    //     // 折线设置
                    //     normal: {
                    //       width: 2,
                    //       color: "#9dd4cd",
                    //     },
                    //   },
                    //   data: [4, 3, 6, 2, 4, 1, 6, 5, 15],
                    // },
                ]
            }
            option && myChart2.setOption(option, true)
            window.echartsArr.push(myChart2)
            setTimeout(function () {
                myChart2.resize()
            }, 0)
        },
        electr2() {
            let echarts = require('echarts')
            let domID2 = document.getElementById('electr2')
            setTimeout(() => {
                ;(domID2.style.width = document.getElementById('app-main-in').offsetWidth / 2 + 'px'),
                    (domID2.style.height = (window.sessionStorage.getItem('appheight') - 130) / 2 + 'px')
            }, 0)
            let histograms = []
            let lineCharts = []
            let nameList = []
            this.electr2List.forEach(item => {
                histograms.push(item.histograms)
                lineCharts.push(item.lineCharts)
                nameList.push(item.type)
            })
            let myChart2 = echarts.init(domID2)
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let option = {
                title: {
                    text: '电压指标',
                    left: 'center',
                    top: '5px',
                    textStyle: {
                        color: echartsColor.WordColor
                    }
                },
                tooltip: {
                    //提示框组件
                    trigger: 'axis',

                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },
                legend: {
                    //     data: ["", "普铁"],
                    // top: "15%",
                    top: 40,
                    right: '2%',
                    itemWidth: 16,
                    itemHeight: 16,
                    itemGap: 28,
                    textStyle: {
                        color: echartsColor.WordColor,
                        rich: {
                            a: {
                                verticalAlign: 'middle'
                            }
                        },

                        padding: [2, 0, 0, 0] //[上、右、下、左]
                    }
                },
                // toolbox: {
                //     show: true,
                //     top: '25',
                //     right: '25',
                //     feature: {
                //         saveAsImage: {}
                //     }
                // },
                grid: {
                    top: 100,
                    left: '50px',
                    bottom: '40px',
                    right: '50px',
                    textStyle: {
                        color: '#fff'
                    },
                    containLabel: true
                },dataZoom: [
                    {
                        type: 'inside',
                        height: 13,
                        start: 0,
                        bottom: '20px',
                        end: 100
                    },
                    {
                        start: 0,
                        height: 13,
                        bottom: '20px',
                        end: 100
                    }
                ],
                calculable: true,
                xAxis: [
                    {
                        type: 'category',

                        splitLine: {
                            show: false
                        },

                        splitArea: {
                            show: false
                        },

                        axisTick: { show: false },
                        axisLine: {
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor
                        },

                        data: nameList
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '超标点占比:%',

                        minInterval: 1,
                        type: 'value',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor
                        },
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: [echartsColor.thread],
                                type: 'dashed',
                                opacity: 0.5
                            }
                        },
                        nameTextStyle: {
                            color: echartsColor.WordColor
                        }
                    },
                    {
                        type: 'value',
                        name: '平均超标天数:天',
                        minInterval: 1,
                        nameTextStyle: {
                            color: echartsColor.WordColor
                        },
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: echartsColor.WordColor
                        },
                        splitArea: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '超标占比',
                        type: 'bar',
                        barMaxWidth: 30, // 柱状宽度
                        itemStyle: {
                            normal: {
                                color: echartsColor.FigureColor[0]
                                //borderRadius: [10],
                            }
                        },
                        data: histograms
                    },

                    {
                        name: '超标天数',
                        type: 'line',
                        yAxisIndex: 1,
                        symbolSize: 5, // 圆点大小
                        symbol: 'circle',
                        smooth: false, // 是否平滑曲线
                        itemStyle: {
                            // 折线圆点设置
                            normal: {
                                color: echartsColor.FigureColor[1],
                                barBorderRadius: 0
                            }
                        },
                        lineStyle: {
                            // 折线设置
                            normal: {
                                width: 2,
                                color: echartsColor.FigureColor[1]
                            }
                        },
                        data: lineCharts
                    }
                ]
            }
            option && myChart2.setOption(option, true)
            window.echartsArr.push(myChart2)
            setTimeout(function () {
                myChart2.resize()
            }, 0)
        },
        electr3() {
            let echarts = require('echarts')
            let domID3 = document.getElementById('electr3')
            setTimeout(() => {
                ;(domID3.style.width = document.getElementById('app-main-in').offsetWidth + 'px'),
                    (domID3.style.height = (window.sessionStorage.getItem('appheight') - 130) / 2 + 'px')
            }, 0)
            if (myChart2 != null && myChart2 != '' && myChart2 != undefined) {
                myChart2.dispose() //销毁
            }
            let histograms = []
            let lineCharts = []
            let nameList = []
            this.electr3List.forEach(item => {
                histograms.push(item.histograms)
                lineCharts.push(item.lineCharts)
                nameList.push(item.type)
            })
            let myChart2 = echarts.init(domID3)
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let option = {
                title: {
                    text: '谐波指标',
                    left: 'center',
                    top: '5px',
                    textStyle: {
                        color: echartsColor.WordColor
                    }
                },
                tooltip: {
                    //提示框组件
                    trigger: 'axis',

                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },
                // toolbox: {
                //     show: true,
                //     top: '25',
                //     right: '50',
                //     feature: {
                //         saveAsImage: {}
                //     }
                // },
                legend: {
                    //     data: ["", "普铁"],
                    // top: "15%",
                    top: 40,
                    right: '2%',
                    itemWidth: 16,
                    itemHeight: 16,
                    itemGap: 28,
                    textStyle: {
                        color: echartsColor.WordColor,
                        rich: {
                            a: {
                                verticalAlign: 'middle'
                            }
                        },

                        padding: [2, 0, 0, 0] //[上、右、下、左]
                    }
                },
                grid: {
                    top: 100,
                    left: '50px',
                    bottom: '40px',
                    right: '80px',
                    textStyle: {
                        color: '#fff'
                    },
                    containLabel: true
                },dataZoom: [
                    {
                        type: 'inside',
                        height: 13,
                        start: 0,
                        bottom: '20px',
                        end: 100
                    },
                    {
                        start: 0,
                        height: 13,
                        bottom: '20px',
                        end: 100
                    }
                ],
                calculable: true,
                xAxis: [
                    {
                        type: 'category',

                        splitLine: {
                            show: false
                        },

                        splitArea: {
                            show: false
                        },

                        axisTick: { show: false },
                        axisLine: {
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor
                        },

                        data: nameList
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '超标点占比:%',

                        minInterval: 1,
                        type: 'value',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor
                        },
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: [echartsColor.thread],
                                type: 'dashed',
                                opacity: 0.5
                            }
                        },
                        nameTextStyle: {
                            color: echartsColor.WordColor
                        }
                    },
                    {
                        type: 'value',
                        minInterval: 1,
                        name: '平均超标天数:天',
                        nameTextStyle: {
                            color: echartsColor.WordColor
                        },
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: echartsColor.WordColor
                        },
                        splitArea: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '超标占比',
                        type: 'bar',
                        barMaxWidth: 30, // 柱状宽度
                        itemStyle: {
                            normal: {
                                color: echartsColor.FigureColor[0]
                                //borderRadius: [10],
                            }
                        },
                        data: histograms
                    },
                    // {
                    //   name: "普铁超标占比",
                    //   type: "bar",
                    //   barMaxWidth: 30, // 柱状宽度
                    //   itemStyle: {
                    //     normal: {
                    //       color: "#aeb1ae",
                    //       //borderRadius: [10],
                    //     },
                    //   },
                    //   data: [4, 3, 6, 8, 4, 1, 6, 5, 15],
                    // },
                    {
                        name: '平均超标天数',
                        type: 'line',
                        yAxisIndex: 1,
                        symbolSize: 5, // 圆点大小
                        symbol: 'circle',
                        smooth: false, // 是否平滑曲线
                        itemStyle: {
                            // 折线圆点设置
                            normal: {
                                color: echartsColor.FigureColor[1],
                                barBorderRadius: 0
                            }
                        },
                        lineStyle: {
                            // 折线设置
                            normal: {
                                width: 2,
                                color: echartsColor.FigureColor[1]
                            }
                        },
                        data: lineCharts
                    }
                    // {
                    //   name: "普铁超标天数",
                    //   type: "line",
                    //   yAxisIndex: 1,
                    //   symbolSize: 5, // 圆点大小
                    //   symbol: "circle",
                    //   smooth: false, // 是否平滑曲线
                    //   itemStyle: {
                    //     // 折线圆点设置
                    //     normal: {
                    //       color: "#e69533",
                    //       barBorderRadius: 0,
                    //     },
                    //   },
                    //   lineStyle: {
                    //     // 折线设置
                    //     normal: {
                    //       width: 2,
                    //       color: "#e69533",
                    //     },
                    //   },
                    //   data: [4, 3, 6, 2, 4, 1, 6, 5, 15],
                    // },
                ]
            }
            option && myChart2.setOption(option, true)
            window.echartsArr.push(myChart2)
            setTimeout(function () {
                myChart2.resize()
            }, 0)
        }
    },

    computed: {},

    watch: {}
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');
::v-deep .el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__label {
    height: 32px;
}
::v-deep .Area {
    .el-input {
        width: 140px;
    }
}
.radioGroup {
    position: absolute;
    top: 5px;
    left: 0;
    z-index: 10000;
}
</style>
