<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>
                <timepicker :id="id" ref="arm" :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 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 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="20">
            <el-col :span="24" style="margin-top: -0%">
                <el-table
                    stripe
                    class="xshou"
                    :data="tableData"
                    style="width: 100%; margin-bottom: 2px"
                    row-key="id"
                    id="rebateSetTable"
                    border
                    highlight-current-row
                    :style="`height:${vh}`"
                    :height="`${vh}`"
                    header-cell-class-name="table_header"
                    :default-expand-all="false"
                    @sort-change="sortchange"
                >
                    <el-table-column label="序号" width="80" align="center">
                        <template scope="scope">
                            <span>{{ (formData.pageNum - 1) * formData.pageSize + scope.$index + 1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="provinceCompany"
                        show-overflow-tooltip
                        label="地级区"
                        sortable
                        width="120"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="cityCompany"
                        label="地区公司"
                        show-overflow-tooltip
                        sortable
                        width="120"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="plantName"
                        label="变电站名称"
                        sortable
                        show-overflow-tooltip
                        width="200"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="plantVoltageLevel"
                        label="电压等级"
                        sortable
                        min-width="120"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="onlineMonitorCounts"
                        label="在线监测点数量(个)"
                        sortable
                        width="190"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.onlineMonitorCounts == -1">暂无数据</span>
                            <span v-else>{{ scope.row.onlineMonitorCounts }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="alertMonitorCounts"
                        label="告警监测点数量(个)"
                        sortable
                        width="190"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.alertMonitorCounts == -1">暂无数据</span>
                            <span v-else>{{ scope.row.alertMonitorCounts }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="alertCounts" label="告警次数" sortable width="170">
                        <template slot-scope="scope">
                            <span v-if="scope.row.alertCounts == -1">暂无数据</span>
                            <span v-else>{{ scope.row.alertCounts }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="alertAlarmFrequency"
                        label="告警频次(次/点)"
                        sortable
                        width="170"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.alertAlarmFrequency == -1">暂无数据</span>
                            <span v-else>{{ scope.row.alertAlarmFrequency }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="各项稳态指标告警频次" width="120">
                        <el-table-column
                            align="center"
                            prop="frequencyDeviation"
                            label="频率偏差(次/点)"
                            sortable
                            width="170"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.frequencyDeviation == -1">暂无数据</span>
                                <span v-else>{{ scope.row.frequencyDeviation }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="voltageDeviation"
                            label="电压偏差(次/点)"
                            sortable
                            width="170"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.voltageDeviation == -1">暂无数据</span>
                                <span v-else>{{ scope.row.voltageDeviation }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="harmonicVoltage"
                            label="谐波电压（次/点）"
                            sortable
                            width="190"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.harmonicVoltage == -1">暂无数据</span>
                                <span v-else>{{ scope.row.harmonicVoltage }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="harmonicCurrent"
                            label="谐波电流（次/点）"
                            sortable
                            width="190"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.harmonicCurrent == -1">暂无数据</span>
                                <span v-else>{{ scope.row.harmonicCurrent }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="threePhaseVoltageUnbalance"
                            label="三相电压不平衡度（次/点）"
                            sortable
                            width="260"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.threePhaseVoltageUnbalance == -1">暂无数据</span>
                                <span v-else>{{ scope.row.threePhaseVoltageUnbalance }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="flicker" label="闪变（次/点）" sortable width="190">
                            <template slot-scope="scope">
                                <span v-if="scope.row.flicker == -1">暂无数据</span>
                                <span v-else>{{ scope.row.flicker }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="negative" label="负序电流（次/点）" sortable width="190">
                            <template slot-scope="scope">
                                <span v-if="scope.row.negative == -1">暂无数据</span>
                                <span v-else>{{ scope.row.negative }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="interHarmonic"
                            label="间谐波电压（次/点）"
                            sortable
                            width="210"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.interHarmonic == -1">暂无数据</span>
                                <span v-else>{{ scope.row.interHarmonic }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="各项暂态指标告警频次" sortable width="170">
                        <el-table-column
                            align="center"
                            prop="shortInterruption"
                            label="短时中断(次/点)"
                            sortable
                            width="170"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.shortInterruption == -1">暂无数据</span>
                                <span v-else>{{ scope.row.shortInterruption }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="voltageDip"
                            label="电压暂降（次/点）"
                            sortable
                            width="190"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.voltageDip == -1">暂无数据</span>
                                <span v-else>{{ scope.row.voltageDip }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="voltageSwell"
                            label="电压暂升（次/点）"
                            sortable
                            width="170"
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.voltageSwell == -1">暂无数据</span>
                                <span v-else>{{ scope.row.voltageSwell }}</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="[15, 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 api1 from '@/api/pollution/pollution'
import timepicker from '../../components/TimePicker/index4'
import pagination from '../../components/pagination/index'
import api from '../../../api/integraliy/integraliy'
import api2 from '../../../api/harmonic/alarm'
import { dicData } from '@/assets/commjs/dictypeData'
import alarmtable from '../../components/alarmtable'
export default {
    name: 'alarmstatistics',
    components: {
        timepicker,
        alarmtable,
        pagination
    },
    watch: {},
    computed: {},
    data() {
        return {
            quyuname: undefined,
            quyunames: undefined,
            dd: null,
            vh: null,
            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,
            view: false
        }
    },
    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()
    },
    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.arm.intervald
            this.loading = true
            this.timeValue = this.$refs.arm.timeValue
            this.dateFormat(this.timeValue[0], this.timeValue[1])
            this.formData.pageSize = this.pageData.pageSize
            this.formData.pageNum = this.pageData.pageNum
            api2.warnSubstationDetail(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
                } else {
                    if (res.data == null) {
                        this.tableData = []
                        this.loading = false
                    }
                }
            })
        },

        handleClick(tab, event) {
            this.$nextTick(() => {
                this.$refs.child.onlinerateechart()
            })
        },
        changePageNum(data) {
            this.loading = true
            this.formData.pageNum = data
            api2.warnSubstationDetail(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
                }
            })
            //alert('父组件当前页'+ this.pageData.pageNum)
        },
        changePageSize(data) {
            this.loading = true
            this.formData.pageSize = data
            api2.warnSubstationDetail(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
                }
            })
            // alert('父组件当前条数'+ this.pageData.pageSize)
        },
        //开关触发
        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', 'Voltage_Level', 'Manufacturer', 'Load_Type'])
            this.formData.statisticalType = this.classificationData[0]
        },
        //导出
        exportExcel() {},
        //切换统计类型
        changeclasss(val) {
            this.classt = val.code
        },
        //重置
        rest() {},
        //排序
        sortchange() {}
    }
}
</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;
}
</style>
<style lang="scss" scoped>
.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>
