<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 label="监测点类别:">
                <el-select v-model="receiveUserId" clearable placeholder="请选择接监测点类别">
                    <el-option
                        v-for="item in ImplementationPeople"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </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="classification22"
                    :data="monitoringpointAlarmData"
                    :height="height"
                    style="width: 100%"
                    v-loading="isLoading"
                    header-cell-class-name="table_header"
                >
                    <vxe-table-colgroup
                        title="所属单位"
                        field="orgName"
                        align="center"
                        show-overflow
                        min-width="200"
                    ></vxe-table-colgroup>
                    <vxe-table-colgroup
                        title="所属变电站"
                        field="powerName"
                        align="center"
                        show-overflow
                        min-width="100"
                    ></vxe-table-colgroup>
                    <vxe-table-colgroup
                        title="所属台区"
                        field="powerDistributionAreaName"
                        align="center"
                        show-overflow
                        min-width="100"
                    ></vxe-table-colgroup>
                    <vxe-table-colgroup
                        title="用户名称"
                        field="powerClientName"
                        align="center"
                        show-overflow
                        min-width="100"
                    ></vxe-table-colgroup>
                    <vxe-table-colgroup
                        title="监测点类别"
                        field="monitorSort"
                        align="center"
                        show-overflow
                        min-width="120"
                    ></vxe-table-colgroup>
                    <vxe-table-colgroup
                        title="监测点电压等级"
                        field="voltageLevel"
                        align="center"
                        show-overflow
                        min-width="150"
                    ></vxe-table-colgroup>
                    <vxe-table-colgroup title="稳态指标告警情况" align="center" show-overflow>
                        <vxe-table-colgroup title="电压偏差" align="center" show-overflow>
                            <vxe-table-colgroup title="告警情况" min-width="90" align="center" show-overflow>
                                <template slot-scope="scope">
                                    <span>{{ scope.row.vdevAlarmInfo == 0 ? '是' : '否' }}</span>
                                </template>
                            </vxe-table-colgroup>
                            <vxe-table-colgroup
                                title="严重度"
                                min-width="90"
                                field="vdevSeverity"
                                align="center"
                                show-overflow
                            ></vxe-table-colgroup>
                        </vxe-table-colgroup>
                        <vxe-table-colgroup title="频率偏差" align="center" show-overflow>
                            <vxe-table-colgroup
                                title="告警情况"
                                min-width="90"
                                field="freqAlarmInfo"
                                align="center"
                                show-overflow
                            >
                                <template slot-scope="scope">
                                    <span>{{ scope.row.freqAlarmInfo == 0 ? '是' : '否' }}</span>
                                </template>
                            </vxe-table-colgroup>
                            <vxe-table-colgroup
                                title="严重度"
                                min-width="90"
                                field="freqSeverity"
                                align="center"
                                show-overflow
                            ></vxe-table-colgroup>
                        </vxe-table-colgroup>
                        <vxe-table-colgroup title="三相电压不平衡度" align="center" show-overflow>
                            <vxe-table-colgroup
                                title="告警情况"
                                min-width="90"
                                field="unbalanceAlarmInfo"
                                align="center"
                                show-overflow
                            >
                                <template slot-scope="scope">
                                    <span>{{ scope.row.unbalanceAlarmInfo == 0 ? '是' : '否' }}</span>
                                </template>
                            </vxe-table-colgroup>
                            <vxe-table-colgroup
                                title="严重度"
                                min-width="90"
                                field="unbalanceSeverity"
                                align="center"
                                show-overflow
                            ></vxe-table-colgroup>
                        </vxe-table-colgroup>
                        <vxe-table-colgroup title="谐波电压" align="center" show-overflow>
                            <vxe-table-colgroup
                                title="告警情况"
                                min-width="90"
                                field="valarmInfo"
                                align="center"
                                show-overflow
                            >
                                <template slot-scope="scope">
                                    <span>{{ scope.row.valarmInfo == 0 ? '是' : '否' }}</span>
                                </template>
                            </vxe-table-colgroup>
                            <vxe-table-colgroup
                                title="严重度"
                                min-width="90"
                                field="vseverity"
                                align="center"
                                show-overflow
                            ></vxe-table-colgroup>
                        </vxe-table-colgroup>
                        <vxe-table-colgroup title="长时闪变" align="center" show-overflow>
                            <vxe-table-colgroup
                                title="告警情况"
                                min-width="90"
                                field="flickerAlarmInfo"
                                align="center"
                                show-overflow
                            >
                                <template slot-scope="scope">
                                    <span>{{ scope.row.flickerAlarmInfo == 0 ? '是' : '否' }}</span>
                                </template>
                            </vxe-table-colgroup>
                            <vxe-table-colgroup
                                title="严重度"
                                min-width="90"
                                field="flickerSeverity"
                                align="center"
                                show-overflow
                            ></vxe-table-colgroup>
                        </vxe-table-colgroup>
                    </vxe-table-colgroup>
                    <vxe-table-colgroup title="暂态指标告警情况" align="center" show-overflow>
                        <vxe-table-colgroup title="电压暂降" align="center" show-overflow>
                            <vxe-table-colgroup
                                title="告警情况"
                                field="sagAlarmInfo"
                                align="center"
                                show-overflow
                                min-width="90"
                            >
                                <template slot-scope="scope">
                                    <span>{{ scope.row.sagAlarmInfo == 0 ? '是' : '否' }}</span>
                                </template>
                            </vxe-table-colgroup>
                            <vxe-table-colgroup
                                title="严重度"
                                min-width="90"
                                field="sagSeverity"
                                align="center"
                                show-overflow
                            ></vxe-table-colgroup>
                        </vxe-table-colgroup>
                        <vxe-table-colgroup title="短时中断" align="center" show-overflow>
                            <vxe-table-colgroup
                                title="告警情况"
                                field="interruptAlarmInfo"
                                align="center"
                                show-overflow
                                min-width="90"
                            >
                                <template slot-scope="scope">
                                    <span>{{ scope.row.interruptAlarmInfo == 0 ? '是' : '否' }}</span>
                                </template>
                            </vxe-table-colgroup>
                            <vxe-table-colgroup
                                title="严重度"
                                min-width="90"
                                field="interruptSeverity"
                                align="center"
                                show-overflow
                            ></vxe-table-colgroup>
                        </vxe-table-colgroup>
                    </vxe-table-colgroup>
                    <vxe-table-colgroup
                        title="稳态指标评级结果"
                        field="harmonicTypeGrade"
                        align="center"
                        show-overflow
                        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"
                        show-overflow
                        min-width="160"
                    >
                        <template slot-scope="scope">
                            <span>
                                {{
                                    scope.row.eventTypeGrade == 0
                                        ? '较差 '
                                        : scope.row.eventTypeGrade == 1
                                        ? '中等'
                                        : '较好'
                                }}
                            </span>
                        </template>
                    </vxe-table-colgroup>
                </vxe-table>
                <el-pagination
                    background
                    align="right"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="formData.pageNum"
                    :page-sizes="[20, 30, 50, 100]"
                    :page-size="formData.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    class="mt10"
                ></el-pagination>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Area from '@/views/components/Area/Area.vue'
