<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="jrtj">
                    <p class="title">接入统计</p>
                    <div class="insides">
                        <div class="con" v-for="item in tjlist">
                            <img src="../assets/tan/组 3128.png" alt="">
                            <div class="r_con">
                                <p>{{ item.count }}</p>
                                <p>{{ item.name }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="centers">
                        <p>100</p>
                        <p>总接入数量</p>
                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
                    </div>
                </div>
                <div class="ssfhzs">
                    <p class="title">实时负荷走势</p>
                    <ul class="typeBox">
                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
                            总量
                        </li>
                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
                            发电
                        </li>
                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
                            石化
                        </li>
                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
                            钢铁
                        </li>
                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
                            有色
                        </li>
                    </ul>
                    <div id="ssfhzs"></div>
                </div>
                <div class="ynl">
                    <p class="title">用能量</p>
                    <!-- <ul class="typeBox">
                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
                            电
                        </li>
                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
                            水
                        </li>
                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
                            蒸汽
                        </li>
                    </ul> -->
                    <div id="ynl"></div>
                </div>
            </div>
            <div class="right">
                <div class="tyjg">
                    <p class="title">碳源结构</p>
                    <div id="tyjg">
                        <div class="t_content">
                            <div v-for="(item, index) in controls" :key="index" class="tbg">
                                <p class="t_name">{{ item.name }}</p>
                                <p><span class="t_count">{{ item.count }}</span>
                                    <span class="t_img" v-if="item.isShow==true">
                                        <img src="../assets/tan/325数值上升.png" alt="">
                                    </span>
                                    <span class="t_img" v-else>
                                        <img src="../assets/tan/325数值上升 (2).png" alt="">
                                    </span>
                                </p>
                                <p></p>
                            </div>
                            <div>
                                <img src="../assets/tan/组 3141.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ynflzb">
                    <p class="title">用能分类占比</p>
                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
                    <div id="ynflzb"></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>
        </div>
    </div>
</template>
<script>
// import * as echarts from "echarts";
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: "总量",
            tjlist: [
                {
                    name: "工业生产",
                    count: "10",
                },
                {
                    name: "商业楼宇",
                    count: "22",
                },
                {
                    name: "公共建设",
                    count: "18",
                },
                {
                    name: "其他",
                    count: "50",
                },
            ],
            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: "cross",
                //     label: {
                //       backgroundColor: "#6a7985",
                //     },
                //   },
                // },
                // legend: {
                //     left: "right",
                //     data: [
                //         { icon: "roundRect", name: "昨日" },
                //         { icon: "roundRect", name: "今日" },
                //     ],
                //     textStyle: {
                //         fontSize: 14,
                //         fontFamily: "AlibabaPuHuiTi",
                //         fontWeight: 400,
                //         color: "rgba(255,255,255,0.8)",
                //     },
                // },

                grid: {
                    left: "4%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
                        axisLabel: {
                            show: true,
                            interval: 0,
                            textStyle: {
                                fontSize: fontSizeRem(12),
                                fontFamily: "AlibabaPuHuiTi",
                                fontWeight: 400,
                                color: "rgba(255,255,255,0.8)",
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "单位:万吨标煤",
                        nameTextStyle: {
                            color: "#fff",
                            fontSize: fontSizeRem(14),
                            padding: fontSizeRem(10),
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                fontSize: fontSizeRem(14),
                                fontFamily: "AlibabaPuHuiTi",
                                fontWeight: 400,
                                color: "rgba(255,255,255,0.8)",
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "",
                        type: "line",
                        stack: "Total",
                        smooth: true,
                        lineStyle: {
                            width: fontSizeRem(2),
                            color: "#29F1FA",
                        },
                        showSymbol: false,
                        itemStyle: {
                            color: "#29F1FA",
                        },
                        areaStyle: {
                            opacity: 0.4,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: "rgb(7, 51, 99)",
                                },
                                {
                                    offset: 1,
                                    color: "rgb(7, 67, 103)",
                                },
                            ]),
                        },
                        emphasis: {
                            focus: "series",
                        },
                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
                    },
                ],
            },
            option1: {
                // tooltip: {
                //   trigger: "axis",
                //   axisPointer: {
                //     type: "cross",
                //     label: {
                //       backgroundColor: "#6a7985",
                //     },
                //   },
                // },
                legend: {
                    left: "right",
                    data: [
                        { icon: "circle", name: "2022" },
                        { icon: "circle", name: "2023" },
                    ],
                    textStyle: {
                        fontSize: fontSizeRem(14),
                        fontFamily: "AlibabaPuHuiTi",
                        fontWeight: 400,
                        color: "rgba(255,255,255,0.8)",
                    },
                },
                grid: {
                    left: "4%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
                        axisLabel: {
                            show: true,
                            interval: 0,
                            textStyle: {
                                fontSize: fontSizeRem(12),
                                fontFamily: "AlibabaPuHuiTi",
                                fontWeight: 400,
                                color: "rgba(255,255,255,0.8)",
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "单位:万吨",
                        nameTextStyle: {
                            color: "#fff",
                            fontSize: fontSizeRem(14),
                            padding: 10,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                fontSize: fontSizeRem(14),
                                fontFamily: "AlibabaPuHuiTi",
                                fontWeight: 400,
                                color: "rgba(255,255,255,0.8)",
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "2022",
                        type: "line",
                        stack: "Total",
                        smooth: true,
                        lineStyle: {
                            width: fontSizeRem(2),
                            color: "#FDCC00",
                        },
                        showSymbol: false,
                        itemStyle: {
                            color: "#FDCC00",
                        },
                        areaStyle: {
                            opacity: 0.4,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: "rgb(7, 51, 99)",
                                },
                                {
                                    offset: 1,
                                    color: "rgb(7, 67, 103)",
                                },
                            ]),
                        },
                        emphasis: {
                            focus: "series",
                        },
                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
                    },
                    {
                        name: "2023",
                        type: "line",
                        // stack: "Total",
                        smooth: true,
                        lineStyle: {
                            width: 2,
                            color: "#1B7EF2",
                        },
                        showSymbol: false,
                        label: {
                            show: true,
                            position: "top",
                        },
                        itemStyle: {
                            color: "#1B7EF2",
                        },
                        areaStyle: {
                            opacity: 0.4,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: "rgb(7, 51, 96)",
                                },
                                {
                                    offset: 1,
                                    color: "rgb(9, 58, 117)",
                                },
                            ]),
                        },
                        emphasis: {
                            focus: "series",
                        },
                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
                    },
                ],
            },
        };
    },
    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();
            });
        },

        //用能分类占比
        initYnflzb() {
            let getParametricEquation = function (
                startRatio,
                endRatio,
                isSelected,
                isHovered,
                k,
                height
            ) {
                // 计算
                let midRatio = (startRatio + endRatio) / 2;

                let startRadian = startRatio * Math.PI * 2;
                let endRadian = endRatio * Math.PI * 2;
                let midRadian = midRatio * Math.PI * 2;

                // 如果只有一个扇形，则不实现选中效果。
                if (startRatio === 0 && endRatio === 1) {
                    isSelected = false;
                }

                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
                k = typeof k !== "undefined" ? k : 1 / 3;

                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

                // 计算高亮效果的放大比例（未高亮，则比例为 1）
                let hoverRate = isHovered ? 1.05 : 1;

                // 返回曲面参数方程
                return {
                    u: {
                        min: -Math.PI,
                        max: Math.PI * 3,
                        step: Math.PI / 32,
                    },

                    v: {
                        min: 0,
                        max: Math.PI * 2,
                        step: Math.PI / 20,
                    },

                    x: function (u, v) {
                        if (u < startRadian) {
                            return (
                                offsetX +
                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
                            );
                        }
                        if (u > endRadian) {
                            return (
                                offsetX +
                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
                            );
                        }
                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
                    },

                    y: function (u, v) {
                        if (u < startRadian) {
                            return (
                                offsetY +
                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
                            );
                        }
                        if (u > endRadian) {
                            return (
                                offsetY +
                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
                            );
                        }
                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
                    },

                    z: function (u, v) {
                        if (u < -Math.PI * 0.5) {
                            return Math.sin(u);
                        }
                        if (u > Math.PI * 2.5) {
                            return Math.sin(u);
                        }
                        return Math.sin(v) > 0 ? 1 * height : -1;
                    },
                };
            };
            // 生成模拟 3D 饼图的配置项
            let getPie3D = function (pieData, internalDiameterRatio) {
                let series = [];
                let sumValue = 0;
                let startValue = 0;
                let endValue = 0;
                let legendData = [];
                let k =
                    typeof internalDiameterRatio !== "undefined"
                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
                        : 1 / 3;

                // 为每一个饼图数据，生成一个 series-surface 配置
                for (let i = 0; i < pieData.length; i++) {
                    sumValue += pieData[i].value;

                    let seriesItem = {
                        name:
                            typeof pieData[i].name === "undefined"
                                ? `series${i}`
                                : pieData[i].name,
                        type: "surface",
                        parametric: true,
                        wireframe: {
                            show: false,
                        },
                        pieData: pieData[i],
                        pieStatus: {
                            selected: false,
                            hovered: false,
                            k: k,
                        },
                    };

                    if (typeof pieData[i].itemStyle != "undefined") {
                        let itemStyle = {};

                        typeof pieData[i].itemStyle.color != "undefined"
                            ? (itemStyle.color = pieData[i].itemStyle.color)
                            : null;
                        typeof pieData[i].itemStyle.opacity != "undefined"
                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
                            : null;

                        seriesItem.itemStyle = itemStyle;
                    }
                    series.push(seriesItem);
                }

                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
                for (let i = 0; i < series.length; i++) {
                    endValue = startValue + series[i].pieData.value;
                    console.log(series[i]);
                    series[i].pieData.startRatio = startValue / sumValue;
                    series[i].pieData.endRatio = endValue / sumValue;
                    series[i].parametricEquation = getParametricEquation(
                        series[i].pieData.startRatio,
                        series[i].pieData.endRatio,
                        false,
                        false,
                        k,
                        series[i].pieData.value
                    );

                    startValue = endValue;

                    legendData.push(series[i].name);
                }
                return series;
            };
            // 传入数据生成 option
            const optionsData = [
                {
                    name: "楼宇",
                    value: 4256,
                    itemStyle: {
                        //   opacity: 0.5,
                        color: "#2A71FF",
                    },
                },

                {
                    name: "工业",
                    value: 2356,
                    itemStyle: {
                        //   opacity: 0.5,
                        color: "#00EDFE",
                    },
                },
                {
                    name: "其他",
                    value: 2018,
                    itemStyle: {
                        //   opacity: 0.5,
                        color: "#FEDB4B",
                    },
                },
            ];
            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
            series.push({
                name: "pie2d",
                type: "pie",

                label: {
                    show: false,
                    opacity: 1,
                    fontSize: fontSizeRem(14),
                    lineHeight: 20,
                    textStyle: {
                        fontSize: fontSizeRem(14),
                        color: "#fff",
                    },
                },
                labelLine: {
                    length: 30,
                    length2: 30,
                },
                startAngle: -30, //起始角度，支持范围[0, 360]。
                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
                radius: ["40%", "60%"],
                //   center: ["30%", "50%"],
                center: ["40%", "50%"],
                data: optionsData,
                itemStyle: {
                    opacity: 0,
                },
            });
            let data = [
                {
                    name: "楼宇",
                    value: "30%",
                },
                {
                    name: "工业",
                    value: "30%",
                },
                {
                    name: "其他",
                    value: "40%",
                },
            ];
            // 准备待返回的配置项，把准备好的 legendData、series 传入。
            let option = {
                legend: {
                    show: true,
                    tooltip: {
                        show: false,
                    },
                    orient: "vertical",
                    data: data,
                    top: "center",
                    itemGap: 14,
                    itemHeight: 8,
                    itemWidth: 17,
                    right: "2%",
                    textStyle: {
                        color: "#fff",
                        fontSize: fontSizeRem(12),
                    },
                    formatter: function (name) {
                        let res = data.filter((v) => v.name === name);
                        res = res[0] || {};
                        let unit = res.unit || "";
                        return name + "    " + res.value + unit;
                    },
                },
                animation: false,
                tooltip: {
                    show: false,
                    formatter: (params) => {
                        if (
                            params.seriesName !== "mouseoutSeries" &&
                            params.seriesName !== "pie2d"
                        ) {
                            return `${params.seriesName
                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
                                }`;
                        }
                    },
                    textStyle: {
                        fontSize: fontSizeRem(14),
                    },
                },
                title: {
                    x: "center",
                    top: "20",
                    textStyle: {
                        color: "#fff",
                        fontSize: fontSizeRem(22),
                    },
                },
                // backgroundColor: "#0E3567",
                labelLine: {
                    show: false,
                    lineStyle: {
                        color: "#7BC0CB",
                    },
                    normal: {
                        show: true,
                        length: 10,
                        length2: 10,
                    },
                },
                label: {
                    show: false,
                    // position: "outside",
                    // formatter: "{b} \n{d}%",
                    // textStyle: {
                    //   color: "#fff",
                    //   fontSize: "14px",
                    // },
                },
                xAxis3D: {
                    min: -1,
                    max: 1,
                },
                yAxis3D: {
                    min: -1,
                    max: 1,
                },
                zAxis3D: {
                    min: -1,
                    max: 1,
                },
                grid3D: {
                    show: false,
                    boxHeight: 0.01,
                    //top: '30%',
                    bottom: "50%",
                    left: "-7%",
                    // environment: "rgba(255,255,255,0)",
                    viewControl: {
                        distance: 180,
                        alpha: 25,
                        beta: 60,
                    },
                },
                series: series,
            };
            this.defineEcharts("ynflzb", option);
        },
    },
    mounted() {
        this.defineEcharts("ssfhzs", this.option);
        this.defineEcharts("ynl", this.option1);
        this.initYhhyzb();
        this.initYnflzb();

        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%;

            .jrtj {
                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: 18;
                    font-weight: 700;
                    color: rgba(255, 255, 255, 0.87);
                    line-height: 36px;
                }

                .centers {
                    width: 217px;
                    height: 126px;
                    position: absolute;
                    left: 50px;
                    top: 36px;
                    // text-align: center;
                    display: block;

                    p:nth-child(1) {
                        width: 81px;
                        height: 25px;
                        font-size: 24;
                        text-align: center;
                        font-weight: 500;
                        color: #29F1FA;
                        line-height: 22px;
                        position: absolute;
                        left: 50px;
                    }

                    p:nth-child(2) {
                        width: 71px;
                        height: 25px;
                        text-align: center;
                        font-size: 12;
                        font-weight: 250;
                        color: #FFFFFF;
                        line-height: 22px;
                    }

                    img {
                        width: 217px;
                        height: 126px;
                    }
                }

                .insides {
                    margin-top: 56px;
                    width: 436px;
                    height: 294px;
                    display: flex;
                    justify-content: space-around;
                    flex-wrap: wrap;
                    position: relative;

                    .con {
                        width: 156px;
                        display: flex;

                        img {
                            width: 50px;
                            height: 60px;
                            display: block;
                        }

                        p:nth-child(1) {
                            color: #fff;
                        }

                        p:nth-child(2) {
                            width: 56px;
                            height: 22px;
                            font-size: 14;
                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
                            font-weight: 300;
                            color: #7DD9DD;
                            line-height: 22px;
                        }
                    }
                }
            }

            .ssfhzs {
                height: 315px;
                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
                background-size: cover;
                margin-top: 6px;
                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;
                }

                .typeBox {
                    list-style: none;
                    display: flex;
                    position: absolute;
                    top: 54px;
                    right: 20px;
                    // left: 50%;
                    // transform: translateX(-50%);

                    li {
                        width: 39px;
                        height: 21px;
                        background: rgba(29, 29, 29, 0.5);
                        border-radius: 2px 2px 2px 2px;
                        font-size: 14px;
                        border: 1px solid #666666;
                        text-align: center;
                        margin: 2.5px;
                        cursor: pointer;
                    }

                    .active {
                        background: rgba(10, 167, 255, 0.3);
                        border: 1px solid #0aa7ff;
                    }
                }

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

            .ynl {
                height: 325px;
                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
                background-size: cover;
                margin-top: 6px;

                position: relative;

                .title {
                    position: absolute;
                    left: 190px;
                    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;
                }

                .typeBox {
                    list-style: none;
                    display: flex;
                    position: absolute;
                    top: 54px;
                    left: 50%;
                    transform: translateX(-50%);

                    li {
                        width: 39px;
                        height: 21px;
                        background: rgba(29, 29, 29, 0.5);
                        border-radius: 2px 2px 2px 2px;
                        font-size: 14px;
                        border: 1px solid #666666;
                        text-align: center;
                        margin: 2.5px;
                        cursor: pointer;
                    }

                    .active {
                        background: rgba(10, 167, 255, 0.3);
                        border: 1px solid #0aa7ff;
                    }
                }

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

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

            .tyjg {
                height: 294px;
                width: 100%;
                background: url("../assets/tan/组\ 3142.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;
                }

                #tyjg {
                    width: 100%;
                    height: 100%;
                    .tbg{
                        width: 100%;
                        
                    }
                }
            }

            .ynflzb {
                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;
                }

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

                .pic {
                    width: 300px;
                    position: absolute;
                    height: 150px;
                    top: 100px;
                    left: 40px;
                }
            }

            .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: 994px;
            height: 325px;
            background: url("../assets/客户侧总体用能情况分析/组 3120.png");
            background-size: cover;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }

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