<template>
    <div class="pd10" v-loading="isLoading" element-loading-text="数据加载中">
        <!--查询条件-->
        <el-form :inline="true" :model="formData" class="demo-form-inline">
            <el-form-item v-if="this.quyunames != undefined">
                <el-switch
                    class="tableScopeSwitch"
                    :active-value="0"
                    :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>
                <Timeinterval ref="interval" :interval="3"></Timeinterval>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="el-icon-search" @click="getList">查询</el-button>
                <el-button type="primary" class="el-icon-download" @click="exportEvent">导出</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>
                    <Area @click="handleNodeClick"></Area>
                </el-form-item>
                <el-form-item label="终端等级:">
                    <el-select clearable v-model="formData.lineGrade" placeholder="监测点等级" style="width: 100%">
                        <el-option
                            v-for="item in terminalClass"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="统计类型:">
                    <el-select v-model="formData.statisticalType" @change="changeclasss" placeholder="请选择统计类型">
                        <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 v-model="formData.scale" multiple collapse-tags clearable placeholder="请选择电压等级">
                        <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="请选择终端厂家"
                    >
                        <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="请选择干扰源类型"
                    >
                        <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>
            <el-col :span="24">
                <vxe-table
                    :data="tableData"
                    border
                    stripe
                    :row-config="{ isCurrent: true, isHover: true }"
                    ref="Statistics"
                    :height="vh"
                    style="width: 100%"
                    :header-cell-style="{
                        height: '25px',
                        top: '0px',
                        padding: '0px'
                    }"
                    header-cell-class-name="table_header"
                    :row-style="{ height: '25px' }"
                    :cell-style="{ padding: '0px' }"
                >
                    <vxe-table-column align="center" field="orderNo" width="80" title="序号"></vxe-table-column>
                    <vxe-table-column align="center" field="areaName" title="统计方式" show-overflow></vxe-table-column>
                    <vxe-table-colgroup align="center" field="jcd" title="监测点">
                        <vxe-table-column align="center" field="addLineNum" title="监测点新增数"></vxe-table-column>
                        <vxe-table-column align="center" field="lineNum" title="监测点总数"></vxe-table-column>
                    </vxe-table-colgroup>
                    <vxe-table-colgroup align="center" field="zz" title="装置">
                        <vxe-table-column align="center" field="deviceNum" title="装置新增数"></vxe-table-column>
                        <vxe-table-column align="center" field="addDeviceNum" title="装置总数"></vxe-table-column>
                        <vxe-table-colgroup align="center" title="投运">
                            <vxe-table-column align="center" field="normalStateNum" title="在线">
                                <template slot-scope="scope">
                                    <span style="color: green">{{ scope.row.normalStateNum }}</span>
                                </template>
                            </vxe-table-column>
                            <vxe-table-column align="center" field="suspendStateNum" title="中断">
                                <template slot-scope="scope">
                                    <span style="color: red">{{ scope.row.suspendStateNum }}</span>
                                </template>
                            </vxe-table-column>
                        </vxe-table-colgroup>
                        <vxe-table-column align="center" field="offStreamStateNum" title="停运"></vxe-table-column>
                        <vxe-table-column align="center" field="hotSpareStateNum" title="热备用">
                            <template slot-scope="scope">
                                <span style="color: #960">{{ scope.row.hotSpareStateNum }}</span>
                            </template>
                        </vxe-table-column>
                    </vxe-table-colgroup>
                </vxe-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <div id="left">
                    <div id="linexzs" ref="left"></div>
                </div>
            </el-col>
            <el-col :span="8">
                <div id="middle">
                    <div id="linezs" ref="middle"></div>
                </div>
            </el-col>
            <el-col :span="8">
                <div id="right">
                    <div id="linestatus" ref="right"></div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import Timeinterval from '@/views/components/TimePicker/index4'
