<template>
    <div class="pd10" v-loading="loading" element-loading-text="数据加载中">
        <el-row>
            <el-col>
                <el-tabs v-model="activeName" type="border-card" :style="'height:' + vh">
                    <el-form :inline="true" :model="form" class="demo-form-inline">
                        <el-form-item>
                            <Area @click="handleNodeClick" ref="area" class="box"></Area>
                        </el-form-item>

                        <el-form-item>
                            <Timeinterval :interval="3" ref="Timeinterval"></Timeinterval>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="queryData">查询</el-button>
                        </el-form-item>
                    </el-form>
                    <el-tab-pane label="区域暂态评估" name="first">
                        <el-row id="echarts">
                            <div class="wzhi">
                                <el-button type="text" icon="el-icon-download" title="生成图片" @click="download">
                                    下载
                                </el-button>
                            </div>
                            <el-col :span="12" id="zjpg">
                                <svg-icon v-show="isfanhui" class="back" icon-class="back" @click="fanhui" />
                                <div id="china" style="height: 100%" ref="fgzjpg"></div>
                            </el-col>
                            <el-col :span="12" id="zjpgz">
                                <!-- <el-col :style="'height:' + vth + 'px'"> -->
                                <div :style="`height: ${vhh};overflow: hidden`">
                                    <div id="echartzhu" style="height: 100%" ref="fgszj"></div>
                                </div>
                                <!-- </el-col> -->
                                <!-- <el-row> -->
                                <el-table
                                    class="xiaoshou"
                                    stripe
                                    :data="areaData"
                                    :height="vth"
                                    border
                                    header-cell-class-name="table_header"
                                    highlight-current-row
                                >
                                    <el-table-column label="区域" prop="areaName"></el-table-column>
                                    <el-table-column label="区域暂降评估" prop="ci">
                                        <template slot-scope="scope">
                                            {{ scope.row.ci == 0.05 ? '暂无数据' : scope.row.ci.toFixed(2) }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="等级" sortable prop="isCount">
                                        <template slot-scope="scope">
                                            <span v-show="scope.row.ci == 0.05">暂无等级</span>
                                            <span
                                                v-show="
                                                    scope.row.ci !== 0.05 && scope.row.ci >= 0.2 && scope.row.ci < 0.4
                                                "
                                            >
                                                1级
                                            </span>
                                            <span
                                                v-show="
                                                    scope.row.ci !== 0.05 && scope.row.ci >= 0.4 && scope.row.ci < 0.8
                                                "
                                            >
                                                2级
                                            </span>
                                            <span
                                                v-show="
                                                    scope.row.ci !== 0.05 && scope.row.ci >= 0.8 && scope.row.ci < 1.2
                                                "
                                            >
                                                3级
                                            </span>
                                            <span v-show="scope.row.ci !== 0.05 && scope.row.ci >= 1.2">4级</span>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <div class="dw">
                                    <span class="level" @mouseover="mouseOver" @mouseout="mouseOut">
                                        详细区域暂降评估等级
                                    </span>
                                    <el-table
                                        stripe
                                        :data="areaData1"
                                        style="width: 100%"
                                        border
                                        v-show="showDetails"
                                        header-cell-class-name="table_header"
                                        highlight-current-row
                                    >
                                        <el-table-column label="等级" prop="level" min-width="90"></el-table-column>
                                        <el-table-column label="1级" prop="one" min-width="80"></el-table-column>
                                        <el-table-column label="2级" prop="two" min-width="90"></el-table-column>
                                        <el-table-column label="3级" prop="three" min-width="90"></el-table-column>
                                        <el-table-column label="4级" prop="four" min-width="90"></el-table-column>
                                    </el-table>
                                </div>
                                <!-- </el-row> -->
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import yan from '@/assets/commjs/color'
import html2canvas from 'html2canvas'
import * as myEchart from 'echarts'
import { getBalanceInfo } from '@/api/sagSeverity.js'
import { dicData } from '@/assets/commjs/dictypeData'
import Area from '@/views/components/Area/Area.vue'
import Timeinterval from '@/views/components/TimePicker/index4'
export default {
    name: 'transientassessment',
    components: { Area, Timeinterval },
    data() {
        return {
            form: {
                deptId: JSON.parse(window.sessionStorage.getItem('Info')).deptId
            },
            statisticalType: {},
            loading: false,
            showDetails: false,
            zoom: '',
            name: JSON.parse(window.sessionStorage.getItem('Info')).deptName,
            areaData: [],
            areaData1: [
                {
                    level: '相对得分',
                    one: '[0,0.4]',
                    two: '(0.4,0.8)',
                    three: '(0.8,1.2)',
                    four: '(1.2,+∞)'
                }
            ],
            lineGradeoption: [
                { id: '0', name: '极重要' },
                { id: '1', name: '重要' },
                { id: '2', name: '普通' },
                { id: '3', name: '不重要' }
            ],
            loading: false,
            sera: '',
            activeName: 'first', //区分是那个节点
            vh: null,
            vhh: null,
            vth: null,

            allData: [],
            //mapname:'中国',
            jsonName: 'zhonguo',
            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')
            },
            isfanhui: false,
            myChart: null,
            myChartes: ''
        }
    },

    created() {
        this.getclassificationData()
    },
    mounted() {
        ;(this.$refs.Timeinterval.timeOptions = [
            { label: '年份', value: 1 },
            { label: '季度', value: 2 },
            { label: '月份', value: 3 }
            // { label: "周", value: 4 },
            // { label: "自定义", value: 5 },
        ]),
            this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.resizeEchartm()
        this.resizeEchartZ()

        this.queryData()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.zoom = 1 / document.body.style.zoom
            this.vh = window.sessionStorage.getItem('appheight') - 10 + 'px'
            this.vhh = window.sessionStorage.getItem('appheight') - 460 + 'px'
            this.vth = window.sessionStorage.getItem('appheight') / 2 - 80 + 'px'
            if (this.myChartes !== '') {
                this.myChartes.resize()
            }
        },
        resizeEchartZ() {
            var elementResizeDetectorMaker = require('element-resize-detector')
            var erd = elementResizeDetectorMaker()
            erd.listenTo(document.getElementById('zjpgz'), element => {
                // let  domeId=document.getElementById("ceshi")
                let domeId2 = document.getElementById('echartzhu')
                domeId2.style.width = document.getElementById('zjpgz').offsetWidth - 0 + 'px'
                if (this.myChartes !== '') {
                    this.myChartes.resize()
                }
            })
        },
        resizeEchartm() {
            var elementResizeDetectorMaker = require('element-resize-detector')
            var erd = elementResizeDetectorMaker()
            erd.listenTo(document.getElementById('zjpg'), element => {
                // let  domeId=document.getElementById("ceshi")
                let domeId2 = document.getElementById('china')
                domeId2.style.width = document.getElementById('zjpg').offsetWidth - 0 + 'px'
                if (this.myChart != null) {
                    this.myChart.resize()
                }
            })
        },
        //获取统计类型
        getclassificationData() {
            var code = 'Statistical_Type'
            this.classificationData = dicData(code, ['Report_Type'])
            this.statisticalType = this.classificationData[0]
        },
        // 查询
        queryData() {
            this.loading = true
            if (this.name != JSON.parse(window.sessionStorage.getItem('Info')).deptName) {
                this.isfanhui = true
            } else {
                this.isfanhui = false
            }
            let data = {
                deptId: this.form.deptId,
                loadType: null,
                // manufacturer: null,
                // monitorFlag: 2,
                // powerFlag: 1,
                // reportFlag: 3,
                // scale: null,
                startTime: this.$refs.Timeinterval.timeValue[0],
                endTime: this.$refs.Timeinterval.timeValue[1]
                // serverName: "",
                // statFlag: true,
                // statisticalType: this.statisticalType,
                // timeFlag: this.$refs.Timeinterval.intervald == 3 ? 0 : 1,
            }
            this.allData = []
            getBalanceInfo(data).then(res => {
                res.data.forEach(item => {
                    this.allData.push({
                        name: item.areaName,
                        value: item.ci
                    })
                })
                this.areaData = res.data
                this.initEchartMap()
                this.getsagSeevrity()
                this.loading = false
            })
            // this.getMapdata()
        },
        //返回
        fanhui() {
            this.isfanhui = false
            this.$refs.area.form.valueTitle = JSON.parse(window.sessionStorage.getItem('Info')).deptName
            ;(this.form.deptId = JSON.parse(window.sessionStorage.getItem('Info')).deptId),
                (this.name = JSON.parse(window.sessionStorage.getItem('Info')).deptName)
            this.queryData()

            // let data = {
            //   deptIndex: this.form.deptIndex,
            //   loadType: null,
            //   manufacturer: null,
            //   monitorFlag: 2,
            //   powerFlag: 1,
            //   reportFlag: 3,
            //   scale: null,
            //   searchBeginTime: this.$refs.Timeinterval.timeValue[0],
            //   searchEndTime: this.$refs.Timeinterval.timeValue[1],
            //   serverName: "",
            //   statFlag: true,
            //   statisticalType: this.statisticalType,
            //   timeFlag: this.$refs.Timeinterval.intervald == 3 ? 0 : 1,
            // };
            // this.isfanhui = false;
            // this.allData = [];
            // getBalanceInfo(data).then((res) => {
            //   res.data.areaValue.forEach((item) => {
            //     this.allData.push({
            //       name: item[0],
            //       value: item[1],
            //     });
            //   });
            //   this.initEchartMap();
            // });
        },
        handleNodeClick(data) {
            this.form.deptId = data.id
            this.name = data.name
            // this.$refs.area.form.options[0].children.forEach((item) => {
            //   item.children.forEach((item1) => {
            //     if (this.name == item1.areaName) {
            //       this.name = item.areaName;
            //     }
            //     item1.children.forEach((item2) => {
            //       if (this.name == item2.areaName) {
            //         this.name = item.areaName;
            //       }
            //     });
            //   });
            // });
        },
        //获取地图
        initEchartMap() {
            let echarts = require('echarts')
            let mapDiv = document.getElementById('china')
            setTimeout(() => {
                mapDiv.style.width = window.sessionStorage.getItem('appwidth') / 2 - 25 + 'px'
                mapDiv.style.height = window.sessionStorage.getItem('appheight') - 120 + 'px'
            }, 0)
            let obj = {
                name: this.name,
                scatterData: [], // 撒点数据
                mapData: [], // 面板数据
                index: 0 // 0:中国,1:省,2:市场
            }

            myEchart.registerMap(
                obj.name,
                this.provinces[obj.name] == undefined ? this.provinces['中国'] : this.provinces[obj.name]
            )
            this.myChart = myEchart.init(mapDiv)
            this.renderMap(obj)
            window.onresize = () => {
                this.myChart.resize()
            }
            this.myChartClick()
        },
        //渲染地图
        renderMap(obj) {
            const keyName = obj.name
            let option = {
                title: {
                    text: '区域暂降评估',
                    left: 'center',
                    top: '3%'
                },
                tooltip: {
                    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 = ''

                        for (var i = 0; i < params.length; i++) {
                            if (params[i].value == 0) {
                                tips += params[i].name + '</br>'
                                tips += '评估值:暂无数据'
                            } else {
                                tips += params[i].name + '</br>'
                                tips += '评估值:' + params[i].value
                            }
                        }
                        return tips
                    }
                },
                visualMap: {
                    min: 0,
                    max: 2,
                    left: 26,
                    bottom: 20,
                    showLabel: !0,

                    pieces: [
                        {
                            gt: -2,
                            lte: -1,
                            label: '无数据'
                        },
                        {
                            gte: 0,
                            lte: 0.4,
                            label: '1级--相对得分 [0,0.4]'
                        },
                        {
                            gt: 0.4,
                            lte: 0.9,
                            label: '2级--得分 (0.4,0.8]'
                        },
                        {
                            gt: 0.9,
                            lte: 1.2,
                            label: '3级--相对得分 (0.8,1.2]'
                        },
                        {
                            gt: 1.2,
                            label: '4级--相对得分 (1.2,+∞]'
                        }
                    ],
                    inRange: {
                        color: ['#ccc', '#CC0000', '#FF9900', '#3399CC', '#339966']
                    },
                    show: !0
                },
                geo: {
                    type: 'map',
                    map: keyName,
                    roam: true,
                    zoom: obj.name == '海南' ? 5 : 1.1,
                    top: obj.name == '海南' ? 1300 : 100,
                    left: obj.name == '海南' ? 700 : 'center',
                    label: {
                        normal: {
                            show: true,
                            fontSize: '14',
                            color: 'rgba(0,0,0,0.7)'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(51, 69, 129, .8)', //地图背景色
                            borderColor: '#999999',
                            borderWidth: 1,
                            areaColor: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 0.8,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(147, 135, 148, .2)' // 100% 处的颜色
                                    }
                                ],
                                globalCoord: false // 缺省为 false
                            },
                            shadowColor: 'rgba(128, 217, 248, 1)',
                            // shadowColor: 'rgba(255, 255, 255, 1)',
                            shadowOffsetX: -2,
                            shadowOffsetY: 2,
                            shadowBlur: 10
                        },
                        emphasis: {
                            areaColor: '#ccc',
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            borderWidth: 0
                        }
                    }
                },
                series: [
                    {
                        // type: "scatter",
                        type: 'map',
                        name: '暂降严重度',
                        mapName: name,
                        coordinateSystem: 'geo',
                        geoIndex: 0,
                        animation: false, //坐标点是否显示动画
                        roam: true,
                        selectedMode: 'false', //是否允许选中多个区域
                        symbol: 'pin',
                        rippleEffect: {
                            brushType: 'fill' // stroke|fill
                        },
                        symbolSize: function (val, params) {
                            //坐标点大小
                            return 30
                        },
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                label: {
                                    show: true
                                }
                            }
                        },
                        data: this.allData
                    }
                ]
            }
            this.myChart.setOption(option, true)
            window.echartsArr.push(this.myChart)
            let _this = this
            _this.$erd.listenTo(_this.$refs.fgzjpg, element => {
                _this.$nextTick(() => {
                    // DomeId.style.width =document.getElementById("zjpg").offsetWidth-0+'px'
                    this.myChart.resize()
                })
            })
            setTimeout(() => {
                this.myChart.resize()
            }, 100)
        },
        //地图点击事件
        myChartClick() {
            // debugger
            //  document.body.removeEventListener('touchmove',bodyScroll,false);
            this.myChart.off('click') //取消echarts 点击事件
            this.myChart.on('click', params => {
                // alert(2122)
                // debugger
                const { name } = params
                this.isfanhui = true
                this.$refs.area.form.options[0].children.forEach(item => {
                    if (item.name == name) {
                        this.name = name
                        this.$refs.area.form.valueTitle = item.name
                        this.form.deptIndex = item.id
                        let data = {
                            deptId: item.id,
                            // lineGrade: this.form.lineGrade,
                            // loadType: null,
                            // manufacturer: null,
                            // monitorFlag: 2,
                            // powerFlag: 1,
                            // reportFlag: 3,
                            // scale: null,
                            startTime: this.$refs.Timeinterval.timeValue[0],
                            endTime: this.$refs.Timeinterval.timeValue[1]
                            // serverName: "",
                            // statFlag: true,
                            // statisticalType: this.statisticalType,
                            // timeFlag: this.$refs.Timeinterval.intervald == 3 ? 0 : 1,
                        }
                        this.isfanhui = false
                        this.allData = []
                        getBalanceInfo(data).then(res => {
                            res.data.forEach(item => {
                                this.allData.push({
                                    name: item.areaName,
                                    value: item.ci
                                })
                            })
                            this.areaData = res.data
                            this.getsagSeevrity()
                            if (name != '中国') {
                                this.isfanhui = true
                            }
                            let obj = {
                                name,
                                scatterData: [],
                                mapData: [],
                                index: 0
                            }
                            myEchart.registerMap(name, this.provinces[name])
                            this.renderMap(obj)
                            this.loading = false
                        })
                        return
                    } else {
                        // this.$refs.area.form.valueTitle = name;
                        let obj = {
                            name,
                            scatterData: [],
                            mapData: [],
                            index: 0
                        }
                        // if (params.seriesType === "map" ) {
                        if (name != '中国') {
                            this.isfanhui = true
                        }
                        myEchart.registerMap(name, this.provinces[name])
                        this.renderMap(obj)
                        this.loading = false
                    }
                })

                // let obj = {
                //   name,
                //   scatterData: [],
                //   mapData: [],
                //   index: 0,
                // };
                // // if (params.seriesType === "map" ) {
                // if (name != "中国") {
                //   this.isfanhui = true;
                // }
                // myEchart.registerMap(name, this.provinces[name]);
                // //重新渲染地图
                // this.renderMap(obj);
                // }
            })
        },
        mouseOver() {
            this.showDetails = true
        },
        mouseOut() {
            this.showDetails = false
        },
        //获取柱状图
        getsagSeevrity() {
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let xdata = []
            let xVal = []
            this.areaData.forEach(item => {
                if (item.ci == 0) {
                    item.ci = 0.05
                }
                xdata.push(item.areaName)
                xVal.push(item.ci.toFixed(2))
            })
            const echarts = require('echarts')
            let DomeId = document.getElementById('echartzhu')
            setTimeout(() => {
                DomeId.style.width = document.getElementById('zjpgz').offsetWidth - 0 + 'px'
                DomeId.style.height = window.sessionStorage.getItem('appheight') - 460 + 'px'
            }, 0)
            var myChartes = echarts.init(DomeId)
            this.myChartes = myChartes
            myChartes.clear()
            let option = {
                title: {
                    text: this.name,
                    left: '45%',
                    top: '15',
                    textStyle: {
                        color: echartsColor.WordColor,
                        fontSize: yan.EchartObject.titleNamefontSize1
                    }
                },
                legend: {
                    data: [''],
                    top: '10%',
                    right: '4%',
                    textStyle: {
                        color: echartsColor.WordColor
                    }
                },
                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 = ''
                        for (var i = 0; i < params.length; i++) {
                            if (params[i].value == 0.05) {
                                tips += params[i].name + '</br>'
                                tips += '评估值:0'
                            } else {
                                tips += params[i].name + '</br>'
                                tips += '评估值:' + params[i].value
                            }
                        }
                        return tips
                    },
                    borderWidth: 0
                },
                // grid: yan.EchartObject.grid3,
                grid: {
                    top: '80px', // 等价于 y: '16%'
                    left: '10px',
                    right: '50px',
                    bottom: '40px',
                    containLabel: true
                },
                dataZoom: yan.EchartObject.dataZoom,
                color: echartsColor.FigureColor,
                xAxis: {
                    type: 'category',
                    name: '(区域)',
                    axisLine: {
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            fontFamily: yan.EchartObject.fontFamily,
                            color: echartsColor.WordColor,
                            fontSize: yan.EchartObject.xNamefontSize
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    data: xdata
                },
                yAxis: {
                    type: 'value',
                    name: ' 等级',
                    min: 0,
                    max: 2,
                    minInterval: 0.2,
                    axisLabel: {
                        fontSize: yan.EchartObject.yNamefontSize,
                        color: echartsColor.WordColor,
                        formatter: function (value, index) {
                            var texts = []
                            if (value === 0.4) {
                                texts.push('1级')
                            } else if (value === 0.8) {
                                texts.push('2级')
                            } else if (value === 1.2) {
                                texts.push('3级')
                            } else if (value === 2) {
                                texts.push('4级')
                            }
                            return texts
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: [echartsColor.thread],
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                },
                series: [
                    {
                        name: '',
                        data: xVal,
                        barWidth: 30,
                        barMaxWidth: yan.EchartObject.barMaxWidth,
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                // 随机显示
                                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                                // 定制显示（按顺序）
                                color: function (params) {
                                    if (params.value > 2 && params.value !== 0.05) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: yan.ColorObject.noContaminated
                                                }
                                            ],
                                            false
                                        )
                                    } else if (0.8 < params.value && params.value <= 1.2 && params.value !== 0.05) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: yan.ColorObject.qwContaminated
                                                }
                                            ],
                                            false
                                        )
                                    } else if (0.4 < params.value && params.value <= 0.8 && params.value !== 0.05) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: yan.ColorObject.centerContaminated
                                                }
                                            ],
                                            false
                                        )
                                    } else if (0 < params.value && params.value <= 0.4 && params.value !== 0.05) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: yan.ColorObject.zdContaminated
                                                }
                                            ],
                                            false
                                        )
                                    } else if (params.value == 0.05) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: yan.ColorObject.zdContaminated
                                                }
                                            ],
                                            false
                                        )
                                    }
                                }
                            }
                        },
                        markLine: {
                            silent: false,
                            symbol: 'circle',
                            lineStyle: {
                                color: 'red',
                                width: 1
                            },
                            emphasis: {
                                lineStyle: {
                                    width: 1
                                }
                            },
                            data: [
                                {
                                    name: '',
                                    yAxis: 0.4,
                                    lineStyle: {
                                        color: yan.ColorObject.zdContaminated
                                    },
                                    label: {
                                        // position: "middle",
                                        formatter: '{b}',
                                        textStyle: {
                                            color: yan.ColorObject.zdContaminated
                                        }
                                    }
                                },
                                {
                                    name: '',
                                    yAxis: 0.8,
                                    lineStyle: {
                                        color: yan.ColorObject.centerContaminated
                                    },
                                    label: {
                                        // position: "middle",
                                        formatter: '{b}',
                                        textStyle: {
                                            color: yan.ColorObject.centerContaminated
                                        }
                                    }
                                },
                                {
                                    name: '',
                                    yAxis: 1.2,
                                    lineStyle: {
                                        color: yan.ColorObject.qwContaminated
                                    },
                                    label: {
                                        // position: "middle",
                                        formatter: '{b}',
                                        textStyle: {
                                            color: yan.ColorObject.qwContaminated
                                        }
                                    }
                                },
                                {
                                    name: '',
                                    yAxis: 2,
                                    lineStyle: {
                                        color: yan.ColorObject.noContaminated
                                    },
                                    label: {
                                        // position: "middle",
                                        formatter: '{b}',
                                        textStyle: {
                                            color: yan.ColorObject.noContaminated
                                        }
                                    }
                                }
                            ]
                        },
                        label: {
                            show: false,
                            position: 'top',
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            },

                            fontSize: 12
                        }
                    }
                ]
            }
            myChartes.setOption(option)
            window.echartsArr.push(myChartes)
            setTimeout(() => {
                myChartes.resize()
            }, 100)
            // myChart.resize();
            let _this = this
            _this.$erd.listenTo(_this.$refs.fgszj, element => {
                _this.$nextTick(() => {
                    DomeId.style.width = document.getElementById('zjpgz').offsetWidth - 0 + 'px'
                    myChartes.resize()
                })
            })

            // window.onresize = function() {
            //   myChart.resize();
            // };

            // this.$nextTick(() => {
            //   this.initEchartMap();
            // });
        },
        // dmo元素里的内容转换为canvas,并将canvas下载为图片
        download() {
            // 转换成canvas
            html2canvas(document.getElementById('echarts'), {
                scale: 2
            }).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() // 下载之后把创建的元素删除
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');
::v-deep .el-table .cell {
    text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}
.block {
    margin-top: 10px;
}
.juyu {
    border: 1px solid #ddd;
}
.dw {
    position: absolute;
    top: 0px;
    right: 50px;
    width: 445px;
    z-index: 2;
    .level {
        color: red;
        position: absolute;
        top: -20px;
        right: 20px;
        cursor: pointer;
    }
}
.wzhi {
    position: absolute;
    //font-weight: 550;
    // margin-top: 10px;
    top: 0;
    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;
    }
}
.xiaoshou {
    cursor: pointer !important;
}
</style>
