<template>
    <div>
        <el-form :inline="true" :model="form" class="demo-form-inline">
            <!-- <el-form-item label="监测点:">
        <el-select v-model.trim="form.valueMonitoring" placeholder="请选择" clearable>
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label">
          </el-option>
        </el-select>
      </el-form-item> -->

            <el-form-item label="指标类别:">
                <el-select v-model.trim="form.valueIndicator" placeholder="请选择" clearable>
                    <el-option
                        v-for="item in indicatorCategory"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="谐波次数:">
                <el-select v-model.trim="form.valueHarmonic" @change="changeTime" placeholder="请选择" clearable>
                    <el-option
                        v-for="item in harmonicNumber"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label"
                    ></el-option>
                </el-select>
            </el-form-item>

            <template v-if="isVoltage">
                <el-form-item label="谐波电压:">
                    <el-select v-model.trim="form.valueVoltage" placeholder="请选择" clearable>
                        <el-option
                            v-for="item in voltage"
                            :key="item.value"
                            :label="item.label"
                            :value="item.label"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </template>

            <template v-if="isCurrent">
                <el-form-item label="谐波电流:">
                    <el-select v-model.trim="form.valueCurrent" placeholder="请选择" clearable>
                        <el-option
                            v-for="item in current"
                            :key="item.value"
                            :label="item.label"
                            :value="item.label"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </template>

            <template v-if="isInterharmonics">
                <el-form-item label="间谐波电压:">
                    <el-select v-model.trim="form.valueInterharmonics" placeholder="请选择" clearable>
                        <el-option
                            v-for="item in interharmonics"
                            :key="item.value"
                            :label="item.label"
                            :value="item.label"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </template>

            <el-form-item>
                <Timeinterval :interval="3" ref="interval"></Timeinterval>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" class="ml10" icon="el-icon-search">查询</el-button>
                <el-button type="primary" icon="el-icon-download">导出</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="20">
            <el-col :span="4">
                <el-tree
                    :data="data"
                    :props="defaultProps"
                    @node-click="handleNodeClick"
                    class="pd20 trend"
                    :style="` height:${vh};overflow-y: auto;`"
                ></el-tree>
            </el-col>
            <el-col :span="20" class="trend" :style="` height:${vh};`">
                <div id="echart" style="width: 100%; height: 100%"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Timeinterval from '@/views/components/Timeinterval.vue'

