<template>
    <div>
        <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item>
                <Area @click="handleNodeClick"></Area>
            </el-form-item>
            <el-form-item>
                <Timeinterval :interval="3" ref="interval" :timeOptions="timeOptions"></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>
        <div class="boxP">
            <div class="boxR">
                <div style="width: 100%; height: 100%" id="electr4"></div>
            </div>

            <div class="boxL">
                <el-row :gutter="20">
                    <!-- 光伏电站个数 -->
                    <el-col :span="12" class="colDiv">
                        <div id="boxid" style="padding: 20px">
                            <div style="display: flex; height: 50%">
                                <div class="divBox" :style="`color:${color}`">光伏电站个数</div>
                                <div class="divBox" :style="`color:${color}`">
                                    同比:
                                    <i
                                        :class="data.sameNum2 >= 0 ? 'el-icon-top' : 'el-icon-bottom'"
                                        :style="{
                                            color: data.sameNum2 >= 0 ? 'green' : 'red'
                                        }"
                                    >
                                        {{ data.sameNum2 }} %
                                    </i>
                                </div>
                            </div>
                            <div style="display: flex; height: 50%">
                                <div class="divBox" :style="`color:${color}`">
                                    新增个数
                                    <span>{{ data.sumNum2 }}</span>
                                    个
                                </div>
                                <div class="divBox" :style="`color:${color}`">
                                    环比:
                                    <i
                                        :class="data.ringNum2 >= 0 ? 'el-icon-top' : 'el-icon-bottom'"
                                        :style="{
                                            color: data.ringNum2 >= 0 ? 'green' : 'red'
                                        }"
                                    >
                                        {{ data.ringNum2 }} %
                                    </i>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div id="boxid2" style="padding: 20px">
                            <div style="display: flex; height: 50%">
                                <div class="divBox" :style="`color:${color}`">装机容量</div>
                                <div class="divBox" :style="`color:${color}`">
                                    同比:
                                    <i
                                        :class="data.sameCapacity2 >= 0 ? 'el-icon-top' : 'el-icon-bottom'"
                                        :style="{
                                            color: data.sameCapacity2 >= 0 ? 'green' : 'red'
                                        }"
                                    >
                                        {{ data.sameCapacity2 }} %
                                    </i>
                                </div>
                            </div>
                            <div style="display: flex; height: 50%">
                                <div class="divBox" :style="`color:${color}`">
                                    <span>{{ data.capacity2 }}</span>
                                    MW
                                </div>
                                <div class="divBox" :style="`color:${color}`">
                                    环比:
                                    <i
                                        :class="data.ringCapacity2 >= 0 ? 'el-icon-top' : 'el-icon-bottom'"
                                        :style="{
                                            color: data.ringCapacity2 >= 0 ? 'green' : 'red'
                                        }"
                                    >
                                        {{ data.ringCapacity2 }} %
                                    </i>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div id="electr1" style="width: 100%; height: 100%" />
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>
<script>
import Timeinterval from '@/views/components/Timeinterval.vue'
import Area from '@/views/components/Area/Area.vue'
import { dicData } from '@/assets/commjs/dictypeData'
import { getMapDisplay, getYoYList } from '@/api/SpecialAnalysisModuleDesign/overview/index.js'

