<template>
    <div class="pd10" v-loading="loading" element-loading-text="数据加载中">
        <el-form :inline="true" :model="formData" class="demo-form-inline">
            <el-form-item v-show="true">
                <Area ref="area" class="box" @click="handleNodeClick"></Area>
            </el-form-item>
            <el-form-item label="指标类型">
                <el-select v-model="formData.statisticalType" @change="gbName" placeholder="选择指标类型">
                    <el-option
                        v-for="item in optionsType"
                        :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>
                <Timeinterval :interval="interval" ref="interval"></Timeinterval>
            </el-form-item>
            <!-- <el-form-item>
        <el-button type="primary" @click="tensort">排名前10监测点</el-button>
      </el-form-item> -->
            <el-form-item>
                <el-button @click="gettableData" type="primary" icon="el-icon-search">查询</el-button>
            </el-form-item>
        </el-form>
        <el-row id="echarts">
            <el-col :span="12" style="position: relative">
                <svg-icon v-show="isfanhui" class="back" icon-class="back" @click="fanhui" />
                <div id="mapwq" class="xiaoshou"></div>
            </el-col>
            <el-col :span="12">
                <el-row>
                    <el-col :span="24" :style="`height:${vhh};overflow: hidden;`" id="wytpg">
                        <el-button
                            style="position: absolute; right: 10px; z-index: 20000"
                            type="text"
                            icon="el-icon-download"
                            title="生成图片"
                            @click="download"
                        >
                            下载
                        </el-button>
                        <div ref="fbt" id="outlineechartw"></div>
                    </el-col>
                    <el-col :span="24">
                        <el-table
                            stripe
                            :data="tableData"
                            border
                            highlight-current-row
                            header-cell-class-name="table_header"
                            :height="vh"
                            :style="'width: 100%'"
                        >
                            <el-table-column align="center" prop="name" label="名称" min-width="50"></el-table-column>
                            <el-table-column align="center" prop="data" :label="changeName" sortable>
                                <template slot-scope="scope">
                                    <span v-if="scope.row.data == -1" type="primary" size="small">暂无数据</span>
                                    <span
                                        v-if="scope.row.data !== -1 && scope.row.data !== 0.1"
                                        type="primary"
                                        size="small"
                                    >
                                        {{ scope.row.data }}
                                    </span>
                                    <span v-if="scope.row.data == 0.1" type="primary" size="small">/</span>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="data" label="污区严重度评估" sortable>
                                <template slot-scope="scope">
                                    <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>
                                    <span v-if="scope.row.data == -1" type="primary" size="small">暂无评估</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                    <!--排名前十监测点-->
                    <el-dialog
                        :close-on-click-modal="false"
                        title="排名前10的监测点"
                        width="70%"
                        :visible.sync="dialogTableVisible2"
                    >
                        <div id="tenlineechart" :style="'width:100%;height:calc(100vh - 515px);zoom:' + device"></div>
                    </el-dialog>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import api from '@/api/pollution/pollution'
