<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div class="Top" ref="top">
                    <el-tabs
                        :tab-position="tabPosition"
                        v-model="active"
                        type="border-card"
                        @tab-click="handleClick222"
                    >
                        <el-tab-pane label="告警统计" name="first">
                            <div>
                                <el-form :inline="true" class="demo-form-inline">
                                    <div style="display: flex">
                                        <div><Area @click="handleNodeClick"></Area></div>
                                        <div>
                                            <Timslot
                                                @time="time0"
                                                :time-options="[{ label: '周', value: 4 }]"
                                                ref="Timslot0"
                                            ></Timslot>
                                        </div>

                                        <div>
                                            <el-form-item>
                                                <el-button
                                                    type="primary"
                                                    class="ml10"
                                                    icon="el-icon-search"
                                                    @click="steady1"
                                                >
                                                    查询
                                                </el-button>
                                                <el-button type="primary" icon="el-icon-download" @click="dc">
                                                    导出
                                                </el-button>
                                            </el-form-item>
                                        </div>
                                    </div>
                                </el-form>
                                <vxe-table
                                    size="mini"
                                    :row-config="{ isCurrent: true, isHover: true }"
                                    :data="serialData"
                                    :height="height + 'px'"
                                    border
                                    stripe
                                    v-loading="isLoading"
                                    style="width: 100%"
                                    header-cell-class-name="table_header"
                                    ref="classification1"
                                >
                                    <vxe-table-column
                                        field="orgName"
                                        min-width="100"
                                        title="单位"
                                        align="center"
                                    ></vxe-table-column>
                                    <vxe-table-colgroup
                                        show-overflow
                                        field="warnMonitorCount"
                                        min-width="210"
                                        title="告警四次及以上监测点数量(个)"
                                        align="center"
                                    ></vxe-table-colgroup>
                                    <vxe-table-colgroup
                                        show-overflow
                                        field="monitorGradeCount"
                                        min-width="200"
                                        title="级别“较差”监测点数量(个)"
                                        align="center"
                                    ></vxe-table-colgroup>

                                    <vxe-table-colgroup
                                        show-overflow
                                        field="warnMonitorRate"
                                        min-width="210"
                                        title="告警四次及以上监测点占比(%)"
                                        align="center"
                                    ></vxe-table-colgroup>
                                    <vxe-table-colgroup
                                        show-overflow
                                        field="monitorGradeRate"
                                        min-width="200"
                                        title="级别“较差”监测点占比(%)"
                                        align="center"
                                    ></vxe-table-colgroup>
                                    <vxe-table-colgroup show-overflow title="操作" align="center" min-width="100">
                                        <template slot-scope="scope">
                                            <vxe-button @click="handleEdit(scope.row)" status="primary" size="mini">
                                                详情
                                            </vxe-button>
                                            <!-- <span
                        style="color:blue;cursor:pointer;text-decoration:underline"
                        @click="handleEdit(scope.row)"

                        >详情</span
                      > -->
                                        </template>
                                    </vxe-table-colgroup>
                                </vxe-table>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="区域告警统计" name="second">
                            <el-form :inline="true" class="demo-form-inline">
                                <div style="display: flex">
                                    <div><Area @click="handleNodeClick1"></Area></div>
                                    <div>
                                        <Timslot
                                            @time="time"
                                            :time-options="[{ label: '月', value: 3 }]"
                                            :interval="3"
                                        ></Timslot>
                                    </div>
                                    <div>
                                        <el-form-item>
                                            <el-button
                                                type="primary"
                                                class="ml10"
                                                icon="el-icon-search"
                                                @click="steady2"
                                            >
                                                查询
                                            </el-button>
                                            <el-button type="primary" icon="el-icon-download" @click="dc">
                                                导出
                                            </el-button>
                                        </el-form-item>
                                    </div>
                                </div>
                            </el-form>
                            <vxe-table
                                size="mini"
                                :row-config="{ isCurrent: true, isHover: true }"
                                :data="serialData1"
                                :height="height + 'px'"
                                border
                                stripe
                                v-loading="isLoading"
                                style="width: 100%"
                                header-cell-class-name="table_header"
                                ref="classification2"
                                show-overflow
                            >
                                <vxe-table-colgroup
                                    field="orgName"
                                    title="单位"
                                    min-width="200"
                                    align="center"
                                ></vxe-table-colgroup>
                                <vxe-table-colgroup title="稳态指标告警情况" align="center">
                                    <vxe-table-colgroup title="电压偏差" align="center">
                                        <vxe-table-colgroup title="告警情况 " align="center" min-width="150">
                                            <template slot-scope="scope">
                                                <span>{{ scope.row.vdevAlarmInfo == 0 ? '否' : '是' }}</span>
                                            </template>
                                        </vxe-table-colgroup>
                                        <vxe-table-colgroup
                                            title="超标占比(%)"
                                            field="vdevAlarmRatio"
                                            min-width="150"
                                            align="center"
                                        ></vxe-table-colgroup>
                                    </vxe-table-colgroup>
                                    <vxe-table-colgroup title="频率偏差" align="center">
                                        <vxe-table-colgroup title="告警情况" align="center" min-width="150">
                                            <template slot-scope="scope">
                                                <span>{{ scope.row.freqAlarmInfo == 0 ? '否' : '是' }}</span>
                                            </template>
                                        </vxe-table-colgroup>
                                        <vxe-table-colgroup
                                            title="超标占比(%)"
                                            field="freqAlarmRatio"
                                            min-width="150"
                                            align="center"
                                        ></vxe-table-colgroup>
                                    </vxe-table-colgroup>
                                    <vxe-table-colgroup title="三相电压不平衡度" align="center">
                                        <vxe-table-colgroup title="告警情况" align="center" min-width="150">
                                            <template slot-scope="scope">
                                                <span>{{ scope.row.unbalanceAlarmInfo == 0 ? '否' : '是' }}</span>
                                            </template>
                                        </vxe-table-colgroup>
                                        <vxe-table-colgroup
                                            title="超标占比(%)"
                                            field="unbalanceAlarmRatio"
                                            min-width="150"
                                            align="center"
                                        ></vxe-table-colgroup>
                                    </vxe-table-colgroup>
                                    <vxe-table-colgroup title="谐波电压" align="center">
                                        <vxe-table-colgroup title="告警情况" align="center" min-width="150">
                                            <template slot-scope="scope">
                                                <span>{{ scope.row.valarmInfo == 0 ? '否' : '是' }}</span>
                                            </template>
                                        </vxe-table-colgroup>
                                        <vxe-table-colgroup
                                            title="超标占比(%)"
                                            field="valarmRatio"
                                            min-width="150"
                                            align="center"
                                        ></vxe-table-colgroup>
                                    </vxe-table-colgroup>
                                    <vxe-table-colgroup title="长时闪变" align="center">
                                        <vxe-table-colgroup title="告警情况" align="center" min-width="150">
                                            <template slot-scope="scope">
                                                <span>{{ scope.row.flickerAlarmInfo == 0 ? '否' : '是' }}</span>
                                            </template>
                                        </vxe-table-colgroup>
                                        <vxe-table-colgroup
                                            title="超标占比(%)"
                                            field="flickerAlarmRatio"
                                            min-width="150"
                                            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="告警情况" align="center" min-width="150">
                                            <template slot-scope="scope">
                                                <span>{{ scope.row.sagAlarmInfo == 0 ? '否' : '是' }}</span>
                                            </template>
                                        </vxe-table-colgroup>
                                        <vxe-table-colgroup
                                            title="平均发生次数(次)"
                                            field="sagAlarmAvgCount"
                                            min-width="150"
                                            align="center"
                                        ></vxe-table-colgroup>
                                    </vxe-table-colgroup>
                                    <vxe-table-colgroup title="短时中断" align="center">
                                        <vxe-table-colgroup title="告警情况" align="center" min-width="150">
                                            <template slot-scope="scope">
                                                <span>{{ scope.row.interruptAlarmInfo == 0 ? '否' : '是' }}</span>
                                            </template>
                                        </vxe-table-colgroup>
                                        <vxe-table-colgroup
                                            title="平均发生次数(次)"
                                            field="interruptAlarmAvgCount"
                                            min-
                                            min-width="150"
                                            align="center"
                                        ></vxe-table-colgroup>
                                    </vxe-table-colgroup>
                                </vxe-table-colgroup>
                                <vxe-table-colgroup
                                    title="稳态指标评级结果"
                                    field="eventTypeGrade"
                                    align="center"
                                    min-width="190"
                                >
                                    <template slot-scope="scope">
                                        <span>
                                            {{
                                                scope.row.eventTypeGrade == 0
                                                    ? '较差 '
                                                    : scope.row.eventTypeGrade == 1
                                                    ? '中等'
                                                    : '较好'
                                            }}
                                        </span>
                                    </template>
                                </vxe-table-colgroup>
                                <vxe-table-colgroup
                                    title="暂态指标评级结果"
                                    align="center"
                                    field="eventTypeGrade"
                                    min-width="150"
                                >
                                    <template slot-scope="scope">
                                        <span>
                                            {{
                                                scope.row.eventTypeGrade == 0
                                                    ? '较差 '
                                                    : scope.row.eventTypeGrade == 1
                                                    ? '中等'
                                                    : '较好'
                                            }}
                                        </span>
                                    </template>
                                </vxe-table-colgroup>
                            </vxe-table>
                        </el-tab-pane>
                        <el-tab-pane label="监测点告警统计" name="third">
                            <el-form :inline="true" class="demo-form-inline">
                                <el-form-item>
                                    <timeslotmonth ref="timeslotmonth"></timeslotmonth>
                                </el-form-item>

                                <el-form-item style="margin-bottom: 10px">
                                    <el-button type="primary" icon="el-icon-search" @click="steady3">查询</el-button>
                                    <el-button type="primary" icon="el-icon-refresh-right" @click="resetForm">
                                        重置
                                    </el-button>
                                    <el-button type="primary" icon="el-icon-download" @click="dc">导出</el-button>
                                </el-form-item>

                                <el-form-item>
                                    <el-button type="text" @click="closeHandle">
                                        条件筛选
                                        <i :class="!view ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
                                    </el-button>
                                </el-form-item>
                            </el-form>

                            <div class="container" id="container">
                                <i @click="closeHandle" class="el-icon-circle-close coles"></i>
                                <el-form :inline="true" label-width="110px">
                                    <el-form-item>
                                        <Area @click="handleNodeClick2" ref="Area"></Area>
                                    </el-form-item>

                                    <el-form-item label="监测对象类型:">
                                        <el-select
                                            style="width: 204px"
                                            v-model.trim="valuetype"
                                            placeholder="请选择监测对象类型:"
                                            clearable
                                            multiple
                                            collapse-tags
                                        >
                                            <el-option
                                                v-for="item in levelTYPE"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="电压等级:">
                                        <el-select
                                            v-model.trim="valueLevel"
                                            placeholder="请选择电压等级"
                                            clearable
                                            multiple
                                            collapse-tags
                                            style="width: 204px"
                                        >
                                            <el-option
                                                v-for="item in level"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="监测点名称:" style="margin-bottom: 10px">
                                        <el-input
                                            style="width: 204px"
                                            v-model.trim="jcname"
                                            clearable
                                            placeholder="请输入监测点名称"
                                        ></el-input>
                                    </el-form-item>
                                </el-form>
                            </div>

                            <vxe-table
                                size="mini"
                                stripe
                                :row-config="{ isCurrent: true, isHover: true }"
                                :data="serialData11"
                                :height="height - 40 + 'px'"
                                border
                                v-loading="isLoading"
                                style="width: 100%"
                                header-cell-class-name="table_header"
                                ref="classification3"
                            >
                                <vxe-table-colgroup
                                    show-overflow
                                    field="measurementPointName"
                                    title="监测点名称"
                                    min-width="200"
                                    align="center"
                                ></vxe-table-colgroup>
                                <vxe-table-colgroup
                                    show-overflow
                                    field="orgName"
                                    title="所属单位"
                                    align="center"
                                    min-width="180"
                                ></vxe-table-colgroup>
                                <vxe-table-colgroup
                                    show-overflow
                                    field="monitorTypeName"
                                    title="监测点类型"
                                    align="center"
                                    min-width="120"
                                ></vxe-table-colgroup>
                                <vxe-table-colgroup
                                    show-overflow
                                    field="voltageLevelName"
                                    align="center"
                                    title="电压等级"
                                    min-width="120"
                                ></vxe-table-colgroup>
                                <vxe-table-colgroup show-overflow title="稳态指标告警情况" align="center">
                                    <vxe-table-colgroup show-overflow title="电压偏差" align="center">
                                        <vxe-table-colgroup
                                            show-overflow
                                            title="告警情况"
                                            field="vdevAlarmInfo"
                                            align="center"
                                            min-width="100"
                                        >
                                            <template slot-scope="scope">
                                                <span>
                                                    {{ scope.row.vdevAlarmInfo == '1' ? '是' : '否' }}
                                                </span>
                                            </template>
                                        </vxe-table-colgroup>
                                        <vxe-table-colgroup
                                            show-overflow
                                            title="严重度"
                                            field="vdevSeverity"
                                            min-width="100"
                                            align="center"
                                        ></vxe-table-colgroup>
                                    </vxe-table-colgroup>
                                    <vxe-table-colgroup show-overflow title="频率偏差" align="center">
                                        <vxe-table-colgroup
                                            show-overflow
                                            title="告警情况"
                                            field="freqAlarmInfo"
                                            align="center"
                                            min-width="100"
                                        >
                                            <template slot-scope="scope">
                                                <span>
                                                    {{ scope.row.freqAlarmInfo == '1' ? '是' : '否' }}
                                                </span>
                                            </template>
                                        </vxe-table-colgroup>
                                        <vxe-table-colgroup
                                            show-overflow
                                            title="严重度"
                                            field="freqSeverity"
                                            min-width="100"
                                            align="center"
                                        ></vxe-table-colgroup>
                                    </vxe-table-colgroup>
                                    <vxe-table-colgroup show-overflow title="三相电压不平衡度" align="center">
                                        <vxe-table-colgroup
                                            show-overflow
                                            title="告警情况"
                                            field="unbalanceAlarmInfo"
                                            align="center"
                                            min-width="100"
                                        >
                                            <template slot-scope="scope">
                                                <span>
                                                    {{ scope.row.unbalanceAlarmInfo == '1' ? '是' : '否' }}
                                                </span>
                                            </template>
                                        </vxe-table-colgroup>
                                        <vxe-table-colgroup
                                            show-overflow
                                            title="严重度"
                                            field="unbalanceSeverity"
                                            min-width="100"
                                            align="center"
                                        ></vxe-table-colgroup>
                                    </vxe-table-colgroup>
                                    <vxe-table-colgroup show-overflow title="谐波电压" align="center">
                                        <vxe-table-colgroup
                                            show-overflow
                                            title="告警情况"
                                            field="valarmInfo"
                                            align="center"
                                            min-width="100"
                                        >
                                            <template slot-scope="scope">
                                                <span>
                                                    {{ scope.row.valarmInfo == '1' ? '是' : '否' }}
                                                </span>
                                            </template>
                                        </vxe-table-colgroup>
                                        <vxe-table-colgroup
                                            show-overflow
                                            title="严重度"
                                            field="vseverity"
                                            min-width="100"
                                            align="center"
                                        ></vxe-table-colgroup>
                                    </vxe-table-colgroup>
                                    <vxe-table-colgroup show-overflow title="长时闪变" align="center">
                                        <vxe-table-colgroup
                                            show-overflow
                                            title="告警情况"
                                            field="flickerAlarmInfo"
                                            align="center"
                                            min-width="100"
                                        >
                                            <template slot-scope="scope">
                                                <span>
                                                    {{ scope.row.flickerAlarmInfo == '1' ? '是' : '否' }}
                                                </span>
                                            </template>
                                        </vxe-table-colgroup>
                                        <vxe-table-colgroup
                                            show-overflow
                                            title="严重度"
                                            field="flickerSeverity"
                                            min-width="100"
                                            align="center"
                                        ></vxe-table-colgroup>
                                    </vxe-table-colgroup>
                                </vxe-table-colgroup>
                                <vxe-table-colgroup show-overflow title="暂态指标告警情况" align="center">
                                    <vxe-table-colgroup show-overflow title="电压暂降" align="center">
                                        <vxe-table-colgroup
                                            show-overflow
                                            title="告警情况"
                                            field="sagAlarmInfo"
                                            align="center"
                                            min-width="100"
                                        >
                                            <template slot-scope="scope">
                                                <span>
                                                    {{ scope.row.sagAlarmInfo == '1' ? '是' : '否' }}
                                                </span>
                                            </template>
                                        </vxe-table-colgroup>
                                        <vxe-table-colgroup
                                            show-overflow
                                            title="严重度"
                                            field="sagSeverity"
                                            min-width="100"
                                            align="center"
                                        ></vxe-table-colgroup>
                                    </vxe-table-colgroup>
                                    <vxe-table-colgroup show-overflow title="短时中断" align="center">
                                        <vxe-table-colgroup
                                            show-overflow
                                            title="告警情况"
                                            field="interruptAlarmInfo"
                                            align="center"
                                            min-width="100"
                                        >
                                            <template slot-scope="scope">
                                                <span>
                                                    {{ scope.row.interruptAlarmInfo == '1' ? '是' : '否' }}
                                                </span>
                                            </template>
                                        </vxe-table-colgroup>
                                        <vxe-table-colgroup
                                            show-overflow
                                            title="严重度"
                                            field="interruptSeverity"
                                            min-width="100"
                                            align="center"
                                        ></vxe-table-colgroup>
                                    </vxe-table-colgroup>
                                </vxe-table-colgroup>
                                <vxe-table-colgroup
                                    show-overflow
                                    title="稳态指标评级结果"
                                    field="harmonicTypeGrade"
                                    align="center"
                                    min-width="160"
                                >
                                    <template slot-scope="scope">
                                        <span>
                                            {{
                                                scope.row.harmonicTypeGrade == '1'
                                                    ? '中等'
                                                    : scope.row.harmonicTypeGrade == '0'
                                                    ? '较差'
                                                    : '较好'
                                            }}
                                        </span>
                                    </template>
                                </vxe-table-colgroup>
                                <vxe-table-colgroup
                                    show-overflow
                                    title="暂态指标评级结果"
                                    field="eventTypeGrade"
                                    align="center"
                                    min-width="160"
                                >
                                    <template slot-scope="scope">
                                        <span>
                                            {{
                                                scope.row.eventTypeGrade == '1'
                                                    ? '中等'
                                                    : scope.row.eventTypeGrade == '0'
                                                    ? '较差'
                                                    : '较好'
                                            }}
                                        </span>
                                    </template>
                                </vxe-table-colgroup>
                            </vxe-table>
                            <el-pagination
                                background
                                class="mt10"
                                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="total"
                            ></el-pagination>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-col>
        </el-row>
        <el-dialog
            :close-on-click-modal="false"
            title="监测点详细信息"
            v-if="dialogVisible"
            :visible.sync="dialogVisible"
            width="800"
            :before-close="handleClose"
        >
            <el-table
                stripe
                header-cell-class-name="table_header"
                :data="tableData"
                style="width: 100%"
                border
                height="450px"
            >
                <el-table-column align="center" type="index" label="序号" show-overflow width="100"></el-table-column>
                <el-table-column
                    prop="orgName"
                    align="center"
                    label="单位"
                    show-overflow
                    min-width="300"
                ></el-table-column>
                <el-table-column prop="monitorName" label="监测点名称" show-overflow align="center"></el-table-column>
                <el-table-column prop="powerName" label="变电站名称" show-overflow align="center"></el-table-column>
                <el-table-column
                    prop="voltageLevelName"
                    label="变电站电压等级"
                    show-overflow
                    align="center"
                ></el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { dicData } from '@/assets/commjs/dictypeData'
