<template>
    <div>
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <Area @click="handleNodeClick" ref="area"></Area>
            </el-form-item>

            <el-form-item>
                <Timeinterval ref="Timeinterval" @time="time" :timeOptions="timeOptions"></Timeinterval>
            </el-form-item>

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

        <el-row>
            <el-col :span="24">
                <vxe-table
                    size="mini"
                    :row-config="{ isCurrent: true, isHover: true }"
                    border
                    stripe
                    ref="classification1"
                    :data="alarmStatisticsData"
                    :height="height"
                    style="width: 100%"
                    v-loading="isLoading"
                    header-cell-class-name="table_header"
                >
                    <vxe-table-colgroup
                        title="单位"
                        field="orgName"
                        align="center"
                        min-width="150"
                        show-overflow
                    ></vxe-table-colgroup>
                    <vxe-table-colgroup title="稳态指标告警情况" align="center">
                        <vxe-table-colgroup title="电压偏差" min-width="120" align="center">
                            <vxe-table-colgroup title="告警情况" min-width="120" align="center">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.vdevAlarmInfo == 0 ? '是' : '否' }}</span>
                                </template>
                            </vxe-table-colgroup>
                            <vxe-table-colgroup
                                title="超标占比(%)"
                                min-width="120"
                                field="vdevAlarmRatio"
                                align="center"
                            ></vxe-table-colgroup>
                        </vxe-table-colgroup>
                        <vxe-table-colgroup title="频率偏差" align="center">
                            <vxe-table-colgroup title="告警情况" min-width="120" field="freqAlarmInfo" align="center">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.freqAlarmInfo == 0 ? '是' : '否' }}</span>
                                </template>
                            </vxe-table-colgroup>
                            <vxe-table-colgroup
                                title="超标占比(%)"
                                min-width="120"
                                field="freqAlarmRatio"
                                align="center"
                            ></vxe-table-colgroup>
                        </vxe-table-colgroup>
                        <vxe-table-colgroup title="三相电压不平衡度" align="center">
                            <vxe-table-colgroup
                                title="告警情况"
                                min-width="120"
                                field="unbalanceAlarmInfo"
                                align="center"
                            >
                                <template slot-scope="scope">
                                    <span>{{ scope.row.unbalanceAlarmInfo == 0 ? '是' : '否' }}</span>
                                </template>
                            </vxe-table-colgroup>
                            <vxe-table-colgroup
                                title="超标占比(%)"
                                min-width="120"
                                field="unbalanceAlarmRatio"
                                align="center"
                            ></vxe-table-colgroup>
                        </vxe-table-colgroup>
                        <vxe-table-colgroup title="谐波电压" align="center">
                            <vxe-table-colgroup title="告警情况" min-width="120" field="valarmInfo" align="center">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.valarmInfo == 0 ? '是' : '否' }}</span>
                                </template>
                            </vxe-table-colgroup>
                            <vxe-table-colgroup
                                title="超标占比(%)"
                                min-width="120"
                                field="valarmRatio"
                                align="center"
                            ></vxe-table-colgroup>
                        </vxe-table-colgroup>
                        <vxe-table-colgroup title="长时闪变" align="center">
                            <vxe-table-colgroup
                                title="告警情况"
                                min-width="120"
                                field="flickerAlarmInfo"
                                align="center"
                            >
                                <template slot-scope="scope">
                                    <span>{{ scope.row.flickerAlarmInfo == 0 ? '是' : '否' }}</span>
                                </template>
                            </vxe-table-colgroup>
                            <vxe-table-colgroup
                                title="超标占比(%)"
                                min-width="120"
                                field="flickerAlarmRatio"
                                align="center"
                            ></vxe-table-colgroup>
                        </vxe-table-colgroup>
                    </vxe-table-colgroup>
                    <vxe-table-colgroup title="暂态指标告警情况" align="center">
                        <vxe-table-colgroup title="电压暂降" align="center">
                            <vxe-table-colgroup title="告警情况" field="sagAlarmInfo" align="center" min-width="130">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.sagAlarmInfo == 0 ? '是' : '否' }}</span>
                                </template>
                            </vxe-table-colgroup>
                            <vxe-table-colgroup
                                title="平均发生次数"
                                min-width="120"
                                field="sagAlarmAvgCount"
                                align="center"
                            ></vxe-table-colgroup>
                        </vxe-table-colgroup>
                        <vxe-table-colgroup title="短时中断" align="center">
                            <vxe-table-colgroup
                                title="告警情况"
                                field="interruptAlarmInfo"
                                align="center"
                                min-width="120"
                            >
                                <template slot-scope="scope">
                                    <span>{{ scope.row.interruptAlarmInfo == 0 ? '是' : '否' }}</span>
                                </template>
                            </vxe-table-colgroup>
                            <vxe-table-colgroup
                                title="平均发生次数"
                                min-width="120"
                                field="interruptAlarmAvgCount"
                                align="center"
                            ></vxe-table-colgroup>
                        </vxe-table-colgroup>
                    </vxe-table-colgroup>
                    <vxe-table-colgroup
                        title="稳态指标评级结果"
                        field="harmonicTypeGrade"
                        align="center"
                        min-width="160"
                    >
                        <template slot-scope="scope">
                            <span>
                                {{
                                    scope.row.harmonicTypeGrade == 0
                                        ? '较差 '
                                        : scope.row.harmonicTypeGrade == 1
                                        ? '中等'
                                        : '较好'
                                }}
                            </span>
                        </template>
                    </vxe-table-colgroup>
                    <vxe-table-colgroup title="暂态指标评级结果" field="eventTypeGrade" align="center" min-width="160">
                        <template slot-scope="scope">
                            <span>
                                {{
                                    scope.row.eventTypeGrade == 0
                                        ? '较差 '
                                        : scope.row.eventTypeGrade == 1
                                        ? '中等'
                                        : '较好'
                                }}
                            </span>
                        </template>
                    </vxe-table-colgroup>
                </vxe-table>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Area from '@/views/components/Area/Area.vue'
