<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div class="Top" ref="top">
                    <el-form :inline="true" class="demo-form-inline">
                        <Area @click="handleNodeClick"></Area>
                        <el-form-item>
                            <Timslot @time="time" ref="Timslot"></Timslot>
                        </el-form-item>
                        <!-- <el-form-item label="指标类型：">
                            <el-select v-model="value11" placeholder="请选择">
                                <el-option
                                    v-for="item in option11"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></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 :tab-position="tabPosition" v-loading="isLoading" 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 size="mini" border stripe
                                            :row-config="{ isCurrent: true, isHover: true }" :data="serialData1"
                                            :height="height" style="width: 100%" header-cell-class-name="table_header"
                                            @cell-click="cellClickEvent" :cell-style="cellStyle" ref="classification1">
                                            <vxe-table-column field="rowName" title="名称" width="150" align="center"
                                                fixed="left"></vxe-table-column>

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

                                            <template v-for="(item, index) in serialData1[0].columns">
                                                <vxe-table-colgroup :title="item.harmonicName" align="center"
                                                    show-overflow-tooltip>
                                                    <vxe-table-colgroup field="columns" title="日均" min-width="110"
                                                        align="center">
                                                        <template slot-scope="scope">
                                                            <span>
                                                                {{
                                                                    scope.row.columns[index]
                                                                        .overLimitMeasurementRatioAverage
                                                                }}
                                                            </span>
                                                        </template>
                                                    </vxe-table-colgroup>
                                                    <vxe-table-colgroup field="columns" title="累计" min-width="110"
                                                        align="center">
                                                        <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 size="mini" border stripe
                                            :row-config="{ isCurrent: true, isHover: true }" :data="serialData1"
                                            :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="150" align="center"
                                                fixed="left"></vxe-table-colgroup>

                                            <template v-for="(item, index) in serialData1[0].columns">
                                                <vxe-table-colgroup :title="item.harmonicName" :key="index"
                                                    show-overflow-tooltip min-width="220px" align="center"
                                                    field="averageOverDay">
                                                    <template slot-scope="scope">
                                                        <span>
                                                            {{ scope.row.columns[index].averageOverDay }}
                                                        </span>
                                                    </template>
                                                </vxe-table-colgroup>
                                            </template>
                                        </vxe-table>
                                    </el-col>
                                </el-tab-pane>
                                <el-col :span="24">
                                    <div class="box" v-loading="isLoading3">
                                        <div id="electr5" style="width: 100%"></div>
                                    </div>
                                </el-col>
                            </el-tabs>
                        </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 size="mini" stripe border
                                            :row-config="{ isCurrent: true, isHover: true }" :data="serialData2"
                                            :height="height" style="width: 100%" v-loading="isLoading"
                                            header-cell-class-name="table_header" @cell-click="cellClickEvent"
                                            :cell-style="cellStyle" ref="classification11">
                                            <vxe-table-colgroup field="rowName" title="名称" width="150" fixed="left"
                                                align="center"></vxe-table-colgroup>

                                            <template v-for="(item, index) in serialData2[0].columns">
                                                <vxe-table-colgroup :title="item.eventName" align="center" :key="index"
                                                    show-overflow-tooltip>
                                                    <vxe-table-colgroup field="columns" title="日均" min-width="110"
                                                        align="center">
                                                        <template slot-scope="scope">
                                                            <span>
                                                                {{ scope.row.columns[index].eventMeasurementAverage }}
                                                            </span>
                                                        </template>
                                                    </vxe-table-colgroup>
                                                    <vxe-table-colgroup field="columns" title="累计" min-width="110"
                                                        align="center">
                                                        <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 size="mini" border stripe
                                            :row-config="{ isCurrent: true, isHover: true }" :data="serialData2"
                                            :height="height" style="width: 100%" v-loading="isLoading"
                                            header-cell-class-name="table_header" @cell-click="cellClickEvent"
                                            :cell-style="cellStyle" ref="classification22">
                                            <vxe-table-colgroup field="rowName" title="名称" width="150" fixed="left"
                                                align="center"></vxe-table-colgroup>

                                            <template v-for="(item, index) in serialData2[0].columns">
                                                <vxe-table-colgroup align="center" :title="item.eventName" :key="index"
                                                    show-overflow-tooltip>
                                                    <vxe-table-colgroup field="columns" title="日均" min-width="110"
                                                        align="center">
                                                        <template slot-scope="scope">
                                                            <span>
                                                                {{
                                                                    scope.row.columns[index]
                                                                        .eventMeasurementRatioAverage
                                                                }}
                                                            </span>
                                                        </template>
                                                    </vxe-table-colgroup>
                                                    <vxe-table-colgroup field="columns" title="累计" min-width="110"
                                                        align="center">
                                                        <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 size="mini" border stripe
                                            :row-config="{ isCurrent: true, isHover: true }" :data="serialData2"
                                            :height="height" style="width: 100%" v-loading="isLoading"
                                            header-cell-class-name="table_header" @cell-click="cellClickEvent"
                                            :cell-style="cellStyle" ref="classification33">
                                            <vxe-table-colgroup field="rowName" title="名称" width="150" align="center"
                                                fixed="left"></vxe-table-colgroup>

                                            <template v-for="(item, index) in serialData2[0].columns">
                                                <vxe-table-colgroup align="center" :title="item.eventName" :key="index"
                                                    show-overflow-tooltip min-width="220" field="eventCount">
                                                    <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 size="mini" stripe border
                                            :row-config="{ isCurrent: true, isHover: true }" :data="serialData2"
                                            :height="height" style="width: 100%" v-loading="isLoading"
                                            header-cell-class-name="table_header" @cell-click="cellClickEvent"
                                            :cell-style="cellStyle" ref="classification44">
                                            <vxe-table-colgroup field="rowName" title="名称" width="150" align="center"
                                                fixed="left"></vxe-table-colgroup>
                                            <template v-for="(item, index) in serialData2[0].columns">
                                                <vxe-table-colgroup :title="item.eventName" :key="index" align="center"
                                                    min-width="220" field="eventFreq" show-overflow-tooltip>
                                                    <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">
                                <div class="box" ref="getHeight" v-loading="isLoading3">
                                    <div id="electr6" style="width: 100%"></div>
                                </div>
                            </el-col>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Area from '@/views/components/Area/Area.vue'

