<template>
    <div class="pd10" v-loading="loading" element-loading-text="数据加载中">
        <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>

            <el-form-item>
                <timepicker
                    :id="id"
                    ref="timewt"
                    :interval="interval"
                    :treenode="treenode"
                    :tablename="tablename"
                    :name="name"
                    :path="path"
                    :dataTree="dataTree"
                ></timepicker>
            </el-form-item>
            <el-form-item>
                <el-button @click="querfromdata" type="primary" icon="el-icon-search">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="text" @click="closeHandle">
                    条件筛选
                    <i :class="!view ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
                </el-button>
            </el-form-item>
        </el-form>
        <div class="container" id="container">
            <i @click="closeHandle" class="el-icon-circle-close coles"></i>
            <el-form :inline="true" :model="formData" label-width="90px" class="">
                <el-form-item label="统计类型:">
                    <el-select
                        v-model="formData.statisticalType"
                        @change="changeclasss"
                        placeholder="请选择统计类型"
                        style="width: 100%"
                    >
                        <el-option
                            v-for="item in classificationData"
                            :key="item.id"
                            :label="item.name"
                            :value="{
                                label: item.name,
                                value: item.id,
                                name: item.name,
                                id: item.id,
                                code: item.code,
                                sort: item.sort
                            }"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="区域选择:">
                    <el-select ref="selet1" 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 :lazy="false" label="稳态指标符合性占比表格" name="tab1">
                        <steadystatetable
                            :classvalue="classt"
                            :tableData="tableData"
                            :loading="loading"
                        ></steadystatetable>
                    </el-tab-pane>
                    <el-tab-pane :lazy="false" label="稳态指标符合性占比图表" name="tab2">
                        <steadystateechart
                            ref="wtcbzb"
                            v-show="eacjartflag && activeName == 'tab2'"
                            :loading="loading"
                            :title="title"
                            :classvalue="classt"
                            :xdata="xdata"
                            :ydata="ydata"
                            :valueData="valueData"
                        ></steadystateechart>
                    </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 steadystatetable from '../../components/steadystatetable'
import steadystateechart from '../../components/echarts/steadystateechart'
export default {
    name: 'exceedingstandards',
    components: {
        timepicker,
        steadystatetable,
        steadystateechart
    },
    watch: {},
    computed: {},
    data() {
        return {
            cu: '',
            quyuname: undefined,
            quyunames: undefined,
            timeValue: [],
            dd: false,
            formInline: {},
            view: false,
            xdata: [],
            ydata1: [],
            ydata8: [],
            classt: 'Power_Network',
            tablename: 'tab1',
            eacjartflag: true,
            interval: 3,
            falg: true,
            treeData: [],
            idArr: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            deptName: '',
            deptIndex: '',
            name: 'sjwzx',
            path: '/harmonic-boot/harmonic/getIntegrityData',
            asideheight: undefined,
            id: 1,
            title: '电网拓扑',
            xdata: [],
            ydata: [],
            centerdata: [],
            valueData: [],
            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: [],
                timeFlag: 1
            },
            periodBeginTime: '',
            periodEndTime: '',
            timehuanbiValue: [],
            tableData: [],
            ping: '',
            time: '',
            loading: true
        }
    },
    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() {
        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.deptName = data.name
            this.$refs.selet1.blur()
            this.deptId = data.id
            this.formData.deptIndex = data.id
        },
        formatDate(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.dd = false
            this.interval = this.$refs.timewt.intervald
            if (this.interval == 1 || this.interval == 2) {
                this.formData.timeFlag = 0
            } else if (this.interval == 3 || this.interval == 4 || this.interval == 5) {
                this.formData.timeFlag = 1
            }
            this.loading = true
            this.timeValue = this.$refs.timewt.timeValue
            // 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.getSteadyExceedRateData(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() {
            var data = {
                deptIndex: this.formData.deptIndex,
                loadType: this.formData.loadType,
                monitorFlag: this.formData.monitorFlag,
                manufacturer: this.formData.manufacturer,
                searchBeginTime: this.formData.searchBeginTime,
                searchEndTime: this.formData.searchEndTime,
                statisticalType: this.formData.statisticalType,
                powerFlag: this.formData.powerFlag,
                scale: this.formData.scale,
                periodBeginTime: this.periodBeginTime,
                periodEndTime: this.periodEndTime,
                timeFlag: this.formData.timeFlag
            }
            this.ydata = []
            this.ydata1 = []
            api.getSteadyExceedRateCensus(data).then(res => {
                this.eacjartflag = true
                if (res.code == 'A0000') {
                    var ydata = res.data.type
                    this.ydata = ydata
                    //this.ydata = ['江苏省', '浙江省', '福建省','江西省', '安徽省', '河北省', '海南省','上海市']
                    // var xdata = res.data.time;
                    let time = res.data.time
                    for (var i = 0; i < time.length; i++) {
                        if (i != 0) {
                            i
                            time[i] = time[i].slice(5)
                        } else if (i == 0) {
                            let date = time[i].slice(5)
                            let t = time[i].slice(0, 4)
                            time[i] = date + '\n' + '(' + t + ')'
                        }
                    }
                    this.xdata = time

                    // this.xdata = ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月','10月','11月','12月']
                    var data = res.data.steadyExceedRate

                    //  this.centerdata = [[56,28,57,39,60,86,95,''],[36,18,67,59,80,66,95,45],[76,78,47,69,90,56,25,''],[66,88,67,89,90,86,95,80],
                    //  [96,58,57,39,90,86,95,89],[46,68,87,99,80,76,55,70,''],[26,53,57,59,90,86,85,90],[66,98,77,89,60,66,95,''],
                    //  [86,68,67,89,90,96,55,90],[56,58,67,89,90,86,65,''],[76,78,67,89,30,66,75,''],[46,88,87,89,90,86,95,17],
                    //  ]
                    var arr = []
                    for (var i = 0; i < data.length; i++) {
                        for (var j = 0; j < data[i].length; j++) {
                            if (data[i][j] == 3.14159 || data[i][j] == 0) {
                                arr.push([i, j, 0])
                            } else if (data[i][j] == 3.1415) {
                                arr.push([i, j, '/'])
                            } else {
                                arr.push([i, j, data[i][j]])
                            }
                        }
                    }
                    this.valueData = arr
                    this.$nextTick(() => {
                        this.$refs.wtcbzb.steadyqualified()
                        setTimeout(() => {
                            this.loading = false
                        }, 1000)
                    })
                }
            })
        },
        //标签切换
        handleClick(tab, event) {
            this.tablename = tab.name
            if (tab.name == 'tab1') {
                //this.thb = false
                this.eacjartflag = false
                this.$nextTick(() => {
                    this.$refs.wtcbzb.steadyqualified()
                })
            } else if (tab.name == 'tab2') {
                //this.thb = true
                this.eacjartflag = true

                this.$nextTick(() => {
                    this.$refs.wtcbzb.steadyqualified()
                })
            }
        },
        //开关触发
        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]
        },

        //获取数据完整性列表数据
        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)
            })
        },
        changePageNum(data) {
            this.pageData.pageNum = data
            alert('父组件当前页' + this.pageData.pageNum)
        },
        changePageSize(data) {
            this.pageData.pageSize = data
            alert('父组件当前条数' + this.pageData.pageSize)
        },
        rest() {}
    }
}
</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;}
// //展示标签时激活
// .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: 10%;
        top: 0px;
    }
    to {
        top: 0px;
        height: 0px;
    }
}
.coles {
    position: absolute;
    right: 0;
    font-size: 20px;
    cursor: pointer;
}
</style>
