<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" :interval="4" :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
                    :data="alarmStatisticsData"
                    :height="height"
                    ref="classification33"
                    style="width: 100%"
                    v-loading="isLoading"
                    header-cell-class-name="table_header"
                >
                    <vxe-table-colgroup
                        title="单位"
                        align="center"
                        field="orgName"
                        min-width="150"
                    ></vxe-table-colgroup>
                    <vxe-table-colgroup
                        title="在线监测点数(个)"
                        align="center"
                        min-width="150"
                        field="onlineMonitorCount"
                    ></vxe-table-colgroup>
                    <vxe-table-colgroup
                        title="告警监测点数(个)"
                        align="center"
                        min-width="150"
                        field="alarmMonitorCount"
                    ></vxe-table-colgroup>
                    <vxe-table-colgroup
                        title="告警监测点占比(%)"
                        align="center"
                        min-width="150"
                        field="alarmMonitorRate"
                    ></vxe-table-colgroup>
                    <vxe-table-colgroup
                        title="告警监测点占比同比(%)"
                        align="center"
                        min-width="150"
                        field="alarmMonitorRateYoy"
                    ></vxe-table-colgroup>
                </vxe-table>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Area from '@/views/components/Area/Area.vue'
import Timeinterval from '@/views/components/Timeinterval.vue'
import { getAllRStatPwAlarmCountList } 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: 4 }]
        }
    },
    created() {},
    mounted() {
        this.device = window.devicePixelRatio

        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.alarmStatistics()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.height = window.sessionStorage.getItem('appheight') - 175
        },
        dc() {
            this.$refs.classification33.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是复选框 不导出 // }
            })
        },

        //获取数据
        alarmStatistics() {
            this.isLoading = true
            getAllRStatPwAlarmCountList({
                endTime: this.$refs.Timeinterval.timeValue[1],
                startTime: this.$refs.Timeinterval.timeValue[0],
                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>