export default {
    components: { Area, Timeinterval },
    props: {},
    data() {
        return {
            form: {
                month: [],
                year: '',
                deptId: ''
            },

            vh: undefined,
            list: {},
            zoom: '', //图表焦点校验
            data: {},
            color: JSON.parse(window.localStorage.echartsColor).WordColor,
            timeOptions: [
                { label: '年份', value: 1 },
               
                { label: '月份', value: 3 }
            ]
        }
    },
    created() {
        this.info()
    },
    mounted() {

            (this.form.deptId = JSON.parse(window.sessionStorage.getItem('Info')).deptId)

        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.onSubmit()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            let boxid = document.getElementById('boxid')
            let boxid2 = document.getElementById('boxid2')
            let domID1 = document.getElementById('electr1')
   
            setTimeout(() => {
                ;(domID1.style.width = '800px'),
                    (domID1.style.height = window.sessionStorage.getItem('appheight') - 280 + 'px')
                boxid.style.height = window.sessionStorage.getItem('appheight') / 2 - 260 + 'px'
     
                boxid2.style.height = window.sessionStorage.getItem('appheight') / 2 - 260 + 'px'
            }, 0)
            this.vh = window.sessionStorage.getItem('appheight') - 385
        },
        async electr1() {
            // const { data } = await warning();
            let echarts = require('echarts')
            let domID1 = document.getElementById('electr1')
            setTimeout(() => {
                ;(domID1.style.width = '800px'),
                    (domID1.style.height = window.sessionStorage.getItem('appheight') - 280 + 'px')
            }, 0)
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let myChart2 = echarts.init(domID1)

            let option = {
                title: {
                    top: 10,
                    left: 'center',
                    text: '投运光伏电站监测总数',

                    fontSize: '16'
                },
                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)',
                    borderWidth: 0
                },
                color: echartsColor.FigureColor,
                legend: {
                    right: 40,
                    top: 30,
                    itemWidth: 16,
                    itemHeight: 16,
                    itemGap: 28,
                    textStyle: {
                        color: echartsColor.WordColor,
                        rich: {
                            a: {
                                verticalAlign: 'middle'
                            }
                        },

                        padding: [2, 0, 0, 0] //[上、右、下、左]
                    }
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        center: ['50%', '50%'],
                        label: {
                            show: true,
                            formatter: '{b}  {c}个',
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            }
                        },
                        data: this.list.voltageLevelMap,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
            option && myChart2.setOption(option, true)
            window.echartsArr.push(myChart2)
            setTimeout(function () {
                myChart2.resize()
            }, 0)
        },
        info() {
            //   字典获取数据电压等级;
            // this.voltageleveloption = dicData("Dev_Voltage", []);
            getMapDisplay({
                type: 1
            }).then(res => {
                this.list = res.data
                this.electr1()
                this.chart()
            })
        },
        // 查询
        onSubmit() {
            let type = this.$refs.interval.intervald
            if (type == 3) {
                this.form.year = this.$refs.interval.timeValue[0].slice(0, 4)
                this.form.month = [this.$refs.interval.timeValue[0].slice(5, 7)]
            } else {
                this.form.year = this.$refs.interval.timeValue[0].slice(0, 4)
                this.form.month = null
            }

            getYoYList(this.form).then(res => {
                this.data = res.data
            })
        },
        handleNodeClick(data) {
            this.form.deptId = data.id
        },
        async chart() {
            let _this = this
            let echarts = require('echarts')
            let domID2 = document.getElementById('electr4')
            setTimeout(() => {
                ;(domID2.style.width = document.getElementById('app-main-in').offsetWidth - 850 + 'px'),
                    (domID2.style.height = window.sessionStorage.getItem('appheight') - 65 + 'px')
            }, 0)
            let myChart2 = echarts.init(domID2)
            let echartsData = [[]]
            let mapData = []

            let arr = [1]
            setTimeout(() => {
                if (this.list.specialAnalysisVOList.length != {}) {
                    for (let k in this.list.specialAnalysisVOList) {
                        mapData.push({
                            name: k,
                            value: this.list.specialAnalysisVOList[k].length
                        })
                        arr.push(this.list.specialAnalysisVOList[k].length)
                        this.list.specialAnalysisVOList[k].forEach(item => {
                            echartsData[0].push({
                                name: item.name,
                                powerrName: item.powerrName,
                                capacity: item.capacity,
                                voltageLevel: item.voltageLevel,
                                terminalId: item.terminalId,
                                value: [item.longitude, item.latitude]
                            })
                        })
                    }
                }
            }, 0)

            // this.list.specialAnalysisVOList;

            // 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('hebei', 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) {
                            return (
                                '<span>名称：' +
                                params.name +
                                (params.componentSubType == 'map'
                                    ? ''
                                    : `</span><br/>变电站： 
                   ${params.data.powerrName} 
                    </span><br/>装机容量： 
                    ${params.data.capacity} 
                    </span><br/>电压等级： 
                    ${params.data.voltageLevel} 
                    </span><br/>监测终端： 
                    ${params.data.terminalId}`)
                            )
                        }
                    },
                    geo: {
                        show: true,
                        map: 'hebei',
                        roam: true,
                        top: 'center',
                        left: 'center',
                        zoom: 1,
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    color: echartsColor.WordColor,
                                    fontSize: 12,
                                    fontFamily: 'Arial'
                                }
                            }
                        },
                        regions: [
                            {
                                name: '南海诸岛',
                                itemStyle: {
                                    // 隐藏地图
                                    normal: {
                                        opacity: 0 // 为 0 时不绘制该图形
                                    }
                                },
                                label: {
                                    show: false // 隐藏文字
                                }
                            }
                        ],
                        // 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',
                        feature: {
                            saveAsImage: {}
                        }
                    },

                    legend: {
                        //各标记图例
                        orient: 'vertical',
                        // id: 1,
                        top: '40px',
                        right: '40px',
                        itemWidth: 20,

                        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: {
                    //   text: ["", ""],
                    //   show: true,
                    //   min: 0,
                    //   max: arr.sort((a, b) => b - a)[0],
                    //   seriesIndex: 0,
                    //   calculable: false,
                    //   orient: "horizontal",
                    //   top: "0",
                    //   right: "40px",
                    //   // symbolSize: [30, 100],
                    //   //   color: ["#04b3f4", "#c4eaff"],
                    //   textStyle: {
                    //     color: echartsColor.WordColor,
                    //   },
                    //   inRange: {
                    //     color: ["#c4eaff", "#3399FF"],
                    //     symbolSize: [10, 100],
                    //   },
                    // },

                    series: [
                        {
                            type: 'map', //图表类型
                            geoIndex: 0,
                            data: mapData //图表的数据
                        }
                    ]
                }

                echartsData.forEach((item, i) => {
                    let linesX = []
                    linesX[i] = []
                    item.forEach(v => {
                        linesX[i].push(v.value)
                    })
                    // console.log(JSON.stringify(linesX[i]));
                    option.series.push({
                        name: title[i],
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: item,
                        // symbol: require("@/assets/dw.png"),
                        symbolSize: function (val) {
                            return 12
                        },
                        label: {
                            normal: {
                                show: false,
                                formatter: function (params) {
                                    // console.log(params);
                                    return params.name
                                },
                                position: 'right',
                                color: '#69A4D9',
                                fontSize: '12'
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#33CC00',
                                borderWidth: 2,
                                borderColor: '#ccc'
                            }
                        }
                    })
                })

                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;
}
.boxP {
    display: flex;
    .boxR {
        width: calc(100% - 800px);
    }
    .boxL {
        width: 800px;
    }
}
::v-deep .el-table .cell {
    text-align: center;
}
</style>
<style lang="scss" scoped>
#boxid {
    color: $themeColor;
}
#boxid2 {
    color: $themeColor;
}
.divBox {
    width: 50%;
    height: 100%;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}
</style>
