<template>
    <div class="pd10" v-loading="loading" element-loading-text="数据加载中">
        <!-- <transition appear>       
            <div v-show="animation" class="dhys">
              <timepicker style="margin-left:-1.8%"
            :id="id"
            @querfromdata="querfromdata"
            :interval="interval"
            :treenode="treenode"
            :tablename="tablename"
            :name="name"
            :path="path"
            :dataTree="dataTree"
          ></timepicker>
            </div>
          </transition> -->

        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <!-- <div style="display: flex;"> -->
            <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>
            <!-- <div style="display: flex;justify-content: space-between;flex-grow:1;"> -->
            <el-form-item>
                <timepicker
                    :id="id"
                    ref="timejb"
                    :interval="interval"
                    :treenode="treenode"
                    :tablename="tablename"
                    :name="name"
                    :path="path"
                    :dataTree="dataTree"
                ></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>
            <!-- </div> -->
            <!-- </div> -->
        </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="20">
            <el-col :span="24">
                <el-tabs :style="'height:' + vh" type="border-card" v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="谐波畸变率统计表" name="tab1">
                        <harmonicdistortiontable
                            :classvalue="classt"
                            :tableData="tableData"
                            :loading="loading"
                        ></harmonicdistortiontable>
                    </el-tab-pane>
                    <el-tab-pane label="谐波畸变率统计图" name="tab2">
                        <!-- <span style="font-weight: bold;color:#333;position: absolute;right: 10px;"><span style="color:red">注意:</span>{{'畸变合格率<60%'}}&nbsp&nbsp&nbsp<span style="color:#00CC33">绿色</span>&nbsp&nbsp&nbsp{{'60%≤畸变合格率<90%'}}&nbsp&nbsp&nbsp<span style="color:#FFCC00">黄色</span>&nbsp&nbsp&nbsp{{ '畸变合格率≥90%' }}&nbsp&nbsp&nbsp<span style="color:red"> 红色</span></span> -->
                        <harmonicdistortionechart
                            v-show="eacjartflag && activeName == 'tab2'"
                            :classvalue="classt"
                            :timeValue="time"
                            :timehuanbiValue="ping"
                            :xdata="xdata"
                            :ydata1="ydata1"
                            :ydata2="ydata2"
                            :ydata3="ydata3"
                            :ydata4="ydata4"
                            :ydata5="ydata5"
                            :ydata6="ydata6"
                            :ydata7="ydata7"
                            :ydata8="ydata8"
                            :mindata="mindata"
                            ref="harm"
                        ></harmonicdistortionechart>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import api1 from '@/api/pollution/pollution'
