<template>
    <div class="pd10">
        <el-form :inline="true" class="demo-form-inline" style="overflow-y: hidden">
            <el-form-item>
                <Area @click="handleNodeClick" ref="area" class="box"></Area>
            </el-form-item>
            <el-form-item label="指标类型:">
                <el-select
                    v-model="formData.statisticalType"
                    @change="gbName"
                    placeholder="请选择指标类型"
                    style="width: 100%"
                >
                    <el-option
                        v-for="item in classificationData"
                        :key="item.id"
                        :label="item.name"
                        :value="{
                            label: item.name,
                            value: item.id,
                            name: item.name,
                            id: item.id,
                            code: item.code,
                            sort: item.sort
                        }"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="small" @click="tensort">排名前10监测点</el-button>
            </el-form-item>
            <el-form-item>
                <timepicker
                    :id="id"
                    @querfromdata="querfromdata"
                    :interval="interval"
                    :name="name"
                    :path="path"
                ></timepicker>
            </el-form-item>
        </el-form>
        <el-row :gutter="20">
            <el-col :span="24">
                <el-row :gutter="10">
                    <el-col :span="12">
                        <span class="wr" :style="`color:${WordColor}`">污染预警:</span>
                        <el-tag size="mini" style="color: #fff; background: #f30">5级</el-tag>
                        <span class="mr10" :style="`color:${WordColor}`">:重度污染</span>
                        <el-tag size="mini" style="color: #fff; background: #f90">4级</el-tag>
                        <span class="mr10" :style="`color:${WordColor}`">:中度污染</span>
                        <el-tag size="mini" style="color: #fff; background: #fc0">3级</el-tag>
                        <span class="mr10" :style="`color:${WordColor}`">:轻度污染</span>
                        <el-tag size="mini" style="color: #fff; background: #39f">2级</el-tag>
                        <span class="mr10" :style="`color:${WordColor}`">:轻微污染</span>
                        <el-tag size="mini" style="color: #fff; background: #393">1级</el-tag>
                        <span class="mr10" :style="`color:${WordColor}`">:无污染</span>
                        <el-tag size="mini" style="color: #fff; background: #999">无</el-tag>
                        <span class="mr10" :style="`color:${WordColor}`">:无数据</span>
                        <div :style="`height:${vh};overflow-y:auto;overflow-x:hidden`">
                            <el-row :gutter="5">
                                <el-col v-for="(item, index) in listcard" :key="index" :span="8" class="qwe">
                                    <el-card
                                        class="box-card3"
                                        :style="
                                            'height:25vh;color:#fff;opacity:0.8;background-image:linear-gradient(' +
                                            settings.themeColor +
                                            ',#ccc);'
                                        "
                                    >
                                        <div
                                            slot="header"
                                            class="clearfix"
                                            :style="
                                                'height:30px;background:' +
                                                settings.themeColor +
                                                ';padding:2%;cursor: pointer;'
                                            "
                                            @click="queryStation(item)"
                                        >
                                            <span class="asd" style="">{{ item.name }}</span>
                                            <el-tag
                                                v-if="item.data == 3.14159"
                                                style="color: #fff; background: #999"
                                                size="mini"
                                            >
                                                无
                                            </el-tag>
                                            <el-tag
                                                v-if="0 <= item.data && item.data < 1 && item.data !== 3.14159"
                                                size="mini"
                                                style="color: #fff; background: #393"
                                            >
                                                1级
                                            </el-tag>
                                            <el-tag
                                                v-if="1 <= item.data && item.data < 1.2 && item.data !== 3.14159"
                                                style="color: #fff; background: #39f"
                                                size="mini"
                                            >
                                                2级
                                            </el-tag>
                                            <el-tag
                                                v-if="1.2 <= item.data && item.data < 1.6 && item.data !== 3.14159"
                                                size="mini"
                                                style="color: #fff; background: #fc0"
                                            >
                                                3级
                                            </el-tag>
                                            <el-tag
                                                v-if="1.6 <= item.data && item.data < 2 && item.data !== 3.14159"
                                                size="mini"
                                                style="color: #fff; background: #f90"
                                            >
                                                4级
                                            </el-tag>
                                            <el-tag
                                                v-if="2 <= item.data && item.data && item.data !== 3.14159"
                                                size="mini"
                                                style="color: #fff; background: #f30"
                                            >
                                                5级
                                            </el-tag>
                                        </div>
                                        <div class="cvb">
                                            <el-col
                                                :span="12"
                                                v-for="(item1, index1) in item.children"
                                                :key="index1"
                                                class="fgh"
                                            >
                                                <div class="jkl" @click="queryline(item1.id, item1.pid, item1.name)">
                                                    <el-tag
                                                        v-if="item1.data == 3.14159"
                                                        size="mini"
                                                        style="color: #fff; background: #999"
                                                    >
                                                        无
                                                    </el-tag>
                                                    <el-tag
                                                        v-if="
                                                            0 <= item1.data && item1.data < 1 && item1.data !== 3.14159
                                                        "
                                                        size="mini"
                                                        style="color: #fff; background: #393"
                                                    >
                                                        1级
                                                    </el-tag>
                                                    <el-tag
                                                        v-if="
                                                            1 <= item1.data &&
                                                            item1.data < 1.2 &&
                                                            item1.data !== 3.14159
                                                        "
                                                        size="mini"
                                                        style="color: #fff; background: #39f"
                                                    >
                                                        2级
                                                    </el-tag>
                                                    <el-tag
                                                        v-if="
                                                            1.2 <= item1.data &&
                                                            item1.data < 1.6 &&
                                                            item1.data !== 3.14159
                                                        "
                                                        size="mini"
                                                        style="color: #fff; background: #fc0"
                                                    >
                                                        3级
                                                    </el-tag>
                                                    <el-tag
                                                        v-if="
                                                            1.6 <= item1.data &&
                                                            item1.data < 2 &&
                                                            item1.data !== 3.14159
                                                        "
                                                        size="mini"
                                                        style="color: #fff; background: #f90"
                                                    >
                                                        4级
                                                    </el-tag>
                                                    <el-tag
                                                        v-if="2 <= item1.data && item1.data && item1.data !== 3.14159"
                                                        size="mini"
                                                        style="color: #fff; background: #f30"
                                                    >
                                                        5级
                                                    </el-tag>
                                                    <span class="xdf">
                                                        <el-tooltip
                                                            class="item"
                                                            effect="dark"
                                                            :content="item1.name"
                                                            placement="top"
                                                        >
                                                            <span size="mini" type="text" class="ll">
                                                                {{ item1.name.substr(0, 8) }}
                                                            </span>
                                                        </el-tooltip>
                                                    </span>
                                                </div>
                                            </el-col>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <el-row>
                            <el-col :span="24" :style="`height:${vhh};`">
                                <qypowerpollutions
                                    :xdata="xdata3"
                                    :ydata="ydata3"
                                    :title="title"
                                    ref="child"
                                ></qypowerpollutions>
                            </el-col>
                            <el-col :span="24" class="mt10">
                                <el-table
                                    stripe
                                    :data="tableData"
                                    border
                                    v-loading="konzhi"
                                    highlight-current-row
                                    header-cell-class-name="table_header"
                                    element-loading-text="拼命加载中"
                                    :height="tvh"
                                >
                                    <el-table-column align="center" prop="name" label="名称"></el-table-column>
                                    <el-table-column align="center" prop="data" label="污染值">
                                        <template slot-scope="scope">
                                            <span v-if="scope.row.data == 3.14159" type="primary" size="small">
                                                暂无数据
                                            </span>
                                            <span v-if="scope.row.data !== 3.14159" type="primary" size="small">
                                                {{ scope.row.data }}
                                            </span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="center" prop="data" label="评估">
                                        <template slot-scope="scope">
                                            <span
                                                v-if="
                                                    0 <= scope.row.data &&
                                                    scope.row.data < 1 &&
                                                    scope.row.data !== 3.14159
                                                "
                                                type="primary"
                                                size="small"
                                            >
                                                无污染
                                            </span>
                                            <span
                                                v-if="
                                                    1 <= scope.row.data &&
                                                    scope.row.data < 1.2 &&
                                                    scope.row.data !== 3.14159
                                                "
                                                type="success"
                                                size="small"
                                            >
                                                轻微污染
                                            </span>
                                            <span
                                                v-if="
                                                    1.2 <= scope.row.data &&
                                                    scope.row.data < 1.6 &&
                                                    scope.row.data !== 3.14159
                                                "
                                                type="primary"
                                                size="small"
                                            >
                                                轻度污染
                                            </span>
                                            <span
                                                v-if="
                                                    1.6 <= scope.row.data &&
                                                    scope.row.data < 2 &&
                                                    scope.row.data !== 3.14159
                                                "
                                                type="success"
                                                size="small"
                                            >
                                                中度污染
                                            </span>
                                            <span
                                                v-if="
                                                    2 <= scope.row.data && scope.row.data && scope.row.data !== 3.14159
                                                "
                                                type="primary"
                                                size="small"
                                            >
                                                重度污染
                                            </span>
                                            <span v-if="scope.row.data == 3.14159" type="primary" size="small">
                                                暂无评估
                                            </span>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>

                <!--变电站-->
                <el-dialog
                    :close-on-click-modal="false"
                    :title="stationNmae + '详情'"
                    width="70%"
                    :visible.sync="dialogTableVisible"
                >
                    <el-table
                        stripe
                        :data="stationData"
                        border
                        v-loading="konzhi"
                        element-loading-text="拼命加载中"
                        header-cell-class-name="table_header"
                        style="width: 100%; height: 60vh"
                    >
                        <el-table-column align="center" property="name" label="名称"></el-table-column>
                        <el-table-column
                            align="center"
                            property="voltageLevel"
                            v-if="flag"
                            :label="zdname"
                            :formatter="formFilter"
                        ></el-table-column>
                        <el-table-column align="center" property="data" :label="changeName">
                            <template slot-scope="scope">
                                <span v-if="scope.row.data == -1" type="primary" size="small">暂无数据</span>
                                <span v-if="scope.row.data !== -1" type="primary" size="small">
                                    {{ scope.row.data }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" property="data" label="评估">
                            <template slot-scope="scope">
                                <span v-if="scope.row.data == -1" type="primary" size="small">暂无评估</span>
                                <span v-if="0 <= scope.row.data && scope.row.data < 1" type="primary" size="small">
                                    无污染
                                </span>
                                <span v-if="1 <= scope.row.data && scope.row.data < 1.2" type="success" size="small">
                                    轻微污染
                                </span>
                                <span v-if="1.2 <= scope.row.data && scope.row.data < 1.6" type="primary" size="small">
                                    轻度污染
                                </span>
                                <span v-if="1.6 <= scope.row.data && scope.row.data < 2" type="success" size="small">
                                    中度污染
                                </span>
                                <span v-if="2 <= scope.row.data && scope.row.data" type="primary" size="small">
                                    重度污染
                                </span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-dialog>
                <!--监测点-->
                <el-dialog
                    :close-on-click-modal="false"
                    :title="lineName + '所属监测点详情'"
                    width="70%"
                    :visible.sync="dialogTableVisible1"
                >
                    <el-table
                        stripe
                        :data="lineData"
                        v-loading="konzhi"
                        element-loading-text="拼命加载中"
                        header-cell-class-name="table_header"
                        border
                        style="width: 100%:height:60vh"
                    >
                        <el-table-column align="center" property="name" label="名称"></el-table-column>
                        <el-table-column align="center" property="powerCompany" label="供电公司"></el-table-column>
                        <el-table-column
                            align="center"
                            property="substation"
                            label="变电站"
                            :show-overflow-tooltip="true"
                        ></el-table-column>
                        <el-table-column align="center" property="busBar" label="母线"></el-table-column>
                        <el-table-column align="center" property="data" label="谐波污染值">
                            <template slot-scope="scope">
                                <span v-if="scope.row.data == 3.14159" type="primary" size="small">暂无数据</span>
                                <span v-if="scope.row.data !== 3.14159" type="primary" size="small">
                                    {{ scope.row.data }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" property="data" label="评估">
                            <template slot-scope="scope">
                                <span v-if="scope.row.data == 3.14159" type="primary" size="small">暂无评估</span>
                                <span
                                    v-if="0 <= scope.row.data && scope.row.data < 1 && scope.row.data !== 3.14159"
                                    type="primary"
                                    size="small"
                                >
                                    无污染
                                </span>
                                <span
                                    v-if="1 <= scope.row.data && scope.row.data < 1.2 && scope.row.data !== 3.14159"
                                    type="success"
                                    size="small"
                                >
                                    轻微污染
                                </span>
                                <span
                                    v-if="1.2 <= scope.row.data && scope.row.data < 1.6 && scope.row.data !== 3.14159"
                                    type="primary"
                                    size="small"
                                >
                                    轻度污染
                                </span>
                                <span
                                    v-if="1.6 <= scope.row.data && scope.row.data < 2 && scope.row.data !== 3.14159"
                                    type="success"
                                    size="small"
                                >
                                    中度污染
                                </span>
                                <span
                                    v-if="2 <= scope.row.data && scope.row.data && scope.row.data !== 3.14159"
                                    type="primary"
                                    size="small"
                                >
                                    重度污染
                                </span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-dialog>
                <!--排名前十监测点-->
                <el-dialog
                    :close-on-click-modal="false"
                    title="排名前10的监测点"
                    width="70%"
                    :visible.sync="dialogTableVisible2"
                >
                    <div id="tenlineechart" style="width: 100%; height: 600px"></div>
                </el-dialog>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import api from '@/api/pollution/pollution'
import Area from '@/views/components/Area/Area.vue'
import ColorObject from '@/assets/commjs/color'
// ColorObject.ColorObject.noContaminated,
// ColorObject.ColorObject.qwContaminated,
// ColorObject.ColorObject.qdContaminated,
// ColorObject.ColorObject.centerContaminated,
// ColorObject.ColorObject.zdContaminated,

import { mapActions } from 'vuex'
import store from '@/store'
import defaultSettings from '@/settings'
import { dicData } from '../../../assets/commjs/dictypeData'
import timepicker from '../../cgy-components/TimePicker/index4'
import qypowerpollutions from '../../components/echarts/qypowerpollutions'
import { color } from 'echarts'
export default {
    components: {
        timepicker,
        Area,
        qypowerpollutions
    },
    computed: {
        settings() {
            return this.$store.state.settings
        }
        // ...mapActions({
        //   changeSetting: 'settings/changeSetting'
        // }),
    },
    watch: {},
    data() {
        return {
            WordColor: JSON.parse(window.localStorage.echartsColor).WordColor,
            vh: null,
            vhh: null,
            vhhh: null,
            color: window.localStorage.CUSTOM_SETTINGS.themeColor,
            h: undefined,
            loading: true,
            echartsheight: undefined,
            tenheight: undefined,
            konzhi: true,
            pickerOptions: {
                shortcuts: [
                    {
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                            picker.$emit('pick', [start, end])
                        }
                    }
                ]
            },
            timevalue: [],
            zdname: '',
            Indextype: undefined,
            interval: 3,
            stationData: [],
            lineData: [],
            //  tenlineData:[],
            dialogTableVisible: false,
            dialogTableVisible1: false,
            dialogTableVisible2: false,
            path: '/harmonic-boot/qydetailedAnalysis/pollutionqy',
            name: 'wtzhpg',
            asideheight: undefined,
            rightheight: undefined,
            tableheight: undefined,
            changeName: '谐波电压(%)',
            voltage: 0,
            voltageoption: [],
            fanwei: 0,
            fanweioption: [],
            copent: 0,
            copentoption: [],
            id: 1,
            title: '部门',
            xdata: [],
            ydata: [],
            xdata1: [],
            ydata2: [],
            dataList: [],
            activeName: 'tab1',
            panindexOptions: [],
            classvalue: '',
            classificationData: [],
            flag: false,
            stationNmae: '',
            lineName: '',
            formData: {
                deptIndex: '',
                id: '',
                //loadType:null,
                //manufacturer:null,
                monitorFlag: 2,
                powerFlag: 2,
                //scale:null,
                searchBeginTime: '',
                searchEndTime: '',
                //serverName:'',
                statisticalType: []
            },
            device: 1,
            listcard: [],
            tableData: [],
            eachartfalg: false,
            xdata1: [],
            ydata1: [],
            xdata3: [],
            ydata3: [],
            tvh: '',
            zoom: ''
        }
    },
    created() {
        // this.guanzhou()
        var data = window.sessionStorage.getItem('Info')
        data = eval('(' + data + ')')
        this.formData.deptIndex = data.deptId
        this.getIndexType()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 92 + 'px'
            this.tvh = (window.sessionStorage.getItem('appheight') - 55) / 2
            this.vhh = (window.sessionStorage.getItem('appheight') - 80) / 2 + 'px'
            if (this.myChartes) {
                this.myChartes.resize()
            }
        },
        // 字典数据过滤
        formFilter(row, column) {
            if (column.property == 'voltageLevel') {
                let title = ''
                dicData('Dev_Voltage', []).forEach(item => {
                    if (item.id == row.voltageLevel) {
                        title = item.name
                    }
                })
                return title
            }
        },
        ...mapActions({
            changeSetting: 'settings/changeSetting'
        }),
        //切换指标类型
        gbName(val) {
            if (val.code == 'V_All') {
                this.changeName = '谐波电压(%)'
            }
            if (val.code == 'I_All') {
                this.changeName = '谐波电流(%)'
            }
        },
        //字典获取数据指标类型
        getIndexType() {
            var code = 'Pollution_Statis'
            this.classificationData = dicData(code, [
                'Freq_Dev',
                'V_Dev',
                'V_Unbalance',
                'V_Unbalance',
                'I_Neg',
                'V_Inharm',
                'Plt'
            ])
            // console.log(
            //     '🚀 ~ file: qypowerpollutionzs.vue:669 ~ getIndexType ~ this.classificationData:',
            //     this.classificationData
            // )
            this.formData.statisticalType = this.classificationData[1]
        },
        //变电站详情
        queryStation(i) {
            this.konzhi = true
            // this.formData.deptIndex = i.id
            this.zdname = '电压等级'
            this.stationNmae = i.name
            this.flag = true
            this.dialogTableVisible = true

            api.getSubstation(form).then(res => {
                if (res.code == 'A0000') {
                    this.stationData = res.data
                    this.konzhi = false
                    // var msg = new SpeechSynthesisUtterance(res.message);
                    // window.speechSynthesis.speak(msg);
                } else {
                    this.stationData = []
                    this.konzhi = false
                }
            })
        },
        //监测点详情
        queryline(id, pid, name) {
            this.konzhi = true
            this.lineData = []
            // this.formData.deptIndex = pid
            // this.formData.id = id
            this.flag = false
            this.lineName = name
            this.dialogTableVisible1 = true
            let form = JSON.parse(JSON.stringify(this.formData))
            form.deptIndex = pid
            form.id = id
            api.getLineInfo(form).then(res => {
                if (res.code == 'A0000') {
                    this.lineData = res.data
                    this.konzhi = false
                }
            })
        },
        //排名前十监测点
        tensort() {
            this.dialogTableVisible2 = true
            api.getLineRank(this.formData).then(res => {
                if (res.code == 'A0000') {
                    var data = res.data
                    var xarr = []
                    var yarr = []
                    data.forEach(element => {
                        xarr.push(element.name)
                        yarr.push(element.data)
                    })
                    this.xdata1 = xarr
                    for (var i = 0; i < yarr.length; i++) {
                        if (yarr[i] > 0 && yarr[i] < 1) {
                            yarr[i] = (yarr[i] / 1) * 20
                        } else if (yarr[i] >= 1 && yarr[i] < 1.2) {
                            yarr[i] = (yarr[i] / 1.2) * 40
                        } else if (yarr[i] >= 1.2 && yarr[i] < 1.6) {
                            yarr[i] = (yarr[i] / 1.6) * 60
                        } else if (yarr[i] >= 1.6 && yarr[i] < 2) {
                            yarr[i] = (yarr[i] / 2) * 80
                        } else if (yarr[i] >= 2) {
                            yarr[i] = (yarr[i] / 2) * 100
                        } else if (yarr[i] == 0) {
                            yarr[i] = 1
                        } else if (yarr[i] == 3.14159) {
                            yarr[i] = 2
                        }
                    }
                    console.log('🚀 ~ api.getLineRank ~ this.ydata1:', yarr)

                    this.ydata1 = yarr
                }
                //    this.$nextTick(()=> {

                //  })

                this.tenlineData1()
            })
        },
        //时间格式转化
        dateFormat(dateData1, dateData2) {
            var timearr = []
            var date = new Date(dateData1)
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            m = m < 10 ? '0' + m : m
            var d = date.getDate()
            d = d < 10 ? '0' + d : d
            var h = date.getHours()
            h = h < 10 ? '0' + h : h
            var f = date.getMinutes()
            f = f < 10 ? '0' + f : f
            var s = date.getSeconds()
            s = s < 10 ? '0' + s : s
            this.formData.searchBeginTime = y + '-' + m + '-' + d
            timearr.push(this.formData.searchBeginTime)
            var date = new Date(dateData2)
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            m = m < 10 ? '0' + m : m
            var d = date.getDate()
            d = d < 10 ? '0' + d : d
            var h = date.getHours()
            h = h < 10 ? '0' + h : h
            var f = date.getMinutes()
            f = f < 10 ? '0' + f : f
            var s = date.getSeconds()
            s = s < 10 ? '0' + s : s
            this.formData.searchEndTime = y + '-' + m + '-' + d
            timearr.push(this.formData.searchEndTime)
            return timearr
        },
        //查询触发//获取部门变电站数据
        querfromdata(data, timehbValue, interval) {
            this.interval = interval
            if (this.interval == 1) {
                this.formData.reportFlag = 1
            } else if (this.interval == 2) {
                this.formData.reportFlag = 2
            } else if (this.interval == 3) {
                this.formData.reportFlag = 3
            } else if (this.interval == 4) {
                this.formData.reportFlag = 4
            } else if (this.interval == 5) {
                this.formData.reportFlag = 5
            }
            this.konzhi = true
            this.tableData = []
            this.timeValue = data
            this.dateFormat(this.timeValue[0], this.timeValue[1])

            var data = window.sessionStorage.getItem('Info')
            data = eval('(' + data + ')')
            //this.formData.deptIndex = '0d52f9f6e43ec0ee83013cd32da93f66'
            //this.eachartfalg = false

            this.formData.type = 1
            api.deptSubstationRelations(this.formData).then(res => {
                if (res.code == 'A0000') {
                    this.listcard = res.data
                    this.tableData = res.data
                    this.konzhi = false
                    var xarr = []
                    var yarr = []
                    res.data.forEach(element => {
                        xarr.push(element.name)
                        yarr.push(element.data)
                    })

                    this.xdata = xarr
                    for (var i = 0; i < yarr.length; i++) {
                        if (yarr[i] == 3.14159) {
                            yarr[i] = 0.02
                        }
                    }
                    this.ydata = yarr
                    this.xdata3 = xarr
                    this.ydata3 = yarr
                    // this.eachartfalg = true
                }
                this.$nextTick(() => {
                    this.$refs.child.evaluation()
                })
            })

            //alert('父组件条件查询触发方法'+ data)
        },
        handleClick(tab, event) {
            //  this.$nextTick(()=> {
            //    this.$refs.child.dataintegrity()
            //    })
        },
        tenlineData1() {
            const echarts = require('echarts')
            let _this = this
            let domId = document.getElementById('tenlineechart')
            setTimeout(() => {
                ;(domId.style.width = window.sessionStorage.getItem('appwidth') - 420 + 'px'),
                    (domId.style.height = '600px')
            }, 0)
            var myChartes = echarts.init(domId)
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            var option = {
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        var tips = ''
                        tips += '<span style="font-weight:bold;color:#fff">' + params[0].name + '</span></br/>'
                        for (var i = 0; i < params.length; i++) {
                            if (params[i].value == 2) {
                                tips += params[i].seriesName + ':暂无数据<br/>'
                            } else {
                                if (params[i].value > 0 && params[i].value <= 20 && params[i].value !== 1) {
                                    tips += params[i].seriesName + ':' + (params[i].value * 1) / 20 + '<br/>'
                                } else if (params[i].value > 20 && params[i].value <= 40) {
                                    tips += params[i].seriesName + ':' + (params[i].value * 1.2) / 40 + '<br/>'
                                } else if (params[i].value > 40 && params[i].value <= 60) {
                                    tips += params[i].seriesName + ':' + (params[i].value * 1.6) / 60 + '<br/>'
                                } else if (params[i].value > 60 && params[i].value <= 80) {
                                    tips += params[i].seriesName + ':' + (params[i].value * 2) / 80 + '<br/>'
                                } else if (params[i].value > 80 && params[i].value <= 100) {
                                    tips += params[i].seriesName + ':' + (params[i].value * 2) / 100 + '<br/>'
                                } else if (params[i].value > 100) {
                                    tips += params[i].seriesName + ':' + (params[i].value * 2) / 100 + '<br/>'
                                } else if (params[i].value == 1) {
                                    tips += params[i].seriesName + ':' + (params[i].value * 0) / 20 + '<br/>'
                                }
                            }
                        }
                        return tips
                    },

                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },
                grid: {
                    left: '10px',
                    right: '10px',
                    bottom: '40px',
                    containLabel: true
                },
                dataZoom: [
                    {
                        type: 'inside',
                        height: 13,
                        start: 0,
                        bottom: '20px',
                        end: 100
                    },
                    {
                        start: 0,
                        height: 13,
                        bottom: '20px',
                        end: 100
                    }
                ],
                xAxis: [
                    {
                        type: 'category',
                        data: this.xdata1,
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor
                            // rotate: 39,
                        }
                    }
                ],

                yAxis: {
                    // name: '单位:%',
                    type: 'value',
                    min: 0,
                    max: 100,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#00'
                        },
                        color: echartsColor.WordColor,
                        // 这里重新定义就可以
                        formatter: function (value, index) {
                            var texts = []
                            console.log(123,value);
                            if (value == 20) {
                                texts.push('1级')
                            } else if (value == 40) {
                                texts.push('2级')
                            } else if (value == 60) {
                                texts.push('3级')
                            } else if (value == 80) {
                                texts.push('4级')
                            } else if (value == 100) {
                                texts.push('5级')
                            }
                            return texts;
                        }
                    },
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },
                    minInterval: 1,
                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: [echartsColor.thread],

                            opacity: 0.5
                        }
                    }
                },
                series: [
                    {
                        name: '数值',
                        barMaxWidth: 45,
                        type: 'bar',

                        itemStyle: {
                            normal: {
                                // 随机显示
                                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                                // 定制显示（按顺序）
                                color: function (params) {
                                    if (params.value > 100) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: ColorObject.ColorObject.zdContaminated
                                                }
                                            ],
                                            false
                                        )
                                    } else if (params.value < 100 && params.value > 80) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: ColorObject.ColorObject.zdContaminated
                                                }
                                            ],
                                            false
                                        )
                                    } else if (60 < params.value && params.value <= 80) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: ColorObject.ColorObject.centerContaminated
                                                }
                                            ],
                                            false
                                        )
                                    } else if (40 < params.value && params.value <= 60) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: ColorObject.ColorObject.qdContaminated
                                                }
                                            ],
                                            false
                                        )
                                    } else if (20 < params.value && params.value <= 40) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: ColorObject.ColorObject.qwContaminated
                                                }
                                            ],
                                            false
                                        )
                                    } else if (0 < params.value && params.value <= 20 && params.value !== 2) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: ColorObject.ColorObject.noContaminated
                                                }
                                            ],
                                            false
                                        )
                                    } else if (params.value == 2) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: '#999999'
                                                }
                                            ],
                                            false
                                        )
                                    }
                                }
                            }
                        },
                        markLine: {
                            silent: false,
                            symbol: 'circle',
                            lineStyle: {
                                color: 'red',
                                width: 1
                            },
                            emphasis: {
                                lineStyle: {
                                    width: 1
                                }
                            },
                            data: [
                                {
                                    name: '等级:1级无污染',
                                    yAxis: 20,
                                    lineStyle: {
                                        color: ColorObject.ColorObject.noContaminated
                                    },
                                    label: {
                                        position: 'middle',
                                        formatter: '{b}',
                                        textStyle: {
                                            color: ColorObject.ColorObject.noContaminated
                                        }
                                    }
                                },
                                {
                                    name: '等级:2级轻微污染',
                                    yAxis: 40,
                                    lineStyle: {
                                        color: ColorObject.ColorObject.qwContaminated
                                    },
                                    label: {
                                        position: 'middle',
                                        formatter: '{b}',
                                        textStyle: {
                                            color: ColorObject.ColorObject.qwContaminated
                                        }
                                    }
                                },
                                {
                                    name: '等级:3级轻度污染',
                                    yAxis: 60,
                                    lineStyle: {
                                        color: ColorObject.ColorObject.qdContaminated
                                    },
                                    label: {
                                        position: 'middle',
                                        formatter: '{b}',
                                        textStyle: {
                                            color: ColorObject.ColorObject.qdContaminated
                                        }
                                    }
                                },
                                {
                                    name: '等级:4级中度污染',
                                    yAxis: 80,
                                    lineStyle: {
                                        color: ColorObject.ColorObject.centerContaminated
                                    },
                                    label: {
                                        position: 'middle',
                                        formatter: '{b}',
                                        textStyle: {
                                            color: ColorObject.ColorObject.centerContaminated
                                        }
                                    }
                                },
                                {
                                    name: '等级:5级重度污染',
                                    yAxis: 100,
                                    lineStyle: {
                                        color: ColorObject.ColorObject.zdContaminated
                                    },
                                    label: {
                                        position: 'middle',
                                        formatter: '{b}',
                                        textStyle: {
                                            color: ColorObject.ColorObject.zdContaminated
                                        }
                                    }
                                }
                            ]
                        },
                        data: this.ydata1
                    }
                ]
            }
            myChartes.setOption(option)
            window.echartsArr.push(myChartes)
            setTimeout(() => {
                myChartes.resize()
            }, 100)
        },
        // 切换选项
        handleNodeClick(data) {
            this.formData.deptIndex = data.id
        }
    }
}
</script>
<style lang="less" scoped>
::v-deep .el-card__header {
    padding: 5px 5px !important;
    border-bottom: 1px solid #ebeef5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
::v-deep .el-button--text:focus,
.el-button--text:hover {
    color: #fdfdfd !important;
}
@import url('../../../styles/comStyle.less');
.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
.wr {
    margin-left: 0%;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}
.zd {
    color: #fff !important;
    background: #f30;
}
.zzd {
    color: #fff !important;
    background: #f90;
}
.qd {
    color: #fff !important;
    background: #fc0;
}
.qw {
    color: #fff !important;
    background: #39f;
}
.wd {
    color: #fff !important;
    background: #393;
}
.ws {
    color: #fff !important;
    background: #999;
}
.xshou {
    cursor: pointer;
}

.right-top {
    color: rgb(7, 131, 161);
    border: 1.5px solid rgb(7, 131, 161);
    border-style: solid hidden hidden hidden;
}
.xdf {
    margin-left: 2%;
    font-size: 12px;
    font-weight: bold;
    line-height: 0.6rem;
    color: #000;
}

.l1 {
    color: #fff;
    background: #999;
}
.l2 {
    color: #fff;
    background: #393;
}
.l3 {
    color: #fff;
    background: #39f;
}
.l4 {
    color: #fff;
    background: #f90;
}
.l5 {
    color: #fff;
    background: #fc0;
}
.l6 {
    color: #fff;
    background: #f30;
}
.jkl {
    height: 0.3%;
    margin-top: 1%;
    cursor: pointer;
    display: flex;
}
.cvb {
    height: 20vh;
    overflow-x: hidden;
    overflow-y: auto;
}
.ll {
    font-weight: bold;
    color: #000;
    line-height: 20px;
    //margin-top: 1.5%;
}
.d1 {
    padding: 5px;
    line-height: 15px;
    color: #fff;
    background: #999;
    margin-top: -5px;
}
.asd {
    float: right;
    font-size: 14px;
    font-weight: bold;
    line-height: 15px;
    color: #fff;
}
.d3 {
    padding: 1.5%;
    line-height: 10px;
    color: #fff;
    background: #39f;
    margin-top: -5px;
}
.d2 {
    line-height: 10px;
    padding: 1.5%;
    color: #fff;
    background: #339933;
    margin-top: -5px;
}
.d4 {
    padding: 1.5%;
    line-height: 10px;
    color: #fff;
    background: #f90;
    margin-top: -5px;
}
.d5 {
    padding: 5px;
    line-height: 10px;
    color: #fff;
    background: #fc0;
    margin-top: -5px;
}
.d6 {
    padding: 1.5%;
    line-height: 15px;
    color: #fff;
    background: #f30;
    margin-top: -5px;
}
.qwe {
    margin-top: 5px;
}
.fgh {
    height: 5vh;
}
.lf {
    float: left;
}
</style>
