<template>
    <div>
        <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="电压等级:">
                <el-select
                    v-model.trim="powerVoltageLevel"
                    placeholder="请选择电压等级"
                    clearable
                    multiple
                    collapse-tags
                >
                    <el-option
                        v-for="item in voltageleveloption"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </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-table
                    stripe
                    highlight-current-row
                    header-cell-class-name="table_header"
                    :data="tableData"
                    style="width: 100%"
                    height="226px"
                    border
                    class="mb10"
                >
                    <el-table-column prop="name" label="名称" min-width="140"></el-table-column>
                    <el-table-column prop="num" label="监测点数量" min-width="140"></el-table-column>
                    <el-table-column prop="ringNum" label="监测点数量环比" min-width="140"></el-table-column>
                    <el-table-column prop="sameNum" label="监测点数量同比" min-width="140"></el-table-column>
                    <el-table-column prop="tractionStation" label="牵引站数量" min-width="140"></el-table-column>
                    <el-table-column prop="yhbSumNum" label="环比数量" min-width="140"></el-table-column>
                    <el-table-column prop="ytbSumNum" label="同比数量" min-width="140"></el-table-column>
                </el-table>

                <!-- <el-radio-group v-model="radio">
          <el-radio v-for="item in radioList" :key="item.id" :label="item.id">{{
            item.name
          }}</el-radio>
        </el-radio-group> -->
                <el-table
                    stripe
                    highlight-current-row
                    header-cell-class-name="table_header"
                    :data="tableData1"
                    style="width: 100%"
                    :height="vh + 'px'"
                    border
                    class="mt10 mb10"
                >
                    <el-table-column
                        prop="connetGroupWay"
                        label="接线类型"
                        show-overflow-tooltip
                        width="200px"
                        :formatter="formatter"
                    ></el-table-column>
                    <el-table-column prop="num" label="牵引站数量"></el-table-column>
                    <el-table-column prop="rate95" label="负载量（95值）"></el-table-column>
                    <el-table-column prop="rate99" label="负载量（99值）"></el-table-column>
                    <el-table-column prop="rateAvg" label="负载量（平均值）"></el-table-column>
                    <!-- <el-table-column prop="hb" label="合计"> </el-table-column> -->
                </el-table>
                <!-- <div>牵引站额定功率(MVA)</div> -->
            </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 {
    getDisplayRailway,
    getMapDisplayRailway,
    getWiringTypeRailway
} from '@/api/SpecialAnalysisModuleDesign/overview/index.js'

