<template>
    <div class="dashboard" style="padding-top: 1px !important">
        <div class="container flex-between">
            <div class="top-div">
                <div class="top-img-div">
                    <img class="top-img" src="../bigScreenDevice/image/1.png" />
                </div>
                <div class="top-font-num">
                    <div class="top-font">设备数量</div>
                    <div class="top-num">{{ deviceStatistic.deviceCount }}</div>
                </div>
            </div>
            <div class="top-div">
                <div class="top-img-div">
                    <img class="top-img" src="../bigScreenDevice/image/2.png" />
                </div>
                <div class="top-font-num">
                    <div class="top-font">产品数量</div>
                    <div class="top-num">{{ deviceStatistic.productCount }}</div>
                </div>
            </div>
            <div class="top-div">
                <div class="top-img-div">
                    <img class="top-img" src="../bigScreenDevice/image/3.png" />
                </div>
                <div class="top-font-num">
                    <div class="top-font">操作记录</div>
                    <div class="top-num">{{ deviceStatistic.functionCount }}</div>
                </div>
            </div>
            <div class="top-div">
                <div class="top-img-div">
                    <img class="top-img" src="../bigScreenDevice/image/4.png" />
                </div>
                <div class="top-font-num">
                    <div class="top-font">检测数据</div>
                    <div class="top-num">{{ deviceStatistic.monitorCount }}</div>
                </div>
            </div>
            <div class="top-div">
                <div class="top-img-div">
                    <img class="top-img" src="../bigScreenDevice/image/5.png" />
                </div>
                <div class="top-font-num">
                    <div class="top-font">告警数量</div>
                    <div class="top-num">{{ deviceStatistic.alertCount }}</div>
                </div>
            </div>
            <div class="top-div" style="margin-right: 20px">
                <div class="top-img-div">
                    <img class="top-img" src="../bigScreenDevice/image/6.png" />
                </div>
                <div class="top-font-num">
                    <div class="top-font">上报事件</div>
                    <div class="top-num">{{ deviceStatistic.eventCount }}</div>
                </div>
            </div>
        </div>

        <div class="center-container">
            <el-card class="center-left">
                <div ref="devicePie" style="width: 100%; height: 618px"></div>
            </el-card>
            <div class="center-right">
                <div style="margin: 20px">
                    <div ref="map" style="height: 585px; width: 100%"></div>
                </div>
            </div>
        </div>
        <div class="bottom-div">
            <div ref="deviceBar" style="height: 655px"></div>
        </div>
    </div>
</template>