import { dicData } from '@/assets/commjs/dictypeData'
import Timeinterval from './Timeslot.vue'
import { getPwRMpMonitorAlarmCountMList } from '@/api/Distributionnetwork-analysis/IndicatorAlarmStatistics/IndicatorAlarmStatistics'
export default {
    components: { Area, Timeinterval },
    data() {
        return {
            id: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
            kai: true,
            receiveUserId: '',
            start: '',
            end: '',
            vh: '',
            height: null,
            isLoading: false,
            valuePoint: '',
            formData: {
                pageNum: 1,
                pageSize: 20
            },
            total: undefined,
            monitoringpointAlarmData: [],
            ImplementationPeople: [],
            device: '',
            typeList: '',
            timeOptions: [{ label: '月份', value: 3 }]
        }
    },
    created() {
        this.getclassificationData()
    },
    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') - 215
        },
        //获取类型
        getclassificationData() {
            //监测点类别
            this.ImplementationPeople = dicData('Line_Sort', [])
        },
        dc() {
            this.$refs.classification22.exportData({
                filename: 'export1', // 文件名字
                sheetName: 'Sheet1',
                type: 'xlsx', //导出文件类型 xlsx 和 csv
                useStyle: true,
                isFooter: true,
                data: this.monitoringpointAlarmData // 数据源 // 过滤那个字段导出 // 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.monitoringpointAlarm()
            }
        },
        //获取数据
        monitoringpointAlarm() {
            this.isLoading = true
            getPwRMpMonitorAlarmCountMList({
                endTime: this.end,
                startTime: this.start,
                id: this.id,
                pageNum: this.formData.pageNum,
                pageSize: this.formData.pageSize,
                measurementPointName: this.receiveUserId
            }).then(res => {
                this.isLoading = false
                var code = 'Line_Sort'
                this.typeList = dicData(code, [])
                let a = dicData('Dev_Voltage', [])
                // console.log(res.data,'RES.DATA',this.typeList,'typrlist')
                res.data.records.forEach(i => {
                    i.monitorSort
                    this.typeList.forEach(l => {
                        if (l.id == i.monitorSort) {
                            i.monitorSort = l.label
                        }
                    })
                    a.forEach(g => {
                        if (g.id == i.voltageLevel) {
                            i.voltageLevel = g.label
                        }
                    })
                })
                this.monitoringpointAlarmData = res.data.records
                this.total = res.data.total
            })
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.formData.pageSize = val
            this.monitoringpointAlarm()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.formData.pageNum = val
            this.monitoringpointAlarm()
        },
        // 切换选项
        handleNodeClick(data) {
            this.id = data.id
        },
        //查询
        researchFn() {
            this.monitoringpointAlarm()
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../../../styles/comStyle.less');
</style>
