<template>
    <div class="pd10" v-loading="loading" element-loading-text="数据加载中">
        <div class="container" id="container">
            <i @click="closeHandle" class="el-icon-circle-close coles"></i>
            <el-form :inline="true" :model="formInline" label-width="90px" class="">
                <!-- <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>
                <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>
                    <Area ref="Area" @click="handleNodeClick"></Area>
                </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 v-show="falg">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item>
                    <timepicker
                        ref="timehg"
                        :id="id"
                        :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>
            </el-form>
        </el-row>
        <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">
                        <qualifiedataintegrity
                            :classvalue="classt"
                            :tableData="tableData"
                            :loading="loading"
                        ></qualifiedataintegrity>
                    </el-tab-pane>
                    <el-tab-pane label="稳态合格率图表" name="tab2" id="hgceshi">
                        <!-- <span style="font-weight: bold;color:#333;position: absolute;right: 100px;top: 25px;">注意:<span style="color:#CC0000">{{'合格率<60%'}}红色</span><span style="color:#FFCC33">&nbsp&nbsp&nbsp{{'60%≤合格率<90%'}}黄色</span><span style="color:#339966"> &nbsp&nbsp&nbsp{{ '合格率≥90%' }}绿色</span></span> -->
                        <qualifiedechart
                            :loading="loading"
                            :title="title"
                            :classvalue="classt"
                            :xdata="xdata"
                            :ydata1="ydata1"
                            :ydata2="ydata2"
                            :ydata3="ydata3"
                            :ydata4="ydata4"
                            :ydata5="ydata5"
                            :ydata6="ydata6"
                            :ydata7="ydata7"
                            :ydata8="ydata8"
                            v-show="'tab2' == activeName"
                            ref="child"
                        ></qualifiedechart>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { dicData } from '../../../assets/commjs/dictypeData'
import api from '../../../api/integraliy/integraliy'
import timepicker from '../../components/TimePicker/index4'
import qualifiedataintegrity from '../../components/qualifiedataintegrity'
import qualifiedechart from '../../components/echarts/qualifiedechart'
import Area from '@/views/components/Area/Area.vue'

