<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div class="Top" ref="top">
                    <el-tabs v-model="active" type="border-card">
                        <el-tab-pane label="变电站母线电压指标年报" name="first">
                            <el-form :inline="true" :model="form" class="demo-form-inline">
                                <el-form-item><Area @click="handleNodeClick"></Area></el-form-item>
                                <el-form-item label="电压等级">
                                    <el-select
                                        value-key="value"
                                        clearable
                                        multiple
                                        collapse-tags
                                        v-model="form.voltageLevel"
                                        placeholder="请选择"
                                        style="width: 225px"
                                    >
                                        <el-option
                                            v-for="item in level"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <Timeinterval ref="Timeinterval" :interval="1" :timeOptions="timeOptions"></Timeinterval>
                                </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" @click="exportEvent">
                                        导出
                                    </el-button>
                                </el-form-item>
                            </el-form>
                            <vxe-table
                                :data="totalData.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
                                :height="vh1 - 108 + 'px'"
                                border
                                :row-config="{ isCurrent: true, isHover: true }"
                                size="mini"
                                ref="classification"
                                v-loading="isLoading"
                                style="width: 100%"
                                header-cell-class-name="table_header"
                            >
                                <vxe-table-column
                                    align="center"
                                    field="deptName"
                                    title="单位"
                                    show-overflow
                                    :formatter="formatters"
                                    min-width="180px"
                                ></vxe-table-column>
                                <vxe-table-column
                                    align="center"
                                    field="subName"
                                    title="变电站名称"
                                    :formatter="formatters"
                                    min-width="120px"
                                    show-overflow
                                ></vxe-table-column>
                                <vxe-table-column
                                    align="center"
                                    field="subVoltageLevel"
                                    title="电压等级"
                                    min-width="150px"
                                    :formatter="formatter"
                                ></vxe-table-column>
                                <!-- <vxe-table-column  align="center"    field="?" title="日均"> </vxe-table-column> -->
                                <vxe-table-column
                                    align="center"
                                    field="busbarName"
                                    title="母线名称"
                                    :formatter="formatters"
                                    min-width="120px"
                                    show-overflow
                                ></vxe-table-column>
                                <vxe-table-colgroup align="center" title="电压有效值(kV)">
                                    <vxe-table-colgroup
                                        align="center"
                                        field="veffectiveMax"
                                        title="最大值"
                                        :formatter="formatters"
                                        min-width="70px"
                                    ></vxe-table-colgroup>
                                    <vxe-table-colgroup
                                        align="center"
                                        field="veffectiveMin"
                                        title="最小值"
                                        :formatter="formatters"
                                        min-width="70px"
                                    ></vxe-table-colgroup>
                                    <vxe-table-colgroup
                                        align="center"
                                        field="veffectiveAvg"
                                        title="平均值"
                                        :formatter="formatters"
                                        min-width="70px"
                                    ></vxe-table-colgroup>
                                    <vxe-table-colgroup
                                        align="center"
                                        field="veffective95"
                                        title="95概率大值"
                                        :formatter="formatters"
                                        min-width="100px"
                                    ></vxe-table-colgroup>
                                </vxe-table-colgroup>
                                <vxe-table-colgroup align="center" title="电压总谐波畸变率(%)">
                                    <vxe-table-colgroup
                                        align="center"
                                        field="vthdMax"
                                        title="最大值"
                                        :formatter="formatters"
                                        min-width="70px"
                                    ></vxe-table-colgroup>
                                    <vxe-table-colgroup
                                        align="center"
                                        field="vthdMin"
                                        title="最小值"
                                        :formatter="formatters"
                                        min-width="70px"
                                    ></vxe-table-colgroup>
                                    <vxe-table-colgroup
                                        align="center"
                                        field="vthdAvg"
                                        title="平均值"
                                        :formatter="formatters"
                                        min-width="70px"
                                    ></vxe-table-colgroup>
                                    <vxe-table-colgroup
                                        align="center"
                                        field="vthd95"
                                        title="95概率大值"
                                        :formatter="formatters"
                                        min-width="100px"
                                    ></vxe-table-colgroup>
                                </vxe-table-colgroup>
                                <vxe-table-colgroup align="center" title="三相电压不平衡">
                                    <vxe-table-colgroup
                                        align="center"
                                        field="unbalanceMax"
                                        title="最大值"
                                        :formatter="formatters"
                                        min-width="70px"
                                    ></vxe-table-colgroup>
                                    <vxe-table-colgroup
                                        align="center"
                                        field="unbalanceMin"
                                        title="最小值"
                                        :formatter="formatters"
                                        min-width="70px"
                                    ></vxe-table-colgroup>
                                    <vxe-table-colgroup
                                        align="center"
                                        field="unbalanceAvg"
                                        title="平均值"
                                        :formatter="formatters"
                                        min-width="70px"
                                    ></vxe-table-colgroup>
                                    <vxe-table-colgroup
                                        align="center"
                                        field="unbalance95"
                                        :formatter="formatters"
                                        title="95概率大值"
                                        width="100px"
                                    ></vxe-table-colgroup>
                                </vxe-table-colgroup>
                                <vxe-table-colgroup align="center" title="长时闪变">
                                    <vxe-table-colgroup
                                        align="center"
                                        field="flickerMax"
                                        title="最大值"
                                        :formatter="formatters"
                                        min-width="70px"
                                    ></vxe-table-colgroup>
                                    <vxe-table-colgroup
                                        align="center"
                                        field="flickerMin"
                                        title="最小值"
                                        :formatter="formatters"
                                        min-width="70px"
                                    ></vxe-table-colgroup>
                                    <vxe-table-colgroup
                                        align="center"
                                        field="flickerAvg"
                                        title="平均值"
                                        :formatter="formatters"
                                        min-width="70px"
                                    ></vxe-table-colgroup>
                                    <vxe-table-colgroup
                                        align="center"
                                        field="flicker95"
                                        title="95概率大值"
                                        :formatter="formatters"
                                        width="100px"
                                    ></vxe-table-colgroup>
                                </vxe-table-colgroup>
                            </vxe-table>
                            <el-pagination
                                class="mt10"
                                background
                                align="right"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="pageNum"
                                :page-sizes="[20, 30, 40, 50, 100]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="totalData.length"
                            ></el-pagination>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { getRStatBusbarHarmonic } from '@/api/Statistical-analysis/Census'