export default {
    components: { Area, Timeinterval },
    props: {},
    data() {
        return {
            powerVoltageLevel: [],
            voltageleveloption: [],
            radio: '',
            list: [],
            radioList: [
                { name: '牵引站数', id: 1 },
                { name: '负载率(平均值)', id: 2 },
                { name: '负载率(95%值)', id: 3 },
                { name: '负载率(99%值)', id: 4 }
            ],
            form: {},
            typeList: [],
            vh: undefined,
            tableData: [],
            tableData1: [],
            zoom: '' ,//图表焦点校验
            timeOptions:[
            { label: '年份', value: 1 },

{ label: '月份', value: 3 }
            ]
        }
    },
    created() {
        this.info()
    },
    mounted() {

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

        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.onSubmit()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 365
        },
        info() {
            //   字典获取数据电压等级;
            this.voltageleveloption = dicData('Dev_Voltage', [])
            this.voltageleveloption.forEach(item => {
                this.powerVoltageLevel.push(item.id)
            })

            //   字典获取数据电压等级;
            // this.voltageleveloption = dicData("Dev_Voltage", []);
            getDisplayRailway({}).then(res => {
                this.list = res.data
                this.chart()
            })
        },
        // 查询
        onSubmit() {
            let form = {}
            form.powerVoltageLevel = this.powerVoltageLevel
            let type = this.$refs.interval.intervald
            if (type == 3) {
                form.year = this.$refs.interval.timeValue[0].slice(0, 4)
                form.month = [this.$refs.interval.timeValue[0].slice(5, 7)]
            } else {
                form.year = this.$refs.interval.timeValue[0].slice(0, 4)
                form.month = null
            }
            getMapDisplayRailway(form).then(res => {
                this.tableData = res.data
            })
            getWiringTypeRailway(form).then(res => {
                this.tableData1 = res.data
            })
        },
        handleNodeClick(data) {
            // console.log(data);
            this.form.deptIndex = 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 = [
                //Ⅰ类 (变电站)"
                [
                    {
                        name: '',
                        value: [114.463633, 36.098258]
                    },
                    {
                        name: '',
                        value: [114.536504, 36.484227]
                    },
                    {
                        name: '',
                        value: [114.549439, 36.535918]
                    },
                    {
                        name: '',
                        value: [114.560111, 36.578012]
                    },
                    {
                        name: '',
                        value: [114.565465, 36.603454]
                    },
                    {
                        name: '',
                        value: [114.56374, 36.778479]
                    },
                    {
                        name: '',
                        value: [114.560865, 36.915254]
                    },
                    {
                        name: '',
                        value: [114.591336, 37.024128]
                    },
                    {
                        name: '',
                        value: [114.597085, 37.183923]
                    },
                    {
                        name: '',
                        value: [114.593635, 37.316291]
                    },
                    {
                        name: '',
                        value: [114.575813, 37.477296]
                    },
                    {
                        name: '',
                        value: [114.553391, 37.557897]
                    },
                    {
                        name: '',
                        value: [114.483827, 37.821979]
                    },
                    {
                        name: '',
                        value: [114.49475, 38.0392]
                    },
                    {
                        name: '',
                        value: [114.731799, 38.261941]
                    },
                    {
                        name: '',
                        value: [114.784691, 38.297291]
                    },
                    {
                        name: '',
                        value: [114.956016, 38.430376]
                    },
                    {
                        name: '',
                        value: [115.13079, 38.549671]
                    },
                    {
                        name: '',
                        value: [115.452743, 38.724636]
                    },
                    {
                        name: '',
                        value: [115.680409, 38.960246]
                    },
                    {
                        name: '',
                        value: [115.895428, 39.228167]
                    },
                    {
                        name: '',
                        value: [116.100098, 39.546714]
                    },
                    {
                        name: '',
                        value: [116.203008, 39.686339]
                    },

                    {
                        name: '',
                        value: [116.352486, 39.894358]
                    }
                ]
            ]
            let mapData = []
            let title = []
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            setTimeout(() => {
                for (let k in this.list) {
                    title.push(k)
                    mapData.push([])

                    this.list[k].forEach(item => {
                        mapData[mapData.length - 1].push({
                            name: item.name,
                            powerrName: item.powerrName,
                            capacity: item.capacity,
                            voltageLevel: item.voltageLevel,
                            // terminalId: item.terminalId,
                            value: [item.longitude, item.latitude]
                        })
                    })
                }
            }, 0)

            // let maps=await map()
            // console.log(` maps.data`);
            let colors = echartsColor.FigureColor

            // 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) {
                            // console.log(params);
                            return params.name == ''
                                ? ''
                                : '<span>名称：' +
                                      params.name +
                                      (params.componentSubType == 'map'
                                          ? ''
                                          : `</span><br/>变电站： 
                   ${params.data.powerrName} 
                    </span><br/>装机容量： 
                    ${params.data.capacity} 
                    </span><br/>电压等级： 
                    ${params.data.voltageLevel} 
                    `)
                        }
                    },
                    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,
                        left: '0%',
                        top: '0%',
                        itemWidth: 20,

                        textStyle: {
                            color: '#000', //legend图标颜色  深灰
                            fontSize: 16
                        }
                    },
                    title: {
                        text: '',
                        left: 'left',
                        top: '60',
                        textStyle: {
                            color: '#C09611',
                            size: 20
                        }
                    },

                    visualMap: [
                        {
                            min: 0, //IF NO WAREHOUSES IN THIS CITY
                            max: 1, //填写城市的最大值
                            seriesIndex: 0,
                            show: false,

                            pieces: [
                                {
                                    value: 100,
                                    color: '#5496E6' //根据颜色代码自行更改
                                }
                                // {
                                //       gt: 200,
                                //       color: '#EE4C4C',
                                //   },
                            ], ///分段填充自定义颜色

                            //       calculable: true,
                            textStyle: {
                                color: '#000', //legend图标颜色  深灰
                                size: 20
                            },
                            formatter: function (value) {
                                return value.toFixed(1)
                                //       return "";    左下角图例滑过时显示空值
                            }
                        }
                    ],
                    series: [
                        {
                            type: 'lines',
                            name: '',
                            zlevel: 2
                        }
                    ]
                }
                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: 'lines',
                            polyline: true,
                            lineStyle: {
                                color: colors[i]
                            },
                            effect: {
                                show: true,
                                symbolSize: 10 * 0.63,
                                constantSpeed: 50 * 0.63,
                                trailLength: 0.5 * 0.63
                            },

                            data: [
                                {
                                    coords: linesX[i]
                                }
                                // ,
                            ]
                        },

                        {
                            name: title[i],
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            data: mapData[i],
                            symbol: '',
                            symbolSize: function (val) {
                                return 8
                            },
                            label: {
                                normal: {
                                    show: false,
                                    formatter: function (params) {
                                        // console.log(params);
                                        return params.name
                                    },
                                    position: 'right',

                                    fontSize: '8'
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: colors[i],
                                    borderWidth: 2,
                                    borderColor: '#ccc'
                                }
                            }
                        }
                    )
                })

                myChart2.clear(option)
                option && myChart2.setOption(option)
                window.echartsArr.push(myChart2)
                setTimeout(function () {
                    myChart2.resize()
                }, 0)
            })
        },
        // 数据过滤
        formatter(row, column) {
            let title = ''
            dicData('Connet_Group_Way', []).forEach(item => {
                if (item.id == row.connetGroupWay) {
                    title = item.name
                }
            })
            return title
        }
    },

    computed: {},

    watch: {}
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');

.boxP {
    display: flex;
    .boxR {
        width: calc(100% - 800px);
    }
    .boxL {
        width: 800px;
    }
}
</style>
