<template>
    <div class="pd10">
        <div v-show="flg" v-loading="isLoading" element-loading-text="数据加载中">
            <el-form :inline="true" :model="formData">
                <el-form-item label="监测点等级:">
                    <el-select v-model="formData.lineGrade" placeholder="监测点等级" style="width: 160px">
                        <el-option
                            v-for="item in terminalClass"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <!-- <el-form-item>
          <Timeinterval ref="Timeinterval" :interval="2"></Timeinterval>
        </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" class="ml10" icon="el-icon-search">查询</el-button>
                </el-form-item>
                <!-- <el-form-item>
          <el-button type="primary" class="ml10" icon="el-icon-upload2"
            >导出</el-button
          ></el-form-item
        > -->
            </el-form>
            <div class="box">
                <div class="boxR" style="overflow: hidden" z>
                    <div style="width: 100%; height: 100%" id="electr4"></div>
                </div>

                <div class="boxL">
                    <el-table
                        stripe
                        header-cell-class-name="table_header"
                        :data="tableData"
                        style="width: 100%"
                        :height="vh + 'px'"
                        highlight-current-row
                        border
                    >
                        <el-table-column :resizable="false" prop="name" label="区域"></el-table-column>
                        <el-table-column :resizable="false" prop="value" label="监测点个数"></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Timeinterval from '@/views/components/Timeinterval.vue'
