<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="24" :style="`height:${vh}`">
                <div v-loading="isLoading" id="electr1" 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">
        <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 { getRMpInfluenceList, getRMpInfluenceChart } from '@/api/SpecialAnalysisModuleDesign/WindFarm/influence.js'
import { dicData } from '@/assets/commjs/dictypeData'
import Timeinterval from '@/views/components/Timeinterval.vue'
import Area from '@/views/components/Area/Area.vue'
export default {
    components: { Area, Timeinterval },
    props: {},
    data() {
        return {
            typeList: [],
            zoom: '',
            form: {
                id: '',
                endTime: '',
                startTime: '',
                monitorTag: '',
                type: ''
            },
            List: [],
            electrList: [],
            vh: undefined,
            radio1: '1',
            isLoading: false,
            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 - 30 + 'px'),
                    (domID1.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
                }
            })
            //   字典获取数据电压等级;
        },
        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
            getRMpInfluenceList(this.form).then(res => {
                this.isLoading = false
                this.List = res.data
                this.electr1()
            })
            getRMpInfluenceChart(this.form).then(res => {
                this.isLoading = false
                this.electrList = res.data
                this.electr3()
            })
        },
        handleNodeClick(data) {
            this.form.id = data.id
        },
        electr1() {
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let echarts = require('echarts')
            let domID1 = document.getElementById('electr1')
            setTimeout(() => {
                ;(domID1.style.width = document.getElementById('app-main-in').offsetWidth - 30 + 'px'),
                    (domID1.style.height = (window.sessionStorage.getItem('appheight') - 130) / 2 + 'px')
            }, 0)

            let myChart2 = echarts.init(domID1)

            let hours = []
            let days = [
                '负序电压不平衡度',
                '负序电压不平衡度平均超标天数',
                '谐波电压平均超标天数',
                '负序电压不平衡度超标占比'
            ]

            let data = []
            this.List.forEach((item, ind) => {
                hours.push(item.orgName)
                data.push(
                    [ind, 0, item.negativeSequenceVoltageUnbalance],
                    [ind, 1, item.negativeSequenceVoltageUnbalanceExcessDayAvg],
                    [ind, 2, item.vexcessDayAvg],
                    [ind, 3, item.negativeSequenceVoltageUnbalanceExcessRate]
                )
            })

            let option = {
                tooltip: {
                    //提示框组件

                    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
                },
                animation: false,
                grid: {
                    height: '75%',
                    top: '70px',
                    right: '50',
                    left: '180'
                },
                // toolbox: {
                //     show: true,
                //     top: '5',
                //     right: '15',
                //     feature: {
                //         saveAsImage: {}
                //     }
                // },
                xAxis: {
                    type: 'category',
                    position: 'top',
                    data: hours,
                    axisTick: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    }
                },
                yAxis: {
                    type: 'category',
                    data: days,
                    splitArea: {
                        show: true
                    },
                    axisTick: {
                        show: false
                    },
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    }
                },
                visualMap: {
                    text: ['', '各指标分析'],
                    show: true,
                    min: 0,
                    max: 80,
                    calculable: false,
                    orient: 'horizontal',
                    top: '0',
                    right: '40px',
                    textStyle: {
                        color: echartsColor.WordColor
                    },

                    inRange: {
                        color: ['#c4eaff', '#04b3f4'],
                        symbolSize: [10, 100]
                    }
                },
                series: [
                    {
                        name: '',
                        type: 'heatmap',
                        data: data,
                        label: {
                            show: true
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
            option && myChart2.setOption(option, true)
            window.echartsArr.push(myChart2)
            setTimeout(function () {
                myChart2.resize()
            }, 0)
        },
        electr3() {
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            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)
            let rmpInfluenceVExcessRateMVO = []
            let rmpInfluenceVMVO = []

            for (let k in this.electrList.rmpInfluenceVExcessRateMVO) {
                rmpInfluenceVExcessRateMVO.push(this.electrList.rmpInfluenceVExcessRateMVO[k])
            }
            for (let k in this.electrList.rmpInfluenceVMVO) {
                rmpInfluenceVMVO.push(this.electrList.rmpInfluenceVMVO[k])
            }

            let myChart2 = echarts.init(domID3)

            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: '0',
                    right: '80px',
                    textStyle: {
                        color: '#fff'
                    },
                    containLabel: true
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        splitLine: {
                            show: false
                        },

                        splitArea: {
                            show: false
                        },

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

                        data: [
                            '2次',
                            '3次',
                            '4次',
                            '5次',
                            '6次',
                            '7次',
                            '8次',
                            '9次',
                            '10次',
                            '11次',
                            '12次',
                            '13次',
                            '14次',
                            '15次',
                            '16次',
                            '17次',
                            '18次',
                            '19次',
                            '20次',
                            '21次',
                            '22次',
                            '23次',
                            '24次',
                            '25次'
                        ]
                    }
                ],
                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: '平均超标天数:天',
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        nameTextStyle: {
                            color: echartsColor.WordColor
                        },
                        axisLabel: {
                            color: echartsColor.WordColor
                        },
                        splitArea: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '超标占比',
                        type: 'bar',
                        barMaxWidth: 30, // 柱状宽度
                        itemStyle: {
                            normal: {
                                color: echartsColor.FigureColor[0]
                                // borderRadius: [10],
                            }
                        },
                        data: rmpInfluenceVMVO
                    },
                    // {
                    //   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: rmpInfluenceVExcessRateMVO
                    }
                    // {
                    //   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>