import Timeinterval from './Timeslot.vue'
import { getPwAllRStatAreaAlarmCountMList } from '@/api/Distributionnetwork-analysis/IndicatorAlarmStatistics/IndicatorAlarmStatistics'
export default {
    components: { Area, Timeinterval },
    data() {
        return {
            id: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
            kai: true,
            start: '',
            end: '',
            vh: '',
            height: null,
            isLoading: false,
            alarmStatisticsData: [],
            device: '',
            timeOptions: [{ label: '月份', value: 3 }]
        }
    },
    created() {},
    mounted() {
        this.device = window.devicePixelRatio
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.height = window.sessionStorage.getItem('appheight') - 175
        },
        dc() {
            this.$refs.classification1.exportData({
                filename: 'export1', // 文件名字
                sheetName: 'Sheet1',
                type: 'xlsx', //导出文件类型 xlsx 和 csv
                useStyle: true,
                isFooter: true,
                data: this.alarmStatisticsData // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { //   return !(column.$columnIndex === 0 ) //   // 0是复选框 不导出 // }
            })
        },
        time(val) {
            ;(this.start = val[0]), (this.end = val[1])
            this.type = val[2]
            if (this.kai) {
                this.alarmStatistics()
            }
        },
        //获取数据
        alarmStatistics() {
            this.kai = false
            this.isLoading = true
            getPwAllRStatAreaAlarmCountMList({
                endTime: this.end,
                startTime: this.start,
                id: this.id
            }).then(res => {
                this.isLoading = false
                this.alarmStatisticsData = res.data
            })
        },
        // 切换选项
        handleNodeClick(data) {
            this.id = data.id
        },
        //查询
        researchFn() {
            this.alarmStatistics()
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../../../styles/comStyle.less');
</style>