export default {
    name: 'qualificationratestatistics',
    components: {
        Area,
        timepicker,
        qualifiedataintegrity,
        qualifiedechart
    },
    computed: {},
    data() {
        return {
            view: false,
            falg: true,
            quyuname: undefined,
            quyunames: undefined,
            dd: false,
            formInline: {},

            xdata: [],
            ydata1: [],
            ydata2: [],
            ydata3: [],
            ydata4: [],
            ydata5: [],
            ydata6: [],
            ydata7: [],
            ydata8: [],
            classt: 'Power_Network',
            tablename: 'tab1',
            eacjartflag: true,
            interval: 3,
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            deptName: '',
            deptIndex: '',
            name: 'sjwzx',
            path: '/harmonic-boot/harmonic/getIntegrityData',
            asideheight: undefined,
            id: 1,
            title: '电网拓扑',
            xdata: [],
            ydata: [],
            ydata1: [],
            classvalue: 0,
            activeName: 'tab1',
            treenode: '',
            dataTree: '',
            voltageleve1: '',
            //电压等级
            voltageleveloption: [],
            terminal: '',
            terminaloption: [],
            interfere: '',
            interfereoption: [],
            classificationData: [],
            dictypeData: undefined,
            deptIndex: '',
            formData: {
                //后面需要修改
                deptIndex: '',
                monitorFlag: 2,
                powerFlag: 2,
                loadType: [],
                manufacturer: [],
                searchBeginTime: '',
                searchEndTime: '',
                statisticalType: '',
                scale: []
            },
            periodBeginTime: '',
            periodEndTime: '',
            timehuanbiValue: [],
            tableData: [],
            ping: '',
            time: '',
            loading: true,
            vh: null,
            cu: ''
        }
    },
    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.getclassificationData()
        this.getVoltage()
        this.getManufacturer()
        this.getLoadType()
    },
    mounted() {
        if (this.$route.params.mapid0 != undefined && this.$route.params.mapName0 != undefined) {
            setTimeout(() => {
                this.RoutingChanges(this.$route.params.mapid0, this.$route.params.mapName0)
            }, 500)
        } else {
            this.querfromdata()
        }
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 55 + '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'
            }
        },

        //切换统计类型
        changeclasss(val) {
            this.cu = val.code
        },
        //时间格式转化
        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
        },
        //部门绑定区域触发区域树节点
        handleNodeClick(data, node) {
            this.deptId = data.id
            this.formData.deptIndex = data.id
        },
        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.dd = false
            this.interval = this.$refs.timehg.intervald
            this.loading = true
            this.timeValue = this.$refs.timehg.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.getSteadyQualifyData(this.formData).then(res => {
                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() {
            this.loading = true
            var data = {
                deptIndex: this.formData.deptIndex,
                loadType: this.formData.loadType,
                monitorFlag: this.formData.monitorFlag,
                powerFlag: 2,
                manufacturer: this.formData.manufacturer,
                searchBeginTime: this.formData.searchBeginTime,
                searchEndTime: this.formData.searchEndTime,
                statisticalType: this.formData.statisticalType,
                scale: this.formData.scale,
                periodBeginTime: this.periodBeginTime,
                periodEndTime: this.periodEndTime
            }
            this.ydata = []
            this.ydata1 = []
            this.ydata2 = []
            this.ydata3 = []
            this.ydata4 = []
            this.ydata5 = []
            this.ydata6 = []
            this.ydata7 = []
            this.ydata8 = []
            api.getSteadyQualifyCensus(data).then(res => {
                this.eacjartflag = true

                if (res.code == 'A0000') {
                    this.xdata = res.data.type
                    this.ydata1 = res.data.freqOffset
                    this.ydata2 = res.data.flicker
                    this.ydata3 = res.data.voltageUnbalance
                    this.ydata4 = res.data.harmonicVoltage
                    this.ydata5 = res.data.voltageOffset
                    this.ydata6 = res.data.harmonicCurrent
                    this.ydata7 = res.data.negativeCurrent
                    this.ydata8 = res.data.interHarmonic
                    this.loading = false
                    this.$nextTick(() => {
                        this.$refs.child.qualifiedechart()
                    })
                }
            })
        },
        //标签切换
        handleClick(tab, event) {
            this.activeName = tab.name
            if (tab.name == 'tab1') {
                this.eacjartflag = false
                this.$nextTick(() => {
                    this.$refs.child.qualifiedechart()
                })
            } else if (tab.name == 'tab2') {
                // this.gettubiao();
                this.$nextTick(() => {
                    // this.$refs.child.qualifiedechart();
                })
            }
        },

        //开关触发
        handleStatusChange(val) {
            this.formData.monitorFlag = val
        },

        //字典获取数据电压等级
        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]
        },

        //获取数据完整性列表数据
        getQueryData() {
            let data = {
                area: '0',
                comparison: 0,
                interference: [],
                manufacturer: [],
                searchBeginTime: '',
                searchEndTime: '',
                statisticalType: 0,
                voltageLevel: []
            }
        },
        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)
            })
        },
        rest() {},
        RoutingChanges(id, name) {
            this.deptId = id
            this.formData.deptIndex = id
            this.$refs.Area.form.valueTitle = name
            this.querfromdata()
        }
    },
    watch: {
        $route: {
            handler: function (val, oldVal) {
                if (val.params.mapid0 != undefined && val.params.mapName0 != undefined) {
                    this.$nextTick(() => {
                        this.RoutingChanges(val.params.mapid0, val.params.mapName0)
                    })
                }
            },
            // 深度观察监听
            deep: true
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');

.container {
    /* margin: auto; */
    top: 0px;
    right: 0;
    width: 50%;
    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>
