<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 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="yhhyzb">
                    <p class="title">用户行业占比</p>
                    <div id="yhhyzb"></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>
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: "cross",
                //     label: {
                //       backgroundColor: "#6a7985",
                //     },
                //   },
                // },
                legend: {
                    left: "right",
                    data: [
                        { icon: "roundRect", name: "昨日" },
                        { icon: "roundRect", name: "今日" },
                    ],
                    textStyle: {
                        fontSize: fontSizeRem(14),
                        fontFamily: "AlibabaPuHuiTi",
                        fontWeight: 400,
                        color: "rgba(255,255,255,0.8)",
                    },
                },

                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
                        axisLabel: {
                            show: true,
                            textStyle: {
                                fontSize: fontSizeRem(14),
                                fontFamily: "AlibabaPuHuiTi",
                                fontWeight: 400,
                                color: "rgba(255,255,255,0.8)",
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "单位:KW",
                        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: "昨日",
                        type: "line",
                        // stack: "Total",
                        smooth: true,
                        lineStyle: {
                            width: 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],
                    },
                    {
                        name: "今日",
                        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],
                    },
                ],
            },
            option1: {
                legend: {
                    left: "right",
                    data: [{ icon: "roundRect", name: "用电量" }],
                    textStyle: {
                        fontSize: fontSizeRem(14),
                        fontFamily: "AlibabaPuHuiTi",
                        fontWeight: 400,
                        color: "rgba(255,255,255,0.8)",
                    },
                },

                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: true,
                        data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
                        axisLabel: {
                            show: true,
                            textStyle: {
                                fontSize: fontSizeRem(14),
                                fontFamily: "AlibabaPuHuiTi",
                                fontWeight: 400,
                                color: "rgba(255,255,255,0.8)",
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "单位:MWH",
                        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: "用电量",
                        type: "bar",
                        stack: "myBar",

                        showSymbol: false,
                        itemStyle: {
                            color: "#29F1FA",
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#033BFF",
                                        },
                                        {
                                            offset: 1,
                                            color: "#01B1FF",
                                        },
                                        // {
                                        //   offset: 1,
                                        //   color: "#01B1FF",
                                        // },
                                    ],
                                    false
                                ),
                            },
                        },
                        data: [220, 402, 231, 134, 190, 230, 120],
                    },
                ],
            },
        };
    },
    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)
        },
    },
    mounted() {
        // this.defineEcharts("ssfhzs", this.option);
        // this.defineEcharts("ynl", this.option1);
        this.qyyh();
        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: 86px;
                        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;
                        }
                    }

                    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;

                .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: 86px;
                        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;
                }
            }

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

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

                #yhhyzb {
                    width: 100%;
                    height: 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>
  