<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div class="Top" ref="top">
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item>
                            <Timslot @time="time" ref="Timslot"></Timslot>
                        </el-form-item>
                        <el-form-item label="监测点标签:" >
                            <el-select v-model="value11"  @change="changefn" placeholder="请选择">
                                <el-option
                                    v-for="item in option11"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>

                        

                        <!-- <el-form-item label="指标类型">
                            <el-select v-model="value22" placeholder="请选择">
                                <el-option
                                    v-for="item in option22"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item> -->
                        <el-form-item>
                            <el-button type="primary" class="ml10" icon="el-icon-search" @click="steady">
                                查询
                            </el-button>
                            <el-button type="primary" icon="el-icon-download" @click="dc">导出</el-button>
                        </el-form-item>
                    </el-form>
                    <el-tabs  v-loading="loading" :tab-position="tabPosition" v-model="active" @tab-click="handleClick111">
                        <el-tab-pane label="稳态指标" name="first">
                            <el-tabs :tab-position="tabPosition" v-model="active_active" @tab-click="handleClick11">
                                <el-tab-pane label="超标监测点数(个)" name="first-first">
                                    <el-col :span="24">
                                        <vxe-table
                                            stripe
                                            size="mini"
                                            :row-config="{ isCurrent: true, isHover: true }"
                                            border
                                            :data="serialData11"
                                            :height="height"
                                            style="width: 100%"
                                            v-loading="isLoading"
                                            header-cell-class-name="table_header"
                                               @cell-click="cellClickEvent"
                                            :cell-style="cellStyle"
                                            ref="classification1"
                                        >
                                            <vxe-table-colgroup
                                                field="rowName"
                                                title="名称"
                                                width="200"
                                                align="center"
                                            ></vxe-table-colgroup>

                                            <template v-for="(item, index) in serialData11[0].columns">
                                                <vxe-table-colgroup
                                                    :title="item.harmonicName"
                                                    :key="index"
                                                    show-overflow-tooltip
                                                    align="center"
                                                >
                                                    <vxe-table-colgroup
                                                        field="columns"
                                                        title="日均"
                                                        align="center"
                                                        min-width="90"
                                                    >
                                                        <template slot-scope="scope">
                                                            <span>
                                                                {{
                                                                    scope.row.columns[index].overLimitMeasurementAverage
                                                                }}
                                                            </span>
                                                        </template>
                                                    </vxe-table-colgroup>
                                                    <vxe-table-colgroup
                                                        field="columns"
                                                        title="累计"
                                                        align="center"
                                                        min-width="90"
                                                    >
                                                        <template slot-scope="scope">
                                                            <span>
                                                                {{
                                                                    scope.row.columns[index].overLimitMeasurementAccrued
                                                                }}
                                                            </span>
                                                        </template>
                                                    </vxe-table-colgroup>
                                                </vxe-table-colgroup>
                                            </template>
                                        </vxe-table>
                                    </el-col>
                                </el-tab-pane>
                                <el-tab-pane label="超标监测点数占比(%)" name="first-second">
                                    <el-col :span="24">
                                        <vxe-table
                                            stripe
                                            size="mini"
                                            :row-config="{ isCurrent: true, isHover: true }"
                                            border
                                            :data="serialData11"
                                            :height="height"
                                            style="width: 100%"
                                            v-loading="isLoading"
                                            header-cell-class-name="table_header"
                                               @cell-click="cellClickEvent"
                                            :cell-style="cellStyle"
                                            ref="classification2"
                                        >
                                            <vxe-table-colgroup
                                                field="rowName"
                                                title="名称"
                                                width="200"
                                                align="center"
                                            ></vxe-table-colgroup>

                                            <template v-for="(item, index) in serialData11[0].columns">
                                                <vxe-table-colgroup
                                                    :title="item.harmonicName"
                                                    :key="index"
                                                    show-overflow-tooltip
                                                    align="center"
                                                >
                                                    <vxe-table-colgroup
                                                        field="columns"
                                                        title="日均"
                                                        align="center"
                                                        min-width="90"
                                                    >
                                                        <template slot-scope="scope">
                                                            <span>
                                                                {{
                                                                    scope.row.columns[index]
                                                                        .overLimitMeasurementRatioAverage
                                                                }}
                                                            </span>
                                                        </template>
                                                    </vxe-table-colgroup>
                                                    <vxe-table-colgroup
                                                        field="columns"
                                                        title="累计"
                                                        align="center"
                                                        min-width="90"
                                                    >
                                                        <template slot-scope="scope">
                                                            <span>
                                                                {{
                                                                    scope.row.columns[index]
                                                                        .overLimitMeasurementRatioAccrued
                                                                }}
                                                            </span>
                                                        </template>
                                                    </vxe-table-colgroup>
                                                </vxe-table-colgroup>
                                            </template>
                                        </vxe-table>
                                    </el-col>
                                </el-tab-pane>
                                <el-tab-pane label="平均超标天数" name="first-third">
                                    <el-col :span="24">
                                        <vxe-table
                                            stripe
                                            size="mini"
                                            :row-config="{ isCurrent: true, isHover: true }"
                                            border
                                            :data="serialData11"
                                            :height="height"
                                            style="width: 100%"
                                            v-loading="isLoading"
                                            header-cell-class-name="table_header"
                                               @cell-click="cellClickEvent"
                                            :cell-style="cellStyle"
                                            ref="classification3"
                                        >
                                            <vxe-table-colgroup
                                                field="rowName"
                                                title="名称"
                                                width="200"
                                                align="center"
                                            ></vxe-table-colgroup>

                                            <template v-for="(item, index) in serialData11[0].columns">
                                                <vxe-table-colgroup
                                                    :title="item.harmonicName"
                                                    :key="index"
                                                    align="center"
                                                    show-overflow-tooltip
                                                    min-width="150"
                                                >
                                                    <template slot-scope="scope">
                                                        <span>
                                                            {{ scope.row.columns[index].averageOverDay }}
                                                        </span>
                                                    </template>
                                                </vxe-table-colgroup>
                                            </template>
                                        </vxe-table>
                                    </el-col>
                                </el-tab-pane>
                            </el-tabs>

                            <el-col :span="24" id="box2" class="box">
                                <!-- <div class="box" id="box2" > -->
                                <div v-loading="isLoading3" id="electr2" style="width: 100%"></div>
                                <!-- </div> -->
                            </el-col>
                        </el-tab-pane>
                        <el-tab-pane label="暂态指标" name="second">
                            <el-tabs :tab-position="tabPosition" v-model="active_active" @tab-click="handleClick222">
                                <el-tab-pane label="超标监测点数(个)" name="second-first">
                                    <el-col :span="24">
                                        <vxe-table
                                            stripe
                                            size="mini"
                                            :row-config="{ isCurrent: true, isHover: true }"
                                            border
                                            :data="serialData22"
                                            :height="height"
                                            style="width: 100%"
                                            v-loading="isLoading"
                                            header-cell-class-name="table_header"
                                               @cell-click="cellClickEvent"
                                            :cell-style="cellStyle"
                                            ref="classification11"
                                        >
                                            <vxe-table-column
                                                field="rowName"
                                                title="名称"
                                                width="200"
                                                align="center"
                                            ></vxe-table-column>

                                            <template v-for="(item, index) in serialData22[0].columns">
                                                <vxe-table-colgroup
                                                    :title="item.eventName"
                                                    :key="index"
                                                    show-overflow-tooltip
                                                    align="center"
                                                >
                                                    <vxe-table-colgroup
                                                        field="overLimitMeasurementAverage"
                                                        title="日均"
                                                        align="center"
                                                        min-width="90"
                                                    >
                                                        <template slot-scope="scope">
                                                            <span>
                                                                {{ scope.row.columns[index].eventMeasurementAverage }}
                                                            </span>
                                                        </template>
                                                    </vxe-table-colgroup>
                                                    <vxe-table-colgroup
                                                        field="overLimitMeasurementAccrued"
                                                        title="累计"
                                                        align="center"
                                                        min-width="90"
                                                    >
                                                        <template slot-scope="scope">
                                                            <span>
                                                                {{ scope.row.columns[index].eventMeasurementAccrued }}
                                                            </span>
                                                        </template>
                                                    </vxe-table-colgroup>
                                                </vxe-table-colgroup>
                                            </template>
                                        </vxe-table>
                                    </el-col>
                                </el-tab-pane>
                                <el-tab-pane label="超标监测点数占比(%)" name="second-second">
                                    <el-col :span="24">
                                        <vxe-table
                                            stripe
                                            size="mini"
                                            :row-config="{ isCurrent: true, isHover: true }"
                                            border
                                            ref="classification22"
                                            :data="serialData22"
                                            :height="height"
                                            style="width: 100%"
                                            v-loading="isLoading"
                                            header-cell-class-name="table_header"
                                               @cell-click="cellClickEvent"
                                            :cell-style="cellStyle"
                                        >
                                            <vxe-table-colgroup
                                                field="rowName"
                                                title="名称"
                                                width="200"
                                                align="center"
                                            ></vxe-table-colgroup>

                                            <template v-for="(item, index) in serialData22[0].columns">
                                                <vxe-table-colgroup
                                                    :title="item.eventName"
                                                    :key="index"
                                                    show-overflow-tooltip
                                                    align="center"
                                                >
                                                    <vxe-table-colgroup
                                                        field="overLimitMeasurementRatioAverage"
                                                        title="日均"
                                                        align="center"
                                                        min-width="90"
                                                    >
                                                        <template slot-scope="scope">
                                                            <span>
                                                                {{
                                                                    scope.row.columns[index]
                                                                        .eventMeasurementRatioAverage
                                                                }}
                                                            </span>
                                                        </template>
                                                    </vxe-table-colgroup>
                                                    <vxe-table-colgroup
                                                        field="overLimitMeasurementRatioAccrued"
                                                        title="累计"
                                                        align="center"
                                                        min-width="90"
                                                    >
                                                        <template slot-scope="scope">
                                                            <span>
                                                                {{
                                                                    scope.row.columns[index]
                                                                        .eventMeasurementRatioAccrued
                                                                }}
                                                            </span>
                                                        </template>
                                                    </vxe-table-colgroup>
                                                </vxe-table-colgroup>
                                            </template>
                                        </vxe-table>
                                    </el-col>
                                </el-tab-pane>
                                <el-tab-pane label="暂态发生次数" name="second-third">
                                    <el-col :span="24">
                                        <vxe-table
                                            stripe
                                            size="mini"
                                            :row-config="{ isCurrent: true, isHover: true }"
                                            border
                                            ref="classification33"
                                            :data="serialData22"
                                            :height="height"
                                            style="width: 100%"
                                            v-loading="isLoading"
                                            header-cell-class-name="table_header"
                                               @cell-click="cellClickEvent"
                                            :cell-style="cellStyle"
                                        >
                                            <vxe-table-column
                                                field="rowName"
                                                title="名称"
                                                width="200"
                                                align="center"
                                            ></vxe-table-column>

                                            <template v-for="(item, index) in serialData22[0].columns">
                                                <vxe-table-colgroup
                                                    :title="item.eventName"
                                                    field="averageOverDay"
                                                    :key="index"
                                                    show-overflow-tooltip
                                                    align="center"
                                                    min-width="150"
                                                >
                                                    <template slot-scope="scope">
                                                        <span>
                                                            {{ scope.row.columns[index].eventCount }}
                                                        </span>
                                                    </template>
                                                </vxe-table-colgroup>
                                            </template>
                                        </vxe-table>
                                    </el-col>
                                </el-tab-pane>
                                <el-tab-pane label="暂态发生频次" name="second-fourth">
                                    <el-col :span="24">
                                        <vxe-table
                                            stripe
                                            size="mini"
                                            :row-config="{ isCurrent: true, isHover: true }"
                                            border
                                            ref="classification44"
                                            :data="serialData22"
                                            :height="height"
                                            style="width: 100%"
                                            v-loading="isLoading"
                                            header-cell-class-name="table_header"
                                               @cell-click="cellClickEvent"
                                            :cell-style="cellStyle"
                                        >
                                            <vxe-table-column
                                                field="rowName"
                                                title="名称"
                                                width="200"
                                                align="center"
                                            ></vxe-table-column>

                                            <template v-for="(item, index) in serialData22[0].columns">
                                                <vxe-table-colgroup
                                                    :title="item.eventName"
                                                    field="averageOverDay"
                                                    :key="index"
                                                    show-overflow-tooltip
                                                    align="center"
                                                    min-width="150"
                                                >
                                                    <template slot-scope="scope">
                                                        <span>
                                                            {{ scope.row.columns[index].eventFreq }}
                                                        </span>
                                                    </template>
                                                </vxe-table-colgroup>
                                            </template>
                                        </vxe-table>
                                    </el-col>
                                </el-tab-pane>
                            </el-tabs>

                            <el-col :span="24" id="box4">
                                <!-- <div
                  class="box"
                  ref="getHeight"
                  id="box4"
                  v-loading="isLoading3"
                > -->
                                <div id="electr4" style="width: 100%"></div>
                                <!-- </div> -->
                            </el-col>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { dicData } from '@/assets/commjs/dictypeData'