export default {
    components: { Timeinterval },
    data() {
        return {
            zoom: '',
            form: {
                valueMonitoring: '',
                valueIndicator: '',
                valueHarmonic: '',
                valueVoltage: '',
                valueCurrent: '',
                valueInterharmonics: '',
                date: ''
            },
            isVoltage: false,
            isCurrent: false,
            isInterharmonics: false,
            vh: null,
            isLoading: false,
            //所属单位数据数据
            options: [
                {
                    value: '选项1',
                    label: '石家庄市'
                },
                {
                    value: '选项2',
                    label: '邢台市'
                },
                {
                    value: '选项3',
                    label: '保定市'
                },
                {
                    value: '选项4',
                    label: '沧州市'
                },
                {
                    value: '选项5',
                    label: '衡州市'
                },
                {
                    value: '选项6',
                    label: '邯郸市'
                }
            ],
            //指标类别数据
            indicatorCategory: [
                {
                    value: '选项1',
                    label: '相电压有效值'
                },
                {
                    value: '选项2',
                    label: '线电压有效值'
                },
                {
                    value: '选项3',
                    label: '电流有效值'
                },
                {
                    value: '选项4',
                    label: '电压偏差'
                },
                {
                    value: '选项5',
                    label: '三相电压不平衡度'
                },
                {
                    value: '选项6',
                    label: '谐波电压含有率'
                },
                {
                    value: '选项7',
                    label: '间谐波电压含有率'
                },
                {
                    value: '选项8',
                    label: '电压闪变'
                },
                {
                    value: '选项9',
                    label: '谐波电流幅值'
                },
                {
                    value: '选项10',
                    label: '三相有功功率'
                },

                {
                    value: '选项11',
                    label: '三相无功功率'
                },
                {
                    value: '选项12',
                    label: '三相视在功率'
                },
                {
                    value: '选项13',
                    label: '三相真功率因数'
                },
                {
                    value: '选项14',
                    label: '三相相移功率因数'
                },
                {
                    value: '选项15',
                    label: '频率偏差'
                }
            ],
            //谐波次数
            harmonicNumber: [
                {
                    value: '选项1',
                    label: '谐波电压'
                },
                {
                    value: '选项2',
                    label: '谐波电流'
                },
                {
                    value: '选项3',
                    label: '间谐波电压'
                }
            ],
            //谐波电压
            voltage: [
                {
                    value: '选项1',
                    label: '1次'
                },
                {
                    value: '选项2',
                    label: '2次'
                },
                {
                    value: '选项3',
                    label: '3次'
                },
                {
                    value: '选项4',
                    label: '4次'
                },
                {
                    value: '选项5',
                    label: '5次'
                },
                {
                    value: '选项6',
                    label: '6次'
                },
                {
                    value: '选项7',
                    label: '7次'
                },
                {
                    value: '选项8',
                    label: '8次'
                },
                {
                    value: '选项9',
                    label: '9次'
                },
                {
                    value: '选项10',
                    label: '10次'
                },
                {
                    value: '选项11',
                    label: '11次'
                },
                {
                    value: '选项12',
                    label: '12次'
                },
                {
                    value: '选项13',
                    label: '13次'
                },
                {
                    value: '选项14',
                    label: '14次'
                },
                {
                    value: '选项15',
                    label: '15次'
                },
                {
                    value: '选项16',
                    label: '16次'
                },
                {
                    value: '选项17',
                    label: '17次'
                },
                {
                    value: '选项18',
                    label: '18次'
                },
                {
                    value: '选项19',
                    label: '19次'
                },
                {
                    value: '选项20',
                    label: '20次'
                },
                {
                    value: '选项21',
                    label: '21次'
                },
                {
                    value: '选项22',
                    label: '22次'
                },
                {
                    value: '选项23',
                    label: '23次'
                },
                {
                    value: '选项24',
                    label: '24次'
                },
                {
                    value: '选项25',
                    label: '25次'
                },
                {
                    value: '选项26',
                    label: '26次'
                },
                {
                    value: '选项27',
                    label: '27次'
                },
                {
                    value: '选项28',
                    label: '28次'
                },
                {
                    value: '选项29',
                    label: '29次'
                },
                {
                    value: '选项30',
                    label: '30次'
                },
                {
                    value: '选项31',
                    label: '31次'
                },
                {
                    value: '选项32',
                    label: '32次'
                },
                {
                    value: '选项33',
                    label: '33次'
                },
                {
                    value: '选项34',
                    label: '34次'
                },
                {
                    value: '选项35',
                    label: '35次'
                },
                {
                    value: '选项36',
                    label: '36次'
                },
                {
                    value: '选项37',
                    label: '37次'
                },
                {
                    value: '选项38',
                    label: '38次'
                },
                {
                    value: '选项39',
                    label: '39次'
                },
                {
                    value: '选项40',
                    label: '40次'
                },
                {
                    value: '选项41',
                    label: '41次'
                },
                {
                    value: '选项42',
                    label: '42次'
                },
                {
                    value: '选项43',
                    label: '43次'
                },
                {
                    value: '选项44',
                    label: '44次'
                },
                {
                    value: '选项45',
                    label: '45次'
                },
                {
                    value: '选项46',
                    label: '46次'
                },
                {
                    value: '选项47',
                    label: '47次'
                },
                {
                    value: '选项48',
                    label: '48次'
                },
                {
                    value: '选项49',
                    label: '49次'
                },
                {
                    value: '选项50',
                    label: '50次'
                }
            ],
            //谐波电流
            current: [
                {
                    value: '选项1',
                    label: '1次'
                },
                {
                    value: '选项2',
                    label: '2次'
                },
                {
                    value: '选项3',
                    label: '3次'
                },
                {
                    value: '选项4',
                    label: '4次'
                },
                {
                    value: '选项5',
                    label: '5次'
                },
                {
                    value: '选项6',
                    label: '6次'
                },
                {
                    value: '选项7',
                    label: '7次'
                },
                {
                    value: '选项8',
                    label: '8次'
                },
                {
                    value: '选项9',
                    label: '9次'
                },
                {
                    value: '选项10',
                    label: '10次'
                },
                {
                    value: '选项11',
                    label: '11次'
                },
                {
                    value: '选项12',
                    label: '12次'
                },
                {
                    value: '选项13',
                    label: '13次'
                },
                {
                    value: '选项14',
                    label: '14次'
                },
                {
                    value: '选项15',
                    label: '15次'
                },
                {
                    value: '选项16',
                    label: '16次'
                },
                {
                    value: '选项17',
                    label: '17次'
                },
                {
                    value: '选项18',
                    label: '18次'
                },
                {
                    value: '选项19',
                    label: '19次'
                },
                {
                    value: '选项20',
                    label: '20次'
                },
                {
                    value: '选项21',
                    label: '21次'
                },
                {
                    value: '选项22',
                    label: '22次'
                },
                {
                    value: '选项23',
                    label: '23次'
                },
                {
                    value: '选项24',
                    label: '24次'
                },
                {
                    value: '选项25',
                    label: '25次'
                },
                {
                    value: '选项26',
                    label: '26次'
                },
                {
                    value: '选项27',
                    label: '27次'
                },
                {
                    value: '选项28',
                    label: '28次'
                },
                {
                    value: '选项29',
                    label: '29次'
                },
                {
                    value: '选项30',
                    label: '30次'
                },
                {
                    value: '选项31',
                    label: '31次'
                },
                {
                    value: '选项32',
                    label: '32次'
                },
                {
                    value: '选项33',
                    label: '33次'
                },
                {
                    value: '选项34',
                    label: '34次'
                },
                {
                    value: '选项35',
                    label: '35次'
                },
                {
                    value: '选项36',
                    label: '36次'
                },
                {
                    value: '选项37',
                    label: '37次'
                },
                {
                    value: '选项38',
                    label: '38次'
                },
                {
                    value: '选项39',
                    label: '39次'
                },
                {
                    value: '选项40',
                    label: '40次'
                },
                {
                    value: '选项41',
                    label: '41次'
                },
                {
                    value: '选项42',
                    label: '42次'
                },
                {
                    value: '选项43',
                    label: '43次'
                },
                {
                    value: '选项44',
                    label: '44次'
                },
                {
                    value: '选项45',
                    label: '45次'
                },
                {
                    value: '选项46',
                    label: '46次'
                },
                {
                    value: '选项47',
                    label: '47次'
                },
                {
                    value: '选项48',
                    label: '48次'
                },
                {
                    value: '选项49',
                    label: '49次'
                },
                {
                    value: '选项50',
                    label: '50次'
                }
            ],
            //间谐波电压
            interharmonics: [
                {
                    value: '选项1',
                    label: '0.5次'
                },
                {
                    value: '选项2',
                    label: '1.5次'
                },
                {
                    value: '选项3',
                    label: '2.5次'
                },
                {
                    value: '选项4',
                    label: '3.5次'
                },
                {
                    value: '选项5',
                    label: '4.5次'
                },
                {
                    value: '选项6',
                    label: '5.5次'
                },
                {
                    value: '选项7',
                    label: '6.5次'
                },
                {
                    value: '选项8',
                    label: '7.5次'
                },
                {
                    value: '选项9',
                    label: '8.5次'
                },
                {
                    value: '选项10',
                    label: '9.5次'
                },
                {
                    value: '选项11',
                    label: '10.5次'
                },
                {
                    value: '选项12',
                    label: '11.5次'
                },
                {
                    value: '选项13',
                    label: '12.5次'
                },
                {
                    value: '选项14',
                    label: '13.5次'
                },
                {
                    value: '选项15',
                    label: '14.5次'
                },
                {
                    value: '选项16',
                    label: '15.5次'
                },
                {
                    value: '选项17',
                    label: '16.5次'
                },
                {
                    value: '选项18',
                    label: '17.5次'
                },
                {
                    value: '选项19',
                    label: '18.5次'
                },
                {
                    value: '选项20',
                    label: '19.5次'
                },
                {
                    value: '选项21',
                    label: '20.5次'
                },
                {
                    value: '选项22',
                    label: '21.5次'
                },
                {
                    value: '选项23',
                    label: '22.5次'
                },
                {
                    value: '选项24',
                    label: '23.5次'
                }
            ],
            //稳态指标历史趋势
            data: [
                {
                    label: '石家庄市',
                    children: [
                        {
                            label: '35kV变电站1',
                            children: [
                                {
                                    label: '测点1'
                                }
                            ]
                        },
                        {
                            label: '35kV变电站2',
                            children: [
                                {
                                    label: '测点2'
                                }
                            ]
                        }
                    ]
                },
                {
                    label: '邢台市',
                    children: [
                        {
                            label: '35kV变电站1',
                            children: [
                                {
                                    label: '测点1'
                                }
                            ]
                        },
                        {
                            label: '35kV变电站2',
                            children: [
                                {
                                    label: '测点2'
                                }
                            ]
                        }
                    ]
                },
                {
                    label: '保定市',
                    children: [
                        {
                            label: '35kV变电站1',
                            children: [
                                {
                                    label: '测点1'
                                }
                            ]
                        },
                        {
                            label: '35kV变电站2',
                            children: [
                                {
                                    label: '测点2'
                                }
                            ]
                        }
                    ]
                },
                {
                    label: '沧州市',
                    children: [
                        {
                            label: '35kV变电站1',
                            children: [
                                {
                                    label: '测点1'
                                }
                            ]
                        },
                        {
                            label: '35kV变电站2',
                            children: [
                                {
                                    label: '测点2'
                                }
                            ]
                        }
                    ]
                },
                {
                    label: '衡州市',
                    children: [
                        {
                            label: '35kV变电站1',
                            children: [
                                {
                                    label: '测点1'
                                }
                            ]
                        },
                        {
                            label: '35kV变电站2',
                            children: [
                                {
                                    label: '测点2'
                                }
                            ]
                        }
                    ]
                },
                {
                    label: '邯郸市',
                    children: [
                        {
                            label: '35kV变电站1',
                            children: [
                                {
                                    label: '测点1'
                                }
                            ]
                        },
                        {
                            label: '35kV变电站2',
                            children: [
                                {
                                    label: '测点2'
                                }
                            ]
                        }
                    ]
                }
            ],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            device: '',
            currentPage: 1, // 当前
            total: 20, // 总条数
            pageSize: 18 // 每页的数据条数
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)

        this.echarts()
        this.zoom = 1 / document.body.style.zoom
        window.addEventListener('resize', () => {
            this.zoom = 1 / document.body.style.zoom
        })
    },

    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 125 + 'px'
        },

        //表格合并
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (rowIndex % 3 === 0) {
                    return {
                        rowspan: 3,
                        colspan: 1
                    }
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    }
                }
            }
        },
        handleNodeClick(data) {
            // console.log(data);
        },
        //谐波次数
        changeTime(time) {
            // console.log(time);
            if (time == '谐波电压') {
                this.isVoltage = true
                this.isCurrent = false
                this.isInterharmonics = false
            } else if (time == '谐波电流') {
                this.isCurrent = true
                this.isVoltage = false
                this.isInterharmonics = false
            } else if (time == '间谐波电压') {
                this.isInterharmonics = true
                this.isVoltage = false
                this.isCurrent = false
            } else {
                this.isVoltage = false
                this.isCurrent = false
                this.isInterharmonics = false
            }
        },
        //Echarts图表
        echarts() {
            let echarts = require('echarts')

            let domID1 = document.getElementById('echart')
            let myChart = echarts.init(domID1)
            setTimeout(() => {
                ;(domID1.style.width = document.getElementById('app-main-in').offsetWidth - 315 + 'px'),
                    (domID1.style.height = window.sessionStorage.getItem('appheight') - 125 + 'px')
            }, 0)
            let option = {
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '2%',
                    right: '4%',
                    bottom: '4%',
                    top: '16%',
                    containLabel: true
                },
                color: ['yellow', 'green', 'red'],
                legend: {
                    data: ['A相', 'B相', 'C相'],
                    icon: 'rect',
                    left: '7%',
                    top: '5%',
                    textStyle: {
                        color: '#666666'
                    },
                    itemWidth: 15,
                    itemHeight: 10,
                    itemGap: 25
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [
                        '00:00',
                        '01:00',
                        '02:00',
                        '03:00',
                        '04:00',
                        '05:00',
                        '06:00',
                        '07:00',
                        '08:00',
                        '09:00',
                        '10:00',
                        '11:00',
                        '12:00',
                        '13:00',
                        '14:00',
                        '15:00',
                        '16:00',
                        '17:00',
                        '18:00',
                        '19:00',
                        '20:00',
                        '21:00',
                        '22:00',
                        '23:00'
                    ],

                    axisLine: {
                        lineStyle: {
                            color: 'grey'
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        textStyle: {
                            color: '#666666'
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: 'A',
                        min: 60000,
                        max: 110000,
                        interval: 10000,
                        nameTextStyle: {
                            color: '#666666'
                        },
                        position: 'left',
                        axisLine: {
                            lineStyle: {
                                color: '#cdd5e2'
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: ['grey'],
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#666666'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: 'A相',
                        type: 'line',
                        smooth: false, //平滑曲线显示

                        symbol: 'none', //标记的图形为无
                        lineStyle: {
                            color: 'yellow'
                        },

                        data: [
                            72000, 83000, 68000, 78000, 75000, 89000, 102000, 73000, 68000, 75000, 69000, 71000, 108000,
                            62000, 75000, 84000, 92000, 105000, 101000, 94000, 88000, 75000, 84000, 98000
                        ]
                    },
                    {
                        name: 'B相',
                        type: 'line',
                        smooth: false, //平滑曲线显示

                        symbol: 'none', //标记的图形为无
                        lineStyle: {
                            color: 'green'
                        },

                        data: [
                            73000, 84000, 69000, 79000, 76000, 90000, 103000, 74000, 69000, 76000, 70000, 72000, 109000,
                            63000, 76000, 85000, 93000, 106000, 102000, 95000, 89000, 76000, 85000, 99000
                        ]
                    },
                    {
                        name: 'C相',
                        type: 'line',
                        smooth: false, //平滑曲线显示

                        symbol: 'none', //标记的图形为无
                        lineStyle: {
                            color: 'red'
                        },

                        data: [
                            74000, 85000, 70000, 80000, 77000, 91000, 104000, 75000, 70000, 77000, 71000, 73000, 110000,
                            64000, 77000, 86000, 94000, 107000, 103000, 96000, 90000, 77000, 86000, 100000
                        ]
                    }
                ]
            }
            option && myChart.setOption(option, true)
            window.echartsArr.push(myChart)
            setInterval(function () {
                myChart.resize()
            }, 0)
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.currentPage = 1
            this.pageSize = val
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.currentPage = val
        }
    }
}
</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;
}
// ::v-deep .el-tree-node__content:hover{
//   color: #606266;
// }
.box {
    display: flex;
}
.left {
    width: 350px;
    overflow-y: auto;
    border: 1px solid black;
}
.right {
    flex: 1;
    border: 1px solid black;
}
.trend {
    border: 1px solid #000;
}
</style>
