<template>
    <div class="pd10" v-loading="loading" element-loading-text="数据加载中">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item v-if="this.quyunames != undefined">
                <el-switch
                    class="tableScopeSwitch"
                    :active-value="2"
                    :inactive-value="1"
                    @change="handleStatusChange"
                    :active-text="quyuname"
                    :inactive-text="quyunames"
                    inactive-color="#007878"
                    active-color="#666666"
                    v-model="this.formData.monitorFlag"
                ></el-switch>
            </el-form-item>

            <el-form-item>
                <timepicker :id="id" ref="qytj" :interval="interval" :tablename="tablename"></timepicker>

                <!-- <el-button class="el-icon-d-arrow-right"  type="primary" round @click="timechange">时间选择</el-button> -->
            </el-form-item>
            <el-form-item>
                <el-button @click="querfromdata" type="primary" icon="el-icon-search">查询</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" :model="formData" label-width="90px" class="">
                <el-form-item label="统计类型:">
                    <el-select
                        v-model="formData.statisticalType"
                        @change="changeclasss"
                        placeholder="请选择统计类型"
                        style="width: 100%"
                    >
                        <el-option
                            v-for="item in classificationData"
                            :key="item.id"
                            :label="item.name"
                            :value="{
                                label: item.name,
                                value: item.id,
                                name: item.name,
                                id: item.id,
                                code: item.code,
                                sort: item.sort
                            }"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="区域选择:">
                    <el-select ref="select1" v-model="deptName" placeholder="请选择所属部门区域" style="width: 100%">
                        <el-option :value="deptIndex" style="height: auto">
                            <el-tree
                                ref="tree"
                                :data="treeData"
                                node-key="id"
                                accordion
                                :default-expanded-keys="idArr"
                                :props="defaultProps"
                                @node-click="handleNodeClick"
                            >
                                <span class="span-ellipsis" slot-scope="{ node, data }">
                                    <span :title="data.name">{{ data.name }}</span>
                                </span>
                            </el-tree>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电压等级:">
                    <el-select
                        v-model="formData.scale"
                        multiple
                        collapse-tags
                        clearable
                        placeholder="请选择电压等级"
                        style="width: 100%"
                    >
                        <el-option
                            v-for="item in voltageleveloption"
                            :key="item.id"
                            :label="item.name"
                            :value="{
                                label: item.name,
                                value: item.id,
                                code: item.code,
                                name: item.name,
                                id: item.id,
                                sort: item.sort
                            }"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="终端厂家:">
                    <el-select
                        v-model="formData.manufacturer"
                        multiple
                        collapse-tags
                        clearable
                        placeholder="请选择终端厂家"
                        style="width: 100%"
                    >
                        <el-option
                            v-for="item in terminaloption"
                            :key="item.id"
                            :label="item.name"
                            :value="{
                                label: item.name,
                                value: item.id,
                                code: item.code,
                                name: item.name,
                                id: item.id,
                                sort: item.sort
                            }"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="干扰源类型:">
                    <el-select
                        v-model="formData.loadType"
                        multiple
                        collapse-tags
                        clearable
                        placeholder="请选择干扰源类型"
                        style="width: 100%"
                    >
                        <el-option
                            v-for="item in interfereoption"
                            :key="item.id"
                            :label="item.name"
                            :value="{
                                label: item.name,
                                value: item.id,
                                code: item.code,
                                name: item.name,
                                id: item.id,
                                sort: item.sort
                            }"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>

        <el-row :gutter="10">
            <el-col :span="24">
                <el-table
                    stripe
                    class="xshou"
                    :data="tableData"
                    :style="`height:${vh}`"
                    row-key="id"
                    id="rebateSetTable"
                    border
                    :height="`height:${vh}`"
                    highlight-current-row
                    header-cell-class-name="table_header"
                    :default-expand-all="false"
                    @sort-change="sortchange"
                >
                    <el-table-column align="center" min-width="60" label="序号">
                        <template scope="scope">
                            <span>{{ (formData.pageNum - 1) * formData.pageSize + scope.$index + 1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        :label="typedataz"
                        sortable
                        align="center"
                        :show-overflow-tooltip="true"
                        width="120"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="onlineMonitorNumber"
                        label="在线监测点数量(个)"
                        sortable
                        width="190"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.onlineMonitorNumber == -1">暂无数据</span>
                            <span v-else>{{ scope.row.onlineMonitorNumber }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="overLimitMonitorNumber"
                        label="超标监测点数量(个)"
                        sortable
                        width="190"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.overLimitMonitorNumber == -1">暂无数据</span>
                            <span v-else>{{ scope.row.overLimitMonitorNumber }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="overBiLi" label="超标监测点占比(%)" sortable width="190">
                        <template slot-scope="scope">
                            <span v-if="scope.row.overBiLi == -1">暂无数据</span>
                            <span v-else>{{ scope.row.overBiLi }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="频率偏差超标情况" width="120">
                        <el-table-column
                            align="center"
                            prop="frequencyMonitorNumber"
                            label="超标点数(天/点)"
                            sortable
                            width="170"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.frequencyMonitorNumber == -1">暂无数据</span>
                                <span v-else>{{ scope.row.frequencyMonitorNumber }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="frequencyBiLi" label="占比（%）" sortable width="170">
                            <template slot-scope="scope">
                                <span v-if="scope.row.frequencyBiLi == -1">暂无数据</span>
                                <span v-else>{{ scope.row.frequencyBiLi }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="frequencyOverDayBiLi"
                            label="平均超标天数（天/点）"
                            sortable
                            width="230"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.frequencyOverDayBiLi == -1">暂无数据</span>
                                <span v-else>{{ scope.row.frequencyOverDayBiLi }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="电压偏差超标情况" width="170">
                        <el-table-column
                            align="center"
                            prop="voltageMonitorNumber"
                            label="超标点数(天/点)"
                            sortable
                            width="170"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.voltageMonitorNumber == -1">暂无数据</span>
                                <span v-else>{{ scope.row.voltageMonitorNumber }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="voltageBiLi" label="超标占比（%）" sortable width="170">
                            <template slot-scope="scope">
                                <span v-if="scope.row.voltageBiLi == -1">暂无数据</span>
                                <span v-else>{{ scope.row.voltageBiLi }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="voltageOverDayBiLi"
                            label="平均超标天数（天/点）"
                            sortable
                            width="230"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.voltageOverDayBiLi == -1">暂无数据</span>
                                <span v-else>{{ scope.row.voltageOverDayBiLi }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="谐波电压超标情况" width="200">
                        <el-table-column
                            align="center"
                            prop="harmonicVoltageMonitorNumber"
                            label="超标点数(天/点)"
                            sortable
                            width="170"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.harmonicVoltageMonitorNumber == -1">暂无数据</span>
                                <span v-else>{{ scope.row.harmonicVoltageMonitorNumber }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="harmonicVoltageBiLi"
                            label="超标占比（%）"
                            sortable
                            width="170"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.harmonicVoltageBiLi == -1">暂无数据</span>
                                <span v-else>{{ scope.row.harmonicVoltageBiLi }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="harmonicVoltageOverDayBiLi"
                            label="平均超标天数（天/点）"
                            sortable
                            width="230"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.harmonicVoltageOverDayBiLi == -1">暂无数据</span>
                                <span v-else>{{ scope.row.harmonicVoltageOverDayBiLi }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="谐波电流超标情况" width="150">
                        <el-table-column
                            align="center"
                            prop="harmonicCurrentMonitorNumber"
                            label="超标点数(天/点)"
                            sortable
                            width="170"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.harmonicCurrentMonitorNumber == -1">暂无数据</span>
                                <span v-else>{{ scope.row.harmonicCurrentMonitorNumber }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="harmonicCurrentBiLi"
                            label="超标占比（%）"
                            sortable
                            width="170"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.harmonicCurrentBiLi == -1">暂无数据</span>
                                <span v-else>{{ scope.row.harmonicCurrentBiLi }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="harmonicCurrentOverDayBiLi"
                            label="平均超标天数（天/点）"
                            sortable
                            width="230"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.harmonicCurrentOverDayBiLi == -1">暂无数据</span>
                                <span v-else>{{ scope.row.harmonicCurrentOverDayBiLi }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="三相电压不平衡度超标情况" width="150">
                        <el-table-column
                            align="center"
                            prop="threePhaseVoltageMonitorNumber"
                            label="超标点数(天/点)"
                            sortable
                            width="170"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.threePhaseVoltageMonitorNumber == -1">暂无数据</span>
                                <span v-else>{{ scope.row.threePhaseVoltageMonitorNumber }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="threePhaseVoltageBiLi"
                            label="超标占比（%）"
                            sortable
                            width="170"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.threePhaseVoltageBiLi == -1">暂无数据</span>
                                <span v-else>{{ scope.row.threePhaseVoltageBiLi }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="threePhaseVoltageOverDayBiLi"
                            label="平均超标天数（天/点）"
                            sortable
                            width="230"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.threePhaseVoltageOverDayBiLi == -1">暂无数据</span>
                                <span v-else>{{ scope.row.threePhaseVoltageOverDayBiLi }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="闪变超标情况" width="180">
                        <el-table-column
                            align="center"
                            prop="flickerMonitorNumber"
                            label="超标点数(天/点)"
                            sortable
                            width="170"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.flickerMonitorNumber == -1">暂无数据</span>
                                <span v-else>{{ scope.row.flickerMonitorNumber }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="flickerBiLi" label="超标占比（%）" sortable width="170">
                            <template slot-scope="scope">
                                <span v-if="scope.row.flickerBiLi == -1">暂无数据</span>
                                <span v-else>{{ scope.row.flickerBiLi }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="flickerOverDayBiLi"
                            label="平均超标天数（天/点）"
                            sortable
                            width="230"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.flickerOverDayBiLi == -1">暂无数据</span>
                                <span v-else>{{ scope.row.flickerOverDayBiLi }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="负序电流超标情况" width="150">
                        <el-table-column
                            align="center"
                            prop="negativeMonitorNumber"
                            label="超标点数(天/点)"
                            sortable
                            width="170"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.negativeMonitorNumber == -1">暂无数据</span>
                                <span v-else>{{ scope.row.negativeMonitorNumber }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="negativeBiLi" label="超标占比（%）" sortable width="170">
                            <template slot-scope="scope">
                                <span v-if="scope.row.negativeBiLi == -1">暂无数据</span>
                                <span v-else>{{ scope.row.negativeBiLi }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="negativeOverDayBiLi"
                            label="平均超标天数（天/点）"
                            sortable
                            width="230"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.negativeOverDayBiLi == -1">暂无数据</span>
                                <span v-else>{{ scope.row.negativeOverDayBiLi }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="间谐波电压超标情况" width="150">
                        <el-table-column
                            align="center"
                            prop="interHarmonicMonitorNumber"
                            label="超标点数(天/点)"
                            sortable
                            width="170"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.interHarmonicMonitorNumber == -1">暂无数据</span>
                                <span v-else>{{ scope.row.interHarmonicMonitorNumber }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="interHarmonicBiLi"
                            label="超标占比（%）"
                            sortable
                            width="170"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.interHarmonicBiLi == -1">暂无数据</span>
                                <span v-else>{{ scope.row.interHarmonicBiLi }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="interHarmonicOverDayBiLi"
                            label="平均超标天数（天/点）"
                            sortable
                            width="230"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.interHarmonicOverDayBiLi == -1">暂无数据</span>
                                <span v-else>{{ scope.row.interHarmonicOverDayBiLi }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table>
                <el-pagination
                    background
                    align="right"
                    class="mt10"
                    v-show="pageData.total >= 0"
                    @size-change="changePageSize"
                    @current-change="changePageNum"
                    :current-page="pageData.pageNum"
                    :page-sizes="[20, 30, 50, 100, 200]"
                    :page-size="pageData.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageData.total"
                ></el-pagination>
                <!-- <regionalsteadytable :classvalue="classvalue"></regionalsteadytable> -->
                <!-- <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane :lazy="false" label="在线率列表" name="tab1">
                          
                        </el-tab-pane>
                        <el-tab-pane :lazy="false" label="在线率图表" name="tab2">
                        
                        </el-tab-pane>  
                    </el-tabs> -->
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { guanzhou } from '@/assets/commjs/token'
import api1 from '@/api/pollution/pollution'
import { dicData } from '@/assets/commjs/dictypeData'
import api2 from '@/api/harmonic/harmonic'
import timepicker from '../../components/TimePicker/index4'
import pagination from '../../components/pagination/index'
import api from '../../../api/integraliy/integraliy'
export default {
    name: 'steadystate',
    components: {
        timepicker,
        pagination
    },

    watch: {
        classt: function (a, b) {
            if (a == 'Power_Network') {
                this.typedata = '电网拓扑'
            } else if (a == 'Manufacturer') {
                this.typedata = '终端厂家'
            } else if (a == 'Voltage_Level') {
                this.typedata = '电压等级'
            } else if (a == 'Load_Type') {
                this.typedata = '干扰源类型'
            }
        }
    },
    computed: {},
    data() {
        return {
            quyuname: undefined,
            quyunames: undefined,
            vh: null,
            dd: false,
            pageData: {
                pageNum: 1,
                pageSize: 20,
                total: 0
            },
            interval: 3,
            loading: false,
            view: false,
            tableData: [],
            asideheight: undefined,
            timeValue: [],
            id: 1,
            copent: 0,
            classt: 'Power_Network',
            tablename: 'tab1',
            treeData: [],
            idArr: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            deptName: '',
            deptIndex: '',
            voltageleveloption: [],
            terminal: '',
            terminaloption: [],
            interfere: '',
            interfereoption: [],
            classificationData: [],
            dictypeData: undefined,
            deptIndex: '',
            formData: {
                //后面需要修改
                deptIndex: '',
                monitorFlag: 2,
                powerFlag: 2,
                loadType: [],
                manufacturer: [],
                searchBeginTime: '',
                searchEndTime: '',
                statisticalType: '',
                scale: []
            },
            typedata: '电网拓扑',
            typedataz: '电网拓扑',
            tableheight: undefined,
            quyuname: undefined
        }
    },
    created() {
        //this.guanzhou()
        let data = window.sessionStorage.getItem('sysData')
        let yudata = eval('(' + data + ')')
        //debugger
        let str = yudata.dataReport.split('，')
        this.quyuname = str[1]
        var info = window.sessionStorage.getItem('Info')
        info = eval('(' + info + ')')
        this.formData.deptIndex = info.deptId
        this.getAreaDept()
        this.getclassificationData()
        this.getVoltage()
        this.getManufacturer()
        this.getLoadType()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        let data = window.sessionStorage.getItem('sysData')
        let yudata = eval('(' + data + ')')
        //debugger
        let str = yudata.dataReport.split('，')
        this.quyuname = str[0]
        this.quyunames = str[1]

        this.querfromdata()
        //this.tableheight = (getheight()*2.09)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 100 + 'px'
        },
        //切换统计类型
        changeclasss(val) {
            this.classt = val.code
        },
        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'
            }
        },

        timechange() {
            this.dd = true
        },

        //部门绑定区域触发区域树节点
        handleNodeClick(data, node) {
            this.deptName = data.name
            this.$refs.select1.blur()
            this.deptId = data.id
            this.formData.deptIndex = data.id
        },
        //时间格式转化
        dateFormat(dateData1, dateData2) {
            var timearr = []
            var date = new Date(dateData1)
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            m = m < 10 ? '0' + m : m
            var d = date.getDate()
            d = d < 10 ? '0' + d : d
            var h = date.getHours()
            h = h < 10 ? '0' + h : h
            var f = date.getMinutes()
            f = f < 10 ? '0' + f : f
            var s = date.getSeconds()
            s = s < 10 ? '0' + s : s
            this.formData.searchBeginTime = y + '-' + m + '-' + d
            timearr.push(this.formData.startTime)
            var date = new Date(dateData2)
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            m = m < 10 ? '0' + m : m
            var d = date.getDate()
            d = d < 10 ? '0' + d : d
            var h = date.getHours()
            h = h < 10 ? '0' + h : h
            var f = date.getMinutes()
            f = f < 10 ? '0' + f : f
            var s = date.getSeconds()
            s = s < 10 ? '0' + s : s
            this.formData.searchEndTime = y + '-' + m + '-' + d
            timearr.push(this.formData.endTime)
            return timearr
        },
        //2次组件触发事件
        querfromdata() {
            this.dd = false
            this.interval = this.$refs.qytj.intervald
            this.loading = true
            this.timeValue = this.$refs.qytj.timeValue
            this.dateFormat(this.timeValue[0], this.timeValue[1])
            this.formData.pageSize = this.pageData.pageSize
            this.formData.pageNum = this.pageData.pageNum
            api2.overAreaStatistics(this.formData).then(res => {
                if (res.code == 'A0000') {
                    if (res.data.records.length == 0) {
                        this.tableData = []
                        this.loading = false
                    } else {
                        this.pageData.total = res.data.total
                        let data = res.data.records
                        this.typedataz = this.typedata
                        this.tableData = data
                        this.loading = false
                    }
                }
            })
        },

        handleClick(tab, event) {
            this.$nextTick(() => {
                this.$refs.child.onlinerateechart()
            })
        },
        //开关触发
        handleStatusChange(val) {
            this.formData.monitorFlag = val
            //this.fiveTreeData()
        },
        //获取区域
        getAreaDept() {
            api.getAreaDept().then(res => {
                if (res.code == 'A0000') {
                    var data = res.data
                    this.deptName = res.data[0].name
                    data.forEach(element => {
                        this.idArr.push(element.id)
                    })
                    this.treeData = data
                }
            })
        },
        //字典获取数据电压等级
        getVoltage() {
            var code = 'Dev_Voltage_Stand'
            this.voltageleveloption = dicData(code, [])
            this.formData.scale = this.voltageleveloption
        },
        //字典获取数据终端厂家
        getManufacturer() {
            var code = 'Dev_Manufacturers'
            this.terminaloption = dicData(code, [])
            this.formData.manufacturer = this.terminaloption
        },
        //字典获取数据干扰源类型
        getLoadType() {
            var code = 'Interference_Source'
            this.interfereoption = dicData(code, [])
            this.formData.loadType = this.interfereoption
        },
        //获取统计类型
        getclassificationData() {
            var code = 'Statistical_Type'
            this.classificationData = dicData(code, ['Report_Type'])
            this.formData.statisticalType = this.classificationData[0]
        },
        //导出
        exportExcel() {},
        //排序触发
        sortchange() {},
        //切换统计类型
        changeclasss(val) {
            this.classt = val.code
        },
        //重置
        rest() {},
        changePageNum(data) {
            this.loading = true
            this.formData.pageNum = data
            api2.overAreaStatistics(this.formData).then(res => {
                if (res.code == 'A0000') {
                    this.pageData.total = res.data.total
                    let data = res.data.records
                    this.tableData = data
                    this.loading = false
                }
            })
        },
        changePageSize(data) {
            this.loading = true
            this.formData.pageSize = data
            api2.overAreaStatistics(this.formData).then(res => {
                if (res.code == 'A0000') {
                    this.pageData.total = res.data.total
                    let data = res.data.records
                    this.tableData = data
                    this.loading = false
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');
.dhys {
    background: rgb(244, 246, 247);
    width: 36.5%;
    height: 33px;
    position: absolute;
    right: 0;
    z-index: 2000000;
}

.xshou {
    cursor: pointer;
}
//展示标签时激活
.v-enter-active {
    animation: atguigu 0.5s linear;
}
//不展示标签时激活
.v-leave-active {
    animation: atguigu 0.5s linear reverse;
}

@keyframes atguigu {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0px);
    }
}
.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: auto;
    }
    to {
        height: auto;
        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>
<style lang="scss" scoped>
// ::v-deep .el-table.el-table--enable-row-hover .el-table__body tr:hover > td {
//   background: $themeColor-8 !important;
// }
</style>