import { dicData } from '@/assets/commjs/dictypeData'
import {
    getAllRStatHarmonicOrgM,
    getAllRStatHarmonicOrgIcon,
    getAllRStatEventOrg,
    getAllRStatEventOrgIcon
} from '@/api/Statistical-analysis/indicatorClassification'

import Timslot from './Timeslot.vue'
export default {
    components: { Area, Timslot },
    data() {
        return {
            id: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
            type: '',
            tabLabel: '超标监测点数(个)',
            tab: '',
            echarts2data: { data: [] },
            option11: '',
            option22: '',
            value11: '',
            value22: '',
            kai: true,
            start: '',
            end: '',
            active_active: 'first-first',
            zoom: undefined, //图表焦点校验
            vh: '',
            height: null,
            device: '',
            getHeight: '',
            tabPosition: 'top',
            active: 'first',
            isLoading: false,
            isLoading2: false,
            isLoading3: false,
            isLoading4: false,
            serialData2: [{ columns: [] }],
            serialData1: [{ columns: [] }],
            max: 0
        }
    },
    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 - 160
            let domID5 = document.getElementById('electr5')
            let domID6 = document.getElementById('electr6')

            setTimeout(() => {
                ; (domID5.style.width = window.sessionStorage.getItem('appwidth') - 40 + 'px'),
                    (domID5.style.height = window.sessionStorage.getItem('appheight') / 2 - 50 + 'px')
                    ; (domID6.style.width = window.sessionStorage.getItem('appwidth') - 40 + 'px'),
                        (domID6.style.height = window.sessionStorage.getItem('appheight') / 2 - 50 + 'px')
            }, 0)
        },
        dc() {
            // console.log(this.serialData1, "this.serialData1");
            if (this.active_active == 'first-first') {
                this.$refs.classification1.exportData({
                    filename: 'export1', // 文件名字
                    sheetName: 'Sheet1',
                    type: 'xlsx', //导出文件类型 xlsx 和 csv
                    useStyle: true,
                    isFooter: true,
                    data: this.serialData1 // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { //   return !(column.$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.serialData1 // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { //   return !(column.$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.serialData1 // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { //   return !(column.$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.serialData2 // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { //   return !(column.$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.serialData2 // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { //   return !(column.$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.serialData2 // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { //   return !(column.$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.serialData2 // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { //   return !(column.$columnIndex === 0 ) //   // 0是复选框 不导出 // }
                })
            }
        },
        handleClick111(tab) {
            this.tab = tab

            if (tab.paneName == 'second') {
                this.active_active = 'second-first'
                this.tabLabel = '超标监测点数(个)'
                this.account()
            } else {
                this.active_active = 'first-first'
                this.tabLabel = '超标监测点数(个)'
                this.account1()
            }
        },
        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.account1()
            }
        },
        handleNodeClick(data) {
            this.id = data.id
        },

        //方法调用获取稳态指标超标统计数据接口
        steady() {
            this.isLoading = true
            if (this.tab.paneName == 'second') {
                getAllRStatEventOrgIcon({
                    type: this.$refs.Timslot.intervald,
                    startTime: this.start,
                    endTime: this.end,
                    id: this.id,
                    stasisID: this.value11
                }).then(res => {
                    if (res.code == 'A0001') {
                        ; (this.echarts2data = { data: [] }), this.getCensus()
                    } else {
                        // res.data.forEach(i=>{
                        //   i.
                        // })
                        this.echarts2data = res
                        this.getCensus()
                        this.isLoading = false
                    }
                })

                getAllRStatEventOrg({
                    type: this.$refs.Timslot.intervald,
                    startTime: this.start,
                    endTime: this.end,
                    id: this.id
                }).then(res => {
                    this.isLoading = false
                    this.serialData2 = res.data
                })
            } else {
                getAllRStatHarmonicOrgIcon({
                    type: this.$refs.Timslot.intervald,
                    startTime: this.start,
                    endTime: this.end,
                    id: this.id,
                    stasisID: this.value11
                }).then(res => {
                    if (res.code == 'A0001') {
                        ; (this.echarts2data = { data: [] }), this.getCensus()
                    } else {
                        this.echarts2data = res
                        this.getCensus()
                        this.isLoading = false
                    }
                })

                getAllRStatHarmonicOrgM({
                    type: this.$refs.Timslot.intervald,
                    startTime: this.start,
                    endTime: this.end,
                    id: this.id
                }).then(res => {
                    this.isLoading = false
                    if (res.code == 'A0001') {
                        this.serialData1 = [{ columns: [] }]
                    } else {
                        this.serialData1 = res.data
                        this.isLoading = false
                    }
                })
            }
        },
        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.max = 0
            this.isLoading3 = true

            let echarts = require('echarts')
            let domID5 = document.getElementById('electr5')
            let domID6 = document.getElementById('electr6')

            setTimeout(() => {
                ; (domID5.style.width = window.sessionStorage.getItem('appwidth') - 40 + 'px'),
                    (domID5.style.height = window.sessionStorage.getItem('appheight') / 2 - 50 + 'px')

                this.isLoading3 = false
            }, 0)
            setTimeout(() => {
                ; (domID6.style.width = window.sessionStorage.getItem('appwidth') - 40 + 'px'),
                    (domID6.style.height = window.sessionStorage.getItem('appheight') / 2 - 50 + 'px')

                this.isLoading3 = false
            }, 0)
            let echartsColor = JSON.parse(window.localStorage.echartsColor)

            let myChart5 = echarts.init(domID5)
            let myChart6 = echarts.init(domID6)
            let list = []
            let list1 = []
            let list2 = []
            if (this.tab.paneName == 'second') {
                if (this.tabLabel == '超标监测点数(个)') {
                    this.echarts2data.data.forEach(i1 => {
                        if (i1.eventMeasurementAverage > this.max) {
                            this.max = i1.eventMeasurementAverage
                        }
                        if (i1.eventMeasurementAverage > this.max) {
                            this.max = i1.eventMeasurementAccrued
                        }
                    })

                    this.echarts2data.data.forEach(i => {
                        if (i.eventMeasurementAverage == 0) {
                            i.eventMeasurementAverage = this.max * 0.03
                        }
                        if (i.eventMeasurementAccrued == 0) {
                            i.eventMeasurementAccrued = this.max * 0.03
                        }
                    })
                    this.echarts2data.data.forEach(i => {
                        list.push(i.eventName)
                        list1.push(i.eventMeasurementAverage)
                        list2.push(i.eventMeasurementAccrued)
                    })
                } else if (this.tabLabel == '超标监测点数占比(%)') {
                    this.echarts2data.data.forEach(i1 => {
                        if (i1.eventMeasurementRatioAverage > this.max) {
                            this.max = i1.eventMeasurementRatioAverage
                        }
                        if (i1.eventMeasurementRatioAccrued > this.max) {
                            this.max = i1.eventMeasurementRatioAccrued
                        }
                    })

                    this.echarts2data.data.forEach(i => {
                        if (i.eventMeasurementRatioAverage == 0) {
                            i.eventMeasurementRatioAverage = this.max * 0.03
                        }
                        if (i.eventMeasurementRatioAccrued == 0) {
                            i.eventMeasurementRatioAccrued = this.max * 0.03
                        }
                    })

                    this.echarts2data.data.forEach(i => {
                        list.push(i.eventName)
                        list1.push(i.eventMeasurementRatioAverage)
                        list2.push(i.eventMeasurementRatioAccrued)
                    })
                } else if (this.tabLabel == '暂态发生次数') {
                    this.echarts2data.data.forEach(i1 => {
                        if (i1.eventCount > this.max) {
                            this.max = i1.eventCount
                        }
                        if (i1.eventCount > this.max) {
                            this.max = i1.eventCount
                        }
                    })

                    this.echarts2data.data.forEach(i => {
                        if (i.eventCount == 0) {
                            i.eventCount = this.max * 0.03
                        }
                        if (i.eventCount == 0) {
                            i.eventCount = this.max * 0.03
                        }
                    })

                    this.echarts2data.data.forEach(i => {
                        list.push(i.eventName)
                        list1.push(i.eventCount)
                        list2.push(i.eventCount)
                    })
                } else if (this.tabLabel == '暂态发生频次') {
                    this.echarts2data.data.forEach(i1 => {
                        if (i1.eventFreq > this.max) {
                            this.max = i1.eventFreq
                        }
                        if (i1.eventFreq > this.max) {
                            this.max = i1.eventFreq
                        }
                    })

                    this.echarts2data.data.forEach(i => {
                        if (i.eventFreq == 0) {
                            i.eventFreq = this.max * 0.03
                        }
                        if (i.eventFreq == 0) {
                            i.eventFreq = this.max * 0.03
                        }
                    })

                    this.echarts2data.data.forEach(i => {
                        list.push(i.eventName)
                        list1.push(i.eventFreq)
                        list2.push(i.eventFreq)
                    })
                }
            } else {
                if (this.tabLabel == '超标监测点数(个)') {
                    this.echarts2data.data.forEach(i1 => {
                        if (i1.overLimitMeasurementAverage > this.max) {
                            this.max = i1.overLimitMeasurementAverage
                        }
                        if (i1.overLimitMeasurementAccrued > this.max) {
                            this.max = i1.overLimitMeasurementAccrued
                        }
                    })

                    this.echarts2data.data.forEach(i => {
                        if (i.overLimitMeasurementAverage == 0) {
                            i.overLimitMeasurementAverage = this.max * 0.03
                        }
                        if (i.overLimitMeasurementAccrued == 0) {
                            i.overLimitMeasurementAccrued = this.max * 0.03
                        }
                    })

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

                    this.echarts2data.data.forEach(i => {
                        if (i.overLimitMeasurementRatioAccrued == 0) {
                            i.overLimitMeasurementRatioAccrued = this.max * 0.03
                        }
                        if (i.overLimitMeasurementRatioAverage == 0) {
                            i.overLimitMeasurementRatioAverage = this.max * 0.03
                        }
                    })

                    this.echarts2data.data.forEach(i => {
                        list.push(i.rowName)
                        list2.push(i.overLimitMeasurementRatioAccrued)
                        list1.push(i.overLimitMeasurementRatioAverage)
                    })
                } else if (this.tabLabel == '平均超标天数') {
                    this.echarts2data.data.forEach(i1 => {
                        if (i1.averageOverDay > this.max) {
                            this.max = i1.averageOverDay
                        }
                        if (i1.averageOverDay > this.max) {
                            this.max = i1.averageOverDay
                        }
                    })

                    this.echarts2data.data.forEach(i => {
                        if (i.averageOverDay == 0) {
                            i.averageOverDay = this.max * 0.03
                        }
                        if (i.averageOverDay == 0) {
                            i.averageOverDay = this.max * 0.03
                        }
                    })

                    this.echarts2data.data.forEach(i => {
                        list.push(i.rowName)
                        list1.push(i.averageOverDay)
                        list2.push(i.averageOverDay)
                    })
                }
            }

            let _this = this
            let option1 = {
                title: {
                    text: this.option11.map(item => (item.id == this.value11 ? item.name : '')).join(''),
                    left: 'center',
                    top: 20
                },
                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,
                    formatter: function (params) {
                        var tips = ''
                        tips += params[0].name + '</br/>'
                        for (var i = 0; i < params.length; i++) {
                            if (params[i].value == _this.max * 0.03) {
                                tips += params[i].seriesName + ':0<br/>'
                            } else {
                                tips += params[i].seriesName + ':' + params[i].value + '<br/>'
                            }
                        }
                        return tips
                    }
                },
                legend: {
                    data: [
                        { name: '日均', itemStyle: { color: echartsColor.FigureColor[0] } },
                        { name: '累计', itemStyle: { color: echartsColor.FigureColor[1] } }
                    ],
                    right: 40,
                    top: 20,
                    itemWidth: 16,
                    itemHeight: 16,
                    itemGap: 28,
                    textStyle: {
                        color: echartsColor.WordColor,
                        rich: {
                            a: {
                                verticalAlign: 'middle'
                            }
                        },

                        padding: [2, 0, 0, 0] //[上、右、下、左]
                    }
                },
                grid: {
                    top: '20%',
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: list,
                        axisTick: { show: false },
                        axisLine: {
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            formatter: function (value) {
                                value = value.replace('网公司', '')
                                var ret = "";//拼接加\n返回的类目项
                                var maxLength = 8;//每项显示文字个数
                                var valLength = value.length;//X轴类目项的文字个数
                                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                                if (rowN > 1)//如果类目项的文字大于5,
                                {
                                    for (var i = 0; i < rowN; i++) {
                                        var temp = "";//每次截取的字符串
                                        var start = i * maxLength;//开始截取的位置
                                        var end = start + maxLength;//结束截取的位置
                                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                        temp = value.substring(start, end) + "\n";
                                        ret += temp; //凭借最终的字符串
                                    }
                                    return ret;
                                } else {
                                    return value;
                                }
                            }
                        },
                    }
                ],
                yAxis: [
                    {
                        name:
                            this.tabLabel == '平均超标天数'
                                ? '单位：天/点'
                                : this.tabLabel == '超标监测点数占比(%)'
                                    ? '单位：%'
                                    : '单位：个',

                        minInterval: 1,
                        nameTextStyle: {
                            color: echartsColor.WordColor
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor
                        },
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: [echartsColor.thread],
                                type: 'dashed',
                                opacity: 0.5
                            }
                        }
                    }
                ],
                // dataZoom: [
                //     {
                //         show: true,
                //         height: 12,
                //         xAxisIndex: [0],
                //         bottom: '6%',
                //         start: 0,
                //         end: 100,
                //         handleIcon:
                //             'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                //         handleSize: '110%',
                //         handleStyle: {
                //             color: '#d3dee5'
                //         },
                //         textStyle: {
                //             color: '#fff'
                //         },
                //         borderColor: '#90979c'
                //     },
                //     {
                //         type: 'inside',
                //         show: true,
                //         height: 15,
                //         start: 0,
                //         end: 100
                //     }
                // ],
                series: [
                    {
                        name: '日均',
                        type: 'bar',
                        data: list1,
                        barMinHeight: 5,
                        barMaxWidth: '30px',
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    if (params.value == _this.max * 0.03) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: '#ccc'
                                                }
                                            ],
                                            false
                                        )
                                    } else {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: echartsColor.FigureColor[0]
                                                }
                                            ],
                                            false
                                        )
                                    }
                                },

                                label: {
                                    formatter: function (params) {
                                        if (params.value == _this.max * 0.03) {
                                            return ''
                                        } else {
                                            return params.value
                                        }
                                    },
                                    show: true,
                                    textStyle: {
                                        label: { show: true, position: 'top' },
                                        color: echartsColor.WordColor
                                    },
                                    fontSize: 12
                                }
                            }
                        }
                    },
                    {
                        name: '累计',
                        type: 'bar',
                        data: list2,
                        barMinHeight: 5,
                        barMaxWidth: '30px',
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    if (params.value == _this.max * 0.03) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: '#ccc'
                                                }
                                            ],
                                            false
                                        )
                                    } else {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: echartsColor.FigureColor[1]
                                                }
                                            ],
                                            false
                                        )
                                    }
                                },

                                label: {
                                    formatter: function (params) {
                                        if (params.value == _this.max * 0.03) {
                                            return ''
                                        } else {
                                            return params.value
                                        }
                                    },
                                    show: true,
                                    textStyle: {
                                        label: { show: true, position: 'top' },
                                        color: echartsColor.WordColor
                                    },
                                    fontSize: 12
                                }
                            }
                        }
                    }
                ]
            }
            if (this.tabLabel == '平均超标天数' || this.tabLabel == '暂态发生频次' || this.tabLabel == '暂态发生次数') {
                option1 = {
                    title: {
                        text: this.option11.map(item => (item.id == this.value11 ? item.name : '')).join(''),
                        left: 'center',
                        top: 20
                    },
                    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,
                        formatter: function (params) {
                            var tips = ''
                            tips += params[0].name + '</br/>'
                            for (var i = 0; i < params.length; i++) {
                                if (params[i].value == _this.max * 0.03) {
                                    tips += params[i].seriesName + ':0<br/>'
                                } else {
                                    tips += params[i].seriesName + ':' + params[i].value + '<br/>'
                                }
                            }
                            return tips
                        }
                    },
                    legend: {
                        data: [
                            {
                                name:
                                    this.tabLabel == '平均超标天数'
                                        ? '平均超标天数'
                                        : this.tabLabel == '暂态发生频次'
                                            ? '暂态发生频次'
                                            : this.tabLabel == '暂态发生次数'
                                                ? '暂态发生次数'
                                                : '',
                                itemStyle: { color: echartsColor.FigureColor[0] }
                            }
                        ],
                        right: 40,
                        top: 20,
                        textStyle: {
                            color: echartsColor.WordColor,
                            rich: {
                                a: {
                                    verticalAlign: 'middle'
                                }
                            },

                            padding: [2, 0, 0, 0] //[上、右、下、左]
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '3%',
                        right: '4%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: list,
                            axisTick: { show: false },
                            axisLine: {
                                lineStyle: {
                                    color: echartsColor.thread
                                }
                            },
                            axisLabel: {
                                interval: 0,
                                formatter: function (value) {
                                    value = value.replace('网公司', '')
                                    var ret = "";//拼接加\n返回的类目项
                                    var maxLength = 8;//每项显示文字个数
                                    var valLength = value.length;//X轴类目项的文字个数
                                    var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                                    if (rowN > 1)//如果类目项的文字大于5,
                                    {
                                        for (var i = 0; i < rowN; i++) {
                                            var temp = "";//每次截取的字符串
                                            var start = i * maxLength;//开始截取的位置
                                            var end = start + maxLength;//结束截取的位置
                                            //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                            temp = value.substring(start, end) + "\n";
                                            ret += temp; //凭借最终的字符串
                                        }
                                        return ret;
                                    } else {
                                        return value;
                                    }
                                }
                            },
                        }
                    ],
                    yAxis: [
                        {
                            name: this.tabLabel == '平均超标天数' ? '单位：天/点' : '单位：次',

                            minInterval: 1,
                            nameTextStyle: {
                                color: echartsColor.WordColor
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: echartsColor.thread
                                }
                            },
                            axisLabel: {
                                color: echartsColor.WordColor
                            },
                            splitLine: {
                                lineStyle: {
                                    // 使用深浅的间隔色
                                    color: [echartsColor.thread],
                                    type: 'dashed',
                                    opacity: 0.5
                                }
                            }
                        }
                    ],
                    // dataZoom: [
                    //     {
                    //         show: true,
                    //         height: 12,
                    //         xAxisIndex: [0],
                    //         bottom: '6%',
                    //         start: 0,
                    //         end: 100,
                    //         handleIcon:
                    //             'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                    //         handleSize: '110%',
                    //         handleStyle: {
                    //             color: '#d3dee5'
                    //         },
                    //         textStyle: {
                    //             color: '#fff'
                    //         },
                    //         borderColor: '#90979c'
                    //     },
                    //     {
                    //         type: 'inside',
                    //         show: true,
                    //         height: 15,
                    //         start: 0,
                    //         end: 100
                    //     }
                    // ],
                    series: [
                        {
                            name:
                                this.tabLabel == '平均超标天数'
                                    ? '平均超标天数'
                                    : this.tabLabel == '暂态发生频次'
                                        ? '暂态发生频次'
                                        : this.tabLabel == '暂态发生次数'
                                            ? '暂态发生次数'
                                            : '',
                            type: 'bar',
                            data: list1,
                            barMinHeight: 5,
                            barMaxWidth: '30px',
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        if (params.value == _this.max * 0.03) {
                                            return new echarts.graphic.LinearGradient(
                                                0,
                                                1,
                                                0,
                                                0,
                                                [
                                                    {
                                                        offset: 1,
                                                        color: '#ccc'
                                                    }
                                                ],
                                                false
                                            )
                                        } else {
                                            return new echarts.graphic.LinearGradient(
                                                0,
                                                1,
                                                0,
                                                0,
                                                [
                                                    {
                                                        offset: 1,
                                                        color: echartsColor.FigureColor[0]
                                                    }
                                                ],
                                                false
                                            )
                                        }
                                    },

                                    label: {
                                        formatter: function (params) {
                                            if (params.value == _this.max * 0.03) {
                                                return ''
                                            } else {
                                                return params.value
                                            }
                                        },
                                        show: true,
                                        textStyle: {
                                            label: { show: true, position: 'top' },
                                            color: echartsColor.WordColor
                                        },
                                        fontSize: 12
                                    }
                                }
                            }
                        }
                    ]
                }
            }
            option1 && myChart5.setOption(option1, true)
            window.echartsArr.push(myChart5)
            option1 && myChart6.setOption(option1, true)
            window.echartsArr.push(myChart6)

            setTimeout(function () {
                myChart5.resize()
            }, 0)
            setTimeout(function () {
                myChart6.resize()
            }, 0)
        },

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

            this.option11 = dicData(code11, [], 1)

            this.option11.shift()
            this.value11 = this.option11[0].id

            this.kai = false
            // this.isLoading = true;
            // this.isLoading2 = true;
            //监测终端统计单位表格数据

            getAllRStatHarmonicOrgM({
                id: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                type: this.$refs.Timslot.intervald,
                startTime: this.start,
                endTime: this.end
            }).then(res => {
                this.serialData1 = res.data
                getAllRStatHarmonicOrgIcon({
                    type: this.$refs.Timslot.intervald,
                    startTime: this.start,
                    endTime: this.end,
                    stasisID: this.value11,
                    id: JSON.parse(window.sessionStorage.getItem('Info')).deptId
                }).then(res => {
                    this.echarts2data = res
                    this.getCensus()
                })
            })
        },
        account() {
            var code11 = 'Event_Statis' //干扰源类型

            this.option11 = dicData(code11, [], 1)

            this.value11 = this.option11[1].id

            this.kai = false
            // this.isLoading = true;
            // this.isLoading2 = true;
            //监测终端统计单位表格数据

            getAllRStatEventOrg({
                id: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                type: this.$refs.Timslot.intervald,
                startTime: this.start,
                endTime: this.end
            }).then(res => {
                this.serialData2 = res.data
                getAllRStatEventOrgIcon({
                    type: this.$refs.Timslot.intervald,
                    startTime: this.start,
                    endTime: this.end,
                    stasisID: this.value11,
                    id: JSON.parse(window.sessionStorage.getItem('Info')).deptId
                }).then(res => {
                    this.echarts2data = res
                    this.getCensus()
                })
            })
        },
        // 点击行
        cellClickEvent({ row, column }) {
            this.option11.map(item => (item.name == row.rowName ? (this.value11 = item.id) : ''))
            this.steady()
        }
    }
}
</script>

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

::v-deep .el-table .cell {
    text-align: center;
}

::v-deep .el-tabs--border-card>.el-tabs__content {
    padding: 10px;
}

.prop {
    font-weight: 600;
}

::v-deep .el-table__body-wrapper.is-scrolling-none {
    height: 227px !important;
}

::v-deep .el-table th.el-table__cell.is-leaf {
    border-right: 1px solid #ebeef5;
}

::v-deep .el-table td.el-table__cell {
    border-right: 1px solid #ebeef5;
}

// ::v-deep .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
//   border-right:1px solid #999;
//   border-bottom:1px solid #999;
// }
// ::v-deep .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf ,.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
//   border-right:1px solid #999;
//   border-bottom:1px solid #999;
// }
// ::v-deep .el-table td.el-table__cell {
//   border-right:1px solid #999;
//   border-bottom:1px solid #999;
// }
// ::v-deep .el-table .el-table__header tr, .el-table .el-table__header th{
//   border-right:1px solid #999;
//   border-bottom:1px solid #999;
// }
// ::v-deep  .el-table th.el-table__cell.is-leaf {
//   border-right:1px solid #999;
//   border-bottom:1px solid #999;
// }</style>
