<template>
    <div class="centermap">
        <div class="maptitle">
            <div class="zuo"></div>
            <span class="titletext">设备分布图</span>
            <div class="you"></div>
        </div>
        <div style="height: 800px">
            <div ref="map" style="height: 800px; width: 800px; padding: 10px; display: flex; bottom: 80px; right: 100px"></div>
        </div>
    </div>
</template>

<script>
import {loadBMap} from '@/utils/map.js';
import './china';
import {
    deviceLongitudeAndLatitudeApi,
} from '@/api/iot/device';
import {runningStatus} from '@/api/iot/runstatus'
import * as echarts from 'echarts';
import {listAlertLog} from "@/api/iot/alertLog";
//安装的是echarts完整包，里面包含百度地图扩展，路径为 echarts/extension/bmap/bmap.js，将其引入
//ECharts的百度地图扩展，可以在百度地图上展现点图，线图，热力图等可视化
require('echarts/extension/bmap/bmap');
export default {
    data() {
        return {
            // 设备列表
            deviceList: [],
            queryParams: {
                deviceName: null,
                type: null,
                id: null,
                typeName: null,
                deviceNum: null,
                status: null,
                pageNum: 1,
                pageSize: 999999, // 全部查上来
                showChild: true
            },
            alarmList: [],
            thingsModels: [], // 缓存所有设备模型数据
        };
    },
    created() {
        this.getAlarmList();
    },
    beforeDestroy() {
        this.clearData();
    },
    methods: {
        clearData() {
            if (this.timer) {
                clearInterval(this.timer);
                this.timer = null;
            }
        },
        //轮询
        switper() {
            if (this.timer) {
                return;
            }
            let looper = (a) => {
                this.loadThingsModels();
            };
            this.timer = setInterval(looper, 120000);
        },
        /** 获取告警列表 */
        getAlarmList() {
            listAlertLog(this.queryParams).then((rp) => {
                this.alarmList = rp.rows;
                this.loadThingsModels();
            });
        },
        // async getAllDevice() {
        //     this.loadThingsModels();
        // },
        /** 获取设备模型 */
        loadThingsModels() {
            deviceLongitudeAndLatitudeApi().then((res)=>{
                this.thingsModels = res.data
                console.log("this.thingsModels",this.thingsModels)
                // 加载地图
                this.loadMap();
                // 轮询
                this.switper();
            })
        },

        /**加载地图*/
        loadMap() {
            loadBMap().then(() => {
                this.getmap();
            });
        },
        /** 地图 */
        getmap() {
            const myChart = this.$echarts.init(this.$refs.map);
            let option;
            const img2 =
                'image://data:image/png;base64, ';
            const mapName = 'china';
            const data = [
                {name: '北京市', value: 5},
                {name: '天津市', value: 14},
                {name: '河北省', value: 110},
                {name: '内蒙古', value: 40},
                {name: '辽宁省', value: 40},
                {name: '吉林省', value: 40},
                {name: '黑龙江', value: 60},
                {name: '上海市', value: 10},
                {name: '江苏省', value: 60},
                {name: '浙江省', value: 50},
                {name: '安徽省', value: 151},
                {name: '福建省', value: 60},
                {name: '江西省', value: 74},
                {name: '山东省', value: 200},
                {name: '河南省', value: 100},
                {name: '湖北省', value: 40},
                {name: '湖南省', value: 50},
                {name: '重庆市', value: 40},
                {name: '四川省', value: 120},
                {name: '贵州省', value: 135},
                {name: '云南省', value: 90},
                {name: '西藏省', value: 25},
                {name: '陕西省', value: 100},
                {name: '甘肃省', value: 60},
                {name: '青海省', value: 20},
                {name: '宁夏省', value: 110},
                {name: '新疆省', value: 32},
                {name: '广东省', value: 10},
                {name: '广西省', value: 100},
                {name: '海南省', value: 40},
            ];
            var toolTipData = this.thingsModels;
            console.log("this.toolTipData",toolTipData)
            var geoCoordMap = {
                黑龙江: [127.9688, 45.368],
                内蒙古: [110.3467, 41.4899],
                吉林省: [125.8154, 44.2584],
                北京市: [116.4551, 40.2539],
                辽宁省: [123.1238, 42.1216],
                河北省: [114.4995, 38.1006],
                天津市: [117.4219, 39.4189],
                山西省: [112.3352, 37.9413],
                陕西省: [109.1162, 34.2004],
                甘肃省: [103.5901, 36.3043],
                宁夏省: [106.3586, 38.1775],
                青海省: [101.4038, 36.8207],
                新疆省: [87.611053, 43.828171],
                西藏省: [91.117212, 29.646922],
                四川省: [103.9526, 30.7617],
                重庆市: [108.384366, 30.439702],
                山东省: [117.1582, 36.8701],
                河南省: [113.4668, 34.6234],
                江苏省: [118.8062, 31.9208],
                安徽省: [117.29, 32.0581],
                湖北省: [114.3896, 30.6628],
                浙江省: [119.5313, 29.8773],
                福建省: [119.4543, 25.9222],
                江西省: [116.0046, 28.6633],
                湖南省: [113.0823, 28.2568],
                贵州省: [106.6992, 26.7682],
                云南省: [102.9199, 25.4663],
                广东省: [113.12244, 23.009505],
                广西省: [108.479, 23.1152],
                海南省: [110.3893, 19.8516],
                台湾省: [120.702967, 24.123621],
                上海市: [121.4648, 31.2891],
            };
            /*获取地图数据*/
            myChart.showLoading();
            var mapFeatures = echarts.getMap(mapName).geoJson.features;
            myChart.hideLoading();
            mapFeatures.forEach(function (v) {
                // 地区名称
                var name = v.properties.name;
                // 地区经纬度
                geoCoordMap[name] = v.properties.cp;
            });
            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value),
                        });
                    }
                }
                return res;
            };
            // 柱状体的主干
            function lineData() {
                return toolTipData.map((item) => {
                    return {
                        coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 1.5]],
                    };
                });
            }
            // 柱状体的顶部
            function scatterData() {
                return toolTipData.map((item) => {
                    return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 2, {
                        name: item.name,
                        value: item.value,
                    }];
                });
            }
            option = {
                title: {
                    show: false,
                    text: '项目分布图',
                    x: 'center',
                    top: '10',
                    textStyle: {
                        color: '#fff',
                        fontFamily: '等线',
                        fontSize: 18,
                    },
                },
                tooltip: {
                    show:false,
                    // formatter: function (params) {
                    //     // params.data 是散点图的数据项，包含了省份信息和 deviceIds
                    //     console.log("params",params)
                    //     return`
                    //         <div style="margin-bottom: 8px;">
                    //             <span style="font-weight: bold; color: #e9f4ff;">设备数量:0</span>
                    //         </div>`;
                    // },
                    // backgroundColor: '#2d313c', // 自定义背景色
                    // borderColor: '#2d313c', // 取消边框
                    // border: 0, // 取消边框
                    // padding: [0, 0, 0, 0], // 取消内边距
                    // // padding: [5, 10],
                    // textStyle: {
                    //     color: '#fff',
                    //     fontSize: '14',
                    // },
                },
                geo: [
                    {
                        layoutCenter: ['50%', '50%'], //位置
                        layoutSize: '140%', //大小
                        show: true,
                        map: mapName,
                        roam: false,
                        zoom: 0.65,
                        aspectScale: 1,
                        label: {
                            normal: {
                                show: false,
                                textStyle: {
                                    color: '#fff',
                                },
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    color: '#fff',
                                },
                            },
                        },
                        itemStyle: {
                            normal: {
                                areaColor: {
                                    type: 'linear',
                                    x: 1200,
                                    y: 0,
                                    x2: 0,
                                    y2: 0,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: 'rgba(3,27,78,0.75)', // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(58,149,253,0.75)', // 50% 处的颜色
                                        },
                                    ],
                                    global: true, // 缺省为 false
                                },
                                borderColor: '#c0f3fb',
                                borderWidth: 1,
                                shadowColor: '#8cd3ef',
                                shadowOffsetY: 10,
                                shadowBlur: 120,
                            },
                            emphasis: {
                                areaColor: 'rgba(0,254,233,0.6)',
                            },
                        },
                    },
                    {
                        type: 'map',
                        map: mapName,
                        zlevel: -1,
                        aspectScale: 1,
                        zoom: 0.65,
                        layoutCenter: ['50%', '51%'],
                        layoutSize: '140%',
                        roam: false,
                        silent: true,
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                // borderColor:"rgba(17, 149, 216,0.6)",
                                borderColor: 'rgba(58,149,253,0.8)',
                                shadowColor: 'rgba(172, 122, 255,0.5)',
                                shadowOffsetY: 5,
                                shadowBlur: 15,
                                areaColor: 'rgba(5,21,35,0.1)',
                            },
                        },
                    },
                    {
                        type: 'map',
                        map: mapName,
                        zlevel: -2,
                        aspectScale: 1,
                        zoom: 0.65,
                        layoutCenter: ['50%', '52%'],
                        layoutSize: '140%',
                        roam: false,
                        silent: true,
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                // borderColor: "rgba(57, 132, 188,0.4)",
                                borderColor: 'rgba(58,149,253,0.6)',
                                shadowColor: 'rgba(65, 214, 255,1)',
                                shadowOffsetY: 5,
                                shadowBlur: 15,
                                areaColor: 'transpercent',
                            },
                        },
                    },
                    {
                        type: 'map',
                        map: mapName,
                        zlevel: -3,
                        aspectScale: 1,
                        zoom: 0.65,
                        layoutCenter: ['50%', '53%'],
                        layoutSize: '140%',
                        roam: false,
                        silent: true,
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                // borderColor: "rgba(11, 43, 97,0.8)",
                                borderColor: 'rgba(58,149,253,0.4)',
                                shadowColor: 'rgba(58,149,253,1)',
                                shadowOffsetY: 15,
                                shadowBlur: 10,
                                areaColor: 'transpercent',
                            },
                        },
                    },
                    {
                        type: 'map',
                        map: mapName,
                        zlevel: -4,
                        aspectScale: 1,
                        zoom: 0.65,
                        layoutCenter: ['50%', '54%'],
                        layoutSize: '140%',
                        roam: false,
                        silent: true,
                        itemStyle: {
                            normal: {
                                borderWidth: 5,
                                borderColor: 'rgba(5,9,57,0.8)',
                                shadowColor: 'rgba(29, 111, 165,0.8)',
                                shadowOffsetY: 15,
                                shadowBlur: 10,
                                areaColor: 'rgba(5,21,35,0.1)',
                            },
                        },
                    },
                ],
                series: [
                    {
                        type: 'map',
                        map: mapName,
                        geoIndex: 0,
                        aspectScale: 1, //长宽比
                        zoom: 0.65,
                        showLegendSymbol: true,
                        roam: true,
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    color: '#fff',
                                    fontSize: '120%',
                                },
                            },
                        },
                        itemStyle: {
                            normal: {
                                areaColor: {
                                    type: 'linear',
                                    x: 1200,
                                    y: 0,
                                    x2: 0,
                                    y2: 0,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: 'rgba(3,27,78,0.75)', // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(58,149,253,0.75)', // 50% 处的颜色
                                        },
                                    ],
                                    global: true, // 缺省为 false
                                },
                                borderColor: '#fff',
                                borderWidth: 0.2,
                            },
                        },
                        layoutCenter: ['50%', '50%'],
                        layoutSize: '140%',
                        animation: false,
                        markPoint: {
                            symbol: 'none',
                        },
                        data: data,
                    },
                    //柱状体的主干
                    {
                        type: 'lines',
                        zlevel: 5,
                        effect: {
                            show: false,
                            symbolSize: 5, // 图标大小
                        },
                        lineStyle: {
                            width: 6, // 尾迹线条宽度
                            color: 'rgba(249, 105, 13, .6)',
                            opacity: 1, // 尾迹线条透明度
                            curveness: 0, // 尾迹线条曲直度
                        },
                        label: {
                            show: 0,
                            position: 'end',
                            formatter: '245',
                        },
                        silent: true,
                        data: lineData(),
                    },
                    // 柱状体的顶部
                    {
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        geoIndex: 0,
                        zlevel: 5,
                        label: {
                            normal: {
                                show: true,
                                formatter: function (params) {

                                    var name = params.data[2].name;
                                    var value = params.data[2].value;
                                    var text = `{tline|${name}} : {fline|${value}}个`;
                                    return text;
                                },
                                color: '#fff',
                                rich: {
                                    fline: {
                                        // padding: [0, 25],
                                        color: '#fff',
                                        fontSize: 14,
                                        fontWeight: 600,
                                    },
                                    tline: {
                                        // padding: [0, 27],
                                        color: '#ABF8FF',
                                        fontSize: 12,
                                    },
                                },
                            },
                            emphasis: {
                                show: true,
                            },
                        },
                        itemStyle: {
                            color: '#00FFF6',
                            opacity: 1,
                        },
                        symbol: img2,
                        symbolSize: [110, 60],
                        symbolOffset: [0, -20],
                        z: 999,
                        data: scatterData(),
                    },
                    {
                        name: 'Top 5',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: convertData(toolTipData),
                        showEffectOn: 'render',
                        rippleEffect: {
                            scale: 5,
                            brushType: 'stroke',
                        },
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'bottom',
                                show: false,
                                color: '#fff',
                                distance: 10,
                            },
                        },
                        symbol: 'circle',
                        symbolSize: [20, 10],
                        itemStyle: {
                            normal: {
                                color: '#16ffff',
                                shadowBlur: 10,
                                shadowColor: '#16ffff',
                            },
                            opacity: 1,
                        },
                        zlevel: 4,
                    },
                ],
            };

            myChart.setOption(option);
        },
    }
};
</script>

<style lang="scss">
/* 清除地图LOGO */
.BMap_cpyCtrl {
    display: none !important;
}

.anchorBL {
    display: none !important;
}

.centermap {
    .maptitle {
        height: 60px;
        display: flex;
        justify-content: center;
        padding-top: 10px;
        box-sizing: border-box;

        .titletext {
            font-size: 28px;
            font-weight: 900;
            letter-spacing: 6px;
            background: linear-gradient(92deg, #0072ff 0%, #00eaff 48.8525390625%, #01aaff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin: 0 10px;
        }

        .zuo,
        .you {
            background-size: 100% 100%;
            width: 29px;
            height: 20px;
            margin-top: 8px;
        }

        .zuo {
            background: url('../../../assets/bigScreen/img/xiezuo.png') no-repeat;
        }

        .you {
            background: url('../../../assets/bigScreen/img/xieyou.png') no-repeat;
        }
    }
}
</style>
