<template>
    <div class="pd10">
        <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 label="监测点等级:">
                            <el-select
                                v-model="form.lineGrade"
                                multiple
                                collapse-tags
                                placeholder="请选择电压等级"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in lineGradeoption"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <Timeinterval :interval="3" ref="interval"></Timeinterval>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" class="ml10" icon="el-icon-search" @click="queryData">
                                查询
                            </el-button>
                        </el-form-item>
                    </el-form>
                    <el-tab-pane label="地图测试" name="first">
                        <el-row>
                            <el-col :span="12">
                                <div id="china" style="height: 100%" ref="fg" v-loading="isLoading"></div>
                            </el-col>
                            <el-col :span="12">
                                <el-row>
                                    <el-table
                                        stripe
                                        :data="areaData"
                                        :height="vth"
                                        border
                                        v-loading="isLoading"
                                        header-cell-class-name="table_header"
                                    >
                                        <el-table-column label="区域" prop="areaName"></el-table-column>
                                        <el-table-column label="暂降点次数" prop="eventNum"></el-table-column>
                                        <el-table-column label="暂降点个数" prop="lineNum"></el-table-column>
                                    </el-table>
                                </el-row>
                                <el-col :style="'height:' + vth + 'px'">
                                    <div id="echartzhu" style="height: 100%" ref="fgs" v-loading="isLoading"></div>
                                </el-col>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import * as myEchart from 'echarts'