import html2canvas from 'html2canvas'
import api1 from '@/api/pollution/pollution'
import Area from '@/views/components/Area/Area.vue'
import Timeinterval from '../../components/Timeinterval.vue'
import yan from '@/assets/commjs/color'
import { mapActions } from 'vuex'
import { dicData } from '../../../assets/commjs/dictypeData'
import * as myEchart from 'echarts'
export default {
    name: 'assessmentpollution',
    components: { Area, Timeinterval },
    data() {
        return {
            zoom: '',
            changeName1: '谐波电压(%)',
            id: 1,
            vh: null,
            vhh: null,
            optionsType: [],
            disabled: true,
            echartsheight: undefined,
            dialogTableVisible2: false,
            preDisabled: false, //时间组件只读控制
            pickDisabled: false,
            options: [
                { label: '年', value: 1 },
                { label: '季度', value: 2 },
                { label: '月', value: 3 },
                { label: '周', value: 4 }
                // { label: "自定义", value: 5 },
                // { label: "半年", value: 6 },
            ],
            //表单
            interval: 3, //间隔类型
            item: ['', ''],
            device: 1,
            formData: {
                statisticalType: [],
                monitorFlag: 2,
                powerFlag: 2,
                reportFlag: '',
                deptIndex: '',
                searchBeginTime: '',
                searchEndTime: ''
            },
            deptIndex: '',
            // 时间组件
            pickerOptions: {
                shortcuts: [
                    {
                        text: '当前日期',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        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])
                        }
                    }
                ]
            },

            tenheight: undefined,
            loading: false,
            //表格高度
            h: undefined,
            changeName: '谐波电压(%)',
            tableData: [],
            xdata: [],
            ydata: [],
            provinces: {
                中国: require('@/views/map2/mapData/zhonguo.json'),
                上海: require('@/views/map2/mapData/shanghai.json'),
                河北: require('@/views/map2/mapData/hebei.json'),
                山西: require('@/views/map2/mapData/shanxi.json'),
                内蒙古: require('@/views/map2/mapData/neimenggu.json'),
                辽宁: require('@/views/map2/mapData/liaoning.json'),
                吉林: require('@/views/map2/mapData/jilin.json'),
                黑龙江: require('@/views/map2/mapData/heilongjiang.json'),
                江苏: require('@/views/map2/mapData/jiangsu.json'),
                浙江: require('@/views/map2/mapData/zhejiang.json'),
                安徽: require('@/views/map2/mapData/anhui.json'),
                福建: require('@/views/map2/mapData/fujian.json'),
                江西: require('@/views/map2/mapData/jiangxi.json'),
                山东: require('@/views/map2/mapData/shandong.json'),
                河南: require('@/views/map2/mapData/henan.json'),
                湖北: require('@/views/map2/mapData/hubei.json'),
                湖南: require('@/views/map2/mapData/hunan.json'),
                广东: require('@/views/map2/mapData/guangdong.json'),
                广西: require('@/views/map2/mapData/guangxi.json'),
                海南: require('@/views/map2/mapData/hainan.json'),
                四川: require('@/views/map2/mapData/sichuan.json'),
                贵州: require('@/views/map2/mapData/guizhou.json'),
                云南: require('@/views/map2/mapData/yunnan.json'),
                西藏: require('@/views/map2/mapData/xizang.json'),
                陕西: require('@/views/map2/mapData/shanxi1.json'),
                甘肃: require('@/views/map2/mapData/gansu.json'),
                青海: require('@/views/map2/mapData/qinghai.json'),
                宁夏: require('@/views/map2/mapData/ningxia.json'),
                新疆: require('@/views/map2/mapData/xinjiang.json'),
                北京: require('@/views/map2/mapData/beijing.json'),
                天津: require('@/views/map2/mapData/tianjin.json'),
                重庆: require('@/views/map2/mapData/chongqing.json'),
                香港: require('@/views/map2/mapData/xianggang.json'),
                澳门: require('@/views/map2/mapData/aomen.json'),
                台湾: require('@/views/map2/mapData/taiwan.json')
            },
            myChart: null,
            isfanhui: false,
            path: '/harmonic-boot/qydetailedAnalysis/pollutionqy',
            name: 'wtzhpg',
            timeValue: [],
            title: '中国',
            myChartes: ''
        }
    },
    created() {
        this.formData.deptIndex = JSON.parse(window.sessionStorage.getItem('Info')).deptId

        // this.deptIndex = JSON.parse(window.sessionStorage.getItem("Info")).deptId;
        this.getIndexType()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.resizeEchartd()

        this.gettableData()
        this.getMapData()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') / 2 - 85 + 'px'
            this.vhh = window.sessionStorage.getItem('appheight') / 2 + 30 + 'px'
            if (this.myChartes !== '') {
                this.myChartes.resize()
            }
        },
        resizeEchartd() {
            var elementResizeDetectorMaker = require('element-resize-detector')
            if (document.getElementById('wytpg')) {
                var erd = elementResizeDetectorMaker()
                erd.listenTo(document.getElementById('wytpg'), element => {
                    let domeId = document.getElementById('wytpg')
                    let domeId2 = document.getElementById('outlineechartw')
                    domeId2.style.width = domeId.offsetWidth - 10 + 'px'
                    if (this.myChartes !== '') {
                        this.myChartes.resize()
                    }
                })
            }
        },
        handleNodeClick(data) {
            this.formData.deptIndex = data.id
            // this.deptIndex = data.id;
            this.title = data.areaName
        },
        // dmo元素里的内容转换为canvas,并将canvas下载为图片
        download() {
            // 转换成canvas
            html2canvas(document.getElementById('echarts'), {
                background: '#fff',
                scale: 1
            }).then(function (canvas) {
                // 创建a标签，实现下载
                var creatIMg = document.createElement('a')
                creatIMg.download = '图表.png' // 设置下载的文件名，
                creatIMg.href = canvas.toDataURL() // 下载url
                // document.body.appendChild(creatIMg);
                creatIMg.click()
                creatIMg.remove() // 下载之后把创建的元素删除
            })
        },
        //获取地图
        getMapData() {
            let domID1 = document.getElementById('mapwq')
            let obj = {
                name: this.title,
                scatterData: [], // 撒点数据
                mapData: [], // 面板数据
                index: 0 // 0:全国,1:省,2:市场
            }
            ;(domID1.style.width = '100%'),
                (domID1.style.height = window.sessionStorage.getItem('appheight') - 63 + 'px')
            myEchart.registerMap(
                obj.name,
                this.provinces[obj.name] == undefined ? this.provinces['中国'] : this.provinces[obj.name]
            )
            this.myChart = myEchart.init(domID1)
            this.renderMap(obj)
            window.onresize = () => {
                this.myChart.resize()
            }
            this.myChartClick()
        },
        renderMap(obj) {
            const keyName = obj.name
            // if (keyName != "中国") {
            //   this.isfanhui = true;
            // } else {
            //   this.isfanhui = false;
            // }
            let option = {
                title: {
                    text: '电能质量污区图分布',
                    x: 'center'
                },
                tooltip: {
                    // triggerOn: "click",
                    // formatter: function(e, t, n) {
                    //     return "<br />" + e.name + "<br/>区域暂降评估等级 :" + e.value
                    // }
                    trigger: 'item',
                    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)',
                    formatter: function (params) {
                        var tips = ''

                        if (params.value === -1 || window.isNaN(params.value)) {
                            tips =
                                "<font style='color:#fff'>" +
                                params.name +
                                '</font><br/>区域污染评估:' +
                                "<font style='color:#fff'><font style='color:#fff'>暂无数据</font><br/>"
                        } else if (params.value === 0.1 || window.isNaN(params.value)) {
                            tips =
                                "<font style='color:#fff'>" +
                                params.name +
                                '</font><br/>区域污染评估:' +
                                "<font style='color:#fff'><font style='color:#fff'>暂无数据</font><br/>"
                        } else {
                            tips +=
                                "<font style='color:#fff'>" +
                                params.name +
                                '</font><br/>区域污染评估' +
                                "<font style='color:#fff'>：" +
                                params.value +
                                '</font><br/>'
                        }
                        return tips
                    }
                },
                visualMap: {
                    min: 0,
                    max: 2,
                    left: 0,
                    bottom: 0,
                    showLabel: !0,
                    //text: ["高", "低"],
                    pieces: [
                        {
                            gt: 2,
                            lt: 10000,
                            label: '重度污染',
                            color: yan.ColorObject.zdContaminated
                        },
                        {
                            gte: 1.2,
                            lt: 1.6,
                            label: '轻度污染',
                            color: yan.ColorObject.qdContaminated
                        },
                        {
                            gt: 1.6,
                            lt: 2,
                            label: '中度污染',
                            color: yan.ColorObject.centerContaminated
                        },
                        {
                            gte: 1,
                            lte: 1.2,
                            label: '轻微污染',
                            color: yan.ColorObject.qwContaminated
                        },
                        {
                            gte: 0.1,
                            lte: 1,
                            label: '无污染',
                            color: yan.ColorObject.noContaminated
                        },
                        {
                            gte: -1,
                            lte: 0.05,
                            label: '无数据',
                            color: '#ccc'
                        }
                    ],
                    show: 0,
                    inRange: {
                        color: [
                            '#ccc',
                            yan.ColorObject.noContaminated,
                            yan.ColorObject.qwContaminated,
                            yan.ColorObject.centerContaminated,
                            yan.ColorObject.qdContaminated,
                            yan.ColorObject.zdContaminated
                        ] //蓝红
                    }
                },
                geo: {
                    type: 'map',
                    map: keyName,
                    roam: true,
                    // scaleLimit: {
                    //     min: 1,
                    //     max: 2
                    // },
                    zoom: obj.name == '海南' ? 5 : 1.1,
                    top: obj.name == '海南' ? 1300 : 120,
                    left: obj.name == '海南' ? 700 : 'center',
                    label: {
                        normal: {
                            show: true,
                            fontSize: '14',
                            color: 'rgba(0,0,0,0.7)'
                        }
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#FFFfFF',
                            //shadowBlur: 50,
                            // shadowColor: '#CCCCCC',
                            backgroundColor: 'red',
                            borderColor: '#00CCFF'
                        },
                        emphasis: {
                            areaColor: '#03484b2f',
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            borderWidth: 0
                        }
                    }
                },
                series: [
                    {
                        geoIndex: 0,
                        type: 'map',
                        label: {
                            show: true,
                            position: 'top',
                            color: '#00f',
                            margin: 10,
                            formatter: '{b}:{c}'
                        },
                        mapType: name,
                        data: this.dataList,
                        roam: true,
                        zoom: 1.1,
                        showLegendSymbol: true,
                        emphasis: {},
                        rippleEffect: {
                            show: true,
                            brushType: 'stroke',
                            scale: 2.5,
                            period: 4
                        }
                    }
                ]
            }
            this.myChart.setOption(option, true)
            window.echartsArr.push(this.myChart)
        },
        //地图点击事件
        myChartClick() {
            // debugger
            //  document.body.removeEventListener('touchmove',bodyScroll,false);
            this.myChart.off('click') //取消echarts 点击事件
            this.myChart.on('click', params => {
                //  alert(2122)
                // debugger
                const { name } = params
                // gettableData
                this.isfanhui = true
                this.$refs.area.form.options[0].children.forEach(item => {
                    if (item.name == name) {
                        this.$refs.area.form.valueTitle = item.name
                        this.title = item.name
                        this.formData.deptIndex = item.id
                        this.item = this.$refs.interval.timeValue
                        this.formData.reportFlag = this.interval
                        this.formData.searchBeginTime = this.item[0]
                        this.formData.searchEndTime = this.item[1]
                        api.deptSubstationRelations(this.formData).then(res => {
                            if (res.code == 'A0000') {
                                this.tableData = res.data
                                var xarr = []
                                var yarr = []
                                let arr = []
                                var arr1 = []
                                res.data.forEach(element => {
                                    xarr.push(element.name)
                                    yarr.push(element.data)
                                    let p = {
                                        name: element.name,
                                        value: element.data
                                    }
                                    arr.push(p)
                                    let d = element.name.split('\n')
                                    let p1 = {
                                        name: d[0],
                                        value: element.data
                                    }

                                    arr1.push(p1)
                                })

                                this.dataList = arr1
                                // this.getMapData()
                                this.xdata = xarr
                                for (var i = 0; i < yarr.length; i++) {
                                    if (yarr[i] == -1 || yarr[i] == 0) {
                                        yarr[i] = 0.1
                                    }
                                }
                                this.ydata = yarr
                            }
                            let obj = {
                                name,
                                scatterData: [],
                                mapData: [],
                                index: 2
                            }
                            // if (params.seriesType === "map" ) {
                            // if (name != "中国") {
                            //   this.isfanhui = true;
                            // }
                            myEchart.registerMap(name, this.provinces[name])
                            //重新渲染地图
                            this.renderMap(obj)
                            // }
                            this.evaluation()
                        })
                    } else {
                        let obj = {
                            name,
                            scatterData: [],
                            mapData: [],
                            index: 2
                        }
                        myEchart.registerMap(name, this.provinces[name])
                        this.renderMap(obj)
                    }
                })
            })
        },
        //返回
        fanhui() {
            this.isfanhui = false
            this.formData.deptIndex = JSON.parse(window.sessionStorage.getItem('Info')).deptId
            this.title = '中国'
            this.item = this.$refs.interval.timeValue
            this.formData.reportFlag = this.interval
            this.formData.searchBeginTime = this.item[0]
            this.formData.searchEndTime = this.item[1]
            api.deptSubstationRelations(this.formData).then(res => {
                if (res.code == 'A0000') {
                    this.tableData = res.data
                    let xarr = []
                    let yarr = []
                    let arr = []
                    let arr1 = []
                    res.data.forEach(element => {
                        xarr.push(element.name)
                        yarr.push(element.data)
                        let p = {
                            name: element.name,
                            value: element.data
                        }
                        arr.push(p)
                        let d = element.name.split('\n')
                        let p1 = {
                            name: d[0],
                            value: element.data
                        }

                        arr1.push(p1)
                    })
                    this.dataList = arr1
                    // this.getMapData()
                    this.xdata = xarr
                    for (var i = 0; i < yarr.length; i++) {
                        if (yarr[i] == -1 || yarr[i] == 0) {
                            yarr[i] = 0.1
                        }
                    }
                    this.ydata = yarr
                }
                this.$refs.area.form.valueTitle = JSON.parse(window.sessionStorage.getItem('Info')).deptName

                this.evaluation()
                this.getMapData()
            })
        },
        //柱状图
        evaluation() {
            const echarts = require('echarts')

            let domID1 = document.getElementById('outlineechartw')
            setTimeout(() => {
                domID1.style.width = document.getElementById('wytpg').offsetWidth - 0 + 'px'
                domID1.style.height = window.sessionStorage.getItem('appheight') / 2 + 30 + 'px'
            }, 0)
            let myChartes = echarts.init(domID1)
            this.myChartes = myChartes
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let option = {
                title: {
                    text: '区域',
                    left: 'center'
                    // subtext: ''
                },
                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)',
                    formatter: function (params) {
                        var tips = ''
                        tips += '<span style="">' + params[0].name + '</span>'
                        for (var i = 0; i < params.length; i++) {
                            if (params[i].value == 0.1) {
                                tips += params[i].seriesName + ':暂无数据<br/>'
                            } else {
                                tips += params[i].seriesName + ':' + params[i].value
                            }
                        }
                        return tips
                    }
                },
                grid: yan.EchartObject.grid7,
                dataZoom: yan.EchartObject.dataZoom,
                xAxis: [
                    {
                        name: yan.EchartObject.area,
                        nameTextStyle: {
                            color: echartsColor.WordColor,
                            verticalAlign: 'top', //标题位置
                            padding: [-5, 0, 0, 10]
                        },
                        type: 'category',
                        data: this.xdata,
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            show: true,
                            symbol: ['none', 'arrow'],
                            symbolOffset: 25, //箭头距离x轴末端距离
                            lineStyle: {
                                shadowOffsetX: 25,
                                color: echartsColor.thread,
                                shadowColor: echartsColor.thread //设置阴影的颜色
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                fontFamily: yan.EchartObject.fontFamily,
                                color: '#000'
                            }
                        }
                    }
                ],

                yAxis: {
                    name: yan.EchartObject.grade,
                    nameTextStyle: {
                        color: echartsColor.WordColor,
                        verticalAlign: 'top', //标题位置
                        padding: [-22, 0, 10, 0]
                    },
                    type: 'value',
                    min: 0,
                    max: 2,
                    interval: 0.2,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#00'
                        },
                        // 这里重新定义就可以
                        formatter: function (value, index) {
                            var texts = []
                            if (value === 1) {
                                texts.push('1级')
                            } else if (value === 1.2) {
                                texts.push('2级')
                            } else if (value === 1.4) {
                                texts.push('3级')
                            } else if (value === 1.6) {
                                texts.push('4级')
                            } else if (value === 2) {
                                texts.push('5级')
                            }
                            return texts
                        }
                    },
                    axisLine: {
                        show: true,
                        symbol: ['none', 'arrow'],
                        symbolOffset: 25, //箭头距离x轴末端距离
                        lineStyle: {
                            shadowOffsetY: -25,
                            color: echartsColor.thread,
                            shadowColor: echartsColor.thread //设置阴影的颜色
                        }
                    }
                },
                series: [
                    {
                        name: yan.EchartObject.dwz,
                        barMaxWidth: yan.EchartObject.barMaxWidth,
                        type: 'bar',
                        label: {
                            normal: {
                                show: false,
                                position: 'top'
                            }
                        },
                        itemStyle: {
                            normal: {
                                // 随机显示
                                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                                // 定制显示（按顺序）
                                color: function (params) {
                                    if (params.value > 2) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: yan.ColorObject.zdContaminated
                                                }
                                            ],
                                            false
                                        )
                                    } else if (1.6 < params.value && params.value <= 2) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: yan.ColorObject.centerContaminated
                                                }
                                            ],
                                            false
                                        )
                                    } else if (1.2 < params.value && params.value <= 1.6) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: yan.ColorObject.qdContaminated
                                                }
                                            ],
                                            false
                                        )
                                    } else if (1 < params.value && params.value <= 1.2) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: yan.ColorObject.qwContaminated
                                                }
                                            ],
                                            false
                                        )
                                    } else if (
                                        0 < params.value &&
                                        params.value <= 1 &&
                                        params.value >= 0 &&
                                        params.value !== 0.1
                                    ) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: yan.ColorObject.noContaminated
                                                }
                                            ],
                                            false
                                        )
                                    } else if (params.value == 0.1) {
                                        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: '',
                                    yAxis: 1,
                                    lineStyle: {
                                        color: yan.ColorObject.noContaminated
                                    },
                                    label: {
                                        //position: "middle",
                                        formatter: '{b}',
                                        textStyle: {
                                            color: yan.ColorObject.noContaminated
                                        }
                                    }
                                },
                                {
                                    name: '',
                                    yAxis: 1.2,
                                    lineStyle: {
                                        color: yan.ColorObject.qwContaminated
                                    },
                                    label: {
                                        // position: "middle",
                                        formatter: '{b}',
                                        textStyle: {
                                            color: yan.ColorObject.qwContaminated
                                        }
                                    }
                                },
                                {
                                    name: '',
                                    yAxis: 1.4,
                                    lineStyle: {
                                        color: yan.ColorObject.qdContaminated
                                    },
                                    label: {
                                        // position: "middle",
                                        formatter: '{b}',
                                        textStyle: {
                                            color: yan.ColorObject.qdContaminated
                                        }
                                    }
                                },
                                {
                                    name: '',
                                    yAxis: 1.6,
                                    lineStyle: {
                                        color: yan.ColorObject.centerContaminated
                                    },
                                    label: {
                                        // position: "middle",
                                        formatter: '{b}',
                                        textStyle: {
                                            color: yan.ColorObject.centerContaminated
                                        }
                                    }
                                },
                                {
                                    name: '',
                                    yAxis: 2,
                                    lineStyle: {
                                        color: yan.ColorObject.zdContaminated
                                    },
                                    label: {
                                        // position: "middle",
                                        formatter: '{b}',
                                        textStyle: {
                                            color: yan.ColorObject.zdContaminated
                                        }
                                    }
                                }
                            ]
                        },
                        data: this.ydata
                    }
                ]
            }
            myChartes.setOption(option)
            window.echartsArr.push(myChartes)

            // setInterval(() => {
            //   myChartes.resize();
            // }, 100);

            let _this = this
            _this.$erd.listenTo(_this.$refs.fbt, element => {
                _this.$nextTick(() => {
                    domID1.style.width = document.getElementById('wytpg').offsetWidth - 0 + 'px'
                    myChartes.resize()
                })
            })
        },
        //指标类型
        getIndexType() {
            let code = 'Pollution_Statis'
            this.optionsType = dicData(code, ['V_All', 'I_Neg', 'V_Inharm', 'V_Dev', 'V_Unbalance', 'Plt', 'Freq_Dev'])
            this.formData.statisticalType = this.optionsType[0]
        },
        //切换指标类型
        gbName(val) {
            if (val.code == 'V_Harmonic') {
                this.changeName1 = '谐波电压(%)'
            }
            if (val.code == 'I_All') {
                this.changeName1 = '谐波电流(%)'
            }
        },
        //时间格式转化
        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
            this.loading = true

            this.tableData = []
            this.timeValue = data
            this.dateFormat(this.timeValue[0], this.timeValue[1])
            api.deptSubstationRelations(this.formData).then(res => {
                if (res.code == 'A0000') {
                    this.tableData = res.data
                    let xarr = []
                    let yarr = []
                    let arr = []
                    res.data.forEach(element => {
                        xarr.push(element.name)
                        yarr.push(element.data)
                        let p = {
                            name: element.name,
                            value: element.data
                        }
                        arr.push(p)
                    })
                    this.dataList = arr
                    this.getMapData()
                    this.xdata = xarr

                    for (var i = 0; i < yarr.length; i++) {
                        if (yarr[i] == -1 || yarr[i] == 0) {
                            yarr[i] = 0.1
                        }
                    }
                    this.ydata = yarr
                    this.loading = false
                    // this.eachartfalg = true
                }

                this.evaluation()
            })

            //alert('父组件条件查询触发方法'+ data)
        },
        //排名前十监测点
        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] == -1) {
                            yarr[i] = 2
                        }
                    }
                    this.ydata1 = yarr
                }
                this.$nextTick(() => {
                    this.tenlineData1()
                })
            })
        },
        tenlineData1() {
            const echarts = require('echarts')
            var myChartes = echarts.init(document.getElementById('tenlineechart'))
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            var option = {
                title: {
                    //text: this.title,
                    subtext: '单位(污染值)'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        var tips = ''
                        tips += '<span style="font-weight:bold;color:#0099CC">' + 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
                    }
                },
                grid: {
                    left: '3%',
                    right: '3%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.xdata1,
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            show: true,
                            symbol: ['none', 'arrow']
                        },
                        axisLabel: {
                            textStyle: {
                                fontFamily: 'dinproRegular',
                                color: echartsColor.WordColor
                            },
                            rotate: 39
                        }
                    }
                ],
                toolbox: {
                    show: true
                    // feature: {
                    //   saveAsImage: { show: true },
                    //   //restore: {},
                    //   // mark: { show: true },
                    // },
                },
                yAxis: {
                    //name: '单位:状态',
                    type: 'value',
                    min: 0,
                    max: 100,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: echartsColor.WordColor
                        },
                        // 这里重新定义就可以
                        formatter: function (value, index) {
                            var texts = []
                            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
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        },
                        symbol: ['none', 'arrow']
                    }
                },
                series: [
                    {
                        name: '数值',
                        barMaxWidth: 45,
                        type: 'bar',
                        label: {
                            normal: {
                                show: false,
                                position: 'top'
                            }
                        },
                        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: zdContaminated
                                                }
                                            ],
                                            false
                                        )
                                    } else if (params.value < 100 && params.value > 80) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: zdContaminated
                                                }
                                            ],
                                            false
                                        )
                                    } else if (60 < params.value && params.value <= 80) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: centerContaminated
                                                }
                                            ],
                                            false
                                        )
                                    } else if (40 < params.value && params.value <= 60) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: qdContaminated
                                                }
                                            ],
                                            false
                                        )
                                    } else if (20 < params.value && params.value <= 40) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: 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: 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: noContaminated
                                    },
                                    label: {
                                        position: 'middle',
                                        formatter: '{b}',
                                        textStyle: {
                                            color: noContaminated
                                        }
                                    }
                                },
                                {
                                    name: '等级:2级轻微污染',
                                    yAxis: 40,
                                    lineStyle: {
                                        color: qwContaminated
                                    },
                                    label: {
                                        position: 'middle',
                                        formatter: '{b}',
                                        textStyle: {
                                            color: qwContaminated
                                        }
                                    }
                                },
                                {
                                    name: '等级:3级轻度污染',
                                    yAxis: 60,
                                    lineStyle: {
                                        color: qdContaminated
                                    },
                                    label: {
                                        position: 'middle',
                                        formatter: '{b}',
                                        textStyle: {
                                            color: qdContaminated
                                        }
                                    }
                                },
                                {
                                    name: '等级:4级中度污染',
                                    yAxis: 80,
                                    lineStyle: {
                                        color: centerContaminated
                                    },
                                    label: {
                                        position: 'middle',
                                        formatter: '{b}',
                                        textStyle: {
                                            color: centerContaminated
                                        }
                                    }
                                },
                                {
                                    name: '等级:5级重度污染',
                                    yAxis: 100,
                                    lineStyle: {
                                        color: zdContaminated
                                    },
                                    label: {
                                        position: 'middle',
                                        formatter: '{b}',
                                        textStyle: {
                                            color: zdContaminated
                                        }
                                    }
                                }
                            ]
                        },
                        data: this.ydata1
                    }
                ]
            }
            myChartes.setOption(option)
            window.echartsArr.push(myChartes)
            setInterval(() => {
                myChartes.resize()
            }, 100)
        },
        gettableData() {
            if (this.title != JSON.parse(window.sessionStorage.getItem('Info')).deptName) {
                this.isfanhui = true
            } else {
                this.isfanhui = false
            }
            this.loading = true
            // let data = {
            //         statisticalType: this.formData.statisticalType,
            //         monitorFlag: 2,
            //         powerFlag: 2,
            //         reportFlag: this.interval,
            //         deptIndex: this.formData.deptIndex,
            //         searchBeginTime: this.timeValue[0],
            //         searchEndTime: this.timeValue[1],
            //       };
            this.changeName = this.changeName1
            this.item = this.$refs.interval.timeValue
            this.formData.reportFlag = this.interval
            // this.formData.deptIndex = this.deptIndex;
            this.formData.searchBeginTime = this.item[0]
            this.formData.searchEndTime = this.item[1]
            if (this.$refs.interval.intervald == 1) {
                this.formData.reportFlag = 1
            } else if (this.$refs.interval.intervald == 2) {
                this.formData.reportFlag = 2
            } else if (this.$refs.interval.intervald == 3) {
                this.formData.reportFlag = 3
            } else if (this.$refs.interval.intervald == 4) {
                this.formData.reportFlag = 4
            } else if (this.$refs.interval.intervald == 5) {
                this.formData.reportFlag = 5
            }
            api.deptSubstationRelations(this.formData).then(res => {
                if (res.code == 'A0000') {
                    this.tableData = res.data
                    var xarr = []
                    var yarr = []
                    let arr = []
                    var arr1 = []
                    res.data.forEach(element => {
                        xarr.push(element.name)
                        if (element.data == 0) {
                            element.data = 0.1
                            yarr.push(element.data)
                        }
                        yarr.push(element.data)
                        let p = {
                            name: element.name,
                            value: element.data
                        }
                        arr.push(p)
                        let d = element.name.split('\n')
                        let p1 = {
                            name: d[0],
                            value: element.data
                        }

                        arr1.push(p1)
                    })
                    this.dataList = arr1
                    // console.log('打印', this.dataList)
                    this.getMapData()
                    this.xdata = xarr

                    for (var i = 0; i < yarr.length; i++) {
                        if (yarr[i] == -1 || yarr[i] == 0) {
                            yarr[i] = 0.1
                        }
                    }
                    this.ydata = yarr

                    // this.eachartfalg = true
                }
                this.loading = false
                this.evaluation()
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');

.picker {
    width: 98%;
}
::v-deep .form-item--small.el-form-item {
    margin-bottom: 10px;
}
::v-deep .el-table__body-wrapper {
    height: calc(100% - 30px) !important;
    //overflow-x: scroll !important;
}
.xiaoshou {
    cursor: pointer;

    //height: calc(100vh - 108px);
}

.wzhi {
    position: absolute;
    //font-weight: 550;
    // margin-top: 10px;
    right: 20px;
    z-index: 1;
    font-size: 14px;
}
</style>
<style lang="scss" scoped>
.back {
    position: absolute;
    top: 25px;
    z-index: 999999999;
    margin-right: 10px;
    margin-left: auto;
    font-size: 29px;
    line-height: 32px;
    color: $themeColor;
    cursor: pointer;
    &:hover {
        color: $themeColor;
        opacity: 0.9;
    }
}
</style>