<script>
import { loadBMap } from '@/utils/map.js';
//安装的是echarts完整包，里面包含百度地图扩展，路径为 echarts/extension/bmap/bmap.js，将其引入
//ECharts的百度地图扩展，可以在百度地图上展现点图，线图，热力图等可视化
require('echarts/extension/bmap/bmap');
import { getDeviceStatistic, listAllDeviceShort } from '@/api/iot/device';
export default {
    name: 'index',
    data() {
        return {
            deviceStatistic: [],
            // 设备列表
            deviceList: [],
            devicePieData: [
                { value: 735, name: '在线' },
                { value: 580, name: '离线' },
                { value: 484, name: '故障' },
                { value: 300, name: '异常' },
            ],
            deviceBarxData: ['10/21', '10/21', '10/21', '10/21', '10/21', '10/21', '10/21'],
            deviceBaryData: [200, 170, 240, 300, 400, 500, 600],
            colorList: ['#165DFF', '#14C9C9', '#F7BA1E', '#A3D12E', '#FA9134', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
        };
    },
    created() {
        this.getlist();
    },
    mounted() {
        this.getAllDevice();
        this.loadDeviceBar();
    },
    methods: {
        getlist() {
            getDeviceStatistic().then((response) => {
                this.deviceStatistic = response.data;
            });
        },
        /**查询所有设备 */
        getAllDevice() {
            listAllDeviceShort(this.queryParams).then((response) => {
                this.deviceList = response.rows;
                this.deviceCount = response.total;
                this.loadMap();
                this.loadDevicePie();
            });
        },
        /**加载地图*/
        loadMap() {
            this.$nextTick(() => {
                loadBMap().then(() => {
                    this.getmap();
                });
            });
        },
        /** 地图 */
        getmap() {
            var myChart = this.$echarts.init(this.$refs.map);
            var option;

            // 单击事件
            myChart.on('click', (params) => {
                if (params.data.deviceId) {
                    this.$router.push({
                        path: '/iot/device-edit',
                        query: {
                            t: Date.now(),
                            deviceId: params.data.deviceId,
                        },
                    });
                }
            });

            // 格式化数据
            let convertData = function (data, status) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = [data[i].longitude, data[i].latitude];
                    if (geoCoord && data[i].status == status) {
                        res.push({
                            name: data[i].deviceName,
                            value: geoCoord,
                            status: data[i].status,
                            isShadow: data[i].isShadow,
                            firmwareVersion: data[i].firmwareVersion,
                            networkAddress: data[i].networkAddress,
                            productName: data[i].productName,
                            activeTime: data[i].activeTime == null ? '' : data[i].activeTime,
                            deviceId: data[i].deviceId,
                            serialNumber: data[i].serialNumber,
                            locationWay: data[i].locationWay,
                        });
                    }
                }
                return res;
            };
            option = {
                title: {
                    text: this.$t('home.onlineDevice') + this.deviceList.filter((x) => x.status == 3).length + '）',
                    subtext: 'yanfan open source iot platform',
                    sublink: 'https://iot.yanfan.cn',
                    target: '_blank',
                    textStyle: {
                        color: '#333',
                        textBorderColor: '#fff',
                        textBorderWidth: 10,
                    },
                    top: 10,
                    left: 'center',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        var htmlStr = '<div style="padding:5px;line-height:28px;">';
                        htmlStr += "设备名称： <span style='color:#409EFF'>" + params.data.name + '</span><br />';
                        htmlStr += '设备编号： ' + params.data.serialNumber + '<br />';
                        htmlStr += '设备状态： ';
                        if (params.data.status == 1) {
                            htmlStr += "<span style='color:#E6A23C'>未激活</span>" + '<br />';
                        } else if (params.data.status == 2) {
                            htmlStr += "<span style='color:#F56C6C'>禁用</span>" + '<br />';
                        } else if (params.data.status == 3) {
                            htmlStr += "<span style='color:#67C23A'>在线</span>" + '<br />';
                        } else if (params.data.status == 4) {
                            htmlStr += "<span style='color:#909399'>离线</span>" + '<br />';
                        }
                        if (params.data.isShadow == 1) {
                            htmlStr += '设备影子： ' + "<span style='color:#67C23A'>启用</span>" + '<br />';
                        } else {
                            htmlStr += '设备影子： ' + "<span style='color:#909399'>未启用</span>" + '<br />';
                        }
                        htmlStr += '产品名称： ' + params.data.productName + '<br />';
                        htmlStr += '固件版本： Version ' + params.data.firmwareVersion + '<br />';
                        htmlStr += '激活时间： ' + params.data.activeTime + '<br />';
                        htmlStr += '定位方式： ';
                        if (params.data.locationWay == 1) {
                            htmlStr += '自动定位' + '<br />';
                        } else if (params.data.locationWay == 2) {
                            htmlStr += '设备定位' + '<br />';
                        } else if (params.data.locationWay == 3) {
                            htmlStr += '自定义位置' + '<br />';
                        } else {
                            htmlStr += '未知' + '<br />';
                        }
                        htmlStr += '所在地址： ' + params.data.networkAddress + '<br />';
                        htmlStr += '</div>';
                        return htmlStr;
                    },
                },
                bmap: {
                    center: [133, 38],
                    zoom: 5,
                    roam: true,
                    mapStyle: {
                        styleJson: [
                            {
                                featureType: 'water',
                                elementType: 'all',
                                stylers: {
                                    color: '#a0cfff',
                                },
                            },
                            {
                                featureType: 'land',
                                elementType: 'all',
                                stylers: {
                                    color: '#fafafa', // #fffff8 淡黄色
                                },
                            },
                            {
                                featureType: 'railway',
                                elementType: 'all',
                                stylers: {
                                    visibility: 'off',
                                },
                            },
                            {
                                featureType: 'highway',
                                elementType: 'all',
                                stylers: {
                                    color: '#fdfdfd',
                                },
                            },
                            {
                                featureType: 'highway',
                                elementType: 'labels',
                                stylers: {
                                    visibility: 'off',
                                },
                            },
                            {
                                featureType: 'arterial',
                                elementType: 'geometry',
                                stylers: {
                                    color: '#fefefe',
                                },
                            },
                            {
                                featureType: 'arterial',
                                elementType: 'geometry.fill',
                                stylers: {
                                    color: '#fefefe',
                                },
                            },
                            {
                                featureType: 'poi',
                                elementType: 'all',
                                stylers: {
                                    visibility: 'off',
                                },
                            },
                            {
                                featureType: 'green',
                                elementType: 'all',
                                stylers: {
                                    visibility: 'off',
                                },
                            },
                            {
                                featureType: 'subway',
                                elementType: 'all',
                                stylers: {
                                    visibility: 'off',
                                },
                            },
                            {
                                featureType: 'manmade',
                                elementType: 'all',
                                stylers: {
                                    color: '#d1d1d1',
                                },
                            },
                            {
                                featureType: 'local',
                                elementType: 'all',
                                stylers: {
                                    color: '#d1d1d1',
                                },
                            },
                            {
                                featureType: 'arterial',
                                elementType: 'labels',
                                stylers: {
                                    visibility: 'off',
                                },
                            },
                            {
                                featureType: 'boundary',
                                elementType: 'all',
                                stylers: {
                                    color: '#999999',
                                },
                            },
                            {
                                featureType: 'building',
                                elementType: 'all',
                                stylers: {
                                    color: '#d1d1d1',
                                },
                            },
                            {
                                featureType: 'label',
                                elementType: 'labels.text.fill',
                                stylers: {
                                    color: '#999999',
                                },
                            },
                        ],
                    },
                },
                series: [
                    {
                        type: 'scatter',
                        coordinateSystem: 'bmap',
                        data: convertData(this.deviceList, 1),
                        symbolSize: 15,
                        itemStyle: {
                            color: '#E6A23C',
                        },
                    },
                    {
                        type: 'scatter',
                        coordinateSystem: 'bmap',
                        data: convertData(this.deviceList, 2),
                        symbolSize: 15,
                        itemStyle: {
                            color: '#F56C6C',
                        },
                    },
                    {
                        type: 'scatter',
                        coordinateSystem: 'bmap',
                        data: convertData(this.deviceList, 4),
                        symbolSize: 15,
                        itemStyle: {
                            color: '#909399',
                        },
                    },
                    {
                        type: 'effectScatter',
                        coordinateSystem: 'bmap',
                        data: convertData(this.deviceList, 3),
                        symbolSize: 15,
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke',
                            scale: 5,
                        },
                        label: {
                            formatter: '{b}',
                            position: 'right',
                            show: false,
                        },
                        itemStyle: {
                            color: '#67C23A',
                            shadowBlur: 100,
                            shadowColor: '#333',
                        },
                        zlevel: 1,
                    },
                ],
            };

            option && myChart.setOption(option);
        },

        loadDevicePie() {
            this.devicePie();
        },
        loadDeviceBar() {
            this.deviceBar();
        },
        /**
         * 设备饼图
         */
        devicePie() {
            let myChart = this.$echarts.init(this.$refs.devicePie);
            var option = {
                legend: {
                    top: 'bottom',
                },
                series: [
                    {
                        name: 'Nightingale Chart',
                        type: 'pie',
                        radius: [80, 180],
                        label: {
                            formatter: '{b|{b}：}\n\n{per|{d}%}  ',
                            borderColor: '#8C8D8E',
                            rich: {
                                a: {
                                    color: '#6E7079',
                                    lineHeight: 22,
                                    align: 'center',
                                },
                            },
                        },
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 8,
                        },
                        data: this.devicePieData,
                    },
                ],
            };

            myChart.setOption(option);

            var totalDevices = this.deviceCount;
            myChart.setOption({
                graphic: {
                    elements: [
                        {
                            type: 'text',
                            left: 'center',
                            top: 'center',
                            style: {
                                text: totalDevices + '\n总设备',
                                font: '24px Microsoft YaHei',
                                fill: '#2C3542',
                                align: 'center',
                                verticalAlign: 'middle',
                            },
                        },
                    ],
                },
            });
        },
        /**
         * 柱形图
         */
        deviceBar() {
            let myChart = this.$echarts.init(this.$refs.deviceBar);
            var option = {
                xAxis: {
                    type: 'category',
                    data: this.deviceBarxData,
                },
                yAxis: {
                    type: 'value',
                },

                tooltip: {
                    trigger: 'axis',
                },
                series: [
                    {
                        data: this.deviceBaryData,
                        type: 'bar',
                    },
                ],
            };
            myChart.setOption(option);
        },
    },
};
</script>