import { getEventSeverity } from '@/api/sagSeverity.js'
import { dicData } from '@/assets/commjs/dictypeData'
import Area from '@/views/components/Area/Area.vue'
import Timeinterval from '@/views/components/Timeinterval.vue'
export default {
    components: { Area, Timeinterval },
    data() {
        return {
            form: {
                deptIndex: '',
                lineGrade: ''
            },
            statisticalType: null,
            isLoading: false,
            zoom: '',
            areaData: [],
            lineGradeoption: [],
            sera: '',
            activeName: 'first', //区分是那个节点
            vh: null,
            vth: null,
            vmh: null,
            vzh: null,
            options: [
                {
                    value: '全国',
                    label: '全国'
                },
                {
                    value: '湖南省',
                    label: '湖南省'
                },
                {
                    value: '选项3',
                    label: '蚵仔煎'
                },
                {
                    value: '选项4',
                    label: '龙须面'
                },
                {
                    value: '选项5',
                    label: '北京烤鸭'
                }
            ],
            value: '江苏省',
            mapData: [
                {
                    srbName: '南京',
                    coordY: 118.801847,
                    coordX: 32.094268,
                    color: 'green',
                    vlaue: 100
                    // srbNO:'4343',
                    // deptName:'南京',
                    // srbType:'电力',
                    // trade:'储能',
                    // riskLevel:'陈先生',
                    // inchargeTel:'陈先生',
                    // inCharge_Safety:'kkjs',
                    // a_Company:'jdksfj'
                },
                {
                    srbName: '江宁',
                    coordY: 118.903859,
                    coordX: 32.195278,
                    color: 'red'
                },
                {
                    srbName: '合肥',
                    coordY: 117.322553,
                    coordX: 31.891106,
                    color: 'green'
                },
                {
                    srbName: '北京',
                    coordY: 116.401314,
                    coordX: 39.916458,
                    color: 'red'
                },
                {
                    srbName: '重庆',
                    coordY: 106.551861,
                    coordX: 29.579873,
                    color: 'red'
                },
                {
                    srbName: '武汉',
                    coordY: 114.273057,
                    coordX: 30.626191,
                    color: 'green'
                },
                {
                    srbName: '广州',
                    coordY: 113.219812,
                    coordX: 23.163485,
                    color: 'green'
                },
                {
                    srbName: '昆明',
                    coordY: 102.788544,
                    coordX: 24.937427,
                    color: 'green'
                }
            ],
            allData: [
                {
                    name: '北京市',
                    value: 60
                },
                {
                    name: '天津市',
                    value: 10
                },
                {
                    name: '上海市',
                    value: 50
                },
                {
                    name: '重庆市',
                    value: 9
                },
                {
                    name: '河北省',
                    value: 25
                },
                {
                    name: '河南省',
                    value: 18
                },
                {
                    name: '云南省',
                    value: 0
                },
                {
                    name: '辽宁省',
                    value: 11
                },
                {
                    name: '黑龙江省',
                    value: 0
                },
                {
                    name: '湖南省',
                    value: 39
                },
                {
                    name: '安徽省',
                    value: 17
                },
                {
                    name: '山东省',
                    value: 33
                },
                {
                    name: '新疆省',
                    value: 0
                },
                {
                    name: '江苏省',
                    value: 45
                },
                {
                    name: '浙江省',
                    value: 58
                },
                {
                    name: '江西省',
                    value: 28
                },
                {
                    name: '湖北省',
                    value: 56
                },
                {
                    name: '广西省',
                    value: 13
                },
                {
                    name: '甘肃省',
                    value: 0
                },
                {
                    name: '山西省',
                    value: 6
                },
                {
                    name: '内蒙古省',
                    value: 0
                },
                {
                    name: '陕西省',
                    value: 0
                },
                {
                    name: '吉林省',
                    value: 2
                },
                {
                    name: '福建省',
                    value: 35
                },
                {
                    name: '贵州省',
                    value: 0
                },
                {
                    name: '广东省',
                    value: 58
                },
                {
                    name: '青海省',
                    value: 0
                },
                {
                    name: '西藏自治区',
                    value: 1
                },
                {
                    name: '四川省',
                    value: 9
                },
                {
                    name: '宁夏回族自治区',
                    value: 0
                },
                {
                    name: '海南省',
                    value: 0
                },
                {
                    name: '台湾省',
                    value: 0
                },
                {
                    name: '香港特别行政区',
                    value: 0
                },
                {
                    name: '澳门别行政区',
                    value: 0
                }
            ],
            //mapname:'全国',
            jsonName: 'jiangsu',
            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
        }
    },

    created() {
        this.getclassificationData()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)

        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.vth = window.sessionStorage.getItem('appheight') / 2 - 148 + 'px'
            if (this.myChartes) {
                this.myChartes.resize()
            }
        },
        //获取统计类型
        getclassificationData() {
            var code = 'Statistical_Type'
            this.classificationData = dicData(code, ['Report_Type'])
            this.statisticalType = this.classificationData[0]
        },
        // 查询
        queryData() {
            let data = {
                deptIndex: this.form.deptIndex,
                lineGrade: '',
                loadType: null,
                manufacturer: null,
                monitorFlag: 2,
                powerFlag: 1,
                reportFlag: 3,
                scale: null,
                searchBeginTime: '',
                searchEndTime: '',
                serverName: '',
                statFlag: true,
                statisticalType: this.statisticalType,
                timeFlag: 1
            }
            getEventSeverity(data).then(res => {
                //this.areaData = res.data.eventSeverityValue;
            })
            // this.getMapdata()
            this.$nextTick(() => {
                this.initEchartMap()
                this.getsagSeevrity()
            })
        },
        handleNodeClick(data) {
            this.form.deptIndex = data.id
        },
        onSubmit() {},
        //获取地图
        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: '江苏省',
                scatterData: [], // 撒点数据
                mapData: [], // 面板数据
                index: 0 // 0:全国,1:省,2:市场
            }
            myEchart.registerMap(obj.name, 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: '5%'
                },
                tooltip: {
                    trigger: 'item'
                },
                visualMap: {
                    min: 0,
                    max: 1000,
                    left: 26,
                    bottom: 40,
                    showLabel: !0,
                    text: ['高', '低'],
                    pieces: [
                        {
                            gt: 50,
                            label: '严重度--5级'
                        },
                        {
                            gt: 30,
                            lte: 50,
                            label: '严重度--4级'
                        },
                        {
                            gt: 10,
                            lte: 30,
                            label: '严重度--3级'
                        },
                        {
                            gt: 0,
                            lte: 10,
                            label: '严重度--2级'
                        },
                        {
                            lte: 0,
                            label: '严重度--1级'
                        }
                    ],
                    inRange: {
                        color: ['#ff0000', '#ff6633', '#cccc33', '#66ff33', '#00cc66']
                    },
                    show: !0
                },
                geo: {
                    type: 'map',
                    map: keyName,
                    roam: true,
                    zoom: 1.2,
                    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.mapData.map(function (itemOpt) {
                        //   // console.log(itemOpt);
                        //   return {
                        //     name: itemOpt.srbName,
                        //     value: [
                        //       parseFloat(itemOpt.coordY), //经度
                        //       parseFloat(itemOpt.coordX), //维度
                        //     ],

                        //     itemStyle: {
                        //       //地图区域的多边形
                        //       normal: {
                        //         color: itemOpt.color, //坐标点颜色
                        //         shadowBlur: 0, // 图形阴影的模糊大小
                        //         shadowOffsetX: 0, // 阴影水平方向上的偏移距离。
                        //       },
                        //     },
                        //     tooltip: {
                        //       //仅在 options中最外层的 tooltip.trigger 为 'item'时有效
                        //       position: "bottom", //提示框位置,仅在 options中最外层的 tooltip.trigger 为 'item'时有效
                        //       formatter: function (params, ticket, callback) {
                        //         var strHtml = "<div>";
                        //         strHtml += '<table class="table">';
                        //         strHtml +=
                        //           '<tr><td colspan="4" style="text-align:center">' +
                        //           itemOpt.srbName +
                        //           "</td></tr>";
                        //         // strHtml += '<tr><td>项目编号：</td><td>' + itemOpt.srbNO + '</td><td>项目名称：</td><td>' + itemOpt.srbName + '</td></tr>';
                        //         // strHtml += '<tr><td>所属部门：</td><td>' + itemOpt.deptName + '</td></tr>';
                        //         // strHtml += '<tr><td>项目类型：</td><td>' + itemOpt.srbType + '</td><td>合同金额(万元)：</td><td>' + itemOpt.contractMoney + '</td></tr>';
                        //         // strHtml += '<tr><td>业务行业：</td><td>' + itemOpt.trade + '</td><td>业务类型：</td><td>' + itemOpt.category + '</td></tr>';
                        //         // strHtml += '<tr><td>业务等级：</td><td>' + itemOpt.riskLevel + '</td><td>单位负责人：</td><td>' + itemOpt.incharge + '</td></tr>';
                        //         // strHtml += '<tr><td>单位负责人电话：</td><td>' + itemOpt.inchargeTel + '</td><td>项目负责人：</td><td>' + itemOpt.p_Incharge + '</td></tr>';
                        //         // strHtml += '<tr><td>安全负责人：</td><td>' + itemOpt.inCharge_Safety + '</td><td>安全负责人电话：</td><td>' + itemOpt.inChargeTel_Safety + '</td></tr>';
                        //         // strHtml += '<tr><td>甲方单位：</td><td>' + itemOpt.a_Company + '</td><td>施工地点：</td><td>'+itemOpt.srbAddress+'</td></tr>';
                        //         // strHtml += '</table>';
                        //         strHtml += "</div>";
                        //         return strHtml;
                        //       },
                        //     },
                        //   };
                        // }),
                        data: this.allData
                    }
                ]
            }
            this.myChart.setOption(option, true)
            window.echartsArr.push(this.myChart)
            setTimeout(() => {
                this.myChart.resize()
            }, 100)
        },
        //地图点击事件
        myChartClick() {
            // debugger
            this.myChart.on('click', params => {
                // alert(2122)
                // debugger
                const { name } = params
                let obj = {
                    name,
                    scatterData: [],
                    mapData: [],
                    index: 0
                }
                // if (params.seriesType === "map" ) {
                myEchart.registerMap(name, this.provinces[name])
                //重新渲染地图
                this.renderMap(obj)
                // }
            })
        },
        //获取柱状图
        getsagSeevrity() {
            let xdata = []
            let ydata = []
            const echarts = require('echarts')
            let DomeId = document.getElementById('echartzhu')
            setTimeout(() => {
                DomeId.style.width = window.sessionStorage.getItem('appwidth') / 2 - 25 + 'px'
                DomeId.style.height = window.sessionStorage.getItem('appheight') / 3 + 225 + 'px'
            }, 0)
            var myChartes = echarts.init(DomeId)
            myChartes.clear()
            let option = {
                title: {
                    text: '各区域暂降次数',
                    left: '45%',
                    top: '15',
                    textStyle: {
                        fontWeight: '400',
                        color: '#444',
                        fontSize: 16
                    }
                },
                legend: {
                    data: ['暂降次数'],
                    top: '10%',
                    right: '4%',
                    textStyle: {
                        color: '#333'
                    }
                },
                tooltip: {
                    //   trigger: "item", //默认效果
                    //柱状图加阴影
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            show: true
                        }
                    }
                },
                grid: {
                    top: '50px',
                    left: '2%',
                    right: '3%',
                    bottom: '2%',
                    containLabel: true
                },
                color: ['#31c2b0'],
                xAxis: {
                    type: 'category',
                    textStyle: {
                        color: '#ccc'
                    },
                    data: [
                        '江苏省',
                        '浙江省',
                        '广东省',
                        '重庆市',
                        '上海市',
                        '河北省',
                        '北京市',
                        '湖南省',
                        '安徽省',
                        '天津市',
                        '辽宁省',
                        '福建省'
                    ]
                },
                yAxis: {
                    type: 'value',
                    name: '(监测点个数)',
                    axisLine: {
                        show: true
                    },
                    textStyle: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '暂降次数',
                        data: [38, 42, 50, 157, 40, 45, 60, 140, 36, 47, 54, 143],
                        barWidth: 30,
                        barMaxWidth: 30,
                        type: 'bar'
                    }
                ]
            }
            myChartes.setOption(option)
            window.echartsArr.push(myChartes)
            setTimeout(() => {
                myChartes.resize()
            }, 100)
            // myChart.resize();
            // let _this = this;
            // _this.$erd.listenTo(_this.$refs.fg, element => {
            //   _this.$nextTick(() => {
            //     myChart.resize();
            //   });
            // });

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

            this.$nextTick(() => {
                this.initEchartMap()
            })
        }
    }
}
</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;
}
</style>