import {
    getPwAllRStatHarmonic,
    getPwRStatHarmonicIconDate,
    getPwAllRStatEvent,
    getPwRStatHarmonicIconDatee
} from '@/api/Distributionnetwork-analysis/IndicatorClassification/IndicatorClassification.js'
import Area from '@/views/components/Area/Area.vue'
import Timslot from './Timeslot.vue'
export default {
    components: { Area, Timslot },
    data() {
        return {
            tab: '',
            tabLabel: '超标监测点数(个)',
            echarts1data: { data: [] },
            echarts2data: { data: [] },
            kai: true,
            value11: '',
            value22: '',
            option11: [],
            option22: [],
            type: '1',
            active_active: 'first-first',
            zoom: undefined, //图表焦点校验
            start: '',
            end: '',
            title:'',
            height: null,
            getHeight: '',
            tabPosition: 'top',
            active: 'first',
            loading:false,
            isLoading: false,
            isLoading2: false,
            isLoading3: false,
            isLoading4: false,
            serialData11: [{ columns: [] }],
            serialData22: [{ columns: [] }],
            code22: 'Steady_Statis',
            rowName:''
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        //echarts图表调用
        this.getCensus()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.height = window.sessionStorage.getItem('appheight') / 2 - 100
            this.zoom = 1 / document.body.style.zoom
            let domID2 = document.getElementById('electr2')

            let domID4 = document.getElementById('electr4')

            let box2 = document.getElementById('box2')

            let box4 = document.getElementById('box4')

            setTimeout(() => {
                ;(domID2.style.width = window.sessionStorage.getItem('appwidth') + 'px'),
                    (domID2.style.height = window.sessionStorage.getItem('appheight') / 2 - 130 + 'px')
                box2.style.height = window.sessionStorage.getItem('appheight') / 2 - 130 + 'px'
            }, 0)

            setTimeout(() => {
                ;(domID4.style.width = window.sessionStorage.getItem('appwidth')),
                    (domID4.style.height = window.sessionStorage.getItem('appheight') / 2 - 130 + 'px')
                box4.style.height = window.sessionStorage.getItem('appheight') / 2 - 130 + 'px'
            }, 0)
        },
        dc() {
            //  this. active_active
            if (this.active_active == 'first-first') {
                this.$refs.classification1.exportData({
                    filename: 'export1', // 文件名字
                    sheetName: 'Sheet1',
                    type: 'xlsx', //导出文件类型 xlsx 和 csv
                    useStyle: true,
                    isFooter: true,
                    data: this.serialData11 // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(colgroup , $columnIndex) { //   return !(colgroup .$columnIndex === 0 ) //   // 0是复选框 不导出 // }
                })
            }
            if (this.active_active == 'first-second') {
                this.$refs.classification2.exportData({
                    filename: 'export2', // 文件名字
                    sheetName: 'Sheet1',
                    type: 'xlsx', //导出文件类型 xlsx 和 csv
                    useStyle: true,
                    isFooter: true,
                    data: this.serialData11 // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(colgroup , $columnIndex) { //   return !(colgroup .$columnIndex === 0 ) //   // 0是复选框 不导出 // }
                })
            }
            if (this.active_active == 'first-third') {
                this.$refs.classification3.exportData({
                    filename: 'export3', // 文件名字
                    sheetName: 'Sheet1',
                    type: 'xlsx', //导出文件类型 xlsx 和 csv
                    useStyle: true,
                    isFooter: true,
                    data: this.serialData11 // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(colgroup , $columnIndex) { //   return !(colgroup .$columnIndex === 0 ) //   // 0是复选框 不导出 // }
                })
            }
            if (this.active_active == 'second-first') {
                this.$refs.classification11.exportData({
                    filename: 'export4', // 文件名字
                    sheetName: 'Sheet1',
                    type: 'xlsx', //导出文件类型 xlsx 和 csv
                    useStyle: true,
                    isFooter: true,
                    data: this.serialData22 // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(colgroup , $columnIndex) { //   return !(colgroup .$columnIndex === 0 ) //   // 0是复选框 不导出 // }
                })
            }
            if (this.active_active == 'second-second') {
                this.$refs.classification22.exportData({
                    filename: 'export5', // 文件名字
                    sheetName: 'Sheet1',
                    type: 'xlsx', //导出文件类型 xlsx 和 csv
                    useStyle: true,
                    isFooter: true,
                    data: this.serialData22 // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(colgroup , $columnIndex) { //   return !(colgroup .$columnIndex === 0 ) //   // 0是复选框 不导出 // }
                })
            }
            if (this.active_active == 'second-third') {
                this.$refs.classification33.exportData({
                    filename: 'export6', // 文件名字
                    sheetName: 'Sheet1',
                    type: 'xlsx', //导出文件类型 xlsx 和 csv
                    useStyle: true,
                    isFooter: true,
                    data: this.serialData22 // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(colgroup , $columnIndex) { //   return !(colgroup .$columnIndex === 0 ) //   // 0是复选框 不导出 // }
                })
            }
            if (this.active_active == 'second-fourth') {
                this.$refs.classification44.exportData({
                    filename: 'export7', // 文件名字
                    sheetName: 'Sheet1',
                    type: 'xlsx', //导出文件类型 xlsx 和 csv
                    useStyle: true,
                    isFooter: true,
                    data: this.serialData22 // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(colgroup , $columnIndex) { //   return !(colgroup .$columnIndex === 0 ) //   // 0是复选框 不导出 // }
                })
            }
        },
        handleClick111(tab) {
            this.tab = tab
            if (tab.paneName == 'second') {
                this.active_active = 'second-first'
                this.tabLabel = '超标监测点数(个)'
                this.code22 = 'Event_Statis'
                this.account1()
            } else {
                this.active_active = 'first-first'
                this.tabLabel = '超标监测点数(个)'
                this.code22 = 'Steady_Statis'
                this.account()
            }
        },
        handleClick11(tab, click) {
            this.tabLabel = tab.label
            this.getCensus()
        },
        handleClick222(tab, click) {
            this.tabLabel = tab.label
            this.getCensus()
        },
        time(val) {
            ;(this.start = val[0]), (this.end = val[1])
            this.type = val[2]
            if (this.kai) {
                this.account()
            }
        },
        handleNodeClick(data) {},

        //方法调用获取稳态指标超标统计数据接口
        steady() {
            this.loading=true
            if (this.tab.paneName == 'second') {
                getPwRStatHarmonicIconDatee({
                    id: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                    type: this.$refs.Timslot.intervald,
                    startTime: this.start,
                    endTime: this.end,
                    monitorID: this.value11,
                    stasisID: this.value22
                }).then(res => {
                    this.echarts2data = res
                    this.getCensus()
                })

                getPwAllRStatEvent({
                    id: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                    type: this.$refs.Timslot.intervald,
                    startTime: this.start,
                    endTime: this.end
                }).then(res => {
                    this.isLoading = false
                    this.serialData22 = res.data
                })
            } else {
                getPwRStatHarmonicIconDate({
                    id: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                    type: this.$refs.Timslot.intervald,
                    startTime: this.start,
                    endTime: this.end,
                    monitorID: this.value11,
                    stasisID: this.value22
                }).then(res => {
                    this.echarts2data = res
                    this.getCensus()
                })

                getPwAllRStatHarmonic({
                    id: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                    type: this.$refs.Timslot.intervald,
                    startTime: this.start,
                    endTime: this.end
                }).then(res => {
                    this.isLoading = false
                    this.serialData11 = res.data
                })
            }
          setTimeout(() => {
            this.loading=false
          }, 100);
        },
        cellStyle(row, column, rowIndex, columnIndex) {
            if (row.columnIndex == 2 || row.columnIndex == 3 || row.columnIndex == 4 || row.columnIndex == 5) {
                return 'font-weight: 100;'
            }
        },
        //监测终端统计echarts图表
        async getCensus() {
            this.isLoading3 = true

            let echarts = require('echarts')

            let domID2 = document.getElementById('electr2')

            let domID4 = document.getElementById('electr4')

            let box2 = document.getElementById('box2')

            let box4 = document.getElementById('box4')
            this.isLoading3 = false

            setTimeout(() => {
                ;(domID2.style.width = window.sessionStorage.getItem('appwidth') + 'px'),
                    (domID2.style.height = window.sessionStorage.getItem('appheight') / 2 - 130 + 'px')
                box2.style.height = window.sessionStorage.getItem('appheight') / 2 - 130 + 'px'

                this.isLoading3 = false
            }, 0)

            setTimeout(() => {
                ;(domID4.style.width = window.sessionStorage.getItem('appwidth')),
                    (domID4.style.height = window.sessionStorage.getItem('appheight') / 2 - 130 + 'px')
                box4.style.height = window.sessionStorage.getItem('appheight') / 2 - 130 + 'px'

                this.isLoading3 = false
            }, 0)

            let myChart2 = echarts.init(domID2)

            let myChart4 = echarts.init(domID4)

            let list = []
            let list1 = []
            let list2 = []
            let list3 = []
            let list4 = []
            if (this.tab.paneName == 'second') {
                if (this.tabLabel == '超标监测点数(个)') {
                    this.echarts2data.data.forEach(i => {
                        list3.push(i.eventMeasurement)
                        list4.push(i.date)
                    })

                    this.echarts1data.data.forEach(i => {
                        list.push(i.eventName)
                        list1.push(i.eventMeasurementAverage)
                        list2.push(i.eventMeasurementAccrued)
                    })
                } else if (this.tabLabel == '超标监测点数占比(%)') {
                    this.echarts2data.data.forEach(i => {
                        list3.push(i.eventMeasurementRatio)
                        list4.push(i.date)
                    })

                    this.echarts1data.data.forEach(i => {
                        list.push(i.eventName)
                        list1.push(i.eventMeasurementRatioAverage)
                        list2.push(i.eventMeasurementRatioAccrued)
                    })
                } else if (this.tabLabel == '暂态发生次数') {
                    this.echarts2data.data.forEach(i => {
                        list3.push(i.eventCount)
                        list4.push(i.date)
                    })
                    this.echarts1data.data.forEach(i => {
                        list.push(i.eventName)
                        list1.push(i.eventCount)
                        list2.push(i.eventCount)
                    })
                } else if (this.tabLabel == '暂态发生频次') {
                    this.echarts2data.data.forEach(i => {
                        list3.push(i.eventFreq)
                        list4.push(i.date)
                    })
                    this.echarts1data.data.forEach(i => {
                        list.push(i.eventName)
                        list1.push(i.eventFreq)
                        list2.push(i.eventFreq)
                    })
                }
            } else {
                if (this.tabLabel == '超标监测点数(个)') {
                    this.echarts2data.data.forEach(i => {
                        list3.push(i.num)
                        list4.push(i.date)
                    })

                    this.echarts1data.data.forEach(i => {
                        list.push(i.rowName)
                        list1.push(i.overLimitMeasurementAverage)
                        list2.push(i.overLimitMeasurementAccrued)
                    })
                } else if (this.tabLabel == '超标监测点数占比(%)') {
                    this.echarts2data.data.forEach(i => {
                        list3.push(i.overLimitMeasurementRatioAverage)
                        list4.push(i.date)
                    })

                    this.echarts1data.data.forEach(i => {
                        list.push(i.rowName)
                        list1.push(i.overLimitMeasurementRatioAverage)
                        list2.push(i.overLimitMeasurementRatioAccrued)
                    })
                } else if (this.tabLabel == '平均超标天数') {
                    this.echarts2data.data.forEach(i => {
                        list3.push(i.averageOverDay)
                        list4.push(i.date)
                    })
                    this.echarts1data.data.forEach(i => {
                        list.push(i.rowName)
                        list1.push(i.averageOverDay)
                        list2.push(i.averageOverDay)
                    })
                }
            }
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let option1 = {
                title: {
                    text: this.title+`(${this.rowName})`,
                    top: 20,
                    left: 'center'
                },
                tooltip: {
                    //提示框组件
                    trigger: 'axis',

                    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
                },
                legend: {
                    data: ['日计'],
                    right: '2%',
                        top: 20,
                    itemWidth: 16,
                    itemHeight: 10,
                    itemGap: 28,
             
                    textStyle: {
                        color: echartsColor.WordColor,
                        rich: {
                            a: {
                                verticalAlign: 'middle'
                            }
                        },

                        padding: [2, 0, 0, 0] //[上、右、下、左]
                    }
                },
                grid: {
                    left: '2%',
                    right: '3.5%',
                    bottom: '2%',
                    containLabel: true

                },
                toolbox: {
                    // feature: {
                    //   //restore: { show: true },
                    //   saveAsImage: { show: true },
                    // },
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: list4,
                    axisLine: {
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor,
                            rotate: 30,   interval: 0,
                    }
                },
                yAxis: {
                    name: '(单位/个)',
                    type: 'value',
                    nameTextStyle: {
                        color: echartsColor.WordColor,
                        padding: [0, 0, 10, 0]
                    },
                    minInterval: 1,
                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: [echartsColor.thread],
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                },
                series: [
                    {
                        name: '日计',
                        type: 'line',
                        stack: 'Total',
                        data: list3,
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            },

                            fontSize: 12
                        },
                        itemStyle: {
                            normal: { show: true, color: echartsColor.FigureColor[0] }
                        }
                    }
                ]
            }

            option1 && myChart2.setOption(option1, true)
            window.echartsArr.push(myChart2)

            option1 && myChart4.setOption(option1, true)
            window.echartsArr.push(myChart4)

            setTimeout(function () {
                myChart2.resize()
            }, 0)

            setTimeout(function () {
                myChart4.resize()
            }, 0)
        },

        //方法调用台账统计数据接口
        account1() {
            this.kai = false
            var code11 = 'Line_Sort' //干扰源类型

            this.option11 = dicData(code11, [], 1)
            this.option22 = dicData(this.code22, [], 1)
            this.option11.shift()
            this.option22.shift()
            this.value11 = this.option11[0].id
            this.title = this.option11[0].name
            this.value22 = this.option22[0].id
            this.rowName=this.option22[0].name
            this.isLoading = true
            this.isLoading2 = true
            this.isLoading = false
            //监测终端统计单位表格数据
            getPwAllRStatEvent({
                id: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                type: this.$refs.Timslot.intervald,
                startTime: this.start,
                endTime: this.end
            }).then(res => {
                this.isLoading = false
                this.serialData22 = res.data
            })

            getPwRStatHarmonicIconDatee({
                id: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                type: this.$refs.Timslot.intervald,
                startTime: this.start,
                endTime: this.end,
                monitorID: this.value11,
                stasisID: this.value22
            }).then(res => {
                this.echarts2data = res
                this.getCensus()
            })
        },
        account() {
            this.kai = false
            var code11 = 'Line_Sort' //干扰源类型

            this.option11 = dicData(code11, [], 1)
            this.option22 = dicData(this.code22, [], 1)
            this.option11.shift()
            this.option22.shift()
            this.value11 = this.option11[0].id
            this.title = this.option11[0].name
            this.value22 = this.option22[0].id
            this.rowName=this.option22[0].name
            this.isLoading = true
            this.isLoading2 = true
            this.isLoading = false
            //监测终端统计单位表格数据
            getPwAllRStatHarmonic({
                id: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                type: this.$refs.Timslot.intervald,
                startTime: this.start,
                endTime: this.end
            }).then(res => {
                this.isLoading = false
                this.serialData11 = res.data
            })

            getPwRStatHarmonicIconDate({
                id: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                type: this.$refs.Timslot.intervald,
                startTime: this.start,
                endTime: this.end,
                monitorID: this.value11,
                stasisID: this.value22
            }).then(res => {
                this.echarts2data = res
                this.getCensus()
            })
        },
        changefn(val) {
            this.option11.forEach(item => {
                if (val == item.id) {
                    this.title = item.name
                }
            })
        },
        // 点击行
        cellClickEvent({ row, column }) {
            this.rowName=row.rowName
            this.option22.map(item => (item.name == row.rowName ? (this.value22 = item.id) : ''))
            this.steady()
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');
</style>