import yan from '@/assets/commjs/color'
import { dicData } from '@/assets/commjs/dictypeData'
import { getLineStatisticsDetail } from '@/api/BusinessAdministrator/Statistics'
import Area from '@/views/components/Area/Area.vue'
export default {
    name: 'monitoringdistribution',
    components: {
        Area,
        Timeinterval
    },
    data() {
        return {
            quyuname: undefined,
            quyunames: undefined,
            zoom: '', //图表焦点校验
            vh: null,
            height: undefined,
            statisticalTypeList: [],
            classt: 'Power_Network',
            treeData: [],
            idArr: [],
            deptName: '全国',
            deptIndex: '',
            treenode: '',
            dataTree: '',
            myChartes2: '',
            myChartes1: '',
            myChartes3: '',
            voltageleve1: '',
            //电压等级
            voltageleveloption: [],
            terminalClass: [],
            terminaloption: [],
            interfereoption: [],
            classificationData: [],
            item: ['', ''],
            formData: {
                //后面需要修改
                deptIndex: '',
                lineGrade: '',
                monitorFlag: 0,
                loadType: [],
                manufacturer: [],
                searchBeginTime: '',
                searchEndTime: '',
                statisticalType: '',
                scale: []
            },
            tableData: [],
            isLoading: false,
            view: false,
            quyuname: '数据中心'
        }
    },
    created() {
        // let data = window.sessionStorage.getItem("sysData");
        // let yudata = eval("(" + data + ")");
        // let str = yudata.dataReport.split("，");
        // this.quyuname = str[1];
        var info = window.sessionStorage.getItem('Info')
        info = eval('(' + info + ')')
        this.formData.deptIndex = info.deptId
        this.info()
        this.$nextTick(() => {
            this.getList()
        })
    },
    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.resizeEchartLeft()
        this.resizeEchartRight()
        this.resizeEchartMiddle()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') / 2 - 70
            if (this.myChartes1 !== '') {
                this.myChartes1.resize()
            } else if (this.myChartes2 !== '') {
                this.myChartes2.resize()
            } else if (this.myChartes3 !== '') {
                this.myChartes3.resize()
            }
        },
        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'
            }
        },
        info() {
            //终端等级
            this.terminalClass = dicData('Dev_Level', [])
            this.formData.lineGrade = this.terminalClass[0].id
            // 获取统计类型
            this.classificationData = dicData('Statistical_Type', ['Report_Type'])
            this.formData.statisticalType = this.classificationData[0]
            //   字典获取数据电压等级;
            this.voltageleveloption = dicData('Dev_Voltage_Stand', [])
            this.formData.scale = this.voltageleveloption
            //字典获取数据终端厂家
            this.terminaloption = dicData('Dev_Manufacturers', [])
            this.formData.manufacturer = this.terminaloption
            //字典获取数据干扰源类型
            this.interfereoption = dicData('Interference_Source', [])
            this.formData.loadType = this.interfereoption
        },
        //切换统计类型
        changeclasss(val) {
            this.classt = val.code
            // console.log(val);
        },

        initData() {
            // console.log(this.tableData );

            const echarts = require('echarts')
            let domID1 = document.getElementById('linexzs')
            this.myChartes1 = echarts.init(domID1, null, { renderer: 'svg' })
            let domID2 = document.getElementById('linezs')
            this.myChartes2 = echarts.init(domID2, null, { renderer: 'svg' })
            let domID3 = document.getElementById('linestatus')
            this.myChartes3 = echarts.init(domID3, null, { renderer: 'svg' })
            // this.myChartes = echarts.init(document.getElementById("linezs"));
            // this.myChartes2 = echarts.init(document.getElementById("linexzs"));
            // this.myChartes3 = echarts.init(document.getElementById("linestatus"));
            setTimeout(() => {
                ;(domID1.style.width = window.sessionStorage.getItem('left') / 3 + 'px'),
                    (domID1.style.height = window.sessionStorage.getItem('appheight') / 2 + 20 + 'px')
                ;(domID2.style.width = window.sessionStorage.getItem('middle') / 3 + 'px'),
                    (domID2.style.height = window.sessionStorage.getItem('appheight') / 2 + 20 + 'px')
                ;(domID3.style.width = window.sessionStorage.getItem('right') / 3 + 'px'),
                    (domID3.style.height = window.sessionStorage.getItem('appheight') / 2 + 20 + 'px')
            }, 0)
            var white = '#000'
            let areaName = []
            let addLineNum = []
            let lineNum = []
            let normalStateNum = []
            let suspendStateNum = []
            let offStreamStateNum = []
            let hotSpareStateNum = []
            let echartsData = JSON.parse(JSON.stringify(this.tableData))
            echartsData.splice(-1)
            echartsData.forEach(item => {
                // console.log(item,'===========');
                areaName.push(item.areaName)
                addLineNum.push(item.addLineNum)
                lineNum.push(item.lineNum)
                normalStateNum.push(item.normalStateNum)
                suspendStateNum.push(item.suspendStateNum)
                offStreamStateNum.push(item.offStreamStateNum)
                hotSpareStateNum.push(item.hotSpareStateNum)
            })
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            this.myChartes1.clear()
            this.myChartes2.clear()
            this.myChartes3.clear()
            var option1 = {
                //backgroundColor: '#151F2A',
                title: {
                    text: '监测点总数',
                    left: 'center',
                    top: '20px',
                    textStyle: {
                        fontSize: yan.EchartObject.titleNamefontSize1,
                        color: echartsColor.WordColor
                    }
                },
                grid: yan.EchartObject.gridc,
                dataZoom: yan.EchartObject.dataZoom,
                tooltip: {
                    //提示框组件
                    trigger: 'axis',
                    formatter: function (params) {
                        var tips = ''
                        for (var i = 0; i < params.length; i++) {
                            tips += params[i].name + '</br/>'
                            tips += '监测点数' + ':' + '&nbsp' + '&nbsp' + params[i].value + '</br/>'
                        }
                        return tips
                    },
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },
                xAxis: {
                    axisLabel: {
                        textStyle: {
                            fontFamily: yan.EchartObject.fontFamily,
                            color: echartsColor.WordColor,
                            fontSize: yan.EchartObject.xNamefontSize
                        },

                        formatter: function (value) {
                            return yan.formatter(value)
                        }
                    },
                    // axisTick: {
                    //   show: false,
                    // },
                    // splitLine: {
                    //   show: false,
                    // },
                    axisLine: {
                        show: true
                    },
                    data: areaName,
                    type: 'category'
                },
                yAxis: {
                    minInterval: 1,
                    axisLabel: {
                        color: echartsColor.WordColor,
                        fontSize: yan.EchartObject.xNamefontSize
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    name: '单位(个)',
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    }
                },
                series: [
                    {
                        data: lineNum,
                        type: 'bar',
                        // barMaxWidth: "auto",
                        barMaxWidth: yan.EchartObject.barMaxWidth,
                        itemStyle: {
                            normal: {
                                show: true,

                                color: function (params) {
                                    // console.log(params,'1111111111111111111111');
                                    if (params.data == 0) {
                                        return echartsColor.FigureColor[9]
                                    } else {
                                        return echartsColor.FigureColor[0]
                                    }
                                }
                            }
                        },
                        barMinHeight: 5,
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            }
                            // distance: 10,
                            // color: '#fff'
                        }
                    }
                ]
            }
            var option2 = {
                //backgroundColor: '#151F2A',
                title: {
                    text: '监测点新增数',
                    left: 'center',
                    top: '20px',
                    textStyle: {
                        fontSize: yan.EchartObject.titleNamefontSize1,
                        color: echartsColor.WordColor
                    }
                },
                grid: yan.EchartObject.gridc,
                dataZoom: yan.EchartObject.dataZoom,
                tooltip: {
                    //提示框组件
                    trigger: 'axis',
                    formatter: function (params) {
                        var tips = ''
                        for (var i = 0; i < params.length; i++) {
                            tips += params[i].name + '</br/>'
                            tips += '监测点新增数' + ':' + '&nbsp' + '&nbsp' + params[i].value + '</br/>'
                        }
                        return tips
                    },
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },
                xAxis: {
                    axisLabel: {
                        textStyle: {
                            fontFamily: yan.EchartObject.fontFamily,
                            color: echartsColor.WordColor,
                            fontSize: yan.EchartObject.xNamefontSize
                        },

                        formatter: function (value) {
                            return yan.formatter(value)
                        }
                        // padding: [0, 10, 0, 10],
                    },
                    // axisTick: {
                    //   show: false,
                    // },
                    // splitLine: {
                    //   show: false,
                    // },
                    axisLine: {
                        show: true
                    },
                    data: areaName,
                    type: 'category'
                },
                yAxis: {
                    minInterval: 1,
                    axisLabel: {
                        color: echartsColor.WordColor,
                        fontSize: yan.EchartObject.xNamefontSize
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },

                    name: '单位(个)',
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    }
                },
                series: [
                    {
                        data: addLineNum,
                        type: 'bar',
                        barMaxWidth: yan.EchartObject.barMaxWidth,
                        itemStyle: {
                            normal: {
                                show: true,
                                color: function (params) {
                                    // console.log(params,'1111111111111111111111');
                                    if (params.data == 0) {
                                        return echartsColor.FigureColor[9]
                                    } else {
                                        return echartsColor.FigureColor[0]
                                    }
                                }
                            }
                        },
                        barMinHeight: 5,
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            }
                            // distance: 10,
                            // color: '#fff'
                        }
                    }
                ]
            }
            var option3 = {
                //backgroundColor: '#151F2A',
                title: {
                    text: '终端状态',
                    left: 'center',
                    top: '20px',
                    textStyle: {
                        fontSize: yan.EchartObject.titleNamefontSize1,
                        color: echartsColor.WordColor
                    }
                },
                grid: yan.EchartObject.gridc,
                dataZoom: yan.EchartObject.dataZoom,
                legend: {
                    top: '50px',
                    left: '80px',
                    data: [
                        { name: '投运(通讯正常)', itemStyle: { color: '#0099CC' } },
                        { name: '投运(通讯中断)', itemStyle: { color: '#FF3333' } },
                        { name: '停运', itemStyle: { color: '#cc0000' } },
                        { name: '热备用', itemStyle: { color: '#996600' } }
                    ],

                    textStyle: {
                        color: echartsColor.WordColor,
                        rich: {
                            a: {
                                verticalAlign: 'middle'
                            }
                        },

                        padding: [2, 0, 0, 0] //[上、右、下、左]
                    }
                },
                tooltip: {
                    //提示框组件
                    trigger: 'axis',
                    formatter: function (params) {
                        var tips = ''
                        tips += params[0].name + '</br/>'
                        for (var i = 0; i < params.length; i++) {
                            tips += params[i].seriesName + ':' + '&nbsp' + '&nbsp' + params[i].value + '</br/>'
                        }
                        return tips
                    },
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },
                xAxis: {
                    axisLabel: {
                        textStyle: {
                            fontFamily: yan.EchartObject.fontFamily,
                            color: echartsColor.WordColor,
                            fontSize: yan.EchartObject.xNamefontSize
                        },

                        formatter: function (value) {
                            return yan.formatter(value)
                        }
                        // padding: [0, 10, 0, 10],
                    },
                    // axisTick: {
                    //   show: false,
                    // },
                    // splitLine: {
                    //   show: false,
                    // },
                    axisLine: {
                        show: true
                    },
                    data: areaName,
                    type: 'category'
                },
                yAxis: {
                    minInterval: 1,
                    axisLabel: {
                        color: echartsColor.WordColor,
                        fontSize: yan.EchartObject.xNamefontSize
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    name: '单位(个)',
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    }
                },
                series: [
                    {
                        name: '投运(通讯正常)',
                        data: normalStateNum,
                        type: 'bar',
                        stack: 'total',
                        barMinHeight: 5,
                        barMaxWidth: yan.EchartObject.barMaxWidth,
                        // barWidth: 15,
                        itemStyle: {
                            normal: {
                                show: true,

                                color: function (params) {
                                    // console.log(params,'1111111111111111111111');
                                    if (params.data == 0) {
                                        return echartsColor.FigureColor[9]
                                    } else {
                                        return '#0099CC'
                                    }
                                }
                            }
                        },
                        // itemStyle: {
                        //   color:"#0099CC"
                        // },
                        label: {
                            show: true,
                            // position: 'top',
                            // distance: 10,
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            }
                        }
                    },
                    {
                        name: '投运(通讯中断)',
                        data: suspendStateNum,
                        type: 'bar',
                        barMinHeight: 5,
                        barMaxWidth: yan.EchartObject.barMaxWidth,
                        // barWidth: 15,
                        stack: 'total',
                        itemStyle: {
                            normal: {
                                show: true,

                                color: function (params) {
                                    // console.log(params,'1111111111111111111111');
                                    if (params.data == 0) {
                                        return echartsColor.FigureColor[9]
                                    } else {
                                        return '#FF3333'
                                    }
                                }
                            }
                        },
                        // itemStyle: {
                        //   color:  "#FF3333"
                        // },
                        label: {
                            show: true,
                            // position: 'top',
                            // distance: 10,
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            }
                        }
                    },
                    {
                        name: '停运',
                        data: offStreamStateNum,
                        type: 'bar',
                        barMinHeight: 5,
                        barMaxWidth: yan.EchartObject.barMaxWidth,
                        // barWidth: 15,
                        itemStyle: {
                            normal: {
                                show: true,

                                color: function (params) {
                                    // console.log(params,'1111111111111111111111');
                                    if (params.data == 0) {
                                        return echartsColor.FigureColor[9]
                                    } else {
                                        return '#cc0000'
                                    }
                                }
                            }
                        },
                        // itemStyle: {
                        //   color:"#cc0000"
                        // },
                        label: {
                            show: true,
                            // position: 'top',
                            // distance: 10,
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            }
                        }
                    },
                    {
                        name: '热备用',
                        data: hotSpareStateNum,
                        type: 'bar',
                        barMinHeight: 5,
                        barMaxWidth: yan.EchartObject.barMaxWidth,
                        // barWidth: 15,
                        itemStyle: {
                            normal: {
                                show: true,

                                color: function (params) {
                                    // console.log(params,'1111111111111111111111');
                                    if (params.data == 0) {
                                        return echartsColor.FigureColor[9]
                                    } else {
                                        return '#996600'
                                    }
                                }
                            }
                        },
                        // itemStyle: {
                        //   color: "#996600"
                        // },
                        label: {
                            show: true,
                            // position: 'top',
                            // distance: 10,
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            }
                        }
                    }
                ]
            }
            this.myChartes1.setOption(option1)
            window.echartsArr.push(this.myChartes1)
            this.myChartes2.setOption(option2)
            window.echartsArr.push(this.myChartes2)
            this.myChartes3.setOption(option3)
            window.echartsArr.push(this.myChartes3)
            // myChart.resize();
            let _this = this
            _this.$erd.listenTo(_this.$refs.left, element => {
                _this.$nextTick(() => {
                    //  domID1.style.width = document.getElementById("drag-dept-right").offsetWidth - 30 + "px",
                    ;(domID1.style.width = document.getElementById('left').offsetWidth - 0 + 'px'),
                        _this.myChartes1.resize()
                })
            })
            _this.$erd.listenTo(_this.$refs.middle, element => {
                _this.$nextTick(() => {
                    //  domID1.style.width = document.getElementById("drag-dept-right").offsetWidth - 30 + "px",
                    ;(domID1.style.width = document.getElementById('middle').offsetWidth - 0 + 'px'),
                        _this.myChartes2.resize()
                })
            })
            _this.$erd.listenTo(_this.$refs.right, element => {
                _this.$nextTick(() => {
                    //  domID1.style.width = document.getElementById("drag-dept-right").offsetWidth - 30 + "px",
                    ;(domID1.style.width = document.getElementById('right').offsetWidth - 0 + 'px'),
                        _this.myChartes3.resize()
                })
            })
        },
        resizeEchartLeft() {
            var elementResizeDetectorMaker = require('element-resize-detector')
            var erd = elementResizeDetectorMaker()
            erd.listenTo(document.getElementById('left'), element => {
                let domeId = document.getElementById('left')
                let domeId2 = document.getElementById('linexzs')
                domeId2.style.width = domeId.offsetWidth - 0 + 'px'
                // this.$nextTick(() => {
                if (this.myChartes1 !== '') {
                    this.myChartes1.resize()
                }
                // });
            })
        },
        resizeEchartMiddle() {
            var elementResizeDetectorMaker = require('element-resize-detector')
            var erd = elementResizeDetectorMaker()
            erd.listenTo(document.getElementById('middle'), element => {
                let domeId = document.getElementById('middle')
                let domeId2 = document.getElementById('linezs')
                domeId2.style.width = domeId.offsetWidth - 0 + 'px'
                // this.$nextTick(() => {
                if (this.myChartes2 !== '') {
                    this.myChartes2.resize()
                }
                // });
            })
        },
        resizeEchartRight() {
            var elementResizeDetectorMaker = require('element-resize-detector')
            var erd = elementResizeDetectorMaker()
            erd.listenTo(document.getElementById('right'), element => {
                let domeId = document.getElementById('right')
                let domeId2 = document.getElementById('linestatus')
                domeId2.style.width = domeId.offsetWidth - 0 + 'px'
                // this.$nextTick(() => {
                if (this.myChartes3 !== '') {
                    this.myChartes3.resize()
                }
                // });
            })
        },
        //获取主列表
        getList() {
            this.isLoading = true
            this.item = this.$refs.interval.timeValue
            this.formData.searchBeginTime = this.item[0]
            this.formData.searchEndTime = this.item[1]
            getLineStatisticsDetail(this.formData).then(res => {
                this.isLoading = false
                this.tableData = res.data
                this.initData()
            })
        },
        //导出
        exportEvent() {
            this.$refs.Statistics.exportData({
                filename: 'export', // 文件名字
                sheetName: 'Sheet1',
                type: 'xlsx', //导出文件类型 xlsx 和 csv
                useStyle: true,
                data: this.tableData // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { //   return !(column.$columnIndex === 0 ) //   // 0是复选框 不导出 // }
            })
        },

        // 区域
        handleNodeClick(data) {
            // console.log(data);
            this.formData.deptIndex = data.id
        },
        handleStatusChange(e) {}
    }
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');
::v-deep .el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__label {
    height: 32px;
}
.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>
