<template>
    <div class="box">
        <div class="title">
            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
            <p>智慧售电云平台</p>
            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
        </div>
        <div class="containter">
            <div class="left">
                <div class="ndqyyh">
                    <p class="title">年度签约用户</p>
                    <div class="bg_title">
                        <p class="tit_first">2451<span class="tit_danwei">户</span></p>
                        <div class="tit_second">
                            <div>
                                <p>同比</p>
                                <p class="tb_percent">12.23% <img src="../assets/zhsdy/325数值上升 (4).png" alt=""></p>
                            </div>
                            <div>
                                <p>环比</p>
                                <p class="tb_percent">27.16% <img src="../assets/zhsdy/325数值上升(1).png" alt=""> </p>
                            </div>
                        </div>
                    </div>
                    <div id="qyyh"></div>
                </div>
                <div class="ndsdl">
                    <p class="title">年度售电量</p>
                    <div class="bg_title">
                        <p class="tit_first">7,5624<span class="tit_danwei">MWH</span></p>
                        <div class="tit_second">
                            <div>
                                <p>同比</p>
                                <p class="tb_percent">12.23% <img src="../assets/zhsdy/325数值上升 (4).png" alt=""></p>
                            </div>
                            <div>
                                <p>环比</p>
                                <p class="tb_percent">27.16% <img src="../assets/zhsdy/325数值上升(1).png" alt=""> </p>
                            </div>
                        </div>
                    </div>
                    <div id="ndsdl"></div>
                </div>
            </div>
            <div class="right">
                <div class="ndsdje">
                    <p class="title">年度售电金额</p>
                    <div id="ndsdje">
                        <div class="infos" v-for="(item, index) in lists" :key="index">
                            <div class="first">
                                <p>
                                    <img src="../assets/zhsdy/组 3189.png" alt="">
                                    <span class="titles">{{ item.title }}</span>
                                </p>
                                <p class="money">{{ item.money }}<span class="danwei">万元</span></p>
                            </div>
                            <div class="second">
                                <div class="s_tit">
                                    <div>
                                        <p>同比</p>
                                        <p class="tb_percent">{{ item.tb }}% <img src="../assets/zhsdy/325数值上升 (4).png"
                                                alt=""></p>
                                    </div>
                                    <div>
                                        <p>环比</p>
                                        <p class="tb_percent">{{ item.hb }}% <img src="../assets/zhsdy/325数值上升(1).png"
                                                alt="">
                                        </p>
                                    </div>
                                </div>
                                <div class="bigBox">
                                    <div class="smallBox" :style="{ width: `${item.percent}px` }"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pcfx">
                    <p class="title">偏差分析</p>
                    <div id="pcfx">
                        <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
                            <div class="pc_l">
                                <img src="../assets/zhsdy/组 3192.png" alt="">
                                <span class="pc_name">{{ item.name }}</span>
                                <span class="pc_count">{{ item.count }}</span>
                                <span class="pc_danwei">{{ item.danwei }}</span>
                            </div>
                            <div class="pc_r">
                                <p>环比</p>
                                <p class="tb_percent">{{ item.hb }}% <img src="../assets/zhsdy/325数值上升(1).png" alt=""> </p>
                            </div>
                        </div>
                        <div id="pcfxb"></div>
                    </div>
                </div>
                <div class="qyydlpm">
                    <p class="title">企业用电量排名</p>
                    <ul class="list">
                        <li v-for="(item, index) in list" :style="listClass(index)">
                            <p>{{ index + 1 }}</p>
                            <p>{{ item.name }}</p>
                            <p>{{ item.value }}</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="map"></div>
            <div class="footer">
                <div class="ndqylfb">
                    <p class="title">年度签约量分布</p>
                    <div id="ndqylfb"></div>
                </div>
                <div class="ggzcxx">
                    <p class="title">公告政策信息</p>
                    <div id="ggzcxx">
                        <ul>
                            <li v-for="(item, index) in infos">
                                <img src="../assets/zhsdy/组 3147.png" alt="" class="img">
                                <span class="times">{{ item.time }}</span>
                                <span class="info">{{ item.info }}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