import { dicData } from '@/assets/commjs/dictypeData'
import { getLineDistribution } from '@/api/BusinessAdministrator/distribution'
export default {
    name: 'monitoringdistribution',
    components: {
        Timeinterval
    },
    props: {},
    data() {
        return {
            flg: true,
            isLoading: true,
            zoom: '', //图表焦点校验
            vh: undefined,
            formData: {
                lineGrade: '' //终端等级
                // searchBeginTime: "", //开始
                // searchEndTime: "", //结束
                // timeFlag: "", //区分时间
            },
            terminalClass: [], //终端等级
            tableData: []
        }
    },
    created() {
        this.getclassificationData()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)

        this.onSubmit()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 55
        },
        //获取类型
        getclassificationData() {
            //监测点等级
            this.terminalClass = dicData('Dev_Level', [])
            this.formData.lineGrade = this.terminalClass[0].id
        },
        onSubmit() {
            this.flg = true
            this.isLoading = true
            getLineDistribution(this.formData).then(res => {
                this.tableData = res.data
                this.chart()
                this.isLoading = false
            })
        },
        //点击切换
        details(e) {
            this.flg = false
        },
        chart() {
            let _this = this
            let echarts = require('echarts')
            let domID2 = document.getElementById('electr4')
            setTimeout(() => {
                ;(domID2.style.width = document.getElementById('app-main-in').offsetWidth - 430 + 'px'),
                    (domID2.style.height = window.sessionStorage.getItem('appheight') - 55 + 'px')
            }, 0)
            let myChart2 = echarts.init(domID2)
            let echartsData = []
            this.tableData.forEach(item => {
                echartsData.push(item)
            })
            // let maps=await map()
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            // let colors = ["#0ec7aa", "#33CCFF", "#FFCC00", "#FF6600", "#FF3300"];
            // let title = ["无污染", "轻微污染", "轻度污染", "中度污染", "重度污染"];
            // jquery.getJSON("/api1/system-boot/map", null, function(data) {
            _this.$axios.get('./static/mapjson/全国.json').then(data => {
                echarts.registerMap('china', data.data)
                let option = {
                    //   backgroundColor: '#060303', //地图背景色深蓝
                    tooltip: {
                        trigger: 'item',
                        showDelay: 0,
                        hideDelay: 0,
                        enterable: true,
                        transitionDuration: 0,
                        //提示框组件

                        axisPointer: {
                            type: 'shadow',
                            label: {
                                color: '#fff',
                                fontSize: 16
                            }
                        },
                        textStyle: {
                            color: '#fff',
                            fontStyle: 'normal',
                            opacity: 0.35,
                            fontSize: 14
                        },
                        backgroundColor: 'rgba(0,0,0,0.35)',
                        borderWidth: 0,
                        extraCssText: 'z-index:100',
                        formatter: function (params) {
                            var tips = ''
                            if (params.data == undefined) {
                                ;(tips += '区域:' + params.name + '<br/>'), (tips += '监测点个数:' + '暂无数据')
                            } else {
                                ;(tips += '区域:' + params.name + '<br/>'),
                                    (tips += '监测点个数:' + params.value + '个')
                            }
                            return tips
                        }
                    },
                    geo: {
                        show: true,
                        map: 'china',
                        roam: true,
                        top: 220,
                        left: 300,
                        zoom: 1.5,
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    color: echartsColor.WordColor,
                                    fontSize: 12,
                                    fontFamily: 'Arial'
                                }
                            }
                        },
                        select: {
                            // 地图选中区域样式
                            label: {
                                // 选中区域的label(文字)样式
                                color: '#fff'
                            },
                            itemStyle: {
                                // 选中区域的默认样式
                                areaColor: '#0075FF'
                            }
                        },
                        // label: {
                        //   emphasis: {
                        //     show: false
                        //   }
                        // },
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(147, 235, 248, 1)',
                                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, 235, 248, .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: '#389BB7',
                                borderWidth: 0
                            }
                        }
                    },

                    toolbox: {
                        show: true,

                        top: '25',
                        // iconStyle: {
                        //   borderColor: "crimson",
                        // },
                        feature: {
                            saveAsImage: {}
                        }
                    },

                    legend: {
                        //各标记图例
                        orient: 'vertical',
                        // id: 1,
                        top: '40px',
                        right: '40px',
                        itemWidth: 16,
                        itemHeight: 16,
                        itemGap: 28,
                        textStyle: {
                            color: echartsColor.WordColor,
                            rich: {
                                a: {
                                    verticalAlign: 'middle'
                                }
                            },
                            padding: [2, 0, 0, 0] //[上、右、下、左]
                        }
                    },
                    title: {
                        text: '',
                        left: 'left',
                        top: '60',
                        textStyle: {
                            color: '#C09611',
                            size: 20
                        }
                    },

                    visualMap: {
                        show: true,
                        left: '3%',
                        top: '6%',
                        itemHeight: 15,
                        itemWidth: 15,
                        pieces: [
                            {
                                gte: 0,
                                lt: 30,
                                label: '0-30(个)',
                                color: '#0ec7aa'
                            },
                            {
                                gte: 30,
                                lt: 60,
                                label: '30-60(个)',
                                color: '#33CCFF'
                            },
                            {
                                gte: 60,
                                lt: 80,
                                label: '60-80(个)',
                                color: '#FFCC00'
                            },
                            {
                                gte: 80,
                                lt: 100,
                                label: '80-100(个)',
                                color: '#FF6600'
                            },
                            {
                                gte: 100,
                                label: '>100(个)',
                                color: '#FF3300'
                            }
                        ],
                        textStyle: {
                            color: echartsColor.WordColor
                        }
                    },
                    series: [
                        {
                            type: 'map', //图表类型
                            geoIndex: 0,
                            data: echartsData //图表的数据
                        }
                    ]
                }
                myChart2.clear(option)
                option && myChart2.setOption(option)
                window.echartsArr.push(myChart2)
                setTimeout(function () {
                    myChart2.resize()
                }, 0)
            })
        }
    },

    computed: {},

    watch: {}
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');
::v-deep .el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__label {
    height: 32px;
}
.box {
    display: flex;
    .boxR {
        flex: 1;
    }
    .boxL {
        width: 400px;
    }
}
::v-deep .el-table .cell {
    text-align: center;
}
// ::v-deep .has-gutter{
//   height: 35px !important;
// }
</style>