import Area from '@/views/components/Area/Area.vue'
import {
    getRMpMonitorAlarmCountMList,
    getProblemMonitorDetailList,
    getAllRStatZwAlarmCountList,
    getAllRStatAreaAlarmCountMList
} from '@/api/Statistical-analysis/IndicatorAlarmStatistics'
import Timslot from './Timeslot.vue'
import timeslotmonth from './timeslotmonth.vue'
export default {
    components: { Area, Timslot, timeslotmonth },
    data() {
        return {
            fvh: '',
            view: false,
            jcname: '',
            valuetype: [''],
            levelTYPE: [],
            level: [],
            valueLevel: [''],
            pageNum: 1,
            pageSize: 20,
            total: 0,
            id: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
            id1: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
            id2: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
            kai: true,
            type: '',
            type0: '',
            type1: '',
            start: '',
            start1: '',
            start0: '',
            end: '',
            end1: '',
            end0: '',
            tableData: [],
            areaid: '',
            areaid1: '',
            areaid2: '',
            dialogVisible: false,

            value: '',
            form: {
                date: ''
            },
            height: null,

            isLoading: false,
            //稳态指标超标统计
            active_active: 'first-first',

            getHeight: '',
            tabPosition: 'top',
            active: 'first',
            isLoading: false,
            isLoading2: false,
            isLoading3: false,
            isLoading4: false,
            serialData: [],
            serialData1: [],
            serialData11: []
        }
    },
    created() {
        this.level = dicData('Dev_Voltage', [], 1)
        this.levelTYPE = dicData('Monitoring_Labels', [])
        this.levelTYPE.shift()
        this.level.shift()
        this.levelTYPE.forEach(i => {
            this.valuetype.push(i.id)
        })
        this.level.forEach(i => {
            this.valueLevel.push(i.id)
        })
        this.valuetype.shift()
        this.valueLevel.shift()
    },
    mounted() {
        this.setHeight()((this.$refs.timeslotmonth.timeOptions = [{ label: '月', value: 3 }]))
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.height = window.sessionStorage.getItem('appheight') - 131
        },
        dc() {
            // console.log(this.active, "jhshjs");
            if (this.active == 'first') {
                this.$refs.classification1.exportData({
                    filename: 'export1', // 文件名字
                    sheetName: 'Sheet1',
                    type: 'xlsx', //导出文件类型 xlsx 和 csv
                    useStyle: true,
                    isFooter: true,
                    data: this.serialData // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(colgroup , $columnIndex) { //   return !(colgroup .$columnIndex === 0 ) //   // 0是复选框 不导出 // }
                })
            }
            if (this.active == 'second') {
                this.$refs.classification2.exportData({
                    filename: 'export2', // 文件名字
                    sheetName: 'Sheet1',
                    type: 'xlsx', //导出文件类型 xlsx 和 csv
                    useStyle: true,
                    isFooter: true,
                    data: this.serialData1 // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(colgroup , $columnIndex) { //   return !(colgroup .$columnIndex === 0 ) //   // 0是复选框 不导出 // }
                })
            }
            if (this.active == 'third') {
                this.$refs.classification3.exportData({
                    filename: 'export3', // 文件名字
                    sheetName: 'Sheet1',
                    type: 'xlsx', //导出文件类型 xlsx 和 csv
                    useStyle: true,
                    isFooter: true,
                    data: this.serialData11 // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(colgroup , $columnIndex) { //   return !(colgroup .$columnIndex === 0 ) //   // 0是复选框 不导出 // }
                })
            }
        },
        handleClick222(tab, click) {
            //console.log(tab.name, "tabtabtabtab");
            this.active = tab.name
            if (tab.name == 'third') {
                this.account1()
            } else if (tab.name === 'second') {
                this.steady2()
            }
        },
        time0(val) {
            ;(this.start0 = val[0]), (this.end0 = val[1])
            this.type = val[2]

            if (this.kai) {
                this.account()
            }
        },
        time(val) {
            ;(this.start = val[0]), (this.end = val[1])
            this.type = val[2]

            if (this.kai) {
                this.account()
            }
        },

        steady1() {
            this.isLoading = true
            getAllRStatZwAlarmCountList({
                id: this.areaid1,
                startTime: this.start0,
                endTime: this.end0
            }).then(res => {
                this.isLoading = false
                this.serialData = res.data
                this.isLoading = false
            })
        },
        steady2() {
            this.isLoading = true
            getAllRStatAreaAlarmCountMList({
                id: this.areaid1,
                startTime: this.start,
                endTime: this.end
            }).then(res => {
                this.isLoading = false
                this.serialData1 = res.data
                this.isLoading = false
            })
        },
        steady3() {
            this.pageNum = 1
            this.clickSteady3()
        },
        clickSteady3() {
            this.isLoading = true
            getRMpMonitorAlarmCountMList({
                id: this.areaid2,
                endTime: this.$refs.timeslotmonth.timeValue[1],
                startTime: this.$refs.timeslotmonth.timeValue[0],
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                type: this.type1,
                voltageLevel: this.valueLevel.toString(),
                monitorObjectType: this.valuetype.toString(),
                measurementPointName: this.jcname
            }).then(res => {
                this.serialData11 = res.data.records
                this.total = res.data.total
                this.isLoading = false
            })
        },

        handleNodeClick(val) {
            this.id = val.id
            this.areaid = val.id
        },
        handleNodeClick1(val) {
            this.id1 = val.id
            this.areaid1 = val.id
        },
        handleNodeClick2(val) {
            this.id2 = val.id
            this.areaid2 = val.id
        },
        handleClose() {
            this.dialogVisible = false
        },
        handleEdit(val) {
            this.dialogVisible = true
            getProblemMonitorDetailList({
                endTime: this.$refs.Timslot0.timeValue[1],
                startTime: this.$refs.Timslot0.timeValue[0],
                type: this.type,
                id: val.orgNo
            }).then(res => {
                this.tableData = res.data
            })
            // console.log(val, "hhhhhhhhhhhhhhhhhhhhhh");
        },
        cellStyle(row, colgroup, rowIndex, columnIndex) {
            if (row.columnIndex == 2 || row.columnIndex == 3 || row.columnIndex == 4 || row.columnIndex == 5) {
                return 'font-weight: 600;'
            }
        },

        //方法调用台账统计数据接口
        account() {
            this.kai = false
            this.isLoading = true
            this.isLoading2 = true
            getAllRStatAreaAlarmCountMList({
                id: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                startTime: this.start,
                endTime: this.end
            }).then(res => {
                this.isLoading = false
                this.serialData1 = res.data
            })
            //监测终端统计单位表格数据
            getAllRStatZwAlarmCountList({
                id: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                startTime: this.start0,
                endTime: this.end0
            }).then(res => {
                this.isLoading = false
                this.serialData = res.data
            })
        },
        account1() {
            this.kai = false
            this.isLoading = true
            getRMpMonitorAlarmCountMList({
                id: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                endTime: this.$refs.timeslotmonth.timeValue[1],
                startTime: this.$refs.timeslotmonth.timeValue[0],
                type: this.type1,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                voltageLevel: this.valueLevel.toString(),
                monitorObjectType: this.valuetype.toString(),
                measurementPointName: this.jcname
            }).then(res => {
                this.serialData11 = res.data.records
                this.total = res.data.total
                this.isLoading = false
            })
        },
        // 重置
        resetForm() {
            this.valuetype = []
            this.valueLevel = []
            this.$refs.Area.form.valueTitle = JSON.parse(window.sessionStorage.getItem('Info')).deptName
            ;(this.areaid = JSON.parse(window.sessionStorage.getItem('Info')).deptId), (this.jcname = '')
            this.$refs.timeslotmonth.intervald = 3
            this.$refs.timeslotmonth.nowTime()((this.$refs.timeslotmonth.disabled = true))
            this.levelTYPE.forEach(i => {
                this.valuetype.push(i.id)
            })
            this.level.forEach(i => {
                this.valueLevel.push(i.id)
            })
            setTimeout(() => {
                this.steady3()
            }, 0)
        },
        closeHandle() {
            if (this.view) {
                this.view = false
            } else {
                this.view = true
            }
            //console.log('关闭和展开');
            const dom = document.getElementById('container')
            const closeDom = document.getElementsByClassName('close')[0]
            if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
                dom.className = 'container expend'
            } else {
                dom.className = 'container close-container'
            }
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.pageSize = val
            this.clickSteady3()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.pageNum = val
            this.clickSteady3()
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../../styles/comStyle.less');

.container {
    /* margin: auto; */
    top: 0px;
    right: 0;
    width: 40%;
    height: 0px;
    z-index: 2000;
    position: absolute;
    background-color: #e4e7ebb9;
    overflow: auto;
    scroll-behavior: smooth;
    -radius: 20px;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
    display: block;
}
.expend {
    animation: expend ease 5s forwards;
}
.close-container {
    animation: no-expend ease 1s forwards;
}
@keyframes expend {
    from {
        top: 0px;
        height: 20%;
    }
    to {
        height: 20%;
        top: 0px;
    }
}
@keyframes no-expend {
    from {
        height: 20%;
        top: 0px;
    }
    to {
        top: 0px;
        height: 0px;
    }
}
.coles {
    position: absolute;
    right: 0;
    font-size: 20px;
    cursor: pointer;
}
</style>