const fontSizeRem = (size) => {
    const clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
    if (!clientWidth) return;
    let fontSize = clientWidth / 1920; //尺寸大小
    return size * fontSize;
}
import * as echarts from "echarts";
// import { fontSizeRem } from "../assets/function";
export default {
    data() {
        return {
            res: "日",
            type: "电",
            list: [
                {
                    name: "济南综合新能源服务有线公司",
                    value: "236",
                },
                {
                    name: "济南综合新能源服务有线公司",
                    value: "236",
                },
                {
                    name: "济南综合新能源服务有线公司",
                    value: "236",
                },
                {
                    name: "济南综合新能源服务有线公司",
                    value: "236",
                },
                {
                    name: "济南综合新能源服务有线公司",
                    value: "236",
                },
                {
                    name: "济南综合新能源服务有线公司",
                    value: "236",
                },
                {
                    name: "济南综合新能源服务有线公司",
                    value: "236",
                },
                {
                    name: "济南综合新能源服务有线公司",
                    value: "236",
                },
                {
                    name: "济南综合新能源服务有线公司",
                    value: "236",
                },
                {
                    name: "济南综合新能源服务有线公司",
                    value: "236",
                },
            ],
            option: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    backgroundColor: 'rgba(9, 24, 48, 0.5)',
                    borderColor: 'rgba(75, 253, 238, 0.4)',
                    textStyle: {
                        color: '#CFE3FC',
                    },
                    borderWidth: 1,
                },
                grid: {
                    top: '15%',
                    right: '5%',
                    left: "8%",
                    bottom: '12%'
                },
                xAxis: [{
                    name: "",
                    type: 'category',
                    data: ["济南", "烟台", "威海", "德州", "滨州", "泰安", "临沂", "烟台", "青岛", "青岛", "青岛", "青岛", "青岛",],
                    axisLine: {
                        lineStyle: {
                            color: '#FFFFFF'
                        }
                    },
                    axisLabel: {
                        margin: 10,
                        color: '#e2e9ff',
                        textStyle: {
                            fontSize: 12
                        },
                    },
                    axisTick: {
                        show: false
                    }
                }],
                yAxis: [{
                    name: "单位：MWh",
                    axisLabel: {
                        formatter: '{value}',
                        color: '#e2e9ff',
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#FFFFFF'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.12)'
                        }
                    }
                }],
                series: [{
                    type: 'bar',
                    data: [760, 520, 850, 400, 756, 200, 400, 700, 550, 440, 220, 160, 300, 400],
                    barWidth: '30%',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(0,244,255,1)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(0,77,167,1)' // 100% 处的颜色
                            }], false),
                            shadowColor: 'rgba(0,160,221,1)',
                            shadowBlur: 4,
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            lineHeight: 10,
                            formatter: '{c}',
                            position: 'top',
                            textStyle: {
                                color: '#00D6F9',
                                fontSize: 12
                            }

                        }
                    }
                }]
            },
            infos: [
                {
                    time: "2021-10-02  11:13:52",
                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
                },
                {
                    time: "2021-10-02  11:13:52",
                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
                }, {
                    time: "2021-10-02  11:13:52",
                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
                }, {
                    time: "2021-10-02  11:13:52",
                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
                }, {
                    time: "2021-10-02  11:13:52",
                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
                }, {
                    time: "2021-10-02  11:13:52",
                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
                },
            ],
            lists: [
                {
                    title: "年度销售指标完成率",
                    money: "7,965",
                    tb: "12.23",
                    hb: "27.16",
                    percent: "80",
                },
                {
                    title: "年度收益金额",
                    money: "5,665",
                    tb: "12.23",
                    hb: "27.16",
                    percent: "40",
                }
            ],
            pclist: [
                {
                    name: "月度偏差电量",
                    count: "5514",
                    danwei: "MWh",
                    hb: "27.16"
                },
                {
                    name: "月度偏差率",
                    count: "25",
                    danwei: "%",
                    hb: "27.16"
                },
            ]
        };
    },
    methods: {
        listClass(index) {
            if (index == 0) {
                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
            } else if (index == 1) {
                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
            } else if (index == 2) {
                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
            }
        },
        defineEcharts(dom, option) {
            var chartDom = document.getElementById(dom);
            var myChart = this.$echarts.init(chartDom, null, {
                devicePixelRatio: 10, // 设置为2或更高的值
            });
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },
        qyyh() {
            let option = {
                // backgroundColor: '#081736',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        lineStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(0, 255, 233,0)'
                                    },
                                    {
                                        offset: 0.5,
                                        color: 'rgba(255, 255, 255,1)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(0, 255, 233,0)'
                                    }
                                ],
                                global: false
                            }
                        }
                    }
                },

                grid: {
                    top: '12%',
                    left: '10%',
                    right: '10%',
                    bottom: '25%'
                    // containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#009dff'
                            }
                        },

                        axisLabel: {
                            color: '#fff',
                            width: 100
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#00BFF3',
                                opacity: 0.23
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        boundaryGap: false,
                        data: [
                            "01",
                            "02",
                            "03",
                            "04",
                            "05",
                            "06",
                            "07",
                            "08",
                            "09",
                            "10",
                            "11",
                            "12",
                        ] //this.$moment(data.times).format("HH-mm") ,
                    }
                ],

                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        // max: 140,
                        splitNumber: 4,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#00BFF3',
                                opacity: 0.23
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#009dff'
                            }
                        },
                        axisLabel: {
                            show: true,
                            margin: 20,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        axisTick: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '',
                        type: 'line',
                        smooth: true,
                        showAllSymbol: true,
                        // symbol: 'circle',
                        symbolSize: 2,
                        lineStyle: {
                            normal: {
                                color: '#2CABE3'
                            }
                        },
                        itemStyle: {
                            color: '#2CABE3',
                            borderColor: '#2CABE3',
                            borderWidth: 2
                        },
                        data: [
                            4, 7, 5, 4, 3, 5, 8, 7, 5, 4, 3, 5, 8, 4, 7, 5, 4, 3, 5, 8, 7, 5, 4, 3,
                            5, 8
                        ] //data.values
                    },
                    {
                        name: '',
                        type: 'line',
                        smooth: true,
                        showAllSymbol: true,
                        // symbol: 'circle',
                        symbolSize: 2,
                        lineStyle: {
                            normal: {
                                color: '#7def86'
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#7def86',
                                borderColor: 'rgba(0, 255, 240, 1)',
                                lineStyle: {
                                    color: 'rgba(0, 255, 240, 1)'
                                }
                            }
                        },
                        data: [
                            3, 5, 4, 2, 1, 7, 6, 5, 4, 2, 1, 7, 6, 3, 5, 4, 2, 1, 7, 6, 5, 4, 2, 1,
                            7, 6
                        ] //data.values
                    }
                ]
            };
            this.defineEcharts("qyyh", option)
        },
        // 年度售电量
        ndsdl() {
            // 假数据
            let left1 = {
                code: 200,
                msg: "人数趋势图获取成功",
                data: {
                    count: [
                        153456,
                        143456,
                        163456,
                        183456,
                        163456,
                        153456,
                        163456,
                        133456,
                        163456,
                        143456,
                        103456,
                        113456,
                        153456,
                        133456,
                        143456
                    ],
                    time: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12"
                    ]
                }
            };
            //计算最大值
            function maxNumCount(num) {
                let maxNum = "";
                //将数字转化为数组
                let max = num.toString().split("");
                for (var i = 0; i < max.length; i++) {
                    if (i > 1) {
                        maxNum += "0";
                    }
                }
                //组装补0
                if (maxNum.length > 1) {
                    if (max[1] == "9") {
                        maxNum = parseInt(max[0]) + 1 + "0" + maxNum;
                    } else {
                        maxNum = max[0] + (parseInt(max[1]) + 1) + maxNum;
                    }
                } else {
                    maxNum = "100";
                }
                return maxNum;
            }
            //计算最小值
            function minNumCount(num) {
                if (num < 10000) {
                    return "0";
                }
                let minNum = "";
                //将数字转化为数组
                let min = num.toString().split("");
                for (var i = 0; i < min.length; i++) {
                    //组装补0
                    if (i > 1) {
                        minNum += "0";
                    }
                }
                if (min[1] == "0") {
                    minNum = parseInt(min[0]) - 1 + "9" + minNum;
                } else {
                    minNum = min[0] + parseInt(min[1]) + minNum;
                }

                return minNum;
            }

            let maxNum = Math.max(...left1.data.count);
            let minNum = Math.min(...left1.data.count);
            maxNum = maxNumCount(maxNum);
            minNum = minNumCount(minNum);
            let yName = "人数（万）";
            if (maxNum > 9999999) {
                yName = "人数（千万）";
            }
            var option;

            option = {
                grid: {
                    width: "84%",
                    height: "75%",
                    top: "20%", //生成的图片和顶部的间距
                    left: "5%",
                    bottom: "0%",
                    right: "16%",
                    containLabel: true //为ture才会生效
                },
                tooltip: {
                    trigger: "axis"
                    //   axisPointer: {
                    //     type: "shadow",
                    //   },
                },
                xAxis: {
                    // name: "日期",
                    nameTextStyle: {
                        color: "#03CECF",
                        fontSize: 14
                    },
                    type: "category",
                    boundaryGap: false,
                    data: left1.data.time,
                    axisLabel: {
                        color: "#03CECF",
                        fontSize: 14,
                        margin: 10
                        // interval: 0, //使x轴上的文字显示完全,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgb(37,52,82)"
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: "value",
                    name: yName,
                    nameTextStyle: {
                        color: "#03CECF",
                        fontSize: 14
                    },
                    min: minNum,
                    max: maxNum,
                    axisLine: {
                        lineStyle: {
                            color: "rgb(37,52,82)"
                        },
                        show: true
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(37,52,82)"
                        }
                    },
                    axisLabel: {
                        color: "#03CECF",
                        fontSize: 14,
                        interval: 20,
                        formatter: function (value, index) {
                            if (yName.indexOf("千万") && maxNum > 10000000) {
                                value = (value / 10000000).toFixed(2);
                            } else if (maxNum > 10000 && maxNum < 10000000) {
                                value = value / 10000;
                            }
                            return value;
                        }
                    }
                },
                splitLine: {
                    show: false
                },
                series: [
                    {
                        data: left1.data.count,
                        type: "line",
                        showSymbol: true,
                        itemStyle: {
                            emphasis: {
                                color: "rgb(7,162,148)",
                                borderColor: "rgba(7,162,148,0.6)",
                                borderWidth: 20
                            },
                            normal: {
                                color: "rgb(62,195,221)",
                                borderColor: "rgb(6,65,95)",
                                lineStyle: {
                                    color: "rgb(101,184,196)"
                                }
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#68e3e5"
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(24, 68, 121,0)"
                                        }
                                    ],
                                    false
                                )
                            }
                        }
                    }
                ]
            };
        },
        //偏差分析
        pcfx() {
            // mock 数据
            const dataArr = {
                xdata: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
                rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
                rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
                disinfeced: [320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321],
                disinfeced2: [320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321],
            }
            const grid = { top: '20%', left: '10%', right: '10%', bottom: '15%' }
            // xAxis
            const xAxis = {
                axisTick: { show: true },
                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
                axisLabel: { textStyle: { fontSize: 12, color: '#fff' }, },
                data: dataArr.xdata
            }
            // yAxis
            const yAxis = [{
                type: "value",
                name: "单位MWh",
                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
                axisLine: { show: false, lineStyle: { color: "#fff" } },
                axisLabel: { textStyle: { fontSize: 12, color: '#fff' } }
            }, {
                // 双y轴，主要用于折线图，所以不需要显示坐标
                type: "value",
                show: true,
                min: -20,
                max: 30,
                axisLabel: {
                    formatter: "{value}" + "%",
                    textStyle: { fontSize: 12, color: '#fff' }
                }
            }]

            // series
            const series = [
                {
                    z: 1,
                    // stack: '总量',
                    type: 'bar',
                    name: '电费',
                    barWidth: 9,
                    // barGap: '-100%',
                    data: dataArr.disinfeced,
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0, x2: 1, y: 0, y2: 0,
                            colorStops: [{ offset: 0, color: 'rgba(1, 197, 185, 1)' }, { offset: 0.5, color: 'rgba(1, 197, 185, .8)' }, { offset: 0.5, color: 'rgba(1, 197, 185, .8)' }, { offset: 1, color: 'rgba(1, 197, 185, 1)' }]
                        }
                    },
                },
                {
                    z: 2,
                    // stack: '总量',
                    type: 'bar',
                    name: '',
                    barWidth: 9,
                    // barGap: '-100%',
                    data: dataArr.disinfeced2,
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0, x2: 1, y: 0, y2: 0,
                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
                        }
                    },
                },
                {
                    z: 9,
                    // 双y轴
                    yAxisIndex: 1,
                    name: '销售电价', type: 'line',
                    symbol: 'circle',
                    symbolSize: [6, 6],
                    color: {
                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
                        // 0% 处的颜色                           // 100% 处的颜色
                        colorStops: [{ offset: 0, color: '#9DBA19 ' }, { offset: 1, color: '#9DBA19' }],
                        global: false // 缺省为 false
                    },
                    lineStyle: {
                        color: {
                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
                            // 0% 处的颜色                           // 100% 处的颜色
                            colorStops: [{ offset: 0, color: '#9DBA19 ' }, { offset: 1, color: '#9DBA19' }],
                            global: false // 缺省为 false
                        }
                    },
                    // 修改的是线下区域的颜色
                    // areaStyle: {
                    //     color: new echarts.graphic.LinearGradient(
                    //         // 右/下/左/上
                    //         0, 0, 0, 1, [
                    //         { offset: 0, color: 'rgba(255, 209, 26, .2)' },
                    //         { offset: 1, color: 'transparent' }
                    //     ])
                    // },
                    data: dataArr.rateData
                },
                {
                    z: 9,
                    // 双y轴
                    yAxisIndex: 1,
                    name: '', type: 'line',
                    symbol: 'circle',
                    symbolSize: [6, 6],
                    color: {
                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
                        // 0% 处的颜色                           // 100% 处的颜色
                        colorStops: [{ offset: 0, color: '#01BC5A ' }, { offset: 1, color: '#01BC5A' }],
                        global: false // 缺省为 false
                    },
                    lineStyle: {
                        color: {
                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
                            // 0% 处的颜色                           // 100% 处的颜色
                            colorStops: [{ offset: 0, color: '#01BC5A ' }, { offset: 1, color: '#01BC5A' }],
                            global: false // 缺省为 false
                        }
                    },
                    // 修改的是线下区域的颜色
                    // areaStyle: {
                    //     color: new echarts.graphic.LinearGradient(
                    //         // 右/下/左/上
                    //         0, 0, 0, 1, [
                    //         { offset: 0, color: 'rgba(255, 209, 26, .2)' },
                    //         { offset: 1, color: 'transparent' }
                    //     ])
                    // },
                    data: dataArr.rateData2
                }]
            let option = { xAxis, yAxis, series, grid }
            this.defineEcharts("pcfxb", option);
        },
    },
    mounted() {
        this.defineEcharts("ndqylfb", this.option);
        // this.defineEcharts("ynl", this.option1);
        this.qyyh();
        this.pcfx();
        var data = [
            {
                name: "南京市",
                value: 1,
            },
            {
                name: "济南市",
                value: 2,
            },
            {
                name: "徐州市",
                value: 3,
            },
            {
                name: "常州市",
                value: 4,
            },
            {
                name: "苏州市",
                value: 5,
            },
            {
                name: "南通市",
                value: 6,
            },
            {
                name: "连云港市",
                value: 7,
            },
            {
                name: "淮安市",
                value: 8,
            },
            {
                name: "盐城市",
                value: 9,
            },
            {
                name: "扬州市",
                value: 10,
            },
            {
                name: "镇江市",
                value: 11,
            },
            {
                name: "泰州市",
                value: 12,
            },
            {
                name: "宿迁市",
                value: 13,
            },
        ];
        var splitList = [
            {
                start: 1,
                end: 1,
                label: "济南市",
                color: "#236da8",
            },
            {
                start: 2,
                end: 2,
                label: "无锡市",
                color: "#2884db",
            },
            {
                start: 3,
                end: 3,
                label: "徐州市",
                color: "#244779",
            },
            {
                start: 4,
                end: 4,
                label: "常州市",
                color: "#246198",
            },
            {
                start: 5,
                end: 5,
                label: "苏州市",
                color: "#2884db",
            },
            {
                start: 6,
                end: 6,
                label: "南通市",
                color: "#2884db",
            },
            {
                start: 7,
                end: 7,
                label: "连云港市",
                color: "#244779",
            },
            {
                start: 8,
                end: 8,
                label: "淮安市",
                color: "#244779",
            },
            {
                start: 9,
                end: 9,
                label: "盐城市",
                color: "#244779",
            },
            {
                start: 10,
                end: 10,
                label: "扬州市",
                color: "#246198",
            },
            {
                start: 11,
                end: 11,
                label: "镇江市",
                color: "#2884db",
            },
            {
                start: 12,
                end: 12,
                label: "泰州市",
                color: "#2884db",
            },
            {
                start: 13,
                end: 13,
                label: "宿迁市",
                color: "#244779",
            },
        ];
        var chartDom = document.getElementById("map");
        var myChart = this.$echarts.init(chartDom, null, {
            devicePixelRatio: 10, // 设置为2或更高的值
        });

        //获取山东地图数据。
        $.get(
            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
            function (geojson) {
                echarts.registerMap("山东", geojson);
                let option = {
                    series: [
                        {
                            tooltip: {
                                trigger: "item",
                            },
                            name: "山东",
                            type: "map3D",
                            map: "山东",
                            boxDepth: 60, //地图倾斜度
                            regionHeight: 6, //地图厚度
                            label: {
                                show: true, //是否显示市
                                textStyle: {
                                    color: "#fff", //文字颜色
                                    fontSize: 12, //文字大小
                                    fontFamily: "微软雅黑",
                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
                                },
                            },
                            itemStyle: {
                                opacity: 1, // 透明度
                                borderWidth: 1.5, //分界线宽度
                                borderColor: "#0699E4", //分界线颜色
                            },
                            groundplane: {
                                show: true,
                            },
                            data: data,
                            //shading: 'realistic',
                            // 真实感材质相关配置 shading: 'realistic'时有效
                            realisticMaterial: {
                                detailTexture: "#093099", // 纹理贴图
                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
                                metalness: 1, // 0材质是非金属 ，1金属
                                roughnessAdjust: 0,
                            },
                            viewControl: {
                                distance: 80, // 地图视角 控制初始大小
                                rotateSensitivity: 1, // 旋转
                                zoomSensitivity: 1, // 缩放
                            },
                        },
                    ],
                    dataRange: {
                        show: false,
                        splitList: splitList,
                    },
                    animation: true,
                };
                myChart.setOption(option);
                myChart.on("click", this.chartClick);
                let chartClick = function (param) {
                    console.log(param);
                    myChart.setOption(option, false);
                    window.addEventListener("resize", function () {
                        myChart.resize();
                    });
                    var selectedPro = param.name;
                    if (!cityProper[selectedPro]) {
                        option.series.splice(1);
                        option.legend = null;
                        option.visualMap = null;
                        myChart.setOption(option, true);
                        return;
                    }
                    //获取点击区域数据
                    $.get(cityProper[selectedPro], function (geojson) {
                        echarts.registerMap(selectedPro, geojson);
                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
                        option.series[0] = {
                            name: "",
                            type: "map",
                            map: selectedPro,
                            boxDepth: 80, //地图倾斜度
                            regionHeight: 5, //地图厚度
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                    },
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                    },
                                },
                            },
                            groundplane: {
                                show: false,
                            },
                            data: data,
                            shading: "realistic",
                            // 真实感材质相关配置 shading: 'realistic'时有效
                            realisticMaterial: {
                                detailTexture: "#fff", // 纹理贴图
                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
                                metalness: 0, // 0材质是非金属 ，1金属
                                roughnessAdjust: 0,
                            },
                            viewControl: {
                                distance: 100, // 地图视角 控制初始大小
                                rotateSensitivity: 1, // 旋转
                                zoomSensitivity: 1, // 缩放
                            },
                        };
                        myChart.setOption(option);
                    });
                };
            }
        );
    },
    beforeDestroy() {
        //离开页面后，删除屏幕监听，防止监听事件一直存在
        window.removeEventListener("resize", this.getResize);
    },
};
</script>
<style scoped lang="less">
.box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: #fff;

    .title {
        width: 100%;
        height: 76px;
        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;

        p {
            width: 527px;
            height: 47px;
            font-size: 44px;
            font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
            font-weight: 600;
            line-height: 47px;
            letter-spacing: 3px;
            color: #fff;
            margin-left: -60px;
        }

        img:nth-of-type(1) {
            width: 231px;
            height: 59px;
        }

        img:nth-of-type(2) {
            width: 158px;
            height: 28px;
        }
    }

    .containter {
        width: 100%;
        height: 967px;
        display: flex;
        position: relative;
        justify-content: space-between;

        .left {
            width: 436px;
            height: 100%;

            .ndqyyh {
                // height: 27.22vh;
                height: 294px;
                //   width: 100%;
                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
                background-size: cover;
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;

                .title {
                    position: absolute;
                    left: 160px;
                    width: 144px;
                    height: 36px;
                    font-size: 18px;
                    font-family: "Source Han Sans";
                    font-weight: 700;
                    color: rgba(255, 255, 255, 0.87);
                    line-height: 36px;
                }


                .bg_title {
                    width: 394px;
                    height: 62px;
                    background: url(../assets/zhsdy/组\ 3187.png);
                    background-size: cover;
                    position: absolute;
                    top: 40px;
                    display: flex;
                    justify-content: space-around;

                    .tit_first {
                        width: 116px;
                        height: 44px;
                        font-size: 32px;
                        font-weight: 700;
                        color: #14ADFD;
                        line-height: 44px;
                        display: flex;

                        .tit_danwei {
                            width: 14px;
                            height: 44px;
                            font-size: 14px;
                            font-weight: 400;
                            color: #FFFFFF;
                            line-height: 44px;
                        }
                    }

                    .tit_second {
                        width: 132px;
                        display: flex;
                        justify-content: space-between;

                        div {
                            p:nth-child(1) {
                                width: 28px;
                                height: 24px;
                                font-size: 14px;
                                font-weight: 400;
                                color: #FFFFFF;
                                line-height: 24px;
                            }

                            p.tb_percent {
                                width: 57px;
                                height: 30px;
                                font-size: 16px;
                                font-weight: 700;
                                color: #F2B810;
                                line-height: 30px;
                                display: flex;

                                img {
                                    width: 12px;
                                    height: 12px;
                                    margin-top: 4x;
                                }
                            }
                        }
                    }
                }

                #qyyh {
                    width: 100%;
                    height: 180px;
                    margin-top: 100px;
                }
            }

            .ndsdl {
                height: 315px;
                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
                background-size: cover;
                margin-top: 6px;
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;

                .title {
                    position: absolute;
                    left: 160px;
                    width: 144px;
                    height: 36px;
                    font-size: 18px;
                    font-family: "Source Han Sans";
                    font-weight: 700;
                    color: rgba(255, 255, 255, 0.87);
                    line-height: 36px;
                }

                .bg_title {
                    width: 394px;
                    height: 62px;
                    background: url(../assets/zhsdy/组\ 3187.png);
                    background-size: cover;
                    position: absolute;
                    top: 40px;
                    display: flex;
                    justify-content: space-around;

                    .tit_first {
                        width: 116px;
                        height: 44px;
                        font-size: 32px;
                        font-weight: 700;
                        color: #14ADFD;
                        line-height: 44px;
                        display: flex;

                        .tit_danwei {
                            width: 14px;
                            height: 44px;
                            font-size: 14px;
                            font-weight: 400;
                            color: #FFFFFF;
                            line-height: 44px;
                        }
                    }

                    .tit_second {
                        width: 132px;
                        display: flex;
                        justify-content: space-between;

                        div {
                            p:nth-child(1) {
                                width: 28px;
                                height: 24px;
                                font-size: 14px;
                                font-weight: 400;
                                color: #FFFFFF;
                                line-height: 24px;
                            }

                            p.tb_percent {
                                width: 57px;
                                height: 30px;
                                font-size: 16px;
                                font-weight: 700;
                                color: #F2B810;
                                line-height: 30px;
                                display: flex;

                                img {
                                    width: 12px;
                                    height: 12px;
                                    margin-top: 4x;
                                }
                            }
                        }
                    }
                }

                #ndsdl {
                    position: absolute;
                    width: 100%;
                    height: 200px;
                    bottom: 10px;
                }
            }

        }

        .right {
            width: 436px;
            height: 100%;

            .ndsdje {
                height: 294px;
                width: 100%;
                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
                background-size: cover;
                position: relative;

                .title {
                    position: absolute;
                    left: 160px;
                    width: 144px;
                    height: 36px;
                    font-size: 18px;
                    font-family: "Source Han Sans";
                    font-weight: 700;
                    color: rgba(255, 255, 255, 0.87);
                    line-height: 36px;
                }

                #ndsdje {
                    width: 100%;
                    height: 100%;
                    padding-top: 50px;

                    .infos {
                        width: 396px;
                        height: 104px;
                        display: flex;
                        justify-content: space-between;
                        background: url(../assets/zhsdy/组\ 3168.png);
                        background-size: cover;
                        margin: 0 auto;
                        margin-bottom: 15px;

                        .first {
                            width: 180px;

                            p:nth-child(1) {
                                width: 180px;
                                height: 44px;
                                display: flex;
                                justify-content: space-between;

                                img {
                                    width: 15px;
                                    height: 15px;
                                    border: none;
                                    display: block;
                                    margin-top: 10px;
                                    margin-left: 10px;
                                }

                                span.titles {
                                    width: 140px;
                                    height: 44px;
                                    font-size: 14px;
                                    font-weight: 400;
                                    color: #FFFFFF;
                                    line-height: 44px;
                                    display: block;
                                }
                            }

                            p.money {
                                width: 145px;
                                height: 44px;
                                font-size: 40px;
                                font-weight: 700;
                                color: #52C2FF;
                                line-height: 44px;

                                .danwei {
                                    color: #fff;
                                    font-size: 14px;
                                }
                            }
                        }

                        .second {
                            width: 172px;
                            height: 100%;

                            div.s_tit {
                                width: 172px;
                                display: flex;
                                justify-content: space-around;

                                p:nth-child(1) {
                                    width: 28px;
                                    height: 36px;
                                    font-size: 14px;
                                    font-weight: 400;
                                    color: #FFFFFF;
                                    line-height: 36px;
                                }

                                p.tb_percent {
                                    width: 57px;
                                    height: 30px;
                                    font-size: 16px;
                                    font-weight: 700;
                                    color: #F2B810;
                                    line-height: 30px;
                                    display: flex;

                                    img {
                                        width: 12px;
                                        height: 12px;
                                        margin-top: 8px;
                                    }
                                }
                            }

                            .bigBox {
                                width: 172px;
                                height: 10px;
                                background-color: #273546;
                                border-radius: 67px 67px 67px 67px;
                                margin-top: 5px;

                                .smallBox {
                                    width: 100px;
                                    height: 10px;
                                    border-radius: 67px 67px 67px 67px;
                                    background: linear-gradient(to right,
                                            rgba(38, 206, 253, 1) 20%,
                                            rgba(42, 254, 255, 1) 100%,
                                            rgba(38, 206, 253, 1) 20%);
                                }
                            }
                        }
                    }
                }
            }

            .pcfx {
                height: 294px;
                width: 100%;
                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
                background-size: cover;
                position: relative;
                margin-top: 6px;

                .title {
                    position: absolute;
                    left: 160px;
                    width: 144px;
                    height: 36px;
                    font-size: 18px;
                    font-family: "Source Han Sans";
                    font-weight: 700;
                    color: rgba(255, 255, 255, 0.87);
                    line-height: 36px;
                }

                #pcfx {
                    width: 100%;
                    height: 100%;
                    padding-top: 40px;

                    .pc_tit {
                        width: 398px;
                        height: 48px;
                        margin: 0 auto;
                        background: url(../assets/zhsdy/组\ 3169.png);
                        background-size: cover;
                        display: flex;
                        justify-content: space-between;
                        margin-top: 5px;

                        .pc_l {
                            width: 272px;
                            height: 48px;
                            display: flex;
                            justify-content: flex-start;

                            .pc_name {
                                margin-left: 18px;
                                height: 44px;
                                font-size: 14px;
                                font-weight: 400;
                                color: #FFFFFF;
                                line-height: 44px;
                                display: block;
                            }

                            img {
                                width: 15px;
                                height: 15px;
                                margin-top: 18px;
                                margin-left: 10px;
                            }

                            .pc_count {
                                margin-left: 14px;
                                height: 44px;
                                font-size: 24px;
                                font-weight: 700;
                                color: #0AA7FF;
                                line-height: 44px;
                                display: block;
                            }

                            .pc_danwei {
                                margin-left: 6px;
                                width: 33px;
                                height: 44px;
                                font-size: 14px;
                                font-weight: 400;
                                color: #FFFFFF;
                                line-height: 44px;
                            }
                        }

                        .pc_r {
                            margin-right: 20px;

                            p:nth-child(1) {
                                width: 28px;
                                height: 24px;
                                font-size: 14px;
                                font-weight: 400;
                                color: #FFFFFF;
                                line-height: 24px;
                            }

                            p.tb_percent {
                                width: 57px;
                                height: 24px;
                                font-size: 16px;
                                font-weight: 700;
                                color: #F2B810;
                                line-height: 24px;
                                display: flex;

                                img {
                                    width: 12px;
                                    height: 12px;
                                    margin-top: 8px;
                                }
                            }
                        }
                    }

                    #pcfxb {
                        width: 100%;
                        height: 150px;
                    }
                }
            }

            .qyydlpm {
                height: 353px;
                width: 100%;
                background: url("../assets/客户侧总体用能情况分析/组 3119.png");
                background-size: cover;
                position: relative;
                margin-top: 6px;

                .title {
                    position: absolute;
                    left: 160px;
                    width: 144px;
                    height: 36px;
                    font-size: 18px;
                    font-family: "Source Han Sans";
                    font-weight: 700;
                    color: rgba(255, 255, 255, 0.87);
                    line-height: 36px;
                }

                .list {
                    list-style: none;
                    height: 300px;
                    width: 100%;
                    float: left;
                    margin-top: 50px;

                    li {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 0 30px 0 30px;
                        box-sizing: border-box;
                        margin: 9px;

                        p:nth-of-type(1) {
                            background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
                            width: 24px;
                            height: 16px;
                            line-height: 16px;
                            background: rgba(34, 23, 23, 0.1);
                            border-radius: 0px 0px 0px 0px;
                            opacity: 1;
                            text-align: center;
                            border: 1px solid #b1b1b1;
                            background-size: cover;
                        }

                        p:nth-of-type(2) {
                            width: 190px;
                            height: 12px;
                            font-size: 14px;
                            font-family: "AlibabaPuHuiTi";
                            font-weight: 400;
                            color: rgba(255, 255, 255, 0.8);
                            line-height: 12px;
                        }

                        p:nth-of-type(3) {
                            width: 27px;
                            height: 12px;
                            font-size: 14px;
                            font-family: "AlibabaPuHuiTi";
                            font-weight: 500;
                            color: rgba(255, 255, 255, 0.8);
                            line-height: 12px;
                        }
                    }
                }
            }
        }

        .footer {
            position: absolute;
            width: 1445px;
            height: 325px;
            bottom: 10px;
            display: flex;
            justify-content: space-between;

            .ndqylfb {
                width: 776px;
                height: 100%;
                background: url(../assets/zhsdy/用能量-框.png);
                background-size: cover;
                position: relative;

                .title {
                    position: absolute;
                    left: 50%;
                    width: 144px;
                    height: 36px;
                    font-size: 18px;
                    font-family: "Source Han Sans";
                    font-weight: 700;
                    color: rgba(255, 255, 255, 0.87);
                    transform: translateX(-50%);
                    line-height: 36px;
                }

                #ndqylfb {
                    width: 100%;
                    height: 100%;
                }
            }

            .ggzcxx {
                width: 653px;
                height: 325px;
                background: url(../assets/zhsdy/组\ 3120.png);
                background-size: cover;
                position: relative;

                .title {
                    position: absolute;
                    left: 50%;
                    width: 144px;
                    height: 36px;
                    font-size: 18px;
                    font-family: "Source Han Sans";
                    font-weight: 700;
                    color: rgba(255, 255, 255, 0.87);
                    line-height: 36px;
                    transform: translateX(-50%);
                }

                #ggzcxx {
                    width: 100%;
                    margin-top: 60px;

                    ul {
                        width: 100%;


                        li {
                            width: 100%;
                            height: 40px;
                            padding: 0px 36px 0px 18px;
                            box-sizing: border-box;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;

                            .img {
                                width: 12px;
                                height: 12px;
                                display: block;
                            }

                            .times {
                                width: 145px;
                                height: 36px;
                                color: #52C2FF;
                                font-size: 14px;
                                line-height: 36px;
                                display: block;
                            }

                            .info {
                                width: 381px;
                                height: 36px;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                overflow: hidden;
                                font-size: 14px;
                                line-height: 36px;
                                display: block;
                            }
                        }

                        li:nth-child(2n+2) {
                            background: #0E2C7E;
                        }
                    }
                }
            }
        }

        #map {
            width: 994px;
            position: absolute;
            height: 627px;
            left: 50%;
            transform: translateX(-50%);
            overflow: hidden;
        }
    }
}
</style>
  