<template>
    <div class="pd10" v-loading="loading" element-loading-text="数据加载中">
        <!-- <transition appear>       
        <div v-show="dd" class="dhys">
          <timepicker
            :id="id"
            @querfromdata="querfromdata"
            :interval="interval"
            :tablename="tablename"
          ></timepicker>
       
        </div>
          </transition> -->
        <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="formData.monitorFlag"
                ></el-switch>
            </el-form-item>

            <el-form-item>
                <timepicker :id="id" ref="mx" :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%"
                        clearable
                    >
                        <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%"
                        clearable
                    >
                        <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
                        placeholder="请选择电压等级"
                        style="width: 100%"
                        clearable
                    >
                        <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
                        placeholder="请选择终端厂家"
                        style="width: 100%"
                        clearable
                    >
                        <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"
                        clearable
                        multiple
                        collapse-tags
                        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="20">
            <el-col :span="24">
                <el-table
                    stripe
                    class="xshou"
                    :data="tableData"
                    :style="`height:${vh}`"
                    :height="`height:${vh}`"
                    row-key="id"
                    id="rebateSetTable"
                    border
                    highlight-current-row
                    header-cell-class-name="table_header"
                    :default-expand-all="false"
                >
                    <el-table-column align="center" min-width="60px" label="序号">
                        <template scope="scope">
                            <span>{{ (formData.pageNum - 1) * formData.pageSize + scope.$index + 1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="provinceCompany"
                        label="地级区"
                        :show-overflow-tooltip="true"
                        sortable
                        min-width="120px"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="cityCompany"
                        label="供电公司"
                        sortable
                        min-width="120px"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="subName"
                        label="变电站"
                        :show-overflow-tooltip="true"
                        sortable
                        min-width="250px"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="lineScale"
                        label="电压等级"
                        sortable
                        min-width="120px"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="lineName"
                        label="监测点名称"
                        :show-overflow-tooltip="true"
                        sortable
                        width="180px"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="loadType"
                        label="干扰源类型"
                        sortable
                        min-width="120px"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="lineObjectName"
                        label="监测点对象名称"
                        :show-overflow-tooltip="true"
                        sortable
                        min-width="160px"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.lineObjectName == null">/</span>
                            <span v-if="scope.row.lineObjectName != null">{{ scope.row.lineObjectName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="overDay"
                        label="超标天数"
                        sortable
                        min-width="120px"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="freqOverDay"
                        label="频率偏差超标天数"
                        sortable
                        min-width="160px"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="volDevOverDay"
                        label="电压偏差超标天数"
                        sortable
                        min-width="160px"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="volDisOverDay"
                        label="电压总畸变率超标天数"
                        sortable
                        min-width="200px"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="volContainOverDay"
                        label="谐波电压含有率超标天数"
                        sortable
                        min-width="200px"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="harmVolOverDay"
                        label="谐波电压超标天数"
                        sortable
                        width="200px"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="harmCurOverDay"
                        label="谐波电流超标天数"
                        sortable
                        min-width="200px"
                    ></el-table-column>
                    <el-table-column align="center" label="各次谐波电压含有率(%)" min-width="200px">
                        <el-table-column
                            align="center"
                            prop="overVolThreeTimes"
                            label="3次"
                            sortable
                            min-width="80px"
                        ></el-table-column>
                        <el-table-column
                            align="center"
                            prop="overVolFiveTimes"
                            label="5次"
                            sortable
                            min-width="80px"
                        ></el-table-column>
                        <el-table-column
                            align="center"
                            prop="overVolSevenTimes"
                            label="7次"
                            sortable
                            min-width="80px"
                        ></el-table-column>
                        <el-table-column
                            align="center"
                            prop="overVolElevenTimes"
                            label="11次"
                            sortable
                            min-width="80px"
                        ></el-table-column>
                        <el-table-column
                            align="center"
                            prop="overVolThirteenTimes"
                            label="13次"
                            sortable
                            min-width="80px"
                        ></el-table-column>
                        <el-table-column
                            align="center"
                            prop="overVolTwentyThreeTimes"
                            label="23次"
                            sortable
                            min-width="80px"
                        ></el-table-column>
                        <el-table-column
                            align="center"
                            prop="overVolTwentyFiveTimes"
                            label="25次"
                            sortable
                            min-width="80px"
                        ></el-table-column>
                        <el-table-column
                            align="center"
                            prop="overVolOtherTimes"
                            label="其他次"
                            sortable
                            min-width="100px"
                        ></el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="各次谐波电流幅值(A)" min-width="120">
                        <el-table-column
                            align="center"
                            prop="overCurThreeTimes"
                            label="3次"
                            sortable
                            min-width="80px"
                        ></el-table-column>
                        <el-table-column
                            align="center"
                            prop="overCurFiveTimes"
                            label="5次"
                            sortable
                            min-width="80px"
                        ></el-table-column>
                        <el-table-column
                            align="center"
                            prop="overCurSevenTimes"
                            label="7次"
                            sortable
                            min-width="80px"
                        ></el-table-column>
                        <el-table-column
                            align="center"
                            prop="overCurElevenTimes"
                            label="11次"
                            sortable
                            min-width="80px"
                        ></el-table-column>
                        <el-table-column
                            align="center"
                            prop="overCurThirteenTimes"
                            label="13次"
                            sortable
                            min-width="80px"
                        ></el-table-column>
                        <el-table-column
                            align="center"
                            prop="overCurTwentyThreeTimes"
                            label="23次"
                            sortable
                            min-width="80px"
                        ></el-table-column>
                        <el-table-column
                            align="center"
                            prop="overCurTwentyFiveTimes"
                            label="25次"
                            sortable
                            min-width="80px"
                        ></el-table-column>
                        <el-table-column
                            align="center"
                            prop="overCurOtherTimes"
                            label="其他次"
                            sortable
                            min-width="100px"
                        ></el-table-column>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="volContainOverDay"
                        label="间谐波电压含有率超标天数"
                        sortable
                        min-width="260px"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="threeUnbalance"
                        label="三相电压不平衡度超标天数"
                        sortable
                        min-width="260px"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="negativeOverDay"
                        label="负序电流超标天数"
                        sortable
                        min-width="200px"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="flickerOverDay"
                        label="闪变超标天数"
                        sortable
                        min-width="200px"
                    ></el-table-column>
                    <el-table-column align="center" prop="monitorNumber" label="监测点编号" sortable min-width="120px">
                        <template slot-scope="scope">
                            <span v-if="scope.row.monitorNumber == null">/</span>
                            <span v-if="scope.row.monitorNumber != null">{{ scope.row.monitorNumber }}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    background
                    align="right"
                    class="mt10"
                    @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>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { getheight } from '@/assets/commjs/common'
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'
import exceedancetable from '../../components/exceedancetable'
export default {
    name: 'exceedancedetails',
    components: {
        timepicker,
        //pagination,
        exceedancetable
    },
    watch: {},
    computed: {},
    data() {
        return {
            view: false,
            quyuname: undefined,
            quyunames: undefined,
            vh: null,
            dd: false,
            pageData: {
                pageNum: 1,
                pageSize: 20,
                total: 0
            },
            interval: 3,
            loading: 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: []
            },
            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() {
        let data = window.sessionStorage.getItem('sysData')
        let yudata = eval('(' + data + ')')
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        let str = yudata.dataReport.split('，')
        this.quyuname = str[0]
        this.quyunames = str[1]

        this.querfromdata()
        // this.tableheight = (getheight()*2.07)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 100 + 'px'
        },
        timechange() {
            this.dd = true
        },
        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'
            }
        },

        //部门绑定区域触发区域树节点
        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.mx.intervald
            this.loading = true
            this.timeValue = this.$refs.mx.timeValue
            this.dateFormat(this.timeValue[0], this.timeValue[1])
            this.formData.pageSize = this.pageData.pageSize
            this.formData.pageNum = this.pageData.pageNum
            api2.lineOverLimit(this.formData).then(res => {
                if (res.code == 'A0000') {
                    if (res.data.records.length == 0 && res.data.total == 0) {
                        this.tableData = []
                        this.pageData.total = res.data.total
                        this.loading = false
                    } else if (res.data.records.length == 0 && res.data.total > 0) {
                        this.qiehuanData()
                    } else {
                        this.pageData.total = res.data.total
                        let data = res.data.records
                        for (let i = 0; i < data.length; i++) {
                            data[i].sort = i + 1
                        }
                        this.tableData = data
                        this.loading = false
                    }
                }
            })
        },
        qiehuanData() {
            alert(2)
            this.dd = false
            this.interval = this.$refs.mx.intervald
            this.loading = true
            this.timeValue = this.$refs.mx.timeValue
            this.dateFormat(this.timeValue[0], this.timeValue[1])
            this.formData.pageSize = this.pageData.pageSize
            this.formData.pageNum = 1
            this.pageData.pageNum = 1
            api2.lineOverLimit(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
                        for (let i = 0; i < data.length; i++) {
                            data[i].sort = i + 1
                        }
                        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() {},
        //切换统计类型
        changeclasss(val) {
            this.classt = val.code
        },
        //重置
        rest() {},
        changePageNum(data) {
            this.loading = true
            this.formData.pageNum = data
            api2.lineOverLimit(this.formData).then(res => {
                if (res.code == 'A0000') {
                    this.pageData.total = res.data.total
                    let data = res.data.records
                    for (let i = 0; i < data.length; i++) {
                        data[i].sort = i + 1
                    }
                    this.tableData = data
                    this.loading = false
                }
            })
        },
        changePageSize(data) {
            this.loading = true
            this.formData.pageSize = data
            api2.lineOverLimit(this.formData).then(res => {
                if (res.code == 'A0000') {
                    this.pageData.total = res.data.total
                    let data = res.data.records
                    for (let i = 0; i < data.length; i++) {
                        data[i].sort = i + 1
                    }
                    this.tableData = data
                    this.loading = false
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');
</style>
<style lang="scss" scoped>
.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>