import { dicData } from '../../../assets/commjs/dictypeData'
import api from '../../../api/integraliy/integraliy'
import timepicker from '../../components/TimePicker/index4'
import harmonicdistortiontable from '../../components/harmonicdistortiontable'
import harmonicdistortionechart from '../../components/echarts/harmonicdistortionechart'
export default {
    name: 'distortionratestatistics',
    components: {
        timepicker,
        harmonicdistortiontable,
        harmonicdistortionechart
    },
    watch: {
        $route: {
            handler: function (val, oldVal) {
                if (val.params.mapid2 != undefined && val.params.mapName2 != undefined) {
                    this.$nextTick(() => {
                        this.RoutingChanges(val.params.mapid2, val.params.mapName2)
                    })
                }
            },
            // 深度观察监听
            deep: true
        }
    },
    computed: {},
    data() {
        return {
            cu: '',
            quyuname: undefined,
            quyunames: undefined,
            formInline: {},
            animation: false,
            asideheight: undefined,
            view: false,
            id: 1,
            loading: true,
            tablename: 'tab1',
            eacjartflag: true,
            interval: 3,
            title: '电网拓扑',
            xdata: [],
            ydata1: [],
            ydata2: [],
            ydata3: [],
            ydata4: [],
            ydata5: [],
            ydata6: [],
            ydata7: [],
            ydata8: [],
            activeName: 'tab1',
            treenode: '',
            dataTree: '',
            name: 'sjwzx',
            path: '/harmonic-boot/harmonic/getIntegrityData',
            formData: {
                //后面需要修改
                deptIndex: '',
                monitorFlag: 2,
                powerFlag: 2,
                loadType: [],
                manufacturer: [],
                searchBeginTime: '',
                searchEndTime: '',
                serverName: '',
                statisticalType: '',
                scale: []
            },
            deptId: '',
            deptName: '',
            deptIndex: '',
            treeData: [],
            idArr: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            //统计类型
            classificationData: [],
            //电压等级
            voltageleveloption: [],
            //终端厂家
            terminaloption: [],
            //干扰源类型
            interfereoption: [],
            classt: 'Power_Network',
            tableData: [],
            ping: '',
            time: '',
            vh: null,
            mindata: null
        }
    },
    created() {
      this.setHeight()
        window.addEventListener('resize', this.setHeight)
        let data = window.sessionStorage.getItem('sysData')
        let yudata = eval('(' + data + ')')
        let str = yudata.dataReport.split('，')
        this.quyuname = str[0]
        this.quyunames = 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() {
   
        if (this.$route.params.mapid2 != undefined && this.$route.params.mapName2 != undefined) {
            setTimeout(() => {
                this.RoutingChanges(this.$route.params.mapid2, this.$route.params.mapName2)
            }, 500)
        } else {
            this.querfromdata()
        }
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 55 + 'px'
        },
        RoutingChanges(id, name) {
            this.deptName = name
            this.$refs.select1.blur()
            this.deptId = id
            this.formData.deptIndex = id

            this.querfromdata()
        },
        timechange() {
            this.animation = true
        },
        closeHandle() {
            if (this.view) {
                this.view = false
            } else {
                this.view = true
            }
            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'
            }
        },
        //切换统计类型
        changeclasss(val) {
            this.cu = val.code
        },
        //开关触发
        handleStatusChange(val) {
            this.formData.monitorFlag = val
            //this.fiveTreeData()
        },
        //时间格式转化
        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
        },
        //时间校验
        formatDate(date) {
            // date = new Date();
            date = new Date(Date.parse(date.replace(/-/g, '/'))) //转换成Data();

            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
            return y + '-' + m + '-' + d
        },
        //2次组件触发事件
        querfromdata() {
            this.classt = this.cu
            //this.closeHandle()
            this.animation = false
            this.interval = this.$refs.timejb.intervald
            this.loading = true
            this.timeValue = this.$refs.timejb.timeValue
            // this.timeValue = data;

            // this.timehuanbiValue = timehbValue;

            // this.periodBeginTime = this.timehuanbiValue[0];
            // this.periodEndTime = this.timehuanbiValue[1];

            // this.ping = this.periodBeginTime + "至" + this.periodEndTime;
            this.dateFormat(this.timeValue[0], this.timeValue[1])
            this.time = this.formData.searchBeginTime + '至' + this.formData.searchEndTime
            api.getTHDistortionData(this.formData).then(res => {
                if (res.code == 'A0000') {
                    if (res.code == 'A0000') {
                        if (res.data.length == 0) {
                            this.tableData = []
                        } else {
                            if (
                                res.data[0].children[0].children[0].children[0].children !== [] &&
                                res.data[0].children[0].children[0].children[0].children !== null
                            ) {
                                res.data.forEach(m => {
                                    m.id = this.guid()
                                    m.children.forEach(n => {
                                        n.id = this.guid()
                                        n.children.forEach(d => {
                                            d.id = this.guid()
                                            d.children.forEach(p => {
                                                p.id = this.guid()
                                                p.children.forEach(h => {
                                                    h.id = this.guid()
                                                })
                                            })
                                        })
                                    })
                                })
                            } else {
                                res.data.forEach(m => {
                                    m.id = this.guid()
                                    m.children.forEach(n => {
                                        n.id = this.guid()
                                        n.children.forEach(d => {
                                            d.id = this.guid()
                                            d.children.forEach(p => {
                                                p.id = this.guid()
                                            })
                                        })
                                    })
                                })
                            }
                            this.tableData = res.data
                        }
                        this.gettubiao()
                    }
                }
            })
        },
        gettubiao() {
            api.getTHDistortionCensus(this.formData).then(res => {
                this.eacjartflag = true
                if (res.code == 'A0000') {
                    if (res.data.type.length == 0 && res.data.single.length == 0) {
                        this.xdata = res.data.type
                        this.ydata1 = res.data.single
                    } else {
                        this.xdata = res.data.type
                        var arr = []
                        if (res.data.single) {
                            for (var j = 0; j < res.data.single.length - 1; j++) {
                                for (var i = 0; i < res.data.single.length - 1 - j; i++) {
                                    // 判断，如果数组中的当前一个比后一个大，那么两个交换一下位置
                                    if (arr[i] > arr[i + 1]) {
                                        var tmp = arr[i]
                                        res.data.single[i] = arr[i + 1]
                                        res.data.single[i + 1] = tmp
                                    }
                                }
                            }
                            arr = res.data.single
                            for (var i = 0; i < arr.length; i++) {
                                if (arr[i] == 0 || arr[i] == 3.14159) {
                                    arr[i] = arr[arr.length - 1] * 0.03
                                    this.mindata = arr[arr.length - 1] * 0.03
                                }
                            }
                            this.ydata1 = arr
                        }

                        this.$nextTick(() => {
                            this.$refs.harm.qualifiedechart()
                            setTimeout(() => {
                                this.loading = false
                            }, 1000)
                        })
                    }
                }
            })
        },
        guid() {
            return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                let r = (Math.random() * 16) | 0,
                    v = c === 'x' ? r : (r & 0x3) | 0x8
                return v.toString(16)
            })
        },
        //标签切换
        handleClick(tab, event) {
            this.tablename = tab.name
            this.activeName = tab.name
            if (tab.name == 'tab1') {
                this.eacjartflag = false

                this.$nextTick(() => {
                    this.$refs.harm.qualifiedechart()
                })
            } else if (tab.name == 'tab2') {
                this.eacjartflag = true
                this.$nextTick(() => {
                    this.$refs.harm.qualifiedechart()
                })
            }
        },

        //部门绑定区域触发区域树节点
        handleNodeClick(data, node) {
            this.deptName = data.name
            this.$refs.select1.blur()
            this.deptId = data.id
            this.formData.deptIndex = data.id
        },
        //查询触发方法
        queryDataInfo() {
            api.getLineLedger(this.formData).then(res => {
                if (res.code == 'A0000') {
                    this.tableData = res.data
                }
            })
        },
        //获取区域
        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]
        },
        rest() {
            this.deptName = '全国'
            this.formData = {
                deptIndex: '',
                monitorFlag: 2,
                loadType: [],
                manufacturer: [],
                searchBeginTime: '',
                searchEndTime: '',
                statisticalType: '',
                scale: []
            }
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');
.container {
    /* margin: auto; */
    top: 0px;
    right: 0;
    width: 40%;
    height: 0px;
    z-index: 2000;
    position: absolute;
    background-color: #e4e7ebb9;
    overflow: auto;
    scroll-behavior: smooth;
    -radius: 20px;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
    display: block;
}
.expend {
    animation: expend ease 5s forwards;
}
.close-container {
    animation: no-expend ease 1s forwards;
}
@keyframes expend {
    from {
        top: 0px;
        height: auto;
    }
    to {
        height: auto;
        top: 0px;
    }
}
@keyframes no-expend {
    from {
        height: 10%;
        top: 0px;
    }
    to {
        top: 0px;
        height: 0px;
    }
}
.coles {
    position: absolute;
    right: 0;
    font-size: 20px;
    cursor: pointer;
}
</style>