<style scoped>
.dashboard {
    width: 100%;
    min-height: 100%;
    height: 100%;
    background-color: #f2f2f4;
    font-family: 'yanfan-regular';
}
.container {
}
.center-container {
    display: flex;
    margin-top: 20px;
}

.top-div {
    margin: 20px 0px 0px 16px;
    width: 266px;
    height: 170px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-img-div {
    width: 79px;
    height: 79px;
}

.top-font-num {
    margin-left: 32px;
}

.top-img {
    width: 79px;
    height: 79px;
}

.top-font {
    color: #000000;
    font-family: 'Alibaba PuHuiTi 3.0';
    font-size: 16px;
    font-style: normal;
    font-weight: 55 Regular L3;
    line-height: normal;
}
.top-num {
    color: #000000;
    font-family: 'Alibaba PuHuiTi 3.0';
    font-size: 26px;
    font-style: normal;
    font-weight: 85 Bold;
    line-height: normal;
}
.center-left {
    margin-left: 20px;
    width: 548px;
    height: 618px;
    flex-shrink: 0;
    background: #fff;
}
.center-right {
    margin-left: 18px;
    width: calc(100% - 604px);
    height: 618px;
    flex-shrink: 0;
    background: #fff;
}
.bottom-div {
    margin-left: 20px;
    margin-top: 20px;
    margin-right: 20px;
    height: 655px;
    flex-shrink: 0;
    background: #fff;
}
</style>
