<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 class="left">
                                <div v-for="(item, index) in controls1" :key="index" class="t_con">
                                    <p class="t_name">{{ item.name }}</p>
                                    <p class="t_footer"><span class="t_count">{{ item.count }}</span>
                                        <span class="t_img1" v-if="item.isShow == true">
                                            {{ item.percent }}
                                            <img src="../assets/tan/325数值上升.png" alt="">
                                        </span>
                                        <span class="t_img2" v-else>
                                            {{ item.percent }}%
                                            <img src="../assets/tan/325数值上升 (2).png" alt="">
                                        </span>
                                    </p>
                                </div>
                            </div>
                            <div class="cen_img">
                                <img src="../assets/tan/组 3141.png" alt="">
                            </div>
                            <div class="right">
                                <div v-for="(item, index) in controls2" :key="index" class="t_con">
                                    <p class="t_name">{{ item.name }}</p>
                                    <p class="t_footer"><span class="t_count">{{ item.count }}</span>
                                        <span class="t_img1" v-if="item.isShow == true">
                                            {{ item.percent }}
                                            <img src="../assets/tan/325数值上升.png" alt="">
                                        </span>
                                        <span class="t_img2" v-else>
                                            {{ item.percent }}%
                                            <img src="../assets/tan/325数值上升 (2).png" alt="">
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ynflzb">
                    <p class="title">主要能源消耗情况</p>
                    <div id="ynflzb"></div>
                </div>
                <div class="qyydlpm">
                    <p class="title">企业碳排放量排名 <span class="danwei">单位（万吨）</span></p>
                    <ul class="list">
                        <li v-for="(item, index) in list" :style="listClass(index)">
                            <p>{{ index + 1 }}</p>
                            <p>{{ item.name }}</p>
                            <p>{{ item.value }}</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="map"></div>
            <div class="footer">
                <div class="qyhyfb">
                    <p class="title">企业行业分布</p>
                    <div id="qyhyfb"></div>
                </div>
                <div class="hytpfzl">
                    <p class="title">行业碳排放总量</p>
                    <div id="hytpfzl">
                        <div id="dl"></div>
                        <div id="gt"></div>
                        <div id="sn"></div>
                        <div id="zj"></div>
                        <div id="sh"></div>
                        <div id="hg"></div>
                    </div>
                </div>
            </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",
                },
            ],
            controls2: [
                {
                    name: "汽油（万升）",
                    count: "2566",
                    isShow: true,
                    percent: "10",
                },
                {
                    name: "柴油（万升）",
                    count: "6566",
                    isShow: true,
                    percent: "10",
                },
                {
                    name: "煤（吨）",
                    count: "4566",
                    isShow: true,
                    percent: "10",
                },
            ],
            controls1: [
                {
                    name: "电（万度）",
                    count: "4566",
                    isShow: true,
                    percent: "10",
                },

                {
                    name: "水（万吨）",
                    count: "5566",
                    isShow: false,
                    percent: "10",
                },

                {
                    name: "燃气（立方）",
                    count: "7566",
                    isShow: true,
                    percent: "10",
                },
            ],
            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],
                    },
                ],
            },
            circles1: {
                // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
                title: [
                    // {
                    //     text: "单位：%",
                    //     top: 0,
                    //     left: 0,
                    //     textStyle: {
                    //         fontWeight: "normal",
                    //         fontSize: 16,
                    //         color: "#fff",
                    //     },
                    // },
                    {
                        text: "{a|" + Math.round(80 * 100 / 100) + "}",
                        show: true,
                        x: "center",
                        y: "36%",
                        textStyle: {
                            rich: {
                                a: {
                                    fontSize: fontSizeRem(16),
                                    color: "#FFFFFF",
                                    fontWeight: "bold",
                                },
                            },
                        },
                    },
                    {
                        text: '电力',
                        x: "center",
                        y: "50%",
                        borderColor: "#fff",
                        textStyle: {
                            fontWeight: "normal",
                            fontSize: fontSizeRem(12),
                            color: "#fff",
                        },
                    },
                ],
                polar: {
                    center: ["50%", "40%"],
                    radius: ["60%", "75%"],
                },
                angleAxis: {
                    max: 100,
                    show: false,
                },
                radiusAxis: {
                    type: "category",
                    show: true,
                    axisLabel: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                },
                series: [
                    {
                        data: [80],
                        name: "",
                        type: "bar",
                        roundCap: true,
                        showBackground: true,
                        backgroundStyle: {
                            color: "rgba(19, 84, 146, .4)",
                        },
                        coordinateSystem: "polar",
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: "#005DCF",
                                    },
                                    {
                                        offset: 1,
                                        color: "#00CCFF",
                                    },
                                ]),
                            },
                        },
                    },
                ],
            },
            circles2: {
                // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
                title: [
                    // {
                    //     text: "单位：%",
                    //     top: 0,
                    //     left: 0,
                    //     textStyle: {
                    //         fontWeight: "normal",
                    //         fontSize: 16,
                    //         color: "#fff",
                    //     },
                    // },
                    {
                        text: "{a|" + Math.round(80 * 100 / 100) + "}",
                        show: true,
                        x: "center",
                        y: "35%",
                        textStyle: {
                            rich: {
                                a: {
                                    fontSize: fontSizeRem(16),
                                    color: "#FFFFFF",
                                    fontWeight: "bold",
                                },
                            },
                        },
                    },
                    {
                        text: '电力',
                        x: "center",
                        y: "50%",
                        borderColor: "#fff",
                        textStyle: {
                            fontWeight: "normal",
                            fontSize: fontSizeRem(12),
                            color: "#fff",
                        },
                    },
                ],
                polar: {
                    center: ["50%", "40%"],
                    radius: ["60%", "75%"],
                },
                angleAxis: {
                    max: 100,
                    show: false,
                },
                radiusAxis: {
                    type: "category",
                    show: true,
                    axisLabel: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                },
                series: [
                    {
                        data: [80],
                        name: "",
                        type: "bar",
                        roundCap: true,
                        showBackground: true,
                        backgroundStyle: {
                            color: "rgba(19, 84, 146, .4)",
                        },
                        coordinateSystem: "polar",
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: "#005DCF",
                                    },
                                    {
                                        offset: 1,
                                        color: "#00CCFF",
                                    },
                                ]),
                            },
                        },
                    },
                ],
            },
            circles3: {
                // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
                title: [
                    // {
                    //     text: "单位：%",
                    //     top: 0,
                    //     left: 0,
                    //     textStyle: {
                    //         fontWeight: "normal",
                    //         fontSize: 16,
                    //         color: "#fff",
                    //     },
                    // },
                    {
                        text: "{a|" + Math.round(80 * 100 / 100) + "}",
                        show: true,
                        x: "center",
                        y: "35%",
                        textStyle: {
                            rich: {
                                a: {
                                    fontSize: fontSizeRem(16),
                                    color: "#FFFFFF",
                                    fontWeight: "bold",
                                },
                            },
                        },
                    },
                    {
                        text: '电力',
                        x: "center",
                        y: "center",
                        borderColor: "#fff",
                        textStyle: {
                            fontWeight: "normal",
                            fontSize: fontSizeRem(12),
                            color: "#fff",
                        },
                    },
                ],
                polar: {
                    center: ["50%", "40%"],
                    radius: ["60%", "75%"],
                },
                angleAxis: {
                    max: 100,
                    show: false,
                },
                radiusAxis: {
                    type: "category",
                    show: true,
                    axisLabel: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                },
                series: [
                    {
                        data: [80],
                        name: "",
                        type: "bar",
                        roundCap: true,
                        showBackground: true,
                        backgroundStyle: {
                            color: "rgba(19, 84, 146, .4)",
                        },
                        coordinateSystem: "polar",
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: "#005DCF",
                                    },
                                    {
                                        offset: 1,
                                        color: "#00CCFF",
                                    },
                                ]),
                            },
                        },
                    },
                ],
            },
            circles4: {
                // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
                title: [
                    // {
                    //     text: "单位：%",
                    //     top: 0,
                    //     left: 0,
                    //     textStyle: {
                    //         fontWeight: "normal",
                    //         fontSize: 16,
                    //         color: "#fff",
                    //     },
                    // },
                    {
                        text: "{a|" + Math.round(80 * 100 / 100) + "}",
                        show: true,
                        x: "center",
                        y: "35%",
                        textStyle: {
                            rich: {
                                a: {
                                    fontSize: fontSizeRem(16),
                                    color: "#FFFFFF",
                                    fontWeight: "bold",
                                },
                            },
                        },
                    },
                    {
                        text: '电力',
                        x: "center",
                        y: "center",
                        borderColor: "#fff",
                        textStyle: {
                            fontWeight: "normal",
                            fontSize: fontSizeRem(12),
                            color: "#fff",
                        },
                    },
                ],
                polar: {
                    center: ["50%", "40%"],
                    radius: ["60%", "75%"],
                },
                angleAxis: {
                    max: 100,
                    show: false,
                },
                radiusAxis: {
                    type: "category",
                    show: true,
                    axisLabel: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                },
                series: [
                    {
                        data: [80],
                        name: "",
                        type: "bar",
                        roundCap: true,
                        showBackground: true,
                        backgroundStyle: {
                            color: "rgba(19, 84, 146, .4)",
                        },
                        coordinateSystem: "polar",
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: "#005DCF",
                                    },
                                    {
                                        offset: 1,
                                        color: "#00CCFF",
                                    },
                                ]),
                            },
                        },
                    },
                ],
            },
            circles5: {
                // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
                title: [
                    // {
                    //     text: "单位：%",
                    //     top: 0,
                    //     left: 0,
                    //     textStyle: {
                    //         fontWeight: "normal",
                    //         fontSize: 16,
                    //         color: "#fff",
                    //     },
                    // },
                    {
                        text: "{a|" + Math.round(80 * 100 / 100) + "}",
                        show: true,
                        x: "center",
                        y: "35%",
                        textStyle: {
                            rich: {
                                a: {
                                    fontSize: fontSizeRem(16),
                                    color: "#FFFFFF",
                                    fontWeight: "bold",
                                },
                            },
                        },
                    },
                    {
                        text: '电力',
                        x: "center",
                        y: "center",
                        borderColor: "#fff",
                        textStyle: {
                            fontWeight: "normal",
                            fontSize: fontSizeRem(12),
                            color: "#fff",
                        },
                    },
                ],
                polar: {
                    center: ["50%", "40%"],
                    radius: ["60%", "75%"],
                },
                angleAxis: {
                    max: 100,
                    show: false,
                },
                radiusAxis: {
                    type: "category",
                    show: true,
                    axisLabel: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                },
                series: [
                    {
                        data: [80],
                        name: "",
                        type: "bar",
                        roundCap: true,
                        showBackground: true,
                        backgroundStyle: {
                            color: "rgba(19, 84, 146, .4)",
                        },
                        coordinateSystem: "polar",
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: "#005DCF",
                                    },
                                    {
                                        offset: 1,
                                        color: "#00CCFF",
                                    },
                                ]),
                            },
                        },
                    },
                ],
            },
            circles6: {
                // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
                title: [
                    // {
                    //     text: "单位：%",
                    //     top: 0,
                    //     left: 0,
                    //     textStyle: {
                    //         fontWeight: "normal",
                    //         fontSize: 16,
                    //         color: "#fff",
                    //     },
                    // },
                    {
                        text: "{a|" + Math.round(80 * 100 / 100) + "}",
                        show: true,
                        x: "center",
                        y: "35%",
                        textStyle: {
                            rich: {
                                a: {
                                    fontSize: fontSizeRem(16),
                                    color: "#FFFFFF",
                                    fontWeight: "bold",
                                },
                            },
                        },
                    },
                    {
                        text: '电力',
                        x: "center",
                        y: "center",
                        borderColor: "#fff",
                        textStyle: {
                            fontWeight: "normal",
                            fontSize: fontSizeRem(12),
                            color: "#fff",
                        },
                    },
                ],
                polar: {
                    center: ["50%", "40%"],
                    radius: ["60%", "75%"],
                },
                angleAxis: {
                    max: 100,
                    show: false,
                },
                radiusAxis: {
                    type: "category",
                    show: true,
                    axisLabel: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                },
                series: [
                    {
                        data: [80],
                        name: "",
                        type: "bar",
                        roundCap: true,
                        showBackground: true,
                        backgroundStyle: {
                            color: "rgba(19, 84, 146, .4)",
                        },
                        coordinateSystem: "polar",
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: "#005DCF",
                                    },
                                    {
                                        offset: 1,
                                        color: "#00CCFF",
                                    },
                                ]),
                            },
                        },
                    },
                ],
            },
        };
    },
    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();
            });
        },
        //用户行业占比
        initYhhyzb() {
            let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"];
            let echartData = [
                {
                    name: "钢筋",
                    value: "10",
                },
                {
                    name: "水泥",
                    value: "20",
                },
                {
                    name: "化工",
                    value: "30",
                },
                {
                    name: "制造",
                    value: "20",
                },
                {
                    name: "其他",
                    value: "20",
                },
            ];
            let formatNumber = function (num) {
                let reg = /(?=(\B)(\d{3})+$)/g;
                return num.toString().replace(reg, ",");
            };
            let total = echartData.reduce((a, b) => {
                return a + b.value * 1;
            }, 0);
            let option = {
                color: color,
                // tooltip: {
                //   trigger: "item",
                // },
                title: [
                    {
                        text: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
                        top: "center",
                        left: 110,
                        textStyle: {
                            rich: {
                                name: {
                                    fontSize: fontSizeRem(14),
                                    fontWeight: "normal",
                                    color: "#fff",
                                    padding: [10, 0],
                                },
                                val: {
                                    fontSize: fontSizeRem(32),
                                    fontWeight: "bold",
                                    color: "#fff",
                                },
                            },
                        },
                    },
                ],
                legend: {
                    orient: "vertical",
                    icon: "circle",
                    x: "70%",
                    y: "center",
                    itemWidth: 12,
                    itemHeight: 12,
                    align: "left",
                    textStyle: {
                        color: "#",
                        rich: {
                            name: {
                                fontSize: fontSizeRem(12),
                            },
                            value: {
                                fontSize: fontSizeRem(16),
                                padding: [0, 5, 0, 15],
                            },
                            unit: {
                                fontSize: fontSizeRem(12),
                            },
                        },
                    },
                    formatter: function (name) {
                        let res = echartData.filter((v) => v.name === name);
                        res = res[0] || {};
                        let unit = res.unit || "";
                        return (
                            "{name|" +
                            name +
                            "}  {value|" +
                            res.value +
                            "%" +
                            "}{unit|" +
                            unit +
                            "}"
                        );
                    },
                },
                series: [
                    {
                        type: "pie",
                        // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
                        animation: false, // 禁止动画效果
                        radius: ["45%", "60%"],
                        center: ["40%", "50%"],
                        data: echartData,

                        itemStyle: {
                            normal: {
                                borderWidth: 0,
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        label: {
                            show: false,
                        },
                    },
                ],
            };
            this.defineEcharts("qyhyfb", option);
        },
        // dl() {
        //     const value = 845;
        //     const rate = Math.round(value * 100 / 100);
        //     let option = {
        //         title: [
        //             {
        //                 text: "{a|" + rate + "}",
        //                 show: true,
        //                 x: "center",
        //                 y: "32%",
        //                 textStyle: {
        //                     rich: {
        //                         a: {
        //                             fontSize: fontSizeRem(14),
        //                             color: "#27E9BF",
        //                             fontWeight: "bold",
        //                         },
        //                     },
        //                 },
        //             },
        //             {
        //                 text: '电力',
        //                 x: "center",
        //                 y: "50%",
        //                 borderColor: "#fff",
        //                 textStyle: {
        //                     fontWeight: "normal",
        //                     fontSize: fontSizeRem(12),
        //                     color: "#fff",
        //                 },
        //             },
        //         ],
        //         polar: {
        //             center: ["50%", "40%"],
        //             radius: ["60%", "75%"],
        //         },
        //         angleAxis: {
        //             max: 100,
        //             show: false,
        //         },
        //         radiusAxis: {
        //             type: "category",
        //             show: true,
        //             axisLabel: {
        //                 show: false,
        //             },
        //             axisLine: {
        //                 show: false,
        //             },
        //             axisTick: {
        //                 show: false,
        //             },
        //         },
        //         series: [
        //             {
        //                 data: [value],
        //                 name: "",
        //                 type: "bar",
        //                 roundCap: true,
        //                 showBackground: true,
        //                 backgroundStyle: {
        //                     color: "rgba(19, 84, 146, .4)",
        //                 },
        //                 coordinateSystem: "polar",
        //                 itemStyle: {
        //                     normal: {
        //                         color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        //                             {
        //                                 offset: 0,
        //                                 color: "#005DCF",
        //                             },
        //                             {
        //                                 offset: 1,
        //                                 color: "#00CCFF",
        //                             },
        //                         ]),
        //                     },
        //                 },
        //             },
        //         ],
        //     }
        //     this.defineEcharts("dl", option);
        // }
    },
    mounted() {
        this.initYhhyzb();
        this.defineEcharts("ssfhzs", this.option);
        this.defineEcharts("ynl", this.option1);
        // this.dl();
        this.defineEcharts("dl", this.circles1);
        this.defineEcharts("gt", this.circles2);
        this.defineEcharts("sn", this.circles3);
        this.defineEcharts("zj", this.circles4);
        this.defineEcharts("sh", this.circles5);
        this.defineEcharts("hg", this.circles6);
        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%;

                    .t_content {
                        width: 100%;
                        height: 300px;
                        display: flex;
                        justify-content: space-around;
                        // flex-wrap: wrap;
                        // align-content: space-between;
                    }

                    .cen_img {
                        width: 159px;
                        height: 159px;
                        border: none;
                        display: block;
                        margin: 0 auto;
                        margin-top: 90px;

                        img {
                            width: 159px;
                            height: 159px;
                            border: none;
                            display: block;
                            margin: 0 auto;
                        }
                    }

                    .t_con {
                        width: 106px;
                        height: 52px;
                        margin-left: 20px;
                        margin-top: 60px;
                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
                        border-radius: 4px 4px 4px 4px;
                        opacity: 1;
                        padding: 2px;
                        border: 1px solid #061A4D;
                        box-sizing: border-box;


                        .t_name {
                            width: 90px;
                            height: 36px;
                            font-size: 12px;
                            // font-family: Source Han Sans, Source Han Sans;
                            font-weight: 350;
                            color: #FFFFFF;
                            line-height: 36px;
                            display: block;
                        }

                        .t.footer {
                            display: flex;

                            .t_count {
                                width: 42px;
                                height: 36px;
                                font-size: 18px;
                                // font-family: Source Han Sans, Source Han Sans;
                                font-weight: 500;
                                color: #FFFFFF;
                                line-height: 36px;
                                display: block;
                            }

                            .t_img1 {
                                width: 25px;
                                height: 36px;
                                font-size: 12px;
                                font-family: Source Han Sans, Source Han Sans;
                                font-weight: 350;
                                color: #0CD9B5;
                                line-height: 36px;
                                display: block;
                            }

                            .t_img2 {
                                padding: 0;
                                width: 25px;
                                height: 36px;
                                font-size: 12px;
                                font-family: Source Han Sans, Source Han Sans;
                                font-weight: 350;
                                line-height: 36px;
                                color: #F71F1F;
                                display: block;

                                img {
                                    width: 12px;
                                    height: 12px;
                                }
                            }
                        }
                    }

                    .t_con:nth-child(n+2) {
                        margin-top: 20px;
                    }
                }
            }

            .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: 136px;
                    width: 246px;
                    height: 36px;
                    font-size: 18px;
                    font-family: "Source Han Sans";
                    font-weight: 700;
                    color: rgba(255, 255, 255, 0.87);
                    line-height: 36px;
                    display: flex;
                    // justify-content: flex-start;

                    .danwei {
                        // position: absolute;
                        // right: 50px;
                        width: 75px;
                        height: 14px;
                        font-size: 12px;
                        // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
                        font-weight: 400;
                        color: #FFFFFF;
                        line-height: 14px;
                        display: block;
                    }
                }

                .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%);
            display: flex;
            justify-content: space-between;

            .qyhyfb {
                width: 492px;
                height: 100%;
                background: url(../assets/tan/组\ 3126.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;
                }

                #qyhyfb {
                    width: 100%;
                    height: 300px;
                }
            }

            .hytpfzl {
                width: 492px;
                height: 100%;
                background: url(../assets/tan/组\ 3126.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;
                }

                #hytpfzl {
                    width: 100%;
                    height: 100%;
                    padding-top: 50px;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-around;
                    align-content: center;
                    // align-items: center;

                    #dl,
                    #gt,
                    #sn,
                    #zj,
                    #sh,
                    #hg {
                        width: 132px;
                        height: 132px;
                        // background-color: red;
                    }
                }

            }
        }

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