import Area from '@/views/components/Area/Area.vue'
import { dicData } from '@/assets/commjs/dictypeData'
import Timeinterval from '@/views/components/Timeinterval.vue'
export default {
    components: { Area, Timeinterval },
    data() {
        return {
            pageNum: 1,
            pageSize: 20,
            vh1: undefined,
            level: [],
            // id: "",
            form: {
                type: '',
                startTime: '',

                endTime: '',
                voltageLevel: []
            },
            isLoading: false,
            //稳态指标超标统计
            totalData: [],
            active: 'first',
            timeOptions: [{ label: '年份', value: 1 }]
        }
    },
    created() {
        this.info()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.steady()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh1 = window.sessionStorage.getItem('appheight') - 55
        },
        info() {
            var code = 'Dev_Voltage'
            this.level = dicData(code, ['Load_Type'])
            this.level.forEach(item => {
                this.form.voltageLevel.push(item.value)
            })
            // this.form.voltageLevel = this.level;
        },
        async steady() {
            this.isLoading = true
            if (this.form.id == undefined) {
                this.form.id = JSON.parse(window.sessionStorage.getItem('Info')).deptId
            }
            this.form.startTime = this.$refs.Timeinterval.timeValue[0]
            this.form.endTime = this.$refs.Timeinterval.timeValue[1]
            this.form.type = this.$refs.Timeinterval.intervald

            await getRStatBusbarHarmonic(this.form).then(res => {
                this.totalData = res.data
                this.isLoading = false
            })
        },
        // 数据过滤
        formatters({ cellValue }) {
            if (cellValue == null || cellValue == 3.14159) {
                return '/'
            } else {
                return cellValue
            }
        },
        // 数据过滤
        formatter(row, column) {
            let title = ''
            this.level.forEach(item => {
                if (item.value == row.row.subVoltageLevel) {
                    title = item.label
                }
            })
            return title
        },
        //导出
        exportEvent() {
            this.$refs.classification.exportData({
                filename: 'export', // 文件名字
                sheetName: 'Sheet1',
                type: 'xlsx', //导出文件类型 xlsx 和 csv
                useStyle: true,
                data: this.totalData // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { //   return !(column.$columnIndex === 0 ) //   // 0是复选框 不导出 // }
            })
        },
        // 区域
        handleNodeClick(data) {
            this.form.id = data.id
        },
        handleSizeChange(e) {
            this.pageSize = e
        },
        handleCurrentChange(e) {
            this.pageNum = e
        }
    }
}
</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 .vxe-table .cell {
    text-align: center;
}
::v-deep .el-pagination {
    padding: 0;
}
</style>
